aboutsummaryrefslogtreecommitdiff
path: root/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-18.html
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2026-07-22 15:15:02 -0500
committerCraig Jennings <c@cjennings.net>2026-07-22 15:15:02 -0500
commitf1c661f50d6af2a115fc1430ae0478f2acef2dec (patch)
treeb894ea2e14327794bb75671b962f37185cff22ea /docs/prototypes/2026-07-02-desktop-settings-panel-prototype-18.html
parentf594068bed75302aba50793ccf5e6ce9cf53c7f8 (diff)
downloadarchsetup-f1c661f50d6af2a115fc1430ae0478f2acef2dec.tar.gz
archsetup-f1c661f50d6af2a115fc1430ae0478f2acef2dec.zip
docs(settings-panel): seal the prototype arc and open the build
Prototypes P12-P37 land, along with the night-watch and levels-compare pages plus the shared-engine updates and the kit-candidate file. The spec flips from DRAFT through READY to DOING with rewritten implementation phases and seven recorded build findings. The build tasks are filed in todo.org, and phase 1 is closed against the dotfiles commits.
Diffstat (limited to 'docs/prototypes/2026-07-02-desktop-settings-panel-prototype-18.html')
-rw-r--r--docs/prototypes/2026-07-02-desktop-settings-panel-prototype-18.html321
1 files changed, 321 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-18.html b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-18.html
new file mode 100644
index 0000000..c0ff06c
--- /dev/null
+++ b/docs/prototypes/2026-07-02-desktop-settings-panel-prototype-18.html
@@ -0,0 +1,321 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Desktop Settings — Prototype 18 (program chart, real proportions)</title>
+<link rel="stylesheet" href="desktop-settings-shared.css">
+<style>
+ :root{
+ --ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917;
+ --silver:#bfc4d0; --cream:#f3e7c5; --steel:#969385; --dim:#7c838a;
+ --slate:#424f5e; --slate-hi:#54677d; --wash:#2c2f32;
+ --pass:#74932f; --fail:#cb6b4d;
+ --phos:#7fe0a0; --phos-dim:#1c3626; --vfd:#63e6c8;
+ --sevgrn:#57d357; --sevred:#e2543f; --sevoff:#1a1613;
+ --jewel-r:#ff5b45; --jewel-a:#ffb43a; --jewel-g:#6fce33;
+ --gold:#e2a038; --gold-hi:#ffbe54;
+ --amber-grad-top:#f2c76a; --amber-grad-mid:#d29638; --amber-grad-bot:#8f671f;
+ --amber-edge:#7d5c16; --amber-warn:#f0b552;
+ --glow-hi:255,190,84; --glow-lo:226,160,56;
+ --mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
+ --pulse-rate:1s;
+ }
+ /* one chassis grid: every section on an identical plate, identical gaps */
+ .plate {
+ background:
+ repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 3px),
+ linear-gradient(180deg, #1d1a16, #141210);
+ border: 1px solid #262320;
+ border-radius: 10px;
+ padding: 10px;
+ }
+ .plate .ds-engrave { margin: 0 2px 8px; }
+ .row { display: flex; justify-content: center; align-items: center; gap: 10px; }
+ .vcell { display: flex; flex-direction: column; align-items: center; }
+ .khost { display: flex; justify-content: center; }
+ .tuner-well { display: flex; justify-content: center; margin-top: 8px; }
+
+ .presets { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
+ .preset {
+ background-image: linear-gradient(180deg, var(--raise), #131110);
+ border: 1px solid #33302b; border-bottom-width: 3px; border-radius: 6px;
+ padding: 4px 1px; text-align: center; cursor: pointer; color: var(--silver);
+ overflow: hidden;
+ }
+ .preset:hover { border-color: var(--gold); color: var(--gold); }
+ .preset .num { font-size: 7.5px; color: var(--dim); display: block; letter-spacing: 0; }
+ .preset .nm { font-size: 8.5px; letter-spacing: 0; display: block; }
+ .preset.cur {
+ border-color: var(--gold); border-bottom-width: 1px; transform: translateY(2px);
+ background-image: linear-gradient(180deg, #2a2618, #1d1a12); color: var(--cream);
+ }
+ .preset.cur .num { color: var(--gold); }
+
+ /* levels + caffeine: slides left, tamed timer right, bat docked on stage */
+ .midgrid { display: flex; gap: 6px; align-items: center; justify-content: center; }
+ .tcell { position: relative; }
+ .bat-oly { position: absolute; top: -2px; right: -4px; }
+ .bat-oly svg { width: 46px; height: 59px; }
+
+ /* switch wall: name-on-switch rockers + the airplane lever, one baseline */
+ .wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; justify-items: center; align-items: center; }
+
+ .wprow {
+ display: flex; align-items: center; gap: 8px;
+ background-image: linear-gradient(180deg, var(--raise), #131110);
+ border: 1px solid #33302b; border-radius: 8px;
+ padding: 8px 10px; cursor: pointer; color: var(--silver); font-size: 12px;
+ }
+ .wprow:hover { border-color: var(--gold); color: var(--gold); }
+ .wprow .k-state { margin-left: auto; color: var(--dim); font-size: 10px; }
+</style>
+</head>
+<body class="ds-stage">
+ <div class="ds-caption">
+ <b>Prototype 18 — the program chart.</b> The missing analog component:
+ a faceplate program chart (washing-machine style) printed between the
+ scenes and their switches — filled dot = the program closes it, ring =
+ opens it, dash = leaves it alone, letter = power; the active program's
+ row lights. Airplane is gone (the network panel owns its master
+ switch). OFF on the dial now reads CUSTOM. Slides and timer re-scaled
+ toward their real-life sizes.
+ </div>
+
+ <div class="ds-bar"><span>19:24</span><span class="gear">⚙</span></div>
+
+ <div class="ds-panel" id="panel">
+ <div class="ds-face">
+ <span class="glyph">⚙</span>
+ <span class="title">Settings</span>
+ <span class="sub" id="scene-sub"></span>
+ <span class="x">✕</span>
+ </div>
+ <div id="body"></div>
+ <div class="ds-toast" id="toast"></div>
+ <div class="ds-subview" id="subview"></div>
+ </div>
+
+<script src="widgets.js"></script>
+<script src="dupre-kit-additions.js"></script>
+<script src="desktop-settings-shared.js"></script>
+<script>
+const h = DS.h;
+const body = document.getElementById("body");
+const subview = document.getElementById("subview");
+DS.bindToast(document.getElementById("toast"));
+
+const SCENES = Object.keys(DS.SCENES);
+const STOPS = ["CUSTOM", "FOCUS", "PRES", "BATT", "NIGHT"];
+const ROCKERS = [
+ ["autodim", "DIM"], ["touchpad", "TPAD"], ["mouse", "MOUSE"],
+ ["nightlight", "NIGHT"], ["dnd", "DND"],
+];
+let booting = true;
+let caffMinutes = 0;
+let caffHold = false;
+let timerHost = null; // persistent: the timer owns a live countdown
+
+const sceneIdx = () => (DS.state.scene ? SCENES.indexOf(DS.state.scene) + 1 : 0);
+const debounce = (fn, ms) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; };
+
+function openWallpaper() {
+ subview.innerHTML = "";
+ subview.appendChild(DS.wallpaperSubview(() => subview.classList.remove("open")));
+ subview.classList.add("open");
+}
+
+function sceneOff() {
+ DS.state.scene = null;
+ DS.toast("Scene: custom", true);
+ render();
+}
+
+function syncCaffeine(el) {
+ const on = caffHold || caffMinutes > 0;
+ if (!booting && on !== DS.state.caffeine) DS.setToggle("caffeine", el);
+}
+const syncCaffeineSoon = debounce(() => syncCaffeine(timerHost), 450);
+
+function scaleSvg(host, w) {
+ const svg = host.querySelector("svg");
+ const [, , vw, vh] = svg.getAttribute("viewBox").split(" ").map(Number);
+ svg.setAttribute("width", w);
+ svg.setAttribute("height", Math.round(w * vh / vw));
+}
+
+// de-throne the stock timer: steel stop knob, amber index/OFF, one engraving
+function tameTimer(host) {
+ const svg = host.querySelector("svg");
+ const NS = "http://www.w3.org/2000/svg";
+ const defs = document.createElementNS(NS, "defs");
+ defs.innerHTML = `<radialGradient id="p16Steel" cx="38%" cy="32%" r="80%">
+ <stop offset="0" stop-color="#c9c4b8"/><stop offset="1" stop-color="#6e685c"/>
+ </radialGradient>`;
+ svg.insertBefore(defs, svg.firstChild);
+ svg.querySelectorAll('[fill="url(#mtRed)"]').forEach((n) => n.setAttribute("fill", "url(#p16Steel)"));
+ [...svg.querySelectorAll("text")].forEach((t) => {
+ if (t.textContent === "TURN TO START") t.remove();
+ if (t.textContent === "PUSH TO STOP") t.textContent = "WIND · PUSH STOPS";
+ if (t.textContent === "OFF") t.setAttribute("fill", "var(--gold-hi)");
+ });
+ [...svg.querySelectorAll("line")].forEach((l) => {
+ if (l.getAttribute("stroke") === "#e0523a") l.setAttribute("stroke", "var(--gold)");
+ });
+ svg.querySelectorAll('[stroke="#5c150c"]').forEach((n) => n.setAttribute("stroke", "#3c382f"));
+}
+
+function render() {
+ booting = true;
+ body.innerHTML = "";
+ const col = h("div", "ds-col");
+
+ // ---- plate 1: head unit — presets, tuner, power slide -------------------
+ const head = h("div", "plate");
+ head.appendChild(DS.engrave("Scenes"));
+ const pr = h("div", "presets");
+ SCENES.forEach((n, i) => {
+ const k = h("div", "preset" + (DS.state.scene === n ? " cur" : ""));
+ k.innerHTML = `<span class="num">PRESET ${i + 1}</span><span class="nm">${n}</span>`;
+ k.onclick = () => DS.applyScene(n, k);
+ pr.appendChild(k);
+ });
+ head.appendChild(pr);
+
+ const tw = h("div", "tuner-well");
+ DUPRE.slideRule(tw, {
+ values: STOPS,
+ value: STOPS[sceneIdx()],
+ skin: "warm",
+ width: 306,
+ fmt: (v) => v,
+ onChange: (v) => {
+ if (booting) return;
+ if (v === "CUSTOM") sceneOff();
+ else DS.applyScene(SCENES[STOPS.indexOf(v) - 1], tw);
+ },
+ });
+ head.appendChild(tw);
+
+ // the program chart: what each preset recalls, printed on the plate
+ const chartHost = h("div", "khost");
+ chartHost.style.marginTop = "8px";
+ const CHART_COLS = ["DIM", "NIGHT", "DND", "CAFF", "PWR"];
+ const PWR_LETTER = { performance: "P", balanced: "B", saver: "S" };
+ DUPRE.programChart(chartHost, {
+ cols: CHART_COLS,
+ width: 296,
+ rows: SCENES.map((n) => {
+ const sets = DS.SCENES[n].sets;
+ const dot = (k) => (k in sets ? !!sets[k] : null);
+ return { name: n, cells: [dot("autodim"), dot("nightlight"), dot("dnd"), dot("caffeine"), PWR_LETTER[sets.powerprofile] || null] };
+ }),
+ active: sceneIdx() - 1,
+ });
+ head.appendChild(chartHost);
+ col.appendChild(head);
+
+ // ---- plate 2: the switches those presets program, power slide beneath ---
+ const sw = h("div", "plate");
+ sw.appendChild(DS.engrave("Switches · Power"));
+ const wall = h("div", "wall");
+ ROCKERS.forEach(([k, name]) => {
+ const host = h("div", "khost");
+ DUPRE.rocker(host, {
+ on: DS.state[k],
+ onLabel: name,
+ offLabel: "",
+ quiet: true,
+ onChange: (on) => { if (!booting && on !== DS.state[k]) DS.setToggle(k, host); },
+ });
+ wall.appendChild(host);
+ });
+ sw.appendChild(wall);
+
+ const pw = h("div", "khost");
+ pw.style.marginTop = "10px";
+ const pIdx = DS.PROFILES.findIndex((p) => p.id === DS.state.powerprofile);
+ DUPRE.slideSelector(pw, {
+ items: ["PERFORMANCE", "BALANCE", "POWER SAVE"],
+ index: pIdx,
+ width: 306,
+ knob: "dark",
+ onChange: (i) => { if (!booting && i !== pIdx) DS.setProfile(DS.PROFILES[i].id, pw); },
+ });
+ sw.appendChild(pw);
+ col.appendChild(sw);
+
+ // ---- plate 2: levels + caffeine -----------------------------------------
+ const lv = h("div", "plate");
+ lv.appendChild(DS.engrave("Levels · Caffeine"));
+ const mid = h("div", "midgrid");
+
+ const scell = h("div", "vcell");
+ const shost = h("div", "khost");
+ const commitLv = debounce((vals) => {
+ const b = Math.max(DS.SLIDERS.brightness.floor, Math.round(vals[0]));
+ const k = Math.round(vals[1]);
+ if (b !== DS.state.brightness) DS.setSlider("brightness", b, scell);
+ if (k !== DS.state.kbd) DS.setSlider("kbd", k, scell);
+ }, 350);
+ DUPRE.thumbSlide(shost, {
+ channels: [
+ { name: "SCREEN", v: DS.state.brightness },
+ { name: "KBD", v: DS.state.kbd },
+ ],
+ onChange: (vals) => { if (!booting) commitLv(vals.slice()); },
+ });
+ scaleSvg(shost, 165);
+ scell.appendChild(shost);
+ mid.appendChild(scell);
+
+ const tcell = h("div", "vcell tcell");
+ if (!timerHost) {
+ timerHost = h("div", "khost");
+ DUPRE.timerDial(timerHost, {
+ minutes: caffMinutes,
+ onChange: (min) => {
+ caffMinutes = min;
+ syncCaffeineSoon();
+ },
+ });
+ scaleSvg(timerHost, 137);
+ tameTimer(timerHost);
+ // the bat docks where the winding arrow was
+ const svg = timerHost.querySelector("svg");
+ [...svg.querySelectorAll("path")].find((p) => p.getAttribute("d").startsWith("M 122 14"))?.remove();
+ [...svg.querySelectorAll("polygon")].find((p) => p.getAttribute("points").startsWith("136,26"))?.remove();
+ }
+ tcell.appendChild(timerHost);
+ const batHost = h("div", "bat-oly");
+ DUPRE.batToggle(batHost, {
+ on: !caffHold,
+ onLabel: "TIMED",
+ offLabel: "HOLD",
+ onChange: (on) => {
+ if (booting) return;
+ caffHold = !on;
+ syncCaffeine(batHost);
+ },
+ });
+ tcell.appendChild(batHost);
+ mid.appendChild(tcell);
+ lv.appendChild(mid);
+ col.appendChild(lv);
+
+ // ---- wallpaper ----------------------------------------------------------
+ const wp = h("div", "wprow");
+ wp.innerHTML = `<span>\u{f021c}</span><span>Wallpaper</span><span class="k-state">manage ›</span>`;
+ wp.onclick = openWallpaper;
+ col.appendChild(wp);
+
+ body.appendChild(col);
+ document.getElementById("scene-sub").textContent = DS.state.scene ? "▶ " + DS.state.scene : "";
+ booting = false;
+}
+
+DS.onChange(render);
+render();
+</script>
+</body>
+</html>