Added show on hover for dropdown menu items

This commit is contained in:
2025-07-20 14:13:40 +01:00
parent 9bbd8ee3c0
commit 837f1f3e9f
32 changed files with 281 additions and 1746 deletions

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col centred" style="width: 30%;"> <div class="col centred" style="width: 30%;">
@@ -234,7 +145,7 @@
</div> </div>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred"> <div class="container d-xl-flex justify-content-xl-center centred">
<form oninput="updateNumbers()"> <form oninput="updateNumbers()">
<div class="table-responsive text-center d-xl-flex justify-content-xl-center"> <div class="table-responsive text-center d-xl-flex justify-content-xl-center">
@@ -287,21 +198,18 @@
</div> </div>
</form> </form>
</div> </div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -316,26 +224,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,10 +55,9 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header> </header>
<section class="py-5"> <section class="py-5">
<!-- Start: Features Cards -->
<div class="container"> <div class="container">
<div class="row mb-4 mb-lg-5"> <div class="row mb-4 mb-lg-5">
<div class="col-md-8 col-xl-6 text-center mx-auto"> <div class="col-md-8 col-xl-6 text-center mx-auto">
@@ -181,80 +92,77 @@
</div> </div>
</div> </div>
</div> </div>
</div><!-- End: Features Cards --> </div>
<!-- Start: Service Cards -->
<section> <section>
<!-- Start: Features Cards -->
<div class="container bg-dark py-5"> <div class="container bg-dark py-5">
<div class="row"> <div class="row">
<div class="col-md-8 col-xl-6 text-center mx-auto"> <div class="col-md-8 col-xl-6 text-center mx-auto">
<h3 class="fw-bold">Key Features of CS:Box</h3> <h3 class="fw-bold">Key Features of CS:Box</h3>
</div> </div>
</div> </div>
<div class="py-5 p-lg-5"> <div class="p-lg-5 py-5">
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;"> <div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
<div class="col mb-5"> <div class="col mb-5">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5"> <div class="card-body px-4 px-md-5 py-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"> <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> <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> </svg></div>
<h5 class="fw-bold card-title">Binary Simulations</h5> <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> <p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col mb-5"> <div class="col mb-5">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5"> <div class="card-body px-4 px-md-5 py-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"> <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> <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> </svg></div>
<h5 class="fw-bold card-title">Hexadecimal Tools</h5> <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> <p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col mb-4"> <div class="col mb-4">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5"> <div class="card-body px-4 px-md-5 py-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"> <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="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> <path d="M16 8A5 5 0 1 1 6 8a5 5 0 0 1 10 0"></path>
</svg></div> </svg></div>
<h5 class="fw-bold card-title">Logic Gates</h5> <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> <p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col mb-4"> <div class="col mb-4">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5"> <div class="card-body px-4 px-md-5 py-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"> <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="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> <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> </svg></div>
<h5 class="fw-bold card-title">Hex Colors</h5> <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> <p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-8 col-xl-6 text-center mx-auto"> <div class="col-md-8 col-xl-6 text-center mx-auto">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body px-4 py-5 px-md-5"> <div class="card-body px-4 px-md-5 py-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"> <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> <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> </svg></div>
<h5 class="fw-bold card-title">User-Focused Design</h5> <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> <p class="text-muted mb-4 card-text">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>
</div> </div>
</div> </div>
</div><!-- End: Features Cards --> </div>
</section><!-- End: Service Cards --> </section>
<!-- Start: Features Cards -->
<div class="container py-5"> <div class="container py-5">
<div class="row row-cols-1 row-cols-md-2 mx-auto"> <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 mb-5"><img class="rounded img-fluid shadow" src="assets/img/Educational_Impact.webp?h=63a87115577f492ad78640012051f84a"></div>
@@ -265,22 +173,19 @@
</div> </div>
</div> </div>
</div> </div>
</div><!-- End: Features Cards --> </div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -295,26 +200,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col" style="height: 120px;"></div> <div class="col" style="height: 120px;"></div>
@@ -170,8 +81,7 @@
<h1 id="pageHeading" class="simHeading">AND Gate</h1> <h1 id="pageHeading" class="simHeading">AND Gate</h1>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<!-- Start: 1 Row 3 Columns -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" 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="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" 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">
@@ -181,23 +91,20 @@
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div> <div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div>
</div> </div>
</div><!-- End: 1 Row 3 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -212,26 +119,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

File diff suppressed because one or more lines are too long

1
Export/assets/css/styles.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
Export/assets/js/script.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col centred" style="width: 30%;"> <div class="col centred" style="width: 30%;">
@@ -234,7 +145,7 @@
</div> </div>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred"> <div class="container d-xl-flex justify-content-xl-center centred">
<form oninput="updateNumbers()"> <form oninput="updateNumbers()">
<div class="table-responsive text-center d-xl-flex justify-content-xl-center"> <div class="table-responsive text-center d-xl-flex justify-content-xl-center">
@@ -279,21 +190,18 @@
</div> </div>
</form> </form>
</div> </div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -308,26 +216,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col centred" style="width: 30%;"> <div class="col centred" style="width: 30%;">
@@ -210,7 +121,7 @@
</div> </div>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<div class="col-md-6 col-xl-4" style="width: 100%;"> <div class="col-md-6 col-xl-4" style="width: 100%;">
<div class="row"> <div class="row">
<div class="col-xl-12" style="height: 56px;"> <div class="col-xl-12" style="height: 56px;">
@@ -222,7 +133,7 @@
<h1 id="denaryNumber" class="simData">0, 0, 0</h1> <h1 id="denaryNumber" class="simData">0, 0, 0</h1>
</div> </div>
</div> </div>
</div><!-- Start: 1 Row 2 Columns --> </div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@@ -236,7 +147,7 @@
<div class="col-md-6" id="colouredHex" style="border: solid;background-color: #000000;"></div> <div class="col-md-6" id="colouredHex" style="border: solid;background-color: #000000;"></div>
<div class="col-md-6" id="invertedHex" style="border: solid;background: #ffffff;"></div> <div class="col-md-6" id="invertedHex" style="border: solid;background: #ffffff;"></div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<div class="d-xl-flex justify-content-xl-center centred"> <div class="d-xl-flex justify-content-xl-center centred">
<div class="hexColourToggles"> <div class="hexColourToggles">
<table class="table table-borderless"> <table class="table table-borderless">
@@ -383,21 +294,18 @@
</table> </table>
</div> </div>
</div> </div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -412,26 +320,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -30,134 +30,45 @@
"name": "CS:Box", "name": "CS:Box",
"url": "https://csbox.mrdaviscsit.uk" "url": "https://csbox.mrdaviscsit.uk"
} }
</script> </script><script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
<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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
<ul class="navbar-nav ms-auto"> <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 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="about">About</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="#">Binary</a> <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown">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> <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>
<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> <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown">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> <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>
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></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> <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown">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><a class="dropdown-item" href="nor-gate">NOR</a><a class="dropdown-item" href="nand-gate">NAND</a><a class="dropdown-item" href="xor-gate">XOR</a><a class="dropdown-item" href="xnor-gate">XNOR</a></div> <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><a class="dropdown-item" href="nor-gate">NOR</a><a class="dropdown-item" href="nand-gate">NAND</a><a class="dropdown-item" href="xor-gate">XOR</a><a class="dropdown-item" href="xnor-gate">XNOR</a></div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -166,9 +77,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block"> <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="container py-5">
<div class="row 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 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">
@@ -185,22 +95,19 @@
</div> </div>
<div class="col"></div> <div class="col"></div>
</div> </div>
</div><!-- End: Hero Clean Reverse --> </div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -215,26 +122,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col" style="height: 120px;"></div> <div class="col" style="height: 120px;"></div>
@@ -170,8 +81,7 @@
<h1 id="pageHeading" class="simHeading">NAND Gate</h1> <h1 id="pageHeading" class="simHeading">NAND Gate</h1>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<!-- Start: 1 Row 3 Columns -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/f/f2/NAND_ANSI.svg" 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="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/f/f2/NAND_ANSI.svg" width="460" height="240">
@@ -181,23 +91,20 @@
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div> <div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div>
</div> </div>
</div><!-- End: 1 Row 3 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -212,26 +119,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col" style="height: 120px;"></div> <div class="col" style="height: 120px;"></div>
@@ -170,8 +81,7 @@
<h1 id="pageHeading" class="simHeading">NOR Gate</h1> <h1 id="pageHeading" class="simHeading">NOR Gate</h1>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<!-- Start: 1 Row 3 Columns -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/NOR_ANSI.svg" 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="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/NOR_ANSI.svg" width="460" height="240">
@@ -181,23 +91,20 @@
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div> <div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div>
</div> </div>
</div><!-- End: 1 Row 3 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -212,26 +119,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col" style="height: 120px;"></div> <div class="col" style="height: 120px;"></div>
@@ -170,8 +81,7 @@
<h1 id="pageHeading" class="simHeading">NOT Gate</h1> <h1 id="pageHeading" class="simHeading">NOT Gate</h1>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<!-- Start: 1 Row 3 Columns -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleInput(1)" 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="swtInput1" type="button" onclick="toggleInput(1)" 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">
@@ -181,23 +91,20 @@
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div> <div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div>
</div> </div>
</div><!-- End: 1 Row 3 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -212,26 +119,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col" style="height: 120px;"></div> <div class="col" style="height: 120px;"></div>
@@ -170,8 +81,7 @@
<h1 id="pageHeading" class="simHeading">OR Gate</h1> <h1 id="pageHeading" class="simHeading">OR Gate</h1>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<!-- Start: 1 Row 3 Columns -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" 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="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" 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">
@@ -181,23 +91,20 @@
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div> <div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div>
</div> </div>
</div><!-- End: 1 Row 3 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -212,26 +119,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,10 +55,9 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header> </header>
<section class="py-5"> <section class="py-5">
<!-- Start: Projects Grid -->
<div class="container"> <div class="container">
<div class="row mb-5"> <div class="row mb-5">
<div class="col text-center mx-auto"> <div class="col text-center mx-auto">
@@ -188,22 +99,19 @@
</div> </div>
</div> </div>
</div> </div>
</div><!-- End: Projects Grid --> </div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -218,26 +126,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,13 +70,12 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<!-- Start: Hero Banner Color -->
<section class="py-4 py-xl-5"> <section class="py-4 py-xl-5">
<div class="container h-100"> <div class="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <div>
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">Page Unavailable</h1> <h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">Page Unavailable</h1>
<p class="mb-4">This page is currently offline for maintenance.<br>Please try again later.</p> <p class="mb-4">This page is currently offline for maintenance.<br>Please try again later.</p>
@@ -173,9 +84,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<section class="d-none d-print-none d-sm-none d-md-none d-lg-none d-xl-none d-xxl-none" style="background: rgb(39,38,46);"> <section class="d-none d-print-none d-sm-none d-md-none d-lg-none d-xl-none d-xxl-none" style="background: rgb(39,38,46);">
<!-- Start: 1 Row 2 Columns -->
<div class="container" style="width: 100%;margin-top: 15px;"> <div class="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col centred" style="width: 35%;"> <div class="col centred" style="width: 35%;">
@@ -238,7 +148,7 @@
<div class="row"> <div class="row">
<div class="col spacer" style="width: 100%;"></div> <div class="col spacer" style="width: 100%;"></div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred"> <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%;"> <div class="text-center d-xl-flex justify-content-xl-center" style="width: 100%;">
<table class="table table-borderless"> <table class="table table-borderless">
@@ -312,21 +222,18 @@
</div> </div>
</div> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -341,26 +248,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col centred" style="width: 35%;"> <div class="col centred" style="width: 35%;">
@@ -223,7 +134,7 @@
<div class="row"> <div class="row">
<div class="col spacer" style="width: 100%;"></div> <div class="col spacer" style="width: 100%;"></div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred"> <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%;"> <div class="text-center d-xl-flex justify-content-xl-center" style="width: 100%;">
<table class="table table-borderless"> <table class="table table-borderless">
@@ -297,21 +208,18 @@
</div> </div>
</div> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -326,26 +234,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col" style="height: 120px;"></div> <div class="col" style="height: 120px;"></div>
@@ -170,8 +81,7 @@
<h1 id="pageHeading" class="simHeading">XNOR Gate</h1> <h1 id="pageHeading" class="simHeading">XNOR Gate</h1>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<!-- Start: 1 Row 3 Columns -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/d/d6/XNOR_ANSI.svg" 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="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/d/d6/XNOR_ANSI.svg" width="460" height="240">
@@ -181,23 +91,20 @@
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div> <div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div>
</div> </div>
</div><!-- End: 1 Row 3 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -212,26 +119,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>

View File

@@ -23,107 +23,19 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg"> <meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
<script> <script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
(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">
<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" 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="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" 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="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/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css"> <link rel="stylesheet" href="assets/css/styles.min.css?h=6be15fe0d1cfa81af69e0d5a16f5c85d">
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
<link rel="stylesheet" href="assets/css/Inter.css?h=e5f10e8edea6724df772779293114dec">
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=50bf27dcf1a8b0240d3e6638c4b5b7d2">
<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=3e090fbf977edce98dcf9e4faea134e4">
</head> </head>
<body> <body>
<header class="bg-dark"> <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);"> <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="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"> <div class="collapse navbar-collapse" id="navcol-5">
@@ -143,13 +55,13 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav><!-- End: Site Navigation --> </nav>
</header><!-- Start: Hero Banner Color --> </header>
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5"> <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="container h-100">
<div class="text-white border rounded border-0 bg-danger p-1"> <div class="text-white border rounded border-0 p-1 bg-danger">
<div class="row h-100"> <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 class="col-md-10 col-xl-8 text-center 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-center mx-auto">
<div> <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> <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> <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>
@@ -158,9 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
</section><!-- End: Hero Banner Color --> </section>
<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);"> <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="container" style="width: 100%;margin-top: 15px;">
<div class="row"> <div class="row">
<div class="col" style="height: 120px;"></div> <div class="col" style="height: 120px;"></div>
@@ -170,8 +81,7 @@
<h1 id="pageHeading" class="simHeading">XOR Gate</h1> <h1 id="pageHeading" class="simHeading">XOR Gate</h1>
</div> </div>
</div> </div>
</div><!-- End: 1 Row 2 Columns --> </div>
<!-- Start: 1 Row 3 Columns -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/0/01/XOR_ANSI.svg" 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="toggleInput(1)" style="display: grid;position: relative;transform: translate(58px);"></button><button class="btn btn-primary buttonMiddle logicGateInput2" id="swtInput2" type="button" onclick="toggleInput(2)" style="position: relative;display: grid;"></button><img class="logicGate" src="https://upload.wikimedia.org/wikipedia/commons/0/01/XOR_ANSI.svg" width="460" height="240">
@@ -181,23 +91,20 @@
<div class="row"> <div class="row">
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div> <div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary warning btnReset" id="gateReset-1" type="button" style="margin-top: 3em;" onclick="resetGate()">Reset</button></div>
</div> </div>
</div><!-- End: 1 Row 3 Columns --> </div>
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div> <div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
</section><!-- Start: Footer Multi Column --> </section>
<footer style="background: rgb(45,44,56);"> <footer style="background: rgb(45,44,56);">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <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"> <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"> <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;"> <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> <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> </svg><span>GitHub</span></div>
</a> </a>
</div><!-- End: About Project --> </div>
<!-- Start: About --> <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div>
<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"> <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> <h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
<div class="row"> <div class="row">
@@ -212,26 +119,21 @@
</svg></a></div> </svg></a></div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>
</div><!-- End: Social Links --> </div>
<!-- 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="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> <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> <p class="text-muted">Computer Science Concept Simulators</p>
</div><!-- End: Branding --> </div>
</div> </div>
<hr> <hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> <div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p> <p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
</div> </div>
</div> </div>
</footer><!-- End: Footer Multi Column --> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script> <script src="assets/js/script.min.js?h=0285b128be1c36f7774d736c7ffa9df9"></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=cb132aa615fb58918ab65db03c7face7"></script>
</body> </body>
</html> </html>