You've already forked computing-box
Compare commits
2 Commits
v26.03.01-
...
v26.03.01-
| Author | SHA1 | Date | |
|---|---|---|---|
1ec16aecb3
|
|||
|
bb8e0c1969
|
15
README.md
15
README.md
@@ -28,18 +28,19 @@ An evolution of Bit:Box & CS:Box to incorporate different elements of the UK Com
|
|||||||
- [X] XNOR Gate Simulator
|
- [X] XNOR Gate Simulator
|
||||||
|
|
||||||
### Wave 3 CS:Box Features (Spring 2026)
|
### Wave 3 CS:Box Features (Spring 2026)
|
||||||
- [ ] New User Interface (Responsive)
|
- [X] New User Interface (Responsive)
|
||||||
- [X] Two's Compliment Simulator
|
- [X] Two's Compliment Simulator
|
||||||
- [X] Extended Binary Simulator (Custom bit sizes)
|
- [X] Extended Binary Simulator (Custom bit sizes)
|
||||||
- [X] Unified Binary Simulator (Unsigned & Two's Completment combined)
|
- [X] Unified Binary Simulator (Unsigned & Two's Completment combined)
|
||||||
- [ ] Extended Hexadecimal Simulator
|
- [X] Extended Hexadecimal Simulator
|
||||||
- [ ] Unified Hexadecimal Simulator (For GCSE & A Level Specification)
|
- [X] Unified Hexadecimal Simulator (For GCSE & A Level Specification)
|
||||||
- [ ] Enhanced Gate Simulator (Truth Table Creator)
|
- [X] Enhanced Gate Simulator (Truth Table Creator)
|
||||||
- [ ] Compound Gate Simulator
|
- [X] Compound Gate Simulator
|
||||||
- [ ] Computer Components Simulator
|
- [X] Computer Components Simulator - Beta Available
|
||||||
|
|
||||||
## Version 1.0 Release Date: 1<sup>st</sup> September 2025
|
## Version 1.0 Release Date: 1<sup>st</sup> September 2025
|
||||||
## Version 2.0 Release Date (Goal): 1<sup>st</sup> May 2026
|
## Version 2.0 Release Date (Beta): 1<sup>st</sup> March 2026
|
||||||
|
## Version 2.0 Release Date (Full Release): 1<sup>st</sup> May 2026
|
||||||
|
|
||||||
Shield: [![CC BY-NC-SA 4.0][cc-by-nc-sa-shield]][cc-by-nc-sa]
|
Shield: [![CC BY-NC-SA 4.0][cc-by-nc-sa-shield]][cc-by-nc-sa]
|
||||||
|
|
||||||
|
|||||||
5
dist/binary/index.html
vendored
5
dist/binary/index.html
vendored
@@ -13,8 +13,7 @@
|
|||||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||||
})();
|
})();
|
||||||
</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/about.CswAWODG.css">
|
</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/about.DM-NXsTj.css">
|
||||||
<link rel="stylesheet" href="/_astro/binary.9peKc0z2.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap"> <div class="binaryPage" id="binaryPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Bit switches"> <div class="bitsGrid" id="bitsGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="toggleRow"> <div class="toggleLabel" id="lblUnsigned">Unsigned</div> <label class="switch" aria-label="Toggle mode"> <input id="modeToggle" type="checkbox"> <span class="slider"></span> </label> <div class="toggleLabel" id="lblTwos">Two's complement</div> </div> <div class="hint" id="modeHint">
|
<link rel="stylesheet" href="/_astro/binary.9peKc0z2.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap"> <div class="binaryPage" id="binaryPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Bit switches"> <div class="bitsGrid" id="bitsGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="toggleRow"> <div class="toggleLabel" id="lblUnsigned">Unsigned</div> <label class="switch" aria-label="Toggle mode"> <input id="modeToggle" type="checkbox"> <span class="slider"></span> </label> <div class="toggleLabel" id="lblTwos">Two's complement</div> </div> <div class="hint" id="modeHint">
|
||||||
Tip: In unsigned binary, all bits represent positive values.
|
Tip: In unsigned binary, all bits represent positive values.
|
||||||
</div> <div class="subCard"> <div class="subTitle">Bit width</div> <div class="bitWidthRow"> <button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button> <div class="bitInputWrap"> <div class="bitInputLabel">Bits</div> <input id="bitsInput" class="bitInput" type="number" inputmode="numeric" min="1" max="64" step="1" value="8" aria-label="Number of bits"> </div> <button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button> </div> </div> </div> <div class="card"> <div class="cardTitle">Custom Number</div> <div class="controlsRow"> <button class="btn btnAccent btnHalf" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent btnHalf" id="btnCustomDenary" type="button">Custom Denary</button> </div> <button class="btn btnWide" id="btnRandom" type="button">Random</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolRowCentered"> <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <div class="toolRow2"> <button class="btn btnHalf" id="btnShiftLeft" type="button">Left Shift</button> <button class="btn btnHalf" id="btnShiftRight" type="button">Right Shift</button> </div> <button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button> </div> </aside> </section> </div> <script type="module" src="/_astro/binary.astro_astro_type_script_index_0_lang.C_c_A3x5.js"></script> </main> <footer class="siteFooter"> <div class="footerInner"> <div>Computer Science Concept Simulators</div> <div>© 2026 Computing:Box • Created with ♥ by Alexander Lyall</div> <div style="margin-top: 5px;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> •
|
</div> <div class="subCard"> <div class="subTitle">Bit width</div> <div class="bitWidthRow"> <button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button> <div class="bitInputWrap"> <div class="bitInputLabel">Bits</div> <input id="bitsInput" class="bitInput" type="number" inputmode="numeric" min="1" max="64" step="1" value="8" aria-label="Number of bits"> </div> <button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button> </div> </div> </div> <div class="card"> <div class="cardTitle">Custom Number</div> <div class="controlsRow"> <button class="btn btnAccent btnHalf" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent btnHalf" id="btnCustomDenary" type="button">Custom Denary</button> </div> <button class="btn btnWide" id="btnRandom" type="button">Random</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolRowCentered"> <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <div class="toolRow2"> <button class="btn btnHalf" id="btnShiftLeft" type="button">Left Shift</button> <button class="btn btnHalf" id="btnShiftRight" type="button">Right Shift</button> </div> <button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button> </div> </aside> </section> </div> <script type="module" src="/_astro/binary.astro_astro_type_script_index_0_lang.C_c_A3x5.js"></script> </main> <footer class="siteFooter"> <div class="footerInner"> <div style="margin-top: 5px; display: flex; justify-content: center;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a> </div> <div>Computer Science Concept Simulators</div> <div>© 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> </body></html>
|
||||||
<a href="/legal-code" style="color: var(--muted); text-decoration: underline;">Legal Code</a> </div> </div> </footer> </body></html>
|
|
||||||
5
dist/hexadecimal/index.html
vendored
5
dist/hexadecimal/index.html
vendored
@@ -13,8 +13,7 @@
|
|||||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||||
})();
|
})();
|
||||||
</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/about.CswAWODG.css">
|
</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/about.DM-NXsTj.css">
|
||||||
<link rel="stylesheet" href="/_astro/binary.9peKc0z2.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap"> <div class="binaryPage" id="hexPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Hexadecimal</div> <div id="hexNumber" class="num hexValue">00</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Hexadecimal sliders"> <div class="hexGrid" id="hexGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="hint" style="margin-top: 0; margin-bottom: 14px;">
|
<link rel="stylesheet" href="/_astro/binary.9peKc0z2.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap"> <div class="binaryPage" id="hexPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Hexadecimal</div> <div id="hexNumber" class="num hexValue">00</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Hexadecimal sliders"> <div class="hexGrid" id="hexGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="hint" style="margin-top: 0; margin-bottom: 14px;">
|
||||||
Hexadecimal represents numbers using base 16 (0-9, A-F).
|
Hexadecimal represents numbers using base 16 (0-9, A-F).
|
||||||
</div> <div class="subCard"> <div class="subTitle">Digit width</div> <div class="bitWidthRow"> <button class="miniBtn" id="btnDigitsDown" type="button" aria-label="Decrease digits">−</button> <div class="bitInputWrap"> <div class="bitInputLabel">Digits</div> <input id="digitsInput" class="bitInput" type="number" inputmode="numeric" min="1" max="16" step="1" value="2" aria-label="Number of hex digits"> </div> <button class="miniBtn" id="btnDigitsUp" type="button" aria-label="Increase digits">+</button> </div> </div> </div> <div class="card"> <div class="cardTitle">Custom Number</div> <div class="controlsRow"> <button class="btn btnAccent btnHalf" id="btnCustomHex" type="button">Custom Hex</button> <button class="btn btnAccent btnHalf" id="btnCustomDenary" type="button">Custom Denary</button> </div> <div class="controlsRow"> <button class="btn btnAccent btnWide" id="btnCustomBinary" type="button">Custom Binary</button> </div> <button class="btn btnWide" id="btnRandom" type="button">Random</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolRowCentered"> <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button> </div> </aside> </section> </div> <script type="module" src="/_astro/hexadecimal.astro_astro_type_script_index_0_lang.C4Wx7oaX.js"></script> </main> <footer class="siteFooter"> <div class="footerInner"> <div>Computer Science Concept Simulators</div> <div>© 2026 Computing:Box • Created with ♥ by Alexander Lyall</div> <div style="margin-top: 5px;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> •
|
</div> <div class="subCard"> <div class="subTitle">Digit width</div> <div class="bitWidthRow"> <button class="miniBtn" id="btnDigitsDown" type="button" aria-label="Decrease digits">−</button> <div class="bitInputWrap"> <div class="bitInputLabel">Digits</div> <input id="digitsInput" class="bitInput" type="number" inputmode="numeric" min="1" max="16" step="1" value="2" aria-label="Number of hex digits"> </div> <button class="miniBtn" id="btnDigitsUp" type="button" aria-label="Increase digits">+</button> </div> </div> </div> <div class="card"> <div class="cardTitle">Custom Number</div> <div class="controlsRow"> <button class="btn btnAccent btnHalf" id="btnCustomHex" type="button">Custom Hex</button> <button class="btn btnAccent btnHalf" id="btnCustomDenary" type="button">Custom Denary</button> </div> <div class="controlsRow"> <button class="btn btnAccent btnWide" id="btnCustomBinary" type="button">Custom Binary</button> </div> <button class="btn btnWide" id="btnRandom" type="button">Random</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolRowCentered"> <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button> </div> </aside> </section> </div> <script type="module" src="/_astro/hexadecimal.astro_astro_type_script_index_0_lang.C4Wx7oaX.js"></script> </main> <footer class="siteFooter"> <div class="footerInner"> <div style="margin-top: 5px; display: flex; justify-content: center;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a> </div> <div>Computer Science Concept Simulators</div> <div>© 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> </body></html>
|
||||||
<a href="/legal-code" style="color: var(--muted); text-decoration: underline;">Legal Code</a> </div> </div> </footer> </body></html>
|
|
||||||
5
dist/index.html
vendored
5
dist/index.html
vendored
@@ -13,7 +13,6 @@
|
|||||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||||
})();
|
})();
|
||||||
</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/about.CswAWODG.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap"> <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);">
|
</script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_astro/about.DM-NXsTj.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap"> <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.
|
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> </main> <footer class="siteFooter"> <div class="footerInner"> <div>Computer Science Concept Simulators</div> <div>© 2026 Computing:Box • Created with ♥ by Alexander Lyall</div> <div style="margin-top: 5px;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> •
|
</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> </main> <footer class="siteFooter"> <div class="footerInner"> <div style="margin-top: 5px; display: flex; justify-content: center;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a> </div> <div>Computer Science Concept Simulators</div> <div>© 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> </body></html>
|
||||||
<a href="/legal-code" style="color: var(--muted); text-decoration: underline;">Legal Code</a> </div> </div> </footer> </body></html>
|
|
||||||
BIN
public/images/BitBoxLogo.png
Normal file
BIN
public/images/BitBoxLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
public/images/Educational_Impact.webp
Normal file
BIN
public/images/Educational_Impact.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
BIN
public/images/computingbox-concept-illustration.webp
Normal file
BIN
public/images/computingbox-concept-illustration.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
@@ -54,13 +54,13 @@ const { title = "Computing:Box" } = Astro.props;
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="siteFooter">
|
<footer class="siteFooter">
|
||||||
<div class="footerInner">
|
<div class="footerInner">
|
||||||
|
<div style="margin-top: 5px; display: flex; justify-content: center;">
|
||||||
|
<a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a>
|
||||||
|
<a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a>
|
||||||
|
</div>
|
||||||
<div>Computer Science Concept Simulators</div>
|
<div>Computer Science Concept Simulators</div>
|
||||||
<div>© {new Date().getFullYear()} Computing:Box • Created with ♥ by Alexander Lyall</div>
|
<div>© {new Date().getFullYear()} Computing:Box • Created with ♥ by Mr A Lyall</div>
|
||||||
<div style="margin-top: 5px;">
|
|
||||||
<a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> •
|
|
||||||
<a href="/legal-code" style="color: var(--muted); text-decoration: underline;">Legal Code</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -2,36 +2,54 @@
|
|||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="About | Computing:Box">
|
<BaseLayout title="About - Computing:Box">
|
||||||
<article style="max-width: 900px; margin: 0 auto;">
|
<article style="max-width: 1100px; margin: 0 auto; width: 100%;">
|
||||||
<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>
|
<div style="text-align: center; margin-bottom: 60px;">
|
||||||
<p style="color: var(--muted); font-size: 18px; line-height: 1.6;">
|
<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);" />
|
||||||
The platform has been rebuilt from the ground up to provide a deeper, more professional simulation environment.
|
<h1 class="brandName" style="font-size: 42px; margin-top: 20px; color: var(--text);">The New Computing:Box Experience</h1>
|
||||||
We've introduced several key simulators and interface upgrades to support the modern Computing classroom:
|
</div>
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
<ul style="list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
|
<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> 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> 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> Extended Binary Simulator (Custom 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> 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> 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> Unified Hexadecimal Simulator</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> 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> Compound Gate Simulator</li>
|
||||||
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Computer Components Simulator</li>
|
<li style="color: var(--text);"><span style="color: var(--accent);">✔</span> Computer Components Simulator</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; align-items: center;">
|
||||||
<h2 class="brandName" style="font-size: 24px; margin-bottom: 12px;">Educational Impact</h2>
|
<div class="card">
|
||||||
<p style="color: var(--muted);">
|
<h2 class="brandName" style="font-size: 24px; color: var(--accent);">From Bit:Box to Computing:Box</h2>
|
||||||
Computing:Box is designed to help students learn computing concepts step by step, using clear visuals and simple interactions.
|
<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>
|
||||||
By changing values and seeing results straight away, students can build understanding at their own pace.
|
</div>
|
||||||
</p>
|
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
@@ -5,11 +5,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
|||||||
<BaseLayout title="Copyright Notice | Computing:Box">
|
<BaseLayout title="Copyright Notice | Computing:Box">
|
||||||
<div class="card" style="max-width: 800px; margin: 0 auto;">
|
<div class="card" style="max-width: 800px; margin: 0 auto;">
|
||||||
<h1 class="brandName" style="color: var(--accent); margin-bottom: 20px;">Copyright Notice</h1>
|
<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://www.mrlyall.uk/" style="color: var(--accent); text-decoration: none;">Mr A Lyall</a> is licensed under <strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" style="color: var(--accent); text-decoration: none;">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</a></strong><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||||
<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>
|
<div class="divider"></div>
|
||||||
|
|
||||||
@@ -22,9 +18,11 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
|||||||
|
|
||||||
<h2 class="brandName" style="font-size: 20px;">Under the following terms:</h2>
|
<h2 class="brandName" style="font-size: 20px;">Under the following terms:</h2>
|
||||||
<ul style="color: var(--muted); line-height: 1.6;">
|
<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 class="cc-by"><strong>Attribution </strong>— You must give <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en#ref-appropriate-credit" style="color: var(--accent); margin-bottom: 20px;">appropriate credit</a>, provide a link to the license, and <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en#ref-indicate-changes" style="color: var(--accent); margin-bottom: 20px;">indicate if changes were made</a>. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.</li>
|
||||||
<li><strong>NonCommercial</strong> — You may not use the material for commercial purposes.</li>
|
<li class="cc-nc"><strong>NonCommercial</strong> — You may not use the material for <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en#ref-commercial-purposes" style="color: var(--accent); margin-bottom: 20px;">commercial purposes</a>.</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>
|
<li class="cc-sa"><strong>ShareAlike</strong> — If you remix, transform, or build upon the material, you must distribute your contributions under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en#ref-same-license" style="color: var(--accent); margin-bottom: 20px;">same license</a> as the original.</li>
|
||||||
|
|
||||||
|
<li><strong>No additional restrictions</strong> — You may not apply legal terms or <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en#ref-technological-measures" style="color: var(--accent); margin-bottom: 20px;">technological measures</a> that legally restrict others from doing anything the license permits.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
@@ -26,9 +26,7 @@ import "../styles/pc-builder.css";
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pb-viewport" id="viewport">
|
<div class="pb-viewport" id="viewport">
|
||||||
<svg class="pb-svg-layer pb-wire-internal" id="wireLayerInternal"></svg>
|
<svg class="pb-svg-layer" id="wireLayer"></svg>
|
||||||
|
|
||||||
<svg class="pb-svg-layer pb-wire-external" id="wireLayerExternal"></svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -23,10 +23,10 @@
|
|||||||
--text: #e8e8ee;
|
--text: #e8e8ee;
|
||||||
--muted: #a9acb8;
|
--muted: #a9acb8;
|
||||||
--line: rgba(255,255,255,.10);
|
--line: rgba(255,255,255,.10);
|
||||||
|
--accent: #28f07a;
|
||||||
--ui-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
--ui-font: "Inter", system-ui, -apple-system, sans-serif;
|
||||||
--num-font: "DSEG7Classic", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
--bit-font: "SevenSegment", monospace;
|
||||||
--bit-font: "SevenSegment", monospace;
|
--num-font: "DSEG7Classic"
|
||||||
}
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
@@ -34,8 +34,8 @@ html, body { height: 100%; }
|
|||||||
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ui-font); display: flex; flex-direction: column; }
|
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ui-font); display: flex; flex-direction: column; }
|
||||||
|
|
||||||
/* --- BASE LAYOUT --- */
|
/* --- BASE LAYOUT --- */
|
||||||
.siteNav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(0,0,0,.10); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
|
.siteNav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(0,0,0,.10); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); margin-bottom: 25px; }
|
||||||
.navInner { height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
|
.navInner { height: 90px; max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
|
||||||
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
|
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
|
||||||
.brandLogo { width: 2.5em; height: 2.5em; image-rendering: pixelated; }
|
.brandLogo { width: 2.5em; height: 2.5em; image-rendering: pixelated; }
|
||||||
.brandName { letter-spacing: .12em; font-weight: 900; font-size: 18px; }
|
.brandName { letter-spacing: .12em; font-weight: 900; font-size: 18px; }
|
||||||
@@ -47,9 +47,39 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
|
|||||||
.siteFooter { border-top: 1px solid var(--line); background: rgba(0,0,0,.08); }
|
.siteFooter { border-top: 1px solid var(--line); background: rgba(0,0,0,.08); }
|
||||||
.footerInner { max-width: 1400px; margin: 0 auto; padding: 18px 20px; color: var(--muted); font-size: 12px; letter-spacing: .08em; display: flex; flex-direction: column; gap: 6px; }
|
.footerInner { max-width: 1400px; margin: 0 auto; padding: 18px 20px; color: var(--muted); font-size: 12px; letter-spacing: .08em; display: flex; flex-direction: column; gap: 6px; }
|
||||||
|
|
||||||
/* --- SHARED UI COMPONENTS (Used by ALL Simulators) --- */
|
/* --- APP LAYOUT --- */
|
||||||
|
.binaryPage {
|
||||||
|
--toolbox-w: 360px;
|
||||||
|
--toolbox-gap: 22px;
|
||||||
|
--toolbox-toggle-top: calc(var(--nav-h) + 16px);
|
||||||
|
--toolbox-top: calc(var(--toolbox-toggle-top) + 60px);
|
||||||
|
position: relative; padding-top: 16px; flex: 1; display: flex; flex-direction: column;
|
||||||
|
}
|
||||||
|
.binaryPage:not(.toolboxCollapsed) { padding-right: calc(var(--toolbox-w) + var(--toolbox-gap)); }
|
||||||
|
.binaryPage.toolboxCollapsed { padding-right: 0; }
|
||||||
|
.topGrid { display: flex; align-items: stretch; gap: 28px; flex: 1; }
|
||||||
|
.leftCol { flex: 1 1 auto; min-width: 0; container-type: inline-size; display: flex; flex-direction: column; }
|
||||||
|
|
||||||
|
/* --- READOUT FORMATTING --- */
|
||||||
|
.readoutContainer { display: flex; align-items: center; justify-content: center; gap: 64px; width: 100%; }
|
||||||
|
.readout { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 4px; }
|
||||||
|
.readoutBlock { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||||
|
.label { font-family: var(--bit-font); letter-spacing: .14em; text-transform: uppercase; font-size: 18px; opacity: .75; margin: 0; }
|
||||||
|
.num { font-family: var(--num-font); color: #28f07a; text-shadow: 0 0 18px rgba(40,240,122,.35); letter-spacing: 2px; }
|
||||||
|
|
||||||
|
.denaryValue, .hexValue, .binaryValue { display: flex; gap: 16px; justify-content: center; white-space: pre-wrap; text-align: center; margin: 0; line-height: 1; }
|
||||||
|
.denaryValue { font-size: 56px; }
|
||||||
|
.hexValue { font-size: 48px; }
|
||||||
|
.binaryValue { font-size: 40px; }
|
||||||
.divider { height: 1px; background: rgba(255,255,255,.08); margin: 16px 0 16px; }
|
.divider { height: 1px; background: rgba(255,255,255,.08); margin: 16px 0 16px; }
|
||||||
|
|
||||||
|
/* --- GRIDS & BITS --- */
|
||||||
|
.bitsWrap { width: 100%; }
|
||||||
|
.bitsGrid { --cols: 8; display: grid; grid-template-columns: repeat(var(--cols), minmax(92px, 1fr)); gap: 26px 22px; align-items: start; justify-items: center; }
|
||||||
|
.bitsGrid.bitsFew { justify-content: center; }
|
||||||
|
.bit { width: 100%; max-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 8px; container-type: inline-size; }
|
||||||
|
.bitVal { font-family: var(--bit-font); font-size: min(32px, calc(140cqw / var(--len, 1))); letter-spacing: 2px; color: rgba(232,232,238,.85); white-space: nowrap; line-height: 1; }
|
||||||
|
|
||||||
.bulb { width: 44px; height: 44px; color: rgba(255,255,255,.15); margin-bottom: 8px; flex-shrink: 0; transition: 0.2s ease; background: transparent; display: flex; align-items: center; justify-content: center; }
|
.bulb { width: 44px; height: 44px; color: rgba(255,255,255,.15); margin-bottom: 8px; flex-shrink: 0; transition: 0.2s ease; background: transparent; display: flex; align-items: center; justify-content: center; }
|
||||||
.bulb svg { width: 100%; height: 100%; display: block; }
|
.bulb svg { width: 100%; height: 100%; display: block; }
|
||||||
.bulb.on { color: #ffd86b !important; filter: drop-shadow(0 0 14px rgba(255, 216, 107, 1)) !important; }
|
.bulb.on { color: #ffd86b !important; filter: drop-shadow(0 0 14px rgba(255, 216, 107, 1)) !important; }
|
||||||
@@ -62,19 +92,137 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
|
|||||||
.switch input:checked + .slider { background: rgba(40,240,122,.25); border-color: rgba(40,240,122,.30); }
|
.switch input:checked + .slider { background: rgba(40,240,122,.25); border-color: rgba(40,240,122,.30); }
|
||||||
.switch input:checked + .slider::before { transform: translateX(28px); }
|
.switch input:checked + .slider::before { transform: translateX(28px); }
|
||||||
|
|
||||||
|
/* --- HEXADECIMAL --- */
|
||||||
|
.hexGrid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(160px, 1fr)); gap: 32px 20px; align-items: start; justify-items: center; width: 100%; }
|
||||||
|
.hexGrid.bitsFew { justify-content: center; }
|
||||||
|
.hexCol { display: flex; flex-direction: column; align-items: center; width: 100%; }
|
||||||
|
|
||||||
|
/* --- HEX COLOURS SPECIFIC --- */
|
||||||
|
.colorGroupWrap { display: flex; flex-wrap: nowrap; gap: 16px; justify-content: center; width: 100%; }
|
||||||
|
.colorGroup { display: flex; gap: 12px; padding: 12px; background: rgba(255,255,255,.02); border-radius: 20px; border: 1px solid rgba(255,255,255,.05); flex: 0 1 auto; min-width: 0; }
|
||||||
|
.colorPreviewSide { display: flex; gap: 24px; align-items: center; justify-content: center; }
|
||||||
|
.colorBoxWrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||||
|
.colorBox { width: 60px; height: 60px; border-radius: 12px; border: 2px solid rgba(255,255,255,.15); box-shadow: 0 4px 16px rgba(0,0,0,.4); background-color: #000000; transition: background-color 0.2s ease; }
|
||||||
|
.colorBoxLabel { font-family: var(--ui-font); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
|
||||||
|
|
||||||
|
.text-red { color: #ff5555 !important; text-shadow: 0 0 18px rgba(255,85,85,.35) !important; }
|
||||||
|
.text-green { color: #28f07a !important; text-shadow: 0 0 18px rgba(40,240,122,.35) !important; }
|
||||||
|
.text-blue { color: #55aaff !important; text-shadow: 0 0 18px rgba(85,170,255,.35) !important; }
|
||||||
|
|
||||||
|
/* HEX CARD */
|
||||||
|
.hexCard { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 190px; flex: 0 1 auto; min-width: 0; box-shadow: 0 4px 24px rgba(0,0,0,.2); backdrop-filter: blur(10px); }
|
||||||
|
.hexCardButtons { display: flex; gap: 10px; }
|
||||||
|
.hexCardBtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); font-family: var(--bit-font); font-size: 16px; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: rgba(232,232,238,.92); transition: all 0.2s ease; }
|
||||||
|
.hexCardBtn.inc { background: rgba(40,240,122,.15); border-color: rgba(40,240,122,.25); }
|
||||||
|
.hexCardBtn.inc:hover { background: rgba(40,240,122,.25); border-color: rgba(40,240,122,.4); }
|
||||||
|
.hexCardBtn.dec { background: rgba(255,80,80,.18); border-color: rgba(255,80,80,.25); }
|
||||||
|
.hexCardBtn.dec:hover { background: rgba(255,80,80,.28); border-color: rgba(255,80,80,.4); }
|
||||||
|
.hexDigitDisplay { font-family: var(--num-font); font-size: 48px; color: #28f07a; text-shadow: 0 0 18px rgba(40,240,122,.35); line-height: 1; }
|
||||||
|
.hexNibbleRow { display: flex; gap: 10px; justify-content: center; width: 100%; }
|
||||||
|
.hexNibbleBit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||||
|
.hexNibbleBulb { width: 32px !important; height: 32px !important; margin-bottom: 2px !important; }
|
||||||
|
.hexNibbleLabel { font-family: var(--bit-font); font-size: 24px; color: rgba(232,232,238,.6); }
|
||||||
|
.hexColWeight { font-family: var(--bit-font); font-size: 40px; color: rgba(232,232,238,.6); margin-top: 14px; }
|
||||||
|
|
||||||
|
|
||||||
|
/* --- TOOLBOX --- */
|
||||||
|
.toolboxToggle { position: fixed; top: var(--toolbox-toggle-top); right: 22px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15); backdrop-filter: blur(8px); color: rgba(232,232,238,.95); font-family: var(--bit-font); font-weight: 800; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
|
||||||
|
.toolboxIcon { font-size: 20px; filter: drop-shadow(0 0 8px rgba(255,105,180,.35)); }
|
||||||
|
.toolboxToggle:hover { border-color: rgba(255,255,255,.22); }
|
||||||
|
.panelCol { position: fixed; top: var(--toolbox-top); right: 22px; width: var(--toolbox-w); z-index: 80; display: flex; flex-direction: column; gap: 16px; transform: translateX(0); opacity: 1; transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease; }
|
||||||
|
.binaryPage.toolboxCollapsed .panelCol { transform: translateX(calc(var(--toolbox-w) + 32px)); opacity: 0; pointer-events: none; }
|
||||||
.card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 16px; backdrop-filter: blur(10px); }
|
.card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 16px; backdrop-filter: blur(10px); }
|
||||||
.cardTitle { font-family: var(--bit-font); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 18px; color: rgba(232,232,238,.9); margin-bottom: 12px; }
|
.cardTitle { font-family: var(--bit-font); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 18px; color: rgba(232,232,238,.9); margin-bottom: 12px; }
|
||||||
.hint { font-family: var(--bit-font); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(232,232,238,.55); margin-top: 10px; line-height: 1.35; }
|
.hint { font-family: var(--bit-font); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(232,232,238,.55); margin-top: 10px; line-height: 1.35; }
|
||||||
|
.toggleRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||||
|
.toggleLabel { font-family: var(--bit-font); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--muted); transition: color 0.2s, text-shadow 0.2s; }
|
||||||
|
.toggleLabel.activeMode { color: #28f07a; text-shadow: 0 0 12px rgba(40,240,122,.45); }
|
||||||
|
.subCard { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.12); }
|
||||||
|
.subTitle { font-family: var(--bit-font); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 16px; margin-bottom: 10px; opacity: .85; }
|
||||||
|
.bitWidthRow { display: flex; align-items: center; gap: 10px; }
|
||||||
|
.miniBtn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(232,232,238,.9); font-family: var(--bit-font); font-weight: 900; font-size: 22px; cursor: pointer; }
|
||||||
|
.miniBtn:hover { border-color: rgba(255,255,255,.22); }
|
||||||
|
.bitInputWrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding: 10px 12px; }
|
||||||
|
.bitInputLabel { font-family: var(--bit-font); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
|
||||||
|
.bitInput { width: 70px; text-align: right; font-family: var(--num-font); font-size: 28px; letter-spacing: 2px; color: #28f07a; background: transparent; border: none; outline: none; }
|
||||||
.btn { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(232,232,238,.92); border-radius: 12px; padding: 10px 12px; font-family: var(--bit-font); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; cursor: pointer; }
|
.btn { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(232,232,238,.92); border-radius: 12px; padding: 10px 12px; font-family: var(--bit-font); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; cursor: pointer; }
|
||||||
.btn:hover { border-color: rgba(255,255,255,.22); }
|
.btn:hover { border-color: rgba(255,255,255,.22); }
|
||||||
.btnAccent { background: rgba(40,240,122,.12); border-color: rgba(40,240,122,.22); }
|
.btnAccent { background: rgba(40,240,122,.12); border-color: rgba(40,240,122,.22); }
|
||||||
.btnAccent:hover { border-color: rgba(40,240,122,.35); }
|
.btnAccent:hover { border-color: rgba(40,240,122,.35); }
|
||||||
.btnHalf { width: calc(50% - 6px); }
|
.btnHalf { width: calc(50% - 6px); }
|
||||||
.btnWide { width: 100%; }
|
.btnWide { width: 100%; }
|
||||||
|
.controlsRow { display: flex; gap: 12px; margin-bottom: 12px; }
|
||||||
|
.toolRowCentered { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
|
||||||
|
.toolBtn { width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(232,232,238,.92); font-family: var(--bit-font); font-size: 16px; font-weight: 900; cursor: pointer; }
|
||||||
|
.toolDec { background: rgba(255,80,80,.20); border-color: rgba(255,80,80,.25); }
|
||||||
|
.toolInc { background: rgba(40,240,122,.18); border-color: rgba(40,240,122,.25); }
|
||||||
.btnReset { color: rgba(232,232,238,.95); }
|
.btnReset { color: rgba(232,232,238,.95); }
|
||||||
.btnReset:hover { background: rgba(255,80,80,.18); border-color: rgba(255,80,80,.35); }
|
.btnReset:hover { background: rgba(255,80,80,.18); border-color: rgba(255,80,80,.35); }
|
||||||
|
|
||||||
.toolboxToggle { position: fixed; top: var(--toolbox-toggle-top, calc(var(--nav-h) + 16px)); right: 22px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15); backdrop-filter: blur(8px); color: rgba(232,232,238,.95); font-family: var(--bit-font); font-weight: 800; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
|
/* === CONTAINER QUERIES === */
|
||||||
.toolboxIcon { font-size: 20px; filter: drop-shadow(0 0 8px rgba(255,105,180,.35)); }
|
@container (max-width: 1050px) {
|
||||||
.toolboxToggle:hover { border-color: rgba(255,255,255,.22); }
|
.readoutContainer { gap: 40px; }
|
||||||
|
.colorGroupWrap { gap: 10px; }
|
||||||
|
.colorGroup { padding: 10px; gap: 8px; border-radius: 16px; }
|
||||||
|
.hexCard { padding: 12px 8px; width: 140px; gap: 12px; }
|
||||||
|
.hexDigitDisplay { font-size: 40px; }
|
||||||
|
.hexNibbleBulb { width: 24px !important; height: 24px !important; }
|
||||||
|
.hexNibbleLabel { font-size: 20px; }
|
||||||
|
.hexColWeight { font-size: 26px; margin-top: 10px; }
|
||||||
|
.hexCardBtn { width: 34px; height: 34px; font-size: 14px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (max-width: 800px) {
|
||||||
|
.readoutContainer { flex-direction: column; gap: 24px; }
|
||||||
|
.colorPreviewSide { padding-top: 0; }
|
||||||
|
.colorGroupWrap { gap: 6px; }
|
||||||
|
.colorGroup { padding: 6px; gap: 6px; border-radius: 12px; }
|
||||||
|
.hexCard { padding: 8px 4px; width: 90px; gap: 8px; border-radius: 10px; }
|
||||||
|
.hexDigitDisplay { font-size: 32px; }
|
||||||
|
.hexNibbleBulb { width: 16px !important; height: 16px !important; }
|
||||||
|
.hexNibbleLabel { font-size: 16px; }
|
||||||
|
.hexColWeight { font-size: 20px; margin-top: 6px; }
|
||||||
|
.hexCardBtn { width: 28px; height: 28px; font-size: 12px; }
|
||||||
|
.denaryValue, .hexValue, .binaryValue { font-size: 32px; gap: 10px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) { .binaryPage { --toolbox-w: 330px; } .denaryValue { font-size: 48px; } .hexValue { font-size: 40px; } .binaryValue { font-size: 32px; } }
|
||||||
|
@media (max-width: 900px) { .binaryPage { --toolbox-w: 320px; } .bitsGrid { grid-template-columns: repeat(var(--cols), minmax(84px, 1fr)); } .hexGrid { grid-template-columns: repeat(var(--cols), minmax(130px, 1fr)); } }
|
||||||
|
|
||||||
|
.cc-sa:before {
|
||||||
|
background-image: url(https://creativecommons.org/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-sa);
|
||||||
|
float: left;
|
||||||
|
margin-left: -2.5em;
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cc-nc:before {
|
||||||
|
background-image: url(https://creativecommons.org/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-nc);
|
||||||
|
float: left;
|
||||||
|
margin-left: -2.5em;
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cc-by:before {
|
||||||
|
background-image: url(https://creativecommons.org/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-by);
|
||||||
|
float: left;
|
||||||
|
margin-left: -2.5em;
|
||||||
|
filter: invert(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cc-terms ul > li {
|
||||||
|
padding-left: 2.5em;
|
||||||
|
clear: both;
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
min-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cc-terms ul {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 150%;
|
||||||
|
margin: 0 0 2em 2em;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user