Hugging Face's logo

Spaces:
dshunt
/
anycoder-9e962b94
Running

App Files Community
dshunt commited on
Commit
35b4be4
·
verified ·
1 Parent(s): 507f00e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +923 -19
index.html CHANGED
@@ -1,19 +1,923 @@
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>TaskMaster Pro</title>
7
+
8
+ <!-- Import Google Fonts (Poppins & Inter) -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
12
+
13
+ <!-- Import FontAwesome for Icons -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+
16
+ <style>
17
+ :root {
18
+ /* Modern Color Palette - Light Mode */
19
+ --primary-color: #6366f1;
20
+ --primary-hover: #4f46e5;
21
+ --secondary-color: #ec4899;
22
+ --bg-body: #f3f4f6;
23
+ --bg-card: #ffffff;
24
+ --text-main: #1f2937;
25
+ --text-secondary: #6b7280;
26
+ --border-color: #e5e7eb;
27
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
28
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
29
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
30
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
31
+ }
32
+
33
+ /* Dark Mode Variables */
34
+ [data-theme="dark"] {
35
+ --bg-body: #0f172a;
36
+ --bg-card: #1e293b;
37
+ --text-main: #f1f5f9;
38
+ --text-secondary: #94a3b8;
39
+ --border-color: #334155;
40
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
41
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
42
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
43
+ }
44
+
45
+ * {
46
+ box-sizing: border-box;
47
+ margin: 0;
48
+ padding: 0;
49
+ }
50
+
51
+ body {
52
+ font-family: 'Inter', sans-serif;
53
+ background-color: var(--bg-body);
54
+ color: var(--text-main);
55
+ transition: var(--transition);
56
+ line-height: 1.6;
57
+ min-height: 100vh;
58
+ display: flex;
59
+ flex-direction: column;
60
+ }
61
+
62
+ /* --- Header Section --- */
63
+ header {
64
+ background-color: var(--bg-card);
65
+ padding: 1rem 2rem;
66
+ box-shadow: var(--shadow-sm);
67
+ display: flex;
68
+ justify-content: space-between;
69
+ align-items: center;
70
+ position: sticky;
71
+ top: 0;
72
+ z-index: 100;
73
+ border-bottom: 1px solid var(--border-color);
74
+ }
75
+
76
+ .brand {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 10px;
80
+ font-family: 'Poppins', sans-serif;
81
+ font-weight: 800;
82
+ font-size: 1.5rem;
83
+ color: var(--primary-color);
84
+ }
85
+
86
+ .brand i {
87
+ font-size: 1.8rem;
88
+ }
89
+
90
+ .header-controls {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 1.5rem;
94
+ }
95
+
96
+ .theme-toggle {
97
+ cursor: pointer;
98
+ font-size: 1.2rem;
99
+ color: var(--text-secondary);
100
+ transition: color 0.3s;
101
+ padding: 8px;
102
+ border-radius: 50%;
103
+ background: transparent;
104
+ border: none;
105
+ }
106
+
107
+ .theme-toggle:hover {
108
+ background-color: var(--bg-body);
109
+ color: var(--primary-color);
110
+ }
111
+
112
+ .user-avatar {
113
+ width: 40px;
114
+ height: 40px;
115
+ border-radius: 50%;
116
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
117
+ display: flex;
118
+ align-items: center;
119
+ justify-content: center;
120
+ color: white;
121
+ font-weight: bold;
122
+ font-size: 1rem;
123
+ }
124
+
125
+ /* --- Main Layout --- */
126
+ main {
127
+ flex: 1;
128
+ padding: 2rem;
129
+ max-width: 1400px;
130
+ margin: 0 auto;
131
+ width: 100%;
132
+ }
133
+
134
+ .dashboard-header {
135
+ margin-bottom: 2rem;
136
+ display: flex;
137
+ justify-content: space-between;
138
+ align-items: flex-end;
139
+ }
140
+
141
+ .dashboard-title h1 {
142
+ font-family: 'Poppins', sans-serif;
143
+ font-size: 2.5rem;
144
+ font-weight: 700;
145
+ }
146
+
147
+ .dashboard-title p {
148
+ color: var(--text-secondary);
149
+ margin-top: 0.5rem;
150
+ }
151
+
152
+ .stats-container {
153
+ display: flex;
154
+ gap: 1.5rem;
155
+ }
156
+
157
+ .stat-card {
158
+ background-color: var(--bg-card);
159
+ padding: 1rem 1.5rem;
160
+ border-radius: 12px;
161
+ box-shadow: var(--shadow-sm);
162
+ border-left: 4px solid var(--primary-color);
163
+ min-width: 150px;
164
+ }
165
+
166
+ .stat-value {
167
+ font-size: 2rem;
168
+ font-weight: 700;
169
+ color: var(--primary-color);
170
+ }
171
+
172
+ .stat-label {
173
+ color: var(--text-secondary);
174
+ font-size: 0.9rem;
175
+ text-transform: uppercase;
176
+ letter-spacing: 0.5px;
177
+ }
178
+
179
+ /* --- Task Board (Kanban) --- */
180
+ .board-container {
181
+ display: grid;
182
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
183
+ gap: 2rem;
184
+ height: 100%;
185
+ }
186
+
187
+ .column {
188
+ background-color: var(--bg-body);
189
+ border-radius: 16px;
190
+ padding: 1.5rem;
191
+ display: flex;
192
+ flex-direction: column;
193
+ min-height: 600px;
194
+ transition: var(--transition);
195
+ }
196
+
197
+ .column-header {
198
+ display: flex;
199
+ justify-content: space-between;
200
+ align-items: center;
201
+ margin-bottom: 1.5rem;
202
+ padding-bottom: 1rem;
203
+ border-bottom: 2px solid var(--border-color);
204
+ }
205
+
206
+ .column-title {
207
+ font-family: 'Poppins', sans-serif;
208
+ font-weight: 600;
209
+ font-size: 1.2rem;
210
+ display: flex;
211
+ align-items: center;
212
+ gap: 10px;
213
+ }
214
+
215
+ .task-count {
216
+ background-color: var(--bg-card);
217
+ padding: 2px 8px;
218
+ border-radius: 12px;
219
+ font-size: 0.8rem;
220
+ color: var(--text-secondary);
221
+ font-weight: 600;
222
+ }
223
+
224
+ .add-btn {
225
+ background: none;
226
+ border: none;
227
+ color: var(--primary-color);
228
+ cursor: pointer;
229
+ font-size: 1.2rem;
230
+ transition: transform 0.2s;
231
+ padding: 5px;
232
+ border-radius: 8px;
233
+ }
234
+
235
+ .add-btn:hover {
236
+ background-color: rgba(99, 102, 241, 0.1);
237
+ transform: scale(1.1);
238
+ }
239
+
240
+ .task-list {
241
+ flex: 1;
242
+ overflow-y: auto;
243
+ padding-right: 5px;
244
+ scrollbar-width: thin;
245
+ }
246
+
247
+ /* Custom Scrollbar */
248
+ .task-list::-webkit-scrollbar {
249
+ width: 6px;
250
+ }
251
+ .task-list::-webkit-scrollbar-track {
252
+ background: transparent;
253
+ }
254
+ .task-list::-webkit-scrollbar-thumb {
255
+ background-color: var(--border-color);
256
+ border-radius: 20px;
257
+ }
258
+
259
+ /* --- Task Cards --- */
260
+ .task-card {
261
+ background-color: var(--bg-card);
262
+ padding: 1.25rem;
263
+ border-radius: 12px;
264
+ margin-bottom: 1rem;
265
+ box-shadow: var(--shadow-sm);
266
+ transition: var(--transition);
267
+ border: 1px solid transparent;
268
+ cursor: grab;
269
+ position: relative;
270
+ }
271
+
272
+ .task-card:hover {
273
+ transform: translateY(-2px);
274
+ box-shadow: var(--shadow-md);
275
+ border-color: var(--primary-color);
276
+ }
277
+
278
+ .task-card.dragging {
279
+ opacity: 0.5;
280
+ cursor: grabbing;
281
+ }
282
+
283
+ .task-priority {
284
+ display: inline-block;
285
+ font-size: 0.75rem;
286
+ font-weight: 700;
287
+ text-transform: uppercase;
288
+ padding: 4px 8px;
289
+ border-radius: 6px;
290
+ margin-bottom: 0.75rem;
291
+ }
292
+
293
+ .priority-high { background-color: #fee2e2; color: #dc2626; }
294
+ .priority-medium { background-color: #fef3c7; color: #d97706; }
295
+ .priority-low { background-color: #dbeafe; color: #2563eb; }
296
+
297
+ .task-title {
298
+ font-family: 'Poppins', sans-serif;
299
+ font-size: 1.1rem;
300
+ font-weight: 600;
301
+ margin-bottom: 0.5rem;
302
+ color: var(--text-main);
303
+ }
304
+
305
+ .task-desc {
306
+ font-size: 0.9rem;
307
+ color: var(--text-secondary);
308
+ margin-bottom: 1rem;
309
+ white-space: pre-wrap;
310
+ }
311
+
312
+ .task-meta {
313
+ display: flex;
314
+ justify-content: space-between;
315
+ align-items: center;
316
+ border-top: 1px solid var(--border-color);
317
+ padding-top: 0.75rem;
318
+ font-size: 0.85rem;
319
+ color: var(--text-secondary);
320
+ }
321
+
322
+ .due-date {
323
+ display: flex;
324
+ align-items: center;
325
+ gap: 5px;
326
+ }
327
+
328
+ .delete-btn {
329
+ background: none;
330
+ border: none;
331
+ color: #9ca3af;
332
+ cursor: pointer;
333
+ padding: 5px;
334
+ border-radius: 4px;
335
+ transition: all 0.2s;
336
+ }
337
+
338
+ .delete-btn:hover {
339
+ color: #ef4444;
340
+ background-color: #fee2e2;
341
+ }
342
+
343
+ /* --- Modal / Add Task Form --- */
344
+ .modal-overlay {
345
+ position: fixed;
346
+ top: 0;
347
+ left: 0;
348
+ width: 100%;
349
+ height: 100%;
350
+ background-color: rgba(0, 0, 0, 0.5);
351
+ backdrop-filter: blur(4px);
352
+ display: flex;
353
+ justify-content: center;
354
+ align-items: center;
355
+ z-index: 200;
356
+ opacity: 0;
357
+ visibility: hidden;
358
+ transition: var(--transition);
359
+ }
360
+
361
+ .modal-overlay.active {
362
+ opacity: 1;
363
+ visibility: visible;
364
+ }
365
+
366
+ .modal {
367
+ background-color: var(--bg-card);
368
+ padding: 2rem;
369
+ border-radius: 16px;
370
+ width: 90%;
371
+ max-width: 500px;
372
+ box-shadow: var(--shadow-lg);
373
+ transform: scale(0.9);
374
+ transition: var(--transition);
375
+ }
376
+
377
+ .modal-overlay.active .modal {
378
+ transform: scale(1);
379
+ }
380
+
381
+ .modal-header {
382
+ display: flex;
383
+ justify-content: space-between;
384
+ align-items: center;
385
+ margin-bottom: 1.5rem;
386
+ }
387
+
388
+ .modal-title {
389
+ font-family: 'Poppins', sans-serif;
390
+ font-size: 1.5rem;
391
+ font-weight: 700;
392
+ }
393
+
394
+ .close-btn {
395
+ background: none;
396
+ border: none;
397
+ font-size: 1.5rem;
398
+ cursor: pointer;
399
+ color: var(--text-secondary);
400
+ }
401
+
402
+ .form-group {
403
+ margin-bottom: 1.25rem;
404
+ }
405
+
406
+ .form-label {
407
+ display: block;
408
+ margin-bottom: 0.5rem;
409
+ font-size: 0.9rem;
410
+ font-weight: 500;
411
+ color: var(--text-main);
412
+ }
413
+
414
+ .form-input {
415
+ width: 100%;
416
+ padding: 0.75rem;
417
+ border-radius: 8px;
418
+ border: 1px solid var(--border-color);
419
+ background-color: var(--bg-body);
420
+ color: var(--text-main);
421
+ font-family: 'Inter', sans-serif;
422
+ font-size: 1rem;
423
+ transition: var(--transition);
424
+ }
425
+
426
+ .form-input:focus {
427
+ outline: none;
428
+ border-color: var(--primary-color);
429
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
430
+ }
431
+
432
+ textarea.form-input {
433
+ resize: vertical;
434
+ min-height: 100px;
435
+ }
436
+
437
+ .form-select {
438
+ width: 100%;
439
+ padding: 0.75rem;
440
+ border-radius: 8px;
441
+ border: 1px solid var(--border-color);
442
+ background-color: var(--bg-body);
443
+ color: var(--text-main);
444
+ font-family: 'Inter', sans-serif;
445
+ font-size: 1rem;
446
+ cursor: pointer;
447
+ }
448
+
449
+ .modal-footer {
450
+ display: flex;
451
+ justify-content: flex-end;
452
+ gap: 1rem;
453
+ margin-top: 2rem;
454
+ }
455
+
456
+ .btn {
457
+ padding: 0.75rem 1.5rem;
458
+ border-radius: 8px;
459
+ font-weight: 600;
460
+ font-size: 0.95rem;
461
+ cursor: pointer;
462
+ transition: var(--transition);
463
+ border: none;
464
+ font-family: 'Inter', sans-serif;
465
+ }
466
+
467
+ .btn-primary {
468
+ background-color: var(--primary-color);
469
+ color: white;
470
+ }
471
+
472
+ .btn-primary:hover {
473
+ background-color: var(--primary-hover);
474
+ transform: translateY(-1px);
475
+ }
476
+
477
+ .btn-secondary {
478
+ background-color: transparent;
479
+ color: var(--text-secondary);
480
+ border: 1px solid var(--border-color);
481
+ }
482
+
483
+ .btn-secondary:hover {
484
+ background-color: var(--bg-body);
485
+ color: var(--text-main);
486
+ }
487
+
488
+ /* --- Footer --- */
489
+ footer {
490
+ text-align: center;
491
+ padding: 2rem;
492
+ color: var(--text-secondary);
493
+ font-size: 0.9rem;
494
+ border-top: 1px solid var(--border-color);
495
+ margin-top: auto;
496
+ }
497
+
498
+ .footer-link {
499
+ color: var(--primary-color);
500
+ text-decoration: none;
501
+ font-weight: 600;
502
+ }
503
+
504
+ .footer-link:hover {
505
+ text-decoration: underline;
506
+ }
507
+
508
+ /* --- Responsive Mobile --- */
509
+ @media (max-width: 768px) {
510
+ .dashboard-title h1 { font-size: 2rem; }
511
+ .stats-container { grid-template-columns: 1fr 1fr; }
512
+ .header-controls { gap: 1rem; }
513
+ .brand span { display: none; }
514
+ }
515
+ </style>
516
+ </head>
517
+ <body>
518
+
519
+ <!-- Header -->
520
+ <header>
521
+ <div class="brand">
522
+ <i class="fa-solid fa-rocket"></i>
523
+ <span>TaskMaster</span>
524
+ </div>
525
+ <div class="header-controls">
526
+ <button class="theme-toggle" id="themeToggle" title="Toggle Theme">
527
+ <i class="fa-solid fa-moon"></i>
528
+ </button>
529
+ <div class="user-avatar">JD</div>
530
+ </div>
531
+ </header>
532
+
533
+ <!-- Main Content -->
534
+ <main>
535
+ <div class="dashboard-header">
536
+ <div class="dashboard-title">
537
+ <h1>My Dashboard</h1>
538
+ <p>Welcome back, John! You have <span id="totalTasks" style="color:var(--primary-color); font-weight:700;">0</span> pending tasks.</p>
539
+ </div>
540
+ <div class="stats-container">
541
+ <div class="stat-card">
542
+ <div class="stat-value" id="pendingCount">0</div>
543
+ <div class="stat-label">To Do</div>
544
+ </div>
545
+ <div class="stat-card" style="border-color: #f59e0b;">
546
+ <div class="stat-value" id="progressCount">0</div>
547
+ <div class="stat-label">In Progress</div>
548
+ </div>
549
+ <div class="stat-card" style="border-color: #10b981;">
550
+ <div class="stat-value" id="doneCount">0</div>
551
+ <div class="stat-label">Completed</div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- Kanban Board -->
557
+ <div class="board-container">
558
+
559
+ <!-- Column: To Do -->
560
+ <div class="column" id="todo">
561
+ <div class="column-header">
562
+ <div class="column-title">
563
+ <i class="fa-solid fa-list-check" style="color: #6366f1;"></i>
564
+ To Do
565
+ <span class="task-count" id="count-todo">0</span>
566
+ </div>
567
+ <button class="add-btn" onclick="openModal('todo')">
568
+ <i class="fa-solid fa-plus"></i>
569
+ </button>
570
+ </div>
571
+ <div class="task-list" id="list-todo">
572
+ <!-- Tasks injected here -->
573
+ </div>
574
+ </div>
575
+
576
+ <!-- Column: In Progress -->
577
+ <div class="column" id="inprogress">
578
+ <div class="column-header">
579
+ <div class="column-title">
580
+ <i class="fa-solid fa-circle-play" style="color: #f59e0b;"></i>
581
+ In Progress
582
+ <span class="task-count" id="count-inprogress">0</span>
583
+ </div>
584
+ <button class="add-btn" onclick="openModal('inprogress')">
585
+ <i class="fa-solid fa-plus"></i>
586
+ </button>
587
+ </div>
588
+ <div class="task-list" id="list-inprogress">
589
+ <!-- Tasks injected here -->
590
+ </div>
591
+ </div>
592
+
593
+ <!-- Column: Done -->
594
+ <div class="column" id="done">
595
+ <div class="column-header">
596
+ <div class="column-title">
597
+ <i class="fa-solid fa-check-to-slot" style="color: #10b981;"></i>
598
+ Completed
599
+ <span class="task-count" id="count-done">0</span>
600
+ </div>
601
+ </div>
602
+ <div class="task-list" id="list-done">
603
+ <!-- Tasks injected here -->
604
+ </div>
605
+ </div>
606
+
607
+ </div>
608
+ </main>
609
+
610
+ <!-- Footer with Requirement -->
611
+ <footer>
612
+ <p>&copy; 2023 TaskMaster Pro. Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link">any coder</a>.</p>
613
+ </footer>
614
+
615
+ <!-- Add Task Modal -->
616
+ <div class="modal-overlay" id="taskModal">
617
+ <div class="modal">
618
+ <div class="modal-header">
619
+ <h2 class="modal-title" id="modalTitle">Add New Task</h2>
620
+ <button class="close-btn" onclick="closeModal()">&times;</button>
621
+ </div>
622
+ <form id="taskForm">
623
+ <input type="hidden" id="taskId">
624
+
625
+ <div class="form-group">
626
+ <label class="form-label" for="taskTitle">Task Title</label>
627
+ <input type="text" id="taskTitle" class="form-input" placeholder="e.g., Redesign Homepage" required>
628
+ </div>
629
+
630
+ <div class="form-group">
631
+ <label class="form-label" for="taskDesc">Description</label>
632
+ <textarea id="taskDesc" class="form-input" placeholder="Add details about this task..."></textarea>
633
+ </div>
634
+
635
+ <div class="form-group">
636
+ <label class="form-label" for="taskPriority">Priority</label>
637
+ <select id="taskPriority" class="form-select">
638
+ <option value="low">Low Priority</option>
639
+ <option value="medium" selected>Medium Priority</option>
640
+ <option value="high">High Priority</option>
641
+ </select>
642
+ </div>
643
+
644
+ <div class="form-group">
645
+ <label class="form-label" for="taskStatus">Move To</label>
646
+ <select id="taskStatus" class="form-select">
647
+ <option value="todo">To Do</option>
648
+ <option value="inprogress">In Progress</option>
649
+ <option value="done">Completed</option>
650
+ </select>
651
+ </div>
652
+
653
+ <div class="modal-footer">
654
+ <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
655
+ <button type="submit" class="btn btn-primary">Save Task</button>
656
+ </div>
657
+ </form>
658
+ </div>
659
+ </div>
660
+
661
+ <script>
662
+ // --- State Management ---
663
+ let tasks = JSON.parse(localStorage.getItem('taskMasterData')) || [
664
+ { id: 1, title: "Welcome to TaskMaster", desc: "This is a demo task. You can drag and drop this card!", priority: "low", status: "todo", date: new Date().toISOString().split('T')[0] },
665
+ { id: 2, title: "Update Settings", desc: "Remember to change the theme color in settings.", priority: "medium", status: "inprogress", date: new Date().toISOString().split('T')[0] },
666
+ { id: 3, title: "Complete Project", desc: "Finish the HTML, CSS, and JS parts.", priority: "high", status: "done", date: new Date().toISOString().split('T')[0] }
667
+ ];
668
+
669
+ let draggedItem = null;
670
+
671
+ // --- DOM Elements ---
672
+ const themeToggle = document.getElementById('themeToggle');
673
+ const modal = document.getElementById('taskModal');
674
+ const taskForm = document.getElementById('taskForm');
675
+ const modalTitle = document.getElementById('modalTitle');
676
+ const taskLists = {
677
+ todo: document.getElementById('list-todo'),
678
+ inprogress: document.getElementById('list-inprogress'),
679
+ done: document.getElementById('list-done')
680
+ };
681
+
682
+ // --- Initialization ---
683
+ document.addEventListener('DOMContentLoaded', () => {
684
+ renderTasks();
685
+ updateStats();
686
+ checkTheme();
687
+ });
688
+
689
+ // --- Theme Logic ---
690
+ function checkTheme() {
691
+ const savedTheme = localStorage.getItem('theme') || 'light';
692
+ document.documentElement.setAttribute('data-theme', savedTheme);
693
+ updateThemeIcon(savedTheme);
694
+ }
695
+
696
+ themeToggle.addEventListener('click', () => {
697
+ const currentTheme = document.documentElement.getAttribute('data-theme');
698
+ const newTheme = currentTheme === 'light' ? 'dark' : 'light';
699
+ document.documentElement.setAttribute('data-theme', newTheme);
700
+ localStorage.setItem('theme', newTheme);
701
+ updateThemeIcon(newTheme);
702
+ });
703
+
704
+ function updateThemeIcon(theme) {
705
+ const icon = themeToggle.querySelector('i');
706
+ if (theme === 'dark') {
707
+ icon.className = 'fa-solid fa-sun';
708
+ } else {
709
+ icon.className = 'fa-solid fa-moon';
710
+ }
711
+ }
712
+
713
+ // --- Task Rendering ---
714
+ function renderTasks() {
715
+ // Clear lists
716
+ taskLists.todo.innerHTML = '';
717
+ taskLists.inprogress.innerHTML = '';
718
+ taskLists.done.innerHTML = '';
719
+
720
+ tasks.forEach(task => {
721
+ const card = createTaskCard(task);
722
+ taskLists[task.status].appendChild(card);
723
+ });
724
+
725
+ updateStats();
726
+ saveData();
727
+ }
728
+
729
+ function createTaskCard(task) {
730
+ const card = document.createElement('div');
731
+ card.className = 'task-card';
732
+ card.draggable = true;
733
+ card.id = task.id;
734
+
735
+ // Priority Styles
736
+ const priorityClass = `priority-${task.priority}`;
737
+ const priorityLabel = task.priority.charAt(0).toUpperCase() + task.priority.slice(1);
738
+
739
+ card.innerHTML = `
740
+ <span class="task-priority ${priorityClass}">${priorityLabel}</span>
741
+ <div class="task-title">${escapeHtml(task.title)}</div>
742
+ <div class="task-desc">${escapeHtml(task.desc)}</div>
743
+ <div class="task-meta">
744
+ <span class="due-date">
745
+ <i class="fa-regular fa-calendar"></i> ${task.date}
746
+ </span>
747
+ <div style="display:flex; gap:5px;">
748
+ <button class="delete-btn" onclick="deleteTask(${task.id})" title="Delete">
749
+ <i class="fa-solid fa-trash"></i>
750
+ </button>
751
+ </div>
752
+ </div>
753
+ `;
754
+
755
+ // Drag Events
756
+ card.addEventListener('dragstart', handleDragStart);
757
+ card.addEventListener('dragend', handleDragEnd);
758
+ card.addEventListener('dragover', handleDragOver);
759
+ card.addEventListener('drop', handleDrop);
760
+ card.addEventListener('dragenter', handleDragEnter);
761
+ card.addEventListener('dragleave', handleDragLeave);
762
+
763
+ return card;
764
+ }
765
+
766
+ function updateStats() {
767
+ const total = tasks.length;
768
+ const pending = tasks.filter(t => t.status === 'todo').length;
769
+ const progress = tasks.filter(t => t.status === 'inprogress').length;
770
+ const done = tasks.filter(t => t.status === 'done').length;
771
+
772
+ document.getElementById('totalTasks').innerText = total;
773
+ document.getElementById('pendingCount').innerText = pending;
774
+ document.getElementById('progressCount').innerText = progress;
775
+ document.getElementById('doneCount').innerText = done;
776
+
777
+ document.getElementById('count-todo').innerText = pending;
778
+ document.getElementById('count-inprogress').innerText = progress;
779
+ document.getElementById('count-done').innerText = done;
780
+ }
781
+
782
+ // --- Drag & Drop Logic ---
783
+ function handleDragStart(e) {
784
+ draggedItem = this;
785
+ setTimeout(() => this.classList.add('dragging'), 0);
786
+ }
787
+
788
+ function handleDragEnd(e) {
789
+ this.classList.remove('dragging');
790
+ draggedItem = null;
791
+ }
792
+
793
+ function handleDragOver(e) {
794
+ e.preventDefault(); // Necessary to allow dropping
795
+ }
796
+
797
+ function handleDragEnter(e) {
798
+ e.preventDefault();
799
+ if (this !== draggedItem && this.classList.contains('task-list')) {
800
+ this.style.borderColor = 'var(--primary-color)';
801
+ this.style.backgroundColor = 'var(--bg-card)';
802
+ }
803
+ }
804
+
805
+ function handleDragLeave(e) {
806
+ if (this.classList.contains('task-list')) {
807
+ this.style.borderColor = 'transparent';
808
+ this.style.backgroundColor = 'var(--bg-body)';
809
+ }
810
+ }
811
+
812
+ function handleDrop(e) {
813
+ e.preventDefault();
814
+ this.style.borderColor = 'transparent';
815
+ this.style.backgroundColor = 'var(--bg-body)';
816
+
817
+ if (draggedItem && draggedItem !== this) {
818
+ // Find the target task ID (if dropping on a card) or just append (if dropping on empty list)
819
+ let targetTask = this;
820
+
821
+ // If we dropped on the task-list container directly
822
+ if (this.classList.contains('task-list')) {
823
+ this.appendChild(draggedItem);
824
+ updateTaskStatus(draggedItem.id, this.id.replace('list-', ''));
825
+ return;
826
+ }
827
+
828
+ // If we dropped on another card
829
+ if (this.classList.contains('task-card')) {
830
+ this.after(draggedItem);
831
+ updateTaskStatus(draggedItem.id, this.parentElement.id.replace('list-', ''));
832
+ }
833
+ }
834
+ }
835
+
836
+ function updateTaskStatus(taskId, newStatus) {
837
+ const taskIndex = tasks.findIndex(t => t.id === taskId);
838
+ if (taskIndex > -1) {
839
+ tasks[taskIndex].status = newStatus;
840
+ saveData();
841
+ updateStats();
842
+ }
843
+ }
844
+
845
+ // --- Modal & Form Logic ---
846
+ function openModal(status = 'todo') {
847
+ modal.classList.add('active');
848
+ document.getElementById('modalTitle').innerText = "Add New Task";
849
+ taskForm.reset();
850
+ document.getElementById('taskStatus').value = status;
851
+ document.getElementById('taskId').value = '';
852
+ }
853
+
854
+ function closeModal() {
855
+ modal.classList.remove('active');
856
+ taskForm.reset();
857
+ }
858
+
859
+ taskForm.addEventListener('submit', (e) => {
860
+ e.preventDefault();
861
+
862
+ const id = document.getElementById('taskId').value;
863
+ const title = document.getElementById('taskTitle').value;
864
+ const desc = document.getElementById('taskDesc').value;
865
+ const priority = document.getElementById('taskPriority').value;
866
+ const status = document.getElementById('taskStatus').value;
867
+ const date = new Date().toISOString().split('T')[0];
868
+
869
+ if (id) {
870
+ // Edit existing
871
+ const taskIndex = tasks.findIndex(t => t.id == id);
872
+ if (taskIndex > -1) {
873
+ tasks[taskIndex] = { ...tasks[taskIndex], title, desc, priority, status, date };
874
+ }
875
+ } else {
876
+ // Create new
877
+ const newTask = {
878
+ id: Date.now(),
879
+ title,
880
+ desc,
881
+ priority,
882
+ status,
883
+ date
884
+ };
885
+ tasks.push(newTask);
886
+ }
887
+
888
+ saveData();
889
+ renderTasks();
890
+ closeModal();
891
+ });
892
+
893
+ function deleteTask(id) {
894
+ if (confirm('Are you sure you want to delete this task?')) {
895
+ tasks = tasks.filter(task => task.id !== id);
896
+ saveData();
897
+ renderTasks();
898
+ }
899
+ }
900
+
901
+ // --- Utilities ---
902
+ function saveData() {
903
+ localStorage.setItem('taskMasterData', JSON.stringify(tasks));
904
+ }
905
+
906
+ function escapeHtml(text) {
907
+ if (!text) return "";
908
+ return text
909
+ .replace(/&/g, "&amp;")
910
+ .replace(/</g, "&lt;")
911
+ .replace(/>/g, "&gt;")
912
+ .replace(/"/g, "&quot;")
913
+ .replace(/'/g, "&#039;");
914
+ }
915
+
916
+ // Close modal if clicking outside
917
+ modal.addEventListener('click', (e) => {
918
+ if (e.target === modal) closeModal();
919
+ });
920
+
921
+ </script>
922
+ </body>
923
+ </html>