Hugging Face's logo

Spaces:
everett1997
/
anycoder-7c3d172b
Running

App Files Community
everett1997 commited on
Commit
b1d4edf
·
verified ·
1 Parent(s): 8269041

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +718 -19
index.html CHANGED
@@ -1,19 +1,718 @@
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>Modern Dashboard</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary: #4f46e5;
18
+ --primary-light: #818cf8;
19
+ --secondary: #f8fafc;
20
+ --dark: #1e293b;
21
+ --text: #475569;
22
+ --text-light: #94a3b8;
23
+ --success: #10b981;
24
+ --warning: #f59e0b;
25
+ --danger: #ef4444;
26
+ --border: #e2e8f0;
27
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
28
+ --radius: 8px;
29
+ }
30
+
31
+ body {
32
+ background-color: #f1f5f9;
33
+ color: var(--text);
34
+ display: flex;
35
+ min-height: 100vh;
36
+ }
37
+
38
+ /* Sidebar Styles */
39
+ .sidebar {
40
+ width: 260px;
41
+ background: white;
42
+ box-shadow: var(--shadow);
43
+ display: flex;
44
+ flex-direction: column;
45
+ transition: all 0.3s ease;
46
+ z-index: 100;
47
+ }
48
+
49
+ .sidebar-header {
50
+ padding: 1.5rem;
51
+ border-bottom: 1px solid var(--border);
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 12px;
55
+ }
56
+
57
+ .logo {
58
+ width: 40px;
59
+ height: 40px;
60
+ background: var(--primary);
61
+ border-radius: var(--radius);
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ color: white;
66
+ font-weight: bold;
67
+ }
68
+
69
+ .logo-text {
70
+ font-size: 1.25rem;
71
+ font-weight: 700;
72
+ color: var(--dark);
73
+ }
74
+
75
+ .sidebar-nav {
76
+ flex: 1;
77
+ padding: 1.5rem 0;
78
+ }
79
+
80
+ .nav-item {
81
+ display: flex;
82
+ align-items: center;
83
+ padding: 0.75rem 1.5rem;
84
+ color: var(--text);
85
+ text-decoration: none;
86
+ transition: all 0.2s;
87
+ gap: 12px;
88
+ }
89
+
90
+ .nav-item:hover {
91
+ background: var(--secondary);
92
+ color: var(--primary);
93
+ }
94
+
95
+ .nav-item.active {
96
+ background: var(--primary-light);
97
+ color: white;
98
+ border-right: 3px solid var(--primary);
99
+ }
100
+
101
+ .nav-item i {
102
+ width: 20px;
103
+ text-align: center;
104
+ }
105
+
106
+ .sidebar-footer {
107
+ padding: 1.5rem;
108
+ border-top: 1px solid var(--border);
109
+ }
110
+
111
+ .user-profile {
112
+ display: flex;
113
+ align-items: center;
114
+ gap: 12px;
115
+ }
116
+
117
+ .user-avatar {
118
+ width: 40px;
119
+ height: 40px;
120
+ border-radius: 50%;
121
+ background: var(--primary);
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ color: white;
126
+ font-weight: bold;
127
+ }
128
+
129
+ .user-info h4 {
130
+ font-size: 0.9rem;
131
+ color: var(--dark);
132
+ }
133
+
134
+ .user-info p {
135
+ font-size: 0.8rem;
136
+ color: var(--text-light);
137
+ }
138
+
139
+ /* Main Content Styles */
140
+ .main-content {
141
+ flex: 1;
142
+ display: flex;
143
+ flex-direction: column;
144
+ overflow: auto;
145
+ }
146
+
147
+ .top-bar {
148
+ background: white;
149
+ padding: 1rem 2rem;
150
+ display: flex;
151
+ justify-content: space-between;
152
+ align-items: center;
153
+ box-shadow: var(--shadow);
154
+ z-index: 10;
155
+ }
156
+
157
+ .search-bar {
158
+ display: flex;
159
+ align-items: center;
160
+ background: var(--secondary);
161
+ border-radius: var(--radius);
162
+ padding: 0.5rem 1rem;
163
+ width: 400px;
164
+ }
165
+
166
+ .search-bar input {
167
+ border: none;
168
+ background: transparent;
169
+ padding: 0.5rem;
170
+ width: 100%;
171
+ outline: none;
172
+ }
173
+
174
+ .top-actions {
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 1.5rem;
178
+ }
179
+
180
+ .notification {
181
+ position: relative;
182
+ }
183
+
184
+ .notification-badge {
185
+ position: absolute;
186
+ top: -5px;
187
+ right: -5px;
188
+ background: var(--danger);
189
+ color: white;
190
+ border-radius: 50%;
191
+ width: 18px;
192
+ height: 18px;
193
+ font-size: 0.7rem;
194
+ display: flex;
195
+ align-items: center;
196
+ justify-content: center;
197
+ }
198
+
199
+ .action-btn {
200
+ background: none;
201
+ border: none;
202
+ color: var(--text);
203
+ font-size: 1.2rem;
204
+ cursor: pointer;
205
+ transition: color 0.2s;
206
+ }
207
+
208
+ .action-btn:hover {
209
+ color: var(--primary);
210
+ }
211
+
212
+ .content-area {
213
+ padding: 2rem;
214
+ flex: 1;
215
+ }
216
+
217
+ .welcome-section {
218
+ margin-bottom: 2rem;
219
+ }
220
+
221
+ .welcome-section h1 {
222
+ font-size: 1.8rem;
223
+ color: var(--dark);
224
+ margin-bottom: 0.5rem;
225
+ }
226
+
227
+ .welcome-section p {
228
+ color: var(--text-light);
229
+ }
230
+
231
+ /* Stats Cards */
232
+ .stats-grid {
233
+ display: grid;
234
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
235
+ gap: 1.5rem;
236
+ margin-bottom: 2rem;
237
+ }
238
+
239
+ .stat-card {
240
+ background: white;
241
+ border-radius: var(--radius);
242
+ padding: 1.5rem;
243
+ box-shadow: var(--shadow);
244
+ display: flex;
245
+ flex-direction: column;
246
+ }
247
+
248
+ .stat-header {
249
+ display: flex;
250
+ justify-content: space-between;
251
+ align-items: center;
252
+ margin-bottom: 1rem;
253
+ }
254
+
255
+ .stat-icon {
256
+ width: 48px;
257
+ height: 48px;
258
+ border-radius: var(--radius);
259
+ display: flex;
260
+ align-items: center;
261
+ justify-content: center;
262
+ font-size: 1.5rem;
263
+ }
264
+
265
+ .stat-icon.blue {
266
+ background: #dbeafe;
267
+ color: var(--primary);
268
+ }
269
+
270
+ .stat-icon.green {
271
+ background: #d1fae5;
272
+ color: var(--success);
273
+ }
274
+
275
+ .stat-icon.orange {
276
+ background: #fef3c7;
277
+ color: var(--warning);
278
+ }
279
+
280
+ .stat-icon.purple {
281
+ background: #f3e8ff;
282
+ color: #8b5cf6;
283
+ }
284
+
285
+ .stat-value {
286
+ font-size: 1.8rem;
287
+ font-weight: 700;
288
+ color: var(--dark);
289
+ margin-bottom: 0.5rem;
290
+ }
291
+
292
+ .stat-label {
293
+ color: var(--text-light);
294
+ font-size: 0.9rem;
295
+ }
296
+
297
+ .stat-change {
298
+ display: flex;
299
+ align-items: center;
300
+ gap: 4px;
301
+ font-size: 0.8rem;
302
+ margin-top: 0.5rem;
303
+ }
304
+
305
+ .stat-change.positive {
306
+ color: var(--success);
307
+ }
308
+
309
+ .stat-change.negative {
310
+ color: var(--danger);
311
+ }
312
+
313
+ /* Charts and Tables Section */
314
+ .content-grid {
315
+ display: grid;
316
+ grid-template-columns: 2fr 1fr;
317
+ gap: 1.5rem;
318
+ }
319
+
320
+ .chart-container, .recent-activity {
321
+ background: white;
322
+ border-radius: var(--radius);
323
+ padding: 1.5rem;
324
+ box-shadow: var(--shadow);
325
+ }
326
+
327
+ .section-header {
328
+ display: flex;
329
+ justify-content: space-between;
330
+ align-items: center;
331
+ margin-bottom: 1.5rem;
332
+ }
333
+
334
+ .section-title {
335
+ font-size: 1.2rem;
336
+ color: var(--dark);
337
+ }
338
+
339
+ .view-all {
340
+ color: var(--primary);
341
+ text-decoration: none;
342
+ font-size: 0.9rem;
343
+ font-weight: 500;
344
+ }
345
+
346
+ .chart-placeholder {
347
+ height: 300px;
348
+ background: var(--secondary);
349
+ border-radius: var(--radius);
350
+ display: flex;
351
+ align-items: center;
352
+ justify-content: center;
353
+ color: var(--text-light);
354
+ }
355
+
356
+ .activity-list {
357
+ display: flex;
358
+ flex-direction: column;
359
+ gap: 1rem;
360
+ }
361
+
362
+ .activity-item {
363
+ display: flex;
364
+ align-items: center;
365
+ gap: 1rem;
366
+ padding: 0.75rem 0;
367
+ border-bottom: 1px solid var(--border);
368
+ }
369
+
370
+ .activity-item:last-child {
371
+ border-bottom: none;
372
+ }
373
+
374
+ .activity-icon {
375
+ width: 40px;
376
+ height: 40px;
377
+ border-radius: 50%;
378
+ display: flex;
379
+ align-items: center;
380
+ justify-content: center;
381
+ color: white;
382
+ }
383
+
384
+ .activity-icon.blue {
385
+ background: var(--primary);
386
+ }
387
+
388
+ .activity-icon.green {
389
+ background: var(--success);
390
+ }
391
+
392
+ .activity-icon.orange {
393
+ background: var(--warning);
394
+ }
395
+
396
+ .activity-details {
397
+ flex: 1;
398
+ }
399
+
400
+ .activity-details h4 {
401
+ font-size: 0.9rem;
402
+ color: var(--dark);
403
+ margin-bottom: 0.25rem;
404
+ }
405
+
406
+ .activity-details p {
407
+ font-size: 0.8rem;
408
+ color: var(--text-light);
409
+ }
410
+
411
+ .activity-time {
412
+ font-size: 0.8rem;
413
+ color: var(--text-light);
414
+ }
415
+
416
+ /* Mobile Responsiveness */
417
+ @media (max-width: 1024px) {
418
+ .content-grid {
419
+ grid-template-columns: 1fr;
420
+ }
421
+
422
+ .stats-grid {
423
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
424
+ }
425
+
426
+ .search-bar {
427
+ width: 300px;
428
+ }
429
+ }
430
+
431
+ @media (max-width: 768px) {
432
+ .sidebar {
433
+ width: 70px;
434
+ }
435
+
436
+ .logo-text, .nav-text, .user-info {
437
+ display: none;
438
+ }
439
+
440
+ .nav-item {
441
+ justify-content: center;
442
+ padding: 1rem;
443
+ }
444
+
445
+ .search-bar {
446
+ width: 200px;
447
+ }
448
+ }
449
+
450
+ @media (max-width: 576px) {
451
+ .top-bar {
452
+ padding: 1rem;
453
+ }
454
+
455
+ .search-bar {
456
+ width: 150px;
457
+ }
458
+
459
+ .stats-grid {
460
+ grid-template-columns: 1fr;
461
+ }
462
+ }
463
+
464
+ .anycoder-link {
465
+ position: absolute;
466
+ top: 20px;
467
+ right: 20px;
468
+ font-size: 0.8rem;
469
+ color: var(--text-light);
470
+ text-decoration: none;
471
+ z-index: 1000;
472
+ }
473
+
474
+ .anycoder-link:hover {
475
+ color: var(--primary);
476
+ }
477
+ </style>
478
+ </head>
479
+ <body>
480
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
481
+
482
+ <!-- Sidebar -->
483
+ <aside class="sidebar">
484
+ <div class="sidebar-header">
485
+ <div class="logo">D</div>
486
+ <div class="logo-text">Dashboard</div>
487
+ </div>
488
+
489
+ <nav class="sidebar-nav">
490
+ <a href="#" class="nav-item active">
491
+ <i class="fas fa-home"></i>
492
+ <span class="nav-text">Dashboard</span>
493
+ </a>
494
+ <a href="#" class="nav-item">
495
+ <i class="fas fa-chart-bar"></i>
496
+ <span class="nav-text">Analytics</span>
497
+ </a>
498
+ <a href="#" class="nav-item">
499
+ <i class="fas fa-shopping-cart"></i>
500
+ <span class="nav-text">E-commerce</span>
501
+ </a>
502
+ <a href="#" class="nav-item">
503
+ <i class="fas fa-envelope"></i>
504
+ <span class="nav-text">Messages</span>
505
+ <span class="notification-badge">3</span>
506
+ </a>
507
+ <a href="#" class="nav-item">
508
+ <i class="fas fa-calendar"></i>
509
+ <span class="nav-text">Calendar</span>
510
+ </a>
511
+ <a href="#" class="nav-item">
512
+ <i class="fas fa-cog"></i>
513
+ <span class="nav-text">Settings</span>
514
+ </a>
515
+ <a href="#" class="nav-item">
516
+ <i class="fas fa-user"></i>
517
+ <span class="nav-text">Users</span>
518
+ </a>
519
+ <a href="#" class="nav-item">
520
+ <i class="fas fa-file"></i>
521
+ <span class="nav-text">Documents</span>
522
+ </a>
523
+ </nav>
524
+
525
+ <div class="sidebar-footer">
526
+ <div class="user-profile">
527
+ <div class="user-avatar">JD</div>
528
+ <div class="user-info">
529
+ <h4>John Doe</h4>
530
+ <p>Administrator</p>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </aside>
535
+
536
+ <!-- Main Content -->
537
+ <main class="main-content">
538
+ <header class="top-bar">
539
+ <div class="search-bar">
540
+ <i class="fas fa-search"></i>
541
+ <input type="text" placeholder="Search...">
542
+ </div>
543
+
544
+ <div class="top-actions">
545
+ <button class="action-btn notification">
546
+ <i class="fas fa-bell"></i>
547
+ <span class="notification-badge">5</span>
548
+ </button>
549
+ <button class="action-btn">
550
+ <i class="fas fa-cog"></i>
551
+ </button>
552
+ <button class="action-btn">
553
+ <i class="fas fa-question-circle"></i>
554
+ </button>
555
+ </div>
556
+ </header>
557
+
558
+ <section class="content-area">
559
+ <div class="welcome-section">
560
+ <h1>Welcome back, John!</h1>
561
+ <p>Here's what's happening with your projects today.</p>
562
+ </div>
563
+
564
+ <div class="stats-grid">
565
+ <div class="stat-card">
566
+ <div class="stat-header">
567
+ <h3 class="stat-label">Total Revenue</h3>
568
+ <div class="stat-icon blue">
569
+ <i class="fas fa-dollar-sign"></i>
570
+ </div>
571
+ </div>
572
+ <div class="stat-value">$24,580</div>
573
+ <div class="stat-change positive">
574
+ <i class="fas fa-arrow-up"></i>
575
+ <span>12.5% from last month</span>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="stat-card">
580
+ <div class="stat-header">
581
+ <h3 class="stat-label">New Users</h3>
582
+ <div class="stat-icon green">
583
+ <i class="fas fa-users"></i>
584
+ </div>
585
+ </div>
586
+ <div class="stat-value">1,248</div>
587
+ <div class="stat-change positive">
588
+ <i class="fas fa-arrow-up"></i>
589
+ <span>8.2% from last week</span>
590
+ </div>
591
+ </div>
592
+
593
+ <div class="stat-card">
594
+ <div class="stat-header">
595
+ <h3 class="stat-label">Orders</h3>
596
+ <div class="stat-icon orange">
597
+ <i class="fas fa-shopping-bag"></i>
598
+ </div>
599
+ </div>
600
+ <div class="stat-value">452</div>
601
+ <div class="stat-change negative">
602
+ <i class="fas fa-arrow-down"></i>
603
+ <span>3.1% from last week</span>
604
+ </div>
605
+ </div>
606
+
607
+ <div class="stat-card">
608
+ <div class="stat-header">
609
+ <h3 class="stat-label">Pending</h3>
610
+ <div class="stat-icon purple">
611
+ <i class="fas fa-clock"></i>
612
+ </div>
613
+ </div>
614
+ <div class="stat-value">32</div>
615
+ <div class="stat-change positive">
616
+ <i class="fas fa-arrow-up"></i>
617
+ <span>2.4% from yesterday</span>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="content-grid">
623
+ <div class="chart-container">
624
+ <div class="section-header">
625
+ <h2 class="section-title">Revenue Overview</h2>
626
+ <a href="#" class="view-all">View Report</a>
627
+ </div>
628
+ <div class="chart-placeholder">
629
+ <div class="chart-message">
630
+ <i class="fas fa-chart-line" style="font-size: 2rem; margin-bottom: 1rem;"></i>
631
+ <p>Revenue chart visualization</p>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <div class="recent-activity">
637
+ <div class="section-header">
638
+ <h2 class="section-title">Recent Activity</h2>
639
+ <a href="#" class="view-all">See All</a>
640
+ </div>
641
+ <div class="activity-list">
642
+ <div class="activity-item">
643
+ <div class="activity-icon blue">
644
+ <i class="fas fa-shopping-cart"></i>
645
+ </div>
646
+ <div class="activity-details">
647
+ <h4>New order received</h4>
648
+ <p>Order #4562 from John Smith</p>
649
+ </div>
650
+ <div class="activity-time">2 min ago</div>
651
+ </div>
652
+
653
+ <div class="activity-item">
654
+ <div class="activity-icon green">
655
+ <i class="fas fa-user-plus"></i>
656
+ </div>
657
+ <div class="activity-details">
658
+ <h4>New user registered</h4>
659
+ <p>Jane Cooper joined the platform</p>
660
+ </div>
661
+ <div class="activity-time">1 hour ago</div>
662
+ </div>
663
+
664
+ <div class="activity-item">
665
+ <div class="activity-icon orange">
666
+ <i class="fas fa-exclamation-circle"></i>
667
+ </div>
668
+ <div class="activity-details">
669
+ <h4>Server alert</h4>
670
+ <p>High CPU usage detected</p>
671
+ </div>
672
+ <div class="activity-time">3 hours ago</div>
673
+ </div>
674
+
675
+ <div class="activity-item">
676
+ <div class="activity-icon blue">
677
+ <i class="fas fa-file-invoice-dollar"></i>
678
+ </div>
679
+ <div class="activity-details">
680
+ <h4>Payment received</h4>
681
+ <p>Invoice #7890 has been paid</p>
682
+ </div>
683
+ <div class="activity-time">5 hours ago</div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </section>
689
+ </main>
690
+
691
+ <script>
692
+ // Add interactive functionality
693
+ document.addEventListener('DOMContentLoaded', function() {
694
+ // Toggle active state for navigation items
695
+ const navItems = document.querySelectorAll('.nav-item');
696
+ navItems.forEach(item => {
697
+ item.addEventListener('click', function(e) {
698
+ e.preventDefault();
699
+ navItems.forEach(nav => nav.classList.remove('active'));
700
+ this.classList.add('active');
701
+ });
702
+ });
703
+
704
+ // Simulate chart loading
705
+ setTimeout(() => {
706
+ const chartPlaceholder = document.querySelector('.chart-placeholder');
707
+ chartPlaceholder.innerHTML = `
708
+ <div style="text-align: center; padding: 2rem;">
709
+ <i class="fas fa-chart-line" style="font-size: 3rem; color: #4f46e5; margin-bottom: 1rem;"></i>
710
+ <h3 style="color: #1e293b; margin-bottom: 0.5rem;">Revenue Chart Loaded</h3>
711
+ <p style="color: #64748b;">Showing monthly revenue data for 2023</p>
712
+ </div>
713
+ `;
714
+ }, 1500);
715
+ });
716
+ </script>
717
+ </body>
718
+ </html>