UI polish: global modern styles; Admin button pinned top-left across app and generated pages; index redirects to login for guests

2025-09-03 14:37:36 +03:00
commit 85eaf6a99a
7 changed files with 468 additions and 0 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ title or 'Админка' }}</title>
+    <style>
+      :root {
+        --bg: #0b0e13;
+        --bg-soft: #11161f;
+        --card: #121825;
+        --text: #e6edf3;
+        --muted: #97a3b6;
+        --accent: #4f8cff;
+        --accent-2: #7a5cff;
+        --danger: #ff5c7a;
+        --success: #2ecc71;
+        --ring: rgba(79,140,255,.45);
+      }
+
+      html, body { height: 100%; }
+      body {
+        margin: 0;
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+        color: var(--text);
+        background:
+          radial-gradient(1200px 400px at 10% -10%, rgba(79,140,255,0.12), transparent 60%),
+          radial-gradient(1000px 400px at 100% 0%, rgba(122,92,255,0.10), transparent 60%),
+          var(--bg);
+      }
+
+      .container { max-width: 980px; margin: 0 auto; padding: 24px; }
+
+      header {
+        position: sticky; top: 0; z-index: 1000;
+        display: flex; align-items: center; justify-content: space-between;
+        padding: 14px 18px 14px 140px; margin: 0 0 18px 0;
+        background: linear-gradient(180deg, rgba(18,24,37,.85), rgba(18,24,37,.65));
+        backdrop-filter: saturate(1.2) blur(8px);
+        border: 1px solid rgba(255,255,255,.06);
+        border-radius: 14px;
+        box-shadow: 0 10px 30px rgba(0,0,0,.35);
+      }
+
+      header nav { position: absolute; top: 14px; left: 18px; }
+
+      .card {
+        background: var(--card);
+        border: 1px solid rgba(255,255,255,.06);
+        border-radius: 16px; padding: 20px;
+        box-shadow: 0 12px 40px rgba(0,0,0,.35);
+      }
+
+      .muted { color: var(--muted); font-size: 0.92rem; }
+      .row { margin-bottom: 1rem; }
+
+      .btn {
+        display: inline-block; padding: 10px 14px; border: none; cursor: pointer;
+        text-decoration: none; color: #fff; font-weight: 600; letter-spacing: .2px;
+        background: linear-gradient(135deg, var(--accent), var(--accent-2));
+        border-radius: 10px; box-shadow: 0 10px 25px rgba(79,140,255,.35);
+        transition: transform .06s ease, box-shadow .15s ease;
+      }
+      .btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(79,140,255,.45); }
+      .btn.secondary { background: linear-gradient(135deg,#2a2f3a,#394356); box-shadow: none; }
+
+      input[type="text"], input[type="password"], textarea {
+        width: 100%; color: var(--text); background: var(--bg-soft);
+        border: 1px solid rgba(255,255,255,.06);
+        border-radius: 12px; padding: 10px 12px; outline: none;
+        box-shadow: inset 0 0 0 1px transparent;
+      }
+      input:focus, textarea:focus { box-shadow: 0 0 0 4px var(--ring); }
+      textarea { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+
+      .flash { padding: 10px 12px; margin-bottom: 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); }
+      .flash.success { background: rgba(46,204,113,.12); color: #bbf7d0; }
+      .flash.error { background: rgba(255,92,122,.12); color: #fecaca; }
+
+      table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; }
+      th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
+      thead th { background: rgba(255,255,255,.04); font-weight: 600; }
+      tbody tr:hover { background: rgba(255,255,255,.02); }
+
+      nav a { margin-left: 10px; }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <div><strong>{{ title or 'Админка' }}</strong></div>
+        <nav>
+          {% if logged_in %}
+            <a class="btn secondary" href="{{ url_for('admin') }}">Админка</a>
+            <form style="display:inline" method="post" action="{{ url_for('logout') }}">
+              <button class="btn" type="submit">Выйти</button>
+            </form>
+          {% endif %}
+        </nav>
+      </header>
+
+      <div class="card">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+          {% if messages %}
+            {% for category, message in messages %}
+              <div class="flash {{ category }}">{{ message }}</div>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+
+        {% block content %}{% endblock %}
+      </div>
+    </div>
+  </body>
+  </html>