flowtrack/static/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Flowtrack</title>
    <meta name="description" content="A private period tracker with cycle predictions.">
    <meta name="theme-color" content="#faf6f4" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#18141b" media="(prefers-color-scheme: dark)">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Flowtrack">
    <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="stylesheet" href="/styles.css?v=1.2.0">
  </head>
  <body>
    <header class="topbar">
      <h1>Flowtrack</h1>
      <span class="badge" id="role-badge" hidden>View only</span>
    </header>

    <main>
      <p class="banner" id="banner" role="status" hidden></p>

      <section class="view" id="view-today" aria-labelledby="tab-today">
        <div class="hero card" id="hero"></div>
        <div class="card" id="today-log"></div>
        <p class="footnote">Predictions are estimates from your own history. They are not a form of contraception.</p>
      </section>

      <section class="view" id="view-calendar" aria-labelledby="tab-calendar" hidden>
        <div class="card">
          <div class="month-nav">
            <button type="button" class="icon-button" id="month-prev" aria-label="Previous month">‹</button>
            <h2 id="month-title"></h2>
            <button type="button" class="icon-button" id="month-next" aria-label="Next month">›</button>
          </div>
          <div class="weekdays" aria-hidden="true">
            <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
          </div>
          <div class="month-grid" id="month-grid" role="grid"></div>
          <button type="button" class="link-button" id="month-today">Back to today</button>
        </div>
        <ul class="legend card">
          <li><span class="key key-period"></span>Period</li>
          <li><span class="key key-predicted"></span>Predicted period</li>
          <li><span class="key key-fertile"></span>Fertile window (estimate)</li>
          <li><span class="key key-ovulation"></span>Estimated ovulation</li>
          <li><span class="flow" aria-hidden="true"><i class="on"></i><i class="on"></i><i></i></span>Flow strength, logged or usual</li>
          <li><span class="key key-spotting"></span>Spotting</li>
          <li><span class="key key-symptoms"></span>Symptoms logged</li>
        </ul>
      </section>

      <section class="view" id="view-stats" aria-labelledby="tab-stats" hidden>
        <div class="tiles" id="tiles"></div>
        <div class="card" id="chart-card">
          <h2>Cycle length</h2>
          <p class="subtitle">Days from one period to the next, most recent on the right</p>
          <div class="chart" id="chart"></div>
        </div>
        <div class="card">
          <h2>History</h2>
          <div class="table-wrap">
            <table class="history">
              <thead><tr><th scope="col">Started</th><th scope="col">Cycle</th><th scope="col">Period</th></tr></thead>
              <tbody id="history"></tbody>
            </table>
          </div>
        </div>
      </section>

      <section class="view" id="view-settings" aria-labelledby="tab-settings" hidden>
        <div class="card" id="notify-card">
          <h2>Notifications</h2>
          <p class="subtitle">A reminder before your period is due, and a note if it is late.</p>
          <div id="notify-body" class="notify-body"></div>
        </div>
        <div class="card" id="share-card">
          <h2>Sharing</h2>
          <label class="switch-row">
            <span>
              <strong>Share flow and symptoms</strong>
              <small>View-only users always see period days and predictions. Turn this on to also show them your flow and symptoms.</small>
            </span>
            <input type="checkbox" id="share-toggle" role="switch">
          </label>
        </div>
        <div class="card">
          <h2>Add past periods</h2>
          <p class="subtitle">Enter when recent periods started and ended. Days you already logged are left untouched.</p>
          <form id="seed-form" class="seed-form"></form>
        </div>
        <div class="card">
          <h2>Export</h2>
          <p class="subtitle">Download everything you have logged.</p>
          <div class="button-row">
            <a class="button secondary" href="/api/export.csv" download>CSV</a>
            <a class="button secondary" href="/api/export.json" download>JSON</a>
          </div>
        </div>
      </section>
    </main>

    <nav class="tabs" role="tablist" aria-label="Sections">
      <button type="button" role="tab" id="tab-today" data-view="today" aria-selected="true">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3c3.5 4.4 6 7.9 6 11a6 6 0 0 1-12 0c0-3.1 2.5-6.6 6-11z"/></svg>Today
      </button>
      <button type="button" role="tab" id="tab-calendar" data-view="calendar" aria-selected="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg>Calendar
      </button>
      <button type="button" role="tab" id="tab-stats" data-view="stats" aria-selected="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 20V11M12 20V5M19 20v-7"/></svg>Stats
      </button>
      <button type="button" role="tab" id="tab-settings" data-view="settings" aria-selected="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>Settings
      </button>
    </nav>

    <dialog class="sheet" id="day-sheet" aria-labelledby="sheet-title">
      <form method="dialog" class="sheet-inner">
        <div class="sheet-head">
          <h2 id="sheet-title"></h2>
          <button class="icon-button" value="close" aria-label="Close">×</button>
        </div>
        <div id="sheet-body"></div>
      </form>
    </dialog>

    <script src="/cycle.js?v=1.2.0"></script>
    <script src="/app.js?v=1.2.0"></script>
  </body>
</html>