diff --git a/main.go b/main.go index 5bd8cb4..1a2e934 100644 --- a/main.go +++ b/main.go @@ -2056,6 +2056,22 @@ const uiHTML = ` font-size: 0.8rem; color: #a1a1aa; } + + .process-offline { + opacity: 0.35; + filter: grayscale(1) blur(1.5px); + pointer-events: none; + user-select: none; + transition: opacity 180ms ease, filter 180ms ease; + } + + .process-online { + opacity: 1; + filter: none; + pointer-events: auto; + user-select: auto; + transition: opacity 180ms ease, filter 180ms ease; + } @@ -2095,6 +2111,7 @@ const uiHTML = ` +
{{if .ShowVerdict}}
@@ -2647,6 +2664,21 @@ const uiHTML = ` return 'ok'; } + + + function setProcessVisualState(connected) { + const el = document.getElementById('process-content'); + if (!el) return; + + if (connected) { + el.classList.remove('process-offline'); + el.classList.add('process-online'); + } else { + el.classList.remove('process-online'); + el.classList.add('process-offline'); + } + } + function setConnectionIndicator(connected, stale) { const dot = document.getElementById('dot'); const text = document.getElementById('status-text'); @@ -3035,6 +3067,7 @@ const uiHTML = ` } setConnectionIndicator(connected, stale); + setProcessVisualState(connected && !stale); if (SHOW_GAUGES) { setTextBySelector('#digital-l .percent', leftPercent.toFixed(1)); @@ -3063,6 +3096,7 @@ const uiHTML = ` } catch (err) { console.warn('Live fetch error:', err); setConnectionIndicator(false, false); + setProcessVisualState(false); updateSummaryBar(false, false, 0, 0, 0); updateMachineVerdict(false, false, 0, 0, 0); updateAlarmBanner(0, 0, 0, false, false); @@ -3365,6 +3399,8 @@ const uiHTML = ` } } + setProcessVisualState(false); + fetchLiveData(); fetchHistory(); fetchTrend();