You've already forked computing-box
feat(rebrand): migrate CS:Box content to Computing:Box branding
- Rebrand UI text, navigation, footer, and metadata to Computing:Box - Add canonical URLs and updated Open Graph metadata for SEO - Replace legacy CS:Box imagery with new Computing:Box assets - Update About page copy to reflect expanded curriculum focus - Enhance A Level hexadecimal simulator with custom binary input - Regenerate exported assets and font hashes Signed-off-by: Alexander Davis <alex@adcm.uk>
This commit is contained in:
@@ -20,9 +20,11 @@
|
||||
<!-- 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">
|
||||
<link rel="canonical" href="https://www.computingbox.co.uk/about.html">
|
||||
<meta property="og:url" content="https://www.computingbox.co.uk/about.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="og:image" content="https://www.computingbox.co.uk/assets/img/ComputingBox-Logo.webp">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
@@ -113,8 +115,8 @@
|
||||
<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/Inter.css?h=be025f91dab9b81abd5e161b29118b44">
|
||||
<link rel="stylesheet" href="assets/css/Open%20Sans.css?h=9a12aca0fcffa0bf3e6a406b06de7e47">
|
||||
<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">
|
||||
@@ -125,7 +127,7 @@
|
||||
<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="container"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>Computing: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>
|
||||
@@ -150,16 +152,16 @@
|
||||
<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>
|
||||
<p class="fw-bold text-success mb-2">Computing:Box</p>
|
||||
<h3 class="fw-bold">An interactive learning platform for exploring key ideas from 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 mb-5"><img class="rounded img-fluid shadow" src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1"></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>
|
||||
<h5 class="fw-bold">About Computing:Box</h5>
|
||||
<p class="text-muted mb-4">Computing:Box is a web-based learning tool designed to help students understand core computing concepts in a clear and practical way. It supports learning across different areas of computing by using interactive activities that make abstract ideas easier to see and understand.<br><br>The platform is designed for use in lessons, independent study, and revision, helping students build confidence as they explore how computers work.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -167,17 +169,17 @@
|
||||
<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>
|
||||
<h5 class="fw-bold">From Bit:Box to Computing:Box</h5>
|
||||
<p class="text-muted mb-4">Computing:Box began as Bit:Box, a digital version of a physical Binary Light Box created by Mr Davis. The original device used lightbulbs and an Arduino to show how binary numbers are built using on and off values.<br><br>By switching lights on and off, students could clearly see how binary counting and place values work. This hands-on approach helped make a difficult topic more accessible and engaging.</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 mb-5"><img class="rounded img-fluid shadow" src="assets/img/computingbox-concept-illustration.webp?h=9dc6d025c1d9e28ef023c8c72105cc82"></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>
|
||||
<h5 class="fw-bold">What Computing:Box Does Now</h5>
|
||||
<p class="text-muted mb-4">Computing:Box builds on the ideas behind Bit:Box and expands them to cover a wider range of computing topics from the UK Computing Curriculum. In addition to binary, students can now explore areas such as hexadecimal, logic gates, and how colours are represented in computing.<br><br>The focus remains on learning by doing. Students can interact with simulations, change values, and see results instantly. This helps them understand how computing concepts work, rather than just memorising rules or steps.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -188,7 +190,7 @@
|
||||
<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>
|
||||
<h3 class="fw-bold">Key Features of Computing:Box</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-lg-5 py-5">
|
||||
@@ -200,7 +202,7 @@
|
||||
<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>
|
||||
<p class="text-muted mb-4 card-text">Interactive tools that help students understand how numbers work in binary. Students can turn bits on and off and see how the number changes. This helps them learn how binary numbers are built, instead of just memorising conversions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -211,7 +213,7 @@
|
||||
<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>
|
||||
<p class="text-muted mb-4 card-text">Easy-to-use tools that help students learn hexadecimal. Students can practise changing numbers between binary, denary, and hexadecimal. Clear steps and visual support help students understand how the number systems are connected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -223,7 +225,7 @@
|
||||
<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>
|
||||
<p class="text-muted mb-4 card-text">Simple simulations that show how logic gates work. Students can change the inputs and see the output update instantly. This helps them understand how gates like AND, OR, and NOT make decisions inside computers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -235,7 +237,7 @@
|
||||
<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>
|
||||
<p class="text-muted mb-4 card-text">A visual tool that shows how colours are created using hexadecimal values. Students can see how red, green, and blue values change a colour. This helps link hexadecimal numbers to real uses like websites and digital design.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -246,7 +248,7 @@
|
||||
<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>
|
||||
<p class="text-muted mb-4 card-text">Computing: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>
|
||||
@@ -261,7 +263,7 @@
|
||||
<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>
|
||||
<p class="text-muted mb-4">Computing:Box is more than a set of interactive tools. It is designed to help students learn computing concepts step by step, using clear visuals and simple interactions.<br><br>By changing values and seeing results straight away, students can build understanding at their own pace. This supports learners with different levels of confidence and helps make challenging ideas easier to grasp.<br><br>Whether students are learning binary for the first time or developing their understanding of hexadecimal and logic gates, Computing:Box provides a clear and practical way to learn. The platform reflects a focus on creating accessible, student-friendly resources that support learning in the modern classroom.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,13 +274,13 @@
|
||||
<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 class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;"><span>Computing:Box</span></div>
|
||||
<p class="text-muted">Computing 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>
|
||||
<p class="mb-0">Copyright © 2025 Computing:Box<br>Powered By ADCM Networks</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End: Footer Multi Column -->
|
||||
@@ -286,7 +288,7 @@
|
||||
<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/hexadecimal.js?h=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user