You've already forked CS-Box
chore(assets): reorganise project files and add exported pages
- Move Bootstrap Studio design file into assets/bootstrap - Rename and relocate screenshots into assets/screenshot with kebab-case names - Add generated export HTML pages for simulators and site content - Preserve existing content with no functional changes to simulators Signed-off-by: Alexander Davis <alex@adcm.uk>
This commit is contained in:
315
export/a-level-hexadecimal.html
Normal file
315
export/a-level-hexadecimal.html
Normal file
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>A Level Hexadecimal Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item active" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 30%;">
|
||||
<div class="centred reset" style="position: relative;">
|
||||
<p class="resetButton">Reset bit:box</p>
|
||||
<div style="position: absolute;"><img class="overlay resetIcon" src="assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetHexadecimal()"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<h1 class="simHeading">Denary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="denaryNumber" class="simData">0</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="simHeading">Hexadecimal</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="hexadecimalNumber" class="simData">0000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 30%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
<div class="col centred" style="width: 35%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer">
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<h1 class="simHeading">Binary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="binaryNumber" class="simData">0000000000000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestHexadecimal()">Custom Hexadecimal</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestDenaryForHexadecimal()">Custom Denary</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred">
|
||||
<form oninput="updateNumbers()">
|
||||
<div class="table-responsive text-center d-xl-flex justify-content-xl-center">
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="stacked">
|
||||
<h1 id="blb4" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
<th class="stacked">
|
||||
<h1 id="blb3" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
<th class="stacked">
|
||||
<h1 id="blb2" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
<th class="stacked">
|
||||
<h1 id="blb1" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="simColumns">4096</h1>
|
||||
</td>
|
||||
<td>
|
||||
<h1 class="simColumns">256</h1>
|
||||
</td>
|
||||
<td>
|
||||
<h1 class="simColumns">16</h1>
|
||||
</td>
|
||||
<td>
|
||||
<h1 class="simColumns">1</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider4096" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
|
||||
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider256" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
|
||||
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider16" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
|
||||
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider1" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt4reset" type="button" onclick="resetPlace(4096)">Reset</button></td>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt3reset" type="button" onclick="resetPlace(256)">Reset</button></td>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt2reset" type="button" onclick="resetPlace(16)">Reset</button></td>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt1reset" type="button" onclick="resetPlace(1)">Reset</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
294
export/about.html
Normal file
294
export/about.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>About - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link active" 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>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header>
|
||||
<section class="py-5">
|
||||
<!-- Start: Features Cards -->
|
||||
<div class="container">
|
||||
<div class="row mb-4 mb-lg-5">
|
||||
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
||||
<p class="fw-bold text-success mb-2">CS:Box</p>
|
||||
<h3 class="fw-bold">An evolution of Bit:Box to incorporate different elements of the UK Computing Curriculum</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
||||
<div class="col mb-5"><img class="rounded img-fluid shadow" src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"></div>
|
||||
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
||||
<div>
|
||||
<h5 class="fw-bold">About CS:Box</h5>
|
||||
<p class="text-muted mb-4">CS:Box is an innovative educational tool designed to support the teaching of key concepts from the UK Computing Curriculum. Building on the foundations of Bit:Box, CS:Box expands its scope to cover a wider range of essential computing topics, providing an interactive and engaging experience for students.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
||||
<div class="col order-md-last mb-5"><img class="rounded img-fluid shadow" src="assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"></div>
|
||||
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
||||
<div>
|
||||
<h5 class="fw-bold">The Evolution from Bit:Box</h5>
|
||||
<p class="text-muted mb-4">Originally, Bit:Box was developed as a web-based version of a physical Binary Light Box, a hands-on device created by Mr. Davis. This device used lightbulbs and an Arduino microcontroller to visually demonstrate how binary numbers work and the values assigned to each binary column. By interacting with the light switches, students could better understand the concepts of binary counting, place values, and logic.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
||||
<div class="col mb-5"><img class="rounded img-fluid shadow" src="assets/img/Evolution_BitBox_to_CSBox.webp?h=1ec7437634c178a31d213253a1700f67"></div>
|
||||
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
||||
<div>
|
||||
<h5 class="fw-bold">How CS:Box Builds on Bit:Box</h5>
|
||||
<p class="text-muted mb-4">CS:Box retains the interactive, visual, and tactile learning approach introduced by Bit:Box but extends its reach to cover a broader range of computing concepts. By incorporating elements of the UK Computing Curriculum, CS:Box now goes beyond binary to include concepts like hexadecimal, logic gates, and even color representation in computing. It allows students to visualize and manipulate abstract computing concepts in a practical, hands-on way.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: Features Cards -->
|
||||
<!-- Start: Service Cards -->
|
||||
<section>
|
||||
<!-- Start: Features Cards -->
|
||||
<div class="container bg-dark py-5">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
||||
<h3 class="fw-bold">Key Features of CS:Box</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-lg-5 py-5">
|
||||
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
|
||||
<div class="col mb-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body px-4 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">
|
||||
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
|
||||
</svg></div>
|
||||
<h5 class="fw-bold card-title">Binary Simulations</h5>
|
||||
<p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-5">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body px-4 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">
|
||||
<path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"></path>
|
||||
</svg></div>
|
||||
<h5 class="fw-bold card-title">Hexadecimal Tools</h5>
|
||||
<p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body px-4 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">
|
||||
<path d="M7 5H3a3 3 0 0 0 0 6h4a4.995 4.995 0 0 1-.584-1H3a2 2 0 1 1 0-4h3.416c.156-.357.352-.692.584-1"></path>
|
||||
<path d="M16 8A5 5 0 1 1 6 8a5 5 0 0 1 10 0"></path>
|
||||
</svg></div>
|
||||
<h5 class="fw-bold card-title">Logic Gates</h5>
|
||||
<p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body px-4 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">
|
||||
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"></path>
|
||||
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"></path>
|
||||
</svg></div>
|
||||
<h5 class="fw-bold card-title">Hex Colors</h5>
|
||||
<p class="text-muted mb-4 card-text">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body px-4 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">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472M3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"></path>
|
||||
</svg></div>
|
||||
<h5 class="fw-bold card-title">User-Focused Design</h5>
|
||||
<p class="text-muted 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><!-- End: Features Cards -->
|
||||
</section><!-- End: Service Cards -->
|
||||
<!-- Start: Features Cards -->
|
||||
<div class="container py-5">
|
||||
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
||||
<div class="col mb-5"><img class="rounded img-fluid shadow" src="assets/img/Educational_Impact.webp?h=63a87115577f492ad78640012051f84a"></div>
|
||||
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
||||
<div>
|
||||
<h5 class="fw-bold">Educational Impact</h5>
|
||||
<p class="text-muted mb-4">CS:Box is more than a collection of interactive tools — it is a guided learning experience for students to understand complex computing concepts. By combining hands-on manipulation with visual feedback, it provides a scaffolded learning approach for students at different stages of their educational journey.<br><br>Whether students are learning binary for the first time or deepening their knowledge of hexadecimal and logic gates, CS:Box offers a clear, engaging, and practical method to achieve those learning goals. It exemplifies Mr. Davis' dedication to creating meaningful, student-friendly educational resources for the modern classroom.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: Features Cards -->
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
211
export/and-gate.html
Normal file
211
export/and-gate.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>AND Gate Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item active" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 120px;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="pageHeading" class="simHeading">AND Gate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<!-- Start: 1 Row 3 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="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">
|
||||
<h1 id="blbAndGate" class="poweredOff dualInputSingleOutput">💡<br></h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div><!-- End: 1 Row 3 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
5
export/assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
5
export/assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
export/assets/css/DSEG7 Classic Regular.css
Normal file
8
export/assets/css/DSEG7 Classic Regular.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'DSEG7 Classic Regular';
|
||||
src: url(../../assets/fonts/DSEG7ClassicRegular.woff) format('woff'),
|
||||
url(../../assets/fonts/DSEG7ClassicRegular.ttf) format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
}
|
||||
8
export/assets/css/IEC symbols Unicode.css
Normal file
8
export/assets/css/IEC symbols Unicode.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'IEC symbols Unicode';
|
||||
src: url(../../assets/fonts/IEC%20symbols%20Unicode-7accb483a44c18d55e8700feb3ddc713.woff2?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff2'),
|
||||
url(../../assets/fonts/IEC%20symbols%20Unicode-f2f2e5d8588f3b01658e423c74d599be.woff?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
629
export/assets/css/Inter.css
Normal file
629
export/assets/css/Inter.css
Normal file
@@ -0,0 +1,629 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=d12fe520d7f1a08f91c8333dfb12e0af) format('woff2');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
89
export/assets/css/Open Sans.css
Normal file
89
export/assets/css/Open Sans.css
Normal file
@@ -0,0 +1,89 @@
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-225b7d18262c1041a32b79d200e92bf1.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-dea7e20916bef72920c929acfb3a4641.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-15e68f85ff378c85165faa90038c1c34.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-5e916bd22ed9429b9b6c1e583e7e3bac.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-fab2dc2a64560c0036fff6d74173d2fe.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-92fcb6995c062a9e725f088d0a4946e3.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-698c10e372a42d57247ac8e1ba5de182.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-68df54b884d8032b226b60b2de0d3d9f.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url(../../assets/fonts/Open%20Sans-d839b7fe1395f21cd350be1b26d80cfc.woff2?h=ba41513e9a68a6b69b27fd4ab84c248d) format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
8
export/assets/css/Seven Segment.css
Normal file
8
export/assets/css/Seven Segment.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'Seven Segment';
|
||||
src: url(../../assets/fonts/Seven%20Segment-2949e811e8b49e67e29f877a915145a4.woff2?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff2'),
|
||||
url(../../assets/fonts/Seven%20Segment-4bffe92707a7a725aa309b14ed55c43e.woff?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
29
export/assets/css/Slider-Range.css
Normal file
29
export/assets/css/Slider-Range.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.slidecontainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
.slider:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.customiserButtons {
|
||||
background-color: var(--bs-btn-active-bg) !important;
|
||||
border-color: var(--bs-btn-active-border-color) !important;
|
||||
}
|
||||
|
||||
.customiserButtons:hover {
|
||||
background-color: #198754 !important;
|
||||
border-color: #198754 !important;
|
||||
}
|
||||
|
||||
117
export/assets/css/bss-overrides.css
Normal file
117
export/assets/css/bss-overrides.css
Normal file
@@ -0,0 +1,117 @@
|
||||
:root, [data-bs-theme=light] {
|
||||
--bs-body-bg: rgb(39,38,46);
|
||||
--bs-body-bg-rgb: 39,38,46;
|
||||
--bs-link-color: #ffffff;
|
||||
--bs-link-color-rgb: 255,255,255;
|
||||
--bs-link-hover-color: #19f5aa;
|
||||
--bs-link-hover-color-rgb: 25,245,170;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
--bs-link-color: #ffffff;
|
||||
--bs-link-color-rgb: 255,255,255;
|
||||
--bs-link-hover-color: #19f5aa;
|
||||
--bs-link-hover-color-rgb: 25,245,170;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: .5rem !important;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.ms-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: .25rem !important;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 3rem !important;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-right: 1.5rem !important;
|
||||
padding-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1.5rem !important;
|
||||
padding-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: 3rem !important;
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.pt-3 {
|
||||
padding-top: 1rem !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.px-md-5 {
|
||||
padding-left: 3rem !important;
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.mx-lg-5 {
|
||||
margin-left: 3rem !important;
|
||||
margin-right: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.mb-lg-5 {
|
||||
margin-bottom: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.p-lg-5 {
|
||||
padding: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.py-lg-5 {
|
||||
padding-top: 3rem !important;
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.py-xl-5 {
|
||||
padding-top: 3rem !important;
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
428
export/assets/css/styles.css
Normal file
428
export/assets/css/styles.css
Normal file
@@ -0,0 +1,428 @@
|
||||
html {
|
||||
background: #000000;
|
||||
color: rgb(255,255,255);
|
||||
--bs-primary: #dc3545;
|
||||
--bs-primary-rgb: 220,53,69;
|
||||
--bs-secondary: #198754;
|
||||
--bs-secondary-rgb: 25,135,84;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-primary:focus {
|
||||
color: #fff;
|
||||
background-color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.btn:hover, .btn-primary:hover {
|
||||
background-color: #0d6efd;
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.btnActive, .btnActive:focus {
|
||||
color: #fff;
|
||||
background-color: #198754;
|
||||
border-color: #198754;
|
||||
}
|
||||
|
||||
.poweredOn {
|
||||
filter: opacity(100%);
|
||||
}
|
||||
|
||||
.poweredOff {
|
||||
filter: opacity(5%);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
transition: .5s ease;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay:hover {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.central {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.centred {
|
||||
opacity: 1;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.reset {
|
||||
background-image: url("../../assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e");
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.homeIcon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.homeIcon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
opacity: 0.25;
|
||||
transition: .5s ease;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.warning:hover {
|
||||
background-color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bulb-text {
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
font-family: 'Seven Segment Regular';
|
||||
position: relative;
|
||||
opacity: 0.75;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.stacked {
|
||||
position: relative;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.bulbs {
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
opacity: 0;
|
||||
/*position: absolute;*/
|
||||
/*margin-top: 1em;*/
|
||||
/*left: 50%;*/
|
||||
/*-webkit-transform: translate(-50%, -50%);*/
|
||||
/*z-index: 1;*/
|
||||
}
|
||||
|
||||
.bulb-div {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.buttonMiddle {
|
||||
font-size: xx-large;
|
||||
font-family: 'IEC symbols Unicode';
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
table .high-toggle {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
table .mid-toggle {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
table .stacked {
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
.btnUp {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.btnDown {
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.btnUp svg, .btnDown svg {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
.simHeading {
|
||||
font-family: 'Seven Segment';
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.simData {
|
||||
text-align: center;
|
||||
color: #10ff00;
|
||||
font-family: 'DSEG7 Classic Regular';
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.simColumns {
|
||||
text-align: center;
|
||||
font-family: 'DSEG7 Classic Regular';
|
||||
color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.btnReset {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bs-icon {
|
||||
--bs-icon-size: .75rem;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--bs-icon-size);
|
||||
width: calc(var(--bs-icon-size) * 2);
|
||||
height: calc(var(--bs-icon-size) * 2);
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.bs-icon-xs {
|
||||
--bs-icon-size: 1rem;
|
||||
width: calc(var(--bs-icon-size) * 1.5);
|
||||
height: calc(var(--bs-icon-size) * 1.5);
|
||||
}
|
||||
|
||||
.bs-icon-sm {
|
||||
--bs-icon-size: 1rem;
|
||||
}
|
||||
|
||||
.bs-icon-md {
|
||||
--bs-icon-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bs-icon-lg {
|
||||
--bs-icon-size: 2rem;
|
||||
}
|
||||
|
||||
.bs-icon-xl {
|
||||
--bs-icon-size: 2.5rem;
|
||||
}
|
||||
|
||||
.bs-icon.bs-icon-primary {
|
||||
color: var(--bs-white);
|
||||
background: var(--bs-primary);
|
||||
}
|
||||
|
||||
.bs-icon.bs-icon-primary-light {
|
||||
color: var(--bs-primary);
|
||||
background: rgba(var(--bs-primary-rgb), .2);
|
||||
}
|
||||
|
||||
.bs-icon.bs-icon-semi-white {
|
||||
color: var(--bs-primary);
|
||||
background: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
.bs-icon.bs-icon-rounded {
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.bs-icon.bs-icon-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
transform: translateY(2rem);
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.dropdown:hover > .dropdown-menu {
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
.introP {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.completeFeatures {
|
||||
font-weight: bold;
|
||||
color: rgb(25,245,170);
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.hexColourToggles {
|
||||
margin-right: 5em;
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
.hexColourTogglesEnd {
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
.resetButton {
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.resetIcon {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bottomSpacer {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.binaryButtons {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.hexColourButtons {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
height: 38px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.logicGateInput2 {
|
||||
float: left;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.logicGateInput1 {
|
||||
float: left;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.logicGateOutput {
|
||||
}
|
||||
|
||||
.logicGate {
|
||||
filter: invert(100%);
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
height: 15em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.oneInputRows {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
justify-content: right;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.twoInputRows {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
justify-content: right;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.singleInputSingleOutput {
|
||||
text-align: left;
|
||||
font-size: 72px;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
margin-top: 90px;
|
||||
margin-left: -90px;
|
||||
}
|
||||
|
||||
.dualInputSingleOutput {
|
||||
text-align: left;
|
||||
font-size: 5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
margin-top: .90em;
|
||||
margin-left: -0.5em;
|
||||
}
|
||||
|
||||
.tableCells {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
font-size: 25px;
|
||||
display: grid;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--bs-success);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#mainNav.navbar-dark .navbar-nav > li.nav-item > a.nav-link:hover, #mainNav.navbar-dark .navbar-nav > li.nav-item > a.nav-link:focus {
|
||||
color: #19f5aa;
|
||||
}
|
||||
|
||||
#mainNav.navbar-dark .navbar-nav > li.nav-item > a.nav-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link.active {
|
||||
font-weight: 700 !important;
|
||||
color: #19f5aa;
|
||||
}
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: #19f5aa!important;
|
||||
text-decoration: none;
|
||||
background-color: rgb(45, 44, 56);
|
||||
}
|
||||
|
||||
.dropdown-item:hover, .dropdown-item:focus {
|
||||
color: #19f5aa;
|
||||
background-color: var(--bs-dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
transform: rotate(-90deg);
|
||||
-ms-transform: translateY(-50%);
|
||||
top: 50%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.hexSliders {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.hexadecimalButtons {
|
||||
margin: 0.5em auto 0.5em auto;
|
||||
display: flex;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
BIN
export/assets/fonts/DSEG7ClassicRegular.ttf
Normal file
BIN
export/assets/fonts/DSEG7ClassicRegular.ttf
Normal file
Binary file not shown.
BIN
export/assets/fonts/DSEG7ClassicRegular.woff
Normal file
BIN
export/assets/fonts/DSEG7ClassicRegular.woff
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
export/assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2
Normal file
BIN
export/assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2
Normal file
BIN
export/assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2
Normal file
BIN
export/assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2
Normal file
BIN
export/assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2
Normal file
BIN
export/assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2
Normal file
BIN
export/assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2
Normal file
BIN
export/assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2
Normal file
BIN
export/assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2
Normal file
BIN
export/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2
Normal file
BIN
export/assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2
Normal file
BIN
export/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2
Normal file
BIN
export/assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2
Normal file
BIN
export/assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2
Normal file
Binary file not shown.
BIN
export/assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2
Normal file
BIN
export/assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
export/assets/img/BitBoxLogo.png
Normal file
BIN
export/assets/img/BitBoxLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
1
export/assets/img/CSBoxLogo.svg
Normal file
1
export/assets/img/CSBoxLogo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.8 MiB |
BIN
export/assets/img/Educational_Impact.webp
Normal file
BIN
export/assets/img/Educational_Impact.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
BIN
export/assets/img/Evolution_BitBox_to_CSBox.webp
Normal file
BIN
export/assets/img/Evolution_BitBox_to_CSBox.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
BIN
export/assets/img/products/1.jpg
Normal file
BIN
export/assets/img/products/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
export/assets/img/products/2.jpg
Normal file
BIN
export/assets/img/products/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
export/assets/img/products/3.jpg
Normal file
BIN
export/assets/img/products/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
210
export/assets/js/binary.js
Normal file
210
export/assets/js/binary.js
Normal file
@@ -0,0 +1,210 @@
|
||||
// ** Check if the filename contains "binary" **
|
||||
if (window.location.pathname.includes('binary')) {
|
||||
|
||||
let denary = 0;
|
||||
let bits = {
|
||||
'-128': false,
|
||||
'1': false,
|
||||
'2': false,
|
||||
'4': false,
|
||||
'8': false,
|
||||
'16': false,
|
||||
'32': false,
|
||||
'64': false,
|
||||
'128': false
|
||||
};
|
||||
|
||||
let bitValues = [];
|
||||
const twosComplementCheck = document.getElementById("blbN128");
|
||||
|
||||
// ** Initialize the bit values on page load **
|
||||
function initialize() {
|
||||
setBitValues(); // Set the bit values dynamically
|
||||
resetBinarySimulator(); // Reset the simulator to the initial state
|
||||
}
|
||||
|
||||
// ** Dynamically set bit values based on 2's complement mode **
|
||||
function setBitValues() {
|
||||
bitValues = twosComplementCheck
|
||||
? [-128, 64, 32, 16, 8, 4, 2, 1]
|
||||
: [128, 64, 32, 16, 8, 4, 2, 1];
|
||||
}
|
||||
|
||||
// ** Helper function to toggle power for a specific bit **
|
||||
function togglePower(bitValue, isActive) {
|
||||
const bitId = bitValue < 0 ? `N${Math.abs(bitValue)}` : bitValue;
|
||||
const bulb = document.getElementById(`blb${bitId}`);
|
||||
const switchBtn = document.getElementById(`swt${bitId}`);
|
||||
if (bulb && switchBtn) {
|
||||
bulb.classList.toggle('poweredOn', isActive);
|
||||
bulb.classList.toggle('poweredOff', !isActive);
|
||||
switchBtn.classList.toggle('btnActive', isActive);
|
||||
}
|
||||
}
|
||||
|
||||
// ** Reset all bits and denary **
|
||||
function resetBinarySimulator() {
|
||||
Object.keys(bits).forEach(bit => {
|
||||
togglePower(parseInt(bit, 10), false);
|
||||
bits[bit] = false;
|
||||
});
|
||||
denary = 0;
|
||||
updateBinary();
|
||||
}
|
||||
|
||||
// ** Toggle a specific bit **
|
||||
function changeBit(bitValue) {
|
||||
const key = getBitKey(bitValue);
|
||||
const isActive = bits[key];
|
||||
togglePower(bitValue, !isActive);
|
||||
bits[key] = !isActive;
|
||||
denary += isActive ? -bitValue : bitValue;
|
||||
updateBinary();
|
||||
}
|
||||
|
||||
// ** Update binary string and denary display **
|
||||
function updateBinary() {
|
||||
const binary = bitValues.map(bit => (bits[getBitKey(bit)] ? '1' : '0')).join('');
|
||||
document.getElementById("denaryNumber").innerText = denary;
|
||||
document.getElementById("binaryNumber").innerText = binary;
|
||||
}
|
||||
|
||||
// ** Parse a custom binary string and set bits accordingly **
|
||||
function customBinaryParser(binaryPattern) {
|
||||
resetBinarySimulator();
|
||||
binaryPattern = binaryPattern.padStart(8, '0'); // Ensure 8-bit format
|
||||
binaryPattern.split('').forEach((bit, index) => {
|
||||
if (bit === '1') {
|
||||
changeBit(bitValues[index]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ** Parse a custom denary value and set bits accordingly **
|
||||
function customDenaryParser(customDenary) {
|
||||
const min = twosComplementCheck ? -128 : 0;
|
||||
const max = twosComplementCheck ? 127 : 255;
|
||||
|
||||
if (customDenary === null) {
|
||||
customDenary = 0; // Default to 0 if user cancels input
|
||||
}
|
||||
|
||||
if (customDenary < min || customDenary > max) {
|
||||
alert(`Invalid input! Please enter a denary value between ${min} and ${max}.`);
|
||||
return requestDenary(); // Prompt user again
|
||||
}
|
||||
|
||||
resetBinarySimulator();
|
||||
if (twosComplementCheck && customDenary < 0) {
|
||||
let absDenary = Math.abs(customDenary);
|
||||
if (customDenary === -128) {
|
||||
changeBit(-128);
|
||||
} else {
|
||||
bitValues.forEach(bit => {
|
||||
if (absDenary >= Math.abs(bit)) {
|
||||
changeBit(bit);
|
||||
absDenary -= Math.abs(bit);
|
||||
}
|
||||
});
|
||||
twosComplementFlip();
|
||||
}
|
||||
} else {
|
||||
bitValues.forEach(bit => {
|
||||
if (customDenary >= Math.abs(bit)) {
|
||||
changeBit(bit);
|
||||
customDenary -= Math.abs(bit);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ** Handle logical binary shifting (left or right) **
|
||||
function shiftBinary(direction) {
|
||||
const binaryString = document.getElementById("binaryNumber").innerText;
|
||||
let shiftedBinary;
|
||||
if (direction === 'left') {
|
||||
shiftedBinary = binaryString.slice(1) + '0';
|
||||
} else if (direction === 'right') {
|
||||
shiftedBinary = '0' + binaryString.slice(0, -1);
|
||||
}
|
||||
customBinaryParser(shiftedBinary);
|
||||
}
|
||||
|
||||
// ** Handle arithmetic shifting for 2's complement **
|
||||
function shiftTwosComplement(direction) {
|
||||
const binaryString = document.getElementById("binaryNumber").innerText;
|
||||
let shiftedBinary;
|
||||
if (direction === 'left') {
|
||||
shiftedBinary = binaryString.slice(1) + '0';
|
||||
} else if (direction === 'right') {
|
||||
shiftedBinary = binaryString[0] + binaryString.slice(0, -1);
|
||||
}
|
||||
customBinaryParser(shiftedBinary);
|
||||
}
|
||||
|
||||
// ** Flip binary bits for 2's complement **
|
||||
function twosComplementFlip() {
|
||||
let binary = document.getElementById("binaryNumber").innerText;
|
||||
const flippedBinary = binary.split('').map(bit => (bit === '1' ? '0' : '1')).join('');
|
||||
const result = addBinaryNumbers(flippedBinary, '00000001');
|
||||
customBinaryParser(result.binaryResult);
|
||||
}
|
||||
|
||||
// ** Add two binary numbers **
|
||||
function addBinaryNumbers(binary1, binary2) {
|
||||
let carry = 0;
|
||||
let result = '';
|
||||
for (let i = 7; i >= 0; i--) {
|
||||
const bit1 = parseInt(binary1[i], 10) || 0;
|
||||
const bit2 = parseInt(binary2[i], 10) || 0;
|
||||
const sum = bit1 + bit2 + carry;
|
||||
result = (sum % 2) + result;
|
||||
carry = Math.floor(sum / 2);
|
||||
}
|
||||
return { binaryResult: result.slice(-8), overflow: carry ? '1' : '0' };
|
||||
}
|
||||
|
||||
// ** Helper to normalize bit keys **
|
||||
function getBitKey(bitValue) {
|
||||
return bitValue < 0 ? `N${Math.abs(bitValue)}` : bitValue.toString();
|
||||
}
|
||||
|
||||
// ** Request binary input from user **
|
||||
function requestBinary() {
|
||||
let binary;
|
||||
do {
|
||||
binary = prompt("Please enter an 8-bit Binary Value (only 0s and 1s are allowed):");
|
||||
if (binary === null) {
|
||||
binary = "00000000"; // Default to 0 if user cancels input
|
||||
break;
|
||||
}
|
||||
if (!/^[01]{1,8}$/.test(binary)) {
|
||||
alert("Invalid input! Binary values must be up to 8 digits long and only contain 0 or 1.");
|
||||
}
|
||||
} while (!/^[01]{1,8}$/.test(binary));
|
||||
customBinaryParser(binary);
|
||||
}
|
||||
|
||||
// ** Request denary input from user **
|
||||
function requestDenary() {
|
||||
let customDenary;
|
||||
const min = twosComplementCheck ? -128 : 0;
|
||||
const max = twosComplementCheck ? 127 : 255;
|
||||
|
||||
do {
|
||||
customDenary = prompt(`Enter a Denary Value (${min} to ${max}):`);
|
||||
if (customDenary === null) {
|
||||
customDenary = 0; // Default to 0 if user cancels input
|
||||
break;
|
||||
}
|
||||
customDenary = parseInt(customDenary, 10);
|
||||
if (isNaN(customDenary) || customDenary < min || customDenary > max) {
|
||||
alert(`Invalid input! Please enter a denary value between ${min} and ${max}.`);
|
||||
}
|
||||
} while (isNaN(customDenary) || customDenary < min || customDenary > max);
|
||||
customDenaryParser(customDenary);
|
||||
}
|
||||
|
||||
// ** On page load, initialize the simulator **
|
||||
document.addEventListener("DOMContentLoaded", initialize);
|
||||
}
|
||||
61
export/assets/js/boldAndDark.js
Normal file
61
export/assets/js/boldAndDark.js
Normal file
@@ -0,0 +1,61 @@
|
||||
(function() {
|
||||
"use strict"; // Start of use strict
|
||||
|
||||
function initParallax() {
|
||||
|
||||
if (!('requestAnimationFrame' in window)) return;
|
||||
if (/Mobile|Android/.test(navigator.userAgent)) return;
|
||||
|
||||
var parallaxItems = document.querySelectorAll('[data-bss-parallax]');
|
||||
|
||||
if (!parallaxItems.length) return;
|
||||
|
||||
var defaultSpeed = 0.5;
|
||||
var visible = [];
|
||||
var scheduled;
|
||||
|
||||
window.addEventListener('scroll', scroll);
|
||||
window.addEventListener('resize', scroll);
|
||||
|
||||
scroll();
|
||||
|
||||
function scroll() {
|
||||
|
||||
visible.length = 0;
|
||||
|
||||
for (var i = 0; i < parallaxItems.length; i++) {
|
||||
var rect = parallaxItems[i].getBoundingClientRect();
|
||||
var speed = parseFloat(parallaxItems[i].getAttribute('data-bss-parallax-speed'), 10) || defaultSpeed;
|
||||
|
||||
if (rect.bottom > 0 && rect.top < window.innerHeight) {
|
||||
visible.push({
|
||||
speed: speed,
|
||||
node: parallaxItems[i]
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
cancelAnimationFrame(scheduled);
|
||||
|
||||
if (visible.length) {
|
||||
scheduled = requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
for (var i = 0; i < visible.length; i++) {
|
||||
var node = visible[i].node;
|
||||
var speed = visible[i].speed;
|
||||
|
||||
node.style.transform = 'translate3d(0, ' + (-window.scrollY * speed) + 'px, 0)';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
initParallax();
|
||||
})(); // End of use strict
|
||||
|
||||
113
export/assets/js/hexColours.js
Normal file
113
export/assets/js/hexColours.js
Normal file
@@ -0,0 +1,113 @@
|
||||
const LIGHT_MULTIPLIER = 100 / 15;
|
||||
const COLORS = ['R', 'G', 'B'];
|
||||
const PLACES = [1, 16];
|
||||
|
||||
let denary = 0;
|
||||
let redDenary = 0;
|
||||
let greenDenary = 0;
|
||||
let blueDenary = 0;
|
||||
let redBinary = "";
|
||||
let greenBinary = "";
|
||||
let blueBinary = "";
|
||||
let hexadecimal = "";
|
||||
|
||||
const places = {
|
||||
R16: 0, R1: 0,
|
||||
G16: 0, G1: 0,
|
||||
B16: 0, B1: 0
|
||||
};
|
||||
|
||||
function resetColours() {
|
||||
COLORS.forEach(color => {
|
||||
PLACES.forEach(place => {
|
||||
resetPlace(color, place);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function resetPlace(color, place) {
|
||||
const placeKey = `${color}${place}`;
|
||||
places[placeKey] = 0;
|
||||
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
|
||||
document.getElementById(`blb${placeKey}`).style.opacity = light;
|
||||
updateColours();
|
||||
}
|
||||
|
||||
function togglePlace(color, place, direction) {
|
||||
const placeKey = `${color}${place}`;
|
||||
const currentValue = places[placeKey];
|
||||
if ((direction === 'up' && currentValue < 15) || (direction === 'down' && currentValue > 0)) {
|
||||
places[placeKey] += direction === 'up' ? 1 : -1;
|
||||
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
|
||||
document.getElementById(`blb${placeKey}`).style.opacity = light;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
|
||||
function updateColours() {
|
||||
redDenary = (places.R16 * 16) + places.R1;
|
||||
greenDenary = (places.G16 * 16) + places.G1;
|
||||
blueDenary = (places.B16 * 16) + places.B1;
|
||||
|
||||
denary = `${redDenary}, ${greenDenary}, ${blueDenary}`;
|
||||
hexadecimal = `#${convertToHex(places.R16)}${convertToHex(places.R1)}${convertToHex(places.G16)}${convertToHex(places.G1)}${convertToHex(places.B16)}${convertToHex(places.B1)}`;
|
||||
|
||||
redBinary = `${convertToBinary(places.R16)}${convertToBinary(places.R1)}`;
|
||||
greenBinary = `${convertToBinary(places.G16)}${convertToBinary(places.G1)}`;
|
||||
blueBinary = `${convertToBinary(places.B16)}${convertToBinary(places.B1)}`;
|
||||
|
||||
document.getElementById("denaryNumber").innerHTML = denary;
|
||||
document.getElementById("hexadecimalNumber").innerHTML = hexadecimal;
|
||||
document.getElementById("colouredHex").style.backgroundColor = hexadecimal;
|
||||
document.getElementById("invertedHex").style.backgroundColor = invertedHex();
|
||||
document.getElementById("redBinaryNumber").innerHTML = redBinary;
|
||||
document.getElementById("blueBinaryNumber").innerHTML = blueBinary;
|
||||
document.getElementById("greenBinaryNumber").innerHTML = greenBinary;
|
||||
}
|
||||
|
||||
function invertedHex() {
|
||||
return `#${convertToHex(15 - places.R16)}${convertToHex(15 - places.R1)}${convertToHex(15 - places.G16)}${convertToHex(15 - places.G1)}${convertToHex(15 - places.B16)}${convertToHex(15 - places.B1)}`;
|
||||
}
|
||||
|
||||
function convertToHex(num) {
|
||||
return num < 10 ? num.toString() : String.fromCharCode(55 + num); // 55 = ASCII offset for A (65) - 10
|
||||
}
|
||||
|
||||
function convertToBinary(num) {
|
||||
return num.toString(2).padStart(4, '0');
|
||||
}
|
||||
|
||||
function updateHex(customHex) {
|
||||
if (!customHex) {
|
||||
resetColours();
|
||||
} else {
|
||||
if (customHex.charAt(0) === "#") customHex = customHex.slice(1);
|
||||
if (isHex(customHex) && customHex.length === 6) {
|
||||
customHex.split('').forEach((digit, i) => {
|
||||
const color = COLORS[Math.floor(i / 2)];
|
||||
const place = i % 2 === 0 ? 16 : 1;
|
||||
const placeKey = `${color}${place}`;
|
||||
places[placeKey] = parseInt(digit, 16);
|
||||
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
|
||||
document.getElementById(`blb${placeKey}`).style.opacity = light;
|
||||
});
|
||||
updateColours();
|
||||
} else {
|
||||
alert("Invalid Entry");
|
||||
resetColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isHex(str) {
|
||||
return /^[0-9A-Fa-f]+$/.test(str);
|
||||
}
|
||||
|
||||
function requestHex() {
|
||||
const customHex = prompt("Please enter your Hex Value");
|
||||
updateHex(customHex);
|
||||
}
|
||||
|
||||
function invertHex() {
|
||||
updateHex(invertedHex());
|
||||
}
|
||||
63
export/assets/js/hexadecimal.js
Normal file
63
export/assets/js/hexadecimal.js
Normal file
@@ -0,0 +1,63 @@
|
||||
// Ensure the script only runs if the URL path contains "hexadecimal"
|
||||
if (window.location.pathname.includes('hexadecimal')) {
|
||||
|
||||
const isGCSE = window.location.pathname.includes('gcse-hexadecimal');
|
||||
const hexLength = isGCSE ? 2 : 4;
|
||||
const binaryLength = isGCSE ? 8 : 16;
|
||||
const maxDenary = isGCSE ? 255 : 65535;
|
||||
|
||||
const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
|
||||
const sliders = {};
|
||||
const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];
|
||||
|
||||
// Attach event listeners for sliders
|
||||
['slider1', 'slider16', 'slider256', 'slider4096'].forEach((sliderId) => {
|
||||
const slider = document.getElementById(sliderId);
|
||||
if (slider) {
|
||||
sliders[sliderId] = slider;
|
||||
slider.addEventListener("input", (e) => {
|
||||
e.stopPropagation(); // Prevent event propagation to Bootstrap
|
||||
updatePlace(parseInt(sliderId.replace('slider', ''), 10));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function updatePlace(place) {
|
||||
if (sliders[`slider${place}`]) {
|
||||
placeValues[place] = parseInt(sliders[`slider${place}`].value, 10);
|
||||
updateNumbers();
|
||||
}
|
||||
}
|
||||
|
||||
function updateNumbers() {
|
||||
let denary = 0;
|
||||
let binary = '';
|
||||
let hexadecimal = '';
|
||||
|
||||
columnValues.forEach((column) => {
|
||||
const value = placeValues[column];
|
||||
denary += value * column;
|
||||
binary += convertToBinary(value);
|
||||
hexadecimal += convertToHex(value);
|
||||
});
|
||||
|
||||
binary = binary.slice(-binaryLength).padStart(binaryLength, '0');
|
||||
hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, '0');
|
||||
|
||||
document.getElementById("binaryNumber").innerText = binary;
|
||||
document.getElementById("denaryNumber").innerText = denary;
|
||||
document.getElementById("hexadecimalNumber").innerText = hexadecimal;
|
||||
}
|
||||
|
||||
function convertToBinary(num) {
|
||||
return num.toString(2).padStart(4, '0');
|
||||
}
|
||||
|
||||
function convertToHex(num) {
|
||||
return num.toString(16).toUpperCase();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateNumbers();
|
||||
});
|
||||
}
|
||||
105
export/assets/js/logicGates.js
Normal file
105
export/assets/js/logicGates.js
Normal file
@@ -0,0 +1,105 @@
|
||||
let inputs = {
|
||||
input1: false,
|
||||
input2: false
|
||||
};
|
||||
|
||||
let gateValue = false;
|
||||
|
||||
// ** Toggle input (handles both input1 and input2) **
|
||||
function toggleInput(inputNumber) {
|
||||
const inputKey = `input${inputNumber}`;
|
||||
inputs[inputKey] = !inputs[inputKey];
|
||||
updateInputState(`swtInput${inputNumber}`, inputs[inputKey]);
|
||||
updateGate();
|
||||
}
|
||||
|
||||
// ** Update the gate's state based on the current inputs and gate type **
|
||||
function updateGate() {
|
||||
const pageHeading = document.getElementById("pageHeading").textContent;
|
||||
gateValue = evaluateGate(pageHeading);
|
||||
updateGateLight(pageHeading, gateValue);
|
||||
}
|
||||
|
||||
// ** Evaluate the gate logic **
|
||||
function evaluateGate(pageHeading) {
|
||||
const { input1, input2 } = inputs;
|
||||
|
||||
switch (pageHeading) {
|
||||
case "AND Gate":
|
||||
return input1 && input2;
|
||||
case "OR Gate":
|
||||
return input1 || input2;
|
||||
case "NOT Gate":
|
||||
return !input1; // NOT gate only uses Input1
|
||||
case "NAND Gate":
|
||||
return !(input1 && input2); // Correct NAND logic
|
||||
case "NOR Gate":
|
||||
return !(input1 || input2);
|
||||
case "XOR Gate":
|
||||
return input1 !== input2; // XOR is true if inputs are different
|
||||
case "XNOR Gate":
|
||||
return input1 === input2; // XNOR is true if inputs are the same
|
||||
default:
|
||||
console.error("Unknown Gate Type");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ** Update the lightbulb based on the gate's value **
|
||||
function updateGateLight(pageHeading, value) {
|
||||
const lightBulbId = getLightBulbId(pageHeading);
|
||||
const lightBulb = document.getElementById(lightBulbId);
|
||||
if (lightBulb) {
|
||||
lightBulb.classList.toggle("poweredOn", value);
|
||||
lightBulb.classList.toggle("poweredOff", !value);
|
||||
}
|
||||
}
|
||||
|
||||
// ** Get the correct lightbulb ID based on the gate type **
|
||||
function getLightBulbId(pageHeading) {
|
||||
switch (pageHeading) {
|
||||
case "AND Gate":
|
||||
return "blbAndGate";
|
||||
case "OR Gate":
|
||||
return "blbOrGate";
|
||||
case "NOT Gate":
|
||||
return "blbNotGate";
|
||||
case "NAND Gate":
|
||||
return "blbNandGate";
|
||||
case "NOR Gate":
|
||||
return "blbNorGate";
|
||||
case "XOR Gate":
|
||||
return "blbXorGate";
|
||||
case "XNOR Gate":
|
||||
return "blbXnorGate";
|
||||
default:
|
||||
console.error("Unknown Gate Type");
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// ** Update the toggle switch to reflect its active/inactive state **
|
||||
function updateInputState(switchId, isActive) {
|
||||
const toggleSwitch = document.getElementById(switchId);
|
||||
if (toggleSwitch) {
|
||||
toggleSwitch.classList.toggle("btnActive", isActive);
|
||||
}
|
||||
}
|
||||
|
||||
// ** Reset the gate to its default state **
|
||||
function resetGate() {
|
||||
inputs.input1 = false;
|
||||
inputs.input2 = false;
|
||||
updateInputState("swtInput1", inputs.input1);
|
||||
updateInputState("swtInput2", inputs.input2);
|
||||
|
||||
const pageHeading = document.getElementById("pageHeading").textContent;
|
||||
|
||||
if (pageHeading === "NOT Gate") {
|
||||
// For NOT Gate, the light should be on by default
|
||||
gateValue = true;
|
||||
updateGateLight(pageHeading, gateValue);
|
||||
} else {
|
||||
updateGate();
|
||||
}
|
||||
}
|
||||
307
export/gcse-hexadecimal.html
Normal file
307
export/gcse-hexadecimal.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>GCSE Hexadecimal Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item active" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 30%;">
|
||||
<div class="centred reset" style="position: relative;">
|
||||
<p class="resetButton">Reset bit:box</p>
|
||||
<div style="position: absolute;"><img class="overlay resetIcon" src="assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetHexadecimal()"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<h1 class="simHeading">Denary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="denaryNumber" class="simData">0</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="simHeading">Hexadecimal</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="hexadecimalNumber" class="simData">00</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 30%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
<div class="col centred" style="width: 35%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer">
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<h1 class="simHeading">Binary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="binaryNumber" class="simData">00000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestHexadecimal()">Custom Hexadecimal</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestDenaryForHexadecimal()">Custom Denary</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred">
|
||||
<form oninput="updateNumbers()">
|
||||
<div class="table-responsive text-center d-xl-flex justify-content-xl-center">
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="stacked">
|
||||
<h1 id="blb2" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
<th class="stacked">
|
||||
<h1 id="blb1" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="simColumns">16</h1>
|
||||
</td>
|
||||
<td>
|
||||
<h1 class="simColumns">1</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider16" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
|
||||
<td class="text-center high-toggle centred hexSliders"><input class="form-range vertical-center" type="range" id="slider1" step="1" max="15" min="0" value="0" data-bs-no-touch="false" tabindex="-1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<p id="slider16Value"></p>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<p id="slider1Value"></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt2reset-1" type="button" onclick="resetPlace(16)">Reset</button></td>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swt1reset-1" type="button" onclick="resetPlace(1)">Reset</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
411
export/hex-colours.html
Normal file
411
export/hex-colours.html
Normal file
@@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Hex Colours - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link active" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 30%;">
|
||||
<div class="centred reset" style="position: relative;">
|
||||
<p class="resetButton">Reset bit:box</p>
|
||||
<div style="position: absolute;"><img class="overlay resetIcon" src="assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetColours()"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col spacer"><button class="btn btn-primary hexColourButtons customiserButtons" type="button" onclick="requestHex()">Custom Hex Code</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col spacer"><button class="btn btn-primary hexColourButtons customiserButtons" type="button" onclick="invertHex()">Invert Colour</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4" style="width: 40%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<h1 class="simHeading">Binary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="redBinaryNumber" style="text-align: center;color: #ff0000;font-family: 'DSEG7 Classic Regular';">00000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<h1 id="greenBinaryNumber" style="text-align: center;color: #00ff00;font-family: 'DSEG7 Classic Regular';">00000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="blueBinaryNumber" style="text-align: center;color: #0000ff;font-family: 'DSEG7 Classic Regular';">00000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-4" style="width: 30%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="simHeading">Hexadecimal</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="hexadecimalNumber" class="simData">#000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<div class="col-md-6 col-xl-4" style="width: 100%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12" style="height: 56px;">
|
||||
<h1 class="simHeading">Denary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="height: 56px;">
|
||||
<h1 id="denaryNumber" class="simData">0, 0, 0</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h1 class="simHeading">Colour</h1>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h1 class="simHeading">Inverted Colour</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="height: 3em;">
|
||||
<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>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<div class="d-xl-flex justify-content-xl-center centred">
|
||||
<div class="hexColourToggles">
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="stacked">
|
||||
<h1 id="blbR16" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
<th class="stacked">
|
||||
<h1 id="blbR1" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';color: #ff0000;">16</h1>
|
||||
</td>
|
||||
<td>
|
||||
<h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';color: #ff0000;">1</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtRed16Up" onclick="togglePlace("R", "16", "up")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
|
||||
</svg></button></td>
|
||||
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtRed1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="togglePlace("R", "1", "up")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
|
||||
</svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtRed16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace("R", "16", "down")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
|
||||
</svg></button></td>
|
||||
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtRed1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace("R", "1", "down")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
|
||||
</svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtRed16Reset" type="button" onclick="resetPlace("R", "16")">Reset</button></td>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtRed1Reset" type="button" onclick="resetPlace("R", "1")">Reset</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="hexColourToggles">
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="stacked">
|
||||
<h1 id="blbG16" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
<th class="stacked">
|
||||
<h1 id="blbG1" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';color: #00ff00;">16</h1>
|
||||
</td>
|
||||
<td style="color: #00ff00;">
|
||||
<h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';color: #00ff00;">1</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtGreen16Up" onclick="togglePlace("G", "16", "up")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
|
||||
</svg></button></td>
|
||||
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtGreen1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="togglePlace("G", "1", "up")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
|
||||
</svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtGreen16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace("G", "16", "down")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
|
||||
</svg></button></td>
|
||||
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtGreen1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace("G", "1", "down")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
|
||||
</svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtGreen16Reset" type="button" onclick="resetPlace("G", "16")">Reset</button></td>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtGreen1Reset" type="button" onclick="resetPlace("G", "1")">Reset</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="hexColourTogglesEnd">
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="stacked">
|
||||
<h1 id="blbB16" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
<th class="stacked">
|
||||
<h1 id="blbB1" class="bulbs">💡<br></h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';color: #0000ff;">16</h1>
|
||||
</td>
|
||||
<td>
|
||||
<h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';color: #0000ff;">1</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtBlue16Up" onclick="togglePlace("B", "16", "up")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor" class="text-center">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
|
||||
</svg></button></td>
|
||||
<td class="text-center high-toggle"><button class="btn btn-primary btnActive btnUp" id="swtBlue1Up" style="margin-top: 10px;text-align: center;margin-bottom: 0px;" onclick="togglePlace("B", "1", "up")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"></path>
|
||||
</svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtBlue16Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace("B", "16", "down")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
|
||||
</svg></button></td>
|
||||
<td class="text-center mid-toggle"><button class="btn btn-primary btnDown" id="swtBlue1Down" type="button" style="margin-top: 0px;text-align: center;margin-bottom: 10px" onclick="togglePlace("B", "1", "down")"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
|
||||
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
|
||||
<path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
|
||||
</svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtBlue16Reset" type="button" onclick="resetPlace("B", "16")">Reset</button></td>
|
||||
<td class="text-center"><button class="btn btn-primary warning btnReset" id="swtBlue1Reset" type="button" onclick="resetPlace("B", "1")">Reset</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
214
export/index.html
Normal file
214
export/index.html
Normal file
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Welcome to CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "CS:Box",
|
||||
"url": "https://csbox.mrdaviscsit.uk"
|
||||
}
|
||||
</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" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
|
||||
<!-- Start: Hero Clean Reverse -->
|
||||
<div class="container py-5">
|
||||
<div class="row py-5">
|
||||
<div class="col-md-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-end mb-4">
|
||||
<div style="max-width: 450px;">
|
||||
<p class="fw-bold text-success mb-2">Version 1 Available Now</p>
|
||||
<h2 class="fw-bold">Understand Computer Science concepts better.</h2>
|
||||
<p class="completeFeatures"><strong>Coming Soon to CS:Box</strong></p>
|
||||
<p class="completeFeatures"></p>
|
||||
<p class="introP">Enhanced User Interface (UI) / User Experience (UX)<br>Interactive Lessons / Tutorials<br>Expanded Gate Functionality<br>Curriculum-Specific Tools<br>Classroom & Teacher Tools<br>Enhanced Reporting / Analytics</p><a href="projects"><button class="btn btn-primary" type="button">Learn More</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="p-5 mx-lg-5"><img class="rounded img-fluid shadow w-100 fit-cover" style="min-height: 300px;" src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"></div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div><!-- End: Hero Clean Reverse -->
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
211
export/nand-gate.html
Normal file
211
export/nand-gate.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>NAND Gate Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><a class="dropdown-item" href="nor-gate">NOR</a><a class="dropdown-item active" 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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 120px;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="pageHeading" class="simHeading">NAND Gate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<!-- Start: 1 Row 3 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="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">
|
||||
<h1 id="blbNandGate" class="poweredOn dualInputSingleOutput">💡<br></h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div><!-- End: 1 Row 3 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
211
export/nor-gate.html
Normal file
211
export/nor-gate.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>NOR Gate Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><a class="dropdown-item active" 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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 120px;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="pageHeading" class="simHeading">NOR Gate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<!-- Start: 1 Row 3 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="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">
|
||||
<h1 id="blbNorGate" class="poweredOn dualInputSingleOutput">💡<br></h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div><!-- End: 1 Row 3 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
211
export/not-gate.html
Normal file
211
export/not-gate.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>NOT Gate Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item active" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 120px;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="pageHeading" class="simHeading">NOT Gate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<!-- Start: 1 Row 3 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="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">
|
||||
<h1 id="blbNotGate" class="poweredOn dualInputSingleOutput">💡<br></h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div><!-- End: 1 Row 3 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
211
export/or-gate.html
Normal file
211
export/or-gate.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>OR Gate Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item active" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 120px;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="pageHeading" class="simHeading">OR Gate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<!-- Start: 1 Row 3 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="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">
|
||||
<h1 id="blbOrGate" class="poweredOff dualInputSingleOutput">💡<br></h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div><!-- End: 1 Row 3 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
217
export/projects.html
Normal file
217
export/projects.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Projects - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header>
|
||||
<section class="py-5">
|
||||
<!-- Start: Projects Grid -->
|
||||
<div class="container">
|
||||
<div class="row mb-5">
|
||||
<div class="col text-center mx-auto">
|
||||
<h2 class="fw-bold">Coming Soon to CS:Box</h2>
|
||||
<p class="text-muted">Wave 3 will focus on enhanced usability, new interactive challenges, and a better user experience. Version 2.0 will introduce gamification, personalization, and real-time collaboration, making CS:Box a cutting-edge learning tool for logic gates, binary, and hexadecimal concepts. By adding multi-user collaboration, gamification, and mobile support, CS:Box will evolve into a next-generation educational platform for the UK Computing Curriculum and beyond.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
|
||||
<div class="col mb-4">
|
||||
<div><a href="#"><img class="rounded img-fluid shadow w-100 fit-cover" src="assets/img/products/1.jpg?h=fc1e51d44f18accfa3a90f81c9cfffe4" style="height: 250px;"></a>
|
||||
<div class="py-4"><span class="badge bg-primary mb-2">Website</span>
|
||||
<h4 class="fw-bold">Lorem libero donec</h4>
|
||||
<p class="text-muted">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div><a href="#"><img class="rounded img-fluid shadow w-100 fit-cover" src="assets/img/products/2.jpg?h=104fcc18ad179e4b0b9e0ee12b849bed" style="height: 250px;"></a>
|
||||
<div class="py-4"><span class="badge bg-primary mb-2">Website</span>
|
||||
<h4 class="fw-bold">Lorem libero donec</h4>
|
||||
<p class="text-muted">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div><a href="#"><img class="rounded img-fluid shadow w-100 fit-cover" src="assets/img/products/3.jpg?h=fce4fd8e26138d1b5fd8c63ef4f2e64c" style="height: 250px;"></a>
|
||||
<div class="py-4"><span class="badge bg-primary mb-2">Website</span>
|
||||
<h4 class="fw-bold">Lorem libero donec</h4>
|
||||
<p class="text-muted">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col mb-4">
|
||||
<div><a href="#"><img class="rounded img-fluid shadow w-100 fit-cover" src="assets/img/products/1.jpg?h=fc1e51d44f18accfa3a90f81c9cfffe4" style="height: 250px;"></a>
|
||||
<div class="py-4"><span class="badge bg-primary mb-2">Website</span>
|
||||
<h4 class="fw-bold">Lorem libero donec</h4>
|
||||
<p class="text-muted">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: Projects Grid -->
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
340
export/twos-compliment-binary.html
Normal file
340
export/twos-compliment-binary.html
Normal file
@@ -0,0 +1,340 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Two's Complement Binary Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item active" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<!-- Start: Hero Banner Color -->
|
||||
<section class="py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<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="row">
|
||||
<div class="col centred" style="width: 35%;">
|
||||
<div class="centred reset" style="position: relative;">
|
||||
<p class="resetButton">Reset bit:box</p>
|
||||
<div style="position: absolute;"><img class="overlay resetIcon" src="assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetBinarySimulator()"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="simHeading">Denary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="denaryNumber" class="simData">0</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestBinary()">Custom Binary</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestDenary()">Custom Denary</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 35%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="simHeading">Binary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="binaryNumber" class="simData">00000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftTwosComplement("left")">Left Shift</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftTwosComplement("right")">Right Shift</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col spacer" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred">
|
||||
<div class="text-center d-xl-flex justify-content-xl-center" style="width: 100%;">
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tableCells">
|
||||
<h1 id="blbN128" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb64" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb32" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb16" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb8" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb4" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb2" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb1" class="poweredOff" style="text-align: center;font-size: 48px;">💡</h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">-128</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">64</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">32</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">16</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">8</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">4</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">2</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">1</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swtN128" type="button" onclick="changeBit(-128)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt64" type="button" onclick="changeBit(64)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt32" type="button" onclick="changeBit(32)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt16" type="button" onclick="changeBit(16)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt8" type="button" onclick="changeBit(8)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt4" type="button" onclick="changeBit(4)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt2" type="button" onclick="changeBit(2)">⏼<br></button></td>
|
||||
<td class="text-center"><button class="btn btn-primary buttonMiddle" id="swt1" type="button" onclick="changeBit(1)">⏼<br></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
325
export/unsigned-binary.html
Normal file
325
export/unsigned-binary.html
Normal file
@@ -0,0 +1,325 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>Unsigned Binary Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item active" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a><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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 35%;">
|
||||
<div class="centred reset" style="position: relative;">
|
||||
<p class="resetButton">Reset bit:box</p>
|
||||
<div style="position: absolute;"><img class="overlay resetIcon" src="assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetBinarySimulator()"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="simHeading">Denary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="denaryNumber" class="simData">0</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestBinary()">Custom Binary</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="requestDenary()">Custom Denary</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col centred" style="width: 35%;">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 bottomSpacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 60%;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="simHeading">Binary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="binaryNumber" class="simData">00000000</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" style="width: 20%;">
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftBinary("left")">Left Shift</button></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col hexadecimalButtons"><button class="btn btn-primary binaryButtons customiserButtons" type="button" onclick="shiftBinary("right")">Right Shift</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col spacer" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred">
|
||||
<div class="text-center d-xl-flex justify-content-xl-center" style="width: 100%;">
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb128" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb64" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb32" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb16" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb8" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb4" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb2" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1>
|
||||
</th>
|
||||
<th class="tableCells">
|
||||
<h1 id="blb1" class="poweredOff" style="text-align: center;font-size: 48px;">💡</h1>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">128</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">64</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">32</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">16</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">8</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">4</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">2</h1>
|
||||
</td>
|
||||
<td class="tableCells">
|
||||
<h1 class="simColumns">1</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt128" type="button" onclick="changeBit(128)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt64" type="button" onclick="changeBit(64)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt32" type="button" onclick="changeBit(32)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt16" type="button" onclick="changeBit(16)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt8" type="button" onclick="changeBit(8)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt4" type="button" onclick="changeBit(4)">⏼<br></button></td>
|
||||
<td class="text-center tableCells"><button class="btn btn-primary buttonMiddle" id="swt2" type="button" onclick="changeBit(2)">⏼<br></button></td>
|
||||
<td class="text-center"><button class="btn btn-primary buttonMiddle" id="swt1" type="button" onclick="changeBit(1)">⏼<br></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
211
export/xnor-gate.html
Normal file
211
export/xnor-gate.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>XNOR Gate Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" 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 active" href="xnor-gate">XNOR</a></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 120px;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="pageHeading" class="simHeading">XNOR Gate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<!-- Start: 1 Row 3 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="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">
|
||||
<h1 id="blbXnorGate" class="poweredOn dualInputSingleOutput">💡<br></h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div><!-- End: 1 Row 3 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
211
export/xor-gate.html
Normal file
211
export/xor-gate.html
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html data-bs-theme="auto" lang="en" style="background: rgb(45,44,56);">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//analytics.adcmnetworks.co.uk/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '2']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>XOR Gate Simulator - CS:Box</title>
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
// JavaScript snippet handling Dark/Light mode switching
|
||||
|
||||
const getStoredTheme = () => localStorage.getItem('theme');
|
||||
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
||||
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
|
||||
if (forcedTheme) return forcedTheme;
|
||||
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
|
||||
if (pageTheme) {
|
||||
return pageTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
||||
|
||||
if (!themeSwitchers.length) return;
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active');
|
||||
element.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
for (const themeSwitcher of themeSwitchers) {
|
||||
|
||||
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
||||
|
||||
if (btnToActivate) {
|
||||
btnToActivate.classList.add('active');
|
||||
btnToActivate.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme();
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme);
|
||||
})
|
||||
})
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="icon" type="image/svg+xml" sizes="500x500" href="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
|
||||
<link rel="stylesheet" href="assets/css/DSEG7%20Classic%20Regular.css">
|
||||
<link rel="stylesheet" href="assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/Inter.css?h=d12fe520d7f1a08f91c8333dfb12e0af">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=ba41513e9a68a6b69b27fd4ab84c248d">
|
||||
<link rel="stylesheet" href="assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
||||
<link rel="stylesheet" href="assets/css/bss-overrides.css?h=c465df5ec180459d04fa6be96fb73a3b">
|
||||
<link rel="stylesheet" href="assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
||||
<link rel="stylesheet" href="assets/css/styles.css?h=3e090fbf977edce98dcf9e4faea134e4">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="bg-dark">
|
||||
<!-- Start: Site Navigation -->
|
||||
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
||||
<div class="container"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse" id="navcol-5">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="about">About</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
||||
</li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
||||
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link active" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" 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 active" href="xor-gate">XOR</a><a class="dropdown-item" href="xnor-gate">XNOR</a></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav><!-- End: Site Navigation -->
|
||||
</header><!-- Start: Hero Banner Color -->
|
||||
<section class="d-print-none d-lg-none d-xl-none d-xxl-none py-4 py-xl-5">
|
||||
<div class="container h-100">
|
||||
<div class="text-white border rounded border-0 p-1 bg-danger">
|
||||
<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 justify-content-md-start align-items-md-center justify-content-xl-center mx-auto">
|
||||
<div>
|
||||
<h1 class="text-uppercase fw-bold text-white mb-3" style="font-size: 24pt;">SITE Not Suitable for DEVICES WITH SMALLER SCREENS</h1>
|
||||
<p class="mb-4">This site is not suitable for mobile devices and tablets, please try accessing this site on a desktop or laptop.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End: Hero Banner Color -->
|
||||
<section class="d-none d-print-block d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block" style="background: rgb(39,38,46);">
|
||||
<!-- Start: 1 Row 2 Columns -->
|
||||
<div class="container" style="width: 100%;margin-top: 15px;">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 120px;"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 id="pageHeading" class="simHeading">XOR Gate</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End: 1 Row 2 Columns -->
|
||||
<!-- Start: 1 Row 3 Columns -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-auto logicGates centred" style="height: 194px;"><button class="btn btn-primary buttonMiddle logicGateInput1" id="swtInput1" type="button" onclick="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">
|
||||
<h1 id="blbXorGate" class="poweredOff dualInputSingleOutput">💡<br></h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div><!-- End: 1 Row 3 Columns -->
|
||||
<div class="container d-xl-flex justify-content-xl-center centred" style="height: 120px;"></div>
|
||||
</section><!-- Start: Footer Multi Column -->
|
||||
<footer style="background: rgb(45,44,56);">
|
||||
<div class="container py-4 py-lg-5">
|
||||
<div class="row justify-content-center">
|
||||
<!-- Start: Branding -->
|
||||
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
||||
<div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
||||
<p class="text-muted">Computer Science Concept Simulators</p>
|
||||
</div><!-- End: Branding -->
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
||||
<p class="mb-0">Copyright © 2025 CS:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
||||
<script src="assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
||||
<script src="assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user