Wave 1 Beta Release

# 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:
2024-12-07 22:49:29 +00:00
parent 0f7711fbb5
commit 93b5f11abe
25 changed files with 1662 additions and 1307 deletions

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">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
</svg></a></div>
<div class="col-md-3"></div>
<div 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 -->
@@ -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>