Free Online Ovulation and Safe Days Fertility Calculator

A professional, privacy-first, web-based tool designed to help users estimate their fertile window and ovulation date based on menstrual cycle inputs. The application provides a clear, high-contrast visual representation of a user's cycle without requiring any login or backend database connection.

Core Features

• Cycle Input Module: Intuitive form fields to input 'Cycle Length' (days), 'Period Length' (days), and 'First Day of Last Period'.
• Live Calculation: Instant estimation of ovulation date and high-fertility window (5 days before + ovulation day).
• Visual Cycle Timeline: A color-coded visual indicator displaying the next expected period, the fertile window, and the safest days for conception planning.
• Medical Disclaimer Modal: A non-intrusive, custom-built modal that appears upon initialization to remind users that this is an estimation tool, not a medical diagnosis.
• Privacy Guarantee: Zero-storage architecture ensuring that no personal health data is saved in browser storage (localStorage/sessionStorage).

UI/UX Specification

• Layout:
  • Header: Minimalist header with a professional title and a 'Clear/Reset' button.
  • Main Area: A two-column desktop layout (inputs on left, results on right) that stacks vertically on mobile devices.
  • Results Section: Large, readable cards using soft shadows and rounded corners to present the 'Next Ovulation Date' and 'Fertile Window' range.
• Aesthetic:
  • Palette: High-end light-mode SaaS aesthetic.
    • Background: #F8FAFC (Cool Slate)
    • Card Background: #FFFFFF (White)
    • Primary Accent: #2563EB (Professional Blue)
    • Success/Safe Highlight: #16A34A (Sage Green)
    • Text: #1E293B (Dark Slate)
  • Transitions: Smooth CSS easing (ease-in-out) for showing/hiding results and hover effects on buttons.

Developer Directives

• Strict Constraint Compliance:
  • NO localStorage, sessionStorage, or IndexedDB. All calculations must be derived from memory based on form state.
  • NO external tracking scripts.
  • NO default browser prompts (alert, confirm, prompt). Use a custom <div> modal for disclaimers.
• Responsiveness: Ensure form inputs are touch-friendly (44px+ height) and font sizes are legible on small screens (minimum 16px body text).
• Architecture: The entire tool (HTML/CSS/JS) must be contained in one file using <style> and <script> tags.
• Performance: Ensure all logic is optimized for client-side execution; avoid heavy external dependencies where possible.