Hugging Face's logo

Spaces:
aegisceo
/
ai-assistant-ui
Running

App Files Community
aegisceo commited on
Commit
d85b0bb
·
verified ·
1 Parent(s): b590e60

please finish creating the rest of the site in the same style as what has already been created. The Analytics and Settings pages still remain - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +7 -5
  2. calendar.html +482 -0
  3. emails.html +461 -0
  4. index.html +456 -18
  5. notifications.html +409 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Assistant Ui
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: green
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: ai-assistant-ui
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
calendar.html ADDED
@@ -0,0 +1,482 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - NeuroFlow AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ :root {
15
+ --primary-blue: #3b82f6;
16
+ --secondary-green: #10b981;
17
+ --calm-gray: #9ca3af;
18
+ --light-bg: #f9fafb;
19
+ --card-bg: #ffffff;
20
+ --border-color: #e5e7eb;
21
+ --text-primary: #1f2937;
22
+ --text-secondary: #4b5563;
23
+ --success: #10b981;
24
+ --warning: #f59e0b;
25
+ --error: #ef4444;
26
+ --info: #3b82f6;
27
+ }
28
+
29
+ body {
30
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
31
+ background-color: var(--light-bg);
32
+ color: var(--text-primary);
33
+ }
34
+
35
+ .sidebar {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .nav-item {
40
+ transition: all 0.2s ease;
41
+ }
42
+
43
+ .nav-item:hover, .nav-item.active {
44
+ background-color: #eff6ff;
45
+ color: var(--primary-blue);
46
+ }
47
+
48
+ .card {
49
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
50
+ border: 1px solid var(--border-color);
51
+ border-radius: 0.5rem;
52
+ background-color: var(--card-bg);
53
+ }
54
+
55
+ .calendar-header {
56
+ display: flex;
57
+ justify-content: space-between;
58
+ align-items: center;
59
+ margin-bottom: 1rem;
60
+ }
61
+
62
+ .calendar-grid {
63
+ display: grid;
64
+ grid-template-columns: repeat(7, 1fr);
65
+ gap: 8px;
66
+ }
67
+
68
+ .calendar-day {
69
+ aspect-ratio: 1/1;
70
+ display: flex;
71
+ flex-direction: column;
72
+ align-items: center;
73
+ justify-content: center;
74
+ border-radius: 0.5rem;
75
+ cursor: pointer;
76
+ transition: all 0.2s ease;
77
+ }
78
+
79
+ .calendar-day:hover {
80
+ background-color: #f3f4f6;
81
+ }
82
+
83
+ .calendar-day.today {
84
+ background-color: #dbeafe;
85
+ font-weight: bold;
86
+ }
87
+
88
+ .calendar-day.has-events {
89
+ position: relative;
90
+ }
91
+
92
+ .calendar-day.has-events::after {
93
+ content: '';
94
+ position: absolute;
95
+ bottom: 4px;
96
+ width: 6px;
97
+ height: 6px;
98
+ border-radius: 50%;
99
+ background-color: var(--primary-blue);
100
+ }
101
+
102
+ .event-indicator {
103
+ width: 6px;
104
+ height: 6px;
105
+ border-radius: 50%;
106
+ display: inline-block;
107
+ margin-right: 4px;
108
+ }
109
+
110
+ .event-work {
111
+ background-color: #3b82f6;
112
+ }
113
+
114
+ .event-personal {
115
+ background-color: #10b981;
116
+ }
117
+
118
+ .event-meeting {
119
+ background-color: #8b5cf6;
120
+ }
121
+
122
+ .time-slot {
123
+ display: flex;
124
+ align-items: center;
125
+ padding: 8px 0;
126
+ border-bottom: 1px solid #f3f4f6;
127
+ }
128
+
129
+ .time-slot:last-child {
130
+ border-bottom: none;
131
+ }
132
+
133
+ .event {
134
+ position: absolute;
135
+ border-radius: 4px;
136
+ padding: 4px 8px;
137
+ font-size: 0.75rem;
138
+ overflow: hidden;
139
+ text-overflow: ellipsis;
140
+ white-space: nowrap;
141
+ }
142
+
143
+ @media (max-width: 768px) {
144
+ .sidebar {
145
+ transform: translateX(-100%);
146
+ }
147
+
148
+ .sidebar.open {
149
+ transform: translateX(0);
150
+ }
151
+
152
+ .calendar-grid {
153
+ grid-template-columns: repeat(3, 1fr);
154
+ }
155
+ }
156
+ </style>
157
+ </head>
158
+ <body class="min-h-screen">
159
+ <!-- Mobile menu button -->
160
+ <div class="md:hidden fixed top-4 left-4 z-50">
161
+ <button id="menu-toggle" class="p-2 rounded-lg bg-white shadow">
162
+ <i data-feather="menu" class="text-gray-600"></i>
163
+ </button>
164
+ </div>
165
+
166
+ <!-- Sidebar -->
167
+ <div id="sidebar" class="sidebar fixed h-full md:w-64 bg-white border-r border-gray-200 z-40 md:z-0 transform md:translate-x-0 transition-transform duration-300 ease-in-out">
168
+ <div class="p-6 border-b border-gray-200">
169
+ <h1 class="text-2xl font-bold text-gray-800">NeuroFlow AI</h1>
170
+ <p class="text-sm text-gray-500">Executive Assistant</p>
171
+ </div>
172
+ <nav class="mt-6">
173
+ <div class="px-4 space-y-1">
174
+ <a href="index.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
175
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
176
+ Dashboard
177
+ </a>
178
+ <a href="emails.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
179
+ <i data-feather="mail" class="w-5 h-5 mr-3"></i>
180
+ Emails
181
+ </a>
182
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full active">
183
+ <i data-feather="calendar" class="w-5 h-5 mr-3"></i>
184
+ Calendar
185
+ </a>
186
+ <a href="notifications.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
187
+ <i data-feather="bell" class="w-5 h-5 mr-3"></i>
188
+ Notifications
189
+ </a>
190
+ <a href="analytics.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
191
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>
192
+ Analytics
193
+ </a>
194
+ <a href="settings.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
195
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
196
+ Settings
197
+ </a>
198
+ </div>
199
+ </nav>
200
+ </div>
201
+
202
+ <!-- Main Content -->
203
+ <div class="md:ml-64">
204
+ <!-- Header -->
205
+ <header class="bg-white shadow-sm">
206
+ <div class="px-6 py-4 flex justify-between items-center">
207
+ <div>
208
+ <h2 class="text-2xl font-semibold text-gray-800">Calendar</h2>
209
+ <p class="text-gray-600">Manage your schedule with AI-powered insights</p>
210
+ </div>
211
+ <div class="flex items-center space-x-4">
212
+ <button class="p-2 rounded-full hover:bg-gray-100">
213
+ <i data-feather="bell" class="w-5 h-5 text-gray-600"></i>
214
+ </button>
215
+ <div class="flex items-center">
216
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
217
+ <span class="text-blue-800 font-medium">A</span>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </header>
223
+
224
+ <!-- Main Content Area -->
225
+ <main class="p-6">
226
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
227
+ <!-- Calendar View -->
228
+ <div class="lg:col-span-2">
229
+ <div class="card p-6">
230
+ <div class="calendar-header">
231
+ <button class="p-2 rounded-lg hover:bg-gray-100">
232
+ <i data-feather="chevron-left" class="w-5 h-5"></i>
233
+ </button>
234
+ <h3 class="text-xl font-semibold">June 2023</h3>
235
+ <button class="p-2 rounded-lg hover:bg-gray-100">
236
+ <i data-feather="chevron-right" class="w-5 h-5"></i>
237
+ </button>
238
+ </div>
239
+ <div class="grid grid-cols-7 gap-1 mb-2">
240
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Sun</div>
241
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Mon</div>
242
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Tue</div>
243
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Wed</div>
244
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Thu</div>
245
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Fri</div>
246
+ <div class="text-center text-sm font-medium text-gray-500 py-2">Sat</div>
247
+ </div>
248
+ <div class="calendar-grid">
249
+ <!-- Previous month days -->
250
+ <div class="calendar-day text-gray-400">28</div>
251
+ <div class="calendar-day text-gray-400">29</div>
252
+ <div class="calendar-day text-gray-400">30</div>
253
+ <div class="calendar-day text-gray-400">31</div>
254
+
255
+ <!-- Current month days -->
256
+ <div class="calendar-day">1</div>
257
+ <div class="calendar-day">2</div>
258
+ <div class="calendar-day">3</div>
259
+ <div class="calendar-day">4</div>
260
+ <div class="calendar-day">5</div>
261
+ <div class="calendar-day">6</div>
262
+ <div class="calendar-day">7</div>
263
+ <div class="calendar-day">8</div>
264
+ <div class="calendar-day">9</div>
265
+ <div class="calendar-day">10</div>
266
+ <div class="calendar-day">11</div>
267
+ <div class="calendar-day">12</div>
268
+ <div class="calendar-day">13</div>
269
+ <div class="calendar-day">14</div>
270
+ <div class="calendar-day">15</div>
271
+ <div class="calendar-day">16</div>
272
+ <div class="calendar-day">17</div>
273
+ <div class="calendar-day today">18</div>
274
+ <div class="calendar-day">19</div>
275
+ <div class="calendar-day">20</div>
276
+ <div class="calendar-day">21</div>
277
+ <div class="calendar-day">22</div>
278
+ <div class="calendar-day">23</div>
279
+ <div class="calendar-day">24</div>
280
+ <div class="calendar-day">25</div>
281
+ <div class="calendar-day">26</div>
282
+ <div class="calendar-day">27</div>
283
+ <div class="calendar-day">28</div>
284
+ <div class="calendar-day">29</div>
285
+ <div class="calendar-day">30</div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Upcoming Events -->
291
+ <div>
292
+ <div class="card p-6 mb-6">
293
+ <h3 class="text-lg font-semibold mb-4">Today's Schedule</h3>
294
+ <div class="space-y-4">
295
+ <!-- Event 1 -->
296
+ <div class="p-4 bg-blue-50 rounded-lg">
297
+ <div class="flex justify-between">
298
+ <h4 class="font-medium">Team Meeting</h4>
299
+ <span class="text-sm text-gray-500">9:00 AM</span>
300
+ </div>
301
+ <p class="text-sm text-gray-600 mt-1">Weekly sync with development team</p>
302
+ <div class="flex items-center mt-2">
303
+ <span class="event-indicator event-meeting"></span>
304
+ <span class="text-xs text-gray-500">Meeting</span>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Event 2 -->
309
+ <div class="p-4 bg-green-50 rounded-lg">
310
+ <div class="flex justify-between">
311
+ <h4 class="font-medium">Lunch with Client</h4>
312
+ <span class="text-sm text-gray-500">12:30 PM</span>
313
+ </div>
314
+ <p class="text-sm text-gray-600 mt-1">Discuss project requirements</p>
315
+ <div class="flex items-center mt-2">
316
+ <span class="event-indicator event-work"></span>
317
+ <span class="text-xs text-gray-500">Work</span>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Event 3 -->
322
+ <div class="p-4 bg-purple-50 rounded-lg">
323
+ <div class="flex justify-between">
324
+ <h4 class="font-medium">Doctor's Appointment</h4>
325
+ <span class="text-sm text-gray-500">3:00 PM</span>
326
+ </div>
327
+ <p class="text-sm text-gray-600 mt-1">Annual checkup</p>
328
+ <div class="flex items-center mt-2">
329
+ <span class="event-indicator event-personal"></span>
330
+ <span class="text-xs text-gray-500">Personal</span>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- AI Suggestions -->
337
+ <div class="card p-6">
338
+ <h3 class="text-lg font-semibold mb-4">AI Suggestions</h3>
339
+ <div class="space-y-4">
340
+ <div class="p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
341
+ <h4 class="font-medium text-yellow-800">Time Conflict Detected</h4>
342
+ <p class="text-sm text-yellow-700 mt-1">Your meeting overlaps with lunch. Consider rescheduling.</p>
343
+ <button class="mt-2 text-sm text-yellow-700 font-medium">View Details</button>
344
+ </div>
345
+
346
+ <div class="p-4 bg-blue-50 rounded-lg">
347
+ <h4 class="font-medium">Optimize Schedule</h4>
348
+ <p class="text-sm text-gray-600 mt-1">Group similar tasks together for better focus.</p>
349
+ <button class="mt-2 text-sm text-blue-700 font-medium">Apply Suggestion</button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Weekly View -->
357
+ <div class="card mt-6 p-6">
358
+ <h3 class="text-lg font-semibold mb-4">This Week</h3>
359
+ <div class="relative">
360
+ <!-- Time slots -->
361
+ <div class="absolute left-0 top-0 w-16 h-full">
362
+ <div class="time-slot h-16"></div>
363
+ <div class="time-slot h-16"></div>
364
+ <div class="time-slot h-16"></div>
365
+ <div class="time-slot h-16"></div>
366
+ <div class="time-slot h-16"></div>
367
+ <div class="time-slot h-16"></div>
368
+ <div class="time-slot h-16"></div>
369
+ <div class="time-slot h-16"></div>
370
+ <div class="time-slot h-16"></div>
371
+ <div class="time-slot h-16"></div>
372
+ <div class="time-slot h-16"></div>
373
+ <div class="time-slot h-16"></div>
374
+ <div class="time-slot h-16"></div>
375
+ <div class="time-slot h-16"></div>
376
+ <div class="time-slot h-16"></div>
377
+ <div class="time-slot h-16"></div>
378
+ <div class="time-slot h-16"></div>
379
+ <div class="time-slot h-16"></div>
380
+ <div class="time-slot h-16"></div>
381
+ <div class="time-slot h-16"></div>
382
+ <div class="time-slot h-16"></div>
383
+ <div class="time-slot h-16"></div>
384
+ <div class="time-slot h-16"></div>
385
+ <div class="time-slot h-16"></div>
386
+ </div>
387
+
388
+ <!-- Days of the week -->
389
+ <div class="ml-16 grid grid-cols-7 gap-2">
390
+ <div class="text-center font-medium">Monday</div>
391
+ <div class="text-center font-medium">Tuesday</div>
392
+ <div class="text-center font-medium">Wednesday</div>
393
+ <div class="text-center font-medium">Thursday</div>
394
+ <div class="text-center font-medium">Friday</div>
395
+ <div class="text-center font-medium">Saturday</div>
396
+ <div class="text-center font-medium">Sunday</div>
397
+
398
+ <!-- Monday events -->
399
+ <div class="relative col-span-1">
400
+ <div class="event" style="top: 4rem; height: 2rem; background-color: #dbeafe; color: #1e40af;">
401
+ Team Meeting
402
+ </div>
403
+ <div class="event" style="top: 10rem; height: 1.5rem; background-color: #dcfce7; color: #15803d;">
404
+ Project Work
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Tuesday events -->
409
+ <div class="relative col-span-1">
410
+ <div class="event" style="top: 6rem; height: 1.5rem; background-color: #ede9fe; color: #5b21b1;">
411
+ Client Call
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Wednesday events -->
416
+ <div class="relative col-span-1">
417
+ <div class="event" style="top: 8rem; height: 2rem; background-color: #fef3c7; color: #d97706;">
418
+ Training Session
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Thursday events -->
423
+ <div class="relative col-span-1">
424
+ <div class="event" style="top: 12rem; height: 1.5rem; background-color: #f0f9ff; color: #0369a1;">
425
+ Review Meeting
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Friday events -->
430
+ <div class="relative col-span-1">
431
+ <div class="event" style="top: 14rem; height: 1.5rem; background-color: #f3e8ff; color: #7e22ce;">
432
+ Planning Session
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Saturday events -->
437
+ <div class="relative col-span-1">
438
+ </div>
439
+
440
+ <!-- Sunday events -->
441
+ <div class="relative col-span-1">
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </main>
447
+ </div>
448
+
449
+ <script>
450
+ // Initialize Feather Icons
451
+ feather.replace();
452
+
453
+ // Mobile menu toggle
454
+ document.getElementById('menu-toggle').addEventListener('click', function() {
455
+ document.getElementById('sidebar').classList.toggle('open');
456
+ });
457
+
458
+ // Close sidebar when clicking outside on mobile
459
+ document.addEventListener('click', function(event) {
460
+ const sidebar = document.getElementById('sidebar');
461
+ const menuToggle = document.getElementById('menu-toggle');
462
+
463
+ if (window.innerWidth < 768 &&
464
+ !sidebar.contains(event.target) &&
465
+ event.target !== menuToggle &&
466
+ !menuToggle.contains(event.target)) {
467
+ sidebar.classList.remove('open');
468
+ }
469
+ });
470
+
471
+ // Set active nav item
472
+ document.addEventListener('DOMContentLoaded', function() {
473
+ const navItems = document.querySelectorAll('.nav-item');
474
+ navItems.forEach(item => {
475
+ if (item.getAttribute('href') === window.location.pathname.split('/').pop()) {
476
+ item.classList.add('active');
477
+ }
478
+ });
479
+ });
480
+ </script>
481
+ </body>
482
+ </html>
emails.html ADDED
@@ -0,0 +1,461 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Emails - NeuroFlow AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ :root {
15
+ --primary-blue: #3b82f6;
16
+ --secondary-green: #10b981;
17
+ --calm-gray: #9ca3af;
18
+ --light-bg: #f9fafb;
19
+ --card-bg: #ffffff;
20
+ --border-color: #e5e7eb;
21
+ --text-primary: #1f2937;
22
+ --text-secondary: #4b5563;
23
+ --success: #10b981;
24
+ --warning: #f59e0b;
25
+ --error: #ef4444;
26
+ --info: #3b82f6;
27
+ }
28
+
29
+ body {
30
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
31
+ background-color: var(--light-bg);
32
+ color: var(--text-primary);
33
+ }
34
+
35
+ .sidebar {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .nav-item {
40
+ transition: all 0.2s ease;
41
+ }
42
+
43
+ .nav-item:hover, .nav-item.active {
44
+ background-color: #eff6ff;
45
+ color: var(--primary-blue);
46
+ }
47
+
48
+ .card {
49
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
50
+ border: 1px solid var(--border-color);
51
+ border-radius: 0.5rem;
52
+ background-color: var(--card-bg);
53
+ }
54
+
55
+ .email-category {
56
+ padding: 0.25rem 0.5rem;
57
+ border-radius: 9999px;
58
+ font-size: 0.75rem;
59
+ font-weight: 500;
60
+ }
61
+
62
+ .category-work {
63
+ background-color: #dbeafe;
64
+ color: #1d4ed8;
65
+ }
66
+
67
+ .category-personal {
68
+ background-color: #dcfce7;
69
+ color: #15803d;
70
+ }
71
+
72
+ .category-financial {
73
+ background-color: #fef3c7;
74
+ color: #d97706;
75
+ }
76
+
77
+ .category-opportunities {
78
+ background-color: #ede9fe;
79
+ color: #7c3aed;
80
+ }
81
+
82
+ .category-newsletters {
83
+ background-color: #e0f2fe;
84
+ color: #0369a1;
85
+ }
86
+
87
+ .category-spam {
88
+ background-color: #fee2e2;
89
+ color: #b91c1c;
90
+ }
91
+
92
+ .urgency-1 { background-color: #dcfce7; }
93
+ .urgency-2 { background-color: #bbf7d0; }
94
+ .urgency-3 { background-color: #fef3c7; }
95
+ .urgency-4 { background-color: #fed7aa; }
96
+ .urgency-5 { background-color: #fecaca; }
97
+
98
+ .email-row {
99
+ transition: all 0.2s ease;
100
+ }
101
+
102
+ .email-row:hover {
103
+ background-color: #f9fafb;
104
+ }
105
+
106
+ .email-row.unread {
107
+ background-color: #f0f9ff;
108
+ }
109
+
110
+ .email-row.selected {
111
+ background-color: #e0f2fe;
112
+ }
113
+
114
+ .filter-btn {
115
+ transition: all 0.2s ease;
116
+ }
117
+
118
+ .filter-btn.active {
119
+ background-color: #dbeafe;
120
+ color: #1d4ed8;
121
+ }
122
+
123
+ @media (max-width: 768px) {
124
+ .sidebar {
125
+ transform: translateX(-100%);
126
+ }
127
+
128
+ .sidebar.open {
129
+ transform: translateX(0);
130
+ }
131
+ }
132
+ </style>
133
+ </head>
134
+ <body class="min-h-screen">
135
+ <!-- Mobile menu button -->
136
+ <div class="md:hidden fixed top-4 left-4 z-50">
137
+ <button id="menu-toggle" class="p-2 rounded-lg bg-white shadow">
138
+ <i data-feather="menu" class="text-gray-600"></i>
139
+ </button>
140
+ </div>
141
+
142
+ <!-- Sidebar -->
143
+ <div id="sidebar" class="sidebar fixed h-full md:w-64 bg-white border-r border-gray-200 z-40 md:z-0 transform md:translate-x-0 transition-transform duration-300 ease-in-out">
144
+ <div class="p-6 border-b border-gray-200">
145
+ <h1 class="text-2xl font-bold text-gray-800">NeuroFlow AI</h1>
146
+ <p class="text-sm text-gray-500">Executive Assistant</p>
147
+ </div>
148
+ <nav class="mt-6">
149
+ <div class="px-4 space-y-1">
150
+ <a href="index.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
151
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
152
+ Dashboard
153
+ </a>
154
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full active">
155
+ <i data-feather="mail" class="w-5 h-5 mr-3"></i>
156
+ Emails
157
+ </a>
158
+ <a href="calendar.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
159
+ <i data-feather="calendar" class="w-5 h-5 mr-3"></i>
160
+ Calendar
161
+ </a>
162
+ <a href="notifications.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
163
+ <i data-feather="bell" class="w-5 h-5 mr-3"></i>
164
+ Notifications
165
+ </a>
166
+ <a href="analytics.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
167
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>
168
+ Analytics
169
+ </a>
170
+ <a href="settings.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
171
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
172
+ Settings
173
+ </a>
174
+ </div>
175
+ </nav>
176
+ </div>
177
+
178
+ <!-- Main Content -->
179
+ <div class="md:ml-64">
180
+ <!-- Header -->
181
+ <header class="bg-white shadow-sm">
182
+ <div class="px-6 py-4 flex justify-between items-center">
183
+ <div>
184
+ <h2 class="text-2xl font-semibold text-gray-800">Emails</h2>
185
+ <p class="text-gray-600">Manage your inbox with AI-powered classification</p>
186
+ </div>
187
+ <div class="flex items-center space-x-4">
188
+ <button class="p-2 rounded-full hover:bg-gray-100">
189
+ <i data-feather="bell" class="w-5 h-5 text-gray-600"></i>
190
+ </button>
191
+ <div class="flex items-center">
192
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
193
+ <span class="text-blue-800 font-medium">A</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </header>
199
+
200
+ <!-- Main Content Area -->
201
+ <main class="p-6">
202
+ <!-- Filters -->
203
+ <div class="card p-4 mb-6">
204
+ <div class="flex flex-wrap gap-2">
205
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
206
+ All
207
+ </button>
208
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 active">
209
+ Work
210
+ </button>
211
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
212
+ Personal
213
+ </button>
214
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
215
+ Financial
216
+ </button>
217
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
218
+ Opportunities
219
+ </button>
220
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
221
+ Newsletters
222
+ </button>
223
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
224
+ Spam
225
+ </button>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Email List -->
230
+ <div class="card">
231
+ <div class="p-4 border-b border-gray-200">
232
+ <div class="flex items-center justify-between">
233
+ <div class="flex items-center space-x-4">
234
+ <div class="flex items-center">
235
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
236
+ </div>
237
+ <div class="flex items-center space-x-2">
238
+ <button class="p-1 rounded hover:bg-gray-100">
239
+ <i data-feather="archive" class="w-4 h-4 text-gray-600"></i>
240
+ </button>
241
+ <button class="p-1 rounded hover:bg-gray-100">
242
+ <i data-feather="trash" class="w-4 h-4 text-gray-600"></i>
243
+ </button>
244
+ </div>
245
+ </div>
246
+ <div class="flex items-center">
247
+ <button class="p-1 rounded hover:bg-gray-100">
248
+ <i data-feather="refresh-ccw" class="w-4 h-4 text-gray-600"></i>
249
+ </button>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Email Items -->
255
+ <div class="divide-y divide-gray-200">
256
+ <!-- Email 1 -->
257
+ <div class="email-row p-4 hover:bg-gray-50 cursor-pointer">
258
+ <div class="flex items-center">
259
+ <div class="flex items-center w-12">
260
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
261
+ </div>
262
+ <div class="flex-1 min-w-0">
263
+ <div class="flex items-center">
264
+ <span class="email-category category-work mr-2">Work</span>
265
+ <span class="text-sm font-medium text-gray-900 truncate">Project Update - Q3 Deliverables</span>
266
+ </div>
267
+ <div class="flex items-center mt-1">
268
+ <span class="text-xs text-gray-500 truncate">From: manager@company.com</span>
269
+ <span class="mx-2 text-gray-300">•</span>
270
+ <span class="text-xs text-gray-500">2 hours ago</span>
271
+ </div>
272
+ </div>
273
+ <div class="flex items-center">
274
+ <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">Urgency 5</span>
275
+ <button class="ml-2 p-1 rounded-full hover:bg-gray-200">
276
+ <i data-feather="star" class="w-4 h-4 text-gray-400"></i>
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Email 2 -->
283
+ <div class="email-row p-4 hover:bg-gray-50 cursor-pointer">
284
+ <div class="flex items-center">
285
+ <div class="flex items-center w-12">
286
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
287
+ </div>
288
+ <div class="flex-1 min-w-0">
289
+ <div class="flex items-center">
290
+ <span class="email-category category-newsletters mr-2">Newsletter</span>
291
+ <span class="text-sm font-medium text-gray-900 truncate">Weekly Tech Digest - Latest Innovations</span>
292
+ </div>
293
+ <div class="flex items-center mt-1">
294
+ <span class="text-xs text-gray-500 truncate">From: newsletter@techdigest.com</span>
295
+ <span class="mx-2 text-gray-300">•</span>
296
+ <span class="text-xs text-gray-500">Yesterday</span>
297
+ </div>
298
+ </div>
299
+ <div class="flex items-center">
300
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Urgency 1</span>
301
+ <button class="ml-2 p-1 rounded-full hover:bg-gray-200">
302
+ <i data-feather="star" class="w-4 h-4 text-gray-400"></i>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Email 3 -->
309
+ <div class="email-row p-4 hover:bg-gray-50 cursor-pointer">
310
+ <div class="flex items-center">
311
+ <div class="flex items-center w-12">
312
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" checked>
313
+ </div>
314
+ <div class="flex-1 min-w-0">
315
+ <div class="flex items-center">
316
+ <span class="email-category category-financial mr-2">Financial</span>
317
+ <span class="text-sm font-medium text-gray-900 truncate">Invoice #INV-2023-0045</span>
318
+ </div>
319
+ <div class="flex items-center mt-1">
320
+ <span class="text-xs text-gray-500 truncate">From: billing@company.com</span>
321
+ <span class="mx-2 text-gray-300">•</span>
322
+ <span class="text-xs text-gray-500">3 days ago</span>
323
+ </div>
324
+ </div>
325
+ <div class="flex items-center">
326
+ <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Urgency 3</span>
327
+ <button class="ml-2 p-1 rounded-full hover:bg-gray-200">
328
+ <i data-feather="star" class="w-4 h-4 text-yellow-500 fill-current"></i>
329
+ </button>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Email 4 -->
335
+ <div class="email-row p-4 hover:bg-gray-50 cursor-pointer">
336
+ <div class="flex items-center">
337
+ <div class="flex items-center w-12">
338
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
339
+ </div>
340
+ <div class="flex-1 min-w-0">
341
+ <div class="flex items-center">
342
+ <span class="email-category category-opportunities mr-2">Opportunities</span>
343
+ <span class="text-sm font-medium text-gray-900 truncate">Job Opportunity - Senior Product Manager</span>
344
+ </div>
345
+ <div class="flex items-center mt-1">
346
+ <span class="text-xs text-gray-500 truncate">From: careers@techcorp.com</span>
347
+ <span class="mx-2 text-gray-300">•</span>
348
+ <span class="text-xs text-gray-500">1 week ago</span>
349
+ </div>
350
+ </div>
351
+ <div class="flex items-center">
352
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Urgency 2</span>
353
+ <button class="ml-2 p-1 rounded-full hover:bg-gray-200">
354
+ <i data-feather="star" class="w-4 h-4 text-gray-400"></i>
355
+ </button>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Email 5 -->
361
+ <div class="email-row p-4 hover:bg-gray-50 cursor-pointer">
362
+ <div class="flex items-center">
363
+ <div class="flex items-center w-12">
364
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
365
+ </div>
366
+ <div class="flex-1 min-w-0">
367
+ <div class="flex items-center">
368
+ <span class="email-category category-personal mr-2">Personal</span>
369
+ <span class="text-sm font-medium text-gray-900 truncate">Family Gathering This Weekend</span>
370
+ </div>
371
+ <div class="flex items-center mt-1">
372
+ <span class="text-xs text-gray-500 truncate">From: family@example.com</span>
373
+ <span class="mx-2 text-gray-300">•</span>
374
+ <span class="text-xs text-gray-500">2 weeks ago</span>
375
+ </div>
376
+ </div>
377
+ <div class="flex items-center">
378
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Urgency 1</span>
379
+ <button class="ml-2 p-1 rounded-full hover:bg-gray-200">
380
+ <i data-feather="star" class="w-4 h-4 text-gray-400"></i>
381
+ </button>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Pagination -->
388
+ <div class="p-4 border-t border-gray-200 flex items-center justify-between">
389
+ <div class="text-sm text-gray-600">
390
+ Showing 1 to 5 of 127 emails
391
+ </div>
392
+ <div class="flex space-x-2">
393
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
394
+ Previous
395
+ </button>
396
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
397
+ 1
398
+ </button>
399
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
400
+ 2
401
+ </button>
402
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
403
+ 3
404
+ </button>
405
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
406
+ Next
407
+ </button>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </main>
412
+ </div>
413
+
414
+ <script>
415
+ // Initialize Feather Icons
416
+ feather.replace();
417
+
418
+ // Mobile menu toggle
419
+ document.getElementById('menu-toggle').addEventListener('click', function() {
420
+ document.getElementById('sidebar').classList.toggle('open');
421
+ });
422
+
423
+ // Close sidebar when clicking outside on mobile
424
+ document.addEventListener('click', function(event) {
425
+ const sidebar = document.getElementById('sidebar');
426
+ const menuToggle = document.getElementById('menu-toggle');
427
+
428
+ if (window.innerWidth < 768 &&
429
+ !sidebar.contains(event.target) &&
430
+ event.target !== menuToggle &&
431
+ !menuToggle.contains(event.target)) {
432
+ sidebar.classList.remove('open');
433
+ }
434
+ });
435
+
436
+ // Set active nav item
437
+ document.addEventListener('DOMContentLoaded', function() {
438
+ const navItems = document.querySelectorAll('.nav-item');
439
+ navItems.forEach(item => {
440
+ if (item.getAttribute('href') === window.location.pathname.split('/').pop()) {
441
+ item.classList.add('active');
442
+ }
443
+ });
444
+ });
445
+
446
+ // Filter buttons
447
+ document.addEventListener('DOMContentLoaded', function() {
448
+ const filterButtons = document.querySelectorAll('.filter-btn');
449
+
450
+ filterButtons.forEach(button => {
451
+ button.addEventListener('click', function() {
452
+ // Remove active class from all buttons
453
+ filterButtons.forEach(btn => btn.classList.remove('active'));
454
+ // Add active class to clicked button
455
+ this.classList.add('active');
456
+ });
457
+ });
458
+ });
459
+ </script>
460
+ </body>
461
+ </html>
index.html CHANGED
@@ -1,19 +1,457 @@
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>NeuroFlow AI - Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ :root {
15
+ --primary-blue: #3b82f6;
16
+ --secondary-green: #10b981;
17
+ --calm-gray: #9ca3af;
18
+ --light-bg: #f9fafb;
19
+ --card-bg: #ffffff;
20
+ --border-color: #e5e7eb;
21
+ --text-primary: #1f2937;
22
+ --text-secondary: #4b5563;
23
+ --success: #10b981;
24
+ --warning: #f59e0b;
25
+ --error: #ef4444;
26
+ --info: #3b82f6;
27
+ }
28
+
29
+ body {
30
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
31
+ background-color: var(--light-bg);
32
+ color: var(--text-primary);
33
+ }
34
+
35
+ .sidebar {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .nav-item {
40
+ transition: all 0.2s ease;
41
+ }
42
+
43
+ .nav-item:hover, .nav-item.active {
44
+ background-color: #eff6ff;
45
+ color: var(--primary-blue);
46
+ }
47
+
48
+ .card {
49
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
50
+ border: 1px solid var(--border-color);
51
+ border-radius: 0.5rem;
52
+ background-color: var(--card-bg);
53
+ }
54
+
55
+ .priority-high {
56
+ border-left: 4px solid #ef4444;
57
+ }
58
+
59
+ .priority-medium {
60
+ border-left: 4px solid #f59e0b;
61
+ }
62
+
63
+ .priority-low {
64
+ border-left: 4px solid #10b981;
65
+ }
66
+
67
+ .status-indicator {
68
+ width: 12px;
69
+ height: 12px;
70
+ border-radius: 50%;
71
+ display: inline-block;
72
+ }
73
+
74
+ .status-connected {
75
+ background-color: var(--success);
76
+ }
77
+
78
+ .status-disconnected {
79
+ background-color: var(--error);
80
+ }
81
+
82
+ .email-category {
83
+ padding: 0.25rem 0.5rem;
84
+ border-radius: 9999px;
85
+ font-size: 0.75rem;
86
+ font-weight: 500;
87
+ }
88
+
89
+ .category-work {
90
+ background-color: #dbeafe;
91
+ color: #1d4ed8;
92
+ }
93
+
94
+ .category-personal {
95
+ background-color: #dcfce7;
96
+ color: #15803d;
97
+ }
98
+
99
+ .category-financial {
100
+ background-color: #fef3c7;
101
+ color: #d97706;
102
+ }
103
+
104
+ .category-opportunities {
105
+ background-color: #ede9fe;
106
+ color: #7c3aed;
107
+ }
108
+
109
+ .category-newsletters {
110
+ background-color: #e0f2fe;
111
+ color: #0369a1;
112
+ }
113
+
114
+ .category-spam {
115
+ background-color: #fee2e2;
116
+ color: #b91c1c;
117
+ }
118
+
119
+ .urgency-1 { background-color: #dcfce7; }
120
+ .urgency-2 { background-color: #bbf7d0; }
121
+ .urgency-3 { background-color: #fef3c7; }
122
+ .urgency-4 { background-color: #fed7aa; }
123
+ .urgency-5 { background-color: #fecaca; }
124
+
125
+ .progress-bar {
126
+ height: 8px;
127
+ border-radius: 9999px;
128
+ background-color: #e5e7eb;
129
+ overflow: hidden;
130
+ }
131
+
132
+ .progress-fill {
133
+ height: 100%;
134
+ border-radius: 9999px;
135
+ background-color: var(--primary-blue);
136
+ }
137
+
138
+ .working-hours {
139
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
140
+ }
141
+
142
+ @media (max-width: 768px) {
143
+ .sidebar {
144
+ transform: translateX(-100%);
145
+ }
146
+
147
+ .sidebar.open {
148
+ transform: translateX(0);
149
+ }
150
+ }
151
+ </style>
152
+ </head>
153
+ <body class="min-h-screen">
154
+ <!-- Mobile menu button -->
155
+ <div class="md:hidden fixed top-4 left-4 z-50">
156
+ <button id="menu-toggle" class="p-2 rounded-lg bg-white shadow">
157
+ <i data-feather="menu" class="text-gray-600"></i>
158
+ </button>
159
+ </div>
160
+
161
+ <!-- Sidebar -->
162
+ <div id="sidebar" class="sidebar fixed h-full md:w-64 bg-white border-r border-gray-200 z-40 md:z-0 transform md:translate-x-0 transition-transform duration-300 ease-in-out">
163
+ <div class="p-6 border-b border-gray-200">
164
+ <h1 class="text-2xl font-bold text-gray-800">NeuroFlow AI</h1>
165
+ <p class="text-sm text-gray-500">Executive Assistant</p>
166
+ </div>
167
+ <nav class="mt-6">
168
+ <div class="px-4 space-y-1">
169
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
170
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
171
+ Dashboard
172
+ </a>
173
+ <a href="emails.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
174
+ <i data-feather="mail" class="w-5 h-5 mr-3"></i>
175
+ Emails
176
+ </a>
177
+ <a href="calendar.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
178
+ <i data-feather="calendar" class="w-5 h-5 mr-3"></i>
179
+ Calendar
180
+ </a>
181
+ <a href="notifications.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
182
+ <i data-feather="bell" class="w-5 h-5 mr-3"></i>
183
+ Notifications
184
+ </a>
185
+ <a href="analytics.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
186
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>
187
+ Analytics
188
+ </a>
189
+ <a href="settings.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
190
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
191
+ Settings
192
+ </a>
193
+ </div>
194
+ </nav>
195
+ </div>
196
+
197
+ <!-- Main Content -->
198
+ <div class="md:ml-64">
199
+ <!-- Header -->
200
+ <header class="bg-white shadow-sm">
201
+ <div class="px-6 py-4 flex justify-between items-center">
202
+ <div>
203
+ <h2 class="text-2xl font-semibold text-gray-800">Dashboard</h2>
204
+ <p class="text-gray-600">Welcome back, Alex. Here's what you need to focus on today.</p>
205
+ </div>
206
+ <div class="flex items-center space-x-4">
207
+ <button class="p-2 rounded-full hover:bg-gray-100">
208
+ <i data-feather="bell" class="w-5 h-5 text-gray-600"></i>
209
+ </button>
210
+ <div class="flex items-center">
211
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
212
+ <span class="text-blue-800 font-medium">A</span>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </header>
218
+
219
+ <!-- Main Content Area -->
220
+ <main class="p-6">
221
+ <!-- Connection Status Cards -->
222
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
223
+ <div class="card p-6">
224
+ <div class="flex justify-between items-start">
225
+ <div>
226
+ <h3 class="text-lg font-medium text-gray-800">Gmail Connection</h3>
227
+ <p class="text-gray-600 mt-1">Connected to alex@example.com</p>
228
+ </div>
229
+ <div class="flex items-center">
230
+ <span class="status-indicator status-connected"></span>
231
+ <span class="ml-2 text-green-600 font-medium">Connected</span>
232
+ </div>
233
+ </div>
234
+ <div class="mt-4">
235
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">
236
+ Refresh Connection
237
+ </button>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="card p-6">
242
+ <div class="flex justify-between items-start">
243
+ <div>
244
+ <h3 class="text-lg font-medium text-gray-800">Calendar Integration</h3>
245
+ <p class="text-gray-600 mt-1">Google Calendar Synced</p>
246
+ </div>
247
+ <div class="flex items-center">
248
+ <span class="status-indicator status-connected"></span>
249
+ <span class="ml-2 text-green-600 font-medium">Connected</span>
250
+ </div>
251
+ </div>
252
+ <div class="mt-4">
253
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">
254
+ Manage Permissions
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Priority Dashboard -->
261
+ <div class="card mb-8">
262
+ <div class="p-6 border-b border-gray-200">
263
+ <div class="flex justify-between items-center">
264
+ <h2 class="text-xl font-semibold text-gray-800">Priority Inbox</h2>
265
+ <div class="flex space-x-2">
266
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium">
267
+ Work Hours: 9AM - 5PM
268
+ </button>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ <div class="p-6">
273
+ <div class="space-y-4">
274
+ <!-- Email Item 1 -->
275
+ <div class="priority-high p-4 bg-white rounded-lg border border-gray-200">
276
+ <div class="flex items-start">
277
+ <div class="flex-shrink-0 mr-4">
278
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
279
+ <i class="fas fa-exclamation-circle text-red-500"></i>
280
+ </div>
281
+ </div>
282
+ <div class="flex-1 min-w-0">
283
+ <div class="flex items-center">
284
+ <h3 class="text-sm font-medium text-gray-900 truncate">Urgent: Project Deadline Approaching</h3>
285
+ <span class="ml-2 px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Urgent</span>
286
+ </div>
287
+ <p class="text-sm text-gray-600 truncate">From: manager@company.com</p>
288
+ <p class="text-sm text-gray-500 mt-1">Action required: Please review the project deliverables by EOD</p>
289
+ <div class="flex items-center mt-2">
290
+ <span class="email-category category-work">Work</span>
291
+ <span class="ml-2 text-xs text-gray-500">Received 2 hours ago</span>
292
+ </div>
293
+ </div>
294
+ <div class="flex-shrink-0 ml-4">
295
+ <span class="text-xs font-medium text-gray-500">9:45 AM</span>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Email Item 2 -->
301
+ <div class="priority-medium p-4 bg-white rounded-lg border border-gray-200">
302
+ <div class="flex items-start">
303
+ <div class="flex-shrink-0 mr-4">
304
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
305
+ <i class="fas fa-clock text-yellow-500"></i>
306
+ </div>
307
+ </div>
308
+ <div class="flex-1 min-w-0">
309
+ <div class="flex items-center">
310
+ <h3 class="text-sm font-medium text-gray-900 truncate">Meeting Reminder: Team Sync</h3>
311
+ <span class="ml-2 px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Soon</span>
312
+ </div>
313
+ <p class="text-sm text-gray-600 truncate">From: team@company.com</p>
314
+ <p class="text-sm text-gray-500 mt-1">Reminder: Weekly team sync meeting in 30 minutes</p>
315
+ <div class="flex items-center mt-2">
316
+ <span class="email-category category-work">Work</span>
317
+ <span class="ml-2 text-xs text-gray-500">Received 1 day ago</span>
318
+ </div>
319
+ </div>
320
+ <div class="flex-shrink-0 ml-4">
321
+ <span class="text-xs font-medium text-gray-500">Yesterday</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Email Item 3 -->
327
+ <div class="priority-low p-4 bg-white rounded-lg border border-gray-200">
328
+ <div class="flex items-start">
329
+ <div class="flex-shrink-0 mr-4">
330
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
331
+ <i class="fas fa-info-circle text-green-500"></i>
332
+ </div>
333
+ </div>
334
+ <div class="flex-1 min-w-0">
335
+ <div class="flex items-center">
336
+ <h3 class="text-sm font-medium text-gray-900 truncate">Newsletter: Industry Updates</h3>
337
+ <span class="ml-2 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Newsletter</span>
338
+ </div>
339
+ <p class="text-sm text-gray-600 truncate">From: updates@industry.com</p>
340
+ <p class="text-sm text-gray-500 mt-1">Weekly industry insights and trends</p>
341
+ <div class="flex items-center mt-2">
342
+ <span class="email-category category-newsletters">Newsletters</span>
343
+ <span class="ml-2 text-xs text-gray-500">Received 3 days ago</span>
344
+ </div>
345
+ </div>
346
+ <div class="flex-shrink-0 ml-4">
347
+ <span class="text-xs font-medium text-gray-500">3 days ago</span>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Working Hours & AI Processing -->
356
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
357
+ <!-- Working Hours -->
358
+ <div class="card working-hours p-6">
359
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Working Hours</h3>
360
+ <div class="flex items-center">
361
+ <div class="flex-1">
362
+ <p class="text-sm text-gray-600">Current Status</p>
363
+ <p class="text-2xl font-bold text-gray-800 mt-1">Within Working Hours</p>
364
+ <p class="text-sm text-gray-600 mt-2">Notifications will be sent immediately</p>
365
+ </div>
366
+ <div class="w-16 h-16 rounded-full bg-white flex items-center justify-center shadow">
367
+ <i class="fas fa-clock text-blue-500 text-2xl"></i>
368
+ </div>
369
+ </div>
370
+ <div class="mt-6">
371
+ <div class="flex justify-between text-sm text-gray-600 mb-2">
372
+ <span>9:00 AM</span>
373
+ <span>5:00 PM</span>
374
+ </div>
375
+ <div class="progress-bar">
376
+ <div class="progress-fill" style="width: 65%"></div>
377
+ </div>
378
+ <p class="text-xs text-gray-500 text-center mt-2">4 hours remaining today</p>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- AI Processing -->
383
+ <div class="card p-6">
384
+ <h3 class="text-lg font-medium text-gray-800 mb-4">AI Processing</h3>
385
+ <div class="space-y-4">
386
+ <div>
387
+ <div class="flex justify-between text-sm mb-1">
388
+ <span>Email Classification</span>
389
+ <span>98%</span>
390
+ </div>
391
+ <div class="progress-bar">
392
+ <div class="progress-fill bg-green-500" style="width: 98%"></div>
393
+ </div>
394
+ </div>
395
+ <div>
396
+ <div class="flex justify-between text-sm mb-1">
397
+ <span>Calendar Sync</span>
398
+ <span>100%</span>
399
+ </div>
400
+ <div class="progress-bar">
401
+ <div class="progress-fill bg-green-500" style="width: 100%"></div>
402
+ </div>
403
+ </div>
404
+ <div>
405
+ <div class="flex justify-between text-sm mb-1">
406
+ <span>Priority Scoring</span>
407
+ <span>92%</span>
408
+ </div>
409
+ <div class="progress-bar">
410
+ <div class="progress-fill bg-green-500" style="width: 92%"></div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ <div class="mt-6">
415
+ <button class="w-full py-2 px-4 bg-blue-50 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-100 transition">
416
+ View Processing Details
417
+ </button>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </main>
422
+ </div>
423
+
424
+ <script>
425
+ // Initialize Feather Icons
426
+ feather.replace();
427
+
428
+ // Mobile menu toggle
429
+ document.getElementById('menu-toggle').addEventListener('click', function() {
430
+ document.getElementById('sidebar').classList.toggle('open');
431
+ });
432
+
433
+ // Close sidebar when clicking outside on mobile
434
+ document.addEventListener('click', function(event) {
435
+ const sidebar = document.getElementById('sidebar');
436
+ const menuToggle = document.getElementById('menu-toggle');
437
+
438
+ if (window.innerWidth < 768 &&
439
+ !sidebar.contains(event.target) &&
440
+ event.target !== menuToggle &&
441
+ !menuToggle.contains(event.target)) {
442
+ sidebar.classList.remove('open');
443
+ }
444
+ });
445
+
446
+ // Set active nav item
447
+ document.addEventListener('DOMContentLoaded', function() {
448
+ const navItems = document.querySelectorAll('.nav-item');
449
+ navItems.forEach(item => {
450
+ if (item.getAttribute('href') === window.location.pathname.split('/').pop()) {
451
+ item.classList.add('active');
452
+ }
453
+ });
454
+ });
455
+ </script>
456
+ </body>
457
  </html>
notifications.html ADDED
@@ -0,0 +1,409 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Notifications - NeuroFlow AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ :root {
15
+ --primary-blue: #3b82f6;
16
+ --secondary-green: #10b981;
17
+ --calm-gray: #9ca3af;
18
+ --light-bg: #f9fafb;
19
+ --card-bg: #ffffff;
20
+ --border-color: #e5e7eb;
21
+ --text-primary: #1f2937;
22
+ --text-secondary: #4b5563;
23
+ --success: #10b981;
24
+ --warning: #f59e0b;
25
+ --error: #ef4444;
26
+ --info: #3b82f6;
27
+ }
28
+
29
+ body {
30
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
31
+ background-color: var(--light-bg);
32
+ color: var(--text-primary);
33
+ }
34
+
35
+ .sidebar {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .nav-item {
40
+ transition: all 0.2s ease;
41
+ }
42
+
43
+ .nav-item:hover, .nav-item.active {
44
+ background-color: #eff6ff;
45
+ color: var(--primary-blue);
46
+ }
47
+
48
+ .card {
49
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
50
+ border: 1px solid var(--border-color);
51
+ border-radius: 0.5rem;
52
+ background-color: var(--card-bg);
53
+ }
54
+
55
+ .notification {
56
+ transition: all 0.2s ease;
57
+ border-left: 4px solid transparent;
58
+ }
59
+
60
+ .notification:hover {
61
+ background-color: #f9fafb;
62
+ }
63
+
64
+ .notification.unread {
65
+ border-left-color: var(--primary-blue);
66
+ background-color: #f0f9ff;
67
+ }
68
+
69
+ .notification-type {
70
+ width: 8px;
71
+ height: 8px;
72
+ border-radius: 50%;
73
+ display: inline-block;
74
+ margin-right: 8px;
75
+ }
76
+
77
+ .type-urgent {
78
+ background-color: #ef4444;
79
+ }
80
+
81
+ .type-important {
82
+ background-color: #f59e0b;
83
+ }
84
+
85
+ .type-info {
86
+ background-color: #3b82f6;
87
+ }
88
+
89
+ .type-system {
90
+ background-color: #8b5cf6;
91
+ }
92
+
93
+ .filter-btn {
94
+ transition: all 0.2s ease;
95
+ }
96
+
97
+ .filter-btn.active {
98
+ background-color: #dbeafe;
99
+ color: #1d4ed8;
100
+ }
101
+
102
+ @media (max-width: 768px) {
103
+ .sidebar {
104
+ transform: translateX(-100%);
105
+ }
106
+
107
+ .sidebar.open {
108
+ transform: translateX(0);
109
+ }
110
+ }
111
+ </style>
112
+ </head>
113
+ <body class="min-h-screen">
114
+ <!-- Mobile menu button -->
115
+ <div class="md:hidden fixed top-4 left-4 z-50">
116
+ <button id="menu-toggle" class="p-2 rounded-lg bg-white shadow">
117
+ <i data-feather="menu" class="text-gray-600"></i>
118
+ </button>
119
+ </div>
120
+
121
+ <!-- Sidebar -->
122
+ <div id="sidebar" class="sidebar fixed h-full md:w-64 bg-white border-r border-gray-200 z-40 md:z-0 transform md:translate-x-0 transition-transform duration-300 ease-in-out">
123
+ <div class="p-6 border-b border-gray-200">
124
+ <h1 class="text-2xl font-bold text-gray-800">NeuroFlow AI</h1>
125
+ <p class="text-sm text-gray-500">Executive Assistant</p>
126
+ </div>
127
+ <nav class="mt-6">
128
+ <div class="px-4 space-y-1">
129
+ <a href="index.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
130
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
131
+ Dashboard
132
+ </a>
133
+ <a href="emails.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
134
+ <i data-feather="mail" class="w-5 h-5 mr-3"></i>
135
+ Emails
136
+ </a>
137
+ <a href="calendar.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
138
+ <i data-feather="calendar" class="w-5 h-5 mr-3"></i>
139
+ Calendar
140
+ </a>
141
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full active">
142
+ <i data-feather="bell" class="w-5 h-5 mr-3"></i>
143
+ Notifications
144
+ </a>
145
+ <a href="analytics.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
146
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>
147
+ Analytics
148
+ </a>
149
+ <a href="settings.html" class="nav-item flex items-center px-4 py-3 text-gray-700 rounded-lg w-full">
150
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
151
+ Settings
152
+ </a>
153
+ </div>
154
+ </nav>
155
+ </div>
156
+
157
+ <!-- Main Content -->
158
+ <div class="md:ml-64">
159
+ <!-- Header -->
160
+ <header class="bg-white shadow-sm">
161
+ <div class="px-6 py-4 flex justify-between items-center">
162
+ <div>
163
+ <h2 class="text-2xl font-semibold text-gray-800">Notifications</h2>
164
+ <p class="text-gray-600">Stay informed about important updates</p>
165
+ </div>
166
+ <div class="flex items-center space-x-4">
167
+ <button class="p-2 rounded-full hover:bg-gray-100">
168
+ <i data-feather="bell" class="w-5 h-5 text-gray-600"></i>
169
+ </button>
170
+ <div class="flex items-center">
171
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
172
+ <span class="text-blue-800 font-medium">A</span>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </header>
178
+
179
+ <!-- Main Content Area -->
180
+ <main class="p-6">
181
+ <!-- Filters -->
182
+ <div class="card p-4 mb-6">
183
+ <div class="flex flex-wrap gap-2">
184
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 active">
185
+ All
186
+ </button>
187
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
188
+ Unread
189
+ </button>
190
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
191
+ Urgent
192
+ </button>
193
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
194
+ Important
195
+ </button>
196
+ <button class="filter-btn px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200">
197
+ Info
198
+ </button>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Notifications List -->
203
+ <div class="card">
204
+ <div class="p-4 border-b border-gray-200">
205
+ <div class="flex items-center justify-between">
206
+ <h3 class="text-lg font-medium text-gray-800">Recent Notifications</h3>
207
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">
208
+ Mark all as read
209
+ </button>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="divide-y divide-gray-200">
214
+ <!-- Notification 1 - Urgent -->
215
+ <div class="notification unread p-4">
216
+ <div class="flex items-start">
217
+ <div class="flex-shrink-0 mt-1">
218
+ <span class="notification-type type-urgent"></span>
219
+ </div>
220
+ <div class="ml-3 flex-1">
221
+ <div class="flex items-center justify-between">
222
+ <h4 class="text-sm font-medium text-gray-900">Urgent Email Requires Attention</h4>
223
+ <span class="text-xs text-gray-500">2 min ago</span>
224
+ </div>
225
+ <p class="text-sm text-gray-600 mt-1">Project deadline approaching - please review deliverables</p>
226
+ <div class="mt-2 flex items-center">
227
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
228
+ Urgent
229
+ </span>
230
+ <button class="ml-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
231
+ View Email
232
+ </button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Notification 2 - Important -->
239
+ <div class="notification unread p-4">
240
+ <div class="flex items-start">
241
+ <div class="flex-shrink-0 mt-1">
242
+ <span class="notification-type type-important"></span>
243
+ </div>
244
+ <div class="ml-3 flex-1">
245
+ <div class="flex items-center justify-between">
246
+ <h4 class="text-sm font-medium text-gray-900">Meeting Reminder</h4>
247
+ <span class="text-xs text-gray-500">1 hour ago</span>
248
+ </div>
249
+ <p class="text-sm text-gray-600 mt-1">Team sync meeting starts in 30 minutes</p>
250
+ <div class="mt-2 flex items-center">
251
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
252
+ Important
253
+ </span>
254
+ <button class="ml-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
255
+ View Calendar
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Notification 3 - Info -->
263
+ <div class="notification p-4">
264
+ <div class="flex items-start">
265
+ <div class="flex-shrink-0 mt-1">
266
+ <span class="notification-type type-info"></span>
267
+ </div>
268
+ <div class="ml-3 flex-1">
269
+ <div class="flex items-center justify-between">
270
+ <h4 class="text-sm font-medium text-gray-900">New Newsletter Available</h4>
271
+ <span class="text-xs text-gray-500">3 hours ago</span>
272
+ </div>
273
+ <p class="text-sm text-gray-600 mt-1">Weekly tech digest with latest industry updates</p>
274
+ <div class="mt-2 flex items-center">
275
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
276
+ Info
277
+ </span>
278
+ <button class="ml-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
279
+ Read Now
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Notification 4 - System -->
287
+ <div class="notification p-4">
288
+ <div class="flex items-start">
289
+ <div class="flex-shrink-0 mt-1">
290
+ <span class="notification-type type-system"></span>
291
+ </div>
292
+ <div class="ml-3 flex-1">
293
+ <div class="flex items-center justify-between">
294
+ <h4 class="text-sm font-medium text-gray-900">AI Processing Complete</h4>
295
+ <span class="text-xs text-gray-500">Yesterday</span>
296
+ </div>
297
+ <p class="text-sm text-gray-600 mt-1">Successfully classified 42 new emails</p>
298
+ <div class="mt-2 flex items-center">
299
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
300
+ System
301
+ </span>
302
+ <button class="ml-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
303
+ View Report
304
+ </button>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Notification 5 - Info -->
311
+ <div class="notification p-4">
312
+ <div class="flex items-start">
313
+ <div class="flex-shrink-0 mt-1">
314
+ <span class="notification-type type-info"></span>
315
+ </div>
316
+ <div class="ml-3 flex-1">
317
+ <div class="flex items-center justify-between">
318
+ <h4 class="text-sm font-medium text-gray-900">Working Hours Updated</h4>
319
+ <span class="text-xs text-gray-500">2 days ago</span>
320
+ </div>
321
+ <p class="text-sm text-gray-600 mt-1">Your working hours have been updated to 9AM-5PM</p>
322
+ <div class="mt-2 flex items-center">
323
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
324
+ Info
325
+ </span>
326
+ <button class="ml-2 text-xs text-blue-600 hover:text-blue-800 font-medium">
327
+ View Settings
328
+ </button>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Pagination -->
336
+ <div class="p-4 border-t border-gray-200 flex items-center justify-between">
337
+ <div class="text-sm text-gray-600">
338
+ Showing 1 to 5 of 24 notifications
339
+ </div>
340
+ <div class="flex space-x-2">
341
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
342
+ Previous
343
+ </button>
344
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
345
+ 1
346
+ </button>
347
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
348
+ 2
349
+ </button>
350
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
351
+ 3
352
+ </button>
353
+ <button class="px-3 py-1 rounded border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-50">
354
+ Next
355
+ </button>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </main>
360
+ </div>
361
+
362
+ <script>
363
+ // Initialize Feather Icons
364
+ feather.replace();
365
+
366
+ // Mobile menu toggle
367
+ document.getElementById('menu-toggle').addEventListener('click', function() {
368
+ document.getElementById('sidebar').classList.toggle('open');
369
+ });
370
+
371
+ // Close sidebar when clicking outside on mobile
372
+ document.addEventListener('click', function(event) {
373
+ const sidebar = document.getElementById('sidebar');
374
+ const menuToggle = document.getElementById('menu-toggle');
375
+
376
+ if (window.innerWidth < 768 &&
377
+ !sidebar.contains(event.target) &&
378
+ event.target !== menuToggle &&
379
+ !menuToggle.contains(event.target)) {
380
+ sidebar.classList.remove('open');
381
+ }
382
+ });
383
+
384
+ // Set active nav item
385
+ document.addEventListener('DOMContentLoaded', function() {
386
+ const navItems = document.querySelectorAll('.nav-item');
387
+ navItems.forEach(item => {
388
+ if (item.getAttribute('href') === window.location.pathname.split('/').pop()) {
389
+ item.classList.add('active');
390
+ }
391
+ });
392
+ });
393
+
394
+ // Filter buttons
395
+ document.addEventListener('DOMContentLoaded', function() {
396
+ const filterButtons = document.querySelectorAll('.filter-btn');
397
+
398
+ filterButtons.forEach(button => {
399
+ button.addEventListener('click', function() {
400
+ // Remove active class from all buttons
401
+ filterButtons.forEach(btn => btn.classList.remove('active'));
402
+ // Add active class to clicked button
403
+ this.classList.add('active');
404
+ });
405
+ });
406
+ });
407
+ </script>
408
+ </body>
409
+ </html>