fix menu css selector and increase version in main.go
This commit is contained in:
Dejan R
parent
8aed4f57e2
commit
3ca28c0e13
2
main.go
2
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
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue