111 lines
3.6 KiB
HTML
111 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>WFL Admin Login</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0f1115;
|
|
--panel: #171a21;
|
|
--panel-2: #1d222b;
|
|
--border: #2b3240;
|
|
--text: #e8ecf3;
|
|
--muted: #9aa4b2;
|
|
--accent: #4f8cff;
|
|
--accent-hover: #3e78e6;
|
|
--danger-bg: rgba(220, 53, 69, 0.14);
|
|
--danger-border: rgba(220, 53, 69, 0.45);
|
|
--info-bg: rgba(79, 140, 255, 0.14);
|
|
--info-border: rgba(79, 140, 255, 0.4);
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
|
|
--radius: 16px;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.card {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 28px;
|
|
}
|
|
h1 { margin: 0 0 8px; font-size: 28px; }
|
|
.subtitle { color: var(--muted); margin-bottom: 22px; }
|
|
.alert {
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
}
|
|
.alert-error { background: var(--danger-bg); border-color: var(--danger-border); }
|
|
.alert-info { background: var(--info-bg); border-color: var(--info-border); }
|
|
label { display: block; font-size: 14px; margin-bottom: 8px; }
|
|
input {
|
|
width: 100%;
|
|
min-height: 44px;
|
|
margin-bottom: 14px;
|
|
padding: 0 12px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-2);
|
|
color: var(--text);
|
|
outline: none;
|
|
}
|
|
input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
|
|
}
|
|
button {
|
|
width: 100%;
|
|
min-height: 46px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: var(--accent);
|
|
color: white;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: var(--accent-hover); }
|
|
.hint { color: var(--muted); font-size: 13px; margin-top: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>WFL Admin</h1>
|
|
<div class="subtitle">Вход в административный интерфейс</div>
|
|
|
|
{% if message %}
|
|
<div class="alert alert-info">{{ message }}</div>
|
|
{% endif %}
|
|
|
|
{% if error %}
|
|
<div class="alert alert-error">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="/login">
|
|
<label for="username">Логин</label>
|
|
<input id="username" name="username" type="text" autocomplete="username" required>
|
|
|
|
<label for="password">Пароль</label>
|
|
<input id="password" name="password" type="password" autocomplete="current-password" required>
|
|
|
|
<button type="submit">Войти</button>
|
|
</form>
|
|
|
|
<div class="hint">Сессия автоматически завершится после 2 часов без активности.</div>
|
|
</div>
|
|
</body>
|
|
</html>
|