security

2026-06-18 12:02:58 +01:00
parent df0a578207
commit f24da78970
9 changed files with 1250 additions and 96 deletions
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Support Chat</title>
+  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg: #111318;
+      --surface: #191c22;
+      --surface-soft: #20242c;
+      --border: #2b303a;
+      --accent: #8f9cff;
+      --text: #eceff4;
+      --muted: #9aa3b2;
+      --radius: 14px;
+    }
+
+    body {
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--text);
+      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1.5rem;
+    }
+
+    .card {
+      width: min(560px, 100%);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 22px;
+      padding: 2rem;
+      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
+    }
+
+    .timer {
+      display: inline-flex;
+      margin-bottom: 1rem;
+      color: var(--muted);
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      padding: 0.35rem 0.75rem;
+      font-size: 0.78rem;
+      background: var(--bg);
+    }
+
+    h1 {
+      font-size: clamp(1.6rem, 4vw, 2.15rem);
+      letter-spacing: -0.035em;
+      margin-bottom: 0.5rem;
+    }
+
+    p {
+      color: var(--muted);
+      line-height: 1.6;
+      margin-bottom: 1.5rem;
+    }
+
+    .choices {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.9rem;
+    }
+
+    a {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+      text-decoration: none;
+      color: var(--text);
+      background: var(--surface-soft);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1.1rem;
+      transition: transform 0.15s, border-color 0.15s, background 0.15s;
+    }
+
+    a:hover {
+      transform: translateY(-1px);
+      border-color: var(--accent);
+      background: #242936;
+    }
+
+    .role-title { font-weight: 700; font-size: 1rem; }
+    .role-detail { color: var(--muted); font-size: 0.88rem; }
+
+    @media (max-width: 560px) {
+      .choices { grid-template-columns: 1fr; }
+      .card { padding: 1.5rem; }
+    }
+  </style>
+</head>
+<body>
+  <main class="card">
+    <span class="timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
+    <h1>Support chat</h1>
+    <p>Open the side you want to test. Each option opens in a new tab.</p>
+
+    <div class="choices">
+      <a href="/user" target="_blank" rel="noopener noreferrer">
+        <span class="role-title">User</span>
+        <span class="role-detail">Start a new conversation</span>
+      </a>
+      <a href="/supporter" target="_blank" rel="noopener noreferrer">
+        <span class="role-title">Supporter</span>
+        <span class="role-detail">View and reply to conversations</span>
+      </a>
+    </div>
+  </main>
+</body>
+</html>