Hugging Face's logo

Spaces:
HakDEV
/
tracking
Running

App Files Community
HakDEV commited on
Commit
fe0ded4
·
verified ·
1 Parent(s): c859d6f

add actions to hamburger menu elemnts - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +700 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tracking
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tracking
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,700 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HealthTrack Pro | Wellness Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1E293B',
17
+ light: '#F8FAFC'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
25
+
26
+ body {
27
+ font-family: 'Poppins', sans-serif;
28
+ background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
29
+ min-height: 100vh;
30
+ }
31
+
32
+ .dashboard-grid {
33
+ display: grid;
34
+ grid-template-columns: 280px 1fr;
35
+ gap: 20px;
36
+ }
37
+
38
+ .progress-ring {
39
+ transform: rotate(-90deg);
40
+ }
41
+
42
+ .progress-ring__circle {
43
+ transition: stroke-dashoffset 0.5s;
44
+ }
45
+
46
+ .achievement-badge {
47
+ transition: transform 0.3s ease;
48
+ }
49
+
50
+ .achievement-badge:hover {
51
+ transform: scale(1.05);
52
+ }
53
+
54
+ .health-card {
55
+ transition: all 0.3s ease;
56
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
57
+ }
58
+
59
+ .health-card:hover {
60
+ transform: translateY(-5px);
61
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
62
+ }
63
+
64
+ .todo-item {
65
+ animation: fadeIn 0.3s ease;
66
+ }
67
+
68
+ @keyframes fadeIn {
69
+ from { opacity: 0; transform: translateY(10px); }
70
+ to { opacity: 1; transform: translateY(0); }
71
+ }
72
+
73
+ .pulse {
74
+ animation: pulse 2s infinite;
75
+ }
76
+
77
+ @keyframes pulse {
78
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
79
+ 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
80
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
81
+ }
82
+
83
+ /* Hamburger menu animation */
84
+ .hamburger.active span:nth-child(1) {
85
+ transform: translateY(4px) rotate(45deg);
86
+ }
87
+
88
+ .hamburger.active span:nth-child(2) {
89
+ opacity: 0;
90
+ }
91
+
92
+ .hamburger.active span:nth-child(3) {
93
+ transform: translateY(-4px) rotate(-45deg);
94
+ }
95
+
96
+ @media (max-width: 768px) {
97
+ .dashboard-grid {
98
+ grid-template-columns: 1fr;
99
+ padding: 0;
100
+ }
101
+
102
+ .sidebar {
103
+ position: fixed;
104
+ left: -100%;
105
+ top: 0;
106
+ z-index: 50;
107
+ height: 100vh;
108
+ width: 85%;
109
+ transition: left 0.3s ease;
110
+ border-radius: 0;
111
+ }
112
+
113
+ .sidebar.active {
114
+ left: 0;
115
+ }
116
+
117
+ .health-card {
118
+ margin: 0 10px 15px;
119
+ }
120
+
121
+ .stats-overview {
122
+ grid-template-columns: 1fr 1fr;
123
+ gap: 10px;
124
+ padding: 0 10px;
125
+ }
126
+
127
+ .main-content-grid {
128
+ grid-template-columns: 1fr;
129
+ padding: 0 10px;
130
+ }
131
+
132
+ header {
133
+ border-radius: 0;
134
+ margin-bottom: 10px;
135
+ }
136
+ }
137
+ </style>
138
+ </head>
139
+ <body class="bg-gray-50">
140
+ <!-- Mobile Menu Button -->
141
+ <div class="md:hidden fixed top-4 left-4 z-50">
142
+ <button id="mobileMenuBtn" class="bg-primary text-white p-3 rounded-full shadow-lg focus:outline-none">
143
+ <div class="w-6 flex flex-col items-center hamburger">
144
+ <span class="block w-6 h-0.5 bg-white mb-1.5 transition-all duration-300"></span>
145
+ <span class="block w-6 h-0.5 bg-white mb-1.5 transition-all duration-300"></span>
146
+ <span class="block w-6 h-0.5 bg-white transition-all duration-300"></span>
147
+ </div>
148
+ </button>
149
+ </div>
150
+
151
+ <div class="dashboard-grid p-4 max-w-7xl mx-auto">
152
+ <!-- Sidebar -->
153
+ <aside class="sidebar bg-white rounded-xl shadow-md p-6">
154
+ <div class="flex justify-between items-center mb-10">
155
+ <div class="flex items-center">
156
+ <div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center text-white font-bold">HT</div>
157
+ <h1 class="text-xl font-bold ml-3">HealthTrack<span class="text-primary">Pro</span></h1>
158
+ </div>
159
+ <button id="closeSidebar" class="md:hidden text-gray-500 hover:text-gray-700">
160
+ <i class="fas fa-times"></i>
161
+ </button>
162
+ </div>
163
+
164
+ <nav class="mb-10">
165
+ <ul class="space-y-2">
166
+ <li>
167
+ <a href="#" class="flex items-center p-3 rounded-lg bg-primary text-white">
168
+ <i class="fas fa-home mr-3"></i>
169
+ <span>Dashboard</span>
170
+ </a>
171
+ </li>
172
+ <li>
173
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100">
174
+ <i class="fas fa-tasks mr-3"></i>
175
+ <span>To-Do List</span>
176
+ </a>
177
+ </li>
178
+ <li>
179
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100">
180
+ <i class="fas fa-trophy mr-3"></i>
181
+ <span>Achievements</span>
182
+ </a>
183
+ </li>
184
+ <li>
185
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100">
186
+ <i class="fas fa-heartbeat mr-3"></i>
187
+ <span>Health Metrics</span>
188
+ </a>
189
+ </li>
190
+ <li>
191
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100">
192
+ <i class="fas fa-chart-line mr-3"></i>
193
+ <span>Analytics</span>
194
+ </a>
195
+ </li>
196
+ <li>
197
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 hover:bg-gray-100">
198
+ <i class="fas fa-cog mr-3"></i>
199
+ <span>Settings</span>
200
+ </a>
201
+ </li>
202
+ </ul>
203
+ </nav>
204
+
205
+ <div class="mt-auto">
206
+ <div class="bg-light rounded-xl p-4 mb-6">
207
+ <h3 class="font-bold mb-2">Daily Goal Progress</h3>
208
+ <div class="flex items-center">
209
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white mr-3">
210
+ <i class="fas fa-medal"></i>
211
+ </div>
212
+ <div class="flex-1">
213
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
214
+ <div class="h-full bg-secondary rounded-full" style="width: 75%"></div>
215
+ </div>
216
+ <p class="text-xs mt-1 text-gray-500">75% completed</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg">
222
+ <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
223
+ <i class="fas fa-user text-gray-600"></i>
224
+ </div>
225
+ <div>
226
+ <p class="font-medium">Alex Morgan</p>
227
+ <p class="text-xs text-gray-500">Premium Member</p>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </aside>
232
+
233
+ <!-- Main Content -->
234
+ <main class="ml-0 md:ml-0">
235
+ <!-- Header -->
236
+ <header class="bg-white rounded-xl shadow-md p-6 mb-6">
237
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
238
+ <div>
239
+ <h1 class="text-2xl font-bold text-dark">Welcome back, Alex!</h1>
240
+ <p class="text-gray-500">Track your health and wellness journey</p>
241
+ </div>
242
+ <div class="mt-4 md:mt-0 flex items-center">
243
+ <div class="relative">
244
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
245
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
246
+ </div>
247
+ <button class="ml-4 bg-primary text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
248
+ <i class="fas fa-bell"></i>
249
+ </button>
250
+ </div>
251
+ </div>
252
+ </header>
253
+
254
+ <!-- Stats Overview -->
255
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
256
+ <div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center">
257
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
258
+ <i class="fas fa-glass-water text-blue-500 text-xl"></i>
259
+ </div>
260
+ <div>
261
+ <p class="text-gray-500 text-sm">Water Intake</p>
262
+ <p class="text-xl font-bold">1.8<span class="text-gray-500 text-sm">/2.5 L</span></p>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center">
267
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
268
+ <i class="fas fa-shoe-prints text-green-500 text-xl"></i>
269
+ </div>
270
+ <div>
271
+ <p class="text-gray-500 text-sm">Steps Today</p>
272
+ <p class="text-xl font-bold">8,452<span class="text-gray-500 text-sm">/10k</span></p>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center">
277
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
278
+ <i class="fas fa-heart-pulse text-red-500 text-xl"></i>
279
+ </div>
280
+ <div>
281
+ <p class="text-gray-500 text-sm">Heart Rate</p>
282
+ <p class="text-xl font-bold">72<span class="text-gray-500 text-sm"> BPM</span></p>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="health-card bg-white rounded-xl shadow-md p-5 flex items-center">
287
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
288
+ <i class="fas fa-pills text-purple-500 text-xl"></i>
289
+ </div>
290
+ <div>
291
+ <p class="text-gray-500 text-sm">Medications</p>
292
+ <p class="text-xl font-bold">2<span class="text-gray-500 text-sm">/3 Taken</span></p>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Main Content Grid -->
298
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
299
+ <!-- Todo Section -->
300
+ <div class="lg:col-span-2">
301
+ <div class="health-card bg-white rounded-xl shadow-md p-6">
302
+ <div class="flex justify-between items-center mb-6">
303
+ <h2 class="text-xl font-bold text-dark">Today's Tasks</h2>
304
+ <button class="text-primary hover:text-primary-dark">
305
+ <i class="fas fa-ellipsis-h"></i>
306
+ </button>
307
+ </div>
308
+
309
+ <div class="mb-4">
310
+ <div class="flex">
311
+ <input type="text" id="newTodo" placeholder="Add a new task..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
312
+ <button id="addTodoBtn" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary-dark transition">Add</button>
313
+ </div>
314
+ </div>
315
+
316
+ <div id="todoList" class="space-y-3">
317
+ <div class="todo-item flex items-center p-3 bg-gray-50 rounded-lg">
318
+ <input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary">
319
+ <div class="flex-1">
320
+ <p class="font-medium">Morning meditation</p>
321
+ <p class="text-xs text-gray-500">7:00 AM</p>
322
+ </div>
323
+ <button class="text-gray-400 hover:text-gray-600">
324
+ <i class="fas fa-trash"></i>
325
+ </button>
326
+ </div>
327
+
328
+ <div class="todo-item flex items-center p-3 bg-gray-50 rounded-lg">
329
+ <input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary">
330
+ <div class="flex-1">
331
+ <p class="font-medium">Take vitamin supplements</p>
332
+ <p class="text-xs text-gray-500">8:30 AM</p>
333
+ </div>
334
+ <button class="text-gray-400 hover:text-gray-600">
335
+ <i class="fas fa-trash"></i>
336
+ </button>
337
+ </div>
338
+
339
+ <div class="todo-item flex items-center p-3 bg-gray-50 rounded-lg">
340
+ <input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary" checked>
341
+ <div class="flex-1">
342
+ <p class="font-medium text-gray-400 line-through">30-min morning walk</p>
343
+ <p class="text-xs text-gray-500">Completed at 7:45 AM</p>
344
+ </div>
345
+ <button class="text-gray-400 hover:text-gray-600">
346
+ <i class="fas fa-trash"></i>
347
+ </button>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Achievements Section -->
354
+ <div>
355
+ <div class="health-card bg-white rounded-xl shadow-md p-6">
356
+ <div class="flex justify-between items-center mb-6">
357
+ <h2 class="text-xl font-bold text-dark">Achievements</h2>
358
+ <button class="text-primary hover:text-primary-dark">
359
+ <i class="fas fa-trophy"></i>
360
+ </button>
361
+ </div>
362
+
363
+ <div class="grid grid-cols-3 gap-4">
364
+ <div class="achievement-badge flex flex-col items-center">
365
+ <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
366
+ <i class="fas fa-glass-water text-yellow-500 text-2xl"></i>
367
+ </div>
368
+ <p class="text-xs font-medium text-center">Hydration Hero</p>
369
+ </div>
370
+
371
+ <div class="achievement-badge flex flex-col items-center">
372
+ <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-2">
373
+ <i class="fas fa-walking text-green-500 text-2xl"></i>
374
+ </div>
375
+ <p class="text-xs font-medium text-center">10k Steps</p>
376
+ </div>
377
+
378
+ <div class="achievement-badge flex flex-col items-center">
379
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-2">
380
+ <i class="fas fa-moon text-blue-500 text-2xl"></i>
381
+ </div>
382
+ <p class="text-xs font-medium text-center">Sleep Master</p>
383
+ </div>
384
+
385
+ <div class="achievement-badge flex flex-col items-center">
386
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-2">
387
+ <i class="fas fa-dumbbell text-purple-500 text-2xl"></i>
388
+ </div>
389
+ <p class="text-xs font-medium text-center">Workout Warrior</p>
390
+ </div>
391
+
392
+ <div class="achievement-badge flex flex-col items-center">
393
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-2">
394
+ <i class="fas fa-apple-alt text-red-500 text-2xl"></i>
395
+ </div>
396
+ <p class="text-xs font-medium text-center">Healthy Eating</p>
397
+ </div>
398
+
399
+ <div class="achievement-badge flex flex-col items-center">
400
+ <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mb-2 opacity-50">
401
+ <i class="fas fa-lock text-gray-500 text-2xl"></i>
402
+ </div>
403
+ <p class="text-xs font-medium text-center">Coming Soon</p>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="mt-6">
408
+ <div class="flex justify-between mb-2">
409
+ <span class="text-sm font-medium">Your Progress</span>
410
+ <span class="text-sm font-medium">6/12</span>
411
+ </div>
412
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
413
+ <div class="h-full bg-secondary rounded-full" style="width: 50%"></div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Water Tracker -->
420
+ <div>
421
+ <div class="health-card bg-white rounded-xl shadow-md p-6">
422
+ <div class="flex justify-between items-center mb-6">
423
+ <h2 class="text-xl font-bold text-dark">Water Intake</h2>
424
+ <button class="text-primary hover:text-primary-dark">
425
+ <i class="fas fa-plus"></i>
426
+ </button>
427
+ </div>
428
+
429
+ <div class="flex justify-center mb-6">
430
+ <div class="relative">
431
+ <svg width="120" height="120" viewBox="0 0 120 120">
432
+ <circle cx="60" cy="60" r="54" fill="none" stroke="#e2e8f0" stroke-width="8" />
433
+ <circle cx="60" cy="60" r="54" fill="none" stroke="#3b82f6" stroke-width="8" stroke-dasharray="339.292" stroke-dashoffset="84.823" stroke-linecap="round" transform="rotate(-90 60 60)" />
434
+ </svg>
435
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
436
+ <span class="text-2xl font-bold">1.8L</span>
437
+ <span class="text-gray-500 text-sm">of 2.5L</span>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="grid grid-cols-4 gap-2">
443
+ <button class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition">
444
+ <i class="fas fa-plus"></i> 250ml
445
+ </button>
446
+ <button class="bg-blue-50 text-blue-500 py-2 rounded-lg hover:bg-blue-100 transition">
447
+ <i class="fas fa-plus"></i> 500ml
448
+ </button>
449
+ <button class="bg-blue-100 text-blue-700 py-2 rounded-lg font-medium">
450
+ Goal: 2.5L
451
+ </button>
452
+ <button class="bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition">
453
+ Reset
454
+ </button>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Steps Tracker -->
460
+ <div>
461
+ <div class="health-card bg-white rounded-xl shadow-md p-6">
462
+ <div class="flex justify-between items-center mb-6">
463
+ <h2 class="text-xl font-bold text-dark">Step Counter</h2>
464
+ <button class="text-primary hover:text-primary-dark">
465
+ <i class="fas fa-sync"></i>
466
+ </button>
467
+ </div>
468
+
469
+ <div class="flex justify-center mb-6">
470
+ <div class="relative">
471
+ <div class="w-32 h-32 rounded-full border-8 border-green-200 flex items-center justify-center">
472
+ <div class="text-center">
473
+ <div class="text-3xl font-bold">8,452</div>
474
+ <div class="text-gray-500 text-sm">steps</div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="mb-4">
481
+ <div class="flex justify-between mb-2">
482
+ <span class="text-sm">Daily Goal: 10,000 steps</span>
483
+ <span class="text-sm font-medium">84.5%</span>
484
+ </div>
485
+ <div class="h-3 bg-gray-200 rounded-full overflow-hidden">
486
+ <div class="h-full bg-green-500 rounded-full" style="width: 84.5%"></div>
487
+ </div>
488
+ </div>
489
+
490
+ <button class="w-full bg-green-500 text-white py-3 rounded-lg hover:bg-green-600 transition flex items-center justify-center">
491
+ <i class="fas fa-shoe-prints mr-2"></i> Sync with Smart Watch
492
+ </button>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Medication Tracker -->
497
+ <div class="lg:col-span-2">
498
+ <div class="health-card bg-white rounded-xl shadow-md p-6">
499
+ <div class="flex justify-between items-center mb-6">
500
+ <h2 class="text-xl font-bold text-dark">Medication Schedule</h2>
501
+ <button class="text-primary hover:text-primary-dark">
502
+ <i class="fas fa-plus"></i>
503
+ </button>
504
+ </div>
505
+
506
+ <div class="space-y-4">
507
+ <div class="flex items-center p-4 bg-purple-50 rounded-lg">
508
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
509
+ <i class="fas fa-pills text-purple-500"></i>
510
+ </div>
511
+ <div class="flex-1">
512
+ <p class="font-medium">Vitamin D</p>
513
+ <p class="text-sm text-gray-500">1 capsule after breakfast</p>
514
+ </div>
515
+ <div class="text-right">
516
+ <p class="font-medium">8:30 AM</p>
517
+ <p class="text-sm text-green-500 flex items-center">
518
+ <i class="fas fa-check-circle mr-1"></i> Taken
519
+ </p>
520
+ </div>
521
+ </div>
522
+
523
+ <div class="flex items-center p-4 bg-amber-50 rounded-lg pulse">
524
+ <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center mr-4">
525
+ <i class="fas fa-pills text-amber-500"></i>
526
+ </div>
527
+ <div class="flex-1">
528
+ <p class="font-medium">Blood Pressure Meds</p>
529
+ <p class="text-sm text-gray-500">1 tablet with water</p>
530
+ </div>
531
+ <div class="text-right">
532
+ <p class="font-medium">2:00 PM</p>
533
+ <p class="text-sm text-amber-500 flex items-center">
534
+ <i class="fas fa-clock mr-1"></i> Pending
535
+ </p>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="flex items-center p-4 bg-gray-50 rounded-lg">
540
+ <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-4">
541
+ <i class="fas fa-pills text-gray-500"></i>
542
+ </div>
543
+ <div class="flex-1">
544
+ <p class="font-medium">Omega-3</p>
545
+ <p class="text-sm text-gray-500">1 softgel with dinner</p>
546
+ </div>
547
+ <div class="text-right">
548
+ <p class="font-medium">7:00 PM</p>
549
+ <p class="text-sm text-gray-500 flex items-center">
550
+ <i class="fas fa-clock mr-1"></i> Upcoming
551
+ </p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </main>
559
+ </div>
560
+
561
+ <script>
562
+ // This would be replaced with Flutter code
563
+ // Here's a basic Flutter structure example:
564
+ /*
565
+ import 'package:flutter/material.dart';
566
+
567
+ void main() => runApp(HealthTrackApp());
568
+
569
+ class HealthTrackApp extends StatelessWidget {
570
+ @override
571
+ Widget build(BuildContext context) {
572
+ return MaterialApp(
573
+ title: 'HealthTrack Pro',
574
+ theme: ThemeData(
575
+ primarySwatch: Colors.blue,
576
+ visualDensity: VisualDensity.adaptivePlatformDensity,
577
+ ),
578
+ home: MainScreen(),
579
+ );
580
+ }
581
+ }
582
+
583
+ class MainScreen extends StatefulWidget {
584
+ @override
585
+ _MainScreenState createState() => _MainScreenState();
586
+ }
587
+
588
+ class _MainScreenState extends State<MainScreen> {
589
+ // State management would go here
590
+ // This would include all the tracking functionality
591
+ // and UI components from the HTML version
592
+ }
593
+ */
594
+
595
+ // Mobile menu toggle with hamburger animation
596
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
597
+ const closeSidebar = document.getElementById('closeSidebar');
598
+ const sidebar = document.querySelector('.sidebar');
599
+ const hamburger = document.querySelector('.hamburger');
600
+
601
+ mobileMenuBtn.addEventListener('click', () => {
602
+ sidebar.classList.add('active');
603
+ hamburger.classList.add('active');
604
+ });
605
+
606
+ closeSidebar.addEventListener('click', () => {
607
+ sidebar.classList.remove('active');
608
+ hamburger.classList.remove('active');
609
+ });
610
+
611
+ // Close sidebar when clicking outside
612
+ document.addEventListener('click', (e) => {
613
+ if (!sidebar.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
614
+ sidebar.classList.remove('active');
615
+ hamburger.classList.remove('active');
616
+ }
617
+ });
618
+
619
+ // Todo functionality
620
+ document.getElementById('addTodoBtn').addEventListener('click', addTodo);
621
+ document.getElementById('newTodo').addEventListener('keypress', function(e) {
622
+ if (e.key === 'Enter') addTodo();
623
+ });
624
+
625
+ function addTodo() {
626
+ const input = document.getElementById('newTodo');
627
+ const task = input.value.trim();
628
+
629
+ if (task) {
630
+ const todoList = document.getElementById('todoList');
631
+ const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
632
+
633
+ const todoItem = document.createElement('div');
634
+ todoItem.className = 'todo-item flex items-center p-3 bg-gray-50 rounded-lg';
635
+ todoItem.innerHTML = `
636
+ <input type="checkbox" class="mr-3 h-5 w-5 text-primary rounded focus:ring-primary">
637
+ <div class="flex-1">
638
+ <p class="font-medium">${task}</p>
639
+ <p class="text-xs text-gray-500">Added at ${time}</p>
640
+ </div>
641
+ <button class="text-gray-400 hover:text-gray-600 delete-todo">
642
+ <i class="fas fa-trash"></i>
643
+ </button>
644
+ `;
645
+
646
+ todoList.prepend(todoItem);
647
+ input.value = '';
648
+
649
+ // Add event listener to delete button
650
+ todoItem.querySelector('.delete-todo').addEventListener('click', function() {
651
+ todoItem.remove();
652
+ });
653
+
654
+ // Add event listener to checkbox
655
+ const checkbox = todoItem.querySelector('input[type="checkbox"]');
656
+ checkbox.addEventListener('change', function() {
657
+ if (this.checked) {
658
+ todoItem.querySelector('p.font-medium').classList.add('text-gray-400', 'line-through');
659
+ } else {
660
+ todoItem.querySelector('p.font-medium').classList.remove('text-gray-400', 'line-through');
661
+ }
662
+ });
663
+ }
664
+ }
665
+
666
+ // Initialize existing todo delete buttons
667
+ document.querySelectorAll('.delete-todo').forEach(button => {
668
+ button.addEventListener('click', function() {
669
+ this.closest('.todo-item').remove();
670
+ });
671
+ });
672
+
673
+ // Initialize existing todo checkboxes
674
+ document.querySelectorAll('#todoList input[type="checkbox"]').forEach(checkbox => {
675
+ checkbox.addEventListener('change', function() {
676
+ const text = this.closest('.todo-item').querySelector('p.font-medium');
677
+ if (this.checked) {
678
+ text.classList.add('text-gray-400', 'line-through');
679
+ } else {
680
+ text.classList.remove('text-gray-400', 'line-through');
681
+ }
682
+ });
683
+ });
684
+
685
+ // Water intake buttons
686
+ document.querySelectorAll('.bg-blue-50').forEach(button => {
687
+ button.addEventListener('click', function() {
688
+ // In a real app, this would update the water intake value
689
+ alert('Water intake recorded!');
690
+ });
691
+ });
692
+
693
+ // Sync steps button
694
+ document.querySelector('.bg-green-500').addEventListener('click', function() {
695
+ // In a real app, this would sync with a smartwatch
696
+ alert('Syncing with smartwatch...');
697
+ });
698
+ </script>
699
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=HakDEV/tracking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
700
+ </html>