prettier ui and better login handling

2025-11-06 22:19:20 +01:00
parent 09e65803c9
commit d3a71e1d0f
7 changed files with 516 additions and 73 deletions
--- a/templates/team.html
+++ b/templates/team.html
@@ -3,18 +3,112 @@

 <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Tým: {{.TeamName}}</title>
+    <style>
+        :root {
+            --bg: #f5f7fb;
+            --card: #ffffff;
+            --accent: #0b6efd;
+            --muted: #6b7280;
+            --radius: 12px;
+            --border: #e6e9ee;
+            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
+        }
+
+        html,
+        body {
+            height: 100%;
+            margin: 0;
+            background: linear-gradient(180deg, #f8fbff, var(--bg));
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .wrap {
+            max-width: 720px;
+            margin: 36px auto;
+            padding: 16px;
+        }
+
+        .card {
+            background: var(--card);
+            padding: 18px;
+            border-radius: var(--radius);
+            box-shadow: 0 8px 20px rgba(20, 30, 60, 0.06);
+            border: 1px solid var(--border);
+        }
+
+        h1 {
+            margin: 0 0 6px 0;
+            font-size: 20px;
+            color: #0f172a;
+        }
+
+        .meta {
+            color: var(--muted);
+            margin-bottom: 14px;
+            font-size: 14px;
+        }
+
+        .info {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 10px;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+
+        .details {
+            font-size: 15px;
+            color: #0f172a;
+        }
+
+        .label {
+            color: var(--muted);
+            font-size: 13px;
+        }
+
+        .logout {
+            background: transparent;
+            border: 1px solid var(--border);
+            padding: 8px 12px;
+            border-radius: 10px;
+            cursor: pointer;
+            color: #0f172a;
+            font-weight: 600;
+        }
+
+        .logout:hover {
+            box-shadow: 0 4px 12px rgba(11, 110, 253, 0.06);
+        }
+
+        @media (max-width:560px) {
+            .info {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
 </head>

 <body>
-    <h1>Tým: {{.TeamName}}</h1>
-    Obtížnost: {{.Difficulty}}<br>
-    Poslední šifra : {{.LastCipher}}<br>
-    Penalizace: {{.Penalties}}<br>
-    <hr>
-    <form action="/logout" method="get">
-        <input type="submit" value="Odhlásit">
-    </form>
+    <div class="wrap">
+        <div class="card">
+            <h1>Tým: {{.TeamName}}</h1>
+            <div class="meta">Přehled týmu</div>
+
+            <div class="info">
+                <div class="details">
+                    <div><span class="label">Obtížnost:</span> {{.Difficulty}}</div>
+                    <div><span class="label">Právě řeší šifru:</span> {{.LastCipher}}</div>
+                    <div><span class="label">Penalizace (min):</span> {{.Penalties}}</div>
+                </div>
+
+                <form action="/logout" method="get">
+                    <button class="logout" type="submit">Odhlásit</button>
+                </form>
+            </div>
+        </div>
+    </div>
 </body>

 </html>