修改样式

public/js/app.js

@@ -63,7 +63,8 @@
     loginModal: document.getElementById('loginModalOverlay'),
     closeLoginModal: document.getElementById('closeLoginModal'),
     loginForm: document.getElementById('loginForm'),
-    loginError: document.getElementById('loginError')
+    loginError: document.getElementById('loginError'),
+    gaugesTime: document.getElementById('gaugesTime')
   };
 
   // ---- State ----
@@ -79,6 +80,10 @@
     // Clock
     updateClock();
     setInterval(updateClock, 1000);
+    
+    // Resource Gauges Time
+    updateGaugesTime();
+    setInterval(updateGaugesTime, 1000);
 
     // Initial theme check (localStorage handled after site settings load to ensure priority)
 
@@ -95,7 +100,7 @@
     dom.btnAdd.addEventListener('click', addSource);
 
     // Auth & Theme listeners
-    dom.themeToggle.addEventListener('click', toggleTheme);
+    dom.themeToggle.addEventListener('change', toggleTheme);
     dom.btnLogin.addEventListener('click', openLoginModal);
     dom.closeLoginModal.addEventListener('click', closeLoginModal);
     dom.loginForm.addEventListener('submit', handleLogin);
@@ -152,25 +157,30 @@
 
   // ---- Theme Switching ----
   function toggleTheme() {
-    const isLight = document.documentElement.classList.toggle('light-theme');
-    const theme = isLight ? 'light' : 'dark';
+    const theme = dom.themeToggle.checked ? 'light' : 'dark';
+    document.documentElement.classList.toggle('light-theme', theme === 'light');
     localStorage.setItem('theme', theme);
     updateThemeIcons(theme);
   }
 
   function applyTheme(theme) {
     const isLight = theme === 'light';
+    dom.themeToggle.checked = isLight;
     document.documentElement.classList.toggle('light-theme', isLight);
     updateThemeIcons(theme);
   }
 
   function updateThemeIcons(theme) {
     if (theme === 'light') {
-      dom.sunIcon.style.display = 'none';
+      dom.sunIcon.style.display = 'block'; // Always show both in slider, but might adjust opacity
       dom.moonIcon.style.display = 'block';
+      dom.sunIcon.style.opacity = '0.3';
+      dom.moonIcon.style.opacity = '1';
     } else {
       dom.sunIcon.style.display = 'block';
-      dom.moonIcon.style.display = 'none';
+      dom.moonIcon.style.display = 'block';
+      dom.sunIcon.style.opacity = '1';
+      dom.moonIcon.style.opacity = '0.3';
     }
   }
 
@@ -287,6 +297,12 @@
     dom.clock.textContent = formatClock();
   }
 
+  function updateGaugesTime() {
+    if (dom.gaugesTime) {
+      dom.gaugesTime.textContent = formatClock();
+    }
+  }
+
   // ---- Fetch Metrics ----
   async function fetchMetrics() {
     try {