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
+111 -45
View File
@@ -2,52 +2,118 @@
{% block title %}Login - Janitorial QC{% endblock %} {% block title %}Login - Janitorial QC{% endblock %}
{% block content %} {% block extra_css %}
<div class="row justify-content-center mt-5"> <style>
<div class="col-10 col-sm-8 col-md-5 col-lg-4"> /* ── Login page background ─────────────────────────────────────────────── */
<div class="card shadow-lg"> /* Scoped to this page only via the .login-page class set on <body> */
<div class="card-header bg-primary text-white text-center py-4"> body.login-page {
<h3><i class="bi bi-clipboard-check-fill"></i> Janitorial QC</h3> min-height: 100vh;
<p class="mb-0">Quality Control System</p> background:
</div> linear-gradient(rgba(10, 25, 50, 0.55), rgba(10, 25, 50, 0.55)),
<div class="card-body p-4"> url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1920&q=80")
<form method="POST" action="{{ url_for('auth.login') }}"> center center / cover no-repeat fixed;
{{ form.hidden_tag() }} }
<div class="mb-3">
{{ form.username.label(class="form-label") }}
{{ form.username(class="form-control form-control-lg", placeholder="Enter username") }}
{% 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") }}
{{ 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-3 form-check"> /* Ensure the content block fills the full viewport height so the card
{{ form.remember_me(class="form-check-input") }} appears centred against the background rather than near the top. */
{{ form.remember_me.label(class="form-check-label text-muted") }} body.login-page .login-wrapper {
</div> min-height: 100vh;
display: flex;
<button type="submit" class="btn btn-primary btn-lg w-100"> align-items: center;
<i class="bi bi-box-arrow-in-right"></i> Login justify-content: center;
</button> }
</form>
</div> /* Card polish — glass-style surface that reads well on the dark overlay */
<div class="card-footer text-center text-muted small"> body.login-page .login-card {
&copy; 2025 Janitorial QC System border: none;
</div> border-radius: 14px;
</div> 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>
<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">
&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 %} {% endblock %}