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

feat(alpha): introduce Computing:Box prototype alpha branding and assets

Browse Source 
- Update README to reflect Computing:Box as the evolution of Bit:Box and CS:Box
- Replace CS:Box logo references with Computing:Box branding
- Add initial Bootstrap Studio design file for prototype layout
- Include legacy CS:Box logo assets for reference and transition
- Establish baseline assets for Prototype Alpha phase

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-14 17:06:57 +00:00
parent 50829688e3
commit 58202ca853
19 changed files with 288 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -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). 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 ![Computing:Box Logo](/assets/img/ComputingBox-Logo.png "Computing:Box Logo")
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")
## Upcoming Features ## Upcoming Features
### Original Bit:Box Features (October 2024) ### Original Bit:Box Features (October 2024)

BIN
assets/bootstrap/CSBox.bsdesign Normal file
View File

Binary file not shown.

BIN
assets/img/CSBox-Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 KiB

1
assets/img/CSBox-Logo.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
assets/img/ComputingBox-Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
assets/img/computingbox-concept-illustration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
assets/screenshot/csbox-a-level-hexadecimal.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
assets/screenshot/csbox-and-gate.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
assets/screenshot/csbox-gcse-hexadecimal.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
assets/screenshot/csbox-hex-colours.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
assets/screenshot/csbox-homepage.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
assets/screenshot/csbox-nand-gate.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
assets/screenshot/csbox-nor-gate.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
assets/screenshot/csbox-not-gate.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
assets/screenshot/csbox-or-gate.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
assets/screenshot/csbox-unsigned-binary.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
assets/screenshot/csbox-xnor-gate.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
assets/screenshot/csbox-xor-gate.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

535
src/pages/binary.astro
View File

@@ -1,293 +1,326 @@
--- ---
let initialBits = 8; const bitLabels = [128, 64, 32, 16, 8, 4, 2, 1];
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Binary | Computing:Box</title> <title>Unsigned Binary | Computing:Box</title>
<style> <style>
:root{ :root{
--bg:#1f2027; --bg: #1f2027;
--text:#e8e8ee; --panel: #22242d;
--muted:#a9acb8; --text: #e8e8ee;
--accent:#33ff7a; --muted: #a9acb8;
--accent-dim:rgba(51,255,122,.2); --accent: #33ff7a;
--line:rgba(255,255,255,.12); --accent-dim: rgba(51,255,122,.15);
} --line: rgba(255,255,255,.12);
}
@font-face{ /* DSEG7ClassicRegular font */
font-family:"DSEG7"; @font-face{
src:url("/fonts/DSEG7Classic-Regular.woff") format("woff"), font-family: "DSEG7ClassicRegular";
url("/fonts/DSEG7Classic-Regular.ttf") format("truetype"); src:
} url("/fonts/DSEG7Classic-Regular.ttf") format("truetype"),
url("/fonts/DSEG7Classic-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body{ body{
margin:0; margin:0;
background:var(--bg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:var(--text); background: var(--bg);
font-family:system-ui,Segoe UI,Roboto,Arial; color: var(--text);
} }
.wrap{ .wrap{
max-width:1200px; max-width: 1200px;
margin:auto; margin: 0 auto;
padding:32px 20px 60px; padding: 32px 20px 60px;
text-align:center; }
}
.label{ .top{
letter-spacing:.18em; display:grid;
color:var(--muted); grid-template-columns: 1fr;
font-weight:700; gap: 22px;
} align-items:start;
}
.num{ .readout{
font-family:"DSEG7",monospace; background: transparent;
color:var(--accent); text-align:center;
text-shadow:0 0 18px var(--accent-dim); padding: 10px 10px 0;
} }
.den{ .label{
font-size:64px; letter-spacing: .18em;
} font-weight: 700;
color: var(--muted);
text-transform: uppercase;
font-size: 16px;
margin-top: 8px;
}
.bin{ /* All numbers use DSEG */
font-size:44px; .num{
letter-spacing:.12em; font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
margin-bottom:12px; font-weight: 400;
} color: var(--accent);
text-shadow: 0 0 18px var(--accent-dim);
}
.controls{ .value{
display:flex; font-size: 64px;
gap:10px; line-height: 1.0;
justify-content:center; margin: 6px 0 16px;
flex-wrap:wrap; }
margin:16px 0;
}
.btn{ .binary{
background:rgba(255,255,255,.08); font-size: 44px;
border:1px solid rgba(255,255,255,.15); letter-spacing: .12em;
color:#fff; }
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-weight:700;
}
.panel{ /* Buttons now UNDER the readout */
margin-top:20px; .controls{
display:flex; margin-top: 16px;
gap:24px; display:flex;
justify-content:center; gap: 12px;
flex-wrap:wrap; justify-content:center;
} flex-wrap:wrap;
}
.card{ .btn{
background:rgba(255,255,255,.04); background: rgba(255,255,255,.06);
border:1px solid var(--line); border: 1px solid rgba(255,255,255,.14);
border-radius:14px; color: #fff;
padding:14px 16px; padding: 12px 14px;
min-width:220px; border-radius: 12px;
text-align:left; font-weight: 700;
} cursor: pointer;
min-width: 160px;
}
.btn:active{ transform: translateY(1px); }
.card h4{ .bits{
margin:0 0 8px; margin-top: 34px;
font-size:13px; padding-top: 26px;
letter-spacing:.14em; border-top: 1px solid var(--line);
color:var(--muted); display:grid;
} grid-template-columns: repeat(8, 1fr);
gap: 18px;
align-items:end;
text-align:center;
}
.bits{ .bit{
margin-top:28px; display:flex;
padding-top:24px; flex-direction:column;
border-top:1px solid var(--line); align-items:center;
display:flex; gap: 10px;
justify-content:center; padding: 8px 4px;
gap:20px; }
flex-wrap:wrap;
}
.bit{ .bitVal{
display:flex; font-size: 34px;
flex-direction:column; color: var(--text);
align-items:center; opacity: .95;
gap:8px; }
}
/* bulb */ /* Bulb */
.bulb{ .bulb{
width:22px; width: 22px;
height:22px; height: 22px;
border-radius:50%; border-radius: 50%;
background:rgba(255,255,255,.08); background: rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
} box-shadow: none;
.bulb.on{ margin-bottom: 6px;
background:#ffd86b; }
box-shadow:0 0 18px rgba(255,216,107,.7); .bulb.on{
} background: #ffd86b;
border-color: rgba(255,216,107,.7);
box-shadow: 0 0 18px rgba(255,216,107,.6);
}
/* SAME SWITCH USED EVERYWHERE */ /* Light switch */
.switch{ .switch{
position:relative; position: relative;
width:56px; width: 56px;
height:32px; height: 34px;
} display:inline-block;
.switch input{opacity:0;width:0;height:0;} }
.slider{ .switch input{
position:absolute; opacity:0;
inset:0; width:0;
background:rgba(255,255,255,.15); height:0;
border-radius:999px; }
transition:.2s; .slider{
} position:absolute;
.slider::before{ inset:0;
content:""; background: rgba(255,255,255,.10);
position:absolute; border: 1px solid rgba(255,255,255,.14);
width:26px; border-radius: 999px;
height:26px; transition: .18s ease;
left:3px; }
top:3px; .slider::before{
background:white; content:"";
border-radius:50%; position:absolute;
transition:.2s; height: 28px;
} width: 28px;
.switch input:checked + .slider{ left: 3px;
background:rgba(51,255,122,.4); top: 2px;
} background: rgba(255,255,255,.92);
.switch input:checked + .slider::before{ border-radius: 50%;
transform:translateX(24px); transition: .18s ease;
background:var(--accent); }
} .switch input:checked + .slider{
</style> background: rgba(51,255,122,.20);
</head> border-color: rgba(51,255,122,.55);
}
.switch input:checked + .slider::before{
transform: translateX(22px);
background: var(--accent);
}
<body> @media (max-width: 900px){
<main class="wrap"> .bits{ grid-template-columns: repeat(4, 1fr); }
.value{ font-size: 54px; }
.binary{ font-size: 36px; }
}
</style>
</head>
<div class="label">DENARY</div> <body>
<div id="denary" class="num den">0</div> <main class="wrap">
<section class="top">
<div class="readout">
<div class="label">Denary</div>
<div id="denaryNumber" class="value num">0</div>
<div class="label">BINARY</div> <div class="label">Binary</div>
<div id="binary" class="num bin">00000000</div> <div id="binaryNumber" class="value binary num">00000000</div>
<div class="controls"> <!-- Buttons moved HERE (underneath) -->
<button class="btn" id="customBinary">Custom Binary</button> <div class="controls">
<button class="btn" id="customDenary">Custom Denary</button> <button class="btn" id="btnCustomBinary" type="button">Custom Binary</button>
<button class="btn" id="shiftL">Left Shift</button> <button class="btn" id="btnCustomDenary" type="button">Custom Denary</button>
<button class="btn" id="shiftR">Right Shift</button> <button class="btn" id="btnShiftLeft" type="button">Left Shift</button>
</div> <button class="btn" id="btnShiftRight" type="button">Right Shift</button>
</div>
</div>
</section>
<div class="panel"> <section class="bits" aria-label="Bit switches">
<div class="card"> {bitLabels.map((v) => (
<h4>MODE</h4> <div class="bit">
Unsigned <div class="bulb" id={`bulb-${v}`} aria-hidden="true"></div>
<label class="switch">
<input type="checkbox" id="mode">
<span class="slider"></span>
</label>
Two’s complement
</div>
<div class="card"> <!-- bit place value is a number too -->
<h4>BIT WIDTH</h4> <div class="bitVal num">{v}</div>
<input id="bitCount" type="number" min="4" max="64" value="8"
style="width:100%;padding:6px;border-radius:8px;border:none;">
</div>
</div>
<section class="bits" id="bits"></section> <label class="switch" aria-label={`Toggle bit ${v}`}>
<input type="checkbox" data-bit={v} />
<span class="slider"></span>
</label>
</div>
))}
</section>
</main>
</main> <script type="module">
const bitLabels = [128, 64, 32, 16, 8, 4, 2, 1];
const bits = new Map(bitLabels.map(v => [v, false]));
<script type="module"> function updateReadout(){
let bits = 8; let denary = 0;
let twos = false; let binary = "";
let state = [];
const bitsEl = document.getElementById("bits"); for (const v of bitLabels){
const on = bits.get(v);
if (on) denary += v;
binary += on ? "1" : "0";
const bulb = document.getElementById(`bulb-${v}`);
if (bulb) bulb.classList.toggle("on", on);
}
function build(){ document.getElementById("denaryNumber").innerText = denary.toString();
state = Array(bits).fill(false); document.getElementById("binaryNumber").innerText = binary;
bitsEl.innerHTML = ""; }
for(let i=bits-1;i>=0;i--){
const val = 2**i;
const div = document.createElement("div");
div.className="bit";
div.innerHTML=`
<div class="bulb" id="b${i}"></div>
<div class="num">${val}</div>
<label class="switch">
<input type="checkbox" data-i="${i}">
<span class="slider"></span>
</label>`;
bitsEl.appendChild(div);
}
document.querySelectorAll('[data-i]').forEach(sw=>{
sw.onchange=()=>{state[sw.dataset.i]=sw.checked;update();}
});
update();
}
function update(){ function setFromBinary(bin){
let n=0; const clean = bin.replace(/\s+/g, "");
state.forEach((on,i)=>{ if (!/^[01]+$/.test(clean)) return false;
if(on) n+=2**i;
document.getElementById(`b${i}`).classList.toggle("on",on);
});
if(twos && state[bits-1]) n-=2**bits; const padded = clean.slice(-8).padStart(8, "0");
[...padded].forEach((ch, i) => {
const v = bitLabels[i];
const on = ch === "1";
bits.set(v, on);
const input = document.querySelector(`input[data-bit="${v}"]`);
if (input) input.checked = on;
});
document.getElementById("denary").textContent=n; updateReadout();
document.getElementById("binary").textContent= return true;
state.slice().reverse().map(b=>b?1:0).join(""); }
}
document.getElementById("mode").onchange=e=>{ function setFromDenary(n){
twos=e.target.checked; n = Number(n);
update(); if (!Number.isInteger(n) || n < 0 || n > 255) return false;
};
document.getElementById("bitCount").onchange=e=>{ for (const v of bitLabels){
const v=Math.max(4,Math.min(64,Number(e.target.value))); const on = n >= v;
bits=v; bits.set(v, on);
build(); if (on) n -= v;
};
document.getElementById("shiftL").onclick=()=>{ const input = document.querySelector(`input[data-bit="${v}"]`);
state.shift();state.push(false);update(); if (input) input.checked = on;
}; }
document.getElementById("shiftR").onclick=()=>{
state.pop();state.unshift(false);update();
};
document.getElementById("customBinary").onclick=()=>{ updateReadout();
const v=prompt(`Enter ${bits}-bit binary`); return true;
if(!v||!/^[01]+$/.test(v))return; }
const p=v.padStart(bits,"0").slice(-bits);
state=p.split("").reverse().map(b=>b==="1");
build();
};
document.getElementById("customDenary").onclick=()=>{ function shiftLeft(){
const max=twos?(2**(bits-1)-1):(2**bits-1); const bin = document.getElementById("binaryNumber").innerText;
const min=twos?-(2**(bits-1)):0; setFromBinary(bin.slice(1) + "0");
const n=Number(prompt(`Enter ${min} to ${max}`)); }
if(isNaN(n)||n<min||n>max)return;
let val=n<0?n+2**bits:n;
state=Array(bits).fill(false);
for(let i=0;i<bits;i++){
if(val>=2**i){state[i]=true;val-=2**i;}
}
build();
};
build(); function shiftRight(){
</script> const bin = document.getElementById("binaryNumber").innerText;
</body> 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();
</script>
</body>
</html> </html>