Hugging Face's logo

Spaces:
Lee6x
/
anycoder-d489a231
Running

App Files Community
Lee6x commited on
Commit
a8c7555
·
verified ·
1 Parent(s): 3e6c3cb

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1158 -19
index.html CHANGED
@@ -1,19 +1,1158 @@
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>ProjectHub - Advanced Project Management Dashboard</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ :root {
15
+ --primary: #6366f1;
16
+ --primary-dark: #4f46e5;
17
+ --primary-light: #818cf8;
18
+ --secondary: #22d3ee;
19
+ --success: #10b981;
20
+ --warning: #f59e0b;
21
+ --danger: #ef4444;
22
+ --dark: #1e293b;
23
+ --light: #f1f5f9;
24
+ --white: #ffffff;
25
+ --gray: #64748b;
26
+ --gray-light: #e2e8f0;
27
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
28
+ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
29
+ --radius: 12px;
30
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
31
+ }
32
+
33
+ body {
34
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
35
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
36
+ min-height: 100vh;
37
+ color: var(--dark);
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ .container {
42
+ max-width: 1400px;
43
+ margin: 0 auto;
44
+ padding: 20px;
45
+ }
46
+
47
+ /* Header */
48
+ header {
49
+ background: rgba(255, 255, 255, 0.95);
50
+ backdrop-filter: blur(10px);
51
+ border-radius: var(--radius);
52
+ padding: 20px 30px;
53
+ margin-bottom: 30px;
54
+ box-shadow: var(--shadow);
55
+ display: flex;
56
+ justify-content: space-between;
57
+ align-items: center;
58
+ animation: slideDown 0.5s ease-out;
59
+ }
60
+
61
+ .logo {
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 12px;
65
+ font-size: 24px;
66
+ font-weight: bold;
67
+ color: var(--primary);
68
+ }
69
+
70
+ .logo-icon {
71
+ width: 40px;
72
+ height: 40px;
73
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
74
+ border-radius: 10px;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ color: white;
79
+ font-size: 20px;
80
+ }
81
+
82
+ .header-actions {
83
+ display: flex;
84
+ gap: 15px;
85
+ align-items: center;
86
+ }
87
+
88
+ .theme-toggle {
89
+ background: var(--light);
90
+ border: none;
91
+ width: 45px;
92
+ height: 45px;
93
+ border-radius: 50%;
94
+ cursor: pointer;
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ font-size: 20px;
99
+ transition: var(--transition);
100
+ }
101
+
102
+ .theme-toggle:hover {
103
+ transform: scale(1.1);
104
+ background: var(--primary);
105
+ color: white;
106
+ }
107
+
108
+ .notification-btn {
109
+ position: relative;
110
+ background: var(--light);
111
+ border: none;
112
+ width: 45px;
113
+ height: 45px;
114
+ border-radius: 50%;
115
+ cursor: pointer;
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ font-size: 20px;
120
+ transition: var(--transition);
121
+ }
122
+
123
+ .notification-btn:hover {
124
+ background: var(--primary);
125
+ color: white;
126
+ }
127
+
128
+ .notification-badge {
129
+ position: absolute;
130
+ top: -5px;
131
+ right: -5px;
132
+ background: var(--danger);
133
+ color: white;
134
+ width: 20px;
135
+ height: 20px;
136
+ border-radius: 50%;
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ font-size: 11px;
141
+ font-weight: bold;
142
+ animation: pulse 2s infinite;
143
+ }
144
+
145
+ .user-menu {
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 10px;
149
+ cursor: pointer;
150
+ padding: 8px 15px;
151
+ border-radius: 25px;
152
+ transition: var(--transition);
153
+ }
154
+
155
+ .user-menu:hover {
156
+ background: var(--light);
157
+ }
158
+
159
+ .user-avatar {
160
+ width: 35px;
161
+ height: 35px;
162
+ border-radius: 50%;
163
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
164
+ display: flex;
165
+ align-items: center;
166
+ justify-content: center;
167
+ color: white;
168
+ font-weight: bold;
169
+ }
170
+
171
+ /* Stats Grid */
172
+ .stats-grid {
173
+ display: grid;
174
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
175
+ gap: 20px;
176
+ margin-bottom: 30px;
177
+ }
178
+
179
+ .stat-card {
180
+ background: white;
181
+ border-radius: var(--radius);
182
+ padding: 25px;
183
+ box-shadow: var(--shadow-sm);
184
+ transition: var(--transition);
185
+ animation: fadeInUp 0.5s ease-out backwards;
186
+ position: relative;
187
+ overflow: hidden;
188
+ }
189
+
190
+ .stat-card::before {
191
+ content: '';
192
+ position: absolute;
193
+ top: 0;
194
+ left: 0;
195
+ width: 4px;
196
+ height: 100%;
197
+ background: linear-gradient(180deg, var(--primary), var(--secondary));
198
+ }
199
+
200
+ .stat-card:hover {
201
+ transform: translateY(-5px);
202
+ box-shadow: var(--shadow);
203
+ }
204
+
205
+ .stat-card:nth-child(1) { animation-delay: 0.1s; }
206
+ .stat-card:nth-child(2) { animation-delay: 0.2s; }
207
+ .stat-card:nth-child(3) { animation-delay: 0.3s; }
208
+ .stat-card:nth-child(4) { animation-delay: 0.4s; }
209
+
210
+ .stat-header {
211
+ display: flex;
212
+ justify-content: space-between;
213
+ align-items: center;
214
+ margin-bottom: 15px;
215
+ }
216
+
217
+ .stat-icon {
218
+ width: 50px;
219
+ height: 50px;
220
+ border-radius: 12px;
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ font-size: 24px;
225
+ }
226
+
227
+ .stat-icon.blue { background: rgba(99, 102, 241, 0.1); color: var(--primary); }
228
+ .stat-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--success); }
229
+ .stat-icon.yellow { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
230
+ .stat-icon.red { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
231
+
232
+ .stat-value {
233
+ font-size: 32px;
234
+ font-weight: bold;
235
+ margin-bottom: 5px;
236
+ }
237
+
238
+ .stat-label {
239
+ color: var(--gray);
240
+ font-size: 14px;
241
+ }
242
+
243
+ .stat-change {
244
+ display: inline-flex;
245
+ align-items: center;
246
+ gap: 5px;
247
+ padding: 4px 8px;
248
+ border-radius: 6px;
249
+ font-size: 12px;
250
+ font-weight: 600;
251
+ }
252
+
253
+ .stat-change.positive {
254
+ background: rgba(16, 185, 129, 0.1);
255
+ color: var(--success);
256
+ }
257
+
258
+ .stat-change.negative {
259
+ background: rgba(239, 68, 68, 0.1);
260
+ color: var(--danger);
261
+ }
262
+
263
+ /* Main Content Grid */
264
+ .main-grid {
265
+ display: grid;
266
+ grid-template-columns: 1fr 350px;
267
+ gap: 30px;
268
+ margin-bottom: 30px;
269
+ }
270
+
271
+ /* Projects Section */
272
+ .projects-section {
273
+ background: white;
274
+ border-radius: var(--radius);
275
+ padding: 25px;
276
+ box-shadow: var(--shadow);
277
+ animation: fadeInUp 0.6s ease-out;
278
+ }
279
+
280
+ .section-header {
281
+ display: flex;
282
+ justify-content: space-between;
283
+ align-items: center;
284
+ margin-bottom: 25px;
285
+ }
286
+
287
+ .section-title {
288
+ font-size: 20px;
289
+ font-weight: bold;
290
+ display: flex;
291
+ align-items: center;
292
+ gap: 10px;
293
+ }
294
+
295
+ .view-tabs {
296
+ display: flex;
297
+ gap: 10px;
298
+ }
299
+
300
+ .tab-btn {
301
+ padding: 8px 16px;
302
+ border: none;
303
+ background: var(--light);
304
+ border-radius: 8px;
305
+ cursor: pointer;
306
+ transition: var(--transition);
307
+ font-weight: 500;
308
+ }
309
+
310
+ .tab-btn.active {
311
+ background: var(--primary);
312
+ color: white;
313
+ }
314
+
315
+ .tab-btn:hover:not(.active) {
316
+ background: var(--gray-light);
317
+ }
318
+
319
+ .filter-chips {
320
+ display: flex;
321
+ gap: 10px;
322
+ margin-bottom: 20px;
323
+ flex-wrap: wrap;
324
+ }
325
+
326
+ .chip {
327
+ padding: 6px 14px;
328
+ border-radius: 20px;
329
+ background: var(--light);
330
+ border: 2px solid transparent;
331
+ cursor: pointer;
332
+ transition: var(--transition);
333
+ font-size: 14px;
334
+ }
335
+
336
+ .chip:hover {
337
+ border-color: var(--primary);
338
+ }
339
+
340
+ .chip.active {
341
+ background: var(--primary);
342
+ color: white;
343
+ }
344
+
345
+ .project-cards {
346
+ display: grid;
347
+ gap: 15px;
348
+ }
349
+
350
+ .project-card {
351
+ background: var(--light);
352
+ border-radius: 10px;
353
+ padding: 20px;
354
+ transition: var(--transition);
355
+ cursor: pointer;
356
+ position: relative;
357
+ overflow: hidden;
358
+ }
359
+
360
+ .project-card::before {
361
+ content: '';
362
+ position: absolute;
363
+ top: 0;
364
+ left: -100%;
365
+ width: 100%;
366
+ height: 100%;
367
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
368
+ transition: left 0.5s;
369
+ }
370
+
371
+ .project-card:hover::before {
372
+ left: 100%;
373
+ }
374
+
375
+ .project-card:hover {
376
+ transform: translateX(5px);
377
+ box-shadow: var(--shadow-sm);
378
+ }
379
+
380
+ .project-header {
381
+ display: flex;
382
+ justify-content: space-between;
383
+ align-items: start;
384
+ margin-bottom: 15px;
385
+ }
386
+
387
+ .project-title {
388
+ font-weight: 600;
389
+ font-size: 16px;
390
+ color: var(--dark);
391
+ }
392
+
393
+ .project-priority {
394
+ padding: 4px 10px;
395
+ border-radius: 6px;
396
+ font-size: 12px;
397
+ font-weight: 600;
398
+ }
399
+
400
+ .priority-high {
401
+ background: rgba(239, 68, 68, 0.1);
402
+ color: var(--danger);
403
+ }
404
+
405
+ .priority-medium {
406
+ background: rgba(245, 158, 11, 0.1);
407
+ color: var(--warning);
408
+ }
409
+
410
+ .priority-low {
411
+ background: rgba(16, 185, 129, 0.1);
412
+ color: var(--success);
413
+ }
414
+
415
+ .project-description {
416
+ color: var(--gray);
417
+ font-size: 14px;
418
+ margin-bottom: 15px;
419
+ line-height: 1.5;
420
+ }
421
+
422
+ .project-meta {
423
+ display: flex;
424
+ justify-content: space-between;
425
+ align-items: center;
426
+ }
427
+
428
+ .project-team {
429
+ display: flex;
430
+ margin-left: -8px;
431
+ }
432
+
433
+ .team-member {
434
+ width: 32px;
435
+ height: 32px;
436
+ border-radius: 50%;
437
+ border: 2px solid white;
438
+ display: flex;
439
+ align-items: center;
440
+ justify-content: center;
441
+ font-size: 12px;
442
+ font-weight: bold;
443
+ color: white;
444
+ margin-left: -8px;
445
+ transition: var(--transition);
446
+ }
447
+
448
+ .team-member:hover {
449
+ transform: scale(1.2);
450
+ z-index: 10;
451
+ }
452
+
453
+ .project-deadline {
454
+ display: flex;
455
+ align-items: center;
456
+ gap: 5px;
457
+ color: var(--gray);
458
+ font-size: 13px;
459
+ }
460
+
461
+ /* Activity Sidebar */
462
+ .activity-sidebar {
463
+ display: flex;
464
+ flex-direction: column;
465
+ gap: 20px;
466
+ }
467
+
468
+ .activity-card {
469
+ background: white;
470
+ border-radius: var(--radius);
471
+ padding: 20px;
472
+ box-shadow: var(--shadow);
473
+ animation: fadeInUp 0.7s ease-out;
474
+ }
475
+
476
+ .activity-item {
477
+ display: flex;
478
+ gap: 15px;
479
+ padding: 15px 0;
480
+ border-bottom: 1px solid var(--gray-light);
481
+ transition: var(--transition);
482
+ }
483
+
484
+ .activity-item:last-child {
485
+ border-bottom: none;
486
+ }
487
+
488
+ .activity-item:hover {
489
+ background: var(--light);
490
+ margin: 0 -10px;
491
+ padding: 15px 10px;
492
+ border-radius: 8px;
493
+ }
494
+
495
+ .activity-icon {
496
+ width: 40px;
497
+ height: 40px;
498
+ border-radius: 10px;
499
+ display: flex;
500
+ align-items: center;
501
+ justify-content: center;
502
+ flex-shrink: 0;
503
+ }
504
+
505
+ .activity-content {
506
+ flex: 1;
507
+ }
508
+
509
+ .activity-text {
510
+ font-size: 14px;
511
+ margin-bottom: 5px;
512
+ }
513
+
514
+ .activity-time {
515
+ font-size: 12px;
516
+ color: var(--gray);
517
+ }
518
+
519
+ /* Progress Chart */
520
+ .chart-container {
521
+ background: white;
522
+ border-radius: var(--radius);
523
+ padding: 25px;
524
+ box-shadow: var(--shadow);
525
+ animation: fadeInUp 0.8s ease-out;
526
+ }
527
+
528
+ .chart-bars {
529
+ display: flex;
530
+ align-items: flex-end;
531
+ justify-content: space-around;
532
+ height: 200px;
533
+ margin-top: 20px;
534
+ }
535
+
536
+ .bar-wrapper {
537
+ display: flex;
538
+ flex-direction: column;
539
+ align-items: center;
540
+ flex: 1;
541
+ max-width: 60px;
542
+ }
543
+
544
+ .bar {
545
+ width: 100%;
546
+ background: linear-gradient(180deg, var(--primary), var(--primary-dark));
547
+ border-radius: 8px 8px 0 0;
548
+ transition: var(--transition);
549
+ cursor: pointer;
550
+ position: relative;
551
+ }
552
+
553
+ .bar:hover {
554
+ opacity: 0.8;
555
+ transform: scaleY(1.05);
556
+ }
557
+
558
+ .bar-label {
559
+ margin-top: 10px;
560
+ font-size: 12px;
561
+ color: var(--gray);
562
+ }
563
+
564
+ .bar-value {
565
+ position: absolute;
566
+ top: -25px;
567
+ left: 50%;
568
+ transform: translateX(-50%);
569
+ font-size: 12px;
570
+ font-weight: bold;
571
+ color: var(--primary);
572
+ opacity: 0;
573
+ transition: opacity 0.3s;
574
+ }
575
+
576
+ .bar:hover .bar-value {
577
+ opacity: 1;
578
+ }
579
+
580
+ /* Floating Action Button */
581
+ .fab {
582
+ position: fixed;
583
+ bottom: 30px;
584
+ right: 30px;
585
+ width: 60px;
586
+ height: 60px;
587
+ border-radius: 50%;
588
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
589
+ color: white;
590
+ border: none;
591
+ font-size: 24px;
592
+ cursor: pointer;
593
+ box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
594
+ transition: var(--transition);
595
+ z-index: 1000;
596
+ display: flex;
597
+ align-items: center;
598
+ justify-content: center;
599
+ }
600
+
601
+ .fab:hover {
602
+ transform: scale(1.1) rotate(90deg);
603
+ box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
604
+ }
605
+
606
+ /* Modal */
607
+ .modal {
608
+ display: none;
609
+ position: fixed;
610
+ top: 0;
611
+ left: 0;
612
+ width: 100%;
613
+ height: 100%;
614
+ background: rgba(0, 0, 0, 0.5);
615
+ backdrop-filter: blur(5px);
616
+ z-index: 2000;
617
+ animation: fadeIn 0.3s;
618
+ }
619
+
620
+ .modal.active {
621
+ display: flex;
622
+ align-items: center;
623
+ justify-content: center;
624
+ }
625
+
626
+ .modal-content {
627
+ background: white;
628
+ border-radius: var(--radius);
629
+ padding: 30px;
630
+ max-width: 500px;
631
+ width: 90%;
632
+ max-height: 90vh;
633
+ overflow-y: auto;
634
+ animation: slideUp 0.3s;
635
+ }
636
+
637
+ .modal-header {
638
+ display: flex;
639
+ justify-content: space-between;
640
+ align-items: center;
641
+ margin-bottom: 25px;
642
+ }
643
+
644
+ .modal-title {
645
+ font-size: 24px;
646
+ font-weight: bold;
647
+ }
648
+
649
+ .close-btn {
650
+ background: none;
651
+ border: none;
652
+ font-size: 28px;
653
+ cursor: pointer;
654
+ color: var(--gray);
655
+ transition: var(--transition);
656
+ }
657
+
658
+ .close-btn:hover {
659
+ color: var(--danger);
660
+ transform: rotate(90deg);
661
+ }
662
+
663
+ .form-group {
664
+ margin-bottom: 20px;
665
+ }
666
+
667
+ .form-label {
668
+ display: block;
669
+ margin-bottom: 8px;
670
+ font-weight: 500;
671
+ color: var(--dark);
672
+ }
673
+
674
+ .form-input,
675
+ .form-textarea,
676
+ .form-select {
677
+ width: 100%;
678
+ padding: 12px;
679
+ border: 2px solid var(--gray-light);
680
+ border-radius: 8px;
681
+ font-size: 14px;
682
+ transition: var(--transition);
683
+ }
684
+
685
+ .form-input:focus,
686
+ .form-textarea:focus,
687
+ .form-select:focus {
688
+ outline: none;
689
+ border-color: var(--primary);
690
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
691
+ }
692
+
693
+ .form-textarea {
694
+ resize: vertical;
695
+ min-height: 100px;
696
+ }
697
+
698
+ .form-row {
699
+ display: grid;
700
+ grid-template-columns: 1fr 1fr;
701
+ gap: 15px;
702
+ }
703
+
704
+ .submit-btn {
705
+ width: 100%;
706
+ padding: 14px;
707
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
708
+ color: white;
709
+ border: none;
710
+ border-radius: 8px;
711
+ font-size: 16px;
712
+ font-weight: 600;
713
+ cursor: pointer;
714
+ transition: var(--transition);
715
+ }
716
+
717
+ .submit-btn:hover {
718
+ transform: translateY(-2px);
719
+ box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
720
+ }
721
+
722
+ /* Animations */
723
+ @keyframes slideDown {
724
+ from {
725
+ opacity: 0;
726
+ transform: translateY(-30px);
727
+ }
728
+ to {
729
+ opacity: 1;
730
+ transform: translateY(0);
731
+ }
732
+ }
733
+
734
+ @keyframes fadeInUp {
735
+ from {
736
+ opacity: 0;
737
+ transform: translateY(30px);
738
+ }
739
+ to {
740
+ opacity: 1;
741
+ transform: translateY(0);
742
+ }
743
+ }
744
+
745
+ @keyframes fadeIn {
746
+ from { opacity: 0; }
747
+ to { opacity: 1; }
748
+ }
749
+
750
+ @keyframes slideUp {
751
+ from {
752
+ opacity: 0;
753
+ transform: translateY(30px);
754
+ }
755
+ to {
756
+ opacity: 1;
757
+ transform: translateY(0);
758
+ }
759
+ }
760
+
761
+ @keyframes pulse {
762
+ 0% {
763
+ box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
764
+ }
765
+ 70% {
766
+ box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
767
+ }
768
+ 100% {
769
+ box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
770
+ }
771
+ }
772
+
773
+ /* Responsive Design */
774
+ @media (max-width: 1024px) {
775
+ .main-grid {
776
+ grid-template-columns: 1fr;
777
+ }
778
+
779
+ .activity-sidebar {
780
+ display: grid;
781
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
782
+ }
783
+ }
784
+
785
+ @media (max-width: 768px) {
786
+ .container {
787
+ padding: 10px;
788
+ }
789
+
790
+ header {
791
+ flex-direction: column;
792
+ gap: 15px;
793
+ }
794
+
795
+ .stats-grid {
796
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
797
+ }
798
+
799
+ .form-row {
800
+ grid-template-columns: 1fr;
801
+ }
802
+
803
+ .view-tabs {
804
+ display: none;
805
+ }
806
+
807
+ .chart-bars {
808
+ height: 150px;
809
+ }
810
+ }
811
+
812
+ @media (max-width: 480px) {
813
+ .stats-grid {
814
+ grid-template-columns: 1fr;
815
+ }
816
+
817
+ .header-actions {
818
+ width: 100%;
819
+ justify-content: space-between;
820
+ }
821
+
822
+ .user-menu span {
823
+ display: none;
824
+ }
825
+ }
826
+
827
+ /* Dark theme */
828
+ body.dark-theme {
829
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
830
+ }
831
+
832
+ body.dark-theme header {
833
+ background: rgba(30, 41, 59, 0.95);
834
+ color: var(--light);
835
+ }
836
+
837
+ body.dark-theme .stat-card,
838
+ body.dark-theme .projects-section,
839
+ body.dark-theme .activity-card,
840
+ body.dark-theme .chart-container,
841
+ body.dark-theme .modal-content {
842
+ background: var(--dark);
843
+ color: var(--light);
844
+ }
845
+
846
+ body.dark-theme .project-card {
847
+ background: rgba(51, 65, 85, 0.5);
848
+ }
849
+
850
+ body.dark-theme .chip,
851
+ body.dark-theme .tab-btn:not(.active) {
852
+ background: rgba(51, 65, 85, 0.5);
853
+ color: var(--light);
854
+ }
855
+
856
+ body.dark-theme .form-input,
857
+ body.dark-theme .form-textarea,
858
+ body.dark-theme .form-select {
859
+ background: rgba(51, 65, 85, 0.5);
860
+ border-color: rgba(100, 116, 139, 0.5);
861
+ color: var(--light);
862
+ }
863
+
864
+ body.dark-theme .theme-toggle,
865
+ body.dark-theme .notification-btn {
866
+ background: rgba(51, 65, 85, 0.5);
867
+ color: var(--light);
868
+ }
869
+
870
+ body.dark-theme .user-menu:hover {
871
+ background: rgba(51, 65, 85, 0.5);
872
+ }
873
+
874
+ /* Loading Animation */
875
+ .loading {
876
+ display: inline-block;
877
+ width: 20px;
878
+ height: 20px;
879
+ border: 3px solid rgba(255,255,255,.3);
880
+ border-radius: 50%;
881
+ border-top-color: white;
882
+ animation: spin 1s ease-in-out infinite;
883
+ }
884
+
885
+ @keyframes spin {
886
+ to { transform: rotate(360deg); }
887
+ }
888
+ </style>
889
+ </head>
890
+ <body>
891
+ <div class="container">
892
+ <!-- Header -->
893
+ <header>
894
+ <div class="logo">
895
+ <div class="logo-icon">📊</div>
896
+ <span>ProjectHub</span>
897
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="margin-left: auto; font-size: 12px; color: var(--gray); text-decoration: none;">Built with anycoder</a>
898
+ </div>
899
+ <div class="header-actions">
900
+ <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
901
+ <button class="notification-btn" onclick="showNotifications()">
902
+ 🔔
903
+ <span class="notification-badge">3</span>
904
+ </button>
905
+ <div class="user-menu" onclick="toggleUserMenu()">
906
+ <div class="user-avatar">JD</div>
907
+ <span>John Doe</span>
908
+ </div>
909
+ </div>
910
+ </header>
911
+
912
+ <!-- Stats Grid -->
913
+ <div class="stats-grid">
914
+ <div class="stat-card">
915
+ <div class="stat-header">
916
+ <div class="stat-icon blue">📁</div>
917
+ <span class="stat-change positive">↑ 12%</span>
918
+ </div>
919
+ <div class="stat-value">24</div>
920
+ <div class="stat-label">Active Projects</div>
921
+ </div>
922
+ <div class="stat-card">
923
+ <div class="stat-header">
924
+ <div class="stat-icon green">✅</div>
925
+ <span class="stat-change positive">↑ 8%</span>
926
+ </div>
927
+ <div class="stat-value">142</div>
928
+ <div class="stat-label">Completed Tasks</div>
929
+ </div>
930
+ <div class="stat-card">
931
+ <div class="stat-header">
932
+ <div class="stat-icon yellow">👥</div>
933
+ <span class="stat-change negative">↓ 3%</span>
934
+ </div>
935
+ <div class="stat-value">18</div>
936
+ <div class="stat-label">Team Members</div>
937
+ </div>
938
+ <div class="stat-card">
939
+ <div class="stat-header">
940
+ <div class="stat-icon red">⏰</div>
941
+ <span class="stat-change positive">↑ 5%</span>
942
+ </div>
943
+ <div class="stat-value">7</div>
944
+ <div class="stat-label">Pending Reviews</div>
945
+ </div>
946
+ </div>
947
+
948
+ <!-- Main Grid -->
949
+ <div class="main-grid">
950
+ <!-- Projects Section -->
951
+ <div class="projects-section">
952
+ <div class="section-header">
953
+ <h2 class="section-title">
954
+ 📋 Recent Projects
955
+ </h2>
956
+ <div class="view-tabs">
957
+ <button class="tab-btn active" onclick="switchView('list')">List</button>
958
+ <button class="tab-btn" onclick="switchView('grid')">Grid</button>
959
+ <button class="tab-btn" onclick="switchView('kanban')">Kanban</button>
960
+ </div>
961
+ </div>
962
+
963
+ <div class="filter-chips">
964
+ <span class="chip active" onclick="filterProjects('all', this)">All</span>
965
+ <span class="chip" onclick="filterProjects('development', this)">Development</span>
966
+ <span class="chip" onclick="filterProjects('design', this)">Design</span>
967
+ <span class="chip" onclick="filterProjects('marketing', this)">Marketing</span>
968
+ <span class="chip" onclick="filterProjects('research', this)">Research</span>
969
+ </div>
970
+
971
+ <div class="project-cards" id="projectList">
972
+ <div class="project-card" onclick="openProjectDetails()">
973
+ <div class="project-header">
974
+ <h3 class="project-title">Mobile App Redesign</h3>
975
+ <span class="project-priority priority-high">High</span>
976
+ </div>
977
+ <p class="project-description">Complete overhaul of the mobile application UI/UX with modern design principles and improved user flow.</p>
978
+ <div class="project-meta">
979
+ <div class="project-team">
980
+ <div class="team-member" style="background: #6366f1;">AS</div>
981
+ <div class="team-member" style="background: #22d3ee;">MK</div>
982
+ <div class="team-member" style="background: #10b981;">RJ</div>
983
+ </div>
984
+ <div class="project-deadline">
985
+ 📅 Dec 15, 2024
986
+ </div>
987
+ </div>
988
+ </div>
989
+
990
+ <div class="project-card" onclick="openProjectDetails()">
991
+ <div class="project-header">
992
+ <h3 class="project-title">API Integration</h3>
993
+ <span class="project-priority priority-medium">Medium</span>
994
+ </div>
995
+ <p class="project-description">Implement third-party payment gateway API and integrate with existing backend services.</p>
996
+ <div class="project-meta">
997
+ <div class="project-team">
998
+ <div class="team-member" style="background: #f59e0b;">TW</div>
999
+ <div class="team-member" style="background: #ef4444;">LM</div>
1000
+ </div>
1001
+ <div class="project-deadline">
1002
+ 📅 Dec 20, 2024
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+
1007
+ <div class="project-card" onclick="openProjectDetails()">
1008
+ <div class="project-header">
1009
+ <h3 class="project-title">Marketing Campaign</h3>
1010
+ <span class="project-priority priority-low">Low</span>
1011
+ </div>
1012
+ <p class="project-description">Launch Q1 2025 marketing campaign across social media platforms and email newsletters.</p>
1013
+ <div class="project-meta">
1014
+ <div class="project-team">
1015
+ <div class="team-member" style="background: #8b5cf6;">KB</div>
1016
+ <div class="team-member" style="background: #ec4899;">NP</div>
1017
+ <div class="team-member" style="background: #14b8a6;">DH</div>
1018
+ </div>
1019
+ <div class="project-deadline">
1020
+ 📅 Jan 5, 2025
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+
1027
+ <!-- Activity Sidebar -->
1028
+ <div class="activity-sidebar">
1029
+ <div class="activity-card">
1030
+ <h3 class="section-title">
1031
+ 📈 Recent Activity
1032
+ </h3>
1033
+ <div class="activity-list">
1034
+ <div class="activity-item">
1035
+ <div class="activity-icon" style="background: rgba(99, 102, 241, 0.1); color: var(--primary);">📝</div>
1036
+ <div class="activity-content">
1037
+ <div class="activity-text">New task assigned to you</div>
1038
+ <div class="activity-time">2 minutes ago</div>
1039
+ </div>
1040
+ </div>
1041
+ <div class="activity-item">
1042
+ <div class="activity-icon" style="background: rgba(16, 185, 129, 0.1); color: var(--success);">✅</div>
1043
+ <div class="activity-content">
1044
+ <div class="activity-text">Project milestone completed</div>
1045
+ <div class="activity-time">1 hour ago</div>
1046
+ </div>
1047
+ </div>
1048
+ <div class="activity-item">
1049
+ <div class="activity-icon" style="background: rgba(245, 158, 11, 0.1); color: var(--warning);">💬</div>
1050
+ <div class="activity-content">
1051
+ <div class="activity-text">New comment on design mockup</div>
1052
+ <div class="activity-time">3 hours ago</div>
1053
+ </div>
1054
+ </div>
1055
+ <div class="activity-item">
1056
+ <div class="activity-icon" style="background: rgba(239, 68, 68, 0.1); color: var(--danger);">🔔</div>
1057
+ <div class="activity-content">
1058
+ <div class="activity-text">Deadline approaching</div>
1059
+ <div class="activity-time">5 hours ago</div>
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+ </div>
1064
+
1065
+ <div class="activity-card">
1066
+ <h3 class="section-title">
1067
+ 🎯 Team Performance
1068
+ </h3>
1069
+ <div class="chart-bars">
1070
+ <div class="bar-wrapper">
1071
+ <div class="bar" style="height: 80%;">
1072
+ <span class="bar-value">80%</span>
1073
+ </div>
1074
+ <span class="bar-label">Mon</span>
1075
+ </div>
1076
+ <div class="bar-wrapper">
1077
+ <div class="bar" style="height: 65%;">
1078
+ <span class="bar-value">65%</span>
1079
+ </div>
1080
+ <span class="bar-label">Tue</span>
1081
+ </div>
1082
+ <div class="bar-wrapper">
1083
+ <div class="bar" style="height: 90%;">
1084
+ <span class="bar-value">90%</span>
1085
+ </div>
1086
+ <span class="bar-label">Wed</span>
1087
+ </div>
1088
+ <div class="bar-wrapper">
1089
+ <div class="bar" style="height: 75%;">
1090
+ <span class="bar-value">75%</span>
1091
+ </div>
1092
+ <span class="bar-label">Thu</span>
1093
+ </div>
1094
+ <div class="bar-wrapper">
1095
+ <div class="bar" style="height: 85%;">
1096
+ <span class="bar-value">85%</span>
1097
+ </div>
1098
+ <span class="bar-label">Fri</span>
1099
+ </div>
1100
+ </div>
1101
+ </div>
1102
+ </div>
1103
+ </div>
1104
+
1105
+ <!-- Progress Chart -->
1106
+ <div class="chart-container">
1107
+ <h3 class="section-title">
1108
+ 📊 Project Progress Overview
1109
+ </h3>
1110
+ <div class="chart-bars">
1111
+ <div class="bar-wrapper">
1112
+ <div class="bar" style="height: 60%; background: linear-gradient(180deg, #22d3ee, #06b6d4);">
1113
+ <span class="bar-value">60%</span>
1114
+ </div>
1115
+ <span class="bar-label">Design</span>
1116
+ </div>
1117
+ <div class="bar-wrapper">
1118
+ <div class="bar" style="height: 85%; background: linear-gradient(180deg, #10b981, #059669);">
1119
+ <span class="bar-value">85%</span>
1120
+ </div>
1121
+ <span class="bar-label">Dev</span>
1122
+ </div>
1123
+ <div class="bar-wrapper">
1124
+ <div class="bar" style="height: 45%; background: linear-gradient(180deg, #f59e0b, #d97706);">
1125
+ <span class="bar-value">45%</span>
1126
+ </div>
1127
+ <span class="bar-label">Testing</span>
1128
+ </div>
1129
+ <div class="bar-wrapper">
1130
+ <div class="bar" style="height: 70%; background: linear-gradient(180deg, #8b5cf6, #7c3aed);">
1131
+ <span class="bar-value">70%</span>
1132
+ </div>
1133
+ <span class="bar-label">Deploy</span>
1134
+ </div>
1135
+ <div class="bar-wrapper">
1136
+ <div class="bar" style="height: 95%; background: linear-gradient(180deg, #ef4444, #dc2626);">
1137
+ <span class="bar-value">95%</span>
1138
+ </div>
1139
+ <span class="bar-label">Review</span>
1140
+ </div>
1141
+ </div>
1142
+ </div>
1143
+ </div>
1144
+
1145
+ <!-- Floating Action Button -->
1146
+ <button class="fab" onclick="openModal()">+</button>
1147
+
1148
+ <!-- Modal -->
1149
+ <div class="modal" id="projectModal">
1150
+ <div class="modal-content">
1151
+ <div class="modal-header">
1152
+ <h2 class="modal-title">Create New Project</h2>
1153
+ <button class="close-btn" onclick="closeModal()">&times;</button>
1154
+ </div>
1155
+ <form onsubmit="submitProject(event)">
1156
+ <div class="form-group">
1157
+ <label class="form-label">Project Name</label>
1158
+ <input type="text" class="form-input" placeholder="Enter project name