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

04/16 Update new theme for GOV

Browse Source
This commit is contained in:
nngo
2026-04-16 13:40:29 -04:00
parent 03c9ca088c
commit f792bf2f67
4 changed files with 245 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+5 -2
View File
@@ -100,8 +100,11 @@ def create_app() -> Flask:
@app.context_processor @app.context_processor
def inject_company_name(): def inject_company_name():
"""Make COMPANY_NAME available to all templates""" """Make COMPANY_NAME and THEME_NAME available to all templates"""
return {'COMPANY_NAME': os.environ.get('COMPANY_NAME', 'QR Code Management System')} return {
'COMPANY_NAME': os.environ.get('COMPANY_NAME', 'QR Code Management System'),
'THEME_NAME': os.environ.get('THEME_NAME', ''),
}
@app.context_processor @app.context_processor
def inject_logging_status(): def inject_logging_status():
static/css/theme-gov.css
+127
View File
@@ -0,0 +1,127 @@
/**
* theme-gov.css
* =============
* UI theme overrides for GOV Services, Inc. (qr.govservicesinc.com)
*
* HOW IT WORKS
* ------------
* This file is loaded AFTER style.css when THEME_NAME=gov is set in .env.
* It overrides only the CSS custom properties defined in style.css :root,
* so every component that uses those variables (sidebar, buttons, login page,
* links, badges, focus rings) automatically adopts the new palette.
* No existing files are duplicated or heavily modified.
*
* TO CUSTOMISE
* ------------
* 1. Change --primary-color / --primary-hover to your desired brand colors.
* 2. Adjust --brand-text and --brand-icon-class below if needed.
* 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.
*
* ADDING A THIRD THEME (future)
* -----------------------------
* Create static/css/theme-{name}.css and set THEME_NAME={name} in that
* instance's .env. No code changes required.
*/
/* ------------------------------------------------------------------ */
/* 1. COLOR PALETTE — GOV Services green */
/* ------------------------------------------------------------------ */
:root {
/* Primary brand color: institutional green */
--primary-color: #1a6b3c;
--primary-hover: #145530;
/* Accent used for links, focus rings, active states */
--info-color: #1a6b3c;
}
/* ------------------------------------------------------------------ */
/* 2. SIDEBAR BRAND TEXT & ICON */
/* Replaces the hardcoded "QR Manager" text in base_authenticated */
/* ------------------------------------------------------------------ */
.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 */
/* ------------------------------------------------------------------ */
.footer-content p {
font-size: 0;
}
.footer-content p::after {
content: "© 2025 GOV Services, Inc. All rights reserved.";
font-size: 0.875rem;
color: var(--gray-500);
}
/* ------------------------------------------------------------------ */
/* 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 {
background: linear-gradient(
180deg,
var(--primary-color),
var(--primary-hover)
);
}
/* ------------------------------------------------------------------ */
/* 6. AUTH CONTAINER GRADIENT (login background) */
/* ------------------------------------------------------------------ */
.auth-container {
background: linear-gradient(
135deg,
var(--primary-color),
var(--primary-hover)
) !important;
}
.auth-logo {
background: linear-gradient(
135deg,
var(--primary-color),
var(--primary-hover)
) !important;
}
.auth-card::before {
background: linear-gradient(
90deg,
var(--primary-color),
var(--primary-hover)
) !important;
}
/* ------------------------------------------------------------------ */
/* 7. PAGE TITLE / BROWSER TAB — handled via COMPANY_NAME in .env */
/* (no CSS needed; Flask injects it from COMPANY_NAME=GOV. Serv...) */
/* ------------------------------------------------------------------ */
templates/base.html
+105 -97
View File
@@ -1,97 +1,105 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}{{ COMPANY_NAME }}{% endblock %}</title> <title>{% block title %}{{ COMPANY_NAME }}{% endblock %}</title>
<!-- Main CSS --> <!-- Main CSS -->
<link <link
rel="stylesheet" rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}" href="{{ url_for('static', filename='css/style.css') }}"
/> />
<!-- Font Awesome --> <!-- Theme Override (set THEME_NAME in .env to activate, e.g. THEME_NAME=gov) -->
<link {% if THEME_NAME %}
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" <link
rel="stylesheet" rel="stylesheet"
/> href="{{ url_for('static', filename='css/theme-' + THEME_NAME + '.css') }}"
/>
<!-- Page-specific CSS --> {% endif %}
{% block extra_head %}{% endblock %}
<!-- Font Awesome -->
<!-- Favicon --> <link
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="icon" rel="stylesheet"
type="image/x-icon" />
href="{{ url_for('static', filename='images/favicon.ico') }}"
/> <!-- Page-specific CSS -->
</head> {% block extra_head %}{% endblock %}
<body class="login-layout">
<!-- Non-authenticated Layout (Login, Register, etc.) --> <!-- Favicon -->
<main class="main-content"> <link
<!-- Flash Messages --> rel="icon"
{% with messages = get_flashed_messages(with_categories=true) %} {% if type="image/x-icon"
messages %} href="{{ url_for('static', filename='images/favicon.ico') }}"
<div class="flash-messages"> />
{% for category, message in messages %} </head>
<div class="alert alert-{{ category }}"> <body class="login-layout">
<i <!-- Non-authenticated Layout (Login, Register, etc.) -->
class="fas {% if category == 'success' %}fa-check-circle{% elif category == 'error' %}fa-exclamation-circle{% elif category == 'info' %}fa-info-circle{% else %}fa-exclamation-triangle{% endif %}" <main class="main-content">
></i> <!-- Flash Messages -->
{{ message }} {% with messages = get_flashed_messages(with_categories=true) %} {% if
<button messages %}
class="alert-close" <div class="flash-messages">
onclick="this.parentElement.style.display='none'" {% for category, message in messages %}
> <div class="alert alert-{{ category }}">
<i class="fas fa-times"></i> <i
</button> class="fas {% if category == 'success' %}fa-check-circle{% elif category == 'error' %}fa-exclamation-circle{% elif category == 'info' %}fa-info-circle{% else %}fa-exclamation-triangle{% endif %}"
</div> ></i>
{% endfor %} {{ message }}
</div> <button
{% endif %} {% endwith %} class="alert-close"
onclick="this.parentElement.style.display='none'"
<!-- Page Content --> >
<div class="container">{% block content %}{% endblock %}</div> <i class="fas fa-times"></i>
</main> </button>
</div>
<!-- Footer --> {% endfor %}
<footer class="footer"> </div>
<div class="container"> {% endif %} {% endwith %}
<div class="footer-content">
<p>&copy; 2025 QR Code Management System. All rights reserved.</p> <!-- Page Content -->
<div class="footer-links"> <div class="container">{% block content %}{% endblock %}</div>
<a href="#" class="footer-link">Privacy Policy</a> </main>
<a href="#" class="footer-link">Terms of Service</a>
<a href="#" class="footer-link">Support</a> <!-- Footer -->
</div> <footer class="footer">
</div> <div class="container">
</div> <div class="footer-content">
</footer> <p>&copy; 2025 QR Code Management System. All rights reserved.</p>
<div class="footer-links">
<!-- Main JavaScript --> <a href="#" class="footer-link">Privacy Policy</a>
<script src="{{ url_for('static', filename='js/script.js') }}"></script> <a href="#" class="footer-link">Terms of Service</a>
<a href="#" class="footer-link">Support</a>
<!-- Page-specific JavaScript --> </div>
{% block extra_scripts %}{% endblock %} </div>
</div>
<!-- Global JavaScript Variables --> </footer>
<script>
// Pass Flask session data to JavaScript <!-- Main JavaScript -->
window.qrConfig = { <script src="{{ url_for('static', filename='js/script.js') }}"></script>
currentUserId: {{ session.user_id|default('null') }},
currentUserRole: '{{ session.role|default('') }}', <!-- Page-specific JavaScript -->
currentUserName: '{{ session.full_name|default('') }}', {% block extra_scripts %}{% endblock %}
csrfToken: '{{ csrf_token() if csrf_token else '' }}'
}; <!-- Global JavaScript Variables -->
</script> <script>
{% if turnstile_enabled %} // Pass Flask session data to JavaScript
<!-- Cloudflare Turnstile --> window.qrConfig = {
<script currentUserId: {{ session.user_id|default('null') }},
src="https://challenges.cloudflare.com/turnstile/v0/api.js" currentUserRole: '{{ session.role|default('') }}',
async currentUserName: '{{ session.full_name|default('') }}',
defer csrfToken: '{{ csrf_token() if csrf_token else '' }}'
></script> };
{% endif %} </script>
</body> {% if turnstile_enabled %}
</html> <!-- Cloudflare Turnstile -->
<script
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
async
defer
></script>
{% endif %}
</body>
</html>
templates/base_authenticated.html
+8
View File
@@ -11,6 +11,14 @@
href="{{ url_for('static', filename='css/style.css') }}" href="{{ url_for('static', filename='css/style.css') }}"
/> />
<!-- Theme Override (set THEME_NAME in .env to activate, e.g. THEME_NAME=gov) -->
{% if THEME_NAME %}
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/theme-' + THEME_NAME + '.css') }}"
/>
{% endif %}
<!-- Font Awesome --> <!-- Font Awesome -->
<link <link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"