<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fertility & Cycle Tracker — Guide</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #0a0c10;
      --bg-card: #12141a;
      --bg-card-hover: #181b24;
      --text: #e4e4e7;
      --text-muted: #8b8d97;
      --accent: #6ee7b7;
      --accent-dim: #34d399;
      --accent-glow: rgba(110, 231, 183, 0.08);
      --border: #1e2230;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 24px 100px;
    }

    .back-nav {
      padding: 24px 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 48px;
    }
    .back-nav a {
      color: var(--accent);
      text-decoration: none;
      font-size: 0.9em;
      font-weight: 500;
    }
    .back-nav a:hover {
      text-decoration: underline;
    }

    h1 {
      font-family: 'Merriweather', Georgia, serif;
      font-size: 2.5em;
      font-weight: 900;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
      background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .subtitle {
      color: var(--text-muted);
      font-size: 1.05em;
      margin-bottom: 40px;
    }

    .section {
      margin-bottom: 40px;
    }
    .section h2 {
      font-family: 'Merriweather', Georgia, serif;
      font-size: 1.4em;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--accent);
    }
    .section p {
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 12px;
    }

    .steps {
      list-style: none;
      counter-reset: step;
    }
    .steps li {
      counter-increment: step;
      padding: 12px 0 12px 40px;
      position: relative;
      color: var(--text-muted);
      line-height: 1.7;
    }
    .steps li::before {
      content: counter(step);
      position: absolute;
      left: 0;
      top: 12px;
      width: 24px;
      height: 24px;
      background: var(--accent);
      color: #0a0c10;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8em;
      font-weight: 700;
    }

    code {
      font-family: 'Courier New', monospace;
      background: var(--bg-card);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.88em;
      color: var(--accent);
    }

    .callout {
      background: var(--bg-card);
      border-left: 4px solid var(--accent);
      padding: 16px 20px;
      border-radius: 0 8px 8px 0;
      margin: 20px 0;
    }
    .callout p {
      color: var(--text);
      font-size: 0.92em;
      margin: 0;
    }

    .phases {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }
    .phase-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
    }
    .phase-card h3 {
      font-family: 'Merriweather', Georgia, serif;
      font-size: 1.1em;
      margin-bottom: 8px;
      color: var(--accent);
    }
    .phase-card p {
      font-size: 0.85em;
      color: var(--text-muted);
      margin: 0;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="back-nav">
      <a href="../index.html">← Back to Tools</a>
    </div>

    <h1>Fertility & Cycle Tracker</h1>
    <p class="subtitle">A complete guide to using the application</p>

    <div class="section">
      <h2>Getting Started</h2>
      <p>Download the ZIP file, extract it to a folder, and run the app:</p>
      <ul class="steps">
        <li><code>cd fertility-tracker</code></li>
        <li><code>python3 main.py</code></li>
      </ul>
      <p>Requirements: Python 3.8+ with tkinter. On Linux, install with <code>sudo apt install python3-tk</code>.</p>
    </div>

    <div class="section">
      <h2>First Setup</h2>
      <p>Open the **Profile & Settings** tab and enter:</p>
      <ul class="steps">
        <li>Your birth date, time, and place (for astrology features)</li>
        <li>Your average cycle length and period length</li>
        <li>Your goal: trying to conceive, avoiding pregnancy, or wellness</li>
        <li>Diet preferences (vegetarian, vegan, gluten-free, dairy-free)</li>
      </ul>
    </div>

    <div class="section">
      <h2>Using the Calendar</h2>
      <p>The monthly calendar shows your cycle phases at a glance:</p>
      <div class="phases">
        <div class="phase-card">
          <h3>🩸 Menstrual</h3>
          <p>Days 1-5. Period tracking and rest recommendations.</p>
        </div>
        <div class="phase-card">
          <h3>🟢 Follicular</h3>
          <p>Days 6-14. Rising energy, protein & healthy fats.</p>
        </div>
        <div class="phase-card">
          <h3>🔴 Ovulation</h3>
          <p>Day ~14. Fertile window, light & hydrating foods.</p>
        </div>
        <div class="phase-card">
          <h3>🌙 Luteal</h3>
          <p>Days 15-28. Magnesium-rich, blood sugar stabilizing.</p>
        </div>
      </div>
      <p>Hover over any day for quick info. Click for detailed cycle, fertility, and moon data.</p>
    </div>

    <div class="section">
      <h2>Supplement Framework</h2>
      <p>The app uses a tiered supplement system aligned to your cycle phase:</p>
      <ul class="steps">
        <li><strong>Tier 1 (Foundation):</strong> Omega-3, Vitamin D3+K2, Magnesium, Methylated B-Complex</li>
        <li><strong>Tier 2 (Targeted):</strong> Ubiquinol, NAC, Curcumin, Prebiotics, Iron, Zinc</li>
        <li><strong>Tier 3 (Advanced):</strong> Creatine, Lithium Orotate, Methylene Blue</li>
      </ul>
    </div>

    <div class="section">
      <h2>Data Storage</h2>
      <div class="callout">
        <p>All data stays on your machine — no cloud required. Stored at <code>~/.fertility_tracker_data/fertility_tracker.json</code></p>
      </div>
    </div>

    <div class="section">
      <h2>Cycle Calculation</h2>
      <p>Ovulation is predicted using the luteal phase constancy method: the luteal phase (post-ovulation) is typically 14 days. Ovulation day = Cycle length − 14. The fertile window = 5 days before ovulation through 1 day after.</p>
      <p>This method becomes more accurate as more cycle data is logged over time.</p>
    </div>

    <div class="section">
      <h2>Astrology Features</h2>
      <p>The app calculates real-time moon phases and your birth chart basics:</p>
      <ul class="steps">
        <li>Sun sign from your birth date</li>
        <li>Moon phase at birth and current moon phase</li>
        <li>Moon-cycle alignment mapping</li>
        <li>Seasonal health guidance based on birth season</li>
      </ul>
      <div class="callout">
        <p>This is educational information, not medical advice. Always consult your healthcare provider before starting new supplements, especially if you have medical conditions or are taking medications.</p>
      </div>
    </div>
  </div>

</body>
</html>
