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>

src/pages/logic-gates.astro

@@ -0,0 +1,63 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import "../styles/logic-gates.css";
+---
+
+<BaseLayout title="Logic Gate Builder | Computing:Box">
+  <div class="binaryPage" id="logicPage">
+    
+    <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" style="display:flex; flex-direction:column; height: 100%;">
+      
+      <div class="readout">
+        <div class="readoutBlock">
+          <div class="label" style="margin-bottom: 8px;">Interactive Simulator</div>
+          <div class="num denaryValue" style="font-size: 56px; line-height: 1;">LOGIC GATES</div>
+        </div>
+        <div style="color: var(--muted); font-size: 15px; font-family: var(--ui-font); text-align: center; max-width: 800px; margin-top: 12px;">
+          Drag items from the toolbox to the board. Drag from output ports to input ports to wire. Click a wire or node and press <kbd style="background:rgba(255,255,255,0.1); padding:2px 6px; border-radius:4px; font-family:var(--ui-font);">Delete</kbd> to remove it.
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="lg-workspace" id="workspace">
+        <svg class="lg-svg-layer" id="wireLayer"></svg>
+        </div>
+      
+    </section>
+
+    <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox">
+      
+      <div class="card">
+        <div class="cardTitle">Components</div>
+        
+        <div class="tb-icon-grid" id="toolboxGrid">
+          </div>
+
+      </div>
+
+      <div class="card">
+        <div class="cardTitle">Live Truth Table</div>
+        <details open>
+          <summary class="tt-summary">Show / Hide Table</summary>
+          <div style="font-family: var(--ui-font); font-size: 12px; color: var(--muted); margin-bottom: 12px;">Auto-generates based on current wiring. (Max 6 inputs)</div>
+          <div class="tt-table-wrap" id="truthTableContainer">
+            </div>
+        </details>
+      </div>
+
+      <div class="card">
+        <div class="cardTitle">Tools</div>
+        <button class="btn btnReset btnWide" id="btnClearBoard" type="button" style="margin-bottom:0;">Clear Board</button>
+      </div>
+
+    </aside>
+  </div>
+
+  <script src="../scripts/logicGates.js"></script>
+</BaseLayout>