Hugging Face's logo

Spaces:
G0dun
/
lifecraft
Running

App Files Community
G0dun commited on
Commit
dd8058a
·
verified ·
1 Parent(s): f91cf6d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +990 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Lifecraft
3
- emoji: 👁
4
- colorFrom: red
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: lifecraft
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,990 @@
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>LifeCraft - Optimize Your Daily Routine</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #6366f1;
11
+ --primary-dark: #4f46e5;
12
+ --secondary: #10b981;
13
+ --dark: #1e293b;
14
+ --light: #f8fafc;
15
+ --gray: #94a3b8;
16
+ --red: #ef4444;
17
+ --yellow: #f59e0b;
18
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
19
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
20
+ --transition: all 0.3s ease;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ }
29
+
30
+ body {
31
+ background-color: #f1f5f9;
32
+ color: var(--dark);
33
+ line-height: 1.5;
34
+ }
35
+
36
+ .container {
37
+ display: grid;
38
+ grid-template-columns: 280px 1fr;
39
+ min-height: 100vh;
40
+ }
41
+
42
+ /* Sidebar Styles */
43
+ .sidebar {
44
+ background-color: white;
45
+ box-shadow: var(--shadow);
46
+ padding: 1.5rem;
47
+ position: relative;
48
+ z-index: 10;
49
+ }
50
+
51
+ .logo {
52
+ display: flex;
53
+ align-items: center;
54
+ margin-bottom: 2rem;
55
+ color: var(--primary);
56
+ font-weight: 700;
57
+ font-size: 1.5rem;
58
+ }
59
+
60
+ .logo i {
61
+ margin-right: 0.75rem;
62
+ font-size: 1.75rem;
63
+ }
64
+
65
+ .nav-menu {
66
+ margin-top: 2rem;
67
+ }
68
+
69
+ .nav-item {
70
+ margin-bottom: 0.75rem;
71
+ border-radius: 0.5rem;
72
+ transition: var(--transition);
73
+ }
74
+
75
+ .nav-item.active {
76
+ background-color: var(--primary);
77
+ }
78
+
79
+ .nav-item.active a {
80
+ color: white;
81
+ }
82
+
83
+ .nav-item:hover:not(.active) {
84
+ background-color: #f1f5f9;
85
+ }
86
+
87
+ .nav-item a {
88
+ display: flex;
89
+ align-items: center;
90
+ padding: 0.75rem 1rem;
91
+ color: var(--dark);
92
+ text-decoration: none;
93
+ font-weight: 500;
94
+ }
95
+
96
+ .nav-item i {
97
+ margin-right: 0.75rem;
98
+ font-size: 1.25rem;
99
+ }
100
+
101
+ .user-profile {
102
+ position: absolute;
103
+ bottom: 2rem;
104
+ left: 1.5rem;
105
+ right: 1.5rem;
106
+ display: flex;
107
+ align-items: center;
108
+ padding: 0.75rem;
109
+ background-color: #f1f5f9;
110
+ border-radius: 0.5rem;
111
+ }
112
+
113
+ .user-avatar {
114
+ width: 40px;
115
+ height: 40px;
116
+ border-radius: 50%;
117
+ background-color: var(--primary);
118
+ color: white;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ margin-right: 0.75rem;
123
+ font-weight: 600;
124
+ }
125
+
126
+ .user-info h4 {
127
+ font-size: 0.875rem;
128
+ margin-bottom: 0.25rem;
129
+ }
130
+
131
+ .user-info p {
132
+ font-size: 0.75rem;
133
+ color: var(--gray);
134
+ }
135
+
136
+ /* Main Content Styles */
137
+ .main-content {
138
+ padding: 2rem;
139
+ overflow-y: auto;
140
+ }
141
+
142
+ .header {
143
+ display: flex;
144
+ justify-content: space-between;
145
+ align-items: center;
146
+ margin-bottom: 2rem;
147
+ }
148
+
149
+ .greeting h1 {
150
+ font-size: 1.75rem;
151
+ margin-bottom: 0.25rem;
152
+ }
153
+
154
+ .greeting p {
155
+ color: var(--gray);
156
+ }
157
+
158
+ .search-bar {
159
+ display: flex;
160
+ align-items: center;
161
+ background-color: white;
162
+ padding: 0.75rem 1rem;
163
+ border-radius: 0.5rem;
164
+ box-shadow: var(--shadow);
165
+ width: 300px;
166
+ }
167
+
168
+ .search-bar i {
169
+ color: var(--gray);
170
+ margin-right: 0.75rem;
171
+ }
172
+
173
+ .search-bar input {
174
+ border: none;
175
+ outline: none;
176
+ width: 100%;
177
+ font-size: 0.875rem;
178
+ }
179
+
180
+ /* Dashboard Cards */
181
+ .dashboard-grid {
182
+ display: grid;
183
+ grid-template-columns: repeat(3, 1fr);
184
+ gap: 1.5rem;
185
+ margin-bottom: 2rem;
186
+ }
187
+
188
+ .card {
189
+ background-color: white;
190
+ border-radius: 0.75rem;
191
+ padding: 1.5rem;
192
+ box-shadow: var(--shadow);
193
+ transition: var(--transition);
194
+ }
195
+
196
+ .card:hover {
197
+ transform: translateY(-5px);
198
+ box-shadow: var(--shadow-lg);
199
+ }
200
+
201
+ .card-header {
202
+ display: flex;
203
+ justify-content: space-between;
204
+ align-items: center;
205
+ margin-bottom: 1rem;
206
+ }
207
+
208
+ .card-title {
209
+ font-weight: 600;
210
+ font-size: 1.1rem;
211
+ }
212
+
213
+ .card-icon {
214
+ width: 40px;
215
+ height: 40px;
216
+ border-radius: 0.5rem;
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ background-color: rgba(99, 102, 241, 0.1);
221
+ color: var(--primary);
222
+ font-size: 1.25rem;
223
+ }
224
+
225
+ .card-value {
226
+ font-size: 2rem;
227
+ font-weight: 700;
228
+ margin-bottom: 0.5rem;
229
+ }
230
+
231
+ .card-change {
232
+ font-size: 0.875rem;
233
+ color: var(--secondary);
234
+ }
235
+
236
+ .card-change.negative {
237
+ color: var(--red);
238
+ }
239
+
240
+ /* Habit Tracker */
241
+ .section-title {
242
+ font-size: 1.25rem;
243
+ margin-bottom: 1.5rem;
244
+ display: flex;
245
+ align-items: center;
246
+ }
247
+
248
+ .section-title i {
249
+ margin-right: 0.75rem;
250
+ color: var(--primary);
251
+ }
252
+
253
+ .habit-tracker {
254
+ background-color: white;
255
+ border-radius: 0.75rem;
256
+ padding: 1.5rem;
257
+ box-shadow: var(--shadow);
258
+ margin-bottom: 2rem;
259
+ }
260
+
261
+ .habit-grid {
262
+ display: grid;
263
+ grid-template-columns: repeat(7, 1fr);
264
+ gap: 0.75rem;
265
+ }
266
+
267
+ .habit-day {
268
+ display: flex;
269
+ flex-direction: column;
270
+ align-items: center;
271
+ }
272
+
273
+ .day-name {
274
+ font-size: 0.75rem;
275
+ color: var(--gray);
276
+ margin-bottom: 0.25rem;
277
+ }
278
+
279
+ .day-check {
280
+ width: 36px;
281
+ height: 36px;
282
+ border-radius: 50%;
283
+ background-color: #f1f5f9;
284
+ display: flex;
285
+ align-items: center;
286
+ justify-content: center;
287
+ cursor: pointer;
288
+ transition: var(--transition);
289
+ }
290
+
291
+ .day-check.completed {
292
+ background-color: var(--secondary);
293
+ color: white;
294
+ }
295
+
296
+ .day-check i {
297
+ pointer-events: none;
298
+ }
299
+
300
+ .habits-list {
301
+ margin-top: 1.5rem;
302
+ }
303
+
304
+ .habit-item {
305
+ display: flex;
306
+ align-items: center;
307
+ padding: 0.75rem;
308
+ border-radius: 0.5rem;
309
+ margin-bottom: 0.5rem;
310
+ transition: var(--transition);
311
+ }
312
+
313
+ .habit-item:hover {
314
+ background-color: #f8fafc;
315
+ }
316
+
317
+ .habit-check {
318
+ width: 24px;
319
+ height: 24px;
320
+ border-radius: 50%;
321
+ border: 2px solid var(--gray);
322
+ margin-right: 0.75rem;
323
+ cursor: pointer;
324
+ flex-shrink: 0;
325
+ transition: var(--transition);
326
+ }
327
+
328
+ .habit-check.completed {
329
+ background-color: var(--secondary);
330
+ border-color: var(--secondary);
331
+ color: white;
332
+ display: flex;
333
+ align-items: center;
334
+ justify-content: center;
335
+ }
336
+
337
+ .habit-name {
338
+ flex-grow: 1;
339
+ font-weight: 500;
340
+ }
341
+
342
+ .habit-streak {
343
+ font-size: 0.875rem;
344
+ color: white;
345
+ background-color: var(--yellow);
346
+ padding: 0.25rem 0.75rem;
347
+ border-radius: 1rem;
348
+ margin-right: 0.75rem;
349
+ }
350
+
351
+ .habit-edit {
352
+ color: var(--gray);
353
+ cursor: pointer;
354
+ transition: var(--transition);
355
+ }
356
+
357
+ .habit-edit:hover {
358
+ color: var(--primary);
359
+ }
360
+
361
+ /* AI Recommendations */
362
+ .ai-recommendations {
363
+ display: grid;
364
+ grid-template-columns: 1fr 1fr;
365
+ gap: 1.5rem;
366
+ margin-bottom: 2rem;
367
+ }
368
+
369
+ .recommendation-card {
370
+ background-color: white;
371
+ border-radius: 0.75rem;
372
+ padding: 1.5rem;
373
+ box-shadow: var(--shadow);
374
+ position: relative;
375
+ overflow: hidden;
376
+ }
377
+
378
+ .recommendation-card::before {
379
+ content: '';
380
+ position: absolute;
381
+ top: 0;
382
+ left: 0;
383
+ width: 4px;
384
+ height: 100%;
385
+ background-color: var(--primary);
386
+ }
387
+
388
+ .recommendation-card h3 {
389
+ font-size: 1rem;
390
+ margin-bottom: 0.75rem;
391
+ }
392
+
393
+ .recommendation-card p {
394
+ color: var(--gray);
395
+ font-size: 0.875rem;
396
+ margin-bottom: 1rem;
397
+ }
398
+
399
+ .recommendation-actions {
400
+ display: flex;
401
+ gap: 0.75rem;
402
+ }
403
+
404
+ .btn {
405
+ padding: 0.5rem 1rem;
406
+ border-radius: 0.5rem;
407
+ border: none;
408
+ cursor: pointer;
409
+ font-weight: 500;
410
+ font-size: 0.875rem;
411
+ transition: var(--transition);
412
+ }
413
+
414
+ .btn-primary {
415
+ background-color: var(--primary);
416
+ color: white;
417
+ }
418
+
419
+ .btn-primary:hover {
420
+ background-color: var(--primary-dark);
421
+ }
422
+
423
+ .btn-outline {
424
+ background-color: transparent;
425
+ border: 1px solid var(--gray);
426
+ color: var(--dark);
427
+ }
428
+
429
+ .btn-outline:hover {
430
+ border-color: var(--primary);
431
+ color: var(--primary);
432
+ }
433
+
434
+ /* Progress Charts */
435
+ .progress-section {
436
+ background-color: white;
437
+ border-radius: 0.75rem;
438
+ padding: 1.5rem;
439
+ box-shadow: var(--shadow);
440
+ margin-bottom: 2rem;
441
+ }
442
+
443
+ .chart-container {
444
+ height: 250px;
445
+ position: relative;
446
+ }
447
+
448
+ .chart-legend {
449
+ display: flex;
450
+ justify-content: center;
451
+ margin-top: 1rem;
452
+ gap: 1.5rem;
453
+ }
454
+
455
+ .legend-item {
456
+ display: flex;
457
+ align-items: center;
458
+ }
459
+
460
+ .legend-color {
461
+ width: 12px;
462
+ height: 12px;
463
+ border-radius: 50%;
464
+ margin-right: 0.5rem;
465
+ }
466
+
467
+ .legend-color.habits {
468
+ background-color: var(--primary);
469
+ }
470
+
471
+ .legend-color.goals {
472
+ background-color: var(--secondary);
473
+ }
474
+
475
+ .legend-color.challenges {
476
+ background-color: var(--yellow);
477
+ }
478
+
479
+ /* Challenges */
480
+ .challenges-grid {
481
+ display: grid;
482
+ grid-template-columns: repeat(3, 1fr);
483
+ gap: 1.5rem;
484
+ }
485
+
486
+ .challenge-card {
487
+ background-color: white;
488
+ border-radius: 0.75rem;
489
+ padding: 1.5rem;
490
+ box-shadow: var(--shadow);
491
+ transition: var(--transition);
492
+ cursor: pointer;
493
+ }
494
+
495
+ .challenge-card:hover {
496
+ transform: translateY(-5px);
497
+ box-shadow: var(--shadow-lg);
498
+ }
499
+
500
+ .challenge-badge {
501
+ display: inline-block;
502
+ padding: 0.25rem 0.75rem;
503
+ border-radius: 1rem;
504
+ font-size: 0.75rem;
505
+ font-weight: 600;
506
+ margin-bottom: 1rem;
507
+ }
508
+
509
+ .badge-free {
510
+ background-color: rgba(16, 185, 129, 0.1);
511
+ color: var(--secondary);
512
+ }
513
+
514
+ .badge-premium {
515
+ background-color: rgba(99, 102, 241, 0.1);
516
+ color: var(--primary);
517
+ }
518
+
519
+ .challenge-card h3 {
520
+ font-size: 1.1rem;
521
+ margin-bottom: 0.75rem;
522
+ }
523
+
524
+ .challenge-card p {
525
+ color: var(--gray);
526
+ font-size: 0.875rem;
527
+ margin-bottom: 1.5rem;
528
+ }
529
+
530
+ .challenge-progress {
531
+ margin-bottom: 1rem;
532
+ }
533
+
534
+ .progress-bar {
535
+ height: 6px;
536
+ background-color: #f1f5f9;
537
+ border-radius: 3px;
538
+ overflow: hidden;
539
+ }
540
+
541
+ .progress-fill {
542
+ height: 100%;
543
+ background-color: var(--primary);
544
+ width: 65%;
545
+ }
546
+
547
+ .progress-text {
548
+ font-size: 0.75rem;
549
+ color: var(--gray);
550
+ text-align: right;
551
+ }
552
+
553
+ /* Responsive Design */
554
+ @media (max-width: 1200px) {
555
+ .dashboard-grid, .ai-recommendations, .challenges-grid {
556
+ grid-template-columns: 1fr 1fr;
557
+ }
558
+ }
559
+
560
+ @media (max-width: 992px) {
561
+ .container {
562
+ grid-template-columns: 1fr;
563
+ }
564
+ .sidebar {
565
+ display: none;
566
+ }
567
+ }
568
+
569
+ @media (max-width: 768px) {
570
+ .dashboard-grid, .ai-recommendations, .challenges-grid {
571
+ grid-template-columns: 1fr;
572
+ }
573
+ .header {
574
+ flex-direction: column;
575
+ align-items: flex-start;
576
+ gap: 1rem;
577
+ }
578
+ .search-bar {
579
+ width: 100%;
580
+ }
581
+ }
582
+ </style>
583
+ </head>
584
+ <body>
585
+ <div class="container">
586
+ <!-- Sidebar Navigation -->
587
+ <aside class="sidebar">
588
+ <div class="logo">
589
+ <i class="fas fa-seedling"></i>
590
+ <span>LifeCraft</span>
591
+ </div>
592
+
593
+ <nav class="nav-menu">
594
+ <div class="nav-item active">
595
+ <a href="#">
596
+ <i class="fas fa-home"></i>
597
+ <span>Dashboard</span>
598
+ </a>
599
+ </div>
600
+ <div class="nav-item">
601
+ <a href="#">
602
+ <i class="fas fa-bullseye"></i>
603
+ <span>Goals</span>
604
+ </a>
605
+ </div>
606
+ <div class="nav-item">
607
+ <a href="#">
608
+ <i class="fas fa-tasks"></i>
609
+ <span>Habits</span>
610
+ </a>
611
+ </div>
612
+ <div class="nav-item">
613
+ <a href="#">
614
+ <i class="fas fa-trophy"></i>
615
+ <span>Challenges</span>
616
+ </a>
617
+ </div>
618
+ <div class="nav-item">
619
+ <a href="#">
620
+ <i class="fas fa-chart-line"></i>
621
+ <span>Progress</span>
622
+ </a>
623
+ </div>
624
+ <div class="nav-item">
625
+ <a href="#">
626
+ <i class="fas fa-lightbulb"></i>
627
+ <span>Insights</span>
628
+ </a>
629
+ </div>
630
+ <div class="nav-item">
631
+ <a href="#">
632
+ <i class="fas fa-sliders-h"></i>
633
+ <span>Settings</span>
634
+ </a>
635
+ </div>
636
+ </nav>
637
+
638
+ <div class="user-profile">
639
+ <div class="user-avatar">JD</div>
640
+ <div class="user-info">
641
+ <h4>John Doe</h4>
642
+ <p>Premium Member</p>
643
+ </div>
644
+ </div>
645
+ </aside>
646
+
647
+ <!-- Main Content Area -->
648
+ <main class="main-content">
649
+ <div class="header">
650
+ <div class="greeting">
651
+ <h1>Good Morning, John!</h1>
652
+ <p>Here's your daily briefing</p>
653
+ </div>
654
+ <div class="search-bar">
655
+ <i class="fas fa-search"></i>
656
+ <input type="text" placeholder="Search...">
657
+ </div>
658
+ </div>
659
+
660
+ <!-- Dashboard Stats -->
661
+ <div class="dashboard-grid">
662
+ <div class="card">
663
+ <div class="card-header">
664
+ <div>
665
+ <div class="card-title">Daily Streak</div>
666
+ <div class="card-value">14</div>
667
+ <div class="card-change">+3 from last week</div>
668
+ </div>
669
+ <div class="card-icon">
670
+ <i class="fas fa-fire"></i>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ <div class="card">
675
+ <div class="card-header">
676
+ <div>
677
+ <div class="card-title">Habits Tracked</div>
678
+ <div class="card-value">85%</div>
679
+ <div class="card-change negative">-5% from yesterday</div>
680
+ </div>
681
+ <div class="card-icon">
682
+ <i class="fas fa-check-circle"></i>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ <div class="card">
687
+ <div class="card-header">
688
+ <div>
689
+ <div class="card-title">Weekly Goals</div>
690
+ <div class="card-value">3/5</div>
691
+ <div class="card-change">On track</div>
692
+ </div>
693
+ <div class="card-icon">
694
+ <i class="fas fa-flag"></i>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <!-- Habit Tracker -->
701
+ <div class="habit-tracker">
702
+ <h2 class="section-title">
703
+ <i class="fas fa-calendar-week"></i>
704
+ <span>Weekly Habit Tracker</span>
705
+ </h2>
706
+
707
+ <div class="habit-grid">
708
+ <div class="habit-day">
709
+ <div class="day-name">Mon</div>
710
+ <div class="day-check completed">
711
+ <i class="fas fa-check"></i>
712
+ </div>
713
+ </div>
714
+ <div class="habit-day">
715
+ <div class="day-name">Tue</div>
716
+ <div class="day-check completed">
717
+ <i class="fas fa-check"></i>
718
+ </div>
719
+ </div>
720
+ <div class="habit-day">
721
+ <div class="day-name">Wed</div>
722
+ <div class="day-check completed">
723
+ <i class="fas fa-check"></i>
724
+ </div>
725
+ </div>
726
+ <div class="habit-day">
727
+ <div class="day-name">Thu</div>
728
+ <div class="day-check">
729
+ <i class="fas fa-check"></i>
730
+ </div>
731
+ </div>
732
+ <div class="habit-day">
733
+ <div class="day-name">Fri</div>
734
+ <div class="day-check">
735
+ <i class="fas fa-check"></i>
736
+ </div>
737
+ </div>
738
+ <div class="habit-day">
739
+ <div class="day-name">Sat</div>
740
+ <div class="day-check">
741
+ <i class="fas fa-check"></i>
742
+ </div>
743
+ </div>
744
+ <div class="habit-day">
745
+ <div class="day-name">Sun</div>
746
+ <div class="day-check">
747
+ <i class="fas fa-check"></i>
748
+ </div>
749
+ </div>
750
+ </div>
751
+
752
+ <div class="habits-list">
753
+ <div class="habit-item">
754
+ <div class="habit-check completed">
755
+ <i class="fas fa-check"></i>
756
+ </div>
757
+ <div class="habit-name">Morning meditation</div>
758
+ <div class="habit-streak">14 days</div>
759
+ <div class="habit-edit">
760
+ <i class="fas fa-ellipsis-v"></i>
761
+ </div>
762
+ </div>
763
+ <div class="habit-item">
764
+ <div class="habit-check completed">
765
+ <i class="fas fa-check"></i>
766
+ </div>
767
+ <div class="habit-name">Exercise 30 mins</div>
768
+ <div class="habit-streak">5 days</div>
769
+ <div class="habit-edit">
770
+ <i class="fas fa-ellipsis-v"></i>
771
+ </div>
772
+ </div>
773
+ <div class="habit-item">
774
+ <div class="habit-check">
775
+ <i class="fas fa-check"></i>
776
+ </div>
777
+ <div class="habit-name">Read 20 pages</div>
778
+ <div class="habit-streak">2 days</div>
779
+ <div class="habit-edit">
780
+ <i class="fas fa-ellipsis-v"></i>
781
+ </div>
782
+ </div>
783
+ <div class="habit-item">
784
+ <div class="habit-check completed">
785
+ <i class="fas fa-check"></i>
786
+ </div>
787
+ <div class="habit-name">Hydration (8 glasses)</div>
788
+ <div class="habit-streak">9 days</div>
789
+ <div class="habit-edit">
790
+ <i class="fas fa-ellipsis-v"></i>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </div>
795
+
796
+ <!-- AI Recommendations -->
797
+ <h2 class="section-title">
798
+ <i class="fas fa-robot"></i>
799
+ <span>AI Recommendations</span>
800
+ </h2>
801
+
802
+ <div class="ai-recommendations">
803
+ <div class="recommendation-card">
804
+ <h3>Optimize Your Morning Routine</h3>
805
+ <p>Based on your sleep patterns and energy levels, try waking up 15 minutes earlier to incorporate journaling before meditation.</p>
806
+ <div class="recommendation-actions">
807
+ <button class="btn btn-primary">Try This</button>
808
+ <button class="btn btn-outline">Learn More</button>
809
+ </div>
810
+ </div>
811
+ <div class="recommendation-card">
812
+ <h3>Energy Slump Alert</h3>
813
+ <p>Your productivity dips between 2-4pm. Consider a short walk or protein snack during this time to maintain energy.</p>
814
+ <div class="recommendation-actions">
815
+ <button class="btn btn-primary">Try This</button>
816
+ <button class="btn btn-outline">Learn More</button>
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <!-- Progress Charts -->
822
+ <div class="progress-section">
823
+ <h2 class="section-title">
824
+ <i class="fas fa-chart-pie"></i>
825
+ <span>Progress Overview</span>
826
+ </h2>
827
+
828
+ <div class="chart-container" id="progressChart">
829
+ <!-- This would be replaced with a canvas element for a real chart -->
830
+ <div style="width: 100%; height: 100%; background-color: #f8fafc; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: var(--gray);">
831
+ [Progress Chart Visualization]
832
+ </div>
833
+ </div>
834
+
835
+ <div class="chart-legend">
836
+ <div class="legend-item">
837
+ <div class="legend-color habits"></div>
838
+ <span>Habits</span>
839
+ </div>
840
+ <div class="legend-item">
841
+ <div class="legend-color goals"></div>
842
+ <span>Goals</span>
843
+ </div>
844
+ <div class="legend-item">
845
+ <div class="legend-color challenges"></div>
846
+ <span>Challenges</span>
847
+ </div>
848
+ </div>
849
+ </div>
850
+
851
+ <!-- Challenges -->
852
+ <h2 class="section-title">
853
+ <i class="fas fa-trophy"></i>
854
+ <span>Recommended Challenges</span>
855
+ </h2>
856
+
857
+ <div class="challenges-grid">
858
+ <div class="challenge-card">
859
+ <div class="challenge-badge badge-free">Free</div>
860
+ <h3>30-Day Mindfulness</h3>
861
+ <p>Build a consistent meditation practice with daily guided sessions starting from just 5 minutes.</p>
862
+ <div class="challenge-progress">
863
+ <div class="progress-bar">
864
+ <div class="progress-fill" style="width: 65%;"></div>
865
+ </div>
866
+ <div class="progress-text">13/20 days completed</div>
867
+ </div>
868
+ <button class="btn btn-primary">Continue</button>
869
+ </div>
870
+ <div class="challenge-card">
871
+ <div class="challenge-badge badge-premium">Premium</div>
872
+ <h3>Productivity Power-Up</h3>
873
+ <p>Advanced techniques to double your productivity without burning out, based on AI analysis.</p>
874
+ <div class="challenge-progress">
875
+ <div class="progress-bar">
876
+ <div class="progress-fill" style="width: 25%;"></div>
877
+ </div>
878
+ <div class="progress-text">5/21 days completed</div>
879
+ </div>
880
+ <button class="btn btn-primary">Continue</button>
881
+ </div>
882
+ <div class="challenge-card">
883
+ <div class="challenge-badge badge-free">Free</div>
884
+ <h3>Hydration Hero</h3>
885
+ <p>Stay properly hydrated with reminders and tracking to improve energy and focus.</p>
886
+ <button class="btn btn-outline">Start Challenge</button>
887
+ </div>
888
+ </div>
889
+ </main>
890
+ </div>
891
+
892
+ <script>
893
+ document.addEventListener('DOMContentLoaded', function() {
894
+ // Toggle habit completion
895
+ const habitChecks = document.querySelectorAll('.habit-check:not(.completed)');
896
+ habitChecks.forEach(check => {
897
+ check.addEventListener('click', function() {
898
+ this.classList.toggle('completed');
899
+ if (this.classList.contains('completed')) {
900
+ this.innerHTML = '<i class="fas fa-check"></i>';
901
+ } else {
902
+ this.innerHTML = '';
903
+ }
904
+ });
905
+ });
906
+
907
+ // Toggle day completion in habit tracker
908
+ const dayChecks = document.querySelectorAll('.day-check');
909
+ dayChecks.forEach(check => {
910
+ check.addEventListener('click', function() {
911
+ this.classList.toggle('completed');
912
+ if (this.classList.contains('completed')) {
913
+ this.innerHTML = '<i class="fas fa-check"></i>';
914
+ } else {
915
+ this.innerHTML = '';
916
+ }
917
+ });
918
+ });
919
+
920
+ // Simulate loading animation for cards
921
+ const cards = document.querySelectorAll('.card');
922
+ cards.forEach((card, index) => {
923
+ setTimeout(() => {
924
+ card.style.opacity = '1';
925
+ }, index * 100);
926
+ });
927
+
928
+ // In a real app, we would load actual data here
929
+ // For example:
930
+ // fetch('/api/dashboard-stats')
931
+ // .then(response => response.json())
932
+ // .then(data => {
933
+ // document.querySelector('.card-value').textContent = data.streak;
934
+ // });
935
+
936
+ // This is just a simulation of AI thinking
937
+ setTimeout(() => {
938
+ const recommendations = document.querySelectorAll('.recommendation-card');
939
+ recommendations.forEach((rec, i) => {
940
+ setTimeout(() => {
941
+ rec.style.transform = 'translateY(0)';
942
+ rec.style.opacity = '1';
943
+ }, i * 150);
944
+ });
945
+ }, 500);
946
+
947
+ // Navigation active state
948
+ const navItems = document.querySelectorAll('.nav-item');
949
+ navItems.forEach(item => {
950
+ item.addEventListener('click', function() {
951
+ navItems.forEach(i => i.classList.remove('active'));
952
+ this.classList.add('active');
953
+ });
954
+ });
955
+ });
956
+
957
+ // In a real implementation, we would use Chart.js for the progress chart
958
+ // For example:
959
+ // const ctx = document.getElementById('progressChart').getContext('2d');
960
+ // const chart = new Chart(ctx, {
961
+ // type: 'line',
962
+ // data: {
963
+ // labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
964
+ // datasets: [{
965
+ // label: 'Habits',
966
+ // data: [65, 72, 80, 78],
967
+ // borderColor: '#6366f1',
968
+ // backgroundColor: 'rgba(99, 102, 241, 0.1)',
969
+ // tension: 0.3
970
+ // }, {
971
+ // label: 'Goals',
972
+ // data: [40, 55, 60, 70],
973
+ // borderColor: '#10b981',
974
+ // backgroundColor: 'rgba(16, 185, 129, 0.1)',
975
+ // tension: 0.3
976
+ // }]
977
+ // },
978
+ // options: {
979
+ // responsive: true,
980
+ // maintainAspectRatio: false,
981
+ // plugins: {
982
+ // legend: {
983
+ // display: false
984
+ // }
985
+ // }
986
+ // }
987
+ // });
988
+ </script>
989
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
990
+ </html>