129 lines
8.5 KiB
HTML
129 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🔐 Vault</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
<div class="idle-warning" id="idleWarning"><h3>⏰ Auto-lock</h3><p>Vault locks in <span id="idleCountdown">30</span>s</p><button class="btn btn-sm" onclick="resetIdle()">Stay Unlocked</button></div>
|
||
|
||
<div class="edit-modal" id="editModal">
|
||
<div class="edit-box">
|
||
<h3>✏️ Edit Entry</h3>
|
||
<form onsubmit="return false">
|
||
<label>Website / App</label><input type="text" id="editSite" placeholder="example.com" autocomplete="off">
|
||
<label style="margin-top:.6rem">Username / Email</label><input type="text" id="editUsername" placeholder="user@example.com" autocomplete="off">
|
||
<label style="margin-top:.6rem">Password</label>
|
||
<div style="position:relative">
|
||
<input type="password" id="editPassword" placeholder="Password" style="width:100%;padding-right:40px" autocomplete="new-password">
|
||
<button type="button" onclick="toggleEditPassword()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:.9rem">👁️</button>
|
||
</div>
|
||
<label style="margin-top:.6rem">Folder</label>
|
||
<select id="editFolder" style="width:100%;margin-bottom:.4rem"></select>
|
||
<input type="hidden" id="editId">
|
||
<div style="display:flex;gap:.5rem;margin-top:1rem">
|
||
<button class="btn" onclick="saveEdit()">💾 Save</button>
|
||
<button class="btn btn-outline" onclick="closeEdit()">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vault">
|
||
<h1>🔐 Vault <span>XAMPP</span>
|
||
<button class="btn btn-outline btn-xs" id="soundToggle" onclick="toggleSound()" title="Sound" style="margin-left:0.3rem;">🔊</button>
|
||
<button class="btn btn-outline btn-xs" onclick="toggleTheme()" style="margin-left:auto">🌓</button>
|
||
</h1>
|
||
<div id="authSection" class="auth-section">
|
||
<div class="auth-tabs"><button class="auth-tab active" onclick="switchTab('login')">Login</button><button class="auth-tab" onclick="switchTab('register')">Register</button></div>
|
||
<div id="loginForm">
|
||
<form onsubmit="return false" class="input-group" autocomplete="off">
|
||
<input type="text" id="loginUsername" placeholder="Username" autocomplete="username">
|
||
<input type="password" id="loginPassword" placeholder="Master Password" autocomplete="current-password">
|
||
<button class="btn" id="loginBtn" onclick="login()">🔓 Unlock</button>
|
||
</form>
|
||
</div>
|
||
<div id="registerForm" class="hidden">
|
||
<form onsubmit="return false" class="input-group" autocomplete="off">
|
||
<input type="text" id="regUsername" placeholder="Username (min 3)" autocomplete="username">
|
||
<input type="password" id="regPassword" placeholder="Password (min 8)" autocomplete="new-password">
|
||
<button class="btn" id="registerBtn" onclick="register()">✨ Create</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="vaultSection" class="hidden">
|
||
<div style="display:flex;justify-content:space-between;margin-bottom:.5rem;align-items:center;flex-wrap:wrap;gap:.4rem">
|
||
<span class="status-badge" id="connectionStatus">🟢 Connected</span>
|
||
<span id="entryCount" style="color:var(--text2);font-size:.8rem"></span>
|
||
<div style="display:flex;gap:.4rem;align-items:center">
|
||
<select id="autoLockTimer" onchange="setAutoLock()" style="font-size:.7rem;padding:.3rem .5rem;background:var(--input);border:1px solid #2d3748;color:var(--text);border-radius:1.5rem">
|
||
<option value="0">No lock</option><option value="1">1 min</option><option value="5" selected>5 min</option><option value="15">15 min</option><option value="30">30 min</option><option value="60">1 hour</option>
|
||
</select>
|
||
<span id="currentUser" style="color:var(--text2);font-size:.8rem"></span>
|
||
<button class="btn btn-outline btn-sm" onclick="doLogout()">🔒 Lock</button>
|
||
</div>
|
||
</div>
|
||
|
||
<form onsubmit="return false" class="input-group" autocomplete="off">
|
||
<input type="text" id="siteInput" placeholder="Website *" autocomplete="off">
|
||
<input type="text" id="usernameInput" placeholder="Username (optional)" autocomplete="off">
|
||
<div style="flex:1;min-width:130px;position:relative">
|
||
<input type="password" id="passwordInput" placeholder="Password *" autocomplete="new-password" style="width:100%" oninput="checkStrength()">
|
||
<div class="strength-bar s0" id="strengthBar"></div>
|
||
</div>
|
||
<select id="addFolderSelect"></select>
|
||
<button type="button" class="btn" id="addBtn" onclick="addEntry()">➕ Add</button>
|
||
</form>
|
||
|
||
<div class="toolbar">
|
||
<div class="search-box">
|
||
<input type="text" id="searchInput" placeholder="🔍 Search..." oninput="searchEntries()" autocomplete="off">
|
||
</div>
|
||
<div class="toolbar-actions">
|
||
<div class="view-toggle" id="viewToggle">
|
||
<button class="view-btn active" data-view="grid">🟫 Grid</button>
|
||
<button class="view-btn" data-view="compact">📝 Compact</button>
|
||
<button class="view-btn" data-view="table">📊 Table</button>
|
||
<button class="view-btn" data-view="list">📋 List</button>
|
||
</div>
|
||
<button class="btn btn-outline btn-sm" id="trashBtn" onclick="toggleTrash()">🗑️ Trash</button>
|
||
<button class="btn btn-outline btn-sm" onclick="openGen()">🎲 Generate</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toggles-row" style="margin-bottom:.5rem;padding:.3rem .7rem;background:rgba(0,0,0,0.2);border-radius:1rem">
|
||
<span class="toggle-item"><span>👁️ View</span><div class="toggle-switch active" id="showViewBtnToggle" onclick="toggleViewBtn()"></div></span>
|
||
<span class="toggle-item"><span>📧 Email</span><div class="toggle-switch active" id="showEmailToggle" onclick="toggleShowEmail()"></div></span>
|
||
</div>
|
||
|
||
<div class="folders-bar" id="foldersBar"></div>
|
||
<div id="trashActions" class="hidden" style="margin-bottom:.5rem;text-align:right;">
|
||
<button class="empty-trash-btn" onclick="emptyTrash()">🗑️ Empty Trash</button>
|
||
</div>
|
||
<div id="entriesContainer" class="grid-view"><div style="text-align:center;color:var(--text2);padding:2rem;grid-column:1/-1">📭 No entries</div></div>
|
||
<div style="margin-top:.6rem;text-align:right"><button class="btn btn-outline btn-sm" onclick="exportPasswords()">📤 Export</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="genModal" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:1000">
|
||
<div style="background:var(--bg2);border-radius:1.5rem;padding:1.5rem;min-width:320px;max-width:90%">
|
||
<h3 style="margin-bottom:.8rem;color:var(--text)">🎲 Generator</h3>
|
||
<div style="background:var(--input);padding:.8rem;border-radius:1rem;font-family:monospace;text-align:center;color:#4ade80;margin:.6rem 0;word-break:break-all" id="genPreview">Click Generate</div>
|
||
<div style="display:flex;align-items:center;gap:.6rem;margin:.8rem 0"><span>Length:</span><input type="range" id="pwdLen" min="8" max="64" value="16" oninput="onLenChange()" style="flex:1"><span id="lenVal" style="background:var(--input);padding:.2rem .6rem;border-radius:1rem;min-width:30px;text-align:center">16</span></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0">
|
||
<label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useUpper" checked onchange="genPwd()"> A-Z</label>
|
||
<label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useLower" checked onchange="genPwd()"> a-z</label>
|
||
<label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useNum" checked onchange="genPwd()"> 0-9</label>
|
||
<label style="font-size:.8rem;color:var(--text2)"><input type="checkbox" id="useSym" checked onchange="genPwd()"> !@#$</label>
|
||
</div>
|
||
<div style="display:flex;gap:.4rem;margin-top:.8rem"><button class="btn" onclick="genPwd()" style="flex:1">🔄</button><button class="btn" onclick="useGen()" style="flex:1">✅ Use</button><button class="btn btn-outline" onclick="closeGen()">Cancel</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html> |