You've already forked computing-box
feat(binary): add full binary simulator with unsigned and two’s complement modes
- Introduce new Binary Simulator page with adjustable bit width (4–16 bits) - Support unsigned and two’s complement representations with live conversion - Add left/right shift operations and custom binary/denary input - Implement accessible bulb-and-switch UI with MD3-inspired styling - Add seven-segment display font assets for realistic number output - Establish shared base layout, styles, and tooling for future simulators Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
408
.gitignore
vendored
408
.gitignore
vendored
@@ -1,398 +1,24 @@
|
|||||||
## Ignore Visual Studio temporary files, build results, and
|
# build output
|
||||||
## files generated by popular Visual Studio add-ons.
|
dist/
|
||||||
##
|
|
||||||
## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
|
|
||||||
|
|
||||||
# User-specific files
|
# generated types
|
||||||
*.rsuser
|
.astro/
|
||||||
*.suo
|
|
||||||
*.user
|
|
||||||
*.userosscache
|
|
||||||
*.sln.docstates
|
|
||||||
|
|
||||||
# User-specific files (MonoDevelop/Xamarin Studio)
|
# dependencies
|
||||||
*.userprefs
|
|
||||||
|
|
||||||
# Mono auto generated files
|
|
||||||
mono_crash.*
|
|
||||||
|
|
||||||
# Build results
|
|
||||||
[Dd]ebug/
|
|
||||||
[Dd]ebugPublic/
|
|
||||||
[Rr]elease/
|
|
||||||
[Rr]eleases/
|
|
||||||
x64/
|
|
||||||
x86/
|
|
||||||
[Ww][Ii][Nn]32/
|
|
||||||
[Aa][Rr][Mm]/
|
|
||||||
[Aa][Rr][Mm]64/
|
|
||||||
bld/
|
|
||||||
[Bb]in/
|
|
||||||
[Oo]bj/
|
|
||||||
[Ll]og/
|
|
||||||
[Ll]ogs/
|
|
||||||
|
|
||||||
# Visual Studio 2015/2017 cache/options directory
|
|
||||||
.vs/
|
|
||||||
# Uncomment if you have tasks that create the project's static files in wwwroot
|
|
||||||
#wwwroot/
|
|
||||||
|
|
||||||
# Visual Studio 2017 auto generated files
|
|
||||||
Generated\ Files/
|
|
||||||
|
|
||||||
# MSTest test Results
|
|
||||||
[Tt]est[Rr]esult*/
|
|
||||||
[Bb]uild[Ll]og.*
|
|
||||||
|
|
||||||
# NUnit
|
|
||||||
*.VisualState.xml
|
|
||||||
TestResult.xml
|
|
||||||
nunit-*.xml
|
|
||||||
|
|
||||||
# Build Results of an ATL Project
|
|
||||||
[Dd]ebugPS/
|
|
||||||
[Rr]eleasePS/
|
|
||||||
dlldata.c
|
|
||||||
|
|
||||||
# Benchmark Results
|
|
||||||
BenchmarkDotNet.Artifacts/
|
|
||||||
|
|
||||||
# .NET Core
|
|
||||||
project.lock.json
|
|
||||||
project.fragment.lock.json
|
|
||||||
artifacts/
|
|
||||||
|
|
||||||
# ASP.NET Scaffolding
|
|
||||||
ScaffoldingReadMe.txt
|
|
||||||
|
|
||||||
# StyleCop
|
|
||||||
StyleCopReport.xml
|
|
||||||
|
|
||||||
# Files built by Visual Studio
|
|
||||||
*_i.c
|
|
||||||
*_p.c
|
|
||||||
*_h.h
|
|
||||||
*.ilk
|
|
||||||
*.meta
|
|
||||||
*.obj
|
|
||||||
*.iobj
|
|
||||||
*.pch
|
|
||||||
*.pdb
|
|
||||||
*.ipdb
|
|
||||||
*.pgc
|
|
||||||
*.pgd
|
|
||||||
*.rsp
|
|
||||||
*.sbr
|
|
||||||
*.tlb
|
|
||||||
*.tli
|
|
||||||
*.tlh
|
|
||||||
*.tmp
|
|
||||||
*.tmp_proj
|
|
||||||
*_wpftmp.csproj
|
|
||||||
*.log
|
|
||||||
*.tlog
|
|
||||||
*.vspscc
|
|
||||||
*.vssscc
|
|
||||||
.builds
|
|
||||||
*.pidb
|
|
||||||
*.svclog
|
|
||||||
*.scc
|
|
||||||
|
|
||||||
# Chutzpah Test files
|
|
||||||
_Chutzpah*
|
|
||||||
|
|
||||||
# Visual C++ cache files
|
|
||||||
ipch/
|
|
||||||
*.aps
|
|
||||||
*.ncb
|
|
||||||
*.opendb
|
|
||||||
*.opensdf
|
|
||||||
*.sdf
|
|
||||||
*.cachefile
|
|
||||||
*.VC.db
|
|
||||||
*.VC.VC.opendb
|
|
||||||
|
|
||||||
# Visual Studio profiler
|
|
||||||
*.psess
|
|
||||||
*.vsp
|
|
||||||
*.vspx
|
|
||||||
*.sap
|
|
||||||
|
|
||||||
# Visual Studio Trace Files
|
|
||||||
*.e2e
|
|
||||||
|
|
||||||
# TFS 2012 Local Workspace
|
|
||||||
$tf/
|
|
||||||
|
|
||||||
# Guidance Automation Toolkit
|
|
||||||
*.gpState
|
|
||||||
|
|
||||||
# ReSharper is a .NET coding add-in
|
|
||||||
_ReSharper*/
|
|
||||||
*.[Rr]e[Ss]harper
|
|
||||||
*.DotSettings.user
|
|
||||||
|
|
||||||
# TeamCity is a build add-in
|
|
||||||
_TeamCity*
|
|
||||||
|
|
||||||
# DotCover is a Code Coverage Tool
|
|
||||||
*.dotCover
|
|
||||||
|
|
||||||
# AxoCover is a Code Coverage Tool
|
|
||||||
.axoCover/*
|
|
||||||
!.axoCover/settings.json
|
|
||||||
|
|
||||||
# Coverlet is a free, cross platform Code Coverage Tool
|
|
||||||
coverage*.json
|
|
||||||
coverage*.xml
|
|
||||||
coverage*.info
|
|
||||||
|
|
||||||
# Visual Studio code coverage results
|
|
||||||
*.coverage
|
|
||||||
*.coveragexml
|
|
||||||
|
|
||||||
# NCrunch
|
|
||||||
_NCrunch_*
|
|
||||||
.*crunch*.local.xml
|
|
||||||
nCrunchTemp_*
|
|
||||||
|
|
||||||
# MightyMoose
|
|
||||||
*.mm.*
|
|
||||||
AutoTest.Net/
|
|
||||||
|
|
||||||
# Web workbench (sass)
|
|
||||||
.sass-cache/
|
|
||||||
|
|
||||||
# Installshield output folder
|
|
||||||
[Ee]xpress/
|
|
||||||
|
|
||||||
# DocProject is a documentation generator add-in
|
|
||||||
DocProject/buildhelp/
|
|
||||||
DocProject/Help/*.HxT
|
|
||||||
DocProject/Help/*.HxC
|
|
||||||
DocProject/Help/*.hhc
|
|
||||||
DocProject/Help/*.hhk
|
|
||||||
DocProject/Help/*.hhp
|
|
||||||
DocProject/Help/Html2
|
|
||||||
DocProject/Help/html
|
|
||||||
|
|
||||||
# Click-Once directory
|
|
||||||
publish/
|
|
||||||
|
|
||||||
# Publish Web Output
|
|
||||||
*.[Pp]ublish.xml
|
|
||||||
*.azurePubxml
|
|
||||||
# Note: Comment the next line if you want to checkin your web deploy settings,
|
|
||||||
# but database connection strings (with potential passwords) will be unencrypted
|
|
||||||
*.pubxml
|
|
||||||
*.publishproj
|
|
||||||
|
|
||||||
# Microsoft Azure Web App publish settings. Comment the next line if you want to
|
|
||||||
# checkin your Azure Web App publish settings, but sensitive information contained
|
|
||||||
# in these scripts will be unencrypted
|
|
||||||
PublishScripts/
|
|
||||||
|
|
||||||
# NuGet Packages
|
|
||||||
*.nupkg
|
|
||||||
# NuGet Symbol Packages
|
|
||||||
*.snupkg
|
|
||||||
# The packages folder can be ignored because of Package Restore
|
|
||||||
**/[Pp]ackages/*
|
|
||||||
# except build/, which is used as an MSBuild target.
|
|
||||||
!**/[Pp]ackages/build/
|
|
||||||
# Uncomment if necessary however generally it will be regenerated when needed
|
|
||||||
#!**/[Pp]ackages/repositories.config
|
|
||||||
# NuGet v3's project.json files produces more ignorable files
|
|
||||||
*.nuget.props
|
|
||||||
*.nuget.targets
|
|
||||||
|
|
||||||
# Microsoft Azure Build Output
|
|
||||||
csx/
|
|
||||||
*.build.csdef
|
|
||||||
|
|
||||||
# Microsoft Azure Emulator
|
|
||||||
ecf/
|
|
||||||
rcf/
|
|
||||||
|
|
||||||
# Windows Store app package directories and files
|
|
||||||
AppPackages/
|
|
||||||
BundleArtifacts/
|
|
||||||
Package.StoreAssociation.xml
|
|
||||||
_pkginfo.txt
|
|
||||||
*.appx
|
|
||||||
*.appxbundle
|
|
||||||
*.appxupload
|
|
||||||
|
|
||||||
# Visual Studio cache files
|
|
||||||
# files ending in .cache can be ignored
|
|
||||||
*.[Cc]ache
|
|
||||||
# but keep track of directories ending in .cache
|
|
||||||
!?*.[Cc]ache/
|
|
||||||
|
|
||||||
# Others
|
|
||||||
ClientBin/
|
|
||||||
~$*
|
|
||||||
*~
|
|
||||||
*.dbmdl
|
|
||||||
*.dbproj.schemaview
|
|
||||||
*.jfm
|
|
||||||
*.pfx
|
|
||||||
*.publishsettings
|
|
||||||
orleans.codegen.cs
|
|
||||||
|
|
||||||
# Including strong name files can present a security risk
|
|
||||||
# (https://github.com/github/gitignore/pull/2483#issue-259490424)
|
|
||||||
#*.snk
|
|
||||||
|
|
||||||
# Since there are multiple workflows, uncomment next line to ignore bower_components
|
|
||||||
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
|
|
||||||
#bower_components/
|
|
||||||
|
|
||||||
# RIA/Silverlight projects
|
|
||||||
Generated_Code/
|
|
||||||
|
|
||||||
# Backup & report files from converting an old project file
|
|
||||||
# to a newer Visual Studio version. Backup files are not needed,
|
|
||||||
# because we have git ;-)
|
|
||||||
_UpgradeReport_Files/
|
|
||||||
Backup*/
|
|
||||||
UpgradeLog*.XML
|
|
||||||
UpgradeLog*.htm
|
|
||||||
ServiceFabricBackup/
|
|
||||||
*.rptproj.bak
|
|
||||||
|
|
||||||
# SQL Server files
|
|
||||||
*.mdf
|
|
||||||
*.ldf
|
|
||||||
*.ndf
|
|
||||||
|
|
||||||
# Business Intelligence projects
|
|
||||||
*.rdl.data
|
|
||||||
*.bim.layout
|
|
||||||
*.bim_*.settings
|
|
||||||
*.rptproj.rsuser
|
|
||||||
*- [Bb]ackup.rdl
|
|
||||||
*- [Bb]ackup ([0-9]).rdl
|
|
||||||
*- [Bb]ackup ([0-9][0-9]).rdl
|
|
||||||
|
|
||||||
# Microsoft Fakes
|
|
||||||
FakesAssemblies/
|
|
||||||
|
|
||||||
# GhostDoc plugin setting file
|
|
||||||
*.GhostDoc.xml
|
|
||||||
|
|
||||||
# Node.js Tools for Visual Studio
|
|
||||||
.ntvs_analysis.dat
|
|
||||||
node_modules/
|
node_modules/
|
||||||
|
|
||||||
# Visual Studio 6 build log
|
# logs
|
||||||
*.plg
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
# Visual Studio 6 workspace options file
|
# environment variables
|
||||||
*.opt
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
|
# macOS-specific files
|
||||||
*.vbw
|
.DS_Store
|
||||||
|
|
||||||
# Visual Studio 6 auto-generated project file (contains which files were open etc.)
|
# jetbrains setting folder
|
||||||
*.vbp
|
.idea/
|
||||||
|
|
||||||
# Visual Studio 6 workspace and project file (working project files containing files to include in project)
|
|
||||||
*.dsw
|
|
||||||
*.dsp
|
|
||||||
|
|
||||||
# Visual Studio 6 technical files
|
|
||||||
*.ncb
|
|
||||||
*.aps
|
|
||||||
|
|
||||||
# Visual Studio LightSwitch build output
|
|
||||||
**/*.HTMLClient/GeneratedArtifacts
|
|
||||||
**/*.DesktopClient/GeneratedArtifacts
|
|
||||||
**/*.DesktopClient/ModelManifest.xml
|
|
||||||
**/*.Server/GeneratedArtifacts
|
|
||||||
**/*.Server/ModelManifest.xml
|
|
||||||
_Pvt_Extensions
|
|
||||||
|
|
||||||
# Paket dependency manager
|
|
||||||
.paket/paket.exe
|
|
||||||
paket-files/
|
|
||||||
|
|
||||||
# FAKE - F# Make
|
|
||||||
.fake/
|
|
||||||
|
|
||||||
# CodeRush personal settings
|
|
||||||
.cr/personal
|
|
||||||
|
|
||||||
# Python Tools for Visual Studio (PTVS)
|
|
||||||
__pycache__/
|
|
||||||
*.pyc
|
|
||||||
|
|
||||||
# Cake - Uncomment if you are using it
|
|
||||||
# tools/**
|
|
||||||
# !tools/packages.config
|
|
||||||
|
|
||||||
# Tabs Studio
|
|
||||||
*.tss
|
|
||||||
|
|
||||||
# Telerik's JustMock configuration file
|
|
||||||
*.jmconfig
|
|
||||||
|
|
||||||
# BizTalk build output
|
|
||||||
*.btp.cs
|
|
||||||
*.btm.cs
|
|
||||||
*.odx.cs
|
|
||||||
*.xsd.cs
|
|
||||||
|
|
||||||
# OpenCover UI analysis results
|
|
||||||
OpenCover/
|
|
||||||
|
|
||||||
# Azure Stream Analytics local run output
|
|
||||||
ASALocalRun/
|
|
||||||
|
|
||||||
# MSBuild Binary and Structured Log
|
|
||||||
*.binlog
|
|
||||||
|
|
||||||
# NVidia Nsight GPU debugger configuration file
|
|
||||||
*.nvuser
|
|
||||||
|
|
||||||
# MFractors (Xamarin productivity tool) working folder
|
|
||||||
.mfractor/
|
|
||||||
|
|
||||||
# Local History for Visual Studio
|
|
||||||
.localhistory/
|
|
||||||
|
|
||||||
# Visual Studio History (VSHistory) files
|
|
||||||
.vshistory/
|
|
||||||
|
|
||||||
# BeatPulse healthcheck temp database
|
|
||||||
healthchecksdb
|
|
||||||
|
|
||||||
# Backup folder for Package Reference Convert tool in Visual Studio 2017
|
|
||||||
MigrationBackup/
|
|
||||||
|
|
||||||
# Ionide (cross platform F# VS Code tools) working folder
|
|
||||||
.ionide/
|
|
||||||
|
|
||||||
# Fody - auto-generated XML schema
|
|
||||||
FodyWeavers.xsd
|
|
||||||
|
|
||||||
# VS Code files for those working on multiple tools
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/settings.json
|
|
||||||
!.vscode/tasks.json
|
|
||||||
!.vscode/launch.json
|
|
||||||
!.vscode/extensions.json
|
|
||||||
*.code-workspace
|
|
||||||
|
|
||||||
# Local History for Visual Studio Code
|
|
||||||
.history/
|
|
||||||
|
|
||||||
# Windows Installer files from build outputs
|
|
||||||
*.cab
|
|
||||||
*.msi
|
|
||||||
*.msix
|
|
||||||
*.msm
|
|
||||||
*.msp
|
|
||||||
|
|
||||||
# JetBrains Rider
|
|
||||||
*.sln.iml
|
|
||||||
|
|||||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
47
README.md
47
README.md
@@ -1,3 +1,50 @@
|
|||||||
|
# Astro Starter Kit: Basics
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm create astro@latest -- --template basics
|
||||||
|
```
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```text
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
│ └── favicon.svg
|
||||||
|
├── src
|
||||||
|
│ ├── assets
|
||||||
|
│ │ └── astro.svg
|
||||||
|
│ ├── components
|
||||||
|
│ │ └── Welcome.astro
|
||||||
|
│ ├── layouts
|
||||||
|
│ │ └── Layout.astro
|
||||||
|
│ └── pages
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :------------------------ | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
|
|
||||||
# This project has evolved to become Computing:Box Available at [www.computingbox.co.uk](https://www.computingbox.co.uk) and [www.computingbox.co.uk](https://www.computingbox.co.uk)
|
# This project has evolved to become Computing:Box Available at [www.computingbox.co.uk](https://www.computingbox.co.uk) and [www.computingbox.co.uk](https://www.computingbox.co.uk)
|
||||||
|
|
||||||
# CS:Box
|
# CS:Box
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 388 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
5
astro.config.mjs
Normal file
5
astro.config.mjs
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
// @ts-check
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({});
|
||||||
@@ -1,320 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/a-level-hexadecimal.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/a-level-hexadecimal.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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 class="row">
|
|
||||||
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestBinaryforHexadecimal()">Custom Binary</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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,296 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<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 name="twitter:card" content="summary_large_image">
|
|
||||||
<meta property="og:image" content="https://www.computingbox.co.uk/assets/img/ComputingBox-Logo.webp">
|
|
||||||
<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=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">
|
|
||||||
<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/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>
|
|
||||||
<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">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/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 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>
|
|
||||||
<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">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/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">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>
|
|
||||||
</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 Computing: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">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>
|
|
||||||
<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">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>
|
|
||||||
<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">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>
|
|
||||||
<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">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>
|
|
||||||
<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">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>
|
|
||||||
</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">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>
|
|
||||||
</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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/and-gate.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/and-gate.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,8 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
@@ -1,629 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: 'Inter';
|
|
||||||
src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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=be025f91dab9b81abd5e161b29118b44) 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;
|
|
||||||
}
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: 'Open Sans';
|
|
||||||
src: url(../../assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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=9a12aca0fcffa0bf3e6a406b06de7e47) 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;
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
: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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,428 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
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.
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.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 425 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
@@ -1,210 +0,0 @@
|
|||||||
// ** 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);
|
|
||||||
}
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
(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
|
|
||||||
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
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());
|
|
||||||
}
|
|
||||||
@@ -1,161 +0,0 @@
|
|||||||
// 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; // GCSE: 2 hex digits, A Level: 4
|
|
||||||
const binaryLength = isGCSE ? 8 : 16; // GCSE: 8 bits, A Level: 16
|
|
||||||
const maxDenary = isGCSE ? 255 : 65535;
|
|
||||||
|
|
||||||
// Each slider represents a 4-bit nibble (0–15) at a given place value
|
|
||||||
const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
|
|
||||||
const sliders = {};
|
|
||||||
|
|
||||||
// Order matters: left->right nibble columns
|
|
||||||
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) {
|
|
||||||
const slider = sliders[`slider${place}`];
|
|
||||||
if (!slider) return;
|
|
||||||
placeValues[place] = parseInt(slider.value, 10) || 0;
|
|
||||||
updateNumbers();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateNumbers() {
|
|
||||||
let denary = 0;
|
|
||||||
let binary = "";
|
|
||||||
let hexadecimal = "";
|
|
||||||
|
|
||||||
columnValues.forEach((column) => {
|
|
||||||
const value = placeValues[column] ?? 0; // nibble 0..15
|
|
||||||
denary += value * column;
|
|
||||||
binary += convertToBinaryNibble(value);
|
|
||||||
hexadecimal += convertToHexDigit(value);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Ensure fixed lengths
|
|
||||||
binary = binary.slice(-binaryLength).padStart(binaryLength, "0");
|
|
||||||
hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, "0");
|
|
||||||
|
|
||||||
const binEl = document.getElementById("binaryNumber");
|
|
||||||
const denEl = document.getElementById("denaryNumber");
|
|
||||||
const hexEl = document.getElementById("hexadecimalNumber");
|
|
||||||
|
|
||||||
if (binEl) binEl.innerText = binary;
|
|
||||||
if (denEl) denEl.innerText = denary;
|
|
||||||
if (hexEl) hexEl.innerText = hexadecimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertToBinaryNibble(num) {
|
|
||||||
return num.toString(2).padStart(4, "0");
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertToHexDigit(num) {
|
|
||||||
return num.toString(16).toUpperCase(); // 0..F
|
|
||||||
}
|
|
||||||
|
|
||||||
function setSlidersFromDenary(denary) {
|
|
||||||
// Clamp & normalise
|
|
||||||
denary = Number.isFinite(denary) ? denary : 0;
|
|
||||||
denary = Math.max(0, Math.min(maxDenary, Math.floor(denary)));
|
|
||||||
|
|
||||||
// Convert denary into nibble values for each column
|
|
||||||
columnValues.forEach((column) => {
|
|
||||||
const nibble = Math.floor(denary / column);
|
|
||||||
placeValues[column] = Math.max(0, Math.min(15, nibble));
|
|
||||||
denary -= placeValues[column] * column;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Push values to sliders (if present)
|
|
||||||
columnValues.forEach((column) => {
|
|
||||||
const slider = sliders[`slider${column}`];
|
|
||||||
if (slider) slider.value = placeValues[column];
|
|
||||||
});
|
|
||||||
|
|
||||||
updateNumbers();
|
|
||||||
}
|
|
||||||
|
|
||||||
function cleanHexInput(input) {
|
|
||||||
return String(input)
|
|
||||||
.trim()
|
|
||||||
.replace(/^0x/i, "")
|
|
||||||
.toUpperCase();
|
|
||||||
}
|
|
||||||
|
|
||||||
function cleanBinaryInput(input) {
|
|
||||||
return String(input).trim().replace(/\s+/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
// === PUBLIC BUTTON HANDLERS ===
|
|
||||||
// Call these from onclick="" on your buttons
|
|
||||||
|
|
||||||
window.requestHexadecimal = function requestHexadecimal() {
|
|
||||||
const raw = prompt(
|
|
||||||
`Enter a ${hexLength}-digit hexadecimal value (0-9, A-F):`,
|
|
||||||
""
|
|
||||||
);
|
|
||||||
if (raw === null) return;
|
|
||||||
|
|
||||||
const hex = cleanHexInput(raw);
|
|
||||||
|
|
||||||
const re = new RegExp(`^[0-9A-F]{${hexLength}}$`);
|
|
||||||
if (!re.test(hex)) {
|
|
||||||
alert(`Please enter exactly ${hexLength} hex digit(s) using 0-9 and A-F.`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const denary = parseInt(hex, 16);
|
|
||||||
setSlidersFromDenary(denary);
|
|
||||||
};
|
|
||||||
|
|
||||||
window.requestDenaryForHexadecimal =
|
|
||||||
function requestDenaryForHexadecimal() {
|
|
||||||
const raw = prompt(`Enter a denary value (0 to ${maxDenary}):`, "");
|
|
||||||
if (raw === null) return;
|
|
||||||
|
|
||||||
// Allow digits only
|
|
||||||
const cleaned = String(raw).trim();
|
|
||||||
if (!/^\d+$/.test(cleaned)) {
|
|
||||||
alert("Please enter a whole number in denary (digits only).");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const denary = parseInt(cleaned, 10);
|
|
||||||
if (denary < 0 || denary > maxDenary) {
|
|
||||||
alert(`Please enter a number between 0 and ${maxDenary}.`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSlidersFromDenary(denary);
|
|
||||||
};
|
|
||||||
|
|
||||||
window.requestBinaryforHexadecimal = function requestBinaryforHexadecimal() {
|
|
||||||
const raw = prompt(`Enter a ${binaryLength}-bit binary value (0s and 1s):`, "");
|
|
||||||
if (raw === null) return;
|
|
||||||
|
|
||||||
const bin = cleanBinaryInput(raw);
|
|
||||||
|
|
||||||
const re = new RegExp(`^[01]{${binaryLength}}$`);
|
|
||||||
if (!re.test(bin)) {
|
|
||||||
alert(`Please enter exactly ${binaryLength} bits using only 0 and 1.`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const denary = parseInt(bin, 2);
|
|
||||||
setSlidersFromDenary(denary);
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
updateNumbers();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,327 +0,0 @@
|
|||||||
<!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>Binary Simulator - CS:Box</title>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/binary.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/binary.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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 id="lbl-msb" 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 id="lbl-lsb" 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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,312 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/gcse-hexadecimal.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/gcse-hexadecimal.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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 class="row">
|
|
||||||
<div class="col"><button class="btn btn-primary hexadecimalButtons customiserButtons" type="button" onclick="requestBinaryforHexadecimal()">Custom Binary</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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,413 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/hex-colours.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/hex-colours.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,216 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
|
||||||
<meta property="og:image" content="https://www.computingbox.co.uk/assets/img/ComputingBox-Logo.webp">
|
|
||||||
<script type="application/ld+json">
|
|
||||||
{
|
|
||||||
"@context": "http://schema.org",
|
|
||||||
"@type": "WebSite",
|
|
||||||
"name": "Computing:Box",
|
|
||||||
"url": "https://www.computingbox.co.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=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">
|
|
||||||
<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>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 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<br>Version 2 Coming Soon</p>
|
|
||||||
<h2 class="fw-bold">Understand Computing concepts better.</h2>
|
|
||||||
<p class="completeFeatures"><strong>Coming Soon to Computing:Box</strong></p>
|
|
||||||
<p class="completeFeatures"></p>
|
|
||||||
<p class="introP">New User Interface (UI)<br>Expanded Gate Functionality - Automatic Truth Tables<br>Computer Part Simulator</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/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1"></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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/nand-gate.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/nand-gate.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/nor-gate.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/nor-gate.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/not-gate.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/not-gate.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/or-gate.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/or-gate.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/projects.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/projects.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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 Computing: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 Computing:Box a cutting-edge learning tool for logic gates, binary, and hexadecimal concepts. By adding multi-user collaboration, gamification, and mobile support, Computing: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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/a-level-hexadecimal.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/about.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/and-gate.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/binary.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/gcse-hexadecimal.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/hex-colours.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/nand-gate.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/nor-gate.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/not-gate.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/or-gate.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/projects.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/twos-compliment-binary.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/unsigned-binary.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/xnor-gate.html</loc>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://www.computingbox.co.uk/xor-gate.html</loc>
|
|
||||||
</url>
|
|
||||||
</urlset>
|
|
||||||
@@ -1,327 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/twos-compliment-binary.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/twos-compliment-binary.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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 -->
|
|
||||||
<section 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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,327 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/unsigned-binary.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/unsigned-binary.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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 id="lbl-msb" 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 id="lbl-lsb" 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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/xnor-gate.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/xnor-gate.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<link rel="canonical" href="https://www.computingbox.co.uk/xor-gate.html">
|
|
||||||
<meta property="og:url" content="https://www.computingbox.co.uk/xor-gate.html">
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<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() {
|
|
||||||
|
|
||||||
// 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=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">
|
|
||||||
<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>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>
|
|
||||||
<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/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 Computing: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=1d88c5f7da86e237fdac8a16a6958a73"></script>
|
|
||||||
<script src="assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
||||||
<script src="assets/js/logicGates.js?h=cb132aa615fb58918ab65db03c7face7"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
5073
package-lock.json
generated
Normal file
5073
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
14
package.json
Normal file
14
package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "computing-box",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "^5.16.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
137
public/css/tools/binary.css
Normal file
137
public/css/tools/binary.css
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
/* ---------- DSEG7 font ---------- */
|
||||||
|
/* Put your font file here:
|
||||||
|
public/fonts/DSEG7Classic-Regular.woff2
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: "DSEG7ClassicRegular";
|
||||||
|
src: url("/fonts/DSEG7Classic-Regular.woff2") format("woff2");
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Layout ---------- */
|
||||||
|
.tool-shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: #0b0f14;
|
||||||
|
color: #e7eaf0;
|
||||||
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card {
|
||||||
|
width: min(1100px, 100%);
|
||||||
|
background: #111824;
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-header h1 { margin: 0 0 .25rem 0; font-size: 1.4rem; }
|
||||||
|
.tool-header p { margin: 0 0 1rem 0; opacity: .85; }
|
||||||
|
|
||||||
|
.display-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: .75rem;
|
||||||
|
margin-bottom: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-box {
|
||||||
|
background: #0b0f14;
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-label { font-size: .9rem; opacity: .8; margin-bottom: .25rem; }
|
||||||
|
|
||||||
|
.sevenseg {
|
||||||
|
font-family: "DSEG7ClassicRegular", monospace;
|
||||||
|
font-size: clamp(2rem, 4vw, 3.2rem);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons under denary/binary (your request) */
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: .5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Simple MD3-ish buttons ---------- */
|
||||||
|
.md3-btn {
|
||||||
|
border: 1px solid rgba(255,255,255,0.16);
|
||||||
|
background: rgba(255,255,255,0.06);
|
||||||
|
color: #e7eaf0;
|
||||||
|
padding: .6rem .9rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.md3-btn:hover { background: rgba(255,255,255,0.10); }
|
||||||
|
.md3-btn--tonal { background: rgba(255,255,255,0.10); }
|
||||||
|
|
||||||
|
/* ---------- Switches row ---------- */
|
||||||
|
.switch-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, minmax(90px, 1fr));
|
||||||
|
gap: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-col {
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
gap: .35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bit-label { opacity: .85; font-weight: 600; }
|
||||||
|
|
||||||
|
/* ---------- “Light switch” rocker ---------- */
|
||||||
|
.rocker {
|
||||||
|
position: relative;
|
||||||
|
width: 70px;
|
||||||
|
height: 46px;
|
||||||
|
display: inline-block;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rocker input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rocker-body {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #1a2331;
|
||||||
|
border: 1px solid rgba(255,255,255,0.14);
|
||||||
|
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* the “toggle” */
|
||||||
|
.rocker-body::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
top: 6px;
|
||||||
|
width: 58px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(255,255,255,0.20);
|
||||||
|
transition: transform 180ms ease, background 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ON position */
|
||||||
|
.rocker input:checked + .rocker-body::after {
|
||||||
|
transform: translateY(16px);
|
||||||
|
background: rgba(255,255,255,0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.switch-row { grid-template-columns: repeat(4, minmax(90px, 1fr)); }
|
||||||
|
}
|
||||||
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
115
public/js/binary/unsigned-binary.js
Normal file
115
public/js/binary/unsigned-binary.js
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
// Browser-only script. Safe because it's loaded via <script> (not server-imported).
|
||||||
|
|
||||||
|
const BIT_COUNT = 8; // unsigned page = 8 bits
|
||||||
|
const bitValues = [128, 64, 32, 16, 8, 4, 2, 1];
|
||||||
|
|
||||||
|
const elDenary = document.getElementById("denaryNumber");
|
||||||
|
const elBinary = document.getElementById("binaryNumber");
|
||||||
|
const elSwitches = document.getElementById("bitSwitches");
|
||||||
|
|
||||||
|
const btnCustomDenary = document.getElementById("btnCustomDenary");
|
||||||
|
const btnCustomBinary = document.getElementById("btnCustomBinary");
|
||||||
|
const btnReset = document.getElementById("btnReset");
|
||||||
|
|
||||||
|
let bits = new Array(BIT_COUNT).fill(false);
|
||||||
|
|
||||||
|
function renderSwitches() {
|
||||||
|
elSwitches.innerHTML = "";
|
||||||
|
|
||||||
|
bitValues.forEach((value, index) => {
|
||||||
|
const id = `bit-${value}`;
|
||||||
|
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.className = "switch-col";
|
||||||
|
|
||||||
|
const labelTop = document.createElement("div");
|
||||||
|
labelTop.className = "bit-label";
|
||||||
|
labelTop.textContent = value;
|
||||||
|
|
||||||
|
const label = document.createElement("label");
|
||||||
|
label.className = "rocker";
|
||||||
|
label.setAttribute("for", id);
|
||||||
|
|
||||||
|
const input = document.createElement("input");
|
||||||
|
input.type = "checkbox";
|
||||||
|
input.id = id;
|
||||||
|
input.checked = bits[index];
|
||||||
|
|
||||||
|
input.addEventListener("change", () => {
|
||||||
|
bits[index] = input.checked;
|
||||||
|
updateNumbers();
|
||||||
|
});
|
||||||
|
|
||||||
|
const span = document.createElement("span");
|
||||||
|
span.className = "rocker-body";
|
||||||
|
span.setAttribute("aria-hidden", "true");
|
||||||
|
|
||||||
|
label.appendChild(input);
|
||||||
|
label.appendChild(span);
|
||||||
|
|
||||||
|
wrapper.appendChild(labelTop);
|
||||||
|
wrapper.appendChild(label);
|
||||||
|
|
||||||
|
elSwitches.appendChild(wrapper);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNumbers() {
|
||||||
|
const binary = bits.map(b => (b ? "1" : "0")).join("");
|
||||||
|
const denary = bits.reduce((acc, b, i) => acc + (b ? bitValues[i] : 0), 0);
|
||||||
|
|
||||||
|
elBinary.textContent = binary;
|
||||||
|
elDenary.textContent = denary.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetAll() {
|
||||||
|
bits = new Array(BIT_COUNT).fill(false);
|
||||||
|
renderSwitches();
|
||||||
|
updateNumbers();
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestCustomDenary() {
|
||||||
|
let input = prompt(`Enter a denary number (0 to 255):`);
|
||||||
|
if (input === null) return;
|
||||||
|
|
||||||
|
const n = Number.parseInt(input, 10);
|
||||||
|
if (Number.isNaN(n) || n < 0 || n > 255) {
|
||||||
|
alert("Invalid input. Enter a number from 0 to 255.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let remaining = n;
|
||||||
|
bits = bitValues.map(v => {
|
||||||
|
if (remaining >= v) {
|
||||||
|
remaining -= v;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
renderSwitches();
|
||||||
|
updateNumbers();
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestCustomBinary() {
|
||||||
|
let input = prompt(`Enter an ${BIT_COUNT}-bit binary number (e.g. 01010101):`);
|
||||||
|
if (input === null) return;
|
||||||
|
|
||||||
|
input = input.trim();
|
||||||
|
const re = new RegExp(`^[01]{${BIT_COUNT}}$`);
|
||||||
|
if (!re.test(input)) {
|
||||||
|
alert(`Invalid input. Enter exactly ${BIT_COUNT} digits using only 0 or 1.`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
bits = input.split("").map(c => c === "1");
|
||||||
|
renderSwitches();
|
||||||
|
updateNumbers();
|
||||||
|
}
|
||||||
|
|
||||||
|
btnCustomDenary?.addEventListener("click", requestCustomDenary);
|
||||||
|
btnCustomBinary?.addEventListener("click", requestCustomBinary);
|
||||||
|
btnReset?.addEventListener("click", resetAll);
|
||||||
|
|
||||||
|
renderSwitches();
|
||||||
|
updateNumbers();
|
||||||
72
public/js/tools/unsigned-binary.js
Normal file
72
public/js/tools/unsigned-binary.js
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
// public/js/tools/unsigned-binary.js
|
||||||
|
// Lightweight: no frameworks. Works on weak devices.
|
||||||
|
const BIT_COUNT = 8;
|
||||||
|
const MAX_DENARY = 255;
|
||||||
|
let bits = new Array(BIT_COUNT).fill(false);
|
||||||
|
function bitsToBinaryString(){
|
||||||
|
return bits.map(b => (b ? "1" : "0")).join("");
|
||||||
|
}
|
||||||
|
function bitsToDenary(){
|
||||||
|
// MSB on the left: 128..1
|
||||||
|
const weights = [128,64,32,16,8,4,2,1];
|
||||||
|
return bits.reduce((acc, b, i) => acc + (b ? weights[i] : 0), 0);
|
||||||
|
}
|
||||||
|
function render(){
|
||||||
|
const grid = document.getElementById("bitGrid");
|
||||||
|
grid.innerHTML = "";
|
||||||
|
const weights = [128,64,32,16,8,4,2,1];
|
||||||
|
bits.forEach((on, i) => {
|
||||||
|
const btn = document.createElement("button");
|
||||||
|
btn.type = "button";
|
||||||
|
btn.className = "btn";
|
||||||
|
btn.style.width = "100%";
|
||||||
|
btn.style.justifyContent = "space-between";
|
||||||
|
btn.setAttribute("aria-pressed", on ? "true" : "false");
|
||||||
|
btn.innerHTML = `<span>${weights[i]}</span><b>${on ? "1" : "0"}</b>`;
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
bits[i] = !bits[i];
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
grid.appendChild(btn);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function update(){
|
||||||
|
document.getElementById("binaryNumber").innerText = bitsToBinaryString();
|
||||||
|
document.getElementById("denaryNumber").innerText = bitsToDenary();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
function requestBinary(){
|
||||||
|
let v;
|
||||||
|
do{
|
||||||
|
v = prompt("Enter an 8-bit binary value (8 digits, only 0 or 1):", bitsToBinaryString());
|
||||||
|
if(v === null) return;
|
||||||
|
v = v.trim();
|
||||||
|
}while(!/^[01]{8}$/.test(v));
|
||||||
|
bits = v.split("").map(ch => ch === "1");
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
function requestDenary(){
|
||||||
|
let v;
|
||||||
|
do{
|
||||||
|
v = prompt("Enter a denary value (0 to 255):", String(bitsToDenary()));
|
||||||
|
if(v === null) return;
|
||||||
|
v = Number(v);
|
||||||
|
}while(!Number.isInteger(v) || v < 0 || v > MAX_DENARY);
|
||||||
|
// set bits from MSB to LSB
|
||||||
|
const weights = [128,64,32,16,8,4,2,1];
|
||||||
|
bits = weights.map(w => {
|
||||||
|
if(v >= w){ v -= w; return true; }
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
function reset(){
|
||||||
|
bits = new Array(BIT_COUNT).fill(false);
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
document.getElementById("btnCustomBinary")?.addEventListener("click", requestBinary);
|
||||||
|
document.getElementById("btnCustomDenary")?.addEventListener("click", requestDenary);
|
||||||
|
document.getElementById("btnReset")?.addEventListener("click", reset);
|
||||||
|
update();
|
||||||
|
});
|
||||||
96
public/styles.css
Normal file
96
public/styles.css
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
/* src/styles/md3-tokens.css */
|
||||||
|
/* MD3-inspired tokens tuned for education: high readability, clear contrast, calm surfaces */
|
||||||
|
:root{
|
||||||
|
/* Typography */
|
||||||
|
--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||||
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
||||||
|
/* Spacing + shape */
|
||||||
|
--radius-1: 10px;
|
||||||
|
--radius-2: 16px;
|
||||||
|
--radius-3: 22px;
|
||||||
|
--shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
|
||||||
|
/* Color roles (keep simple) */
|
||||||
|
--md-surface: #ffffff;
|
||||||
|
--md-surface-2: #f6f7fb;
|
||||||
|
--md-on-surface: #111318;
|
||||||
|
--md-primary: #2f6fed; /* calm blue */
|
||||||
|
--md-on-primary: #ffffff;
|
||||||
|
--md-secondary: #5a5f72; /* muted */
|
||||||
|
--md-on-secondary: #ffffff;
|
||||||
|
--md-tertiary: #0f766e; /* teal for "practical" tools */
|
||||||
|
--md-on-tertiary: #ffffff;
|
||||||
|
--md-outline: #d7dbe7;
|
||||||
|
--md-success: #1a7f37;
|
||||||
|
--md-warning: #b54708;
|
||||||
|
--md-danger: #b42318;
|
||||||
|
/* Focus ring for accessibility */
|
||||||
|
--md-focus: 0 0 0 3px rgba(47,111,237,.28);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark){
|
||||||
|
:root{
|
||||||
|
--md-surface: #0b0e14;
|
||||||
|
--md-surface-2: #121725;
|
||||||
|
--md-on-surface: #e8eaf2;
|
||||||
|
--md-primary: #9bb6ff;
|
||||||
|
--md-on-primary: #0b0e14;
|
||||||
|
--md-secondary: #b8bccd;
|
||||||
|
--md-on-secondary: #0b0e14;
|
||||||
|
--md-tertiary: #4fd1c5;
|
||||||
|
--md-on-tertiary: #0b0e14;
|
||||||
|
--md-outline: #2b3244;
|
||||||
|
--md-focus: 0 0 0 3px rgba(155,182,255,.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* src/styles/base.css */
|
||||||
|
@import "./md3-tokens.css";
|
||||||
|
html, body{ height:100%; }
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
background: var(--md-surface-2);
|
||||||
|
color: var(--md-on-surface);
|
||||||
|
}
|
||||||
|
a{ color: var(--md-primary); text-decoration: none; }
|
||||||
|
a:hover{ text-decoration: underline; }
|
||||||
|
.container{
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
background: var(--md-surface);
|
||||||
|
border: 1px solid var(--md-outline);
|
||||||
|
border-radius: var(--radius-2);
|
||||||
|
box-shadow: var(--shadow-1);
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
display:inline-flex;
|
||||||
|
gap:8px;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--md-outline);
|
||||||
|
background: var(--md-surface);
|
||||||
|
color: var(--md-on-surface);
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover{ filter: brightness(0.98); }
|
||||||
|
.btn:focus{ outline:none; box-shadow: var(--md-focus); }
|
||||||
|
.btn-primary{
|
||||||
|
background: var(--md-primary);
|
||||||
|
color: var(--md-on-primary);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
.badge{
|
||||||
|
display:inline-block;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid var(--md-outline);
|
||||||
|
background: var(--md-surface-2);
|
||||||
|
}
|
||||||
|
code, pre{ font-family: var(--font-mono); }
|
||||||
1
src/assets/astro.svg
Normal file
1
src/assets/astro.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user