From 215548372cd067beb148784b09eae3183381f5df Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Wed, 29 Apr 2026 22:12:49 +0100
Subject: [PATCH] added GPS

---
 dashcam.html | 175 ++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 145 insertions(+), 30 deletions(-)

diff --git a/dashcam.html b/dashcam.html
index f338ef7..f87302b 100644
--- a/dashcam.html
+++ b/dashcam.html
@@ -1,72 +1,187 @@
 
 <style>
 * { box-sizing: border-box; margin: 0; padding: 0; }
-body { background: transparent; }
-#app { font-family: var(--font-sans); padding: 1rem 0; }
+#app { font-family: var(--font-mono); padding: 1rem 0; }
 #viewfinder { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--border-radius-lg); overflow: hidden; }
-video { width: 100%; height: 100%; object-fit: cover; display: block; }
-#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
-#rec-badge { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.5); border-radius: 20px; padding: 4px 10px; color: #fff; font-size: 12px; font-weight: 500; display: none; }
+#video { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+#hud { position: absolute; inset: 0; pointer-events: none; }
+
+#speed-display { position: absolute; top: 12px; right: 12px; text-align: center; background: rgba(0,0,0,0.55); border-radius: 10px; padding: 6px 14px; }
+#speed-val { font-size: 38px; font-weight: 700; color: #fff; line-height: 1; }
+#speed-unit { font-size: 11px; color: #aaa; letter-spacing: 1px; margin-top: 2px; }
+
+#rec-badge { position: absolute; top: 12px; left: 12px; display: none; align-items: center; gap: 6px; background: rgba(0,0,0,0.55); border-radius: 20px; padding: 5px 12px; color: #fff; font-size: 12px; }
 #rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #e24b4a; animation: blink 1s infinite; }
 @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
-#cam-label { position: absolute; bottom: 12px; left: 12px; background: rgba(0,0,0,0.5); border-radius: 20px; padding: 4px 10px; color: #fff; font-size: 12px; }
-#controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
+
+#clock { position: absolute; top: 44px; left: 12px; background: rgba(0,0,0,0.55); border-radius: 20px; padding: 4px 12px; color: #fff; font-size: 12px; display: none; }
+
+#gps-bar { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); padding: 6px 12px; display: none; flex-direction: column; gap: 2px; }
+#gps-row1 { display: flex; gap: 16px; align-items: center; }
+#gps-row2 { display: flex; gap: 16px; align-items: center; }
+.gps-item { font-size: 11px; color: #ccc; display: flex; gap: 5px; align-items: center; }
+.gps-label { color: #888; font-size: 10px; letter-spacing: 0.5px; }
+.gps-val { color: #fff; font-weight: 500; }
+#gps-dot { width: 7px; height: 7px; border-radius: 50%; background: #888; flex-shrink: 0; }
+#gps-dot.active { background: #1D9E75; animation: blink 2s infinite; }
+
+#placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #888; font-size: 14px; gap: 8px; font-family: var(--font-sans); }
+
+#controls { display: flex; gap: 10px; margin-top: 12px; }
 #start-btn { flex: 1; padding: 10px; border-radius: var(--border-radius-md); border: none; background: #1D9E75; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
 #start-btn:hover { background: #0F6E56; }
 #switch-btn { padding: 10px 16px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); background: var(--color-background-secondary); color: var(--color-text-primary); font-size: 14px; cursor: pointer; }
-#switch-btn:hover { background: var(--color-background-tertiary); }
-#status { font-size: 13px; color: var(--color-text-secondary); margin-top: 8px; }
-#placeholder { color: #888; font-size: 14px; text-align: center; }
-#placeholder-icon { font-size: 36px; margin-bottom: 8px; }
+#switch-btn:disabled { opacity: 0.4; cursor: default; }
+#unit-btn { padding: 10px 16px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); background: var(--color-background-secondary); color: var(--color-text-primary); font-size: 13px; cursor: pointer; }
+
+#status { font-size: 12px; color: var(--color-text-secondary); margin-top: 8px; font-family: var(--font-sans); min-height: 18px; }
 </style>
 
 <div id="app">
   <div id="viewfinder">
     <video id="video" autoplay playsinline muted></video>
-    <div id="overlay">
-      <div id="placeholder">
-        <div id="placeholder-icon">&#128247;</div>
-        <div>Tap "Start camera" to begin</div>
+
+    <div id="hud">
+      <div id="rec-badge"><div id="rec-dot"></div> REC</div>
+      <div id="clock"></div>
+
+      <div id="speed-display">
+        <div id="speed-val">0</div>
+        <div id="speed-unit">MPH</div>
+      </div>
+
+      <div id="gps-bar">
+        <div id="gps-row1">
+          <div id="gps-dot"></div>
+          <div class="gps-item"><span class="gps-label">LAT</span><span class="gps-val" id="lat-val">--</span></div>
+          <div class="gps-item"><span class="gps-label">LNG</span><span class="gps-val" id="lng-val">--</span></div>
+          <div class="gps-item"><span class="gps-label">ALT</span><span class="gps-val" id="alt-val">--</span></div>
+        </div>
+        <div id="gps-row2">
+          <div class="gps-item"><span class="gps-label">ACC</span><span class="gps-val" id="acc-val">--</span></div>
+          <div class="gps-item"><span class="gps-label">HDG</span><span class="gps-val" id="hdg-val">--</span></div>
+          <div class="gps-item"><span class="gps-label">MAX</span><span class="gps-val" id="max-val">0</span></div>
+        </div>
       </div>
     </div>
-    <div id="rec-badge"><div id="rec-dot"></div> REC</div>
-    <div id="cam-label" style="display:none"></div>
+
+    <div id="placeholder">
+      <div style="font-size:36px">&#127909;</div>
+      <div>Tap "Start" to begin</div>
+      <div style="font-size:12px;color:#666">Camera + GPS permissions needed</div>
+    </div>
   </div>
 
   <div id="controls">
-    <button id="start-btn" onclick="startCamera()">Start camera</button>
-    <button id="switch-btn" onclick="switchCamera()" disabled>Switch camera</button>
+    <button id="start-btn" onclick="startDashcam()">Start</button>
+    <button id="switch-btn" onclick="switchCamera()" disabled>Flip</button>
+    <button id="unit-btn" onclick="toggleUnit()">MPH/KPH</button>
   </div>
-  <div id="status">No camera active</div>
+  <div id="status">Ready</div>
 </div>
 
 <script>
 let stream = null;
 let facingMode = 'environment';
+let watchId = null;
+let useMph = true;
+let maxSpeed = 0;
+let gpsActive = false;
 
-async function startCamera() {
+function toMph(ms) { return ms * 2.23694; }
+function toKph(ms) { return ms * 3.6; }
+
+function convertSpeed(ms) {
+  return useMph ? toMph(ms) : toKph(ms);
+}
+
+function bearing(deg) {
+  if (deg === null || deg === undefined) return '--';
+  const dirs = ['N','NE','E','SE','S','SW','W','NW'];
+  return dirs[Math.round(deg / 45) % 8] + ' ' + Math.round(deg) + '°';
+}
+
+function updateClock() {
+  const now = new Date();
+  const h = String(now.getHours()).padStart(2,'0');
+  const m = String(now.getMinutes()).padStart(2,'0');
+  const s = String(now.getSeconds()).padStart(2,'0');
+  document.getElementById('clock').textContent = h + ':' + m + ':' + s;
+}
+
+function startGPS() {
+  if (!navigator.geolocation) {
+    document.getElementById('status').textContent = 'GPS not available in this browser';
+    return;
+  }
+  document.getElementById('gps-bar').style.display = 'flex';
+  watchId = navigator.geolocation.watchPosition(pos => {
+    gpsActive = true;
+    document.getElementById('gps-dot').className = 'active';
+    const c = pos.coords;
+    const spd = c.speed !== null ? c.speed : 0;
+    const converted = convertSpeed(spd);
+    if (converted > maxSpeed) maxSpeed = converted;
+
+    document.getElementById('speed-val').textContent = Math.round(converted);
+    document.getElementById('speed-unit').textContent = useMph ? 'MPH' : 'KPH';
+    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 = bearing(c.heading);
+    document.getElementById('max-val').textContent = Math.round(maxSpeed);
+    document.getElementById('status').textContent = 'GPS locked';
+  }, err => {
+    document.getElementById('status').textContent = 'GPS: ' + err.message;
+    document.getElementById('gps-dot').className = '';
+  }, {
+    enableHighAccuracy: true,
+    maximumAge: 1000,
+    timeout: 10000
+  });
+}
+
+async function startDashcam() {
+  const btn = document.getElementById('start-btn');
+  btn.disabled = true;
+  btn.textContent = 'Starting...';
   try {
-    if (stream) { stream.getTracks().forEach(t => t.stop()); }
+    if (stream) stream.getTracks().forEach(t => t.stop());
     stream = await navigator.mediaDevices.getUserMedia({
       video: { facingMode: facingMode, width: { ideal: 1280 }, height: { ideal: 720 } },
       audio: false
     });
-    const video = document.getElementById('video');
-    video.srcObject = stream;
-    document.getElementById('overlay').style.display = 'none';
+    document.getElementById('video').srcObject = stream;
+    document.getElementById('placeholder').style.display = 'none';
     document.getElementById('rec-badge').style.display = 'flex';
-    document.getElementById('cam-label').style.display = 'block';
-    document.getElementById('cam-label').textContent = facingMode === 'environment' ? 'Rear camera' : 'Front camera';
-    document.getElementById('start-btn').textContent = 'Restart';
+    document.getElementById('clock').style.display = 'block';
     document.getElementById('switch-btn').disabled = false;
-    document.getElementById('status').textContent = facingMode === 'environment' ? 'Rear camera active' : 'Front camera active';
+    btn.textContent = 'Restart';
+    btn.disabled = false;
+    document.getElementById('status').textContent = 'Camera active — requesting GPS...';
+    if (watchId !== null) navigator.geolocation.clearWatch(watchId);
+    maxSpeed = 0;
+    startGPS();
+    setInterval(updateClock, 1000);
+    updateClock();
   } catch(e) {
     document.getElementById('status').textContent = 'Camera error: ' + e.message;
+    btn.textContent = 'Start';
+    btn.disabled = false;
   }
 }
 
 function switchCamera() {
   facingMode = facingMode === 'environment' ? 'user' : 'environment';
-  startCamera();
+  startDashcam();
+}
+
+function toggleUnit() {
+  useMph = !useMph;
+  maxSpeed = useMph ? maxSpeed * (2.23694 / 3.6) : maxSpeed * (3.6 / 2.23694);
+  document.getElementById('speed-unit').textContent = useMph ? 'MPH' : 'KPH';
+  document.getElementById('max-val').textContent = Math.round(maxSpeed);
 }
 </script>