docs(changelog): update changelog [skip ci]

Signed-off-by: Alexander Lyall <alex@adcm.uk>

.gitea/workflows/changelog.yml

@@ -1,62 +0,0 @@
-name: Changelog
-
-on:
-  push:
-    branches: [ main ]
-    tags:
-      - "v*"
-  workflow_dispatch:
-
-jobs:
-  changelog:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout (full history + tags)
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      # Generates Keep a Changelog style CHANGELOG.md using git-cliff.
-      # IMPORTANT: The action downloads git-cliff from GitHub Releases, so we pass a GitHub PAT
-      # (stored as a Gitea secret) to avoid GitHub API 401/rate-limit issues.
-      - name: Generate CHANGELOG.md (Keep a Changelog)
-        uses: orhun/git-cliff-action@v4
-        with:
-          config: cliff.toml
-          args: --verbose
-          github_token: ${{ secrets.DC_GITHUB_PAT }}
-        env:
-          OUTPUT: CHANGELOG.md
-
-      # Commits and pushes CHANGELOG.md back to main using a Gitea PAT stored as CHANGELOG_PAT
-      - name: Commit and push if changed (Gitea PAT)
-        shell: bash
-        env:
-          CHANGELOG_PAT: ${{ secrets.CHANGELOG_PAT }}
-        run: |
-          set -e
-
-          if git diff --quiet -- CHANGELOG.md; then
-            echo "No changelog changes."
-            exit 0
-          fi
-
-          git config user.name "changelog-bot"
-          git config user.email "changelog-bot@users.noreply.local"
-
-          git add CHANGELOG.md
-          git commit -m "docs(changelog): update changelog [skip ci]"
-
-          origin_url="$(git remote get-url origin)"
-
-          # Convert SSH origin to HTTPS if needed (git@host:owner/repo.git -> https://host/owner/repo.git)
-          if echo "$origin_url" | grep -q "^git@"; then
-            host="$(echo "$origin_url" | sed -E 's#git@([^:]+):.*#\1#')"
-            path="$(echo "$origin_url" | sed -E 's#git@[^:]+:(.*)#\1#')"
-            origin_url="https://$host/$path"
-          fi
-
-          # Inject token into https:// URL (https://host/owner/repo.git -> https://oauth2:TOKEN@host/owner/repo.git)
-          authed_url="$(echo "$origin_url" | sed -E "s#^https://#https://oauth2:${CHANGELOG_PAT}@#")"
-
-          git push "$authed_url" HEAD:main

.gitea/workflows/release.yaml

@@ -0,0 +1,235 @@
+name: Changelog + Release on main
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  changelog_and_release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout (full history + tags)
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Stop if this is the bot changelog commit
+        shell: bash
+        run: |
+          set -e
+          msg="$(git log -1 --pretty=%B)"
+          echo "$msg" | tr -d '\r' | grep -qi "\[skip ci\]" && {
+            echo "Skipping (bot commit with [skip ci])"
+            exit 0
+          } || true
+
+      - name: Install git-cliff
+        shell: bash
+        run: |
+          set -e
+          GIT_CLIFF_VERSION="2.11.0"
+          URL="https://github.com/orhun/git-cliff/releases/download/v${GIT_CLIFF_VERSION}/git-cliff-${GIT_CLIFF_VERSION}-x86_64-unknown-linux-gnu.tar.gz"
+          curl -L "$URL" -o /tmp/git-cliff.tar.gz
+          tar -xzf /tmp/git-cliff.tar.gz -C /tmp
+          sudo install /tmp/git-cliff-*/git-cliff /usr/local/bin/git-cliff
+          git-cliff --version
+
+      - name: Generate CHANGELOG.md (Keep a Changelog)
+        shell: bash
+        run: |
+          set -e
+          git-cliff --config cliff.toml --output CHANGELOG.md
+          test -s CHANGELOG.md
+
+      - name: Commit and push CHANGELOG.md if changed (CHANGELOG_PAT)
+        shell: bash
+        env:
+          CHANGELOG_PAT: ${{ secrets.CHANGELOG_PAT }}
+        run: |
+          set -e
+
+          if git diff --quiet -- CHANGELOG.md; then
+            echo "No changelog changes."
+          else
+            git config user.name "changelog-bot"
+            git config user.email "changelog-bot@users.noreply.local"
+
+            git add CHANGELOG.md
+            git commit -m "docs(changelog): update changelog [skip ci]"
+
+            origin_url="$(git remote get-url origin)"
+
+            # Convert SSH origin to HTTPS if needed
+            if echo "$origin_url" | grep -q "^git@"; then
+              host="$(echo "$origin_url" | sed -E 's#git@([^:]+):.*#\1#')"
+              path="$(echo "$origin_url" | sed -E 's#git@[^:]+:(.*)#\1#')"
+              origin_url="https://$host/$path"
+            fi
+
+            authed_url="$(echo "$origin_url" | sed -E "s#^https://#https://oauth2:${CHANGELOG_PAT}@#")"
+            git push "$authed_url" HEAD:main
+          fi
+
+      - name: Extract newest changelog section for release body
+        shell: bash
+        run: |
+          set -e
+          # Extract the first "## ..." section (newest section) from CHANGELOG.md
+          # Includes the "## ..." heading and everything until the next "## ..." heading.
+          awk '
+            /^## / { if (seen) exit; seen=1 }
+            seen { print }
+          ' CHANGELOG.md > RELEASE_NOTES.md
+
+          # Clean trailing whitespace/newlines a bit
+          sed -i 's/[[:space:]]*$//' RELEASE_NOTES.md
+
+          test -s RELEASE_NOTES.md
+          echo "---- RELEASE_NOTES.md ----"
+          head -n 60 RELEASE_NOTES.md
+          echo "--------------------------"
+
+      - name: Create export zip (Computing:Box Website.zip)
+        shell: bash
+        run: |
+          set -e
+          if [ ! -d "export" ]; then
+            echo "❌ export/ folder not found in repo root"
+            ls -la
+            exit 1
+          fi
+
+          rm -f "Computing:Box Website.zip"
+          (cd export && zip -r "../Computing:Box Website.zip" .)
+          test -s "Computing:Box Website.zip"
+          ls -lh "Computing:Box Website.zip"
+
+      - name: Prepare YY.MM.DD letter-suffix tag + release name
+        shell: bash
+        run: |
+          set -e
+
+          # Version: YY.MM.DD (UTC). Swap to `date +...` if you prefer UK-local runner time.
+          VERSION="$(date -u +'%y.%m.%d')"
+          PREFIX="v${VERSION}."
+
+          last_letter="$(
+            git tag --list "${PREFIX}[a-z]" \
+              | sed -E "s/^${PREFIX}([a-z])$/\1/" \
+              | sort \
+              | tail -n 1
+          )"
+
+          if [ -z "$last_letter" ]; then
+            next_letter="a"
+          else
+            if [ "$last_letter" = "z" ]; then
+              echo "❌ Already have v${VERSION}.z today. Refusing to create more than 26 releases/day."
+              exit 1
+            fi
+            next_letter="$(printf "%b" "$(printf '\\%03o' "$(( $(printf '%d' "'$last_letter") + 1 ))")")"
+          fi
+
+          TAG="${PREFIX}${next_letter}"
+          RELEASE_NAME="Computing:Box v${VERSION}.${next_letter}"
+
+          echo "TAG=$TAG" >> "$GITHUB_ENV"
+          echo "RELEASE_NAME=$RELEASE_NAME" >> "$GITHUB_ENV"
+          echo "ZIP_PATH=Computing:Box Website.zip" >> "$GITHUB_ENV"
+
+          echo "Using tag: $TAG"
+          echo "Release name: $RELEASE_NAME"
+
+      - name: Create and push tag (CHANGELOG_PAT)
+        shell: bash
+        env:
+          CHANGELOG_PAT: ${{ secrets.CHANGELOG_PAT }}
+        run: |
+          set -e
+
+          git tag -f "$TAG"
+
+          origin_url="$(git remote get-url origin)"
+
+          # Convert SSH origin to HTTPS if needed
+          if echo "$origin_url" | grep -q "^git@"; then
+            host="$(echo "$origin_url" | sed -E 's#git@([^:]+):.*#\1#')"
+            path="$(echo "$origin_url" | sed -E 's#git@[^:]+:(.*)#\1#')"
+            origin_url="https://$host/$path"
+          fi
+
+          authed_url="$(echo "$origin_url" | sed -E "s#^https://#https://oauth2:${CHANGELOG_PAT}@#")"
+          git push "$authed_url" "refs/tags/$TAG" --force
+
+      - name: Create Gitea release + upload asset (CHANGELOG_PAT)
+        shell: bash
+        env:
+          CHANGELOG_PAT: ${{ secrets.CHANGELOG_PAT }}
+        run: |
+          set -e
+
+          origin_url="$(git remote get-url origin)"
+          if echo "$origin_url" | grep -q "^git@"; then
+            host="$(echo "$origin_url" | sed -E 's#git@([^:]+):.*#\1#')"
+            path="$(echo "$origin_url" | sed -E 's#git@[^:]+:(.*)#\1#')"
+            origin_url="https://$host/$path"
+          fi
+
+          base="$(echo "$origin_url" | sed -E 's#(https?://[^/]+)/.*#\1#')"
+          repo_path="$(echo "$origin_url" | sed -E 's#https?://[^/]+/##')"
+          repo_path="$(echo "$repo_path" | sed -E 's/\.git$//')"
+
+          owner="$(echo "$repo_path" | cut -d/ -f1)"
+          repo="$(echo "$repo_path" | cut -d/ -f2-)"
+
+          api="$base/api/v1"
+
+          python3 - <<'PY'
+          import json, os
+          tag = os.environ["TAG"]
+          name = os.environ["RELEASE_NAME"]
+
+          with open("RELEASE_NOTES.md", "r", encoding="utf-8") as f:
+              body = f.read()
+
+          payload = {
+              "tag_name": tag,
+              "target_commitish": "main",
+              "name": name,
+              "body": body,   # newest section only
+              "draft": False,
+              "prerelease": False,
+          }
+
+          with open("release.json", "w", encoding="utf-8") as f:
+              json.dump(payload, f)
+          PY
+
+          curl -sS -X POST \
+            -H "Authorization: Bearer ${CHANGELOG_PAT}" \
+            -H "Content-Type: application/json" \
+            "${api}/repos/${owner}/${repo}/releases" \
+            --data-binary @release.json \
+            -o release_response.json
+
+          release_id="$(python3 - <<'PY'
+          import json
+          with open("release_response.json","r",encoding="utf-8") as f:
+              data=json.load(f)
+          rid=data.get("id")
+          if not rid:
+              raise SystemExit("No release id returned. Response:\n" + json.dumps(data, indent=2))
+          print(rid)
+          PY
+          )"
+          echo "Created release id: $release_id"
+
+          curl -sS -X POST \
+            -H "Authorization: Bearer ${CHANGELOG_PAT}" \
+            "${api}/repos/${owner}/${repo}/releases/${release_id}/assets?name=Computing%3ABox%20Website.zip" \
+            -F "attachment=@${ZIP_PATH}" \
+            >/dev/null
+
+          echo "✅ Release created: ${RELEASE_NAME} (tag: ${TAG}) with asset uploaded"

CHANGELOG.md

@@ -0,0 +1,112 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Conventional Commits](https://www.conventionalcommits.org/).
+
+## [Unreleased]
+
+
+
+## [v25.12.26.a] - 2025-12-26
+
+
+
+### Documentation
+
+
+- update changelog [skip ci]
+
+- update changelog [skip ci]
+
+
+## [main-29-c9402db] - 2025-12-26
+
+
+
+### Documentation
+
+
+- update changelog [skip ci]
+
+
+## [main-27-82654d9] - 2025-12-26
+
+
+
+### Documentation
+
+
+- update changelog [skip ci]
+
+- update changelog [skip ci]
+
+- update changelog [skip ci]
+
+
+## [v1.9] - 2025-12-26
+
+
+
+### Added
+
+
+- migrate CS:Box content to Computing:Box branding
+
+
+### Bit
+
+
+- Box Feature Migration
+
+
+### CI
+
+
+- add Gitea Actions workflow for site publishing
+
+
+### Chore
+
+
+- update CODEOWNERS and remove exported site artifacts
+
+- reorganise project files and add exported pages
+
+- add git-cliff config
+
+- standardise analytics, branding, and licensing across exported pages
+
+
+### Documentation
+
+
+- apply Creative Commons licence to V1 exported site
+
+- v1.9
+
+- update changelog [skip ci]
+
+
+### Reverted
+
+
+- revert 268a82f17c00792b8e678b5fb93383ae36200dfc
+
+revert ci(deploy): add Gitea Actions workflow for site publishing
+
+- Add publish workflow to deploy main branch via SFTP
+- Configure workflow dispatch and push-to-main triggers
+- Use repository variables and secrets for SSH credentials
+- Update README logo markup for consistent sizing
+
+Signed-off-by: Alexander Davis <alex@adcm.uk>
+
+
+### Signed-off-by
+
+
+- Alexander Davis <alex@adcm.uk>
+
+<!-- generated by git-cliff -->

cliff.toml

@@ -1,81 +1,56 @@
-# git-cliff ~ configuration file
+# git-cliff configuration
-# https://git-cliff.org/docs/configuration
+# Keep a Changelog compatible
+# Safe for first run with no tags
 
 [changelog]
-# A Tera template to be rendered as the changelog's header.
-# See https://keats.github.io/tera/docs/#introduction
 header = """
-# Changelog\n
+# Changelog
+
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n
+and this project adheres to [Conventional Commits](https://www.conventionalcommits.org/).
 """
-# A Tera template to be rendered for each release in the changelog.
+
-# See https://keats.github.io/tera/docs/#introduction
 body = """
-{% if version -%}
+{% if version %}
-    ## [{{ version | trim_start_matches(pat="v") }}] - {{ timestamp | date(format="%Y-%m-%d") }}
+## [{{ version }}] - {{ timestamp | date(format="%Y-%m-%d") }}
-{% else -%}
+{% else %}
-    ## [Unreleased]
+## [Unreleased]
-{% endif -%}
+{% endif %}
+
 {% for group, commits in commits | group_by(attribute="group") %}
-    ### {{ group | upper_first }}
+### {{ group }}
-    {% for commit in commits %}
+
-        - {{ commit.message | split(pat="\n") | first | upper_first | trim }}\
+{% for commit in commits %}
-    {% endfor %}
+- {{ commit.message | trim }}
-{% endfor %}\n
-"""
-# A Tera template to be rendered as the changelog's footer.
-# See https://keats.github.io/tera/docs/#introduction
-footer = """
-{% for release in releases -%}
-    {% if release.version -%}
-        {% if release.previous.version -%}
-            [{{ release.version | trim_start_matches(pat="v") }}]: \
-                https://github.com/{{ remote.github.owner }}/{{ remote.github.repo }}\
-                    /compare/{{ release.previous.version }}..{{ release.version }}
-        {% else -%}
-            [{{ release.version | trim_start_matches(pat="v") }}]: \
-                https://github.com/{{ remote.github.owner }}/{{ remote.github.repo }}\
-                    /tree/{{ release.version }}
-        {% endif -%}
-    {% else -%}
-        [unreleased]: https://github.com/{{ remote.github.owner }}/{{ remote.github.repo }}\
-            /compare/{{ release.previous.version }}..HEAD
-    {% endif -%}
 {% endfor %}
+{% endfor %}
+"""
+
+footer = """
 <!-- generated by git-cliff -->
 """
-# Remove leading and trailing whitespaces from the changelog's body.
+
 trim = true
 
 [git]
-# Parse commits according to the conventional commits specification.
-# See https://www.conventionalcommits.org
 conventional_commits = true
-# Exclude commits that do not match the conventional commits specification.
 filter_unconventional = false
-# An array of regex based parsers for extracting data from the commit message.
+split_commits = false
-# Assigns commits to groups.
-# Optionally sets the commit's scope and can decide to exclude commits from further processing.
 commit_parsers = [
-    { message = "^[a|A]dd", group = "Added" },
+  { message = "^feat",  group = "Added" },
-    { message = "^[s|S]upport", group = "Added" },
+  { message = "^fix",   group = "Fixed" },
-    { message = "^[r|R]emove", group = "Removed" },
+  { message = "^docs",  group = "Documentation" },
-    { message = "^.*: add", group = "Added" },
+  { message = "^style", group = "Styling" },
-    { message = "^.*: support", group = "Added" },
+  { message = "^refactor", group = "Changed" },
-    { message = "^.*: remove", group = "Removed" },
+  { message = "^perf",  group = "Performance" },
-    { message = "^.*: delete", group = "Removed" },
+  { message = "^test",  group = "Tests" },
-    { message = "^test", group = "Fixed" },
+  { message = "^build", group = "Build" },
-    { message = "^fix", group = "Fixed" },
+  { message = "^ci",    group = "CI" },
-    { message = "^.*: fix", group = "Fixed" },
+  { message = "^chore", group = "Chore" },
-    { message = "^.*", group = "Changed" },
+  { message = "^revert", group = "Reverted" }
 ]
-# Prevent commits that are breaking from being excluded by commit parsers.
+
-filter_commits = false
+protect_breaking_commits = false
-# Order releases topologically instead of chronologically.
-topo_order = false
-# Order of commits in each group/release within the changelog.
-# Allowed values: newest, oldest
 sort_commits = "oldest"

export/a-level-hexadecimal.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -88,7 +173,7 @@
                 <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 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>
@@ -218,21 +303,48 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
     <!-- End Matomo --></noscript>Built for UK Computing Curriculum<br>Powered By ADCM Networks</p>
         </div>
     </footer><!-- End: Footer Multi Column -->
+    <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" 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>
     <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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/about.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -77,7 +162,7 @@
                 </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 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>
@@ -86,7 +171,7 @@
                 </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 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>
@@ -95,7 +180,7 @@
                 </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 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>
@@ -179,7 +264,7 @@
         <!-- 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 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>
@@ -194,12 +279,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -208,7 +293,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/and-gate.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="container"><img src="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><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>
@@ -111,12 +196,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -125,7 +210,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/assets/bootstrap/css/bootstrap.min.css

@@ -1,4 +1,3 @@
-@import url(https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&display=swap);
 /*!
  * Bootstrap  v5.3.6 (https://getbootstrap.com/)
  * Copyright 2011-2025 The Bootstrap Authors

export/assets/css/DSEG7 Classic Regular.css

@@ -1,7 +1,7 @@
 @font-face {
 	font-family: 'DSEG7 Classic Regular';
-	src: url(../../assets/fonts/DSEG7ClassicRegular.woff) format('woff'),
+	src: url(/assets/fonts/DSEG7ClassicRegular.woff) format('woff'),
-	url(../../assets/fonts/DSEG7ClassicRegular.ttf) format('truetype');
+	url(/assets/fonts/DSEG7ClassicRegular.ttf) format('truetype');
 	font-weight: 400;
 	font-style: normal;
 	font-display: auto;

export/assets/css/IEC symbols Unicode.css

@@ -1,7 +1,7 @@
 @font-face {
 	font-family: 'IEC symbols Unicode';
-	src: url(../../assets/fonts/IEC%20symbols%20Unicode-7accb483a44c18d55e8700feb3ddc713.woff2?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff2'),
+	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');
+	url(/assets/fonts/IEC%20symbols%20Unicode-f2f2e5d8588f3b01658e423c74d599be.woff?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff');
 	font-weight: normal;
 	font-style: normal;
 	font-display: swap;

export/assets/css/Inter.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -9,7 +9,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -18,7 +18,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -27,7 +27,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -36,7 +36,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -45,7 +45,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -54,7 +54,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: italic;
 	font-display: swap;
@@ -63,7 +63,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -72,7 +72,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -81,7 +81,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -90,7 +90,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -99,7 +99,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -108,7 +108,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -117,7 +117,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
@@ -126,7 +126,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -135,7 +135,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -144,7 +144,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -153,7 +153,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -162,7 +162,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -171,7 +171,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -180,7 +180,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: italic;
 	font-display: swap;
@@ -189,7 +189,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -198,7 +198,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -207,7 +207,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -216,7 +216,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -225,7 +225,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -234,7 +234,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -243,7 +243,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
@@ -252,7 +252,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-de58982b96a72dfd9e457f42f13c8def.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -261,7 +261,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-910d93a8fd7d89ae99ae550bf779b0cb.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -270,7 +270,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-49d8b8f280231a9679ec1f34d0f177ce.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -279,7 +279,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-93de0e0c318ba5fc351ed069a801b791.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -288,7 +288,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -297,7 +297,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-b076fc26c61e86fdfdbd5a3b96aa9a56.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -306,7 +306,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-990bab229e94ccb55fad37cff3dae646.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
@@ -315,7 +315,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -324,7 +324,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -333,7 +333,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -342,7 +342,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -351,7 +351,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -360,7 +360,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -369,7 +369,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 300;
 	font-style: normal;
 	font-display: swap;
@@ -378,7 +378,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -387,7 +387,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -396,7 +396,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -405,7 +405,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -414,7 +414,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -423,7 +423,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -432,7 +432,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -441,7 +441,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -450,7 +450,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -459,7 +459,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -468,7 +468,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -477,7 +477,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -486,7 +486,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -495,7 +495,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 600;
 	font-style: normal;
 	font-display: swap;
@@ -504,7 +504,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -513,7 +513,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -522,7 +522,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -531,7 +531,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -540,7 +540,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -549,7 +549,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -558,7 +558,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
@@ -567,7 +567,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-69ef5cde33d6fd526d060fcf78a34c88.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -576,7 +576,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2cb61e24915ad23d81f18cd8849def8c.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -585,7 +585,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-deeb3bf9a981d6a5c32705d435675328.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -594,7 +594,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-e1e86f846d97ba2bd5de747adfc78049.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -603,7 +603,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -612,7 +612,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-2083c91140e7bbb7db951151ac57a155.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
@@ -621,7 +621,7 @@
 
 @font-face {
 	font-family: 'Inter';
-	src: url(../../assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=be025f91dab9b81abd5e161b29118b44) format('woff2');
+	src: url(/assets/fonts/Inter-19884df4a8102ca66ed497ef7f549816.woff2?h=60f7751edc3ab55acc7880f1e25e45d3) format('woff2');
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;

export/assets/css/Open Sans.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-6dec32ba32c583143f37e96a59e0fb9e.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -9,7 +9,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-225b7d18262c1041a32b79d200e92bf1.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-225b7d18262c1041a32b79d200e92bf1.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -18,7 +18,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-dea7e20916bef72920c929acfb3a4641.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-dea7e20916bef72920c929acfb3a4641.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -27,7 +27,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-15e68f85ff378c85165faa90038c1c34.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-15e68f85ff378c85165faa90038c1c34.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -36,7 +36,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-5e916bd22ed9429b9b6c1e583e7e3bac.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-5e916bd22ed9429b9b6c1e583e7e3bac.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -45,7 +45,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-fab2dc2a64560c0036fff6d74173d2fe.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-fab2dc2a64560c0036fff6d74173d2fe.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -54,7 +54,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-92fcb6995c062a9e725f088d0a4946e3.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-92fcb6995c062a9e725f088d0a4946e3.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -63,7 +63,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-698c10e372a42d57247ac8e1ba5de182.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-698c10e372a42d57247ac8e1ba5de182.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -72,7 +72,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-68df54b884d8032b226b60b2de0d3d9f.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-68df54b884d8032b226b60b2de0d3d9f.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
@@ -81,7 +81,7 @@
 
 @font-face {
 	font-family: 'Open Sans';
-	src: url(../../assets/fonts/Open%20Sans-d839b7fe1395f21cd350be1b26d80cfc.woff2?h=9a12aca0fcffa0bf3e6a406b06de7e47) format('woff2');
+	src: url(/assets/fonts/Open%20Sans-d839b7fe1395f21cd350be1b26d80cfc.woff2?h=ce1e3121e620675940c895d202b884b3) format('woff2');
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;

export/assets/css/Seven Segment.css

@@ -1,7 +1,7 @@
 @font-face {
 	font-family: 'Seven Segment';
-	src: url(../../assets/fonts/Seven%20Segment-2949e811e8b49e67e29f877a915145a4.woff2?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff2'),
+	src: url(/assets/fonts/Seven%20Segment-2949e811e8b49e67e29f877a915145a4.woff2?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff2'),
-	url(../../assets/fonts/Seven%20Segment-4bffe92707a7a725aa309b14ed55c43e.woff?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff');
+	url(/assets/fonts/Seven%20Segment-4bffe92707a7a725aa309b14ed55c43e.woff?h=f58bcc159dfcde3a8902f3c3e5961248) format('woff');
 	font-weight: normal;
 	font-style: normal;
 	font-display: swap;

export/assets/css/bss-overrides.css

@@ -71,10 +71,6 @@
   padding-bottom: 3rem !important;
 }
 
-.pt-3 {
-  padding-top: 1rem !important;
-}
-
 @media (min-width: 768px) {
   .px-md-5 {
     padding-left: 3rem !important;

export/assets/css/styles.css

@@ -57,7 +57,7 @@ html {
 }
 
 .reset {
-  background-image: url("../../assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e");
+  background-image: url("/assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e");
   height: 100px;
   width: 100px;
 }
@@ -426,3 +426,134 @@ a {
   height: 38px;
 }
 
+.cc-nc:before {
+  background-image: url(https://creativecommons.org/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-nc);
+  float: left;
+  margin-left: -2.5em;
+  filter: invert(100%);
+}
+
+.cc-by:before {
+  background-image: url(https://creativecommons.org/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-by);
+  float: left;
+  margin-left: -2.5em;
+  filter: invert(100%);
+}
+
+li {
+  display: list-item;
+  unicode-bidi: isolate;
+}
+
+.cc-terms ul > li:before {
+  background-repeat: no-repeat;
+  background-size: contain;
+  content: "";
+  height: 2em;
+  width: 2em;
+}
+
+.cc-terms ul > li {
+  padding-left: 2.5em;
+  clear: both;
+  list-style: none;
+  margin-bottom: 2em;
+  min-height: 2em;
+}
+
+.cc-terms ul {
+  padding: 0;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  margin: 0 0 2em 2em;
+}
+
+ul {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  padding-inline-start: 40px;
+  unicode-bidi: isolate;
+}
+
+.cc-sa:before {
+  background-image: url(https://creativecommons.org/wp-content/themes/vocabulary-theme/vocabulary/svg/cc/icons/cc-icons.svg#cc-sa);
+  float: left;
+  margin-left: -2.5em;
+  filter: invert(100%);
+}
+
+.cc-terms a:hover {
+  color: var(--bs-warning);
+}
+
+.cc-terms a {
+  text-decoration: underline;
+  color: var(--bs-success);
+}
+
+.cc-terms p {
+  margin-bottom: 2em;
+  font-size: 1.5em;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.cc-terms h1 {
+  box-sizing: border-box;
+  text-transform: none;
+  margin: 0.2em 0;
+  order: 2;
+  width: 100%;
+  margin-top: .39em;
+  margin-bottom: 0;
+  grid: 0 / auto;
+  font-size: 3.56em;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.cc-heading h1 {
+  box-sizing: border-box;
+  text-transform: none;
+  margin: 0.2em 0;
+  order: 2;
+  width: 100%;
+  margin-top: .39em;
+  margin-bottom: 0;
+  grid: 0 / auto;
+  font-size: 3.56em;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.cc-terms h2 {
+  width: 100%;
+  box-sizing: border-box;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 2.1em;
+  text-transform: none;
+}
+
+.cc-heading h2 {
+  width: 100%;
+  box-sizing: border-box;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 2.1em;
+  text-transform: none;
+}
+
+.alert p {
+  margin-bottom: 0px;
+}
+
+.cc-heading p {
+  margin-top: 16px;
+  margin-bottom: 0px;
+}
+

export/binary.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -88,7 +173,7 @@
                 <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 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>
@@ -225,12 +310,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -239,7 +324,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/copyright.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -112,12 +197,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -126,7 +211,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/gcse-hexadecimal.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -88,7 +173,7 @@
                 <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 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>
@@ -210,12 +295,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -224,7 +309,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/hex-colours.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="container"><img src="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><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>
@@ -88,7 +173,7 @@
                 <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 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>
@@ -311,12 +396,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -325,7 +410,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/index.html

@@ -37,24 +37,110 @@
             "name": "Computing:Box",
             "url": "https://www.computingbox.co.uk"
         }
-    </script><script>!function(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    </script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+            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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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 active" href="/">Home</a></li>
@@ -102,7 +188,7 @@
                     </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 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>
@@ -113,12 +199,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -127,7 +213,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/legal-code.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -123,12 +208,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -137,7 +222,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/nand-gate.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -111,12 +196,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -125,7 +210,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/nor-gate.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -111,12 +196,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -125,7 +210,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/not-gate.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -111,12 +196,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -125,7 +210,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/or-gate.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -111,12 +196,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -125,7 +210,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/projects.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -78,7 +163,7 @@
             </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><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>
@@ -86,7 +171,7 @@
                     </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><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>
@@ -94,7 +179,7 @@
                     </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><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>
@@ -102,7 +187,7 @@
                     </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><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>
@@ -117,12 +202,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -131,7 +216,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/twos-compliment-binary.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -88,7 +173,7 @@
                 <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 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>
@@ -225,12 +310,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -239,7 +324,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/unsigned-binary.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="container"><img src="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><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>
@@ -88,7 +173,7 @@
                 <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 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>
@@ -225,12 +310,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -239,7 +324,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/xnor-gate.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -111,12 +196,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -125,7 +210,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>

export/xor-gate.html

@@ -30,24 +30,109 @@
     <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(){const e=()=>localStorage.getItem("theme"),t=document.documentElement.getAttribute("data-bss-forced-theme"),a=()=>{if(t)return t;const a=e();if(a)return a;const r=document.documentElement.getAttribute("data-bs-theme");return r||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},r=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};r(a());const c=(e,t=!1)=>{const a=[].slice.call(document.querySelectorAll(".theme-switcher"));if(a.length){document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}));for(const t of a){const a=t.querySelector('[data-bs-theme-value="'+e+'"]');a&&(a.classList.add("active"),a.setAttribute("aria-pressed","true"))}}};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{const t=e();"light"!==t&&"dark"!==t&&r(a())})),window.addEventListener("DOMContentLoaded",(()=>{c(a()),document.querySelectorAll("[data-bs-theme-value]").forEach((e=>{e.addEventListener("click",(t=>{t.preventDefault();const a=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(a),r(a),c(a)}))}))}))}();</script>
+    <script>
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+        (function() {
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            // JavaScript snippet handling Dark/Light mode switching
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const getStoredTheme = () => localStorage.getItem('theme');
-    <link rel="icon" type="image/webp" sizes="1024x1024" href="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+            const setStoredTheme = theme => localStorage.setItem('theme', theme);
-    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=bec7173809e9299f24e368ea574911e3">
+            const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
+
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&amp;display=swap">
+            const getPreferredTheme = () => {
-    <link rel="stylesheet" href="assets/css/styles.min.css?h=4e946c5fe2bb3e785288eb4a3f76fb40">
+
+                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/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <link rel="icon" type="image/webp" sizes="1024x1024" href="/assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1">
+    <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=60f7751edc3ab55acc7880f1e25e45d3">
+    <link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=ce1e3121e620675940c895d202b884b3">
+    <link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
+    <link rel="stylesheet" href="/assets/css/bss-overrides.css?h=3dbfe72d968bc29929e6342eb303e930">
+    <link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
+    <link rel="stylesheet" href="/assets/css/styles.css?h=88201532374cf4b4d8d775d23183d357">
 </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="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>
@@ -111,12 +196,12 @@
             <div class="row justify-content-center">
                 <!-- Start: About Project -->
                 <div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
-                    <div class="fw-bold d-flex align-items-center mb-2"><img src="assets/img/ComputingBox-Logo.webp?h=6ac4a5bf6a143a74e3e10fd9455bcce1" style="width: 32px;margin: 5px;" width="32" height="32"><span>Computing:Box</span></div>
+                    <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;" width="32" height="32"><span>Computing:Box</span></div>
                     <p class="text-muted">Computing Concept Simulators</p>
                 </div><!-- End: About Project -->
             </div>
             <hr>
-            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
+            <div class="col text-center d-block"><a href="https://www.computingbox.co.uk">Computing:Box</a> © 2024 by <a href="https://git.adcmnetworks.co.uk/alexander.lyall">Alexander Lyall</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><br><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1.5em;max-height:1.5em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1.5em;max-height:1em;margin-left: .2em;"><br><a href="copyright">Copyright Notice</a></div>
             <div class="text-muted d-flex justify-content-center"></div>
             <p class="mb-0"><noscript><!-- Matomo Image Tracker-->
 <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" />
@@ -125,7 +210,11 @@
     </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/script.min.js?h=3a1fe4e78a66f06efa0573c20b0444ab"></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>