142 lines
6.8 KiB
HTML
142 lines
6.8 KiB
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.3.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-predicted faded"></span>More than 6 weeks ahead, less certain</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">
|
||
<h2>Upcoming periods</h2>
|
||
<p class="subtitle">The next year, for planning ahead. The likely range widens the further out it is.</p>
|
||
<ul class="upcoming" id="upcoming"></ul>
|
||
</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.3.0"></script>
|
||
<script src="/app.js?v=1.3.0"></script>
|
||
</body>
|
||
</html>
|