Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

README.md

@@ -101,6 +101,37 @@ same person can be signed in at two sites at once without the system arguing abo
 An admin account can be limited to a single site. Those admins see only that site's visitors,
 staff list and log, and cannot touch the others.
 
+## Branding the kiosk
+
+Each site can carry its own banner and colours, set under **Sites → Edit**.
+
+**Banner.** Upload a PNG, JPEG or WebP up to 2 MB. A PNG with a transparent background is the
+one to use — it sits straight on the bar colour with nothing painted behind it, so it works
+whatever colour you pick. The admin preview shows it on a checkerboard so you can see the
+transparency. When a banner is set it replaces the site name in the kiosk header; set the
+on-screen height in pixels to suit the shape of your logo. SVG is deliberately not accepted:
+it can carry script, and this file is served to every kiosk.
+
+**Colours.** Three are settable:
+
+| Setting | Where it shows |
+|---|---|
+| Bar and buttons | The top bar, the Sign in door, primary buttons, the confirmation mark |
+| Sign out | The Sign out door and the signed-out confirmation |
+| Page background | Behind everything, with card and rule colours derived from it |
+
+Everything else is worked out from those three. In particular the **text colour on a coloured
+background is chosen by contrast**, not fixed — pick a pale yellow for the bar and the text on
+it turns dark automatically, instead of staying white and becoming unreadable. Card, border and
+body-text colours follow the page colour, so a dark background gives a usable dark theme rather
+than white boxes.
+
+Leave a colour box empty to fall back to the default. Anything that is not a six-digit hex value
+is ignored rather than applied.
+
+The admin console keeps its own neutral look, so it stays recognisable when you are switching
+between sites. Printed badges stay black on white — a label printer has no colours to give.
+
 ## Badge printing
 
 Turn it on per site under **Sites → Edit**. After a visitor signs in, the kiosk loads the badge

public/css/admin.css

@@ -351,3 +351,52 @@ tr.row-bad td { background: #fdf0f2; }
 /* The confirmation for a destructive action should not look like a Save. */
 #modal.destructive { border-top-color: var(--alert); }
 #modal.destructive .primary { border-color: var(--alert); background: var(--alert); }
+
+/* ----------------------------------------------------- branding editor */
+
+.banner-frame {
+  /* A checkerboard, so a transparent PNG reads as transparent rather than white. */
+  background-color: #fff;
+  background-image:
+    linear-gradient(45deg, #e3e8ed 25%, transparent 25%, transparent 75%, #e3e8ed 75%),
+    linear-gradient(45deg, #e3e8ed 25%, transparent 25%, transparent 75%, #e3e8ed 75%);
+  background-size: 14px 14px;
+  background-position: 0 0, 7px 7px;
+  border: 1px solid var(--rule);
+  border-radius: 3px;
+  padding: 10px;
+  margin-bottom: 12px;
+  min-height: 76px;
+  display: grid;
+  place-items: center;
+}
+.banner-frame img { max-width: 100%; max-height: 90px; display: block; }
+.banner-empty { margin: 0; color: var(--muted); font-size: 13px; }
+
+.colour-row { display: flex; gap: 8px; align-items: center; }
+.colour-row input[type="color"] {
+  width: 42px;
+  height: 40px;
+  padding: 2px;
+  border: 1px solid var(--rule);
+  border-radius: 3px;
+  background: none;
+  cursor: pointer;
+}
+.colour-row input[type="text"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+.modal-row-3 { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+
+.swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  border: 1px solid var(--rule);
+  vertical-align: -2px;
+  margin-right: 2px;
+}

public/css/kiosk.css

@@ -6,8 +6,10 @@
   --rule: #c9d3dc;
   --deep: #0b4f4a;
   --deep-dark: #083a36;
+  --on-brand: #ffffff;
   --exit: #2c4a6b;
   --exit-dark: #1f3650;
+  --on-exit: #ffffff;
   --alert: #96162f;
   --focus: #0b4f4a;
 }
@@ -45,7 +47,17 @@ body {
   gap: 16px;
   padding: 14px 22px;
   background: var(--deep);
-  color: #eef5f3;
+  color: var(--on-brand);
+}
+
+/* An uploaded banner sits in the bar in place of the site name. Transparent PNGs
+   are the point, so nothing is painted behind it. */
+.banner {
+  max-height: 64px;
+  max-width: min(70%, 460px);
+  width: auto;
+  object-fit: contain;
+  display: block;
 }
 
 .site { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
@@ -108,11 +120,11 @@ h2 { font-size: 25px; margin: 4px 0 20px; }
   border-left: 7px solid var(--deep-dark);
   border-radius: 3px;
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font: inherit;
   cursor: pointer;
 }
-.door-out { background: var(--exit); border-left-color: var(--exit-dark); }
+.door-out { background: var(--exit); border-left-color: var(--exit-dark); color: var(--on-exit); }
 .door:active { transform: translateY(1px); }
 
 .door-title { display: block; font-size: 27px; font-weight: 650; letter-spacing: -0.01em; }
@@ -131,6 +143,7 @@ h2 { font-size: 25px; margin: 4px 0 20px; }
   cursor: pointer;
 }
 .text-action:hover { background: var(--card); }
+.text-action, .field input, .picker, .choice, .host-option { color: var(--ink); }
 
 /* ------------------------------------------------------- step rail */
 
@@ -280,11 +293,11 @@ a:focus-visible {
   padding: 7px 14px;
   border-radius: 2px;
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font-size: 14px;
   font-weight: 600;
 }
-#screen-done-out .mark { background: var(--exit); }
+#screen-done-out .mark { background: var(--exit); color: var(--on-exit); }
 
 /* ------------------------------------------------------------ buttons */
 
@@ -306,7 +319,7 @@ a:focus-visible {
 .nav .primary {
   border: 1px solid var(--deep);
   background: var(--deep);
-  color: #fff;
+  color: var(--on-brand);
   font-weight: 600;
 }
 .nav .ghost {

public/index.html

@@ -11,6 +11,7 @@
 <body>
 
 <header class="bar">
+  <img class="banner" id="banner" alt="" hidden>
   <p class="site" id="siteName">Visitor sign in</p>
   <p class="clock" id="clock"></p>
 </header>

public/js/admin.js

@@ -679,6 +679,13 @@ async function loadSites() {
               : 'Off'
           }</dd>
           ${s.badge.note ? `<dt>Badge note</dt><dd>${esc(s.badge.note)}</dd>` : ''}
+          <dt>Kiosk branding</dt>
+          <dd>
+            ${s.branding.hasBanner ? 'Banner set' : 'No banner'} ·
+            <span class="swatch" style="background:${esc(s.branding.theme.brand)}"></span>
+            <span class="swatch" style="background:${esc(s.branding.theme.signout)}"></span>
+            <span class="swatch" style="background:${esc(s.branding.theme.page)}"></span>
+          </dd>
         </dl>
       </article>`
     )
@@ -739,7 +746,32 @@ function openSiteModal(site) {
      <label class="inline"><input type="checkbox" name="accent" id="badge-accent" ${site.badge.accent ? 'checked' : ''}> Print the heading and the no-check warning in red</label>
      <p class="hint">Red needs a two-colour roll such as the Brother DK-22251. On any other
      roll it prints as grey. Two-colour printing is also much slower than black alone.</p>
-     ${field('Line printed at the bottom', 'note', site.badge.note)}`,
+     ${field('Line printed at the bottom', 'note', site.badge.note)}
+     <h4 class="modal-section">Kiosk branding</h4>
+     <div class="banner-editor">
+       <div class="banner-frame" id="banner-frame">
+         <img id="banner-preview" alt="Banner"${
+           site.branding.hasBanner ? ` src="/admin/api/sites/${site.id}/banner?t=${Date.now()}"` : ' hidden'
+         }>
+         <p class="banner-empty" id="banner-empty"${site.branding.hasBanner ? ' hidden' : ''}>No banner</p>
+       </div>
+       <div class="photo-actions">
+         <label class="ghost photo-upload">Upload an image
+           <input type="file" id="banner-file" accept="image/png,image/jpeg,image/webp" hidden>
+         </label>
+         <button type="button" class="ghost danger" id="banner-clear"${site.branding.hasBanner ? '' : ' hidden'}>Remove</button>
+       </div>
+       <p class="hint">A PNG with a transparent background works best — it sits straight on the
+       bar colour with nothing painted behind it. Up to 2 MB.</p>
+       ${field('Banner height on screen (px)', 'bannerHeight', site.branding.bannerHeight, 'number')}
+     </div>
+     <div class="modal-row modal-row-3">
+       ${colourField('Bar and buttons', 'brand', site.branding.brand, '#0b4f4a')}
+       ${colourField('Sign out', 'signout', site.branding.signout, '#2c4a6b')}
+       ${colourField('Page background', 'page', site.branding.page, '#e7ecf0')}
+     </div>
+     <p class="hint">Text colours are worked out from these, so a pale brand colour gets dark
+     text rather than white. Clear a box to go back to the default.</p>`,
     async (form) => {
       const data = Object.fromEntries(form.entries());
       try {
@@ -757,18 +789,96 @@ function openSiteModal(site) {
               accent: form.has('accent'),
               note: data.note,
             },
+            branding: {
+              brand: data.brand || null,
+              signout: data.signout || null,
+              page: data.page || null,
+              bannerHeight: Number(data.bannerHeight) || 64,
+            },
           },
         });
-        toast('Site saved. Preview the badge before committing a roll to it.');
+        if (bannerEditor.dataUrl) {
+          await api(`/sites/${site.id}/banner`, {
+            method: 'POST',
+            body: { image: bannerEditor.dataUrl },
+          });
+        } else if (bannerEditor.remove) {
+          await api(`/sites/${site.id}/banner`, { method: 'DELETE' });
+        }
+        toast('Site saved. Reload the kiosk to see the change.');
         loadSites();
       } catch (err) {
         toast(err.message, true);
       }
     },
-    { onOpen: wireBadgePreset }
+    {
+      onOpen: () => {
+        wireBadgePreset();
+        wireBannerEditor();
+      },
+    }
   );
 }
 
+/**
+ * A colour box paired with a text field, so a colour can be picked by eye or
+ * pasted from a brand guide, and cleared entirely to fall back to the default.
+ */
+function colourField(label, name, value, fallback) {
+  const current = value || '';
+  return `<label class="modal-field colour-field">
+    <span>${esc(label)}</span>
+    <span class="colour-row">
+      <input type="color" data-colour-for="${name}" value="${esc(current || fallback)}">
+      <input type="text" name="${name}" value="${esc(current)}" placeholder="${esc(fallback)}"
+             maxlength="7" spellcheck="false">
+    </span>
+  </label>`;
+}
+
+const bannerEditor = { dataUrl: null, remove: false };
+
+function wireBannerEditor() {
+  bannerEditor.dataUrl = null;
+  bannerEditor.remove = false;
+
+  // Keep the swatch and the hex box in step, in both directions.
+  $$('#modal-form [data-colour-for]').forEach((swatch) => {
+    const text = $(`#modal-form [name="${swatch.dataset.colourFor}"]`);
+    swatch.addEventListener('input', () => {
+      text.value = swatch.value;
+    });
+    text.addEventListener('input', () => {
+      if (/^#[0-9a-fA-F]{6}$/.test(text.value.trim())) swatch.value = text.value.trim();
+    });
+  });
+
+  $('#banner-file').addEventListener('change', (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+    if (file.size > 2 * 1024 * 1024) return toast('That image is over 2 MB. Use a smaller one.', true);
+    const reader = new FileReader();
+    reader.onload = () => {
+      bannerEditor.dataUrl = reader.result;
+      bannerEditor.remove = false;
+      $('#banner-preview').src = reader.result;
+      $('#banner-preview').hidden = false;
+      $('#banner-empty').hidden = true;
+      $('#banner-clear').hidden = false;
+    };
+    reader.readAsDataURL(file);
+  });
+
+  $('#banner-clear').addEventListener('click', () => {
+    bannerEditor.dataUrl = null;
+    bannerEditor.remove = true;
+    $('#banner-preview').hidden = true;
+    $('#banner-preview').removeAttribute('src');
+    $('#banner-empty').hidden = false;
+    $('#banner-clear').hidden = true;
+  });
+}
+
 function wireBadgePreset() {
   const width = $('#modal-form [name="widthMm"]');
   const height = $('#modal-form [name="heightMm"]');

public/js/kiosk.js

@@ -435,11 +435,49 @@ async function chooseSite() {
   show('site', { push: false });
 }
 
+/**
+ * Applies the site's colours as CSS variables. Only three are chosen by an admin;
+ * the shades and the text colours that sit on them are derived server-side so a
+ * dark logo colour cannot end up with dark text on it.
+ */
+function applyTheme(theme, banner) {
+  if (theme) {
+    const root = document.documentElement.style;
+    root.setProperty('--deep', theme.brand);
+    root.setProperty('--deep-dark', theme.brandDark);
+    root.setProperty('--on-brand', theme.onBrand);
+    root.setProperty('--exit', theme.signout);
+    root.setProperty('--exit-dark', theme.signoutDark);
+    root.setProperty('--on-exit', theme.onSignout);
+    root.setProperty('--paper', theme.page);
+    root.setProperty('--card', theme.card);
+    root.setProperty('--ink', theme.ink);
+    root.setProperty('--rule', theme.rule);
+    root.setProperty('--focus', theme.brand);
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme.brand);
+  }
+
+  const img = $('#banner');
+  if (banner?.url) {
+    img.src = banner.url;
+    img.style.maxHeight = `${banner.height}px`;
+    img.hidden = false;
+    // The banner carries the branding, so the name beside it would just repeat it.
+    $('#siteName').hidden = true;
+  } else {
+    img.hidden = true;
+    img.removeAttribute('src');
+    $('#siteName').hidden = false;
+  }
+}
+
 async function loadSiteContext() {
   siteConfig = await api('/api/config');
   const name = siteConfig.site ? siteConfig.site.name : siteConfig.siteName;
   document.title = name;
   $('#siteName').textContent = name;
+  $('#banner').alt = name;
+  applyTheme(siteConfig.theme, siteConfig.banner);
 
   const change = $('#change-site');
   change.hidden = !siteConfig.multiSite;

src/branding.js

@@ -0,0 +1,123 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import crypto from 'node:crypto';
+import config from './config.js';
+
+/**
+ * Per-site branding: an uploaded banner and a small set of colours.
+ *
+ * Only three colours are settable, and the rest of the palette is derived from
+ * them. Exposing every colour would let someone produce an unreadable kiosk, and
+ * the one that matters most — the text on a coloured bar — is chosen by contrast
+ * rather than left to chance.
+ */
+
+export const DEFAULT_THEME = {
+  brand: '#0b4f4a',
+  signout: '#2c4a6b',
+  page: '#e7ecf0',
+};
+
+const BANNER_DIR = path.join(config.dataDir, 'branding');
+const MAX_BANNER_BYTES = 2 * 1024 * 1024;
+
+fs.mkdirSync(BANNER_DIR, { recursive: true });
+
+/* -------------------------------------------------------------- colour */
+
+export function isHexColour(value) {
+  return /^#[0-9a-f]{6}$/i.test(String(value || '').trim());
+}
+
+export function normaliseColour(value, fallback) {
+  return isHexColour(value) ? String(value).trim().toLowerCase() : fallback;
+}
+
+function toRgb(hex) {
+  return [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+}
+
+/** Relative luminance, per WCAG, used to pick readable text over a colour. */
+function luminance(hex) {
+  const [r, g, b] = toRgb(hex).map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** White or near-black, whichever is easier to read on the given background. */
+export function readableOn(hex) {
+  return luminance(hex) > 0.45 ? '#16202b' : '#ffffff';
+}
+
+/** Shifts a colour towards black (negative) or white (positive). */
+export function shade(hex, amount) {
+  const channels = toRgb(hex).map((channel) => {
+    const target = amount < 0 ? 0 : 255;
+    const value = Math.round(channel + (target - channel) * Math.abs(amount));
+    return Math.max(0, Math.min(255, value));
+  });
+  return `#${channels.map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+}
+
+/** The full palette the kiosk needs, derived from what an admin actually set. */
+export function themeFor(site) {
+  const brand = normaliseColour(site?.colour_brand, DEFAULT_THEME.brand);
+  const signout = normaliseColour(site?.colour_signout, DEFAULT_THEME.signout);
+  const page = normaliseColour(site?.colour_page, DEFAULT_THEME.page);
+  return {
+    brand,
+    brandDark: shade(brand, -0.25),
+    onBrand: readableOn(brand),
+    signout,
+    signoutDark: shade(signout, -0.25),
+    onSignout: readableOn(signout),
+    page,
+    // A card needs to lift off the page whether the page is light or dark.
+    card: luminance(page) > 0.5 ? '#ffffff' : shade(page, 0.12),
+    ink: readableOn(page) === '#ffffff' ? '#f2f5f7' : '#16202b',
+    rule: luminance(page) > 0.5 ? shade(page, -0.12) : shade(page, 0.2),
+  };
+}
+
+/* -------------------------------------------------------------- banner */
+
+/** Accepts a data URL from the admin console and writes it to disk. */
+export function saveBanner(siteId, dataUrl) {
+  const match = /^data:image\/(png|jpeg|jpg|webp);base64,([A-Za-z0-9+/=]+)$/.exec(
+    String(dataUrl || '').trim()
+  );
+  if (!match) {
+    // SVG is deliberately not accepted: it can carry script, and this file is
+    // served to every kiosk.
+    throw new Error('Use a PNG, JPEG or WebP image. PNG keeps transparency.');
+  }
+
+  const buffer = Buffer.from(match[2], 'base64');
+  if (buffer.length > MAX_BANNER_BYTES) throw new Error('That image is over 2 MB. Use a smaller one.');
+
+  const ext = match[1] === 'jpg' ? 'jpeg' : match[1];
+  const name = `site-${siteId}-${crypto.randomBytes(4).toString('hex')}.${ext}`;
+  fs.mkdirSync(BANNER_DIR, { recursive: true });
+  fs.writeFileSync(path.join(BANNER_DIR, name), buffer);
+  return name;
+}
+
+export function bannerAbsolutePath(name) {
+  if (!name) return null;
+  const resolved = path.resolve(BANNER_DIR, name);
+  if (!resolved.startsWith(path.resolve(BANNER_DIR))) return null;
+  return fs.existsSync(resolved) ? resolved : null;
+}
+
+export function deleteBanner(name) {
+  const abs = bannerAbsolutePath(name);
+  if (abs) {
+    try {
+      fs.unlinkSync(abs);
+    } catch {
+      /* already gone */
+    }
+  }
+}

src/db.js

@@ -22,6 +22,11 @@ CREATE TABLE IF NOT EXISTS sites (
   badge_show_photo INTEGER NOT NULL DEFAULT 1,
   badge_accent    INTEGER NOT NULL DEFAULT 0,
   badge_note    TEXT,
+  banner_path   TEXT,
+  banner_height INTEGER NOT NULL DEFAULT 64,
+  colour_brand  TEXT,
+  colour_signout TEXT,
+  colour_page   TEXT,
   active        INTEGER NOT NULL DEFAULT 1,
   created_at    TEXT NOT NULL DEFAULT (datetime('now'))
 );
@@ -153,6 +158,12 @@ addColumn('frequent_visitors', 'photo_path', 'TEXT');
 addColumn('frequent_visitors', 'pin_lookup', 'TEXT');
 // Two-colour printing, for rolls like the Brother DK-22251.
 addColumn('sites', 'badge_accent', 'INTEGER NOT NULL DEFAULT 0');
+// Per-site branding on the kiosk.
+addColumn('sites', 'banner_path', 'TEXT');
+addColumn('sites', 'banner_height', 'INTEGER NOT NULL DEFAULT 64');
+addColumn('sites', 'colour_brand', 'TEXT');
+addColumn('sites', 'colour_signout', 'TEXT');
+addColumn('sites', 'colour_page', 'TEXT');
 
 db.exec('CREATE INDEX IF NOT EXISTS idx_visits_site ON visits(site_id, signed_out_at)');
 db.exec('CREATE INDEX IF NOT EXISTS idx_hosts_site ON hosts(site_id, active)');

src/routes/admin.js

@@ -10,6 +10,13 @@ import * as sheets from '../sheets.js';
 import * as tls from '../tls.js';
 import * as users from '../users.js';
 import { badgeHtml, listSites, shapeSite, uniqueSlug, escapeHtml as esc } from '../sites.js';
+import {
+  DEFAULT_THEME,
+  bannerAbsolutePath,
+  deleteBanner,
+  normaliseColour,
+  saveBanner,
+} from '../branding.js';
 import {
   consumeRecoveryCode,
   generateRecoveryCodes,
@@ -376,9 +383,11 @@ router.patch('/sites/:id', (req, res) => {
   if (!site) return res.status(404).json({ error: 'Not found.' });
 
   const badge = req.body?.badge || {};
+  const branding = req.body?.branding || {};
   db.prepare(
     `UPDATE sites SET name = ?, slug = ?, active = ?, badge_enabled = ?, badge_width_mm = ?,
-      badge_height_mm = ?, badge_show_photo = ?, badge_accent = ?, badge_note = ? WHERE id = ?`
+      badge_height_mm = ?, badge_show_photo = ?, badge_accent = ?, badge_note = ?,
+      colour_brand = ?, colour_signout = ?, colour_page = ?, banner_height = ? WHERE id = ?`
   ).run(
     clean(req.body?.name ?? site.name, 100) || site.name,
     req.body?.slug ? uniqueSlug(req.body.slug, site.id) : site.slug,
@@ -388,12 +397,60 @@ router.patch('/sites/:id', (req, res) => {
     Math.min(200, Math.max(15, Number(badge.heightMm ?? site.badge_height_mm) || 54)),
     badge.showPhoto !== undefined ? (badge.showPhoto ? 1 : 0) : site.badge_show_photo,
     badge.accent !== undefined ? (badge.accent ? 1 : 0) : site.badge_accent,
-    badge.note !== undefined ? clean(badge.note, 120) || null : site.badge_note
+    badge.note !== undefined ? clean(badge.note, 120) || null : site.badge_note,
+    // A blank colour means "use the default", so it is stored as NULL rather than
+    // being quietly frozen at whatever the default happens to be today.
+    branding.brand !== undefined
+      ? normaliseColour(branding.brand, null)
+      : site.colour_brand,
+    branding.signout !== undefined
+      ? normaliseColour(branding.signout, null)
+      : site.colour_signout,
+    branding.page !== undefined ? normaliseColour(branding.page, null) : site.colour_page,
+    branding.bannerHeight !== undefined
+      ? Math.min(200, Math.max(24, Number(branding.bannerHeight) || 64))
+      : site.banner_height
   , site.id);
 
   res.json(shapeSite(db.prepare('SELECT * FROM sites WHERE id = ?').get(site.id)));
 });
 
+/* ------------------------------------------------------------- branding */
+
+router.post('/sites/:id/banner', (req, res) => {
+  const site = db.prepare('SELECT * FROM sites WHERE id = ?').get(req.params.id);
+  if (!site) return res.status(404).json({ error: 'Not found.' });
+  try {
+    assertSiteAllowed(req, site.id);
+    const name = saveBanner(site.id, req.body?.image);
+    if (site.banner_path) deleteBanner(site.banner_path);
+    db.prepare('UPDATE sites SET banner_path = ? WHERE id = ?').run(name, site.id);
+    res.json({ ok: true, url: `/api/branding/${site.id}/banner?t=${Date.now()}` });
+  } catch (err) {
+    res.status(err.status || 400).json({ error: err.message });
+  }
+});
+
+router.delete('/sites/:id/banner', (req, res) => {
+  const site = db.prepare('SELECT * FROM sites WHERE id = ?').get(req.params.id);
+  if (!site) return res.status(404).json({ error: 'Not found.' });
+  try {
+    assertSiteAllowed(req, site.id);
+  } catch (err) {
+    return res.status(403).json({ error: err.message });
+  }
+  if (site.banner_path) deleteBanner(site.banner_path);
+  db.prepare('UPDATE sites SET banner_path = NULL WHERE id = ?').run(site.id);
+  res.json({ ok: true });
+});
+
+router.get('/sites/:id/banner', (req, res) => {
+  const site = db.prepare('SELECT banner_path FROM sites WHERE id = ?').get(req.params.id);
+  const abs = site && bannerAbsolutePath(site.banner_path);
+  if (!abs) return res.status(404).send('No banner set.');
+  res.sendFile(abs);
+});
+
 router.get('/sites/:id/badge-preview', (req, res) => {
   const site = db.prepare('SELECT * FROM sites WHERE id = ?').get(req.params.id);
   if (!site) return res.status(404).send('Not found.');

src/routes/kiosk.js

@@ -6,6 +6,7 @@ import { savePhoto, photoAbsolutePath, copyStoredPhoto } from '../photos.js';
 import { mirror } from '../sheets.js';
 import { verifyPin } from '../pins.js';
 import { listSites, resolveSite, badgeHtml } from '../sites.js';
+import { themeFor, bannerAbsolutePath } from '../branding.js';
 import fs from 'node:fs';
 import {
   clean,
@@ -47,9 +48,24 @@ router.get('/config', (req, res) => {
       : null,
     siteName: site ? site.name : config.siteName,
     requirePhoto: config.requirePhoto,
+    // Branding for this kiosk: colours are applied as CSS variables and the
+    // banner replaces the site name in the top bar.
+    theme: themeFor(site),
+    banner: site?.banner_path
+      ? { url: `/api/branding/${site.id}/banner`, height: site.banner_height || 64 }
+      : null,
   });
 });
 
+/** The site banner. Public, because the kiosk shows it before anyone signs in. */
+router.get('/branding/:id/banner', (req, res) => {
+  const site = db.prepare('SELECT banner_path FROM sites WHERE id = ?').get(req.params.id);
+  const abs = site && bannerAbsolutePath(site.banner_path);
+  if (!abs) return res.status(404).send('No banner set.');
+  res.setHeader('Cache-Control', 'public, max-age=300');
+  res.sendFile(abs);
+});
+
 router.get('/hosts', (req, res) => {
   const site = siteFrom(req);
   if (!site) return res.json([]);

src/sites.js

@@ -1,5 +1,6 @@
 import db from './db.js';
 import { clean, localStamp } from './util.js';
+import { themeFor } from './branding.js';
 
 export function listSites({ activeOnly = false } = {}) {
   const sql = `SELECT * FROM sites ${activeOnly ? 'WHERE active = 1' : ''} ORDER BY name COLLATE NOCASE`;
@@ -48,6 +49,14 @@ export function shapeSite(site) {
     name: site.name,
     slug: site.slug,
     active: Boolean(site.active),
+    branding: {
+      hasBanner: Boolean(site.banner_path),
+      bannerHeight: site.banner_height || 64,
+      brand: site.colour_brand,
+      signout: site.colour_signout,
+      page: site.colour_page,
+      theme: themeFor(site),
+    },
     badge: {
       enabled: Boolean(site.badge_enabled),
       widthMm: site.badge_width_mm,