You've already forked computing-box
Alexander Lyall
ce6c2298a1
Known issues: - Formatting of the navbar across the site is broken - Formatting of the Binary simulator is broken Signed-off-by: Alexander Lyall <alex@adcm.uk>
116 lines
4.0 KiB
Plaintext
116 lines
4.0 KiB
Plaintext
---
|
||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||
import "../styles/binary.css";
|
||
---
|
||
|
||
<BaseLayout title="Binary Simulator">
|
||
<main class="wrap">
|
||
<!-- Toolbox toggle sits below navbar (navbar is in BaseLayout) -->
|
||
<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">
|
||
<!-- LEFT -->
|
||
<div class="mainCol">
|
||
<div class="readout">
|
||
<div class="label">Denary</div>
|
||
<div id="denaryNumber" class="num denaryValue">0</div>
|
||
|
||
<div class="label">Binary</div>
|
||
<!-- NOTE: JS writes exact bit-width here, so initial value doesn't matter much -->
|
||
<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>
|
||
|
||
<!-- RIGHT (Toolbox panel) -->
|
||
<aside id="toolboxPanel" 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>
|
||
|
||
<!-- keep this on ONE line -->
|
||
<div class="toggleLabel" id="lblTwos">Two'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 Number -->
|
||
<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>
|
||
|
||
<!-- Tools -->
|
||
<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>
|
||
</main>
|
||
|
||
<script type="module" src="/src/scripts/binary.js"></script>
|
||
</BaseLayout>
|