Tyviania Password High Quality -
function maskPassword(pwd) if(pwd.length <= 8) return '•'.repeat(pwd.length); return pwd.slice(0,4) + '••••••' + pwd.slice(-2);
<!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
// --------- helper functions ---------- function loadVault() const raw = localStorage.getItem(STORAGE_KEY); if(!raw) return []; try return JSON.parse(raw); catch(e) return []; function maskPassword(pwd) if(pwd
function refreshGenerator() const newPass = generatePassword(); generatedPassDiv.innerText = newPass; function maskPassword(pwd) if(pwd.length <
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;
