Hugging Face's logo

Spaces:
Dzcard
/
azul
Running

App Files Community
1
Dzcard commited on
Commit
638cb10
·
verified ·
1 Parent(s): dfc02ab

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +932 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Azul
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: azul
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,932 @@
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>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>