[object Object]

← back to Ken

Ken: style the /trading toggle as a large brass AB bat-switch

ea9bacb6cc0856028caf76eca57715268fb722f2 · 2026-08-03 12:18:39 -0700 · Steve Abrams

Brass faceplate + corner screws, engraved AB monogram + ON/OFF labels, throw lever with a knob that glows green when armed. Same data-on wiring; purely presentational.

Files touched

Diff

commit ea9bacb6cc0856028caf76eca57715268fb722f2
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 3 12:18:39 2026 -0700

    Ken: style the /trading toggle as a large brass AB bat-switch
    
    Brass faceplate + corner screws, engraved AB monogram + ON/OFF labels, throw lever with a knob that glows green when armed. Same data-on wiring; purely presentational.
---
 kalshi-dash/trading-switch.html | 63 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 53 insertions(+), 10 deletions(-)

diff --git a/kalshi-dash/trading-switch.html b/kalshi-dash/trading-switch.html
index a3ddcc4..657a332 100644
--- a/kalshi-dash/trading-switch.html
+++ b/kalshi-dash/trading-switch.html
@@ -14,16 +14,48 @@
   h1{font-family:'Space Grotesk',sans-serif;font-size:20px;letter-spacing:.02em;margin:0 0 2px}
   .sub{color:var(--dim);font-size:13px;margin-bottom:22px}
   .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px}
-  .switchrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
+  .switchrow{display:flex;flex-direction:column;align-items:center;gap:20px;padding:6px 0 2px}
+  .statewrap{display:flex;align-items:center}
   .state{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700}
   .state.on{color:var(--green)} .state.off{color:var(--dim)}
-  .toggle{position:relative;width:96px;height:52px;border-radius:52px;border:1px solid var(--line);
-    background:#1c2430;cursor:pointer;transition:background .18s;flex:none}
-  .toggle[data-on="true"]{background:rgba(34,197,94,.22);border-color:var(--green)}
-  .knob{position:absolute;top:4px;left:4px;width:42px;height:42px;border-radius:50%;
-    background:var(--dim);transition:left .18s,background .18s}
-  .toggle[data-on="true"] .knob{left:48px;background:var(--green)}
-  .toggle[data-busy="true"]{opacity:.5;pointer-events:none}
+
+  /* ── Large brass AB bat-switch ── */
+  .brass-switch{cursor:pointer;user-select:none;outline:none}
+  .brass-switch:focus-visible .plate{box-shadow:inset 0 2px 4px rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.45),0 0 0 3px rgba(245,224,140,.5),0 10px 24px rgba(0,0,0,.55)}
+  .brass-switch[data-busy="true"]{opacity:.6;pointer-events:none}
+  .plate{position:relative;width:176px;height:250px;border-radius:16px;margin:0 auto;
+    padding:18px 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
+    background:linear-gradient(150deg,#7a5c12 0%,#c9a53a 16%,#f6e79a 32%,#d9b64a 48%,#a8801f 64%,#e6cf78 82%,#7f6115 100%);
+    border:1px solid #5c460f;
+    box-shadow:inset 0 2px 4px rgba(255,255,255,.55),inset 0 -4px 10px rgba(0,0,0,.5),0 12px 26px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.4)}
+  .screw{position:absolute;width:17px;height:17px;border-radius:50%;
+    background:radial-gradient(circle at 38% 32%,#f9efb8,#bf9a34 58%,#6f550f);
+    box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.55)}
+  .screw::after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:#5c460f;opacity:.75;transform:rotate(38deg)}
+  .screw.tl{top:9px;left:9px}.screw.tr{top:9px;right:9px}.screw.bl{bottom:9px;left:9px}.screw.br{bottom:9px;right:9px}
+  .monogram{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:19px;letter-spacing:.16em;
+    color:#4f3d0d;text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 1px rgba(0,0,0,.4)}
+  .engrave{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:.24em;
+    color:#5c4610;text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 0 rgba(0,0,0,.35);transition:color .2s,text-shadow .2s}
+  .brass-switch[data-on="true"] .on-lbl{color:#1c7a34;text-shadow:0 0 9px rgba(34,197,94,.75),0 1px 0 rgba(255,255,255,.3)}
+  .brass-switch[data-on="false"] .off-lbl{color:#8a1f1f;text-shadow:0 1px 0 rgba(255,255,255,.4)}
+  .throw{position:relative;width:60px;height:118px;border-radius:32px;
+    background:linear-gradient(90deg,#4a380b,#7a5c12 32%,#2f240700 50%,#5a460f 70%,#332703);
+    box-shadow:inset 0 4px 9px rgba(0,0,0,.75),inset 0 -2px 3px rgba(255,255,255,.14)}
+  .pivot{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);
+    background:radial-gradient(circle at 40% 34%,#f6e79a,#bf9a34 56%,#7a5c12);
+    box-shadow:inset 0 1px 2px rgba(255,255,255,.65),0 2px 5px rgba(0,0,0,.55);z-index:1}
+  .lever{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;z-index:2;
+    transform:translateX(-50%) rotate(178deg);transition:transform .26s cubic-bezier(.34,1.5,.5,1)}
+  .brass-switch[data-on="true"] .lever{transform:translateX(-50%) rotate(0deg)}
+  .stem{width:22px;height:60px;border-radius:11px;margin:0 auto;
+    background:linear-gradient(90deg,#7a5c12,#e6cf78 44%,#f6e79a 52%,#a8801f 78%,#6f550f);
+    box-shadow:inset 1px 0 1px rgba(255,255,255,.55),inset -2px 0 3px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.4)}
+  .ball{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;
+    background:radial-gradient(circle at 36% 30%,#f9efb8,#c19b33 56%,#7a5c12);
+    box-shadow:inset 0 2px 3px rgba(255,255,255,.65),0 4px 8px rgba(0,0,0,.55);transition:background .2s,box-shadow .2s}
+  .brass-switch[data-on="true"] .ball{background:radial-gradient(circle at 36% 30%,#d9ffe4,#22c55e 60%,#0f7a34);
+    box-shadow:0 0 16px rgba(34,197,94,.85),inset 0 2px 3px rgba(255,255,255,.5)}
   .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
   .kv{background:#0f141c;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
   .kv .k{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
@@ -49,8 +81,19 @@
 
   <div class="card">
     <div class="switchrow">
-      <div><span class="pulse off" id="pulse"></span><span class="state off" id="stateLabel">…</span></div>
-      <div class="toggle" id="toggle" data-on="false" role="switch" aria-checked="false" tabindex="0"><div class="knob"></div></div>
+      <div class="statewrap"><span class="pulse off" id="pulse"></span><span class="state off" id="stateLabel">…</span></div>
+      <div class="brass-switch" id="toggle" data-on="false" role="switch" aria-checked="false" tabindex="0" title="Throw the switch to arm / disarm real-money trading">
+        <div class="plate">
+          <span class="screw tl"></span><span class="screw tr"></span><span class="screw bl"></span><span class="screw br"></span>
+          <div class="monogram">AB</div>
+          <div class="engrave on-lbl">ON</div>
+          <div class="throw">
+            <div class="pivot"></div>
+            <div class="lever"><div class="ball"></div><div class="stem"></div></div>
+          </div>
+          <div class="engrave off-lbl">OFF</div>
+        </div>
+      </div>
     </div>
     <div class="warn" id="warn">⚠ <b>Real money armed.</b> The engine will place real Kalshi orders when ≥2 proven winner-bots agree, capped at $2/position · $10/day · $4 daily-loss.</div>
     <div class="note" id="note">Armed, but <b>no winner-consensus yet</b> — the fresh sim needs ~50 resolved trades/bot before real fills can fire. Armed ≠ trading until then.</div>

← 2191a43 Ken: add /trading real-money on-off switch (UI toggle = sour  ·  back to Ken  ·  Ken: incorporate the brass AB Trading Switch onto the dashbo d6811ed →