Hugging Face's logo

Spaces:
Dzcard
/
azul
Running

App Files Community
1

Update index.html

#1
by kv1356 - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+436
-858
Files changed (1) hide show
  1. index.html +436 -858
index.html CHANGED
@@ -3,930 +3,508 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SMS/OTP Manager Pro</title>
 
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
- :root {
10
- --primary: #4361ee;
11
- --secondary: #3f37c9;
12
- --accent: #4cc9f0;
13
- --danger: #f72585;
14
- --success: #4caf50;
15
- --warning: #ff9800;
16
- --light: #f8f9fa;
17
- --dark: #212529;
18
- --gray: #6c757d;
19
- --bg: #f5f7fa;
20
- }
21
-
22
- * {
23
- margin: 0;
24
- padding: 0;
25
- box-sizing: border-box;
26
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
- }
28
-
29
  body {
30
- background-color: var(--bg);
31
- color: var(--dark);
32
- line-height: 1.6;
33
- }
34
-
35
- .app-container {
36
- width: 100%;
37
- max-width: 1200px;
38
- margin: 0 auto;
39
- padding: 20px;
40
- min-height: 100vh;
41
- display: flex;
42
- flex-direction: column;
43
- }
44
-
45
- header {
46
- background-color: white;
47
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
48
- border-radius: 12px;
49
- padding: 15px 20px;
50
- margin-bottom: 20px;
51
- display: flex;
52
- justify-content: space-between;
53
- align-items: center;
54
- }
55
-
56
- .logo {
57
- display: flex;
58
- align-items: center;
59
- gap: 10px;
60
- }
61
-
62
- .logo i {
63
- color: var(--primary);
64
- font-size: 24px;
65
- }
66
-
67
- .logo h1 {
68
- font-size: 20px;
69
- font-weight: 700;
70
- color: var(--primary);
71
- }
72
-
73
- .header-actions {
74
- display: flex;
75
- gap: 15px;
76
- }
77
-
78
- .btn {
79
- padding: 8px 16px;
80
- border-radius: 8px;
81
- border: none;
82
- font-weight: 600;
83
- cursor: pointer;
84
- display: flex;
85
- align-items: center;
86
- gap: 8px;
87
- transition: all 0.2s;
88
- }
89
-
90
- .btn-primary {
91
- background-color: var(--primary);
92
- color: white;
93
- }
94
-
95
- .btn-primary:hover {
96
- background-color: var(--secondary);
97
  }
98
-
99
- .btn-outline {
100
- background-color: transparent;
101
- border: 1px solid var(--primary);
102
- color: var(--primary);
103
- }
104
-
105
- .btn-outline:hover {
106
- background-color: var(--primary);
107
- color: white;
108
- }
109
-
110
- .main-content {
111
- display: grid;
112
- grid-template-columns: 250px 1fr;
113
- gap: 20px;
114
- }
115
-
116
  .sidebar {
117
- background-color: white;
118
- border-radius: 12px;
119
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
120
- padding: 20px;
121
- height: fit-content;
122
- }
123
-
124
- .nav-menu {
125
- list-style: none;
126
- display: flex;
127
- flex-direction: column;
128
- gap: 5px;
129
- }
130
-
131
- .nav-item {
132
- padding: 10px 15px;
133
- border-radius: 8px;
134
- display: flex;
135
- align-items: center;
136
- gap: 12px;
137
- cursor: pointer;
138
- transition: all 0.2s;
139
- }
140
-
141
- .nav-item:hover, .nav-item.active {
142
- background-color: rgba(67, 97, 238, 0.1);
143
- color: var(--primary);
144
- }
145
-
146
- .nav-item i {
147
- width: 20px;
148
- text-align: center;
149
- }
150
-
151
- .content-area {
152
- display: flex;
153
- flex-direction: column;
154
- gap: 20px;
155
- }
156
-
157
- .stats-cards {
158
- display: grid;
159
- grid-template-columns: repeat(4, 1fr);
160
- gap: 15px;
161
- }
162
-
163
- .stat-card {
164
- background-color: white;
165
- border-radius: 12px;
166
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
167
- padding: 20px;
168
- display: flex;
169
- flex-direction: column;
170
- gap: 10px;
171
- }
172
-
173
- .stat-card .icon {
174
- width: 40px;
175
- height: 40px;
176
- border-radius: 50%;
177
- display: flex;
178
- align-items: center;
179
- justify-content: center;
180
- font-size: 18px;
181
- }
182
-
183
- .stat-card.blue .icon {
184
- background-color: rgba(67, 97, 238, 0.1);
185
- color: var(--primary);
186
- }
187
-
188
- .stat-card.green .icon {
189
- background-color: rgba(76, 175, 80, 0.1);
190
- color: var(--success);
191
- }
192
-
193
- .stat-card.yellow .icon {
194
- background-color: rgba(255, 152, 0, 0.1);
195
- color: var(--warning);
196
- }
197
-
198
- .stat-card.red .icon {
199
- background-color: rgba(247, 37, 133, 0.1);
200
- color: var(--danger);
201
- }
202
-
203
- .stat-card .value {
204
- font-size: 24px;
205
- font-weight: 700;
206
- }
207
-
208
- .stat-card .label {
209
- color: var(--gray);
210
- font-size: 14px;
211
- }
212
-
213
- .sms-list-container {
214
- background-color: white;
215
- border-radius: 12px;
216
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
217
- padding: 20px;
218
- }
219
-
220
- .section-header {
221
- display: flex;
222
- justify-content: space-between;
223
- align-items: center;
224
- margin-bottom: 20px;
225
- }
226
-
227
- .section-title {
228
- font-size: 18px;
229
- font-weight: 600;
230
- }
231
-
232
- .filter-controls {
233
- display: flex;
234
- gap: 10px;
235
- }
236
-
237
- .search-bar {
238
- position: relative;
239
- }
240
-
241
- .search-bar input {
242
- padding: 8px 15px 8px 35px;
243
- border: 1px solid #ddd;
244
- border-radius: 8px;
245
- width: 200px;
246
- }
247
-
248
- .search-bar i {
249
- position: absolute;
250
- left: 10px;
251
- top: 50%;
252
- transform: translateY(-50%);
253
- color: var(--gray);
254
- }
255
-
256
- .sms-list {
257
- display: flex;
258
- flex-direction: column;
259
- gap: 10px;
260
- max-height: 500px;
261
- overflow-y: auto;
262
- }
263
-
264
- .sms-item {
265
- display: flex;
266
- flex-direction: column;
267
- gap: 5px;
268
- padding: 15px;
269
- border-radius: 8px;
270
- background-color: #f9f9f9;
271
- border-left: 4px solid transparent;
272
- transition: all 0.2s;
273
- }
274
-
275
- .sms-item:hover {
276
- background-color: #f0f4ff;
277
- }
278
-
279
- .sms-item.otp {
280
- border-left-color: var(--primary);
281
- }
282
-
283
- .sms-item.transaction {
284
- border-left-color: var(--success);
285
- }
286
-
287
- .sms-item.promo {
288
- border-left-color: var(--warning);
289
- }
290
-
291
- .sms-item.important {
292
- border-left-color: var(--danger);
293
- }
294
-
295
- .sms-header {
296
- display: flex;
297
- justify-content: space-between;
298
- align-items: center;
299
- }
300
-
301
- .sender {
302
- font-weight: 600;
303
- }
304
-
305
- .time {
306
- font-size: 12px;
307
- color: var(--gray);
308
- }
309
-
310
- .sms-body {
311
- display: flex;
312
- flex-direction: column;
313
- gap: 8px;
314
- }
315
-
316
- .message {
317
- font-size: 14px;
318
- }
319
-
320
- .otp-code {
321
- font-size: 24px;
322
- font-weight: 700;
323
- color: var(--primary);
324
- letter-spacing: 5px;
325
- }
326
-
327
- .sms-actions {
328
- display: flex;
329
- gap: 10px;
330
- margin-top: 10px;
331
- }
332
-
333
- .sms-actions .btn {
334
- padding: 5px 10px;
335
- font-size: 12px;
336
- }
337
-
338
- .highlight-otp {
339
- animation: pulse 2s infinite;
340
- color: var(--danger);
341
- }
342
-
343
- @keyframes pulse {
344
- 0% { transform: scale(1); }
345
- 50% { transform: scale(1.05); }
346
- 100% { transform: scale(1); }
347
- }
348
-
349
- .settings-panel {
350
- display: none;
351
- background-color: white;
352
- border-radius: 12px;
353
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
354
- padding: 20px;
355
- }
356
-
357
- .settings-panel.active {
358
- display: block;
359
- }
360
-
361
- .setting-item {
362
- margin-bottom: 20px;
363
- }
364
-
365
- .setting-title {
366
- font-weight: 600;
367
- margin-bottom: 10px;
368
- }
369
-
370
- .switch {
371
- position: relative;
372
- display: inline-block;
373
- width: 50px;
374
- height: 24px;
375
- }
376
-
377
- .switch input {
378
- opacity: 0;
379
- width: 0;
380
- height: 0;
381
  }
382
-
383
- .slider {
384
- position: absolute;
385
- cursor: pointer;
386
- top: 0;
387
- left: 0;
388
- right: 0;
389
- bottom: 0;
390
- background-color: #ccc;
391
- transition: .4s;
392
- border-radius: 24px;
393
- }
394
-
395
- .slider:before {
396
- position: absolute;
397
- content: "";
398
- height: 16px;
399
- width: 16px;
400
- left: 4px;
401
- bottom: 4px;
402
- background-color: white;
403
- transition: .4s;
404
- border-radius: 50%;
405
- }
406
-
407
- input:checked + .slider {
408
- background-color: var(--primary);
409
- }
410
-
411
- input:checked + .slider:before {
412
- transform: translateX(26px);
413
- }
414
-
415
- .feature-list {
416
- display: grid;
417
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
418
- gap: 20px;
419
- margin-top: 30px;
420
- }
421
-
422
- .feature-card {
423
- background-color: white;
424
- border-radius: 12px;
425
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
426
- padding: 20px;
427
- display: flex;
428
- flex-direction: column;
429
- gap: 10px;
430
- transition: transform 0.3s;
431
- }
432
-
433
- .feature-card:hover {
434
  transform: translateY(-5px);
 
435
  }
436
-
437
- .feature-icon {
438
- width: 40px;
439
- height: 40px;
440
- border-radius: 50%;
441
- background-color: rgba(67, 97, 238, 0.1);
442
- display: flex;
443
- align-items: center;
444
- justify-content: center;
445
- color: var(--primary);
446
- font-size: 18px;
447
- }
448
-
449
- .feature-title {
450
- font-weight: 600;
451
- font-size: 16px;
452
- }
453
-
454
- .feature-desc {
455
- color: var(--gray);
456
- font-size: 14px;
457
  }
458
-
459
- .hidden {
460
- display: none;
461
  }
462
-
463
- @media (max-width: 992px) {
464
- .main-content {
465
- grid-template-columns: 1fr;
466
- }
467
-
468
- .stats-cards {
469
- grid-template-columns: repeat(2, 1fr);
470
- }
471
-
472
- .sidebar {
473
- order: 1;
474
- }
475
- }
476
-
477
- @media (max-width: 576px) {
478
- .stats-cards {
479
- grid-template-columns: 1fr;
480
- }
481
-
482
- .header {
483
- flex-direction: column;
484
- gap: 15px;
485
- }
486
-
487
- .header-actions {
488
- width: 100%;
489
- justify-content: space-between;
490
- }
491
- }
492
-
493
- /* Loading animation */
494
- .loader-container {
495
- display: none;
496
- position: fixed;
497
- top: 0;
498
- left: 0;
499
- width: 100%;
500
- height: 100%;
501
- background-color: rgba(0, 0, 0, 0.5);
502
- z-index: 1000;
503
- justify-content: center;
504
- align-items: center;
505
- }
506
-
507
- .loader {
508
- border: 5px solid #f3f3f3;
509
- border-top: 5px solid var(--primary);
510
- border-radius: 50%;
511
- width: 50px;
512
- height: 50px;
513
- animation: spin 1s linear infinite;
514
- }
515
-
516
- @keyframes spin {
517
- 0% { transform: rotate(0deg); }
518
- 100% { transform: rotate(360deg); }
519
- }
520
-
521
- /* Tooltip */
522
- .tooltip {
523
- position: relative;
524
- display: inline-block;
525
- cursor: pointer;
526
- }
527
-
528
- .tooltip .tooltip-text {
529
- visibility: hidden;
530
- width: 200px;
531
- background-color: var(--dark);
532
- color: #fff;
533
- text-align: center;
534
- border-radius: 6px;
535
- padding: 5px;
536
  position: absolute;
537
- z-index: 1;
538
- bottom: 125%;
539
- left: 50%;
540
- transform: translateX(-50%);
541
- opacity: 0;
542
- transition: opacity 0.3s;
543
- font-size: 12px;
544
- }
545
-
546
- .tooltip:hover .tooltip-text {
547
- visibility: visible;
548
- opacity: 1;
549
  }
550
  </style>
551
  </head>
552
- <body>
553
- <div class="app-container">
554
- <header>
555
- <div class="logo">
556
- <i class="fas fa-shield-alt"></i>
557
- <h1>SMS Shield Pro</h1>
558
- </div>
559
- <div class="header-actions">
560
- <button class="btn btn-outline">
561
- <i class="fas fa-cog"></i> Settings
562
- </button>
563
- <button class="btn btn-primary">
564
- <i class="fas fa-crown"></i> Upgrade
565
  </button>
566
  </div>
567
- </header>
568
-
569
- <div class="main-content">
570
- <aside class="sidebar">
571
- <ul class="nav-menu">
572
- <li class="nav-item active" data-target="dashboard">
573
- <i class="fas fa-tachometer-alt"></i>
574
- <span>Dashboard</span>
575
- </li>
576
- <li class="nav-item" data-target="inbox">
577
- <i class="fas fa-inbox"></i>
578
- <span>Inbox</span>
579
- </li>
580
- <li class="nav-item" data-target="otp-manager">
581
- <i class="fas fa-mobile-alt"></i>
582
- <span>OTP Manager</span>
583
- </li>
584
- <li class="nav-item" data-target="auto-reply">
585
- <i class="fas fa-reply"></i>
586
- <span>Auto Reply</span>
587
- </li>
588
- <li class="nav-item" data-target="blacklist">
589
- <i class="fas fa-ban"></i>
590
- <span>Blacklist</span>
591
- </li>
592
- <li class="nav-item" data-target="backup">
593
- <i class="fas fa-cloud-upload-alt"></i>
594
- <span>Backup</span>
595
- </li>
596
- <li class="nav-item" data-target="security">
597
- <i class="fas fa-lock"></i>
598
- <span>Security</span>
599
- </li>
600
- <li class="nav-item" data-target="support">
601
- <i class="fas fa-question-circle"></i>
602
- <span>Help & Support</span>
603
- </li>
604
- </ul>
605
- </aside>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
606
 
607
- <div class="content-area">
608
- <div id="dashboard" class="content-section">
609
- <div class="stats-cards">
610
- <div class="stat-card blue">
611
- <div class="icon">
612
- <i class="fas fa-sms"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
613
  </div>
614
- <div class="value">1,248</div>
615
- <div class="label">Messages Processed</div>
616
  </div>
617
- <div class="stat-card green">
618
- <div class="icon">
619
- <i class="fas fa-key"></i>
 
620
  </div>
621
- <div class="value">387</div>
622
- <div class="label">OTPs Detected</div>
623
  </div>
624
- <div class="stat-card yellow">
625
- <div class="icon">
626
- <i class="fas fa-ban"></i>
 
 
 
 
 
 
627
  </div>
628
- <div class="value">156</div>
629
- <div class="label">Spam Blocked</div>
630
  </div>
631
- <div class="stat-card red">
632
- <div class="icon">
633
- <i class="fas fa-exclamation-triangle"></i>
 
634
  </div>
635
- <div class="value">12</div>
636
- <div class="label">Security Alerts</div>
637
  </div>
638
  </div>
639
-
640
- <div class="sms-list-container">
641
- <div class="section-header">
642
- <h3 class="section-title">Recent Messages</h3>
643
- <div class="filter-controls">
644
- <div class="search-bar">
645
- <i class="fas fa-search"></i>
646
- <input type="text" placeholder="Search messages...">
647
- </div>
648
- <select class="btn btn-outline">
649
- <option>All Messages</option>
650
- <option>OTP Only</option>
651
- <option>Banking</option>
652
- <option>Promotions</option>
653
- </select>
654
  </div>
655
  </div>
656
-
657
- <div class="sms-list">
658
- <div class="sms-item otp">
659
- <div class="sms-header">
660
- <div class="sender">Amazon</div>
661
- <div class="time">2 mins ago</div>
662
- </div>
663
- <div class="sms-body">
664
- <div class="message">Your Amazon OTP code is: <span class="otp-code">7 4 8 3 5 2</span>. Valid for 5 minutes.</div>
665
- </div>
666
- <div class="sms-actions">
667
- <button class="btn btn-outline btn-sm">
668
- <i class="fas fa-copy"></i> Copy OTP
669
- </button>
670
- <button class="btn btn-outline btn-sm">
671
- <i class="fas fa-reply"></i> Auto-Reply
672
- </button>
673
- <button class="btn btn-outline btn-sm">
674
- <i class="fas fa-ban"></i> Block Sender
675
- </button>
676
- </div>
677
  </div>
678
-
679
- <div class="sms-item transaction">
680
- <div class="sms-header">
681
- <div class="sender">Bank of America</div>
682
- <div class="time">25 mins ago</div>
683
- </div>
684
- <div class="sms-body">
685
- <div class="message">Debit transaction of $45.29 at STARBUCKS. If not authorized, call 1-800-555-1234.</div>
686
- </div>
687
  </div>
688
-
689
- <div class="sms-item important">
690
- <div class="sms-header">
691
- <div class="sender">Security Alert</div>
692
- <div class="time">1 hour ago</div>
693
- </div>
694
- <div class="sms-body">
695
- <div class="message">Warning: Unusual login attempt detected from new device (IP: 192.168.1.45).</div>
696
- </div>
697
  </div>
698
-
699
- <div class="sms-item promo">
700
- <div class="sms-header">
701
- <div class="sender">Uber Eats</div>
702
- <div class="time">3 hours ago</div>
703
- </div>
704
- <div class="sms-body">
705
- <div class="message">Enjoy 50% off your first order with code FIRST50. Order now!</div>
706
- </div>
707
  </div>
708
  </div>
709
  </div>
710
  </div>
711
 
712
- <div id="otp-manager" class="content-section hidden">
713
- <div class="sms-list-container">
714
- <div class="section-header">
715
- <h3 class="section-title">OTP Management</h3>
716
- <div class="filter-controls">
717
- <div class="search-bar">
718
- <i class="fas fa-search"></i>
719
- <input type="text" placeholder="Search OTPs...">
720
- </div>
 
721
  </div>
722
  </div>
 
 
 
 
723
 
724
- <div class="feature-list">
725
- <div class="feature-card">
726
- <div class="feature-icon">
727
- <i class="fas fa-bolt"></i>
728
- </div>
729
- <div class="feature-title">Auto-Copy OTP</div>
730
- <div class="feature-desc">Automatically copies OTP to clipboard when received</div>
731
- <div class="setting-item">
732
- <div class="switch">
733
- <input type="checkbox" checked>
734
- <span class="slider"></span>
735
- </div>
736
- </div>
737
- </div>
738
-
739
- <div class="feature-card">
740
- <div class="feature-icon">
741
- <i class="fas fa-stopwatch"></i>
742
- </div>
743
- <div class="feature-title">OTP Timer</div>
744
- <div class="feature-desc">Shows countdown timer for OTP validity</div>
745
- <div class="setting-item">
746
- <div class="switch">
747
- <input type="checkbox" checked>
748
- <span class="slider"></span>
749
- </div>
750
  </div>
 
 
 
751
  </div>
752
-
753
- <div class="feature-card">
754
- <div class="feature-icon">
755
- <i class="fas fa-eye-slash"></i>
756
- </div>
757
- <div class="feature-title">Hide OTP on Lock Screen</div>
758
- <div class="feature-desc">Prevents OTP visibility on notifications</div>
759
- <div class="setting-item">
760
- <div class="switch">
761
- <input type="checkbox">
762
- <span class="slider"></span>
763
- </div>
764
  </div>
 
 
 
765
  </div>
766
-
767
- <div class="feature-card">
768
- <div class="feature-icon">
769
- <i class="fas fa-database"></i>
770
- </div>
771
- <div class="feature-title">OTP History</div>
772
- <div class="feature-desc">Stores past OTPs securely for reference</div>
773
- <div class="setting-item">
774
- <div class="switch">
775
- <input type="checkbox" checked>
776
- <span class="slider"></span>
777
- </div>
778
  </div>
 
 
 
779
  </div>
780
-
781
- <div class="feature-card">
782
- <div class="feature-icon">
783
- <i class="fas fa-fingerprint"></i>
784
- </div>
785
- <div class="feature-title">Biometric Protection</div>
786
- <div class="feature-desc">Requires fingerprint to access OTPs</div>
787
- <div class="setting-item">
788
- <div class="switch">
789
- <input type="checkbox">
790
- <span class="slider"></span>
791
- </div>
792
  </div>
 
 
 
793
  </div>
794
-
795
- <div class="feature-card">
796
- <div class="feature-icon">
797
- <i class="fas fa-shield-alt"></i>
798
- </div>
799
- <div class="feature-title">OTP Guard</div>
800
- <div class="feature-desc">Blocks suspicious OTP requests</div>
801
- <div class="setting-item">
802
- <div class="switch">
803
- <input type="checkbox" checked>
804
- <span class="slider"></span>
805
- </div>
806
- </div>
807
  </div>
808
  </div>
809
  </div>
810
  </div>
811
 
812
- <div id="settings" class="content-section settings-panel">
813
- <h3 class="section-title">Application Settings</h3>
814
- <div class="setting-item">
815
- <div class="setting-title">Notification Preferences</div>
816
- <div class="switch">
817
- <input type="checkbox" checked>
818
- <span class="slider"></span>
819
- <span>Enable Notifications</span>
820
  </div>
821
  </div>
822
- <div class="setting-item">
823
- <div class="setting-title">Auto Backup</div>
824
- <div class="switch">
825
- <input type="checkbox">
826
- <span class="slider"></span>
827
- <span>Backup SMS to Cloud</span>
828
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
829
  </div>
830
- <div class="setting-item">
831
- <div class="setting-title">Security</div>
832
- <div class="switch">
833
- <input type="checkbox" checked>
834
- <span class="slider"></span>
835
- <span>Encrypt Messages</span>
 
 
 
 
836
  </div>
837
  </div>
838
  </div>
839
- </div>
840
  </div>
841
  </div>
842
 
843
- <div class="loader-container">
844
- <div class="loader"></div>
845
- </div>
846
-
847
  <script>
848
- // Navigation between sections
849
- document.querySelectorAll('.nav-item').forEach(item => {
850
- item.addEventListener('click', function() {
851
- // Remove active class from all nav items
852
- document.querySelectorAll('.nav-item').forEach(nav => {
853
- nav.classList.remove('active');
854
- });
855
-
856
- // Add active class to clicked item
857
- this.classList.add('active');
858
-
859
- // Hide all content sections
860
- document.querySelectorAll('.content-section').forEach(section => {
861
- section.classList.add('hidden');
862
- });
863
-
864
- // Show the targeted section
865
- const target = this.getAttribute('data-target');
866
- document.getElementById(target).classList.remove('hidden');
867
- });
868
- });
869
-
870
- // Settings toggle
871
- document.querySelector('.btn-outline').addEventListener('click', function() {
872
- // Hide all content sections first
873
- document.querySelectorAll('.content-section').forEach(section => {
874
- section.classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
875
  });
876
 
877
- // Then show settings
878
- document.getElementById('settings').classList.remove('hidden');
 
879
 
880
- // Update nav items
881
- document.querySelectorAll('.nav-item').forEach(nav => {
882
- nav.classList.remove('active');
883
  });
884
  });
885
-
886
- // Simulate loading
887
- function showLoader() {
888
- document.querySelector('.loader-container').style.display = 'flex';
889
- setTimeout(() => {
890
- document.querySelector('.loader-container').style.display = 'none';
891
- }, 1500);
892
- }
893
-
894
- // Copy OTP functionality
895
- document.querySelectorAll('.btn-outline').forEach(btn => {
896
- btn.addEventListener('click', function(e) {
897
- if (this.innerHTML.includes('Copy OTP')) {
898
- const otp = this.closest('.sms-item').querySelector('.otp-code').textContent;
899
- navigator.clipboard.writeText(otp.replace(/\s/g, '')).then(() => {
900
- const originalText = this.innerHTML;
901
- this.innerHTML = '<i class="fas fa-check"></i> Copied!';
902
- setTimeout(() => {
903
- this.innerHTML = originalText;
904
- }, 2000);
905
- });
906
- e.stopPropagation();
907
- }
908
- });
909
- });
910
-
911
- // Highlight OTP (animation)
912
- const otpCodes = document.querySelectorAll('.otp-code');
913
- otpCodes.forEach(code => {
914
- code.addEventListener('click', function() {
915
- this.classList.toggle('highlight-otp');
916
- });
917
- });
918
-
919
- // Responsive menu toggle (for mobile)
920
- function toggleMobileMenu() {
921
- const sidebar = document.querySelector('.sidebar');
922
- sidebar.classList.toggle('active');
923
- }
924
-
925
- // Show upgrade modal
926
- document.querySelector('.btn-primary').addEventListener('click', function() {
927
- showLoader();
928
- alert('Premium features unlocked! Thank you for upgrading 👑');
929
- });
930
  </script>
931
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
932
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Certification Management Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f5f7fa;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  .sidebar {
18
+ transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
+
21
+ .certification-card:hover {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
24
  }
25
+
26
+ .progress-bar {
27
+ height: 8px;
28
+ border-radius: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  }
30
+
31
+ .chart-container {
32
+ height: 300px;
33
  }
34
+
35
+ .notification-badge {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  position: absolute;
37
+ top: -5px;
38
+ right: -5px;
39
+ width: 18px;
40
+ height: 18px;
41
+ font-size: 10px;
 
 
 
 
 
 
 
42
  }
43
  </style>
44
  </head>
45
+ <body class="bg-gray-50">
46
+ <div class="flex h-screen overflow-hidden">
47
+ <!-- Sidebar -->
48
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 hidden md:block">
49
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700">
50
+ <div class="flex items-center">
51
+ <i class="fas fa-lock-open text-2xl mr-3"></i>
52
+ <h1 class="text-xl font-bold">CertSecure</h1>
53
+ </div>
54
+ <button class="text-gray-300 hover:text-white">
55
+ <i class="fas fa-bars"></i>
 
 
56
  </button>
57
  </div>
58
+ <div class="p-4">
59
+ <div class="mb-8">
60
+ <h2 class="text-xs uppercase font-semibold text-indigo-300 mb-4">Main</h2>
61
+ <ul>
62
+ <li class="mb-2">
63
+ <a href="#" class="flex items-center p-2 rounded-lg bg-indigo-700">
64
+ <i class="fas fa-tachometer-alt mr-3"></i>
65
+ <span>Dashboard</span>
66
+ </a>
67
+ </li>
68
+ <li class="mb-2">
69
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
70
+ <i class="fas fa-certificate mr-3"></i>
71
+ <span>Certifications</span>
72
+ </a>
73
+ </li>
74
+ <li class="mb-2">
75
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
76
+ <i class="fas fa-users mr-3"></i>
77
+ <span>Users</span>
78
+ </a>
79
+ </li>
80
+ </ul>
81
+ </div>
82
+ <div class="mb-8">
83
+ <h2 class="text-xs uppercase font-semibold text-indigo-300 mb-4">Certification Types</h2>
84
+ <ul>
85
+ <li class="mb-2">
86
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
87
+ <i class="fas fa-user-shield mr-3"></i>
88
+ <span>SSO</span>
89
+ </a>
90
+ </li>
91
+ <li class="mb-2">
92
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
93
+ <i class="fas fa-id-card mr-3"></i>
94
+ <span>IDP</span>
95
+ </a>
96
+ </li>
97
+ <li class="mb-2">
98
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
99
+ <i class="fab fa-adobe mr-3"></i>
100
+ <span>AEM</span>
101
+ </a>
102
+ </li>
103
+ <li class="mb-2">
104
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
105
+ <i class="fas fa-server mr-3"></i>
106
+ <span>Infrastructure</span>
107
+ </a>
108
+ </li>
109
+ </ul>
110
+ </div>
111
+ <div>
112
+ <h2 class="text-xs uppercase font-semibold text-indigo-300 mb-4">Settings</h2>
113
+ <ul>
114
+ <li class="mb-2">
115
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
116
+ <i class="fas fa-cog mr-3"></i>
117
+ <span>System Settings</span>
118
+ </a>
119
+ </li>
120
+ <li class="mb-2">
121
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
122
+ <i class="fas fa-question-circle mr-3"></i>
123
+ <span>Help & Support</span>
124
+ </a>
125
+ </li>
126
+ </ul>
127
+ </div>
128
+ </div>
129
+ </div>
130
 
131
+ <!-- Main Content -->
132
+ <div class="flex-1 overflow-auto">
133
+ <!-- Top Navigation -->
134
+ <header class="bg-white shadow-sm">
135
+ <div class="flex items-center justify-between p-4">
136
+ <div class="flex items-center">
137
+ <button class="md:hidden mr-4 text-gray-600">
138
+ <i class="fas fa-bars"></i>
139
+ </button>
140
+ <h1 class="text-xl font-semibold text-gray-800">Certification Dashboard</h1>
141
+ </div>
142
+ <div class="flex items-center space-x-4">
143
+ <div class="relative">
144
+ <button class="text-gray-600 hover:text-gray-800">
145
+ <i class="fas fa-bell"></i>
146
+ <span class="notification-badge bg-red-500 text-white rounded-full flex items-center justify-center">3</span>
147
+ </button>
148
+ </div>
149
+ <div class="flex items-center">
150
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full mr-2">
151
+ <span class="text-gray-700">Admin User</span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </header>
156
+
157
+ <!-- Dashboard Content -->
158
+ <main class="p-6">
159
+ <!-- Stats Cards -->
160
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
161
+ <div class="bg-white rounded-lg shadow p-6">
162
+ <div class="flex items-center justify-between">
163
+ <div>
164
+ <p class="text-gray-500">Total Certifications</p>
165
+ <h3 class="text-2xl font-bold">142</h3>
166
+ </div>
167
+ <div class="bg-blue-100 p-3 rounded-full">
168
+ <i class="fas fa-certificate text-blue-600"></i>
169
  </div>
 
 
170
  </div>
171
+ <div class="mt-4">
172
+ <div class="flex items-center text-sm text-green-500">
173
+ <span>+12% from last month</span>
174
+ <i class="fas fa-arrow-up ml-1"></i>
175
  </div>
 
 
176
  </div>
177
+ </div>
178
+ <div class="bg-white rounded-lg shadow p-6">
179
+ <div class="flex items-center justify-between">
180
+ <div>
181
+ <p class="text-gray-500">Active SSO</p>
182
+ <h3 class="text-2xl font-bold">56</h3>
183
+ </div>
184
+ <div class="bg-purple-100 p-3 rounded-full">
185
+ <i class="fas fa-user-shield text-purple-600"></i>
186
  </div>
 
 
187
  </div>
188
+ <div class="mt-4">
189
+ <div class="flex items-center text-sm text-green-500">
190
+ <span>+5% from last month</span>
191
+ <i class="fas fa-arrow-up ml-1"></i>
192
  </div>
 
 
193
  </div>
194
  </div>
195
+ <div class="bg-white rounded-lg shadow p-6">
196
+ <div class="flex items-center justify-between">
197
+ <div>
198
+ <p class="text-gray-500">IDP Certifications</p>
199
+ <h3 class="text-2xl font-bold">34</h3>
200
+ </div>
201
+ <div class="bg-green-100 p-3 rounded-full">
202
+ <i class="fas fa-id-card text-green-600"></i>
 
 
 
 
 
 
 
203
  </div>
204
  </div>
205
+ <div class="mt-4">
206
+ <div class="flex items-center text-sm text-red-500">
207
+ <span>-2% from last month</span>
208
+ <i class="fas fa-arrow-down ml-1"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  </div>
210
+ </div>
211
+ </div>
212
+ <div class="bg-white rounded-lg shadow p-6">
213
+ <div class="flex items-center justify-between">
214
+ <div>
215
+ <p class="text-gray-500">AEM Certifications</p>
216
+ <h3 class="text-2xl font-bold">28</h3>
 
 
217
  </div>
218
+ <div class="bg-orange-100 p-3 rounded-full">
219
+ <i class="fab fa-adobe text-orange-600"></i>
 
 
 
 
 
 
 
220
  </div>
221
+ </div>
222
+ <div class="mt-4">
223
+ <div class="flex items-center text-sm text-green-500">
224
+ <span>+8% from last month</span>
225
+ <i class="fas fa-arrow-up ml-1"></i>
 
 
 
 
226
  </div>
227
  </div>
228
  </div>
229
  </div>
230
 
231
+ <!-- Charts and Recent Certifications -->
232
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
233
+ <!-- Certification Status Chart -->
234
+ <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
235
+ <div class="flex items-center justify-between mb-6">
236
+ <h2 class="text-lg font-semibold">Certification Status Overview</h2>
237
+ <div class="flex space-x-2">
238
+ <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded">Monthly</button>
239
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded">Quarterly</button>
240
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded">Yearly</button>
241
  </div>
242
  </div>
243
+ <div class="chart-container">
244
+ <canvas id="statusChart"></canvas>
245
+ </div>
246
+ </div>
247
 
248
+ <!-- Upcoming Renewals -->
249
+ <div class="bg-white rounded-lg shadow p-6">
250
+ <h2 class="text-lg font-semibold mb-6">Upcoming Renewals</h2>
251
+ <div class="space-y-4">
252
+ <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
253
+ <div>
254
+ <p class="font-medium">SSO Gateway</p>
255
+ <p class="text-sm text-gray-500">Expires in 14 days</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
256
  </div>
257
+ <button class="text-blue-600 hover:text-blue-800">
258
+ <i class="fas fa-ellipsis-v"></i>
259
+ </button>
260
  </div>
261
+ <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
262
+ <div>
263
+ <p class="font-medium">AEM Publisher</p>
264
+ <p class="text-sm text-gray-500">Expires in 21 days</p>
 
 
 
 
 
 
 
 
265
  </div>
266
+ <button class="text-yellow-600 hover:text-yellow-800">
267
+ <i class="fas fa-ellipsis-v"></i>
268
+ </button>
269
  </div>
270
+ <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
271
+ <div>
272
+ <p class="font-medium">IDP Service</p>
273
+ <p class="text-sm text-gray-500">Expires in 5 days</p>
 
 
 
 
 
 
 
 
274
  </div>
275
+ <button class="text-red-600 hover:text-red-800">
276
+ <i class="fas fa-ellipsis-v"></i>
277
+ </button>
278
  </div>
279
+ <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
280
+ <div>
281
+ <p class="font-medium">SSO Connector</p>
282
+ <p class="text-sm text-gray-500">Expires in 30 days</p>
 
 
 
 
 
 
 
 
283
  </div>
284
+ <button class="text-green-600 hover:text-green-800">
285
+ <i class="fas fa-ellipsis-v"></i>
286
+ </button>
287
  </div>
288
+ <div class="text-center mt-4">
289
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
290
+ View All Renewals
291
+ </button>
 
 
 
 
 
 
 
 
 
292
  </div>
293
  </div>
294
  </div>
295
  </div>
296
 
297
+ <!-- Recent Certifications -->
298
+ <div class="bg-white rounded-lg shadow overflow-hidden">
299
+ <div class="p-6 border-b">
300
+ <div class="flex items-center justify-between">
301
+ <h2 class="text-lg font-semibold">Recent Certifications</h2>
302
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
303
+ <i class="fas fa-plus mr-2"></i> Add New
304
+ </button>
305
  </div>
306
  </div>
307
+ <div class="overflow-x-auto">
308
+ <table class="min-w-full divide-y divide-gray-200">
309
+ <thead class="bg-gray-50">
310
+ <tr>
311
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
312
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
313
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
314
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Issued Date</th>
315
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiry Date</th>
316
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
317
+ </tr>
318
+ </thead>
319
+ <tbody class="bg-white divide-y divide-gray-200">
320
+ <tr>
321
+ <td class="px-6 py-4 whitespace-nowrap">
322
+ <div class="flex items-center">
323
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
324
+ <i class="fas fa-user-shield text-blue-600"></i>
325
+ </div>
326
+ <div class="ml-4">
327
+ <div class="text-sm font-medium text-gray-900">SSO Gateway v2.0</div>
328
+ <div class="text-sm text-gray-500">Gateway Service</div>
329
+ </div>
330
+ </div>
331
+ </td>
332
+ <td class="px-6 py-4 whitespace-nowrap">
333
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">SSO</span>
334
+ </td>
335
+ <td class="px-6 py-4 whitespace-nowrap">
336
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
337
+ </td>
338
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jan 2023</td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jan 2024</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
341
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
342
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">Renew</a>
343
+ </td>
344
+ </tr>
345
+ <tr>
346
+ <td class="px-6 py-4 whitespace-nowrap">
347
+ <div class="flex items-center">
348
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
349
+ <i class="fas fa-id-card text-purple-600"></i>
350
+ </div>
351
+ <div class="ml-4">
352
+ <div class="text-sm font-medium text-gray-900">IDP Core Service</div>
353
+ <div class="text-sm text-gray-500">Identity Provider</div>
354
+ </div>
355
+ </div>
356
+ </td>
357
+ <td class="px-6 py-4 whitespace-nowrap">
358
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">IDP</span>
359
+ </td>
360
+ <td class="px-6 py-4 whitespace-nowrap">
361
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
362
+ </td>
363
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
364
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
365
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
366
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
367
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">Approve</a>
368
+ </td>
369
+ </tr>
370
+ <tr>
371
+ <td class="px-6 py-4 whitespace-nowrap">
372
+ <div class="flex items-center">
373
+ <div class="flex-shrink-0 h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center">
374
+ <i class="fab fa-adobe text-orange-600"></i>
375
+ </div>
376
+ <div class="ml-4">
377
+ <div class="text-sm font-medium text-gray-900">AEM Author Instance</div>
378
+ <div class="text-sm text-gray-500">Content Management</div>
379
+ </div>
380
+ </div>
381
+ </td>
382
+ <td class="px-6 py-4 whitespace-nowrap">
383
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">AEM</span>
384
+ </td>
385
+ <td class="px-6 py-4 whitespace-nowrap">
386
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
387
+ </td>
388
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 Mar 2023</td>
389
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 Mar 2024</td>
390
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
391
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
392
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">Renew</a>
393
+ </td>
394
+ </tr>
395
+ <tr>
396
+ <td class="px-6 py-4 whitespace-nowrap">
397
+ <div class="flex items-center">
398
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
399
+ <i class="fas fa-user-shield text-blue-600"></i>
400
+ </div>
401
+ <div class="ml-4">
402
+ <div class="text-sm font-medium text-gray-900">SSO Connector</div>
403
+ <div class="text-sm text-gray-500">Integration Service</div>
404
+ </div>
405
+ </div>
406
+ </td>
407
+ <td class="px-6 py-4 whitespace-nowrap">
408
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">SSO</span>
409
+ </td>
410
+ <td class="px-6 py-4 whitespace-nowrap">
411
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Expired</span>
412
+ </td>
413
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05 Feb 2022</td>
414
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05 Feb 2023</td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
416
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
417
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">Renew</a>
418
+ </td>
419
+ </tr>
420
+ </tbody>
421
+ </table>
422
  </div>
423
+ <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
424
+ <div class="text-sm text-gray-500">
425
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">142</span> results
426
+ </div>
427
+ <div class="flex space-x-2">
428
+ <button class="px-3 py-1 border rounded-md text-sm font-medium">Previous</button>
429
+ <button class="px-3 py-1 border rounded-md bg-indigo-600 text-white text-sm font-medium">1</button>
430
+ <button class="px-3 py-1 border rounded-md text-sm font-medium">2</button>
431
+ <button class="px-3 py-1 border rounded-md text-sm font-medium">3</button>
432
+ <button class="px-3 py-1 border rounded-md text-sm font-medium">Next</button>
433
  </div>
434
  </div>
435
  </div>
436
+ </main>
437
  </div>
438
  </div>
439
 
440
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 
 
441
  <script>
442
+ // Initialize the status chart
443
+ document.addEventListener('DOMContentLoaded', function() {
444
+ const ctx = document.getElementById('statusChart').getContext('2d');
445
+ const statusChart = new Chart(ctx, {
446
+ type: 'bar',
447
+ data: {
448
+ labels: ['SSO', 'IDP', 'AEM', 'Infrastructure'],
449
+ datasets: [
450
+ {
451
+ label: 'Active',
452
+ data: [56, 24, 28, 18],
453
+ backgroundColor: '#4f46e5',
454
+ borderRadius: 4
455
+ },
456
+ {
457
+ label: 'Pending',
458
+ data: [12, 10, 5, 3],
459
+ backgroundColor: '#f59e0b',
460
+ borderRadius: 4
461
+ },
462
+ {
463
+ label: 'Expired',
464
+ data: [8, 4, 2, 1],
465
+ backgroundColor: '#ef4444',
466
+ borderRadius: 4
467
+ }
468
+ ]
469
+ },
470
+ options: {
471
+ responsive: true,
472
+ maintainAspectRatio: false,
473
+ scales: {
474
+ x: {
475
+ stacked: true,
476
+ grid: {
477
+ display: false
478
+ }
479
+ },
480
+ y: {
481
+ stacked: true,
482
+ beginAtZero: true,
483
+ ticks: {
484
+ stepSize: 10
485
+ }
486
+ }
487
+ },
488
+ plugins: {
489
+ legend: {
490
+ position: 'top',
491
+ },
492
+ tooltip: {
493
+ mode: 'index',
494
+ intersect: false
495
+ }
496
+ }
497
+ }
498
  });
499
 
500
+ // Mobile menu toggle
501
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
502
+ const sidebar = document.querySelector('.sidebar');
503
 
504
+ mobileMenuButton.addEventListener('click', function() {
505
+ sidebar.classList.toggle('hidden');
 
506
  });
507
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
508
  </script>
509
+ </body>
510
  </html>