← back to Corvette Dashboard Viewer
piston bank: small numbers (Style/Material/Collection/Label) as pumping engine cylinders — piston height = progress, glows green at 100%
dfe1272d6dbcd8cb2e375bac1f9b673725c35162 · 2026-07-28 09:34:14 -0700 · Steve Abrams
Files touched
Diff
commit dfe1272d6dbcd8cb2e375bac1f9b673725c35162
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Jul 28 09:34:14 2026 -0700
piston bank: small numbers (Style/Material/Collection/Label) as pumping engine cylinders — piston height = progress, glows green at 100%
---
public/index.html | 47 ++++++++++++++++++++++++++++++++++++++++-------
1 file changed, 40 insertions(+), 7 deletions(-)
diff --git a/public/index.html b/public/index.html
index 7c8f847..5b7ed22 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,6 +83,31 @@ svg .arc-red{stroke:var(--red); stroke-width:5; fill:none; opacity:.85}
.mini{background:#0c0c0d; border-radius:10px; padding:8px 10px; border:1px solid #2b2b30; text-align:center}
.mini .m-t{font-size:9px; letter-spacing:2px; color:#8b8f98}
.mini .m-v{font-family:'Share Tech Mono',monospace; font-size:20px; color:var(--cream)}
+/* ===== piston bank (small live numbers as engine cylinders) ===== */
+.pistons{display:flex; justify-content:space-around; align-items:flex-end; gap:6px; padding:4px 2px}
+.cyl{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px}
+.cyl .num{font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--amber); text-shadow:0 0 8px rgba(255,179,0,.4)}
+.cyl .lbl{font-size:8px; letter-spacing:1px; color:#9aa0aa; text-align:center}
+.bore{position:relative; width:32px; height:72px; border-radius:7px 7px 4px 4px; overflow:hidden;
+ background:linear-gradient(90deg,#08080a,#1c1c20 28%,#2b2b32 50%,#1c1c20 72%,#08080a);
+ border:1px solid #3a3a42; box-shadow:inset 0 5px 9px rgba(0,0,0,.85), inset 0 -2px 4px rgba(255,255,255,.05)}
+.bore::before{content:''; position:absolute; inset:0; border-radius:inherit;
+ background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.03) 9px 10px)} /* cylinder rings */
+.piston{position:absolute; left:3px; right:3px; height:24px; border-radius:4px;
+ background:linear-gradient(180deg,#f4f6f9,#b2b6be 42%,#7d818a 56%,#cbccd3);
+ box-shadow:0 3px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.4);
+ bottom:calc(var(--p,0) * 44px);
+ transition:bottom 1.1s cubic-bezier(.34,1.3,.5,1);
+ animation:pump .9s ease-in-out infinite}
+.piston::after{content:''; position:absolute; left:50%; top:100%; width:5px; height:60px; transform:translateX(-50%);
+ background:linear-gradient(90deg,#4a4e56,#9a9ea6,#4a4e56)} /* connecting rod down to crank */
+.cyl:nth-child(2) .piston{animation-delay:-.45s}
+.cyl:nth-child(3) .piston{animation-delay:-.22s}
+.cyl:nth-child(4) .piston{animation-delay:-.67s}
+@keyframes pump{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
+.cyl.full .piston{background:linear-gradient(180deg,#ffe291,#FFB300 50%,#a06f00);
+ box-shadow:0 0 10px rgba(255,179,0,.5),inset 0 1px 0 rgba(255,255,255,.7); animation-duration:.5s}
+.cyl.full .num{color:var(--green,#39d353);text-shadow:0 0 8px rgba(57,211,83,.5)}
.switches{display:flex; justify-content:space-around; margin-top:14px; gap:6px}
.sw{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; user-select:none}
.sw .toggle{width:26px; height:44px; border-radius:6px;
@@ -163,11 +188,11 @@ footer{text-align:center; margin-top:22px; font-size:10px; letter-spacing:3px; c
</div>
<!-- CENTER: mini gauges + switches -->
<div class="stack">
- <div class="mini-row">
- <div class="mini"><div class="m-t">STYLE</div><div class="m-v" id="mStyle">–</div></div>
- <div class="mini"><div class="m-t">MATERIAL</div><div class="m-v" id="mMat">–</div></div>
- <div class="mini"><div class="m-t">COLLECTION</div><div class="m-v" id="mVen">–</div></div>
- <div class="mini"><div class="m-t">LABEL→BARE</div><div class="m-v" id="mAvg">–</div></div>
+ <div class="pistons">
+ <div class="cyl" id="cStyle" style="--p:0"><div class="num" id="mStyle">–</div><div class="bore"><div class="piston"></div></div><div class="lbl">STYLE</div></div>
+ <div class="cyl" id="cMat" style="--p:0"><div class="num" id="mMat">–</div><div class="bore"><div class="piston"></div></div><div class="lbl">MATERIAL</div></div>
+ <div class="cyl" id="cCol" style="--p:0"><div class="num" id="mVen">–</div><div class="bore"><div class="piston"></div></div><div class="lbl">COLLECTION</div></div>
+ <div class="cyl" id="cLab" style="--p:0"><div class="num" id="mAvg">–</div><div class="bore"><div class="piston"></div></div><div class="lbl">LABEL→BARE</div></div>
</div>
<div class="switches" id="switches"></div>
</div>
@@ -304,8 +329,16 @@ async function pollStats(){
const sp=document.getElementById('gaugeSpeedo'), ta=document.getElementById('gaugeTach');
if(sp&&sp.__drive) sp.__drive(s.color||0);
if(ta&&ta.__drive) ta.__drive(s.descriptors||0);
- const set=(id,v)=>{const e=document.getElementById(id);if(e)e.textContent=(v||0).toLocaleString();};
- set('mStyle',s.style); set('mMat',s.material); set('mVen',s.collection); set('mAvg',s.label);
+ // pistons: height = count/target, glows gold + goes green when a job hits 100%
+ const piston=(cyl,numId,count,target)=>{
+ const c=document.getElementById(cyl); const p=Math.min(1,(count||0)/target);
+ if(c){c.style.setProperty('--p',p.toFixed(3)); c.classList.toggle('full',p>=0.999);}
+ const n=document.getElementById(numId); if(n)n.textContent=(count||0).toLocaleString();
+ };
+ piston('cStyle','mStyle',s.style,37566);
+ piston('cMat','mMat',s.material,24581);
+ piston('cCol','mVen',s.collection,3891);
+ piston('cLab','mAvg',s.label,7155);
}catch(e){/* transient; next tick retries */}
}
← 9c81258 5x: REPORT + sweeps 4-5 clean (clean-twice); feed-toggle ver
·
back to Corvette Dashboard Viewer
·
auto-save: 2026-07-28T09:59:38 (1 files) — assets/dash-pisto 3d45dba →