Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>SecureVault - Private Exchange</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'vault-dark': '#0a0a0f', | |
| 'vault-darker': '#050508', | |
| 'vault-card': '#12121a', | |
| 'vault-accent': '#00d4aa', | |
| 'vault-accent-dim': '#00a884', | |
| 'vault-danger': '#ff4757', | |
| 'vault-warn': '#ffa502', | |
| 'vault-info': '#3742fa' | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'slide-up': 'slideUp 0.3s ease-out', | |
| 'fade-in': 'fadeIn 0.2s ease-out', | |
| 'shake': 'shake 0.5s ease-in-out', | |
| 'glitch': 'glitch 0.3s ease-in-out', | |
| 'scan': 'scan 2s linear infinite', | |
| 'type': 'type 0.8s steps(20) forwards' | |
| }, | |
| keyframes: { | |
| slideUp: { | |
| '0%': { transform: 'translateY(100%)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' } | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' } | |
| }, | |
| shake: { | |
| '0%, 100%': { transform: 'translateX(0)' }, | |
| '25%': { transform: 'translateX(-10px)' }, | |
| '75%': { transform: 'translateX(10px)' } | |
| }, | |
| glitch: { | |
| '0%, 100%': { transform: 'translate(0)' }, | |
| '20%': { transform: 'translate(-2px, 2px)' }, | |
| '40%': { transform: 'translate(2px, -2px)' }, | |
| '60%': { transform: 'translate(-2px, -2px)' }, | |
| '80%': { transform: 'translate(2px, 2px)' } | |
| }, | |
| scan: { | |
| '0%': { transform: 'translateY(-100%)' }, | |
| '100%': { transform: 'translateY(100vh)' } | |
| }, | |
| type: { | |
| '0%': { width: '0' }, | |
| '100%': { width: '100%' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @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'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --vault-glow: 0 0 20px rgba(0, 212, 170, 0.3); | |
| --vault-glow-strong: 0 0 40px rgba(0, 212, 170, 0.5); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: #0a0a0f; | |
| color: #e0e0e0; | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 4px; | |
| height: 4px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #00d4aa40; | |
| border-radius: 2px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #00d4aa80; | |
| } | |
| /* Matrix Rain Effect */ | |
| .matrix-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.03; | |
| } | |
| .matrix-column { | |
| position: absolute; | |
| top: -100%; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| color: #00d4aa; | |
| white-space: nowrap; | |
| animation: matrixFall linear infinite; | |
| } | |
| @keyframes matrixFall { | |
| 0% { transform: translateY(0); } | |
| 100% { transform: translateY(200vh); } | |
| } | |
| /* Calculator Styles */ | |
| .calc-btn { | |
| transition: all 0.15s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .calc-btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| transition: width 0.3s, height 0.3s; | |
| } | |
| .calc-btn:active::after { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .calc-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .calc-display { | |
| font-family: 'JetBrains Mono', monospace; | |
| background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%); | |
| box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); | |
| } | |
| /* Secret Code Entry */ | |
| .secret-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| border: 2px solid #00d4aa60; | |
| transition: all 0.2s ease; | |
| } | |
| .secret-dot.filled { | |
| background: #00d4aa; | |
| border-color: #00d4aa; | |
| box-shadow: 0 0 10px #00d4aa; | |
| } | |
| .secret-dot.error { | |
| background: #ff4757; | |
| border-color: #ff4757; | |
| box-shadow: 0 0 10px #ff4757; | |
| animation: shake 0.3s ease-in-out; | |
| } | |
| /* Chat Bubbles */ | |
| .chat-bubble { | |
| max-width: 80%; | |
| padding: 12px 16px; | |
| border-radius: 16px; | |
| position: relative; | |
| animation: slideUp 0.2s ease-out; | |
| word-wrap: break-word; | |
| } | |
| .chat-bubble.sent { | |
| background: linear-gradient(135deg, #00a884 0%, #00d4aa 100%); | |
| color: #fff; | |
| margin-left: auto; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .chat-bubble.received { | |
| background: #1e1e2e; | |
| color: #e0e0e0; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .chat-bubble.encrypted::before { | |
| content: '🔒'; | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| font-size: 12px; | |
| background: #0a0a0f; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Media Cards */ | |
| .media-card { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .media-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 32px rgba(0, 212, 170, 0.15); | |
| } | |
| .media-card .overlay { | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .media-card:hover .overlay { | |
| opacity: 1; | |
| } | |
| /* File Drop Zone */ | |
| .drop-zone { | |
| border: 2px dashed #00d4aa40; | |
| transition: all 0.3s ease; | |
| } | |
| .drop-zone.dragover { | |
| border-color: #00d4aa; | |
| background: #00d4aa10; | |
| } | |
| /* Progress Ring */ | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.3s ease; | |
| } | |
| /* Typing Indicator */ | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #00d4aa; | |
| animation: typingBounce 1.4s ease-in-out infinite; | |
| } | |
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typingBounce { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-10px); } | |
| } | |
| /* Scan Line Effect */ | |
| .scan-line { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #00d4aa, transparent); | |
| animation: scan 3s linear infinite; | |
| pointer-events: none; | |
| } | |
| /* Glass Effect */ | |
| .glass { | |
| background: rgba(18, 18, 26, 0.8); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| } | |
| .glass-light { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| } | |
| /* Toggle Switch */ | |
| .toggle-switch { | |
| width: 48px; | |
| height: 26px; | |
| border-radius: 13px; | |
| background: #2a2a3e; | |
| position: relative; | |
| cursor: pointer; | |
| transition: background 0.3s ease; | |
| } | |
| .toggle-switch.active { | |
| background: #00d4aa; | |
| } | |
| .toggle-switch::after { | |
| content: ''; | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #fff; | |
| transition: transform 0.3s ease; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| } | |
| .toggle-switch.active::after { | |
| transform: translateX(22px); | |
| } | |
| /* Ripple Effect */ | |
| .ripple { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(0, 212, 170, 0.3); | |
| transform: scale(0); | |
| animation: rippleEffect 0.6s ease-out; | |
| pointer-events: none; | |
| } | |
| @keyframes rippleEffect { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| animation: slideUp 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards; | |
| } | |
| @keyframes fadeOut { | |
| to { opacity: 0; transform: translateY(-20px); } | |
| } | |
| /* Selection highlight */ | |
| ::selection { | |
| background: #00d4aa40; | |
| color: #fff; | |
| } | |
| /* Input focus glow */ | |
| input:focus, textarea:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px #00d4aa40; | |
| } | |
| /* Mobile optimizations */ | |
| @media (max-width: 768px) { | |
| .chat-bubble { | |
| max-width: 90%; | |
| } | |
| } | |
| /* Desktop sidebar */ | |
| .sidebar-desktop { | |
| width: 320px; | |
| min-width: 320px; | |
| } | |
| /* Context Menu */ | |
| .context-menu { | |
| animation: fadeIn 0.1s ease-out; | |
| } | |
| /* Audio Waveform */ | |
| .audio-bar { | |
| width: 3px; | |
| background: #00d4aa; | |
| border-radius: 2px; | |
| animation: audioWave 1s ease-in-out infinite; | |
| } | |
| @keyframes audioWave { | |
| 0%, 100% { height: 8px; } | |
| 50% { height: 24px; } | |
| } | |
| /* Password strength */ | |
| .strength-segment { | |
| height: 4px; | |
| border-radius: 2px; | |
| transition: all 0.3s ease; | |
| } | |
| /* Custom checkbox */ | |
| .check-custom { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #00d4aa60; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .check-custom.checked { | |
| background: #00d4aa; | |
| border-color: #00d4aa; | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::after { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-8px); | |
| padding: 6px 12px; | |
| background: #1e1e2e; | |
| border-radius: 8px; | |
| font-size: 12px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.3); | |
| } | |
| .tooltip:hover::after { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(-4px); | |
| } | |
| /* Loading Skeleton */ | |
| .skeleton { | |
| background: linear-gradient(90deg, #1e1e2e 25%, #2a2a3e 50%, #1e1e2e 75%); | |
| background-size: 200% 100%; | |
| animation: skeletonLoad 1.5s ease-in-out infinite; | |
| } | |
| @keyframes skeletonLoad { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* Notification badge */ | |
| .badge-pulse { | |
| animation: badgePulse 2s ease-in-out infinite; | |
| } | |
| @keyframes badgePulse { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); } | |
| 50% { box-shadow: 0 0 0 8px rgba(255, 71, 87, 0); } | |
| } | |
| /* Swipe indicator */ | |
| .swipe-hint { | |
| animation: swipeHint 2s ease-in-out infinite; | |
| } | |
| @keyframes swipeHint { | |
| 0%, 100% { transform: translateX(0); opacity: 0.5; } | |
| 50% { transform: translateX(10px); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Matrix Background --> | |
| <canvas id="matrixCanvas" class="matrix-bg"></canvas> | |
| <!-- APP CONTAINER --> | |
| <div id="app" class="relative z-10 h-screen w-screen overflow-hidden"> | |
| <!-- ==================== SCREEN: CALCULATOR DECOY ==================== --> | |
| <div id="screenCalculator" class="h-full w-full flex flex-col items-center justify-center p-4"> | |
| <div class="w-full max-w-sm"> | |
| <!-- Calculator Header --> | |
| <div class="text-center mb-6"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-light"> | |
| <i class="fas fa-calculator text-vault-accent text-sm"></i> | |
| <span class="text-xs text-gray-400 font-mono">Standard Calculator</span> | |
| </div> | |
| </div> | |
| <!-- Calculator Body --> | |
| <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);"> | |
| <!-- Display --> | |
| <div class="calc-display rounded-2xl p-4 mb-4 min-h-[100px] flex flex-col justify-end"> | |
| <div id="calcHistory" class="text-gray-500 text-sm font-mono text-right mb-1 min-h-[20px]"></div> | |
| <div id="calcDisplay" class="text-white text-4xl font-mono text-right font-light tracking-wider">0</div> | |
| </div> | |
| <!-- Keypad --> | |
| <div class="grid grid-cols-4 gap-3"> | |
| <!-- Row 1 --> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <!-- Row 2 --> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('7')">7</button> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('8')">8</button> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('9')">9</button> | |
| <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> | |
| <!-- Row 3 --> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('4')">4</button> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('5')">5</button> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('6')">6</button> | |
| <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> | |
| <!-- Row 4 --> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('1')">1</button> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('2')">2</button> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcNumber('3')">3</button> | |
| <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> | |
| <!-- Row 5 --> | |
| <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> | |
| <button class="calc-btn rounded-2xl p-4 text-white text-xl bg-vault-darker hover:bg-white/10" onclick="calcDecimal()">.</button> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Hidden Secret Indicator --> | |
| <div class="mt-4 flex justify-center gap-2" id="secretDots"> | |
| <div class="secret-dot" id="dot0"></div> | |
| <div class="secret-dot" id="dot1"></div> | |
| <div class="secret-dot" id="dot2"></div> | |
| <div class="secret-dot" id="dot3"></div> | |
| </div> | |
| <p class="text-center text-gray-600 text-xs mt-2 font-mono" id="secretHint">Tap logo 3x for settings</p> | |
| <!-- Built with anycoder --> | |
| <div class="mt-6 text-center"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-gray-500 text-xs hover:text-vault-accent transition-colors"> | |
| Built with <span class="text-vault-accent">anycoder</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ==================== SCREEN: PASSWORD ENTRY ==================== --> | |
| <div id="screenPassword" class="hidden h-full w-full flex flex-col items-center justify-center p-4"> | |
| <div class="w-full max-w-sm"> | |
| <!-- Lock Icon --> | |
| <div class="text-center mb-8"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 rounded-3xl glass mb-4" style="box-shadow: var(--vault-glow);"> | |
| <i class="fas fa-shield-halved text-3xl text-vault-accent"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-white mb-1">SecureVault</h2> | |
| <p class="text-gray-400 text-sm">End-to-End Encrypted</p> | |
| </div> | |
| <!-- Password Input --> | |
| <div class="glass rounded-2xl p-6 mb-4"> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-2 block">Passphrase</label> | |
| <div class="relative"> | |
| <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()"> | |
| <button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-vault-accent transition-colors" onclick="togglePasswordVisibility()"> | |
| <i class="fas fa-eye" id="eyeIcon"></i> | |
| </button> | |
| </div> | |
| <div class="flex gap-1 mt-3" id="strengthBar"> | |
| <div class="strength-segment flex-1 bg-gray-700 rounded"></div> | |
| <div class="strength-segment flex-1 bg-gray-700 rounded"></div> | |
| <div class="strength-segment flex-1 bg-gray-700 rounded"></div> | |
| <div class="strength-segment flex-1 bg-gray-700 rounded"></div> | |
| </div> | |
| </div> | |
| <!-- Biometric Option (Mock) --> | |
| <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()"> | |
| <i class="fas fa-fingerprint text-vault-accent text-xl"></i> | |
| <span class="text-sm text-gray-300">Biometric Unlock</span> | |
| </button> | |
| <!-- Unlock Button --> | |
| <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()"> | |
| <i class="fas fa-unlock mr-2"></i>Unlock Vault | |
| </button> | |
| <!-- Back to Calculator --> | |
| <button class="w-full mt-4 text-gray-500 text-sm hover:text-gray-300 transition-colors" onclick="showCalculator()"> | |
| <i class="fas fa-arrow-left mr-1"></i> Back to Calculator | |
| </button> | |
| <div class="mt-6 text-center"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-gray-500 text-xs hover:text-vault-accent transition-colors"> | |
| Built with <span class="text-vault-accent">anycoder</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ==================== SCREEN: MAIN APP ==================== --> | |
| <div id="screenMain" class="hidden h-full w-full flex"> | |
| <!-- Desktop Sidebar --> | |
| <div class="sidebar-desktop hidden md:flex flex-col glass border-r border-white/5"> | |
| <!-- Sidebar Header --> | |
| <div class="p-4 border-b border-white/5"> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-10 h-10 rounded-xl bg-vault-accent flex items-center justify-center"> | |
| <i class="fas fa-shield-halved text-vault-darker text-lg"></i> | |
| </div> | |
| <div> | |
| <h1 class="font-bold text-white">SecureVault</h1> | |
| <p class="text-xs text-vault-accent">● Online</p> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i> | |
| <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"> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 overflow-y-auto p-2"> | |
| <div class="text-xs text-gray-500 uppercase tracking-wider px-3 py-2">Chats</div> | |
| <div id="sidebarChats" class="space-y-1"></div> | |
| <div class="text-xs text-gray-500 uppercase tracking-wider px-3 py-2 mt-4">Gallery</div> | |
| <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')"> | |
| <i class="fas fa-images w-5"></i> | |
| <span class="text-sm">All Media</span> | |
| </button> | |
| <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')"> | |
| <i class="fas fa-camera w-5"></i> | |
| <span class="text-sm">Photos</span> | |
| </button> | |
| <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')"> | |
| <i class="fas fa-video w-5"></i> | |
| <span class="text-sm">Videos</span> | |
| </button> | |
| <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')"> | |
| <i class="fas fa-music w-5"></i> | |
| <span class="text-sm">Music</span> | |
| </button> | |
| <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')"> | |
| <i class="fas fa-file-alt w-5"></i> | |
| <span class="text-sm">Documents</span> | |
| </button> | |
| <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')"> | |
| <i class="fas fa-link w-5"></i> | |
| <span class="text-sm">Links</span> | |
| </button> | |
| </nav> | |
| <!-- Sidebar Footer --> | |
| <div class="p-4 border-t border-white/5"> | |
| <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()"> | |
| <i class="fas fa-lock w-5"></i> | |
| <span class="text-sm">Lock Vault</span> | |
| </button> | |
| <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()"> | |
| <i class="fas fa-cog w-5"></i> | |
| <span class="text-sm">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col h-full overflow-hidden"> | |
| <!-- Mobile Header --> | |
| <div class="md:hidden glass flex items-center justify-between p-3 border-b border-white/5"> | |
| <div class="flex items-center gap-3"> | |
| <button class="w-10 h-10 rounded-xl bg-vault-accent flex items-center justify-center" onclick="showMobileMenu()"> | |
| <i class="fas fa-shield-halved text-vault-darker"></i> | |
| </button> | |
| <div> | |
| <h1 class="font-bold text-white text-sm">SecureVault</h1> | |
| <p class="text-xs text-vault-accent">● Online</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <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()"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <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()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content Container --> | |
| <div id="mainContent" class="flex-1 overflow-hidden relative"> | |
| <!-- CHAT VIEW --> | |
| <div id="viewChat" class="h-full flex flex-col"> | |
| <!-- Chat Header --> | |
| <div class="glass p-3 md:p-4 border-b border-white/5 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <button class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400" onclick="showChatList()"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="relative"> | |
| <img id="chatAvatar" src="" class="w-10 h-10 rounded-xl object-cover" alt=""> | |
| <div id="chatOnline" class="absolute -bottom-1 -right-1 w-3 h-3 bg-vault-accent rounded-full border-2 border-vault-dark"></div> | |
| </div> | |
| <div> | |
| <h3 id="chatName" class="font-semibold text-white text-sm">Select a chat</h3> | |
| <p id="chatStatus" class="text-xs text-gray-400">Tap to view info</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <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()"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <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()"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <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()"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages Area --> | |
| <div id="messagesArea" class="flex-1 overflow-y-auto p-4 space-y-3"> | |
| <!-- Messages injected by JS --> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div id="typingIndicator" class="hidden px-4 py-2"> | |
| <div class="flex items-center gap-2 text-xs text-gray-400"> | |
| <div class="flex gap-1"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| <span id="typingName">Someone is typing...</span> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="glass p-3 md:p-4 border-t border-white/5"> | |
| <div class="flex items-end gap-2"> | |
| <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()"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <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> | |
| </div> | |
| <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()"> | |
| <i class="fas fa-lock" id="encryptIcon"></i> | |
| </button> | |
| <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()"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CHAT LIST VIEW (Mobile) --> | |
| <div id="viewChatList" class="hidden h-full flex-col md:hidden"> | |
| <div class="glass p-4 border-b border-white/5"> | |
| <div class="relative"> | |
| <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i> | |
| <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"> | |
| </div> | |
| </div> | |
| <div id="mobileChatList" class="flex-1 overflow-y-auto p-2 space-y-1"></div> | |
| <div class="glass p-4 border-t border-white/5 flex justify-around"> | |
| <button class="flex flex-col items-center gap-1 text-vault-accent" onclick="showChatList()"> | |
| <i class="fas fa-comment text-lg"></i> | |
| <span class="text-xs">Chats</span> | |
| </button> | |
| <button class="flex flex-col items-center gap-1 text-gray-400 hover:text-white" onclick="switchTab('gallery')"> | |
| <i class="fas fa-images text-lg"></i> | |
| <span class="text-xs">Gallery</span> | |
| </button> | |
| <button class="flex flex-col items-center gap-1 text-gray-400 hover:text-white" onclick="showSettings()"> | |
| <i class="fas fa-cog text-lg"></i> | |
| <span class="text-xs">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- GALLERY VIEW --> | |
| <div id="viewGallery" class="hidden h-full flex-col"> | |
| <!-- Gallery Header --> | |
| <div class="glass p-3 md:p-4 border-b border-white/5 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <button class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400" onclick="backToChats()"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 id="galleryTitle" class="font-semibold text-white">Gallery</h2> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <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()"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </button> | |
| <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()"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Gallery Grid --> | |
| <div id="galleryGrid" class="flex-1 overflow-y-auto p-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3" id="galleryContent"></div> | |
| </div> | |
| </div> | |
| <!-- SETTINGS VIEW --> | |
| <div id="viewSettings" class="hidden h-full flex-col overflow-y-auto"> | |
| <div class="glass p-3 md:p-4 border-b border-white/5 flex items-center gap-3 sticky top-0 z-10"> | |
| <button class="md:hidden w-10 h-10 rounded-xl glass-light flex items-center justify-center text-gray-400" onclick="backToChats()"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="font-semibold text-white">Settings</h2> | |
| </div> | |
| <div class="p-4 space-y-6 max-w-2xl"> | |
| <!-- Profile Section --> | |
| <div class="glass rounded-2xl p-6"> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <div class="relative"> | |
| <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"> | |
| <button class="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg bg-vault-accent flex items-center justify-center text-vault-darker"> | |
| <i class="fas fa-camera text-xs"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-white">You</h3> | |
| <p class="text-sm text-gray-400">@secure_user</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Section --> | |
| <div class="glass rounded-2xl p-6"> | |
| <h4 class="text-sm font-semibold text-vault-accent uppercase tracking-wider mb-4">Security</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-white font-medium">End-to-End Encryption</p> | |
| <p class="text-xs text-gray-400">All messages are encrypted</p> | |
| </div> | |
| <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-white font-medium">Self-Destruct Timer</p> | |
| <p class="text-xs text-gray-400">Auto-delete after reading</p> | |
| </div> | |
| <div class="toggle-switch" onclick="this.classList.toggle('active')"></div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-white font-medium">Screenshot Protection</p> | |
| <p class="text-xs text-gray-400">Block screenshots in app</p> | |
| </div> | |
| <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-white font-medium">Biometric Lock</p> | |
| <p class="text-xs text-gray-400">Require fingerprint/face</p> | |
| </div> | |
| <div class="toggle-switch" onclick="this.classList.toggle('active')"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Privacy Section --> | |
| <div class="glass rounded-2xl p-6"> | |
| <h4 class="text-sm font-semibold text-vault-accent uppercase tracking-wider mb-4">Privacy</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-white font-medium">Online Status</p> | |
| <p class="text-xs text-gray-400">Show when you're active</p> | |
| </div> | |
| <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-white font-medium">Read Receipts</p> | |
| <p class="text-xs text-gray-400">Let others see when you read</p> | |
| </div> | |
| <div class="toggle-switch" onclick="this.classList.toggle('active')"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Danger Zone --> | |
| <div class="glass rounded-2xl p-6 border border-vault-danger/30"> | |
| <h4 class="text-sm font-semibold text-vault-danger uppercase tracking-wider mb-4">Danger Zone</h4> | |
| <div class="space-y-3"> | |
| <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()"> | |
| <i class="fas fa-trash-alt mr-2"></i>Clear All Data | |
| </button> | |
| <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()"> | |
| <i class="fas fa-lock mr-2"></i>Lock & Exit | |
| </button> | |
| </div> | |
| </div> | |
| <!-- App Info --> | |
| <div class="text-center pb-8"> | |
| <p class="text-xs text-gray-500 mb-2">SecureVault v2.1.0</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-gray-500 text-xs hover:text-vault-accent transition-colors"> | |
| Built with <span class="text-vault-accent">anycoder</span> | |
| </a> | |
| </ |