v0.3.0-prod

internal/web/templates/verify.html

@@ -1,3 +1,51 @@
 {{define "verify.html"}}<!doctype html>
-<html lang="pl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Weryfikacja TS3</title><link rel="stylesheet" href="/assets/app.css"></head>
-<body class="embed"><main class="panel"><nav class="panel-nav"><a href="/stats">← Statystyki</a><a href="{{.VoiceURL}}" target="_top">Połącz z TS3</a></nav><h1>Potwierdź klienta TS3</h1><p>Kod został wysłany prywatnie do <strong>{{.Client.Nick}}</strong>.</p><form method="post" action="/channel/verify/complete"><input type="hidden" name="form_token" value="{{.FormToken}}"><input type="hidden" name="challenge_token" value="{{.ChallengeToken}}"><label>Kod<input name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required autofocus></label><button class="button full" type="submit">Potwierdź</button></form></main></body></html>{{end}}
+<html lang="pl">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Weryfikacja TS3</title>
+<link rel="stylesheet" href="{{asset "app.css"}}">
+<script src="{{asset "app.js"}}" defer></script>
+</head>
+<body>
+{{template "icons" .}}
+<main class="channel-view">
+  <div class="channel-shell">
+    <section class="channel-card">
+      <div class="channel-topbar">
+        <a href="/stats"><svg class="icon"><use href="#icon-arrow-left"/></svg>Statystyki</a>
+        <div class="channel-topbar-right">
+          <a href="{{.VoiceURL}}" target="_top"><svg class="icon"><use href="#icon-zap"/></svg>Połącz z TS3</a>
+          <button class="theme-toggle" type="button" aria-label="Przełącz jasny/ciemny motyw" title="Jasny / ciemny motyw">
+            <svg class="icon ic-sun"><use href="#icon-sun"/></svg>
+            <svg class="icon ic-moon"><use href="#icon-moon"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="channel-title">
+        <svg class="icon"><use href="#icon-lock"/></svg>
+        <div>
+          <p class="eyebrow">Weryfikacja</p>
+          <h1>Potwierdź klienta TS3</h1>
+          <p>Kod został wysłany prywatnie do <strong>{{.Client.Nick}}</strong>.</p>
+        </div>
+      </div>
+
+      <div class="channel-body">
+        <form method="post" action="/channel/verify/complete">
+          <input type="hidden" name="form_token" value="{{.FormToken}}">
+          <input type="hidden" name="challenge_token" value="{{.ChallengeToken}}">
+          <div class="field">
+            <label for="verify-code"><svg class="icon"><use href="#icon-hash"/></svg>Kod weryfikacyjny</label>
+            <input id="verify-code" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required autofocus placeholder="000000">
+            <small>Kod jest ważny 5 minut.</small>
+          </div>
+          <button class="btn primary lg full" type="submit"><svg class="icon"><use href="#icon-check-circle"/></svg>Potwierdź</button>
+        </form>
+      </div>
+    </section>
+  </div>
+</main>
+</body>
+</html>{{end}}