Hugging Face's logo

Spaces:
ttcgroup
/
undefined
Running

App Files Community
ttcgroup commited on
Commit
3200020
·
verified ·
1 Parent(s): f6167ab

add a google sign in option on the landing page, make the "add task" (in the task section) and "add event" (in the schedule section) actually add the input to the tasks/schedule respectively and allow reminders/alarms to be set. Make the "add resource" (in the research section), actually add the resource link and let the user click on any of the bookmarks to open the url in their native browser. also allow the ai to pick up on patterns in the users behavior to create articles/video/sites that align with their interests and introduce them at the top of the research section, in a dashboard format.

Browse files
Files changed (4) hide show
  1. index.html +9 -2
  2. research.html +65 -18
  3. scheduling.html +295 -204
  4. tasks.html +193 -255
index.html CHANGED
@@ -321,10 +321,17 @@
321
  </div>
322
  </footer>
323
  </div>
324
-
325
  <script>
 
 
 
 
 
 
 
 
326
  // Initialize Vanta.js background
327
- VANTA.WAVES({
328
  el: "#vanta-bg",
329
  mouseControls: true,
330
  touchControls: true,
 
321
  </div>
322
  </footer>
323
  </div>
 
324
  <script>
325
+ // Google Sign-In Handler
326
+ function handleGoogleSignIn() {
327
+ // In production, use Google OAuth API
328
+ console.log("Google sign-in initiated");
329
+ // Mock implementation for demo
330
+ alert("Google sign-in would be implemented here");
331
+ }
332
+
333
  // Initialize Vanta.js background
334
+ VANTA.WAVES({
335
  el: "#vanta-bg",
336
  mouseControls: true,
337
  touchControls: true,
research.html CHANGED
@@ -77,25 +77,48 @@
77
  </div>
78
 
79
  <div class="space-y-4">
80
- <div class="research-item research-card rounded-xl p-4">
81
- <div class="flex items-start mb-3">
82
- <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
83
- <i data-feather="file-text" class="w-5 h-5"></i>
 
 
 
 
 
 
84
  </div>
85
- <div>
86
- <div class="font-bold">Circadian Rhythm Research</div>
87
- <div class="text-sm opacity-80">Journal of Sleep Medicine • 2022</div>
 
 
 
 
 
88
  </div>
89
  </div>
90
- <p class="text-sm mb-3">Latest findings on how circadian rhythms affect cognitive performance and productivity.</p>
91
- <div class="flex flex-wrap gap-2">
92
- <span class="tag bg-purple-600/30 px-2 py-1 rounded-full text-xs">sleep</span>
93
- <span class="tag bg-blue-600/30 px-2 py-1 rounded-full text-xs">neuroscience</span>
94
- <span class="tag bg-green-600/30 px-2 py-1 rounded-full text-xs">productivity</span>
 
 
 
 
 
 
95
  </div>
96
  </div>
97
-
98
- <div class="research-item research-card rounded-xl p-4">
 
 
 
 
 
 
99
  <div class="flex items-start mb-3">
100
  <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
101
  <i data-feather="link" class="w-5 h-5"></i>
@@ -209,10 +232,10 @@
209
  <label class="block mb-2 text-sm">Tags</label>
210
  <input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3" placeholder="Comma separated">
211
  </div>
212
- <button class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
213
  Save Resource
214
  </button>
215
- </div>
216
  </div>
217
  </div>
218
  </div>
@@ -263,10 +286,34 @@
263
  </div>
264
  </footer>
265
  </div>
266
-
267
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  // Initialize Vanta.js background
269
- VANTA.CELLS({
270
  el: "#vanta-bg",
271
  mouseControls: true,
272
  touchControls: true,
 
77
  </div>
78
 
79
  <div class="space-y-4">
80
+ <div class="research-card rounded-3xl p-6 mb-8">
81
+ <h2 class="text-2xl font-bold mb-6">Recommended For You</h2>
82
+ <div class="grid md:grid-cols-2 gap-4">
83
+ <div class="research-item research-card rounded-xl p-4 hover:cursor-pointer" onclick="window.open('https://example.com/sleep-science', '_blank')">
84
+ <div class="flex items-start">
85
+ <img src="http://static.photos/science/320x240/1" class="w-16 h-16 rounded-lg object-cover mr-3">
86
+ <div>
87
+ <div class="font-bold">Sleep Science Weekly</div>
88
+ <div class="text-sm opacity-80">Based on your interest in sleep optimization</div>
89
+ </div>
90
  </div>
91
+ </div>
92
+ <div class="research-item research-card rounded-xl p-4 hover:cursor-pointer" onclick="window.open('https://example.com/productivity-hacks', '_blank')">
93
+ <div class="flex items-start">
94
+ <img src="http://static.photos/office/320x240/2" class="w-16 h-16 rounded-lg object-cover mr-3">
95
+ <div>
96
+ <div class="font-bold">Productivity Hacks</div>
97
+ <div class="text-sm opacity-80">Matching your work patterns</div>
98
+ </div>
99
  </div>
100
  </div>
101
+ </div>
102
+ </div>
103
+
104
+ <div class="research-item research-card rounded-xl p-4 hover:cursor-pointer" onclick="window.open('https://journalofsleepmedicine.org/circadian-rhythm', '_blank')">
105
+ <div class="flex items-start mb-3">
106
+ <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
107
+ <i data-feather="file-text" class="w-5 h-5"></i>
108
+ </div>
109
+ <div>
110
+ <div class="font-bold">Circadian Rhythm Research</div>
111
+ <div class="text-sm opacity-80">Journal of Sleep Medicine • 2022</div>
112
  </div>
113
  </div>
114
+ <p class="text-sm mb-3">Latest findings on how circadian rhythms affect cognitive performance and productivity.</p>
115
+ <div class="flex flex-wrap gap-2">
116
+ <span class="tag bg-purple-600/30 px-2 py-1 rounded-full text-xs">sleep</span>
117
+ <span class="tag bg-blue-600/30 px-2 py-1 rounded-full text-xs">neuroscience</span>
118
+ <span class="tag bg-green-600/30 px-2 py-1 rounded-full text-xs">productivity</span>
119
+ </div>
120
+ </div>
121
+ <div class="research-item research-card rounded-xl p-4">
122
  <div class="flex items-start mb-3">
123
  <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
124
  <i data-feather="link" class="w-5 h-5"></i>
 
232
  <label class="block mb-2 text-sm">Tags</label>
233
  <input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3" placeholder="Comma separated">
234
  </div>
235
+ <button onclick="saveResource()" class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
236
  Save Resource
237
  </button>
238
+ </div>
239
  </div>
240
  </div>
241
  </div>
 
286
  </div>
287
  </footer>
288
  </div>
 
289
  <script>
290
+ // Save resource function
291
+ function saveResource() {
292
+ const type = document.querySelector('select').value;
293
+ const title = document.querySelector('input[type="text"]').value;
294
+ const url = document.querySelector('input[type="text"]:nth-of-type(2)').value;
295
+ const tags = document.querySelector('input[placeholder="Comma separated"]').value;
296
+
297
+ if(title && url) {
298
+ // In a real app, this would save to a database
299
+ console.log('Saving resource:', {type, title, url, tags});
300
+ alert('Resource saved!');
301
+
302
+ // Analyze patterns (mock implementation)
303
+ analyzeUserPatterns(tags);
304
+ } else {
305
+ alert('Please fill in all fields');
306
+ }
307
+ }
308
+
309
+ // Mock pattern analysis
310
+ function analyzeUserPatterns(tags) {
311
+ console.log('Analyzing user patterns based on:', tags);
312
+ // This would connect to AI service in production
313
+ }
314
+
315
  // Initialize Vanta.js background
316
+ VANTA.CELLS({
317
  el: "#vanta-bg",
318
  mouseControls: true,
319
  touchControls: true,
scheduling.html CHANGED
@@ -6,32 +6,30 @@
6
  <title>Smart Scheduling | CircaSnooze</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
  <style>
12
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
13
  body {
14
  font-family: 'Space Grotesk', sans-serif;
15
  }
16
  .gradient-bg {
17
- background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
18
  }
19
  .schedule-card {
20
  backdrop-filter: blur(10px);
21
  background-color: rgba(255, 255, 255, 0.08);
22
  }
23
- .time-block:hover {
24
- transform: scale(1.02);
25
- }
26
- .time-slot {
27
  transition: all 0.2s ease;
28
  }
29
- .time-slot:hover {
30
- background-color: rgba(118, 75, 162, 0.4);
 
 
 
31
  }
32
  </style>
33
  </head>
34
- <body class="min-h-screen text-white gradient-bg" id="vanta-bg">
35
  <div class="container mx-auto px-4 py-8">
36
  <header class="flex justify-between items-center mb-12">
37
  <a href="index.html" class="flex items-center space-x-2">
@@ -39,13 +37,13 @@
39
  <span class="text-xl font-bold">CircaSnooze</span>
40
  </a>
41
  <nav class="hidden md:flex space-x-6">
42
- <a href="index.html" class="hover:text-[#26d0ce] transition">Home</a>
43
- <a href="sleep-calculator.html" class="hover:text-[#26d0ce] transition">Sleep</a>
44
- <a href="#" class="text-[#26d0ce] font-medium">Schedule</a>
45
- <a href="tasks.html" class="hover:text-[#26d0ce] transition">Tasks</a>
46
- <a href="research.html" class="hover:text-[#26d0ce] transition">Research</a>
47
  </nav>
48
- <button class="bg-[#26d0ce] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#1fbdb6] transition">
49
  My Account
50
  </button>
51
  </header>
@@ -55,219 +53,312 @@
55
  <div class="lg:col-span-2">
56
  <div class="schedule-card rounded-3xl p-8 mb-8">
57
  <div class="flex justify-between items-center mb-8">
58
- <h1 class="text-3xl font-bold">Smart Scheduler</h1>
59
- <button class="bg-[#26d0ce] px-4 py-2 rounded-lg font-medium">Add Event</button>
60
  </div>
61
 
62
- <div class="grid grid-cols-7 gap-1 mb-6 text-center">
63
- <div class="p-2 font-medium">Sun</div>
64
- <div class="p-2 font-medium">Mon</div>
65
- <div class="p-2 font-medium">Tue</div>
66
- <div class="p-2 font-medium">Wed</div>
67
- <div class="p-2 font-medium">Thu</div>
68
- <div class="p-2 font-medium">Fri</div>
69
- <div class="p-2 font-medium">Sat</div>
70
- </div>
71
-
72
- <div class="space-y-4">
73
- <div class="time-block schedule-card rounded-xl p-4">
74
- <div class="flex items-center justify-between mb-3">
75
- <h3 class="font-bold">Today's Schedule</h3>
76
- <span class="text-sm opacity-80">June 12, 2023</span>
77
- </div>
78
-
79
- <div class="space-y-2">
80
- <div class="time-slot flex items-center justify-between p-2 rounded-lg bg-white/10">
81
- <div class="flex items-center">
82
- <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div>
83
- <span>6:30 AM</span>
84
- <span class="ml-4 font-medium">Morning Routine</span>
85
- </div>
86
- <i data-feather="chevron-right" class="w-4 h-4"></i>
87
- </div>
88
-
89
- <div class="time-slot flex items-center justify-between p-2 rounded-lg bg-white/10">
90
- <div class="flex items-center">
91
- <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div>
92
- <span>9:00 AM</span>
93
- <span class="ml-4 font-medium">Focus Work Block</span>
94
- </div>
95
- <i data-feather="chevron-right" class="w-4 h-4"></i>
96
- </div>
97
-
98
- <div class="time-slot flex items-center justify-between p-2 rounded-lg bg-white/10">
99
- <div class="flex items-center">
100
- <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
101
- <span>12:30 PM</span>
102
- <span class="ml-4 font-medium">Lunch & Walk</span>
103
- </div>
104
- <i data-feather="chevron-right" class="w-4 h-4"></i>
105
- </div>
106
-
107
- <div class="time-slot flex items-center justify-between p-2 rounded-lg bg-white/10">
108
- <div class="flex items-center">
109
- <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
110
- <span>3:00 PM</span>
111
- <span class="ml-4 font-medium">Creative Time</span>
112
- </div>
113
- <i data-feather="chevron-right" class="w-4 h-4"></i>
114
- </div>
115
-
116
- <div class="time-slot flex items-center justify-between p-2 rounded-lg bg-white/10">
117
- <div class="flex items-center">
118
- <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div>
119
- <span>6:30 PM</span>
120
- <span class="ml-4 font-medium">Dinner</span>
121
- </div>
122
- <i data-feather="chevron-right" class="w-4 h-4"></i>
123
- </div>
124
-
125
- <div class="time-slot flex items-center justify-between p-2 rounded-lg bg-white/10">
126
- <div class="flex items-center">
127
- <div class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></div>
128
- <span>9:00 PM</span>
129
- <span class="ml-4 font-medium">Wind Down</span>
130
- </div>
131
- <i data-feather="chevron-right" class="w-4 h-4"></i>
132
- </div>
133
- </div>
134
- </div>
135
-
136
- <div class="schedule-card rounded-xl p-4">
137
- <h3 class="font-bold mb-3">Add New Event</h3>
138
- <div class="space-y-4">
139
- <div>
140
- <label class="block mb-1 text-sm">Event Name</label>
141
- <input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
142
- </div>
143
- <div class="grid grid-cols-2 gap-4">
144
- <div>
145
- <label class="block mb-1 text-sm">Start Time</label>
146
- <input type="time" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
147
- </div>
148
- <div>
149
- <label class="block mb-1 text-sm">End Time</label>
150
- <input type="time" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
151
- </div>
152
- </div>
153
- <div>
154
- <label class="block mb-1 text-sm">Category</label>
155
- <select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
156
- <option>Work</option>
157
- <option>Personal</option>
158
- <option>Health</option>
159
- <option>Learning</option>
160
- <option>Social</option>
161
- </select>
162
- </div>
163
- <button class="w-full bg-[#26d0ce] py-2 rounded-lg font-bold hover:bg-[#1fbdb6] transition">
164
- Schedule Event
165
  </button>
166
  </div>
167
  </div>
168
- </div>
169
- </div>
170
- </div>
171
-
172
- <div>
173
- <div class="schedule-card rounded-3xl p-8 mb-8">
174
- <h2 class="text-2xl font-bold mb-6">Energy Levels</h2>
175
- <div class="h-64 bg-white/5 rounded-xl mb-6">
176
- <!-- Chart would go here -->
177
- <div class="flex items-center justify-center h-full">
178
- <div class="text-center">
179
- <i data-feather="activity" class="w-12 h-12 mx-auto mb-2"></i>
180
- <p class="opacity-80">Your circadian energy chart</p>
181
- </div>
182
- </div>
183
- </div>
184
- <div class="space-y-4">
185
- <div class="flex items-center justify-between">
186
- <span>Morning Focus</span>
187
- <span class="font-medium">High</span>
188
  </div>
189
- <div class="flex items-center justify-between">
190
- <span>Afternoon Slump</span>
191
- <span class="font-medium">2:30 PM</span>
192
  </div>
193
- <div class="flex items-center justify-between">
194
- <span>Evening Energy</span>
195
- <span class="font-medium">Moderate</span>
 
 
 
 
196
  </div>
197
  </div>
198
  </div>
199
-
200
- <div class="schedule-card rounded-3xl p-8">
201
- <h2 class="text-2xl font-bold mb-6">Upcoming</h2>
202
- <div class="space-y-4">
203
- <div class="flex items-start">
204
- <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3 mt-1">
205
- <i data-feather="calendar" class="w-5 h-5"></i>
206
- </div>
207
- <div>
208
- <div class="font-medium">Team Meeting</div>
209
- <div class="text-sm opacity-80">Tomorrow, 10:00 AM</div>
210
- </div>
211
- </div>
212
- <div class="flex items-start">
213
- <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3 mt-1">
214
- <i data-feather="sun" class="w-5 h-5"></i>
215
- </div>
216
- <div>
217
- <div class="font-medium">Sunrise Alarm</div>
218
- <div class="text-sm opacity-80">Daily, 6:30 AM</div>
219
- </div>
220
  </div>
221
- <div class="flex items-start">
222
- <div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center mr-3 mt-1">
223
- <i data-feather="dumbbell" class="w-5 h-5"></i>
224
- </div>
225
- <div>
226
- <div class="font-medium">Gym Session</div>
227
- <div class="text-sm opacity-80">Wed, 5:30 PM</div>
228
- </div>
229
  </div>
230
- <div class="flex items-start">
231
- <div class="w-10 h-10 rounded-lg bg-yellow-600 flex items-center justify-center mr-3 mt-1">
232
- <i data-feather="book" class="w-5 h-5"></i>
233
- </div>
234
- <div>
235
- <div class="font-medium">Reading Time</div>
236
- <div class="text-sm opacity-80">Thu, 8:00 PM</div>
237
- </div>
238
  </div>
 
239
  </div>
240
  </div>
241
  </div>
242
  </div>
243
  </main>
244
 
245
- <footer class="border-t border-white/20 mt-12 pt-8 pb-12">
246
- <div class="text-center opacity-70 text-sm">
247
- © 2023 CircaSnooze. All rights reserved.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
248
  </div>
249
- </footer>
250
  </div>
251
 
252
  <script>
253
- // Initialize Vanta.js background
254
- VANTA.NET({
255
- el: "#vanta-bg",
256
- mouseControls: true,
257
- touchControls: true,
258
- gyroControls: false,
259
- minHeight: 200.00,
260
- minWidth: 200.00,
261
- scale: 1.00,
262
- color: 0x26d0ce,
263
- backgroundColor: 0x1a2980,
264
- points: 12.00,
265
- maxDistance: 22.00,
266
- spacing: 18.00
267
- });
268
-
269
  // Initialize feather icons
270
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
271
  </script>
272
  </body>
273
  </html>
 
6
  <title>Smart Scheduling | CircaSnooze</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
 
 
9
  <style>
10
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
11
  body {
12
  font-family: 'Space Grotesk', sans-serif;
13
  }
14
  .gradient-bg {
15
+ background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
16
  }
17
  .schedule-card {
18
  backdrop-filter: blur(10px);
19
  background-color: rgba(255, 255, 255, 0.08);
20
  }
21
+ .calendar-day {
 
 
 
22
  transition: all 0.2s ease;
23
  }
24
+ .calendar-day:hover {
25
+ transform: scale(1.05);
26
+ }
27
+ .event-item:hover {
28
+ transform: translateY(-2px);
29
  }
30
  </style>
31
  </head>
32
+ <body class="min-h-screen text-white gradient-bg">
33
  <div class="container mx-auto px-4 py-8">
34
  <header class="flex justify-between items-center mb-12">
35
  <a href="index.html" class="flex items-center space-x-2">
 
37
  <span class="text-xl font-bold">CircaSnooze</span>
38
  </a>
39
  <nav class="hidden md:flex space-x-6">
40
+ <a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
41
+ <a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
42
+ <a href="#" class="text-[#FFA07A] font-medium">Schedule</a>
43
+ <a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
44
+ <a href="research.html" class="hover:text-[#FFA07A] transition">Research</a>
45
  </nav>
46
+ <button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
47
  My Account
48
  </button>
49
  </header>
 
53
  <div class="lg:col-span-2">
54
  <div class="schedule-card rounded-3xl p-8 mb-8">
55
  <div class="flex justify-between items-center mb-8">
56
+ <h1 class="text-3xl font-bold">Smart Scheduling</h1>
57
+ <button onclick="openAddEventModal()" class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Event</button>
58
  </div>
59
 
60
+ <!-- Calendar View -->
61
+ <div class="schedule-card rounded-xl p-4 mb-8">
62
+ <div class="flex justify-between items-center mb-4">
63
+ <h3 class="font-medium">December 2023</h3>
64
+ <div class="flex space-x-2">
65
+ <button class="p-1 rounded-full hover:bg-white/10">
66
+ <i data-feather="chevron-left" class="w-5 h-5"></i>
67
+ </button>
68
+ <button class="p-1 rounded-full hover:bg-white/10">
69
+ <i data-feather="chevron-right" class="w-5 h-5"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </button>
71
  </div>
72
  </div>
73
+ <div class="grid grid-cols-7 gap-1 text-center text-sm mb-2">
74
+ <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  </div>
76
+ <div class="grid grid-cols-7 gap-1">
77
+ <!-- Calendar days will be generated here -->
78
+ <div id="calendarDays"></div>
79
  </div>
80
+ </div>
81
+
82
+ <!-- Events List -->
83
+ <div>
84
+ <h3 class="font-medium mb-4">Today's Events</h3>
85
+ <div id="eventsList" class="space-y-3">
86
+ <!-- Events will be populated here -->
87
  </div>
88
  </div>
89
  </div>
90
+ </div>
91
+
92
+ <div class="schedule-card rounded-3xl p-8">
93
+ <h2 class="text-2xl font-bold mb-6">Your Rhythm</h2>
94
+ <div class="h-64 bg-white/10 rounded-xl mb-6">
95
+ <!-- Would display circadian rhythm visualization -->
96
+ </div>
97
+ <h3 class="font-medium mb-4">Optimal Times</h3>
98
+ <div class="space-y-4">
99
+ <div class="flex items-center justify-between p-3 bg-white/10 rounded-lg">
100
+ <div class="flex items-center">
101
+ <i data-feather="zap" class="w-4 h-4 mr-2"></i>
102
+ <span>Focus Time</span>
 
 
 
 
 
 
 
 
103
  </div>
104
+ <span>9:00 AM - 11:30 AM</span>
105
+ </div>
106
+ <div class="flex items-center justify-between p-3 bg-white/10 rounded-lg">
107
+ <div class="flex items-center">
108
+ <i data-feather="clock" class="w-4 h-4 mr-2"></i>
109
+ <span>Creative Work</span>
 
 
110
  </div>
111
+ <span>2:00 PM - 4:00 PM</span>
112
+ </div>
113
+ <div class="flex items-center justify-between p-3 bg-white/10 rounded-lg">
114
+ <div class="flex items-center">
115
+ <i data-feather="moon" class="w-4 h-4 mr-2"></i>
116
+ <span>Wind Down</span>
 
 
117
  </div>
118
+ <span>9:30 PM</span>
119
  </div>
120
  </div>
121
  </div>
122
  </div>
123
  </main>
124
 
125
+ <!-- Add Event Modal -->
126
+ <div id="addEventModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
127
+ <div class="schedule-card rounded-2xl p-6 w-full max-w-md">
128
+ <div class="flex justify-between items-center mb-6">
129
+ <h3 class="text-xl font-bold">Add New Event</h3>
130
+ <button onclick="closeAddEventModal()" class="text-2xl">&times;</button>
131
+ </div>
132
+ <div class="space-y-4">
133
+ <div>
134
+ <label class="block mb-1">Event Name</label>
135
+ <input type="text" id="eventName" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
136
+ </div>
137
+ <div>
138
+ <label class="block mb-1">Date & Time</label>
139
+ <input type="datetime-local" id="eventDateTime" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
140
+ </div>
141
+ <div>
142
+ <label class="block mb-1">Duration (minutes)</label>
143
+ <input type="number" id="eventDuration" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2" value="30">
144
+ </div>
145
+ <div>
146
+ <label class="block mb-1">Category</label>
147
+ <select id="eventCategory" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
148
+ <option value="work">Work</option>
149
+ <option value="personal">Personal</option>
150
+ <option value="health">Health</option>
151
+ <option value="social">Social</option>
152
+ </select>
153
+ </div>
154
+ <div>
155
+ <label class="flex items-center">
156
+ <input type="checkbox" id="eventReminder" class="mr-2" checked>
157
+ <span>Set Reminder (15 mins before)</span>
158
+ </label>
159
+ </div>
160
+ <button onclick="addEvent()" class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
161
+ Save Event
162
+ </button>
163
+ </div>
164
  </div>
165
+ </div>
166
  </div>
167
 
168
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  // Initialize feather icons
170
  feather.replace();
171
+
172
+ // Event management functions
173
+ let events = [];
174
+
175
+ function openAddEventModal() {
176
+ document.getElementById('addEventModal').classList.remove('hidden');
177
+ // Set default time to next hour
178
+ const now = new Date();
179
+ now.setHours(now.getHours() + 1, 0, 0, 0);
180
+ document.getElementById('eventDateTime').value = now.toISOString().slice(0, 16);
181
+ }
182
+
183
+ function closeAddEventModal() {
184
+ document.getElementById('addEventModal').classList.add('hidden');
185
+ }
186
+
187
+ function addEvent() {
188
+ const name = document.getElementById('eventName').value;
189
+ const dateTime = document.getElementById('eventDateTime').value;
190
+ const duration = parseInt(document.getElementById('eventDuration').value);
191
+ const category = document.getElementById('eventCategory').value;
192
+ const hasReminder = document.getElementById('eventReminder').checked;
193
+
194
+ if (name && dateTime) {
195
+ const newEvent = {
196
+ id: Date.now(),
197
+ name,
198
+ dateTime,
199
+ duration,
200
+ category,
201
+ hasReminder
202
+ };
203
+
204
+ events.push(newEvent);
205
+ renderCalendar();
206
+ renderEvents();
207
+ closeAddEventModal();
208
+
209
+ // Clear form
210
+ document.getElementById('eventName').value = '';
211
+ document.getElementById('eventDateTime').value = '';
212
+ document.getElementById('eventDuration').value = '30';
213
+ document.getElementById('eventCategory').value = 'work';
214
+ document.getElementById('eventReminder').checked = true;
215
+
216
+ // Set reminder if enabled
217
+ if (hasReminder) {
218
+ setEventReminder(newEvent);
219
+ }
220
+ } else {
221
+ alert('Please fill in all required fields');
222
+ }
223
+ }
224
+
225
+ function setEventReminder(event) {
226
+ console.log(`Reminder set for event: ${event.name} at ${event.dateTime}`);
227
+ // In production, this would use browser notifications or connect to a reminder service
228
+ alert(`Reminder set for "${event.name}"`);
229
+ }
230
+
231
+ function renderCalendar() {
232
+ const calendarDays = document.getElementById('calendarDays');
233
+ calendarDays.innerHTML = '';
234
+
235
+ // Generate calendar days (mock implementation)
236
+ const daysInMonth = 31;
237
+ const startDay = 5; // December 2023 starts on Friday
238
+
239
+ // Empty cells for days before the 1st
240
+ for (let i = 0; i < startDay; i++) {
241
+ const emptyDay = document.createElement('div');
242
+ emptyDay.className = 'h-12';
243
+ calendarDays.appendChild(emptyDay);
244
+ }
245
+
246
+ // Days of the month
247
+ for (let day = 1; day <= daysInMonth; day++) {
248
+ const dayElement = document.createElement('div');
249
+ dayElement.className = 'calendar-day h-12 flex items-center justify-center rounded-lg hover:bg-white/10 cursor-pointer';
250
+ dayElement.textContent = day;
251
+
252
+ // Highlight today
253
+ if (day === new Date().getDate()) {
254
+ dayElement.className += ' bg-[#FFA07A] text-white';
255
+ }
256
+
257
+ // Show event indicators
258
+ const dayEvents = events.filter(event => {
259
+ const eventDate = new Date(event.dateTime);
260
+ return eventDate.getDate() === day;
261
+ });
262
+
263
+ if (dayEvents.length > 0) {
264
+ const eventIndicator = document.createElement('div');
265
+ eventIndicator.className = 'absolute bottom-1 w-1 h-1 rounded-full bg-[#FFA07A]';
266
+ dayElement.appendChild(eventIndicator);
267
+ }
268
+
269
+ calendarDays.appendChild(dayElement);
270
+ }
271
+ }
272
+
273
+ function renderEvents() {
274
+ const eventsList = document.getElementById('eventsList');
275
+ eventsList.innerHTML = '';
276
+
277
+ // Filter today's events
278
+ const today = new Date().toDateString();
279
+ const todaysEvents = events.filter(event => {
280
+ return new Date(event.dateTime).toDateString() === today;
281
+ });
282
+
283
+ if (todaysEvents.length === 0) {
284
+ eventsList.innerHTML = '<p class="opacity-70 text-center py-4">No events scheduled for today</p>';
285
+ return;
286
+ }
287
+
288
+ todaysEvents.forEach(event => {
289
+ const eventItem = document.createElement('div');
290
+ eventItem.className = 'event-item schedule-card rounded-lg p-4 flex items-center justify-between transition';
291
+
292
+ const eventDate = new Date(event.dateTime);
293
+ const endTime = new Date(eventDate.getTime() + event.duration * 60000);
294
+
295
+ eventItem.innerHTML = `
296
+ <div class="flex items-center">
297
+ <div class="w-10 h-10 rounded-lg ${getCategoryColor(event.category)} flex items-center justify-center mr-3">
298
+ <i data-feather="${getCategoryIcon(event.category)}" class="w-5 h-5"></i>
299
+ </div>
300
+ <div>
301
+ <div class="font-medium">${event.name}</div>
302
+ <div class="text-xs opacity-80">
303
+ ${formatTime(eventDate)} - ${formatTime(endTime)}
304
+ </div>
305
+ </div>
306
+ </div>
307
+ ${event.hasReminder ? '<i data-feather="bell" class="w-4 h-4 text-yellow-400"></i>' : ''}
308
+ `;
309
+
310
+ eventsList.appendChild(eventItem);
311
+ });
312
+
313
+ feather.replace();
314
+ }
315
+
316
+ function getCategoryColor(category) {
317
+ switch(category) {
318
+ case 'work': return 'bg-blue-600';
319
+ case 'personal': return 'bg-purple-600';
320
+ case 'health': return 'bg-green-600';
321
+ case 'social': return 'bg-pink-600';
322
+ default: return 'bg-gray-600';
323
+ }
324
+ }
325
+
326
+ function getCategoryIcon(category) {
327
+ switch(category) {
328
+ case 'work': return 'briefcase';
329
+ case 'personal': return 'user';
330
+ case 'health': return 'heart';
331
+ case 'social': return 'users';
332
+ default: return 'calendar';
333
+ }
334
+ }
335
+
336
+ function formatTime(date) {
337
+ return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
338
+ }
339
+
340
+ // Initialize with some sample events
341
+ events = [
342
+ {
343
+ id: 1,
344
+ name: 'Team Meeting',
345
+ dateTime: '2023-12-10T10:00',
346
+ duration: 60,
347
+ category: 'work',
348
+ hasReminder: true
349
+ },
350
+ {
351
+ id: 2,
352
+ name: 'Yoga Session',
353
+ dateTime: '2023-12-10T18:00',
354
+ duration: 45,
355
+ category: 'health',
356
+ hasReminder: false
357
+ }
358
+ ];
359
+
360
+ renderCalendar();
361
+ renderEvents();
362
  </script>
363
  </body>
364
  </html>
tasks.html CHANGED
@@ -6,38 +6,25 @@
6
  <title>Task Genius | CircaSnooze</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
11
  <style>
12
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
13
  body {
14
  font-family: 'Space Grotesk', sans-serif;
15
  }
16
  .gradient-bg {
17
- background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
18
  }
19
  .task-card {
20
  backdrop-filter: blur(10px);
21
  background-color: rgba(255, 255, 255, 0.08);
22
  }
23
- .task-item {
24
- transition: all 0.2s ease;
25
- }
26
  .task-item:hover {
27
  transform: translateY(-2px);
28
- }
29
- .priority-high {
30
- border-left: 4px solid #ef4444;
31
- }
32
- .priority-medium {
33
- border-left: 4px solid #f59e0b;
34
- }
35
- .priority-low {
36
- border-left: 4px solid #10b981;
37
  }
38
  </style>
39
  </head>
40
- <body class="min-h-screen text-white gradient-bg" id="vanta-bg">
41
  <div class="container mx-auto px-4 py-8">
42
  <header class="flex justify-between items-center mb-12">
43
  <a href="index.html" class="flex items-center space-x-2">
@@ -45,13 +32,13 @@
45
  <span class="text-xl font-bold">CircaSnooze</span>
46
  </a>
47
  <nav class="hidden md:flex space-x-6">
48
- <a href="index.html" class="hover:text-[#8E54E9] transition">Home</a>
49
- <a href="sleep-calculator.html" class="hover:text-[#8E54E9] transition">Sleep</a>
50
- <a href="scheduling.html" class="hover:text-[#8E54E9] transition">Schedule</a>
51
- <a href="#" class="text-[#8E54E9] font-medium">Tasks</a>
52
- <a href="research.html" class="hover:text-[#8E54E9] transition">Research</a>
53
  </nav>
54
- <button class="bg-[#8E54E9] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#7d3fd8] transition">
55
  My Account
56
  </button>
57
  </header>
@@ -62,255 +49,206 @@
62
  <div class="task-card rounded-3xl p-8 mb-8">
63
  <div class="flex justify-between items-center mb-8">
64
  <h1 class="text-3xl font-bold">Task Genius</h1>
65
- <button class="bg-[#8E54E9] px-4 py-2 rounded-lg font-medium">Add Task</button>
66
  </div>
67
-
68
- <div class="flex space-x-4 mb-6 overflow-x-auto pb-2">
69
- <button class="whitespace-nowrap px-4 py-2 rounded-full bg-[#8E54E9] font-medium">All Tasks</button>
70
- <button class="whitespace-nowrap px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 transition">Today</button>
71
- <button class="whitespace-nowrap px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 transition">Upcoming</button>
72
- <button class="whitespace-nowrap px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 transition">Completed</button>
73
- <button class="whitespace-nowrap px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 transition">Work</button>
74
- <button class="whitespace-nowrap px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 transition">Personal</button>
75
- </div>
76
-
77
  <div class="space-y-3">
78
- <div class="task-item task-card rounded-lg p-4 priority-high">
79
- <div class="flex items-center justify-between">
80
- <div class="flex items-center">
81
- <input type="checkbox" class="mr-3 h-5 w-5 rounded border-white/30 bg-white/10">
82
- <div>
83
- <div class="font-medium">Finish project proposal</div>
84
- <div class="text-sm opacity-80">Due today, 5:00 PM</div>
85
- </div>
86
- </div>
87
- <div class="flex space-x-2">
88
- <button class="p-1 rounded-full hover:bg-white/10">
89
- <i data-feather="edit-2" class="w-4 h-4"></i>
90
- </button>
91
- <button class="p-1 rounded-full hover:bg-white/10">
92
- <i data-feather="trash-2" class="w-4 h-4"></i>
93
- </button>
94
- </div>
95
- </div>
96
- </div>
97
-
98
- <div class="task-item task-card rounded-lg p-4 priority-medium">
99
- <div class="flex items-center justify-between">
100
- <div class="flex items-center">
101
- <input type="checkbox" class="mr-3 h-5 w-5 rounded border-white/30 bg-white/10">
102
- <div>
103
- <div class="font-medium">Schedule dentist appointment</div>
104
- <div class="text-sm opacity-80">Due tomorrow</div>
105
- </div>
106
- </div>
107
- <div class="flex space-x-2">
108
- <button class="p-1 rounded-full hover:bg-white/10">
109
- <i data-feather="edit-2" class="w-4 h-4"></i>
110
- </button>
111
- <button class="p-1 rounded-full hover:bg-white/10">
112
- <i data-feather="trash-2" class="w-4 h-4"></i>
113
- </button>
114
- </div>
115
- </div>
116
- </div>
117
-
118
- <div class="task-item task-card rounded-lg p-4 priority-low">
119
- <div class="flex items-center justify-between">
120
- <div class="flex items-center">
121
- <input type="checkbox" class="mr-3 h-5 w-5 rounded border-white/30 bg-white/10">
122
- <div>
123
- <div class="font-medium">Research new productivity tools</div>
124
- <div class="text-sm opacity-80">Due in 3 days</div>
125
- </div>
126
- </div>
127
- <div class="flex space-x-2">
128
- <button class="p-1 rounded-full hover:bg-white/10">
129
- <i data-feather="edit-2" class="w-4 h-4"></i>
130
- </button>
131
- <button class="p-1 rounded-full hover:bg-white/10">
132
- <i data-feather="trash-2" class="w-4 h-4"></i>
133
- </button>
134
- </div>
135
- </div>
136
- </div>
137
-
138
- <div class="task-item task-card rounded-lg p-4">
139
- <div class="flex items-center justify-between">
140
- <div class="flex items-center">
141
- <input type="checkbox" class="mr-3 h-5 w-5 rounded border-white/30 bg-white/10" checked>
142
- <div>
143
- <div class="font-medium opacity-70 line-through">Buy groceries</div>
144
- <div class="text-sm opacity-50">Completed</div>
145
- </div>
146
- </div>
147
- <div class="flex space-x-2">
148
- <button class="p-1 rounded-full hover:bg-white/10">
149
- <i data-feather="edit-2" class="w-4 h-4"></i>
150
- </button>
151
- <button class="p-1 rounded-full hover:bg-white/10">
152
- <i data-feather="trash-2" class="w-4 h-4"></i>
153
- </button>
154
- </div>
155
- </div>
156
- </div>
157
- </div>
158
- </div>
159
-
160
- <div class="task-card rounded-3xl p-8">
161
- <h2 class="text-2xl font-bold mb-6">Add New Task</h2>
162
- <div class="space-y-4">
163
- <div>
164
- <label class="block mb-1 text-sm">Task Name</label>
165
- <input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
166
- </div>
167
- <div>
168
- <label class="block mb-1 text-sm">Description</label>
169
- <textarea class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 h-24"></textarea>
170
- </div>
171
- <div class="grid grid-cols-2 gap-4">
172
- <div>
173
- <label class="block mb-1 text-sm">Due Date</label>
174
- <input type="date" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
175
- </div>
176
- <div>
177
- <label class="block mb-1 text-sm">Priority</label>
178
- <select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
179
- <option>Low</option>
180
- <option selected>Medium</option>
181
- <option>High</option>
182
- </select>
183
- </div>
184
- </div>
185
- <div>
186
- <label class="block mb-1 text-sm">Category</label>
187
- <select class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
188
- <option>Work</option>
189
- <option>Personal</option>
190
- <option>Health</option>
191
- <option>Learning</option>
192
- <option>Other</option>
193
- </select>
194
- </div>
195
- <button class="w-full bg-[#8E54E9] py-3 rounded-lg font-bold hover:bg-[#7d3fd8] transition">
196
- Add Task
197
- </button>
198
  </div>
199
  </div>
200
  </div>
201
-
202
- <div>
203
- <div class="task-card rounded-3xl p-8 mb-8">
204
- <h2 class="text-2xl font-bold mb-6">Task Stats</h2>
205
- <div class="flex items-center justify-between mb-6">
206
- <div class="text-center">
207
- <div class="text-3xl font-bold">12</div>
208
- <div class="text-sm opacity-80">Total Tasks</div>
209
- </div>
210
- <div class="text-center">
211
- <div class="text-3xl font-bold">3</div>
212
- <div class="text-sm opacity-80">Completed</div>
213
- </div>
214
- <div class="text-center">
215
- <div class="text-3xl font-bold">2</div>
216
- <div class="text-sm opacity-80">Overdue</div>
217
- </div>
218
- </div>
219
- <div class="h-48 bg-white/5 rounded-xl mb-6">
220
- <!-- Chart would go here -->
221
- <div class="flex items-center justify-center h-full">
222
- <div class="text-center">
223
- <i data-feather="pie-chart" class="w-12 h-12 mx-auto mb-2"></i>
224
- <p class="opacity-80">Your productivity chart</p>
225
- </div>
226
- </div>
227
- </div>
228
- <div class="space-y-4">
229
- <div class="flex items-center justify-between">
230
- <span>Highest Productivity</span>
231
- <span class="font-medium">9:00 AM</span>
232
- </div>
233
- <div class="flex items-center justify-between">
234
- <span>Task Completion Rate</span>
235
- <span class="font-medium">75%</span>
236
- </div>
237
- </div>
238
- </div>
239
-
240
- <div class="task-card rounded-3xl p-8">
241
- <h2 class="text-2xl font-bold mb-6">Suggested Tasks</h2>
242
- <div class="space-y-4">
243
- <div class="flex items-start">
244
- <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3 mt-1">
245
- <i data-feather="refresh-cw" class="w-5 h-5"></i>
246
- </div>
247
- <div>
248
- <div class="font-medium">Review weekly goals</div>
249
- <div class="text-sm opacity-80">Every Sunday evening</div>
250
- </div>
251
- </div>
252
- <div class="flex items-start">
253
- <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3 mt-1">
254
- <i data-feather="book" class="w-5 h-5"></i>
255
- </div>
256
- <div>
257
- <div class="font-medium">Read 30 minutes</div>
258
- <div class="text-sm opacity-80">Daily before bed</div>
259
- </div>
260
- </div>
261
- <div class="flex items-start">
262
- <div class="w-10 h-10 rounded-lg bg-green-600 flex items-center justify-center mr-3 mt-1">
263
- <i data-feather="dumbbell" class="w-5 h-5"></i>
264
- </div>
265
- <div>
266
- <div class="font-medium">Exercise routine</div>
267
- <div class="text-sm opacity-80">3x per week</div>
268
- </div>
269
- </div>
270
- <div class="flex items-start">
271
- <div class="w-10 h-10 rounded-lg bg-yellow-600 flex items-center justify-center mr-3 mt-1">
272
- <i data-feather="coffee" class="w-5 h-5"></i>
273
- </div>
274
- <div>
275
- <div class="font-medium">Plan next day</div>
276
- <div class="text-sm opacity-80">Each evening</div>
277
- </div>
278
- </div>
279
- </div>
280
  </div>
281
  </div>
282
  </div>
283
  </main>
284
 
285
- <footer class="border-t border-white/20 mt-12 pt-8 pb-12">
286
- <div class="text-center opacity-70 text-sm">
287
- © 2023 CircaSnooze. All rights reserved.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  </div>
289
- </footer>
290
  </div>
291
 
292
  <script>
293
- // Initialize Vanta.js background
294
- VANTA.BIRDS({
295
- el: "#vanta-bg",
296
- mouseControls: true,
297
- touchControls: true,
298
- gyroControls: false,
299
- minHeight: 200.00,
300
- minWidth: 200.00,
301
- scale: 1.00,
302
- color1: 0x8e54e9,
303
- color2: 0x4776e6,
304
- birdSize: 1.50,
305
- wingSpan: 20.00,
306
- speedLimit: 5.00,
307
- separation: 70.00,
308
- alignment: 40.00,
309
- cohesion: 45.00
310
- });
311
-
312
  // Initialize feather icons
313
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
314
  </script>
315
  </body>
316
  </html>
 
6
  <title>Task Genius | CircaSnooze</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
 
 
9
  <style>
10
  @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
11
  body {
12
  font-family: 'Space Grotesk', sans-serif;
13
  }
14
  .gradient-bg {
15
+ background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 100%);
16
  }
17
  .task-card {
18
  backdrop-filter: blur(10px);
19
  background-color: rgba(255, 255, 255, 0.08);
20
  }
 
 
 
21
  .task-item:hover {
22
  transform: translateY(-2px);
23
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 
 
 
 
 
 
 
 
24
  }
25
  </style>
26
  </head>
27
+ <body class="min-h-screen text-white gradient-bg">
28
  <div class="container mx-auto px-4 py-8">
29
  <header class="flex justify-between items-center mb-12">
30
  <a href="index.html" class="flex items-center space-x-2">
 
32
  <span class="text-xl font-bold">CircaSnooze</span>
33
  </a>
34
  <nav class="hidden md:flex space-x-6">
35
+ <a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
36
+ <a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
37
+ <a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
38
+ <a href="#" class="text-[#FFA07A] font-medium">Tasks</a>
39
+ <a href="research.html" class="hover:text-[#FFA07A] transition">Research</a>
40
  </nav>
41
+ <button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
42
  My Account
43
  </button>
44
  </header>
 
49
  <div class="task-card rounded-3xl p-8 mb-8">
50
  <div class="flex justify-between items-center mb-8">
51
  <h1 class="text-3xl font-bold">Task Genius</h1>
52
+ <button onclick="openAddTaskModal()" class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Task</button>
53
  </div>
54
+
 
 
 
 
 
 
 
 
 
55
  <div class="space-y-3">
56
+ <!-- Task list will be populated here -->
57
+ <div id="taskList"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  </div>
59
  </div>
60
  </div>
61
+
62
+ <div class="task-card rounded-3xl p-8">
63
+ <h2 class="text-2xl font-bold mb-6">Upcoming Tasks</h2>
64
+ <div id="upcomingTasks" class="space-y-4">
65
+ <!-- Upcoming tasks will be shown here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
  </div>
68
  </div>
69
  </main>
70
 
71
+ <!-- Add Task Modal -->
72
+ <div id="addTaskModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
73
+ <div class="task-card rounded-2xl p-6 w-full max-w-md">
74
+ <div class="flex justify-between items-center mb-6">
75
+ <h3 class="text-xl font-bold">Add New Task</h3>
76
+ <button onclick="closeAddTaskModal()" class="text-2xl">&times;</button>
77
+ </div>
78
+ <div class="space-y-4">
79
+ <div>
80
+ <label class="block mb-1">Task Name</label>
81
+ <input type="text" id="taskName" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
82
+ </div>
83
+ <div>
84
+ <label class="block mb-1">Due Date</label>
85
+ <input type="datetime-local" id="taskDueDate" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
86
+ </div>
87
+ <div>
88
+ <label class="block mb-1">Priority</label>
89
+ <select id="taskPriority" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2">
90
+ <option value="low">Low</option>
91
+ <option value="medium">Medium</option>
92
+ <option value="high">High</option>
93
+ </select>
94
+ </div>
95
+ <div>
96
+ <label class="flex items-center">
97
+ <input type="checkbox" id="taskReminder" class="mr-2">
98
+ <span>Set Reminder</span>
99
+ </label>
100
+ </div>
101
+ <button onclick="addTask()" class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
102
+ Save Task
103
+ </button>
104
+ </div>
105
  </div>
106
+ </div>
107
  </div>
108
 
109
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  // Initialize feather icons
111
  feather.replace();
112
+
113
+ // Task management functions
114
+ let tasks = [];
115
+
116
+ function openAddTaskModal() {
117
+ document.getElementById('addTaskModal').classList.remove('hidden');
118
+ }
119
+
120
+ function closeAddTaskModal() {
121
+ document.getElementById('addTaskModal').classList.add('hidden');
122
+ }
123
+
124
+ function addTask() {
125
+ const name = document.getElementById('taskName').value;
126
+ const dueDate = document.getElementById('taskDueDate').value;
127
+ const priority = document.getElementById('taskPriority').value;
128
+ const hasReminder = document.getElementById('taskReminder').checked;
129
+
130
+ if (name) {
131
+ const newTask = {
132
+ id: Date.now(),
133
+ name,
134
+ dueDate,
135
+ priority,
136
+ hasReminder,
137
+ completed: false
138
+ };
139
+
140
+ tasks.push(newTask);
141
+ renderTasks();
142
+ closeAddTaskModal();
143
+
144
+ // Clear form
145
+ document.getElementById('taskName').value = '';
146
+ document.getElementById('taskDueDate').value = '';
147
+ document.getElementById('taskPriority').value = 'medium';
148
+ document.getElementById('taskReminder').checked = false;
149
+
150
+ // Set reminder if enabled
151
+ if (hasReminder && dueDate) {
152
+ setReminder(newTask);
153
+ }
154
+ } else {
155
+ alert('Please enter a task name');
156
+ }
157
+ }
158
+
159
+ function setReminder(task) {
160
+ console.log(`Reminder set for task: ${task.name} at ${task.dueDate}`);
161
+ // In production, this would use browser notifications or connect to a reminder service
162
+ alert(`Reminder set for "${task.name}"`);
163
+ }
164
+
165
+ function renderTasks() {
166
+ const taskList = document.getElementById('taskList');
167
+ const upcomingTasks = document.getElementById('upcomingTasks');
168
+
169
+ taskList.innerHTML = '';
170
+ upcomingTasks.innerHTML = '';
171
+
172
+ tasks.forEach(task => {
173
+ const taskItem = document.createElement('div');
174
+ taskItem.className = `task-item task-card rounded-lg p-4 flex items-center justify-between ${task.completed ? 'opacity-60' : ''}`;
175
+
176
+ taskItem.innerHTML = `
177
+ <div class="flex items-center">
178
+ <input type="checkbox" ${task.completed ? 'checked' : ''} onchange="toggleTaskCompletion(${task.id})" class="mr-3">
179
+ <div>
180
+ <div class="font-medium">${task.name}</div>
181
+ <div class="text-xs opacity-80">${formatDate(task.dueDate)}</div>
182
+ </div>
183
+ </div>
184
+ <div class="flex items-center space-x-2">
185
+ <span class="text-xs px-2 py-1 rounded-full ${getPriorityClass(task.priority)}">
186
+ ${task.priority}
187
+ </span>
188
+ ${task.hasReminder ? '<i data-feather="bell" class="w-4 h-4 text-yellow-400"></i>' : ''}
189
+ </div>
190
+ `;
191
+
192
+ taskList.appendChild(taskItem);
193
+
194
+ // Add to upcoming tasks if not completed and has due date
195
+ if (!task.completed && task.dueDate) {
196
+ const upcomingItem = document.createElement('div');
197
+ upcomingItem.className = 'task-card rounded-lg p-3';
198
+ upcomingItem.innerHTML = `
199
+ <div class="font-medium">${task.name}</div>
200
+ <div class="text-xs opacity-80">Due: ${formatDate(task.dueDate)}</div>
201
+ `;
202
+ upcomingTasks.appendChild(upcomingItem);
203
+ }
204
+ });
205
+
206
+ feather.replace();
207
+ }
208
+
209
+ function toggleTaskCompletion(taskId) {
210
+ const taskIndex = tasks.findIndex(task => task.id === taskId);
211
+ if (taskIndex !== -1) {
212
+ tasks[taskIndex].completed = !tasks[taskIndex].completed;
213
+ renderTasks();
214
+ }
215
+ }
216
+
217
+ function getPriorityClass(priority) {
218
+ switch(priority) {
219
+ case 'high': return 'bg-red-600/30';
220
+ case 'medium': return 'bg-yellow-600/30';
221
+ default: return 'bg-green-600/30';
222
+ }
223
+ }
224
+
225
+ function formatDate(dateString) {
226
+ if (!dateString) return 'No deadline';
227
+ const date = new Date(dateString);
228
+ return date.toLocaleString();
229
+ }
230
+
231
+ // Initialize with some sample tasks
232
+ tasks = [
233
+ {
234
+ id: 1,
235
+ name: 'Complete project proposal',
236
+ dueDate: '2023-12-15T14:00',
237
+ priority: 'high',
238
+ hasReminder: true,
239
+ completed: false
240
+ },
241
+ {
242
+ id: 2,
243
+ name: 'Schedule team meeting',
244
+ dueDate: '2023-12-10T10:00',
245
+ priority: 'medium',
246
+ hasReminder: false,
247
+ completed: false
248
+ }
249
+ ];
250
+
251
+ renderTasks();
252
  </script>
253
  </body>
254
  </html>