feat(ui): modern theme, dark/light toggle, polished templates

2025-09-03 11:06:14 +03:00
commit 71c87979c0
16 changed files with 753 additions and 0 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="ru" data-theme="dark">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#0b1020">
+    <title>Zammad Reports by Ruslan</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark">
+      <div class="container">
+        <a class="navbar-brand" href="/">Zammad Reports</a>
+        <div class="d-flex align-items-center gap-2 ms-auto">
+          <button id="themeToggle" class="btn btn-sm theme-toggle" type="button" aria-label="Toggle theme">
+            <span class="icon">🌙</span>
+            <span class="label">Тёмная</span>
+          </button>
+        </div>
+      </div>
+    </nav>
+    <main class="container my-4 fade-in">
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+          {% for category, message in messages %}
+            <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
+          {% endfor %}
+        {% endif %}
+      {% endwith %}
+
+      {% block content %}{% endblock %}
+    </main>
+
+    <script>
+      // Theme persistence
+      const key = 'zammad.theme';
+      const root = document.documentElement;
+      const btn = () => document.getElementById('themeToggle');
+      const label = () => btn()?.querySelector('.label');
+      const icon = () => btn()?.querySelector('.icon');
+      function applyTheme(t) {
+        root.setAttribute('data-theme', t);
+        if (label()) label().textContent = t === 'dark' ? 'Тёмная' : 'Светлая';
+        if (icon()) icon().textContent = t === 'dark' ? '🌙' : '☀️';
+        const meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) meta.setAttribute('content', t === 'dark' ? '#0b1020' : '#f6f7fb');
+      }
+      (function initTheme(){
+        const saved = localStorage.getItem(key);
+        const preferred = saved || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        applyTheme(preferred);
+        window.addEventListener('DOMContentLoaded', () => {
+          const toggle = btn();
+          if (toggle) toggle.addEventListener('click', () => {
+            const current = root.getAttribute('data-theme') || 'dark';
+            const next = current === 'dark' ? 'light' : 'dark';
+            localStorage.setItem(key, next);
+            applyTheme(next);
+          });
+        });
+      })();
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    {% block scripts %}{% endblock %}
+  </body>
+  </html>