Hugging Face's logo

Spaces:
flitrx
/
rainbowfocus-digital-planner
Running

App Files Community
flitrx commited on
Commit
3267ca9
·
verified ·
1 Parent(s): 4328ae3

a digital planner like see in this etsy product link: https://www.etsy.com/listing/1620103130/2026-adhd-digital-planner-dark-rainbow?ls=s&ga_order=most_relevant&ga_search_type=all&ga_view_type=gallery&ga_search_query=adhd+planner&ref=sr_gallery-1-24&pro=1&sts=1&dd=1&content_source=0f05dc65-7d4d-428f-ab05-6c2bf00b746b%253ALT7454849267120d04b9228c185d89b46b5cb82367&organic_search_click=1&logging_key=0f05dc65-7d4d-428f-ab05-6c2bf00b746b%3ALT7454849267120d04b9228c185d89b46b5cb82367 . analyze the link, study the product and make it for iphone, android and desktop pc.

Browse files
Files changed (5) hide show
  1. README.md +8 -5
  2. calendar.html +315 -0
  3. index.html +331 -18
  4. notes.html +344 -0
  5. tasks.html +366 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Rainbowfocus Digital Planner
3
- emoji: 🏢
4
- colorFrom: pink
5
- colorTo: yellow
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: RainbowFocus Digital Planner ✨
3
+ colorFrom: green
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
calendar.html ADDED
@@ -0,0 +1,315 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Calendar | RainbowFocus Digital Planner</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Patrick+Hand&display=swap');
13
+
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+
18
+ .handwriting {
19
+ font-family: 'Patrick Hand', cursive;
20
+ }
21
+
22
+ .fc-event {
23
+ border-radius: 6px;
24
+ font-size: 0.875rem;
25
+ padding: 2px 4px;
26
+ border: none;
27
+ }
28
+
29
+ .fc-daygrid-event {
30
+ margin-top: 2px;
31
+ margin-bottom: 2px;
32
+ }
33
+
34
+ @media (max-width: 640px) {
35
+ .fc-header-toolbar {
36
+ flex-direction: column;
37
+ align-items: flex-start;
38
+ gap: 0.5rem;
39
+ }
40
+
41
+ .fc-toolbar-chunk {
42
+ width: 100%;
43
+ margin-bottom: 0.5rem;
44
+ }
45
+ }
46
+ </style>
47
+ <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
48
+ <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
49
+ </head>
50
+ <body class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
51
+ <!-- Navbar -->
52
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
54
+ <div class="flex justify-between h-16">
55
+ <div class="flex items-center">
56
+ <div class="flex-shrink-0 flex items-center">
57
+ <i data-feather="calendar" class="text-purple-600"></i>
58
+ <span class="ml-2 text-xl font-bold text-gray-800 hand-writing">RainbowFocus</span>
59
+ </div>
60
+ </div>
61
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4">
62
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Dashboard</a>
63
+ <a href="calendar.html" class="px-3 py-2 rounded-md text-sm font-medium text-purple-700 bg-purple-100">Calendar</a>
64
+ <a href="tasks.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Tasks</a>
65
+ <a href="notes.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Notes</a>
66
+ </div>
67
+ <div class="flex items-center">
68
+ <button class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
69
+ <i data-feather="menu"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
77
+ <div class="bg-white rounded-xl shadow-sm p-6">
78
+ <div id="calendar" class="mt-4"></div>
79
+ </div>
80
+ </main>
81
+
82
+ <!-- Add Event Modal -->
83
+ <div id="eventModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
84
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
85
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
86
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
87
+ </div>
88
+
89
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
90
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
91
+ <div class="sm:flex sm:items-start">
92
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
93
+ <i data-feather="calendar" class="text-purple-600"></i>
94
+ </div>
95
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
96
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">Add New Event</h3>
97
+ <div class="mt-2">
98
+ <form id="eventForm">
99
+ <div class="mb-4">
100
+ <label for="eventTitle" class="block text-sm font-medium text-gray-700">Event Title</label>
101
+ <input type="text" id="eventTitle" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
102
+ </div>
103
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
104
+ <div>
105
+ <label for="startDate" class="block text-sm font-medium text-gray-700">Start</label>
106
+ <input type="datetime-local" id="startDate" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
107
+ </div>
108
+ <div>
109
+ <label for="endDate" class="block text-sm font-medium text-gray-700">End</label>
110
+ <input type="datetime-local" id="endDate" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
111
+ </div>
112
+ </div>
113
+ <div class="mb-4">
114
+ <label for="eventColor" class="block text-sm font-medium text-gray-700">Color</label>
115
+ <select id="eventColor" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
116
+ <option value="#7c3aed" class="text-purple-600">Purple</option>
117
+ <option value="#3b82f6" class="text-blue-600">Blue</option>
118
+ <option value="#10b981" class="text-green-600">Green</option>
119
+ <option value="#f59e0b" class="text-yellow-600">Yellow</option>
120
+ <option value="#f43f5e" class="text-red-600">Red</option>
121
+ </select>
122
+ </div>
123
+ <div class="mb-4">
124
+ <label for="eventDescription" class="block text-sm font-medium text-gray-700">Description</label>
125
+ <textarea id="eventDescription" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500"></textarea>
126
+ </div>
127
+ </form>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
133
+ <button type="button" id="saveEvent" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">Save</button>
134
+ <button type="button" id="cancelEvent" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
135
+ <button type="button" id="deleteEvent" class="hidden mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Delete</button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Mobile Bottom Navigation -->
142
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200">
143
+ <div class="flex justify-around items-center h-16">
144
+ <a href="index.html" class="flex flex-col items-center justify-center text-gray-500">
145
+ <i data-feather="home" class="w-5 h-5"></i>
146
+ <span class="text-xs mt-1">Home</span>
147
+ </a>
148
+ <a href="calendar.html" class="flex flex-col items-center justify-center text-purple-600">
149
+ <i data-feather="calendar" class="w-5 h-5"></i>
150
+ <span class="text-xs mt-1">Calendar</span>
151
+ </a>
152
+ <a href="tasks.html" class="flex flex-col items-center justify-center text-gray-500">
153
+ <i data-feather="check-circle" class="w-5 h-5"></i>
154
+ <span class="text-xs mt-1">Tasks</span>
155
+ </a>
156
+ <a href="notes.html" class="flex flex-col items-center justify-center text-gray-500">
157
+ <i data-feather="book" class="w-5 h-5"></i>
158
+ <span class="text-xs mt-1">Notes</span>
159
+ </a>
160
+ </div>
161
+ </div>
162
+
163
+ <script>
164
+ feather.replace();
165
+
166
+ // Initialize FullCalendar
167
+ document.addEventListener('DOMContentLoaded', function() {
168
+ const calendarEl = document.getElementById('calendar');
169
+ const calendar = new FullCalendar.Calendar(calendarEl, {
170
+ initialView: 'dayGridMonth',
171
+ headerToolbar: {
172
+ left: 'prev,next today',
173
+ center: 'title',
174
+ right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
175
+ },
176
+ themeSystem: 'standard',
177
+ height: 'auto',
178
+ nowIndicator: true,
179
+ editable: true,
180
+ selectable: true,
181
+ selectMirror: true,
182
+ dayMaxEvents: true,
183
+ eventDisplay: 'block',
184
+ eventColor: '#7c3aed',
185
+ events: [
186
+ {
187
+ title: 'Team Meeting',
188
+ start: '2023-10-20T10:00:00',
189
+ end: '2023-10-20T11:30:00',
190
+ color: '#3b82f6'
191
+ },
192
+ {
193
+ title: 'Lunch with Sarah',
194
+ start: '2023-10-20T12:00:00',
195
+ end: '2023-10-20T13:00:00',
196
+ color: '#10b981'
197
+ },
198
+ {
199
+ title: 'Project Deadline',
200
+ start: '2023-10-20T17:00:00',
201
+ color: '#f43f5e'
202
+ },
203
+ {
204
+ title: 'Grocery Shopping',
205
+ start: '2023-10-21T18:00:00',
206
+ end: '2023-10-21T19:00:00',
207
+ color: '#f59e0b'
208
+ },
209
+ {
210
+ title: 'Doctor Appointment',
211
+ start: '2023-10-23T14:00:00',
212
+ end: '2023-10-23T15:00:00',
213
+ color: '#7c3aed'
214
+ },
215
+ {
216
+ title: 'Weekly Review',
217
+ start: '2023-10-24T09:00:00',
218
+ end: '2023-10-24T10:30:00',
219
+ color: '#8b5cf6'
220
+ }
221
+ ],
222
+ dateClick: function(info) {
223
+ // Open modal to add new event
224
+ document.getElementById('modalTitle').textContent = 'Add New Event';
225
+ document.getElementById('eventForm').reset();
226
+ document.getElementById('startDate').value = info.dateStr + 'T12:00:00';
227
+ document.getElementById('endDate').value = info.dateStr + 'T13:00:00';
228
+ document.getElementById('deleteEvent').classList.add('hidden');
229
+
230
+ // Show modal
231
+ document.getElementById('eventModal').classList.remove('hidden');
232
+ },
233
+ eventClick: function(info) {
234
+ // Open modal to edit event
235
+ document.getElementById('modalTitle').textContent = 'Edit Event';
236
+ document.getElementById('eventTitle').value = info.event.title;
237
+ document.getElementById('startDate').value = info.event.start.toISOString().slice(0, 16);
238
+ document.getElementById('endDate').value = info.event.end ? info.event.end.toISOString().slice(0, 16) : info.event.start.toISOString().slice(0, 16);
239
+ document.getElementById('eventDescription').value = info.event.extendedProps.description || '';
240
+
241
+ // Set color based on event color
242
+ const colorSelect = document.getElementById('eventColor');
243
+ for (let i = 0; i < colorSelect.options.length; i++) {
244
+ if (colorSelect.options[i].value === info.event.backgroundColor) {
245
+ colorSelect.selectedIndex = i;
246
+ break;
247
+ }
248
+ }
249
+
250
+ document.getElementById('deleteEvent').classList.remove('hidden');
251
+
252
+ // Show modal
253
+ document.getElementById('eventModal').classList.remove('hidden');
254
+
255
+ // Store event to edit
256
+ currentEvent = info.event;
257
+ }
258
+ });
259
+
260
+ calendar.render();
261
+
262
+ // Modal functionality
263
+ let currentEvent = null;
264
+
265
+ document.getElementById('saveEvent').addEventListener('click', function() {
266
+ const title = document.getElementById('eventTitle').value;
267
+ const start = document.getElementById('startDate').value;
268
+ const end = document.getElementById('endDate').value;
269
+ const color = document.getElementById('eventColor').value;
270
+ const description = document.getElementById('eventDescription').value;
271
+
272
+ if (currentEvent) {
273
+ // Update existing event
274
+ currentEvent.setProp('title', title);
275
+ currentEvent.setDates(start, end || start);
276
+ currentEvent.setProp('backgroundColor', color);
277
+ currentEvent.setExtendedProp('description', description);
278
+ } else {
279
+ // Add new event
280
+ calendar.addEvent({
281
+ title: title,
282
+ start: start,
283
+ end: end || start,
284
+ backgroundColor: color,
285
+ description: description
286
+ });
287
+ }
288
+
289
+ // Hide modal
290
+ document.getElementById('eventModal').classList.add('hidden');
291
+ currentEvent = null;
292
+ });
293
+
294
+ document.getElementById('cancelEvent').addEventListener('click', function() {
295
+ document.getElementById('eventModal').classList.add('hidden');
296
+ currentEvent = null;
297
+ });
298
+
299
+ document.getElementById('deleteEvent').addEventListener('click', function() {
300
+ if (currentEvent) {
301
+ currentEvent.remove();
302
+ document.getElementById('eventModal').classList.add('hidden');
303
+ currentEvent = null;
304
+ }
305
+ });
306
+ });
307
+
308
+ // Mobile menu toggle functionality
309
+ document.querySelector('[data-feather="menu"]').addEventListener('click', function() {
310
+ const mobileMenu = document.getElementById('mobile-menu');
311
+ mobileMenu.classList.toggle('hidden');
312
+ });
313
+ </script>
314
+ </body>
315
+ </html>
index.html CHANGED
@@ -1,19 +1,332 @@
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>RainbowFocus Digital Planner</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Patrick+Hand&display=swap');
14
+
15
+ :root {
16
+ --primary: #7c3aed;
17
+ --secondary: #f43f5e;
18
+ --accent: #f59e0b;
19
+ --dark: #1e293b;
20
+ --light: #f8fafc;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Inter', sans-serif;
25
+ background-color: var(--light);
26
+ }
27
+
28
+ .handwriting {
29
+ font-family: 'Patrick Hand', cursive;
30
+ }
31
+
32
+ .planner-page {
33
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
34
+ border-radius: 16px;
35
+ background: linear-gradient(145deg, #ffffff, #f1f5f9);
36
+ }
37
+
38
+ .rainbow-border {
39
+ border-image: linear-gradient(to right, #f43f5e, #f59e0b, #84cc16, #10b981, #3b82f6, #7c3aed, #d946ef) 1;
40
+ border-width: 4px;
41
+ border-style: solid;
42
+ }
43
+
44
+ .adhd-checkbox:checked {
45
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"), linear-gradient(to bottom right, #7c3aed, #f59e0b);
46
+ }
47
+
48
+ @media (max-width: 640px) {
49
+ .mobile-stack {
50
+ flex-direction: column;
51
+ }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
56
+ <!-- Navbar -->
57
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
58
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="flex justify-between h-16">
60
+ <div class="flex items-center">
61
+ <div class="flex-shrink-0 flex items-center">
62
+ <i data-feather="book-open" class="text-purple-600"></i>
63
+ <span class="ml-2 text-xl font-bold text-gray-800 hand-writing">RainbowFocus</span>
64
+ </div>
65
+ </div>
66
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4">
67
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-purple-700 bg-purple-100">Dashboard</a>
68
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Calendar</a>
69
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Tasks</a>
70
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Notes</a>
71
+ </div>
72
+ <div class="flex items-center">
73
+ <button class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
74
+ <i data-feather="menu"></i>
75
+ </button>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
82
+ <!-- Planner Dashboard -->
83
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
84
+ <!-- Left Sidebar -->
85
+ <div class="md:col-span-1">
86
+ <div class="planner-page p-6 mb-6 bg-white">
87
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Monthly View</h2>
88
+ <div class="grid grid-cols-7 gap-1 text-center">
89
+ <div class="text-xs font-medium text-gray-500 py-1">S</div>
90
+ <div class="text-xs font-medium text-gray-500 py-1">M</div>
91
+ <div class="text-xs font-medium text-gray-500 py-1">T</div>
92
+ <div class="text-xs font-medium text-gray-500 py-1">W</div>
93
+ <div class="text-xs font-medium text-gray-500 py-1">T</div>
94
+ <div class="text-xs font-medium text-gray-500 py-1">F</div>
95
+ <div class="text-xs font-medium text-gray-500 py-1">S</div>
96
+
97
+ <!-- Calendar Dates -->
98
+ <div class="h-8"></div>
99
+ <div class="h-8"></div>
100
+ <div class="h-8 flex items-center justify-center rounded-full bg-purple-100 text-purple-700 font-medium">1</div>
101
+ <div class="h-8 flex items-center justify-center rounded-full">2</div>
102
+ <div class="h-8 flex items-center justify-center rounded-full">3</div>
103
+ <div class="h-8 flex items-center justify-center rounded-full">4</div>
104
+ <div class="h-8 flex items-center justify-center rounded-full">5</div>
105
+
106
+ <!-- Continue with calendar dates -->
107
+ <div class="h-8 flex items-center justify-center rounded-full">6</div>
108
+ <div class="h-8 flex items-center justify-center rounded-full">7</div>
109
+ <div class="h-8 flex items-center justify-center rounded-full">8</div>
110
+ <div class="h-8 flex items-center justify-center rounded-full bg-red-100 text-red-700 font-medium">9</div>
111
+ <div class="h-8 flex items-center justify-center rounded-full">10</div>
112
+ <div class="h-8 flex items-center justify-center rounded-full">11</div>
113
+ <div class="h-8 flex items-center justify-center rounded-full">12</div>
114
+
115
+ <!-- More dates -->
116
+ <div class="h-8 flex items-center justify-center rounded-full">13</div>
117
+ <div class="h-8 flex items-center justify-center rounded-full">14</div>
118
+ <div class="h-8 flex items-center justify-center rounded-full">15</div>
119
+ <div class="h-8 flex items-center justify-center rounded-full">16</div>
120
+ <div class="h-8 flex items-center justify-center rounded-full bg-green-100 text-green-700 font-medium">17</div>
121
+ <div class="h-8 flex items-center justify-center rounded-full">18</div>
122
+ <div class="h-8 flex items-center justify-center rounded-full">19</div>
123
+
124
+ <!-- Current day highlighted -->
125
+ <div class="h-8 flex items-center justify-center rounded-full bg-purple-600 text-white font-bold shadow-md">20</div>
126
+ <div class="h-8 flex items-center justify-center rounded-full">21</div>
127
+ <div class="h-8 flex items-center justify-center rounded-full">22</div>
128
+ <div class="h-8 flex items-center justify-center rounded-full">23</div>
129
+ <div class="h-8 flex items-center justify-center rounded-full">24</div>
130
+ <div class="h-8 flex items-center justify-center rounded-full">25</div>
131
+ <div class="h-8 flex items-center justify-center rounded-full">26</div>
132
+
133
+ <!-- Final dates -->
134
+ <div class="h-8 flex items-center justify-center rounded-full">27</div>
135
+ <div class="h-8 flex items-center justify-center rounded-full">28</div>
136
+ <div class="h-8 flex items-center justify-center rounded-full">29</div>
137
+ <div class="h-8 flex items-center justify-center rounded-full">30</div>
138
+ <div class="h-8 flex items-center justify-center rounded-full">31</div>
139
+ <div class="h-8"></div>
140
+ <div class="h-8"></div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Quick Add Section -->
145
+ <div class="planner-page p-6 bg-white">
146
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Quick Add</h2>
147
+ <div class="space-y-4">
148
+ <button class="w-full flex items-center justify-between px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg text-purple-700 font-medium">
149
+ <span>Add Task</span>
150
+ <i data-feather="plus" class="w-5 h-5"></i>
151
+ </button>
152
+ <button class="w-full flex items-center justify-between px-4 py-3 bg-gradient-to-r from-blue-100 to-cyan-100 rounded-lg text-blue-700 font-medium">
153
+ <span>Add Event</span>
154
+ <i data-feather="calendar" class="w-5 h-5"></i>
155
+ </button>
156
+ <button class="w-full flex items-center justify-between px-4 py-3 bg-gradient-to-r from-yellow-100 to-orange-100 rounded-lg text-yellow-700 font-medium">
157
+ <span>Add Note</span>
158
+ <i data-feather="edit" class="w-5 h-5"></i>
159
+ </button>
160
+ <button class="w-full flex items-center justify-between px-4 py-3 bg-gradient-to-r from-green-100 to-teal-100 rounded-lg text-green-700 font-medium">
161
+ <span>Add Habit</span>
162
+ <i data-feather="check-circle" class="w-5 h-5"></i>
163
+ </button>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Main Content -->
169
+ <div class="md:col-span-2">
170
+ <!-- Today's Overview -->
171
+ <div class="planner-page p-6 mb-6 bg-white rainbow-border">
172
+ <div class="flex justify-between items-center mb-6">
173
+ <h2 class="text-2xl font-bold text-gray-800">Today's Overview</h2>
174
+ <div class="text-sm text-purple-600 font-medium">Wednesday, October 20, 2023</div>
175
+ </div>
176
+
177
+ <!-- Priority Tasks -->
178
+ <div class="mb-8">
179
+ <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
180
+ <i data-feather="alert-triangle" class="w-5 h-5 text-red-500 mr-2"></i>
181
+ Priority Tasks
182
+ </h3>
183
+ <div class="space-y-3">
184
+ <div class="flex items-center px-4 py-3 bg-red-50 rounded-lg">
185
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
186
+ <span class="ml-3 font-medium text-gray-700">Submit project proposal to client</span>
187
+ <span class="ml-auto text-sm text-red-500 font-medium">Due 5pm</span>
188
+ </div>
189
+ <div class="flex items-center px-4 py-3 bg-orange-50 rounded-lg">
190
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
191
+ <span class="ml-3 font-medium text-gray-700">Buy groceries for the week</span>
192
+ <span class="ml-auto text-sm text-orange-500 font-medium">Due tonight</span>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Daily Tasks -->
198
+ <div class="mb-8">
199
+ <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
200
+ <i data-feather="list" class="w-5 h-5 text-purple-500 mr-2"></i>
201
+ Daily Tasks
202
+ </h3>
203
+ <div class="space-y-3">
204
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200">
205
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
206
+ <span class="ml-3 text-gray-700">Morning meditation (10 min)</span>
207
+ <span class="ml-auto text-sm text-gray-500">Completed</span>
208
+ </div>
209
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200">
210
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
211
+ <span class="ml-3 text-gray-700">Check and reply to emails</span>
212
+ </div>
213
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200">
214
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
215
+ <span class="ml-3 text-gray-700">Workout session</span>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Time Blocking -->
221
+ <div>
222
+ <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
223
+ <i data-feather="clock" class="w-5 h-5 text-blue-500 mr-2"></i>
224
+ Time Blocking
225
+ </h3>
226
+ <div class="space-y-3">
227
+ <div class="bg-blue-50 rounded-lg p-4">
228
+ <div class="flex items-center justify-between mb-1">
229
+ <span class="font-medium text-blue-800">8:00 - 10:00 AM</span>
230
+ <span class="text-sm text-blue-600 bg-blue-100 px-2 py-1 rounded-full">Work</span>
231
+ </div>
232
+ <p class="text-gray-700">Project planning and team meeting</p>
233
+ </div>
234
+ <div class="bg-purple-50 rounded-lg p-4">
235
+ <div class="flex items-center justify-between mb-1">
236
+ <span class="font-medium text-purple-800">12:00 - 1:00 PM</span>
237
+ <span class="text-sm text-purple-600 bg-purple-100 px-2 py-1 rounded-full">Break</span>
238
+ </div>
239
+ <p class="text-gray-700">Lunch and short walk outside</p>
240
+ </div>
241
+ <div class="bg-green-50 rounded-lg p-4">
242
+ <div class="flex items-center justify-between mb-1">
243
+ <span class="font-medium text-green-800">2:00 - 4:00 PM</span>
244
+ <span class="text-sm text-green-600 bg-green-100 px-2 py-1 rounded-full">Focus Time</span>
245
+ </div>
246
+ <p class="text-gray-700">Deep work on client project</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Notes & Brain Dump -->
253
+ <div class="planner-page p-6 bg-white">
254
+ <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
255
+ <i data-feather="edit-3" class="w-6 h-6 text-pink-500 mr-2"></i>
256
+ Notes & Brain Dump
257
+ </h2>
258
+ <div class="bg-pink-50 rounded-lg p-4 min-h-[200px]">
259
+ <textarea class="w-full h-full bg-transparent resize-none focus:outline-none hand-writing text-gray-700" placeholder="Dump all your thoughts here..."></textarea>
260
+ </div>
261
+ <div class="mt-4 flex justify-end">
262
+ <button class="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 flex items-center">
263
+ <i data-feather="save" class="w-4 h-4 mr-2"></i>
264
+ Save
265
+ </button>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </main>
271
+
272
+ <!-- Mobile Bottom Navigation -->
273
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200">
274
+ <div class="flex justify-around items-center h-16">
275
+ <a href="#" class="flex flex-col items-center justify-center text-purple-600">
276
+ <i data-feather="home" class="w-5 h-5"></i>
277
+ <span class="text-xs mt-1">Home</span>
278
+ </a>
279
+ <a href="#" class="flex flex-col items-center justify-center text-gray-500">
280
+ <i data-feather="calendar" class="w-5 h-5"></i>
281
+ <span class="text-xs mt-1">Calendar</span>
282
+ </a>
283
+ <a href="#" class="flex flex-col items-center justify-center text-gray-500">
284
+ <i data-feather="check-circle" class="w-5 h-5"></i>
285
+ <span class="text-xs mt-1">Tasks</span>
286
+ </a>
287
+ <a href="#" class="flex flex-col items-center justify-center text-gray-500">
288
+ <i data-feather="book" class="w-5 h-5"></i>
289
+ <span class="text-xs mt-1">Notes</span>
290
+ </a>
291
+ </div>
292
+ </div>
293
+
294
+ <script>
295
+ feather.replace();
296
+
297
+ // Initialize Vanta.js animation for desktop only
298
+ if (window.innerWidth > 768) {
299
+ VANTA.GLOBE({
300
+ el: "body",
301
+ mouseControls: true,
302
+ touchControls: true,
303
+ gyroControls: false,
304
+ minHeight: 200.00,
305
+ minWidth: 200.00,
306
+ scale: 1.00,
307
+ scaleMobile: 1.00,
308
+ color: 0x7c3aed,
309
+ backgroundColor: 0xf8fafc,
310
+ size: 0.7
311
+ });
312
+ }
313
+
314
+ // Mobile menu toggle functionality
315
+ document.querySelector('[data-feather="menu"]').addEventListener('click', function() {
316
+ const mobileMenu = document.getElementById('mobile-menu');
317
+ mobileMenu.classList.toggle('hidden');
318
+ });
319
+
320
+ // Custom checkbox styling
321
+ document.querySelectorAll('.adhd-checkbox').forEach(checkbox => {
322
+ checkbox.addEventListener('change', function() {
323
+ if (this.checked) {
324
+ this.parentElement.classList.add('line-through', 'text-gray-400');
325
+ } else {
326
+ this.parentElement.classList.remove('line-through', 'text-gray-400');
327
+ }
328
+ });
329
+ });
330
+ </script>
331
+ </body>
332
  </html>
notes.html ADDED
@@ -0,0 +1,344 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Notes | RainbowFocus Digital Planner</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Patrick+Hand&display=swap');
13
+
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+
18
+ .handwriting {
19
+ font-family: 'Patrick Hand', cursive;
20
+ }
21
+
22
+ .note-tag {
23
+ transition: all 0.2s;
24
+ }
25
+
26
+ .note-tag:hover {
27
+ transform: translateY(-1px);
28
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
29
+ }
30
+
31
+ .note-card {
32
+ transition: all 0.3s;
33
+ }
34
+
35
+ .note-card:hover {
36
+ transform: translateY(-2px);
37
+ box-shadow: 0 6px 12px rgba(0,0,0,0.1);
38
+ }
39
+
40
+ .editor-content {
41
+ min-height: 300px;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
46
+ <!-- Navbar -->
47
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
49
+ <div class="flex justify-between h-16">
50
+ <div class="flex items-center">
51
+ <div class="flex-shrink-0 flex items-center">
52
+ <i data-feather="book" class="text-purple-600"></i>
53
+ <span class="ml-2 text-xl font-bold text-gray-800 hand-writing">RainbowFocus</span>
54
+ </div>
55
+ </div>
56
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4">
57
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Dashboard</a>
58
+ <a href="calendar.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Calendar</a>
59
+ <a href="tasks.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Tasks</a>
60
+ <a href="notes.html" class="px-3 py-2 rounded-md text-sm font-medium text-purple-700 bg-purple-100">Notes</a>
61
+ </div>
62
+ <div class="flex items-center">
63
+ <button class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
64
+ <i data-feather="menu"></i>
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </nav>
70
+
71
+ <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
72
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
73
+ <!-- Tags & Categories -->
74
+ <div class="lg:col-span-1">
75
+ <div class="bg-white rounded-xl shadow-sm p-6 sticky top-28">
76
+ <div class="flex justify-between items-center mb-4">
77
+ <h2 class="text-xl font-bold text-gray-800">Tags</h2>
78
+ <button class="text-purple-600 hover:text-purple-800">
79
+ <i data-feather="plus" class="w-5 h-5"></i>
80
+ </button>
81
+ </div>
82
+ <div class="flex flex-wrap gap-2">
83
+ <span class="note-tag px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Work</span>
84
+ <span class="note-tag px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Ideas</span>
85
+ <span class="note-tag px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Personal</span>
86
+ <span class="note-tag px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Journal</span>
87
+ <span class="note-tag px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Important</span>
88
+ <span class="note-tag px-3 py-1 rounded-full text-xs font-medium bg-pink-100 text-pink-800">Brain Dump</span>
89
+ <span class="note-tag px-3 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Meeting Notes</span>
90
+ </div>
91
+
92
+ <div class="mt-6">
93
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Quick Notes</h2>
94
+ <button class="w-full flex items-center justify-between px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg text-purple-700 font-medium mb-2">
95
+ <span>Daily Journal</span>
96
+ <i data-feather="edit" class="w-5 h-5"></i>
97
+ </button>
98
+ <button class="w-full flex items-center justify-between px-4 py-3 bg-gradient-to-r from-blue-100 to-cyan-100 rounded-lg text-blue-700 font-medium mb-2">
99
+ <span>Meeting Notes</span>
100
+ <i data-feather="users" class="w-5 h-5"></i>
101
+ </button>
102
+ <button class="w-full flex items-center justify-between px-4 py-3 bg-gradient-to-r from-yellow-100 to-orange-100 rounded-lg text-yellow-700 font-medium mb-2">
103
+ <span>Brain Dump</span>
104
+ <i data-feather="zap" class="w-5 h-5"></i>
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Notes Content -->
111
+ <div class="lg:col-span-3">
112
+ <!-- Current Note Editor -->
113
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
114
+ <div class="flex justify-between items-center mb-4">
115
+ <input type="text" class="text-2xl font-bold text-gray-800 bg-transparent border-none focus:ring-0 focus:outline-none w-full" placeholder="Note Title" value="Daily Journal - Oct 20">
116
+ <div class="flex space-x-2">
117
+ <button class="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-purple-50">
118
+ <i data-feather="tag" class="w-5 h-5"></i>
119
+ </button>
120
+ <button class="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-purple-50">
121
+ <i data-feather="archive" class="w-5 h-5"></i>
122
+ </button>
123
+ <button class="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-purple-50">
124
+ <i data-feather="trash-2" class="w-5 h-5"></i>
125
+ </button>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="editor-content hand-writing text-gray-700 mb-4 p-4 rounded-lg bg-gray-50">
130
+ <p class="mb-4">Today was a productive day! Managed to focus for 3 pomodoros straight on the client project.</p>
131
+ <p class="mb-4">Highlights:</p>
132
+ <ul class="list-disc pl-5 mb-4">
133
+ <li>Finished the project proposal</li>
134
+ <li>Had a great brainstorming session with the team</li>
135
+ <li>Remembered to take all my meds today</li>
136
+ </ul>
137
+ <p class="mb-4">Challenges:</p>
138
+ <ul class="list-disc pl-5 mb-4">
139
+ <li>Got distracted by social media in the afternoon</li>
140
+ <li>Forgot to drink enough water</li>
141
+ </ul>
142
+ <p>Tomorrow's focus: Need to submit the proposal by 5pm and start working on the wireframes.</p>
143
+ </div>
144
+
145
+ <div class="flex items-center justify-between">
146
+ <div class="text-sm text-gray-500">Last edited 2 hours ago</div>
147
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
148
+ Save Changes
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Other Notes -->
154
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Recent Notes</h2>
155
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
156
+ <!-- Note Card 1 -->
157
+ <div class="note-card bg-white rounded-xl shadow-sm p-6">
158
+ <div class="flex justify-between items-start mb-2">
159
+ <h3 class="text-lg font-bold text-gray-800 truncate">Project Brainstorming</h3>
160
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Work</span>
161
+ </div>
162
+ <p class="text-gray-600 text-sm mb-4 line-clamp-3">Ideas for the new client project including potential features, user flows, and initial wireframe concepts.</p>
163
+ <div class="flex items-center justify-between text-sm text-gray-500">
164
+ <span>Oct 19, 2023</span>
165
+ <button class="text-purple-600 hover:text-purple-800">
166
+ <i data-feather="edit" class="w-4 h-4"></i>
167
+ </button>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Note Card 2 -->
172
+ <div class="note-card bg-white rounded-xl shadow-sm p-6">
173
+ <div class="flex justify-between items-start mb-2">
174
+ <h3 class="text-lg font-bold text-gray-800 truncate">Weekly Grocery List</h3>
175
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Personal</span>
176
+ </div>
177
+ <p class="text-gray-600 text-sm mb-4 line-clamp-3">Milk, eggs, bread, fruits, vegetables, chicken, pasta, snacks for the week.</p>
178
+ <div class="flex items-center justify-between text-sm text-gray-500">
179
+ <span>Oct 18, 2023</span>
180
+ <button class="text-purple-600 hover:text-purple-800">
181
+ <i data-feather="edit" class="w-4 h-4"></i>
182
+ </button>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Note Card 3 -->
187
+ <div class="note-card bg-white rounded-xl shadow-sm p-6">
188
+ <div class="flex justify-between items-start mb-2">
189
+ <h3 class="text-lg font-bold text-gray-800 truncate">ADHD Strategies</h3>
190
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-pink-100 text-pink-800">Brain Dump</span>
191
+ </div>
192
+ <p class="text-gray-600 text-sm mb-4 line-clamp-3">Things that help me focus: Pomodoro technique, noise-cancelling headphones, standing desk, regular breaks.</p>
193
+ <div class="flex items-center justify-between text-sm text-gray-500">
194
+ <span>Oct 17, 2023</span>
195
+ <button class="text-purple-600 hover:text-purple-800">
196
+ <i data-feather="edit" class="w-4 h-4"></i>
197
+ </button>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Note Card 4 -->
202
+ <div class="note-card bg-white rounded-xl shadow-sm p-6">
203
+ <div class="flex justify-between items-start mb-2">
204
+ <h3 class="text-lg font-bold text-gray-800 truncate">Team Meeting Notes</h3>
205
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Meeting</span>
206
+ </div>
207
+ <p class="text-gray-600 text-sm mb-4 line-clamp-3">Discussed Q4 goals, project timelines, and resource allocation. Need to follow up with design team.</p>
208
+ <div class="flex items-center justify-between text-sm text-gray-500">
209
+ <span>Oct 16, 2023</span>
210
+ <button class="text-purple-600 hover:text-purple-800">
211
+ <i data-feather="edit" class="w-4 h-4"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Add New Note -->
218
+ <div class="mt-6">
219
+ <button class="w-full flex items-center justify-center px-4 py-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500 hover:text-purple-600 hover:border-purple-600 transition-colors">
220
+ <i data-feather="plus" class="w-5 h-5 mr-2"></i>
221
+ <span>Add New Note</span>
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </main>
227
+
228
+ <!-- Mobile Bottom Navigation -->
229
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200">
230
+ <div class="flex justify-around items-center h-16">
231
+ <a href="index.html" class="flex flex-col items-center justify-center text-gray-500">
232
+ <i data-feather="home" class="w-5 h-5"></i>
233
+ <span class="text-xs mt-1">Home</span>
234
+ </a>
235
+ <a href="calendar.html" class="flex flex-col items-center justify-center text-gray-500">
236
+ <i data-feather="calendar" class="w-5 h-5"></i>
237
+ <span class="text-xs mt-1">Calendar</span>
238
+ </a>
239
+ <a href="tasks.html" class="flex flex-col items-center justify-center text-gray-500">
240
+ <i data-feather="check-circle" class="w-5 h-5"></i>
241
+ <span class="text-xs mt-1">Tasks</span>
242
+ </a>
243
+ <a href="notes.html" class="flex flex-col items-center justify-center text-purple-600">
244
+ <i data-feather="book" class="w-5 h-5"></i>
245
+ <span class="text-xs mt-1">Notes</span>
246
+ </a>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Add Note Modal -->
251
+ <div id="noteModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
252
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
253
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
254
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
255
+ </div>
256
+
257
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
258
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
259
+ <div class="sm:flex sm:items-start">
260
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
261
+ <i data-feather="edit-3" class="text-purple-600"></i>
262
+ </div>
263
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
264
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Create New Note</h3>
265
+ <div class="mt-2">
266
+ <form id="noteForm">
267
+ <div class="mb-4">
268
+ <label for="noteTitle" class="block text-sm font-medium text-gray-700">Title</label>
269
+ <input type="text" id="noteTitle" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500" placeholder="Note title">
270
+ </div>
271
+ <div class="mb-4">
272
+ <label for="noteType" class="block text-sm font-medium text-gray-700">Type</label>
273
+ <select id="noteType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
274
+ <option value="journal">Journal</option>
275
+ <option value="meeting">Meeting Notes</option>
276
+ <option value="brainstorm">Brainstorm</option>
277
+ <option value="brain-dump">Brain Dump</option>
278
+ <option value="todo">To-Do List</option>
279
+ <option value="other">Other</option>
280
+ </select>
281
+ </div>
282
+ <div class="mb-4">
283
+ <label for="noteTags" class="block text-sm font-medium text-gray-700">Tags</label>
284
+ <input type="text" id="noteTags" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500" placeholder="Add tags separated by commas">
285
+ </div>
286
+ <div class="mb-4">
287
+ <label for="noteContent" class="block text-sm font-medium text-gray-700">Content</label>
288
+ <textarea id="noteContent" rows="8" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 hand-writing" placeholder="Start writing..."></textarea>
289
+ </div>
290
+ </form>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
296
+ <button type="button" id="saveNote" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">Create Note</button>
297
+ <button type="button" id="cancelNote" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <script>
304
+ feather.replace();
305
+
306
+ // Mobile menu toggle functionality
307
+ document.querySelector('[data-feather="menu"]').addEventListener('click', function() {
308
+ const mobileMenu = document.getElementById('mobile-menu');
309
+ mobileMenu.classList.toggle('hidden');
310
+ });
311
+
312
+ // Note modal functionality
313
+ document.querySelector('button[aria-label="Add New Note"]').addEventListener('click', function() {
314
+ document.getElementById('noteModal').classList.remove('hidden');
315
+ });
316
+
317
+ document.getElementById('cancelNote').addEventListener('click', function() {
318
+ document.getElementById('noteModal').classList.add('hidden');
319
+ });
320
+
321
+ document.getElementById('saveNote').addEventListener('click', function() {
322
+ // Add note logic here
323
+ document.getElementById('noteModal').classList.add('hidden');
324
+ });
325
+
326
+ // Make all note cards clickable to edit
327
+ document.querySelectorAll('.note-card').forEach(card => {
328
+ card.addEventListener('click', function(e) {
329
+ if (!e.target.closest('button')) {
330
+ // Open this note in editor
331
+ const title = this.querySelector('h3').textContent;
332
+ const content = this.querySelector('p').textContent;
333
+
334
+ document.querySelector('.editor-content').textContent = content;
335
+ document.querySelector('input[placeholder="Note Title"]').value = title;
336
+
337
+ // Scroll to editor
338
+ document.querySelector('.editor-content').scrollIntoView({ behavior: 'smooth' });
339
+ }
340
+ });
341
+ });
342
+ </script>
343
+ </body>
344
+ </html>
tasks.html ADDED
@@ -0,0 +1,366 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Tasks | RainbowFocus Digital Planner</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Patrick+Hand&display=swap');
13
+
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+
18
+ .handwriting {
19
+ font-family: 'Patrick Hand', cursive;
20
+ }
21
+
22
+ .adhd-checkbox:checked {
23
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"), linear-gradient(to bottom right, #7c3aed, #f59e0b);
24
+ }
25
+
26
+ .task-category-border {
27
+ border-left-width: 4px;
28
+ }
29
+
30
+ .priority-high {
31
+ border-left-color: #f43f5e;
32
+ }
33
+
34
+ .priority-medium {
35
+ border-left-color: #f59e0b;
36
+ }
37
+
38
+ .priority-low {
39
+ border-left-color: #10b981;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
44
+ <!-- Navbar -->
45
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
46
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
47
+ <div class="flex justify-between h-16">
48
+ <div class="flex items-center">
49
+ <div class="flex-shrink-0 flex items-center">
50
+ <i data-feather="check-circle" class="text-purple-600"></i>
51
+ <span class="ml-2 text-xl font-bold text-gray-800 hand-writing">RainbowFocus</span>
52
+ </div>
53
+ </div>
54
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4">
55
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Dashboard</a>
56
+ <a href="calendar.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Calendar</a>
57
+ <a href="tasks.html" class="px-3 py-2 rounded-md text-sm font-medium text-purple-700 bg-purple-100">Tasks</a>
58
+ <a href="notes.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700">Notes</a>
59
+ </div>
60
+ <div class="flex items-center">
61
+ <button class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
62
+ <i data-feather="menu"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
70
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
71
+ <!-- Task Filters -->
72
+ <div class="lg:col-span-1">
73
+ <div class="bg-white rounded-xl shadow-sm p-6">
74
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Filters</h2>
75
+ <div class="space-y-4">
76
+ <div>
77
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Categories</h3>
78
+ <div class="space-y-2">
79
+ <div class="flex items-center">
80
+ <input type="checkbox" id="work" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
81
+ <label for="work" class="ml-2 text-sm text-gray-700">Work</label>
82
+ </div>
83
+ <div class="flex items-center">
84
+ <input type="checkbox" id="personal" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
85
+ <label for="personal" class="ml-2 text-sm text-gray-700">Personal</label>
86
+ </div>
87
+ <div class="flex items-center">
88
+ <input type="checkbox" id="health" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
89
+ <label for="health" class="ml-2 text-sm text-gray-700">Health</label>
90
+ </div>
91
+ <div class="flex items-center">
92
+ <input type="checkbox" id="finance" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
93
+ <label for="finance" class="ml-2 text-sm text-gray-700">Finance</label>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div>
98
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Priority</h3>
99
+ <div class="space-y-2">
100
+ <div class="flex items-center">
101
+ <input type="checkbox" id="high" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
102
+ <label for="high" class="ml-2 text-sm text-gray-700">High</label>
103
+ </div>
104
+ <div class="flex items-center">
105
+ <input type="checkbox" id="medium" class="h-4 w-4 text-yellow-600 focus:ring-yellow-500 border-gray-300 rounded">
106
+ <label for="medium" class="ml-2 text-sm text-gray-700">Medium</label>
107
+ </div>
108
+ <div class="flex items-center">
109
+ <input type="checkbox" id="low" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
110
+ <label for="low" class="ml-2 text-sm text-gray-700">Low</label>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ <div>
115
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Status</h3>
116
+ <div class="space-y-2">
117
+ <div class="flex items-center">
118
+ <input type="checkbox" id="completed" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
119
+ <label for="completed" class="ml-2 text-sm text-gray-700">Completed</label>
120
+ </div>
121
+ <div class="flex items-center">
122
+ <input type="checkbox" id="in-progress" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
123
+ <label for="in-progress" class="ml-2 text-sm text-gray-700">In Progress</label>
124
+ </div>
125
+ <div class="flex items-center">
126
+ <input type="checkbox" id="not-started" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
127
+ <label for="not-started" class="ml-2 text-sm text-gray-700">Not Started</label>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ <div>
132
+ <button class="w-full mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
133
+ Apply Filters
134
+ </button>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Task List -->
141
+ <div class="lg:col-span-3">
142
+ <div class="bg-white rounded-xl shadow-sm p-6">
143
+ <div class="flex justify-between items-center mb-6">
144
+ <h2 class="text-2xl font-bold text-gray-800">My Tasks</h2>
145
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center">
146
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i>
147
+ Add Task
148
+ </button>
149
+ </div>
150
+
151
+ <!-- Task Groups -->
152
+ <div class="space-y-6">
153
+ <!-- High Priority Tasks -->
154
+ <div>
155
+ <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
156
+ <i data-feather="alert-triangle" class="w-5 h-5 text-red-500 mr-2"></i>
157
+ High Priority
158
+ </h3>
159
+ <div class="space-y-3">
160
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200 task-category-border priority-high">
161
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
162
+ <div class="ml-3 flex-grow">
163
+ <div class="font-medium text-gray-700">Submit project proposal to client</div>
164
+ <div class="text-sm text-gray-500">Work • Due today at 5pm</div>
165
+ </div>
166
+ <button class="text-gray-400 hover:text-gray-500">
167
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
168
+ </button>
169
+ </div>
170
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200 task-category-border priority-high">
171
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
172
+ <div class="ml-3 flex-grow">
173
+ <div class="font-medium text-gray-700">Pay rent</div>
174
+ <div class="text-sm text-gray-500">Finance • Due tomorrow</div>
175
+ </div>
176
+ <button class="text-gray-400 hover:text-gray-500">
177
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Medium Priority Tasks -->
184
+ <div>
185
+ <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
186
+ <i data-feather="alert-circle" class="w-5 h-5 text-yellow-500 mr-2"></i>
187
+ Medium Priority
188
+ </h3>
189
+ <div class="space-y-3">
190
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200 task-category-border priority-medium">
191
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
192
+ <div class="ml-3 flex-grow">
193
+ <div class="font-medium text-gray-700">Grocery shopping</div>
194
+ <div class="text-sm text-gray-500">Personal • Due in 2 days</div>
195
+ </div>
196
+ <button class="text-gray-400 hover:text-gray-500">
197
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
198
+ </button>
199
+ </div>
200
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200 task-category-border priority-medium">
201
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
202
+ <div class="ml-3 flex-grow">
203
+ <div class="font-medium text-gray-700">Update resume</div>
204
+ <div class="text-sm text-gray-500">Work • No due date</div>
205
+ </div>
206
+ <button class="text-gray-400 hover:text-gray-500">
207
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Low Priority Tasks -->
214
+ <div>
215
+ <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
216
+ <i data-feather="alert-octagon" class="w-5 h-5 text-green-500 mr-2"></i>
217
+ Low Priority
218
+ </h3>
219
+ <div class="space-y-3">
220
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200 task-category-border priority-low">
221
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500" checked>
222
+ <div class="ml-3 flex-grow">
223
+ <div class="font-medium text-gray-700 line-through text-gray-400">Water plants</div>
224
+ <div class="text-sm text-gray-500">Personal • Completed</div>
225
+ </div>
226
+ <button class="text-gray-400 hover:text-gray-500">
227
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
228
+ </button>
229
+ </div>
230
+ <div class="flex items-center px-4 py-3 bg-white rounded-lg border border-gray-200 task-category-border priority-low">
231
+ <input type="checkbox" class="adhd-checkbox h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
232
+ <div class="ml-3 flex-grow">
233
+ <div class="font-medium text-gray-700">Read new book chapter</div>
234
+ <div class="text-sm text-gray-500">Personal • Due in a week</div>
235
+ </div>
236
+ <button class="text-gray-400 hover:text-gray-500">
237
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </main>
247
+
248
+ <!-- Mobile Bottom Navigation -->
249
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200">
250
+ <div class="flex justify-around items-center h-16">
251
+ <a href="index.html" class="flex flex-col items-center justify-center text-gray-500">
252
+ <i data-feather="home" class="w-5 h-5"></i>
253
+ <span class="text-xs mt-1">Home</span>
254
+ </a>
255
+ <a href="calendar.html" class="flex flex-col items-center justify-center text-gray-500">
256
+ <i data-feather="calendar" class="w-5 h-5"></i>
257
+ <span class="text-xs mt-1">Calendar</span>
258
+ </a>
259
+ <a href="tasks.html" class="flex flex-col items-center justify-center text-purple-600">
260
+ <i data-feather="check-circle" class="w-5 h-5"></i>
261
+ <span class="text-xs mt-1">Tasks</span>
262
+ </a>
263
+ <a href="notes.html" class="flex flex-col items-center justify-center text-gray-500">
264
+ <i data-feather="book" class="w-5 h-5"></i>
265
+ <span class="text-xs mt-1">Notes</span>
266
+ </a>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Add Task Modal -->
271
+ <div id="taskModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
272
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
273
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
274
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
275
+ </div>
276
+
277
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
278
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
279
+ <div class="sm:flex sm:items-start">
280
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
281
+ <i data-feather="plus" class="text-purple-600"></i>
282
+ </div>
283
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
284
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Add New Task</h3>
285
+ <div class="mt-2">
286
+ <form id="taskForm">
287
+ <div class="mb-4">
288
+ <label for="taskTitle" class="block text-sm font-medium text-gray-700">Task Title</label>
289
+ <input type="text" id="taskTitle" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500" placeholder="What needs to be done?">
290
+ </div>
291
+ <div class="mb-4">
292
+ <label for="taskDescription" class="block text-sm font-medium text-gray-700">Description</label>
293
+ <textarea id="taskDescription" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500" placeholder="Add details..."></textarea>
294
+ </div>
295
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
296
+ <div>
297
+ <label for="taskDueDate" class="block text-sm font-medium text-gray-700">Due Date</label>
298
+ <input type="date" id="taskDueDate" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
299
+ </div>
300
+ <div>
301
+ <label for="taskCategory" class="block text-sm font-medium text-gray-700">Category</label>
302
+ <select id="taskCategory" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
303
+ <option value="work">Work</option>
304
+ <option value="personal">Personal</option>
305
+ <option value="health">Health</option>
306
+ <option value="finance">Finance</option>
307
+ </select>
308
+ </div>
309
+ </div>
310
+ <div class="mb-4">
311
+ <label for="taskPriority" class="block text-sm font-medium text-gray-700">Priority</label>
312
+ <select id="taskPriority" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500">
313
+ <option value="high">High</option>
314
+ <option value="medium" selected>Medium</option>
315
+ <option value="low">Low</option>
316
+ </select>
317
+ </div>
318
+ </form>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
324
+ <button type="button" id="saveTask" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">Add Task</button>
325
+ <button type="button" id="cancelTask" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <script>
332
+ feather.replace();
333
+
334
+ // Mobile menu toggle functionality
335
+ document.querySelector('[data-feather="menu"]').addEventListener('click', function() {
336
+ const mobileMenu = document.getElementById('mobile-menu');
337
+ mobileMenu.classList.toggle('hidden');
338
+ });
339
+
340
+ // Task modal functionality
341
+ document.querySelector('button[aria-label="Add Task"]').addEventListener('click', function() {
342
+ document.getElementById('taskModal').classList.remove('hidden');
343
+ });
344
+
345
+ document.getElementById('cancelTask').addEventListener('click', function() {
346
+ document.getElementById('taskModal').classList.add('hidden');
347
+ });
348
+
349
+ document.getElementById('saveTask').addEventListener('click', function() {
350
+ // Add task logic here
351
+ document.getElementById('taskModal').classList.add('hidden');
352
+ });
353
+
354
+ // Custom checkbox styling
355
+ document.querySelectorAll('.adhd-checkbox').forEach(checkbox => {
356
+ checkbox.addEventListener('change', function() {
357
+ if (this.checked) {
358
+ this.parentElement.querySelector('.font-medium').classList.add('line-through', 'text-gray-400');
359
+ } else {
360
+ this.parentElement.querySelector('.font-medium').classList.remove('line-through', 'text-gray-400');
361
+ }
362
+ });
363
+ });
364
+ </script>
365
+ </body>
366
+ </html>