Hugging Face's logo

Spaces:
Ptwo
/
quitnic
Running

App Files Community
Ptwo commited on
Commit
4ff6af3
·
verified ·
1 Parent(s): 2bda008

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +482 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quitnic
3
- emoji: 📉
4
- colorFrom: pink
5
- colorTo: yellow
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: quitnic
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
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,482 @@
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>QuitNic | Quit Nicotine Support App</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': '#4e60ff',
15
+ 'secondary': '#8e9dff',
16
+ 'accent': '#ff6b8b',
17
+ 'light': '#f9fafb',
18
+ 'dark': '#1e293b'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ .hero-gradient {
26
+ background: linear-gradient(135deg, #4e60ff 0%, #8e9dff 100%);
27
+ }
28
+ .progress-gradient {
29
+ background: linear-gradient(to right, #4e60ff, #8e9dff);
30
+ }
31
+ .calendar-grid {
32
+ display: grid;
33
+ grid-template-columns: repeat(7, 1fr);
34
+ gap: 8px;
35
+ }
36
+ .tip-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
39
+ }
40
+ .stat-card {
41
+ transition: all 0.3s ease;
42
+ }
43
+ .stat-card:hover {
44
+ transform: scale(1.03);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-light text-dark font-sans">
49
+ <!-- Main App Container -->
50
+ <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg relative overflow-hidden">
51
+
52
+ <!-- Header -->
53
+ <header class="hero-gradient text-white px-6 py-8">
54
+ <div class="flex justify-between items-center mb-10">
55
+ <div class="flex items-center">
56
+ <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center">
57
+ <i class="fas fa-smoking-ban text-primary text-2xl"></i>
58
+ </div>
59
+ <h1 class="ml-4 text-2xl font-bold">QuitNic</h1>
60
+ </div>
61
+ <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
62
+ <i class="fas fa-user text-white"></i>
63
+ </div>
64
+ </div>
65
+ <div class="mb-6">
66
+ <h2 class="text-2xl font-bold mb-2">Welcome Back, Michael!</h2>
67
+ <p class="opacity-90">Today is day <span class="font-bold">14</span> of being nicotine-free.</p>
68
+ </div>
69
+ </header>
70
+
71
+ <!-- Stats Cards -->
72
+ <div class="px-4 -mt-6 mb-6">
73
+ <div class="flex space-x-4 overflow-x-auto pb-4 px-1 -mx-1">
74
+ <div class="stat-card bg-white p-4 rounded-xl shadow-lg min-w-[180px] flex-shrink-0">
75
+ <div class="flex items-center mb-2">
76
+ <div class="bg-primary/10 text-primary w-10 h-10 rounded-lg flex items-center justify-center mr-2">
77
+ <i class="fas fa-calendar-check"></i>
78
+ </div>
79
+ <span class="text-lg font-bold">14 Days</span>
80
+ </div>
81
+ <p class="text-gray-500 text-sm">Current streak</p>
82
+ </div>
83
+ <div class="stat-card bg-white p-4 rounded-xl shadow-lg min-w-[180px] flex-shrink-0">
84
+ <div class="flex items-center mb-2">
85
+ <div class="bg-secondary/10 text-secondary w-10 h-10 rounded-lg flex items-center justify-center mr-2">
86
+ <i class="fas fa-coins"></i>
87
+ </div>
88
+ <span class="text-lg font-bold">$124</span>
89
+ </div>
90
+ <p class="text-gray-500 text-sm">Money saved</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Main Navigation -->
96
+ <nav class="flex p-4 bg-white border-b">
97
+ <button class="flex-1 text-center py-2 border-b-2 border-primary text-primary font-medium">
98
+ <i class="fas fa-home mb-1 block"></i>
99
+ <span class="text-xs">Home</span>
100
+ </button>
101
+ <button class="flex-1 text-center py-2 text-gray-500">
102
+ <i class="fas fa-clipboard-list mb-1 block"></i>
103
+ <span class="text-xs">Tips</span>
104
+ </button>
105
+ <button class="flex-1 text-center py-2 text-gray-500">
106
+ <i class="fas fa-chart-line mb-1 block"></i>
107
+ <span class="text-xs">Progress</span>
108
+ </button>
109
+ <button class="flex-1 text-center py-2 text-gray-500">
110
+ <i class="fas fa-cog mb-1 block"></i>
111
+ <span class="text-xs">Settings</span>
112
+ </button>
113
+ </nav>
114
+
115
+ <!-- Main Content -->
116
+ <main class="p-4">
117
+ <!-- Quick Actions -->
118
+ <div class="mb-8">
119
+ <h3 class="font-bold text-lg mb-4 flex items-center">
120
+ <i class="fas fa-bolt text-accent mr-2"></i> Quick Actions
121
+ </h3>
122
+ <div class="grid grid-cols-2 gap-4">
123
+ <a href="#" class="bg-primary/10 text-primary p-4 rounded-lg text-center transition hover:bg-primary/20">
124
+ <i class="fas fa-notes-medical block text-2xl mb-2"></i>
125
+ Log Cravings
126
+ </a>
127
+ <a href="#" class="bg-secondary/10 text-secondary p-4 rounded-lg text-center transition hover:bg-secondary/20">
128
+ <i class="fas fa-book block text-2xl mb-2"></i>
129
+ Journal
130
+ </a>
131
+ <a href="#" class="bg-green-100 text-green-600 p-4 rounded-lg text-center transition hover:bg-green-200">
132
+ <i class="fas fa-users block text-2xl mb-2"></i>
133
+ Community
134
+ </a>
135
+ <a href="#" class="bg-purple-100 text-purple-600 p-4 rounded-lg text-center transition hover:bg-purple-200">
136
+ <i class="fas fa-award block text-2xl mb-2"></i>
137
+ Rewards
138
+ </a>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Cravings Tracker -->
143
+ <div class="mb-8">
144
+ <h3 class="font-bold text-lg mb-4 flex items-center">
145
+ <i class="fas fa-heartbeat text-red-500 mr-2"></i> Cravings Tracker
146
+ </h3>
147
+ <div class="bg-white p-4 rounded-lg shadow-sm">
148
+ <div class="flex justify-between items-center mb-3">
149
+ <h4 class="font-medium">Today's Cravings</h4>
150
+ <span class="text-sm text-gray-500">3 logged</span>
151
+ </div>
152
+ <div class="space-y-3">
153
+ <div class="flex items-center">
154
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-3"></div>
155
+ <div class="flex-1">
156
+ <div class="flex justify-between">
157
+ <span>Morning</span>
158
+ <span class="text-sm text-gray-500">8:30 AM</span>
159
+ </div>
160
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
161
+ <div class="bg-red-500 h-1.5 rounded-full" style="width: 70%"></div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ <div class="flex items-center">
166
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-3"></div>
167
+ <div class="flex-1">
168
+ <div class="flex justify-between">
169
+ <span>Afternoon</span>
170
+ <span class="text-sm text-gray-500">2:15 PM</span>
171
+ </div>
172
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
173
+ <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 40%"></div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div class="flex items-center">
178
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-3"></div>
179
+ <div class="flex-1">
180
+ <div class="flex justify-between">
181
+ <span>Evening</span>
182
+ <span class="text-sm text-gray-500">7:45 PM</span>
183
+ </div>
184
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
185
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 20%"></div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <button class="w-full mt-4 bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg text-sm font-medium transition">
191
+ View Full Report
192
+ </button>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Recommended Tips -->
197
+ <div class="mb-8">
198
+ <div class="flex justify-between items-center mb-4">
199
+ <h3 class="font-bold text-lg flex items-center">
200
+ <i class="fas fa-lightbulb text-yellow-400 mr-2"></i> Tips for You
201
+ </h3>
202
+ <a href="#" class="text-primary text-sm">See All</a>
203
+ </div>
204
+
205
+ <div class="space-y-4">
206
+ <!-- Tip Card 1 -->
207
+ <div class="tip-card bg-white border p-4 rounded-lg shadow-sm transition-all">
208
+ <div class="flex items-start mb-3">
209
+ <div class="bg-purple-100 text-purple-600 w-8 h-8 rounded-full flex items-center justify-center mr-3">
210
+ <i class="fas fa-running"></i>
211
+ </div>
212
+ <h4 class="font-semibold text-lg text-dark">Managing Tired Muscles?</h4>
213
+ </div>
214
+ <p class="text-gray-600 mb-4">Try gentle stretching exercises to relieve muscle fatigue caused by nicotine withdrawal.</p>
215
+ <div class="flex justify-between">
216
+ <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">Physical</span>
217
+ <a href="#" class="text-primary text-sm font-medium">Read More</a>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Tip Card 2 -->
222
+ <div class="tip-card bg-white border p-4 rounded-lg shadow-sm transition-all">
223
+ <div class="flex items-start mb-3">
224
+ <div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-3">
225
+ <i class="fas fa-brain"></i>
226
+ </div>
227
+ <h4 class="font-semibold text-lg text-dark">Beat Evening Cravings</h4>
228
+ </div>
229
+ <p class="text-gray-600 mb-4">Replace your after-dinner cigarette with a new calming ritual like herbal tea or journaling.</p>
230
+ <div class="flex justify-between">
231
+ <span class="text-xs bg-amber-50 text-amber-600 px-2 py-1 rounded-full">Mental</span>
232
+ <a href="#" class="text-primary text-sm font-medium">Read More</a>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Your Progress -->
239
+ <div class="mb-8">
240
+ <div class="flex justify-between items-center mb-4">
241
+ <h3 class="font-bold text-lg flex items-center">
242
+ <i class="fas fa-calendar-alt text-secondary mr-2"></i> Your Progress
243
+ </h3>
244
+ <a href="#" class="text-primary text-sm">Detailed Stats</a>
245
+ </div>
246
+
247
+ <!-- Progress Summary -->
248
+ <div class="p-4 rounded-lg border-0 progress-gradient text-white mb-4">
249
+ <h4 class="font-semibold mb-2">Daily Goal Achieved!</h4>
250
+ <p class="text-sm mb-4">You've resisted 3 cravings today already.</p>
251
+ <div class="w-full bg-white/30 rounded-full h-2 mb-2">
252
+ <div class="bg-white h-2 rounded-full" style="width: 75%"></div>
253
+ </div>
254
+ <p class="text-xs opacity-80">You're 75% toward your daily goal</p>
255
+ </div>
256
+
257
+ <!-- Calendar View -->
258
+ <div class="mb-4">
259
+ <h4 class="font-medium mb-2">Smoke-Free Calendar</h4>
260
+ <div class="calendar-grid mb-2">
261
+ <div class="text-center text-sm py-1">S</div>
262
+ <div class="text-center text-sm py-1">M</div>
263
+ <div class="text-center text-sm py-1">T</div>
264
+ <div class="text-center text-sm py-1">W</div>
265
+ <div class="text-center text-sm py-1">T</div>
266
+ <div class="text-center text-sm py-1">F</div>
267
+ <div class="text-center text-sm py-1">S</div>
268
+ </div>
269
+ <div class="calendar-grid">
270
+ <div class="bg-gray-100 aspect-square rounded-lg"></div>
271
+ <div class="bg-gray-100 aspect-square rounded-lg"></div>
272
+ <div class="bg-gray-100 aspect-square rounded-lg"></div>
273
+ <div class="aspect-square rounded-lg flex items-center justify-center">
274
+ <div class="bg-secondary/10 border-b-2 border-secondary w-6 h-6 rounded-md flex items-center justify-center">
275
+ <span class="text-xs font-semibold">1</span>
276
+ </div>
277
+ </div>
278
+ <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white">
279
+ <span class="font-bold">2</span>
280
+ </div>
281
+ <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center">
282
+ <span class="text-xs font-semibold">3</span>
283
+ </div>
284
+ <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center">
285
+ <span class="text-xs font-semibold">4</span>
286
+ </div>
287
+ <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center">
288
+ <span class="text-xs font-semibold">5</span>
289
+ </div>
290
+ <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center">
291
+ <span class="text-xs font-semibold">6</span>
292
+ </div>
293
+ <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white">
294
+ <span class="font-bold">7</span>
295
+ </div>
296
+ <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white">
297
+ <span class="font-bold">8</span>
298
+ </div>
299
+ <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white">
300
+ <span class="font-bold">9</span>
301
+ </div>
302
+ <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center">
303
+ <span class="text-xs font-semibold">10</span>
304
+ </div>
305
+ <div class="bg-primary/10 aspect-square rounded-lg flex items-center justify-center text-primary">
306
+ <span class="font-semibold">11</span>
307
+ </div>
308
+ <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center">
309
+ <span class="text-xs font-semibold">12</span>
310
+ </div>
311
+ <div class="bg-white border-b-2 border-primary aspect-square rounded-lg flex items-center justify-center">
312
+ <span class="text-xs font-semibold">13</span>
313
+ </div>
314
+ <div class="bg-gradient-to-r from-primary to-secondary aspect-square rounded-lg flex items-center justify-center text-white">
315
+ <span class="font-bold">14</span>
316
+ </div>
317
+ <div class="border-2 border-gray-300 aspect-square rounded-lg"></div>
318
+ <div class="border-2 border-gray-300 aspect-square rounded-lg"></div>
319
+ <div class="border-2 border-gray-300 aspect-square rounded-lg"></div>
320
+ <div class="border-2 border-gray-300 aspect-square rounded-lg"></div>
321
+ <div class="border-2 border-gray-300 aspect-square rounded-lg"></div>
322
+ <div class="border-2 border-gray-300 aspect-square rounded-lg"></div>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="flex justify-center mt-3">
327
+ <div class="flex items-center mr-4">
328
+ <div class="w-3 h-3 rounded-full bg-gradient-to-r from-primary to-secondary mr-1"></div>
329
+ <span class="text-xs">Nicotine-free</span>
330
+ </div>
331
+ <div class="flex items-center mr-4">
332
+ <div class="w-3 h-3 rounded-full bg-secondary/10 border-b-2 border-secondary mr-1"></div>
333
+ <span class="text-xs">Mild craving</span>
334
+ </div>
335
+ <div class="flex items-center">
336
+ <div class="w-3 h-3 rounded-full bg-primary/10 mr-1"></div>
337
+ <span class="text-xs">Strong craving</span>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Journal Preview -->
343
+ <div class="mb-8">
344
+ <h3 class="font-bold text-lg mb-4 flex items-center">
345
+ <i class="fas fa-book text-blue-500 mr-2"></i> Recent Journal Entry
346
+ </h3>
347
+ <div class="bg-white p-4 rounded-lg shadow-sm">
348
+ <div class="flex justify-between items-center mb-3">
349
+ <h4 class="font-medium">Day 14 Reflection</h4>
350
+ <span class="text-sm text-gray-500">Yesterday</span>
351
+ </div>
352
+ <p class="text-gray-600 mb-4 line-clamp-3">
353
+ Today was challenging but rewarding. I had three strong cravings but managed to overcome them by going for a walk and drinking water. I'm noticing my sense of smell is improving already...
354
+ </p>
355
+ <div class="flex space-x-2">
356
+ <button class="text-primary text-sm font-medium">Read More</button>
357
+ <button class="text-gray-500 text-sm font-medium">New Entry</button>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Community Support -->
363
+ <div class="mb-8">
364
+ <h3 class="font-bold text-lg mb-4 flex items-center">
365
+ <i class="fas fa-users text-green-500 mr-2"></i> Community Support
366
+ </h3>
367
+ <div class="bg-white p-4 rounded-lg shadow-sm">
368
+ <div class="flex items-center mb-4">
369
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
370
+ <i class="fas fa-comments text-green-500"></i>
371
+ </div>
372
+ <div>
373
+ <h4 class="font-medium">Connect with Others</h4>
374
+ <p class="text-sm text-gray-500">Join discussions and share your journey</p>
375
+ </div>
376
+ </div>
377
+ <div class="grid grid-cols-3 gap-2">
378
+ <div class="bg-blue-50 text-blue-600 p-2 rounded text-center text-sm">
379
+ <i class="fas fa-comment-dots block mb-1"></i>
380
+ <span>12 New</span>
381
+ </div>
382
+ <div class="bg-purple-50 text-purple-600 p-2 rounded text-center text-sm">
383
+ <i class="fas fa-heart block mb-1"></i>
384
+ <span>8 Likes</span>
385
+ </div>
386
+ <div class="bg-green-50 text-green-600 p-2 rounded text-center text-sm">
387
+ <i class="fas fa-user-friends block mb-1"></i>
388
+ <span>24 Online</span>
389
+ </div>
390
+ </div>
391
+ <button class="w-full mt-4 bg-green-100 hover:bg-green-200 text-green-700 py-2 rounded-lg text-sm font-medium transition">
392
+ Join Community
393
+ </button>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Motivational Quote -->
398
+ <div class="bg-gradient-to-r from-accent to-pink-400 text-white rounded-lg p-4 mb-8">
399
+ <div class="flex justify-between items-start mb-2">
400
+ <i class="fas fa-quote-left text-white/40 text-xl"></i>
401
+ <button class="text-white/70 hover:text-white">
402
+ <i class="fas fa-sync-alt"></i>
403
+ </button>
404
+ </div>
405
+ <p class="font-medium mb-3">Every craving you overcome is building a healthier, stronger version of yourself.</p>
406
+ <div class="text-right text-white/80 text-sm">- QuitNic Team</div>
407
+ </div>
408
+
409
+ </main>
410
+
411
+ <!-- Floating Action Button -->
412
+ <div class="fixed bottom-24 right-4 z-10">
413
+ <button class="w-14 h-14 rounded-full bg-primary shadow-lg flex items-center justify-center group">
414
+ <i class="fas fa-plus text-white text-2xl group-hover:rotate-90 transition-transform"></i>
415
+ </button>
416
+ </div>
417
+
418
+ <!-- Health Benefits Notification -->
419
+ <div class="fixed bottom-40 right-4 z-10 w-64 bg-white rounded-lg shadow-xl p-4 animate-bounce">
420
+ <div class="flex items-start mb-2">
421
+ <div class="bg-green-100 text-green-600 w-8 h-8 rounded-full flex items-center justify-center mr-2">
422
+ <i class="fas fa-heartbeat"></i>
423
+ </div>
424
+ <div>
425
+ <h4 class="font-medium text-sm">Health Update</h4>
426
+ <p class="text-xs text-gray-500">Your circulation has improved by 15% since quitting!</p>
427
+ </div>
428
+ </div>
429
+ <button class="text-primary text-xs font-medium">Dismiss</button>
430
+ </div>
431
+
432
+ <!-- Tab Navigation -->
433
+ <div class="fixed bottom-0 left-0 right-0 bg-white border-t py-3 px-6">
434
+ <div class="flex justify-between">
435
+ <button class="text-primary">
436
+ <i class="fas fa-home text-xl mb-1"></i>
437
+ </button>
438
+ <button class="text-gray-400">
439
+ <i class="fas fa-heart text-xl mb-1"></i>
440
+ </button>
441
+ <button class="text-gray-400">
442
+ <i class="fas fa-chart-pie text-xl mb-1"></i>
443
+ </button>
444
+ <button class="text-gray-400">
445
+ <i class="fas fa-user text-xl mb-1"></i>
446
+ </button>
447
+ </div>
448
+ </div>
449
+
450
+ </div>
451
+
452
+ <script>
453
+ // Simple data persistence to simulate app functionality
454
+ document.addEventListener('DOMContentLoaded', function() {
455
+
456
+ // Example functionality for the cravings tracker
457
+ const calendarDays = document.querySelectorAll('[class*="aspect-square"]');
458
+
459
+ calendarDays.forEach(day => {
460
+ day.addEventListener('click', function() {
461
+ // Simulate day marking based on click position
462
+ if(this.classList.contains('border-b-2')) {
463
+ this.classList.remove('border-b-2', 'border-primary');
464
+ this.classList.add('bg-gradient-to-r', 'from-primary', 'to-secondary', 'text-white');
465
+ } else if(this.classList.contains('bg-gradient-to-r')) {
466
+ this.classList.remove('bg-gradient-to-r', 'from-primary', 'to-secondary', 'text-white');
467
+ this.classList.add('bg-primary/10', 'text-primary');
468
+ } else {
469
+ this.classList.add('border-b-2', 'border-primary');
470
+ }
471
+ });
472
+ });
473
+
474
+ // Update stats daily (simulated)
475
+ setTimeout(() => {
476
+ document.querySelector('[aria-label="Days streak"]').textContent = '15';
477
+ document.querySelector('[aria-label="Money saved"]').textContent = '$132';
478
+ }, 3000);
479
+ });
480
+ </script>
481
+ <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=Ptwo/quitnic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
482
+ </html>