jon/web-dashcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the webapp autostart on page load. Increased tool bar size

Browse Source
This commit is contained in:
Jon
2026-05-01 15:14:17 +01:00
parent e85b0fc51c
commit ac7180ad8f
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dashcam.html
View File

@@ -37,21 +37,21 @@
.bdv { color: #fff; font-weight: 500; }
/* info bar */
#gps-bar { position: absolute; bottom: 48px; left: 0; right: 0; background: rgba(0,0,0,0.55); padding: 5px 12px; display: none; }
.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; }
#gps-bar { position: absolute; bottom: 62px; left: 0; right: 0; background: rgba(0,0,0,0.55); padding: 7px 16px; display: none; }
.data-row { display: flex; gap: 21px; align-items: center; flex-wrap: wrap; }
.di { font-size: 13px; color: #ccc; display: flex; gap: 5px; align-items: center; }
.dl { color: #666; font-size: 12px; 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 { 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} }
#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; }
#status-bar { position: absolute; bottom: 117px; left: 12px; font-size: 10px; color: rgba(255,255,255,0.4); font-family: var(--font-sans); pointer-events: none; }
#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; }
/* button bar */
#btn-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(0,0,0,0.5); pointer-events: all; flex-wrap: wrap; z-index: 20; }
.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 12px; font-size: 11px; font-family: var(--font-sans); cursor: pointer; letter-spacing: 0.4px; white-space: nowrap; }
#btn-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px 13px; background: rgba(0,0,0,0.5); pointer-events: all; flex-wrap: wrap; z-index: 20; }
.hud-btn { 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: 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: #1D9E75; }
@@ -400,6 +400,8 @@ function toggleUnit() {
document.getElementById('big-speed-unit').textContent=unit;
}
window.addEventListener('DOMContentLoaded', () => startDashcam());
function toggleFullscreen() {
const app=document.getElementById('app'), btn=document.getElementById('fs-btn');
if(!app.classList.contains('fullscreen')){