diff --git a/README.md b/README.md index fd07fdd..359e7a3 100644 --- a/README.md +++ b/README.md @@ -45,12 +45,10 @@ All commands are run from the root of the project, from a terminal: Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). -# This project has evolved to become Computing:Box Available at [www.computingbox.co.uk](https://www.computingbox.co.uk) and [www.computingbox.co.uk](https://www.computingbox.co.uk) +# Computing:Box +An evolution of Bit:Box & CS:Box to incorporate different elements of the UK Computing Curriculum -# CS:Box -An evolution of Bit:Box to incorporate different elements of the UK Computing Curriculum - -![CS:Box Logo](/assets/img/CSBox-Logo.png "CS:Box Logo") +![Computing:Box Logo](/assets/img/ComputingBox-Logo.png "Computing:Box Logo") ## Upcoming Features ### Original Bit:Box Features (October 2024) diff --git a/assets/bootstrap/CSBox.bsdesign b/assets/bootstrap/CSBox.bsdesign new file mode 100644 index 0000000..3f3d99f Binary files /dev/null and b/assets/bootstrap/CSBox.bsdesign differ diff --git a/assets/img/CSBox-Logo.png b/assets/img/CSBox-Logo.png new file mode 100644 index 0000000..e5cc809 Binary files /dev/null and b/assets/img/CSBox-Logo.png differ diff --git a/assets/img/CSBox-Logo.svg b/assets/img/CSBox-Logo.svg new file mode 100644 index 0000000..b82a37e --- /dev/null +++ b/assets/img/CSBox-Logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/ComputingBox-Logo.png b/assets/img/ComputingBox-Logo.png new file mode 100644 index 0000000..054ef8f Binary files /dev/null and b/assets/img/ComputingBox-Logo.png differ diff --git a/assets/img/computingbox-concept-illustration.png b/assets/img/computingbox-concept-illustration.png new file mode 100644 index 0000000..23d21f6 Binary files /dev/null and b/assets/img/computingbox-concept-illustration.png differ diff --git a/assets/screenshot/csbox-a-level-hexadecimal.jpeg b/assets/screenshot/csbox-a-level-hexadecimal.jpeg new file mode 100644 index 0000000..67c40e4 Binary files /dev/null and b/assets/screenshot/csbox-a-level-hexadecimal.jpeg differ diff --git a/assets/screenshot/csbox-and-gate.jpeg b/assets/screenshot/csbox-and-gate.jpeg new file mode 100644 index 0000000..b7a21fe Binary files /dev/null and b/assets/screenshot/csbox-and-gate.jpeg differ diff --git a/assets/screenshot/csbox-gcse-hexadecimal.jpeg b/assets/screenshot/csbox-gcse-hexadecimal.jpeg new file mode 100644 index 0000000..8c69065 Binary files /dev/null and b/assets/screenshot/csbox-gcse-hexadecimal.jpeg differ diff --git a/assets/screenshot/csbox-hex-colours.jpeg b/assets/screenshot/csbox-hex-colours.jpeg new file mode 100644 index 0000000..1c86733 Binary files /dev/null and b/assets/screenshot/csbox-hex-colours.jpeg differ diff --git a/assets/screenshot/csbox-homepage.jpeg b/assets/screenshot/csbox-homepage.jpeg new file mode 100644 index 0000000..3b208e9 Binary files /dev/null and b/assets/screenshot/csbox-homepage.jpeg differ diff --git a/assets/screenshot/csbox-nand-gate.jpeg b/assets/screenshot/csbox-nand-gate.jpeg new file mode 100644 index 0000000..ada5655 Binary files /dev/null and b/assets/screenshot/csbox-nand-gate.jpeg differ diff --git a/assets/screenshot/csbox-nor-gate.jpeg b/assets/screenshot/csbox-nor-gate.jpeg new file mode 100644 index 0000000..5384441 Binary files /dev/null and b/assets/screenshot/csbox-nor-gate.jpeg differ diff --git a/assets/screenshot/csbox-not-gate.jpeg b/assets/screenshot/csbox-not-gate.jpeg new file mode 100644 index 0000000..df960d9 Binary files /dev/null and b/assets/screenshot/csbox-not-gate.jpeg differ diff --git a/assets/screenshot/csbox-or-gate.jpeg b/assets/screenshot/csbox-or-gate.jpeg new file mode 100644 index 0000000..37435f5 Binary files /dev/null and b/assets/screenshot/csbox-or-gate.jpeg differ diff --git a/assets/screenshot/csbox-unsigned-binary.jpeg b/assets/screenshot/csbox-unsigned-binary.jpeg new file mode 100644 index 0000000..182ff3b Binary files /dev/null and b/assets/screenshot/csbox-unsigned-binary.jpeg differ diff --git a/assets/screenshot/csbox-xnor-gate.jpeg b/assets/screenshot/csbox-xnor-gate.jpeg new file mode 100644 index 0000000..438b44f Binary files /dev/null and b/assets/screenshot/csbox-xnor-gate.jpeg differ diff --git a/assets/screenshot/csbox-xor-gate.jpeg b/assets/screenshot/csbox-xor-gate.jpeg new file mode 100644 index 0000000..92af726 Binary files /dev/null and b/assets/screenshot/csbox-xor-gate.jpeg differ diff --git a/src/pages/binary.astro b/src/pages/binary.astro index a0b02f3..7327c38 100644 --- a/src/pages/binary.astro +++ b/src/pages/binary.astro @@ -1,293 +1,326 @@ --- -let initialBits = 8; +const bitLabels = [128, 64, 32, 16, 8, 4, 2, 1]; --- - - - -Binary | Computing:Box + + + + Unsigned Binary | Computing:Box - - + /* Light switch */ + .switch{ + position: relative; + width: 56px; + height: 34px; + display:inline-block; + } + .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); + } - -
+ @media (max-width: 900px){ + .bits{ grid-template-columns: repeat(4, 1fr); } + .value{ font-size: 54px; } + .binary{ font-size: 36px; } + } + + -
DENARY
-
0
+ +
+
+
+
Denary
+
0
-
BINARY
-
00000000
+
Binary
+
00000000
-
- - - - -
+ +
+ + + + +
+
+
-
-
-

MODE

- Unsigned - - Two’s complement -
+
+ {bitLabels.map((v) => ( +
+ -
-

BIT WIDTH

- -
-
+ +
{v}
-
+ +
+ ))} + +
-
+ - + function shiftRight(){ + const bin = document.getElementById("binaryNumber").innerText; + setFromBinary("0" + bin.slice(0, -1)); + } + + // switches + document.querySelectorAll('input[type="checkbox"][data-bit]').forEach(input => { + input.addEventListener("change", () => { + const v = Number(input.dataset.bit); + bits.set(v, input.checked); + updateReadout(); + }); + }); + + // buttons + document.getElementById("btnShiftLeft").addEventListener("click", shiftLeft); + document.getElementById("btnShiftRight").addEventListener("click", shiftRight); + + document.getElementById("btnCustomBinary").addEventListener("click", () => { + const val = prompt("Enter an 8-bit binary number (e.g. 01011001):"); + if (val === null) return; + if (!setFromBinary(val)) alert("Invalid input. Use only 0 and 1 (up to 8 digits)."); + }); + + document.getElementById("btnCustomDenary").addEventListener("click", () => { + const val = prompt("Enter a denary number (0 to 255):"); + if (val === null) return; + if (!setFromDenary(val)) alert("Invalid input. Enter an integer from 0 to 255."); + }); + + updateReadout(); + +