← back to Age Theme Slider
initial scaffold — standalone age theme slider on :9717
9d7659ca2651ed474d9b4eb9a5ab642abbb4dd4e · 2026-05-12 07:59:20 -0700 · Steve Abrams
Files touched
A .gitignoreA bands.jsonA package-lock.jsonA package.jsonA public/embed.htmlA public/index.htmlA server.js
Diff
commit 9d7659ca2651ed474d9b4eb9a5ab642abbb4dd4e
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue May 12 07:59:20 2026 -0700
initial scaffold — standalone age theme slider on :9717
---
.gitignore | 8 +
bands.json | 96 +++++++
package-lock.json | 827 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
package.json | 12 +
public/embed.html | 63 +++++
public/index.html | 380 +++++++++++++++++++++++++
server.js | 44 +++
7 files changed, 1430 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1924158
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+.env*
+tmp/
+*.log
+.DS_Store
+dist/
+build/
+.next/
diff --git a/bands.json b/bands.json
new file mode 100644
index 0000000..a28a2ab
--- /dev/null
+++ b/bands.json
@@ -0,0 +1,96 @@
+{
+ "version": "9.0.0",
+ "validated_at": "2026-05-12",
+ "_source_of_truth_note": "DOCS MIRROR of ~/Projects/wallco-ai/src/bands.json (which is the canonical, project-local, deploy-portable copy — see feedback_deploy_portability_bands 2026-05-12). server.js require()s the project copy directly. This skill copy exists so other DW-family sites can reach the same data via the skill path. Identical bytes — diff on version bump.",
+ "_validation_provenance": "v9 = post-debate-team-fast round 2 (Claude/Kimi/Qwen) + ui-ux-designer subagent + best-practices skill. Companion Figma: https://www.figma.com/design/WmwSirHywv530eACPtbqyA",
+ "_scope_disclaimer": "Typography and palette adaptation only — does NOT satisfy WCAG 2.1 AA without independent audit. APCA Lc values were calculated by self-implemented apcaLc() (~/Projects/wallco-ai/src/apca.js — mirrored at ~/.claude/skills/age-adaptive-theme/lib/apca.js); they are not lab-verified.",
+ "tokens": {
+ "font_line_height_default": 1.5,
+ "font_line_height_elder": 1.6,
+ "btn_min_height_default": 44,
+ "btn_min_height_senior": 48,
+ "btn_min_height_elder": 56
+ },
+ "bands": [
+ {
+ "id": "toddler", "age": "3-5", "label": "Toddler",
+ "current": { "bg":"#fff9e6", "panel":"#fff", "fg":"#222", "accent":"#ff3b30", "border":"#f4d000", "font":"Marker Felt, Comic Sans MS", "body":24, "h":48 },
+ "best": { "bg":"#fff9e6", "panel":"#fff", "fg":"#222", "accent":"#ff3b30", "border":"#f4d000", "font":"Fredoka, Comic Neue, Comic Sans MS", "body":24, "h":48 },
+ "swap": "Font: Marker Felt → **Fredoka** (web-safe alternative to Sassoon Primary)",
+ "reasoning": "Sassoon Primary was the research-grade pick (Bessemans, UK literacy for ages 4-7) but it's a paid font rarely available in CSS. Fredoka (Google Fonts) gives the same rounded-terminal, open-counter properties. Kept fg #222 — debate team flagged the originally proposed #1a1a1a darkening as imperceptible LLM precision; APCA confirms (Lc swing <2 points).",
+ "mood": "warm · playful · primary · safe · uncomplicated",
+ "anchor": "ABC Kids Australia · Sesame Street identity",
+ "sample": "apple 🍎"
+ },
+ {
+ "id": "kid", "age": "6-9", "label": "Elementary",
+ "current": { "bg":"#fff", "panel":"#fef9c3", "fg":"#1f2937", "accent":"#3b82f6", "border":"#fbbf24", "font":"Comic Sans MS, Chalkboard SE", "body":18, "h":30 },
+ "best": { "bg":"#fff", "panel":"#fef9c3", "fg":"#1f2937", "accent":"#3b82f6", "border":"#fbbf24", "font":"Nunito, Chalkboard SE", "body":18, "h":30 },
+ "swap": "Font: Comic Sans MS → **Nunito**",
+ "reasoning": "Nunito has the rounded terminals of Chalkboard SE but uniform stroke width + consistent spacing. Verified in children's e-reader studies (Bessemans 2012) to gain ~10-15% reading speed over Comic Sans for ages 6-9.",
+ "mood": "friendly · approachable · structured · bright · safe",
+ "anchor": "Khan Academy Kids · BBC Bitesize",
+ "sample": "Tell me more →"
+ },
+ {
+ "id": "tween", "age": "10-12", "label": "Tween",
+ "current": { "bg":"#fef3c7", "panel":"#fff", "fg":"#1f2937", "accent":"#6366f1", "border":"#fbbf24", "font":"Avenir", "body":15, "h":22 },
+ "best": { "bg":"#fef3c7", "panel":"#fff", "fg":"#1f2937", "accent":"#4338ca", "border":"#fbbf24", "font":"Public Sans, Avenir", "body":15, "h":22 },
+ "swap": "Accent: #6366f1 → **#4338ca** (indigo-700) — fixes WCAG",
+ "reasoning": "Indigo-500 on amber yields ~3.8:1 contrast — fails WCAG AA for UI components. Indigo-700 pushes to 5.1:1, comfortably AA. Public Sans (US Web Design System) is brand-forward without being babyish.",
+ "mood": "confident · bright · structured · empowering · clean",
+ "anchor": "Roblox docs · Notion teen tutorials",
+ "sample": "Pick your favorite"
+ },
+ {
+ "id": "teen", "age": "13-19", "label": "Teen",
+ "current": { "bg":"#0a0014", "panel":"#1a0030", "fg":"#f0f0ff", "accent":"#ff00ff", "border":"#2a0050", "font":"JetBrains Mono", "body":12, "h":18 },
+ "best": { "bg":"#0a0014", "panel":"#1a0030", "fg":"#f0f0ff", "accent":"#ff00ff", "border":"#2a0050", "font":"Space Grotesk, JetBrains Mono", "body":16, "h":22 },
+ "swap": "Body: 12 → **16px** (v9); Heading: 18 → **22px**",
+ "reasoning": "v8 bumped body to 14px but the debate team flagged that as still below WCAG normal-text 16px floor — v9 clears the floor. Cyberpunk density preserved via letter-spacing:-0.01em (set in CSS-var). Space Grotesk for prose with JetBrains Mono for code blocks gives cyberpunk signal without the readability tax.",
+ "mood": "dense · technical · neon · power-user · rebel",
+ "anchor": "Linear command palette · Vercel docs at night",
+ "sample": "> sudo make_it_rain.sh"
+ },
+ {
+ "id": "adult", "age": "20-44", "label": "Adult",
+ "current": { "bg":"#0a0c12", "panel":"#161a26", "fg":"#e6eef8", "accent":"#7c3aed", "border":"#252b3d", "font":"-apple-system, BlinkMacSystemFont", "body":13, "h":18 },
+ "best": { "bg":"#0a0c12", "panel":"#161a26", "fg":"#e6eef8", "accent":"#7c3aed", "border":"#252b3d", "font":"-apple-system, BlinkMacSystemFont", "body":15, "h":18 },
+ "swap": "Body: 13px → **15px**; line-height baseline **1.5** (v9)",
+ "reasoning": "13px = VS Code code-editor size, fine for tables, wrong for prose UI. At 96dpi that's 1.4mm physical char height — below ISO 9241-303 ergonomics minimum of 1.5mm. Debate team flagged the -apple-system → Inter swap as visually identical on macOS — kept -apple-system. v9 also adds --font-line-height: 1.5 baseline CSS var (was implicit 1.2) to clear WCAG SC 1.4.12 text-spacing override target.",
+ "mood": "refined · efficient · sophisticated · neutral · ergonomic",
+ "anchor": "Linear · Notion · Vercel admin",
+ "sample": "Active campaigns (24)"
+ },
+ {
+ "id": "mature", "age": "45-59", "label": "Mature",
+ "current": { "bg":"#f8f6f1", "panel":"#fff", "fg":"#1c1917", "accent":"#7c2d12", "border":"#d6d3d1", "font":"Georgia, Iowan Old Style", "body":15, "h":22 },
+ "best": { "bg":"#f8f6f1", "panel":"#fff", "fg":"#1c1917", "accent":"#6b1d07", "border":"#d6d3d1", "font":"Source Serif Pro, Georgia", "body":15, "h":22 },
+ "swap": "Accent: #7c2d12 → **#6b1d07** (deeper) for APCA Lc 72+",
+ "reasoning": "Presbyopic eyes lose contrast sensitivity (Owsley et al.) — borderline APCA Lc 63 burgundy becomes genuinely hard to read at 15px. Going darker (same hue family) gets to Lc ~72. Source Serif Pro modernizes Georgia with cleaner italics.",
+ "mood": "classic · earthy · considered · warm · grown",
+ "anchor": "NYT Cooking · Tate Modern brand",
+ "sample": "Roasted Lamb Shoulder"
+ },
+ {
+ "id": "senior", "age": "60-79", "label": "Senior",
+ "current": { "bg":"#fff", "panel":"#fff", "fg":"#000", "accent":"#0050a0", "border":"#000", "font":"Helvetica Neue, Helvetica, Arial", "body":20, "h":30 },
+ "best": { "bg":"#fff", "panel":"#fff", "fg":"#000", "accent":"#0050a0", "border":"#000", "font":"Atkinson Hyperlegible, Helvetica", "body":20, "h":30 },
+ "swap": "Font: Helvetica Neue → **Atkinson Hyperlegible**",
+ "reasoning": "Built by Braille Institute specifically for low-vision readers. Differentiated letterforms (1/l/I, 0/O), heavy ink traps, x-height higher than Helvetica's ~0.52 ratio. Free via Google Fonts. NIA-aligned. Single highest-impact change in the senior band.",
+ "mood": "clear · spacious · trustworthy · contrast · direct",
+ "anchor": "BBC News mobile · NHS interfaces",
+ "sample": "Pay your bill"
+ },
+ {
+ "id": "elder", "age": "80+", "label": "Elder",
+ "current": { "bg":"#000", "panel":"#000", "fg":"#fff", "accent":"#ffff00", "border":"#fff", "font":"Helvetica Neue, Helvetica, Arial", "body":26, "h":42 },
+ "best": { "bg":"#000", "panel":"#000", "fg":"#fff", "accent":"#ffff00", "border":"#fff", "font":"Atkinson Hyperlegible, Helvetica", "body":28, "h":44 },
+ "swap": "Font: Helvetica Neue → **Atkinson Hyperlegible**; Body 26→**28px**; btn-min-height **56px** (v9)",
+ "reasoning": "Cataract-yellowed lens scatters blue/white — yellow-on-black avoids scatter (preserve). At 80+ letterform disambiguation (m/n/rn, 1/l/I, 0/O) is critical. Atkinson Hyperlegible is purpose-built. WCAG 2.1 large-text floor is 24px regular — 28px gives comfortable margin. v9 adds --btn-min-height: 56px per NIA motor-decline guidance (senior gets 48px, mature 44px).",
+ "mood": "bold · clinical · safe · simple · monumental",
+ "anchor": "AARP large-print · Amazon Mama Bear senior phone",
+ "sample": "CALL FAMILY"
+ }
+ ]
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..29b8260
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,827 @@
+{
+ "name": "age-theme-slider",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "age-theme-slider",
+ "version": "1.0.0",
+ "dependencies": {
+ "express": "^4.19.2"
+ }
+ },
+ "node_modules/accepts": {
+ "version": "1.3.8",
+ "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+ "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-types": "~2.1.34",
+ "negotiator": "0.6.3"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/array-flatten": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+ "license": "MIT"
+ },
+ "node_modules/body-parser": {
+ "version": "1.20.5",
+ "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.5.tgz",
+ "integrity": "sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==",
+ "license": "MIT",
+ "dependencies": {
+ "bytes": "~3.1.2",
+ "content-type": "~1.0.5",
+ "debug": "2.6.9",
+ "depd": "2.0.0",
+ "destroy": "~1.2.0",
+ "http-errors": "~2.0.1",
+ "iconv-lite": "~0.4.24",
+ "on-finished": "~2.4.1",
+ "qs": "~6.15.1",
+ "raw-body": "~2.5.3",
+ "type-is": "~1.6.18",
+ "unpipe": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8",
+ "npm": "1.2.8000 || >= 1.4.16"
+ }
+ },
+ "node_modules/bytes": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+ "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/call-bind-apply-helpers": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+ "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/call-bound": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+ "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "get-intrinsic": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/content-disposition": {
+ "version": "0.5.4",
+ "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+ "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+ "license": "MIT",
+ "dependencies": {
+ "safe-buffer": "5.2.1"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/content-type": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+ "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/cookie": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+ "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/cookie-signature": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+ "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+ "license": "MIT"
+ },
+ "node_modules/debug": {
+ "version": "2.6.9",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+ "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "license": "MIT",
+ "dependencies": {
+ "ms": "2.0.0"
+ }
+ },
+ "node_modules/depd": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+ "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/destroy": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+ "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8",
+ "npm": "1.2.8000 || >= 1.4.16"
+ }
+ },
+ "node_modules/dunder-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+ "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "gopd": "^1.2.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/ee-first": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+ "license": "MIT"
+ },
+ "node_modules/encodeurl": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+ "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/es-define-property": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+ "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-errors": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+ "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-object-atoms": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+ "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+ "license": "MIT"
+ },
+ "node_modules/etag": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+ "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/express": {
+ "version": "4.22.2",
+ "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz",
+ "integrity": "sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==",
+ "license": "MIT",
+ "dependencies": {
+ "accepts": "~1.3.8",
+ "array-flatten": "1.1.1",
+ "body-parser": "~1.20.5",
+ "content-disposition": "~0.5.4",
+ "content-type": "~1.0.4",
+ "cookie": "~0.7.1",
+ "cookie-signature": "~1.0.6",
+ "debug": "2.6.9",
+ "depd": "2.0.0",
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "etag": "~1.8.1",
+ "finalhandler": "~1.3.1",
+ "fresh": "~0.5.2",
+ "http-errors": "~2.0.0",
+ "merge-descriptors": "1.0.3",
+ "methods": "~1.1.2",
+ "on-finished": "~2.4.1",
+ "parseurl": "~1.3.3",
+ "path-to-regexp": "~0.1.12",
+ "proxy-addr": "~2.0.7",
+ "qs": "~6.15.1",
+ "range-parser": "~1.2.1",
+ "safe-buffer": "5.2.1",
+ "send": "~0.19.0",
+ "serve-static": "~1.16.2",
+ "setprototypeof": "1.2.0",
+ "statuses": "~2.0.1",
+ "type-is": "~1.6.18",
+ "utils-merge": "1.0.1",
+ "vary": "~1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.10.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/finalhandler": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+ "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "2.6.9",
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "on-finished": "~2.4.1",
+ "parseurl": "~1.3.3",
+ "statuses": "~2.0.2",
+ "unpipe": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/forwarded": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+ "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/fresh": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+ "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/function-bind": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+ "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-intrinsic": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+ "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "es-define-property": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "es-object-atoms": "^1.1.1",
+ "function-bind": "^1.1.2",
+ "get-proto": "^1.0.1",
+ "gopd": "^1.2.0",
+ "has-symbols": "^1.1.0",
+ "hasown": "^2.0.2",
+ "math-intrinsics": "^1.1.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+ "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+ "license": "MIT",
+ "dependencies": {
+ "dunder-proto": "^1.0.1",
+ "es-object-atoms": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/gopd": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+ "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/has-symbols": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+ "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/hasown": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+ "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+ "license": "MIT",
+ "dependencies": {
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/http-errors": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+ "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+ "license": "MIT",
+ "dependencies": {
+ "depd": "~2.0.0",
+ "inherits": "~2.0.4",
+ "setprototypeof": "~1.2.0",
+ "statuses": "~2.0.2",
+ "toidentifier": "~1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/iconv-lite": {
+ "version": "0.4.24",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+ "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+ "license": "MIT",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/inherits": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+ "license": "ISC"
+ },
+ "node_modules/ipaddr.js": {
+ "version": "1.9.1",
+ "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+ "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/math-intrinsics": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+ "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/media-typer": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+ "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/merge-descriptors": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+ "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/methods": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+ "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+ "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+ "license": "MIT",
+ "bin": {
+ "mime": "cli.js"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/ms": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+ "license": "MIT"
+ },
+ "node_modules/negotiator": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+ "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/object-inspect": {
+ "version": "1.13.4",
+ "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+ "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/on-finished": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+ "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+ "license": "MIT",
+ "dependencies": {
+ "ee-first": "1.1.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/parseurl": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+ "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/path-to-regexp": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
+ "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==",
+ "license": "MIT"
+ },
+ "node_modules/proxy-addr": {
+ "version": "2.0.7",
+ "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+ "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+ "license": "MIT",
+ "dependencies": {
+ "forwarded": "0.2.0",
+ "ipaddr.js": "1.9.1"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/qs": {
+ "version": "6.15.1",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
+ "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "side-channel": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/range-parser": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/raw-body": {
+ "version": "2.5.3",
+ "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+ "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+ "license": "MIT",
+ "dependencies": {
+ "bytes": "~3.1.2",
+ "http-errors": "~2.0.1",
+ "iconv-lite": "~0.4.24",
+ "unpipe": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/safe-buffer": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+ "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/feross"
+ },
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/feross"
+ },
+ {
+ "type": "consulting",
+ "url": "https://feross.org/support"
+ }
+ ],
+ "license": "MIT"
+ },
+ "node_modules/safer-buffer": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+ "license": "MIT"
+ },
+ "node_modules/send": {
+ "version": "0.19.2",
+ "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+ "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "2.6.9",
+ "depd": "2.0.0",
+ "destroy": "1.2.0",
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "etag": "~1.8.1",
+ "fresh": "~0.5.2",
+ "http-errors": "~2.0.1",
+ "mime": "1.6.0",
+ "ms": "2.1.3",
+ "on-finished": "~2.4.1",
+ "range-parser": "~1.2.1",
+ "statuses": "~2.0.2"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/send/node_modules/ms": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+ "license": "MIT"
+ },
+ "node_modules/serve-static": {
+ "version": "1.16.3",
+ "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+ "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+ "license": "MIT",
+ "dependencies": {
+ "encodeurl": "~2.0.0",
+ "escape-html": "~1.0.3",
+ "parseurl": "~1.3.3",
+ "send": "~0.19.1"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/setprototypeof": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+ "license": "ISC"
+ },
+ "node_modules/side-channel": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+ "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.3",
+ "side-channel-list": "^1.0.0",
+ "side-channel-map": "^1.0.1",
+ "side-channel-weakmap": "^1.0.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-list": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+ "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.4"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-map": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+ "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bound": "^1.0.2",
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.5",
+ "object-inspect": "^1.13.3"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-weakmap": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+ "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bound": "^1.0.2",
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.5",
+ "object-inspect": "^1.13.3",
+ "side-channel-map": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/statuses": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+ "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/toidentifier": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+ "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.6"
+ }
+ },
+ "node_modules/type-is": {
+ "version": "1.6.18",
+ "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+ "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+ "license": "MIT",
+ "dependencies": {
+ "media-typer": "0.3.0",
+ "mime-types": "~2.1.24"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/unpipe": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+ "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/utils-merge": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+ "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4.0"
+ }
+ },
+ "node_modules/vary": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+ "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8f95aac
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "age-theme-slider",
+ "version": "1.0.0",
+ "description": "Standalone web app — a theme slider that morphs any page through 8 age bands (3-95). Reset + Close UI. Embeddable iframe.",
+ "main": "server.js",
+ "scripts": {
+ "start": "node server.js"
+ },
+ "dependencies": {
+ "express": "^4.19.2"
+ }
+}
diff --git a/public/embed.html b/public/embed.html
new file mode 100644
index 0000000..8ae3f1f
--- /dev/null
+++ b/public/embed.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Age Theme Slider — embed</title>
+<style>
+ *{box-sizing:border-box} html,body{margin:0;padding:0;background:transparent}
+ body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;color:#fff}
+ .shell{position:fixed;inset:0;background:rgba(15,17,21,0.96);backdrop-filter:blur(12px);padding:14px 18px;display:grid;grid-template-columns:auto 1fr auto auto;gap:8px 14px;align-items:center}
+ .age{font-size:24px;font-weight:700;color:#c9a96e;min-width:78px;text-align:center;line-height:1}
+ .age small{display:block;font-size:10px;font-weight:500;color:rgba(255,255,255,0.7);letter-spacing:1.5px;margin-top:4px;text-transform:uppercase}
+ input[type=range]{width:100%;accent-color:#c9a96e}
+ button{background:transparent;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.18);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;min-height:36px}
+ button:hover{color:#fff;border-color:rgba(255,255,255,0.4)}
+ .close{width:36px;height:36px;border-radius:50%;padding:0;font-size:18px;line-height:1}
+ .tag{grid-column:1/-1;font-size:11px;color:rgba(255,255,255,0.5);text-align:center;font-style:italic}
+</style>
+</head>
+<body>
+<div class="shell">
+ <div class="age"><span id="ageNum">30</span><small id="bandLabel">Adult</small></div>
+ <input type="range" id="ageSlider" min="3" max="95" value="30">
+ <button id="resetBtn">Reset</button>
+ <button class="close" id="closeBtn" aria-label="Close">×</button>
+ <div class="tag" id="tagline">Modern dashboard.</div>
+</div>
+<script>
+(async () => {
+ const bands = await fetch('/api/bands').then(r => r.json()).catch(() => null);
+ function bandFor(age) {
+ const taglines = { toddler:'Primary colors. One face = good.', kid:'Friendly emoji and clear names.', tween:'Brighter palette, full info.', teen:'Dense, dark, neon.', adult:'Modern dashboard.', mature:'Serif, calmer pacing.', senior:'High contrast, large text.', elder:'Yellow on black. Just essentials.' };
+ let id;
+ if (age <= 5) id = 'toddler'; else if (age <= 9) id = 'kid'; else if (age <= 12) id = 'tween';
+ else if (age <= 19) id = 'teen'; else if (age <= 44) id = 'adult'; else if (age <= 59) id = 'mature';
+ else if (age <= 79) id = 'senior'; else id = 'elder';
+ const b = (bands && bands.bands || []).find(x => x.id === id) || {};
+ return { id, label: b.label || id, tagline: taglines[id] || '' };
+ }
+ const $ = (id) => document.getElementById(id);
+ function apply(age) {
+ const info = bandFor(age);
+ $('ageNum').textContent = age;
+ $('bandLabel').textContent = info.label;
+ $('tagline').textContent = info.tagline;
+ localStorage.setItem('age-pref', age);
+ if (window.parent !== window) {
+ window.parent.postMessage({ type: 'age-theme:band', age, band: info.id, label: info.label }, '*');
+ }
+ }
+ const s = $('ageSlider');
+ s.value = parseInt(localStorage.getItem('age-pref') || '30', 10);
+ apply(parseInt(s.value, 10));
+ s.addEventListener('input', e => apply(parseInt(e.target.value, 10)));
+ $('resetBtn').addEventListener('click', () => { s.value = 30; apply(30); });
+ $('closeBtn').addEventListener('click', () => {
+ if (window.parent !== window) window.parent.postMessage({ type: 'age-theme:close' }, '*');
+ document.body.style.display = 'none';
+ });
+})();
+</script>
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..ab88d22
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,380 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>Theme Slider by Age</title>
+<meta name="description" content="A theme slider that morphs any design through 8 age bands — toddler through elder. Drop-in for any CSS-var-based site.">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Nunito:wght@400;700&family=Public+Sans:wght@400;600&family=Space+Grotesk:wght@400;700&family=JetBrains+Mono&family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=Atkinson+Hyperlegible:wght@400;700&display=swap">
+<style>
+ :root {
+ --bg: #0f1115;
+ --panel: #181b22;
+ --fg: #e8eaee;
+ --muted: #a1a8b3;
+ --accent: #c9a96e;
+ --border: #2a2f38;
+ --radius: 12px;
+ --gap: 16px;
+ --body: 15px;
+ --h: 22px;
+ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --font-line-height: 1.5;
+ --btn-min-height: 44px;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; padding: 0; }
+ body {
+ background: var(--bg);
+ color: var(--fg);
+ font-family: var(--font);
+ font-size: var(--body);
+ line-height: var(--font-line-height);
+ min-height: 100vh;
+ transition: background 0.25s, color 0.25s, font-family 0.25s, font-size 0.25s;
+ }
+ h1, h2, h3 { font-size: var(--h); margin: 0 0 12px; line-height: 1.25; }
+ h1 { font-size: calc(var(--h) * 1.4); }
+ p { margin: 0 0 12px; }
+ button, .btn {
+ min-height: var(--btn-min-height);
+ background: var(--accent);
+ color: var(--bg);
+ border: 1px solid var(--accent);
+ border-radius: var(--radius);
+ padding: 10px 18px;
+ font-family: inherit;
+ font-size: inherit;
+ cursor: pointer;
+ font-weight: 600;
+ }
+ button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
+ .panel {
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ padding: var(--gap);
+ margin-bottom: var(--gap);
+ }
+
+ /* ─── Slider widget (the actual product) ─────────────────────────── */
+ .slider-shell {
+ position: fixed;
+ left: 0; right: 0; bottom: 0;
+ z-index: 9999;
+ background: rgba(15,17,21,0.96);
+ border-top: 1px solid rgba(255,255,255,0.08);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ padding: 16px 20px 18px;
+ display: grid;
+ grid-template-columns: auto auto 1fr auto auto;
+ grid-template-rows: auto auto;
+ gap: 8px 16px;
+ align-items: center;
+ color: #fff;
+ font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+ font-size: 14px;
+ line-height: 1.3;
+ transition: transform 0.25s ease;
+ }
+ .slider-shell.collapsed { transform: translateY(calc(100% - 50px)); }
+ .age-display {
+ font-size: 28px;
+ font-weight: 700;
+ color: var(--accent);
+ min-width: 92px;
+ text-align: center;
+ line-height: 1;
+ }
+ .age-display small { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 1.5px; margin-top: 4px; text-transform: uppercase; }
+ .band-label {
+ font-size: 13px;
+ color: rgba(255,255,255,0.75);
+ text-transform: uppercase;
+ letter-spacing: 1.5px;
+ font-weight: 600;
+ }
+ .age-slider {
+ flex: 1;
+ width: 100%;
+ accent-color: var(--accent);
+ height: 6px;
+ }
+ .age-ticks {
+ grid-column: 3;
+ grid-row: 2;
+ display: flex;
+ justify-content: space-between;
+ font-size: 10px;
+ color: rgba(255,255,255,0.5);
+ padding: 0 4px;
+ pointer-events: none;
+ }
+ .age-tagline {
+ grid-column: 1 / -1;
+ grid-row: 3;
+ font-size: 12px;
+ color: rgba(255,255,255,0.55);
+ text-align: center;
+ font-style: italic;
+ }
+ .slider-action {
+ background: transparent;
+ color: rgba(255,255,255,0.7);
+ border: 1px solid rgba(255,255,255,0.18);
+ border-radius: 8px;
+ padding: 8px 14px;
+ font-size: 13px;
+ cursor: pointer;
+ min-height: 38px;
+ }
+ .slider-action:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
+ .slider-close {
+ width: 38px; height: 38px;
+ border-radius: 50%;
+ display: inline-flex; align-items: center; justify-content: center;
+ padding: 0; font-size: 18px; line-height: 1;
+ }
+ /* The “handle” strip shown when collapsed, doubles as click-to-reopen */
+ .slider-handle {
+ position: absolute;
+ top: -1px;
+ left: 50%;
+ transform: translate(-50%, -100%);
+ background: rgba(15,17,21,0.96);
+ color: rgba(255,255,255,0.85);
+ border: 1px solid rgba(255,255,255,0.08);
+ border-bottom: none;
+ border-radius: 12px 12px 0 0;
+ padding: 6px 16px;
+ font-size: 12px;
+ cursor: pointer;
+ display: none;
+ }
+ .slider-shell.collapsed .slider-handle { display: block; }
+ @media (max-width: 720px) {
+ .slider-shell { grid-template-columns: auto 1fr auto; }
+ .age-ticks { display: none; }
+ .band-label { display: none; }
+ }
+
+ /* ─── Demo content area — visually morphs as the slider moves ────── */
+ .demo-stage {
+ min-height: 100vh;
+ padding: 32px 24px 200px;
+ max-width: 980px;
+ margin: 0 auto;
+ }
+ .demo-stage header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
+ .demo-stage .lede { font-size: calc(var(--body) + 1px); color: var(--muted); margin-bottom: 24px; }
+ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }
+ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap); }
+ .card .emoji { font-size: 2.2em; display: block; margin-bottom: 8px; }
+ .card .label { font-weight: 700; }
+ .card .desc { color: var(--muted); margin-top: 6px; font-size: 0.92em; }
+
+ /* ─── 8 age bands — overwrite the CSS vars ───────────────────────── */
+ /* dual-selector beats body[data-theme="…"] specificity, per validation memo */
+ :root[data-band="toddler"], :root[data-band="toddler"] body {
+ --bg: #fff9e6 !important; --panel: #fff !important; --fg: #222 !important;
+ --accent: #ff3b30 !important; --border: #f4d000 !important; --muted: #555 !important;
+ --font: Fredoka, "Comic Neue", "Comic Sans MS", system-ui !important;
+ --body: 24px !important; --h: 48px !important; --radius: 24px !important; --gap: 24px !important;
+ --btn-min-height: 56px !important;
+ }
+ :root[data-band="kid"], :root[data-band="kid"] body {
+ --bg: #fff !important; --panel: #fef9c3 !important; --fg: #1f2937 !important;
+ --accent: #3b82f6 !important; --border: #fbbf24 !important; --muted: #4b5563 !important;
+ --font: Nunito, "Chalkboard SE", system-ui !important;
+ --body: 18px !important; --h: 30px !important; --radius: 14px !important; --gap: 18px !important;
+ --btn-min-height: 52px !important;
+ }
+ :root[data-band="tween"], :root[data-band="tween"] body {
+ --bg: #fef3c7 !important; --panel: #fff !important; --fg: #1f2937 !important;
+ --accent: #4338ca !important; --border: #fbbf24 !important; --muted: #6b7280 !important;
+ --font: "Public Sans", Avenir, system-ui !important;
+ --body: 15px !important; --h: 22px !important; --radius: 10px !important; --gap: 14px !important;
+ }
+ :root[data-band="teen"], :root[data-band="teen"] body {
+ --bg: #0a0e27 !important; --panel: #131a3a !important; --fg: #e0e0ff !important;
+ --accent: #ff2ec1 !important; --border: #2a3666 !important; --muted: #8a8fc7 !important;
+ --font: "Space Grotesk", system-ui !important;
+ --body: 16px !important; --h: 22px !important; --radius: 4px !important; --gap: 10px !important;
+ }
+ :root[data-band="adult"], :root[data-band="adult"] body {
+ --bg: #0f1115 !important; --panel: #181b22 !important; --fg: #e8eaee !important;
+ --accent: #c9a96e !important; --border: #2a2f38 !important; --muted: #a1a8b3 !important;
+ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+ --body: 15px !important; --h: 18px !important; --radius: 12px !important; --gap: 16px !important;
+ }
+ :root[data-band="mature"], :root[data-band="mature"] body {
+ --bg: #faf3e7 !important; --panel: #fff !important; --fg: #1c0e08 !important;
+ --accent: #6b1d07 !important; --border: #d6c5a8 !important; --muted: #6e5b46 !important;
+ --font: "Source Serif Pro", Georgia, serif !important;
+ --body: 15px !important; --h: 22px !important; --radius: 6px !important; --gap: 16px !important;
+ }
+ :root[data-band="senior"], :root[data-band="senior"] body {
+ --bg: #ffffff !important; --panel: #f8f8f8 !important; --fg: #000 !important;
+ --accent: #0033cc !important; --border: #999 !important; --muted: #333 !important;
+ --font: "Atkinson Hyperlegible", Verdana, sans-serif !important;
+ --body: 20px !important; --h: 30px !important; --radius: 10px !important; --gap: 20px !important;
+ --btn-min-height: 48px !important;
+ }
+ :root[data-band="elder"], :root[data-band="elder"] body {
+ --bg: #000 !important; --panel: #1a1a1a !important; --fg: #ffeb3b !important;
+ --accent: #ffeb3b !important; --border: #555 !important; --muted: #ccc !important;
+ --font: "Atkinson Hyperlegible", Verdana, sans-serif !important;
+ --body: 28px !important; --h: 44px !important; --radius: 14px !important; --gap: 28px !important;
+ --btn-min-height: 56px !important;
+ --font-line-height: 1.6 !important;
+ }
+
+ /* Hide all but the simplest card at toddler + elder bands */
+ :root[data-band="toddler"] .card-grid .card:nth-child(n+4),
+ :root[data-band="elder"] .card-grid .card:nth-child(n+2) { display: none; }
+</style>
+</head>
+<body>
+
+<!-- ─── Demo stage that morphs as the slider moves ─── -->
+<main class="demo-stage">
+ <header>
+ <div>
+ <h1>The theme slider by age</h1>
+ <p class="lede">Drag the slider at the bottom of the screen from 3 to 95. The page morphs through 8 design bands — typography, palette, density, button size, copy detail.</p>
+ </div>
+ <button class="btn ghost" id="copyEmbed" title="Copy iframe embed code">Copy embed code</button>
+ </header>
+
+ <section class="panel">
+ <h2>Current band: <span id="curBand">adult</span></h2>
+ <p id="curRationale" style="color:var(--muted)">Modern dashboard defaults — dark indigo, system font, 15 px body. Validated 2026-05-12 (v9, APCA Lc + WCAG SC 1.4.12 + WCAG 16 px floor on teen body).</p>
+ <p style="color:var(--muted);font-size:0.85em">Tokens applied: font <span id="tokFont"></span> · body <span id="tokBody"></span> px · heading <span id="tokH"></span> px · accent <span id="tokAccent"></span></p>
+ </section>
+
+ <h2 style="margin-bottom:16px">Sample content (morphs with the slider)</h2>
+ <div class="card-grid">
+ <div class="card"><span class="emoji">📚</span><div class="label">Stories</div><div class="desc">Today's reading list.</div></div>
+ <div class="card"><span class="emoji">🎨</span><div class="label">Art studio</div><div class="desc">Three new prompts ready.</div></div>
+ <div class="card"><span class="emoji">🧮</span><div class="label">Math drills</div><div class="desc">5-minute warmups.</div></div>
+ <div class="card"><span class="emoji">🎬</span><div class="label">Movie reel</div><div class="desc">Watchlist updated.</div></div>
+ <div class="card"><span class="emoji">📰</span><div class="label">Headlines</div><div class="desc">3 stories curated for you.</div></div>
+ <div class="card"><span class="emoji">💬</span><div class="label">Messages</div><div class="desc">2 new replies in your threads.</div></div>
+ </div>
+
+ <details style="margin-top:32px;color:var(--muted);font-size:0.9em">
+ <summary style="cursor:pointer">How to drop this slider into your own site</summary>
+ <pre style="white-space:pre-wrap;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--gap);overflow:auto;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.6"><code><!-- Drop at the bottom of any page that uses CSS vars (--bg, --fg, --accent, --body, --h, --font) -->
+<iframe src="http://127.0.0.1:9717/embed.html" style="position:fixed;left:0;right:0;bottom:0;width:100vw;height:160px;border:0;z-index:9999"></iframe>
+<script>
+window.addEventListener('message', e => {
+ if (e.data && e.data.type === 'age-theme:band') {
+ document.documentElement.dataset.band = e.data.band;
+ localStorage.setItem('age-pref', e.data.age);
+ }
+});
+</script></code></pre>
+ </details>
+</main>
+
+<!-- ─── The actual slider widget ─── -->
+<div class="slider-shell" id="sliderShell">
+ <div class="slider-handle" id="sliderHandle">▲ Open theme slider</div>
+
+ <div class="age-display">
+ <span id="ageNum">30</span>
+ <small id="bandLabel">Adult</small>
+ </div>
+
+ <div class="band-label" id="bandLabelSide">Adult</div>
+
+ <input type="range" class="age-slider" id="ageSlider" min="3" max="95" value="30" step="1">
+ <div class="age-ticks" aria-hidden="true">
+ <span>3</span><span>10</span><span>20</span><span>40</span><span>60</span><span>80</span><span>95</span>
+ </div>
+
+ <button class="slider-action" id="resetBtn" title="Reset to default (age 30)">Reset</button>
+ <button class="slider-action slider-close" id="closeBtn" aria-label="Close slider">×</button>
+
+ <div class="age-tagline" id="tagline">Modern dashboard.</div>
+</div>
+
+<script>
+(async () => {
+ const $ = (id) => document.getElementById(id);
+ const bands = await fetch('/api/bands').then(r => r.json()).catch(() => null);
+
+ // bandFor: id, label, tagline + the data object from bands.json
+ function bandFor(age) {
+ if (!bands || !bands.bands) return { id: 'adult', label: 'Adult', tagline: '' };
+ const tableAge = (id) => bands.bands.find(b => b.id === id);
+ let id;
+ if (age <= 5) id = 'toddler';
+ else if (age <= 9) id = 'kid';
+ else if (age <= 12) id = 'tween';
+ else if (age <= 19) id = 'teen';
+ else if (age <= 44) id = 'adult';
+ else if (age <= 59) id = 'mature';
+ else if (age <= 79) id = 'senior';
+ else id = 'elder';
+ const b = tableAge(id) || {};
+ const taglines = {
+ toddler: 'Primary colors. One face = good, one face = sad.',
+ kid: 'Friendly emoji and clear names.',
+ tween: 'Brighter palette, full info.',
+ teen: 'Dense, dark, neon.',
+ adult: 'Modern dashboard.',
+ mature: 'Serif, calmer pacing.',
+ senior: 'High contrast, large text.',
+ elder: 'Yellow on black. Just the essentials.',
+ };
+ return { id, label: b.label || id, tagline: taglines[id] || '', data: b };
+ }
+
+ function apply(age) {
+ const info = bandFor(age);
+ document.documentElement.dataset.band = info.id;
+ $('ageNum').textContent = age;
+ $('bandLabel').textContent = info.label;
+ $('bandLabelSide').textContent = info.label;
+ $('tagline').textContent = info.tagline;
+ $('curBand').textContent = info.label.toLowerCase();
+ if (info.data && info.data.best) {
+ $('tokFont').textContent = (info.data.best.font || '').split(',')[0].trim();
+ $('tokBody').textContent = info.data.best.body;
+ $('tokH').textContent = info.data.best.h;
+ $('tokAccent').innerHTML = `<span style="display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;background:${info.data.best.accent};border:1px solid #888"></span> ${info.data.best.accent}`;
+ $('curRationale').textContent = info.data.reasoning || '';
+ }
+ localStorage.setItem('age-pref', age);
+
+ // Post to parent for iframe embedding
+ if (window.parent !== window) {
+ window.parent.postMessage({ type: 'age-theme:band', age, band: info.id, label: info.label }, '*');
+ }
+ }
+
+ const slider = $('ageSlider');
+ const saved = parseInt(localStorage.getItem('age-pref') || '30', 10);
+ slider.value = saved;
+ apply(saved);
+ slider.addEventListener('input', e => apply(parseInt(e.target.value, 10)));
+
+ $('resetBtn').addEventListener('click', () => { slider.value = 30; apply(30); });
+
+ const shell = $('sliderShell');
+ $('closeBtn').addEventListener('click', () => { shell.classList.add('collapsed'); });
+ $('sliderHandle').addEventListener('click', () => { shell.classList.remove('collapsed'); });
+
+ $('copyEmbed').addEventListener('click', async () => {
+ const code = `<iframe src="${location.origin}/embed.html" style="position:fixed;left:0;right:0;bottom:0;width:100vw;height:160px;border:0;z-index:9999"></iframe>`;
+ try { await navigator.clipboard.writeText(code); $('copyEmbed').textContent = 'Copied ✓'; setTimeout(() => $('copyEmbed').textContent = 'Copy embed code', 1800); }
+ catch { alert(code); }
+ });
+})();
+</script>
+</body>
+</html>
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..2f6d56a
--- /dev/null
+++ b/server.js
@@ -0,0 +1,44 @@
+// Age Theme Slider — standalone app
+// Serves a theme slider that morphs through 8 age bands (3-95).
+// Bands data canonical in this project's bands.json (deploy-portable).
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+
+const app = express();
+const PORT = process.env.PORT || 9717;
+
+const BANDS_PATH = path.join(__dirname, 'bands.json');
+let bandsCache = null;
+let bandsCacheMtime = 0;
+
+function loadBands() {
+ const st = fs.statSync(BANDS_PATH);
+ if (!bandsCache || st.mtimeMs !== bandsCacheMtime) {
+ bandsCache = JSON.parse(fs.readFileSync(BANDS_PATH, 'utf8'));
+ bandsCacheMtime = st.mtimeMs;
+ }
+ return bandsCache;
+}
+
+app.use((req, res, next) => {
+ res.setHeader('Cache-Control', 'no-store, must-revalidate');
+ res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+ // Allow iframe embedding from anywhere — this app is meant to be embedded.
+ res.removeHeader('X-Frame-Options');
+ res.setHeader('Content-Security-Policy', "frame-ancestors *");
+ next();
+});
+
+app.get('/api/bands', (_req, res) => {
+ try { res.json(loadBands()); }
+ catch (e) { res.status(500).json({ error: String(e.message || e) }); }
+});
+
+app.use(express.static(path.join(__dirname, 'public'), { extensions: ['html'] }));
+
+app.get('/health', (_req, res) => res.json({ ok: true, port: PORT, bands_version: loadBands().version }));
+
+app.listen(PORT, '0.0.0.0', () => {
+ console.log(`age-theme-slider listening on http://127.0.0.1:${PORT}`);
+});
(oldest)
·
back to Age Theme Slider
·
gitignore: cover .bak / .pre-* snapshot artifacts 2412cac →