Hugging Face's logo

Spaces:
Digiator
/
planner
Running

App Files Community
Digiator commited on
Commit
502b1d4
·
verified ·
1 Parent(s): a4dbf26

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +661 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Planner
3
- emoji: 💻
4
- colorFrom: yellow
5
- colorTo: pink
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: planner
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,661 @@
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>LifeFlow - Your Personal Life Planner</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ :root {
12
+ --primary: #6366f1;
13
+ --secondary: #8b5cf6;
14
+ --accent: #ec4899;
15
+ --dark: #1e293b;
16
+ --light: #f8fafc;
17
+ }
18
+
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
21
+ }
22
+
23
+ .progress-ring__circle {
24
+ transition: stroke-dashoffset 0.35s;
25
+ transform: rotate(-90deg);
26
+ transform-origin: 50% 50%;
27
+ }
28
+
29
+ .habit-streak {
30
+ position: relative;
31
+ }
32
+
33
+ .habit-streak::after {
34
+ content: '';
35
+ position: absolute;
36
+ top: 0;
37
+ left: 0;
38
+ width: 100%;
39
+ height: 100%;
40
+ background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
41
+ opacity: 0;
42
+ transition: opacity 0.3s;
43
+ }
44
+
45
+ .habit-streak:hover::after {
46
+ opacity: 1;
47
+ }
48
+
49
+ .mood-emoji {
50
+ transition: all 0.2s;
51
+ }
52
+
53
+ .mood-emoji:hover {
54
+ transform: scale(1.2);
55
+ }
56
+
57
+ .task-item {
58
+ transition: all 0.2s;
59
+ }
60
+
61
+ .task-item:hover {
62
+ transform: translateY(-2px);
63
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
64
+ }
65
+
66
+ .calendar-day {
67
+ transition: all 0.2s;
68
+ }
69
+
70
+ .calendar-day:hover {
71
+ background-color: rgba(99, 102, 241, 0.2);
72
+ }
73
+
74
+ .calendar-day.today {
75
+ background-color: rgba(99, 102, 241, 0.1);
76
+ border: 2px solid var(--primary);
77
+ }
78
+
79
+ .calendar-day.selected {
80
+ background-color: var(--primary);
81
+ color: white;
82
+ }
83
+
84
+ @keyframes pulse {
85
+ 0%, 100% {
86
+ opacity: 1;
87
+ }
88
+ 50% {
89
+ opacity: 0.5;
90
+ }
91
+ }
92
+
93
+ .animate-pulse {
94
+ animation: pulse 2s infinite;
95
+ }
96
+
97
+ /* Custom scrollbar */
98
+ .custom-scrollbar::-webkit-scrollbar {
99
+ width: 6px;
100
+ }
101
+
102
+ .custom-scrollbar::-webkit-scrollbar-track {
103
+ background: #f1f1f1;
104
+ border-radius: 10px;
105
+ }
106
+
107
+ .custom-scrollbar::-webkit-scrollbar-thumb {
108
+ background: #c7d2fe;
109
+ border-radius: 10px;
110
+ }
111
+
112
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
113
+ background: var(--primary);
114
+ }
115
+
116
+ /* Modal styles */
117
+ .modal {
118
+ transition: opacity 0.3s ease;
119
+ }
120
+
121
+ .modal-overlay {
122
+ background-color: rgba(0, 0, 0, 0.5);
123
+ }
124
+ </style>
125
+ </head>
126
+ <body class="bg-gray-50 text-gray-800 font-sans">
127
+ <div class="min-h-screen flex flex-col">
128
+ <!-- Header -->
129
+ <header class="gradient-bg text-white shadow-lg">
130
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
131
+ <div class="flex items-center space-x-2">
132
+ <i class="fas fa-compass text-2xl"></i>
133
+ <h1 class="text-2xl font-bold">LifeFlow</h1>
134
+ </div>
135
+ <div class="flex items-center space-x-4">
136
+ <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
137
+ <i class="fas fa-bell"></i>
138
+ </button>
139
+ <div class="relative">
140
+ <button id="user-menu" class="flex items-center space-x-2 focus:outline-none">
141
+ <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-indigo-600 font-bold">JD</div>
142
+ <span class="hidden md:inline" id="username-display">John Doe</span>
143
+ </button>
144
+ <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
145
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100">Profile</a>
146
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="settings-btn">Settings</a>
147
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="export-data">Export Data</a>
148
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="import-data">Import Data</a>
149
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100" id="clear-data">Clear Data</a>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </header>
155
+
156
+ <!-- Main Content -->
157
+ <main class="flex-1 container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
158
+ <!-- Sidebar -->
159
+ <aside class="w-full lg:w-64 bg-white rounded-lg shadow-md p-4 h-fit lg:sticky lg:top-6">
160
+ <nav>
161
+ <ul class="space-y-2">
162
+ <li>
163
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-50 text-indigo-700 font-medium">
164
+ <i class="fas fa-home"></i>
165
+ <span>Dashboard</span>
166
+ </a>
167
+ </li>
168
+ <li>
169
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="goals-nav">
170
+ <i class="fas fa-bullseye"></i>
171
+ <span>Goals</span>
172
+ </a>
173
+ </li>
174
+ <li>
175
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="tasks-nav">
176
+ <i class="fas fa-tasks"></i>
177
+ <span>Tasks</span>
178
+ </a>
179
+ </li>
180
+ <li>
181
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="calendar-nav">
182
+ <i class="fas fa-calendar-alt"></i>
183
+ <span>Calendar</span>
184
+ </a>
185
+ </li>
186
+ <li>
187
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="analytics-nav">
188
+ <i class="fas fa-chart-line"></i>
189
+ <span>Analytics</span>
190
+ </a>
191
+ </li>
192
+ <li>
193
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="habits-nav">
194
+ <i class="fas fa-heartbeat"></i>
195
+ <span>Habits</span>
196
+ </a>
197
+ </li>
198
+ <li>
199
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition" id="mood-nav">
200
+ <i class="fas fa-smile"></i>
201
+ <span>Mood Tracker</span>
202
+ </a>
203
+ </li>
204
+ </ul>
205
+ </nav>
206
+
207
+ <div class="mt-8">
208
+ <h3 class="font-medium text-gray-500 uppercase text-sm mb-2">Quick Add</h3>
209
+ <div class="space-y-2">
210
+ <button class="w-full flex items-center space-x-2 p-2 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="quick-add-task">
211
+ <i class="fas fa-plus text-gray-500"></i>
212
+ <span class="text-gray-600">New Task</span>
213
+ </button>
214
+ <button class="w-full flex items-center space-x-2 p-2 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="quick-add-goal">
215
+ <i class="fas fa-plus text-gray-500"></i>
216
+ <span class="text-gray-600">New Goal</span>
217
+ </button>
218
+ <button class="w-full flex items-center space-x-2 p-2 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="quick-add-event">
219
+ <i class="fas fa-plus text-gray-500"></i>
220
+ <span class="text-gray-600">New Event</span>
221
+ </button>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="mt-8">
226
+ <h3 class="font-medium text-gray-500 uppercase text-sm mb-2">Categories</h3>
227
+ <div class="flex flex-wrap gap-2" id="categories-container">
228
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs">Health</span>
229
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Career</span>
230
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs">Finance</span>
231
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs">Relationships</span>
232
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Personal Growth</span>
233
+ </div>
234
+ </div>
235
+ </aside>
236
+
237
+ <!-- Main Dashboard -->
238
+ <div class="flex-1 space-y-6" id="main-content">
239
+ <!-- Welcome Section -->
240
+ <section class="bg-white rounded-lg shadow-md p-6" id="dashboard-section">
241
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
242
+ <div>
243
+ <h2 class="text-2xl font-bold">Welcome back, <span id="welcome-name">John</span>!</h2>
244
+ <p class="text-gray-600" id="current-date">Today is Wednesday, June 14, 2023</p>
245
+ </div>
246
+ <div class="mt-4 md:mt-0">
247
+ <button class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition flex items-center space-x-2" id="new-task-btn">
248
+ <i class="fas fa-plus"></i>
249
+ <span>New Task</span>
250
+ </button>
251
+ </div>
252
+ </div>
253
+
254
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
255
+ <div class="bg-indigo-50 p-4 rounded-lg flex items-center space-x-4">
256
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
257
+ <i class="fas fa-tasks text-indigo-600"></i>
258
+ </div>
259
+ <div>
260
+ <p class="text-gray-500">Pending Tasks</p>
261
+ <p class="text-xl font-bold" id="pending-tasks-count">12</p>
262
+ </div>
263
+ </div>
264
+ <div class="bg-green-50 p-4 rounded-lg flex items-center space-x-4">
265
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
266
+ <i class="fas fa-check-circle text-green-600"></i>
267
+ </div>
268
+ <div>
269
+ <p class="text-gray-500">Completed Today</p>
270
+ <p class="text-xl font-bold" id="completed-today-count">7</p>
271
+ </div>
272
+ </div>
273
+ <div class="bg-purple-50 p-4 rounded-lg flex items-center space-x-4">
274
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
275
+ <i class="fas fa-fire text-purple-600"></i>
276
+ </div>
277
+ <div>
278
+ <p class="text-gray-500">Current Streak</p>
279
+ <p class="text-xl font-bold" id="current-streak-count">14 days</p>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Goals Progress -->
286
+ <section class="bg-white rounded-lg shadow-md p-6" id="goals-section">
287
+ <div class="flex justify-between items-center mb-4">
288
+ <h2 class="text-xl font-bold">Your Goals Progress</h2>
289
+ <a href="#" class="text-indigo-600 hover:underline" id="view-all-goals">View All</a>
290
+ </div>
291
+
292
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="goals-container">
293
+ <!-- Goals will be dynamically inserted here -->
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Tasks and Calendar -->
298
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
299
+ <!-- Tasks Section -->
300
+ <section class="bg-white rounded-lg shadow-md p-6" id="tasks-section">
301
+ <div class="flex justify-between items-center mb-4">
302
+ <h2 class="text-xl font-bold">Today's Tasks</h2>
303
+ <a href="#" class="text-indigo-600 hover:underline" id="view-all-tasks">View All</a>
304
+ </div>
305
+
306
+ <div class="space-y-3 max-h-96 overflow-y-auto custom-scrollbar" id="tasks-container">
307
+ <!-- Tasks will be dynamically inserted here -->
308
+ </div>
309
+
310
+ <div class="mt-4">
311
+ <button class="w-full flex items-center justify-center space-x-2 p-3 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="add-new-task">
312
+ <i class="fas fa-plus text-gray-500"></i>
313
+ <span class="text-gray-600">Add New Task</span>
314
+ </button>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Mini Calendar and Habits -->
319
+ <div class="space-y-6">
320
+ <!-- Mini Calendar -->
321
+ <section class="bg-white rounded-lg shadow-md p-6" id="calendar-section">
322
+ <div class="flex justify-between items-center mb-4">
323
+ <h2 class="text-xl font-bold" id="calendar-month-year">June 2023</h2>
324
+ <div class="flex space-x-2">
325
+ <button class="p-1 rounded-full hover:bg-gray-100 transition" id="prev-month">
326
+ <i class="fas fa-chevron-left"></i>
327
+ </button>
328
+ <button class="p-1 rounded-full hover:bg-gray-100 transition" id="next-month">
329
+ <i class="fas fa-chevron-right"></i>
330
+ </button>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-500 mb-2">
335
+ <div>S</div>
336
+ <div>M</div>
337
+ <div>T</div>
338
+ <div>W</div>
339
+ <div>T</div>
340
+ <div>F</div>
341
+ <div>S</div>
342
+ </div>
343
+
344
+ <div class="grid grid-cols-7 gap-1" id="calendar-days">
345
+ <!-- Calendar days will be dynamically inserted here -->
346
+ </div>
347
+
348
+ <div class="mt-4 pt-4 border-t">
349
+ <h3 class="font-medium mb-2">Today's Events</h3>
350
+ <div class="space-y-2" id="today-events">
351
+ <!-- Today's events will be dynamically inserted here -->
352
+ </div>
353
+ </div>
354
+ </section>
355
+
356
+ <!-- Habits Tracker -->
357
+ <section class="bg-white rounded-lg shadow-md p-6" id="habits-section">
358
+ <div class="flex justify-between items-center mb-4">
359
+ <h2 class="text-xl font-bold">Daily Habits</h2>
360
+ <a href="#" class="text-indigo-600 hover:underline" id="view-all-habits">View All</a>
361
+ </div>
362
+
363
+ <div class="space-y-4" id="habits-container">
364
+ <!-- Habits will be dynamically inserted here -->
365
+ </div>
366
+
367
+ <div class="mt-4">
368
+ <button class="w-full flex items-center justify-center space-x-2 p-3 rounded-lg border border-dashed border-gray-300 hover:bg-gray-50 transition" id="add-new-habit">
369
+ <i class="fas fa-plus text-gray-500"></i>
370
+ <span class="text-gray-600">Add New Habit</span>
371
+ </button>
372
+ </div>
373
+ </section>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Mood and Energy Tracker -->
378
+ <section class="bg-white rounded-lg shadow-md p-6" id="mood-section">
379
+ <div class="flex justify-between items-center mb-4">
380
+ <h2 class="text-xl font-bold">Mood & Energy Tracker</h2>
381
+ <a href="#" class="text-indigo-600 hover:underline" id="view-mood-history">View History</a>
382
+ </div>
383
+
384
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
385
+ <!-- Mood Tracker -->
386
+ <div>
387
+ <h3 class="font-medium mb-3">How are you feeling today?</h3>
388
+ <div class="grid grid-cols-5 gap-2">
389
+ <button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="awful">
390
+ <span class="text-3xl">😭</span>
391
+ <span class="text-xs mt-1">Awful</span>
392
+ </button>
393
+ <button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="bad">
394
+ <span class="text-3xl">😞</span>
395
+ <span class="text-xs mt-1">Bad</span>
396
+ </button>
397
+ <button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="okay">
398
+ <span class="text-3xl">😐</span>
399
+ <span class="text-xs mt-1">Okay</span>
400
+ </button>
401
+ <button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="good">
402
+ <span class="text-3xl">😊</span>
403
+ <span class="text-xs mt-1">Good</span>
404
+ </button>
405
+ <button class="mood-emoji flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-mood="great">
406
+ <span class="text-3xl">😁</span>
407
+ <span class="text-xs mt-1">Great</span>
408
+ </button>
409
+ </div>
410
+
411
+ <div class="mt-4">
412
+ <label for="mood-notes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
413
+ <textarea id="mood-notes" rows="2", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="Any specific reasons for your mood today?"></textarea>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Energy Tracker -->
418
+ <div>
419
+ <h3 class="font-medium mb-3">Energy Levels</h3>
420
+ <div class="space-y-4">
421
+ <div>
422
+ <label class="block text-sm font-medium text-gray-700 mb-1">Morning</label>
423
+ <div class="flex items-center space-x-2" id="morning-energy">
424
+ <button class="w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-energy="1"></button>
425
+ <button class="w-6 h-6 rounded-full bg-gray-300 hover:bg-gray-400 transition" data-energy="2"></button>
426
+ <button class="w-6 h-6 rounded-full bg-yellow-200 hover:bg-yellow-300 transition" data-energy="3"></button>
427
+ <button class="w-6 h-6 rounded-full bg-yellow-400 hover:bg-yellow-500 transition" data-energy="4"></button>
428
+ <button class="w-6 h-6 rounded-full bg-green-400 hover:bg-green-500 transition" data-energy="5"></button>
429
+ </div>
430
+ </div>
431
+
432
+ <div>
433
+ <label class="block text-sm font-medium text-gray-700 mb-1">Afternoon</label>
434
+ <div class="flex items-center space-x-2" id="afternoon-energy">
435
+ <button class="w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-energy="1"></button>
436
+ <button class="w-6 h-6 rounded-full bg-gray-300 hover:bg-gray-400 transition" data-energy="2"></button>
437
+ <button class="w-6 h-6 rounded-full bg-yellow-200 hover:bg-yellow-300 transition" data-energy="3"></button>
438
+ <button class="w-6 h-6 rounded-full bg-yellow-400 hover:bg-yellow-500 transition" data-energy="4"></button>
439
+ <button class="w-6 h-6 rounded-full bg-green-400 hover:bg-green-500 transition" data-energy="5"></button>
440
+ </div>
441
+ </div>
442
+
443
+ <div>
444
+ <label class="block text-sm font-medium text-gray-700 mb-1">Evening</label>
445
+ <div class="flex items-center space-x-2" id="evening-energy">
446
+ <button class="w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 transition" data-energy="1"></button>
447
+ <button class="w-6 h-6 rounded-full bg-gray-300 hover:bg-gray-400 transition" data-energy="2"></button>
448
+ <button class="w-6 h-6 rounded-full bg-yellow-200 hover:bg-yellow-300 transition" data-energy="3"></button>
449
+ <button class="w-6 h-6 rounded-full bg-yellow-400 hover:bg-yellow-500 transition" data-energy="4"></button>
450
+ <button class="w-6 h-6 rounded-full bg-green-400 hover:bg-green-500 transition" data-energy="5"></button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <div class="mt-4">
456
+ <label for="energy-notes", class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
457
+ <textarea id="energy-notes" rows="2", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="What affected your energy levels today?"></textarea>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="mt-6">
463
+ <button class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition" id="save-mood-tracker">
464
+ Save Today's Tracking
465
+ </button>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- Productivity Insights -->
470
+ <section class="bg-white rounded-lg shadow-md p-6" id="analytics-section">
471
+ <div class="flex justify-between items-center mb-4">
472
+ <h2 class="text-xl font-bold">Productivity Insights</h2>
473
+ <a href="#" class="text-indigo-600 hover:underline">View Details</a>
474
+ </div>
475
+
476
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
477
+ <div class="bg-indigo-50 p-4 rounded-lg">
478
+ <div class="flex justify-between items-start">
479
+ <div>
480
+ <p class="text-gray-500">Focus Time</p>
481
+ <p class="text-2xl font-bold" id="focus-time">3.2 <span class="text-lg">hours</span></p>
482
+ </div>
483
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
484
+ <i class="fas fa-clock text-indigo-600"></i>
485
+ </div>
486
+ </div>
487
+ <div class="mt-2">
488
+ <div class="h-2 bg-gray-200 rounded-full">
489
+ <div class="h-2 bg-indigo-600 rounded-full" style="width: 64%"></div>
490
+ </div>
491
+ <p class="text-xs text-gray-500 mt-1">64% of daily goal</p>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="bg-green-50 p-4 rounded-lg">
496
+ <div class="flex justify-between items-start">
497
+ <div>
498
+ <p class="text-gray-500">Tasks Completed</p>
499
+ <p class="text-2xl font-bold" id="tasks-completed">7 <span class="text-lg">tasks</span></p>
500
+ </div>
501
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
502
+ <i class="fas fa-check-circle text-green-600"></i>
503
+ </div>
504
+ </div>
505
+ <div class="mt-2">
506
+ <div class="h-2 bg-gray-200 rounded-full">
507
+ <div class="h-2 bg-green-600 rounded-full" style="width: 58%"></div>
508
+ </div>
509
+ <p class="text-xs text-gray-500 mt-1">58% of daily goal</p>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="bg-purple-50 p-4 rounded-lg">
514
+ <div class="flex justify-between items-start">
515
+ <div>
516
+ <p class="text-gray-500">Habit Streak</p>
517
+ <p class="text-2xl font-bold" id="habit-streak-count">14 <span class="text-lg">days</span></p>
518
+ </div>
519
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
520
+ <i class="fas fa-fire text-purple-600"></i>
521
+ </div>
522
+ </div>
523
+ <div class="mt-2">
524
+ <div class="h-2 bg-gray-200 rounded-full">
525
+ <div class="h-2 bg-purple-600 rounded-full" style="width: 47%"></div>
526
+ </div>
527
+ <p class="text-xs text-gray-500 mt-1">47% of monthly goal</p>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="mt-6">
533
+ <h3 class="font-medium mb-2">Weekly Performance</h3>
534
+ <div class="h-64 bg-gray-50 rounded-lg p-4">
535
+ <canvas id="productivityChart"></canvas>
536
+ </div>
537
+ </div>
538
+ </section>
539
+ </div>
540
+ </main>
541
+
542
+ <!-- Footer -->
543
+ <footer class="bg-white border-t py-6">
544
+ <div class="container mx-auto px-4">
545
+ <div class="flex flex-col md:flex-row justify-between items-center">
546
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
547
+ <i class="fas fa-compass text-indigo-600"></i>
548
+ <span class="font-bold">LifeFlow</span>
549
+ </div>
550
+ <div class="flex space-x-6">
551
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Privacy</a>
552
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms</a>
553
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Help</a>
554
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
555
+ </div>
556
+ </div>
557
+ <div class="mt-6 text-center text-sm text-gray-500">
558
+ © 2023 LifeFlow. All rights reserved.
559
+ </div>
560
+ </div>
561
+ </footer>
562
+ </div>
563
+
564
+ <!-- Modals -->
565
+ <!-- Task Modal -->
566
+ <div id="task-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal">
567
+ <div class="modal-overlay absolute inset-0 bg-gray-900 opacity-50"></div>
568
+ <div class="bg-white rounded-lg shadow-xl z-50 w-full max-w-md mx-4">
569
+ <div class="p-6">
570
+ <h3 class="text-lg font-bold mb-4" id="task-modal-title">Add New Task</h3>
571
+ <form id="task-form">
572
+ <input type="hidden" id="task-id">
573
+ <div class="mb-4">
574
+ <label for="task-title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
575
+ <input type="text" id="task-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required>
576
+ </div>
577
+ <div class="mb-4">
578
+ <label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
579
+ <textarea id="task-description" rows="3", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea>
580
+ </div>
581
+ <div class="grid grid-cols-2 gap-4 mb-4">
582
+ <div>
583
+ <label for="task-date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
584
+ <input type="date" id="task-date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required>
585
+ </div>
586
+ <div>
587
+ <label for="task-time" class="block text-sm font-medium text-gray-700 mb-1">Time</label>
588
+ <input type="time" id="task-time" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
589
+ </div>
590
+ </div>
591
+ <div class="mb-4">
592
+ <label for="task-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
593
+ <select id="task-category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
594
+ <option value="work">Work</option>
595
+ <option value="health">Health</option>
596
+ <option value="personal">Personal</option>
597
+ <option value="learning">Learning</option>
598
+ <option value="other">Other</option>
599
+ </select>
600
+ </div>
601
+ <div class="mb-4">
602
+ <label for="task-priority" class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
603
+ <select id="task-priority" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
604
+ <option value="low">Low</option>
605
+ <option value="medium" selected>Medium</option>
606
+ <option value="high">High</option>
607
+ </select>
608
+ </div>
609
+ <div class="flex justify-end space-x-3">
610
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition" id="cancel-task">
611
+ Cancel
612
+ </button>
613
+ <button type="submit" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition">
614
+ Save Task
615
+ </button>
616
+ </div>
617
+ </form>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <!-- Goal Modal -->
623
+ <div id="goal-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal">
624
+ <div class="modal-overlay absolute inset-0 bg-gray-900 opacity-50"></div>
625
+ <div class="bg-white rounded-lg shadow-xl z-50 w-full max-w-md mx-4">
626
+ <div class="p-6">
627
+ <h3 class="text-lg font-bold mb-4" id="goal-modal-title">Add New Goal</h3>
628
+ <form id="goal-form">
629
+ <input type="hidden" id="goal-id">
630
+ <div class="mb-4">
631
+ <label for="goal-title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
632
+ <input type="text" id="goal-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required>
633
+ </div>
634
+ <div class="mb-4">
635
+ <label for="goal-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
636
+ <textarea id="goal-description" rows="3", class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea>
637
+ </div>
638
+ <div class="grid grid-cols-2 gap-4 mb-4">
639
+ <div>
640
+ <label for="goal-start-date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
641
+ <input type="date", id="goal-start-date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required>
642
+ </div>
643
+ <div>
644
+ <label for="goal-end-date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
645
+ <input type="date", id="goal-end-date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" required>
646
+ </div>
647
+ </div>
648
+ <div class="mb-4">
649
+ <label for="goal-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
650
+ <select id="goal-category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
651
+ <option value="health">Health</option>
652
+ <option value="career">Career</option>
653
+ <option value="finance">Finance</option>
654
+ <option value="relationships">Relationships</option>
655
+ <option value="personal-growth">Personal Growth</option>
656
+ <option value="other">Other</option>
657
+ </select>
658
+ </div>
659
+ <div class="mb-4">
660
+ <label for="goal-type" class="block text-sm font-medium text-gray-700 mb-1">Goal Type</
661
+ </html>