Hugging Face's logo

Spaces:
mrpaswan7
/
task-mangement
Running

App Files Community
mrpaswan7 commited on
Commit
faec029
·
verified ·
1 Parent(s): f1e8cb3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +849 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Task Mangement
3
- emoji: 🌖
4
  colorFrom: blue
5
- colorTo: indigo
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: task-mangement
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: gray
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
index.html CHANGED
@@ -1,19 +1,849 @@
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>Creative Task Master</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary: #6366f1;
12
+ --primary-dark: #4f46e5;
13
+ --secondary: #f59e0b;
14
+ --dark: #1e293b;
15
+ --light: #f8fafc;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Inter', sans-serif;
20
+ background-color: #f1f5f9;
21
+ }
22
+
23
+ .sidebar {
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .task-card:hover {
28
+ transform: translateY(-2px);
29
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
30
+ }
31
+
32
+ .file-dropzone {
33
+ border: 2px dashed #cbd5e1;
34
+ transition: all 0.2s ease;
35
+ }
36
+
37
+ .file-dropzone.active {
38
+ border-color: var(--primary);
39
+ background-color: #eef2ff;
40
+ }
41
+
42
+ .priority-high {
43
+ background-color: #fee2e2;
44
+ border-left: 4px solid #ef4444;
45
+ }
46
+
47
+ .priority-medium {
48
+ background-color: #fef3c7;
49
+ border-left: 4px solid #f59e0b;
50
+ }
51
+
52
+ .priority-low {
53
+ background-color: #ecfdf5;
54
+ border-left: 4px solid #10b981;
55
+ }
56
+
57
+ .scrollbar-hide::-webkit-scrollbar {
58
+ display: none;
59
+ }
60
+
61
+ /* Rich text editor styles */
62
+ .rich-text-editor {
63
+ min-height: 150px;
64
+ border: 1px solid #e2e8f0;
65
+ border-radius: 0.375rem;
66
+ padding: 0.5rem;
67
+ }
68
+
69
+ .rich-text-editor:focus {
70
+ outline: none;
71
+ border-color: var(--primary);
72
+ }
73
+
74
+ .editor-toolbar {
75
+ border: 1px solid #e2e8f0;
76
+ border-bottom: none;
77
+ border-radius: 0.375rem 0.375rem 0 0;
78
+ }
79
+
80
+ /* Custom checkbox */
81
+ .custom-checkbox input:checked ~ .checkmark {
82
+ background-color: var(--primary);
83
+ border-color: var(--primary);
84
+ }
85
+
86
+ .custom-checkbox .checkmark:after {
87
+ left: 7px;
88
+ top: 3px;
89
+ width: 5px;
90
+ height: 10px;
91
+ border: solid white;
92
+ border-width: 0 2px 2px 0;
93
+ transform: rotate(45deg);
94
+ }
95
+
96
+ /* Animation for notifications */
97
+ @keyframes slideIn {
98
+ from { transform: translateX(100%); opacity: 0; }
99
+ to { transform: translateX(0); opacity: 1; }
100
+ }
101
+
102
+ @keyframes slideOut {
103
+ from { transform: translateX(0); opacity: 1; }
104
+ to { transform: translateX(100%); opacity: 0; }
105
+ }
106
+
107
+ .notification {
108
+ animation: slideIn 0.3s forwards;
109
+ }
110
+
111
+ .notification.hide {
112
+ animation: slideOut 0.3s forwards;
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="flex h-screen overflow-hidden">
117
+ <!-- Sidebar -->
118
+ <div class="sidebar bg-white w-64 md:w-72 flex-shrink-0 border-r border-gray-200 flex flex-col h-full">
119
+ <div class="p-4 border-b border-gray-200">
120
+ <div class="flex items-center space-x-2">
121
+ <i class="fas fa-palette text-2xl text-indigo-500"></i>
122
+ <h1 class="text-xl font-bold text-gray-800">Creative Task Master</h1>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="flex-1 overflow-y-auto py-4">
127
+ <div class="px-4 mb-6">
128
+ <div class="relative">
129
+ <input type="text" placeholder="Search tasks..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
130
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="mb-6 px-4">
135
+ <div class="flex justify-between items-center mb-2">
136
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Teams</h2>
137
+ <button id="add-team-btn" class="text-gray-400 hover:text-indigo-500">
138
+ <i class="fas fa-plus"></i>
139
+ </button>
140
+ </div>
141
+ <ul class="space-y-1" id="team-list">
142
+ <!-- Team items will be added here by JavaScript -->
143
+ </ul>
144
+ </div>
145
+
146
+ <div class="mb-6 px-4">
147
+ <div class="flex justify-between items-center mb-2">
148
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Projects</h2>
149
+ <button id="add-project-btn" class="text-gray-400 hover:text-indigo-500">
150
+ <i class="fas fa-plus"></i>
151
+ </button>
152
+ </div>
153
+ <ul class="space-y-1" id="project-list">
154
+ <!-- Project items will be added here by JavaScript -->
155
+ </ul>
156
+ </div>
157
+
158
+ <div class="mb-6 px-4">
159
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Quick Filters</h2>
160
+ <ul class="space-y-1">
161
+ <li>
162
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
163
+ <i class="fas fa-inbox mr-3 text-indigo-500"></i>
164
+ <span>My Tasks</span>
165
+ </a>
166
+ </li>
167
+ <li>
168
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
169
+ <i class="fas fa-calendar-day mr-3 text-red-500"></i>
170
+ <span>Today</span>
171
+ </a>
172
+ </li>
173
+ <li>
174
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
175
+ <i class="fas fa-calendar-week mr-3 text-yellow-500"></i>
176
+ <span>This Week</span>
177
+ </a>
178
+ </li>
179
+ <li>
180
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
181
+ <i class="fas fa-exclamation-circle mr-3 text-purple-500"></i>
182
+ <span>High Priority</span>
183
+ </a>
184
+ </li>
185
+ </ul>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="p-4 border-t border-gray-200">
190
+ <div class="flex items-center">
191
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-8 h-8 rounded-full">
192
+ <div class="ml-3">
193
+ <p class="text-sm font-medium text-gray-800">John Creative</p>
194
+ <p class="text-xs text-gray-500">Admin</p>
195
+ </div>
196
+ <div class="ml-auto">
197
+ <button class="text-gray-400 hover:text-gray-500">
198
+ <i class="fas fa-cog"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Main content -->
206
+ <div class="flex-1 flex flex-col overflow-hidden">
207
+ <!-- Top navigation -->
208
+ <div class="bg-white border-b border-gray-200 py-4 px-6 flex items-center justify-between">
209
+ <div class="flex items-center">
210
+ <button id="sidebar-toggle" class="md:hidden text-gray-500 mr-4">
211
+ <i class="fas fa-bars"></i>
212
+ </button>
213
+ <h2 class="text-xl font-semibold text-gray-800" id="main-title">Dashboard</h2>
214
+ </div>
215
+
216
+ <div class="flex items-center space-x-4">
217
+ <div class="relative">
218
+ <button id="notifications-btn" class="text-gray-400 hover:text-indigo-500 relative">
219
+ <i class="fas fa-bell"></i>
220
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
221
+ </button>
222
+ <div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-10">
223
+ <div class="p-4 border-b border-gray-200">
224
+ <h3 class="text-sm font-medium text-gray-900">Notifications</h3>
225
+ </div>
226
+ <div class="max-h-60 overflow-y-auto">
227
+ <a href="#" class="block px-4 py-3 border-b border-gray-100 hover:bg-gray-50">
228
+ <div class="flex items-start">
229
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2">
230
+ <i class="fas fa-tasks text-indigo-600"></i>
231
+ </div>
232
+ <div class="ml-3">
233
+ <p class="text-sm font-medium text-gray-900">New task assigned</p>
234
+ <p class="text-xs text-gray-500">Brand Identity for Client X</p>
235
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
236
+ </div>
237
+ </div>
238
+ </a>
239
+ <a href="#" class="block px-4 py-3 border-b border-gray-100 hover:bg-gray-50">
240
+ <div class="flex items-start">
241
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-2">
242
+ <i class="fas fa-comment-alt text-green-600"></i>
243
+ </div>
244
+ <div class="ml-3">
245
+ <p class="text-sm font-medium text-gray-900">New comment</p>
246
+ <p class="text-xs text-gray-500">On "Website Redesign"</p>
247
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
248
+ </div>
249
+ </div>
250
+ </a>
251
+ <a href="#" class="block px-4 py-3 hover:bg-gray-50">
252
+ <div class="flex items-start">
253
+ <div class="flex-shrink-0 bg-yellow-100 rounded-full p-2">
254
+ <i class="fas fa-exclamation-triangle text-yellow-600"></i>
255
+ </div>
256
+ <div class="ml-3">
257
+ <p class="text-sm font-medium text-gray-900">Deadline approaching</p>
258
+ <p class="text-xs text-gray-500">3D Animation for Client Y</p>
259
+ <p class="text-xs text-gray-400 mt-1">1 day ago</p>
260
+ </div>
261
+ </div>
262
+ </a>
263
+ </div>
264
+ <div class="p-2 border-t border-gray-200">
265
+ <a href="#" class="block text-center text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ <button id="calendar-view-btn" class="text-gray-400 hover:text-indigo-500">
270
+ <i class="fas fa-calendar-alt"></i>
271
+ </button>
272
+ <button id="export-btn" class="text-gray-400 hover:text-indigo-500">
273
+ <i class="fas fa-file-export"></i>
274
+ </button>
275
+ <button id="import-btn" class="text-gray-400 hover:text-indigo-500">
276
+ <i class="fas fa-file-import"></i>
277
+ </button>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Main content area -->
282
+ <div class="flex-1 overflow-y-auto p-6 bg-gray-50">
283
+ <!-- Dashboard view -->
284
+ <div id="dashboard-view">
285
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
286
+ <div class="bg-white p-4 rounded-lg shadow">
287
+ <div class="flex items-center justify-between">
288
+ <div>
289
+ <p class="text-sm font-medium text-gray-500">Active Projects</p>
290
+ <p class="text-2xl font-semibold text-gray-800">12</p>
291
+ </div>
292
+ <div class="bg-indigo-100 rounded-full p-3">
293
+ <i class="fas fa-folder-open text-indigo-600"></i>
294
+ </div>
295
+ </div>
296
+ <div class="mt-4">
297
+ <div class="h-2 bg-gray-200 rounded-full">
298
+ <div class="h-2 bg-indigo-500 rounded-full" style="width: 70%"></div>
299
+ </div>
300
+ <p class="text-xs text-gray-500 mt-2">70% on track</p>
301
+ </div>
302
+ </div>
303
+ <div class="bg-white p-4 rounded-lg shadow">
304
+ <div class="flex items-center justify-between">
305
+ <div>
306
+ <p class="text-sm font-medium text-gray-500">Pending Tasks</p>
307
+ <p class="text-2xl font-semibold text-gray-800">24</p>
308
+ </div>
309
+ <div class="bg-yellow-100 rounded-full p-3">
310
+ <i class="fas fa-tasks text-yellow-600"></i>
311
+ </div>
312
+ </div>
313
+ <div class="mt-4">
314
+ <div class="h-2 bg-gray-200 rounded-full">
315
+ <div class="h-2 bg-yellow-500 rounded-full" style="width: 45%"></div>
316
+ </div>
317
+ <p class="text-xs text-gray-500 mt-2">45% at risk</p>
318
+ </div>
319
+ </div>
320
+ <div class="bg-white p-4 rounded-lg shadow">
321
+ <div class="flex items-center justify-between">
322
+ <div>
323
+ <p class="text-sm font-medium text-gray-500">Overdue Tasks</p>
324
+ <p class="text-2xl font-semibold text-gray-800">5</p>
325
+ </div>
326
+ <div class="bg-red-100 rounded-full p-3">
327
+ <i class="fas fa-exclamation-triangle text-red-600"></i>
328
+ </div>
329
+ </div>
330
+ <div class="mt-4">
331
+ <div class="h-2 bg-gray-200 rounded-full">
332
+ <div class="h-2 bg-red-500 rounded-full" style="width: 90%"></div>
333
+ </div>
334
+ <p class="text-xs text-gray-500 mt-2">90% critical</p>
335
+ </div>
336
+ </div>
337
+ <div class="bg-white p-4 rounded-lg shadow">
338
+ <div class="flex items-center justify-between">
339
+ <div>
340
+ <p class="text-sm font-medium text-gray-500">Completed</p>
341
+ <p class="text-2xl font-semibold text-gray-800">48</p>
342
+ </div>
343
+ <div class="bg-green-100 rounded-full p-3">
344
+ <i class="fas fa-check-circle text-green-600"></i>
345
+ </div>
346
+ </div>
347
+ <div class="mt-4">
348
+ <div class="h-2 bg-gray-200 rounded-full">
349
+ <div class="h-2 bg-green-500 rounded-full" style="width: 65%"></div>
350
+ </div>
351
+ <p class="text-xs text-gray-500 mt-2">65% increase</p>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
357
+ <div class="lg:col-span-2">
358
+ <div class="bg-white rounded-lg shadow overflow-hidden">
359
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
360
+ <h3 class="text-lg font-medium text-gray-900">Recent Tasks</h3>
361
+ <button class="text-indigo-600 hover:text-indigo-500 text-sm font-medium">View All</button>
362
+ </div>
363
+ <div class="divide-y divide-gray-200">
364
+ <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card priority-high">
365
+ <div class="flex items-start">
366
+ <div class="custom-checkbox mr-3 mt-1">
367
+ <input type="checkbox" id="task-1" class="opacity-0 absolute">
368
+ <label for="task-1" class="flex items-center cursor-pointer">
369
+ <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span>
370
+ </label>
371
+ </div>
372
+ <div class="flex-1 min-w-0">
373
+ <div class="flex justify-between items-start">
374
+ <p class="text-sm font-medium text-gray-900 truncate">Brand Identity for Client X</p>
375
+ <div class="flex items-center space-x-1">
376
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Design</span>
377
+ </div>
378
+ </div>
379
+ <p class="text-xs text-gray-500 mt-1">Design new logo and brand guidelines</p>
380
+ <div class="mt-2 flex items-center text-xs text-gray-500">
381
+ <i class="far fa-clock mr-1"></i>
382
+ <span>Due: May 15</span>
383
+ <span class="mx-2">•</span>
384
+ <i class="fas fa-user mr-1"></i>
385
+ <span>Assigned to: Sarah M.</span>
386
+ </div>
387
+ <div class="mt-2 flex items-center">
388
+ <div class="flex -space-x-2">
389
+ <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Sarah M.">
390
+ <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael B.">
391
+ </div>
392
+ <div class="ml-2 flex items-center text-xs text-gray-500">
393
+ <i class="fas fa-comment mr-1"></i>
394
+ <span>3 comments</span>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card priority-medium">
401
+ <div class="flex items-start">
402
+ <div class="custom-checkbox mr-3 mt-1">
403
+ <input type="checkbox" id="task-2" class="opacity-0 absolute">
404
+ <label for="task-2" class="flex items-center cursor-pointer">
405
+ <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span>
406
+ </label>
407
+ </div>
408
+ <div class="flex-1 min-w-0">
409
+ <div class="flex justify-between items-start">
410
+ <p class="text-sm font-medium text-gray-900 truncate">Website Redesign</p>
411
+ <div class="flex items-center space-x-1">
412
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Development</span>
413
+ </div>
414
+ </div>
415
+ <p class="text-xs text-gray-500 mt-1">Implement new design for homepage</p>
416
+ <div class="mt-2 flex items-center text-xs text-gray-500">
417
+ <i class="far fa-clock mr-1"></i>
418
+ <span>Due: May 20</span>
419
+ <span class="mx-2">•</span>
420
+ <i class="fas fa-user mr-1"></i>
421
+ <span>Assigned to: Alex T.</span>
422
+ </div>
423
+ <div class="mt-2 flex items-center">
424
+ <div class="flex -space-x-2">
425
+ <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex T.">
426
+ <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Lisa K.">
427
+ </div>
428
+ <div class="ml-2 flex items-center text-xs text-gray-500">
429
+ <i class="fas fa-comment mr-1"></i>
430
+ <span>5 comments</span>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card priority-low">
437
+ <div class="flex items-start">
438
+ <div class="custom-checkbox mr-3 mt-1">
439
+ <input type="checkbox" id="task-3" class="opacity-0 absolute">
440
+ <label for="task-3" class="flex items-center cursor-pointer">
441
+ <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span>
442
+ </label>
443
+ </div>
444
+ <div class="flex-1 min-w-0">
445
+ <div class="flex justify-between items-start">
446
+ <p class="text-sm font-medium text-gray-900 truncate">Product Packaging</p>
447
+ <div class="flex items-center space-x-1">
448
+ <span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">Print</span>
449
+ </div>
450
+ </div>
451
+ <p class="text-xs text-gray-500 mt-1">Create packaging design for new product line</p>
452
+ <div class="mt-2 flex items-center text-xs text-gray-500">
453
+ <i class="far fa-clock mr-1"></i>
454
+ <span>Due: May 25</span>
455
+ <span class="mx-2">•</span>
456
+ <i class="fas fa-user mr-1"></i>
457
+ <span>Assigned to: Jamie R.</span>
458
+ </div>
459
+ <div class="mt-2 flex items-center">
460
+ <div class="flex -space-x-2">
461
+ <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jamie R.">
462
+ </div>
463
+ <div class="ml-2 flex items-center text-xs text-gray-500">
464
+ <i class="fas fa-comment mr-1"></i>
465
+ <span>1 comment</span>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ <div class="p-4 hover:bg-gray-50 transition-colors duration-150 task-card">
472
+ <div class="flex items-start">
473
+ <div class="custom-checkbox mr-3 mt-1">
474
+ <input type="checkbox" id="task-4" class="opacity-0 absolute">
475
+ <label for="task-4" class="flex items-center cursor-pointer">
476
+ <span class="checkmark border border-gray-300 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span>
477
+ </label>
478
+ </div>
479
+ <div class="flex-1 min-w-0">
480
+ <div class="flex justify-between items-start">
481
+ <p class="text-sm font-medium text-gray-900 truncate">3D Animation</p>
482
+ <div class="flex items-center space-x-1">
483
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Motion</span>
484
+ </div>
485
+ </div>
486
+ <p class="text-xs text-gray-500 mt-1">Create 30-second product animation</p>
487
+ <div class="mt-2 flex items-center text-xs text-gray-500">
488
+ <i class="far fa-clock mr-1"></i>
489
+ <span>Due: May 30</span>
490
+ <span class="mx-2">•</span>
491
+ <i class="fas fa-user mr-1"></i>
492
+ <span>Assigned to: David L.</span>
493
+ </div>
494
+ <div class="mt-2 flex items-center">
495
+ <div class="flex -space-x-2">
496
+ <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/67.jpg" alt="David L.">
497
+ <img class="w-6 h-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Maria G.">
498
+ </div>
499
+ <div class="ml-2 flex items-center text-xs text-gray-500">
500
+ <i class="fas fa-comment mr-1"></i>
501
+ <span>2 comments</span>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <div>
512
+ <div class="bg-white rounded-lg shadow overflow-hidden">
513
+ <div class="p-4 border-b border-gray-200">
514
+ <h3 class="text-lg font-medium text-gray-900">Upcoming Deadlines</h3>
515
+ </div>
516
+ <div class="p-4">
517
+ <div class="space-y-4">
518
+ <div>
519
+ <p class="text-sm font-medium text-gray-800">Today - May 10</p>
520
+ <div class="mt-2 pl-4 border-l-2 border-indigo-200">
521
+ <div class="py-2">
522
+ <p class="text-sm font-medium">Client Presentation</p>
523
+ <p class="text-xs text-gray-500 mt-1">10:00 AM - 11:00 AM</p>
524
+ </div>
525
+ <div class="py-2">
526
+ <p class="text-sm font-medium">Review Packaging Design</p>
527
+ <p class="text-xs text-gray-500 mt-1">2:00 PM - 3:00 PM</p>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ <div>
532
+ <p class="text-sm font-medium text-gray-800">Tomorrow - May 11</p>
533
+ <div class="mt-2 pl-4 border-l-2 border-indigo-200">
534
+ <div class="py-2">
535
+ <p class="text-sm font-medium">Team Standup</p>
536
+ <p class="text-xs text-gray-500 mt-1">9:30 AM - 10:00 AM</p>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ <div>
541
+ <p class="text-sm font-medium text-gray-800">May 15</p>
542
+ <div class="mt-2 pl-4 border-l-2 border-indigo-200">
543
+ <div class="py-2">
544
+ <p class="text-sm font-medium">Brand Identity Deadline</p>
545
+ <p class="text-sm text-gray-500 mt-1">All day</p>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- Tasks view (hidden by default) -->
557
+ <div id="tasks-view" class="hidden">
558
+ <!-- Tasks view content -->
559
+ </div>
560
+
561
+ <!-- Team view (hidden by default) -->
562
+ <div id="team-view" class="hidden">
563
+ <div class="bg-white rounded-lg shadow overflow-hidden">
564
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
565
+ <h3 class="text-lg font-medium text-gray-900">Team Management</h3>
566
+ <div>
567
+ <button id="add-member-btn" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
568
+ <i class="fas fa-user-plus mr-2"></i> Add Member
569
+ </button>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="divide-y divide-gray-200">
574
+ <div class="p-4">
575
+ <div class="flex justify-between items-center">
576
+ <div class="flex items-center">
577
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
578
+ <div class="ml-4">
579
+ <p class="text-sm font-medium text-gray-900">John Creative</p>
580
+ <p class="text-sm text-gray-500">john@example.com</p>
581
+ </div>
582
+ </div>
583
+ <div>
584
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Admin</span>
585
+ </div>
586
+ <div class="flex space-x-2">
587
+ <button class="text-indigo-600 hover:text-indigo-900">
588
+ <i class="fas fa-edit"></i>
589
+ </button>
590
+ <button class="text-gray-400 hover:text-gray-500">
591
+ <i class="fas fa-trash"></i>
592
+ </button>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ <div class="p-4">
597
+ <div class="flex justify-between items-center">
598
+ <div class="flex items-center">
599
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
600
+ <div class="ml-4">
601
+ <p class="text-sm font-medium text-gray-900">Sarah M.</p>
602
+ <p class="text-sm text-gray-500">sarah@example.com</p>
603
+ </div>
604
+ </div>
605
+ <div>
606
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Designer</span>
607
+ </div>
608
+ <div class="flex space-x-2">
609
+ <button class="text-indigo-600 hover:text-indigo-900">
610
+ <i class="fas fa-edit"></i>
611
+ </button>
612
+ <button class="text-gray-400 hover:text-gray-500">
613
+ <i class="fas fa-trash"></i>
614
+ </button>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ <div class="p-4">
619
+ <div class="flex justify-between items-center">
620
+ <div class="flex items-center">
621
+ <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
622
+ <div class="ml-4">
623
+ <p class="text-sm font-medium text-gray-900">Michael B.</p>
624
+ <p class="text-sm text-gray-500">michael@example.com</p>
625
+ </div>
626
+ </div>
627
+ <div>
628
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Developer</span>
629
+ </div>
630
+ <div class="flex space-x-2">
631
+ <button class="text-indigo-600 hover:text-indigo-900">
632
+ <i class="fas fa-edit"></i>
633
+ </button>
634
+ <button class="text-gray-400 hover:text-gray-500">
635
+ <i class="fas fa-trash"></i>
636
+ </button>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ <div class="p-4">
641
+ <div class="flex justify-between items-center">
642
+ <div class="flex items-center">
643
+ <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
644
+ <div class="ml-4">
645
+ <p class="text-sm font-medium text-gray-900">David L.</p>
646
+ <p class="text-sm text-gray-500">david@example.com</p>
647
+ </div>
648
+ </div>
649
+ <div>
650
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">3D Artist</span>
651
+ </div>
652
+ <div class="flex space-x-2">
653
+ <button class="text-indigo-600 hover:text-indigo-900">
654
+ <i class="fas fa-edit"></i>
655
+ </button>
656
+ <button class="text-gray-400 hover:text-gray-500">
657
+ <i class="fas fa-trash"></i>
658
+ </button>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- Calendar view (hidden by default) -->
667
+ <div id="calendar-view" class="hidden">
668
+ <div class="bg-white rounded-lg shadow overflow-hidden">
669
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
670
+ <div class="flex items-center space-x-4">
671
+ <button class="text-gray-500 hover:text-indigo-600">
672
+ <i class="fas fa-chevron-left"></i>
673
+ </button>
674
+ <h3 class="text-lg font-medium text-gray-900">May 2023</h3>
675
+ <button class="text-gray-500 hover:text-indigo-600">
676
+ <i class="fas fa-chevron-right"></i>
677
+ </button>
678
+ </div>
679
+ <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
680
+ Add Event
681
+ </button>
682
+ </div>
683
+ <div class="p-4">
684
+ <div class="grid grid-cols-7 gap-px bg-gray-200">
685
+ <!-- Calendar header -->
686
+ <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Sun</div>
687
+ <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Mon</div>
688
+ <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Tue</div>
689
+ <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Wed</div>
690
+ <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Thu</div>
691
+ <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Fri</div>
692
+ <div class="bg-gray-100 py-2 text-center text-xs font-semibold text-gray-500">Sat</div>
693
+
694
+ <!-- Calendar days -->
695
+ <div class="bg-white p-1 h-24">
696
+ <div class="text-right">30</div>
697
+ </div>
698
+ <div class="bg-white p-1 h-24">
699
+ <div class="text-right">1</div>
700
+ </div>
701
+ <div class="bg-white p-1 h-24">
702
+ <div class="text-right">2</div>
703
+ </div>
704
+ <div class="bg-white p-1 h-24">
705
+ <div class="text-right">3</div>
706
+ </div>
707
+ <div class="bg-white p-1 h-24">
708
+ <div class="text-right">4</div>
709
+ </div>
710
+ <div class="bg-white p-1 h-24">
711
+ <div class="text-right">5</div>
712
+ <div class="text-xs truncate mt-1 bg-indigo-100 text-indigo-800 rounded px-1">Brand Review</div>
713
+ </div>
714
+ <div class="bg-white p-1 h-24">
715
+ <div class="text-right">6</div>
716
+ </div>
717
+ <div class="bg-white p-1 h-24">
718
+ <div class="text-right">7</div>
719
+ </div>
720
+ <div class="bg-white p-1 h-24">
721
+ <div class="text-right">8</div>
722
+ <div class="text-xs truncate mt-1 bg-yellow-100 text-yellow-800 rounded px-1">Client Meeting</div>
723
+ </div>
724
+ <div class="bg-white p-1 h-24">
725
+ <div class="text-right">9</div>
726
+ </div>
727
+ <div class="bg-white p-1 h-24">
728
+ <div class="text-right">10</div>
729
+ <div class="text-xs truncate mt-1 bg-indigo-100 text-indigo-800 rounded px-1">Presentation</div>
730
+ <div class="text-xs truncate mt-1 bg-pink-100 text-pink-800 rounded px-1">Design Review</div>
731
+ </div>
732
+ <div class="bg-white p-1 h-24">
733
+ <div class="text-right">11</div>
734
+ </div>
735
+ <div class="bg-white p-1 h-24">
736
+ <div class="text-right">12</div>
737
+ </div>
738
+ <div class="bg-white p-1 h-24">
739
+ <div class="text-right">13</div>
740
+ </div>
741
+ <div class="bg-white p-1 h-24">
742
+ <div class="text-right">14</div>
743
+ </div>
744
+ <div class="bg-white p-1 h-24">
745
+ <div class="text-right">15</div>
746
+ <div class="text-xs truncate mt-1 bg-red-100 text-red-800 rounded px-1">Brand Identity Due</div>
747
+ </div>
748
+ <div class="bg-white p-1 h-24">
749
+ <div class="text-right">16</div>
750
+ </div>
751
+ <div class="bg-white p-1 h-24">
752
+ <div class="text-right">17</div>
753
+ </div>
754
+ <div class="bg-white p-1 h-24">
755
+ <div class="text-right">18</div>
756
+ </div>
757
+ <div class="bg-white p-1 h-24">
758
+ <div class="text-right">19</div>
759
+ </div>
760
+ <div class="bg-white p-1 h-24">
761
+ <div class="text-right">20</div>
762
+ <div class="text-xs truncate mt-1 bg-purple-100 text-purple-800 rounded px-1">Website Deadline</div>
763
+ </div>
764
+ <div class="bg-white p-1 h-24">
765
+ <div class="text-right">21</div>
766
+ </div>
767
+ <div class="bg-white p-1 h-24">
768
+ <div class="text-right">22</div>
769
+ </div>
770
+ <div class="bg-white p-1 h-24">
771
+ <div class="text-right">23</div>
772
+ </div>
773
+ <div class="bg-white p-1 h-24">
774
+ <div class="text-right">24</div>
775
+ </div>
776
+ <div class="bg-white p-1 h-24">
777
+ <div class="text-right">25</div>
778
+ <div class="text-xs truncate mt-1 bg-pink-100 text-pink-800 rounded px-1">Packaging Due</div>
779
+ </div>
780
+ <div class="bg-white p-1 h-24">
781
+ <div class="text-right">26</div>
782
+ </div>
783
+ <div class="bg-white p-1 h-24">
784
+ <div class="text-right">27</div>
785
+ </div>
786
+ <div class="bg-white p-1 h-24">
787
+ <div class="text-right">28</div>
788
+ </div>
789
+ <div class="bg-white p-1 h-24">
790
+ <div class="text-right">29</div>
791
+ </div>
792
+ <div class="bg-white p-1 h-24">
793
+ <div class="text-right">30</div>
794
+ <div class="text-xs truncate mt-1 bg-blue-100 text-blue-800 rounded px-1">Animation Due</div>
795
+ </div>
796
+ <div class="bg-white p-1 h-24">
797
+ <div class="text-right">31</div>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ </div>
803
+
804
+ <!-- Task detail view (hidden by default) -->
805
+ <div id="task-detail-view" class="hidden">
806
+ <div class="bg-white rounded-lg shadow overflow-hidden">
807
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
808
+ <div>
809
+ <h3 class="text-lg font-medium text-gray-900">Task Details</h3>
810
+ <div class="flex items-center mt-1">
811
+ <span class="text-sm text-gray-500">Task ID: #CTM-1024</span>
812
+ <span class="mx-2 text-gray-400">•</span>
813
+ <span class="text-sm text-gray-500">Created: May 5, 2023</span>
814
+ <span class="mx-2 text-gray-400">•</span>
815
+ <span class="text-sm text-gray-500">Last updated: 2 hours ago</span>
816
+ </div>
817
+ </div>
818
+ <div class="flex space-x-2">
819
+ <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
820
+ <i class="fas fa-pencil-alt mr-2"></i> Edit
821
+ </button>
822
+ <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
823
+ <i class="fas fa-check mr-2"></i> Mark Complete
824
+ </button>
825
+ </div>
826
+ </div>
827
+
828
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
829
+ <div class="lg:col-span-2">
830
+ <div class="mb-6">
831
+ <h4 class="text-lg font-medium text-gray-900 mb-2">Brand Identity for Client X</h4>
832
+ <div class="flex flex-wrap items-center gap-2 mb-4">
833
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Design</span>
834
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500 text-white">High Priority</span>
835
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">In Progress</span>
836
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Due May 15</span>
837
+ </div>
838
+
839
+ <div class="flex items-center text-sm text-gray-500 mb-4">
840
+ <i class="fas fa-user mr-1"></i>
841
+ <span>Assigned to: Sarah M.</span>
842
+ <span class="mx-2">•</span>
843
+ <i class="fas fa-users mr-1"></i>
844
+ <span>Team: Design Team</span>
845
+ <span class="mx-2">•</span>
846
+ <i class="fas fa-project-diagram mr-1"></i>
847
+ <span>Project: Client X Rebrand</span>
848
+
849
+ </html>