alexander.lyall/computing-box
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

Wave 1 Beta Release

Browse Source 
# Wave 1 Beta Release

---

## Key Features and Enhancements

### 1. Core Functionality
- Developed and optimized JavaScript functions for binary, hexadecimal, and logic gate simulations, ensuring high performance and compatibility across GCSE and A-Level specifications.
- Introduced dynamic behavior to adapt pages (e.g., GCSE vs A-Level) based on URL or heading context.
- Streamlined reset, toggle, and update functionalities for user inputs and sliders across various simulation pages.

### 2. Hexadecimal Simulator
- Enabled two configurations:
  - 8-bit binary with 2-digit hexadecimal (GCSE).
  - 16-bit binary with 4-digit hexadecimal (A-Level).
- Ensured user input validation for denary and hexadecimal values with robust error handling and feedback.

### 3. Hex Colors Module
- Added dynamic color preview updates for RGB sliders, denary, binary, and hexadecimal values.
- Included an "invert color" feature with corresponding visual updates.

### 4. Logic Gates Module
- Implemented NOT, AND, and OR gates with toggle buttons and live output updates.
- Enhanced reset functionality to initialize states correctly for each gate type.

### 5. Error Handling
- Resolved bugs related to undefined slider properties and invalid binary/hexadecimal inputs.
- Implemented fallback defaults for invalid or canceled inputs.

---

## Visual Enhancements

### 1. Custom Illustrations
- Created custom images for the following sections:
  - **About CS:Box**: A simplistic and educational-themed design.
  - **The Evolution from Bit:Box**: A visual transition from Bit:Box to CS:Box.
  - **Educational Impact**: Vibrant and engaging designs showcasing classroom learning.
- Refined visual hierarchy across all pages for better user experience.

### 2. Navigation Revamp
- Redesigned Bootstrap-based dropdown menus for better usability and accessibility.
- Improved menu hierarchy to align with the UK Computing Curriculum elements.

---

## Documentation

### 1. CS:Box Overview
- Added content explaining the project's evolution from Bit:Box and its educational significance.
- Highlighted key features and their relevance to the UK Computing Curriculum.

### 2. GitHub Repository
- Structured repository with concise descriptions of modules, features, and usage instructions.

---

## Bug Fixes and Optimizations
- Addressed issues with sliders not functioning correctly after reset on hexadecimal pages.
- Fixed error with NOT gate toggling state incorrectly upon reset.
- Streamlined JavaScript logic across all simulations to reduce redundancy and improve maintainability.

---

## Future Scope
- Prepare for **Wave 2 Release** with additional simulations (e.g., XOR gates, floating-point representations).
- Enhance accessibility features for a more inclusive user experience.
- Explore collaborative features for classroom settings.

---

*Wave 1 Beta Release is the foundation of CS:Box, setting the stage for engaging, curriculum-aligned computing education tools.*
This commit is contained in:
Alexander Lyall
2024-12-07 22:49:29 +00:00
parent 0f7711fbb5
commit 93b5f11abe
25 changed files with 1662 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
CSBox.bsdesign
View File

Binary file not shown.

128
Export/a-level-hexadecimal.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - CS:Box</title>
<title>A Level Hexadecimal 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,20 +134,36 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">Binary</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link fw-bold link-success" 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">GCSE</a><a class="dropdown-item fw-bold link-success" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#"><strong>Hexadecimal</strong></a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">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">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section>
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;">
<div class="row">
@@ -166,8 +201,23 @@
</div>
</div>
</div>
</div><!-- End: 1 Row 2 Columns -->
<div class="col-xl-6" style="width: 100%;">
<div class="row">
<div class="col centred" style="width: 30%;">
<div class="row">
<div class="col-xl-12 bottomSpacer"></div>
<div class="col centred" style="width: 35%;">
<div class="row">
<div class="col-xl-12 bottomSpacer">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6" style="width: 60%;">
<div class="row">
<div class="col-xl-12">
<h1 class="simHeading">Binary</h1>
@@ -179,8 +229,18 @@
</div>
</div>
</div>
<div class="col-md-6" style="width: 20%;">
<div class="row">
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestHexadecimal()">Custom Hexadecimal</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestDenaryForHexadecimal()">Custom Denary</button></div>
</div>
</div>
</div>
</div><!-- End: 1 Row 2 Columns -->
<div class="container d-xl-flex justify-content-xl-center centred">
<form oninput="updateHexNumber()">
<form oninput="updateNumbers()">
<div class="table-responsive text-center d-xl-flex justify-content-xl-center">
<table class="table table-borderless">
<thead>
@@ -215,16 +275,16 @@
</td>
</tr>
<tr>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider4096" step="1" max="15" min="0" value="0"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider256" step="1" max="15" min="0" value="0"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider16" step="1" max="15" min="0" value="0"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider1" step="1" max="15" min="0" value="0"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider4096" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider256" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider16" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider1" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
</tr>
<tr>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt4reset" type="button" onclick="resetPlace4096()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt3reset" type="button" onclick="resetPlace256()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt2reset" type="button" onclick="resetPlace16()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt1reset" type="button" onclick="resetPlace1()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt4reset" type="button" onclick="resetPlace(4096)">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt3reset" type="button" onclick="resetPlace(256)">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt2reset" type="button" onclick="resetPlace(16)">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt1reset" type="button" onclick="resetPlace(1)">Reset</button></td>
</tr>
</tbody>
</table>
@@ -249,13 +309,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -273,11 +335,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

192
Export/about.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - CS:Box</title>
<title>About - 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,37 +134,142 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link active" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">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">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">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">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section class="py-5">
<!-- Start: Features Cards -->
<div class="container">
<div class="row mb-4 mb-lg-5">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<p class="fw-bold text-success mb-2">CS:Box</p>
<h3 class="fw-bold">An&nbsp;evolution of Bit:Box to incorporate different elements of the UK Computing Curriculum</h3>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 mx-auto">
<div class="col mb-5"><img class="rounded img-fluid shadow" src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"></div>
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
<div>
<h5 class="fw-bold">About CS:Box</h5>
<p class="text-muted mb-4">CS:Box is an innovative educational tool designed to support the teaching of key concepts from the UK Computing Curriculum. Building on the foundations of Bit:Box, CS:Box expands its scope to cover a wider range of essential computing topics, providing an interactive and engaging experience for students.</p>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 mx-auto">
<div class="col order-md-last mb-5"><img class="rounded img-fluid shadow" src="/assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"></div>
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
<div>
<h5 class="fw-bold">The Evolution from Bit:Box</h5>
<p class="text-muted mb-4">Originally, Bit:Box was developed as a web-based version of a physical Binary Light Box, a hands-on device created by Mr. Davis. This device used lightbulbs and an Arduino microcontroller to visually demonstrate how binary numbers work and the values assigned to each binary column. By interacting with the light switches, students could better understand the concepts of binary counting, place values, and logic.</p>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 mx-auto">
<div class="col mb-5"><img class="rounded img-fluid shadow" src="/assets/img/Evolution_BitBox_to_CSBox.webp?h=1ec7437634c178a31d213253a1700f67"></div>
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
<div>
<h5 class="fw-bold">How CS:Box Builds on Bit:Box</h5>
<p class="text-muted mb-4">CS:Box retains the interactive, visual, and tactile learning approach introduced by Bit:Box but extends its reach to cover a broader range of computing concepts. By incorporating elements of the UK Computing Curriculum, CS:Box now goes beyond binary to include concepts like hexadecimal, logic gates, and even color representation in computing. It allows students to visualize and manipulate abstract computing concepts in a practical, hands-on way.</p>
</div>
</div>
</div>
</div><!-- End: Features Cards -->
<!-- Start: Service Cards -->
<section>
<!-- Start: Hero Clean Reverse -->
<!-- Start: Features Cards -->
<div class="container bg-dark py-5">
<div class="row">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<h3 class="fw-bold">Key Features of CS:Box</h3>
</div>
</div>
<div class="py-5 p-lg-5">
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-diagram-3 text-success">
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
</svg></div>
<h5 class="fw-bold card-title">Binary Simulations</h5>
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-hash text-success">
<path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"></path>
</svg></div>
<h5 class="fw-bold card-title">Hexadecimal Tools</h5>
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-toggle2-on text-success">
<path d="M7 5H3a3 3 0 0 0 0 6h4a4.995 4.995 0 0 1-.584-1H3a2 2 0 1 1 0-4h3.416c.156-.357.352-.692.584-1"></path>
<path d="M16 8A5 5 0 1 1 6 8a5 5 0 0 1 10 0"></path>
</svg></div>
<h5 class="fw-bold card-title">Logic Gates</h5>
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-palette text-success">
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"></path>
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"></path>
</svg></div>
<h5 class="fw-bold card-title">Hex Colors</h5>
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div>
</div>
</div>
<div class="col-md-8 col-xl-6 text-center mx-auto">
<div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5">
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-globe text-success">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472M3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"></path>
</svg></div>
<h5 class="fw-bold card-title">User-Focused Design</h5>
<p class="text-muted card-text mb-4">CS:Box is accessible on any device with a browser. Its web-based design ensures students can engage with computing concepts from any location, promoting independent learning and experimentation.</p>
</div>
</div>
</div>
</div>
</div>
</div><!-- End: Features Cards -->
</section><!-- End: Service Cards -->
<!-- Start: Features Cards -->
<div class="container py-5">
<div class="row py-5">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-end mb-4">
<div style="max-width: 450px;">
<p class="fw-bold text-success mb-2">Coming Soon</p>
<h2 class="fw-bold">Understand Computer Science concepts better.</h2>
<p class="completeFeatures">Bit:Box Feature Migration - Complete<br>Wave 1 Features Alpha - Available Now</p>
<p class="introP">Wave 1 Features Beta - Easter 2025<br>Wave 2 Features Beta - May 2025<br>Wave 3 Features Beta - July 2025<br><br>Version 1.0 Release - September 2025</p>
<div class="row row-cols-1 row-cols-md-2 mx-auto">
<div class="col mb-5"><img class="rounded img-fluid shadow" src="/assets/img/Educational_Impact.webp?h=63a87115577f492ad78640012051f84a"></div>
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
<div>
<h5 class="fw-bold">Educational Impact</h5>
<p class="text-muted mb-4">CS:Box is more than a collection of interactive tools — it is a guided learning experience for students to understand complex computing concepts. By combining hands-on manipulation with visual feedback, it provides a scaffolded learning approach for students at different stages of their educational journey.<br><br>Whether students are learning binary for the first time or deepening their knowledge of hexadecimal and logic gates, CS:Box offers a clear, engaging, and practical method to achieve those learning goals. It exemplifies Mr. Davis' dedication to creating meaningful, student-friendly educational resources for the modern classroom.</p>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="p-5 mx-lg-5"><img class="rounded img-fluid shadow w-100 fit-cover" style="min-height: 300px;" src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"></div>
</div>
<div class="col"></div>
</div>
</div><!-- End: Hero Clean Reverse -->
</div><!-- End: Features Cards -->
</section><!-- Start: Footer Multi Column -->
<footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5">
@@ -164,13 +288,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -188,11 +314,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

83
Export/and-gate.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Binary Simulator - CS:Box</title>
<title>AND Gate 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,20 +134,36 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">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">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link fw-bold link-success" 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">NOT</a><a class="dropdown-item fw-bold link-success" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item active" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section style="background: rgb(39,38,46);">
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;">
<div class="row">
@@ -143,7 +178,7 @@
<!-- Start: 1 Row 3 Columns -->
<div class="container">
<div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="input1Toggle()" style="display: grid;position: relative;transform: translate(58px);">⏼</button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="input2Toggle()" style="position: relative;display: grid;">⏼</button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/AND_ANSI.svg/1920px-AND_ANSI.svg.png" width="460" height="240">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleGate(&quot;1&quot;)" style="display: grid;position: relative;transform: translate(58px);">⏼</button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleGate(&quot;2&quot;)" style="position: relative;display: grid;">⏼</button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/AND_ANSI.svg/1920px-AND_ANSI.svg.png" width="460" height="240">
<h1 id="blbAndGate" class="poweredOff dualInputSingleOutput">💡<br></h1>
</div>
</div>
@@ -170,13 +205,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -194,11 +231,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

2
Export/assets/bootstrap/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

140
Export/assets/css/Inter.css
View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -18,7 +18,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -27,7 +27,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -36,7 +36,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -45,7 +45,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -54,7 +54,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -63,7 +63,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -72,7 +72,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -81,7 +81,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -90,7 +90,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -99,7 +99,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -108,7 +108,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -117,7 +117,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -126,7 +126,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -135,7 +135,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -144,7 +144,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -153,7 +153,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -162,7 +162,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -171,7 +171,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -180,7 +180,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -189,7 +189,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -198,7 +198,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -207,7 +207,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -216,7 +216,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -225,7 +225,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -234,7 +234,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -243,7 +243,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -252,7 +252,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -261,7 +261,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -270,7 +270,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -279,7 +279,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -288,7 +288,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -297,7 +297,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -306,7 +306,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -315,7 +315,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -324,7 +324,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -333,7 +333,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -342,7 +342,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -351,7 +351,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -360,7 +360,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -369,7 +369,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -378,7 +378,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -387,7 +387,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -396,7 +396,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -405,7 +405,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -414,7 +414,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -423,7 +423,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -432,7 +432,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -441,7 +441,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -450,7 +450,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -459,7 +459,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -468,7 +468,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -477,7 +477,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -486,7 +486,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -495,7 +495,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -504,7 +504,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -513,7 +513,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -522,7 +522,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -531,7 +531,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -540,7 +540,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -549,7 +549,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -558,7 +558,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -567,7 +567,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -576,7 +576,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -585,7 +585,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -594,7 +594,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -603,7 +603,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -612,7 +612,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -621,7 +621,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;

20
Export/assets/css/Open Sans.css
View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-95e85857855fec865b6c71369458c398.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-95e85857855fec865b6c71369458c398.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-aaa666d4a428e7251998747fecc78290.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-aaa666d4a428e7251998747fecc78290.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -18,7 +18,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-78b0a85baaa30f24beb648328eafa7d2.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-78b0a85baaa30f24beb648328eafa7d2.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -27,7 +27,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-61d49d1448f17f5c304c64dcd7e21de6.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-61d49d1448f17f5c304c64dcd7e21de6.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -36,7 +36,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-b97d58e7110272ce3bd9c10ea779a9f2.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-b97d58e7110272ce3bd9c10ea779a9f2.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -45,7 +45,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-75740ec0c715f6b2a4a5d6d5224b0913.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-75740ec0c715f6b2a4a5d6d5224b0913.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -54,7 +54,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-a6b0039aa2236f69d4b63042a8f3769a.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-a6b0039aa2236f69d4b63042a8f3769a.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -63,7 +63,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-8c179a95e52d0e855e33be00ed141e46.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-8c179a95e52d0e855e33be00ed141e46.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -72,7 +72,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-f020d8a91fea76d306428e8877dcc7d6.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-f020d8a91fea76d306428e8877dcc7d6.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -81,7 +81,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-34eb5b5918b88fb910da76a70e512615.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-34eb5b5918b88fb910da76a70e512615.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;

10
Export/assets/css/Slider-Range.css
View File

@@ -17,3 +17,13 @@
opacity: 1;
}
.customiserButtons {
background-color: var(--bs-btn-active-bg) !important;
border-color: var(--bs-btn-active-border-color) !important;
}
.customiserButtons:hover {
background-color: #198754 !important;
border-color: #198754 !important;
}

8
Export/assets/css/styles.css
View File

@@ -399,7 +399,7 @@ a {
.dropdown-item.active, .dropdown-item:active {
color: #19f5aa!important;
text-decoration: none;
background-color: var(--bs-dropdown-link-active-bg);
background-color: rgb(45, 44, 56);
}
.dropdown-item:hover, .dropdown-item:focus {
@@ -420,3 +420,9 @@ a {
height: 150px;
}
.hexadecimalButtons {
margin: 0.5em auto 0.5em auto;
display: flex;
height: 38px;
}

1
Export/assets/css/styles.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
Export/assets/img/Educational_Impact.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

BIN
Export/assets/img/Evolution_BitBox_to_CSBox.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 191 KiB

552
Export/assets/js/binary.js
View File

@@ -1,394 +1,210 @@
denary = 0
binary = ""
customBinary = ""
bit1 = false
bit2 = false
bit4 = false
bit8 = false
bit16 = false
bit32 = false
bit64 = false
bit128 = false
bit256 = false
// ** Check if the filename contains "binary" **
if (window.location.pathname.includes('binary')) {
let denary = 0;
let bits = {
'-128': false,
'1': false,
'2': false,
'4': false,
'8': false,
'16': false,
'32': false,
'64': false,
'128': false
};
let bitValues = [];
const twosComplementCheck = document.getElementById("blbN128");
// ** Initialize the bit values on page load **
function initialize() {
setBitValues(); // Set the bit values dynamically
resetBinarySimulator(); // Reset the simulator to the initial state
}
// ** Dynamically set bit values based on 2's complement mode **
function setBitValues() {
bitValues = twosComplementCheck
? [-128, 64, 32, 16, 8, 4, 2, 1]
: [128, 64, 32, 16, 8, 4, 2, 1];
}
// ** Helper function to toggle power for a specific bit **
function togglePower(bitValue, isActive) {
const bitId = bitValue < 0 ? `N${Math.abs(bitValue)}` : bitValue;
const bulb = document.getElementById(`blb${bitId}`);
const switchBtn = document.getElementById(`swt${bitId}`);
if (bulb && switchBtn) {
bulb.classList.toggle('poweredOn', isActive);
bulb.classList.toggle('poweredOff', !isActive);
switchBtn.classList.toggle('btnActive', isActive);
}
}
// ** Reset all bits and denary **
function resetBinarySimulator() {
document.getElementById("blb256").classList.remove('poweredOn');
document.getElementById("blb256").classList.add('poweredOff');
document.getElementById("swt256").classList.remove('btnActive');
bit256 = false;
document.getElementById("blb128").classList.add('poweredOff');
document.getElementById("blb128").classList.remove('poweredOn');
document.getElementById("swt128").classList.remove('btnActive');
bit128 = false;
document.getElementById("blb64").classList.add('poweredOff');
document.getElementById("blb64").classList.remove('poweredOn');
document.getElementById("swt64").classList.remove('btnActive');
bit64 = false;
document.getElementById("blb32").classList.add('poweredOff');
document.getElementById("blb32").classList.remove('poweredOn');
document.getElementById("swt32").classList.remove('btnActive');
bit32 = false;
document.getElementById("blb16").classList.add('poweredOff');
document.getElementById("blb16").classList.remove('poweredOn');
document.getElementById("swt16").classList.remove('btnActive');
bit16 = false;
document.getElementById("blb8").classList.add('poweredOff');
document.getElementById("blb8").classList.remove('poweredOn');
document.getElementById("swt8").classList.remove('btnActive');
bit8 = false;
document.getElementById("blb4").classList.add('poweredOff');
document.getElementById("blb4").classList.remove('poweredOn');
document.getElementById("swt4").classList.remove('btnActive');
bit4 = false;
document.getElementById("blb2").classList.add('poweredOff');
document.getElementById("blb2").classList.remove('poweredOn');
document.getElementById("swt2").classList.remove('btnActive');
bit2 = false;
document.getElementById("blb1").classList.add('poweredOff');
document.getElementById("blb1").classList.remove('poweredOn');
document.getElementById("swt1").classList.remove('btnActive');
bit1 = false;
Object.keys(bits).forEach(bit => {
togglePower(parseInt(bit, 10), false);
bits[bit] = false;
});
denary = 0;
updateBinary();
}
function changeClass256(){
if (bit256){
document.getElementById("blb256").classList.add('poweredOff');
document.getElementById("blb256").classList.remove('poweredOn');
document.getElementById("swt256").classList.remove('btnActive');
bit256 = false;
denary = denary - 256;
// ** Toggle a specific bit **
function changeBit(bitValue) {
const key = getBitKey(bitValue);
const isActive = bits[key];
togglePower(bitValue, !isActive);
bits[key] = !isActive;
denary += isActive ? -bitValue : bitValue;
updateBinary();
}else{
document.getElementById("blb256").classList.add('poweredOn');
document.getElementById("blb256").classList.remove('poweredOff');
document.getElementById("swt256").classList.add('btnActive');
bit256 = true;
denary = denary + 256;
updateBinary();
}
}
function changeClass128(){
if (bit128){
document.getElementById("blb128").classList.add('poweredOff');
document.getElementById("blb128").classList.remove('poweredOn');
document.getElementById("swt128").classList.remove('btnActive');
bit128 = false;
denary = denary - 128;
updateBinary();
}else{
document.getElementById("blb128").classList.add('poweredOn');
document.getElementById("blb128").classList.remove('poweredOff');
document.getElementById("swt128").classList.add('btnActive');
bit128 = true;
denary = denary + 128;
updateBinary();
}
}
function changeClass64(){
if (bit64){
document.getElementById("blb64").classList.add('poweredOff');
document.getElementById("blb64").classList.remove('poweredOn');
document.getElementById("swt64").classList.remove('btnActive');
bit64 = false;
denary = denary - 64;
updateBinary();
}else{
document.getElementById("blb64").classList.add('poweredOn');
document.getElementById("blb64").classList.remove('poweredOff');
document.getElementById("swt64").classList.add('btnActive');
bit64 = true;
denary = denary + 64;
updateBinary();
}
}
function changeClass32(){
if (bit32){
document.getElementById("blb32").classList.add('poweredOff');
document.getElementById("blb32").classList.remove('poweredOn');
document.getElementById("swt32").classList.remove('btnActive');
bit32 = false;
denary = denary - 32;
updateBinary();
}else{
document.getElementById("blb32").classList.add('poweredOn');
document.getElementById("blb32").classList.remove('poweredOff');
document.getElementById("swt32").classList.add('btnActive');
bit32 = true;
denary = denary + 32;
updateBinary();
}
}
function changeClass16(){
if (bit16){
document.getElementById("blb16").classList.add('poweredOff');
document.getElementById("blb16").classList.remove('poweredOn');
document.getElementById("swt16").classList.remove('btnActive');
bit16 = false;
denary = denary - 16;
updateBinary();
}else{
document.getElementById("blb16").classList.add('poweredOn');
document.getElementById("blb16").classList.remove('poweredOff');
document.getElementById("swt16").classList.add('btnActive');
bit16 = true;
denary = denary + 16;
updateBinary();
}
}
function changeClass8(){
if (bit8){
document.getElementById("blb8").classList.add('poweredOff');
document.getElementById("blb8").classList.remove('poweredOn');
document.getElementById("swt8").classList.remove('btnActive');
bit8 = false;
denary = denary - 8;
updateBinary();
}else{
document.getElementById("blb8").classList.add('poweredOn');
document.getElementById("blb8").classList.remove('poweredOff');
document.getElementById("swt8").classList.add('btnActive');
bit8 = true;
denary = denary + 8;
updateBinary();
}
}
function changeClass4(){
if (bit4){
document.getElementById("blb4").classList.add('poweredOff');
document.getElementById("blb4").classList.remove('poweredOn');
document.getElementById("swt4").classList.remove('btnActive');
bit4 = false;
denary = denary - 4;
updateBinary();
}else{
document.getElementById("blb4").classList.add('poweredOn');
document.getElementById("blb4").classList.remove('poweredOff');
document.getElementById("swt4").classList.add('btnActive');
bit4 = true;
denary = denary + 4;
updateBinary();
}
}
function changeClass2(){
if (bit2){
document.getElementById("blb2").classList.add('poweredOff');
document.getElementById("blb2").classList.remove('poweredOn');
document.getElementById("swt2").classList.remove('btnActive');
bit2 = false;
denary = denary - 2;
updateBinary();
}else{
document.getElementById("blb2").classList.add('poweredOn');
document.getElementById("blb2").classList.remove('poweredOff');
document.getElementById("swt2").classList.add('btnActive');
bit2 = true;
denary = denary + 2;
updateBinary();
}
}
function changeClass1(){
if (bit1){
document.getElementById("blb1").classList.add('poweredOff');
document.getElementById("blb1").classList.remove('poweredOn');
document.getElementById("swt1").classList.remove('btnActive');
bit1 = false;
denary = denary - 1;
updateBinary();
}else{
document.getElementById("blb1").classList.add('poweredOn');
document.getElementById("blb1").classList.remove('poweredOff');
document.getElementById("swt1").classList.add('btnActive');
bit1 = true;
denary = denary + 1;
updateBinary();
}
}
// ** Update binary string and denary display **
function updateBinary() {
binary = ""
if(bit256){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit128){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit64){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit32){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit16){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit8){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit4){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit2){
binary = binary + "1"
}else{
binary = binary + "0"
}
if(bit1){
binary = binary + "1"
}else{
binary = binary + "0"
}
document.getElementById("denaryNumber").innerHTML = denary;
document.getElementById("binaryNumber").innerHTML = binary;
}
function convertToBinary(num){
var result = ""
if(num-8>=0){
num = num-8;
result = result + "1";
}else{
result = result + "0";
}
if(num-4>=0){
num = num-4;
result = result + "1";
}else{
result = result + "0";
}
if(num-2>=0){
num = num-2;
result = result + "1";
}else{
result = result + "0";
}
if(num-1>=0){
num = num-1;
result = result + "1";
}else{
result = result + "0";
}
return result
}
function binaryParser(binaryPattern){
for (let i = 0; i < binaryPattern.length; i++) {
if ((binaryPattern[i] == 0) || (binaryPattern[i] == 1)){
validInput = true;
}else{
validInput = false;
alert("Invalid pattern! Digit\n"+ i+" is not a 0 or a 1.\nIt is a "+ binaryPattern[i]);
return validInput
};
};
return validInput;
const binary = bitValues.map(bit => (bits[getBitKey(bit)] ? '1' : '0')).join('');
document.getElementById("denaryNumber").innerText = denary;
document.getElementById("binaryNumber").innerText = binary;
}
// ** Parse a custom binary string and set bits accordingly **
function customBinaryParser(binaryPattern) {
resetBinarySimulator();
missingDigits = 9 - binaryPattern.length
for (let j = 0; j < missingDigits; j++){
binaryPattern = 0 + binaryPattern;
};
for (let i = 0; i < binaryPattern.length; i++) {
if (binaryPattern[i] == 1){
if (i == 0){
changeClass256();
}else if (i == 1){
changeClass128();
}else if (i == 2){
changeClass64();
}else if (i == 3){
changeClass32();
}else if (i == 4){
changeClass16();
}else if (i == 5){
changeClass8();
}else if (i == 6){
changeClass4();
}else if (i == 7){
changeClass2();
}else if (i == 8){
changeClass1();
}
}
binaryPattern = binaryPattern.padStart(8, '0'); // Ensure 8-bit format
binaryPattern.split('').forEach((bit, index) => {
if (bit === '1') {
changeBit(bitValues[index]);
}
});
}
function requestBinary(){
do{
customBinary = prompt("Please enter your 9-bit Binary Value");
if (customBinary){
var binaryLength = customBinary.length;
}else{
var binaryLength = 0;
};
do{
if (binaryLength>9){
customBinary = prompt("Too many digits.\n\nPlease enter your 9-bit Binary Value");
if (customBinary){
binaryLength = customBinary.length;
}else{
binaryLength = 0;
};
};
} while (binaryLength > 9);
let validInput = binaryParser(customBinary);
} while (!validInput);
customBinaryParser(customBinary);
}
// ** Parse a custom denary value and set bits accordingly **
function customDenaryParser(customDenary) {
resetBinarySimulator();
let columnValues = [256,128,64,32,16,8,4,2,1]
for (let i = 0; i < 10; i++) {
if (!(customDenary-columnValues[i] < 0)){
customDenary = customDenary - columnValues[i];
if (i == 0){
changeClass256();
}else if (i == 1){
changeClass128();
}else if (i == 2){
changeClass64();
}else if (i == 3){
changeClass32();
}else if (i == 4){
changeClass16();
}else if (i == 5){
changeClass8();
}else if (i == 6){
changeClass4();
}else if (i == 7){
changeClass2();
}else if (i == 8){
changeClass1();
const min = twosComplementCheck ? -128 : 0;
const max = twosComplementCheck ? 127 : 255;
if (customDenary === null) {
customDenary = 0; // Default to 0 if user cancels input
}
if (customDenary == 0){
if (customDenary < min || customDenary > max) {
alert(`Invalid input! Please enter a denary value between ${min} and ${max}.`);
return requestDenary(); // Prompt user again
}
resetBinarySimulator();
if (twosComplementCheck && customDenary < 0) {
let absDenary = Math.abs(customDenary);
if (customDenary === -128) {
changeBit(-128);
} else {
bitValues.forEach(bit => {
if (absDenary >= Math.abs(bit)) {
changeBit(bit);
absDenary -= Math.abs(bit);
}
});
twosComplementFlip();
}
} else {
bitValues.forEach(bit => {
if (customDenary >= Math.abs(bit)) {
changeBit(bit);
customDenary -= Math.abs(bit);
}
});
}
}
// ** Handle logical binary shifting (left or right) **
function shiftBinary(direction) {
const binaryString = document.getElementById("binaryNumber").innerText;
let shiftedBinary;
if (direction === 'left') {
shiftedBinary = binaryString.slice(1) + '0';
} else if (direction === 'right') {
shiftedBinary = '0' + binaryString.slice(0, -1);
}
customBinaryParser(shiftedBinary);
}
// ** Handle arithmetic shifting for 2's complement **
function shiftTwosComplement(direction) {
const binaryString = document.getElementById("binaryNumber").innerText;
let shiftedBinary;
if (direction === 'left') {
shiftedBinary = binaryString.slice(1) + '0';
} else if (direction === 'right') {
shiftedBinary = binaryString[0] + binaryString.slice(0, -1);
}
customBinaryParser(shiftedBinary);
}
// ** Flip binary bits for 2's complement **
function twosComplementFlip() {
let binary = document.getElementById("binaryNumber").innerText;
const flippedBinary = binary.split('').map(bit => (bit === '1' ? '0' : '1')).join('');
const result = addBinaryNumbers(flippedBinary, '00000001');
customBinaryParser(result.binaryResult);
}
// ** Add two binary numbers **
function addBinaryNumbers(binary1, binary2) {
let carry = 0;
let result = '';
for (let i = 7; i >= 0; i--) {
const bit1 = parseInt(binary1[i], 10) || 0;
const bit2 = parseInt(binary2[i], 10) || 0;
const sum = bit1 + bit2 + carry;
result = (sum % 2) + result;
carry = Math.floor(sum / 2);
}
return { binaryResult: result.slice(-8), overflow: carry ? '1' : '0' };
}
// ** Helper to normalize bit keys **
function getBitKey(bitValue) {
return bitValue < 0 ? `N${Math.abs(bitValue)}` : bitValue.toString();
}
// ** Request binary input from user **
function requestBinary() {
let binary;
do {
binary = prompt("Please enter an 8-bit Binary Value (only 0s and 1s are allowed):");
if (binary === null) {
binary = "00000000"; // Default to 0 if user cancels input
break;
}
if (!/^[01]{1,8}$/.test(binary)) {
alert("Invalid input! Binary values must be up to 8 digits long and only contain 0 or 1.");
}
}
} while (!/^[01]{1,8}$/.test(binary));
customBinaryParser(binary);
}
// ** Request denary input from user **
function requestDenary() {
customDenary = prompt("Please enter your Denary Value\nMax value is 511");
let customDenary;
const min = twosComplementCheck ? -128 : 0;
const max = twosComplementCheck ? 127 : 255;
do {
if (customDenary > 511){
customDenary = prompt("Number too large.\n\nPlease enter your Denary Value.\nMax value is 511");
};
} while (customDenary > 511);
customDenary = prompt(`Enter a Denary Value (${min} to ${max}):`);
if (customDenary === null) {
customDenary = 0; // Default to 0 if user cancels input
break;
}
customDenary = parseInt(customDenary, 10);
if (isNaN(customDenary) || customDenary < min || customDenary > max) {
alert(`Invalid input! Please enter a denary value between ${min} and ${max}.`);
}
} while (isNaN(customDenary) || customDenary < min || customDenary > max);
customDenaryParser(customDenary);
}
// ** On page load, initialize the simulator **
document.addEventListener("DOMContentLoaded", initialize);
}

329
Export/assets/js/hexColours.js
View File

@@ -1,182 +1,61 @@
denary = 0
redDenary = 0
greenDenary = 0
blueDenary = 0
redBinary = ""
greenBinary = ""
blueBinary = ""
hexadecimal = ""
placeR1 = 0
placeR16 = 0
placeG1 = 0
placeG16 = 0
placeB1 = 0
placeB16 = 0
const LIGHT_MULTIPLIER = 100 / 15;
const COLORS = ['R', 'G', 'B'];
const PLACES = [1, 16];
let denary = 0;
let redDenary = 0;
let greenDenary = 0;
let blueDenary = 0;
let redBinary = "";
let greenBinary = "";
let blueBinary = "";
let hexadecimal = "";
const places = {
R16: 0, R1: 0,
G16: 0, G1: 0,
B16: 0, B1: 0
};
function resetColours() {
resetPlaceR16();
resetPlaceR1();
resetPlaceG16();
resetPlaceG1();
resetPlaceB16();
resetPlaceB1();
COLORS.forEach(color => {
PLACES.forEach(place => {
resetPlace(color, place);
});
});
}
function resetPlaceR16(){
placeR16 = 0
var lightR16 = (100/15 * placeR16) / 100
document.getElementById("blbR2").style.opacity = lightR16;
function resetPlace(color, place) {
const placeKey = `${color}${place}`;
places[placeKey] = 0;
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
document.getElementById(`blb${placeKey}`).style.opacity = light;
updateColours();
}
function resetPlaceR1(){
placeR1 = 0
var lightR1 = (100/15 * placeR1) / 100
document.getElementById("blbR1").style.opacity = lightR1;
updateColours();
}
function resetPlaceG16(){
placeG16 = 0
var lightG16 = (100/15 * placeG16) / 100
document.getElementById("blbG2").style.opacity = lightG16;
updateColours();
}
function resetPlaceG1(){
placeG1 = 0
var lightG1 = (100/15 * placeG1) / 100
document.getElementById("blbG1").style.opacity = lightG1;
updateColours();
}
function resetPlaceB16(){
placeB16 = 0
var lightB16 = (100/15 * placeB16) / 100
document.getElementById("blbB2").style.opacity = lightB16;
updateColours();
}
function resetPlaceB1(){
placeB1 = 0
var lightB1 = (100/15 * placeB1) / 100
document.getElementById("blbB1").style.opacity = lightB1;
updateColours();
}
function toggleUpR16(){
if (placeR16 >= 0){
if (placeR16 < 15){
placeR16 = placeR16 + 1;
var lightR16 = (100/15 * placeR16) / 100
document.getElementById("blbR2").style.opacity = lightR16;
updateColours();
}
}
}
function toggleDownR16(){
if (placeR16 > 0){
placeR16 = placeR16 - 1;
var lightR16 = (100/15 * placeR16) / 100
document.getElementById("blbR2").style.opacity = lightR16;
updateColours();
}
}
function toggleUpR1(){
if (place1 >= 0){
if (placeR1 < 15){
placeR1 = placeR1 + 1;
var lightR1 = (100/15 * placeR1) / 100
document.getElementById("blbR1").style.opacity = lightR1;
updateColours();
}
}
}
function toggleDownR1(){
if (placeR1 > 0){
placeR1 = placeR1 - 1;
var lightR1 = (100/15 * placeR1) / 100
document.getElementById("blbR1").style.opacity = lightR1;
updateColours();
}
}
function toggleUpG16(){
if (placeG16 >= 0){
if (placeG16 < 15){
placeG16 = placeG16 + 1;
var lightG16 = (100/15 * placeG16) / 100
document.getElementById("blbG2").style.opacity = lightG16;
updateColours();
}
}
}
function toggleDownG16(){
if (placeG16 > 0){
placeG16 = placeG16 - 1;
var lightG16 = (100/15 * placeG16) / 100
document.getElementById("blbG2").style.opacity = lightG16;
updateColours();
}
}
function toggleUpG1(){
if (placeG1 >= 0){
if (placeG1 < 15){
placeG1 = placeG1 + 1;
var lightG1 = (100/15 * placeG1) / 100
document.getElementById("blbG1").style.opacity = lightG1;
updateColours();
}
}
}
function toggleDownG1(){
if (placeG1 > 0){
placeG1 = placeG1 - 1;
var lightG1 = (100/15 * placeG1) / 100
document.getElementById("blbG1").style.opacity = lightG1;
updateColours();
}
}
function toggleUpB16(){
if (placeB16 >= 0){
if (placeB16 < 15){
placeB16 = placeB16 + 1;
var lightB16 = (100/15 * placeB16) / 100
document.getElementById("blbB2").style.opacity = lightB16;
updateColours();
}
}
}
function toggleDownB16(){
if (placeB16 > 0){
placeB16 = placeB16 - 1;
var lightB16 = (100/15 * placeB16) / 100
document.getElementById("blbB2").style.opacity = lightB16;
updateColours();
}
}
function toggleUpB1(){
if (placeB1 >= 0){
if (placeB1 < 15){
placeB1 = placeB1 + 1;
var lightB1 = (100/15 * placeB1) / 100
document.getElementById("blbB1").style.opacity = lightB1;
updateColours();
}
}
}
function toggleDownB1(){
if (placeB1 > 0){
placeB1 = placeB1 - 1;
var lightB1 = (100/15 * placeB1) / 100
document.getElementById("blbB1").style.opacity = lightB1;
function togglePlace(color, place, direction) {
const placeKey = `${color}${place}`;
const currentValue = places[placeKey];
if ((direction === 'up' && currentValue < 15) || (direction === 'down' && currentValue > 0)) {
places[placeKey] += direction === 'up' ? 1 : -1;
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
document.getElementById(`blb${placeKey}`).style.opacity = light;
updateColours();
}
}
function updateColours() {
hexadecimal = "";
redDenary = 0
greenDenary = 0
blueDenary = 0
redBinary = ""
greenBinary = ""
blueBinary = ""
denary = ((placeR16*16)+(placeR1))+", "+((placeG16*16)+(placeG1))+", "+((placeB16*16)+(placeB1));
hexadecimal = "#" + convertToHex(placeR16) + convertToHex(placeR1) + convertToHex(placeG16) + convertToHex(placeG1) + convertToHex(placeB16) + convertToHex(placeB1);
redBinary = convertToBinary(placeR16) + convertToBinary(placeR1);
greenBinary = convertToBinary(placeG16) + convertToBinary(placeG1);
blueBinary = convertToBinary(placeB16) + convertToBinary(placeB1);
redDenary = (places.R16 * 16) + places.R1;
greenDenary = (places.G16 * 16) + places.G1;
blueDenary = (places.B16 * 16) + places.B1;
denary = `${redDenary}, ${greenDenary}, ${blueDenary}`;
hexadecimal = `#${convertToHex(places.R16)}${convertToHex(places.R1)}${convertToHex(places.G16)}${convertToHex(places.G1)}${convertToHex(places.B16)}${convertToHex(places.B1)}`;
redBinary = `${convertToBinary(places.R16)}${convertToBinary(places.R1)}`;
greenBinary = `${convertToBinary(places.G16)}${convertToBinary(places.G1)}`;
blueBinary = `${convertToBinary(places.B16)}${convertToBinary(places.B1)}`;
document.getElementById("denaryNumber").innerHTML = denary;
document.getElementById("hexadecimalNumber").innerHTML = hexadecimal;
document.getElementById("colouredHex").style.backgroundColor = hexadecimal;
@@ -185,116 +64,50 @@
document.getElementById("blueBinaryNumber").innerHTML = blueBinary;
document.getElementById("greenBinaryNumber").innerHTML = greenBinary;
}
function invertedHex() {
hexadecimal = "#" + convertToHex((15-placeR16)) + convertToHex((15-placeR1)) + convertToHex((15-placeG16)) + convertToHex((15-placeG1)) + convertToHex((15-placeB16)) + convertToHex((15-placeB1));
return hexadecimal;
return `#${convertToHex(15 - places.R16)}${convertToHex(15 - places.R1)}${convertToHex(15 - places.G16)}${convertToHex(15 - places.G1)}${convertToHex(15 - places.B16)}${convertToHex(15 - places.B1)}`;
}
function convertToHex(num) {
var remainder = num - 9
if(remainder<=0){
return num.toString();
}else{
if(remainder==1){
return "A";
}else if(remainder == 2){
return "B";
}else if(remainder == 3){
return "C";
}else if(remainder == 4){
return "D";
}else if(remainder == 5){
return "E";
}else if(remainder == 6){
return "F";
}
}
return num < 10 ? num.toString() : String.fromCharCode(55 + num); // 55 = ASCII offset for A (65) - 10
}
function convertToBinary(num) {
var result = ""
if(num-8>=0){
num = num-8;
result = result + "1";
}else{
result = result + "0";
}
if(num-4>=0){
num = num-4;
result = result + "1";
}else{
result = result + "0";
}
if(num-2>=0){
num = num-2;
result = result + "1";
}else{
result = result + "0";
}
if(num-1>=0){
num = num-1;
result = result + "1";
}else{
result = result + "0";
}
return result
return num.toString(2).padStart(4, '0');
}
function updateHex(customHex) {
if (customHex == null){
if (!customHex) {
resetColours();
} else {
let char = customHex.charAt(0);
if(char == "#"){
customHex = customHex.substring(1);
}
if (isHex(customHex)){
let hexArray = customHex.split('');
placeR1 = parseInt(hexArray[1], 16);
var lightR1 = (100/15 * placeR1) / 100;
document.getElementById("blbR1").style.opacity = lightR1;
placeR16 = parseInt(hexArray[0], 16);
var lightR16 = (100/15 * placeR16) / 100;
document.getElementById("blbR2").style.opacity = lightR16;
placeG1 = parseInt(hexArray[3], 16);
var lightG1 = (100/15 * placeG1) / 100;
document.getElementById("blbG1").style.opacity = lightG1;
placeG16 = parseInt(hexArray[2], 16);
var lightG16 = (100/15 * placeG16) / 100;
document.getElementById("blbG2").style.opacity = lightG16;
placeB1 = parseInt(hexArray[5], 16);
var lightB1 = (100/15 * placeB1) / 100;
document.getElementById("blbB1").style.opacity = lightB1;
placeB16 = parseInt(hexArray[4], 16);
var lightB16 = (100/15 * placeB16) / 100;
document.getElementById("blbB2").style.opacity = lightB16;
if (customHex.charAt(0) === "#") customHex = customHex.slice(1);
if (isHex(customHex) && customHex.length === 6) {
customHex.split('').forEach((digit, i) => {
const color = COLORS[Math.floor(i / 2)];
const place = i % 2 === 0 ? 16 : 1;
const placeKey = `${color}${place}`;
places[placeKey] = parseInt(digit, 16);
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
document.getElementById(`blb${placeKey}`).style.opacity = light;
});
updateColours();
} else {
window.alert("Invalid Entry");
alert("Invalid Entry");
resetColours();
}
}
}
function isHex(str) {
regexp = /^[0-9a-fA-F]+$/;
if (regexp.test(str)){
return true;
}else{
return false;
}
return /^[0-9A-Fa-f]+$/.test(str);
}
function requestHex() {
let customHex = prompt("Please enter your Hex Value");
const customHex = prompt("Please enter your Hex Value");
updateHex(customHex);
}
function invertHex() {
customHex = invertedHex();
updateHex(customHex);
updateHex(invertedHex());
}

202
Export/assets/js/hexadecimal.js
View File

@@ -1,159 +1,63 @@
denary = 0
binary = ""
hexadecimal = ""
place1 = 0
place16 = 0
place256 = 0
place4096 = 0
slider4096 = document.getElementById("slider4096");
slider256 = document.getElementById("slider256");
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
let hexLength = hexadecimalNumber.length
if(hexLength==4){
slider4096.addEventListener("change", update4096);
slider256.addEventListener("change", update256);
}
slider16 = document.getElementById("slider16");
slider1 = document.getElementById("slider1");
slider16.addEventListener("change", update16);
slider1.addEventListener("change", update1);
// Ensure the script only runs if the URL path contains "hexadecimal"
if (window.location.pathname.includes('hexadecimal')) {
function resetHexadecimal(){
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
let hexLength = hexadecimalNumber.length;
if(hexLength==4){
resetPlace4096();
resetPlace256();
const isGCSE = window.location.pathname.includes('gcse-hexadecimal');
const hexLength = isGCSE ? 2 : 4;
const binaryLength = isGCSE ? 8 : 16;
const maxDenary = isGCSE ? 255 : 65535;
const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
const sliders = {};
const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];
// Attach event listeners for sliders
['slider1', 'slider16', 'slider256', 'slider4096'].forEach((sliderId) => {
const slider = document.getElementById(sliderId);
if (slider) {
sliders[sliderId] = slider;
slider.addEventListener("input", (e) => {
e.stopPropagation(); // Prevent event propagation to Bootstrap
updatePlace(parseInt(sliderId.replace('slider', ''), 10));
});
}
resetPlace16();
resetPlace1();
}
function resetPlace4096(){
place4096 = 0;
document.getElementById("slider4096").value=0;
var light4096 = (100/15 * place4096) / 100;
document.getElementById("blb4").style.opacity = light4096;
});
function updatePlace(place) {
if (sliders[`slider${place}`]) {
placeValues[place] = parseInt(sliders[`slider${place}`].value, 10);
updateNumbers();
}
function resetPlace256(){
place256 = 0;
document.getElementById("slider256").value=0;
var light256 = (100/15 * place256) / 100;
document.getElementById("blb3").style.opacity = light256;
updateNumbers();
}
function resetPlace16(){
place16 = 0;
document.getElementById("slider16").value=0;
var light16 = (100/15 * place16) / 100;
document.getElementById("blb2").style.opacity = light16;
updateNumbers();
}
function resetPlace1(){
place1 = 0;
document.getElementById("slider1").value=0;
var light1 = (100/15 * place1) / 100;
document.getElementById("blb1").style.opacity = light1;
updateNumbers();
}
function update4096(){
place4096 = document.getElementById("slider4096").value;
var light4096 = (100/15 * place4096) / 100;
document.getElementById("blb4").style.opacity = light4096;
updateNumbers();
}
function update256(){
place256 = document.getElementById("slider256").value;
var light256 = (100/15 * place256) / 100;
document.getElementById("blb3").style.opacity = light256;
updateNumbers();
}
function update16(){
place16 = document.getElementById("slider16").value;
var light16 = (100/15 * place16) / 100;
document.getElementById("blb2").style.opacity = light16;
updateNumbers();
}
function update1(){
place1 = document.getElementById("slider1").value;
var light1 = (100/15 * place1) / 100;
document.getElementById("blb1").style.opacity = light1;
updateNumbers();
}
function updateNumbers() {
binary = "";
hexadecimal = "";
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
let hexLength = hexadecimalNumber.length;
if(hexLength==4){
denary = (place4096*4096)+(place256*256)+(place16*16)+(place1);
hexadecimal = convertToHex(place4096) + convertToHex(place256) + convertToHex(place16) + convertToHex(place1);
binary = convertToBinary(place4096) + convertToBinary(place256) + convertToBinary(place16) + convertToBinary(place1);
}else if(hexLength==2){
denary = (place16*16)+(place1);
hexadecimal = convertToHex(place16) + convertToHex(place1);
binary = convertToBinary(place16) + convertToBinary(place1);
}
document.getElementById("denaryNumber").innerHTML = denary;
document.getElementById("hexadecimalNumber").innerHTML = hexadecimal;
document.getElementById("binaryNumber").innerHTML = binary;
}
function convertToHex(num){
var remainder = num - 9;
if(remainder<=0){
return num.toString();
}else{
if(remainder==1){
return "A";
}else if(remainder == 2){
return "B";
}else if(remainder == 3){
return "C";
}else if(remainder == 4){
return "D";
}else if(remainder == 5){
return "E";
}else if(remainder == 6){
return "F";
}
}
}
function convertToBinary(num){
var result = "";
if(num-8>=0){
num = num-8;
result = result + "1";
}else{
result = result + "0";
}
if(num-4>=0){
num = num-4;
result = result + "1";
}else{
result = result + "0";
}
if(num-2>=0){
num = num-2;
result = result + "1";
}else{
result = result + "0";
}
if(num-1>=0){
num = num-1;
result = result + "1";
}else{
result = result + "0";
}
return result
let denary = 0;
let binary = '';
let hexadecimal = '';
columnValues.forEach((column) => {
const value = placeValues[column];
denary += value * column;
binary += convertToBinary(value);
hexadecimal += convertToHex(value);
});
binary = binary.slice(-binaryLength).padStart(binaryLength, '0');
hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, '0');
document.getElementById("binaryNumber").innerText = binary;
document.getElementById("denaryNumber").innerText = denary;
document.getElementById("hexadecimalNumber").innerText = hexadecimal;
}
function updateHexNumber(){
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
let hexLength = hexadecimalNumber.length
if(hexLength==4){
update4096();
update256();
function convertToBinary(num) {
return num.toString(2).padStart(4, '0');
}
update16();
update1();
function convertToHex(num) {
return num.toString(16).toUpperCase();
}
document.addEventListener('DOMContentLoaded', () => {
updateNumbers();
});
}

161
Export/assets/js/logicGates.js
View File

@@ -1,100 +1,77 @@
notValue = true
andValue = false
input1 = false
input2 = false
orValue = false
function notGateToggle(){
if (notValue){
document.getElementById("blbNotGate").classList.remove('poweredOn');
document.getElementById("blbNotGate").classList.add('poweredOff');
document.getElementById("swtNotGate").classList.add('btnActive');
notValue = false;
}else{
document.getElementById("blbNotGate").classList.remove('poweredOff');
document.getElementById("blbNotGate").classList.add('poweredOn');
document.getElementById("swtNotGate").classList.remove('btnActive');
notValue = true;
}
let notValue = true;
let andValue = false;
let orValue = false;
let input1 = false;
let input2 = false;
const pageHeading = document.getElementById("pageHeading")?.textContent || "";
// **Toggle any gate input (e.g., input1, input2, or NOT gate)**
function toggleGate(gateType) {
const gateKey = gateType === 'NOT' ? 'NotGate' : `Input${gateType}`;
const gateSwitch = document.getElementById(`swt${gateKey}`);
const isActive = gateType === '1' ? input1 : gateType === '2' ? input2 : notValue;
const newValue = !isActive;
if (gateType === '1') input1 = newValue;
if (gateType === '2') input2 = newValue;
if (gateType === 'NOT') notValue = newValue;
gateSwitch?.classList.toggle('btnActive', newValue);
updateGates();
}
function input1Toggle(){
if (input1){
input1 = false;
document.getElementById("swtInput1").classList.remove('btnActive');
}else{
input1 = true;
document.getElementById("swtInput1").classList.add('btnActive');
}
let pageHeading = document.getElementById("pageHeading").textContent;
if(pageHeading=="AND Gate"){
andGateUpdate()
}else if(pageHeading=="OR Gate"){
orGateUpdate()
}
// **Update AND, OR, and NOT gates based on the current input state**
function updateGates() {
if (pageHeading === "AND Gate") updateGate('AndGate', input1 && input2);
if (pageHeading === "OR Gate") updateGate('OrGate', input1 || input2);
if (pageHeading === "NOT Gate") updateGate('NotGate', !notValue);
}
function input2Toggle(){
if (input2){
input2 = false;
document.getElementById("swtInput2").classList.remove('btnActive');
}else{
input2 = true;
document.getElementById("swtInput2").classList.add('btnActive');
}
let pageHeading = document.getElementById("pageHeading").textContent;
if(pageHeading=="AND Gate"){
andGateUpdate()
}else if(pageHeading=="OR Gate"){
orGateUpdate()
}
}
function andGateUpdate(){
if (input1 && input2){
document.getElementById("blbAndGate").classList.remove('poweredOff');
document.getElementById("blbAndGate").classList.add('poweredOn');
andValue = true;
}else{
if (andValue){
document.getElementById("blbAndGate").classList.remove('poweredOn');
document.getElementById("blbAndGate").classList.add('poweredOff');
andValue = false;
}
}
}
function orGateUpdate(){
if (input1 || input2){
if (!orValue){
document.getElementById("blbOrGate").classList.remove('poweredOff');
document.getElementById("blbOrGate").classList.add('poweredOn');
orValue = true;
}
}else{
if (orValue){
document.getElementById("blbOrGate").classList.remove('poweredOn');
document.getElementById("blbOrGate").classList.add('poweredOff');
orValue = false;
}
}
// **Toggle the output bulb for a gate (e.g., AndGate, OrGate, or NotGate)**
function updateGate(gateName, isActive) {
const bulb = document.getElementById(`blb${gateName}`);
if (!bulb) return;
bulb.classList.toggle('poweredOn', isActive);
bulb.classList.toggle('poweredOff', !isActive);
if (gateName === 'AndGate') andValue = isActive;
if (gateName === 'OrGate') orValue = isActive;
}
// **Reset the gate to its default state**
function resetGate() {
let pageHeading = document.getElementById("pageHeading").textContent;
if(pageHeading=="AND Gate" || pageHeading=="OR Gate"){
input1 = false;
document.getElementById("swtInput1").classList.remove('btnActive');
input2 = false;
document.getElementById("swtInput2").classList.remove('btnActive');
if(pageHeading=="AND Gate"){
andGateUpdate()
}else if(pageHeading=="OR Gate"){
orGateUpdate()
};
}else if(pageHeading=="NOT Gate"){
document.getElementById("blbNotGate").classList.add('poweredOn');
document.getElementById("blbNotGate").classList.remove('poweredOff');
document.getElementById("swtNotGate").classList.remove('btnActive');
notValue = false;
};
if (pageHeading === "AND Gate" || pageHeading === "OR Gate") {
resetInput('1');
resetInput('2');
} else if (pageHeading === "NOT Gate") {
resetNotGate();
}
updateGates();
}
// **Reset the inputs for Input1 or Input2**
function resetInput(inputNumber) {
if (inputNumber === '1') input1 = false;
if (inputNumber === '2') input2 = false;
const switchElement = document.getElementById(`swtInput${inputNumber}`);
if (switchElement) switchElement.classList.remove('btnActive');
}
// **Reset the NOT gate to its default state**
function resetNotGate() {
notValue = false; // NOT Gate logic is inverted, so this is "off" input
const bulb = document.getElementById("blbNotGate");
const switchElement = document.getElementById("swtNotGate");
if (bulb) {
bulb.classList.add('poweredOn'); // Light should be on
bulb.classList.remove('poweredOff');
}
if (switchElement) {
switchElement.classList.remove('btnActive'); // Button should be off (inactive)
}
}

1
Export/assets/js/script.min.js vendored
View File

File diff suppressed because one or more lines are too long

122
Export/gcse-hexadecimal.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - CS:Box</title>
<title>GCSE Hexadecimal 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,20 +134,36 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">Binary</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link fw-bold link-success" 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 fw-bold link-success" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item active" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">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">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section>
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;">
<div class="row">
@@ -141,7 +176,7 @@
<div class="col-xl-12 bottomSpacer"></div>
</div>
</div>
<div class="col-xl-6" style="width: 40%;">
<div class="col-xl-6" style="width: 60%;">
<div class="row">
<div class="col-xl-12">
<h1 class="simHeading">Denary</h1>
@@ -153,7 +188,7 @@
</div>
</div>
</div>
<div class="col-md-6" style="width: 30%;">
<div class="col-md-6" style="width: 20%;">
<div class="row">
<div class="col">
<h1 class="simHeading">Hexadecimal</h1>
@@ -165,7 +200,24 @@
</div>
</div>
</div>
<div class="col-xl-6" style="width: 100%;">
</div>
<div class="row">
<div class="col centred" style="width: 30%;">
<div class="row">
<div class="col-xl-12 bottomSpacer"></div>
<div class="col centred" style="width: 35%;">
<div class="row">
<div class="col-xl-12 bottomSpacer">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6" style="width: 60%;">
<div class="row">
<div class="col-xl-12">
<h1 class="simHeading">Binary</h1>
@@ -177,10 +229,18 @@
</div>
</div>
</div>
<div class="col-md-6" style="width: 20%;">
<div class="row">
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestHexadecimal()">Custom Hexadecimal</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestDenaryForHexadecimal()">Custom Denary</button></div>
</div>
</div>
</div>
</div><!-- End: 1 Row 2 Columns -->
<div class="container d-xl-flex justify-content-xl-center centred">
<form oninput="updateHexNumber()">
<form oninput="updateNumbers()">
<div class="table-responsive text-center d-xl-flex justify-content-xl-center">
<table class="table table-borderless">
<thead>
@@ -203,8 +263,8 @@
</td>
</tr>
<tr>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider16" step="1" max="15" min="0" value="0"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider1" step="1" max="15" min="0" value="0"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider16" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider1" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
</tr>
<tr>
<td class="text-center">
@@ -215,8 +275,8 @@
</td>
</tr>
<tr>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt2reset-1" type="button" onclick="resetPlace16()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt1reset-1" type="button" onclick="resetPlace1()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt2reset-1" type="button" onclick="resetPlace(16)">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt1reset-1" type="button" onclick="resetPlace(1)">Reset</button></td>
</tr>
</tbody>
</table>
@@ -241,13 +301,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -265,11 +327,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

127
Export/hex-colours.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - CS:Box</title>
<title>Hex Colours - 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,20 +134,36 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">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">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link active" href="hex-colours">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">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section>
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;">
<div class="row">
@@ -138,10 +173,10 @@
<div style="position: absolute;"><img class="overlay resetIcon" src="/assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetColours()"></div>
</div>
<div class="row">
<div class="col spacer"><button class="btn btn-primary hexColourButtons" type="button" onclick="requestHex()">Custom Hex Code</button></div>
<div class="col spacer"><button class="btn btn-primary hexColourButtons customiserButtons" type="button" onclick="requestHex()">Custom Hex Code</button></div>
</div>
<div class="row">
<div class="col spacer"><button class="btn btn-primary hexColourButtons" type="button" onclick="invertHex()">Invert Colour</button></div>
<div class="col spacer"><button class="btn btn-primary hexColourButtons customiserButtons" type="button" onclick="invertHex()">Invert Colour</button></div>
</div>
</div>
<div class="col-xl-4" style="width: 40%;">
@@ -212,7 +247,7 @@
<thead>
<tr>
<th class="stacked">
<h1 id="blbR2" class="bulbs">💡<br></h1>
<h1 id="blbR16" class="bulbs">💡<br></h1>
</th>
<th class="stacked">
<h1 id="blbR1" class="bulbs">💡<br></h1>
@@ -229,28 +264,28 @@
</td>
</tr>
<tr>
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtRed16Up" onclick="toggleUpR16()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtRed16Up" onclick="togglePlace(&quot;R&quot;, &quot;16&quot;, &quot;up&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
</svg></button></td>
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtRed1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="toggleUpR1()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtRed1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="togglePlace(&quot;R&quot;, &quot;1&quot;, &quot;up&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
</svg></button></td>
</tr>
<tr>
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtRed16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="toggleDownR16()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtRed16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace(&quot;R&quot;, &quot;16&quot;, &quot;down&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
</svg></button></td>
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtRed1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="toggleDownR1()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtRed1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace(&quot;R&quot;, &quot;1&quot;, &quot;down&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
</svg></button></td>
</tr>
<tr>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtRed16Reset" type="button" onclick="resetPlaceR16()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtRed1Reset" type="button" onclick="resetPlaceR1()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtRed16Reset" type="button" onclick="resetPlace(&quot;R&quot;, &quot;16&quot;)">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtRed1Reset" type="button" onclick="resetPlace(&quot;R&quot;, &quot;1&quot;)">Reset</button></td>
</tr>
</tbody>
</table>
@@ -260,7 +295,7 @@
<thead>
<tr>
<th class="stacked">
<h1 id="blbG2" class="bulbs">💡<br></h1>
<h1 id="blbG16" class="bulbs">💡<br></h1>
</th>
<th class="stacked">
<h1 id="blbG1" class="bulbs">💡<br></h1>
@@ -277,28 +312,28 @@
</td>
</tr>
<tr>
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtGreen16Up" onclick="toggleUpG16()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtGreen16Up" onclick="togglePlace(&quot;G&quot;, &quot;16&quot;, &quot;up&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
</svg></button></td>
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtGreen1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="toggleUpG1()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtGreen1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="togglePlace(&quot;G&quot;, &quot;1&quot;, &quot;up&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
</svg></button></td>
</tr>
<tr>
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtGreen16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="toggleDownG16()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtGreen16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace(&quot;G&quot;, &quot;16&quot;, &quot;down&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
</svg></button></td>
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtGreen1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="toggleDownG1()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtGreen1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace(&quot;G&quot;, &quot;1&quot;, &quot;down&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
</svg></button></td>
</tr>
<tr>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtGreen16Reset" type="button" onclick="resetPlaceG16()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtGreen1Reset" type="button" onclick="resetPlaceG1()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtGreen16Reset" type="button" onclick="resetPlace(&quot;G&quot;, &quot;16&quot;)">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtGreen1Reset" type="button" onclick="resetPlace(&quot;G&quot;, &quot;1&quot;)">Reset</button></td>
</tr>
</tbody>
</table>
@@ -308,7 +343,7 @@
<thead>
<tr>
<th class="stacked">
<h1 id="blbB2" class="bulbs">💡<br></h1>
<h1 id="blbB16" class="bulbs">💡<br></h1>
</th>
<th class="stacked">
<h1 id="blbB1" class="bulbs">💡<br></h1>
@@ -325,28 +360,28 @@
</td>
</tr>
<tr>
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtBlue16Up" onclick="toggleUpB16()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtBlue16Up" onclick="togglePlace(&quot;B&quot;, &quot;16&quot;, &quot;up&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
</svg></button></td>
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtBlue1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="toggleUpB1()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtBlue1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="togglePlace(&quot;B&quot;, &quot;1&quot;, &quot;up&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
</svg></button></td>
</tr>
<tr>
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtBlue16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="toggleDownB16()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtBlue16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace(&quot;B&quot;, &quot;16&quot;, &quot;down&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
</svg></button></td>
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtBlue1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="toggleDownB1()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtBlue1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace(&quot;B&quot;, &quot;1&quot;, &quot;down&quot;)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
</svg></button></td>
</tr>
<tr>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtBlue16Reset" type="button" onclick="resetPlaceB16()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtBlue1Reset" type="button" onclick="resetPlaceB1()">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtBlue16Reset" type="button" onclick="resetPlace(&quot;B&quot;, &quot;16&quot;)">Reset</button></td>
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtBlue1Reset" type="button" onclick="resetPlace(&quot;B&quot;, &quot;1&quot;)">Reset</button></td>
</tr>
</tbody>
</table>
@@ -370,13 +405,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -394,11 +431,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

87
Export/index.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - CS:Box</title>
<title>Welcome to 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">
@@ -103,15 +122,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -123,29 +142,45 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">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">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">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">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section>
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
<!-- Start: Hero Clean Reverse -->
<div class="container py-5">
<div class="row py-5">
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-end mb-4">
<div style="max-width: 450px;">
<p class="fw-bold text-success mb-2">Coming Soon</p>
<p class="fw-bold text-success mb-2">In Active Development</p>
<h2 class="fw-bold">Understand Computer Science concepts better.</h2>
<p class="completeFeatures">Bit:Box Feature Migration - Complete<br>Wave 1 Features Alpha - Available Now</p>
<p class="introP">Wave 1 Features Beta - Easter 2025<br>Wave 2 Features Beta - May 2025<br>Wave 3 Features Beta - July 2025<br><br>Version 1.0 Release - September 2025</p>
<p class="completeFeatures">Bit:Box Feature Migration - Complete<br>Wave 1a Features - Complete<br>Wave 1b Features Alpha - Available Now<br>Wave 1 Features Beta - Available Now</p>
<p class="introP">Wave 2 Features Beta - May 2025<br><br>Version 1.0 Release - September 2025<br><br>Wave 3 Features Beta (Version 2.0) - TBC</p>
</div>
</div>
<div class="col-md-6 mb-4">
@@ -172,13 +207,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -196,11 +233,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

83
Export/not-gate.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Binary Simulator - CS:Box</title>
<title>NOT Gate 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,20 +134,36 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">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">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link fw-bold link-success" 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 fw-bold link-success" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item active" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section style="background: rgb(39,38,46);">
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;">
<div class="row">
@@ -143,7 +178,7 @@
<!-- Start: 1 Row 3 Columns -->
<div class="container">
<div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtNotGate" type="button" onclick="notGateToggle()" style="display: grid;position: relative;margin-top: 2.8em;">⏼</button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/NOT_ANSI.svg/1920px-NOT_ANSI.svg.png" width="460" height="240">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtNotGate" type="button" onclick="toggleGate(&#39;NOT&#39;)" style="display: grid;position: relative;margin-top: 2.8em;">⏼</button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/NOT_ANSI.svg/1920px-NOT_ANSI.svg.png" width="460" height="240">
<h1 id="blbNotGate" class="poweredOn dualInputSingleOutput">💡<br></h1>
</div>
</div>
@@ -170,13 +205,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -194,11 +231,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

83
Export/or-gate.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Binary Simulator - CS:Box</title>
<title>OR Gate 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,20 +134,36 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link" href="binary">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">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link fw-bold link-success" 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">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item fw-bold link-success" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item active" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section style="background: rgb(39,38,46);">
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;">
<div class="row">
@@ -143,7 +178,7 @@
<!-- Start: 1 Row 3 Columns -->
<div class="container">
<div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="input1Toggle()" style="display: grid;position: relative;transform: translate(58px);">⏼</button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="input2Toggle()" style="position: relative;display: grid;">⏼</button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/OR_ANSI.svg/1920px-OR_ANSI.svg.png" width="460" height="240">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleGate(&quot;1&quot;)" style="display: grid;position: relative;transform: translate(58px);">⏼</button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleGate(&quot;2&quot;)" style="position: relative;display: grid;">⏼</button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/OR_ANSI.svg/1920px-OR_ANSI.svg.png" width="460" height="240">
<h1 id="blbOrGate" class="poweredOff dualInputSingleOutput">💡<br></h1>
</div>
</div>
@@ -170,13 +205,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -194,11 +231,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

355
Export/twos-compliment-binary.html Normal file
View File

@@ -0,0 +1,355 @@
<!DOCTYPE html>
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Two's Complement 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() {
// JavaScript snippet handling Dark/Light mode switching
const getStoredTheme = () => localStorage.getItem('theme');
const setStoredTheme = theme => localStorage.setItem('theme', theme);
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
const getPreferredTheme = () => {
if (forcedTheme) return forcedTheme;
const storedTheme = getStoredTheme();
if (storedTheme) {
return storedTheme;
}
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
if (pageTheme) {
return pageTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
document.documentElement.setAttribute('data-bs-theme', theme);
}
}
setTheme(getPreferredTheme());
const showActiveTheme = (theme, focus = false) => {
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
if (!themeSwitchers.length) return;
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active');
element.setAttribute('aria-pressed', 'false');
});
for (const themeSwitcher of themeSwitchers) {
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
if (btnToActivate) {
btnToActivate.classList.add('active');
btnToActivate.setAttribute('aria-pressed', 'true');
}
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme();
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme());
}
});
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme());
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', (e) => {
e.preventDefault();
const theme = toggle.getAttribute('data-bs-theme-value');
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme);
})
})
});
})();
</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=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</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="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item active" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" 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: 60%;">
<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 class="col-md-6" style="width: 20%;">
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestBinary()">Custom Binary</button></div>
</div>
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestDenary()">Custom Denary</button></div>
</div>
</div>
</div>
<div class="row">
<div class="col centred" style="width: 35%;">
<div class="row">
<div class="col-xl-12 bottomSpacer"></div>
</div>
</div>
<div class="col-md-6" style="width: 60%;">
<div class="row">
<div class="col">
<h1 class="simHeading">Binary</h1>
</div>
</div>
<div class="row">
<div class="col">
<h1 id="binaryNumber" class="simData">00000000</h1>
</div>
</div>
</div>
<div class="col-md-6" style="width: 20%;">
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftTwosComplement(&quot;left&quot;)">Left Shift</button></div>
</div>
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftTwosComplement(&quot;right&quot;)">Right Shift</button></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="blbN128" 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">-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="swtN128" type="button" onclick="changeBit(-128)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt64" type="button" onclick="changeBit(64)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt32" type="button" onclick="changeBit(32)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt16" type="button" onclick="changeBit(16)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt8" type="button" onclick="changeBit(8)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt4" type="button" onclick="changeBit(4)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt2" type="button" onclick="changeBit(2)">⏼<br></button></td>
<td class="text-center"><button class="btn btn-primary buttonMiddle" id="swt1" type="button" onclick="changeBit(1)">⏼<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/MrDavisCSIT/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://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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></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/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

133
Export/binary.html → Export/unsigned-binary.html
View File

@@ -3,8 +3,27 @@
<head>
<meta charset="utf-8">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.adcmnetworks.co.uk/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&amp;rec=1" style="border:0" alt="" />
<!-- End Matomo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Binary Simulator - CS:Box</title>
<title>Unsigned 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">
@@ -95,15 +114,15 @@
<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/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/Inter.css?h=19ed85aa2b2b2d862393d46e9e4754c1">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=20a4cf6023d41bd3d4b0306d0fa982e1">
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=4efe779849cd30bd3d3d760928f00db9">
<link rel="stylesheet" href="/assets/css/styles.css?h=c551d2243ad50183e0f7b2121da72836">
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
</head>
<body>
@@ -115,20 +134,36 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
<li class="nav-item"><a class="nav-link active" href="binary">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">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
<div class="dropdown-menu"><a class="dropdown-item active" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
</li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="hex-colours">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">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
</li>
</ul>
</div>
</div>
</nav><!-- End: Site Navigation -->
</header>
<section style="background: rgb(39,38,46);">
</header><!-- Start: Hero Banner Color -->
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
<div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1">
<div class="row h-100">
<div class="col-md-10 col-xl-8 text-center d-flex d-sm-flex d-md-flex justify-content-center align-items-center mx-auto justify-content-md-start align-items-md-center justify-content-xl-center">
<div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE&nbsp;Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
</div>
</div>
</div>
</div>
</div>
</section><!-- End: Hero Banner Color -->
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;">
<div class="row">
@@ -141,7 +176,7 @@
<div class="col-xl-12 bottomSpacer"></div>
</div>
</div>
<div class="col-md-6" style="width: 65%;">
<div class="col-md-6" style="width: 60%;">
<div class="row">
<div class="col">
<h1 class="simHeading">Denary</h1>
@@ -153,19 +188,22 @@
</div>
</div>
</div>
<div class="col-md-6" style="width: 20%;">
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestBinary()">Custom Binary</button></div>
</div>
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestDenary()">Custom Denary</button></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 class="col-xl-12 bottomSpacer"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6" style="width: 65%;">
<div class="col-md-6" style="width: 60%;">
<div class="row">
<div class="col">
<h1 class="simHeading">Binary</h1>
@@ -173,10 +211,18 @@
</div>
<div class="row">
<div class="col">
<h1 id="binaryNumber" class="simData">000000000</h1>
<h1 id="binaryNumber" class="simData">00000000</h1>
</div>
</div>
</div>
<div class="col-md-6" style="width: 20%;">
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftBinary(&quot;left&quot;)">Left Shift</button></div>
</div>
<div class="row">
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftBinary(&quot;right&quot;)">Right Shift</button></div>
</div>
</div>
</div>
<div class="row">
<div class="col spacer" style="width: 100%;"></div>
@@ -187,9 +233,6 @@
<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>
@@ -218,9 +261,6 @@
</thead>
<tbody>
<tr>
<td class="tableCells">
<h1 class="simColumns">256</h1>
</td>
<td class="tableCells">
<h1 class="simColumns">128</h1>
</td>
@@ -247,15 +287,14 @@
</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>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt128" type="button" onclick="changeBit(128)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt64" type="button" onclick="changeBit(64)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt32" type="button" onclick="changeBit(32)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt16" type="button" onclick="changeBit(16)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt8" type="button" onclick="changeBit(8)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt4" type="button" onclick="changeBit(4)">⏼<br></button></td>
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt2" type="button" onclick="changeBit(2)">⏼<br></button></td>
<td class="text-center"><button class="btn btn-primary buttonMiddle" id="swt1" type="button" onclick="changeBit(1)">⏼<br></button></td>
</tr>
</tbody>
</table>
@@ -280,13 +319,15 @@
<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://x.com/MrDavisCSIT" target="_blank"><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>
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg></a></div>
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><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">
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
<div class="col-md-3"><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>
</svg></div>
<div class="col-md-3"></div>
</div>
</div><!-- End: Social Links -->
@@ -304,11 +345,11 @@
</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/binary.js?h=18425c639e662d80cb746c1c2baa1ac3"></script>
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
<script src="/assets/js/hexadecimal.js?h=5e856b38fe73cc6a4b28b67731ef698d"></script>
<script src="/assets/js/hexColours.js?h=01c0cbef76923a000aa2f44bab6678e3"></script>
<script src="/assets/js/logicGates.js?h=7f81a70d0740328beb4032b8b5277621"></script>
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
</body>
</html>

8
README.md
View File

@@ -1,5 +1,5 @@
# CS:Box
Evolution of Bit:Box to incorportate different elements of the UK Computing Curriculum
Evolution of Bit:Box to incorporate different elements of the UK Computing Curriculum
Available at [csbox.mrdaviscsit.uk](https://csbox.mrdaviscsit.uk)
## Upcoming Features
@@ -10,9 +10,9 @@ Available at [csbox.mrdaviscsit.uk](https://csbox.mrdaviscsit.uk)
- [x] Hex Colour Simulator
### Wave 1 CS:Box Features (Easter 2025)
- [ ] NOT Gate Simulator
- [ ] OR Gate Simulator
- [ ] AND Gate Simulator
- [x] NOT Gate Simulator
- [x] OR Gate Simulator
- [x] AND Gate Simulator
### Wave 2 CS:Box Features (May 2025)
- [ ] NOR Gate Simulator