← back to Wallco Ai
curator A3: live before/after preview chip in Adjust panel (samples a visible card, after-chip carries --img-adjust)
6982a4ad1942d8fb2501574a49510610d79aa26b · 2026-05-31 21:11:11 -0700 · Steve Abrams
Files touched
M YOLO_BACKLOG_2026-05-31.mdM public/admin/cactus-curator.html
Diff
commit 6982a4ad1942d8fb2501574a49510610d79aa26b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sun May 31 21:11:11 2026 -0700
curator A3: live before/after preview chip in Adjust panel (samples a visible card, after-chip carries --img-adjust)
---
YOLO_BACKLOG_2026-05-31.md | 3 ++-
public/admin/cactus-curator.html | 20 ++++++++++++++++++++
2 files changed, 22 insertions(+), 1 deletion(-)
diff --git a/YOLO_BACKLOG_2026-05-31.md b/YOLO_BACKLOG_2026-05-31.md
index ed10a83..0116ccf 100644
--- a/YOLO_BACKLOG_2026-05-31.md
+++ b/YOLO_BACKLOG_2026-05-31.md
@@ -17,7 +17,7 @@ Self-contained in `public/admin/cactus-curator.html` — zero `server.js` risk,
- [x] **A1 · Adjustment presets** — browser-verified (Vivid sat1.40 / B&W sat0 / Neutral→none, chips exclusive) — preset chips in the panel (Vivid / Muted / Warm / Cool / B&W / Neutral) that set the four sliders to curated HSB+contrast combos; persists like the sliders.
- [x] **A2 · Percent readouts** — browser-verified (Vivid sat 178·140%, Warm hue 110·-24°, Neutral ·100%) — — show the real filter math next to each slider (e.g. `Sat 158 · 124%`, `Hue +18°`, `Con 100%`) so the value is legible, not just the raw 0–255.
-- [ ] **A3 · Live before/after chip** — a small sample swatch in the panel showing the current design (or a representative card) with vs without the filter, updating live as sliders move.
+- [x] **A3 · Live before/after chip** — browser-verified (sample #53856; before=none, after=live filter) — — a small sample swatch in the panel showing the current design (or a representative card) with vs without the filter, updating live as sliders move.
- [ ] **A4 · Apply filter to family-stack images** — the `--img-adjust` filter currently hits `#grid img` + `#modal img`; extend to `#bbstack img` so the by-base colorway stack previews the adjustment too.
- [ ] **A5 · Per-card Bake from grid** — a hover "⤓ Bake" affordance on each card that bakes the current adjustment for that design without opening the modal (reuses `bakeAdjustment`).
- [ ] **A6 · Copy-filter-CSS dev aid** — a tiny "copy CSS" button that copies the current `filter:` string to clipboard (useful for porting the look elsewhere).
@@ -37,3 +37,4 @@ TICK · TIMESTAMP · ITEM · STATUS · COMMIT
- T0 · 2026-05-31 21:02 · loop-init (DTD focus=A) · scheduled · n/a
- T1 · 2026-05-31 21:05 · A1 presets · done · (commit below)
- T2 · 2026-05-31 21:11 · A2 percent readouts · done · (commit below)
+- T3 · 2026-05-31 21:14 · A3 before/after chip · done · (commit below)
diff --git a/public/admin/cactus-curator.html b/public/admin/cactus-curator.html
index 7f3d681..ce2252f 100644
--- a/public/admin/cactus-curator.html
+++ b/public/admin/cactus-curator.html
@@ -179,6 +179,12 @@
#adjPanel .adj-preset { font:600 11px inherit; padding:4px 9px; border-radius:6px; border:1px solid var(--line); background:#1d2023; color:var(--ink); cursor:pointer; }
#adjPanel .adj-preset:hover { border-color:var(--accent); }
#adjPanel .adj-preset.on { background:#1f3a4d; color:#7fe3ff; border-color:#1f4a5a; }
+ #adjPanel .adj-ba { display:none; gap:8px; align-items:center; }
+ #adjPanel .adj-ba.on { display:flex; }
+ #adjPanel .ba-wrap { display:flex; flex-direction:column; align-items:center; gap:2px; }
+ #adjPanel .ba-wrap em { font-style:normal; font-size:9px; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }
+ #adjPanel .ba-img { width:38px; height:38px; object-fit:cover; border-radius:5px; border:1px solid var(--line); background:#0c0e10; }
+ #adjPanel .ba-after { filter: var(--img-adjust, none); }
#adjToggle.on { background:#1f4d2a; color:#9ff0a6; border-color:#1f4d2a; }
#grid img, #modal img { filter: var(--img-adjust, none); }
</style>
@@ -239,6 +245,10 @@
<button class="adj-preset" data-preset="bw">B&W</button>
</span>
<button id="adjReset" class="ctl-btn" title="back to neutral (Hue 127 · Sat 127 · Bri 127 · Con 100)">Reset</button>
+ <span class="adj-ba" id="adjBA" title="before / after — live preview of the current adjustment on a sample card">
+ <span class="ba-wrap"><img class="ba-img ba-before" id="baBefore" alt=""><em>before</em></span>
+ <span class="ba-wrap"><img class="ba-img ba-after" id="baAfter" alt=""><em>after</em></span>
+ </span>
<span class="adjnote">live preview only — non-destructive, doesn't touch the stored image</span>
</div>
@@ -1724,10 +1734,20 @@ load();
var reset = el('adjReset');
if (reset) reset.addEventListener('click', function(){ for (var k in NEUTRAL) set(k, NEUTRAL[k]); apply(); markActivePreset(); });
var panel = el('adjPanel'), toggle = el('adjToggle');
+ // A3 — pick a representative card image for the before/after preview chip.
+ function refreshBA(){
+ var ba = el('adjBA'), b = el('baBefore'), a = el('baAfter');
+ if (!ba || !b || !a) return;
+ var sample = document.querySelector('#grid .card img, #bbstack img');
+ var src = sample && (sample.currentSrc || sample.getAttribute('src'));
+ if (src){ b.src = src; a.src = src; ba.classList.add('on'); }
+ else { ba.classList.remove('on'); setTimeout(refreshBA, 1200); } // grid not painted yet — retry
+ }
function show(on){
if (panel) panel.classList.toggle('on', on);
if (toggle) toggle.classList.toggle('on', on);
localStorage.setItem(LS+'open', on ? '1' : '0');
+ if (on) refreshBA();
}
if (toggle) toggle.addEventListener('click', function(){ show(!(panel && panel.classList.contains('on'))); });
show(localStorage.getItem(LS+'open') === '1');
← 7431b12 curator A2: show derived filter math next to each slider (hu
·
back to Wallco Ai
·
curator A4: extend live adjustment filter to the by-base fam 12a8456 →