feat(v2-alpha): refactor binary simulator and introduce shared site layout

- Rewrite binary simulator with unified unsigned and two’s complement logic - Support dynamic bit widths from 4 to 64 with LSB-preserving resizing - Replace legacy unsigned-only scripts with a single maintainable implementation - Extract binary styles into dedicated CSS and add global site styling - Introduce shared header, footer, and base layout components - Migrate Binary page to BaseLayout and modular assets Signed-off-by: Alexander Lyall <alex@adcm.uk>
2025-12-14 19:46:23 +00:00
parent 460126dccc
commit d4765b3788
12 changed files with 1102 additions and 823 deletions
--- a/public/css/binary.css
+++ b/public/css/binary.css
@@ -0,0 +1,293 @@
+:root{
+  --bg: #1f2027;
+  --panel2: rgba(255,255,255,.04);
+  --text: #e8e8ee;
+  --muted: #a9acb8;
+  --accent: #33ff7a;
+  --accent-dim: rgba(51,255,122,.15);
+  --line: rgba(255,255,255,.12);
+}
+
+/* DSEG font (you already have these in public/fonts/) */
+@font-face{
+  font-family: "DSEG7ClassicRegular";
+  src:
+    url("/fonts/DSEG7Classic-Regular.woff") format("woff"),
+    url("/fonts/DSEG7Classic-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+.wrap{
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 32px 20px 60px;
+}
+
+.topGrid{
+  display:grid;
+  grid-template-columns: 1fr 340px;
+  gap: 28px;
+  align-items:start;
+}
+
+.readout{
+  background: transparent;
+  text-align:center;
+  padding: 10px 10px 0;
+}
+
+.label{
+  letter-spacing: .18em;
+  font-weight: 800;
+  color: var(--muted);
+  text-transform: uppercase;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.num{
+  font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-weight: 400;
+  color: var(--accent);
+  text-shadow: 0 0 18px var(--accent-dim);
+}
+
+.denary{
+  font-size: 84px;
+  line-height: 1.0;
+  margin: 6px 0 16px;
+}
+
+.binary{
+  font-size: 62px;
+  letter-spacing: .12em;
+  line-height: 1.0;
+  margin: 6px 0 18px;
+}
+
+.controls{
+  margin-top: 10px;
+  display:flex;
+  gap: 12px;
+  justify-content:center;
+  flex-wrap:wrap;
+}
+
+.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: 160px;
+}
+.btn:active{ transform: translateY(1px); }
+
+.divider{
+  margin-top: 26px;
+  border-top: 1px solid var(--line);
+}
+
+/* Right panels */
+.panelCol{
+  display:flex;
+  flex-direction:column;
+  gap: 14px;
+}
+
+.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: 8px;
+  line-height: 1.35;
+}
+
+.toggleRow{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap: 10px;
+}
+
+.toggleLabel{
+  color: var(--text);
+  font-weight: 800;
+  font-size: 14px;
+}
+
+/* Switch (re-used for mode + bits) */
+.switch{
+  position: relative;
+  width: 56px;
+  height: 34px;
+  display:inline-block;
+  flex: 0 0 auto;
+}
+.switch input{
+  opacity:0;
+  width:0;
+  height:0;
+}
+.slider{
+  position:absolute;
+  inset:0;
+  background: rgba(255,255,255,.10);
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 999px;
+  transition: .18s ease;
+}
+.slider::before{
+  content:"";
+  position:absolute;
+  height: 28px;
+  width: 28px;
+  left: 3px;
+  top: 2px;
+  background: rgba(255,255,255,.92);
+  border-radius: 50%;
+  transition: .18s ease;
+}
+.switch input:checked + .slider{
+  background: rgba(51,255,122,.20);
+  border-color: rgba(51,255,122,.55);
+}
+.switch input:checked + .slider::before{
+  transform: translateX(22px);
+  background: var(--accent);
+}
+
+/* Bit width controls */
+.bitWidthRow{
+  display:grid;
+  grid-template-columns: 44px 1fr 44px;
+  gap: 10px;
+  align-items:center;
+}
+
+.miniBtn{
+  height: 44px;
+  width: 44px;
+  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: 18px;
+}
+
+.bitInputWrap{
+  background: rgba(255,255,255,.06);
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 12px;
+  padding: 10px 12px;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap: 12px;
+}
+
+.bitInputLabel{
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+}
+
+.bitInput{
+  width: 86px;
+  text-align:right;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--accent);
+  font-family: "DSEG7ClassicRegular", ui-monospace, monospace;
+  font-size: 28px;
+}
+.bitInput::-webkit-outer-spin-button,
+.bitInput::-webkit-inner-spin-button{
+  -webkit-appearance:none;
+  margin:0;
+}
+
+/* ✅ Bits grid: wraps every 8 bits, NO horizontal scroll bar */
+.bits{
+  margin-top: 26px;
+  padding-top: 22px;
+  display:grid;
+  grid-template-columns: repeat(8, minmax(90px, 1fr));
+  gap: 18px;
+  align-items:end;
+  text-align:center;
+
+  /* make absolutely sure we don't create a horizontal scrollbar */
+  overflow-x: hidden;
+}
+
+/* Bit tile */
+.bit{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap: 10px;
+  padding: 8px 4px;
+}
+
+.bulb{
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.08);
+  border: 1px solid rgba(255,255,255,.12);
+  box-shadow: none;
+  margin-bottom: 4px;
+}
+.bulb.on{
+  background: #ffd86b;
+  border-color: rgba(255,216,107,.7);
+  box-shadow: 0 0 18px rgba(255,216,107,.6);
+}
+
+.bitVal{
+  font-family: "DSEG7ClassicRegular", ui-monospace, monospace;
+  font-size: 30px;
+  color: var(--text);
+  opacity: .95;
+  line-height: 1;
+  min-height: 34px;
+}
+
+/* Responsive */
+@media (max-width: 980px){
+  .topGrid{ grid-template-columns: 1fr; }
+  .denary{ font-size: 72px; }
+  .binary{ font-size: 52px; }
+  .bits{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
+}
+
+@media (max-width: 520px){
+  .denary{ font-size: 62px; }
+  .binary{ font-size: 44px; }
+  .btn{ min-width: 140px; }
+}
--- a/public/js/binary.js
+++ b/public/js/binary.js
@@ -0,0 +1,321 @@
+// Binary simulator: unsigned + two's complement, 4–64 bits.
+// Key fixes:
+// - CSS moved to /public so dynamically-created switches & bulbs are styled.
+// - Bits grid wraps into rows of 8 (CSS).
+// - Binary readout wraps every 8 bits (JS -> adds \n).
+
+const bitsGrid   = document.getElementById("bitsGrid");
+const denaryEl   = document.getElementById("denaryNumber");
+const binaryEl   = document.getElementById("binaryNumber");
+
+const modeToggle = document.getElementById("modeToggle");
+const modeHint   = document.getElementById("modeHint");
+
+const bitsInput  = document.getElementById("bitsInput");
+const btnUp      = document.getElementById("btnBitsUp");
+const btnDown    = document.getElementById("btnBitsDown");
+
+const btnShiftL  = document.getElementById("btnShiftLeft");
+const btnShiftR  = document.getElementById("btnShiftRight");
+const btnCustBin = document.getElementById("btnCustomBinary");
+const btnCustDen = document.getElementById("btnCustomDenary");
+
+let bitCount = clampInt(Number(bitsInput.value || 8), 4, 64);
+bitsInput.value = String(bitCount);
+
+let isTwos = false;
+
+// bits[0] = MSB, bits[bitCount-1] = LSB
+let bits = new Array(bitCount).fill(false);
+
+/* -----------------------------
+   Helpers
+----------------------------- */
+function clampInt(n, min, max){
+  n = Number(n);
+  if (!Number.isFinite(n)) return min;
+  n = Math.floor(n);
+  return Math.max(min, Math.min(max, n));
+}
+
+function maxUnsigned(nBits){
+  // nBits up to 64 -> use BigInt for correctness
+  return (1n << BigInt(nBits)) - 1n;
+}
+
+function rangeTwos(nBits){
+  const min = -(1n << BigInt(nBits - 1));
+  const max = (1n << BigInt(nBits - 1)) - 1n;
+  return { min, max };
+}
+
+function bitsToBigIntUnsigned(){
+  let v = 0n;
+  for (let i = 0; i < bitCount; i++){
+    v = (v << 1n) + (bits[i] ? 1n : 0n);
+  }
+  return v;
+}
+
+function bitsToBigIntTwos(){
+  // Interpret current bit pattern as signed two's complement.
+  const unsigned = bitsToBigIntUnsigned();
+  const signBit = bits[0] ? 1n : 0n;
+
+  if (signBit === 0n) return unsigned; // positive
+
+  // negative: unsigned - 2^n
+  const mod = 1n << BigInt(bitCount);
+  return unsigned - mod;
+}
+
+function bigIntToBitsUnsigned(v){
+  // v assumed 0..2^n-1
+  const out = new Array(bitCount).fill(false);
+  let x = BigInt(v);
+  for (let i = bitCount - 1; i >= 0; i--){
+    out[i] = (x & 1n) === 1n;
+    x >>= 1n;
+  }
+  return out;
+}
+
+function bigIntToBitsTwos(v){
+  // v assumed in signed range; convert to 0..2^n-1 representation
+  const mod = 1n << BigInt(bitCount);
+  let x = BigInt(v);
+  if (x < 0n) x = mod + x;
+  return bigIntToBitsUnsigned(x);
+}
+
+function formatBinaryForReadout(){
+  // Wrap every 8 bits into a new line; keep spaces between groups.
+  const raw = bits.map(b => (b ? "1" : "0")).join("");
+  const groupsOf8 = raw.match(/.{1,8}/g) || [raw];
+  return groupsOf8.join("\n");
+}
+
+/* -----------------------------
+   UI build
+----------------------------- */
+function buildBitsGrid(){
+  bitsGrid.innerHTML = "";
+
+  for (let i = 0; i < bitCount; i++){
+    const weightUnsigned = 1n << BigInt(bitCount - 1 - i);
+    const isMSB = i === 0;
+
+    const bitEl = document.createElement("div");
+    bitEl.className = "bit";
+
+    const bulb = document.createElement("div");
+    bulb.className = "bulb";
+    bulb.id = `bulb-${i}`;
+    bulb.setAttribute("aria-hidden", "true");
+
+    const val = document.createElement("div");
+    val.className = "bitVal";
+    // if in two's complement, show MSB as negative label visually
+    if (isTwos && isMSB) val.classList.add("msbNeg");
+    val.textContent = weightUnsigned.toString(); // show magnitude only ( "-" is via CSS )
+
+    const label = document.createElement("label");
+    label.className = "switch";
+    label.setAttribute("aria-label", `Toggle bit ${i + 1}`);
+
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.dataset.index = String(i);
+
+    const slider = document.createElement("span");
+    slider.className = "slider";
+
+    label.appendChild(input);
+    label.appendChild(slider);
+
+    bitEl.appendChild(bulb);
+    bitEl.appendChild(val);
+    bitEl.appendChild(label);
+
+    bitsGrid.appendChild(bitEl);
+  }
+
+  // Hook listeners after build
+  bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach(input => {
+    input.addEventListener("change", () => {
+      const idx = Number(input.dataset.index);
+      bits[idx] = input.checked;
+      updateAll();
+    });
+  });
+
+  syncInputsToBits();
+  updateAll();
+}
+
+function syncInputsToBits(){
+  bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach(input => {
+    const idx = Number(input.dataset.index);
+    input.checked = !!bits[idx];
+  });
+}
+
+function syncBulbsToBits(){
+  for (let i = 0; i < bitCount; i++){
+    const bulb = document.getElementById(`bulb-${i}`);
+    if (bulb) bulb.classList.toggle("on", !!bits[i]);
+  }
+}
+
+function updateModeHint(){
+  modeHint.textContent = isTwos
+    ? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."
+    : "Tip: In unsigned binary, all bits represent positive values.";
+}
+
+function updateAll(){
+  const denary = isTwos ? bitsToBigIntTwos() : bitsToBigIntUnsigned();
+  denaryEl.textContent = denary.toString();
+  binaryEl.textContent = formatBinaryForReadout();
+  syncBulbsToBits();
+}
+
+/* -----------------------------
+   Bit-count changes (preserve LSBs)
+----------------------------- */
+function setBitCount(newCount){
+  newCount = clampInt(newCount, 4, 64);
+  if (newCount === bitCount) return;
+
+  // preserve LSB-aligned pattern:
+  // take from the right end of old bits, pad on the left with zeros.
+  const old = bits.slice();
+  const newBits = new Array(newCount).fill(false);
+
+  const take = Math.min(bitCount, newCount);
+  for (let i = 0; i < take; i++){
+    // copy from LSB side
+    newBits[newCount - 1 - i] = old[bitCount - 1 - i];
+  }
+
+  bitCount = newCount;
+  bits = newBits;
+  bitsInput.value = String(bitCount);
+
+  buildBitsGrid(); // rebuild with correct styling + rows
+}
+
+/* -----------------------------
+   Custom input
+----------------------------- */
+function requestBinary(){
+  const v = prompt(`Enter a ${bitCount}-bit binary number (0/1):`);
+  if (v === null) return;
+
+  const clean = v.replace(/\s+/g, "");
+  if (!/^[01]+$/.test(clean)){
+    alert("Invalid input. Use only 0 and 1.");
+    return;
+  }
+
+  const padded = clean.slice(-bitCount).padStart(bitCount, "0");
+  bits = [...padded].map(ch => ch === "1");
+  syncInputsToBits();
+  updateAll();
+}
+
+function requestDenary(){
+  const promptText = isTwos
+    ? `Enter a denary number (${rangeTwos(bitCount).min} to ${rangeTwos(bitCount).max}):`
+    : `Enter a denary number (0 to ${maxUnsigned(bitCount)}):`;
+
+  const raw = prompt(promptText);
+  if (raw === null) return;
+
+  // allow leading +/- and digits
+  if (!/^[+-]?\d+$/.test(raw.trim())){
+    alert("Invalid input. Enter a whole number.");
+    return;
+  }
+
+  const n = BigInt(raw.trim());
+
+  if (isTwos){
+    const { min, max } = rangeTwos(bitCount);
+    if (n < min || n > max){
+      alert(`Out of range. Enter between ${min} and ${max}.`);
+      return;
+    }
+    bits = bigIntToBitsTwos(n);
+  } else {
+    const maxU = maxUnsigned(bitCount);
+    if (n < 0n || n > maxU){
+      alert(`Out of range. Enter between 0 and ${maxU}.`);
+      return;
+    }
+    bits = bigIntToBitsUnsigned(n);
+  }
+
+  syncInputsToBits();
+  updateAll();
+}
+
+/* -----------------------------
+   Shifts
+----------------------------- */
+function shiftLeft(){
+  bits.shift();
+  bits.push(false);
+  syncInputsToBits();
+  updateAll();
+}
+
+function shiftRight(){
+  if (isTwos){
+    // arithmetic shift right (preserve sign bit)
+    const sign = bits[0];
+    bits.pop();
+    bits.unshift(sign);
+  } else {
+    // logical shift right
+    bits.pop();
+    bits.unshift(false);
+  }
+  syncInputsToBits();
+  updateAll();
+}
+
+/* -----------------------------
+   Mode toggle
+----------------------------- */
+function setModeTwos(on){
+  isTwos = !!on;
+  updateModeHint();
+
+  // rebuild so MSB label shows "-" via CSS class
+  // (and keeps the same bit pattern)
+  buildBitsGrid();
+}
+
+/* -----------------------------
+   Wire up UI controls
+----------------------------- */
+modeToggle.addEventListener("change", () => setModeTwos(modeToggle.checked));
+
+btnUp.addEventListener("click", () => setBitCount(bitCount + 1));
+btnDown.addEventListener("click", () => setBitCount(bitCount - 1));
+
+bitsInput.addEventListener("change", () => setBitCount(Number(bitsInput.value)));
+
+btnShiftL.addEventListener("click", shiftLeft);
+btnShiftR.addEventListener("click", shiftRight);
+
+btnCustBin.addEventListener("click", requestBinary);
+btnCustDen.addEventListener("click", requestDenary);
+
+/* -----------------------------
+   Init
+----------------------------- */
+updateModeHint();
+buildBitsGrid();
+updateAll();
--- a/public/js/binary/unsigned-binary.js
+++ b/public/js/binary/unsigned-binary.js
@@ -1,115 +0,0 @@
-// Browser-only script. Safe because it's loaded via <script> (not server-imported).
-
-const BIT_COUNT = 8; // unsigned page = 8 bits
-const bitValues = [128, 64, 32, 16, 8, 4, 2, 1];
-
-const elDenary = document.getElementById("denaryNumber");
-const elBinary = document.getElementById("binaryNumber");
-const elSwitches = document.getElementById("bitSwitches");
-
-const btnCustomDenary = document.getElementById("btnCustomDenary");
-const btnCustomBinary = document.getElementById("btnCustomBinary");
-const btnReset = document.getElementById("btnReset");
-
-let bits = new Array(BIT_COUNT).fill(false);
-
-function renderSwitches() {
-  elSwitches.innerHTML = "";
-
-  bitValues.forEach((value, index) => {
-    const id = `bit-${value}`;
-
-    const wrapper = document.createElement("div");
-    wrapper.className = "switch-col";
-
-    const labelTop = document.createElement("div");
-    labelTop.className = "bit-label";
-    labelTop.textContent = value;
-
-    const label = document.createElement("label");
-    label.className = "rocker";
-    label.setAttribute("for", id);
-
-    const input = document.createElement("input");
-    input.type = "checkbox";
-    input.id = id;
-    input.checked = bits[index];
-
-    input.addEventListener("change", () => {
-      bits[index] = input.checked;
-      updateNumbers();
-    });
-
-    const span = document.createElement("span");
-    span.className = "rocker-body";
-    span.setAttribute("aria-hidden", "true");
-
-    label.appendChild(input);
-    label.appendChild(span);
-
-    wrapper.appendChild(labelTop);
-    wrapper.appendChild(label);
-
-    elSwitches.appendChild(wrapper);
-  });
-}
-
-function updateNumbers() {
-  const binary = bits.map(b => (b ? "1" : "0")).join("");
-  const denary = bits.reduce((acc, b, i) => acc + (b ? bitValues[i] : 0), 0);
-
-  elBinary.textContent = binary;
-  elDenary.textContent = denary.toString();
-}
-
-function resetAll() {
-  bits = new Array(BIT_COUNT).fill(false);
-  renderSwitches();
-  updateNumbers();
-}
-
-function requestCustomDenary() {
-  let input = prompt(`Enter a denary number (0 to 255):`);
-  if (input === null) return;
-
-  const n = Number.parseInt(input, 10);
-  if (Number.isNaN(n) || n < 0 || n > 255) {
-    alert("Invalid input. Enter a number from 0 to 255.");
-    return;
-  }
-
-  let remaining = n;
-  bits = bitValues.map(v => {
-    if (remaining >= v) {
-      remaining -= v;
-      return true;
-    }
-    return false;
-  });
-
-  renderSwitches();
-  updateNumbers();
-}
-
-function requestCustomBinary() {
-  let input = prompt(`Enter an ${BIT_COUNT}-bit binary number (e.g. 01010101):`);
-  if (input === null) return;
-
-  input = input.trim();
-  const re = new RegExp(`^[01]{${BIT_COUNT}}$`);
-  if (!re.test(input)) {
-    alert(`Invalid input. Enter exactly ${BIT_COUNT} digits using only 0 or 1.`);
-    return;
-  }
-
-  bits = input.split("").map(c => c === "1");
-  renderSwitches();
-  updateNumbers();
-}
-
-btnCustomDenary?.addEventListener("click", requestCustomDenary);
-btnCustomBinary?.addEventListener("click", requestCustomBinary);
-btnReset?.addEventListener("click", resetAll);
-
-renderSwitches();
-updateNumbers();
--- a/public/js/tools/unsigned-binary.js
+++ b/public/js/tools/unsigned-binary.js
@@ -1,72 +0,0 @@
-// public/js/tools/unsigned-binary.js
-// Lightweight: no frameworks. Works on weak devices.
-const BIT_COUNT = 8;
-const MAX_DENARY = 255;
-let bits = new Array(BIT_COUNT).fill(false);
-function bitsToBinaryString(){
- return bits.map(b => (b ? "1" : "0")).join("");
-}
-function bitsToDenary(){
- // MSB on the left: 128..1
- const weights = [128,64,32,16,8,4,2,1];
- return bits.reduce((acc, b, i) => acc + (b ? weights[i] : 0), 0);
-}
-function render(){
- const grid = document.getElementById("bitGrid");
- grid.innerHTML = "";
- const weights = [128,64,32,16,8,4,2,1];
- bits.forEach((on, i) => {
- const btn = document.createElement("button");
- btn.type = "button";
- btn.className = "btn";
- btn.style.width = "100%";
- btn.style.justifyContent = "space-between";
- btn.setAttribute("aria-pressed", on ? "true" : "false");
- btn.innerHTML = `<span>${weights[i]}</span><b>${on ? "1" : "0"}</b>`;
- btn.addEventListener("click", () => {
- bits[i] = !bits[i];
- update();
- });
- grid.appendChild(btn);
- });
-}
-function update(){
- document.getElementById("binaryNumber").innerText = bitsToBinaryString();
- document.getElementById("denaryNumber").innerText = bitsToDenary();
- render();
-}
-function requestBinary(){
- let v;
- do{
- v = prompt("Enter an 8-bit binary value (8 digits, only 0 or 1):", bitsToBinaryString());
- if(v === null) return;
- v = v.trim();
- }while(!/^[01]{8}$/.test(v));
- bits = v.split("").map(ch => ch === "1");
- update();
-}
-function requestDenary(){
- let v;
- do{
- v = prompt("Enter a denary value (0 to 255):", String(bitsToDenary()));
- if(v === null) return;
- v = Number(v);
- }while(!Number.isInteger(v) || v < 0 || v > MAX_DENARY);
- // set bits from MSB to LSB
- const weights = [128,64,32,16,8,4,2,1];
- bits = weights.map(w => {
- if(v >= w){ v -= w; return true; }
- return false;
- });
- update();
-}
-function reset(){
- bits = new Array(BIT_COUNT).fill(false);
- update();
-}
-document.addEventListener("DOMContentLoaded", () => {
- document.getElementById("btnCustomBinary")?.addEventListener("click", requestBinary);
- document.getElementById("btnCustomDenary")?.addEventListener("click", requestDenary);
- document.getElementById("btnReset")?.addEventListener("click", reset);
- update();
-});
--- a/public/scripts/binary.js
+++ b/public/scripts/binary.js
@@ -0,0 +1,301 @@
+/* Binary simulator for Computing:Box
+   - Wrap bits every 8 (CSS handles layout)
+   - Bit width 4..64
+   - Unsigned + Two’s complement toggle (WORKING)
+   - Bulbs + toggle switches for each bit
+*/
+
+const bitsGrid = document.getElementById("bitsGrid");
+const denaryEl = document.getElementById("denaryNumber");
+const binaryEl = document.getElementById("binaryNumber");
+
+const modeToggle = document.getElementById("modeToggle");
+const modeHint = document.getElementById("modeHint");
+
+const bitsInput = document.getElementById("bitsInput");
+const btnBitsUp = document.getElementById("btnBitsUp");
+const btnBitsDown = document.getElementById("btnBitsDown");
+
+const btnShiftLeft = document.getElementById("btnShiftLeft");
+const btnShiftRight = document.getElementById("btnShiftRight");
+const btnCustomBinary = document.getElementById("btnCustomBinary");
+const btnCustomDenary = document.getElementById("btnCustomDenary");
+
+let bitCount = clampInt(Number(bitsInput?.value ?? 8), 4, 64);
+let isTwos = false;
+
+// bits[0] is MSB, bits[bitCount-1] is LSB
+let bits = new Array(bitCount).fill(false);
+
+function clampInt(n, min, max) {
+  n = Number(n);
+  if (!Number.isInteger(n)) n = min;
+  return Math.max(min, Math.min(max, n));
+}
+
+function pow2(exp) {
+  // safe up to 2^63 in JS integer precision? (JS uses float) but our usage is display/control, ok.
+  return 2 ** exp;
+}
+
+/* -----------------------------
+   Build UI (bulbs + switches)
+----------------------------- */
+function buildBits(count) {
+  bitCount = clampInt(count, 4, 64);
+  bits = resizeBits(bits, bitCount);
+
+  bitsGrid.innerHTML = "";
+
+  for (let i = 0; i < bitCount; i++) {
+    const exp = bitCount - 1 - i;  // MSB has highest exponent
+    const value = pow2(exp);
+
+    const bit = document.createElement("div");
+    bit.className = "bit";
+    bit.innerHTML = `
+      <div class="bulb" id="bulb-${i}" aria-hidden="true"></div>
+      <div class="bitVal">${value}</div>
+      <label class="switch" aria-label="Toggle bit ${value}">
+        <input type="checkbox" data-index="${i}">
+        <span class="slider"></span>
+      </label>
+    `;
+
+    bitsGrid.appendChild(bit);
+  }
+
+  hookSwitches();
+  syncUI();
+}
+
+function resizeBits(oldBits, newCount) {
+  // keep LSB end stable when changing bit width:
+  // align old bits to the right (LSB)
+  const out = new Array(newCount).fill(false);
+  const copy = Math.min(oldBits.length, newCount);
+
+  for (let k = 0; k < copy; k++) {
+    // copy from end (LSB)
+    out[newCount - 1 - k] = oldBits[oldBits.length - 1 - k];
+  }
+  return out;
+}
+
+function hookSwitches() {
+  bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
+    input.addEventListener("change", () => {
+      const i = Number(input.dataset.index);
+      bits[i] = input.checked;
+      updateReadout();
+      updateBulb(i);
+    });
+  });
+}
+
+/* -----------------------------
+   Mode toggle (Unsigned <-> Two’s)
+----------------------------- */
+function setModeTwos(on) {
+  isTwos = !!on;
+
+  modeHint.textContent = isTwos
+    ? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."
+    : "Tip: In unsigned binary, all bits represent positive values.";
+
+  // Just re-calc denary using current bit pattern
+  updateReadout();
+}
+
+modeToggle?.addEventListener("change", () => setModeTwos(modeToggle.checked));
+
+/* -----------------------------
+   Calculations
+----------------------------- */
+function getUnsignedValue() {
+  let n = 0;
+  for (let i = 0; i < bitCount; i++) {
+    if (!bits[i]) continue;
+    const exp = bitCount - 1 - i;
+    n += pow2(exp);
+  }
+  return n;
+}
+
+function getTwosValue() {
+  // MSB has negative weight
+  let n = 0;
+  for (let i = 0; i < bitCount; i++) {
+    if (!bits[i]) continue;
+    const exp = bitCount - 1 - i;
+    if (i === 0) n -= pow2(exp);   // MSB
+    else n += pow2(exp);
+  }
+  return n;
+}
+
+function getDenary() {
+  return isTwos ? getTwosValue() : getUnsignedValue();
+}
+
+function getBinaryString() {
+  return bits.map(b => (b ? "1" : "0")).join("");
+}
+
+/* -----------------------------
+   UI updates
+----------------------------- */
+function updateBulb(i) {
+  const bulb = document.getElementById(`bulb-${i}`);
+  if (bulb) bulb.classList.toggle("on", bits[i]);
+}
+
+function updateReadout() {
+  denaryEl.textContent = String(getDenary());
+  binaryEl.textContent = getBinaryString();
+}
+
+function syncUI() {
+  bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
+    const i = Number(input.dataset.index);
+    input.checked = !!bits[i];
+    updateBulb(i);
+  });
+  updateReadout();
+}
+
+/* -----------------------------
+   Set from Binary / Denary
+----------------------------- */
+function setFromBinary(bin) {
+  const clean = String(bin).replace(/\s+/g, "");
+  if (!/^[01]+$/.test(clean)) return false;
+
+  const padded = clean.slice(-bitCount).padStart(bitCount, "0");
+  bits = [...padded].map(ch => ch === "1");
+  syncUI();
+  return true;
+}
+
+function setFromDenary(n) {
+  if (!Number.isInteger(n)) return false;
+
+  if (!isTwos) {
+    const min = 0;
+    const max = pow2(bitCount) - 1;
+    if (n < min || n > max) return false;
+
+    // unsigned fill from MSB->LSB
+    let remaining = n;
+    bits = bits.map((_, i) => {
+      const exp = bitCount - 1 - i;
+      const value = pow2(exp);
+      if (remaining >= value) {
+        remaining -= value;
+        return true;
+      }
+      return false;
+    });
+
+    syncUI();
+    return true;
+  }
+
+  // Two's complement bounds
+  const min = -pow2(bitCount - 1);
+  const max = pow2(bitCount - 1) - 1;
+  if (n < min || n > max) return false;
+
+  // Convert to raw unsigned representation:
+  // if negative, represent as 2^bitCount + n
+  let raw = n;
+  if (raw < 0) raw = pow2(bitCount) + raw;
+
+  let remaining = raw;
+  bits = bits.map((_, i) => {
+    const exp = bitCount - 1 - i;
+    const value = pow2(exp);
+    if (remaining >= value) {
+      remaining -= value;
+      return true;
+    }
+    return false;
+  });
+
+  syncUI();
+  return true;
+}
+
+/* -----------------------------
+   Shifts
+----------------------------- */
+function shiftLeft() {
+  // drop MSB, append 0 at LSB
+  bits.shift();
+  bits.push(false);
+  syncUI();
+}
+
+function shiftRight() {
+  // unsigned: logical shift right (prepend 0)
+  // twos: arithmetic shift right (prepend old MSB)
+  const msb = bits[0];
+  bits.pop();
+  bits.unshift(isTwos ? msb : false);
+  syncUI();
+}
+
+/* -----------------------------
+   Bit width controls
+----------------------------- */
+function applyBitCount(next) {
+  const v = clampInt(next, 4, 64);
+  bitsInput.value = String(v);
+  buildBits(v);
+}
+
+btnBitsUp?.addEventListener("click", () => applyBitCount(bitCount + 1));
+btnBitsDown?.addEventListener("click", () => applyBitCount(bitCount - 1));
+
+bitsInput?.addEventListener("change", () => {
+  applyBitCount(Number(bitsInput.value));
+});
+
+/* -----------------------------
+   Buttons
+----------------------------- */
+btnShiftLeft?.addEventListener("click", shiftLeft);
+btnShiftRight?.addEventListener("click", shiftRight);
+
+btnCustomBinary?.addEventListener("click", () => {
+  const v = prompt(`Enter a ${bitCount}-bit binary number:`);
+  if (v === null) return;
+  if (!setFromBinary(v)) alert("Invalid input. Use only 0 and 1.");
+});
+
+btnCustomDenary?.addEventListener("click", () => {
+  const min = isTwos ? -pow2(bitCount - 1) : 0;
+  const max = isTwos ? (pow2(bitCount - 1) - 1) : (pow2(bitCount) - 1);
+
+  const v = prompt(`Enter a denary number (${min} to ${max}):`);
+  if (v === null) return;
+
+  const n = Number(v);
+  if (!Number.isInteger(n) || !setFromDenary(n)) {
+    alert(`Invalid input. Enter an integer from ${min} to ${max}.`);
+  }
+});
+
+/* -----------------------------
+   INIT
+----------------------------- */
+function init() {
+  // default mode: unsigned
+  setModeTwos(false);
+  modeToggle.checked = false;
+
+  // build initial bits
+  applyBitCount(bitCount);
+}
+
+init();
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -0,0 +1,75 @@
+:root{
+  --bg: #1f2027;
+  --panel: rgba(255,255,255,.04);
+  --text: #e8e8ee;
+  --muted: #a9acb8;
+  --line: rgba(255,255,255,.12);
+}
+
+*{ box-sizing:border-box; }
+
+body{
+  margin:0;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.site-header{
+  border-bottom: 1px solid var(--line);
+  background: rgba(0,0,0,.12);
+  backdrop-filter: blur(6px);
+}
+
+.site-header__inner{
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 14px 20px;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:16px;
+}
+
+.brand{
+  text-decoration:none;
+  color: var(--text);
+  font-weight: 900;
+  letter-spacing: .02em;
+}
+
+.nav{
+  display:flex;
+  gap: 14px;
+  flex-wrap:wrap;
+}
+
+.nav a{
+  color: var(--muted);
+  text-decoration:none;
+  font-weight: 700;
+  font-size: 14px;
+}
+.nav a:hover{ color: var(--text); }
+
+.site-main{
+  min-height: calc(100vh - 120px);
+}
+
+.site-footer{
+  border-top: 1px solid var(--line);
+  margin-top: 28px;
+  background: rgba(0,0,0,.10);
+}
+
+.site-footer__inner{
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 18px 20px;
+  display:flex;
+  justify-content:space-between;
+  gap:12px;
+  flex-wrap:wrap;
+}
+
+.muted{ color: var(--muted); font-size: 13px; }