Hugging Face's logo

Spaces:
mvbhr
/
taskflow-dashboard
Running

App Files Community
mvbhr commited on
Commit
0410d4d
·
verified ·
1 Parent(s): 3d6fa26

criar a página de Calendar

Browse files
Files changed (4) hide show
  1. calendar.html +403 -0
  2. index.html +2 -2
  3. projects.html +3 -3
  4. tasks.html +5 -5
calendar.html ADDED
@@ -0,0 +1,403 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - TaskFlow</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
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f9fafb;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .calendar-day {
21
+ transition: all 0.2s ease-in-out;
22
+ }
23
+ .calendar-day:hover {
24
+ background-color: #f3f4f6;
25
+ transform: scale(1.05);
26
+ }
27
+ .calendar-today {
28
+ background-color: #4f46e5;
29
+ color: white;
30
+ }
31
+ .event-high {
32
+ border-left: 4px solid #dc2626;
33
+ }
34
+ .event-medium {
35
+ border-left: 4px solid #d97706;
36
+ }
37
+ .event-low {
38
+ border-left: 4px solid #16a34a;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50">
43
+ <!-- Navigation -->
44
+ <nav class="bg-white shadow-sm">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center">
50
+ <i data-feather="layers" class="text-white"></i>
51
+ </div>
52
+ <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span>
53
+ </div>
54
+ <div class="hidden md:ml-6 md:flex md:space-x-8">
55
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
56
+ <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
57
+ <a href="tasks.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
58
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
59
+ </div>
60
+ </div>
61
+ <div class="flex items-center">
62
+ <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
63
+ <i data-feather="bell"></i>
64
+ </button>
65
+ <div class="ml-3 relative">
66
+ <div class="flex items-center space-x-3 cursor-pointer">
67
+ <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
68
+ <span class="text-indigo-800 font-medium">U</span>
69
+ </div>
70
+ <span class="text-sm font-medium text-gray-700">User</span>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+
78
+ <!-- Main Content -->
79
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
80
+ <!-- Header -->
81
+ <div class="mb-8">
82
+ <div class="flex justify-between items-center">
83
+ <div>
84
+ <h1 class="text-3xl font-bold text-gray-900">Calendar</h1>
85
+ <p class="mt-2 text-gray-600">View and manage your schedule</p>
86
+ </div>
87
+ <div class="flex gap-2">
88
+ <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
89
+ <i data-feather="plus" class="mr-2 h-4 w-4"></i>
90
+ Add Event
91
+ </button>
92
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none">
93
+ <i data-feather="filter" class="mr-2 h-4 w-4"></i>
94
+ Filter
95
+ </button>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Calendar Navigation -->
100
+ <div class="mb-6 flex items-center justify-between">
101
+ <div class="flex items-center gap-4">
102
+ <button class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-150">
103
+ <i data-feather="chevron-left" class="h-4 w-4"></i>
104
+ </button>
105
+ <h2 class="text-xl font-semibold text-gray-900">June 2024</h2>
106
+ <button class="p-2 rounded-full hover:bg-gray-100 transition-colors duration-150">
107
+ <i data-feather="chevron-right" class="h-4 w-4"></i>
108
+ </button>
109
+ </div>
110
+ <div class="flex gap-2">
111
+ <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
112
+ Month
113
+ </button>
114
+ <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
115
+ Week
116
+ </button>
117
+ <button class="px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
118
+ Day
119
+ </button>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Calendar View -->
124
+ <div class="bg-white shadow rounded-lg overflow-hidden">
125
+ <!-- Week Days Header -->
126
+ <div class="grid grid-cols-7 bg-gray-50 border-b border-gray-200">
127
+ <div class="py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Sun</div>
128
+ <div class="py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Mon</div>
129
+ <div class="py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Tue</div>
130
+ <div class="py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Wed</div>
131
+ <div class="py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Thu</div>
132
+ <div class="py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Fri</div>
133
+ <div class="py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Sat</div>
134
+ </div>
135
+
136
+ <!-- Calendar Grid -->
137
+ <div class="grid grid-cols-7 divide-x divide-y divide-gray-200">
138
+ <!-- Week 1 -->
139
+ <div class="min-h-32 p-2 calendar-day">
140
+ <div class="text-sm font-medium text-gray-900">26</div>
141
+ </div>
142
+ <div class="min-h-32 p-2 calendar-day">
143
+ <div class="text-sm font-medium text-gray-400">27</div>
144
+ </div>
145
+ <div class="min-h-32 p-2 calendar-day">
146
+ <div class="text-sm font-medium text-gray-400">28</div>
147
+ </div>
148
+ <div class="min-h-32 p-2 calendar-day">
149
+ <div class="text-sm font-medium text-gray-400">29</div>
150
+ </div>
151
+ <div class="min-h-32 p-2 calendar-day">
152
+ <div class="text-sm font-medium text-gray-400">30</div>
153
+ </div>
154
+ <div class="min-h-32 p-2 calendar-day">
155
+ <div class="text-sm font-medium text-gray-400">31</div>
156
+ </div>
157
+ <div class="min-h-32 p-2 calendar-day">
158
+ <div class="text-sm font-medium text-gray-900">1</div>
159
+ </div>
160
+ <div class="min-h-32 p-2 calendar-day">
161
+ <div class="text-sm font-medium text-gray-900">2</div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Week 2 -->
166
+ <div class="min-h-32 p-2 calendar-day">
167
+ <div class="text-sm font-medium text-gray-900">3</div>
168
+ </div>
169
+ <div class="min-h-32 p-2 calendar-day">
170
+ <div class="text-sm font-medium text-gray-900">4</div>
171
+ </div>
172
+ <div class="min-h-32 p-2 calendar-day">
173
+ <div class="text-sm font-medium text-gray-900">5</div>
174
+ </div>
175
+ <div class="min-h-32 p-2 calendar-day">
176
+ <div class="text-sm font-medium text-gray-900">6</div>
177
+ </div>
178
+ <div class="min-h-32 p-2 calendar-day">
179
+ <div class="text-sm font-medium text-gray-900">7</div>
180
+ </div>
181
+ <div class="min-h-32 p-2 calendar-day">
182
+ <div class="text-sm font-medium text-gray-900">8</div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Week 3 -->
187
+ <div class="min-h-32 p-2 calendar-day">
188
+ <div class="text-sm font-medium text-gray-900">9</div>
189
+ </div>
190
+ <div class="min-h-32 p-2 calendar-day">
191
+ <div class="text-sm font-medium text-gray-900">10</div>
192
+ </div>
193
+ <div class="min-h-32 p-2 calendar-day">
194
+ <div class="text-sm font-medium text-gray-900">11</div>
195
+ </div>
196
+ <div class="min-h-32 p-2 calendar-day">
197
+ <div class="text-sm font-medium text-gray-900">12</div>
198
+ </div>
199
+ <div class="min-h-32 p-2 calendar-day">
200
+ <div class="text-sm font-medium text-gray-900">13</div>
201
+ </div>
202
+ <div class="min-h-32 p-2 calendar-day">
203
+ <div class="text-sm font-medium text-gray-900">14</div>
204
+ </div>
205
+ <div class="min-h-32 p-2 calendar-day">
206
+ <div class="text-sm font-medium text-gray-900">15</div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Week 4 -->
211
+ <div class="min-h-32 p-2 calendar-day">
212
+ <div class="text-sm font-medium text-gray-900">16</div>
213
+ </div>
214
+ <div class="min-h-32 p-2 calendar-day">
215
+ <div class="text-sm font-medium text-gray-900">17</div>
216
+ </div>
217
+ <div class="min-h-32 p-2 calendar-day">
218
+ <div class="text-sm font-medium text-gray-900">18</div>
219
+ </div>
220
+ <div class="min-h-32 p-2 calendar-day">
221
+ <div class="text-sm font-medium text-gray-900">19</div>
222
+ </div>
223
+ <div class="min-h-32 p-2 calendar-day">
224
+ <div class="text-sm font-medium text-gray-900">20</div>
225
+ </div>
226
+ <div class="min-h-32 p-2 calendar-day">
227
+ <div class="text-sm font-medium text-gray-900">21</div>
228
+ </div>
229
+ <div class="min-h-32 p-2 calendar-day">
230
+ <div class="text-sm font-medium text-gray-900">22</div>
231
+ </div>
232
+ <div class="min-h-32 p-2 calendar-day">
233
+ <div class="text-sm font-medium text-gray-900">23</div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Week 5 -->
238
+ <div class="min-h-32 p-2 calendar-day">
239
+ <div class="text-sm font-medium text-gray-900">24</div>
240
+ </div>
241
+ <div class="min-h-32 p-2 calendar-day">
242
+ <div class="text-sm font-medium text-gray-900">25</div>
243
+ </div>
244
+ <div class="min-h-32 p-2 calendar-day">
245
+ <div class="text-sm font-medium text-gray-900">26</div>
246
+ </div>
247
+ <div class="min-h-32 p-2 calendar-day">
248
+ <div class="text-sm font-medium text-gray-900">27</div>
249
+ </div>
250
+ <div class="min-h-32 p-2 calendar-day">
251
+ <div class="text-sm font-medium text-gray-900">28</div>
252
+ </div>
253
+ <div class="min-h-32 p-2 calendar-day">
254
+ <div class="text-sm font-medium text-gray-900">29</div>
255
+ </div>
256
+ <div class="min-h-32 p-2 calendar-day">
257
+ <div class="text-sm font-medium text-gray-900">30</div>
258
+ </div>
259
+ <div class="min-h-32 p-2 calendar-day">
260
+ <div class="text-sm font-medium text-gray-400">1</div>
261
+ </div>
262
+ <div class="min-h-32 p-2 calendar-day">
263
+ <div class="text-sm font-medium text-gray-400">2</div>
264
+ </div>
265
+ <div class="min-h-32 p-2 calendar-day">
266
+ <div class="text-sm font-medium text-gray-400">3</div>
267
+ </div>
268
+ <div class="min-h-32 p-2 calendar-day">
269
+ <div class="text-sm font-medium text-gray-400">4</div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Upcoming Events -->
275
+ <div class="mt-8">
276
+ <div class="bg-white shadow rounded-lg">
277
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
278
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Upcoming Events</h3>
279
+ </div>
280
+ <div class="p-6">
281
+ <!-- Event 1 -->
282
+ <div class="mb-4 p-4 bg-gray-50 rounded-lg event-high">
283
+ <div class="flex justify-between items-start">
284
+ <div>
285
+ <h4 class="text-sm font-medium text-gray-900">Finalize homepage design</h4>
286
+ <p class="text-sm text-gray-500">Website Redesign - Due Tomorrow</p>
287
+ </div>
288
+ <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">High Priority</span>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Event 2 -->
293
+ <div class="mb-4 p-4 bg-gray-50 rounded-lg event-medium">
294
+ <div class="flex justify-between items-start">
295
+ <div>
296
+ <h4 class="text-sm font-medium text-gray-900">API documentation</h4>
297
+ <p class="text-sm text-gray-500">Mobile App Development - Due Jun 15</p>
298
+ </div>
299
+ <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Medium Priority</span>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Event 3 -->
304
+ <div class="mb-4 p-4 bg-gray-50 rounded-lg event-low">
305
+ <div class="flex justify-between items-start">
306
+ <div>
307
+ <h4 class="text-sm font-medium text-gray-900">Social media assets</h4>
308
+ <p class="text-sm text-gray-500">Marketing Campaign - Due Jun 18</p>
309
+ </div>
310
+ <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800">Low Priority</span>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Event 4 -->
315
+ <div class="p-4 bg-gray-50 rounded-lg event-medium">
316
+ <div class="flex justify-between items-start">
317
+ <div>
318
+ <h4 class="text-sm font-medium text-gray-900">Client onboarding meeting</h4>
319
+ <p class="text-sm text-gray-500">Client Onboarding - Jun 19, 10:00 AM</p>
320
+ </div>
321
+ <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Medium Priority</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Quick Stats -->
329
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
330
+ <div class="bg-white overflow-hidden shadow rounded-lg">
331
+ <div class="px-4 py-5 sm:p-6">
332
+ <div class="flex items-center">
333
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
334
+ <i data-feather="calendar" class="h-6 w-6 text-indigo-600"></i>
335
+ </div>
336
+ <div class="ml-5 w-0 flex-1">
337
+ <dl>
338
+ <dt class="text-sm font-medium text-gray-500 truncate">Events This Week</dt>
339
+ <dd class="flex items-baseline">
340
+ <div class="text-2xl font-semibold text-gray-900">8</div>
341
+ </dd>
342
+ </dl>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="bg-white overflow-hidden shadow rounded-lg">
348
+ <div class="px-4 py-5 sm:p-6">
349
+ <div class="flex items-center">
350
+ <div class="flex-shrink-0 bg-red-100 rounded-md p-3">
351
+ <i data-feather="clock" class="h-6 w-6 text-red-600"></i>
352
+ </div>
353
+ <div class="ml-5 w-0 flex-1">
354
+ <dl>
355
+ <dt class="text-sm font-medium text-gray-500 truncate">Overdue</dt>
356
+ <dd class="flex items-baseline">
357
+ <div class="text-2xl font-semibold text-gray-900">3</div>
358
+ </dd>
359
+ </dl>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="bg-white overflow-hidden shadow rounded-lg">
365
+ <div class="px-4 py-5 sm:p-6">
366
+ <div class="flex items-center">
367
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
368
+ <i data-feather="check-circle" class="h-6 w-6 text-green-600"></i>
369
+ </div>
370
+ <div class="ml-5 w-0 flex-1">
371
+ <dl>
372
+ <dt class="text-sm font-medium text-gray-500 truncate">Completed</dt>
373
+ <dd class="flex items-baseline">
374
+ <div class="text-2xl font-semibold text-gray-900">12</div>
375
+ </dd>
376
+ </dl>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </main>
382
+
383
+ <script>
384
+ feather.replace();
385
+
386
+ // Add event listeners for calendar navigation
387
+ document.addEventListener('DOMContentLoaded', function() {
388
+ const prevBtn = document.querySelector('[data-feather="chevron-left"]').closest('button');
389
+ const nextBtn = document.querySelector('[data-feather="chevron-right"]').closest('button');
390
+
391
+ prevBtn.addEventListener('click', function() {
392
+ // Logic for previous month/week/day
393
+ console.log('Navigate to previous period');
394
+ });
395
+
396
+ nextBtn.addEventListener('click', function() {
397
+ // Logic for next month/week/day
398
+ console.log('Navigate to next period');
399
+ });
400
+ });
401
+ </script>
402
+ </body>
403
+ </html>
index.html CHANGED
@@ -47,8 +47,8 @@
47
  <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
48
  <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
49
  <a href="tasks.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
50
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
51
- </div>
52
  </div>
53
  <div class="flex items-center">
54
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
 
47
  <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
48
  <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
49
  <a href="tasks.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
50
+ <a href="calendar.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
51
+ </div>
52
  </div>
53
  <div class="flex items-center">
54
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
projects.html CHANGED
@@ -48,10 +48,10 @@
48
  </div>
49
  <div class="hidden md:ml-6 md:flex md:space-x-8">
50
  <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
51
- <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
52
  <a href="tasks.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
53
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
54
- </div>
55
  </div>
56
  <div class="flex items-center">
57
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
 
48
  </div>
49
  <div class="hidden md:ml-6 md:flex md:space-x-8">
50
  <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
51
+ <a href="projects.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
52
  <a href="tasks.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
53
+ <a href="calendar.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
54
+ </div>
55
  </div>
56
  <div class="flex items-center">
57
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
tasks.html CHANGED
@@ -59,11 +59,11 @@
59
  <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span>
60
  </div>
61
  <div class="hidden md:ml-6 md:flex md:space-x-8">
62
- <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
63
- <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
64
- <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
65
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
66
- </div>
67
  </div>
68
  <div class="flex items-center">
69
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
 
59
  <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span>
60
  </div>
61
  <div class="hidden md:ml-6 md:flex md:space-x-8">
62
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
63
+ <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
64
+ <a href="tasks.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
65
+ <a href="calendar.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
66
+ </div>
67
  </div>
68
  <div class="flex items-center">
69
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">