From 3abd43bdfe46a30277ae3549c0d68574a43565e5 Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Fri, 1 May 2026 15:14:40 +0100
Subject: [PATCH] Added speedometer for fun

---
 speedometer.html | 235 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 235 insertions(+)
 create mode 100644 speedometer.html
diff --git a/speedometer.html b/speedometer.html
new file mode 100644
index 0000000..01ce1c7
--- /dev/null
+++ b/speedometer.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Speedometer</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      background: #000;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-family: monospace;
+      color: #fff;
+      user-select: none;
+    }
+
+    #speed-val {
+      font-size: clamp(80px, 22vw, 160px);
+      font-weight: 700;
+      color: #fff;
+      line-height: 1;
+      text-align: center;
+    }
+
+    #speed-unit {
+      font-size: clamp(14px, 3vw, 22px);
+      color: #aaa;
+      letter-spacing: 3px;
+      margin-top: 8px;
+      text-align: center;
+    }
+
+    #gps-info {
+      margin-top: 28px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .data-row {
+      display: flex;
+      gap: 24px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .di {
+      font-size: clamp(11px, 2vw, 15px);
+      color: #ccc;
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+
+    .dl { color: #555; font-size: clamp(9px, 1.5vw, 12px); letter-spacing: 0.5px; }
+    .dv { color: #fff; font-weight: 500; }
+
+    #gps-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #555;
+      flex-shrink: 0;
+    }
+    #gps-dot.active { background: #1D9E75; animation: gpsblink 2s infinite; }
+    @keyframes gpsblink { 0%,100%{opacity:1} 50%{opacity:0.4} }
+
+    #clock {
+      position: fixed;
+      top: 14px;
+      left: 16px;
+      font-size: 16px;
+      color: #fff;
+      background: rgba(255,255,255,0.07);
+      border-radius: 8px;
+      padding: 4px 10px;
+      letter-spacing: 1px;
+    }
+
+    #unit-btn {
+      position: fixed;
+      top: 14px;
+      right: 16px;
+      background: rgba(255,255,255,0.1);
+      border: 0.5px solid rgba(255,255,255,0.2);
+      color: #fff;
+      border-radius: 26px;
+      padding: 7px 16px;
+      font-size: 14px;
+      font-family: monospace;
+      cursor: pointer;
+      letter-spacing: 0.4px;
+    }
+    #unit-btn:hover { background: rgba(255,255,255,0.2); }
+
+    #fs-btn {
+      position: fixed;
+      top: 14px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(255,255,255,0.1);
+      border: 0.5px solid rgba(255,255,255,0.2);
+      color: #fff;
+      border-radius: 26px;
+      padding: 7px 16px;
+      font-size: 14px;
+      font-family: monospace;
+      cursor: pointer;
+      letter-spacing: 0.4px;
+    }
+    #fs-btn:hover { background: rgba(255,255,255,0.2); }
+
+    #status {
+      position: fixed;
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 11px;
+      color: rgba(255,255,255,0.35);
+      white-space: nowrap;
+    }
+  </style>
+</head>
+<body>
+
+  <div id="clock">--:--:--</div>
+  <button id="fs-btn" onclick="toggleFullscreen()">&#x26F6;</button>
+  <button id="unit-btn" onclick="toggleUnit()">MPH / KPH</button>
+
+  <div id="speed-val">--</div>
+  <div id="speed-unit">MPH</div>
+
+  <div id="gps-info">
+    <div class="data-row">
+      <div id="gps-dot"></div>
+      <div class="di"><span class="dl">LAT</span><span class="dv" id="lat-val">--</span></div>
+      <div class="di"><span class="dl">LNG</span><span class="dv" id="lng-val">--</span></div>
+    </div>
+    <div class="data-row">
+      <div class="di"><span class="dl">ALT</span><span class="dv" id="alt-val">--</span></div>
+      <div class="di"><span class="dl">ACC</span><span class="dv" id="acc-val">--</span></div>
+      <div class="di"><span class="dl">HDG</span><span class="dv" id="hdg-val">--</span></div>
+      <div class="di"><span class="dl">DIST</span><span class="dv" id="dist-val">0.00km</span></div>
+    </div>
+  </div>
+
+  <div id="status">Acquiring GPS...</div>
+
+<script>
+  let useMph = true, watchId = null;
+  let lastPos = null, totalDist = 0;
+
+  function pad(v) { return String(Math.floor(v)).padStart(2, '0'); }
+
+  function cvt(ms) { return useMph ? ms * 2.23694 : ms * 3.6; }
+
+  function haversine(a, b) {
+    const R = 6371000, r = Math.PI / 180;
+    const dLat = (b.lat - a.lat) * r, dLng = (b.lng - a.lng) * r;
+    const x = Math.sin(dLat/2)**2 + Math.cos(a.lat*r)*Math.cos(b.lat*r)*Math.sin(dLng/2)**2;
+    return R * 2 * Math.atan2(Math.sqrt(x), Math.sqrt(1-x));
+  }
+
+  function bearingLabel(deg) {
+    if (deg === null || isNaN(deg)) return '--';
+    return ['N','NE','E','SE','S','SW','W','NW'][Math.round(deg/45)%8] + ' ' + Math.round(deg) + '\xb0';
+  }
+
+  function updateClock() {
+    const n = new Date();
+    document.getElementById('clock').textContent =
+      pad(n.getHours()) + ':' + pad(n.getMinutes()) + ':' + pad(n.getSeconds());
+  }
+
+  function toggleUnit() {
+    useMph = !useMph;
+    document.getElementById('speed-unit').textContent = useMph ? 'MPH' : 'KPH';
+  }
+
+  function startGPS() {
+    if (!navigator.geolocation) {
+      document.getElementById('status').textContent = 'GPS unavailable';
+      return;
+    }
+    watchId = navigator.geolocation.watchPosition(pos => {
+      const c = pos.coords;
+      const speed = c.speed !== null ? c.speed : 0;
+      const conv = cvt(speed);
+
+      document.getElementById('speed-val').textContent = Math.round(conv);
+      document.getElementById('lat-val').textContent = c.latitude.toFixed(5);
+      document.getElementById('lng-val').textContent = c.longitude.toFixed(5);
+      document.getElementById('alt-val').textContent = c.altitude !== null ? Math.round(c.altitude) + 'm' : '--';
+      document.getElementById('acc-val').textContent = Math.round(c.accuracy) + 'm';
+      document.getElementById('hdg-val').textContent = bearingLabel(c.heading);
+
+      const cur = { lat: c.latitude, lng: c.longitude };
+      if (lastPos) { const d = haversine(lastPos, cur); if (d < 200) totalDist += d; }
+      lastPos = cur;
+      document.getElementById('dist-val').textContent = (totalDist / 1000).toFixed(2) + 'km';
+
+      document.getElementById('gps-dot').className = 'active';
+      document.getElementById('status').textContent = '';
+    }, err => {
+      document.getElementById('status').textContent = 'GPS: ' + err.message;
+      document.getElementById('gps-dot').className = '';
+    }, { enableHighAccuracy: true, maximumAge: 1000, timeout: 15000 });
+  }
+
+  function toggleFullscreen() {
+    const btn = document.getElementById('fs-btn');
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch(() => {});
+      btn.textContent = '✕';
+    } else {
+      document.exitFullscreen().catch(() => {});
+      btn.textContent = '⛶';
+    }
+    document.addEventListener('fullscreenchange', () => {
+      if (!document.fullscreenElement) btn.textContent = '⛶';
+    }, { once: true });
+  }
+
+  setInterval(updateClock, 1000);
+  updateClock();
+  startGPS();
+</script>
+</body>
+</html>
