Hugging Face's logo

Spaces:
G0dun
/
lifecraft
Running

App Files Community
G0dun commited on
Commit
67f5b2b
·
verified ·
1 Parent(s): ae2f3e8

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +1144 -553
index.html CHANGED
@@ -3,887 +3,1420 @@
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>
@@ -891,59 +1424,52 @@
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 => {
@@ -952,39 +1478,104 @@
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
  </body>
990
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LifeCraft - Craft Your Perfect Life</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: #7c3aed;
11
+ --primary-light: #8b5cf6;
12
+ --primary-dark: #6d28d9;
13
  --secondary: #10b981;
14
+ --secondary-light: #34d399;
15
+ --dark: #0f172a;
16
+ --darker: #020617;
17
  --light: #f8fafc;
18
  --gray: #94a3b8;
19
+ --gray-dark: #64748b;
20
  --red: #ef4444;
21
  --yellow: #f59e0b;
22
+ --shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
23
+ --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
24
+ --transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
25
+ --glass: rgba(15, 23, 42, 0.7);
26
+ --glow: 0 0 15px rgba(124, 58, 237, 0.5);
27
  }
28
 
29
  * {
30
  margin: 0;
31
  padding: 0;
32
  box-sizing: border-box;
33
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
34
  }
35
 
36
  body {
37
+ background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
38
+ color: var(--light);
39
+ min-height: 100vh;
40
+ line-height: 1.6;
41
+ overflow-x: hidden;
42
+ }
43
+
44
+ /* Custom scrollbar */
45
+ ::-webkit-scrollbar {
46
+ width: 8px;
47
+ }
48
+ ::-webkit-scrollbar-track {
49
+ background: var(--dark);
50
+ }
51
+ ::-webkit-scrollbar-thumb {
52
+ background: var(--primary);
53
+ border-radius: 4px;
54
  }
55
 
56
+ .app-container {
57
  display: grid;
58
+ grid-template-columns: 100px 1fr;
59
  min-height: 100vh;
60
+ position: relative;
61
+ }
62
+
63
+ /* Floating particles background */
64
+ .particles {
65
+ position: fixed;
66
+ top: 0;
67
+ left: 0;
68
+ width: 100%;
69
+ height: 100%;
70
+ z-index: -1;
71
+ opacity: 0.15;
72
+ }
73
+ .particle {
74
+ position: absolute;
75
+ background-color: var(--primary);
76
+ border-radius: 50%;
77
+ filter: blur(1px);
78
+ animation: float 15s infinite linear;
79
  }
80
 
81
  /* Sidebar Styles */
82
  .sidebar {
83
+ background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.9));
84
+ backdrop-filter: blur(10px);
85
+ -webkit-backdrop-filter: blur(10px);
86
+ padding: 2rem 0;
87
+ display: flex;
88
+ flex-direction: column;
89
+ align-items: center;
90
+ border-right: 1px solid rgba(124, 58, 237, 0.1);
91
  z-index: 10;
92
  }
93
 
94
  .logo {
95
  display: flex;
96
+ flex-direction: column;
97
  align-items: center;
98
+ margin-bottom: 3rem;
99
  color: var(--primary);
100
+ position: relative;
 
101
  }
102
 
103
+ .logo-icon {
104
+ font-size: 2.5rem;
105
+ margin-bottom: 0.5rem;
106
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
107
+ -webkit-background-clip: text;
108
+ background-clip: text;
109
+ -webkit-text-fill-color: transparent;
110
+ filter: drop-shadow(var(--glow));
111
+ }
112
+
113
+ .logo-text {
114
+ font-weight: 800;
115
+ font-size: 0.8rem;
116
+ letter-spacing: 1px;
117
+ text-transform: uppercase;
118
+ opacity: 0.8;
119
  }
120
 
121
  .nav-menu {
122
+ display: flex;
123
+ flex-direction: column;
124
+ align-items: center;
125
+ gap: 1.5rem;
126
+ width: 100%;
127
  }
128
 
129
  .nav-item {
130
+ position: relative;
131
+ width: 50px;
132
+ height: 50px;
133
+ border-radius: 12px;
134
+ display: flex;
135
+ align-items: center;
136
+ justify-content: center;
137
+ transition: var(--transition);
138
+ cursor: pointer;
139
+ color: var(--gray);
140
+ }
141
+
142
+ .nav-item::before {
143
+ content: '';
144
+ position: absolute;
145
+ left: -10px;
146
+ height: 0;
147
+ width: 3px;
148
+ background: linear-gradient(to bottom, var(--primary), var(--primary-light));
149
+ border-radius: 0 4px 4px 0;
150
  transition: var(--transition);
151
  }
152
 
153
  .nav-item.active {
154
+ background: rgba(124, 58, 237, 0.2);
155
+ color: var(--primary-light);
156
  }
157
 
158
+ .nav-item.active::before {
159
+ height: 60%;
160
  }
161
 
162
  .nav-item:hover:not(.active) {
163
+ color: var(--light);
164
+ transform: translateY(-3px);
165
  }
166
 
167
+ .nav-item i {
168
+ font-size: 1.4rem;
169
+ }
170
+
171
+ .nav-tooltip {
172
+ position: absolute;
173
+ left: 70px;
174
+ background: var(--glass);
175
+ backdrop-filter: blur(10px);
176
+ padding: 0.5rem 1rem;
177
+ border-radius: 6px;
178
+ font-size: 0.85rem;
179
  font-weight: 500;
180
+ opacity: 0;
181
+ pointer-events: none;
182
+ transform: translateX(-10px);
183
+ transition: var(--transition);
184
+ white-space: nowrap;
185
+ box-shadow: var(--shadow);
186
+ border: 1px solid rgba(124, 58, 237, 0.1);
187
  }
188
 
189
+ .nav-item:hover .nav-tooltip {
190
+ opacity: 1;
191
+ transform: translateX(0);
192
  }
193
 
194
  .user-profile {
195
+ margin-top: auto;
196
+ position: relative;
 
 
 
 
 
 
 
197
  }
198
 
199
  .user-avatar {
200
+ width: 50px;
201
+ height: 50px;
202
  border-radius: 50%;
203
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
204
  color: white;
205
  display: flex;
206
  align-items: center;
207
  justify-content: center;
 
208
  font-weight: 600;
209
+ border: 2px solid rgba(255, 255, 255, 0.1);
210
+ cursor: pointer;
211
+ transition: var(--transition);
212
+ }
213
+
214
+ .user-avatar:hover {
215
+ transform: scale(1.05);
216
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
217
+ }
218
+
219
+ .user-popup {
220
+ position: absolute;
221
+ bottom: 70px;
222
+ left: 50%;
223
+ transform: translateX(-50%) scale(0.9);
224
+ background: var(--glass);
225
+ backdrop-filter: blur(10px);
226
+ padding: 1rem;
227
+ border-radius: 12px;
228
+ width: 180px;
229
+ box-shadow: var(--shadow);
230
+ opacity: 0;
231
+ pointer-events: none;
232
+ transition: var(--transition);
233
+ border: 1px solid rgba(124, 58, 237, 0.1);
234
+ }
235
+
236
+ .user-popup::after {
237
+ content: '';
238
+ position: absolute;
239
+ bottom: -8px;
240
+ left: 50%;
241
+ transform: translateX(-50%);
242
+ width: 0;
243
+ height: 0;
244
+ border-left: 8px solid transparent;
245
+ border-right: 8px solid transparent;
246
+ border-top: 8px solid rgba(15, 23, 42, 0.9);
247
+ }
248
+
249
+ .user-profile:hover .user-popup {
250
+ opacity: 1;
251
+ transform: translateX(-50%) scale(1);
252
+ pointer-events: all;
253
  }
254
 
255
  .user-info h4 {
256
+ font-size: 0.95rem;
257
  margin-bottom: 0.25rem;
258
+ font-weight: 600;
259
  }
260
 
261
  .user-info p {
262
  font-size: 0.75rem;
263
  color: var(--gray);
264
+ margin-bottom: 0.75rem;
265
+ }
266
+
267
+ .user-menu {
268
+ list-style: none;
269
+ border-top: 1px solid rgba(124, 58, 237, 0.1);
270
+ padding-top: 0.75rem;
271
+ }
272
+
273
+ .user-menu li {
274
+ padding: 0.5rem 0;
275
+ font-size: 0.85rem;
276
+ cursor: pointer;
277
+ transition: var(--transition);
278
+ border-radius: 4px;
279
+ padding-left: 0.5rem;
280
+ }
281
+
282
+ .user-menu li:hover {
283
+ background: rgba(124, 58, 237, 0.1);
284
+ color: var(--primary-light);
285
+ }
286
+
287
+ .user-menu li i {
288
+ margin-right: 0.5rem;
289
+ width: 20px;
290
+ text-align: center;
291
  }
292
 
293
  /* Main Content Styles */
294
  .main-content {
295
+ padding: 2rem 3rem;
296
  overflow-y: auto;
297
+ position: relative;
298
  }
299
 
300
+ /* Header */
301
  .header {
302
  display: flex;
303
  justify-content: space-between;
304
  align-items: center;
305
+ margin-bottom: 2.5rem;
306
+ position: relative;
307
+ }
308
+
309
+ .greeting {
310
+ position: relative;
311
+ z-index: 1;
312
  }
313
 
314
  .greeting h1 {
315
+ font-size: 2.2rem;
316
+ margin-bottom: 0.5rem;
317
+ font-weight: 800;
318
+ background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
319
+ -webkit-background-clip: text;
320
+ background-clip: text;
321
+ -webkit-text-fill-color: transparent;
322
  }
323
 
324
  .greeting p {
325
  color: var(--gray);
326
+ font-size: 0.95rem;
327
+ max-width: 500px;
328
+ }
329
+
330
+ .date-indicator {
331
+ position: absolute;
332
+ right: 0;
333
+ top: 0;
334
+ font-size: 5rem;
335
+ font-weight: 800;
336
+ opacity: 0.03;
337
+ z-index: 0;
338
+ pointer-events: none;
339
+ }
340
+
341
+ .search-container {
342
+ position: relative;
343
+ z-index: 1;
344
  }
345
 
346
  .search-bar {
347
  display: flex;
348
  align-items: center;
349
+ background: var(--glass);
350
+ backdrop-filter: blur(10px);
351
+ padding: 0.75rem 1.2rem;
352
+ border-radius: 50px;
353
  box-shadow: var(--shadow);
354
+ border: 1px solid rgba(124, 58, 237, 0.1);
355
+ transition: var(--transition);
356
+ }
357
+
358
+ .search-bar:hover {
359
+ box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
360
  }
361
 
362
  .search-bar i {
363
  color: var(--gray);
364
  margin-right: 0.75rem;
365
+ font-size: 1rem;
366
  }
367
 
368
  .search-bar input {
369
  border: none;
370
  outline: none;
371
+ width: 200px;
372
+ font-size: 0.9rem;
373
+ background: transparent;
374
+ color: var(--light);
375
  }
376
 
377
+ .search-bar input::placeholder {
378
+ color: var(--gray-dark);
379
+ }
380
+
381
+ /* Dashboard Stats */
382
+ .dashboard-stats {
383
  display: grid;
384
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
385
  gap: 1.5rem;
386
  margin-bottom: 2rem;
387
  }
388
 
389
+ .stat-card {
390
+ background: var(--glass);
391
+ backdrop-filter: blur(10px);
392
+ border-radius: 16px;
393
  padding: 1.5rem;
394
  box-shadow: var(--shadow);
395
  transition: var(--transition);
396
+ border: 1px solid rgba(124, 58, 237, 0.1);
397
+ position: relative;
398
+ overflow: hidden;
399
+ cursor: pointer;
400
  }
401
 
402
+ .stat-card:hover {
403
  transform: translateY(-5px);
404
  box-shadow: var(--shadow-lg);
405
+ border-color: rgba(124, 58, 237, 0.3);
406
  }
407
 
408
+ .stat-card::before {
409
+ content: '';
410
+ position: absolute;
411
+ top: 0;
412
+ left: 0;
413
+ width: 100%;
414
+ height: 100%;
415
+ background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, transparent 100%);
416
+ opacity: 0;
417
+ transition: var(--transition);
418
+ }
419
+
420
+ .stat-card:hover::before {
421
+ opacity: 1;
422
+ }
423
+
424
+ .stat-header {
425
  display: flex;
426
  justify-content: space-between;
427
+ align-items: flex-start;
428
+ margin-bottom: 1.25rem;
429
  }
430
 
431
+ .stat-title {
432
+ font-size: 0.9rem;
433
+ color: var(--gray);
434
+ font-weight: 500;
435
  }
436
 
437
+ .stat-icon {
438
  width: 40px;
439
  height: 40px;
440
+ border-radius: 8px;
441
  display: flex;
442
  align-items: center;
443
  justify-content: center;
444
+ background: rgba(124, 58, 237, 0.1);
445
+ color: var(--primary-light);
446
+ font-size: 1.2rem;
447
  }
448
 
449
+ .stat-value {
450
+ font-size: 2.2rem;
451
  font-weight: 700;
452
+ margin-bottom: 0.25rem;
453
+ font-family: 'Space Grotesk', sans-serif;
454
+ background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
455
+ -webkit-background-clip: text;
456
+ background-clip: text;
457
+ -webkit-text-fill-color: transparent;
458
  }
459
 
460
+ .stat-change {
461
+ display: flex;
462
+ align-items: center;
463
+ font-size: 0.85rem;
464
+ color: var(--secondary-light);
465
  }
466
 
467
+ .stat-change.negative {
468
  color: var(--red);
469
  }
470
 
471
+ .stat-change i {
472
+ margin-right: 0.25rem;
473
+ font-size: 0.7rem;
474
+ }
475
+
476
  /* Habit Tracker */
477
+ .section {
478
+ background: var(--glass);
479
+ backdrop-filter: blur(10px);
480
+ border-radius: 16px;
481
+ padding: 1.75rem;
482
+ box-shadow: var(--shadow);
483
+ margin-bottom: 2rem;
484
+ border: 1px solid rgba(124, 58, 237, 0.1);
485
+ }
486
+
487
+ .section-header {
488
+ display: flex;
489
+ justify-content: space-between;
490
+ align-items: center;
491
+ margin-bottom: 1.5rem;
492
+ }
493
+
494
  .section-title {
495
  font-size: 1.25rem;
496
+ font-weight: 700;
497
  display: flex;
498
  align-items: center;
499
  }
500
 
501
  .section-title i {
502
  margin-right: 0.75rem;
503
+ color: var(--primary-light);
 
 
 
 
 
 
 
 
504
  }
505
 
506
+ .section-actions {
507
+ display: flex;
 
508
  gap: 0.75rem;
509
  }
510
 
511
+ .btn {
512
+ padding: 0.5rem 1.25rem;
513
+ border-radius: 50px;
514
+ border: none;
515
+ cursor: pointer;
516
+ font-weight: 500;
517
+ font-size: 0.85rem;
518
+ transition: var(--transition);
519
+ display: inline-flex;
520
  align-items: center;
521
+ justify-content: center;
522
  }
523
 
524
+ .btn-primary {
525
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
526
+ color: white;
 
527
  }
528
 
529
+ .btn-primary:hover {
530
+ transform: translateY(-2px);
531
+ box-shadow: var(--glow);
 
 
 
 
 
 
 
532
  }
533
 
534
+ .btn-outline {
535
+ background: transparent;
536
+ border: 1px solid rgba(124, 58, 237, 0.3);
537
+ color: var(--primary-light);
538
  }
539
 
540
+ .btn-outline:hover {
541
+ border-color: var(--primary);
542
+ background: rgba(124, 58, 237, 0.1);
543
+ }
544
+
545
+ .btn i {
546
+ margin-right: 0.5rem;
547
+ }
548
+
549
+ .habit-tracker-grid {
550
+ display: grid;
551
+ grid-template-columns: 1.5fr 1fr;
552
+ gap: 1.5rem;
553
  }
554
 
555
  .habits-list {
556
+ display: flex;
557
+ flex-direction: column;
558
+ gap: 0.75rem;
559
  }
560
 
561
  .habit-item {
562
  display: flex;
563
  align-items: center;
564
+ padding: 1rem;
565
+ border-radius: 12px;
 
566
  transition: var(--transition);
567
+ background: rgba(2, 6, 23, 0.3);
568
+ position: relative;
569
+ overflow: hidden;
570
  }
571
 
572
  .habit-item:hover {
573
+ background: rgba(124, 58, 237, 0.1);
574
  }
575
 
576
  .habit-check {
577
  width: 24px;
578
  height: 24px;
579
+ border-radius: 6px;
580
+ border: 2px solid var(--gray-dark);
581
+ margin-right: 1rem;
582
  cursor: pointer;
583
  flex-shrink: 0;
584
  transition: var(--transition);
585
+ display: flex;
586
+ align-items: center;
587
+ justify-content: center;
588
+ background: transparent;
589
  }
590
 
591
  .habit-check.completed {
592
+ background: var(--secondary);
593
  border-color: var(--secondary);
594
  color: white;
 
 
 
595
  }
596
 
597
  .habit-name {
598
  flex-grow: 1;
599
  font-weight: 500;
600
+ font-size: 0.95rem;
601
+ }
602
+
603
+ .habit-details {
604
+ display: flex;
605
+ align-items: center;
606
+ gap: 1rem;
607
  }
608
 
609
  .habit-streak {
610
+ font-size: 0.8rem;
611
+ font-weight: 600;
612
+ color: var(--yellow);
613
+ display: flex;
614
+ align-items: center;
615
+ }
616
+
617
+ .habit-streak i {
618
+ margin-right: 0.25rem;
619
  }
620
 
621
+ .habit-actions {
622
+ display: flex;
623
+ align-items: center;
624
+ gap: 0.5rem;
625
+ }
626
+
627
+ .habit-action {
628
+ width: 24px;
629
+ height: 24px;
630
+ border-radius: 6px;
631
+ display: flex;
632
+ align-items: center;
633
+ justify-content: center;
634
  color: var(--gray);
635
  cursor: pointer;
636
  transition: var(--transition);
637
+ background: transparent;
638
+ border: none;
639
  }
640
 
641
+ .habit-action:hover {
642
+ color: var(--primary-light);
643
+ background: rgba(124, 58, 237, 0.1);
644
  }
645
 
646
+ .habit-calendar {
647
+ background: rgba(2, 6, 23, 0.3);
648
+ border-radius: 12px;
649
+ padding: 1rem;
 
 
650
  }
651
 
652
+ .calendar-header {
653
+ display: flex;
654
+ justify-content: space-between;
655
+ align-items: center;
656
+ margin-bottom: 1rem;
 
 
657
  }
658
 
659
+ .calendar-title {
660
+ font-size: 0.9rem;
661
+ font-weight: 600;
662
+ color: var(--gray);
 
 
 
 
663
  }
664
 
665
+ .calendar-nav {
666
+ display: flex;
667
+ gap: 0.5rem;
668
  }
669
 
670
+ .calendar-nav-btn {
671
+ width: 24px;
672
+ height: 24px;
673
+ border-radius: 6px;
674
+ display: flex;
675
+ align-items: center;
676
+ justify-content: center;
677
+ background: transparent;
678
+ border: 1px solid rgba(124, 58, 237, 0.2);
679
  color: var(--gray);
680
+ cursor: pointer;
681
+ transition: var(--transition);
682
+ }
683
+
684
+ .calendar-nav-btn:hover {
685
+ color: var(--primary-light);
686
+ border-color: var(--primary);
687
+ }
688
+
689
+ .calendar-grid {
690
+ display: grid;
691
+ grid-template-columns: repeat(7, 1fr);
692
+ gap: 0.5rem;
693
  }
694
 
695
+ .calendar-day {
696
  display: flex;
697
+ flex-direction: column;
698
+ align-items: center;
699
+ gap: 0.25rem;
700
+ padding: 0.5rem 0;
701
  }
702
 
703
+ .day-name {
704
+ font-size: 0.65rem;
705
+ font-weight: 500;
706
+ color: var(--gray-dark);
707
+ text-transform: uppercase;
708
+ }
709
+
710
+ .day-number {
711
+ width: 30px;
712
+ height: 30px;
713
+ border-radius: 50%;
714
+ display: flex;
715
+ align-items: center;
716
+ justify-content: center;
717
+ font-size: 0.85rem;
718
  font-weight: 500;
719
+ cursor: pointer;
720
  transition: var(--transition);
721
+ position: relative;
722
  }
723
 
724
+ .day-number.completed::before {
725
+ content: '';
726
+ position: absolute;
727
+ top: -2px;
728
+ left: -2px;
729
+ right: -2px;
730
+ bottom: -2px;
731
+ border-radius: 50%;
732
+ border: 2px solid var(--secondary);
733
+ animation: pulse 2s infinite;
734
  }
735
 
736
+ .day-number.completed {
737
+ background: rgba(16, 185, 129, 0.1);
738
+ color: var(--secondary-light);
739
+ font-weight: 600;
740
  }
741
 
742
+ .day-number.current {
743
+ background: rgba(124, 58, 237, 0.2);
744
+ color: var(--primary-light);
745
+ font-weight: 600;
746
  }
747
 
748
+ .day-number:hover:not(.completed, .current) {
749
+ background: rgba(124, 58, 237, 0.1);
 
750
  }
751
 
752
+ /* AI Insights */
753
+ .ai-insights {
754
+ display: grid;
755
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
756
+ gap: 1.5rem;
 
757
  margin-bottom: 2rem;
758
  }
759
 
760
+ .insight-card {
761
+ background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(2, 6, 23, 0.8) 100%);
762
+ border-radius: 16px;
763
+ padding: 1.5rem;
764
+ box-shadow: var(--shadow);
765
+ border: 1px solid rgba(124, 58, 237, 0.1);
766
  position: relative;
767
+ overflow: hidden;
768
+ transition: var(--transition);
769
  }
770
 
771
+ .insight-card:hover {
772
+ transform: translateY(-5px);
773
+ box-shadow: var(--glow);
774
+ }
775
+
776
+ .insight-card::before {
777
+ content: '';
778
+ position: absolute;
779
+ top: 0;
780
+ left: 0;
781
+ width: 4px;
782
+ height: 100%;
783
+ background: linear-gradient(to bottom, var(--primary), var(--primary-light));
784
  }
785
 
786
+ .insight-header {
787
  display: flex;
788
  align-items: center;
789
+ margin-bottom: 1rem;
790
  }
791
 
792
+ .insight-icon {
793
+ width: 40px;
794
+ height: 40px;
795
+ border-radius: 8px;
796
+ background: rgba(124, 58, 237, 0.1);
797
+ display: flex;
798
+ align-items: center;
799
+ justify-content: center;
800
+ color: var(--primary-light);
801
+ margin-right: 1rem;
802
  }
803
 
804
+ .insight-title {
805
+ font-size: 1rem;
806
+ font-weight: 600;
807
  }
808
 
809
+ .insight-text {
810
+ font-size: 0.9rem;
811
+ color: var(--gray);
812
+ margin-bottom: 1.5rem;
813
+ line-height: 1.6;
814
  }
815
 
816
+ .insight-tag {
817
+ display: inline-block;
818
+ padding: 0.25rem 0.75rem;
819
+ border-radius: 50px;
820
+ font-size: 0.7rem;
821
+ font-weight: 600;
822
+ margin-right: 0.5rem;
823
+ margin-bottom: 0.5rem;
824
+ background: rgba(124, 58, 237, 0.1);
825
+ color: var(--primary-light);
826
  }
827
 
828
  /* Challenges */
829
  .challenges-grid {
830
  display: grid;
831
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
832
  gap: 1.5rem;
833
  }
834
 
835
  .challenge-card {
836
+ background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(2, 6, 23, 0.8) 100%);
837
+ border-radius: 16px;
838
+ padding: 1.75rem;
839
  box-shadow: var(--shadow);
840
+ border: 1px solid rgba(124, 58, 237, 0.1);
841
  transition: var(--transition);
842
+ position: relative;
843
+ overflow: hidden;
844
  }
845
 
846
  .challenge-card:hover {
847
  transform: translateY(-5px);
848
  box-shadow: var(--shadow-lg);
849
+ border-color: rgba(124, 58, 237, 0.3);
850
+ }
851
+
852
+ .challenge-card::after {
853
+ content: '';
854
+ position: absolute;
855
+ top: 0;
856
+ left: 0;
857
+ width: 100%;
858
+ height: 4px;
859
+ background: linear-gradient(to right, var(--primary), var(--primary-light));
860
  }
861
 
862
  .challenge-badge {
863
+ position: absolute;
864
+ top: 1rem;
865
+ right: 1rem;
866
  padding: 0.25rem 0.75rem;
867
+ border-radius: 50px;
868
+ font-size: 0.7rem;
869
+ font-weight: 700;
870
+ text-transform: uppercase;
871
+ letter-spacing: 0.5px;
872
  }
873
 
874
  .badge-free {
875
+ background: rgba(16, 185, 129, 0.1);
876
+ color: var(--secondary-light);
877
+ border: 1px solid rgba(16, 185, 129, 0.2);
878
  }
879
 
880
  .badge-premium {
881
+ background: rgba(124, 58, 237, 0.1);
882
+ color: var(--primary-light);
883
+ border: 1px solid rgba(124, 58, 237, 0.2);
884
  }
885
 
886
+ .challenge-title {
887
  font-size: 1.1rem;
888
+ font-weight: 700;
889
  margin-bottom: 0.75rem;
890
+ padding-right: 2rem;
891
  }
892
 
893
+ .challenge-desc {
894
+ font-size: 0.9rem;
895
  color: var(--gray);
 
896
  margin-bottom: 1.5rem;
897
+ line-height: 1.6;
898
  }
899
 
900
  .challenge-progress {
901
+ margin-bottom: 1.5rem;
902
+ }
903
+
904
+ .progress-text {
905
+ display: flex;
906
+ justify-content: space-between;
907
+ font-size: 0.8rem;
908
+ color: var(--gray);
909
+ margin-bottom: 0.5rem;
910
  }
911
 
912
  .progress-bar {
913
  height: 6px;
914
+ background: rgba(15, 23, 42, 0.5);
915
  border-radius: 3px;
916
  overflow: hidden;
917
  }
918
 
919
  .progress-fill {
920
  height: 100%;
921
+ background: linear-gradient(to right, var(--primary), var(--primary-light));
922
+ border-radius: 3px;
923
+ transition: width 1s ease;
924
  }
925
 
926
+ /* Animations */
927
+ @keyframes float {
928
+ 0%, 100% {
929
+ transform: translateY(0);
930
+ }
931
+ 50% {
932
+ transform: translateY(-20px);
933
+ }
934
+ }
935
+
936
+ @keyframes pulse {
937
+ 0% {
938
+ opacity: 0.5;
939
+ transform: scale(1);
940
+ }
941
+ 50% {
942
+ opacity: 1;
943
+ transform: scale(1.05);
944
+ }
945
+ 100% {
946
+ opacity: 0.5;
947
+ transform: scale(1);
948
+ }
949
  }
950
 
951
+ /* Media Queries */
952
  @media (max-width: 1200px) {
953
+ .habit-tracker-grid {
954
+ grid-template-columns: 1fr;
955
  }
956
  }
957
 
958
  @media (max-width: 992px) {
959
+ .app-container {
960
  grid-template-columns: 1fr;
961
  }
962
  .sidebar {
963
+ flex-direction: row;
964
+ padding: 1rem;
965
+ width: 100%;
966
+ justify-content: space-around;
967
+ border-right: none;
968
+ border-bottom: 1px solid rgba(124, 58, 237, 0.1);
969
+ }
970
+ .logo {
971
  display: none;
972
  }
973
+ .nav-menu {
974
+ flex-direction: row;
975
+ margin: 0;
976
+ }
977
+ .user-profile {
978
+ margin: 0;
979
+ }
980
+ .user-popup {
981
+ bottom: auto;
982
+ top: 60px;
983
+ left: auto;
984
+ right: 0;
985
+ transform: translateY(10px) scale(0.9);
986
+ }
987
+ .user-popup::after {
988
+ top: -8px;
989
+ left: auto;
990
+ right: 15px;
991
+ border-top: none;
992
+ border-bottom: 8px solid rgba(15, 23, 42, 0.9);
993
+ }
994
+ .user-profile:hover .user-popup {
995
+ transform: translateY(0) scale(1);
996
+ }
997
  }
998
 
999
  @media (max-width: 768px) {
1000
+ .main-content {
1001
+ padding: 1.5rem;
1002
  }
1003
  .header {
1004
  flex-direction: column;
1005
  align-items: flex-start;
1006
+ gap: 1.5rem;
1007
+ }
1008
+ .search-container {
1009
+ width: 100%;
1010
  }
1011
  .search-bar {
1012
  width: 100%;
1013
  }
1014
+ .ai-insights, .challenges-grid {
1015
+ grid-template-columns: 1fr;
1016
+ }
1017
+ }
1018
+
1019
+ @media (max-width: 576px) {
1020
+ .dashboard-stats {
1021
+ grid-template-columns: 1fr;
1022
+ }
1023
+ .section-header {
1024
+ flex-direction: column;
1025
+ align-items: flex-start;
1026
+ gap: 1rem;
1027
+ }
1028
+ .section-actions {
1029
+ width: 100%;
1030
+ justify-content: flex-end;
1031
+ }
1032
  }
1033
  </style>
1034
  </head>
1035
  <body>
1036
+ <div class="app-container">
1037
+ <!-- Floating particles background -->
1038
+ <div class="particles" id="particles"></div>
1039
+
1040
  <!-- Sidebar Navigation -->
1041
  <aside class="sidebar">
1042
  <div class="logo">
1043
+ <div class="logo-icon">
1044
+ <i class="fas fa-atom"></i>
1045
+ </div>
1046
+ <div class="logo-text">LifeCraft</div>
1047
  </div>
1048
 
1049
  <nav class="nav-menu">
1050
+ <div class="nav-item active" data-tooltip="Dashboard">
1051
+ <i class="fas fa-home"></i>
1052
+ <span class="nav-tooltip">Dashboard</span>
 
 
 
 
 
 
 
 
1053
  </div>
1054
+ <div class="nav-item" data-tooltip="Goals">
1055
+ <i class="fas fa-bullseye"></i>
1056
+ <span class="nav-tooltip">Goals</span>
 
 
 
 
 
 
 
 
1057
  </div>
1058
+ <div class="nav-item" data-tooltip="Habits">
1059
+ <i class="fas fa-tasks"></i>
1060
+ <span class="nav-tooltip">Habits</span>
 
 
1061
  </div>
1062
+ <div class="nav-item" data-tooltip="Progress">
1063
+ <i class="fas fa-chart-line"></i>
1064
+ <span class="nav-tooltip">Progress</span>
 
 
1065
  </div>
1066
+ <div class="nav-item" data-tooltip="Insights">
1067
+ <i class="fas fa-lightbulb"></i>
1068
+ <span class="nav-tooltip">Insights</span>
 
 
1069
  </div>
1070
  </nav>
1071
 
1072
  <div class="user-profile">
1073
  <div class="user-avatar">JD</div>
1074
+ <div class="user-popup">
1075
+ <div class="user-info">
1076
+ <h4>John Doe</h4>
1077
+ <p>Premium Member</p>
1078
+ </div>
1079
+ <ul class="user-menu">
1080
+ <li><i class="fas fa-user"></i> Profile</li>
1081
+ <li><i class="fas fa-cog"></i> Settings</li>
1082
+ <li><i class="fas fa-sign-out-alt"></i> Logout</li>
1083
+ </ul>
1084
  </div>
1085
  </div>
1086
  </aside>
1087
 
1088
  <!-- Main Content Area -->
1089
  <main class="main-content">
1090
+ <!-- Header -->
1091
  <div class="header">
1092
  <div class="greeting">
1093
+ <h1>Welcome Back, John!</h1>
1094
+ <p>Your progress today is looking great! Here's what we've crafted for you.</p>
1095
  </div>
1096
+ <div class="date-indicator">14</div>
1097
+ <div class="search-container">
1098
+ <div class="search-bar">
1099
+ <i class="fas fa-search"></i>
1100
+ <input type="text" placeholder="Search habits, goals...">
1101
+ </div>
1102
  </div>
1103
  </div>
1104
 
1105
  <!-- Dashboard Stats -->
1106
+ <div class="dashboard-stats">
1107
+ <div class="stat-card">
1108
+ <div class="stat-header">
1109
+ <div class="stat-title">Current Streak</div>
1110
+ <div class="stat-icon">
 
 
 
 
1111
  <i class="fas fa-fire"></i>
1112
  </div>
1113
  </div>
1114
+ <div class="stat-value">14</div>
1115
+ <div class="stat-change">
1116
+ <i class="fas fa-arrow-up"></i> 3 days
1117
+ </div>
1118
  </div>
1119
+ <div class="stat-card">
1120
+ <div class="stat-header">
1121
+ <div class="stat-title">Habits Completed</div>
1122
+ <div class="stat-icon">
1123
+ <i class="fas fa-check-double"></i>
 
 
 
 
1124
  </div>
1125
  </div>
1126
+ <div class="stat-value">85%</div>
1127
+ <div class="stat-change negative">
1128
+ <i class="fas fa-arrow-down"></i> 5% today
1129
+ </div>
1130
  </div>
1131
+ <div class="stat-card">
1132
+ <div class="stat-header">
1133
+ <div class="stat-title">Goals Achieved</div>
1134
+ <div class="stat-icon">
1135
+ <i class="fas fa-trophy"></i>
 
1136
  </div>
1137
+ </div>
1138
+ <div class="stat-value">3/5</div>
1139
+ <div class="stat-change">
1140
+ <i class="fas fa-clock"></i> 2 pending
1141
+ </div>
1142
+ </div>
1143
+ <div class="stat-card">
1144
+ <div class="stat-header">
1145
+ <div class="stat-title">Mood Score</div>
1146
+ <div class="stat-icon">
1147
+ <i class="fas fa-smile-beam"></i>
1148
  </div>
1149
  </div>
1150
+ <div class="stat-value">7.8</div>
1151
+ <div class="stat-change">
1152
+ <i class="fas fa-arrow-up"></i> 1.2 from avg
1153
+ </div>
1154
  </div>
1155
  </div>
1156
 
1157
  <!-- Habit Tracker -->
1158
+ <div class="section">
1159
+ <div class="section-header">
1160
+ <h2 class="section-title">
1161
+ <i class="fas fa-calendar-check"></i>
1162
+ Today's Habits
1163
+ </h2>
1164
+ <div class="section-actions">
1165
+ <button class="btn btn-outline" title="Manage habits">
1166
+ <i class="fas fa-sliders-h"></i> Manage
1167
+ </button>
1168
+ <button class="btn btn-primary" title="Add new habit">
1169
+ <i class="fas fa-plus"></i> New
1170
+ </button>
1171
  </div>
1172
+ </div>
1173
+
1174
+ <div class="habit-tracker-grid">
1175
+ <div class="habits-list">
1176
+ <div class="habit-item">
1177
+ <button class="habit-check completed">
1178
+ <i class="fas fa-check"></i>
1179
+ </button>
1180
+ <div class="habit-name">Morning Meditation (15 min)</div>
1181
+ <div class="habit-details">
1182
+ <div class="habit-streak" title="Current streak">
1183
+ <i class="fas fa-fire"></i> 14
1184
+ </div>
1185
+ <div class="habit-actions">
1186
+ <button class="habit-action" title="Edit habit">
1187
+ <i class="fas fa-pen"></i>
1188
+ </button>
1189
+ <button class="habit-action" title="More options">
1190
+ <i class="fas fa-ellipsis-v"></i>
1191
+ </button>
1192
+ </div>
1193
+ </div>
1194
  </div>
1195
+ <div class="habit-item">
1196
+ <button class="habit-check completed">
1197
+ <i class="fas fa-check"></i>
1198
+ </button>
1199
+ <div class="habit-name">Exercise (30 min)</div>
1200
+ <div class="habit-details">
1201
+ <div class="habit-streak" title="Current streak">
1202
+ <i class="fas fa-fire"></i> 5
1203
+ </div>
1204
+ <div class="habit-actions">
1205
+ <button class="habit-action" title="Edit habit">
1206
+ <i class="fas fa-pen"></i>
1207
+ </button>
1208
+ <button class="habit-action" title="More options">
1209
+ <i class="fas fa-ellipsis-v"></i>
1210
+ </button>
1211
+ </div>
1212
+ </div>
1213
  </div>
1214
+ <div class="habit-item">
1215
+ <button class="habit-check">
1216
+ <i class="fas fa-check"></i>
1217
+ </button>
1218
+ <div class="habit-name">Read 20 pages</div>
1219
+ <div class="habit-details">
1220
+ <div class="habit-streak" title="Current streak">
1221
+ <i class="fas fa-fire"></i> 2
1222
+ </div>
1223
+ <div class="habit-actions">
1224
+ <button class="habit-action" title="Edit habit">
1225
+ <i class="fas fa-pen"></i>
1226
+ </button>
1227
+ <button class="habit-action" title="More options">
1228
+ <i class="fas fa-ellipsis-v"></i>
1229
+ </button>
1230
+ </div>
1231
+ </div>
1232
  </div>
1233
+ <div class="habit-item">
1234
+ <button class="habit-check">
1235
+ <i class="fas fa-check"></i>
1236
+ </button>
1237
+ <div class="habit-name">Journal Reflection</div>
1238
+ <div class="habit-details">
1239
+ <div class="habit-streak" title="Current streak">
1240
+ <i class="fas fa-fire"></i> 4
1241
+ </div>
1242
+ <div class="habit-actions">
1243
+ <button class="habit-action" title="Edit habit">
1244
+ <i class="fas fa-pen"></i>
1245
+ </button>
1246
+ <button class="habit-action" title="More options">
1247
+ <i class="fas fa-ellipsis-v"></i>
1248
+ </button>
1249
+ </div>
1250
+ </div>
1251
  </div>
1252
  </div>
1253
+
1254
+ <div class="habit-calendar">
1255
+ <div class="calendar-header">
1256
+ <div class="calendar-title">February 2024</div>
1257
+ <div class="calendar-nav">
1258
+ <button class="calendar-nav-btn" title="Previous month">
1259
+ <i class="fas fa-chevron-left"></i>
1260
+ </button>
1261
+ <button class="calendar-nav-btn" title="Next month">
1262
+ <i class="fas fa-chevron-right"></i>
1263
+ </button>
1264
+ </div>
1265
  </div>
1266
+ <div class="calendar-grid">
1267
+ <div class="calendar-day">
1268
+ <div class="day-name">Mon</div>
1269
+ <div class="day-number completed">12</div>
1270
+ </div>
1271
+ <div class="calendar-day">
1272
+ <div class="day-name">Tue</div>
1273
+ <div class="day-number completed">13</div>
1274
+ </div>
1275
+ <div class="calendar-day">
1276
+ <div class="day-name">Wed</div>
1277
+ <div class="day-number current">14</div>
1278
+ </div>
1279
+ <div class="calendar-day">
1280
+ <div class="day-name">Thu</div>
1281
+ <div class="day-number">15</div>
1282
+ </div>
1283
+ <div class="calendar-day">
1284
+ <div class="day-name">Fri</div>
1285
+ <div class="day-number">16</div>
1286
+ </div>
1287
+ <div class="calendar-day">
1288
+ <div class="day-name">Sat</div>
1289
+ <div class="day-number">17</div>
1290
+ </div>
1291
+ <div class="calendar-day">
1292
+ <div class="day-name">Sun</div>
1293
+ <div class="day-number">18</div>
1294
+ </div>
1295
  </div>
1296
  </div>
1297
  </div>
1298
+ </div>
1299
 
1300
+ <!-- AI Insights -->
1301
+ <div class="section">
1302
+ <div class="section-header">
1303
+ <h2 class="section-title">
1304
+ <i class="fas fa-robot"></i>
1305
+ Your AI Insights
1306
+ </h2>
1307
+ <div class="section-actions">
1308
+ <button class="btn btn-outline" title="View all insights">
1309
+ <i class="fas fa-list"></i> View All
1310
+ </button>
1311
  </div>
1312
+ </div>
1313
+
1314
+ <div class="ai-insights">
1315
+ <div class="insight-card">
1316
+ <div class="insight-header">
1317
+ <div class="insight-icon">
1318
+ <i class="fas fa-brain"></i>
1319
+ </div>
1320
+ <div class="insight-title">Optimized Morning Routine</div>
1321
  </div>
1322
+ <div class="insight-text">
1323
+ Your meditation habit has consistently improved your morning productivity. Try moving it 15 minutes earlier to maximize focus before breakfast.
 
 
1324
  </div>
1325
+ <div class="insight-tag">Habit Optimization</div>
1326
+ <div class="insight-tag">Productivity</div>
1327
  </div>
1328
+ <div class="insight-card">
1329
+ <div class="insight-header">
1330
+ <div class="insight-icon">
1331
+ <i class="fas fa-heartbeat"></i>
1332
+ </div>
1333
+ <div class="insight-title">Energy Slump Pattern</div>
1334
  </div>
1335
+ <div class="insight-text">
1336
+ Your energy consistently dips between 2-4pm. Consider scheduling a short walk or protein-rich snack during this time to maintain performance.
 
 
1337
  </div>
1338
+ <div class="insight-tag">Energy</div>
1339
+ <div class="insight-tag">Patterns</div>
1340
  </div>
1341
+ <div class="insight-card">
1342
+ <div class="insight-header">
1343
+ <div class="insight-icon">
1344
+ <i class="fas fa-moon"></i>
1345
+ </div>
1346
+ <div class="insight-title">Sleep Quality Correlation</div>
1347
  </div>
1348
+ <div class="insight-text">
1349
+ Nights when you journal before bed show 12% better sleep quality. Make this connection stronger by establishing a consistent pre-sleep ritual.
 
 
1350
  </div>
1351
+ <div class="insight-tag">Sleep</div>
1352
+ <div class="insight-tag">Habits</div>
1353
  </div>
1354
  </div>
1355
  </div>
1356
 
1357
+ <!-- Challenges -->
1358
+ <div class="section">
1359
+ <div class="section-header">
1360
+ <h2 class="section-title">
1361
+ <i class="fas fa-trophy"></i>
1362
+ Active Challenges
1363
+ </h2>
1364
+ <div class="section-actions">
1365
+ <button class="btn btn-primary" title="Browse more challenges">
1366
+ <i class="fas fa-compass"></i> Browse
1367
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1368
  </div>
1369
  </div>
1370
 
1371
+ <div class="challenges-grid">
1372
+ <div class="challenge-card">
1373
+ <div class="challenge-badge badge-free">Free</div>
1374
+ <h3 class="challenge-title">21-Day Meditation Journey</h3>
1375
+ <div class="challenge-desc">
1376
+ Build a consistent meditation practice with daily guided sessions starting from just 5 minutes.
1377
+ </div>
1378
+ <div class="challenge-progress">
1379
+ <div class="progress-text">
1380
+ <span>Progress</span>
1381
+ <span>13/21 days</span>
1382
+ </div>
1383
+ <div class="progress-bar">
1384
+ <div class="progress-fill" style="width: 62%;"></div>
1385
+ </div>
1386
+ </div>
1387
+ <button class="btn btn-primary" style="width: 100%;">
1388
+ <i class="fas fa-play"></i> Continue
1389
+ </button>
1390
  </div>
1391
+ <div class="challenge-card">
1392
+ <div class="challenge-badge badge-premium">Premium</div>
1393
+ <h3 class="challenge-title">Productivity Power-Up</h3>
1394
+ <div class="challenge-desc">
1395
+ Advanced techniques to double your productivity without burning out, based on your personal patterns.
1396
+ </div>
1397
+ <div class="challenge-progress">
1398
+ <div class="progress-text">
1399
+ <span>Progress</span>
1400
+ <span>5/14 days</span>
1401
+ </div>
1402
+ <div class="progress-bar">
1403
+ <div class="progress-fill" style="width: 36%;"></div>
1404
+ </div>
 
 
 
1405
  </div>
1406
+ <button class="btn btn-primary" style="width: 100%;">
1407
+ <i class="fas fa-play"></i> Continue
1408
+ </button>
1409
  </div>
1410
+ <div class="challenge-card">
1411
+ <div class="challenge-badge badge-free">Free</div>
1412
+ <h3 class="challenge-title">Sleep Quality Booster</h3>
1413
+ <div class="challenge-desc">
1414
+ Improve your sleep with science-backed techniques and personalized recommendations.
 
 
 
 
1415
  </div>
1416
+ <button class="btn btn-outline" style="width: 100%;">
1417
+ <i class="fas fa-info-circle"></i> Learn More
1418
+ </button>
1419
  </div>
 
 
 
 
 
 
 
1420
  </div>
1421
  </div>
1422
  </main>
 
1424
 
1425
  <script>
1426
  document.addEventListener('DOMContentLoaded', function() {
1427
+ // Create floating particles for background
1428
+ const particlesContainer = document.getElementById('particles');
1429
+ const particleCount = window.innerWidth < 768 ? 15 : 30;
1430
+
1431
+ for (let i = 0; i < particleCount; i++) {
1432
+ const particle = document.createElement('div');
1433
+ particle.classList.add('particle');
1434
+
1435
+ // Random size between 2px and 6px
1436
+ const size = Math.random() * 4 + 2;
1437
+ particle.style.width = `${size}px`;
1438
+ particle.style.height = `${size}px`;
1439
+
1440
+ // Random position
1441
+ particle.style.left = `${Math.random() * 100}%`;
1442
+ particle.style.top = `${Math.random() * 100}%`;
1443
+
1444
+ // Random opacity between 0.3 and 0.8
1445
+ particle.style.opacity = Math.random() * 0.5 + 0.3;
1446
+
1447
+ // Random animation duration between 10s and 20s
1448
+ const duration = Math.random() * 10 + 10;
1449
+ particle.style.animationDuration = `${duration}s`;
1450
+
1451
+ // Random delay
1452
+ particle.style.animationDelay = `${Math.random() * 10}s`;
1453
+
1454
+ particlesContainer.appendChild(particle);
1455
+ }
1456
+
1457
+ // Habit completion toggle
1458
+ const habitChecks = document.querySelectorAll('.habit-check');
1459
  habitChecks.forEach(check => {
1460
  check.addEventListener('click', function() {
1461
  this.classList.toggle('completed');
 
 
 
 
 
1462
  });
1463
  });
1464
+
1465
+ // Calendar day click handler
1466
+ const calendarDays = document.querySelectorAll('.calendar-day .day-number:not(.current)');
1467
+ calendarDays.forEach(day => {
1468
+ day.addEventListener('click', function() {
1469
  this.classList.toggle('completed');
 
 
 
 
 
1470
  });
1471
  });
1472
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1473
  // Navigation active state
1474
  const navItems = document.querySelectorAll('.nav-item');
1475
  navItems.forEach(item => {
 
1478
  this.classList.add('active');
1479
  });
1480
  });
1481
+
1482
+ // Simulate loading animation
1483
+ setTimeout(() => {
1484
+ document.querySelectorAll('.stat-card').forEach((card, i) => {
1485
+ setTimeout(() => {
1486
+ card.style.opacity = '1';
1487
+ card.style.transform = 'translateY(0)';
1488
+ }, i * 100);
1489
+ });
1490
+ }, 300);
1491
+
1492
+ setTimeout(() => {
1493
+ document.querySelectorAll('.habit-item').forEach((item, i) => {
1494
+ setTimeout(() => {
1495
+ item.style.opacity = '1';
1496
+ item.style.transform = 'translateY(0)';
1497
+ }, i * 50);
1498
+ });
1499
+ }, 500);
1500
+
1501
+ setTimeout(() => {
1502
+ document.querySelectorAll('.insight-card').forEach((card, i) => {
1503
+ setTimeout(() => {
1504
+ card.style.opacity = '1';
1505
+ card.style.transform = 'translateY(0)';
1506
+ }, i * 100);
1507
+ });
1508
+ }, 700);
1509
+
1510
+ // In a real app, we would load data from an API
1511
+ // Example:
1512
+ /*
1513
+ fetch('/api/user-stats')
1514
+ .then(response => response.json())
1515
+ .then(data => {
1516
+ document.querySelector('.stat-value').textContent = data.streak;
1517
+ // Update other elements with data
1518
+ });
1519
+ */
1520
  });
1521
+
1522
+ // In a real implementation, we would use Chart.js for data visualization
1523
+ /*
1524
+ const ctx = document.createElement('canvas');
1525
+ ctx.id = 'progressChart';
1526
+ document.querySelector('.chart-container').appendChild(ctx);
1527
+
1528
+ const chart = new Chart(ctx, {
1529
+ type: 'line',
1530
+ data: {
1531
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
1532
+ datasets: [
1533
+ {
1534
+ label: 'Habits',
1535
+ data: [65, 59, 80, 81],
1536
+ borderColor: '#7c3aed',
1537
+ backgroundColor: 'transparent',
1538
+ tension: 0.4
1539
+ },
1540
+ {
1541
+ label: 'Goals',
1542
+ data: [28, 48, 40, 65],
1543
+ borderColor: '#10b981',
1544
+ backgroundColor: 'transparent',
1545
+ tension: 0.4
1546
+ }
1547
+ ]
1548
+ },
1549
+ options: {
1550
+ responsive: true,
1551
+ maintainAspectRatio: false,
1552
+ plugins: {
1553
+ legend: {
1554
+ display: false
1555
+ }
1556
+ },
1557
+ scales: {
1558
+ y: {
1559
+ beginAtZero: false,
1560
+ grid: {
1561
+ color: 'rgba(255, 255, 255, 0.05)'
1562
+ },
1563
+ ticks: {
1564
+ color: '#94a3b8'
1565
+ }
1566
+ },
1567
+ x: {
1568
+ grid: {
1569
+ color: 'rgba(255, 255, 255, 0.05)'
1570
+ },
1571
+ ticks: {
1572
+ color: '#94a3b8'
1573
+ }
1574
+ }
1575
+ }
1576
+ }
1577
+ });
1578
+ */
1579
  </script>
1580
  </body>
1581
  </html>