computing-box/src/pages/binary.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/binary.css";
---

<BaseLayout title="Binary Simulator">
  <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>
</BaseLayout>