Heat-Tracker/public/input-area.html

73 lines
2.4 KiB
HTML
Raw Permalink 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">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="styles.css">
<title>Log Area Reading</title>
</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'">Dock 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>
<button class="nav-btn" onclick="location.href='/input-area.html'">Area Reading</button>
</header>
<div class="page-container">
<h1>Enter Area Reading</h1>
<form id="area-form">
<fieldset>
<legend>Area Selection</legend>
<select id="area" class="form-input" required>
<option value="" disabled selected>Select an area</option>
<option value="A-Mod">A-Mod</option>
<option value="AFE-1">AFE-1 (Outbound Pre-Slam Floor 1)</option>
<option value="AFE-2">AFE-2 (Outbound Pre-Slam Floor 2)</option>
<option value="B-Mod">B-Mod</option>
</select>
</fieldset>
<fieldset>
<legend>Station Code</legend>
<input
id="stationCode"
class="form-input"
type="text"
placeholder="4-digit code (e.g. 4305)"
pattern="\d{4}"
required
>
<small style="display:block; text-align:center; color:#666;">
Format: &lt;Floor (14)&gt;&lt;Dir (1=N,2=E,3=S,4=W)&gt;&lt;Station # (2 digits)&gt;
</small>
</fieldset>
<fieldset>
<legend>Measurements</legend>
<input
id="temperature"
class="form-input"
type="number"
step="0.1"
placeholder="Temperature (°F)"
required
>
<input
id="humidity"
class="form-input"
type="number"
step="0.1"
placeholder="Humidity (%)"
required
>
</fieldset>
<button type="submit" class="big-button">Submit Area Reading</button>
</form>
</div>
<script src="scripts/input-area.js"></script>
</body>
</html>