From e71567db11704c6b2260bf08e0698cad65de88bc Mon Sep 17 00:00:00 2001 From: AIIrondev Date: Mon, 14 Sep 2026 10:54:19 +0200 Subject: [PATCH] changes toi the darkmode style to have iot be a better edesign --- Web/templates/admin_audit.html | 107 +++++++++++++++-- Web/templates/library_borrowings_admin.html | 121 ++++++++++++++++++++ Web/templates/library_item_invoices.html | 66 +++++++++++ Web/templates/library_table.html | 78 +++++++++---- Web/templates/license.html | 72 +++++++++++- Web/templates/logs.html | 80 ++++++++++++- Web/templates/manage_locations.html | 50 ++++++-- Web/templates/register.html | 105 ++++++++++++++++- Web/templates/student_cards_admin.html | 82 +++++++++++++ Web/templates/termin_configure.html | 75 +++++++++++- Web/templates/upload_admin.html | 88 +++++++++++++- 11 files changed, 868 insertions(+), 56 deletions(-) diff --git a/Web/templates/admin_audit.html b/Web/templates/admin_audit.html index 08fb2ac..c130ed5 100644 --- a/Web/templates/admin_audit.html +++ b/Web/templates/admin_audit.html @@ -1,12 +1,103 @@ {% extends 'base.html' %} {% block title %}Audit Dashboard - {{ APP_VERSION }}{% endblock %} {% block content %} +

Audit Dashboard

Integritätsstatus der Audit-Chain und letzte Audit-Ereignisse (max. 200 Einträge).

-
+

✓ Professionelle PDF-Exporte: Die neuen DIN 5008 konformen Berichte sind speziell für Schulträger, Rechnungsprüfungsämter und Behörden optimiert. Sie enthalten Revisionssicherheit, Barrierefreiheit (BFSG) und @@ -16,7 +107,7 @@

-
+

📄 PDF-Export (DIN 5008 konform)

Professionelle Berichte für Schulträger und Behörden

@@ -29,7 +120,7 @@
-
+
Chain Status
{% if verify_result.ok %}
OK
@@ -37,11 +128,11 @@
FEHLER
{% endif %}
-
+
Einträge
{{ verify_result.count }}
-
+
Letzter Index
{{ verify_result.last_chain_index }}
@@ -52,7 +143,7 @@
{% if verify_result.mismatches %} -
+

Integritätsabweichungen

@@ -79,9 +170,9 @@ {% endif %} -
+

Letzte Audit-Ereignisse

-
+
diff --git a/Web/templates/library_borrowings_admin.html b/Web/templates/library_borrowings_admin.html index 0f27078..3c8904e 100644 --- a/Web/templates/library_borrowings_admin.html +++ b/Web/templates/library_borrowings_admin.html @@ -205,6 +205,122 @@ color: #6b7280; } + :root[data-theme="dark"] .library-admin-hero { + background: linear-gradient(135deg, #172554 0%, #1e293b 100%); + border-color: var(--ui-border); + box-shadow: var(--ui-shadow-md); + } + + :root[data-theme="dark"] .library-admin-hero p, + :root[data-theme="dark"] .summary-card .label, + :root[data-theme="dark"] .muted, + :root[data-theme="dark"] .empty-state { + color: var(--ui-text-muted) !important; + } + + :root[data-theme="dark"] .summary-card, + :root[data-theme="dark"] .panel { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + box-shadow: var(--ui-shadow-sm); + } + + :root[data-theme="dark"] .summary-card .value, + :root[data-theme="dark"] .panel h2 { + color: var(--ui-title) !important; + } + + :root[data-theme="dark"] .filter-bar input, + :root[data-theme="dark"] .filter-bar select { + background: var(--ui-bg) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] .filter-bar input:focus, + :root[data-theme="dark"] .filter-bar select:focus { + outline: none; + border-color: #60a5fa !important; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22); + } + + :root[data-theme="dark"] .library-table, + :root[data-theme="dark"] .library-table td { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] .library-table th { + background: var(--ui-surface-soft) !important; + color: var(--ui-text-muted) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] .library-table tr:hover td { + background: var(--ui-bg-accent) !important; + } + + :root[data-theme="dark"] .badge-active { + background: #172554; + color: #bfdbfe; + } + + :root[data-theme="dark"] .badge-planned { + background: #422006; + color: #fde68a; + } + + :root[data-theme="dark"] .badge-completed, + :root[data-theme="dark"] .badge-paid { + background: #123524; + color: #b7f7ce; + } + + :root[data-theme="dark"] .badge-open, + :root[data-theme="dark"] .badge-damaged { + background: #451a1a; + color: #fecaca; + } + + :root[data-theme="dark"] .badge-class { + background: var(--ui-surface-soft); + color: var(--ui-text); + border-color: var(--ui-border); + } + + :root[data-theme="dark"] .row-actions .btn-outline-danger { + background: #451a1a; + color: #fca5a5; + border-color: #f87171; + } + + :root[data-theme="dark"] .row-actions .btn-outline-danger:hover { + background: #dc2626; + color: #ffffff; + } + + :root[data-theme="dark"] #damage-invoice-modal > div, + :root[data-theme="dark"] #repair-action-modal > div { + background: var(--ui-overlay-surface) !important; + color: var(--ui-text) !important; + border: 1px solid var(--ui-overlay-border); + } + + :root[data-theme="dark"] #damage-invoice-modal input, + :root[data-theme="dark"] #damage-invoice-modal textarea, + :root[data-theme="dark"] #repair-action-modal input { + background: var(--ui-bg) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] #damage-invoice-modal p, + :root[data-theme="dark"] #repair-action-modal p { + color: var(--ui-text-muted) !important; + } + @media (max-width: 900px) { .library-admin-hero { flex-direction: column; @@ -219,6 +335,11 @@ overflow-x: auto; white-space: nowrap; } + + .library-admin-shell { + padding-left: 10px; + padding-right: 10px; + } } diff --git a/Web/templates/library_item_invoices.html b/Web/templates/library_item_invoices.html index 27297de..ed68239 100644 --- a/Web/templates/library_item_invoices.html +++ b/Web/templates/library_item_invoices.html @@ -112,7 +112,73 @@ padding: 36px 20px; } + :root[data-theme="dark"] .invoice-history-head { + background: linear-gradient(135deg, #172554 0%, #1e293b 100%); + border-color: var(--ui-border); + box-shadow: var(--ui-shadow-md); + } + + :root[data-theme="dark"] .head-meta, + :root[data-theme="dark"] .muted, + :root[data-theme="dark"] .empty-state { + color: var(--ui-text-muted) !important; + } + + :root[data-theme="dark"] .section-header { + color: var(--ui-title) !important; + } + + :root[data-theme="dark"] .invoice-card { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + box-shadow: var(--ui-shadow-sm); + } + + :root[data-theme="dark"] .invoice-table, + :root[data-theme="dark"] .invoice-table td { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] .invoice-table th { + background: var(--ui-surface-soft) !important; + color: var(--ui-text-muted) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] .invoice-table tr:hover td { + background: var(--ui-bg-accent) !important; + } + + :root[data-theme="dark"] .badge-open { + background: #451a1a; + color: #fecaca; + } + + :root[data-theme="dark"] .badge-paid, + :root[data-theme="dark"] .badge-completed { + background: #123524; + color: #b7f7ce; + } + + :root[data-theme="dark"] .badge-active { + background: #172554; + color: #bfdbfe; + } + + :root[data-theme="dark"] .badge-planned { + background: #422006; + color: #fde68a; + } + @media (max-width: 900px) { + .invoice-history-shell { + padding-left: 10px; + padding-right: 10px; + } + .invoice-table { display: block; overflow-x: auto; diff --git a/Web/templates/library_table.html b/Web/templates/library_table.html index ad024e9..4743d4c 100644 --- a/Web/templates/library_table.html +++ b/Web/templates/library_table.html @@ -95,10 +95,18 @@ flex: 1; min-width: 250px; padding: 12px 16px; - border: 1px solid #ddd; - border-radius: 6px; + border: 1px solid var(--ui-border); + border-radius: 10px; font-size: 16px; - background: #fff; + background: var(--ui-surface); + color: var(--ui-text); + transition: border-color 0.2s ease, box-shadow 0.2s ease; + } + + .library-search-input:focus { + outline: none; + border-color: #60a5fa; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); } .library-scan-panel { @@ -138,34 +146,35 @@ /* Filters */ .library-filter-toggle-btn { padding: 10px 16px; - background: #f0f2f5; - border: 1px solid #ddd; - border-radius: 6px; - font-weight: 500; + background: var(--ui-surface-soft); + border: 1px solid var(--ui-border); + border-radius: 10px; + font-weight: 700; color: var(--ui-text); cursor: pointer; - transition: all 0.2s ease; + transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .library-filter-toggle-btn:hover { - background: #e4e6eb; - border-color: #999; + background: var(--ui-bg-accent); + border-color: #60a5fa; } .library-filter-toggle-btn.active { - background: #e0e7ff; - border-color: #4f46e5; - color: #4f46e5; + background: var(--module-primary-color); + border-color: var(--module-primary-color); + color: #ffffff; + box-shadow: 0 0 0 3px var(--module-accent-light); } .library-filter-panel { display: none; - background: #fff; - border: 1px solid #ddd; - border-radius: 8px; - padding: 20px; + background: var(--ui-surface); + border: 1px solid var(--ui-border); + border-radius: 12px; + padding: 18px; margin-bottom: 20px; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); + box-shadow: var(--ui-shadow-sm); } .library-filter-panel.open { @@ -198,34 +207,53 @@ .filter-item input, .filter-item select { padding: 8px 12px; - border: 1px solid #ddd; - border-radius: 4px; + border: 1px solid var(--ui-border); + border-radius: 8px; font-size: 14px; - background: #fff; + background: var(--ui-bg); + color: var(--ui-text); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .filter-item input:focus, .filter-item select:focus { outline: none; - border-color: #4f46e5; - box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); + border-color: #60a5fa; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); } .filter-buttons { display: flex; + flex-wrap: wrap; gap: 10px; margin-top: 15px; padding-top: 15px; - border-top: 1px solid #eee; + border-top: 1px solid var(--ui-border); } .filter-buttons .button { - flex: 1; + flex: 0 1 auto; padding: 8px 16px; font-size: 14px; } + #clearFilterBtn { + background: var(--ui-surface-soft) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + .filter-buttons > div[style*="flex-grow"] { + flex: 1 1 100%; + min-width: 12px; + } + + @media (min-width: 900px) { + .filter-buttons > div[style*="flex-grow"] { + flex: 1 1 auto; + } + } + /* ========================================= 4. Tables & Data Display ========================================= */ diff --git a/Web/templates/license.html b/Web/templates/license.html index b3793a7..12b5839 100755 --- a/Web/templates/license.html +++ b/Web/templates/license.html @@ -174,29 +174,33 @@ {% endblock %} diff --git a/Web/templates/logs.html b/Web/templates/logs.html index 1cef916..38bd7a1 100755 --- a/Web/templates/logs.html +++ b/Web/templates/logs.html @@ -229,9 +229,11 @@ #searchInput { padding: 8px; - border: 1px solid #ddd; + border: 1px solid var(--ui-border); border-radius: 4px; width: 200px; + background: var(--ui-bg); + color: var(--ui-text); } .date-range { @@ -242,8 +244,17 @@ .date-range input { padding: 8px; - border: 1px solid #ddd; + border: 1px solid var(--ui-border); border-radius: 4px; + background: var(--ui-bg); + color: var(--ui-text); + } + + #searchInput:focus, + .date-range input:focus { + outline: none; + border-color: #60a5fa; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22); } .status-badge { display: inline-block; @@ -308,13 +319,15 @@ table { width: 100%; border-collapse: collapse; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + background: var(--ui-surface); + color: var(--ui-text); + box-shadow: var(--ui-shadow-sm); } th, td { padding: 12px 15px; text-align: left; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--ui-border); } th { @@ -328,7 +341,7 @@ } tbody tr:hover { - background-color: #f5f5f5; + background-color: var(--ui-bg-accent); } .navigation-buttons { @@ -358,6 +371,52 @@ .export-button:hover { background-color: #218838; } + + :root[data-theme="dark"] .conflict-summary-banner { + background: #422006 !important; + border-color: #f59e0b !important; + border-left-color: #fb923c !important; + color: #fde68a !important; + } + + :root[data-theme="dark"] .banner-close { + color: #fde68a; + } + + :root[data-theme="dark"] .banner-close:hover { + color: #fff7ed; + } + + :root[data-theme="dark"] .conflict-badge { + background: #422006 !important; + border-color: #f59e0b !important; + color: #fde68a !important; + } + + :root[data-theme="dark"] #logsTable { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + } + + :root[data-theme="dark"] #logsTable th { + background: #1d4ed8 !important; + color: #ffffff !important; + border-color: #60a5fa !important; + } + + :root[data-theme="dark"] #logsTable th:hover { + background: #2563eb !important; + } + + :root[data-theme="dark"] #logsTable td { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] #logsTable tbody tr:hover td { + background: var(--ui-bg-accent) !important; + } @media (max-width: 768px) { .filter-controls { @@ -373,6 +432,17 @@ width: 100%; justify-content: space-between; } + + .navigation-buttons { + gap: 10px; + flex-wrap: wrap; + } + + .navigation-buttons .button, + .navigation-buttons .export-button { + flex: 1 1 180px; + text-align: center; + } } {% endblock %} \ No newline at end of file diff --git a/Web/templates/manage_locations.html b/Web/templates/manage_locations.html index dcf8263..66f0135 100755 --- a/Web/templates/manage_locations.html +++ b/Web/templates/manage_locations.html @@ -71,27 +71,27 @@ h1 { text-align: center; margin-bottom: 30px; - color: #343a40; + color: var(--ui-title); } .card { border-radius: 5px; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); + box-shadow: var(--ui-shadow-sm); margin-bottom: 20px; background-color: var(--ui-surface); - border: 1px solid #e9ecef; + border: 1px solid var(--ui-border); } .card-header { background-color: var(--ui-surface-soft); padding: 15px 20px; - border-bottom: 1px solid #e9ecef; + border-bottom: 1px solid var(--ui-border); } .card-header h2 { margin: 0; font-size: 1.25rem; - color: #495057; + color: var(--ui-title); } .card-body { @@ -111,8 +111,16 @@ .form-group input { width: 100%; padding: 8px 12px; - border: 1px solid #ced4da; + border: 1px solid var(--ui-border); border-radius: 4px; + background: var(--ui-bg); + color: var(--ui-text); + } + + .form-group input:focus { + outline: none; + border-color: #60a5fa; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22); } .btn { @@ -171,17 +179,25 @@ align-items: center; padding: 10px; background-color: var(--ui-surface-soft); + border: 1px solid var(--ui-border); border-radius: 4px; border-left: 3px solid #6c757d; + transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; + } + + .location-value-item:hover { + background-color: var(--ui-bg-accent); + border-color: #60a5fa; + transform: translateY(-1px); } .location-value { font-weight: 500; - color: #495057; + color: var(--ui-text); } .no-values-message { - color: #6c757d; + color: var(--ui-text-muted); font-style: italic; text-align: center; padding: 20px; @@ -196,5 +212,23 @@ display: flex; justify-content: flex-end; } + + @media (max-width: 576px) { + .location-values-list { + grid-template-columns: 1fr; + } + + .location-value-item { + gap: 10px; + } + + .actions-container { + justify-content: stretch; + } + + .actions-container .btn { + width: 100%; + } + } {% endblock %} diff --git a/Web/templates/register.html b/Web/templates/register.html index 5294c0d..6125c72 100755 --- a/Web/templates/register.html +++ b/Web/templates/register.html @@ -334,7 +334,7 @@ document.addEventListener('DOMContentLoaded', function () { body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: var(--light-bg); + background-color: var(--ui-bg); margin: 0; padding: 0; color: var(--text-color); @@ -719,5 +719,108 @@ code { font-size: 1.8rem; } } + +/* Registration-specific dark mode styling. */ +:root[data-theme="dark"] { + --light-bg: var(--ui-bg); + --text-color: var(--ui-text); + --shadow: var(--ui-shadow-md); +} + +:root[data-theme="dark"] .header-section { + border-bottom-color: var(--ui-border); +} + +:root[data-theme="dark"] .subtitle, +:root[data-theme="dark"] .anonymize-hint, +:root[data-theme="dark"] .form-group label, +:root[data-theme="dark"] .permission-check, +:root[data-theme="dark"] .input-icon { + color: var(--ui-text-muted) !important; +} + +:root[data-theme="dark"] .content, +:root[data-theme="dark"] .form-card, +:root[data-theme="dark"] .permission-panel, +:root[data-theme="dark"] .password-rules { + background: var(--ui-surface) !important; + background-color: var(--ui-surface) !important; + border-color: var(--ui-border) !important; + color: var(--ui-text) !important; + box-shadow: var(--ui-shadow-sm); +} + +:root[data-theme="dark"] .form-card h2, +:root[data-theme="dark"] .permission-panel h4, +:root[data-theme="dark"] .password-rules-title { + color: var(--ui-title) !important; +} + +:root[data-theme="dark"] input[type="text"], +:root[data-theme="dark"] input[type="password"], +:root[data-theme="dark"] input[type="file"], +:root[data-theme="dark"] .form-select { + background: var(--ui-bg) !important; + background-color: var(--ui-bg) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; +} + +:root[data-theme="dark"] input[type="text"]:focus, +:root[data-theme="dark"] input[type="password"]:focus, +:root[data-theme="dark"] input[type="file"]:focus, +:root[data-theme="dark"] .form-select:focus { + border-color: #60a5fa !important; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important; +} + +:root[data-theme="dark"] input[type="file"]::file-selector-button { + background: var(--ui-surface-soft); + color: var(--ui-text); + border-color: var(--ui-border); +} + +:root[data-theme="dark"] input[type="file"]::file-selector-button:hover, +:root[data-theme="dark"] .btn-secondary:hover { + background: var(--ui-bg-accent); +} + +:root[data-theme="dark"] .password-rules { + background: var(--ui-surface-soft) !important; +} + +:root[data-theme="dark"] .pw-rule { + color: #fca5a5; +} + +:root[data-theme="dark"] .pw-rule.ok { + color: #86efac; +} + +:root[data-theme="dark"] .anonymize-hint { + background: #082f49 !important; + border-color: #38bdf8 !important; + color: #bae6fd !important; +} + +:root[data-theme="dark"] .permission-panel { + background: var(--ui-surface-soft) !important; +} + +:root[data-theme="dark"] .btn-secondary { + background: var(--ui-surface-soft); + color: var(--ui-text); + border-color: var(--ui-border); +} + +:root[data-theme="dark"] .flash.success { + background: #123524; + color: #b7f7ce; +} + +:root[data-theme="dark"] .flash.error { + background: #451a1a; + color: #fecaca; +} {% endblock %} \ No newline at end of file diff --git a/Web/templates/student_cards_admin.html b/Web/templates/student_cards_admin.html index 4114988..e582e1c 100644 --- a/Web/templates/student_cards_admin.html +++ b/Web/templates/student_cards_admin.html @@ -254,6 +254,88 @@ margin: 10px 0; } + :root[data-theme="dark"] .student-card-form, + :root[data-theme="dark"] .import-card { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + box-shadow: var(--ui-shadow-sm); + } + + :root[data-theme="dark"] .import-card { + background: var(--ui-surface-soft) !important; + } + + :root[data-theme="dark"] .import-card p, + :root[data-theme="dark"] .rollover-hint, + :root[data-theme="dark"] .empty-state, + :root[data-theme="dark"] .empty-state p { + color: var(--ui-text-muted) !important; + } + + :root[data-theme="dark"] .rollover-box { + background: #422006 !important; + border-color: #f59e0b !important; + } + + :root[data-theme="dark"] .rollover-label, + :root[data-theme="dark"] .rollover-hint { + color: #fde68a !important; + } + + :root[data-theme="dark"] .form-group input, + :root[data-theme="dark"] .form-group select, + :root[data-theme="dark"] .form-group textarea, + :root[data-theme="dark"] .export-buttons form, + :root[data-theme="dark"] .export-buttons select { + background: var(--ui-bg) !important; + background-color: var(--ui-bg) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] .form-group input:focus, + :root[data-theme="dark"] .form-group select:focus, + :root[data-theme="dark"] .form-group textarea:focus, + :root[data-theme="dark"] .export-buttons select:focus { + border-color: #60a5fa !important; + box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22) !important; + } + + :root[data-theme="dark"] .cards-table { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + box-shadow: var(--ui-shadow-sm); + } + + :root[data-theme="dark"] .cards-table thead { + background: #1d4ed8 !important; + color: #ffffff !important; + } + + :root[data-theme="dark"] .cards-table th, + :root[data-theme="dark"] .cards-table td { + background: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; + } + + :root[data-theme="dark"] .cards-table tbody tr:hover td { + background: var(--ui-bg-accent) !important; + } + + @media (max-width: 768px) { + .export-buttons { + width: 100%; + } + + .export-buttons form, + .export-buttons > a { + flex: 1 1 100%; + } + } + @media (max-width: 992px) { .dashboard-grid { grid-template-columns: 1fr; diff --git a/Web/templates/termin_configure.html b/Web/templates/termin_configure.html index d4f2a05..fcce6df 100644 --- a/Web/templates/termin_configure.html +++ b/Web/templates/termin_configure.html @@ -6,7 +6,7 @@
-
+

Terminplan konfigurieren

Erstellen Sie einen neuen Plan und verschicken Sie anschließend den Buchungslink.

@@ -139,6 +139,79 @@
+