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

Recent Changes:

Browse Source 
- Make the navigation bar 3 times it's current height
- The navbar needs the Computing:Box logo to the left of the site name
- Move the toolbox button to appear below the navigation bar
- Make the background of the random button glow/pulse green when random is running
- Make Random run a little longer (like 25% more)
- Rename the "Custom" card to "Custom Number"
This commit is contained in:
Alexander Lyall
2025-12-16 19:56:40 +00:00
parent ae91944cb4
commit 8b3c58c8d9
4 changed files with 1318 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1017
public/images/computing-box-logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 732 KiB

132
src/layouts/BaseLayout.astro
View File

@@ -1,5 +1,7 @@
--- ---
const { title = "Computing:Box" } = Astro.props; const {
title = "Computing:Box",
} = Astro.props;
--- ---
<!doctype html> <!doctype html>
@@ -8,34 +10,124 @@ const { title = "Computing:Box" } = Astro.props;
<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>{title}</title> <title>{title}</title>
<link rel="stylesheet" href="/src/styles/site.css" /> <meta name="color-scheme" content="dark" />
</head> </head>
<body> <body>
<header class="site-header"> <header class="siteHeader">
<div class="site-header__inner"> <div class="siteHeaderInner">
<div class="brand">Computing:Box</div> <a class="brand" href="/">
<!-- Put your logo file here -->
<img
class="brandLogo"
src="../images/computing-box-logo.svg"
alt="Computing:Box logo"
width="28"
height="28"
/>
<span class="brandName">Computing:Box</span>
</a>
<nav class="nav"> <nav class="siteNav" aria-label="Main navigation">
<a class="nav__link" href="/binary">Binary</a> <a href="/about">About</a>
<a class="nav__link" href="/hexadecimal">Hexadecimal</a> <a href="/binary">Binary</a>
<a class="nav__link" href="/hex-colours">Hex Colours</a> <a href="/hexadecimal">Hexadecimal</a>
<a class="nav__link" href="/logic-gates">Logic Gates</a> <a href="/hex-colours">Hex Colours</a>
<a class="nav__link" href="/about">About</a> <a href="/logic-gates">Logic Gates</a>
</nav> </nav>
</div> </div>
</header> </header>
<main class="site-main">
<slot /> <slot />
</main>
<footer class="site-footer"> <style>
<div class="site-footer__inner"> :root{
<div>Computer Science Concept Simulators</div> /* 3× navbar height */
<div>© 2025 Computing:Box · Created with 💜 by Mr Lyall</div> --nav-height: 96px;
<div>Powered by ADCM Networks</div> --nav-pad-x: 22px;
</div> --bg: #1f2027;
</footer> --text: #e8e8ee;
--muted: #a9acb8;
--line: rgba(255,255,255,.10);
}
body{
margin:0;
background: var(--bg);
color: var(--text);
}
.siteHeader{
position: sticky;
top: 0;
z-index: 1000;
height: var(--nav-height);
display:flex;
align-items:center;
background: rgba(0,0,0,.15);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(10px);
}
.siteHeaderInner{
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--nav-pad-x);
display:flex;
align-items:center;
justify-content:space-between;
gap: 18px;
}
.brand{
display:flex;
align-items:center;
gap: 10px;
text-decoration:none;
color: var(--text);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.brandLogo{
display:block;
width: 28px;
height: 28px;
}
.brandName{
font-size: 14px;
opacity: .95;
}
.siteNav{
display:flex;
gap: 18px;
align-items:center;
}
.siteNav a{
color: var(--muted);
text-decoration:none;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
padding: 10px 8px;
border-radius: 10px;
}
.siteNav a:hover{
color: var(--text);
background: rgba(255,255,255,.06);
}
@media (max-width: 860px){
.siteNav{ gap: 10px; }
.siteNav a{ font-size: 10px; padding: 8px 6px; }
}
</style>
</body> </body>
</html> </html>

116
src/scripts/binary.js
View File

@@ -1,6 +1,5 @@
// src/scripts/binary.js // src/scripts/binary.js
// Computing:Box — Binary Simulator logic (Unsigned + Two's Complement) // Computing:Box — Binary page logic (Unsigned + Two's Complement)
// Matches IDs/classes in binary.astro
(() => { (() => {
/* ----------------------------- /* -----------------------------
@@ -13,8 +12,6 @@
const modeToggle = document.getElementById("modeToggle"); const modeToggle = document.getElementById("modeToggle");
const modeHint = document.getElementById("modeHint"); const modeHint = document.getElementById("modeHint");
const lblUnsigned = document.getElementById("lblUnsigned");
const lblTwos = document.getElementById("lblTwos");
const btnCustomBinary = document.getElementById("btnCustomBinary"); const btnCustomBinary = document.getElementById("btnCustomBinary");
const btnCustomDenary = document.getElementById("btnCustomDenary"); const btnCustomDenary = document.getElementById("btnCustomDenary");
@@ -29,18 +26,15 @@
const btnBitsUp = document.getElementById("btnBitsUp"); const btnBitsUp = document.getElementById("btnBitsUp");
const btnBitsDown = document.getElementById("btnBitsDown"); const btnBitsDown = document.getElementById("btnBitsDown");
const toolbox = document.getElementById("toolbox");
const toolboxToggle = document.getElementById("toolboxToggle"); const toolboxToggle = document.getElementById("toolboxToggle");
const toolboxPanel = document.getElementById("toolboxPanel");
/* ----------------------------- /* -----------------------------
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;
/* ----------------------------- /* -----------------------------
@@ -60,7 +54,7 @@
} }
function unsignedMaxExclusive(nBits) { function unsignedMaxExclusive(nBits) {
return pow2Big(nBits); // 2^n return pow2Big(nBits);
} }
function unsignedMaxValue(nBits) { function unsignedMaxValue(nBits) {
@@ -95,18 +89,16 @@
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;
return u - pow2Big(bitCount); // negative: u - 2^n return u - pow2Big(bitCount);
} }
function signedBigIntToBitsTwos(vSigned) { function signedBigIntToBitsTwos(vSigned) {
const span = pow2Big(bitCount); // 2^n const span = pow2Big(bitCount);
// convert to unsigned representative: v mod 2^n let v = ((vSigned % span) + span) % span;
const v = ((vSigned % span) + span) % span;
unsignedBigIntToBits(v); unsignedBigIntToBits(v);
} }
function formatBinaryGrouped() { function formatBinaryGrouped() {
// MSB..LSB with space every 4 bits
let s = ""; let s = "";
for (let i = bitCount - 1; i >= 0; i--) { for (let i = bitCount - 1; i >= 0; i--) {
s += bits[i] ? "1" : "0"; s += bits[i] ? "1" : "0";
@@ -118,11 +110,9 @@
function updateModeHint() { function updateModeHint() {
if (!modeHint) return; if (!modeHint) return;
if (isTwosMode()) { modeHint.textContent = isTwosMode()
modeHint.textContent = "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."; ? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."
} else { : "Tip: In unsigned binary, all bits represent positive values.";
modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values.";
}
} }
/* ----------------------------- /* -----------------------------
@@ -132,32 +122,27 @@
bitCount = clampInt(count, 1, 64); bitCount = clampInt(count, 1, 64);
if (bitsInput) bitsInput.value = String(bitCount); if (bitsInput) bitsInput.value = String(bitCount);
// 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];
bitsGrid.innerHTML = ""; bitsGrid.innerHTML = "";
// Render MSB..LSB left-to-right
for (let i = bitCount - 1; i >= 0; i--) { for (let i = bitCount - 1; i >= 0; i--) {
const bitEl = document.createElement("div"); const bitEl = document.createElement("div");
bitEl.className = "bit"; bitEl.className = "bit";
bitEl.innerHTML = ` 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> <div class="bitVal" id="bitLabel-${i}"></div>
<label class="switch" aria-label="Toggle bit ${i}"> <label class="switch" aria-label="Toggle bit ${i}">
<input type="checkbox" data-index="${i}"> <input type="checkbox" data-index="${i}">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
`; `;
bitsGrid.appendChild(bitEl); bitsGrid.appendChild(bitEl);
} }
// Hook switches (only the bit switches, not the mode toggle) bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
input.addEventListener("change", () => { input.addEventListener("change", () => {
const i = Number(input.dataset.index); const i = Number(input.dataset.index);
bits[i] = input.checked; bits[i] = input.checked;
@@ -176,6 +161,9 @@
const label = document.getElementById(`bitLabel-${i}`); const label = document.getElementById(`bitLabel-${i}`);
if (!label) continue; if (!label) continue;
// Keep label on ONE LINE (no wrapping)
label.style.whiteSpace = "nowrap";
if (isTwosMode() && i === bitCount - 1) { if (isTwosMode() && i === bitCount - 1) {
label.textContent = `-${pow2Big(bitCount - 1).toString()}`; label.textContent = `-${pow2Big(bitCount - 1).toString()}`;
} else { } else {
@@ -185,7 +173,7 @@
} }
function syncSwitchesToBits() { function syncSwitchesToBits() {
bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => { bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
const i = Number(input.dataset.index); const i = Number(input.dataset.index);
input.checked = !!bits[i]; input.checked = !!bits[i];
}); });
@@ -201,12 +189,7 @@
function updateReadout() { function updateReadout() {
if (!denaryEl || !binaryEl) return; if (!denaryEl || !binaryEl) return;
denaryEl.textContent = (isTwosMode() ? bitsToSignedBigIntTwos() : bitsToUnsignedBigInt()).toString();
if (isTwosMode()) {
denaryEl.textContent = bitsToSignedBigIntTwos().toString();
} else {
denaryEl.textContent = bitsToUnsignedBigInt().toString();
}
binaryEl.textContent = formatBinaryGrouped(); binaryEl.textContent = formatBinaryGrouped();
} }
@@ -219,12 +202,11 @@
} }
/* ----------------------------- /* -----------------------------
SET FROM INPUTS INPUT SETTERS
----------------------------- */ ----------------------------- */
function setFromBinaryString(binStr) { function setFromBinaryString(binStr) {
const clean = String(binStr ?? "").replace(/\s+/g, ""); const clean = String(binStr ?? "").replace(/\s+/g, "");
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];
@@ -265,21 +247,19 @@
SHIFTS SHIFTS
----------------------------- */ ----------------------------- */
function shiftLeft() { function shiftLeft() {
for (let i = bitCount - 1; i >= 1; i--) { for (let i = bitCount - 1; i >= 1; i--) bits[i] = bits[i - 1];
bits[i] = bits[i - 1];
}
bits[0] = false; bits[0] = false;
updateUI(); updateUI();
} }
function shiftRight() { function shiftRight() {
// ✅ Arithmetic Right Shift in two's complement: preserve MSB (sign bit) // Unsigned: logical right shift (MSB becomes 0)
const preserveMSB = isTwosMode() ? bits[bitCount - 1] : false; // Two's complement: arithmetic right shift (MSB preserved)
const msb = bits[bitCount - 1];
for (let i = 0; i < bitCount - 1; i++) { for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
bits[i] = bits[i + 1];
} bits[bitCount - 1] = isTwosMode() ? msb : false;
bits[bitCount - 1] = preserveMSB;
updateUI(); updateUI();
} }
@@ -296,7 +276,7 @@
const min = twosMin(bitCount); const min = twosMin(bitCount);
const max = twosMax(bitCount); const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() + 1n; let v = bitsToSignedBigIntTwos() + 1n;
if (v > max) v = min; // wrap if (v > max) v = min;
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
@@ -311,7 +291,7 @@
const min = twosMin(bitCount); const min = twosMin(bitCount);
const max = twosMax(bitCount); const max = twosMax(bitCount);
let v = bitsToSignedBigIntTwos() - 1n; let v = bitsToSignedBigIntTwos() - 1n;
if (v < min) v = max; // wrap if (v < min) v = max;
signedBigIntToBitsTwos(v); signedBigIntToBitsTwos(v);
} else { } else {
const span = unsignedMaxExclusive(bitCount); const span = unsignedMaxExclusive(bitCount);
@@ -322,7 +302,7 @@
} }
/* ----------------------------- /* -----------------------------
RANDOM (crypto, BigInt-safe) RANDOM (with running pulse + longer run)
----------------------------- */ ----------------------------- */
function cryptoRandomBigInt(maxExclusive) { function cryptoRandomBigInt(maxExclusive) {
if (maxExclusive <= 0n) return 0n; if (maxExclusive <= 0n) return 0n;
@@ -346,26 +326,22 @@
function setRandomOnce() { function setRandomOnce() {
const span = unsignedMaxExclusive(bitCount); // 2^n const span = unsignedMaxExclusive(bitCount); // 2^n
const u = cryptoRandomBigInt(span); // 0..2^n-1 const u = cryptoRandomBigInt(span);
unsignedBigIntToBits(u); unsignedBigIntToBits(u);
updateUI(); updateUI();
} }
function stopRandomPulse() {
btnRandom?.classList.remove("running");
}
function runRandomBriefly() { function runRandomBriefly() {
// stop any existing run first
if (randomTimer) { if (randomTimer) {
clearInterval(randomTimer); clearInterval(randomTimer);
randomTimer = null; randomTimer = null;
} }
btnRandom?.classList.add("running"); // pulse while running
btnRandom?.classList.add("is-running");
const start = Date.now(); const start = Date.now();
const durationMs = 900; const durationMs = 1125; // 25% longer than 900ms
const tickMs = 80; const tickMs = 80;
randomTimer = setInterval(() => { randomTimer = setInterval(() => {
@@ -373,7 +349,7 @@
if (Date.now() - start >= durationMs) { if (Date.now() - start >= durationMs) {
clearInterval(randomTimer); clearInterval(randomTimer);
randomTimer = null; randomTimer = null;
stopRandomPulse(); btnRandom?.classList.remove("is-running");
} }
}, tickMs); }, tickMs);
} }
@@ -382,28 +358,22 @@
BIT WIDTH BIT WIDTH
----------------------------- */ ----------------------------- */
function setBitWidth(n) { function setBitWidth(n) {
const v = clampInt(n, 1, 64); buildBits(clampInt(n, 1, 64));
buildBits(v);
} }
/* ----------------------------- /* -----------------------------
TOOLBOX TOGGLE TOOLBOX VISIBILITY
----------------------------- */ ----------------------------- */
function setToolboxHidden(hidden) { function setToolboxVisible(isVisible) {
if (!toolbox) return; if (!toolboxPanel) return;
toolbox.style.display = hidden ? "none" : ""; toolboxPanel.style.display = isVisible ? "flex" : "none";
toolboxToggle?.setAttribute("aria-expanded", hidden ? "false" : "true"); toolboxToggle?.setAttribute("aria-expanded", String(isVisible));
} }
toolboxToggle?.addEventListener("click", () => {
const hidden = toolbox?.style.display === "none";
setToolboxHidden(!hidden);
});
/* ----------------------------- /* -----------------------------
EVENTS EVENTS
----------------------------- */ ----------------------------- */
modeToggle?.addEventListener("change", () => updateUI()); 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`);
@@ -428,7 +398,6 @@
btnDec?.addEventListener("click", decrement); btnDec?.addEventListener("click", decrement);
btnClear?.addEventListener("click", clearAll); btnClear?.addEventListener("click", clearAll);
btnRandom?.addEventListener("click", runRandomBriefly); btnRandom?.addEventListener("click", runRandomBriefly);
btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1)); btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1));
@@ -436,10 +405,15 @@
bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value))); bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value)));
toolboxToggle?.addEventListener("click", () => {
const isOpen = toolboxToggle.getAttribute("aria-expanded") !== "false";
setToolboxVisible(!isOpen);
});
/* ----------------------------- /* -----------------------------
INIT INIT
----------------------------- */ ----------------------------- */
updateModeHint(); updateModeHint();
buildBits(bitCount); buildBits(bitCount);
setToolboxHidden(false); setToolboxVisible(true);
})(); })();

290
src/styles/binary.css
View File

@@ -8,6 +8,7 @@
--line: rgba(255,255,255,.12); --line: rgba(255,255,255,.12);
} }
/* NUMBERS font */
@font-face{ @font-face{
font-family: "DSEG7ClassicRegular"; font-family: "DSEG7ClassicRegular";
src: src:
@@ -18,8 +19,9 @@
font-display: swap; font-display: swap;
} }
/* TEXT font */
@font-face{ @font-face{
font-family: "Seven-Segment"; font-family: "SevenSegment";
src: src:
url("/fonts/Seven-Segment.woff2") format("woff2"), url("/fonts/Seven-Segment.woff2") format("woff2"),
url("/fonts/Seven-Segment.woff") format("woff"); url("/fonts/Seven-Segment.woff") format("woff");
@@ -30,24 +32,50 @@
body{ body{
margin:0; margin:0;
font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: "Seven-Segment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
} }
.wrap{ .wrap{
max-width: 1200px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 32px 20px 60px; padding: 26px 22px 60px;
} }
/* MAIN GRID */
.topGrid{ .topGrid{
display:grid; display:grid;
grid-template-columns: 1fr 340px; grid-template-columns: 1fr 360px;
gap: 28px; gap: 28px;
align-items:start; align-items:start;
} }
/* Toolbox toggle BELOW navbar */
.toolboxToggle{
position: sticky;
top: calc(var(--nav-height) + 10px);
z-index: 900;
float: right;
display:inline-flex;
align-items:center;
gap: 10px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
padding: 10px 14px;
border-radius: 12px;
font-weight: 900;
cursor: pointer;
letter-spacing: .10em;
text-transform: uppercase;
font-size: 12px;
}
.toolboxToggle:hover{ background: rgba(255,255,255,.09); }
/* Readout */
.readout{ .readout{
text-align:center; text-align:center;
padding: 10px 10px 0; padding: 10px 10px 0;
@@ -55,10 +83,10 @@ body{
.label{ .label{
letter-spacing: .18em; letter-spacing: .18em;
font-weight: 700; font-weight: 900;
color: var(--muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 13px;
margin-top: 10px; margin-top: 10px;
} }
@@ -70,13 +98,13 @@ body{
} }
.denaryValue{ .denaryValue{
font-size: 52px; /* smaller than earlier */ font-size: 52px;
line-height: 1.0; line-height: 1.0;
margin: 6px 0 10px; margin: 6px 0 10px;
} }
.binaryValue{ .binaryValue{
font-size: 40px; /* smaller than earlier */ font-size: 46px;
letter-spacing: .14em; letter-spacing: .14em;
line-height: 1.05; line-height: 1.05;
margin: 6px 0 14px; margin: 6px 0 14px;
@@ -89,37 +117,11 @@ body{
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
} }
/* TOOLBOX BUTTON (must never disappear) */ /* RIGHT COLUMN */
.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{ .panelCol{
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap: 14px; gap: 14px;
position: sticky;
top: 16px;
} }
.card{ .card{
@@ -131,13 +133,30 @@ body{
.cardTitle{ .cardTitle{
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: 12px;
margin: 0 0 10px; margin: 0 0 10px;
} }
.subCard{
margin-top: 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
padding: 12px;
}
.subTitle{
letter-spacing: .18em;
font-weight: 900;
color: var(--muted);
text-transform: uppercase;
font-size: 11px;
margin: 0 0 10px;
}
.hint{ .hint{
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
@@ -154,8 +173,10 @@ body{
.toggleLabel{ .toggleLabel{
color: var(--text); color: var(--text);
font-weight: 700; font-weight: 900;
font-size: 14px; font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
} }
/* Switch */ /* Switch */
@@ -166,11 +187,7 @@ body{
display:inline-block; display:inline-block;
flex: 0 0 auto; flex: 0 0 auto;
} }
.switch input{ .switch input{ opacity:0; width:0; height:0; }
opacity:0;
width:0;
height:0;
}
.slider{ .slider{
position:absolute; position:absolute;
inset:0; inset:0;
@@ -206,38 +223,91 @@ body{
color: #fff; color: #fff;
padding: 12px 14px; padding: 12px 14px;
border-radius: 12px; border-radius: 12px;
font-weight: 800; font-weight: 900;
cursor: pointer; cursor: pointer;
letter-spacing: .10em;
text-transform: uppercase;
font-size: 12px;
} }
.btn:active{ transform: translateY(1px); } .btn:active{ transform: translateY(1px); }
.btnAccent{ .btnAccent{
background: rgba(51,255,122,.18); background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45); border-color: rgba(51,255,122,.45);
} }
.twoBtnRow{ .customRow{
display:grid; display:grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 10px; gap: 10px;
margin-bottom: 10px;
} }
/* Sub card */ .btnRandom{
.subCard{ width: 100%;
margin-top: 12px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 12px;
} }
.subTitle{
font-size: 12px; /* Random pulse ONLY while running */
font-weight: 900; @keyframes pulseGreen {
color: var(--muted); 0% { box-shadow: 0 0 0 rgba(51,255,122,0); }
text-transform: uppercase; 50% { box-shadow: 0 0 18px rgba(51,255,122,.55), 0 0 28px rgba(51,255,122,.25); }
letter-spacing: .18em; 100% { box-shadow: 0 0 0 rgba(51,255,122,0); }
}
.btnRandom.is-running{
animation: pulseGreen 0.9s ease-in-out infinite;
}
/* Tools */
.toolRowCenter{
display:flex;
justify-content:center;
gap: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.toolBtn{
height: 48px;
width: 66px;
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-size: 22px;
}
.toolDec{
background: rgba(255,0,0,.18);
border-color: rgba(255,0,0,.35);
}
.toolInc{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.35);
}
.shiftRow{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
/* Reset full-width + red hover pulse/background */
.btnReset{
width: 100%;
}
@keyframes pulseRedBg {
0% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.14); }
50% { box-shadow: 0 0 18px rgba(255,0,0,.45), 0 0 28px rgba(255,0,0,.20); background: rgba(255,0,0,.28); }
100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.14); }
}
.btnReset:hover{
border-color: rgba(255,0,0,.45);
animation: pulseRedBg 0.9s ease-in-out infinite;
}
/* Bit width control */ /* Bit width control */
.bitWidthRow{ .bitWidthRow{
display:grid; display:grid;
@@ -245,6 +315,7 @@ body{
gap: 10px; gap: 10px;
align-items:center; align-items:center;
} }
.miniBtn{ .miniBtn{
height:44px; height:44px;
width:44px; width:44px;
@@ -256,6 +327,7 @@ body{
font-weight:900; font-weight:900;
font-size:18px; font-size:18px;
} }
.bitInputWrap{ .bitInputWrap{
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);
@@ -265,7 +337,6 @@ body{
align-items:center; align-items:center;
justify-content:space-between; justify-content:space-between;
gap:12px; gap:12px;
min-width: 140px; /* ensures 2 digits fits comfortably */
} }
.bitInputLabel{ .bitInputLabel{
color:var(--muted); color:var(--muted);
@@ -275,7 +346,7 @@ body{
text-transform:uppercase; text-transform:uppercase;
} }
.bitInput{ .bitInput{
width:60px; width: 86px;
text-align:right; text-align:right;
background:transparent; background:transparent;
border:none; border:none;
@@ -290,74 +361,14 @@ body{
margin:0; margin:0;
} }
/* Tools layout */ /* Bits grid */
.toolsTopRow{
display:flex;
justify-content:center;
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;
letter-spacing: .08em;
}
.toolWide{
width: 100%;
margin-top: 10px;
}
.toolArrow{
width: 72px;
font-size: 22px;
}
.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);
}
/* 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);
}
/* 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 .85s ease-in-out infinite;
border-color: rgba(255,0,0,.40);
}
/* Bits */
.bitsWrap{ margin-top: 22px; } .bitsWrap{ margin-top: 22px; }
.bitsGrid{ .bitsGrid{
display:grid; display:grid;
gap: 18px; gap: 18px;
justify-content:center; justify-content:center;
grid-template-columns: repeat(8, minmax(90px, 1fr)); grid-template-columns: repeat(8, minmax(92px, 1fr));
padding-top: 18px; padding-top: 18px;
} }
@@ -370,47 +381,32 @@ body{
text-align:center; text-align:center;
} }
/* Bulb (25% bigger) */ /* Bulb 25% bigger */
.bulb{ .bulb{
width: 42px; font-size: 32px; /* was ~26 */
height: 42px;
display:flex;
align-items:center;
justify-content:center;
font-size: 26px;
line-height: 1; line-height: 1;
opacity: .55; opacity: .45;
background: transparent;
border: none;
}
.bulb::before{
content:"💡";
filter: grayscale(1); filter: grayscale(1);
} }
.bulb.on{ .bulb.on{
opacity: 1; opacity: 1;
filter: grayscale(0);
text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45); text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
} }
.bulb.on::before{
filter: grayscale(0);
}
/* Bit values MUST NOT WRAP */
.bitVal{ .bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace; font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px; font-size: 28px;
color: var(--text); color: var(--text);
opacity: .95; opacity: .95;
line-height: 1; line-height: 1.05;
min-height: 32px; min-height: 32px;
white-space: nowrap; /* IMPORTANT FIX */
/* prevent “run together” when huge values */
white-space: nowrap;
} }
/* Responsive */
@media (max-width: 980px){ @media (max-width: 980px){
.topGrid{ grid-template-columns: 1fr; } .topGrid{ grid-template-columns: 1fr; }
.panelCol{ position: static; } .toolboxToggle{ float:none; }
}
@media (max-width: 520px){
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
} }