alexander.lyall/CS-Box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity
Files
dd146985b0aa43985c9186ac265c6ae84e14b53c
CS-Box/Export/binary.html
Alexander Davis dd146985b0 Wave 1 Features Alpha 
Added options for custom denary and binary values to be entered into the Binary simulator
Creation of the AND, OR and NOT logic gate pages and accompanying logic

Further preparation for upcoming major changes:
- Changes to page organisation and naming conventions
- Changes to CSS configuration
- Further preparation for project-wide naming convention change
2024-10-28 17:39:58 +00:00

10 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html><html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"><title>Binary Simulator - CS:Box</title><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script><link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"><link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)"><link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"><link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)"><link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"><link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"><link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css?h=ae25e30cd2ef0f4f5b70ebf4c668048b"><link rel="stylesheet" href="/assets/css/styles.min.css?h=7433255f472809ff8445e6ecb46a5e21"></head><body><header class="bg-dark"><!-- Start: Site Navigation --><nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);"><div class="container"><img src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navcol-5"><ul class="navbar-nav ms-auto"><li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li><li class="nav-item"><a class="nav-link" href="/about.html">About</a></li><li class="nav-item"><a class="nav-link active" href="/binary.html">Binary</a></li><li class="nav-item dropdown show"><a class="dropdown-toggle nav-link" aria-expanded="true" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a><div class="dropdown-menu show" data-bs-popper="none"><a class="dropdown-item" href="/gcse-hexadecimal.html">GCSE</a><a class="dropdown-item" href="/a-level-hexadecimal.html">A Level</a></div></li><li class="nav-item"><a class="nav-link" href="/hex-colours.html">Hex Colours</a></li><li class="nav-item dropdown show"><a class="dropdown-toggle nav-link" aria-expanded="true" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a><div class="dropdown-menu show" data-bs-popper="none"><a class="dropdown-item" href="/not-gate.html">NOT</a><a class="dropdown-item" href="/and-gate.html">AND</a><a class="dropdown-item" href="/or-gate.html">OR</a></div></li></ul></div></div></nav><!-- End: Site Navigation --></header><section style="background: rgb(39,38,46);"><!-- Start: 1 Row 2 Columns --><div class="container" style="width: 100%;margin-top: 15px;"><div class="row"><div class="col centred" style="width: 35%;"><div class="centred reset" style="position: relative;"><p class="resetButton">Reset bit:box</p><div style="position: absolute;"><img class="overlay resetIcon" src="/assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetBinarySimulator()"></div></div><div class="row"><div class="col-xl-12 bottomSpacer"></div></div></div><div class="col-md-6" style="width: 65%;"><div class="row"><div class="col"><h1 class="simHeading">Denary</h1></div></div><div class="row"><div class="col"><h1 id="denaryNumber" class="simData">0</h1></div></div></div></div><div class="row"><div class="col centred" style="width: 35%;"><div class="row"><div class="col-xl-12 bottomSpacer"><div class="row"><div class="col"><button class="btn btn-primary binaryButtons" type="button" onclick="requestBinary()">Custom Binary</button></div><div class="col"><button class="btn btn-primary binaryButtons" type="button" onclick="requestDenary()">Custom Denary</button></div></div></div></div></div><div class="col-md-6" style="width: 65%;"><div class="row"><div class="col"><h1 class="simHeading">Binary</h1></div></div><div class="row"><div class="col"><h1 id="binaryNumber" class="simData">000000000</h1></div></div></div></div><div class="row"><div class="col spacer" style="width: 100%;"></div></div></div><!-- End: 1 Row 2 Columns --><div class="container d-xl-flex justify-content-xl-center centred"><div class="text-center d-xl-flex justify-content-xl-center" style="width: 100%;"><table class="table table-borderless"><thead><tr><th class="tableCells"><h1 id="blb256" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb128" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb64" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb32" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb16" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb8" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb4" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb2" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></th><th class="tableCells"><h1 id="blb1" class="poweredOff" style="text-align: center;font-size: 48px;">💡</h1></th></tr></thead><tbody><tr><td class="tableCells"><h1 class="simColumns">256</h1></td><td class="tableCells"><h1 class="simColumns">128</h1></td><td class="tableCells"><h1 class="simColumns">64</h1></td><td class="tableCells"><h1 class="simColumns">32</h1></td><td class="tableCells"><h1 class="simColumns">16</h1></td><td class="tableCells"><h1 class="simColumns">8</h1></td><td class="tableCells"><h1 class="simColumns">4</h1></td><td class="tableCells"><h1 class="simColumns">2</h1></td><td class="tableCells"><h1 class="simColumns">1</h1></td></tr><tr><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt256" type="button" onclick="changeClass256()">⏼</button></td><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt128" type="button" onclick="changeClass128()">⏼<br></button></td><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt64" type="button" onclick="changeClass64()">⏼<br></button></td><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt32" type="button" onclick="changeClass32()">⏼<br></button></td><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt16" type="button" onclick="changeClass16()">⏼<br></button></td><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt8" type="button" onclick="changeClass8()">⏼<br></button></td><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt4" type="button" onclick="changeClass4()">⏼<br></button></td><td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt2" type="button" onclick="changeClass2()">⏼<br></button></td><td class="text-center"><button class="btn btn-primary buttonMiddle" id="swt1" type="button" onclick="changeClass1()">⏼<br></button></td></tr></tbody></table></div></div><div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div></section><!-- Start: Footer Multi Column --><footer style="background: rgb(45,44,56);"><div class="container py-4 py-lg-5"><div class="row justify-content-center"><!-- Start: About Project --><div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"><h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">About Project</h1><a href="https://github.com/AlexanderEDavis/CS-Box" target="_blank"><div class="fw-bold d-flex align-items-center mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github" style="font-size: 25px;margin-right: 10px;">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
</svg><span>GitHub</span></div></a></div><!-- End: About Project --><!-- Start: About --><div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div><!-- End: About --><!-- Start: Social Links --><div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"><h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1><div class="row"><div class="col-md-3"><a href="https://www.facebook.com/alexanderdavis95/"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-facebook social-media">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"></path>
</svg></a></div><div class="col-md-3"><a href="https://x.com/MrDavisCSIT"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-twitter social-media">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15"></path>
</svg></a></div><div class="col-md-3"><a href="https://github.com/AlexanderEDavis"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github social-media">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
</svg></a></div><div class="col-md-3"></div></div></div><!-- End: Social Links --><!-- Start: Branding --><div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last"><div class="fw-bold d-flex align-items-center mb-2"><img src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div><p class="text-muted">Computer Science Concept Simulators</p></div><!-- End: Branding --></div><hr><div class="text-muted d-flex justify-content-between align-items-center pt-3"><p class="mb-0">Copyright © 2024 CS:Box<br>Powered By ADCM Networks</p></div></div></footer><!-- End: Footer Multi Column --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="/assets/js/script.min.js?h=207255e217e29ab50a850c6b98d3ad65"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink