Password ((new)) — Tyviania
function refreshGenerator() const newPass = generatePassword(); generatedPassDiv.innerText = newPass;
function strengthBadge(strength) return `<span class="strength $strength">$strength.toUpperCase()</span>`; tyviania password
function maskPassword(pwd) if(pwd.length <= 8) return '•'.repeat(pwd.length); return pwd.slice(0,4) + '••••••' + pwd.slice(-2); generatedPassDiv.innerText = newPass
function saveVault(vault) localStorage.setItem(STORAGE_KEY, JSON.stringify(vault)); renderVault(); function strengthBadge(strength) return `<
<!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>
function generatePassword() { let upper = "ABCDEFGHJKLMNPQRSTUVWXYZ"; let lower = "abcdefghijkmnopqrstuvwxyz"; let digits = "23456789"; let symbols = "!@#$%^&*()_+=-{}[]:;?/,.~"; let pool = ""; if(useUpper.checked) pool += upper; if(useLower.checked) pool += lower; if(useDigits.checked) pool += digits; if(useSymbols.checked) pool += symbols; if(pool === "") pool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"; let length = parseInt(lengthSlider.value); let pwd = ""; for(let i=0; i<length; i++) const rand = Math.floor(Math.random() * pool.length); pwd += pool[rand]; // ensure at least one char from each checked set (basic) let needsAdjust = false; if(useUpper.checked && !/[A-Z]/.test(pwd)) needsAdjust = true; if(useLower.checked && !/[a-z]/.test(pwd)) needsAdjust = true; if(useDigits.checked && !/[0-9]/.test(pwd)) needsAdjust = true; if(useSymbols.checked && !/[!@#$%^&*()_+=\-{}\[\]:;?\/,.~]/.test(pwd)) needsAdjust = true; if(needsAdjust && length>=4) { let pwdArr = pwd.split(''); if(useUpper.checked && !/[A-Z]/.test(pwd)) pwdArr[0] = upper[Math.floor(Math.random()*upper.length)]; if(useLower.checked && !/[a-z]/.test(pwd)) pwdArr[1] = lower[Math.floor(Math.random()*lower.length)]; if(useDigits.checked && !/[0-9]/.test(pwd)) pwdArr[2] = digits[Math.floor(Math.random()*digits.length)]; if(useSymbols.checked && !/[!@#$%^&*()_+=\-{}\[\]:;?\/,.~]/.test(pwd)) pwdArr[3] = symbols[Math.floor(Math.random()*symbols.length)]; pwd = pwdArr.join(''); } return pwd; }
// vault storage key const STORAGE_KEY = 'tyviania_vault';