diff --git a/main.go b/main.go index a619a4e..cd304b9 100644 --- a/main.go +++ b/main.go @@ -36,7 +36,7 @@ import ( //go:embed static var embeddedStaticFiles embed.FS -const version = "1.0.7" +const version = "1.0.8" // --------------------------------------------------------------------------- // Config structs diff --git a/static/index.html b/static/index.html index adf91d6..86084ed 100644 --- a/static/index.html +++ b/static/index.html @@ -15,6 +15,8 @@ --button-bg: rgba(255,255,255,0.05); --button-border: rgba(255,255,255,0.10); --button-text: #e4e4e7; + --text: var(--body-text); + --border: var(--button-border); } * { box-sizing: border-box; } @@ -38,6 +40,8 @@ --button-bg: rgba(255,255,255,0.88); --button-border: rgba(15,23,42,0.10); --button-text: #0f172a; + --text: var(--body-text); + --border: var(--button-border); background: radial-gradient(circle at 10% 10%, rgba(14,165,233,0.10), transparent 20%), radial-gradient(circle at 90% 10%, rgba(168,85,247,0.10), transparent 18%), @@ -84,22 +88,30 @@ body[data-theme="light"] .text-violet-400 { color: #7c3aed !important; } body[data-theme="light"] .text-red-400 { color: #dc2626 !important; } body[data-theme="light"] .text-yellow-400 { color: #b45309 !important; } - .control-btn { display: inline-flex; align-items: center; justify-content: center; - gap: 8px; - min-height: 44px; + min-height: 42px; padding: 10px 14px; - border-radius: 16px; - border: 1px solid var(--button-border); - background: var(--button-bg); - color: var(--button-text); + border-radius: 14px; + border: 1px solid var(--border); + background: rgba(255,255,255,.05); + color: var(--text); + text-decoration: none; font-weight: 600; + font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + cursor: pointer; transition: 160ms ease; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + } + + body[data-theme="light"] .control-btn { + background: rgba(255,255,255,.88); + } + + .control-btn.primary { + background: rgba(14,165,233,0.14); + border-color: rgba(14,165,233,0.35); } .control-btn:hover { @@ -284,7 +296,7 @@
- Dashboard + Dashboard History Alarms Kiosk @@ -1070,54 +1082,6 @@ return n.toFixed(1) + UNIT_PCT; } - function applyTheme(theme) { - currentTheme = theme === 'light' ? 'light' : 'dark'; - document.body.setAttribute('data-theme', currentTheme); - try { localStorage.setItem('force-monitor-theme', currentTheme); } catch (e) {} - updateThemeButton(); - updateChartTheme(); - redrawGauges(); - } - - function initTheme() { - let theme = 'dark'; - try { - const stored = localStorage.getItem('force-monitor-theme'); - if (stored === 'light' || stored === 'dark') { - theme = stored; - } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { - theme = 'light'; - } - } catch (e) {} - applyTheme(theme); - } - - function toggleTheme() { applyTheme(isLightTheme() ? 'dark' : 'light'); } - - function updateThemeButton() { - const btn = document.getElementById('theme-toggle'); - if (btn) btn.textContent = isLightTheme() ? 'Dark theme' : 'Light theme'; - } - - function updateFullscreenButton() { - const btn = document.getElementById('fullscreen-toggle'); - if (btn) btn.textContent = document.fullscreenElement ? 'Exit fullscreen' : 'Enter fullscreen'; - } - - async function toggleFullscreen() { - try { - if (!document.fullscreenElement) { - await document.documentElement.requestFullscreen(); - } else { - await document.exitFullscreen(); - } - } catch (err) { - console.warn('Fullscreen error:', err); - } finally { - updateFullscreenButton(); - } - } - function updateChartTheme() { if (!SHOW_TREND_CHART || !lineChart) return; const light = isLightTheme(); @@ -1353,17 +1317,21 @@ } window.onload = () => { - initTheme(); + AppUI.initTheme({ + buttonId: 'theme-toggle', + onChange: (theme) => { + currentTheme = theme; + updateChartTheme(); + redrawGauges(); + } + }); + if (SHOW_HEADER_CONTROLS) { + AppUI.initFullscreen({ buttonId: 'fullscreen-toggle' }); + } + setActiveWindowButton(DEFAULT_WINDOW); setActiveTrendWindowButton(DEFAULT_TREND_WINDOW); - if (SHOW_HEADER_CONTROLS) { - const themeBtn = document.getElementById('theme-toggle'); - const fsBtn = document.getElementById('fullscreen-toggle'); - if (themeBtn) themeBtn.addEventListener('click', toggleTheme); - if (fsBtn) fsBtn.addEventListener('click', toggleFullscreen); - } - document.querySelectorAll('.window-btn').forEach(btn => btn.addEventListener('click', () => useWindow(btn.dataset.window))); @@ -1394,8 +1362,6 @@ }); } - document.addEventListener('fullscreenchange', updateFullscreenButton); - updateFullscreenButton(); if (SHOW_TREND_CHART) { const chartCanvas = document.getElementById('lineChart'); diff --git a/static/kiosk.html b/static/kiosk.html index 36a2685..a1214c6 100644 --- a/static/kiosk.html +++ b/static/kiosk.html @@ -5,6 +5,7 @@ Force Monitor — Kiosk