<!-- Vault panel --> <div class="vault-panel"> <h3>🛡️ Password Vault</h3> <div class="search-box"> <input type="text" id="searchVault" placeholder="🔍 Search by service or username..."> </div> <div style="overflow-x: auto;"> <table id="vaultTable"> <thead> <tr><th>Service</th><th>Username (optional)</th><th>Password</th><th>Strength</th><th>Actions</th></tr> </thead> <tbody id="vaultBody"> <tr><td colspan="5" style="text-align:center;">No passwords yet. Generate & save.</td></tr> </tbody> </table> </div> <div style="display: flex; gap: 10px; margin-top: 1rem;"> <button id="exportVaultBtn" style="background:#2a4b6e;">📎 Export JSON (encrypted mindset)</button> <button id="importVaultBtn" style="background:#2a4b6e;">📂 Import JSON</button> <input type="file" id="importFile" accept=".json" style="display:none;"> </div> <button id="clearAllBtn" class="danger-btn">⚠️ CLEAR ALL VAULT (irreversible)</button> </div> </div> <footer> 🔐 Tyviania Password — All data stays in your browser. No cloud, no tracking. Use master lock mindset. </footer> </div>
You can copy the content below into an HTML file and open it in your browser. tyviania password
function saveVault(vault) localStorage.setItem(STORAGE_KEY, JSON.stringify(vault)); renderVault(); Use master lock mindset
<!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> Use master lock mindset. <
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 renderVault()