Initial commit

templates/CLAUDE.md

@@ -0,0 +1,29 @@
+# templates/ — CSS & HTML Rules
+
+## CSS variables
+Use the app's own variables (defined in `static/style.css`). Never use claude.ai system variables like `var(--color-background-primary)` — the app uses `var(--bg)`, `var(--surface)`, `var(--border)`, `var(--text)`, `var(--muted)`, `var(--accent)`, `var(--danger)`, `var(--success)`.
+
+Theme is switched via `[data-theme="light"]` attribute on `<body>` — not `prefers-color-scheme`.
+
+## Standard control height: 26px
+Every interactive element in the topbar and sidebar. Exception: `.toggle` is `32×18px` — do not change to 26px.
+
+## Pill cluster container pattern
+```css
+display: flex; background: var(--bg); border: 1px solid var(--border);
+border-radius: 6px; overflow: hidden;
+```
+Buttons inside: `border-right: 1px solid var(--border)` as dividers; last child has none. Selected: `background: var(--accent); color: #fff`.
+
+## Danger buttons
+Never place destructive actions (delete, reset, disconnect, sign out) inside a pill cluster. Standalone button with `border: 1px solid var(--danger); color: var(--danger)`, separated by a gap. Applies everywhere — topbar, sidebar, modals, list rows.
+
+## Badge sizing standard
+All badges — platform, role, source, CPR, faces, Art.9, overdue, risk — use: `font-size: 9px; padding: 1px 5px; border-radius: 10px`. Never override with larger inline styles. New badge classes always start from this standard.
+
+## No emojis in button labels
+All buttons use plain text — topbar, filter bar, modals, settings, and lang file values. No `▶ ■ 💾 ⚙ 🕐 ⬇ ⬆ 🗑 📋 ☰ ⊞`.
+
+## Gotchas
+
+- **Label click forwarding** — interactive elements inside `<label>` get clicks forwarded to the label's checkbox. Use `<button type="button">` to prevent this.

templates/viewer_denied.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>GDPRScanner — Access denied</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <style>
+    body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
+    .denied-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 32px 40px;
+      text-align: center;
+      max-width: 360px;
+    }
+    .denied-card h1 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
+    .denied-card p  { font-size: 13px; color: var(--muted); margin: 0; }
+  </style>
+</head>
+<body data-theme="dark">
+  <div class="denied-card">
+    <h1>Access denied</h1>
+    <p>This link is invalid or has expired.<br>Ask the administrator for a new link.</p>
+  </div>
+</body>
+</html>

templates/viewer_pin.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>GDPRScanner — Enter PIN</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <style>
+    body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
+    .pin-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 32px 40px;
+      width: min(340px, 92vw);
+      box-sizing: border-box;
+    }
+    .pin-card h1 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
+    .pin-card p  { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
+    .pin-input {
+      width: 100%; box-sizing: border-box;
+      font-size: 22px; letter-spacing: .3em; text-align: center;
+      padding: 10px 12px; border-radius: 6px;
+      border: 1px solid var(--border); background: var(--bg);
+      color: var(--text); outline: none; margin-bottom: 12px;
+    }
+    .pin-input:focus { border-color: var(--accent); }
+    .pin-btn {
+      width: 100%; padding: 10px; border: none; border-radius: 6px;
+      background: var(--accent); color: #fff; font-size: 13px;
+      font-weight: 600; cursor: pointer; font-family: var(--sans);
+    }
+    .pin-btn:disabled { opacity: .5; cursor: default; }
+    .pin-error { font-size: 12px; color: var(--danger); margin-top: 8px; min-height: 16px; text-align: center; }
+  </style>
+</head>
+<body data-theme="dark">
+  <div class="pin-card">
+    <h1>GDPRScanner</h1>
+    <p>Enter the viewer PIN to access results.</p>
+    <input id="pinInput" class="pin-input" type="password" inputmode="numeric"
+           maxlength="8" placeholder="••••" autocomplete="off"
+           onkeydown="if(event.key==='Enter')submitPin()">
+    <button class="pin-btn" id="pinBtn" onclick="submitPin()">Continue</button>
+    <div class="pin-error" id="pinError"></div>
+  </div>
+  <script>
+    async function submitPin() {
+      const pin = document.getElementById('pinInput').value.trim();
+      if (!pin) return;
+      const btn = document.getElementById('pinBtn');
+      const err = document.getElementById('pinError');
+      btn.disabled = true;
+      err.textContent = '';
+      try {
+        const r = await fetch('/api/viewer/pin/verify', {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({pin})
+        });
+        if (r.ok) {
+          window.location.href = '/view';
+        } else {
+          const d = await r.json().catch(() => ({}));
+          if (r.status === 429) {
+            err.textContent = d.error || 'Too many attempts. Try again later.';
+          } else {
+            err.textContent = d.error || 'Incorrect PIN.';
+            document.getElementById('pinInput').value = '';
+            document.getElementById('pinInput').focus();
+          }
+          btn.disabled = false;
+        }
+      } catch(e) {
+        err.textContent = 'Network error. Please try again.';
+        btn.disabled = false;
+      }
+    }
+    document.getElementById('pinInput').focus();
+  </script>
+</body>
+</html>