You've already forked computing-box
Alexander Lyall
bb8e0c1969
All checks were successful
Pre-release on non-main branches / prerelease (push) Successful in 29s
Signed-off-by: Alexander Lyall <alex@adcm.uk>
55 lines
4.0 KiB
Plaintext
55 lines
4.0 KiB
Plaintext
---
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
---
|
|
|
|
<BaseLayout title="About - Computing:Box">
|
|
<article style="max-width: 1100px; margin: 0 auto; width: 100%;">
|
|
|
|
<div style="text-align: center; margin-bottom: 60px;">
|
|
<img src="/images/computing-box-logo.svg" alt="Computing:Box Logo" style="width: 250px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);" />
|
|
<h1 class="brandName" style="font-size: 42px; margin-top: 20px; color: var(--text);">The New Computing:Box Experience</h1>
|
|
</div>
|
|
|
|
<div class="card" style="margin-bottom: 40px;">
|
|
<p style="color: var(--muted); font-size: 18px; line-height: 1.6; text-align: center;">
|
|
Rebuilt from the ground up to provide a deeper, more professional simulation environment for the UK Computing Curriculum.
|
|
</p>
|
|
<div class="divider"></div>
|
|
<ul style="list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
|
|
<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 sizes)</li>
|
|
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Unified Binary Simulator</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</li>
|
|
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Enhanced Gate Simulator (Truth Tables)</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 style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; align-items: center;">
|
|
<div class="card">
|
|
<h2 class="brandName" style="font-size: 24px; color: var(--accent);">From Bit:Box to Computing:Box</h2>
|
|
<p style="color: var(--muted); line-height: 1.6;">Computing:Box began as Bit:Box, a digital version of a physical Binary Light Box created by Mr Davis. The original device used lightbulbs to show how binary numbers are built.</p>
|
|
</div>
|
|
<img src="/images/BitBoxLogo.png" alt="Bit:Box Logo" style="width: 100%; border-radius: 16px; border: 1px solid var(--line);" />
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; align-items: center;">
|
|
<img src="/images/computingbox-concept-illustration.webp" alt="Simulator Illustration" style="width: 100%; border-radius: 16px; border: 1px solid var(--line);" />
|
|
<div class="card">
|
|
<h2 class="brandName" style="font-size: 24px; color: var(--accent);">Learning by Doing</h2>
|
|
<p style="color: var(--muted); line-height: 1.6;">Students can interact with simulations, change values, and see results instantly. This helps them understand how concepts work rather than memorising rules.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;">
|
|
<div class="card">
|
|
<h2 class="brandName" style="font-size: 24px; color: var(--accent);">Educational Impact</h2>
|
|
<p style="color: var(--muted); line-height: 1.6;">Designed for use in lessons, independent study, and revision, helping students build confidence as they explore how computers work.</p>
|
|
</div>
|
|
<img src="/images/Educational_Impact.webp" alt="Classroom Impact" style="width: 100%; border-radius: 16px; border: 1px solid var(--line);" />
|
|
</div>
|
|
</article>
|
|
</BaseLayout> |