04/16 Update new theme for GOV
This commit is contained in:
@@ -100,8 +100,11 @@ def create_app() -> Flask:
|
||||
|
||||
@app.context_processor
|
||||
def inject_company_name():
|
||||
"""Make COMPANY_NAME available to all templates"""
|
||||
return {'COMPANY_NAME': os.environ.get('COMPANY_NAME', 'QR Code Management System')}
|
||||
"""Make COMPANY_NAME and THEME_NAME available to all templates"""
|
||||
return {
|
||||
'COMPANY_NAME': os.environ.get('COMPANY_NAME', 'QR Code Management System'),
|
||||
'THEME_NAME': os.environ.get('THEME_NAME', ''),
|
||||
}
|
||||
|
||||
@app.context_processor
|
||||
def inject_logging_status():
|
||||
|
||||
@@ -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...) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
+105
-97
@@ -1,97 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{% block title %}{{ COMPANY_NAME }}{% endblock %}</title>
|
||||
|
||||
<!-- Main CSS -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/style.css') }}"
|
||||
/>
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Page-specific CSS -->
|
||||
{% block extra_head %}{% endblock %}
|
||||
|
||||
<!-- Favicon -->
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="{{ url_for('static', filename='images/favicon.ico') }}"
|
||||
/>
|
||||
</head>
|
||||
<body class="login-layout">
|
||||
<!-- Non-authenticated Layout (Login, Register, etc.) -->
|
||||
<main class="main-content">
|
||||
<!-- Flash Messages -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||
messages %}
|
||||
<div class="flash-messages">
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }}">
|
||||
<i
|
||||
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 %}"
|
||||
></i>
|
||||
{{ message }}
|
||||
<button
|
||||
class="alert-close"
|
||||
onclick="this.parentElement.style.display='none'"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %} {% endwith %}
|
||||
|
||||
<!-- Page Content -->
|
||||
<div class="container">{% block content %}{% endblock %}</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<p>© 2025 QR Code Management System. All rights reserved.</p>
|
||||
<div class="footer-links">
|
||||
<a href="#" class="footer-link">Privacy Policy</a>
|
||||
<a href="#" class="footer-link">Terms of Service</a>
|
||||
<a href="#" class="footer-link">Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Main JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
||||
|
||||
<!-- Page-specific JavaScript -->
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
|
||||
<!-- Global JavaScript Variables -->
|
||||
<script>
|
||||
// Pass Flask session data to JavaScript
|
||||
window.qrConfig = {
|
||||
currentUserId: {{ session.user_id|default('null') }},
|
||||
currentUserRole: '{{ session.role|default('') }}',
|
||||
currentUserName: '{{ session.full_name|default('') }}',
|
||||
csrfToken: '{{ csrf_token() if csrf_token else '' }}'
|
||||
};
|
||||
</script>
|
||||
{% if turnstile_enabled %}
|
||||
<!-- Cloudflare Turnstile -->
|
||||
<script
|
||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
|
||||
async
|
||||
defer
|
||||
></script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{% block title %}{{ COMPANY_NAME }}{% endblock %}</title>
|
||||
|
||||
<!-- Main CSS -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
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 -->
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Page-specific CSS -->
|
||||
{% block extra_head %}{% endblock %}
|
||||
|
||||
<!-- Favicon -->
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="{{ url_for('static', filename='images/favicon.ico') }}"
|
||||
/>
|
||||
</head>
|
||||
<body class="login-layout">
|
||||
<!-- Non-authenticated Layout (Login, Register, etc.) -->
|
||||
<main class="main-content">
|
||||
<!-- Flash Messages -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||
messages %}
|
||||
<div class="flash-messages">
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }}">
|
||||
<i
|
||||
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 %}"
|
||||
></i>
|
||||
{{ message }}
|
||||
<button
|
||||
class="alert-close"
|
||||
onclick="this.parentElement.style.display='none'"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %} {% endwith %}
|
||||
|
||||
<!-- Page Content -->
|
||||
<div class="container">{% block content %}{% endblock %}</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<p>© 2025 QR Code Management System. All rights reserved.</p>
|
||||
<div class="footer-links">
|
||||
<a href="#" class="footer-link">Privacy Policy</a>
|
||||
<a href="#" class="footer-link">Terms of Service</a>
|
||||
<a href="#" class="footer-link">Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Main JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
||||
|
||||
<!-- Page-specific JavaScript -->
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
|
||||
<!-- Global JavaScript Variables -->
|
||||
<script>
|
||||
// Pass Flask session data to JavaScript
|
||||
window.qrConfig = {
|
||||
currentUserId: {{ session.user_id|default('null') }},
|
||||
currentUserRole: '{{ session.role|default('') }}',
|
||||
currentUserName: '{{ session.full_name|default('') }}',
|
||||
csrfToken: '{{ csrf_token() if csrf_token else '' }}'
|
||||
};
|
||||
</script>
|
||||
{% if turnstile_enabled %}
|
||||
<!-- Cloudflare Turnstile -->
|
||||
<script
|
||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
|
||||
async
|
||||
defer
|
||||
></script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -11,6 +11,14 @@
|
||||
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 -->
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
|
||||
Reference in New Issue
Block a user