Hugging Face's logo

Spaces:
Waternoose
/
anycoder-543b8eaa
Running

App Files Community
Waternoose commited on
Commit
daa89a4
·
verified ·
1 Parent(s): ba2d8a1

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +940 -19
index.html CHANGED
@@ -1,19 +1,940 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>SecureVault - Private Exchange</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'vault-dark': '#0a0a0f',
15
+ 'vault-darker': '#050508',
16
+ 'vault-card': '#12121a',
17
+ 'vault-accent': '#00d4aa',
18
+ 'vault-accent-dim': '#00a884',
19
+ 'vault-danger': '#ff4757',
20
+ 'vault-warn': '#ffa502',
21
+ 'vault-info': '#3742fa'
22
+ },
23
+ animation: {
24
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
25
+ 'slide-up': 'slideUp 0.3s ease-out',
26
+ 'fade-in': 'fadeIn 0.2s ease-out',
27
+ 'shake': 'shake 0.5s ease-in-out',
28
+ 'glitch': 'glitch 0.3s ease-in-out',
29
+ 'scan': 'scan 2s linear infinite',
30
+ 'type': 'type 0.8s steps(20) forwards'
31
+ },
32
+ keyframes: {
33
+ slideUp: {
34
+ '0%': { transform: 'translateY(100%)', opacity: '0' },
35
+ '100%': { transform: 'translateY(0)', opacity: '1' }
36
+ },
37
+ fadeIn: {
38
+ '0%': { opacity: '0' },
39
+ '100%': { opacity: '1' }
40
+ },
41
+ shake: {
42
+ '0%, 100%': { transform: 'translateX(0)' },
43
+ '25%': { transform: 'translateX(-10px)' },
44
+ '75%': { transform: 'translateX(10px)' }
45
+ },
46
+ glitch: {
47
+ '0%, 100%': { transform: 'translate(0)' },
48
+ '20%': { transform: 'translate(-2px, 2px)' },
49
+ '40%': { transform: 'translate(2px, -2px)' },
50
+ '60%': { transform: 'translate(-2px, -2px)' },
51
+ '80%': { transform: 'translate(2px, 2px)' }
52
+ },
53
+ scan: {
54
+ '0%': { transform: 'translateY(-100%)' },
55
+ '100%': { transform: 'translateY(100vh)' }
56
+ },
57
+ type: {
58
+ '0%': { width: '0' },
59
+ '100%': { width: '100%' }
60
+ }
61
+ }
62
+ }
63
+ }
64
+ }
65
+ </script>
66
+ <style>
67
+ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
68
+
69
+ * {
70
+ margin: 0;
71
+ padding: 0;
72
+ box-sizing: border-box;
73
+ }
74
+
75
+ :root {
76
+ --vault-glow: 0 0 20px rgba(0, 212, 170, 0.3);
77
+ --vault-glow-strong: 0 0 40px rgba(0, 212, 170, 0.5);
78
+ }
79
+
80
+ body {
81
+ font-family: 'Inter', sans-serif;
82
+ background: #0a0a0f;
83
+ color: #e0e0e0;
84
+ overflow: hidden;
85
+ height: 100vh;
86
+ width: 100vw;
87
+ }
88
+
89
+ /* Custom Scrollbar */
90
+ ::-webkit-scrollbar {
91
+ width: 4px;
92
+ height: 4px;
93
+ }
94
+
95
+ ::-webkit-scrollbar-track {
96
+ background: transparent;
97
+ }
98
+
99
+ ::-webkit-scrollbar-thumb {
100
+ background: #00d4aa40;
101
+ border-radius: 2px;
102
+ }
103
+
104
+ ::-webkit-scrollbar-thumb:hover {
105
+ background: #00d4aa80;
106
+ }
107
+
108
+ /* Matrix Rain Effect */
109
+ .matrix-bg {
110
+ position: fixed;
111
+ top: 0;
112
+ left: 0;
113
+ width: 100%;
114
+ height: 100%;
115
+ pointer-events: none;
116
+ z-index: 0;
117
+ opacity: 0.03;
118
+ }
119
+
120
+ .matrix-column {
121
+ position: absolute;
122
+ top: -100%;
123
+ font-family: 'JetBrains Mono', monospace;
124
+ font-size: 14px;
125
+ color: #00d4aa;
126
+ white-space: nowrap;
127
+ animation: matrixFall linear infinite;
128
+ }
129
+
130
+ @keyframes matrixFall {
131
+ 0% { transform: translateY(0); }
132
+ 100% { transform: translateY(200vh); }
133
+ }
134
+
135
+ /* Calculator Styles */
136
+ .calc-btn {
137
+ transition: all 0.15s ease;
138
+ position: relative;
139
+ overflow: hidden;
140
+ }
141
+
142
+ .calc-btn::after {
143
+ content: '';
144
+ position: absolute;
145
+ top: 50%;
146
+ left: 50%;
147
+ width: 0;
148
+ height: 0;
149
+ background: rgba(255,255,255,0.1);
150
+ border-radius: 50%;
151
+ transform: translate(-50%, -50%);
152
+ transition: width 0.3s, height 0.3s;
153
+ }
154
+
155
+ .calc-btn:active::after {
156
+ width: 100%;
157
+ height: 100%;
158
+ }
159
+
160
+ .calc-btn:active {
161
+ transform: scale(0.95);
162
+ }
163
+
164
+ .calc-display {
165
+ font-family: 'JetBrains Mono', monospace;
166
+ background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
167
+ box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
168
+ }
169
+
170
+ /* Secret Code Entry */
171
+ .secret-dot {
172
+ width: 12px;
173
+ height: 12px;
174
+ border-radius: 50%;
175
+ border: 2px solid #00d4aa60;
176
+ transition: all 0.2s ease;
177
+ }
178
+
179
+ .secret-dot.filled {
180
+ background: #00d4aa;
181
+ border-color: #00d4aa;
182
+ box-shadow: 0 0 10px #00d4aa;
183
+ }
184
+
185
+ .secret-dot.error {
186
+ background: #ff4757;
187
+ border-color: #ff4757;
188
+ box-shadow: 0 0 10px #ff4757;
189
+ animation: shake 0.3s ease-in-out;
190
+ }
191
+
192
+ /* Chat Bubbles */
193
+ .chat-bubble {
194
+ max-width: 80%;
195
+ padding: 12px 16px;
196
+ border-radius: 16px;
197
+ position: relative;
198
+ animation: slideUp 0.2s ease-out;
199
+ word-wrap: break-word;
200
+ }
201
+
202
+ .chat-bubble.sent {
203
+ background: linear-gradient(135deg, #00a884 0%, #00d4aa 100%);
204
+ color: #fff;
205
+ margin-left: auto;
206
+ border-bottom-right-radius: 4px;
207
+ }
208
+
209
+ .chat-bubble.received {
210
+ background: #1e1e2e;
211
+ color: #e0e0e0;
212
+ border-bottom-left-radius: 4px;
213
+ }
214
+
215
+ .chat-bubble.encrypted::before {
216
+ content: '🔒';
217
+ position: absolute;
218
+ top: -8px;
219
+ right: -8px;
220
+ font-size: 12px;
221
+ background: #0a0a0f;
222
+ border-radius: 50%;
223
+ width: 20px;
224
+ height: 20px;
225
+ display: flex;
226
+ align-items: center;
227
+ justify-content: center;
228
+ }
229
+
230
+ /* Media Cards */
231
+ .media-card {
232
+ transition: all 0.3s ease;
233
+ cursor: pointer;
234
+ }
235
+
236
+ .media-card:hover {
237
+ transform: translateY(-4px);
238
+ box-shadow: 0 8px 32px rgba(0, 212, 170, 0.15);
239
+ }
240
+
241
+ .media-card .overlay {
242
+ opacity: 0;
243
+ transition: opacity 0.3s ease;
244
+ }
245
+
246
+ .media-card:hover .overlay {
247
+ opacity: 1;
248
+ }
249
+
250
+ /* File Drop Zone */
251
+ .drop-zone {
252
+ border: 2px dashed #00d4aa40;
253
+ transition: all 0.3s ease;
254
+ }
255
+
256
+ .drop-zone.dragover {
257
+ border-color: #00d4aa;
258
+ background: #00d4aa10;
259
+ }
260
+
261
+ /* Progress Ring */
262
+ .progress-ring {
263
+ transform: rotate(-90deg);
264
+ }
265
+
266
+ .progress-ring-circle {
267
+ transition: stroke-dashoffset 0.3s ease;
268
+ }
269
+
270
+ /* Typing Indicator */
271
+ .typing-dot {
272
+ width: 8px;
273
+ height: 8px;
274
+ border-radius: 50%;
275
+ background: #00d4aa;
276
+ animation: typingBounce 1.4s ease-in-out infinite;
277
+ }
278
+
279
+ .typing-dot:nth-child(2) { animation-delay: 0.2s; }
280
+ .typing-dot:nth-child(3) { animation-delay: 0.4s; }
281
+
282
+ @keyframes typingBounce {
283
+ 0%, 60%, 100% { transform: translateY(0); }
284
+ 30% { transform: translateY(-10px); }
285
+ }
286
+
287
+ /* Scan Line Effect */
288
+ .scan-line {
289
+ position: absolute;
290
+ top: 0;
291
+ left: 0;
292
+ right: 0;
293
+ height: 2px;
294
+ background: linear-gradient(90deg, transparent, #00d4aa, transparent);
295
+ animation: scan 3s linear infinite;
296
+ pointer-events: none;
297
+ }
298
+
299
+ /* Glass Effect */
300
+ .glass {
301
+ background: rgba(18, 18, 26, 0.8);
302
+ backdrop-filter: blur(20px);
303
+ -webkit-backdrop-filter: blur(20px);
304
+ }
305
+
306
+ .glass-light {
307
+ background: rgba(255, 255, 255, 0.05);
308
+ backdrop-filter: blur(10px);
309
+ -webkit-backdrop-filter: blur(10px);
310
+ }
311
+
312
+ /* Toggle Switch */
313
+ .toggle-switch {
314
+ width: 48px;
315
+ height: 26px;
316
+ border-radius: 13px;
317
+ background: #2a2a3e;
318
+ position: relative;
319
+ cursor: pointer;
320
+ transition: background 0.3s ease;
321
+ }
322
+
323
+ .toggle-switch.active {
324
+ background: #00d4aa;
325
+ }
326
+
327
+ .toggle-switch::after {
328
+ content: '';
329
+ position: absolute;
330
+ top: 3px;
331
+ left: 3px;
332
+ width: 20px;
333
+ height: 20px;
334
+ border-radius: 50%;
335
+ background: #fff;
336
+ transition: transform 0.3s ease;
337
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
338
+ }
339
+
340
+ .toggle-switch.active::after {
341
+ transform: translateX(22px);
342
+ }
343
+
344
+ /* Ripple Effect */
345
+ .ripple {
346
+ position: absolute;
347
+ border-radius: 50%;
348
+ background: rgba(0, 212, 170, 0.3);
349
+ transform: scale(0);
350
+ animation: rippleEffect 0.6s ease-out;
351
+ pointer-events: none;
352
+ }
353
+
354
+ @keyframes rippleEffect {
355
+ to {
356
+ transform: scale(4);
357
+ opacity: 0;
358
+ }
359
+ }
360
+
361
+ /* Toast Notification */
362
+ .toast {
363
+ animation: slideUp 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
364
+ }
365
+
366
+ @keyframes fadeOut {
367
+ to { opacity: 0; transform: translateY(-20px); }
368
+ }
369
+
370
+ /* Selection highlight */
371
+ ::selection {
372
+ background: #00d4aa40;
373
+ color: #fff;
374
+ }
375
+
376
+ /* Input focus glow */
377
+ input:focus, textarea:focus {
378
+ outline: none;
379
+ box-shadow: 0 0 0 2px #00d4aa40;
380
+ }
381
+
382
+ /* Mobile optimizations */
383
+ @media (max-width: 768px) {
384
+ .chat-bubble {
385
+ max-width: 90%;
386
+ }
387
+ }
388
+
389
+ /* Desktop sidebar */
390
+ .sidebar-desktop {
391
+ width: 320px;
392
+ min-width: 320px;
393
+ }
394
+
395
+ /* Context Menu */
396
+ .context-menu {
397
+ animation: fadeIn 0.1s ease-out;
398
+ }
399
+
400
+ /* Audio Waveform */
401
+ .audio-bar {
402
+ width: 3px;
403
+ background: #00d4aa;
404
+ border-radius: 2px;
405
+ animation: audioWave 1s ease-in-out infinite;
406
+ }
407
+
408
+ @keyframes audioWave {
409
+ 0%, 100% { height: 8px; }
410
+ 50% { height: 24px; }
411
+ }
412
+
413
+ /* Password strength */
414
+ .strength-segment {
415
+ height: 4px;
416
+ border-radius: 2px;
417
+ transition: all 0.3s ease;
418
+ }
419
+
420
+ /* Custom checkbox */
421
+ .check-custom {
422
+ width: 20px;
423
+ height: 20px;
424
+ border: 2px solid #00d4aa60;
425
+ border-radius: 6px;
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ transition: all 0.2s ease;
430
+ cursor: pointer;
431
+ }
432
+
433
+ .check-custom.checked {
434
+ background: #00d4aa;
435
+ border-color: #00d4aa;
436
+ }
437
+
438
+ /* Tooltip */
439
+ .tooltip {
440
+ position: relative;
441
+ }
442
+
443
+ .tooltip::after {
444
+ content: attr(data-tip);
445
+ position: absolute;
446
+ bottom: 100%;
447
+ left: 50%;
448
+ transform: translateX(-50%) translateY(-8px);
449
+ padding: 6px 12px;
450
+ background: #1e1e2e;
451
+ border-radius: 8px;
452
+ font-size: 12px;
453
+ white-space: nowrap;
454
+ opacity: 0;
455
+ pointer-events: none;
456
+ transition: all 0.2s ease;
457
+ box-shadow: 0 4px 12px rgba(0,0,0,0.3);
458
+ }
459
+
460
+ .tooltip:hover::after {
461
+ opacity: 1;
462
+ transform: translateX(-50%) translateY(-4px);
463
+ }
464
+
465
+ /* Loading Skeleton */
466
+ .skeleton {
467
+ background: linear-gradient(90deg, #1e1e2e 25%, #2a2a3e 50%, #1e1e2e 75%);
468
+ background-size: 200% 100%;
469
+ animation: skeletonLoad 1.5s ease-in-out infinite;
470
+ }
471
+
472
+ @keyframes skeletonLoad {
473
+ 0% { background-position: 200% 0; }
474
+ 100% { background-position: -200% 0; }
475
+ }
476
+
477
+ /* Notification badge */
478
+ .badge-pulse {
479
+ animation: badgePulse 2s ease-in-out infinite;
480
+ }
481
+
482
+ @keyframes badgePulse {
483
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); }
484
+ 50% { box-shadow: 0 0 0 8px rgba(255, 71, 87, 0); }
485
+ }
486
+
487
+ /* Swipe indicator */
488
+ .swipe-hint {
489
+ animation: swipeHint 2s ease-in-out infinite;
490
+ }
491
+
492
+ @keyframes swipeHint {
493
+ 0%, 100% { transform: translateX(0); opacity: 0.5; }
494
+ 50% { transform: translateX(10px); opacity: 1; }
495
+ }
496
+ </style>
497
+ </head>
498
+ <body>
499
+ <!-- Matrix Background -->
500
+ <canvas id="matrixCanvas" class="matrix-bg"></canvas>
501
+
502
+ <!-- APP CONTAINER -->
503
+ <div id="app" class="relative z-10 h-screen w-screen overflow-hidden">
504
+
505
+ <!-- ==================== SCREEN: CALCULATOR DECOY ==================== -->
506
+ <div id="screenCalculator" class="h-full w-full flex flex-col items-center justify-center p-4">
507
+ <div class="w-full max-w-sm">
508
+ <!-- Calculator Header -->
509
+ <div class="text-center mb-6">
510
+ <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-light">
511
+ <i class="fas fa-calculator text-vault-accent text-sm"></i>
512
+ <span class="text-xs text-gray-400 font-mono">Standard Calculator</span>
513
+ </div>
514
+ </div>
515
+
516
+ <!-- Calculator Body -->
517
+ <div class="glass rounded-3xl p-4 shadow-2xl" style="box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), var(--vault-glow);">
518
+ <!-- Display -->
519
+ <div class="calc-display rounded-2xl p-4 mb-4 min-h-[100px] flex flex-col justify-end">
520
+ <div id="calcHistory" class="text-gray-500 text-sm font-mono text-right mb-1 min-h-[20px]"></div>
521
+ <div id="calcDisplay" class="text-white text-4xl font-mono text-right font-light tracking-wider">0</div>
522
+ </div>
523
+
524
+ <!-- Keypad -->
525
+ <div class="grid grid-cols-4 gap-3">
526
+ <!-- Row 1 -->
527
+ <button class="calc-btn rounded-2xl p-4 text-vault-danger font-semibold text-lg bg-vault-card hover:bg-vault-danger/20" onclick="calcClear()">AC</button>
528
+ <button class="calc-btn rounded-2xl p-4 text-vault-warn font-semibold text-lg bg-vault-card hover:bg-vault-warn/20" onclick="calcToggleSign()">+/-</button>
529
+ <button class="calc-btn rounded-2xl p-4 text-vault-warn font-semibold text-lg bg-vault-card hover:bg-vault-warn/20" onclick="calcPercent()">%</button>
530
+ <button class="calc-btn rounded-2xl p-4 text-vault-accent font-semibold text-xl bg-vault-card hover:bg-vault-accent/20" onclick="calcOperator('/')">÷</button>
531
+
532
+ <!-- Row 2 -->
533
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('7')">7</button>
534
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('8')">8</button>
535
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('9')">9</button>
536
+ <button class="calc-btn rounded-2xl p-4 text-vault-accent font-semibold text-xl bg-vault-card hover:bg-vault-accent/20" onclick="calcOperator('*')">×</button>
537
+
538
+ <!-- Row 3 -->
539
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('4')">4</button>
540
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('5')">5</button>
541
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('6')">6</button>
542
+ <button class="calc-btn rounded-2xl p-4 text-vault-accent font-semibold text-xl bg-vault-card hover:bg-vault-accent/20" onclick="calcOperator('-')">−</button>
543
+
544
+ <!-- Row 4 -->
545
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('1')">1</button>
546
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('2')">2</button>
547
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('3')">3</button>
548
+ <button class="calc-btn rounded-2xl p-4 text-vault-accent font-semibold text-xl bg-vault-card hover:bg-vault-accent/20" onclick="calcOperator('+')">+</button>
549
+
550
+ <!-- Row 5 -->
551
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10 col-span-2" onclick="calcNumber('0')">0</button>
552
+ <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcDecimal()">.</button>
553
+ <button class="calc-btn rounded-2xl p-4 text-white font-semibold text-xl bg-vault-accent hover:bg-vault-accent-dim" onclick="calcEquals()">=</button>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Hidden Secret Indicator -->
558
+ <div class="mt-4 flex justify-center gap-2" id="secretDots">
559
+ <div class="secret-dot" id="dot0"></div>
560
+ <div class="secret-dot" id="dot1"></div>
561
+ <div class="secret-dot" id="dot2"></div>
562
+ <div class="secret-dot" id="dot3"></div>
563
+ </div>
564
+ <p class="text-center text-gray-600 text-xs mt-2 font-mono" id="secretHint">Tap logo 3x for settings</p>
565
+
566
+ <!-- Built with anycoder -->
567
+ <div class="mt-6 text-center">
568
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-gray-500 text-xs hover:text-vault-accent transition-colors">
569
+ Built with <span class="text-vault-accent">anycoder</span>
570
+ </a>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- ==================== SCREEN: PASSWORD ENTRY ==================== -->
576
+ <div id="screenPassword" class="hidden h-full w-full flex flex-col items-center justify-center p-4">
577
+ <div class="w-full max-w-sm">
578
+ <!-- Lock Icon -->
579
+ <div class="text-center mb-8">
580
+ <div class="inline-flex items-center justify-center w-20 h-20 rounded-3xl glass mb-4" style="box-shadow: var(--vault-glow);">
581
+ <i class="fas fa-shield-halved text-3xl text-vault-accent"></i>
582
+ </div>
583
+ <h2 class="text-2xl font-bold text-white mb-1">SecureVault</h2>
584
+ <p class="text-gray-400 text-sm">End-to-End Encrypted</p>
585
+ </div>
586
+
587
+ <!-- Password Input -->
588
+ <div class="glass rounded-2xl p-6 mb-4">
589
+ <label class="text-xs text-gray-400 uppercase tracking-wider mb-2 block">Passphrase</label>
590
+ <div class="relative">
591
+ <input type="password" id="passwordInput" class="w-full bg-vault-darker rounded-xl px-4 py-3 text-white font-mono text-lg border border-transparent focus:border-vault-accent transition-all" placeholder="Enter passphrase..." onkeypress="if(event.key==='Enter')checkPassword()">
592
+ <button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-vault-accent transition-colors" onclick="togglePasswordVisibility()">
593
+ <i class="fas fa-eye" id="eyeIcon"></i>
594
+ </button>
595
+ </div>
596
+ <div class="flex gap-1 mt-3" id="strengthBar">
597
+ <div class="strength-segment flex-1 bg-gray-700 rounded"></div>
598
+ <div class="strength-segment flex-1 bg-gray-700 rounded"></div>
599
+ <div class="strength-segment flex-1 bg-gray-700 rounded"></div>
600
+ <div class="strength-segment flex-1 bg-gray-700 rounded"></div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Biometric Option (Mock) -->
605
+ <button class="w-full glass-light rounded-2xl p-4 mb-4 flex items-center justify-center gap-3 hover:bg-white/10 transition-all" onclick="mockBiometric()">
606
+ <i class="fas fa-fingerprint text-vault-accent text-xl"></i>
607
+ <span class="text-sm text-gray-300">Biometric Unlock</span>
608
+ </button>
609
+
610
+ <!-- Unlock Button -->
611
+ <button class="w-full bg-vault-accent hover:bg-vault-accent-dim text-vault-darker font-semibold rounded-2xl py-4 transition-all transform active:scale-95" onclick="checkPassword()">
612
+ <i class="fas fa-unlock mr-2"></i>Unlock Vault
613
+ </button>
614
+
615
+ <!-- Back to Calculator -->
616
+ <button class="w-full mt-4 text-gray-500 text-sm hover:text-gray-300 transition-colors" onclick="showCalculator()">
617
+ <i class="fas fa-arrow-left mr-1"></i> Back to Calculator
618
+ </button>
619
+
620
+ <div class="mt-6 text-center">
621
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-gray-500 text-xs hover:text-vault-accent transition-colors">
622
+ Built with <span class="text-vault-accent">anycoder</span>
623
+ </a>
624
+ </div>
625
+ </div>
626
+ </div>
627
+
628
+ <!-- ==================== SCREEN: MAIN APP ==================== -->
629
+ <div id="screenMain" class="hidden h-full w-full flex">
630
+
631
+ <!-- Desktop Sidebar -->
632
+ <div class="sidebar-desktop hidden md:flex flex-col glass border-r border-white/5">
633
+ <!-- Sidebar Header -->
634
+ <div class="p-4 border-b border-white/5">
635
+ <div class="flex items-center gap-3 mb-4">
636
+ <div class="w-10 h-10 rounded-xl bg-vault-accent flex items-center justify-center">
637
+ <i class="fas fa-shield-halved text-vault-darker text-lg"></i>
638
+ </div>
639
+ <div>
640
+ <h1 class="font-bold text-white">SecureVault</h1>
641
+ <p class="text-xs text-vault-accent">● Online</p>
642
+ </div>
643
+ </div>
644
+ <div class="relative">
645
+ <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
646
+ <input type="text" placeholder="Search vault..." class="w-full bg-vault-darker rounded-xl pl-9 pr-4 py-2 text-sm text-white placeholder-gray-500 border border-transparent focus:border-vault-accent/50 transition-all">
647
+ </div>
648
+ </div>
649
+
650
+ <!-- Navigation -->
651
+ <nav class="flex-1 overflow-y-auto p-2">
652
+ <div class="text-xs text-gray-500 uppercase tracking-wider px-3 py-2">Chats</div>
653
+ <div id="sidebarChats" class="space-y-1"></div>
654
+
655
+ <div class="text-xs text-gray-500 uppercase tracking-wider px-3 py-2 mt-4">Gallery</div>
656
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all" onclick="switchTab('gallery')">
657
+ <i class="fas fa-images w-5"></i>
658
+ <span class="text-sm">All Media</span>
659
+ </button>
660
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all" onclick="switchTab('gallery-photos')">
661
+ <i class="fas fa-camera w-5"></i>
662
+ <span class="text-sm">Photos</span>
663
+ </button>
664
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all" onclick="switchTab('gallery-videos')">
665
+ <i class="fas fa-video w-5"></i>
666
+ <span class="text-sm">Videos</span>
667
+ </button>
668
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all" onclick="switchTab('gallery-music')">
669
+ <i class="fas fa-music w-5"></i>
670
+ <span class="text-sm">Music</span>
671
+ </button>
672
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all" onclick="switchTab('gallery-docs')">
673
+ <i class="fas fa-file-alt w-5"></i>
674
+ <span class="text-sm">Documents</span>
675
+ </button>
676
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all" onclick="switchTab('gallery-links')">
677
+ <i class="fas fa-link w-5"></i>
678
+ <span class="text-sm">Links</span>
679
+ </button>
680
+ </nav>
681
+
682
+ <!-- Sidebar Footer -->
683
+ <div class="p-4 border-t border-white/5">
684
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-vault-danger hover:bg-vault-danger/10 transition-all" onclick="lockVault()">
685
+ <i class="fas fa-lock w-5"></i>
686
+ <span class="text-sm">Lock Vault</span>
687
+ </button>
688
+ <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all" onclick="showSettings()">
689
+ <i class="fas fa-cog w-5"></i>
690
+ <span class="text-sm">Settings</span>
691
+ </button>
692
+ </div>
693
+ </div>
694
+
695
+ <!-- Main Content Area -->
696
+ <div class="flex-1 flex flex-col h-full overflow-hidden">
697
+
698
+ <!-- Mobile Header -->
699
+ <div class="md:hidden glass flex items-center justify-between p-3 border-b border-white/5">
700
+ <div class="flex items-center gap-3">
701
+ <button class="w-10 h-10 rounded-xl bg-vault-accent flex items-center justify-center" onclick="showMobileMenu()">
702
+ <i class="fas fa-shield-halved text-vault-darker"></i>
703
+ </button>
704
+ <div>
705
+ <h1 class="font-bold text-white text-sm">SecureVault</h1>
706
+ <p class="text-xs text-vault-accent">● Online</p>
707
+ </div>
708
+ </div>
709
+ <div class="flex items-center gap-2">
710
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-white transition-colors" onclick="showSearch()">
711
+ <i class="fas fa-search"></i>
712
+ </button>
713
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-white transition-colors" onclick="showMobileMenu()">
714
+ <i class="fas fa-bars"></i>
715
+ </button>
716
+ </div>
717
+ </div>
718
+
719
+ <!-- Content Container -->
720
+ <div id="mainContent" class="flex-1 overflow-hidden relative">
721
+
722
+ <!-- CHAT VIEW -->
723
+ <div id="viewChat" class="h-full flex flex-col">
724
+ <!-- Chat Header -->
725
+ <div class="glass p-3 md:p-4 border-b border-white/5 flex items-center justify-between">
726
+ <div class="flex items-center gap-3">
727
+ <button class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400" onclick="showChatList()">
728
+ <i class="fas fa-arrow-left"></i>
729
+ </button>
730
+ <div class="relative">
731
+ <img id="chatAvatar" src="" class="w-10 h-10 rounded-xl object-cover" alt="">
732
+ <div id="chatOnline" class="absolute -bottom-1 -right-1 w-3 h-3 bg-vault-accent rounded-full border-2 border-vault-dark"></div>
733
+ </div>
734
+ <div>
735
+ <h3 id="chatName" class="font-semibold text-white text-sm">Select a chat</h3>
736
+ <p id="chatStatus" class="text-xs text-gray-400">Tap to view info</p>
737
+ </div>
738
+ </div>
739
+ <div class="flex items-center gap-2">
740
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-vault-accent transition-colors tooltip" data-tip="Voice Call" onclick="mockCall()">
741
+ <i class="fas fa-phone"></i>
742
+ </button>
743
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-vault-accent transition-colors tooltip" data-tip="Video Call" onclick="mockCall()">
744
+ <i class="fas fa-video"></i>
745
+ </button>
746
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-white transition-colors" onclick="showChatMenu()">
747
+ <i class="fas fa-ellipsis-v"></i>
748
+ </button>
749
+ </div>
750
+ </div>
751
+
752
+ <!-- Messages Area -->
753
+ <div id="messagesArea" class="flex-1 overflow-y-auto p-4 space-y-3">
754
+ <!-- Messages injected by JS -->
755
+ </div>
756
+
757
+ <!-- Typing Indicator -->
758
+ <div id="typingIndicator" class="hidden px-4 py-2">
759
+ <div class="flex items-center gap-2 text-xs text-gray-400">
760
+ <div class="flex gap-1">
761
+ <div class="typing-dot"></div>
762
+ <div class="typing-dot"></div>
763
+ <div class="typing-dot"></div>
764
+ </div>
765
+ <span id="typingName">Someone is typing...</span>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- Input Area -->
770
+ <div class="glass p-3 md:p-4 border-t border-white/5">
771
+ <div class="flex items-end gap-2">
772
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-vault-accent transition-colors shrink-0" onclick="showAttachmentMenu()">
773
+ <i class="fas fa-plus"></i>
774
+ </button>
775
+ <div class="flex-1 relative">
776
+ <textarea id="messageInput" rows="1" class="w-full bg-vault-darker rounded-xl px-4 py-2.5 text-sm text-white placeholder-gray-500 resize-none border border-transparent focus:border-vault-accent/50 transition-all max-h-[120px]" placeholder="Type encrypted message..." oninput="autoResize(this)" onkeypress="handleMessageKey(event)"></textarea>
777
+ </div>
778
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-vault-warn transition-colors shrink-0" onclick="toggleEncrypt()">
779
+ <i class="fas fa-lock" id="encryptIcon"></i>
780
+ </button>
781
+ <button class="w-10 h-10 rounded-xl bg-vault-accent flex items-center justify-center text-vault-darker hover:bg-vault-accent-dim transition-colors shrink-0" onclick="sendMessage()">
782
+ <i class="fas fa-paper-plane"></i>
783
+ </button>
784
+ </div>
785
+ </div>
786
+ </div>
787
+
788
+ <!-- CHAT LIST VIEW (Mobile) -->
789
+ <div id="viewChatList" class="hidden h-full flex-col md:hidden">
790
+ <div class="glass p-4 border-b border-white/5">
791
+ <div class="relative">
792
+ <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
793
+ <input type="text" placeholder="Search chats..." class="w-full bg-vault-darker rounded-xl pl-9 pr-4 py-2.5 text-sm text-white placeholder-gray-500 border border-transparent focus:border-vault-accent/50 transition-all">
794
+ </div>
795
+ </div>
796
+ <div id="mobileChatList" class="flex-1 overflow-y-auto p-2 space-y-1"></div>
797
+ <div class="glass p-4 border-t border-white/5 flex justify-around">
798
+ <button class="flex flex-col items-center gap-1 text-vault-accent" onclick="showChatList()">
799
+ <i class="fas fa-comment text-lg"></i>
800
+ <span class="text-xs">Chats</span>
801
+ </button>
802
+ <button class="flex flex-col items-center gap-1 text-gray-400 hover:text-white" onclick="switchTab('gallery')">
803
+ <i class="fas fa-images text-lg"></i>
804
+ <span class="text-xs">Gallery</span>
805
+ </button>
806
+ <button class="flex flex-col items-center gap-1 text-gray-400 hover:text-white" onclick="showSettings()">
807
+ <i class="fas fa-cog text-lg"></i>
808
+ <span class="text-xs">Settings</span>
809
+ </button>
810
+ </div>
811
+ </div>
812
+
813
+ <!-- GALLERY VIEW -->
814
+ <div id="viewGallery" class="hidden h-full flex-col">
815
+ <!-- Gallery Header -->
816
+ <div class="glass p-3 md:p-4 border-b border-white/5 flex items-center justify-between">
817
+ <div class="flex items-center gap-3">
818
+ <button class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400" onclick="backToChats()">
819
+ <i class="fas fa-arrow-left"></i>
820
+ </button>
821
+ <h2 id="galleryTitle" class="font-semibold text-white">Gallery</h2>
822
+ </div>
823
+ <div class="flex items-center gap-2">
824
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-vault-accent transition-colors" onclick="showUploadModal()">
825
+ <i class="fas fa-cloud-upload-alt"></i>
826
+ </button>
827
+ <button class="w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400 hover:text-white transition-colors" onclick="showGalleryFilter()">
828
+ <i class="fas fa-filter"></i>
829
+ </button>
830
+ </div>
831
+ </div>
832
+
833
+ <!-- Gallery Grid -->
834
+ <div id="galleryGrid" class="flex-1 overflow-y-auto p-4">
835
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3" id="galleryContent"></div>
836
+ </div>
837
+ </div>
838
+
839
+ <!-- SETTINGS VIEW -->
840
+ <div id="viewSettings" class="hidden h-full flex-col overflow-y-auto">
841
+ <div class="glass p-3 md:p-4 border-b border-white/5 flex items-center gap-3 sticky top-0 z-10">
842
+ <button class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400" onclick="backToChats()">
843
+ <i class="fas fa-arrow-left"></i>
844
+ </button>
845
+ <h2 class="font-semibold text-white">Settings</h2>
846
+ </div>
847
+
848
+ <div class="p-4 space-y-6 max-w-2xl">
849
+ <!-- Profile Section -->
850
+ <div class="glass rounded-2xl p-6">
851
+ <div class="flex items-center gap-4 mb-6">
852
+ <div class="relative">
853
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" class="w-16 h-16 rounded-2xl object-cover" alt="Profile">
854
+ <button class="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg bg-vault-accent flex items-center justify-center text-vault-darker">
855
+ <i class="fas fa-camera text-xs"></i>
856
+ </button>
857
+ </div>
858
+ <div>
859
+ <h3 class="font-semibold text-white">You</h3>
860
+ <p class="text-sm text-gray-400">@secure_user</p>
861
+ </div>
862
+ </div>
863
+ </div>
864
+
865
+ <!-- Security Section -->
866
+ <div class="glass rounded-2xl p-6">
867
+ <h4 class="text-sm font-semibold text-vault-accent uppercase tracking-wider mb-4">Security</h4>
868
+ <div class="space-y-4">
869
+ <div class="flex items-center justify-between">
870
+ <div>
871
+ <p class="text-sm text-white font-medium">End-to-End Encryption</p>
872
+ <p class="text-xs text-gray-400">All messages are encrypted</p>
873
+ </div>
874
+ <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
875
+ </div>
876
+ <div class="flex items-center justify-between">
877
+ <div>
878
+ <p class="text-sm text-white font-medium">Self-Destruct Timer</p>
879
+ <p class="text-xs text-gray-400">Auto-delete after reading</p>
880
+ </div>
881
+ <div class="toggle-switch" onclick="this.classList.toggle('active')"></div>
882
+ </div>
883
+ <div class="flex items-center justify-between">
884
+ <div>
885
+ <p class="text-sm text-white font-medium">Screenshot Protection</p>
886
+ <p class="text-xs text-gray-400">Block screenshots in app</p>
887
+ </div>
888
+ <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
889
+ </div>
890
+ <div class="flex items-center justify-between">
891
+ <div>
892
+ <p class="text-sm text-white font-medium">Biometric Lock</p>
893
+ <p class="text-xs text-gray-400">Require fingerprint/face</p>
894
+ </div>
895
+ <div class="toggle-switch" onclick="this.classList.toggle('active')"></div>
896
+ </div>
897
+ </div>
898
+ </div>
899
+
900
+ <!-- Privacy Section -->
901
+ <div class="glass rounded-2xl p-6">
902
+ <h4 class="text-sm font-semibold text-vault-accent uppercase tracking-wider mb-4">Privacy</h4>
903
+ <div class="space-y-4">
904
+ <div class="flex items-center justify-between">
905
+ <div>
906
+ <p class="text-sm text-white font-medium">Online Status</p>
907
+ <p class="text-xs text-gray-400">Show when you're active</p>
908
+ </div>
909
+ <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
910
+ </div>
911
+ <div class="flex items-center justify-between">
912
+ <div>
913
+ <p class="text-sm text-white font-medium">Read Receipts</p>
914
+ <p class="text-xs text-gray-400">Let others see when you read</p>
915
+ </div>
916
+ <div class="toggle-switch" onclick="this.classList.toggle('active')"></div>
917
+ </div>
918
+ </div>
919
+ </div>
920
+
921
+ <!-- Danger Zone -->
922
+ <div class="glass rounded-2xl p-6 border border-vault-danger/30">
923
+ <h4 class="text-sm font-semibold text-vault-danger uppercase tracking-wider mb-4">Danger Zone</h4>
924
+ <div class="space-y-3">
925
+ <button class="w-full py-3 rounded-xl bg-vault-danger/10 text-vault-danger text-sm font-medium hover:bg-vault-danger/20 transition-all" onclick="clearAllData()">
926
+ <i class="fas fa-trash-alt mr-2"></i>Clear All Data
927
+ </button>
928
+ <button class="w-full py-3 rounded-xl bg-vault-danger/10 text-vault-danger text-sm font-medium hover:bg-vault-danger/20 transition-all" onclick="lockVault()">
929
+ <i class="fas fa-lock mr-2"></i>Lock & Exit
930
+ </button>
931
+ </div>
932
+ </div>
933
+
934
+ <!-- App Info -->
935
+ <div class="text-center pb-8">
936
+ <p class="text-xs text-gray-500 mb-2">SecureVault v2.1.0</p>
937
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-gray-500 text-xs hover:text-vault-accent transition-colors">
938
+ Built with <span class="text-vault-accent">anycoder</span>
939
+ </a>
940
+ </