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

Fixed Changes:

Browse Source 
- The bit value when in two's compliment mode is not right, it should be on the same line, not wrapped
- The random button should glow when the random function is running, it shouldn't be solid green all the time
- The reset button, can you make the background of it red when hovered over too? I want it to pulse red on the background as well
- Make the title of this page (in head) "Binary Simulator"
- Reinstate the BaseLayout layout which we created previously
- The shifts for Two's Compliment do not work. An Arithmetic Right Shift would keep the value of the most significant bit.

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-16 19:35:39 +00:00
parent 8bf8b44938
commit ae91944cb4
3 changed files with 247 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/pages/binary.astro
View File

@@ -1,39 +1,37 @@
---
/*
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 BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/binary.css";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Binary | Computing:Box</title>
</head>
<body>
<!-- Always-visible toggle button (never hides) -->
<button
id="toolboxToggle"
class="toolboxToggle"
type="button"
aria-expanded="true"
aria-controls="toolboxPanel"
title="Toggle toolbox"
>
<span class="toolboxToggleIcon" aria-hidden="true">🧰</span>
<span class="toolboxToggleText">TOOLBOX</span>
<BaseLayout title="Binary Simulator">
<button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true">
<span class="toolboxIcon" aria-hidden="true">🧰</span>
<span class="toolboxLabel">TOOLBOX</span>
</button>
<!-- Fixed right-side toolbox -->
<aside id="toolboxPanel" class="toolbox" aria-label="Toolbox">
<div class="toolboxInner">
<!-- SETTINGS (renamed from Mode) -->
<section class="card">
<main class="wrap">
<section class="topGrid">
<!-- LEFT -->
<div>
<div 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>
<div class="divider"></div>
<section class="bitsWrap" aria-label="Bit switches">
<div class="bitsGrid" id="bitsGrid"></div>
</section>
</div>
<!-- RIGHT TOOLBOX -->
<aside id="toolbox" class="panelCol" aria-label="Toolbox">
<!-- SETTINGS -->
<div class="card">
<div class="cardTitle">Settings</div>
<div class="toggleRow">
@@ -49,10 +47,8 @@ import "../styles/binary.css";
Tip: In unsigned binary, all bits represent positive values.
</div>
<!-- Bit width moved into Settings -->
<div class="subCard">
<div class="subCardTitle">Bit width</div>
<div class="subTitle">Bit width</div>
<div class="bitWidthRow">
<button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
@@ -74,58 +70,43 @@ import "../styles/binary.css";
<button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
</div>
</div>
</section>
<!-- CUSTOM (Custom Binary / Denary + Random) -->
<section class="card">
<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 class="hint">Random runs briefly then stops automatically.</div>
</section>
<!-- CUSTOM -->
<div class="card">
<div class="cardTitle">Custom</div>
<!-- TOOLS (inc/dec centred, shift buttons, reset full width bottom row) -->
<section class="card">
<div class="twoBtnRow">
<button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button>
</div>
<button class="toolBtn toolWide toolRandom" id="btnRandom" type="button">
Random
</button>
<div class="hint">Random runs briefly then stops automatically.</div>
</div>
<!-- TOOLS -->
<div 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>
<button class="toolBtn toolArrow toolDown" id="btnDec" type="button" aria-label="Decrement">▼</button>
<button class="toolBtn toolArrow toolUp" id="btnInc" type="button" aria-label="Increment">▲</button>
</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 class="twoBtnRow">
<button class="btn" id="btnShiftLeft" type="button">Left Shift</button>
<button class="btn" id="btnShiftRight" type="button">Right Shift</button>
</div>
<button class="toolBtn toolReset" id="btnClear" type="button">RESET</button>
</section>
<button class="toolBtn toolWide toolReset" id="btnClear" type="button">Reset</button>
</div>
</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>
</main>
<script type="module" src="/src/scripts/binary.js"></script>
</body>
</html>
</BaseLayout>

127
src/scripts/binary.js
View File

@@ -1,6 +1,6 @@
// src/scripts/binary.js
// Computing:Box — Binary page logic (Unsigned + Two's Complement)
// Matches IDs/classes in your current binary.astro HTML.
// Computing:Box — Binary Simulator logic (Unsigned + Two's Complement)
// Matches IDs/classes in binary.astro
(() => {
/* -----------------------------
@@ -13,10 +13,11 @@
const modeToggle = document.getElementById("modeToggle");
const modeHint = document.getElementById("modeHint");
const lblUnsigned = document.getElementById("lblUnsigned");
const lblTwos = document.getElementById("lblTwos");
const btnCustomBinary = document.getElementById("btnCustomBinary");
const btnCustomDenary = document.getElementById("btnCustomDenary");
const btnShiftLeft = document.getElementById("btnShiftLeft");
const btnShiftRight = document.getElementById("btnShiftRight");
@@ -28,7 +29,7 @@
const btnBitsUp = document.getElementById("btnBitsUp");
const btnBitsDown = document.getElementById("btnBitsDown");
// Toolbox toggle
const toolbox = document.getElementById("toolbox");
const toolboxToggle = document.getElementById("toolboxToggle");
/* -----------------------------
@@ -94,22 +95,18 @@
const u = bitsToUnsignedBigInt();
const signBit = bits[bitCount - 1] === true;
if (!signBit) return u;
// negative: u - 2^n
return u - pow2Big(bitCount);
return u - pow2Big(bitCount); // negative: u - 2^n
}
function signedBigIntToBitsTwos(vSigned) {
const span = pow2Big(bitCount); // 2^n
let v = vSigned;
// Convert to unsigned representative: v mod 2^n
v = ((v % span) + span) % span;
// convert to unsigned representative: v mod 2^n
const v = ((vSigned % span) + span) % span;
unsignedBigIntToBits(v);
}
function formatBinaryGrouped() {
// MSB..LSB with a space every 4 bits
// MSB..LSB with space every 4 bits
let s = "";
for (let i = bitCount - 1; i >= 0; i--) {
s += bits[i] ? "1" : "0";
@@ -122,11 +119,9 @@
function updateModeHint() {
if (!modeHint) return;
if (isTwosMode()) {
modeHint.textContent =
"Tip: In two’s complement, the left-most bit (MSB) represents a negative value.";
modeHint.textContent = "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.";
modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values.";
}
}
@@ -137,7 +132,7 @@
bitCount = clampInt(count, 1, 64);
if (bitsInput) bitsInput.value = String(bitCount);
// resize bits array, preserve existing LSBs where possible
// preserve existing LSBs where possible
const oldBits = bits.slice();
bits = new Array(bitCount).fill(false);
for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i];
@@ -150,7 +145,7 @@
bitEl.className = "bit";
bitEl.innerHTML = `
<div class="bulb" id="bulb-${i}" aria-hidden="true">💡</div>
<div class="bulb" id="bulb-${i}" aria-hidden="true"></div>
<div class="bitVal" id="bitLabel-${i}"></div>
<label class="switch" aria-label="Toggle bit ${i}">
<input type="checkbox" data-index="${i}">
@@ -161,8 +156,8 @@
bitsGrid.appendChild(bitEl);
}
// Hook switches
bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
// Hook switches (only the bit switches, not the mode toggle)
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
input.addEventListener("change", () => {
const i = Number(input.dataset.index);
bits[i] = input.checked;
@@ -190,7 +185,7 @@
}
function syncSwitchesToBits() {
bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
const i = Number(input.dataset.index);
input.checked = !!bits[i];
});
@@ -200,18 +195,7 @@
for (let i = 0; i < bitCount; i++) {
const bulb = document.getElementById(`bulb-${i}`);
if (!bulb) continue;
const on = bits[i] === true;
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";
}
bulb.classList.toggle("on", bits[i] === true);
}
}
@@ -223,7 +207,6 @@
} else {
denaryEl.textContent = bitsToUnsignedBigInt().toString();
}
binaryEl.textContent = formatBinaryGrouped();
}
@@ -236,26 +219,21 @@
}
/* -----------------------------
SET FROM BINARY STRING
SET FROM INPUTS
----------------------------- */
function setFromBinaryString(binStr) {
const clean = String(binStr ?? "").replace(/\s+/g, "");
if (!/^[01]+$/.test(clean)) return false;
const padded = clean.slice(-bitCount).padStart(bitCount, "0");
for (let i = 0; i < bitCount; i++) {
const charFromRight = padded[padded.length - 1 - i];
bits[i] = charFromRight === "1";
}
updateUI();
return true;
}
/* -----------------------------
SET FROM DENARY INPUT
----------------------------- */
function setFromDenaryInput(vStr) {
const raw = String(vStr ?? "").trim();
if (!raw) return false;
@@ -287,14 +265,21 @@
SHIFTS
----------------------------- */
function shiftLeft() {
for (let i = bitCount - 1; i >= 1; i--) bits[i] = bits[i - 1];
for (let i = bitCount - 1; i >= 1; i--) {
bits[i] = bits[i - 1];
}
bits[0] = false;
updateUI();
}
function shiftRight() {
for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
bits[bitCount - 1] = false;
// ✅ Arithmetic Right Shift in two's complement: preserve MSB (sign bit)
const preserveMSB = isTwosMode() ? bits[bitCount - 1] : false;
for (let i = 0; i < bitCount - 1; i++) {
bits[i] = bits[i + 1];
}
bits[bitCount - 1] = preserveMSB;
updateUI();
}
@@ -311,7 +296,7 @@
const min = twosMin(bitCount);
const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() + 1n;
if (v > max) v = min;
if (v > max) v = min; // wrap
signedBigIntToBitsTwos(v);
} else {
const span = unsignedMaxExclusive(bitCount);
@@ -326,7 +311,7 @@
const min = twosMin(bitCount);
const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() - 1n;
if (v < min) v = max;
if (v < min) v = max; // wrap
signedBigIntToBitsTwos(v);
} else {
const span = unsignedMaxExclusive(bitCount);
@@ -337,7 +322,7 @@
}
/* -----------------------------
RANDOM (BigInt-safe)
RANDOM (crypto, BigInt-safe)
----------------------------- */
function cryptoRandomBigInt(maxExclusive) {
if (maxExclusive <= 0n) return 0n;
@@ -361,19 +346,23 @@
function setRandomOnce() {
const span = unsignedMaxExclusive(bitCount); // 2^n
const u = cryptoRandomBigInt(span);
const u = cryptoRandomBigInt(span); // 0..2^n-1
unsignedBigIntToBits(u);
updateUI();
}
function stopRandomPulse() {
btnRandom?.classList.remove("running");
}
function runRandomBriefly() {
// stop any existing run first
if (randomTimer) {
clearInterval(randomTimer);
randomTimer = null;
}
// pulse while running
btnRandom?.classList.add("is-running");
btnRandom?.classList.add("running");
const start = Date.now();
const durationMs = 900;
@@ -384,44 +373,37 @@
if (Date.now() - start >= durationMs) {
clearInterval(randomTimer);
randomTimer = null;
btnRandom?.classList.remove("is-running");
stopRandomPulse();
}
}, tickMs);
}
/* -----------------------------
BIT WIDTH CONTROLS
BIT WIDTH
----------------------------- */
function setBitWidth(n) {
buildBits(clampInt(n, 1, 64));
const v = clampInt(n, 1, 64);
buildBits(v);
}
/* -----------------------------
TOOLBOX TOGGLE (never disappears)
TOOLBOX TOGGLE
----------------------------- */
function setToolboxHidden(hidden) {
document.body.classList.toggle("toolbox-hidden", hidden);
if (toolboxToggle) toolboxToggle.setAttribute("aria-expanded", String(!hidden));
try { localStorage.setItem("computingbox.toolboxHidden", hidden ? "1" : "0"); } catch {}
if (!toolbox) return;
toolbox.style.display = hidden ? "none" : "";
toolboxToggle?.setAttribute("aria-expanded", hidden ? "false" : "true");
}
function initToolboxState() {
let hidden = false;
try { hidden = localStorage.getItem("computingbox.toolboxHidden") === "1"; } catch {}
setToolboxHidden(hidden);
}
toolboxToggle?.addEventListener("click", () => {
const hidden = toolbox?.style.display === "none";
setToolboxHidden(!hidden);
});
/* -----------------------------
EVENTS
----------------------------- */
toolboxToggle?.addEventListener("click", () => {
const hidden = document.body.classList.contains("toolbox-hidden");
setToolboxHidden(!hidden);
});
modeToggle?.addEventListener("change", () => {
updateUI();
});
modeToggle?.addEventListener("change", () => updateUI());
btnCustomBinary?.addEventListener("click", () => {
const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`);
@@ -446,19 +428,18 @@
btnDec?.addEventListener("click", decrement);
btnClear?.addEventListener("click", clearAll);
btnRandom?.addEventListener("click", runRandomBriefly);
btnBitsUp?.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)));
/* -----------------------------
INIT
----------------------------- */
initToolboxState();
updateModeHint();
buildBits(bitCount);
setToolboxHidden(false);
})();

383
src/styles/binary.css
View File

@@ -6,9 +6,6 @@
--accent: #33ff7a;
--accent-dim: rgba(51,255,122,.15);
--line: rgba(255,255,255,.12);
--toolbox-width: 320px; /* adjust if needed */
--toolbox-gap: 28px;
}
@font-face{
@@ -22,7 +19,7 @@
}
@font-face{
font-family: "SevenSegment";
font-family: "Seven-Segment";
src:
url("/fonts/Seven-Segment.woff2") format("woff2"),
url("/fonts/Seven-Segment.woff") format("woff");
@@ -31,98 +28,26 @@
font-display: swap;
}
html, body{
height: 100%;
}
body{
margin:0;
background: var(--bg);
color: var(--text);
font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-family: "Seven-Segment", 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{
max-width: 1200px;
margin: 0 auto;
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;
}
body.toolbox-hidden .wrap{
padding-right: 20px;
.topGrid{
display:grid;
grid-template-columns: 1fr 340px;
gap: 28px;
align-items:start;
}
/* ---------------------------------
Readout
---------------------------------- */
.readout{
text-align:center;
padding: 10px 10px 0;
@@ -144,27 +69,19 @@ body.toolbox-hidden .wrap{
text-shadow: 0 0 18px var(--accent-dim);
}
/* (You previously wanted these 25% smaller than earlier large sizes) */
.denaryValue{
font-size: 52px;
font-size: 52px; /* smaller than earlier */
line-height: 1.0;
margin: 6px 0 10px;
}
.binaryValue{
font-size: 40px;
letter-spacing: .14em; /* +1-2px feel */
line-height: 1.08;
font-size: 40px; /* smaller than earlier */
letter-spacing: .14em;
line-height: 1.05;
margin: 6px 0 14px;
/* 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;
word-break: break-word;
}
.divider{
@@ -172,9 +89,39 @@ body.toolbox-hidden .wrap{
border-top: 1px solid var(--line);
}
/* ---------------------------------
Cards & common controls
---------------------------------- */
/* TOOLBOX BUTTON (must never disappear) */
.toolboxToggle{
position: fixed;
top: 16px;
right: 16px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
cursor: pointer;
font-weight: 800;
}
.toolboxLabel{
letter-spacing: .12em;
}
.toolboxIcon{
filter: saturate(1.1);
}
/* Toolbox column */
.panelCol{
display:flex;
flex-direction:column;
gap: 14px;
position: sticky;
top: 16px;
}
.card{
background: var(--panel2);
border: 1px solid rgba(255,255,255,.10);
@@ -184,7 +131,7 @@ body.toolbox-hidden .wrap{
.cardTitle{
letter-spacing: .18em;
font-weight: 900;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
font-size: 12px;
@@ -194,38 +141,10 @@ body.toolbox-hidden .wrap{
.hint{
color: var(--muted);
font-size: 12px;
margin-top: 10px;
margin-top: 8px;
line-height: 1.35;
}
.btn{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
padding: 12px 14px;
border-radius: 12px;
font-weight: 800;
cursor: pointer;
min-width: 0;
font-family: "SevenSegment", system-ui, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
}
.btn:active{ transform: translateY(1px); }
.btnAccent{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.btnSmall{
padding: 10px 10px;
font-size: 12px;
}
/* ---------------------------------
Settings toggle
---------------------------------- */
.toggleRow{
display:flex;
align-items:center;
@@ -235,10 +154,11 @@ body.toolbox-hidden .wrap{
.toggleLabel{
color: var(--text);
font-weight: 800;
font-weight: 700;
font-size: 14px;
}
/* Switch */
.switch{
position: relative;
width: 56px;
@@ -279,33 +199,52 @@ body.toolbox-hidden .wrap{
background: var(--accent);
}
/* ---------------------------------
Settings: Bit width subcard full width
---------------------------------- */
/* Buttons */
.btn{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
padding: 12px 14px;
border-radius: 12px;
font-weight: 800;
cursor: pointer;
}
.btn:active{ transform: translateY(1px); }
.btnAccent{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.twoBtnRow{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* Sub card */
.subCard{
margin-top: 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 12px;
}
.subCardTitle{
letter-spacing: .18em;
.subTitle{
font-size: 12px;
font-weight: 900;
color: var(--muted);
text-transform: uppercase;
font-size: 11px;
margin: 0 0 10px;
letter-spacing: .18em;
margin-bottom: 10px;
}
/* Bit width control */
.bitWidthRow{
display:grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
align-items:center;
}
.miniBtn{
height:44px;
width:44px;
@@ -316,9 +255,7 @@ body.toolbox-hidden .wrap{
cursor:pointer;
font-weight:900;
font-size:18px;
font-family: "SevenSegment", system-ui, sans-serif;
}
.bitInputWrap{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
@@ -328,8 +265,8 @@ body.toolbox-hidden .wrap{
align-items:center;
justify-content:space-between;
gap:12px;
min-width: 140px; /* ensures 2 digits fits comfortably */
}
.bitInputLabel{
color:var(--muted);
font-size:12px;
@@ -337,9 +274,8 @@ body.toolbox-hidden .wrap{
letter-spacing:.18em;
text-transform:uppercase;
}
.bitInput{
width: 90px; /* fits 2 digits comfortably */
width:60px;
text-align:right;
background:transparent;
border:none;
@@ -354,35 +290,10 @@ body.toolbox-hidden .wrap{
margin:0;
}
/* ---------------------------------
Custom card (includes Random)
---------------------------------- */
.customGrid{
display:grid;
grid-template-columns: 1fr 1fr;
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
---------------------------------- */
/* Tools layout */
.toolsTopRow{
display:flex;
justify-content:center; /* centred to the card */
justify-content:center;
gap: 10px;
margin-bottom: 10px;
}
@@ -395,56 +306,52 @@ body.toolbox-hidden .wrap{
color: #fff;
cursor: pointer;
font-weight: 900;
font-family: "SevenSegment", system-ui, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
letter-spacing: .08em;
}
.toolSpin{
width: 64px; /* narrower */
.toolWide{
width: 100%;
margin-top: 10px;
}
.toolArrow{
width: 72px;
font-size: 22px;
}
.toolDec{
background: rgba(255, 60, 60, .22);
border-color: rgba(255, 60, 60, .40);
.toolDown{
background: rgba(255,0,0,.16);
border-color: rgba(255,0,0,.30);
}
.toolUp{
background: rgba(51,255,122,.16);
border-color: rgba(51,255,122,.30);
}
.toolInc{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
/* Random pulses only while running (class added via JS) */
@keyframes pulseGreen {
0% { box-shadow: 0 0 0 rgba(51,255,122,0); }
50% { box-shadow: 0 0 18px rgba(51,255,122,.45); }
100% { box-shadow: 0 0 0 rgba(51,255,122,0); }
}
.toolRandom.running{
animation: pulseGreen .9s ease-in-out infinite;
border-color: rgba(51,255,122,.55);
}
.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); }
/* Reset pulses red on hover INCLUDING background */
@keyframes pulseRed {
0% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
50% { box-shadow: 0 0 18px rgba(255,0,0,.35); background: rgba(255,0,0,.22); }
100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
}
.toolReset:hover{
animation: pulseRed .75s ease-in-out infinite;
border-color: rgba(255, 60, 60, .55);
animation: pulseRed .85s ease-in-out infinite;
border-color: rgba(255,0,0,.40);
}
/* ---------------------------------
Bits grid
---------------------------------- */
.bitsWrap{
margin-top: 22px;
}
/* Bits */
.bitsWrap{ margin-top: 22px; }
.bitsGrid{
display:grid;
@@ -454,7 +361,6 @@ body.toolbox-hidden .wrap{
padding-top: 18px;
}
/* Each bit tile */
.bit{
display:flex;
flex-direction:column;
@@ -464,60 +370,47 @@ body.toolbox-hidden .wrap{
text-align:center;
}
/* Bulb emoji only (no circle), +25% larger */
/* Bulb (25% bigger) */
.bulb{
width:auto;
height:auto;
border:none;
background:transparent;
border-radius:0;
box-shadow:none;
width: 42px;
height: 42px;
display:flex;
align-items:center;
justify-content:center;
font-size: 33px; /* ~25% up from ~26px */
font-size: 26px;
line-height: 1;
opacity: .45;
opacity: .55;
background: transparent;
border: none;
}
.bulb::before{
content:"💡";
filter: grayscale(1);
}
.bulb.on{
opacity: 1;
text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
}
.bulb.on::before{
filter: grayscale(0);
}
/* Weight label */
/* Bit values MUST NOT WRAP */
.bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px; /* keep readable */
font-size: 28px;
color: var(--text);
opacity: .95;
line-height: 1.05;
line-height: 1;
min-height: 32px;
/* prevent overlap: allow wrapping + constrain */
max-width: 90px;
white-space: normal;
overflow-wrap: anywhere;
text-align:center;
white-space: nowrap; /* IMPORTANT FIX */
}
/* Responsive */
@media (max-width: 980px){
.wrap{ max-width: 980px; }
.bitsGrid{ grid-template-columns: repeat(6, minmax(90px, 1fr)); }
.topGrid{ grid-template-columns: 1fr; }
.panelCol{ position: static; }
}
@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){
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
}