mirror of
https://github.com/P-Aimon-Pen/ROFMAD
synced 2026-06-21 13:45:02 +00:00
paimon
188 lines
5.9 KiB
HTML
188 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ROFMAD — Setup</title>
|
|
|
|
<style>
|
|
{
|
|
% include "styles.html" %
|
|
}
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body.login-page {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #1d2021;
|
|
background-image:
|
|
linear-gradient(rgba(69, 133, 136, 0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(69, 133, 136, 0.04) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.login-container { width: 100%; max-width: 420px; padding: 1rem; }
|
|
|
|
.login-card {
|
|
background-color: #282828;
|
|
border: 1px solid #3c3836;
|
|
box-shadow: 0 0 0 1px #1d2021, 0 8px 32px rgba(0,0,0,0.7);
|
|
}
|
|
|
|
.login-header {
|
|
background-color: #3c3836;
|
|
border-bottom: 2px solid #d79921;
|
|
padding: 1rem 1.5rem;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.login-header h1 {
|
|
color: #fabd2f;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
}
|
|
|
|
.login-header p { color: #928374; font-size: 0.7rem; margin: 0; letter-spacing: 0.04em; text-transform: uppercase; }
|
|
|
|
.login-body { padding: 1.5rem; }
|
|
|
|
.setup-notice {
|
|
background-color: #1c1c1a;
|
|
border: 1px solid #d79921;
|
|
border-left: 3px solid #fabd2f;
|
|
color: #d5c4a1;
|
|
padding: 0.5rem 0.875rem;
|
|
font-size: 0.78rem;
|
|
margin-bottom: 1.25rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
.error-message {
|
|
background-color: #3c1a1a;
|
|
border: 1px solid #cc241d;
|
|
border-left: 3px solid #fb4934;
|
|
color: #fb4934;
|
|
padding: 0.5rem 0.875rem;
|
|
font-size: 0.78rem;
|
|
margin-bottom: 1.25rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
.login-card .form-group { margin-bottom: 0.875rem; }
|
|
|
|
.login-card .form-group label {
|
|
color: #7c6f64;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.login-card input[type="password"] {
|
|
background-color: #1d2021;
|
|
border: 1px solid #504945;
|
|
color: #ebdbb2;
|
|
font-size: 0.88rem;
|
|
padding: 0.55rem 0.75rem;
|
|
width: 100%;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
border-radius: 0;
|
|
transition: border-color 0.1s;
|
|
}
|
|
|
|
.login-card input:focus {
|
|
outline: none;
|
|
border-color: #d79921;
|
|
box-shadow: 0 0 0 1px #d79921;
|
|
background-color: #282828;
|
|
}
|
|
|
|
.login-btn {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.6rem 1rem;
|
|
margin-top: 1.25rem;
|
|
background-color: #d79921;
|
|
color: #1d2021;
|
|
border: 1px solid #fabd2f;
|
|
border-radius: 0;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: background-color 0.1s, color 0.1s;
|
|
}
|
|
|
|
.login-btn:hover:not(:disabled) { background-color: #fabd2f; }
|
|
|
|
.login-btn:disabled { background-color: #3c3836; border-color: #504945; color: #928374; cursor: not-allowed; }
|
|
|
|
.login-footer {
|
|
border-top: 1px solid #3c3836;
|
|
padding: 0.75rem 1.5rem;
|
|
}
|
|
|
|
.login-footer p { color: #665c54; font-size: 0.68rem; margin: 0; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="login-page">
|
|
<div class="login-container">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<h1>ROFMAD</h1>
|
|
<p>Initial Setup</p>
|
|
</div>
|
|
|
|
<div class="login-body">
|
|
<div class="setup-notice">
|
|
First-run: create the admin password to secure the web interface.
|
|
</div>
|
|
|
|
{% if error != "" %}
|
|
<div class="error-message">✗ {{ error }}</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="/setup">
|
|
<div class="form-group">
|
|
<label for="password">Admin Password</label>
|
|
<input type="password" id="password" name="password" required autofocus
|
|
placeholder="minimum 8 characters">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password_confirm">Confirm Password</label>
|
|
<input type="password" id="password_confirm" name="password_confirm" required
|
|
placeholder="repeat password">
|
|
</div>
|
|
<button type="submit" class="login-btn">Create Admin Account</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="login-footer">
|
|
<p>This page is only shown once</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelector('form').addEventListener('submit', function() {
|
|
const btn = this.querySelector('button[type="submit"]');
|
|
btn.textContent = 'Creating account\u2026';
|
|
btn.disabled = true;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|