feat(rebrand): migrate CS:Box content to Computing:Box branding

- Rebrand UI text, navigation, footer, and metadata to Computing:Box
- Add canonical URLs and updated Open Graph metadata for SEO
- Replace legacy CS:Box imagery with new Computing:Box assets
- Update About page copy to reflect expanded curriculum focus
- Enhance A Level hexadecimal simulator with custom binary input
- Regenerate exported assets and font hashes

Signed-off-by: Alexander Davis <alex@adcm.uk>
This commit is contained in:
2025-12-14 15:23:57 +00:00
parent 268a82f17c
commit 758d2228f7
24 changed files with 805 additions and 308 deletions

View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -18,7 +18,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -27,7 +27,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -36,7 +36,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -45,7 +45,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -54,7 +54,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -63,7 +63,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -72,7 +72,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -81,7 +81,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -90,7 +90,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -99,7 +99,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -108,7 +108,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -117,7 +117,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -126,7 +126,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -135,7 +135,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -144,7 +144,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -153,7 +153,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -162,7 +162,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -171,7 +171,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -180,7 +180,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -189,7 +189,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -198,7 +198,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -207,7 +207,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -216,7 +216,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -225,7 +225,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -234,7 +234,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -243,7 +243,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -252,7 +252,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -261,7 +261,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -270,7 +270,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -279,7 +279,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -288,7 +288,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -297,7 +297,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -306,7 +306,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -315,7 +315,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -324,7 +324,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -333,7 +333,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -342,7 +342,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -351,7 +351,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -360,7 +360,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -369,7 +369,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -378,7 +378,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -387,7 +387,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -396,7 +396,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -405,7 +405,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -414,7 +414,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -423,7 +423,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -432,7 +432,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -441,7 +441,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -450,7 +450,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -459,7 +459,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -468,7 +468,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -477,7 +477,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -486,7 +486,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -495,7 +495,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -504,7 +504,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -513,7 +513,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -522,7 +522,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -531,7 +531,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -540,7 +540,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -549,7 +549,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -558,7 +558,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -567,7 +567,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -576,7 +576,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -585,7 +585,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -594,7 +594,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -603,7 +603,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -612,7 +612,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -621,7 +621,7 @@
@font-face {
font-family: 'Inter';
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;

View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-225b7d18262c1041a32b79d200e92bf1.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-225b7d18262c1041a32b79d200e92bf1.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -18,7 +18,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-dea7e20916bef72920c929acfb3a4641.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-dea7e20916bef72920c929acfb3a4641.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -27,7 +27,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-15e68f85ff378c85165faa90038c1c34.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-15e68f85ff378c85165faa90038c1c34.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -36,7 +36,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-5e916bd22ed9429b9b6c1e583e7e3bac.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-5e916bd22ed9429b9b6c1e583e7e3bac.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -45,7 +45,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-fab2dc2a64560c0036fff6d74173d2fe.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-fab2dc2a64560c0036fff6d74173d2fe.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -54,7 +54,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-92fcb6995c062a9e725f088d0a4946e3.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-92fcb6995c062a9e725f088d0a4946e3.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -63,7 +63,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-698c10e372a42d57247ac8e1ba5de182.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-698c10e372a42d57247ac8e1ba5de182.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -72,7 +72,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-68df54b884d8032b226b60b2de0d3d9f.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-68df54b884d8032b226b60b2de0d3d9f.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -81,7 +81,7 @@
@font-face {
font-family: 'Open Sans';
src: url(../../assets/fonts/Open%20Sans-d839b7fe1395f21cd350be1b26d80cfc.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
src: url(../../assets/fonts/Open%20Sans-d839b7fe1395f21cd350be1b26d80cfc.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

View File

@@ -1,63 +1,161 @@
// Ensure the script only runs if the URL path contains "hexadecimal"
if (window.location.pathname.includes('hexadecimal')) {
if (window.location.pathname.includes("hexadecimal")) {
const isGCSE = window.location.pathname.includes("gcse-hexadecimal");
const hexLength = isGCSE ? 2 : 4; // GCSE: 2 hex digits, A Level: 4
const binaryLength = isGCSE ? 8 : 16; // GCSE: 8 bits, A Level: 16
const maxDenary = isGCSE ? 255 : 65535;
const isGCSE = window.location.pathname.includes('gcse-hexadecimal');
const hexLength = isGCSE ? 2 : 4;
const binaryLength = isGCSE ? 8 : 16;
const maxDenary = isGCSE ? 255 : 65535;
// Each slider represents a 4-bit nibble (015) at a given place value
const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
const sliders = {};
const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
const sliders = {};
const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];
// Order matters: left->right nibble columns
const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];
// Attach event listeners for sliders
['slider1', 'slider16', 'slider256', 'slider4096'].forEach((sliderId) => {
const slider = document.getElementById(sliderId);
if (slider) {
sliders[sliderId] = slider;
slider.addEventListener("input", (e) => {
e.stopPropagation(); // Prevent event propagation to Bootstrap
updatePlace(parseInt(sliderId.replace('slider', ''), 10));
});
}
// Attach event listeners for sliders
["slider1", "slider16", "slider256", "slider4096"].forEach((sliderId) => {
const slider = document.getElementById(sliderId);
if (slider) {
sliders[sliderId] = slider;
slider.addEventListener("input", (e) => {
e.stopPropagation(); // Prevent event propagation to Bootstrap
updatePlace(parseInt(sliderId.replace("slider", ""), 10));
});
}
});
function updatePlace(place) {
const slider = sliders[`slider${place}`];
if (!slider) return;
placeValues[place] = parseInt(slider.value, 10) || 0;
updateNumbers();
}
function updateNumbers() {
let denary = 0;
let binary = "";
let hexadecimal = "";
columnValues.forEach((column) => {
const value = placeValues[column] ?? 0; // nibble 0..15
denary += value * column;
binary += convertToBinaryNibble(value);
hexadecimal += convertToHexDigit(value);
});
function updatePlace(place) {
if (sliders[`slider${place}`]) {
placeValues[place] = parseInt(sliders[`slider${place}`].value, 10);
updateNumbers();
}
}
// Ensure fixed lengths
binary = binary.slice(-binaryLength).padStart(binaryLength, "0");
hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, "0");
function updateNumbers() {
let denary = 0;
let binary = '';
let hexadecimal = '';
const binEl = document.getElementById("binaryNumber");
const denEl = document.getElementById("denaryNumber");
const hexEl = document.getElementById("hexadecimalNumber");
columnValues.forEach((column) => {
const value = placeValues[column];
denary += value * column;
binary += convertToBinary(value);
hexadecimal += convertToHex(value);
});
if (binEl) binEl.innerText = binary;
if (denEl) denEl.innerText = denary;
if (hexEl) hexEl.innerText = hexadecimal;
}
binary = binary.slice(-binaryLength).padStart(binaryLength, '0');
hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, '0');
function convertToBinaryNibble(num) {
return num.toString(2).padStart(4, "0");
}
document.getElementById("binaryNumber").innerText = binary;
document.getElementById("denaryNumber").innerText = denary;
document.getElementById("hexadecimalNumber").innerText = hexadecimal;
}
function convertToHexDigit(num) {
return num.toString(16).toUpperCase(); // 0..F
}
function convertToBinary(num) {
return num.toString(2).padStart(4, '0');
}
function setSlidersFromDenary(denary) {
// Clamp & normalise
denary = Number.isFinite(denary) ? denary : 0;
denary = Math.max(0, Math.min(maxDenary, Math.floor(denary)));
function convertToHex(num) {
return num.toString(16).toUpperCase();
}
document.addEventListener('DOMContentLoaded', () => {
updateNumbers();
// Convert denary into nibble values for each column
columnValues.forEach((column) => {
const nibble = Math.floor(denary / column);
placeValues[column] = Math.max(0, Math.min(15, nibble));
denary -= placeValues[column] * column;
});
// Push values to sliders (if present)
columnValues.forEach((column) => {
const slider = sliders[`slider${column}`];
if (slider) slider.value = placeValues[column];
});
updateNumbers();
}
function cleanHexInput(input) {
return String(input)
.trim()
.replace(/^0x/i, "")
.toUpperCase();
}
function cleanBinaryInput(input) {
return String(input).trim().replace(/\s+/g, "");
}
// === PUBLIC BUTTON HANDLERS ===
// Call these from onclick="" on your buttons
window.requestHexadecimal = function requestHexadecimal() {
const raw = prompt(
`Enter a ${hexLength}-digit hexadecimal value (0-9, A-F):`,
""
);
if (raw === null) return;
const hex = cleanHexInput(raw);
const re = new RegExp(`^[0-9A-F]{${hexLength}}$`);
if (!re.test(hex)) {
alert(`Please enter exactly ${hexLength} hex digit(s) using 0-9 and A-F.`);
return;
}
const denary = parseInt(hex, 16);
setSlidersFromDenary(denary);
};
window.requestDenaryForHexadecimal =
function requestDenaryForHexadecimal() {
const raw = prompt(`Enter a denary value (0 to ${maxDenary}):`, "");
if (raw === null) return;
// Allow digits only
const cleaned = String(raw).trim();
if (!/^\d+$/.test(cleaned)) {
alert("Please enter a whole number in denary (digits only).");
return;
}
const denary = parseInt(cleaned, 10);
if (denary < 0 || denary > maxDenary) {
alert(`Please enter a number between 0 and ${maxDenary}.`);
return;
}
setSlidersFromDenary(denary);
};
window.requestBinaryforHexadecimal = function requestBinaryforHexadecimal() {
const raw = prompt(`Enter a ${binaryLength}-bit binary value (0s and 1s):`, "");
if (raw === null) return;
const bin = cleanBinaryInput(raw);
const re = new RegExp(`^[01]{${binaryLength}}$`);
if (!re.test(bin)) {
alert(`Please enter exactly ${binaryLength} bits using only 0 and 1.`);
return;
}
const denary = parseInt(bin, 2);
setSlidersFromDenary(denary);
};
document.addEventListener("DOMContentLoaded", () => {
updateNumbers();
});
}