initial commit from original sev version

internal/web/static/css/style.css

@@ -0,0 +1,400 @@
+/* Abuse registration POC — styled to match the FLÓ/zeitkort POC shell. */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  --bg: #f4f1ec;
+  --fg: #1a1d22;
+  --muted: #595f68;
+  --dim: #9299a2;
+  --border: rgba(26, 29, 34, 0.12);
+  --border-soft: rgba(26, 29, 34, 0.06);
+  --dotted: rgba(26, 29, 34, 0.12);
+  --field-bg: rgba(26, 29, 34, 0.03);
+  --field-border: rgba(26, 29, 34, 0.18);
+  --btn-bg: rgba(26, 29, 34, 0.05);
+  --btn-bg-hover: rgba(26, 29, 34, 0.09);
+  --btn-border: rgba(26, 29, 34, 0.18);
+  --header-border: rgba(26, 29, 34, 0.12);
+  --link: #2c5a7a;
+  --accent: #2c5a7a;
+  --nav-bg: rgba(244, 241, 236, 0.6);
+  --bg-panel: rgba(255, 253, 250, 0.72);
+  --notice-fg: #2a6e2a;
+  --notice-bg: rgba(42, 110, 42, 0.06);
+  --notice-border: rgba(42, 110, 42, 0.25);
+  --error-fg: #a03030;
+  --error-bg: rgba(160, 48, 48, 0.06);
+  --error-border: rgba(160, 48, 48, 0.25);
+  --shadow: rgba(0, 0, 0, 0.12);
+  --toggle-bg: linear-gradient(135deg, #07070d 0%, #64dcff 100%);
+  --toggle-border: rgba(26, 29, 34, 0.2);
+  --toggle-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="tokyo"] {
+  color-scheme: dark;
+  --bg: #07070d;
+  --fg: #e8f4ff;
+  --muted: #a3b3cc;
+  --dim: #7886a0;
+  --border: rgba(100, 220, 255, 0.12);
+  --border-soft: rgba(100, 220, 255, 0.06);
+  --dotted: rgba(100, 220, 255, 0.1);
+  --field-bg: rgba(100, 220, 255, 0.04);
+  --field-border: rgba(100, 220, 255, 0.15);
+  --btn-bg: rgba(100, 220, 255, 0.06);
+  --btn-bg-hover: rgba(100, 220, 255, 0.1);
+  --btn-border: rgba(100, 220, 255, 0.18);
+  --header-border: rgba(100, 220, 255, 0.12);
+  --link: #64dcff;
+  --accent: #64dcff;
+  --nav-bg: rgba(7, 7, 13, 0.65);
+  --bg-panel: rgba(15, 16, 28, 0.72);
+  --notice-fg: #8fe08f;
+  --notice-bg: rgba(143, 224, 143, 0.06);
+  --notice-border: rgba(143, 224, 143, 0.25);
+  --error-fg: #ff9b9b;
+  --error-bg: rgba(255, 155, 155, 0.06);
+  --error-border: rgba(255, 155, 155, 0.2);
+  --shadow: rgba(0, 0, 0, 0.5);
+  --toggle-bg: #f4f1ec;
+  --toggle-border: rgba(100, 220, 255, 0.4);
+  --toggle-shadow: 0 0 10px rgba(100, 220, 255, 0.5), 0 0 25px rgba(100, 220, 255, 0.3);
+}
+
+html, body { max-width: 100%; overflow-x: hidden; }
+body {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: 0.88rem;
+  font-weight: 300;
+  line-height: 1.55;
+  color: var(--fg);
+  background: var(--bg);
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+main {
+  overflow-wrap: break-word;
+  padding: 16px;
+  max-width: 1040px;
+  margin: 0 auto;
+  width: 100%;
+  flex: 1;
+}
+
+header {
+  border-bottom: 1px solid var(--header-border);
+  padding: 1rem 1.5rem;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  background: var(--nav-bg);
+  backdrop-filter: blur(12px) saturate(120%);
+  -webkit-backdrop-filter: blur(12px) saturate(120%);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  transition: background 0.3s ease;
+}
+
+.back-link {
+  font-weight: 400;
+  font-size: 0.7rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--muted);
+  text-decoration: none;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+.back-link:hover { color: var(--fg); border-color: var(--muted); background: var(--bg-panel); }
+
+.brand {
+  justify-self: center;
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: -0.02em;
+  color: var(--fg);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  white-space: nowrap;
+}
+.brand-sep { font-weight: 300; color: var(--dim); }
+.brand-sub {
+  font-weight: 400;
+  font-size: 0.78rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+[data-theme="tokyo"] .brand { color: #e8f4ff; text-shadow: 0 0 8px rgba(100, 220, 255, 0.3); }
+
+footer {
+  padding: 0.9rem 1.5rem;
+  color: var(--muted);
+  font-size: 0.68rem;
+  letter-spacing: 0.05em;
+  border-top: 1px solid var(--border-soft);
+  background: var(--nav-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+}
+footer a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
+footer a:hover { color: var(--accent); }
+.footer-icon { color: var(--muted); text-decoration: none; display: flex; align-items: center; border-bottom: none; transition: color 0.25s ease; }
+.footer-icon:hover { color: var(--accent); border-bottom: none; }
+
+h1, h2, h3 { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-weight: 700; letter-spacing: -0.02em; }
+h1 { margin: 0 0 0.9rem; font-size: clamp(1.35rem, 4vw, 2rem); }
+h2 { margin: 0 0 0.9rem; font-size: 1.1rem; }
+h3 { margin: 1rem 0 0.4rem; font-size: 0.86rem; color: var(--fg); }
+.workflow-content h3:first-child { margin-top: 0; }
+p { margin: 0 0 0.8rem; }
+a { color: var(--link); }
+code { font-family: inherit; font-size: 0.86em; }
+.muted { color: var(--muted); font-size: 0.78rem; }
+
+.intro-card,
+.section-block {
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--field-bg);
+  padding: 1.2rem 1.4rem;
+  margin: 0 0 14px;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.columns { display: flex; gap: 16px; flex-wrap: wrap; }
+.col { flex: 1 1 340px; min-width: 0; }
+
+fieldset {
+  border: 1px solid var(--border);
+  margin: 0;
+  padding: 10px 12px;
+  min-width: 0;
+  border-radius: 3px;
+  background: var(--field-bg);
+  transition: border-color 0.3s ease, background 0.3s ease;
+}
+legend {
+  font-weight: 500;
+  padding: 0 6px;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+pre {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--border-soft);
+  border-radius: 3px;
+  background: rgba(26, 29, 34, 0.04);
+  margin: 0.8rem 0 0;
+  padding: 0.85rem 0.95rem;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+[data-theme="tokyo"] pre { background: rgba(100, 220, 255, 0.04); }
+
+.harmonium {
+  display: grid;
+  gap: 10px;
+  margin-top: 1rem;
+}
+.workflow-panel {
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--field-bg);
+  overflow: hidden;
+}
+.workflow-panel summary {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  cursor: pointer;
+  color: var(--fg);
+  border-bottom: 1px solid transparent;
+  user-select: none;
+}
+.workflow-panel summary::-webkit-details-marker { display: none; }
+.workflow-panel summary::before {
+  content: '+';
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-right: 0.2rem;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+.workflow-panel summary span:first-child { margin-right: auto; }
+.workflow-panel[open] summary {
+  border-bottom-color: var(--border-soft);
+  background: var(--btn-bg);
+}
+.workflow-panel[open] summary::before { content: '−'; color: var(--accent); }
+.summary-hint {
+  color: var(--dim);
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.workflow-content { padding: 1rem; }
+.workflow-content pre:last-child { margin-bottom: 0; }
+
+select, input[type=text], input[type=number], input:not([type]) {
+  font: inherit;
+  font-size: 0.85rem;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid var(--field-border);
+  border-radius: 3px;
+  background: var(--field-bg);
+  color: var(--fg);
+  transition: border-color 0.2s;
+  outline: none;
+  width: 100%;
+}
+[data-theme="tokyo"] select,
+[data-theme="tokyo"] option { background: #0f1018; color: #e8f4ff; }
+select:focus, input:focus { border-color: var(--accent); }
+label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.75rem; }
+label input, label select { margin-top: 0.25rem; }
+
+button {
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 500;
+  padding: 0.3rem 0.7rem;
+  border: 1px solid var(--btn-border);
+  border-radius: 3px;
+  background: var(--btn-bg);
+  color: var(--fg);
+  cursor: pointer;
+  letter-spacing: 0.02em;
+  transition: background 0.15s, border-color 0.15s;
+}
+button:hover { background: var(--btn-bg-hover); }
+.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
+
+.data-browser {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+.filter-form {
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--field-bg);
+  padding: 12px;
+  position: sticky;
+  top: 66px;
+}
+.json-pane { min-width: 0; }
+.json-output { min-height: 360px; margin-top: 0.4rem; }
+
+.reset-banner {
+  position: sticky;
+  top: 52px;
+  z-index: 18;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--error-border);
+  background: var(--error-bg);
+  color: var(--error-fg);
+  text-align: center;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.reset-label { font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
+.reset-countdown {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: clamp(1.5rem, 6vw, 2.5rem);
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 10px;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  background: var(--bg);
+}
+.reset-note { flex-basis: 100%; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; }
+
+.theme-toggle {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1px solid var(--toggle-border);
+  cursor: pointer;
+  padding: 0;
+  z-index: 30;
+  transition: all 0.3s ease;
+  box-shadow: var(--toggle-shadow);
+  background: var(--toggle-bg);
+}
+.theme-toggle:hover { transform: scale(1.08); }
+
+@media (min-width: 641px) {
+  .reset-banner {
+    position: fixed;
+    left: 1rem;
+    bottom: 1rem;
+    top: auto;
+    justify-content: flex-start;
+    gap: 8px;
+    max-width: calc(100vw - 2rem);
+    padding: 6px 10px;
+    border: 1px solid var(--error-border);
+    border-radius: 999px;
+    font-size: 0.7rem;
+    text-align: left;
+  }
+  .reset-countdown { font-size: 0.9rem; padding: 1px 8px; border-radius: 999px; }
+  .reset-note { display: none; }
+}
+
+@media (max-width: 760px) {
+  header { padding: 0.7rem 0.9rem; gap: 0.6rem; }
+  .back-link { font-size: 0.58rem; padding: 0.25rem 0.4rem; letter-spacing: 0.08em; }
+  .brand { font-size: 0.9rem; }
+  main { padding: 12px; }
+  footer { font-size: 0.62rem; padding: 0.7rem 0.9rem; }
+  .theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.9rem; }
+  .reset-banner { top: 44px; }
+  .data-browser { grid-template-columns: 1fr; }
+  .filter-form { position: static; }
+}

internal/web/static/js/app.js

@@ -0,0 +1,91 @@
+(() => {
+  const filterForm = document.getElementById('filter-form');
+  const dataStatus = document.getElementById('data-status');
+  const jsonData = document.getElementById('json-data');
+  const resetFilters = document.getElementById('reset-filters');
+  const countdown = document.getElementById('reset-countdown');
+
+  function setStatus(text) {
+    if (dataStatus) dataStatus.textContent = text;
+  }
+
+  function valueOf(form, name) {
+    return String(form.get(name) || '').trim();
+  }
+
+  function buildQuery() {
+    const form = new FormData(filterForm);
+    const params = new URLSearchParams();
+    ['location', 'abuse_type', 'gender', 'status', 'from', 'to', 'search', 'limit'].forEach((key) => {
+      const value = valueOf(form, key);
+      if (value) params.set(key, value);
+    });
+    return params.toString();
+  }
+
+  async function renderData(event) {
+    if (event) event.preventDefault();
+    if (!filterForm || !jsonData) return;
+
+    const query = buildQuery();
+    const url = query ? `/demo/registrations?${query}` : '/demo/registrations';
+    setStatus('Loading data…');
+
+    try {
+      const response = await fetch(url, { headers: { Accept: 'application/json' } });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const rows = await response.json();
+      jsonData.textContent = JSON.stringify(rows, null, 2);
+      setStatus(`Showing ${rows.length} row${rows.length === 1 ? '' : 's'} from ${url}.`);
+    } catch (err) {
+      jsonData.textContent = '[]';
+      setStatus(`Could not load demo data: ${err.message}`);
+    }
+  }
+
+  function renderCountdown() {
+    if (!countdown) return;
+    const resetAt = new Date(countdown.dataset.resetAt);
+    if (Number.isNaN(resetAt.getTime())) return;
+
+    function tick() {
+      const remainingMs = resetAt.getTime() - Date.now();
+      if (remainingMs <= 0) {
+        countdown.textContent = 'resetting…';
+        window.setTimeout(() => window.location.reload(), 1200);
+        return;
+      }
+      const seconds = Math.floor(remainingMs / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const rest = seconds % 60;
+      countdown.textContent = `${minutes}m ${String(rest).padStart(2, '0')}s`;
+      window.setTimeout(tick, 1000);
+    }
+
+    tick();
+  }
+
+  function setupSingleOpenAccordions() {
+    document.querySelectorAll('[data-single-open]').forEach((group) => {
+      const panels = Array.from(group.querySelectorAll('details'));
+      panels.forEach((panel) => {
+        panel.addEventListener('toggle', () => {
+          if (!panel.open) return;
+          panels.forEach((other) => {
+            if (other !== panel) other.open = false;
+          });
+        });
+      });
+    });
+  }
+
+  if (filterForm) filterForm.addEventListener('submit', renderData);
+  if (resetFilters) resetFilters.addEventListener('click', () => {
+    filterForm.reset();
+    renderData();
+  });
+
+  setupSingleOpenAccordions();
+  renderCountdown();
+  renderData();
+})();

internal/web/static/js/theme.js

@@ -0,0 +1,23 @@
+(function () {
+  function currentSystemTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
+  }
+
+  var btn = document.getElementById('theme-toggle');
+  if (btn) {
+    btn.addEventListener('click', function () {
+      var current = document.documentElement.getAttribute('data-theme') || 'light';
+      var next = current === 'light' ? 'tokyo' : 'light';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('poc-theme', next);
+      window.dispatchEvent(new Event('theme-change'));
+    });
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    if (!localStorage.getItem('poc-theme')) {
+      document.documentElement.setAttribute('data-theme', currentSystemTheme());
+      window.dispatchEvent(new Event('theme-change'));
+    }
+  });
+})();

internal/web/templates/index.html

@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Registration API POC — FLÓ</title>
+
+<script>
+(function () {
+  var stored = localStorage.getItem('poc-theme');
+  var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
+  document.documentElement.setAttribute('data-theme', theme);
+})();
+</script>
+
+<link rel="stylesheet" href="/static/css/style.css">
+<link rel="icon" href="/favicon.ico" type="image/x-icon">
+</head>
+<body>
+
+<header>
+  <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
+  <span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">API POC</span></span>
+  <span aria-hidden="true"></span>
+</header>
+
+<div class="reset-banner" role="status" aria-live="polite">
+  <span class="reset-label">POC reset in</span>
+  <span id="reset-countdown" class="reset-countdown" data-reset-at="{{ .NextReset }}">--:--</span>
+  <span class="reset-note">All in-memory data resets every 10 minutes.</span>
+</div>
+
+<main id="main">
+  <section class="intro-card">
+    <h1>Abuse Registration API Example</h1>
+    <p>This API uses JWT for authentication and authorization. Data is stored in memory.</p>
+  </section>
+
+  <section class="columns section-block">
+    <div class="col">
+      <fieldset>
+        <legend>Reader user</legend>
+        <p><code>reader</code> / <code>reader-password</code></p>
+        <p class="muted">Can read protected endpoints and use filters.</p>
+      </fieldset>
+    </div>
+    <div class="col">
+      <fieldset>
+        <legend>CRUD user</legend>
+        <p><code>admin</code> / <code>admin-password</code></p>
+        <p class="muted">Can create, read, update with PUT, delete, and reset the sample dataset.</p>
+      </fieldset>
+    </div>
+  </section>
+
+  <section class="section-block workflow-section">
+    <h2>Terminal workflows</h2>
+    <p class="muted">These examples are terminal only. You can translate it to postman if you want to.</p>
+
+    <div class="harmonium" data-single-open>
+      <details class="workflow-panel" open>
+        <summary>
+          <span>Linux / curl</span>
+        </summary>
+        <div class="workflow-content">
+          <h3>Reader user — filtered reads</h3>
+          <pre><code>READER_TOKEN=$(curl -s -X POST http://localhost:8080/login \
+  -H 'Content-Type: application/json' \
+  -d '{"user_name":"reader","password":"reader-password"}' \
+  | sed -n 's/.*"token":"\([^"]*\)".*/\1/p')
+
+curl -s 'http://localhost:8080/api/v1/registrations?location=Tórshavn&limit=5' \
+  -H "Authorization: $READER_TOKEN"
+
+curl -s 'http://localhost:8080/api/v1/registrations?gender=female&abuse_type=psychological&status=open&limit=10' \
+  -H "Authorization: $READER_TOKEN"
+
+curl -s 'http://localhost:8080/api/v1/registrations?from=1989-01-01&to=1990-01-01&offset=20&limit=10' \
+  -H "Authorization: $READER_TOKEN"
+
+curl -s 'http://localhost:8080/api/v1/locations' \
+  -H "Authorization: $READER_TOKEN"</code></pre>
+
+          <h3>CRUD user — create, update, delete</h3>
+          <pre><code>ADMIN_TOKEN=$(curl -s -X POST http://localhost:8080/login \
+  -H 'Content-Type: application/json' \
+  -d '{"user_name":"admin","password":"admin-password"}' \
+  | sed -n 's/.*"token":"\([^"]*\)".*/\1/p')
+
+CREATED_ID=$(curl -s -X POST http://localhost:8080/api/v1/registrations \
+  -H "Authorization: $ADMIN_TOKEN" \
+  -H 'Content-Type: application/json' \
+  -d '{"gender":"unknown","location":"Tórshavn","abuse_type":"psychological","status":"new"}' \
+  | sed -n 's/.*"id":"\([^"]*\)".*/\1/p')
+
+curl -s -X PUT "http://localhost:8080/api/v1/registrations/$CREATED_ID" \
+  -H "Authorization: $ADMIN_TOKEN" \
+  -H 'Content-Type: application/json' \
+  -d '{"gender":"female","location":"Skopun","abuse_type":"digital","status":"referred"}'
+
+curl -s -X DELETE "http://localhost:8080/api/v1/registrations/$CREATED_ID" \
+  -H "Authorization: $ADMIN_TOKEN"</code></pre>
+        </div>
+      </details>
+
+      <details class="workflow-panel">
+        <summary>
+          <span>Windows / PowerShell</span>
+        </summary>
+        <div class="workflow-content">
+          <h3>Reader user — filtered reads</h3>
+          <pre><code>$reader = Invoke-RestMethod &#96;
+  -Method Post &#96;
+  -Uri "http://localhost:8080/login" &#96;
+  -ContentType "application/json" &#96;
+  -Body '{"user_name":"reader","password":"reader-password"}'
+
+$READER_TOKEN = $reader.token
+
+Invoke-RestMethod &#96;
+  -Uri "http://localhost:8080/api/v1/registrations?location=Tórshavn&limit=5" &#96;
+  -Headers @{Authorization=$READER_TOKEN}
+
+Invoke-RestMethod &#96;
+  -Uri "http://localhost:8080/api/v1/registrations?gender=female&abuse_type=psychological&status=open&limit=10" &#96;
+  -Headers @{Authorization=$READER_TOKEN}
+
+Invoke-RestMethod &#96;
+  -Uri "http://localhost:8080/api/v1/registrations?from=1989-01-01&to=1990-01-01&offset=20&limit=10" &#96;
+  -Headers @{Authorization=$READER_TOKEN}
+
+Invoke-RestMethod &#96;
+  -Uri "http://localhost:8080/api/v1/locations" &#96;
+  -Headers @{Authorization=$READER_TOKEN}</code></pre>
+
+          <h3>CRUD user — create, update, delete</h3>
+          <pre><code>$admin = Invoke-RestMethod &#96;
+  -Method Post &#96;
+  -Uri "http://localhost:8080/login" &#96;
+  -ContentType "application/json" &#96;
+  -Body '{"user_name":"admin","password":"admin-password"}'
+
+$ADMIN_TOKEN = $admin.token
+
+$created = Invoke-RestMethod &#96;
+  -Method Post &#96;
+  -Uri "http://localhost:8080/api/v1/registrations" &#96;
+  -Headers @{Authorization=$ADMIN_TOKEN} &#96;
+  -ContentType "application/json" &#96;
+  -Body '{"gender":"unknown","location":"Tórshavn","abuse_type":"psychological","status":"new"}'
+
+$CREATED_ID = $created.id
+
+Invoke-RestMethod &#96;
+  -Method Put &#96;
+  -Uri "http://localhost:8080/api/v1/registrations/$CREATED_ID" &#96;
+  -Headers @{Authorization=$ADMIN_TOKEN} &#96;
+  -ContentType "application/json" &#96;
+  -Body '{"gender":"female","location":"Skopun","abuse_type":"digital","status":"referred"}'
+
+Invoke-RestMethod &#96;
+  -Method Delete &#96;
+  -Uri "http://localhost:8080/api/v1/registrations/$CREATED_ID" &#96;
+  -Headers @{Authorization=$ADMIN_TOKEN}</code></pre>
+        </div>
+      </details>
+    </div>
+  </section>
+
+  <section class="section-block data-section">
+    <h2>Current JSON data</h2>
+    <p class="muted">This viewer loads a public demo snapshot. The actual API routes under <code>/api/v1</code> still require a JWT.</p>
+
+    <div class="data-browser">
+      <form id="filter-form" class="filter-form">
+        <label>Location
+          <select name="location">
+            <option value="">all</option>
+            {{ range .Locations }}<option value="{{ . }}">{{ . }}</option>{{ end }}
+          </select>
+        </label>
+        <label>Abuse type
+          <select name="abuse_type">
+            <option value="">all</option>
+            {{ range .Categories }}<option value="{{ . }}">{{ . }}</option>{{ end }}
+          </select>
+        </label>
+        <label>Gender
+          <select name="gender">
+            <option value="">all</option>
+            {{ range .Genders }}<option value="{{ . }}">{{ . }}</option>{{ end }}
+          </select>
+        </label>
+        <label>Status
+          <select name="status">
+            <option value="">all</option>
+            {{ range .Statuses }}<option value="{{ . }}">{{ . }}</option>{{ end }}
+          </select>
+        </label>
+        <label>From <input name="from" placeholder="1988-01-01"></label>
+        <label>To <input name="to" placeholder="1991-12-31"></label>
+        <label>Search <input name="search" placeholder="uuid or field text"></label>
+        <label>Limit <input name="limit" type="number" min="0" value="50"></label>
+        <div class="inline form-buttons">
+          <button type="submit">Apply filters</button>
+          <button type="button" id="reset-filters">Clear</button>
+        </div>
+      </form>
+
+      <div class="json-pane">
+        <p id="data-status" class="muted">Loading data…</p>
+        <pre class="json-output"><code id="json-data">[]</code></pre>
+      </div>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <span>&copy; <script>document.write(new Date().getFullYear())</script> <a href="https://fló.fo">FLÓ.FO</a> | ALL RIGHTS RESERVED | {{ .Version }}</span>
+  <a href="https://www.linkedin.com/in/bartal-l%C3%A6arsson-63793895/" target="_blank" rel="noopener" class="footer-icon" aria-label="LinkedIn">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+  </a>
+</footer>
+
+<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+
+<script src="/static/js/theme.js"></script>
+<script src="/static/js/app.js"></script>
+</body>
+</html>

internal/web/web.go

@@ -0,0 +1,26 @@
+package web
+
+import (
+	"embed"
+	"io/fs"
+)
+
+// Templates contains all server-rendered HTML templates.
+//
+//go:embed templates/index.html
+var Templates embed.FS
+
+// Assets contains every browser asset needed by the POC page.
+// The production binary serves these files from memory, so the server does not
+// depend on a static/ directory beside the executable.
+//
+//go:embed static/* static/css/* static/js/* favicon.ico
+var Assets embed.FS
+
+func StaticFS() (fs.FS, error) {
+	return fs.Sub(Assets, "static")
+}
+
+func Favicon() ([]byte, error) {
+	return Assets.ReadFile("favicon.ico")
+}