function saveVault(vault) localStorage.setItem(STORAGE_KEY, JSON.stringify(vault)); renderVault();
function strengthBadge(strength) return `<span class="strength $strength">$strength.toUpperCase()</span>`;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tyviania Password Vault & Generator</title> <style> * box-sizing: border-box; font-family: system-ui, 'Segoe UI', 'Courier New', monospace; body background: linear-gradient(145deg, #0a0f1e 0%, #0c1222 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; .card max-width: 1300px; width: 100%; background: rgba(18, 25, 45, 0.85); backdrop-filter: blur(10px); border-radius: 2rem; padding: 1.8rem; box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(90, 150, 220, 0.2); border: 1px solid rgba(80, 140, 210, 0.3); h1 margin: 0 0 0.25rem 0; font-size: 2.2rem; background: linear-gradient(135deg, #c0e0ff, #a070ff); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; display: inline-block; .sub color: #8aa0c0; margin-bottom: 2rem; border-left: 3px solid #5f8ae0; padding-left: 1rem; .flex-row display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; .generator-panel flex: 1.2; min-width: 260px; background: #0f1629; border-radius: 1.5rem; padding: 1.5rem; border: 1px solid #2a3456; .vault-panel flex: 2; min-width: 380px; background: #0f1629; border-radius: 1.5rem; padding: 1.5rem; border: 1px solid #2a3456; label display: block; margin-top: 1rem; margin-bottom: 0.4rem; font-weight: 600; color: #bfd6ff; input, select, button background: #010a1a; border: 1px solid #2e3b55; padding: 0.7rem 1rem; border-radius: 1rem; color: #eef5ff; font-size: 0.9rem; width: 100%; button background: #2a3f6e; cursor: pointer; font-weight: bold; transition: 0.2s; margin-top: 1rem; border: none; button:hover background: #3e5a8c; transform: scale(0.98); box-shadow: 0 0 8px #4f7ebe; .danger-btn background: #5a2e3e; .danger-btn:hover background: #7e3e52; .password-display background: #00000066; font-family: monospace; font-size: 1.4rem; font-weight: bold; text-align: center; padding: 0.8rem; border-radius: 1rem; letter-spacing: 1px; word-break: break-all; margin: 1rem 0; border: 1px dashed #4f7ebe; table width: 100%; border-collapse: collapse; margin-top: 1rem; th, td text-align: left; padding: 10px 6px; border-bottom: 1px solid #2a3456; font-size: 0.85rem; th color: #b8d0ff; .actions-cell button width: auto; margin: 0 3px; padding: 4px 10px; font-size: 0.7rem; background: #1f2a44; .strength display: inline-block; padding: 2px 8px; border-radius: 30px; font-size: 0.7rem; font-weight: bold; .weak background: #b33b3b; .medium background: #cb8b2c; .strong background: #2b7a4b; .search-box margin-bottom: 1rem; footer font-size: 0.7rem; text-align: center; margin-top: 2rem; color: #5f739b; @media (max-width: 800px) .flex-row flex-direction: column; </style> </head> <body> <div class="card"> <h1>⚔️ TYVIANIA PASSWORD ⚔️</h1> <div class="sub">secure vault • strong generator • master your keys</div> <div class="flex-row"> <!-- Generator panel --> <div class="generator-panel"> <h3>✨ Generate strong password</h3> <label>Length: <span id="lenValue">16</span></label> <input type="range" id="passLength" min="6" max="40" value="16" step="1"> <div style="display: flex; gap: 1rem; flex-wrap: wrap;"> <label style="display: flex; gap: 6px; align-items: center;"><input type="checkbox" id="useUpper" checked> A-Z</label> <label style="display: flex; gap: 6px; align-items: center;"><input type="checkbox" id="useLower" checked> a-z</label> <label style="display: flex; gap: 6px; align-items: center;"><input type="checkbox" id="useDigits" checked> 0-9</label> <label style="display: flex; gap: 6px; align-items: center;"><input type="checkbox" id="useSymbols" checked> !@#$%</label> </div> <button id="generateBtn">🌀 Generate New Password</button> <div class="password-display" id="generatedPass">Tyviania#1Pass</div> <button id="copyGenBtn">📋 Copy to clipboard</button> <label>Service / Account:</label> <input type="text" id="serviceName" placeholder="e.g., Gmail, GitHub, TyvianiaBank"> <button id="saveToVaultBtn">💾 Save this password to vault</button> </div> tyviania password
function renderVault() (entry.username && entry.username.toLowerCase().includes(searchTerm)) ); if(filtered.length === 0) vaultBody.innerHTML = '<tr><td colspan="5" style="text-align:center;">🔎 No matching entries</td></tr>'; return; let html = ''; filtered.forEach((entry, idx) => const realIndex = vault.findIndex(e => e === entry); const strength = evaluateStrength(entry.password); html += `<tr> <td>$escapeHtml(entry.service)</td> <td>$ '—')</td> <td style="font-family:monospace;">$maskPassword(entry.password)</td> <td>$strengthBadge(strength)</td> <td class="actions-cell"> <button class="view-pass-btn" data-idx="$realIndex" data-pwd="$escapeHtml(entry.password)">👁️ Show</button> <button class="copy-pass-btn" data-pwd="$escapeHtml(entry.password)">📋 Copy</button> <button class="del-entry-btn" data-idx="$realIndex">🗑️ Del</button> </td> </tr>`; ); vaultBody.innerHTML = html;
// --------- helper functions ---------- function loadVault() const raw = localStorage.getItem(STORAGE_KEY); if(!raw) return []; try return JSON.parse(raw); catch(e) return []; function saveVault(vault) localStorage
function showToast(msg) let toast = document.createElement('div'); toast.innerText = msg; toast.style.position = 'fixed'; toast.style.bottom = '20px'; toast.style.left = '50%'; toast.style.transform = 'translateX(-50%)'; toast.style.backgroundColor = '#1f2a44'; toast.style.color = '#eef'; toast.style.padding = '8px 20px'; toast.style.borderRadius = '40px'; toast.style.zIndex = '9999'; toast.style.fontSize = '0.8rem'; toast.style.border = '1px solid #6f8fcf'; document.body.appendChild(toast); setTimeout(() => toast.remove(), 2000);
function evaluateStrength(pwd) let score = 0; if(pwd.length >= 12) score++; if(pwd.length >= 16) score++; if(/[A-Z]/.test(pwd)) score++; if(/[a-z]/.test(pwd)) score++; if(/[0-9]/.test(pwd)) score++; if(/[^A-Za-z0-9]/.test(pwd)) score++; if(score >= 5) return 'strong'; if(score >= 3) return 'medium'; return 'weak'; function saveVault(vault) localStorage.setItem(STORAGE_KEY
// ----- event handlers ----- lengthSlider.addEventListener('input', () => lenValue.innerText = lengthSlider.value; refreshGenerator(); ); [useUpper, useLower, useDigits, useSymbols].forEach(chk => chk.addEventListener('change', refreshGenerator); ); generateBtn.addEventListener('click', refreshGenerator); copyGenBtn.addEventListener('click', async () => const pwd = generatedPassDiv.innerText; if(pwd) await navigator.clipboard.writeText(pwd); showToast('Generated password copied'); ); saveToVaultBtn.addEventListener('click', () => const password = generatedPassDiv.innerText; const service = serviceNameInput.value.trim(); if(!service) alert('Please enter a service name (e.g., Twitter, Tyviania)'); return; const vault = loadVault(); vault.push( service: service, username: '', password: password, created: new Date().toISOString() ); saveVault(vault); serviceNameInput.value = ''; showToast(`Saved password for "$service"`); ); searchVault.addEventListener('input', () => renderVault()); exportBtn.addEventListener('click', () => const vault = loadVault(); const exportObj = version: "tyviania-1", exported: new Date().toISOString(), vault: vault ; const dataStr = JSON.stringify(exportObj, null, 2); const blob = new Blob([dataStr], type: 'application/json'); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `tyviania_vault_$Date.now().json`; a.click(); URL.revokeObjectURL(url); ); importBtn.addEventListener('click', () => importFile.click()); importFile.addEventListener('change', (e) => const file = e.target.files[0]; if(!file) return; const reader = new FileReader(); reader.onload = (ev) => try const imported = JSON.parse(ev.target.result); let importedVault = []; if(imported.vault && Array.isArray(imported.vault)) importedVault = imported.vault; else if(Array.isArray(imported)) importedVault = imported; else throw new Error('invalid format'); const current = loadVault(); const merged = current.concat(importedVault); saveVault(merged); showToast(`Imported $importedVault.length entries`); renderVault(); catch(err) alert('Invalid JSON file'); importFile.value = ''; ; reader.readAsText(file); ); clearAllBtn.addEventListener('click', () => if(confirm('⚠️ PERMANENT: Delete all stored passwords from Tyviania Vault?')) localStorage.removeItem(STORAGE_KEY); renderVault(); showToast('All passwords wiped'); );