You've already forked computing-box
Alexander Lyall
ffab71cfcc
All checks were successful
Pre-release on non-main branches / prerelease (push) Successful in 27s
- [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>
99 lines
3.5 KiB
Plaintext
99 lines
3.5 KiB
Plaintext
---
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
---
|
|
|
|
<BaseLayout title="Hex Colours Simulator | Computing:Box">
|
|
<div class="binaryPage" id="colorPage">
|
|
<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="readoutContainer">
|
|
<div class="readout">
|
|
<div class="readoutBlock">
|
|
<div class="label">Denary (R, G, B)</div>
|
|
<div id="denaryNumber" class="num denaryValue">
|
|
<span class="text-red">0</span>
|
|
<span class="text-green">0</span>
|
|
<span class="text-blue">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="readoutBlock">
|
|
<div class="label">Hexadecimal</div>
|
|
<div id="hexNumber" class="num hexValue">
|
|
<span class="text-red"><span style="color:var(--muted)">#</span>00</span>
|
|
<span class="text-green">00</span>
|
|
<span class="text-blue">00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="readoutBlock">
|
|
<div class="label">Binary</div>
|
|
<div id="binaryNumber" class="num binaryValue">
|
|
<span class="text-red">00000000</span>
|
|
<span class="text-green">00000000</span>
|
|
<span class="text-blue">00000000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="colorPreviewSide">
|
|
<div class="colorBoxWrap">
|
|
<div id="previewColor" class="colorBox"></div>
|
|
<div class="colorBoxLabel">Colour</div>
|
|
</div>
|
|
<div class="colorBoxWrap">
|
|
<div id="previewInverted" class="colorBox"></div>
|
|
<div class="colorBoxLabel">Inverted</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<section class="bitsWrap" aria-label="Hex Colour Cards">
|
|
<div class="colorGroupWrap" id="colorGrid"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<aside id="toolboxPanel" class="panelCol" aria-label="Toolbox">
|
|
<div class="card">
|
|
<div class="cardTitle">Info</div>
|
|
<div class="hint" style="margin-top: 0;">
|
|
Hexadecimal colours are made of 3 channels (Red, Green, Blue). Each channel is an 8-bit value ranging from 00 to FF (0 to 255).
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="cardTitle">Colour Tools</div>
|
|
<div class="controlsRow">
|
|
<button class="btn btnAccent btnHalf" id="btnCustomHex" type="button">Custom Hex</button>
|
|
<button class="btn btnAccent btnHalf" id="btnCustomRGB" type="button">Custom RGB</button>
|
|
</div>
|
|
<div class="controlsRow">
|
|
<button class="btn btnAccent btnWide" id="btnInvert" type="button">Invert Colour</button>
|
|
</div>
|
|
<button class="btn btnWide" id="btnRandom" type="button">Random Colour</button>
|
|
<div class="hint">Random runs briefly then stops automatically.</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="cardTitle">Tools</div>
|
|
<button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="../scripts/hexColours.js"></script>
|
|
</BaseLayout> |