54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>Freundesbuch</title>
|
||
|
|
<link rel="stylesheet" href="/assets/style.css" />
|
||
|
|
<style>
|
||
|
|
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
||
|
|
.login-card { width: 100%; max-width: 380px; text-align: center; position: relative; }
|
||
|
|
.login-card .tape { top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
|
||
|
|
.book-emoji { font-size: 3rem; display: block; margin-bottom: 0.1em; }
|
||
|
|
form { margin-top: 1.2em; display: flex; flex-direction: column; gap: 0.8em; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="card login-card">
|
||
|
|
<div class="tape"></div>
|
||
|
|
<span class="book-emoji">📖</span>
|
||
|
|
<h1>Freundesbuch</h1>
|
||
|
|
<p class="muted">Gib das Passwort ein, um hineinzuschauen.</p>
|
||
|
|
<form id="loginForm">
|
||
|
|
<input type="password" id="password" placeholder="Passwort" autofocus required />
|
||
|
|
<button type="submit">Aufschlagen</button>
|
||
|
|
</form>
|
||
|
|
<div id="err"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const password = document.getElementById('password').value;
|
||
|
|
const errBox = document.getElementById('err');
|
||
|
|
errBox.innerHTML = '';
|
||
|
|
try {
|
||
|
|
const res = await fetch('/api/login', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({ password }),
|
||
|
|
});
|
||
|
|
const data = await res.json();
|
||
|
|
if (!res.ok) {
|
||
|
|
errBox.innerHTML = `<p class="error-msg">${data.error || 'Fehler beim Anmelden.'}</p>`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
window.location.href = '/admin';
|
||
|
|
} catch (err) {
|
||
|
|
errBox.innerHTML = '<p class="error-msg">Verbindung fehlgeschlagen.</p>';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|