From ea1eac1c28f18b161605cbd61f34b278ceaebca2 Mon Sep 17 00:00:00 2001 From: Waters Church Date: Thu, 17 Sep 2026 13:16:47 -0400 Subject: [PATCH 1/2] Twelve themes, and the Theme section folds away MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Seven more palettes: Midnight (indigo, violet), Moss (forest floor, lime), Plum (aubergine, purple), Sepia (warm brown with a cool teal — Ember's arrangement reversed), Blackout (true black for a dark room, where any glow off the screen carries), Paper (the warm light one, next to Daylight's cool white) and Iron, which has no colour of its own: its accent is near-white, so the only hues on screen are a module's own and the red and amber that mean something. Each holds the line the first five set. Text on panel lands between 14.8:1 and 19.8:1, muted between 5.8:1 and 7.4:1, and every accent clears its own theme's danger red and warning amber by more than Ember already does — the narrowest of the new ones is Moss at 54 degrees of hue, against Ember's 18. The Theme section now starts folded, wearing the same disclosure triangle as a module's config groups. A building picks its palette once and then wants the rest of the page, which was getting further down the screen with every swatch. Co-Authored-By: Claude Opus 5 --- README.md | 28 ++++++++--- public/admin/admin.css | 23 +++++++++ public/admin/index.html | 8 ++-- public/style.css | 103 +++++++++++++++++++++++++++++++++++++++- server.js | 7 +++ 5 files changed, 157 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 3d03f1a..ff36bc0 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,7 @@ with this machine's shell settings — the same keys as the checked-in | `adminPin` | The admin PIN, as a scrypt hash. **Set it in the admin page's Admin PIN section**, not by hand — 6 digits, and only the hash is stored. Absent means admin is open to anyone on the network. | | `adminPasscode` | An older free-text passcode. Still honoured, so an existing install keeps working; new installs should use `adminPin`. | | `forge` | Where updates and module installs are fetched from. Absent or `"github"` uses GitHub; a Gitea or Forgejo base URL such as `"http://10.3.8.90:3000"` uses a server of your own. Set it per machine in the data directory, alongside `repo`. | -| `theme` | The dashboard palette: `booth` (default), `harbor`, `graphite`, `ember` or `daylight`. The admin page's **Theme** section writes this one — see [Themes](#themes). | +| `theme` | The dashboard palette: `booth` (default), `harbor`, `graphite`, `ember`, `daylight`, `midnight`, `moss`, `plum`, `sepia`, `blackout`, `paper` or `iron`. The admin page's **Theme** section writes this one — see [Themes](#themes). | **Locked out?** Delete `adminPin` from the data directory's `proddash.json` and restart, or start the server with `PRODDASH_PASSCODE` set — that passcode @@ -140,12 +140,26 @@ ignored from then on. The whole dashboard — every tile, on every browser — draws with one palette, chosen in the admin page's **Theme** section and switched live: pick a swatch -and open dashboards change without a reload. Five presets ship: **Booth** -(the default dark, mint accent), **Harbor** (deep navy, cyan), **Graphite** -(neutral charcoal, electric blue), **Ember** (warm broadcast black, orange) -and **Daylight**, a light palette for a front-of-house desk in daytime. Each -keeps the status colours apart — the accent is never near the danger red or -the warning amber — and muted text readable in a dark booth. The choice is +and open dashboards change without a reload. The section starts folded — +a building picks its palette once — and holds twelve presets: + +| | | +|---|---| +| **Booth** | the default dark, mint accent | +| **Harbor** | deep navy, cyan | +| **Graphite** | neutral charcoal, electric blue | +| **Ember** | warm broadcast black, orange | +| **Daylight** | a cool light palette, for a front-of-house desk in daytime | +| **Midnight** | indigo night, violet | +| **Moss** | forest floor, lime | +| **Plum** | aubergine, purple | +| **Sepia** | warm brown room, cool teal — Ember's arrangement reversed | +| **Blackout** | true black, cyan, for a dark room where any glow carries | +| **Paper** | the warm light one, indigo accent | +| **Iron** | no colour of its own: a near-white accent, so the only hues on screen are a module's own and the red and amber that mean something | + +Each keeps the status colours apart — the accent is never near the danger red +or the warning amber — and muted text readable in a dark booth. The choice is stored as `theme` in the data directory's `proddash.json` (table above), so it holds across restarts and updates; a browser remembers the last theme it saw and applies it before the server answers, so nothing flashes. Modules diff --git a/public/admin/admin.css b/public/admin/admin.css index 7eec5df..569076a 100644 --- a/public/admin/admin.css +++ b/public/admin/admin.css @@ -451,6 +451,29 @@ a.btn { text-decoration: none; } /* one swatch per preset: a miniature dashboard (page, a tile on it, the accent as a status dot) and the name; the current one wears the accent */ +/* A whole admin section that folds, wearing the same disclosure triangle as + a module's config groups. Theme is set once for a building and then left + alone, so it starts closed and keeps the rest of the page in reach. */ +details.admin-fold > summary.admin-fold-title { + cursor: pointer; + list-style: none; + display: flex; + align-items: center; + gap: 8px; + user-select: none; +} +details.admin-fold > summary.admin-fold-title::-webkit-details-marker { display: none; } +details.admin-fold > summary.admin-fold-title::before { + content: ""; + width: 0; height: 0; + border-left: 6px solid var(--muted); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + transition: transform 0.15s; +} +details.admin-fold[open] > summary.admin-fold-title::before { transform: rotate(90deg); } +details.admin-fold > summary.admin-fold-title:hover { color: var(--accent); } + .theme-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); diff --git a/public/admin/index.html b/public/admin/index.html index a327283..df0e1d4 100644 --- a/public/admin/index.html +++ b/public/admin/index.html @@ -41,9 +41,11 @@