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

04/16 Update - Fixed login UI issue

Browse Source
This commit is contained in:
nngo
2026-04-16 16:41:44 -04:00
parent 94db74f030
commit fa6e7e9cfb
3 changed files with 204 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/theme-gov.css
+59 -59
View File
@@ -5,23 +5,24 @@
* *
* HOW IT WORKS * HOW IT WORKS
* ------------ * ------------
* This file is loaded AFTER style.css when THEME_NAME=gov is set in .env. * Loaded AFTER style.css but BEFORE page-specific CSS (e.g. auth.css).
* It overrides only the CSS custom properties defined in style.css :root, * Overrides CSS custom properties in :root so every component that uses
* so every component that uses those variables (sidebar, buttons, login page, * those variables (sidebar, buttons, login page, links, focus rings)
* links, badges, focus rings) automatically adopts the new palette. * adopts the new palette automatically.
* No existing files are duplicated or heavily modified.
* *
* TO CUSTOMISE * Brand text ("QR Manager" → COMPANY_NAME) is now handled directly in
* ------------ * templates via {{ COMPANY_NAME }} — no CSS tricks needed.
* 1. Change --primary-color / --primary-hover to your desired brand colors. *
* 2. Adjust --brand-text and --brand-icon-class below if needed. * TO CUSTOMISE COLORS
* 3. For the original LT Services instance: set THEME_NAME= (empty) in its * -------------------
* .env — this file will not load at all, leaving the default blue intact. * Change --primary-color / --primary-hover below.
* All gradients, buttons, focus rings, sidebar, and login page pick
* up the new values automatically via CSS variable inheritance.
* *
* ADDING A THIRD THEME (future) * ADDING A THIRD THEME (future)
* ----------------------------- * -----------------------------
* Create static/css/theme-{name}.css and set THEME_NAME={name} in that * Create static/css/theme-{name}.css and set THEME_NAME={name} in
* instance's .env. No code changes required. * that instance's .env. No code changes required.
*/ */
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -33,52 +34,12 @@
--primary-hover: #15803d; --primary-hover: #15803d;
/* Accent used for links, focus rings, active states */ /* Accent used for links, focus rings, active states */
--info-color: #16a34a; --info-color: #16a34a;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
/* 2. SIDEBAR BRAND TEXT & ICON */ /* 2. SIDEBAR GRADIENT */
/* Replaces the hardcoded "QR Manager" text in base_authenticated */ /* Re-declared to consume the new variables above. */
/* ------------------------------------------------------------------ */
.brand-text::before {
content: "GOV QR";
}
.sidebar-brand .brand-content > span.brand-text {
/* Hide the original text node rendered by the template,
show our pseudo-element instead. */
font-size: 0;
}
.sidebar-brand .brand-content > span.brand-text::before {
font-size: 1.125rem; /* matches original brand-text size */
font-weight: 700;
letter-spacing: 0.02em;
}
/* ------------------------------------------------------------------ */
/* 3. LOGIN PAGE HEADER ("QR Manager" h1) */
/* Replaces the hardcoded h1 in login.html without editing the file */
/* ------------------------------------------------------------------ */
.auth-header h1 {
font-size: 0 !important; /* hide original text */
}
.auth-header h1::before {
content: "GOV Services";
font-size: 2.25rem !important;
font-weight: 700 !important;
color: var(--gray-900) !important;
}
/* ------------------------------------------------------------------ */
/* 4. FOOTER COPYRIGHT LINE */
/* Now handled dynamically in base.html / base_authenticated.html */
/* via {{ CURRENT_YEAR }} and {{ COMPANY_NAME }} — no CSS needed. */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* 5. SIDEBAR GRADIENT — re-declare to pick up new variables */
/* (Browsers resolve var() at paint time so this block is only */
/* needed if the gradient was hard-coded; here it is variable- */
/* driven, so this section is a safety net.) */
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.sidebar { .sidebar {
background: linear-gradient( background: linear-gradient(
@@ -89,8 +50,12 @@
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
/* 6. AUTH CONTAINER GRADIENT (login background) */ /* 3. LOGIN PAGE — auth.css loads after this file (via extra_head) so */
/* we must use !important to win the cascade on rules that auth.css */
/* also declares with !important. */
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
/* Login background gradient */
.auth-container { .auth-container {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
@@ -99,6 +64,7 @@
) !important; ) !important;
} }
/* Logo circle gradient */
.auth-logo { .auth-logo {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
@@ -107,6 +73,7 @@
) !important; ) !important;
} }
/* Card top accent stripe */
.auth-card::before { .auth-card::before {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
@@ -115,7 +82,40 @@
) !important; ) !important;
} }
/* Sign In button gradient */
.auth-form .btn-primary {
background: linear-gradient(
135deg,
var(--primary-color),
var(--primary-hover)
) !important;
}
/* Input focus border colour */
.auth-form .form-group input:focus {
border-color: var(--primary-color) !important;
/* Override the hardcoded blue rgba(37,99,235) in auth.css */
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15) !important;
}
/* Focused label colour */
.auth-form .form-group.focused label {
color: var(--primary-color) !important;
}
/* Label icon colour */
.auth-form .form-group label i {
color: var(--primary-color) !important;
}
/* Focus accessibility outline */
.auth-form .btn:focus,
.auth-form .form-group input:focus {
outline-color: var(--primary-color) !important;
}
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
/* 7. PAGE TITLE / BROWSER TAB — handled via COMPANY_NAME in .env */ /* 4. FOOTER COPYRIGHT */
/* (no CSS needed; Flask injects it from COMPANY_NAME=GOV. Serv...) */ /* Handled dynamically in templates via {{ CURRENT_YEAR }} and */
/* {{ COMPANY_NAME }} — no CSS override needed here. */
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
templates/base_authenticated.html
+1 -1
View File
@@ -44,7 +44,7 @@
<div class="sidebar-brand"> <div class="sidebar-brand">
<div class="brand-content"> <div class="brand-content">
<i class="fas fa-qrcode"></i> <i class="fas fa-qrcode"></i>
<span class="brand-text">QR Manager</span> <span class="brand-text">{{ COMPANY_NAME }}</span>
</div> </div>
</div> </div>
templates/login.html
+144 -144
View File
@@ -1,145 +1,145 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Login - QR Code Management{% endblock %} {% block title %}Login - QR Code Management{% endblock %}
{% block extra_styles %} {% block extra_styles %}
<!-- Include the new authentication styles --> <!-- Include the new authentication styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="auth-container"> <div class="auth-container">
<div class="auth-card"> <div class="auth-card">
<div class="auth-header"> <div class="auth-header">
<div class="auth-logo"> <div class="auth-logo">
<i class="fas fa-qrcode"></i> <i class="fas fa-qrcode"></i>
</div> </div>
<h1>QR Manager</h1> <h1>{{ COMPANY_NAME }}</h1>
<p>Sign in to your account</p> <p>Sign in to your account</p>
</div> </div>
<form method="POST" class="auth-form" id="loginForm"> <form method="POST" class="auth-form" id="loginForm">
<div class="form-group"> <div class="form-group">
<label for="username"> <label for="username">
<i class="fas fa-user"></i> <i class="fas fa-user"></i>
Username Username
</label> </label>
<input type="text" id="username" name="username" required /> <input type="text" id="username" name="username" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password"> <label for="password">
<i class="fas fa-lock"></i> <i class="fas fa-lock"></i>
Password Password
</label> </label>
<input type="password" id="password" name="password" required /> <input type="password" id="password" name="password" required />
</div> </div>
<!-- Remember Me Checkbox --> <!-- Remember Me Checkbox -->
<div class="form-group" style="margin-top: 1rem; margin-bottom: 1.5rem;"> <div class="form-group" style="margin-top: 1rem; margin-bottom: 1.5rem;">
<label style="display: flex; align-items: center; cursor: pointer; font-weight: normal;"> <label style="display: flex; align-items: center; cursor: pointer; font-weight: normal;">
<input <input
type="checkbox" type="checkbox"
id="remember_me" id="remember_me"
name="remember_me" name="remember_me"
style="margin-right: 0.5rem; width: auto; cursor: pointer;" style="margin-right: 0.5rem; width: auto; cursor: pointer;"
/> />
<span>Remember me for 30 days</span> <span>Remember me for 30 days</span>
</label> </label>
</div> </div>
<!-- Turnstile Integration --> <!-- Turnstile Integration -->
{% if turnstile_enabled %} {% if turnstile_enabled %}
<div class="form-group turnstile-container"> <div class="form-group turnstile-container">
<div class="cf-turnstile" <div class="cf-turnstile"
data-sitekey="{{ turnstile_site_key }}" data-sitekey="{{ turnstile_site_key }}"
data-callback="onTurnstileSuccess" data-callback="onTurnstileSuccess"
data-expired-callback="onTurnstileExpired" data-expired-callback="onTurnstileExpired"
data-theme="light" data-theme="light"
data-language="en"> data-language="en">
</div> </div>
</div> </div>
{% endif %} {% endif %}
<button type="submit" class="btn btn-primary btn-full"> <button type="submit" class="btn btn-primary btn-full">
<i class="fas fa-sign-in-alt"></i> <i class="fas fa-sign-in-alt"></i>
Sign In Sign In
</button> </button>
</form> </form>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block extra_scripts %} {% block extra_scripts %}
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector(".auth-form"); const form = document.querySelector(".auth-form");
const inputs = form.querySelectorAll("input"); const inputs = form.querySelectorAll("input");
// Add focus effects with improved visual feedback // Add focus effects with improved visual feedback
inputs.forEach((input) => { inputs.forEach((input) => {
input.addEventListener("focus", function () { input.addEventListener("focus", function () {
this.parentElement.classList.add("focused"); this.parentElement.classList.add("focused");
}); });
input.addEventListener("blur", function () { input.addEventListener("blur", function () {
if (!this.value) { if (!this.value) {
this.parentElement.classList.remove("focused"); this.parentElement.classList.remove("focused");
} }
}); });
// Keep focus state if input has value // Keep focus state if input has value
if (input.value) { if (input.value) {
input.parentElement.classList.add("focused"); input.parentElement.classList.add("focused");
} }
}); });
// Enhanced form validation with Turnstile // Enhanced form validation with Turnstile
form.addEventListener("submit", function(e) { form.addEventListener("submit", function(e) {
{% if turnstile_enabled %} {% if turnstile_enabled %}
// Check if Turnstile is completed // Check if Turnstile is completed
const turnstileResponse = document.querySelector('[name="cf-turnstile-response"]'); const turnstileResponse = document.querySelector('[name="cf-turnstile-response"]');
if (!turnstileResponse || !turnstileResponse.value) { if (!turnstileResponse || !turnstileResponse.value) {
e.preventDefault(); e.preventDefault();
// Highlight Turnstile container // Highlight Turnstile container
const turnstileContainer = document.querySelector('.turnstile-container'); const turnstileContainer = document.querySelector('.turnstile-container');
if (turnstileContainer) { if (turnstileContainer) {
turnstileContainer.classList.add('turnstile-error'); turnstileContainer.classList.add('turnstile-error');
setTimeout(() => { setTimeout(() => {
turnstileContainer.classList.remove('turnstile-error'); turnstileContainer.classList.remove('turnstile-error');
}, 3000); }, 3000);
} }
// Show error message // Show error message
alert('Please complete the security verification.'); alert('Please complete the security verification.');
return false; return false;
} }
{% endif %} {% endif %}
// Show loading state // Show loading state
const submitButton = form.querySelector('button[type="submit"]'); const submitButton = form.querySelector('button[type="submit"]');
if (submitButton) { if (submitButton) {
submitButton.disabled = true; submitButton.disabled = true;
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...'; submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
} }
}); });
}); });
// Turnstile callback functions // Turnstile callback functions
{% if turnstile_enabled %} {% if turnstile_enabled %}
function onTurnstileSuccess(token) { function onTurnstileSuccess(token) {
// Remove any error styling // Remove any error styling
const turnstileContainer = document.querySelector('.turnstile-container'); const turnstileContainer = document.querySelector('.turnstile-container');
if (turnstileContainer) { if (turnstileContainer) {
turnstileContainer.classList.remove('turnstile-error'); turnstileContainer.classList.remove('turnstile-error');
} }
console.log('Turnstile verification successful'); console.log('Turnstile verification successful');
} }
function onTurnstileExpired() { function onTurnstileExpired() {
// Reset form if Turnstile expires // Reset form if Turnstile expires
console.log('Turnstile expired, please verify again'); console.log('Turnstile expired, please verify again');
} }
{% endif %} {% endif %}
</script> </script>
{% endblock %} {% endblock %}