252 lines
8.2 KiB
HTML
252 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sign In — PFM</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--accent: #3b82f6;
|
|
--accent-dark: #1d4ed8;
|
|
--bg: #0f172a;
|
|
--card-bg: #1e293b;
|
|
--border: #334155;
|
|
--text: #f1f5f9;
|
|
--muted: #94a3b8;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'DM Sans', sans-serif;
|
|
background: var(--bg);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Background grid pattern */
|
|
body::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Glow blob */
|
|
body::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -200px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.login-wrap {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 20px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.login-brand {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
.login-brand .brand-icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
background: var(--accent);
|
|
border-radius: 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
color: #fff;
|
|
margin-bottom: 14px;
|
|
box-shadow: 0 0 0 6px rgba(59,130,246,0.15);
|
|
}
|
|
.login-brand h1 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.login-brand p {
|
|
font-size: 13.5px;
|
|
color: var(--muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.login-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 28px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.form-control {
|
|
background: #0f172a;
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
font-size: 14px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
transition: all 0.2s;
|
|
}
|
|
.form-control:focus {
|
|
background: #0f172a;
|
|
border-color: var(--accent);
|
|
color: var(--text);
|
|
box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
|
|
}
|
|
.form-control::placeholder { color: #475569; }
|
|
|
|
.input-group-text {
|
|
background: #0f172a;
|
|
border-color: var(--border);
|
|
color: #475569;
|
|
}
|
|
|
|
.btn-login {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 11px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-family: 'DM Sans', sans-serif;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.btn-login:hover {
|
|
background: var(--accent-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 16px rgba(59,130,246,0.35);
|
|
}
|
|
.btn-login:active { transform: translateY(0); }
|
|
|
|
.form-check-label { font-size: 13px; color: var(--muted); }
|
|
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
|
|
|
|
.alert {
|
|
border-radius: 8px;
|
|
font-size: 13.5px;
|
|
padding: 10px 14px;
|
|
}
|
|
.alert-danger { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
|
|
|
|
.login-footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 12px;
|
|
color: #334155;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-wrap">
|
|
<div class="login-brand">
|
|
<div class="brand-icon"><i class="bi bi-currency-exchange"></i></div>
|
|
<h1>Personal Finance</h1>
|
|
<p>Sign in to your dashboard</p>
|
|
</div>
|
|
|
|
<div class="login-card">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else category }} mb-3">
|
|
<i class="bi bi-exclamation-circle me-1"></i>{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" action="{{ url_for('auth.login') }}" novalidate>
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div class="mb-3">
|
|
{{ form.username.label(class="form-label") }}
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
|
{{ form.username(class="form-control" + (" is-invalid" if form.username.errors else ""),
|
|
placeholder="Username", autocomplete="username") }}
|
|
</div>
|
|
{% for error in form.username.errors %}
|
|
<div class="text-danger mt-1" style="font-size:12px;">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
{{ form.password.label(class="form-label") }}
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
|
{{ form.password(class="form-control" + (" is-invalid" if form.password.errors else ""),
|
|
placeholder="Password", autocomplete="current-password",
|
|
id="passwordInput") }}
|
|
<button type="button" class="input-group-text" style="cursor:pointer;"
|
|
onclick="togglePassword()">
|
|
<i class="bi bi-eye" id="pwdToggleIcon"></i>
|
|
</button>
|
|
</div>
|
|
{% for error in form.password.errors %}
|
|
<div class="text-danger mt-1" style="font-size:12px;">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="form-check">
|
|
{{ form.remember_me(class="form-check-input") }}
|
|
{{ form.remember_me.label(class="form-check-label") }}
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-login">
|
|
<i class="bi bi-box-arrow-in-right me-1"></i> Sign In
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="login-footer">Self-hosted · Private · Secure</div>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword() {
|
|
const input = document.getElementById('passwordInput');
|
|
const icon = document.getElementById('pwdToggleIcon');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.className = 'bi bi-eye-slash';
|
|
} else {
|
|
input.type = 'password';
|
|
icon.className = 'bi bi-eye';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|