added temperature monitor

web/app.js

@@ -21,7 +21,9 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Initialize
   checkMountStatus();
+  checkTemperature();
   setInterval(checkMountStatus, 10000); // Check every 10 seconds
+  setInterval(checkTemperature, 5000); // Check temperature every 5 seconds
 
   // Tab switching
   tabBtns.forEach((btn) => {
@@ -306,4 +308,37 @@ document.addEventListener("DOMContentLoaded", function () {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   }
+
+  // Temperature functions
+  const temperatureStatus = document.getElementById("temperature-status");
+  const tempValue = temperatureStatus
+    ? temperatureStatus.querySelector(".temp-value")
+    : null;
+
+  async function checkTemperature() {
+    if (!tempValue) return;
+
+    try {
+      const response = await fetch("/api/temperature");
+      const data = await response.json();
+
+      if (data.success) {
+        tempValue.textContent = data.temperature.toFixed(1);
+        tempValue.style.color = getTempColor(data.temperature);
+      } else {
+        tempValue.textContent = "N/A";
+        tempValue.style.color = "#888";
+      }
+    } catch (error) {
+      tempValue.textContent = "Error";
+      tempValue.style.color = "#ff4757";
+    }
+  }
+
+  function getTempColor(temp) {
+    if (temp < 50) return "#00ff88"; // Green - cool
+    if (temp < 70) return "#00d9ff"; // Blue - normal
+    if (temp < 80) return "#ffa500"; // Orange - warm
+    return "#ff4757"; // Red - hot
+  }
 });