From a5980171c997e1dd86cb4fa7dabcf196a2534def Mon Sep 17 00:00:00 2001
From: JoshBaneyCS <joshnbaney@gmail.com>
Date: Wed, 30 Apr 2025 07:35:33 +0000
Subject: [PATCH] Update public/heatmap.html

---
 public/heatmap.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/public/heatmap.html b/public/heatmap.html
index 99d1c5a..c578879 100644
--- a/public/heatmap.html
+++ b/public/heatmap.html
@@ -17,16 +17,21 @@
   </header>
 
   <div class="page-container heatmap">
+    <!-- Floor selector -->
+    <div class="floor-selector">
+      <label><input type="radio" name="floor" value="1" checked> Floor 1</label>
+      <label><input type="radio" name="floor" value="2"> Floor 2</label>
+      <label><input type="radio" name="floor" value="3"> Floor 3</label>
+      <label><input type="radio" name="floor" value="4"> Floor 4</label>
+    </div>
+
+    <!-- Scroll & zoom container -->
     <div id="heatmap-container">
       <div class="map-svg-container" id="mapSvgContainer">
-        <!-- heatmap.js will inject an <svg> here and draw your dock-doors and areas -->
-      </div>
-      <!-- optional floor selector, if you have multiple floors -->
-      <div class="floor-selector">
-        <label><input type="radio" name="floor" value="1" checked> Floor 1</label>
-        <label><input type="radio" name="floor" value="2"> Floor 2</label>
-        <label><input type="radio" name="floor" value="3"> Floor 3</label>
-        <label><input type="radio" name="floor" value="4"> Floor 4</label>
+        <!-- heatmap.js will insert an <svg> here with:
+             - <rect class="dock-door" ...> for each dock door
+             - <rect class="area-rect" ...> for each area
+             - <text> labels inside these rectangles -->
       </div>
     </div>
   </div>
@@ -34,4 +39,3 @@
   <script src="/scripts/heatmap.js"></script>
 </body>
 </html>
-