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
+  }
 });

web/index.html

@@ -33,6 +33,14 @@
                             <span class="status-text">Checking...</span>
                         </span>
                     </div>
+                    <div class="status-item">
+                        <span class="label">CPU Temperature:</span>
+                        <span class="value" id="temperature-status">
+                            <span class="temp-icon">🌡️</span>
+                            <span class="temp-value">--</span>
+                            <span class="temp-unit">°C</span>
+                        </span>
+                    </div>
                 </div>
             </section>
 

web/style.css

@@ -98,6 +98,21 @@ h2 {
     box-shadow: 0 0 10px #ff4757;
 }
 
+/* Temperature Display */
+.temp-icon {
+    margin-right: 8px;
+}
+
+.temp-value {
+    color: #00d9ff;
+    font-size: 1.3rem;
+}
+
+.temp-unit {
+    color: #888;
+    font-size: 0.9rem;
+}
+
 /* Upload Section */
 .upload-tabs {
     display: flex;