119 lines
3.8 KiB
HTML
119 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Login - Janitorial QC{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* ── Login page background ─────────────────────────────────────────────── */
|
|
/* Scoped to this page only via the .login-page class set on <body> */
|
|
body.login-page {
|
|
min-height: 100vh;
|
|
background:
|
|
linear-gradient(rgba(10, 25, 50, 0.55), rgba(10, 25, 50, 0.55)),
|
|
url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1920&q=80")
|
|
center center / cover no-repeat fixed;
|
|
}
|
|
|
|
/* Ensure the content block fills the full viewport height so the card
|
|
appears centred against the background rather than near the top. */
|
|
body.login-page .login-wrapper {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Card polish — glass-style surface that reads well on the dark overlay */
|
|
body.login-page .login-card {
|
|
border: none;
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(2px);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
}
|
|
|
|
body.login-page .login-card .card-header {
|
|
background: #0d6efd;
|
|
padding: 2rem 2rem 1.5rem;
|
|
border-bottom: none;
|
|
}
|
|
|
|
body.login-page .login-card .card-body {
|
|
padding: 2rem;
|
|
background: #fff;
|
|
}
|
|
|
|
body.login-page .login-card .card-footer {
|
|
background: #f8f9fa;
|
|
border-top: 1px solid #e9ecef;
|
|
padding: .75rem 2rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{# Add .login-page to <body> via a small inline script — Jinja has no direct
|
|
access to the <body> tag in base.html, so we set the class from JS on
|
|
DOMContentLoaded before first paint where possible, and also synchronously. #}
|
|
<script>document.body.classList.add('login-page');</script>
|
|
|
|
<div class="login-wrapper">
|
|
<div class="login-card card shadow-lg">
|
|
|
|
<div class="card-header text-white text-center">
|
|
<i class="bi bi-clipboard-check-fill fs-1 d-block mb-2"></i>
|
|
<h3 class="mb-0 fw-bold">Janitorial QC</h3>
|
|
<p class="mb-0 opacity-75 small">Quality Control System</p>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<form method="POST" action="{{ url_for('auth.login') }}">
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div class="mb-3">
|
|
{{ form.username.label(class="form-label fw-semibold") }}
|
|
{{ form.username(class="form-control form-control-lg", placeholder="Enter username", autofocus=true) }}
|
|
{% if form.username.errors %}
|
|
<div class="text-danger small mt-1">
|
|
{% for error in form.username.errors %}{{ error }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
{{ form.password.label(class="form-label fw-semibold") }}
|
|
{{ form.password(class="form-control form-control-lg", placeholder="Enter password") }}
|
|
{% if form.password.errors %}
|
|
<div class="text-danger small mt-1">
|
|
{% for error in form.password.errors %}{{ error }}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4 form-check">
|
|
{{ form.remember_me(class="form-check-input") }}
|
|
{{ form.remember_me.label(class="form-check-label text-muted") }}
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-lg w-100">
|
|
<i class="bi bi-box-arrow-in-right me-1"></i> Log In
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card-footer text-center text-muted small">
|
|
© 2025 Janitorial QC System
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{# Remove .login-page when navigating away (SPA-style guard) #}
|
|
<script>
|
|
window.addEventListener('pagehide', function () {
|
|
document.body.classList.remove('login-page');
|
|
});
|
|
</script>
|
|
{% endblock %} |