Heat-Tracker/public/heatmap.html

42 lines
1.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Heat Map Fuego Heat Tracker</title>
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header class="main-header">
<img src="/image/logo.png" alt="Amazon Logo" class="logo">
<span class="header-title">| Fuego Heat Tracker</span>
<button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
<button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
<button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
</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 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>
<script src="/scripts/heatmap.js"></script>
</body>
</html>