alexander.lyall/computing-box
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

- Make the bulbs 25% bigger

Browse Source 
- Make the increment/decrement buttons centred to the card
- The toolbox button disappears when the toolbox is hidden
- Move the custom buttons to their own card in the toolbox
- Put the random button in the same card as the custom buttons
- Make the random button glow/pulse green when it is running
- Move the shift buttons to the "Tools" card
- Make the reset button the full width of the card, it should be in the bottom row on its own.
- Make the reset button glow/pulse red when hovered over
- Rename Mode to "Settings"
- Move bit width to the "Settings" card
- Keep the "Tools" card named as "Tools"
This commit is contained in:
Alexander Lyall
2025-12-16 19:17:06 +00:00
parent 7fa90ab165
commit 8bf8b44938
3 changed files with 498 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/pages/binary.astro
View File

@@ -1,4 +1,9 @@
--- ---
/*
Binary | Computing:Box
- Toolbox is fixed to the right, and can be collapsed without disappearing.
- Main content reserves space when toolbox is open, and recentres when hidden.
*/
import "../styles/binary.css"; import "../styles/binary.css";
--- ---
@@ -6,85 +11,47 @@ import "../styles/binary.css";
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Binary | Computing:Box</title> <title>Binary | Computing:Box</title>
</head> </head>
<body class="toolbox-open"> <body>
<main class="wrap"> <!-- Always-visible toggle button (never hides) -->
<section class="topGrid"> <button
<!-- LEFT: readout + buttons --> id="toolboxToggle"
<div class="leftCol"> class="toolboxToggle"
<div class="readout"> type="button"
<div class="label">Denary</div> aria-expanded="true"
<div id="denaryNumber" class="num denaryValue">0</div> aria-controls="toolboxPanel"
title="Toggle toolbox"
<div class="label">Binary</div> >
<div id="binaryNumber" class="num binaryValue">0000 0000</div> <span class="toolboxToggleIcon" aria-hidden="true">🧰</span>
<span class="toolboxToggleText">TOOLBOX</span>
<div class="controlsStack">
<div class="controlsRow controlsRowCustom">
<button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button>
</div>
<div class="controlsRow controlsRowShift">
<button class="btn" id="btnShiftLeft" type="button">Left Shift</button>
<button class="btn" id="btnShiftRight" type="button">Right Shift</button>
</div>
</div>
</div>
<div class="divider"></div>
<!-- Bits render here -->
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</div>
<!-- RIGHT: fixed toolbox -->
<aside class="toolboxDock" aria-label="Toolbox">
<button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true">
🧰 <span class="toolboxToggleText">Toolbox</span>
</button> </button>
<div class="toolboxPanel" id="toolboxPanel"> <!-- Fixed right-side toolbox -->
<div class="card"> <aside id="toolboxPanel" class="toolbox" aria-label="Toolbox">
<div class="cardTitle">Mode</div> <div class="toolboxInner">
<!-- SETTINGS (renamed from Mode) -->
<section class="card">
<div class="cardTitle">Settings</div>
<div class="toggleRow"> <div class="toggleRow">
<div class="toggleLabel" id="lblUnsigned">Unsigned</div> <div class="toggleLabel" id="lblUnsigned">Unsigned</div>
<label class="switch" aria-label="Toggle mode"> <label class="switch" aria-label="Toggle mode">
<input id="modeToggle" type="checkbox" /> <input id="modeToggle" type="checkbox" />
<span class="slider"></span> <span class="slider"></span>
</label> </label>
<div class="toggleLabel" id="lblTwos">Two&rsquo;s complement</div>
<div class="toggleLabel" id="lblTwos">Two’s complement</div>
</div> </div>
<div class="hint" id="modeHint"> <div class="hint" id="modeHint">
Tip: In unsigned binary, all bits represent positive values. Tip: In unsigned binary, all bits represent positive values.
</div> </div>
</div>
<!-- merged Tools + Bit Width --> <!-- Bit width moved into Settings -->
<div class="card"> <div class="subCard">
<div class="cardTitle">Tools</div> <div class="subCardTitle">Bit width</div>
<!-- row 1: dec/inc centred + reset at right -->
<div class="toolsRowTop">
<div class="toolsArrowsCentered">
<button class="toolBtn toolBtnDec" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="toolBtn toolBtnInc" id="btnInc" type="button" aria-label="Increment">▲</button>
</div>
<button class="toolBtn toolBtnWide" id="btnClear" type="button">Reset</button>
</div>
<!-- bit width (full width sub-card) -->
<div class="bitWidthSubCard">
<div class="bitWidthTitle">Bit width</div>
<div class="bitWidthRow"> <div class="bitWidthRow">
<button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button> <button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
@@ -107,16 +74,55 @@ import "../styles/binary.css";
<button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button> <button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
</div> </div>
</div> </div>
</section>
<!-- row 3: reset + random same row, below arrows --> <!-- CUSTOM (Custom Binary / Denary + Random) -->
<div class="toolsRowBottom"> <section class="card">
<button class="toolBtn toolBtnWide" id="btnRandom" type="button">Random</button> <div class="cardTitle">Custom</div>
<div class="customGrid">
<button class="btn btnAccent btnSmall" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btnAccent btnSmall" id="btnCustomDenary" type="button">Custom Denary</button>
<button class="btn btnAccent btnSmall btnRandom" id="btnRandom" type="button">Random</button>
</div> </div>
<div class="hint">Random runs briefly then stops automatically.</div> <div class="hint">Random runs briefly then stops automatically.</div>
</section>
<!-- TOOLS (inc/dec centred, shift buttons, reset full width bottom row) -->
<section class="card">
<div class="cardTitle">Tools</div>
<div class="toolsTopRow">
<button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button>
</div> </div>
<div class="toolsShiftRow">
<button class="btn btnSmall" id="btnShiftLeft" type="button">Left Shift</button>
<button class="btn btnSmall" id="btnShiftRight" type="button">Right Shift</button>
</div>
<button class="toolBtn toolReset" id="btnClear" type="button">RESET</button>
</section>
</div> </div>
</aside> </aside>
<!-- Main content -->
<main class="wrap">
<section class="readout">
<div class="label">Denary</div>
<div id="denaryNumber" class="num denaryValue">0</div>
<div class="label">Binary</div>
<div id="binaryNumber" class="num binaryValue">0000 0000</div>
<div class="divider"></div>
</section>
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section> </section>
</main> </main>

179
src/scripts/binary.js
View File

@@ -1,6 +1,6 @@
// src/scripts/binary.js // src/scripts/binary.js
// Computing:Box — Binary page logic (Unsigned + Two's Complement) // Computing:Box — Binary page logic (Unsigned + Two's Complement)
// Matches IDs/classes in binary.astro // Matches IDs/classes in your current binary.astro HTML.
(() => { (() => {
/* ----------------------------- /* -----------------------------
@@ -16,6 +16,7 @@
const btnCustomBinary = document.getElementById("btnCustomBinary"); const btnCustomBinary = document.getElementById("btnCustomBinary");
const btnCustomDenary = document.getElementById("btnCustomDenary"); const btnCustomDenary = document.getElementById("btnCustomDenary");
const btnShiftLeft = document.getElementById("btnShiftLeft"); const btnShiftLeft = document.getElementById("btnShiftLeft");
const btnShiftRight = document.getElementById("btnShiftRight"); const btnShiftRight = document.getElementById("btnShiftRight");
@@ -27,13 +28,18 @@
const btnBitsUp = document.getElementById("btnBitsUp"); const btnBitsUp = document.getElementById("btnBitsUp");
const btnBitsDown = document.getElementById("btnBitsDown"); const btnBitsDown = document.getElementById("btnBitsDown");
// Toolbox toggle
const toolboxToggle = document.getElementById("toolboxToggle"); const toolboxToggle = document.getElementById("toolboxToggle");
/* ----------------------------- /* -----------------------------
STATE STATE
----------------------------- */ ----------------------------- */
let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64); let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64);
// bits[i] is bit value 2^i (LSB at i=0)
let bits = new Array(bitCount).fill(false); let bits = new Array(bitCount).fill(false);
// Random run timer (brief)
let randomTimer = null; let randomTimer = null;
/* ----------------------------- /* -----------------------------
@@ -53,7 +59,7 @@
} }
function unsignedMaxExclusive(nBits) { function unsignedMaxExclusive(nBits) {
return pow2Big(nBits); return pow2Big(nBits); // 2^n
} }
function unsignedMaxValue(nBits) { function unsignedMaxValue(nBits) {
@@ -70,7 +76,9 @@
function bitsToUnsignedBigInt() { function bitsToUnsignedBigInt() {
let v = 0n; let v = 0n;
for (let i = 0; i < bitCount; i++) if (bits[i]) v += pow2Big(i); for (let i = 0; i < bitCount; i++) {
if (bits[i]) v += pow2Big(i);
}
return v; return v;
} }
@@ -86,84 +94,40 @@
const u = bitsToUnsignedBigInt(); const u = bitsToUnsignedBigInt();
const signBit = bits[bitCount - 1] === true; const signBit = bits[bitCount - 1] === true;
if (!signBit) return u; if (!signBit) return u;
// negative: u - 2^n
return u - pow2Big(bitCount); return u - pow2Big(bitCount);
} }
function signedBigIntToBitsTwos(vSigned) { function signedBigIntToBitsTwos(vSigned) {
const span = pow2Big(bitCount); const span = pow2Big(bitCount); // 2^n
let v = ((vSigned % span) + span) % span; let v = vSigned;
// Convert to unsigned representative: v mod 2^n
v = ((v % span) + span) % span;
unsignedBigIntToBits(v); unsignedBigIntToBits(v);
} }
function formatBinaryGrouped() {
// MSB..LSB with a space every 4 bits
let s = "";
for (let i = bitCount - 1; i >= 0; i--) {
s += bits[i] ? "1" : "0";
const posFromRight = (bitCount - i);
if (i !== 0 && posFromRight % 4 === 0) s += " ";
}
return s;
}
function updateModeHint() { function updateModeHint() {
if (!modeHint) return; if (!modeHint) return;
modeHint.textContent = isTwosMode() if (isTwosMode()) {
? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value." modeHint.textContent =
: "Tip: In unsigned binary, all bits represent positive values."; "Tip: In two’s complement, the left-most bit (MSB) represents a negative value.";
} else {
modeHint.textContent =
"Tip: In unsigned binary, all bits represent positive values.";
} }
/* -----------------------------
BINARY WRAP (responsive nibbles per row)
- Calculates how many 4-bit groups fit in the visible area
- Re-runs on resize
----------------------------- */
function measureNibbleWidthPx() {
// Measure "0000 " at current binary font settings
const probe = document.createElement("span");
probe.style.position = "absolute";
probe.style.visibility = "hidden";
probe.style.whiteSpace = "pre";
probe.style.font = getComputedStyle(binaryEl).font;
probe.style.letterSpacing = getComputedStyle(binaryEl).letterSpacing;
probe.textContent = "0000 ";
document.body.appendChild(probe);
const w = probe.getBoundingClientRect().width;
probe.remove();
return Math.max(1, w);
}
function nibblesPerRow() {
if (!binaryEl) return Math.max(1, Math.ceil(bitCount / 4));
const nibbleW = measureNibbleWidthPx();
// available width is the left column width (the grid reserves toolbox space already)
const container = binaryEl.closest(".readout") || binaryEl.parentElement;
const avail = container?.getBoundingClientRect().width ?? window.innerWidth;
// leave a little padding so we don't hit the edge
const usable = Math.max(200, avail - 40);
const perRow = Math.floor(usable / nibbleW);
return Math.max(1, perRow);
}
function formatBinaryWrapped() {
// Build MSB..LSB grouped by nibbles, then wrap by nibblesPerRow()
const nibCount = Math.ceil(bitCount / 4);
const perRow = nibblesPerRow();
let out = [];
for (let n = 0; n < nibCount; n++) {
// nibble index from MSB side
const msbBitIndex = bitCount - 1 - (n * 4);
let nib = "";
for (let k = 0; k < 4; k++) {
const i = msbBitIndex - k;
if (i < 0) continue;
nib += bits[i] ? "1" : "0";
}
// pad nibble if top group smaller
nib = nib.padStart(4, "0");
out.push(nib);
}
// wrap into lines
let lines = [];
for (let i = 0; i < out.length; i += perRow) {
lines.push(out.slice(i, i + perRow).join(" "));
}
return lines.join("\n");
} }
/* ----------------------------- /* -----------------------------
@@ -173,6 +137,7 @@
bitCount = clampInt(count, 1, 64); bitCount = clampInt(count, 1, 64);
if (bitsInput) bitsInput.value = String(bitCount); if (bitsInput) bitsInput.value = String(bitCount);
// resize bits array, preserve existing LSBs where possible
const oldBits = bits.slice(); const oldBits = bits.slice();
bits = new Array(bitCount).fill(false); bits = new Array(bitCount).fill(false);
for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i]; for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i];
@@ -235,8 +200,18 @@
for (let i = 0; i < bitCount; i++) { for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`); const bulb = document.getElementById(`bulb-${i}`);
if (!bulb) continue; if (!bulb) continue;
const on = bits[i] === true; const on = bits[i] === true;
bulb.classList.toggle("on", on); if (on) {
bulb.style.opacity = "1";
bulb.style.filter = "grayscale(0)";
bulb.style.textShadow =
"0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45)";
} else {
bulb.style.opacity = "0.45";
bulb.style.filter = "grayscale(1)";
bulb.style.textShadow = "none";
}
} }
} }
@@ -249,8 +224,7 @@
denaryEl.textContent = bitsToUnsignedBigInt().toString(); denaryEl.textContent = bitsToUnsignedBigInt().toString();
} }
// responsive wrap of binary digits (nibbles per row) binaryEl.textContent = formatBinaryGrouped();
binaryEl.textContent = formatBinaryWrapped();
} }
function updateUI() { function updateUI() {
@@ -269,10 +243,12 @@
if (!/^[01]+$/.test(clean)) return false; if (!/^[01]+$/.test(clean)) return false;
const padded = clean.slice(-bitCount).padStart(bitCount, "0"); const padded = clean.slice(-bitCount).padStart(bitCount, "0");
for (let i = 0; i < bitCount; i++) { for (let i = 0; i < bitCount; i++) {
const charFromRight = padded[padded.length - 1 - i]; const charFromRight = padded[padded.length - 1 - i];
bits[i] = charFromRight === "1"; bits[i] = charFromRight === "1";
} }
updateUI(); updateUI();
return true; return true;
} }
@@ -339,7 +315,8 @@
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
unsignedBigIntToBits((bitsToUnsignedBigInt() + 1n) % span); const v = (bitsToUnsignedBigInt() + 1n) % span;
unsignedBigIntToBits(v);
} }
updateUI(); updateUI();
} }
@@ -353,7 +330,8 @@
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
unsignedBigIntToBits((bitsToUnsignedBigInt() - 1n + span) % span); const v = (bitsToUnsignedBigInt() - 1n + span) % span;
unsignedBigIntToBits(v);
} }
updateUI(); updateUI();
} }
@@ -382,7 +360,7 @@
} }
function setRandomOnce() { function setRandomOnce() {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount); // 2^n
const u = cryptoRandomBigInt(span); const u = cryptoRandomBigInt(span);
unsignedBigIntToBits(u); unsignedBigIntToBits(u);
updateUI(); updateUI();
@@ -394,6 +372,9 @@
randomTimer = null; randomTimer = null;
} }
// pulse while running
btnRandom?.classList.add("is-running");
const start = Date.now(); const start = Date.now();
const durationMs = 900; const durationMs = 900;
const tickMs = 80; const tickMs = 80;
@@ -403,32 +384,44 @@
if (Date.now() - start >= durationMs) { if (Date.now() - start >= durationMs) {
clearInterval(randomTimer); clearInterval(randomTimer);
randomTimer = null; randomTimer = null;
btnRandom?.classList.remove("is-running");
} }
}, tickMs); }, tickMs);
} }
/* ----------------------------- /* -----------------------------
BIT WIDTH BIT WIDTH CONTROLS
----------------------------- */ ----------------------------- */
function setBitWidth(n) { function setBitWidth(n) {
buildBits(clampInt(n, 1, 64)); buildBits(clampInt(n, 1, 64));
} }
/* ----------------------------- /* -----------------------------
TOOLBOX TOGGLE TOOLBOX TOGGLE (never disappears)
----------------------------- */ ----------------------------- */
function setToolboxOpen(open) { function setToolboxHidden(hidden) {
document.body.classList.toggle("toolbox-open", open); document.body.classList.toggle("toolbox-hidden", hidden);
document.body.classList.toggle("toolbox-closed", !open); if (toolboxToggle) toolboxToggle.setAttribute("aria-expanded", String(!hidden));
toolboxToggle?.setAttribute("aria-expanded", open ? "true" : "false"); try { localStorage.setItem("computingbox.toolboxHidden", hidden ? "1" : "0"); } catch {}
// reflow binary wrapping when toolbox changes }
requestAnimationFrame(updateUI);
function initToolboxState() {
let hidden = false;
try { hidden = localStorage.getItem("computingbox.toolboxHidden") === "1"; } catch {}
setToolboxHidden(hidden);
} }
/* ----------------------------- /* -----------------------------
EVENTS EVENTS
----------------------------- */ ----------------------------- */
modeToggle?.addEventListener("change", updateUI); toolboxToggle?.addEventListener("click", () => {
const hidden = document.body.classList.contains("toolbox-hidden");
setToolboxHidden(!hidden);
});
modeToggle?.addEventListener("change", () => {
updateUI();
});
btnCustomBinary?.addEventListener("click", () => { btnCustomBinary?.addEventListener("click", () => {
const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`); const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`);
@@ -458,22 +451,14 @@
btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1)); btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1));
btnBitsDown?.addEventListener("click", () => setBitWidth(bitCount - 1)); btnBitsDown?.addEventListener("click", () => setBitWidth(bitCount - 1));
bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value))); bitsInput?.addEventListener("change", () => {
setBitWidth(Number(bitsInput.value));
toolboxToggle?.addEventListener("click", () => {
const open = !document.body.classList.contains("toolbox-closed");
setToolboxOpen(!open);
});
window.addEventListener("resize", () => {
// re-wrap the binary display live as the window changes
updateUI();
}); });
/* ----------------------------- /* -----------------------------
INIT INIT
----------------------------- */ ----------------------------- */
initToolboxState();
updateModeHint(); updateModeHint();
setToolboxOpen(true);
buildBits(bitCount); buildBits(bitCount);
})(); })();

542
src/styles/binary.css
View File

@@ -3,18 +3,14 @@
--panel2: rgba(255,255,255,.04); --panel2: rgba(255,255,255,.04);
--text: #e8e8ee; --text: #e8e8ee;
--muted: #a9acb8; --muted: #a9acb8;
--accent: #33ff7a; --accent: #33ff7a;
--accent-dim: rgba(51,255,122,.15); --accent-dim: rgba(51,255,122,.15);
--line: rgba(255,255,255,.12); --line: rgba(255,255,255,.12);
/* Toolbox sizing */ --toolbox-width: 320px; /* adjust if needed */
--toolbox-w: 320px; --toolbox-gap: 28px;
--toolbox-gap: 26px;
} }
/* NUMBERS */
@font-face{ @font-face{
font-family: "DSEG7ClassicRegular"; font-family: "DSEG7ClassicRegular";
src: src:
@@ -25,7 +21,6 @@
font-display: swap; font-display: swap;
} }
/* TEXT */
@font-face{ @font-face{
font-family: "SevenSegment"; font-family: "SevenSegment";
src: src:
@@ -36,7 +31,9 @@
font-display: swap; font-display: swap;
} }
*{ box-sizing: border-box; } html, body{
height: 100%;
}
body{ body{
margin:0; margin:0;
@@ -45,29 +42,87 @@ body{
font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
} }
/* ---------------------------------
Toolbox toggle (always visible)
---------------------------------- */
.toolboxToggle{
position: fixed;
top: 18px;
right: 18px;
z-index: 9999;
display:flex;
align-items:center;
gap: 10px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
border-radius: 12px;
padding: 10px 12px;
cursor: pointer;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.toolboxToggleIcon{
display:inline-block;
transform: translateY(1px);
}
.toolboxToggleText{
font-size: 12px;
}
/* ---------------------------------
Fixed toolbox panel
---------------------------------- */
.toolbox{
position: fixed;
top: 74px; /* leaves room for the toggle button */
right: 18px;
width: var(--toolbox-width);
z-index: 9998;
}
.toolboxInner{
display:flex;
flex-direction:column;
gap: 14px;
}
/* When hidden, toolbox slides out but toggle stays */
body.toolbox-hidden .toolbox{
transform: translateX(calc(var(--toolbox-width) + 40px));
opacity: 0;
pointer-events: none;
transition: transform .22s ease, opacity .18s ease;
}
.toolbox{
transition: transform .22s ease, opacity .18s ease;
}
/* ---------------------------------
Main wrap: reserve space for toolbox
---------------------------------- */
.wrap{ .wrap{
max-width: 1400px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 32px 20px 60px; padding: 32px 20px 60px;
/* Reserve space so toolbox never overlaps bits */
padding-right: calc(var(--toolbox-width) + var(--toolbox-gap) + 20px);
transition: padding-right .22s ease;
} }
/* Main layout: body.toolbox-hidden .wrap{
- reserve space for the toolbox when open so it NEVER overlaps padding-right: 20px;
- when closed, the left content re-centres because column disappears
*/
.topGrid{
display:grid;
grid-template-columns: 1fr var(--toolbox-w);
gap: var(--toolbox-gap);
align-items:start;
} }
body.toolbox-closed .topGrid{ /* ---------------------------------
grid-template-columns: 1fr; Readout
gap: 0; ---------------------------------- */
}
/* LEFT */
.readout{ .readout{
text-align:center; text-align:center;
padding: 10px 10px 0; padding: 10px 10px 0;
@@ -82,7 +137,6 @@ body.toolbox-closed .topGrid{
margin-top: 10px; margin-top: 10px;
} }
/* Numbers use DSEG */
.num{ .num{
font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 400; font-weight: 400;
@@ -90,49 +144,72 @@ body.toolbox-closed .topGrid{
text-shadow: 0 0 18px var(--accent-dim); text-shadow: 0 0 18px var(--accent-dim);
} }
/* Denary is smaller than it used to be */ /* (You previously wanted these 25% smaller than earlier large sizes) */
.denaryValue{ .denaryValue{
font-size: 56px; font-size: 52px;
line-height: 1.0; line-height: 1.0;
margin: 6px 0 10px; margin: 6px 0 10px;
} }
/* Binary wraps (JS inserts \n), keep spacing readable */
.binaryValue{ .binaryValue{
font-size: 44px; font-size: 40px;
line-height: 1.05; letter-spacing: .14em; /* +1-2px feel */
line-height: 1.08;
margin: 6px 0 14px; margin: 6px 0 14px;
white-space: pre-line;
letter-spacing: 0.02em; /* Allow wrapping at spaces between nibbles */
white-space: pre-wrap;
word-break: normal;
overflow-wrap: anywhere;
/* Prevent absurd-wide overflow; respects toolbox space */
max-width: calc(100vw - var(--toolbox-width) - 120px);
display:inline-block;
} }
/* Buttons */ .divider{
.controlsStack{ margin-top: 26px;
border-top: 1px solid var(--line);
}
/* ---------------------------------
Cards & common controls
---------------------------------- */
.card{
background: var(--panel2);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 14px;
}
.cardTitle{
letter-spacing: .18em;
font-weight: 900;
color: var(--muted);
text-transform: uppercase;
font-size: 12px;
margin: 0 0 10px;
}
.hint{
color: var(--muted);
font-size: 12px;
margin-top: 10px; margin-top: 10px;
display:flex; line-height: 1.35;
flex-direction:column;
align-items:center;
} }
/* extra spacing between custom and shift rows */
.controlsRow{
display:flex;
gap: 12px;
justify-content:center;
flex-wrap:wrap;
}
.controlsRowCustom{ margin-bottom: 14px; }
.controlsRowShift{ margin-bottom: 0; }
.btn{ .btn{
background: rgba(255,255,255,.06); background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
color: #fff; color: #fff;
padding: 12px 14px; padding: 12px 14px;
border-radius: 12px; border-radius: 12px;
font-weight: 700; font-weight: 800;
cursor: pointer; cursor: pointer;
min-width: 170px; min-width: 0;
font-family: "SevenSegment", system-ui, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
} }
.btn:active{ transform: translateY(1px); } .btn:active{ transform: translateY(1px); }
@@ -141,68 +218,27 @@ body.toolbox-closed .topGrid{
border-color: rgba(51,255,122,.45); border-color: rgba(51,255,122,.45);
} }
.divider{ .btnSmall{
margin-top: 26px; padding: 10px 10px;
border-top: 1px solid var(--line); font-size: 12px;
} }
/* Bits area */ /* ---------------------------------
.bitsWrap{ margin-top: 22px; } Settings toggle
---------------------------------- */
/* IMPORTANT: Use auto-fit so columns get wider when toolbox is open, .toggleRow{
preventing long bit values from overlapping.
*/
.bitsGrid{
display:grid;
gap: 18px;
justify-content:center;
padding-top: 18px;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
max-width: 1100px;
margin: 0 auto;
}
.bit{
display:flex; display:flex;
flex-direction:column;
align-items:center; align-items:center;
justify-content:space-between;
gap: 10px; gap: 10px;
padding: 8px 4px;
text-align:center;
} }
/* Bulb: emoji only (no circle) */ .toggleLabel{
.bulb{
font-size: 33px; /* ~25% larger */
line-height: 1;
opacity: .45;
filter: grayscale(1);
text-shadow: none;
user-select: none;
}
.bulb.on{
opacity: 1;
filter: grayscale(0);
text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
}
/* Bit value */
.bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px;
color: var(--text); color: var(--text);
opacity: .95; font-weight: 800;
line-height: 1.05; font-size: 14px;
min-height: 34px;
/* prevent overlap */
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
/* Switch styling (reused) */
.switch{ .switch{
position: relative; position: relative;
width: 56px; width: 56px;
@@ -243,138 +279,23 @@ body.toolbox-closed .topGrid{
background: var(--accent); background: var(--accent);
} }
/* RIGHT TOOLBOX (fixed to right, but never overlaps because layout reserves space) */ /* ---------------------------------
.toolboxDock{ Settings: Bit width subcard full width
position: sticky; ---------------------------------- */
top: 18px; .subCard{
justify-self: end; margin-top: 12px;
}
body.toolbox-closed .toolboxDock{
display: none;
}
.toolboxToggle{
display:inline-flex;
align-items:center;
gap: 10px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
border-radius: 12px;
padding: 10px 12px;
cursor: pointer;
font-weight: 800;
margin-bottom: 12px;
}
.toolboxToggleText{
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px;
}
.toolboxPanel{
display:flex;
flex-direction:column;
gap: 14px;
}
/* Cards */
.card{
background: var(--panel2);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 14px;
}
.cardTitle{
letter-spacing: .18em;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
font-size: 12px;
margin: 0 0 10px;
}
.hint{
color: var(--muted);
font-size: 12px;
margin-top: 8px;
line-height: 1.35;
}
.toggleRow{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
}
.toggleLabel{
color: var(--text);
font-weight: 700;
font-size: 14px;
}
/* Tools layout */
.toolsRowTop{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items:center;
margin-bottom: 12px;
}
.toolsArrowsCentered{
display:flex;
justify-content:center;
gap: 10px;
}
/* Buttons */
.toolBtn{
height: 48px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
cursor: pointer;
font-weight: 800;
font-size: 20px;
min-width: 44px;
}
.toolBtnWide{
width: 100%;
font-size: 16px;
}
.toolBtnDec{
background: rgba(255, 80, 80, .16);
border-color: rgba(255, 80, 80, .35);
}
.toolBtnInc{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.bitWidthSubCard{
width: 100%;
background: rgba(255,255,255,.03); background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10);
border-radius: 12px; border-radius: 12px;
padding: 12px; padding: 12px;
margin-bottom: 12px;
} }
.bitWidthTitle{ .subCardTitle{
letter-spacing: .18em; letter-spacing: .18em;
font-weight: 800; font-weight: 900;
color: var(--muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 11px;
margin: 0 0 10px; margin: 0 0 10px;
} }
@@ -395,6 +316,7 @@ body.toolbox-closed .toolboxDock{
cursor:pointer; cursor:pointer;
font-weight:900; font-weight:900;
font-size:18px; font-size:18px;
font-family: "SevenSegment", system-ui, sans-serif;
} }
.bitInputWrap{ .bitInputWrap{
@@ -406,19 +328,18 @@ body.toolbox-closed .toolboxDock{
align-items:center; align-items:center;
justify-content:space-between; justify-content:space-between;
gap:12px; gap:12px;
min-width: 0;
} }
.bitInputLabel{ .bitInputLabel{
color:var(--muted); color:var(--muted);
font-size:12px; font-size:12px;
font-weight:800; font-weight:900;
letter-spacing:.18em; letter-spacing:.18em;
text-transform:uppercase; text-transform:uppercase;
} }
.bitInput{ .bitInput{
width: 72px; /* fits 2 digits comfortably */ width: 90px; /* fits 2 digits comfortably */
text-align:right; text-align:right;
background:transparent; background:transparent;
border:none; border:none;
@@ -427,27 +348,176 @@ body.toolbox-closed .toolboxDock{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace; font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size:28px; font-size:28px;
} }
.bitInput::-webkit-outer-spin-button, .bitInput::-webkit-outer-spin-button,
.bitInput::-webkit-inner-spin-button{ .bitInput::-webkit-inner-spin-button{
-webkit-appearance:none; -webkit-appearance:none;
margin:0; margin:0;
} }
.toolsRowBottom{ /* ---------------------------------
Custom card (includes Random)
---------------------------------- */
.customGrid{
display:grid; display:grid;
grid-template-columns: 1fr; grid-template-columns: 1fr 1fr;
margin-bottom: 2px; gap: 10px;
}
.customGrid .btnRandom{
grid-column: 1 / -1;
}
/* Random running pulse (green) */
@keyframes pulseGreen{
0% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
50% { box-shadow: 0 0 18px rgba(51,255,122,0.55), 0 0 34px rgba(51,255,122,0.25); }
100% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
}
.btnRandom.is-running{
animation: pulseGreen .8s ease-in-out infinite;
}
/* ---------------------------------
Tools card
---------------------------------- */
.toolsTopRow{
display:flex;
justify-content:center; /* centred to the card */
gap: 10px;
margin-bottom: 10px;
}
.toolBtn{
height: 48px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
cursor: pointer;
font-weight: 900;
font-family: "SevenSegment", system-ui, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
}
.toolSpin{
width: 64px; /* narrower */
font-size: 22px;
}
.toolDec{
background: rgba(255, 60, 60, .22);
border-color: rgba(255, 60, 60, .40);
}
.toolInc{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.toolsShiftRow{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.toolReset{
width: 100%;
height: 54px;
font-size: 14px;
}
/* Reset hover pulse (red) */
@keyframes pulseRed{
0% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
50% { box-shadow: 0 0 18px rgba(255,60,60,0.55), 0 0 34px rgba(255,60,60,0.25); }
100% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
}
.toolReset:hover{
animation: pulseRed .75s ease-in-out infinite;
border-color: rgba(255, 60, 60, .55);
}
/* ---------------------------------
Bits grid
---------------------------------- */
.bitsWrap{
margin-top: 22px;
}
.bitsGrid{
display:grid;
gap: 18px;
justify-content:center;
grid-template-columns: repeat(8, minmax(90px, 1fr));
padding-top: 18px;
}
/* Each bit tile */
.bit{
display:flex;
flex-direction:column;
align-items:center;
gap: 10px;
padding: 8px 4px;
text-align:center;
}
/* Bulb emoji only (no circle), +25% larger */
.bulb{
width:auto;
height:auto;
border:none;
background:transparent;
border-radius:0;
box-shadow:none;
display:flex;
align-items:center;
justify-content:center;
font-size: 33px; /* ~25% up from ~26px */
line-height: 1;
opacity: .45;
filter: grayscale(1);
}
/* Weight label */
.bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px; /* keep readable */
color: var(--text);
opacity: .95;
line-height: 1.05;
min-height: 32px;
/* prevent overlap: allow wrapping + constrain */
max-width: 90px;
white-space: normal;
overflow-wrap: anywhere;
text-align:center;
} }
/* Responsive */ /* Responsive */
@media (max-width: 980px){ @media (max-width: 980px){
.topGrid{ grid-template-columns: 1fr; } .wrap{ max-width: 980px; }
.toolboxDock{ position: static; justify-self: stretch; } .bitsGrid{ grid-template-columns: repeat(6, minmax(90px, 1fr)); }
body.toolbox-closed .toolboxDock{ display:none; } }
.bitsGrid{ max-width: 100%; }
@media (max-width: 720px){
.wrap{
padding-right: 20px; /* on small screens, don’t reserve fixed space */
}
.toolbox{
right: 10px;
width: min(var(--toolbox-width), calc(100vw - 20px));
}
.binaryValue{
max-width: calc(100vw - 40px);
}
} }
@media (max-width: 520px){ @media (max-width: 520px){
.btn{ min-width: 150px; } .bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
} }