mind-pwa-pages/index.html at main · NateEaton/mind-pwa-pages · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="description" content="Track your MIND diet goals with this free, privacy-focused web app. No ads, no tracking - just simple daily tracking for brain-healthy eating.">
  <meta property="og:title" content="MIND Diet Tracker">
  <meta property="og:description" content="Free web app for tracking MIND diet goals. Privacy-focused, works offline.">
  <meta property="og:image" content="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/daily-tracker.png">
  <title>MIND Diet Tracker</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #fdfdfd;
      color: #333;
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }
    header, section, footer {
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    h1, h2 {
      color: #2a2a2a;
    }
    .subtitle {
      font-size: 1.2rem;
      color: #555;
      margin-bottom: 2rem;
    }
    .benefits {
      display: flex;
      gap: 1rem;
      margin: 1rem 0;
      flex-wrap: wrap;
    }
    .benefit {
      flex: 1;
      min-width: 200px;
      text-align: center;
    }
    .benefit .icon {
      font-size: 2rem;
      display: block;
      margin-bottom: 0.5rem;
    }
    .cta-button {
      display: inline-block;
      background: #4CAF50;
      color: white;
      padding: 0.75rem 1.5rem;
      margin: 1rem 0;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
    }
    .cta-button:hover {
      background: #45a049;
      transform: translateY(-2px);
      transition: all 0.2s ease;
    }

    /* Carousel styles */
    .carousel {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
      padding: 1rem 0;
      -webkit-overflow-scrolling: touch;
    }
    .carousel > div {
      flex: 0 0 auto;
      scroll-snap-align: start;
      width: 300px;
    }
    .carousel img {
      width: 100%;
      height: auto;
      min-height: 400px;
      object-fit: cover;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    .carousel-container {
      max-width: 800px;
      margin: 0 auto;
    }
    .caption {
      text-align: center;
      font-size: 0.9rem;
      margin-top: 0.3rem;
    }

    .features-list {
      list-style: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 0.5rem;
    }
    .features-list li {
      padding: 0.25rem 0;
    }

    .steps {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
      flex-wrap: wrap;
    }
    .step {
      flex: 1;
      min-width: 200px;
      text-align: center;
    }
    .step-number {
      width: 40px;
      height: 40px;
      background: #4CAF50;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      font-weight: bold;
      font-size: 1.2rem;
    }

    .what-is {
      margin: 2rem 0;
    }

    .device-note {
      margin: 1rem 0;
      color: #555;
    }

    .how-it-works {
      margin-top: 3rem;
      margin-bottom: 3rem;
    }

    footer {
      font-size: 0.9rem;
      color: #666;
      border-top: 1px solid #ccc;
      padding-top: 1rem;
    }
  </style>
</head>
<body>
<header>
  <h1>MIND Diet Tracker</h1>
  <p class="subtitle">Track your brain-healthy eating habits with science-backed simplicity</p>

  <div class="benefits">
    <div class="benefit">
      <span class="icon">🧠</span>
      <p>Research-based MIND diet principles</p>
    </div>
    <div class="benefit">
      <span class="icon">📱</span>
      <p>Works online or offline</p>
    </div>
    <div class="benefit">
      <span class="icon">🔒</span>
      <p>100% private - no tracking</p>
    </div>
  </div>

  <div class="what-is">
    <h2>What is the MIND Diet Tracker?</h2>
    <p>The MIND Diet Tracker is a simple, free tool that helps you follow the <a href="https://github.com/NateEaton/mind-pwa/wiki/About-the-MIND-Diet" target="_blank">Diet (Mediterranean-DASH Intervention for Neurodegenerative Delay)</a> - an eating pattern shown to support brain health and reduce cognitive decline risk.</p>
  </div>

  <a class="cta-button" href="https://mind-pwa-fawn.vercel.app/" target="_blank">Try It Now</a>

  <p class="device-note">Works on any device with a modern web browser. For the best experience, use the "Add to Home Screen" option on your device to install it like a regular app.</p>
</header>

<section>
  <h2>Features</h2>
  <ul class="features-list">
    <li>✓ Daily tracking of food groups</li>
    <li>✓ Weekly progress summaries</li>
    <li>✓ Historical data review</li>
    <li>✓ Edit daily history</li>
    <li>✓ Guided setup wizard</li>
    <li>✓ Sync to cloud</li>
    <li>✓ Export/import your data</li>
    <li>✓ Install as a mobile app</li>
    <li>✓ Color-coded feedback</li>
    <li>✓ Simple, intuitive interface</li>
    <li>✓ Built by fellow user</li>
  </ul>
</section>

<section class="how-it-works">
  <h2>How It Works</h2>
  <div class="steps">
    <div class="step">
      <div class="step-number">1</div>
      <h3>Track Daily</h3>
      <p>Log your servings of leafy greens, berries, nuts, and other MIND diet foods</p>
    </div>
    <div class="step">
      <div class="step-number">2</div>
      <h3>Review Weekly</h3>
      <p>See your progress towards weekly targets with color-coded summaries</p>
    </div>
    <div class="step">
      <div class="step-number">3</div>
      <h3>Build Habits</h3>
      <p>Track your history and watch your brain-healthy eating habits improve</p>
    </div>
  </div>
</section>

<section>
  <h2>Screenshots</h2>
  <div class="carousel-container">
    <div class="carousel">
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/daily-tracker.png" alt="Daily tracker view" />
        <div class="caption">Daily Tracker</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/weekly-summary.png" alt="Weekly summary view" />
        <div class="caption">Weekly Summary</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/history-view.png" alt="Weekly history view" />
        <div class="caption">History View</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/edit-totals-modal.png" alt="Edit history dialog" />
        <div class="caption">History View</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/food-info-modal.png" alt="Food info dialog" />
        <div class="caption">Food Info</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/menu.png" alt="Menu" />
        <div class="caption">App Menu</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/settings-modal.png" alt="Settings dialog" />
        <div class="caption">Settings</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/setup-wizard.png" alt="Settings dialog" />
        <div class="caption">Setup Wizard</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/first-day-of-week.png" alt="Settings dialog" />
        <div class="caption">First Day of Week</div>
      </div>
      <div>
        <img src="https://github.com/NateEaton/mind-pwa-pages/raw/main/screenshots/cloud-sync.png" alt="Settings dialog" />
        <div class="caption">Cloud Sync</div>
      </div>
    </div>
</section>

<section>
  <h2>About This App</h2>
  <p>
    Developed by a retired hobbyist (with help from AI) for personal use following the MIND diet, this app is and always will be free, with no ads or tracking.
    It's a personal project shared in the hope that it helps others live a little healthier.
  </p>
</section>

<footer>
  <p>Have feedback or questions? <a href="mailto:nate@example.com">Email me</a>.</p>
  <p>View the source on <a href="https://github.com/NateEaton/mind-pwa" target="_blank">GitHub</a>.</p>
</footer>
</body>
</html>