Hugging Face's logo

Spaces:
ttcgroup
/
undefined
Running

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

create the scheduling and task sections and make sure that the menu buttons link to them correctly

Browse files
Files changed (3) hide show
  1. index.html +1 -2
  2. scheduling.html +164 -157
  3. tasks.html +193 -137
index.html CHANGED
@@ -46,9 +46,8 @@
46
  <a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
47
  <a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
48
  <a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
49
- <a href="media.html" class="hover:text-[#FFA07A] transition">Media</a>
50
  <a href="research.html" class="hover:text-[#FFA07A] transition">Research</a>
51
- </nav>
52
  <button class="md:hidden">
53
  <i data-feather="menu" class="w-6 h-6"></i>
54
  </button>
 
46
  <a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
47
  <a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
48
  <a href="tasks.html" class="hover:text-[#FFA07A] transition">Tasks</a>
 
49
  <a href="research.html" class="hover:text-[#FFA07A] transition">Research</a>
50
+ </nav>
51
  <button class="md:hidden">
52
  <i data-feather="menu" class="w-6 h-6"></i>
53
  </button>
scheduling.html CHANGED
@@ -14,18 +14,20 @@
14
  font-family: 'Space Grotesk', sans-serif;
15
  }
16
  .gradient-bg {
17
- background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
18
  }
19
  .schedule-card {
20
  backdrop-filter: blur(10px);
21
  background-color: rgba(255, 255, 255, 0.08);
22
  }
23
- .time-block {
 
 
 
24
  transition: all 0.2s ease;
25
  }
26
- .time-block:hover {
27
- transform: translateY(-2px);
28
- box-shadow: 0 10px 20px rgba(0,0,0,0.2);
29
  }
30
  </style>
31
  </head>
@@ -37,72 +39,131 @@
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="media.html" class="hover:text-[#FFA07A] transition">Media</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>
50
 
51
  <main>
52
- <div class="grid lg:grid-cols-3 gap-8 mb-8">
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 Schedule</h1>
57
- <button class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Event</button>
58
  </div>
59
-
60
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
61
- <div class="schedule-card rounded-xl p-4">
62
- <h3 class="font-medium mb-2">Current Focus</h3>
63
- <p class="text-2xl font-bold mb-1">Deep Work</p>
64
- <p class="text-sm opacity-80">9:00 AM - 11:30 AM</p>
65
- </div>
66
- <div class="schedule-card rounded-xl p-4">
67
- <h3 class="font-medium mb-2">Next Break</h3>
68
- <p class="text-2xl font-bold mb-1">Movement</p>
69
- <p class="text-sm opacity-80">11:30 AM - 12:00 PM</p>
70
- </div>
71
  </div>
72
-
73
  <div class="space-y-4">
74
- <h3 class="font-medium">Today's Schedule</h3>
75
- <div class="time-block schedule-card rounded-xl p-4 flex items-start">
76
- <div class="w-16 text-[#FFA07A] font-medium">8:00 AM</div>
77
- <div class="flex-1">
78
- <div class="font-bold">Morning Routine</div>
79
- <div class="text-sm opacity-80">Meditation, Journaling, Light Exercise</div>
80
  </div>
81
- <i data-feather="check-circle" class="text-green-400 w-5 h-5"></i>
82
- </div>
83
- <div class="time-block schedule-card rounded-xl p-4 flex items-start">
84
- <div class="w-16 text-[#FFA07A] font-medium">9:00 AM</div>
85
- <div class="flex-1">
86
- <div class="font-bold">Deep Work Session</div>
87
- <div class="text-sm opacity-80">Project X Development</div>
88
- </div>
89
- <i data-feather="clock" class="text-yellow-400 w-5 h-5"></i>
90
- </div>
91
- <div class="time-block schedule-card rounded-xl p-4 flex items-start">
92
- <div class="w-16 text-[#FFA07A] font-medium">11:30 AM</div>
93
- <div class="flex-1">
94
- <div class="font-bold">Movement Break</div>
95
- <div class="text-sm opacity-80">Stretching, Walking</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
- <i data-feather="clock" class="text-yellow-400 w-5 h-5"></i>
98
  </div>
99
- <div class="time-block schedule-card rounded-xl p-4 flex items-start">
100
- <div class="w-16 text-[#FFA07A] font-medium">12:00 PM</div>
101
- <div class="flex-1">
102
- <div class="font-bold">Lunch & Learn</div>
103
- <div class="text-sm opacity-80">Watch educational video</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  </div>
105
- <i data-feather="clock" class="text-yellow-400 w-5 h-5"></i>
106
  </div>
107
  </div>
108
  </div>
@@ -111,127 +172,74 @@
111
  <div>
112
  <div class="schedule-card rounded-3xl p-8 mb-8">
113
  <h2 class="text-2xl font-bold mb-6">Energy Levels</h2>
114
- <div class="h-64 bg-white/5 rounded-xl mb-6 flex items-end">
115
- <div class="flex-1 h-3/4 bg-[#FFA07A] rounded-b"></div>
116
- <div class="flex-1 h-full bg-[#FFA07A] rounded-b"></div>
117
- <div class="flex-1 h-1/2 bg-[#FFA07A] rounded-b"></div>
118
- <div class="flex-1 h-1/4 bg-[#FFA07A] rounded-b"></div>
119
- <div class="flex-1 h-3/4 bg-[#FFA07A] rounded-b"></div>
120
- <div class="flex-1 h-full bg-[#FFA07A] rounded-b"></div>
 
121
  </div>
122
- <div class="flex justify-between text-sm">
123
- <span>6 AM</span>
124
- <span>9 AM</span>
125
- <span>12 PM</span>
126
- <span>3 PM</span>
127
- <span>6 PM</span>
128
- <span>9 PM</span>
 
 
 
 
 
 
129
  </div>
130
  </div>
131
 
132
  <div class="schedule-card rounded-3xl p-8">
133
- <h2 class="text-2xl font-bold mb-6">Optimal Times</h2>
134
  <div class="space-y-4">
135
- <div>
136
- <div class="flex justify-between mb-1">
137
- <span class="font-medium">Creative Work</span>
138
- <span class="text-[#FFA07A]">9 AM - 11 AM</span>
139
  </div>
140
- <div class="w-full bg-white/10 rounded-full h-2">
141
- <div class="bg-[#FFA07A] h-2 rounded-full" style="width: 80%"></div>
 
142
  </div>
143
  </div>
144
- <div>
145
- <div class="flex justify-between mb-1">
146
- <span class="font-medium">Analytical Work</span>
147
- <span class="text-[#FFA07A]">2 PM - 4 PM</span>
148
  </div>
149
- <div class="w-full bg-white/10 rounded-full h-2">
150
- <div class="bg-[#FFA07A] h-2 rounded-full" style="width: 65%"></div>
 
151
  </div>
152
  </div>
153
- <div>
154
- <div class="flex justify-between mb-1">
155
- <span class="font-medium">Physical Activity</span>
156
- <span class="text-[#FFA07A]">5 PM - 7 PM</span>
157
  </div>
158
- <div class="w-full bg-white/10 rounded-full h-2">
159
- <div class="bg-[#FFA07A] h-2 rounded-full" style="width: 90%"></div>
 
160
  </div>
161
  </div>
162
- <div>
163
- <div class="flex justify-between mb-1">
164
- <span class="font-medium">Learning</span>
165
- <span class="text-[#FFA07A]">7 PM - 9 PM</span>
166
  </div>
167
- <div class="w-full bg-white/10 rounded-full h-2">
168
- <div class="bg-[#FFA07A] h-2 rounded-full" style="width: 75%"></div>
 
169
  </div>
170
  </div>
171
  </div>
172
  </div>
173
  </div>
174
  </div>
175
-
176
- <div class="schedule-card rounded-3xl p-8">
177
- <div class="flex justify-between items-center mb-6">
178
- <h2 class="text-2xl font-bold">Weekly Overview</h2>
179
- <div class="flex space-x-2">
180
- <button class="bg-white/10 px-3 py-1 rounded-lg text-sm">Week</button>
181
- <button class="bg-[#FFA07A] px-3 py-1 rounded-lg text-sm">Month</button>
182
- <button class="bg-white/10 px-3 py-1 rounded-lg text-sm">Year</button>
183
- </div>
184
- </div>
185
-
186
- <div class="overflow-x-auto">
187
- <table class="w-full">
188
- <thead>
189
- <tr class="text-left border-b border-white/10 text-sm">
190
- <th class="pb-3">Time</th>
191
- <th class="pb-3">Mon</th>
192
- <th class="pb-3">Tue</th>
193
- <th class="pb-3">Wed</th>
194
- <th class="pb-3">Thu</th>
195
- <th class="pb-3">Fri</th>
196
- <th class="pb-3">Sat</th>
197
- <th class="pb-3">Sun</th>
198
- </tr>
199
- </thead>
200
- <tbody class="divide-y divide-white/10 text-sm">
201
- <tr>
202
- <td class="py-3">6 AM</td>
203
- <td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
204
- <td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
205
- <td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
206
- <td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
207
- <td><div class="w-6 h-6 rounded bg-[#FFA07A] mx-auto"></div></td>
208
- <td></td>
209
- <td></td>
210
- </tr>
211
- <tr>
212
- <td class="py-3">8 AM</td>
213
- <td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
214
- <td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
215
- <td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
216
- <td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
217
- <td><div class="w-6 h-6 rounded bg-purple-500 mx-auto"></div></td>
218
- <td></td>
219
- <td></td>
220
- </tr>
221
- <tr>
222
- <td class="py-3">12 PM</td>
223
- <td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
224
- <td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
225
- <td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
226
- <td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
227
- <td><div class="w-6 h-6 rounded bg-green-500 mx-auto"></div></td>
228
- <td><div class="w-6 h-6 rounded bg-yellow-500 mx-auto"></div></td>
229
- <td><div class="w-6 h-6 rounded bg-yellow-500 mx-auto"></div></td>
230
- </tr>
231
- </tbody>
232
- </table>
233
- </div>
234
- </div>
235
  </main>
236
 
237
  <footer class="border-t border-white/20 mt-12 pt-8 pb-12">
@@ -251,9 +259,8 @@
251
  minHeight: 200.00,
252
  minWidth: 200.00,
253
  scale: 1.00,
254
- scaleMobile: 1.00,
255
- color: 0xffa07a,
256
- backgroundColor: 0x1a1b2f,
257
  points: 12.00,
258
  maxDistance: 22.00,
259
  spacing: 18.00
 
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>
 
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>
52
 
53
  <main>
54
+ <div class="grid lg:grid-cols-3 gap-8">
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>
 
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">
 
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
tasks.html CHANGED
@@ -7,14 +7,14 @@
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.dots.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, #0f2027 0%, #203a43 50%, #2c5364 100%);
18
  }
19
  .task-card {
20
  backdrop-filter: blur(10px);
@@ -25,16 +25,15 @@
25
  }
26
  .task-item:hover {
27
  transform: translateY(-2px);
28
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
29
  }
30
  .priority-high {
31
- border-left: 4px solid #f87171;
32
  }
33
  .priority-medium {
34
- border-left: 4px solid #fbbf24;
35
  }
36
  .priority-low {
37
- border-left: 4px solid #34d399;
38
  }
39
  </style>
40
  </head>
@@ -46,183 +45,237 @@
46
  <span class="text-xl font-bold">CircaSnooze</span>
47
  </a>
48
  <nav class="hidden md:flex space-x-6">
49
- <a href="index.html" class="hover:text-[#FFA07A] transition">Home</a>
50
- <a href="sleep-calculator.html" class="hover:text-[#FFA07A] transition">Sleep</a>
51
- <a href="scheduling.html" class="hover:text-[#FFA07A] transition">Schedule</a>
52
- <a href="#" class="text-[#FFA07A] font-medium">Tasks</a>
53
- <a href="media.html" class="hover:text-[#FFA07A] transition">Media</a>
54
  </nav>
55
- <button class="bg-[#FFA07A] px-4 py-2 rounded-lg text-sm font-medium hover:bg-[#ff8a5c] transition">
56
  My Account
57
  </button>
58
  </header>
59
 
60
  <main>
61
- <div class="grid lg:grid-cols-3 gap-8 mb-8">
62
  <div class="lg:col-span-2">
63
  <div class="task-card rounded-3xl p-8 mb-8">
64
  <div class="flex justify-between items-center mb-8">
65
  <h1 class="text-3xl font-bold">Task Genius</h1>
66
- <button class="bg-[#FFA07A] px-4 py-2 rounded-lg font-medium">Add Task</button>
67
  </div>
68
 
69
- <div class="space-y-4">
70
- <div class="task-item task-card rounded-xl p-4 flex items-center priority-high">
71
- <input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5">
72
- <div class="flex-1">
73
- <div class="font-bold">Finish project proposal</div>
74
- <div class="text-sm opacity-80 flex items-center">
75
- <i data-feather="clock" class="w-3 h-3 mr-1"></i>
76
- Due tomorrow at 9:00 AM
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  </div>
78
- </div>
79
- <div class="flex space-x-2">
80
- <button class="p-1 rounded-full hover:bg-white/10">
81
- <i data-feather="edit-2" class="w-4 h-4"></i>
82
- </button>
83
- <button class="p-1 rounded-full hover:bg-white/10">
84
- <i data-feather="trash-2" class="w-4 h-4"></i>
85
- </button>
86
  </div>
87
  </div>
88
 
89
- <div class="task-item task-card rounded-xl p-4 flex items-center priority-medium">
90
- <input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5">
91
- <div class="flex-1">
92
- <div class="font-bold">Grocery shopping</div>
93
- <div class="text-sm opacity-80 flex items-center">
94
- <i data-feather="clock" class="w-3 h-3 mr-1"></i>
95
- Due tomorrow
 
 
 
 
 
 
 
 
 
96
  </div>
97
- </div>
98
- <div class="flex space-x-2">
99
- <button class="p-1 rounded-full hover:bg-white/10">
100
- <i data-feather="edit-2" class="w-4 h-4"></i>
101
- </button>
102
- <button class="p-1 rounded-full hover:bg-white/10">
103
- <i data-feather="trash-2" class="w-4 h-4"></i>
104
- </button>
105
  </div>
106
  </div>
107
 
108
- <div class="task-item task-card rounded-xl p-4 flex items-center">
109
- <input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5">
110
- <div class="flex-1">
111
- <div class="font-bold">Read new research paper</div>
112
- <div class="text-sm opacity-80 flex items-center">
113
- <i data-feather="clock" class="w-3 h-3 mr-1"></i>
114
- Due Friday
 
 
 
 
 
 
 
 
 
115
  </div>
116
- </div>
117
- <div class="flex space-x-2">
118
- <button class="p-1 rounded-full hover:bg-white/10">
119
- <i data-feather="edit-2" class="w-4 h-4"></i>
120
- </button>
121
- <button class="p-1 rounded-full hover:bg-white/10">
122
- <i data-feather="trash-2" class="w-4 h-4"></i>
123
- </button>
124
  </div>
125
  </div>
126
 
127
- <div class="task-item task-card rounded-xl p-4 flex items-center priority-low">
128
- <input type="checkbox" class="mr-4 rounded bg-white/10 border-white/20 w-5 h-5" checked>
129
- <div class="flex-1 opacity-60">
130
- <div class="font-bold line-through">Call mom</div>
131
- <div class="text-sm opacity-80 flex items-center">
132
- <i data-feather="check" class="w-3 h-3 mr-1"></i>
133
- Completed today
 
 
 
 
 
 
 
 
 
134
  </div>
135
- </div>
136
- <div class="flex space-x-2">
137
- <button class="p-1 rounded-full hover:bg-white/10">
138
- <i data-feather="edit-2" class="w-4 h-4"></i>
139
- </button>
140
- <button class="p-1 rounded-full hover:bg-white/10">
141
- <i data-feather="trash-2" class="w-4 h-4"></i>
142
- </button>
143
  </div>
144
  </div>
145
  </div>
146
  </div>
147
 
148
  <div class="task-card rounded-3xl p-8">
149
- <h2 class="text-2xl font-bold mb-6">Smart Suggestions</h2>
150
- <div class="grid md:grid-cols-2 gap-4">
151
- <div class="task-card rounded-xl p-4">
152
- <div class="flex items-center mb-3">
153
- <div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center mr-3">
154
- <i data-feather="zap" class="w-5 h-5"></i>
155
- </div>
156
- <div>
157
- <div class="font-bold">Energy Peak</div>
158
- <div class="text-xs opacity-80">9:00 AM - 11:00 AM</div>
159
- </div>
160
- </div>
161
- <p class="text-sm opacity-80">Schedule your most demanding tasks during your natural energy peak.</p>
162
  </div>
163
- <div class="task-card rounded-xl p-4">
164
- <div class="flex items-center mb-3">
165
- <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
166
- <i data-feather="clock" class="w-5 h-5"></i>
167
- </div>
168
- <div>
169
- <div class="font-bold">Recurring Tasks</div>
170
- <div class="text-xs opacity-80">Pattern detected</div>
171
- </div>
 
 
 
 
 
 
 
172
  </div>
173
- <p class="text-sm opacity-80">You usually grocery shop on Saturdays. Would you like to set a weekly reminder?</p>
174
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
175
  </div>
176
  </div>
177
  </div>
178
 
179
  <div>
180
  <div class="task-card rounded-3xl p-8 mb-8">
181
- <h2 class="text-2xl font-bold mb-6">Productivity Stats</h2>
182
- <div class="flex items-center justify-between mb-4">
183
- <div>
184
- <div class="text-3xl font-bold">87%</div>
185
- <div class="text-sm opacity-80">Completion Rate</div>
186
  </div>
187
- <div>
188
- <div class="text-3xl font-bold">24</div>
189
- <div class="text-sm opacity-80">Tasks This Week</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  </div>
191
  </div>
192
- <div class="h-48 bg-white/5 rounded-xl mb-6"></div>
193
- <div class="flex justify-between text-sm">
194
- <span>Mon</span>
195
- <span>Tue</span>
196
- <span>Wed</span>
197
- <span>Thu</span>
198
- <span>Fri</span>
199
- <span>Sat</span>
200
- <span>Sun</span>
201
  </div>
202
  </div>
203
 
204
  <div class="task-card rounded-3xl p-8">
205
- <h2 class="text-2xl font-bold mb-6">Quick Add</h2>
206
  <div class="space-y-4">
207
- <div>
208
- <label class="block mb-2 text-sm">Task Name</label>
209
- <input type="text" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3">
 
 
 
 
 
210
  </div>
211
- <div>
212
- <label class="block mb-2 text-sm">Due Date</label>
213
- <input type="datetime-local" class="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-3">
 
 
 
 
 
214
  </div>
215
- <div>
216
- <label class="block mb-2 text-sm">Priority</label>
217
- <div class="flex space-x-2">
218
- <button class="bg-red-600/50 px-3 py-1 rounded-lg text-sm">High</button>
219
- <button class="bg-yellow-600/50 px-3 py-1 rounded-lg text-sm">Medium</button>
220
- <button class="bg-green-600/50 px-3 py-1 rounded-lg text-sm">Low</button>
 
 
 
 
 
 
 
 
 
 
221
  </div>
222
  </div>
223
- <button class="w-full bg-[#FFA07A] py-3 rounded-lg font-bold hover:bg-[#ff8a5c] transition">
224
- Add Task
225
- </button>
226
  </div>
227
  </div>
228
  </div>
@@ -238,7 +291,7 @@
238
 
239
  <script>
240
  // Initialize Vanta.js background
241
- VANTA.DOTS({
242
  el: "#vanta-bg",
243
  mouseControls: true,
244
  touchControls: true,
@@ -246,11 +299,14 @@
246
  minHeight: 200.00,
247
  minWidth: 200.00,
248
  scale: 1.00,
249
- scaleMobile: 1.00,
250
- color: 0xffa07a,
251
- backgroundColor: 0x1a1b2f,
252
- size: 3.10,
253
- spacing: 23.00
 
 
 
254
  });
255
 
256
  // Initialize feather icons
 
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);
 
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>
 
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>
58
 
59
  <main>
60
+ <div class="grid lg:grid-cols-3 gap-8">
61
  <div class="lg:col-span-2">
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>
 
291
 
292
  <script>
293
  // Initialize Vanta.js background
294
+ VANTA.BIRDS({
295
  el: "#vanta-bg",
296
  mouseControls: true,
297
  touchControls: true,
 
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