83 lines
2.6 KiB
HTML
83 lines
2.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}登入 — alterdb{% endblock %}
|
|
{% block style %}
|
|
<style>
|
|
.login-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.1rem;
|
|
max-width: 22rem;
|
|
margin: 3rem auto 0;
|
|
padding: 2rem;
|
|
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
|
|
border-radius: 10px;
|
|
}
|
|
.login-card h2 { margin: 0; }
|
|
.login-card label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .35rem;
|
|
font-weight: 600;
|
|
}
|
|
.login-card input {
|
|
font: inherit;
|
|
padding: .5rem .65rem;
|
|
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
.login-card button {
|
|
font: inherit;
|
|
font-weight: 600;
|
|
padding: .55rem 1rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
}
|
|
.login-card button:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
|
|
.login-card .error {
|
|
margin: 0;
|
|
padding: .5rem .75rem;
|
|
border-radius: 6px;
|
|
color: light-dark(#b3261e, #ffb4ab);
|
|
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
}
|
|
.login-card .notice {
|
|
margin: 0;
|
|
padding: .5rem .75rem;
|
|
border-radius: 6px;
|
|
color: light-dark(#146c2e, #6fdd8b);
|
|
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
}
|
|
.login-card .hint { font-size: .85rem; opacity: .7; margin: 0; }
|
|
</style>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="page">
|
|
<header class="site-header">
|
|
<h1>alterdb</h1>
|
|
<button type="button" class="theme-toggle" data-theme-toggle>深色模式</button>
|
|
</header>
|
|
<form class="login-card" method="post" action="/login">
|
|
<h2>登入管理介面</h2>
|
|
{% if let Some(message) = notice %}
|
|
<p class="notice" role="status">{{ message }}</p>
|
|
{% endif %}
|
|
{% if let Some(message) = error %}
|
|
<p class="error" role="alert">{{ message }}</p>
|
|
{% endif %}
|
|
<label>用戶名
|
|
<input type="text" name="username" required autofocus autocomplete="username">
|
|
</label>
|
|
<label>密碼
|
|
<input type="password" name="password" required autocomplete="current-password">
|
|
</label>
|
|
<button type="submit">登入</button>
|
|
<p class="hint">默認管理員帳號為 <code>admin</code> / <code>admin</code>，建議登入後儘早於側邊欄變更密碼。</p>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|