Hugging Face's logo

Spaces:
Lee6x
/
anycoder-d489a231
Running

App Files Community
Lee6x commited on
Commit
f31f1fd
·
verified ·
1 Parent(s): 2d48958

Upload folder using huggingface_hub

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