CalendarMethodTracker/index.html at main · zikalify/CalendarMethodTracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="theme-color" content="#4a90e2" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#4a90e2" media="(prefers-color-scheme: dark)">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="description" content="Track your menstrual cycles using the calendar method">
    <title>Calendar Method Tracker</title>

    <!-- Icons -->
    <link rel="icon" href="./icon-192x192.png" type="image/png">
    <link rel="shortcut icon" href="./icon-192x192.png" type="image/png">
    <link rel="apple-touch-icon" href="./icon-192x192.png">

    <!-- Manifest and Theme -->
    <link rel="manifest" href="./manifest.json">

    <!-- Preload critical CSS -->
    <link rel="preload" href="./styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="./styles.css"></noscript>

    <!-- Preload critical fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"></noscript>
    <link rel="stylesheet" href="./responsive-fix.css">
    <link rel="apple-touch-icon" href="icon-192x192.png">
</head>
<body>
    <div class="container">
        <h1>Calendar Method Tracker</h1>

        <div class="section">
            <h2>Log Period Start</h2>
            <div class="input-section">
                <label for="periodDate">Period Start Date:</label>
                <input type="date" id="periodDate" required>
                <button onclick="logPeriod()">Log Period</button>
            </div>
        </div>

        <div class="section">
            <h2>Cycle Statistics</h2>
            <div id="stats" class="stats">
                <p>Log at least 2 periods to see statistics</p>
            </div>
        </div>

        <div class="section">
            <div class="section-header">
                <h2>Period History</h2>
                <div class="action-buttons">
                    <button onclick="exportToCSV()" class="export-btn" title="Export to CSV">
                        <span class="btn-icon">📥</span> Export
                    </button>
                    <label class="import-btn" title="Import from CSV">
                        <span class="btn-icon">📤</span> Import
                        <input type="file" id="importFile" accept=".csv,.txt,text/csv,text/plain" style="display: none;">
                    </label>
                </div>
            </div>
            <div id="periodHistory" class="period-history">
                <p>No periods logged yet</p>
            </div>
            <p class="hint">💡 <strong>Tip:</strong> Use the "Pause" toggle to exclude periods from statistics when you're not tracking (e.g., during pregnancy, breastfeeding, or hormonal birth control use). This helps maintain accurate cycle predictions.</p>
        </div>
    </div>
    <script src="./script.js"></script>
    <script>
      // Register service worker
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('./sw.js', { scope: './' })
            .then(registration => {
              console.log('ServiceWorker registration successful');
            })
            .catch(err => {
              console.log('ServiceWorker registration failed: ', err);
            });
        });
      }
    </script>
</body>
</html>