nngo/LT_Janitorial_Quality_Control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

04/27 Updated Login page background image

Browse Source
This commit is contained in:
nngo
2026-04-27 15:30:14 -04:00
parent 412c101b5f
commit ba1a9e8b86
1 changed files with 111 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/auth/login.html
+79 -13
View File
@@ -2,21 +2,79 @@
{% 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 %}
<div class="row justify-content-center mt-5">
<div class="col-10 col-sm-8 col-md-5 col-lg-4">
<div class="card shadow-lg">
<div class="card-header bg-primary text-white text-center py-4">
<h3><i class="bi bi-clipboard-check-fill"></i> Janitorial QC</h3>
<p class="mb-0">Quality Control System</p>
{# 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 p-4">
<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") }}
{{ form.username(class="form-control form-control-lg", placeholder="Enter username") }}
{{ 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 %}
@@ -25,7 +83,7 @@
</div>
<div class="mb-4">
{{ form.password.label(class="form-label") }}
{{ 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">
@@ -34,20 +92,28 @@
{% endif %}
</div>
<div class="mb-3 form-check">
<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"></i> Login
<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">
&copy; 2025 Janitorial QC System
</div>
</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 %}