Hugging Face's logo

Spaces:
ZarijaS
/
focus-forest
Running

App Files Community
ZarijaS commited on
Commit
3b6bacb
·
verified ·
1 Parent(s): ed30d03

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +360 -597
  2. prompts.txt +3 -1
index.html CHANGED
@@ -3,8 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Focus Forest - Grow Your Focus</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
  <style>
10
  @keyframes leaf-rustle {
@@ -17,10 +18,6 @@
17
  animation: leaf-rustle 2s infinite ease-in-out;
18
  }
19
 
20
- .tree-grow {
21
- transition: all 0.5s ease-out;
22
- }
23
-
24
  .progress-ring {
25
  transform: rotate(-90deg);
26
  }
@@ -29,19 +26,31 @@
29
  transition: stroke-dashoffset 0.5s linear;
30
  }
31
 
32
- .tree-container:hover .tree-info {
33
- opacity: 1;
34
- transform: translateY(0);
 
 
 
 
35
  }
36
 
37
- .tree-info {
38
  transition: all 0.3s ease;
39
- opacity: 0;
40
- transform: translateY(10px);
41
  }
42
 
43
- .season-bg {
44
- background: linear-gradient(to bottom, #e6f7ff 0%, #ffffff 100%);
 
 
 
 
 
 
 
 
 
 
45
  }
46
 
47
  .page {
@@ -62,38 +71,7 @@
62
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
63
  }
64
 
65
- .friend-request-btn {
66
- transition: all 0.2s ease;
67
- }
68
-
69
- .friend-request-btn:hover {
70
- transform: scale(1.05);
71
- }
72
-
73
- .stat-card {
74
- transition: transform 0.3s ease, box-shadow 0.3s ease;
75
- }
76
-
77
- .stat-card:hover {
78
- transform: translateY(-5px);
79
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
80
- }
81
-
82
- .login-card {
83
- transform: perspective(1000px) rotateX(0deg);
84
- transition: transform 0.5s ease, box-shadow 0.5s ease;
85
- }
86
-
87
- .login-card:hover {
88
- transform: perspective(1000px) rotateX(5deg);
89
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
90
- }
91
-
92
  @media (prefers-color-scheme: dark) {
93
- .season-bg {
94
- background: linear-gradient(to bottom, #1a365d 0%, #1a202c 100%);
95
- }
96
-
97
  .badge {
98
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
99
  }
@@ -101,626 +79,411 @@
101
  .stat-card:hover {
102
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
103
  }
 
 
 
 
104
  }
105
  </style>
106
  </head>
107
- <body class="season-bg min-h-screen font-sans text-gray-800 dark:text-gray-200">
108
- <!-- Login Page -->
109
- <div id="login-page" class="page min-h-screen flex items-center justify-center p-4">
110
- <div class="login-card bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 w-full max-w-md">
111
- <div class="text-center mb-8">
112
- <div class="flex justify-center mb-4">
113
- <i class="fas fa-leaf text-green-500 text-5xl"></i>
114
- </div>
115
- <h1 class="text-3xl font-bold mb-2">Focus Forest</h1>
116
- <p class="text-gray-500 dark:text-gray-400">Grow your focus, one tree at a time</p>
117
- </div>
118
-
119
- <form id="login-form" class="space-y-4">
120
- <div>
121
- <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
122
- <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="[email protected]" required>
123
- </div>
124
-
125
- <div>
126
- <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
127
- <input type="password" id="password" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="••••••••" required>
128
- </div>
129
-
130
- <div class="flex items-center justify-between">
131
- <div class="flex items-center">
132
- <input id="remember-me" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 dark:border-gray-600 rounded">
133
- <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
134
- </div>
135
-
136
- <a href="#" class="text-sm text-green-600 hover:text-green-500">Forgot password?</a>
137
- </div>
138
-
139
- <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition duration-200">
140
- Sign In
141
- </button>
142
-
143
- <div class="text-center text-sm text-gray-500 dark:text-gray-400">
144
- Don't have an account? <a href="#" id="show-signup" class="text-green-600 hover:text-green-500">Sign up</a>
145
- </div>
146
-
147
- <div class="relative my-6">
148
- <div class="absolute inset-0 flex items-center">
149
- <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
150
- </div>
151
- <div class="relative flex justify-center text-sm">
152
- <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
153
- </div>
154
  </div>
155
-
156
- <div class="grid grid-cols-2 gap-3">
157
- <button type="button" class="flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
158
- <i class="fab fa-google text-red-500 mr-2"></i>
159
- Google
160
  </button>
161
-
162
- <button type="button" class="flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
163
- <i class="fab fa-apple text-gray-800 dark:text-gray-200 mr-2"></i>
164
- Apple
165
  </button>
166
  </div>
167
- </form>
168
- </div>
169
- </div>
170
-
171
- <!-- Signup Page -->
172
- <div id="signup-page" class="page min-h-screen flex items-center justify-center p-4">
173
- <div class="login-card bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 w-full max-w-md">
174
- <div class="text-center mb-8">
175
- <div class="flex justify-center mb-4">
176
- <i class="fas fa-seedling text-green-500 text-5xl"></i>
177
- </div>
178
- <h1 class="text-3xl font-bold mb-2">Join Focus Forest</h1>
179
- <p class="text-gray-500 dark:text-gray-400">Start growing your focus today</p>
180
  </div>
181
-
182
- <form id="signup-form" class="space-y-4">
183
- <div>
184
- <label for="signup-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
185
- <input type="text" id="signup-name" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="John Doe" required>
186
- </div>
187
-
188
- <div>
189
- <label for="signup-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
190
- <input type="email" id="signup-email" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="[email protected]" required>
191
- </div>
192
-
193
- <div>
194
- <label for="signup-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
195
- <input type="password" id="signup-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="••••••••" required>
196
- </div>
197
-
198
- <div>
199
- <label for="signup-confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
200
- <input type="password" id="signup-confirm-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="••••••••" required>
201
- </div>
202
-
203
- <div class="flex items-center">
204
- <input id="terms" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 dark:border-gray-600 rounded" required>
205
- <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
206
- I agree to the <a href="#" class="text-green-600 hover:text-green-500">Terms</a> and <a href="#" class="text-green-600 hover:text-green-500">Privacy Policy</a>
207
- </label>
208
  </div>
209
-
210
- <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition duration-200">
211
- Create Account
212
- </button>
213
-
214
- <div class="text-center text-sm text-gray-500 dark:text-gray-400">
215
- Already have an account? <a href="#" id="show-login" class="text-green-600 hover:text-green-500">Sign in</a>
 
216
  </div>
217
- </form>
218
- </div>
219
- </div>
220
-
221
- <!-- Main App Container (shown after login) -->
222
- <div id="app-container" class="page">
223
- <div class="container mx-auto px-4 py-6 max-w-md pb-20">
224
- <!-- Home Page -->
225
- <div id="home-page" class="page active">
226
- <!-- Header -->
227
- <header class="flex justify-between items-center mb-6">
228
- <div class="flex items-center">
229
- <i class="fas fa-leaf text-green-500 text-2xl mr-2"></i>
230
- <h1 class="text-xl font-bold">Focus Forest</h1>
231
  </div>
232
- <div class="flex space-x-3">
233
- <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
234
- <i class="fas fa-user text-green-500"></i>
235
- </button>
236
- <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
237
- <i class="fas fa-cog text-green-500"></i>
238
- </button>
239
  </div>
240
- </header>
241
-
242
- <!-- Stats Overview -->
243
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
244
- <div class="flex justify-between items-center mb-4">
245
- <h2 class="font-semibold">Today's Focus</h2>
246
- <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">Day 7 Streak!</span>
247
  </div>
248
-
249
- <div class="grid grid-cols-3 gap-4 text-center">
 
 
 
 
 
250
  <div>
251
- <div class="text-2xl font-bold text-green-600">3</div>
252
- <div class="text-xs text-gray-500">Trees Grown</div>
253
  </div>
254
- <div>
255
- <div class="text-2xl font-bold text-blue-600">2h 15m</div>
256
- <div class="text-xs text-gray-500">Focus Time</div>
257
- </div>
258
- <div>
259
- <div class="text-2xl font-bold text-purple-600">85%</div>
260
- <div class="text-xs text-gray-500">Success Rate</div>
261
  </div>
262
  </div>
263
- </div>
264
 
265
- <!-- Focus Timer -->
266
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6 text-center relative overflow-hidden">
267
- <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-400 to-blue-500"></div>
268
-
269
- <h2 class="font-semibold mb-4">Current Focus Session</h2>
270
-
271
- <div class="relative w-40 h-40 mx-auto mb-4">
272
- <svg class="w-full h-full" viewBox="0 0 100 100">
273
- <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
274
- <circle class="text-green-500 progress-ring-circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"
275
- stroke-dasharray="251.2" stroke-dashoffset="75.36" />
276
- </svg>
277
- <div class="absolute inset-0 flex items-center justify-center flex-col">
278
- <div class="text-3xl font-bold" id="timer-display">25:00</div>
279
- <div class="text-xs text-gray-500">remaining</div>
280
  </div>
281
- </div>
282
-
283
- <div class="flex justify-center space-x-4">
284
- <button id="start-btn" class="px-6 py-2 bg-green-500 text-white rounded-full font-medium flex items-center">
285
- <i class="fas fa-play mr-2"></i> Start
286
- </button>
287
- <button id="cancel-btn" class="px-6 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium">
288
- Cancel
289
- </button>
290
- </div>
291
-
292
- <div class="mt-4 text-sm">
293
- <div class="inline-block px-3 py-1 bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full">
294
- <i class="fas fa-seedling mr-1"></i> Earn a Maple Tree
295
  </div>
296
  </div>
297
- </div>
298
 
299
- <!-- Forest Display -->
300
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
301
- <div class="flex justify-between items-center mb-3">
302
- <h2 class="font-semibold">Your Forest</h2>
303
- <div class="flex space-x-2">
304
- <button class="p-1 text-gray-500 hover:text-green-500">
305
- <i class="fas fa-expand"></i>
306
- </button>
307
- <button class="p-1 text-gray-500 hover:text-green-500">
308
- <i class="fas fa-filter"></i>
309
- </button>
310
- </div>
311
- </div>
312
-
313
- <div class="grid grid-cols-3 gap-4 min-h-40">
314
- <!-- Tree 1 -->
315
- <div class="tree-container relative flex flex-col items-center justify-end">
316
- <div class="tree-grow">
317
- <i class="fas fa-tree text-green-600 text-4xl leaf-rustle"></i>
318
- </div>
319
- <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
320
- <div>Maple Tree</div>
321
- <div class="text-gray-500">Today, 10:42 AM</div>
322
- </div>
323
- </div>
324
-
325
- <!-- Tree 2 -->
326
- <div class="tree-container relative flex flex-col items-center justify-end">
327
- <div class="tree-grow">
328
- <i class="fas fa-tree text-green-700 text-5xl leaf-rustle" style="animation-delay: 0.3s;"></i>
329
- </div>
330
- <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
331
- <div>Oak Tree</div>
332
- <div class="text-gray-500">Yesterday, 3:15 PM</div>
333
- </div>
334
- </div>
335
-
336
- <!-- Empty Slot -->
337
- <div class="flex flex-col items-center justify-center bg-green-50 dark:bg-gray-700 rounded-lg">
338
- <i class="fas fa-plus text-gray-400"></i>
339
- </div>
340
-
341
- <!-- Tree 3 -->
342
- <div class="tree-container relative flex flex-col items-center justify-end">
343
- <div class="tree-grow">
344
- <i class="fas fa-tree text-green-500 text-3xl leaf-rustle" style="animation-delay: 0.6s;"></i>
345
- </div>
346
- <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
347
- <div>Pine Tree</div>
348
- <div class="text-gray-500">Yesterday, 9:30 AM</div>
349
- </div>
350
- </div>
351
-
352
- <!-- Wilted Tree -->
353
- <div class="tree-container relative flex flex-col items-center justify-end opacity-50">
354
- <div class="tree-grow">
355
- <i class="fas fa-tree text-gray-400 text-4xl"></i>
356
- </div>
357
- <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
358
- <div>Wilted Maple</div>
359
- <div class="text-gray-500">Failed session</div>
360
- </div>
361
  </div>
362
-
363
- <!-- Empty Slot -->
364
- <div class="flex flex-col items-center justify-center bg-green-50 dark:bg-gray-700 rounded-lg">
365
- <i class="fas fa-plus text-gray-400"></i>
366
  </div>
367
  </div>
368
-
369
- <div class="mt-4 text-center">
370
- <button class="text-green-500 text-sm font-medium">
371
- View Full Forest <i class="fas fa-chevron-right ml-1"></i>
372
- </button>
373
- </div>
374
- </div>
375
 
376
- <!-- Rewards Section -->
377
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
378
- <h2 class="font-semibold mb-3">Your Rewards</h2>
379
-
380
- <div class="flex overflow-x-auto pb-2 -mx-2">
381
- <div class="flex-none px-2">
382
- <div class="w-32 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900 dark:to-blue-900 rounded-lg p-3">
383
- <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
384
- <i class="fas fa-tag text-green-500 text-xl"></i>
385
- </div>
386
- <div class="text-center">
387
- <div class="text-xs font-medium">15% Off</div>
388
- <div class="text-xs text-gray-500">Plant Nursery</div>
389
- </div>
390
- </div>
391
- </div>
392
-
393
- <div class="flex-none px-2">
394
- <div class="w-32 bg-gradient-to-br from-yellow-100 to-orange-100 dark:from-yellow-900 dark:to-orange-900 rounded-lg p-3">
395
- <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
396
- <i class="fas fa-seedling text-yellow-500 text-xl"></i>
397
- </div>
398
- <div class="text-center">
399
- <div class="text-xs font-medium">Free Seed Pack</div>
400
- <div class="text-xs text-gray-500">5 Trees Needed</div>
401
- </div>
402
- </div>
403
  </div>
404
-
405
- <div class="flex-none px-2">
406
- <div class="w-32 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900 rounded-lg p-3 opacity-50">
407
- <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
408
- <i class="fas fa-mug-hot text-purple-500 text-xl"></i>
409
- </div>
410
- <div class="text-center">
411
- <div class="text-xs font-medium">Free Coffee</div>
412
- <div class="text-xs text-gray-500">10 Trees Needed</div>
413
- </div>
414
- </div>
415
  </div>
416
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
  </div>
418
  </div>
419
 
420
- <!-- Stats Page -->
421
- <div id="stats-page" class="page">
422
- <header class="flex justify-between items-center mb-6">
423
- <div class="flex items-center">
424
- <button class="mr-2 text-gray-500 back-button">
425
- <i class="fas fa-arrow-left"></i>
426
- </button>
427
- <h1 class="text-xl font-bold">Your Progress</h1>
428
- </div>
429
- <div class="flex space-x-3">
430
- <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
431
- <i class="fas fa-calendar text-green-500"></i>
432
- </button>
433
  </div>
434
- </header>
435
 
436
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
437
- <div class="flex justify-between items-center mb-4">
438
- <h2 class="font-semibold">Weekly Summary</h2>
439
- <div class="text-xs text-gray-500">Jun 10 - Jun 16</div>
440
- </div>
441
-
442
- <div class="grid grid-cols-3 gap-4 mb-4">
443
- <div class="stat-card bg-green-50 dark:bg-gray-700 rounded-lg p-3 text-center">
444
- <div class="text-2xl font-bold text-green-600">12</div>
445
- <div class="text-xs text-gray-500">Sessions</div>
446
- </div>
447
- <div class="stat-card bg-blue-50 dark:bg-gray-700 rounded-lg p-3 text-center">
448
- <div class="text-2xl font-bold text-blue-600">8h 42m</div>
449
- <div class="text-xs text-gray-500">Focus Time</div>
450
- </div>
451
- <div class="stat-card bg-purple-50 dark:bg-gray-700 rounded-lg p-3 text-center">
452
- <div class="text-2xl font-bold text-purple-600">92%</div>
453
- <div class="text-xs text-gray-500">Success Rate</div>
454
  </div>
 
455
  </div>
456
-
457
- <div class="h-40 mb-4">
458
- <canvas id="weeklyChart"></canvas>
 
 
459
  </div>
460
-
461
- <div class="flex justify-between text-xs text-gray-500">
462
- <div>Mon</div>
463
- <div>Tue</div>
464
- <div>Wed</div>
465
- <div>Thu</div>
466
- <div>Fri</div>
467
- <div>Sat</div>
468
- <div>Sun</div>
469
  </div>
470
- </div>
471
-
472
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
473
- <h2 class="font-semibold mb-4">Achievements</h2>
474
-
475
- <div class="grid grid-cols-2 gap-3">
476
- <div class="flex items-center bg-green-50 dark:bg-gray-700 rounded-lg p-3">
477
- <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
478
- <i class="fas fa-medal text-green-500"></i>
479
- </div>
480
- <div>
481
- <div class="text-sm font-medium">First Tree</div>
482
- <div class="text-xs text-gray-500">Completed 1 session</div>
483
- </div>
484
  </div>
485
-
486
- <div class="flex items-center bg-green-50 dark:bg-gray-700 rounded-lg p-3">
487
- <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
488
- <i class="fas fa-fire text-orange-500"></i>
489
- </div>
490
- <div>
491
- <div class="text-sm font-medium">7-Day Streak</div>
492
- <div class="text-xs text-gray-500">7 days in a row</div>
493
- </div>
494
  </div>
495
-
496
- <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-3 opacity-50">
497
- <div class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
498
- <i class="fas fa-forest text-green-500"></i>
499
- </div>
500
- <div>
501
- <div class="text-sm font-medium">Forest Master</div>
502
- <div class="text-xs text-gray-500">Grow 50 trees</div>
503
- </div>
504
  </div>
505
-
506
- <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-3 opacity-50">
507
- <div class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
508
- <i class="fas fa-clock text-blue-500"></i>
509
- </div>
510
- <div>
511
- <div class="text-sm font-medium">Time Master</div>
512
- <div class="text-xs text-gray-500">100 hours focused</div>
513
- </div>
514
  </div>
 
515
  </div>
516
  </div>
517
 
518
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
519
- <h2 class="font-semibold mb-4">Focus History</h2>
520
-
521
- <div class="space-y-3">
522
- <div class="flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700">
523
- <div class="flex items-center">
524
- <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
525
- <i class="fas fa-tree text-green-500 text-sm"></i>
526
- </div>
527
- <div>
528
- <div class="text-sm font-medium">Maple Tree</div>
529
- <div class="text-xs text-gray-500">Today, 10:42 AM</div>
530
- </div>
531
- </div>
532
- <div class="text-sm font-medium text-green-500">25:00</div>
533
- </div>
534
-
535
- <div class="flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700">
536
- <div class="flex items-center">
537
- <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
538
- <i class="fas fa-tree text-green-500 text-sm"></i>
539
- </div>
540
- <div>
541
- <div class="text-sm font-medium">Oak Tree</div>
542
- <div class="text-xs text-gray-500">Yesterday, 3:15 PM</div>
543
- </div>
544
- </div>
545
- <div class="text-sm font-medium text-green-500">25:00</div>
546
- </div>
547
-
548
- <div class="flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700">
549
- <div class="flex items-center">
550
- <div class="w-8 h-8 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
551
- <i class="fas fa-tree text-gray-400 text-sm"></i>
552
- </div>
553
- <div>
554
- <div class="text-sm font-medium">Wilted Maple</div>
555
- <div class="text-xs text-gray-500">Yesterday, 9:30 AM</div>
556
- </div>
557
- </div>
558
- <div class="text-sm font-medium text-gray-500">12:45</div>
559
- </div>
560
-
561
- <div class="flex items-center justify-between p-2">
562
- <div class="flex items-center">
563
- <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
564
- <i class="fas fa-tree text-green-500 text-sm"></i>
565
- </div>
566
- <div>
567
- <div class="text-sm font-medium">Pine Tree</div>
568
- <div class="text-xs text-gray-500">Jun 14, 2:20 PM</div>
569
- </div>
570
- </div>
571
- <div class="text-sm font-medium text-green-500">25:00</div>
572
- </div>
573
- </div>
574
-
575
- <button class="w-full mt-4 text-green-500 text-sm font-medium">
576
- View All History <i class="fas fa-chevron-right ml-1"></i>
577
  </button>
578
  </div>
579
  </div>
580
 
581
- <!-- Rewards Page -->
582
- <div id="rewards-page" class="page">
583
- <header class="flex justify-between items-center mb-6">
584
- <div class="flex items-center">
585
- <button class="mr-2 text-gray-500 back-button">
586
- <i class="fas fa-arrow-left"></i>
587
- </button>
588
- <h1 class="text-xl font-bold">Your Rewards</h1>
589
- </div>
590
- <div class="flex space-x-3">
591
- <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
592
- <i class="fas fa-gift text-green-500"></i>
593
- </button>
594
- </div>
595
- </header>
596
 
597
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
598
- <div class="flex justify-between items-center mb-4">
599
- <h2 class="font-semibold">Available Rewards</h2>
600
- <div class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">
601
- 3 unlocked
 
 
 
602
  </div>
603
  </div>
604
 
605
- <div class="space-y-4">
606
- <div class="flex items-center bg-white dark:bg-gray-700 border border-green-200 dark:border-green-800 rounded-lg p-4">
607
- <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4">
608
- <i class="fas fa-tag text-green-500 text-xl"></i>
609
- </div>
610
- <div class="flex-1">
611
- <div class="font-medium">15% Off Plant Nursery</div>
612
- <div class="text-xs text-gray-500">Grow 3 trees to unlock</div>
613
- </div>
614
- <button class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium">
615
- Claim
616
- </button>
617
  </div>
618
-
619
- <div class="flex items-center bg-white dark:bg-gray-700 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
620
- <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center mr-4">
621
- <i class="fas fa-seedling text-yellow-500 text-xl"></i>
622
- </div>
623
- <div class="flex-1">
624
- <div class="font-medium">Free Seed Pack</div>
625
- <div class="text-xs text-gray-500">Grow 5 trees to unlock</div>
626
- </div>
627
- <button class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-medium">
628
- Claim
629
- </button>
630
- </div>
631
-
632
- <div class="flex items-center bg-white dark:bg-gray-700 border border-purple-200 dark:border-purple-800 rounded-lg p-4 opacity-50">
633
- <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4">
634
- <i class="fas fa-mug-hot text-purple-500 text-xl"></i>
635
- </div>
636
- <div class="flex-1">
637
- <div class="font-medium">Free Coffee</div>
638
- <div class="text-xs text-gray-500">Grow 10 trees to unlock</div>
639
- </div>
640
- <button class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium" disabled>
641
- Locked
642
- </button>
643
  </div>
644
  </div>
645
- </div>
646
-
647
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
648
- <h2 class="font-semibold mb-4">Partner Offers</h2>
649
 
650
- <div class="grid grid-cols-2 gap-3">
651
- <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 rounded-lg p-3">
652
- <div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center mb-2 mx-auto">
653
- <i class="fas fa-book text-blue-500"></i>
654
- </div>
655
- <div class="text-center">
656
- <div class="text-sm font-medium">Audible</div>
657
- <div class="text-xs text-gray-500">30-day free trial</div>
658
- </div>
659
  </div>
660
-
661
- <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900 dark:to-green-800 rounded-lg p-3">
662
- <div class="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center mb-2 mx-auto">
663
- <i class="fas fa-headphones text-green-500"></i>
664
- </div>
665
- <div class="text-center">
666
- <div class="text-sm font-medium">Headspace</div>
667
- <div class="text-xs text-gray-500">2 weeks free</div>
668
- </div>
669
  </div>
670
-
671
- <div class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900 dark:to-red-800 rounded-lg p-3">
672
- <div class="w-10 h-10 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center mb-2 mx-auto">
673
- <i class="fab fa-spotify text-red-500"></i>
674
- </div>
675
- <div class="text-center">
676
- <div class="text-sm font-medium">Spotify</div>
677
- <div class="text-xs text-gray-500">3 months for $1</div>
678
- </div>
679
  </div>
680
-
681
- <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900 dark:to-purple-800 rounded-lg p-3">
682
- <div class="w-10 h-10 bg-purple-100 dark:bg-purple-800 rounded-full flex items-center justify-center mb-2 mx-auto">
683
- <i class="fas fa-brain text-purple-500"></i>
684
- </div>
685
- <div class="text-center">
686
- <div class="text-sm font-medium">Lumosity</div>
687
- <div class="text-xs text-gray-500">7-day free trial</div>
688
- </div>
689
  </div>
690
  </div>
691
  </div>
 
 
 
 
 
692
 
693
- <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
694
- <h2 class="font-semibold mb-4">Redeem Code</h2>
 
 
 
 
 
695
 
696
- <div class="flex">
697
- <input type="text" class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="Enter promo code">
698
- <button class="bg-green-500 text-white px-4 py-2 rounded-r-lg font-medium">
699
- Redeem
700
- </button>
701
- </div>
702
 
703
- <div class="mt-3 text-xs text-gray-500">
704
- Have a promo code? Enter it above to unlock special rewards.
705
- </div>
 
 
 
 
 
 
 
 
 
 
706
  </div>
707
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
708
 
709
- <!-- Community Page -->
710
- <div id="community-page" class="page">
711
- <header class="flex justify-between items-center mb-6">
712
- <div class="flex items-center">
713
- <button class="mr-2 text-gray-500 back-button">
714
- <i class="fas fa-arrow-left"></i>
715
- </button>
716
- <h1 class="text-xl font-bold">Community</h1>
717
- </div>
718
- <div class="flex space-x-3">
719
- <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
720
- <i class="fas fa-search text-green-500"></i>
721
- </button>
722
- </div>
723
- </header>
724
-
725
- <div class
 
 
 
 
 
 
 
 
 
726
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Focus Forest - Results Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
  @keyframes leaf-rustle {
 
18
  animation: leaf-rustle 2s infinite ease-in-out;
19
  }
20
 
 
 
 
 
21
  .progress-ring {
22
  transform: rotate(-90deg);
23
  }
 
26
  transition: stroke-dashoffset 0.5s linear;
27
  }
28
 
29
+ .stat-card {
30
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
31
+ }
32
+
33
+ .stat-card:hover {
34
+ transform: translateY(-5px);
35
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
36
  }
37
 
38
+ .dashboard-card {
39
  transition: all 0.3s ease;
 
 
40
  }
41
 
42
+ .dashboard-card:hover {
43
+ transform: translateY(-3px);
44
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ .streak-flame {
48
+ animation: pulse 1.5s infinite;
49
+ }
50
+
51
+ @keyframes pulse {
52
+ 0%, 100% { opacity: 1; }
53
+ 50% { opacity: 0.7; }
54
  }
55
 
56
  .page {
 
71
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
72
  }
73
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  @media (prefers-color-scheme: dark) {
 
 
 
 
75
  .badge {
76
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
77
  }
 
79
  .stat-card:hover {
80
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
81
  }
82
+
83
+ .dashboard-card:hover {
84
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
85
+ }
86
  }
87
  </style>
88
  </head>
89
+ <body class="bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
90
+ <!-- Results Dashboard Page -->
91
+ <div id="results-page" class="page active">
92
+ <!-- Header -->
93
+ <header class="bg-white dark:bg-gray-800 shadow-sm p-4 sticky top-0 z-10">
94
+ <div class="container mx-auto flex justify-between items-center">
95
+ <div class="flex items-center">
96
+ <i class="fas fa-leaf text-green-500 text-2xl mr-2"></i>
97
+ <h1 class="text-xl font-bold">Focus Forest</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </div>
99
+ <div class="flex space-x-3">
100
+ <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
101
+ <i class="fas fa-bell text-green-500"></i>
 
 
102
  </button>
103
+ <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
104
+ <i class="fas fa-cog text-green-500"></i>
 
 
105
  </button>
106
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </div>
108
+ </header>
109
+
110
+ <div class="container mx-auto px-4 py-6 max-w-md pb-20">
111
+ <!-- User Summary -->
112
+ <div class="bg-gradient-to-r from-green-500 to-blue-500 text-white rounded-xl shadow-md p-5 mb-6 relative overflow-hidden">
113
+ <div class="absolute -right-4 -bottom-4 opacity-20">
114
+ <i class="fas fa-leaf text-6xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </div>
116
+ <div class="flex items-center mb-3">
117
+ <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
118
+ <i class="fas fa-user text-xl"></i>
119
+ </div>
120
+ <div>
121
+ <h2 class="font-bold text-lg">Alex Morgan</h2>
122
+ <p class="text-sm opacity-90">Member since May 2023</p>
123
+ </div>
124
  </div>
125
+ <div class="flex justify-between mt-4">
126
+ <div class="text-center">
127
+ <div class="text-xl font-bold">24</div>
128
+ <div class="text-xs">Trees</div>
 
 
 
 
 
 
 
 
 
 
129
  </div>
130
+ <div class="text-center">
131
+ <div class="text-xl font-bold">42</div>
132
+ <div class="text-xs">Rank</div>
 
 
 
 
133
  </div>
134
+ <div class="text-center">
135
+ <div class="text-xl font-bold">7</div>
136
+ <div class="text-xs">Day Streak</div>
 
 
 
 
137
  </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Quick Stats -->
142
+ <div class="grid grid-cols-2 gap-4 mb-6">
143
+ <a href="#forest-page" class="dashboard-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
144
+ <div class="flex items-center justify-between">
145
  <div>
146
+ <div class="text-sm text-gray-500">Total Focus Time</div>
147
+ <div class="text-xl font-bold">42h 15m</div>
148
  </div>
149
+ <div class="bg-green-100 dark:bg-green-900 text-green-500 rounded-full p-2">
150
+ <i class="fas fa-clock"></i>
 
 
 
 
 
151
  </div>
152
  </div>
153
+ </a>
154
 
155
+ <a href="#forest-page" class="dashboard-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
156
+ <div class="flex items-center justify-between">
157
+ <div>
158
+ <div class="text-sm text-gray-500">Trees Grown</div>
159
+ <div class="text-xl font-bold">24</div>
 
 
 
 
 
 
 
 
 
 
160
  </div>
161
+ <div class="bg-green-100 dark:bg-green-900 text-green-500 rounded-full p-2">
162
+ <i class="fas fa-tree"></i>
 
 
 
 
 
 
 
 
 
 
 
 
163
  </div>
164
  </div>
165
+ </a>
166
 
167
+ <a href="#stats-page" class="dashboard-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
168
+ <div class="flex items-center justify-between">
169
+ <div>
170
+ <div class="text-sm text-gray-500">Success Rate</div>
171
+ <div class="text-xl font-bold">85%</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
+ <div class="bg-green-100 dark:bg-green-900 text-green-500 rounded-full p-2">
174
+ <i class="fas fa-trophy"></i>
 
 
175
  </div>
176
  </div>
177
+ </a>
 
 
 
 
 
 
178
 
179
+ <a href="#community-page" class="dashboard-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
180
+ <div class="flex items-center justify-between">
181
+ <div>
182
+ <div class="text-sm text-gray-500">Forest Rank</div>
183
+ <div class="text-xl font-bold">#42</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
+ <div class="bg-green-100 dark:bg-green-900 text-green-500 rounded-full p-2">
186
+ <i class="fas fa-medal"></i>
 
 
 
 
 
 
 
 
 
187
  </div>
188
  </div>
189
+ </a>
190
+ </div>
191
+
192
+ <!-- Weekly Progress -->
193
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
194
+ <div class="flex justify-between items-center mb-3">
195
+ <h2 class="font-semibold">Weekly Progress</h2>
196
+ <a href="#stats-page" class="text-xs text-green-500">View All Stats</a>
197
+ </div>
198
+
199
+ <div class="h-40">
200
+ <canvas id="weeklyChart"></canvas>
201
+ </div>
202
+
203
+ <div class="flex justify-between text-xs text-gray-500 mt-2">
204
+ <div>Mon</div>
205
+ <div>Tue</div>
206
+ <div>Wed</div>
207
+ <div>Thu</div>
208
+ <div>Fri</div>
209
+ <div>Sat</div>
210
+ <div>Sun</div>
211
  </div>
212
  </div>
213
 
214
+ <!-- Current Streak -->
215
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
216
+ <div class="flex justify-between items-center mb-3">
217
+ <h2 class="font-semibold">Current Streak</h2>
218
+ <div class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">
219
+ 7 days
 
 
 
 
 
 
 
220
  </div>
221
+ </div>
222
 
223
+ <div class="flex justify-between">
224
+ <div class="text-center">
225
+ <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-1">
226
+ <i class="fas fa-check text-xs"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
  </div>
228
+ <div class="text-xs text-gray-500">Mon</div>
229
  </div>
230
+ <div class="text-center">
231
+ <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-1">
232
+ <i class="fas fa-check text-xs"></i>
233
+ </div>
234
+ <div class="text-xs text-gray-500">Tue</div>
235
  </div>
236
+ <div class="text-center">
237
+ <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-1">
238
+ <i class="fas fa-check text-xs"></i>
239
+ </div>
240
+ <div class="text-xs text-gray-500">Wed</div>
 
 
 
 
241
  </div>
242
+ <div class="text-center">
243
+ <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-1">
244
+ <i class="fas fa-check text-xs"></i>
 
 
 
 
 
 
 
 
 
 
 
245
  </div>
246
+ <div class="text-xs text-gray-500">Thu</div>
247
+ </div>
248
+ <div class="text-center">
249
+ <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-1">
250
+ <i class="fas fa-check text-xs"></i>
 
 
 
 
251
  </div>
252
+ <div class="text-xs text-gray-500">Fri</div>
253
+ </div>
254
+ <div class="text-center">
255
+ <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-1">
256
+ <i class="fas fa-check text-xs"></i>
 
 
 
 
257
  </div>
258
+ <div class="text-xs text-gray-500">Sat</div>
259
+ </div>
260
+ <div class="text-center">
261
+ <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-1">
262
+ <i class="fas fa-check text-xs"></i>
 
 
 
 
263
  </div>
264
+ <div class="text-xs text-gray-500">Sun</div>
265
  </div>
266
  </div>
267
 
268
+ <div class="mt-4 text-center">
269
+ <button class="text-green-500 text-sm font-medium">
270
+ Keep the streak going! <i class="fas fa-fire streak-flame text-orange-500 ml-1"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
271
  </button>
272
  </div>
273
  </div>
274
 
275
+ <!-- Recent Achievements -->
276
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
277
+ <div class="flex justify-between items-center mb-3">
278
+ <h2 class="font-semibold">Recent Achievements</h2>
279
+ <a href="#stats-page" class="text-xs text-green-500">View All</a>
280
+ </div>
 
 
 
 
 
 
 
 
 
281
 
282
+ <div class="grid grid-cols-2 gap-3">
283
+ <div class="flex items-center bg-green-50 dark:bg-green-900 rounded-lg p-3">
284
+ <div class="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center mr-3">
285
+ <i class="fas fa-medal text-green-500"></i>
286
+ </div>
287
+ <div>
288
+ <div class="text-sm font-medium">First Tree</div>
289
+ <div class="text-xs text-gray-500">Completed 1 session</div>
290
  </div>
291
  </div>
292
 
293
+ <div class="flex items-center bg-green-50 dark:bg-green-900 rounded-lg p-3">
294
+ <div class="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center mr-3">
295
+ <i class="fas fa-fire text-orange-500"></i>
 
 
 
 
 
 
 
 
 
296
  </div>
297
+ <div>
298
+ <div class="text-sm font-medium">7-Day Streak</div>
299
+ <div class="text-xs text-gray-500">7 days in a row</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
  </div>
301
  </div>
 
 
 
 
302
 
303
+ <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-3 opacity-50">
304
+ <div class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
305
+ <i class="fas fa-forest text-green-500"></i>
 
 
 
 
 
 
306
  </div>
307
+ <div>
308
+ <div class="text-sm font-medium">Forest Master</div>
309
+ <div class="text-xs text-gray-500">Grow 50 trees</div>
 
 
 
 
 
 
310
  </div>
311
+ </div>
312
+
313
+ <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-3 opacity-50">
314
+ <div class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
315
+ <i class="fas fa-clock text-blue-500"></i>
 
 
 
 
316
  </div>
317
+ <div>
318
+ <div class="text-sm font-medium">Time Master</div>
319
+ <div class="text-xs text-gray-500">100 hours focused</div>
 
 
 
 
 
 
320
  </div>
321
  </div>
322
  </div>
323
+ </div>
324
+
325
+ <!-- Quick Links -->
326
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
327
+ <h2 class="font-semibold mb-4">Quick Links</h2>
328
 
329
+ <div class="grid grid-cols-2 gap-3">
330
+ <a href="#forest-page" class="bg-blue-50 dark:bg-blue-900 rounded-lg p-4 text-center">
331
+ <div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center mx-auto mb-2">
332
+ <i class="fas fa-tree text-blue-500"></i>
333
+ </div>
334
+ <div class="text-sm font-medium">View Forest</div>
335
+ </a>
336
 
337
+ <a href="#stats-page" class="bg-purple-50 dark:bg-purple-900 rounded-lg p-4 text-center">
338
+ <div class="w-10 h-10 bg-purple-100 dark:bg-purple-800 rounded-full flex items-center justify-center mx-auto mb-2">
339
+ <i class="fas fa-chart-line text-purple-500"></i>
340
+ </div>
341
+ <div class="text-sm font-medium">View Stats</div>
342
+ </a>
343
 
344
+ <a href="#community-page" class="bg-green-50 dark:bg-green-900 rounded-lg p-4 text-center">
345
+ <div class="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center mx-auto mb-2">
346
+ <i class="fas fa-users text-green-500"></i>
347
+ </div>
348
+ <div class="text-sm font-medium">Community</div>
349
+ </a>
350
+
351
+ <a href="#profile-page" class="bg-yellow-50 dark:bg-yellow-900 rounded-lg p-4 text-center">
352
+ <div class="w-10 h-10 bg-yellow-100 dark:bg-yellow-800 rounded-full flex items-center justify-center mx-auto mb-2">
353
+ <i class="fas fa-user text-yellow-500"></i>
354
+ </div>
355
+ <div class="text-sm font-medium">Profile</div>
356
+ </a>
357
  </div>
358
  </div>
359
+ </div>
360
+
361
+ <!-- Bottom Navigation -->
362
+ <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg border-t border-gray-200 dark:border-gray-700 flex justify-around items-center p-2 z-10">
363
+ <button class="nav-btn p-3 rounded-full flex flex-col items-center text-green-500" data-page="dashboard-page">
364
+ <i class="fas fa-home text-xl"></i>
365
+ <span class="text-xs mt-1">Home</span>
366
+ </button>
367
+ <button class="nav-btn p-3 rounded-full flex flex-col items-center text-gray-500 dark:text-gray-400" data-page="stats-page">
368
+ <i class="fas fa-chart-line text-xl"></i>
369
+ <span class="text-xs mt-1">Stats</span>
370
+ </button>
371
+ <button class="nav-btn p-3 rounded-full flex flex-col items-center text-gray-500 dark:text-gray-400" data-page="forest-page">
372
+ <i class="fas fa-tree text-xl"></i>
373
+ <span class="text-xs mt-1">Forest</span>
374
+ </button>
375
+ <button class="nav-btn p-3 rounded-full flex flex-col items-center text-gray-500 dark:text-gray-400" data-page="community-page">
376
+ <i class="fas fa-users text-xl"></i>
377
+ <span class="text-xs mt-1">Community</span>
378
+ </button>
379
+ <button class="nav-btn p-3 rounded-full flex flex-col items-center text-gray-500 dark:text-gray-400" data-page="profile-page">
380
+ <i class="fas fa-user text-xl"></i>
381
+ <span class="text-xs mt-1">Profile</span>
382
+ </button>
383
+ </nav>
384
+ </div>
385
+
386
+ <!-- Other Pages (simplified for this example) -->
387
+ <div id="stats-page" class="page">
388
+ <!-- Stats page content would go here -->
389
+ </div>
390
+
391
+ <div id="forest-page" class="page">
392
+ <!-- Forest page content would go here -->
393
+ </div>
394
+
395
+ <div id="community-page" class="page">
396
+ <!-- Community page content would go here -->
397
+ </div>
398
+
399
+ <div id="profile-page" class="page">
400
+ <!-- Profile page content would go here -->
401
+ </div>
402
+
403
+ <script>
404
+ // Initialize charts
405
+ document.addEventListener('DOMContentLoaded', function() {
406
+ // Weekly Chart
407
+ const weeklyCtx = document.getElementById('weeklyChart').getContext('2d');
408
+ const weeklyChart = new Chart(weeklyCtx, {
409
+ type: 'bar',
410
+ data: {
411
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
412
+ datasets: [{
413
+ label: 'Focus Time (min)',
414
+ data: [45, 60, 75, 50, 65, 40, 55],
415
+ backgroundColor: [
416
+ 'rgba(16, 185, 129, 0.7)',
417
+ 'rgba(16, 185, 129, 0.7)',
418
+ 'rgba(16, 185, 129, 0.7)',
419
+ 'rgba(16, 185, 129, 0.7)',
420
+ 'rgba(16, 185, 129, 0.7)',
421
+ 'rgba(16, 185, 129, 0.7)',
422
+ 'rgba(16, 185, 129, 0.7)'
423
+ ],
424
+ borderColor: [
425
+ 'rgba(16, 185, 129, 1)',
426
+ 'rgba(16, 185, 129, 1)',
427
+ 'rgba(16, 185, 129, 1)',
428
+ 'rgba(16, 185, 129, 1)',
429
+ 'rgba(16, 185, 129, 1)',
430
+ 'rgba(16, 185, 129, 1)',
431
+ 'rgba(16, 185, 129, 1)'
432
+ ],
433
+ borderWidth: 1
434
+ }]
435
+ },
436
+ options: {
437
+ responsive: true,
438
+ maintainAspectRatio: false,
439
+ scales: {
440
+ y: {
441
+ beginAtZero: true,
442
+ grid: {
443
+ display: false
444
+ },
445
+ ticks: {
446
+ display: false
447
+ }
448
+ },
449
+ x: {
450
+ grid: {
451
+ display: false
452
+ }
453
+ }
454
+ },
455
+ plugins: {
456
+ legend: {
457
+ display: false
458
+ }
459
+ }
460
+ }
461
+ });
462
 
463
+ // Navigation between pages
464
+ const navButtons = document.querySelectorAll('.nav-btn');
465
+ navButtons.forEach(button => {
466
+ button.addEventListener('click', function() {
467
+ const targetPage = this.getAttribute('data-page');
468
+
469
+ // Remove active class from all pages
470
+ document.querySelectorAll('.page').forEach(page => {
471
+ page.classList.remove('active');
472
+ });
473
+
474
+ // Add active class to target page
475
+ document.getElementById(targetPage).classList.add('active');
476
+
477
+ // Update active nav button
478
+ navButtons.forEach(btn => {
479
+ btn.classList.remove('text-green-500');
480
+ btn.classList.add('text-gray-500', 'dark:text-gray-400');
481
+ });
482
+ this.classList.remove('text-gray-500', 'dark:text-gray-400');
483
+ this.classList.add('text-green-500');
484
+ });
485
+ });
486
+ });
487
+ </script>
488
+ <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=ZarijaS/focus-forest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
489
  </html>
prompts.txt CHANGED
@@ -1 +1,3 @@
1
- you create homepage, which is great. Now I need every other section from app to be functional. From log in to tracking progress to connect with friends...
 
 
 
1
+ you create homepage, which is great. Now I need every other section from app to be functional. From log in to tracking progress to connect with friends...
2
+ now create dashboard for following progress
3
+ create page where you user can see results which he/she make and connect all pages which you make for this app