fix menu css selector and increase version in main.go

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

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: 42px;
-            min-height: 44px;
             padding: 10px 14px;
-            border-radius: 16px;
+            border-radius: 14px;
-            border: 1px solid var(--button-border);
+            border: 1px solid var(--border);
-            background: var(--button-bg);
+            background: rgba(255,255,255,.05);
-            color: var(--button-text);
+            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 @@
         <div class="glass border border-white/10 rounded-3xl p-4 mb-8">
             <div class="flex flex-wrap gap-3 items-center justify-between">
                 <div class="flex flex-wrap gap-3">
-                    <a href="/" class="control-btn" target="_self">Dashboard</a>
+                    <a href="/" class="control-btn primary" target="_self">Dashboard</a>
                     <a href="/history" class="control-btn" target="_self">History</a>
                     <a href="/alarms" class="control-btn" target="_self">Alarms</a>
                     <a href="/kiosk" class="control-btn" target="_self">Kiosk</a>
@@ -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');

static/kiosk.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Force Monitor — Kiosk</title>
   <style>
+    .btn.primary { background:rgba(14,165,233,0.14); border-color:rgba(14,165,233,0.35); }
     :root{--bg1:#030712;--bg2:#0f172a;--panel:rgba(255,255,255,.06);--border:rgba(255,255,255,.1);--text:#f8fafc;--muted:#94a3b8;--ok:#34d399;--warn:#facc15;--bad:#f87171;}
     body[data-theme="light"]{--bg1:#eef4ff;--bg2:#f8fafc;--panel:rgba(255,255,255,.84);--border:rgba(15,23,42,.10);--text:#0f172a;--muted:#475569;--ok:#059669;--warn:#b45309;--bad:#dc2626;}
     *{box-sizing:border-box} body{margin:0;min-height:100vh;color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;background:radial-gradient(circle at 20% 10%, rgba(56,189,248,.14), transparent 20%),radial-gradient(circle at 80% 10%, rgba(168,85,247,.14), transparent 18%),linear-gradient(180deg,var(--bg1),var(--bg2));}
@@ -25,7 +26,7 @@
 <body>
   <div class="wrap">
     <div class="nav" style="margin-bottom:14px">
-      <a class="btn" href="/">Dashboard</a><a class="btn" href="/history">History</a><a class="btn" href="/alarms">Alarms</a><a class="btn" href="/kiosk">Kiosk</a><a class="btn" href="/process-capability">Process capability</a><a class="btn" href="/reports">Reports</a><a class="btn" href="/license">License</a>
+      <a class="btn" href="/">Dashboard</a><a class="btn" href="/history">History</a><a class="btn" href="/alarms">Alarms</a><a class="btn primary" href="/kiosk">Kiosk</a><a class="btn" href="/process-capability">Process capability</a><a class="btn" href="/reports">Reports</a><a class="btn" href="/license">License</a>
       <div class="spacer"></div><button id="theme-toggle" class="btn" type="button">Light theme</button><button id="fullscreen-btn" class="btn" type="button">Enter fullscreen</button>
     </div>
     <div id="alarm-banner" class="banner"></div>