You've already forked CS-Box
Alexander Davis
d4441afd55
✨ Wave 2 Beta Release: New Logic Gates, Improved UX, and Major Enhancements! ✨ --- ## **🆕 New Features** ### **1️⃣ Additional Logic Gates** #### **🔲 NAND Gate** - **Fully functional NAND logic** implemented. - **Truth Table**: | **Input A** | **Input B** | **Output (A NAND B)** | |-------------|-------------|-----------------------| | 0 | 0 | **1** (ON) | | 0 | 1 | **1** (ON) | | 1 | 0 | **1** (ON) | | 1 | 1 | **0** (OFF) | - **Toggle buttons** for Input 1 and Input 2 work as expected. - Lightbulb updates correctly to match the logic output. #### **🔲 NOR Gate** - **Fully functional NOR logic** implemented. - **Truth Table**: | **Input A** | **Input B** | **Output (A NOR B)** | |-------------|-------------|----------------------| | 0 | 0 | **1** (ON) | | 0 | 1 | **0** (OFF) | | 1 | 0 | **0** (OFF) | | 1 | 1 | **0** (OFF) | - Lightbulb updates correctly to match the logic output. - Toggle buttons for Input 1 and Input 2 work as expected. #### **🔲 XOR Gate** - **Fully functional XOR logic** implemented. - **Truth Table**: | **Input A** | **Input B** | **Output (A XOR B)** | |-------------|-------------|----------------------| | 0 | 0 | **0** (OFF) | | 0 | 1 | **1** (ON) | | 1 | 0 | **1** (ON) | | 1 | 1 | **0** (OFF) | - Toggle buttons for Input 1 and Input 2 trigger the logic updates. - Lightbulb behavior reflects the XOR output logic. #### **🔲 XNOR Gate** - **Fully functional XNOR logic** implemented. - **Truth Table**: | **Input A** | **Input B** | **Output (A XNOR B)** | |-------------|-------------|-----------------------| | 0 | 0 | **1** (ON) | | 0 | 1 | **0** (OFF) | | 1 | 0 | **0** (OFF) | | 1 | 1 | **1** (ON) | - Lightbulb updates correctly based on the logic. - Input toggle buttons work correctly for Input 1 and Input 2. --- ## **🛠️ Enhancements & Improvements** - **Input Handling**: - **Input toggles** now work consistently across all logic gate types (AND, OR, NOT, XOR, NOR, NAND, XNOR). - Input logic is consistent across all gate types, including the lightbulb status updates. - **Reset Functionality**: - The **reset button** now works across all logic gates. - The lightbulb and toggle button status are properly reset. - **Code Refactoring**: - Reduced **redundancy** in the toggle input functions. - Enhanced **code readability** and maintainability. - Removed unnecessary logic duplications and consolidated shared logic for gate input handling. --- ## **🐛 Bug Fixes** - **Fixed NAND Gate logic** — lightbulb now correctly updates according to the truth table. - **Fixed XNOR Gate logic** — logic now correctly handles the logic for matching inputs. - **Fixed Reset Functionality** — lightbulbs and buttons now reset correctly across all gate types. - **General Bug Fixes** — Minor improvements in input toggle functions for better user experience. --- ## **📁 Files Changed** 📄 logicGates.js 📄 logicGates.html --- ## **🚀 Release Notes** This release marks the **Wave 2 Beta** of the CS:Box project, bringing support for all fundamental logic gates. This wave includes the **NAND, NOR, XOR, and XNOR gates**, which have been built with consistent logic, responsive lightbulb behavior, and proper input handling. This release also introduces major fixes to the **reset functionality**, ensuring that all gates reset properly when the reset button is pressed. **New Features Include:** - Full support for **NAND, NOR, XOR, XNOR logic gates**. - Input toggle buttons now work seamlessly for all gates. - Lightbulb status updates in real-time according to input changes. - **Reset button** now clears all input states and correctly resets the lightbulb status for each gate type. **Looking Ahead**: - Further UI improvements to make the interface more user-friendly. - Expanded testing to ensure accurate logic across all devices. Enjoy this latest version of CS:Box! 🚀
324 lines
28 KiB
HTML
324 lines
28 KiB
HTML
<!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', '1']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
|
|
<!-- Matomo Image Tracker-->
|
|
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&rec=1" style="border:0" alt="" />
|
|
<!-- End Matomo -->
|
|
<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=1bd2fff2799ca0c747d7b2f342f09263">
|
|
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
|
|
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
|
<link rel="stylesheet" href="/assets/css/Inter.css?h=ef85e53047102b777e7deb25bab583c9">
|
|
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=4afd515aa4663edcfb6121d868bc7f5a">
|
|
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
|
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
|
|
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
|
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
|
|
</head>
|
|
|
|
<body>
|
|
<header class="bg-dark">
|
|
<!-- Start: Site Navigation -->
|
|
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
|
<div class="container"><img src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
|
<div class="collapse navbar-collapse" id="navcol-5">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link 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="py-5 p-lg-5">
|
|
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
|
|
<div class="col mb-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-diagram-3 text-success">
|
|
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Binary Simulations</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-hash text-success">
|
|
<path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Hexadecimal Tools</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-toggle2-on text-success">
|
|
<path d="M7 5H3a3 3 0 0 0 0 6h4a4.995 4.995 0 0 1-.584-1H3a2 2 0 1 1 0-4h3.416c.156-.357.352-.692.584-1"></path>
|
|
<path d="M16 8A5 5 0 1 1 6 8a5 5 0 0 1 10 0"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Logic Gates</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-palette text-success">
|
|
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"></path>
|
|
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Hex Colors</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-globe text-success">
|
|
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472M3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">User-Focused Design</h5>
|
|
<p class="text-muted card-text mb-4">CS:Box is accessible on any device with a browser. Its web-based design ensures students can engage with computing concepts from any location, promoting independent learning and experimentation.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End: Features Cards -->
|
|
</section><!-- End: Service Cards -->
|
|
<!-- Start: Features Cards -->
|
|
<div class="container py-5">
|
|
<div class="row 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: About Project -->
|
|
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
|
|
<h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">About Project</h1><a href="https://github.com/MrDavisCSIT/CS-Box" target="_blank">
|
|
<div class="fw-bold d-flex align-items-center mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github" style="font-size: 25px;margin-right: 10px;">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
|
|
</svg><span>GitHub</span></div>
|
|
</a>
|
|
</div><!-- End: About Project -->
|
|
<!-- Start: About -->
|
|
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div><!-- End: About -->
|
|
<!-- Start: Social Links -->
|
|
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
|
|
<h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
|
|
<div class="row">
|
|
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
|
|
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
|
|
</svg></a></div>
|
|
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
|
|
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
|
|
</svg></a></div>
|
|
<div class="col-md-3"><a href="https://github.com/MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github social-media">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
|
|
</svg></a></div>
|
|
<div class="col-md-3"></div>
|
|
</div>
|
|
</div><!-- End: Social Links -->
|
|
<!-- Start: Branding -->
|
|
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
|
<div class="fw-bold d-flex align-items-center mb-2"><img src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
|
<p class="text-muted">Computer Science Concept Simulators</p>
|
|
</div><!-- End: Branding -->
|
|
</div>
|
|
<hr>
|
|
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
|
<p class="mb-0">Copyright © 2024 CS:Box<br>Powered By ADCM Networks</p>
|
|
</div>
|
|
</div>
|
|
</footer><!-- End: Footer Multi Column -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
|
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
|
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
|
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
<script src="/assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
</body>
|
|
|
|
</html> |