aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--docs/prototypes/panel-widget-gallery.html14
-rw-r--r--docs/prototypes/reference/slide-toggle.jpgbin0 -> 8023 bytes
2 files changed, 9 insertions, 5 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index f3a23bd..410e559 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -106,6 +106,8 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
.igrid .ik{color:var(--steel);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding-top:1px}
.igrid .iv{color:var(--dim);font-size:.82rem;line-height:1.45}
.igrid .iv b{color:var(--silver);font-weight:400}
+.igrid .iv a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold)}
+.igrid .iv a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
/* ---- shared primitives ---- */
.lamp{width:9px;height:9px;border-radius:50%;background:var(--pass);box-shadow:0 0 6px 1px rgba(116,147,47,.55)}
@@ -118,19 +120,19 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
/* slide toggle — after the iPod-hold-switch pill: dome thumb, revealed state engraving.
Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */
-.switch{display:inline-flex;align-items:center;justify-content:space-between;width:52px;height:23px;
- border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
+.switch{display:inline-flex;vertical-align:middle;align-items:center;justify-content:space-between;
+ width:52px;height:23px;border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
background:linear-gradient(180deg,#15130f,#242019);border:1px solid var(--slate);
box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55)}
.switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700;
font-family:var(--mono);color:var(--dim)}
.switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%;
- background:radial-gradient(circle at 35% 28%,#a8a396,#55524a);
+ background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a);
box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.switch.on{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi);
padding:2px 2px 2px 7px;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.3)}
.switch.on::before{content:"ON";order:1;color:var(--panel)}
-.switch.on::after{order:2;background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)}
+.switch.on::after{order:2}
.switch.red{background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail);padding:2px 2px 2px 7px}
.switch.red::before{content:"OFF";order:1;color:var(--cream)}
.switch.red::after{order:2}
@@ -778,7 +780,8 @@ const INFO={
limits:'Two states only. Ambiguous if the on-direction is not marked.',
origin:'Slide switches (transistor radios, Walkman hold) → the iPod hold switch with its orange reveal → the iOS toggle (2007). This card wears the hardware skin of that lineage.',difficulty:'Intuitive.',
prefer:'The state persists and gets glanced at more than changed. For period consoles use R03 or N01 instead.',
- period:'The pill rendering is modern (iPod/iOS era); the slide-switch mechanism underneath is 1950s+.'},
+ period:'The pill rendering is modern (iPod/iOS era); the slide-switch mechanism underneath is 1950s+.',
+ ref:'reference/slide-toggle.jpg'},
'02':{input:'Click one key to engage it; the others release. Click-only.',
solves:'One-of-few mode selection where the active mode must glow.',
use:'Common on consoles. Shines for 2-4 modes switched often.',
@@ -1492,6 +1495,7 @@ function card(host, no, name, html, note){
if(inf){const d=document.createElement('details'); d.className='winfo';
let rows='';
for(const [k,lbl] of INFO_FIELDS) if(inf[k]) rows+=`<div class="ik">${lbl}</div><div class="iv">${inf[k]}</div>`;
+ if(inf.ref) rows+=`<div class="ik">reference</div><div class="iv"><a href="${inf.ref}" target="_blank">photo</a></div>`;
d.innerHTML=`<summary>spec sheet</summary><div class="igrid">${rows}</div>`;
c.appendChild(d);}
host.appendChild(c); return c;
diff --git a/docs/prototypes/reference/slide-toggle.jpg b/docs/prototypes/reference/slide-toggle.jpg
new file mode 100644
index 0000000..c1c0b14
--- /dev/null
+++ b/docs/prototypes/reference/slide-toggle.jpg
Binary files differ