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

Changed .gitignore to include build outputs
All checks were successful
Pre-release on non-main branches / prerelease (push) Successful in 24s
Details

Browse Source 
Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-26 22:46:58 +00:00
parent da081e41e9
commit 4facee954c
13 changed files with 2057 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dist/binary/index.html vendored Normal file
View File

@@ -0,0 +1,7 @@
<!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>Binary Simulator</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}
:root{--panel-w: 360px;--gap: 22px}.wrap{max-width:1400px;margin:0 auto;padding:26px 20px 48px;position:relative}.topGrid{display:grid;grid-template-columns:1fr var(--panel-w);gap:var(--gap);align-items:start}body.toolboxClosed .topGrid{grid-template-columns:1fr}body.toolboxClosed #toolboxPanel{display:none}.mainCol{min-width:0}.readout{text-align:center;margin-top:8px}.label{opacity:.8;letter-spacing:.12em;text-transform:uppercase;font-size:12px}.num{display:inline-block;width:fit-content;max-width:100%;white-space:pre-line;letter-spacing:2px}.denaryValue{font-size:54px;margin:6px 0 10px}.binaryValue{font-size:56px;margin:4px 0 18px}.divider{height:1px;background:#ffffff1a;margin:14px auto 24px;max-width:900px}.bitsWrap{padding-top:6px}.bitsGrid{display:grid;gap:24px;justify-content:center}.bitsGrid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));max-width:1200px;margin:0 auto}.bitsGrid.bitsFew{justify-content:center}.bit{display:grid;justify-items:center;gap:8px}.bulb{font-size:32px;line-height:1;opacity:.45}.bitVal{font-size:22px;line-height:1.05;text-align:center;white-space:nowrap}.switch{position:relative;display:inline-block;width:52px;height:28px}.switch input{display:none}.slider{position:absolute;inset:0;border-radius:999px;background:#ffffff2e;border:1px solid rgba(255,255,255,.14)}.slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:2.5px;border-radius:999px;background:#fff;transition:transform .18s ease}.switch input:checked+.slider:before{transform:translate(22px)}.toolboxToggle{position:absolute;right:20px;top:18px;z-index:20;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:#ffffffeb;cursor:pointer}.toolboxText{letter-spacing:.12em;font-weight:900}.panelCol{position:sticky;top:calc(var(--nav-h, 72px) + 18px);align-self:start;display:grid;gap:16px}.card{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#ffffff0d;padding:14px}.cardTitle{opacity:.8;letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin-bottom:10px}.hint{opacity:.7;font-size:11px;margin-top:10px;line-height:1.35}.toggleRow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.toggleLabel{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.subCard{margin-top:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0000001f;padding:12px}.subTitle{opacity:.8;letter-spacing:.14em;text-transform:uppercase;font-size:11px;margin-bottom:10px}.bitWidthRow{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center}.bitInputWrap{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0a}.bitInputLabel{opacity:.75;letter-spacing:.14em;text-transform:uppercase;font-size:11px;white-space:nowrap}.bitInput{width:100%;min-width:0;background:transparent;border:none;outline:none;color:inherit;font-size:20px;text-align:right}.miniBtn{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffe6;font-size:18px;cursor:pointer}.controlsRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.btn{border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffeb;padding:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.btnWide{width:100%}.btnAccent{background:#00ff8c1f;border-color:#00ff8c38}.toolRowCentered{display:flex;justify-content:center;gap:12px;margin:10px 0 12px}.toolBtn{width:56px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffeb;font-size:18px;cursor:pointer}.toolDec{background:#ff000024;border-color:#f003}.toolInc{background:#00ff8c24;border-color:#00ff8c33}.toolRow2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.btnReset{color:#ffffffeb}
</style></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> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxLabel">TOOLBOX</span> </button> <main class="wrap"> <section class="topGrid"> <!-- LEFT --> <div> <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">0000 0000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Bit switches"> <div class="bitsGrid" id="bitsGrid"></div> </section> </div> <!-- RIGHT TOOLBOX --> <aside id="toolbox" class="panelCol" aria-label="Toolbox"> <!-- SETTINGS --> <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&rsquo;s complement</div> </div> <div class="hint" id="modeHint">
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> <!-- CUSTOM --> <div class="card"> <div class="cardTitle">Custom</div> <div class="twoBtnRow"> <button class="btn btnAccent" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent" id="btnCustomDenary" type="button">Custom Denary</button> </div> <button class="toolBtn toolWide toolRandom" id="btnRandom" type="button">
Random
</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <!-- TOOLS --> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolsTopRow"> <button class="toolBtn toolArrow toolDown" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolArrow toolUp" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <div class="twoBtnRow"> <button class="btn" id="btnShiftLeft" type="button">Left Shift</button> <button class="btn" id="btnShiftRight" type="button">Right Shift</button> </div> <button class="toolBtn toolWide toolReset" id="btnClear" type="button">Reset</button> </div> </aside> </section> </main> <script type="module" src="/src/scripts/binary.js"></script> </main> </body></html>