From 15fba9cb7b0caeff588cdca6bcd9c83a8d49dfcf Mon Sep 17 00:00:00 2001
From: JoshBaneyCS <joshnbaney@gmail.com>
Date: Wed, 30 Apr 2025 06:26:50 +0000
Subject: [PATCH] Update public/trends.html

---
 public/trends.html | 46 +++++++++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 19 deletions(-)
diff --git a/public/trends.html b/public/trends.html
index bba5489..b704fc1 100644
--- a/public/trends.html
+++ b/public/trends.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Trends – Fuego Heat Tracker</title>
   <link rel="icon" href="/favicon.ico">
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="/styles.css">
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
@@ -20,37 +20,45 @@
   <div class="page-container">
     <h1>Trends</h1>
 
-    <div style="display:flex;align-items:center;margin-bottom:1rem;">
-      <input id="timeframe-slider" type="range" min="0" max="4" value="0" style="flex:1">
-      <span id="timeframe-label" style="margin-left:1rem;white-space:nowrap"></span>
+    <!-- Timeframe slider -->
+    <div style="display:flex; align-items:center; margin-bottom:1rem;">
+      <input id="timeframe-slider" type="range" min="0" max="4" value="0" style="flex:1;">
+      <span id="timeframe-label" style="margin-left:1rem; white-space:nowrap;"></span>
     </div>
 
-    <div style="margin-bottom:1rem">
+    <!-- Metric toggles -->
+    <div style="margin-bottom:1rem;">
       <label><input type="checkbox" name="metric" value="temperature" checked> Temperature</label>
       <label><input type="checkbox" name="metric" value="humidity"    checked> Humidity</label>
       <label><input type="checkbox" name="metric" value="heatIndex"   checked> Heat Index</label>
     </div>
 
-    <div id="chart-container" style="height:50vh;width:100%;margin-bottom:2rem">
+    <!-- Chart -->
+    <div id="chart-container">
       <canvas id="trend-chart"></canvas>
     </div>
 
-    <table id="trends-table" style="width:100%;border-collapse:collapse">
-      <thead>
-        <tr>
-          <th class="sortable">Date / Time</th>
-          <th class="sortable">Temperature (°F)</th>
-          <th class="sortable">Humidity (%)</th>
-          <th class="sortable">Heat Index (°F)</th>
-          <th class="sortable">Station/Dock Door</th>
-          <th class="sortable">Location</th>
-        </tr>
-      </thead>
-      <tbody id="trends-table-body"></tbody>
-    </table>
+    <!-- Scrollable, sortable data table -->
+    <div id="trends-table-container">
+      <table id="trends-table">
+        <thead>
+          <tr>
+            <th class="sortable">Date / Time</th>
+            <th class="sortable">Temperature (°F)</th>
+            <th class="sortable">Humidity (%)</th>
+            <th class="sortable">Heat Index (°F)</th>
+            <th class="sortable">Station/Dock Door</th>
+            <th class="sortable">Location</th>
+          </tr>
+        </thead>
+        <tbody id="trends-table-body"></tbody>
+      </table>
+    </div>
   </div>
 
+  <!-- Server‐injected initial data -->
   <!--INITIAL_DATA-->
+
   <script src="/scripts/trends.js"></script>
 </body>
 </html>
