36 lines
1.7 KiB
HTML
36 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Login · Analytics graphs</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font: 14px system-ui, sans-serif; color: #17202a; background: #f4f6f8; }
|
|
main { width: min(420px, calc(100% - 32px)); margin: 15vh auto 0; }
|
|
.panel { padding: 22px; border: 1px solid #dfe4ea; border-radius: 10px; background: white; }
|
|
h1 { margin: 0 0 18px; font-size: 24px; }
|
|
label { display: grid; gap: 5px; margin-bottom: 14px; color: #4b5563; font-size: 12px; }
|
|
input, button { width: 100%; font: inherit; }
|
|
input { border: 1px solid #cfd6dd; border-radius: 6px; padding: 9px; background: white; }
|
|
button { border: 0; border-radius: 6px; padding: 10px 18px; color: white; background: #2563eb; cursor: pointer; }
|
|
button:disabled, button.htmx-request { opacity: .55; cursor: wait; }
|
|
.error { color: #b42318; }
|
|
.back { display: inline-block; margin-top: 14px; color: #2563eb; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<form class="panel" hx-post="/login" hx-target="#login-status" hx-swap="innerHTML" hx-disabled-elt="button" novalidate>
|
|
<h1>Login</h1>
|
|
<label>Username or email<input name="identifier" autocomplete="username"></label>
|
|
<label>Password <span>(optional)</span><input name="password" type="password" autocomplete="current-password"></label>
|
|
<button type="submit">Login</button>
|
|
<div id="login-status" aria-live="polite"></div>
|
|
</form>
|
|
<a class="back" href="/">Back to analytics</a>
|
|
</main>
|
|
</body>
|
|
</html>
|