68 lines
1.6 KiB
HTML
68 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PinVault</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>PinVault</h1>
|
|
<p class="subtitle">Encrypted, time-locked PIN storage</p>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>New PIN</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="add-form">
|
|
<div class="form-group">
|
|
<label for="label">Label</label>
|
|
<input type="text" id="label" placeholder="e.g. Banking app" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lock-days">Lock (days)</label>
|
|
<input type="number" id="lock-days" value="30" min="0" max="365">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Generate PIN</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="new-pin-result" class="card hidden">
|
|
<div class="card-header">
|
|
<h2>New PIN Generated</h2>
|
|
<button class="btn btn-sm btn-close" onclick="this.closest('.card').classList.add('hidden')">×</button>
|
|
</div>
|
|
<div class="card-body" id="new-pin-content"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Stored PINs</h2>
|
|
<button class="btn btn-sm" onclick="loadPins()">Refresh</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="pins-list"><p class="muted">Loading...</p></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="modal-overlay" class="hidden">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title"></h2>
|
|
<button class="btn btn-sm btn-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body" id="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html> |