346 lines
16 KiB
HTML
346 lines
16 KiB
HTML
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
#app { font-family: var(--font-mono); background: #000; border-radius: var(--border-radius-lg); overflow: hidden; position: relative; width: 100%; height: 56vw; min-height: 320px; max-height: 92vh; }
|
|
#app.fullscreen { border-radius: 0; height: 100vh; width: 100vw; position: fixed; inset: 0; z-index: 9999; }
|
|
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
#hud { position: absolute; inset: 0; pointer-events: none; }
|
|
|
|
/* TOP LEFT — clock + date */
|
|
#top-left { position: absolute; top: 12px; left: 12px; display: none; flex-direction: column; gap: 3px; }
|
|
#clock { font-size: 18px; color: #fff; background: rgba(0,0,0,0.45); border-radius: 8px; padding: 4px 10px; letter-spacing: 1px; }
|
|
#dateline { font-size: 10px; color: #aaa; background: rgba(0,0,0,0.45); border-radius: 8px; padding: 3px 10px; letter-spacing: 0.5px; }
|
|
|
|
/* TOP RIGHT — speed */
|
|
#speed-display { position: absolute; top: 12px; right: 12px; text-align: center; background: rgba(0,0,0,0.45); border-radius: 12px; padding: 6px 14px; }
|
|
#speed-val { font-size: 44px; font-weight: 700; color: #fff; line-height: 1; }
|
|
#speed-unit { font-size: 10px; color: #aaa; letter-spacing: 1.5px; margin-top: 1px; }
|
|
#max-speed { font-size: 10px; color: #666; margin-top: 2px; }
|
|
|
|
/* G-FORCE meter — centre top */
|
|
#gforce-wrap { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.45); border-radius: 10px; padding: 5px 12px; text-align: center; display: none; }
|
|
#gforce-val { font-size: 20px; font-weight: 700; color: #fff; line-height: 1; }
|
|
#gforce-label { font-size: 9px; color: #aaa; letter-spacing: 1px; margin-top: 2px; }
|
|
#gforce-bar-wrap { width: 80px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 4px auto 0; overflow: hidden; }
|
|
#gforce-bar { height: 100%; width: 0%; background: #1D9E75; border-radius: 2px; transition: width 0.15s, background 0.15s; }
|
|
|
|
/* TILT indicator */
|
|
#tilt-wrap { position: absolute; top: 100px; right: 12px; background: rgba(0,0,0,0.45); border-radius: 10px; padding: 5px 10px; text-align: center; display: none; }
|
|
#tilt-pitch { font-size: 11px; color: #ccc; }
|
|
#tilt-roll { font-size: 11px; color: #ccc; }
|
|
#tilt-label { font-size: 9px; color: #666; letter-spacing: 0.5px; margin-bottom: 3px; }
|
|
|
|
/* BOTTOM DATA STRIPS */
|
|
#gps-bar { position: absolute; bottom: 52px; left: 0; right: 0; background: rgba(0,0,0,0.5); padding: 5px 12px; display: none; flex-direction: column; gap: 3px; }
|
|
#sensor-bar { position: absolute; bottom: 88px; left: 0; right: 0; background: rgba(0,0,0,0.4); padding: 4px 12px; display: none; flex-wrap: wrap; gap: 10px; }
|
|
|
|
.data-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
|
.di { font-size: 10px; color: #ccc; display: flex; gap: 4px; align-items: center; }
|
|
.dl { color: #666; font-size: 9px; letter-spacing: 0.4px; }
|
|
.dv { color: #fff; font-weight: 500; }
|
|
|
|
#gps-dot { width: 6px; height: 6px; 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} }
|
|
|
|
#placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #888; gap: 10px; font-family: var(--font-sans); background: #000; }
|
|
#status-bar { position: absolute; bottom: 90px; left: 12px; font-size: 10px; color: rgba(255,255,255,0.4); font-family: var(--font-sans); pointer-events: none; }
|
|
|
|
/* BUTTON BAR */
|
|
#btn-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(0,0,0,0.5); pointer-events: all; flex-wrap: wrap; }
|
|
.hud-btn { background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.2); color: #fff; border-radius: 20px; padding: 5px 13px; font-size: 11px; font-family: var(--font-sans); cursor: pointer; letter-spacing: 0.4px; white-space: nowrap; }
|
|
.hud-btn:hover { background: rgba(255,255,255,0.2); }
|
|
.hud-btn:disabled { opacity: 0.3; cursor: default; }
|
|
.hud-btn.primary { background: rgba(29,158,117,0.7); border-color: rgba(29,158,117,0.9); }
|
|
.hud-btn.primary:hover { background: rgba(29,158,117,0.9); }
|
|
.hud-btn.warn { background: rgba(186,117,23,0.7); border-color: rgba(186,117,23,0.9); }
|
|
</style>
|
|
|
|
<div id="app">
|
|
<video id="video" autoplay playsinline muted></video>
|
|
|
|
<div id="placeholder">
|
|
<div style="font-size:40px">🎥</div>
|
|
<div style="color:#aaa;font-family:var(--font-sans)">Tap START to begin</div>
|
|
<div style="font-size:11px;color:#555;font-family:var(--font-sans)">Camera · GPS · Motion sensors</div>
|
|
</div>
|
|
|
|
<div id="hud">
|
|
|
|
<div id="top-left">
|
|
<div id="clock">--:--:--</div>
|
|
<div id="dateline">---</div>
|
|
</div>
|
|
|
|
<div id="speed-display">
|
|
<div id="speed-val">--</div>
|
|
<div id="speed-unit">MPH</div>
|
|
<div id="max-speed">MAX --</div>
|
|
</div>
|
|
|
|
<div id="gforce-wrap">
|
|
<div id="gforce-val">0.00</div>
|
|
<div id="gforce-label">G-FORCE</div>
|
|
<div id="gforce-bar-wrap"><div id="gforce-bar"></div></div>
|
|
</div>
|
|
|
|
<div id="tilt-wrap">
|
|
<div id="tilt-label">TILT</div>
|
|
<div id="tilt-pitch">P: --°</div>
|
|
<div id="tilt-roll">R: --°</div>
|
|
</div>
|
|
|
|
<div id="sensor-bar">
|
|
<div class="data-row">
|
|
<div class="di"><span class="dl">BATT</span><span class="dv" id="batt-val">--</span></div>
|
|
<div class="di"><span class="dl">CHARGING</span><span class="dv" id="batt-chg">--</span></div>
|
|
<div class="di"><span class="dl">CONN</span><span class="dv" id="net-val">--</span></div>
|
|
<div class="di"><span class="dl">NETWORK</span><span class="dv" id="net-type">--</span></div>
|
|
<div class="di"><span class="dl">MEM</span><span class="dv" id="mem-val">--</span></div>
|
|
<div class="di"><span class="dl">CORES</span><span class="dv" id="cores-val">--</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gps-bar">
|
|
<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 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-bar"></div>
|
|
|
|
<div id="btn-bar">
|
|
<button class="hud-btn primary" id="start-btn" onclick="startDashcam()">START</button>
|
|
<button class="hud-btn" id="flip-btn" onclick="switchCamera()" disabled>FLIP</button>
|
|
<button class="hud-btn" id="unit-btn" onclick="toggleUnit()">MPH/KPH</button>
|
|
<button class="hud-btn" id="motion-btn" onclick="requestMotion()">ENABLE MOTION</button>
|
|
<button class="hud-btn" id="fs-btn" onclick="toggleFullscreen()">⛶ FULL</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let stream = null, facingMode = 'environment';
|
|
let watchId = null, clockInterval = null;
|
|
let useMph = true, maxSpeed = 0;
|
|
let lastPos = null, totalDist = 0;
|
|
let motionEnabled = false;
|
|
|
|
const G = 9.80665;
|
|
|
|
function cvt(ms) { return useMph ? ms * 2.23694 : ms * 3.6; }
|
|
|
|
function haversine(a, b) {
|
|
const R = 6371000, toR = Math.PI / 180;
|
|
const dLat = (b.lat - a.lat) * toR, dLng = (b.lng - a.lng) * toR;
|
|
const x = Math.sin(dLat/2)**2 + Math.cos(a.lat*toR)*Math.cos(b.lat*toR)*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 pad(v) { return String(v).padStart(2,'0'); }
|
|
|
|
function updateClock() {
|
|
const n = new Date();
|
|
document.getElementById('clock').textContent = pad(n.getHours())+':'+pad(n.getMinutes())+':'+pad(n.getSeconds());
|
|
const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
|
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
|
document.getElementById('dateline').textContent = days[n.getDay()]+' '+pad(n.getDate())+' '+months[n.getMonth()]+' '+n.getFullYear();
|
|
}
|
|
|
|
function setStatus(msg) {
|
|
document.getElementById('status-bar').textContent = msg;
|
|
}
|
|
|
|
function startGPS() {
|
|
if (!navigator.geolocation) { setStatus('GPS unavailable'); return; }
|
|
document.getElementById('gps-bar').style.display = 'flex';
|
|
watchId = navigator.geolocation.watchPosition(pos => {
|
|
const c = pos.coords;
|
|
const spd = c.speed !== null && c.speed >= 0 ? c.speed : 0;
|
|
const conv = cvt(spd);
|
|
if (conv > maxSpeed) maxSpeed = conv;
|
|
const cur = { lat: c.latitude, lng: c.longitude };
|
|
if (lastPos) { const d = haversine(lastPos, cur); if (d < 200) totalDist += d; }
|
|
lastPos = cur;
|
|
document.getElementById('speed-val').textContent = Math.round(conv);
|
|
document.getElementById('max-speed').textContent = 'MAX ' + Math.round(maxSpeed);
|
|
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);
|
|
document.getElementById('dist-val').textContent = (totalDist/1000).toFixed(2)+'km';
|
|
document.getElementById('gps-dot').className = 'active';
|
|
setStatus('');
|
|
}, err => {
|
|
setStatus('GPS: ' + err.message);
|
|
document.getElementById('gps-dot').className = '';
|
|
}, { enableHighAccuracy: true, maximumAge: 1000, timeout: 15000 });
|
|
}
|
|
|
|
function startStaticSensors() {
|
|
document.getElementById('sensor-bar').style.display = 'flex';
|
|
document.getElementById('cores-val').textContent = navigator.hardwareConcurrency || '--';
|
|
|
|
if ('deviceMemory' in navigator) {
|
|
document.getElementById('mem-val').textContent = navigator.deviceMemory + 'GB';
|
|
} else {
|
|
document.getElementById('mem-val').textContent = 'n/a';
|
|
}
|
|
|
|
if ('connection' in navigator || 'mozConnection' in navigator || 'webkitConnection' in navigator) {
|
|
const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
|
|
document.getElementById('net-val').textContent = conn.effectiveType ? conn.effectiveType.toUpperCase() : '--';
|
|
document.getElementById('net-type').textContent = conn.type ? conn.type : '--';
|
|
conn.addEventListener('change', () => {
|
|
document.getElementById('net-val').textContent = conn.effectiveType ? conn.effectiveType.toUpperCase() : '--';
|
|
document.getElementById('net-type').textContent = conn.type ? conn.type : '--';
|
|
});
|
|
} else {
|
|
document.getElementById('net-val').textContent = 'n/a';
|
|
document.getElementById('net-type').textContent = '';
|
|
}
|
|
|
|
if ('getBattery' in navigator) {
|
|
navigator.getBattery().then(bat => {
|
|
function updateBat() {
|
|
document.getElementById('batt-val').textContent = Math.round(bat.level * 100) + '%';
|
|
document.getElementById('batt-chg').textContent = bat.charging ? 'YES ⚡' : 'NO';
|
|
document.getElementById('batt-chg').innerHTML = bat.charging ? 'YES ⚡' : 'NO';
|
|
}
|
|
updateBat();
|
|
bat.addEventListener('levelchange', updateBat);
|
|
bat.addEventListener('chargingchange', updateBat);
|
|
});
|
|
} else {
|
|
document.getElementById('batt-val').textContent = 'n/a';
|
|
}
|
|
}
|
|
|
|
function handleMotion(e) {
|
|
const acc = e.accelerationIncludingGravity;
|
|
if (!acc) return;
|
|
const x = acc.x || 0, y = acc.y || 0, z = acc.z || 0;
|
|
const total = Math.sqrt(x*x + y*y + z*z) / G;
|
|
const lateral = Math.abs(x) / G;
|
|
const longitudinal = Math.abs(y) / G;
|
|
const gDisplay = Math.max(lateral, longitudinal).toFixed(2);
|
|
|
|
document.getElementById('gforce-val').textContent = gDisplay;
|
|
const pct = Math.min(parseFloat(gDisplay) / 2 * 100, 100);
|
|
const bar = document.getElementById('gforce-bar');
|
|
bar.style.width = pct + '%';
|
|
bar.style.background = pct > 75 ? '#e24b4a' : pct > 40 ? '#BA7517' : '#1D9E75';
|
|
|
|
const pitch = Math.atan2(y, z) * 180 / Math.PI;
|
|
const roll = Math.atan2(x, z) * 180 / Math.PI;
|
|
document.getElementById('tilt-pitch').textContent = 'PITCH: ' + pitch.toFixed(1) + '\xb0';
|
|
document.getElementById('tilt-roll').textContent = 'ROLL: ' + roll.toFixed(1) + '\xb0';
|
|
}
|
|
|
|
function handleOrientation(e) {
|
|
const pitch = e.beta !== null ? e.beta.toFixed(1) : '--';
|
|
const roll = e.gamma !== null ? e.gamma.toFixed(1) : '--';
|
|
if (!motionEnabled) {
|
|
document.getElementById('tilt-pitch').textContent = 'PITCH: ' + pitch + '\xb0';
|
|
document.getElementById('tilt-roll').textContent = 'ROLL: ' + roll + '\xb0';
|
|
}
|
|
}
|
|
|
|
async function requestMotion() {
|
|
const btn = document.getElementById('motion-btn');
|
|
if (typeof DeviceMotionEvent !== 'undefined' && typeof DeviceMotionEvent.requestPermission === 'function') {
|
|
try {
|
|
const res = await DeviceMotionEvent.requestPermission();
|
|
if (res === 'granted') {
|
|
window.addEventListener('devicemotion', handleMotion);
|
|
motionEnabled = true;
|
|
btn.textContent = 'MOTION ON';
|
|
btn.classList.add('warn');
|
|
document.getElementById('gforce-wrap').style.display = 'block';
|
|
document.getElementById('tilt-wrap').style.display = 'block';
|
|
}
|
|
} catch(e) { setStatus('Motion denied'); }
|
|
} else if (typeof DeviceMotionEvent !== 'undefined') {
|
|
window.addEventListener('devicemotion', handleMotion);
|
|
window.addEventListener('deviceorientation', handleOrientation);
|
|
motionEnabled = true;
|
|
btn.textContent = 'MOTION ON';
|
|
btn.classList.add('warn');
|
|
document.getElementById('gforce-wrap').style.display = 'block';
|
|
document.getElementById('tilt-wrap').style.display = 'block';
|
|
} else {
|
|
setStatus('Motion sensors not available');
|
|
}
|
|
}
|
|
|
|
async function startDashcam() {
|
|
const btn = document.getElementById('start-btn');
|
|
btn.disabled = true; btn.textContent = '...';
|
|
try {
|
|
if (stream) stream.getTracks().forEach(t => t.stop());
|
|
stream = await navigator.mediaDevices.getUserMedia({
|
|
video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } }, audio: false
|
|
});
|
|
document.getElementById('video').srcObject = stream;
|
|
document.getElementById('placeholder').style.display = 'none';
|
|
document.getElementById('top-left').style.display = 'flex';
|
|
document.getElementById('flip-btn').disabled = false;
|
|
btn.textContent = 'RESTART'; btn.disabled = false;
|
|
if (watchId !== null) { navigator.geolocation.clearWatch(watchId); watchId = null; }
|
|
maxSpeed = 0; totalDist = 0; lastPos = null;
|
|
startGPS();
|
|
startStaticSensors();
|
|
if (clockInterval) clearInterval(clockInterval);
|
|
clockInterval = setInterval(updateClock, 1000);
|
|
updateClock();
|
|
setStatus('Acquiring GPS...');
|
|
} catch(e) {
|
|
setStatus('Camera: ' + e.message);
|
|
btn.textContent = 'START'; btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
function switchCamera() {
|
|
facingMode = facingMode === 'environment' ? 'user' : 'environment';
|
|
startDashcam();
|
|
}
|
|
|
|
function toggleUnit() {
|
|
useMph = !useMph;
|
|
maxSpeed = useMph ? maxSpeed / 3.6 * 2.23694 : maxSpeed / 2.23694 * 3.6;
|
|
document.getElementById('speed-unit').textContent = useMph ? 'MPH' : 'KPH';
|
|
}
|
|
|
|
function toggleFullscreen() {
|
|
const app = document.getElementById('app');
|
|
const btn = document.getElementById('fs-btn');
|
|
if (!app.classList.contains('fullscreen')) {
|
|
if (app.requestFullscreen) app.requestFullscreen().catch(()=>{});
|
|
app.classList.add('fullscreen');
|
|
btn.textContent = '\u2715 EXIT';
|
|
} else {
|
|
if (document.exitFullscreen && document.fullscreenElement) document.exitFullscreen().catch(()=>{});
|
|
app.classList.remove('fullscreen');
|
|
btn.textContent = '\u26f6 FULL';
|
|
}
|
|
document.addEventListener('fullscreenchange', () => {
|
|
if (!document.fullscreenElement) {
|
|
app.classList.remove('fullscreen');
|
|
btn.textContent = '\u26f6 FULL';
|
|
}
|
|
}, { once: true });
|
|
}
|
|
</script>
|