50 lines
2.4 KiB
HTML
50 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Broccolini Settings - Login</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', sans-serif; background: #0f1117; color: #e0e0e0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
|
.login-card { background: #1e2235; border: 1px solid #2a2d3e; border-radius: 16px; padding: 48px 40px; width: 380px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
|
|
.login-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
|
|
.login-card p { font-size: 14px; color: #888; margin-bottom: 32px; }
|
|
.login-card input { width: 100%; padding: 12px 16px; background: #0f1117; border: 1px solid #2a2d3e; border-radius: 8px; color: #e0e0e0; font-size: 14px; margin-bottom: 16px; outline: none; transition: border-color 200ms; }
|
|
.login-card input:focus { border-color: #5865f2; }
|
|
.login-card button { width: 100%; padding: 12px; background: #5865f2; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 200ms; }
|
|
.login-card button:hover { background: #4752c4; }
|
|
.error { color: #ed4245; font-size: 13px; margin-top: 8px; display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-card">
|
|
<h1>Broccolini Settings</h1>
|
|
<p>Enter the admin password to continue.</p>
|
|
<form id="login-form">
|
|
<input type="password" name="password" id="password" placeholder="Password" autofocus required>
|
|
<button type="submit">Sign in</button>
|
|
<div class="error" id="error">Invalid password</div>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const password = document.getElementById('password').value;
|
|
const res = await fetch('/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ password })
|
|
});
|
|
if (res.ok) {
|
|
window.location.href = '/';
|
|
} else {
|
|
document.getElementById('error').style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|