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

Full initial 2.0 build
All checks were successful
Pre-release on non-main branches / prerelease (push) Successful in 31s
Details

Browse Source 
Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2026-03-01 17:30:41 +00:00
parent 7ecd065305
commit 09e0499ba3
16 changed files with 920 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/about.astro Normal file
View File

@@ -0,0 +1,37 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="About | Computing:Box">
<article style="max-width: 900px; margin: 0 auto;">
<div class="card" style="margin-bottom: 40px;">
<h1 class="brandName" style="font-size: 32px; color: var(--text); margin-bottom: 16px;">The New Computing:Box Experience</h1>
<p style="color: var(--muted); font-size: 18px; line-height: 1.6;">
The platform has been rebuilt from the ground up to provide a deeper, more professional simulation environment.
We've introduced several key simulators and interface upgrades to support the modern Computing classroom:
</p>
<div class="divider"></div>
<ul style="list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> New User Interface (Responsive)</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Two's Complement Simulator</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Extended Binary Simulator (Custom bit sizes)</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Unified Binary Simulator (Unsigned & Two's Complement)</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Extended Hexadecimal Simulator</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Unified Hexadecimal Simulator (GCSE & A Level)</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Enhanced Gate Simulator (Truth Table Creator)</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Compound Gate Simulator</li>
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Computer Components Simulator</li>
</ul>
</div>
<div class="card">
<h2 class="brandName" style="font-size: 24px; margin-bottom: 12px;">Educational Impact</h2>
<p style="color: var(--muted);">
Computing:Box is designed to help students learn computing concepts step by step, using clear visuals and simple interactions.
By changing values and seeing results straight away, students can build understanding at their own pace.
</p>
</div>
</article>
</BaseLayout>

1
src/pages/binary.astro
View File

@@ -1,5 +1,6 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/number-simulators.css";
---
<BaseLayout title="Binary Simulator | Computing:Box">

30
src/pages/copyright.astro Normal file
View File

@@ -0,0 +1,30 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="Copyright Notice | Computing:Box">
<div class="card" style="max-width: 800px; margin: 0 auto;">
<h1 class="brandName" style="color: var(--accent); margin-bottom: 20px;">Copyright Notice</h1>
<p style="color: var(--text);">
<a href="https://www.computingbox.co.uk" style="color: var(--accent); text-decoration: none;">Computing:Box</a>
© 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall" style="color: var(--accent); text-decoration: none;">Alexander Lyall</a> is licensed under
<strong>Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</strong>.
</p>
<div class="divider"></div>
<h2 class="brandName" style="font-size: 20px;">What Does This Mean For You?</h2>
<p style="color: var(--muted); font-size: 1.2em;">You are free to:</p>
<ul style="color: var(--muted); line-height: 1.6; margin-bottom: 20px;">
<li><strong>Share</strong> — copy and redistribute the material in any medium or format.</li>
<li><strong>Adapt</strong> — remix, transform, and build upon the material.</li>
</ul>
<h2 class="brandName" style="font-size: 20px;">Under the following terms:</h2>
<ul style="color: var(--muted); line-height: 1.6;">
<li><strong>Attribution</strong> — You must give appropriate credit, provide a link to the license, and indicate if changes were made.</li>
<li><strong>NonCommercial</strong> — You may not use the material for commercial purposes.</li>
<li><strong>ShareAlike</strong> — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.</li>
</ul>
</div>
</BaseLayout>

1
src/pages/hex-colours.astro
View File

@@ -1,5 +1,6 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/number-simulators.css";
---
<BaseLayout title="Hex Colours Simulator | Computing:Box">

1
src/pages/hexadecimal.astro
View File

@@ -1,5 +1,6 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/number-simulators.css";
---
<BaseLayout title="Hexadecimal Simulator | Computing:Box">

23
src/pages/index.astro Normal file
View File

@@ -0,0 +1,23 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="Welcome | Computing:Box">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 60vh; padding: 40px 0;">
<div style="flex: 1;">
<p style="color: var(--accent); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px;">Version 2.0 Now Live</p>
<h1 class="brandName" style="font-size: 48px; line-height: 1.1; margin-bottom: 24px;">Understand Computing concepts better.</h1>
<p style="font-size: 18px; color: var(--muted);">
Interactive simulators for Binary, Hexadecimal, Logic Gates, and Computer Components designed for the UK curriculum.
</p>
<div style="display: flex; gap: 16px; margin-top: 32px;">
<a href="/about" class="btn btnAccent" style="text-decoration: none; padding: 14px 28px;">Learn More</a>
<a href="/binary" class="btn" style="text-decoration: none; padding: 14px 28px;">Get Started</a>
</div>
</div>
<div style="flex: 1; text-align: right;">
<img src="/images/computing-box-logo.svg" alt="Computing Box Logo" style="width: 100%; max-width: 450px; filter: drop-shadow(0 0 50px rgba(40, 240, 122, 0.15));" />
</div>
</div>
</BaseLayout>

20
src/pages/legal-code.astro Normal file
View File

@@ -0,0 +1,20 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="Legal Code | Computing:Box">
<div class="card" style="max-width: 900px; margin: 0 auto;">
<h1 class="brandName" style="color: var(--accent); margin-bottom: 20px;">Legal Code</h1>
<div style="background: rgba(255, 193, 7, 0.1); border: 1px solid #ffc107; padding: 20px; border-radius: 12px; margin-bottom: 24px;">
<h3 style="color: #ffc107; margin-top: 0; font-family: var(--ui-font);">About the license and Creative Commons</h3>
<p style="color: #eee; margin-bottom: 0; font-size: 14px;">
Creative Commons Corporation ("Creative Commons") is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship.
</p>
</div>
<p style="color: var(--muted); font-size: 14px; line-height: 1.6;">
By using this licensed material, you accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License.
</p>
</div>
</BaseLayout>

65
src/pages/pc-builder.astro Normal file
View File

@@ -0,0 +1,65 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/pc-builder.css";
---
<BaseLayout title="PC Part Simulator | Computing:Box">
<div id="pcPage" class="pb-container">
<button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true">
<span class="toolboxIcon" aria-hidden="true">🧰</span>
<span class="toolboxText">TOOLBOX</span>
</button>
<div class="pb-top-header">
<div class="pb-title">PC Part Simulator</div>
<div class="pb-subtitle">
Build inside the Case! Snap the Motherboard into the chassis, then populate the slots. Add the side panel when done. <strong>Double-Click</strong> parts to inspect in 3D.
</div>
</div>
<div class="pb-workspace" id="workspace">
<div class="pb-zoom-controls">
<button class="pb-zoom-btn" id="btnZoomIn" title="Zoom In">+</button>
<button class="pb-zoom-btn" id="btnZoomOut" title="Zoom Out">−</button>
<button class="pb-zoom-btn" id="btnZoomReset" title="Reset View" style="font-size: 16px;">⌂</button>
</div>
<div class="pb-viewport" id="viewport">
<svg class="pb-svg-layer pb-wire-internal" id="wireLayerInternal"></svg>
<svg class="pb-svg-layer pb-wire-external" id="wireLayerExternal"></svg>
</div>
</div>
<aside id="toolboxPanel" class="pb-toolbox" aria-label="Toolbox">
<div class="card">
<div class="cardTitle">Inventory</div>
<div class="tb-icon-grid" id="toolboxGrid"></div>
</div>
<div class="card">
<div class="cardTitle">System Diagnostics</div>
<div style="font-family: var(--ui-font); font-size: 12px; color: var(--muted); margin-bottom: 12px;">Live pre-flight boot analysis.</div>
<div class="specs-panel" id="buildSpecsContainer"></div>
</div>
<div class="card">
<div class="cardTitle">Tools</div>
<button class="btn btnReset btnWide" id="btnClearBoard" type="button" style="margin-bottom:0;">Disassemble PC</button>
</div>
</aside>
<div id="inspectModal" class="inspect-modal">
<div class="inspect-close" id="inspectClose">&times;</div>
<div id="inspectName" style="color: white; font-family: var(--ui-font); font-size: 28px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;"></div>
<div class="inspect-stage" id="inspectStage">
<div class="inspect-object" id="inspectObject"></div>
</div>
<div style="color: var(--muted); font-family: var(--ui-font); margin-top: 20px; font-size: 14px;">Move mouse to rotate component. Scroll to zoom.</div>
</div>
</div>
<script src="../scripts/pcBuilder.js"></script>
</BaseLayout>