Completed Wave 3 features:

- [X] New User Interface (Responsive) - [X] Two's Compliment Simulator - [X] Extended Binary Simulator (Custom bit sizes) - [X] Unified Binary Simulator (Unsigned & Two's Completment combined) - [X] Extended Hexadecimal Simulator - [X] Unified Hexadecimal Simulator (For GCSE & A Level Specification) - [X] Enhanced Gate Simulator (Truth Table Creator) - [X] Compound Gate Simulator - [ ] Computer Components Simulator Signed-off-by: Alexander Lyall <alex@adcm.uk>
2026-03-01 16:22:58 +00:00
parent 4facee954c
commit ffab71cfcc
57 changed files with 3602 additions and 3488 deletions
--- a/dist/hexadecimal/index.html
+++ b/dist/hexadecimal/index.html
@@ -1,5 +1,3 @@
-<!DOCTYPE html><html lang="en" data-astro-cid-37fxchfa> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hexadecimal | Computing:Box</title><style>:root{--nav-h: 108px;--bg: #1f2027;--text: #e8e8ee;--muted: #a9acb8;--line: rgba(255,255,255,.1)}body{margin:0;background:var(--bg);color:var(--text)}.siteNav[data-astro-cid-37fxchfa]{position:sticky;top:0;z-index:50;height:var(--nav-h);background:#0000001a;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.navInner[data-astro-cid-37fxchfa]{height:100%;max-width:1400px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand[data-astro-cid-37fxchfa]{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}.brandLogo[data-astro-cid-37fxchfa]{width:2em;height:2em;image-rendering:pixelated}.brandName[data-astro-cid-37fxchfa]{letter-spacing:.12em;font-weight:900;text-transform:uppercase;font-size:18px}.navLinks[data-astro-cid-37fxchfa]{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.navLinks[data-astro-cid-37fxchfa] a[data-astro-cid-37fxchfa]{color:var(--muted);text-decoration:none;font-weight:800;letter-spacing:.12em;font-size:16px;text-transform:uppercase}.navLinks[data-astro-cid-37fxchfa] a[data-astro-cid-37fxchfa]:hover{color:var(--text)}.pageWrap[data-astro-cid-37fxchfa]{max-width:1400px;margin:0 auto}
-</style>
-<link rel="stylesheet" href="/_astro/hexadecimal.C_Opoo6d.css"></head> <body data-astro-cid-37fxchfa> <header class="siteNav" data-astro-cid-37fxchfa> <div class="navInner" data-astro-cid-37fxchfa> <a class="brand" href="/" data-astro-cid-37fxchfa> <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo" data-astro-cid-37fxchfa> <span class="brandName" data-astro-cid-37fxchfa>COMPUTING:BOX</span> </a> <nav class="navLinks" aria-label="Site navigation" data-astro-cid-37fxchfa> <a href="/about" data-astro-cid-37fxchfa>ABOUT</a> <a href="/binary" data-astro-cid-37fxchfa>BINARY</a> <a href="/hexadecimal" data-astro-cid-37fxchfa>HEXADECIMAL</a> <a href="/hex-colours" data-astro-cid-37fxchfa>HEX COLOURS</a> <a href="/logic-gates" data-astro-cid-37fxchfa>LOGIC GATES</a> </nav> </div> </header> <main class="pageWrap" data-astro-cid-37fxchfa>  <section class="hex-sim" data-hex-sim> <div class="hex-main"> <div class="hex-readout"> <div class="hex-label">DENARY</div> <div class="hex-number" data-out="denary">0</div> <div class="hex-label hex-mt">HEXADECIMAL</div> <div class="hex-number hex-number--small" data-out="hex">00</div> <div class="hex-label hex-mt">BINARY</div> <div class="hex-number hex-number--tiny" data-out="bin">0000 0000</div> </div> <div class="hex-divider"></div> <div class="hex-digits" data-out="digitsRow"></div> </div> <!-- Toolbox button --> <button class="hex-toolbox-btn" type="button" data-action="toggleToolbox" aria-controls="hex-toolbox" aria-expanded="true"> <span class="hex-toolbox-icon" aria-hidden="true"> <!-- toolbox icon --> <svg viewBox="0 0 24 24" width="18" height="18" fill="none"> <path d="M9 7V6a3 3 0 0 1 6 0v1" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path> <path d="M4 9h16l-1.3 10.4A2 2 0 0 1 16.7 21H7.3a2 2 0 0 1-1.98-1.6L4 9Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path> <path d="M10 13h4" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path> </svg> </span>
-TOOLBOX
-</button> <!-- Toolbox panel --> <aside class="hex-toolbox is-open" id="hex-toolbox" data-out="toolbox"> <div class="hex-panel"> <div class="hex-panel-title">SETTINGS</div> <div class="hex-setting-title">HEX DIGIT WIDTH</div> <div class="hex-width"> <button class="hex-btn hex-btn--square" type="button" data-action="digitsMinus">−</button> <div class="hex-width-readout"> <div class="hex-width-label">DIGITS</div> <div class="hex-width-number" data-out="digitsCount">2</div> </div> <button class="hex-btn hex-btn--square" type="button" data-action="digitsPlus">+</button> </div> <div class="hex-hint" data-out="bitsHint">= 8 bits</div> </div> <div class="hex-panel"> <div class="hex-panel-title">CUSTOM NUMBER</div> <div class="hex-grid-2"> <button class="hex-btn hex-btn--green" type="button" data-action="customHex">Custom Hexadecimal</button> <button class="hex-btn hex-btn--green" type="button" data-action="customDenary">Custom Denary</button> </div> <!-- Custom Binary + Random on SAME row, same size --> <div class="hex-grid-2 hex-mt-sm"> <button class="hex-btn hex-btn--green" type="button" data-action="customBinary">Custom Binary</button> <button class="hex-btn hex-btn--wide hex-btn--random" type="button" data-action="random" data-random>Random</button> </div> <div class="hex-tiny-note">RANDOM RUNS BRIEFLY THEN STOPS AUTOMATICALLY.</div> </div> <div class="hex-panel"> <div class="hex-panel-title">TOOLS</div> <div class="hex-tools-top"> <button class="hex-btn hex-btn--square hex-btn--red" type="button" data-action="decrement" title="Decrement">▼</button> <button class="hex-btn hex-btn--square hex-btn--green2" type="button" data-action="increment" title="Increment">▲</button> </div> <button class="hex-btn hex-btn--wide hex-btn--reset" type="button" data-action="reset">Reset</button> </div> </aside> <!-- Custom number dialog --> <dialog class="hex-dialog" data-out="dialog"> <div class="hex-dialog-card"> <div class="hex-dialog-title" data-out="dialogTitle">Custom</div> <input class="hex-dialog-input hex-font-mono" data-out="dialogInput"> <div class="hex-dialog-hint" data-out="dialogHint"></div> <div class="hex-dialog-error" data-out="dialogError" aria-live="polite"></div> <div class="hex-dialog-actions"> <button class="hex-btn" type="button" data-action="dialogCancel">Cancel</button> <button class="hex-btn hex-btn--green" type="button" data-action="dialogApply">Apply</button> </div> </div> </dialog> <script type="module" src="/src/components/simulators/hex/hex-simulator.ts"></script> </section>  </main> </body></html>
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hexadecimal Simulator | Computing:Box</title><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/binary.BbxrcYRT.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> </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).
+</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 MR LYALL</div> </div> </footer> </body></html>