148 lines
6.4 KiB
HTML
148 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="x-ua-compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Weather Consensus</title>
|
||
<meta name="description"
|
||
content="Aggregated weather forecast: temperature, precipitation chance, wind, and humidity from multiple providers." />
|
||
|
||
<!-- Prevent favicon 404 noise -->
|
||
<link rel="icon" href="data:," />
|
||
|
||
<!-- Site styles -->
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
|
||
<!-- Leaflet CSS (LOCAL, same folder as index.html) -->
|
||
<link rel="stylesheet" href="./leaflet.css" />
|
||
</head>
|
||
|
||
<body data-theme="night">
|
||
<!-- Multi-color top bar -->
|
||
<div class="topbar"></div>
|
||
|
||
<!-- HERO with subtle animated clouds / lightning / optional rain/snow -->
|
||
<header class="site-header">
|
||
<div class="hero">
|
||
<!-- Daytime sun / Nighttime moon (CSS-driven) -->
|
||
<div class="sun" aria-hidden="true"><span class="disc"></span></div>
|
||
<div class="moon" aria-hidden="true"><span class="disc"></span></div>
|
||
|
||
<!-- Cloud layers -->
|
||
<div class="clouds layer-back" aria-hidden="true">
|
||
<svg viewBox="0 0 800 200" preserveAspectRatio="none">
|
||
<defs>
|
||
<linearGradient id="cloudGrad" x1="0" x2="0" y1="0" y2="1">
|
||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.25" />
|
||
<stop offset="100%" stop-color="#d7e3ff" stop-opacity="0.07" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path fill="url(#cloudGrad)"
|
||
d="M0,120 C120,100 180,140 300,120 C420,100 480,145 600,125 C720,105 780,140 800,130 L800,200 L0,200 Z" />
|
||
</svg>
|
||
</div>
|
||
<div class="clouds layer-front" aria-hidden="true">
|
||
<svg viewBox="0 0 800 200" preserveAspectRatio="none">
|
||
<path fill="rgba(255,255,255,.15)"
|
||
d="M0,140 C160,120 220,160 360,140 C500,120 560,165 700,145 C760,137 790,150 800,148 L800,200 L0,200 Z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Decorative effects -->
|
||
<div class="lightning" aria-hidden="true"></div>
|
||
<div class="rain" aria-hidden="true"></div>
|
||
<div class="snow" aria-hidden="true"></div>
|
||
|
||
<div class="container hero-inner">
|
||
<h1>Weather Consensus</h1>
|
||
<p class="tagline">Aggregated forecast from multiple providers</p>
|
||
|
||
<!-- Controls -->
|
||
<div class="controls">
|
||
<form id="searchForm" class="search" role="search" aria-label="Search for a location"
|
||
autocomplete="off">
|
||
<input id="q" type="text" inputmode="search"
|
||
placeholder='Enter city & state or ZIP (e.g., "Dallas, TX" or "76084")'
|
||
aria-autocomplete="list" aria-haspopup="listbox" aria-controls="suggestions"
|
||
aria-expanded="false" />
|
||
<button type="submit" aria-label="Get forecast for the location entered">Get Forecast</button>
|
||
<button id="useMyLocation" type="button" aria-label="Use current location">Use current
|
||
location</button>
|
||
</form>
|
||
|
||
<label class="theme-toggle" for="themeMode" title="Theme">
|
||
<span>Theme</span>
|
||
<select id="themeMode">
|
||
<option value="auto" selected>Auto</option>
|
||
<option value="day">Day</option>
|
||
<option value="night">Night</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
<!-- Summary -->
|
||
<section id="summary" class="panel" aria-live="polite">
|
||
<h2 id="locationTitle" style="margin-top:0">Enter a location to see the forecast</h2>
|
||
<p id="generatedAt"></p>
|
||
</section>
|
||
|
||
<!-- Forecast cards -->
|
||
<section id="days" class="grid" aria-label="Daily forecast cards"></section>
|
||
|
||
<!-- Radar (hidden until weather data loads) -->
|
||
<section id="radarPanel" class="panel" style="display:none;">
|
||
<h2 style="margin-top:0">Live Radar (last ~4 hours)</h2>
|
||
|
||
<div id="radarMap" style="height:420px; border-radius:12px; overflow:hidden;"></div>
|
||
|
||
<div id="radarControls" style="display:flex; align-items:center; gap:.6rem; margin-top:.6rem;">
|
||
<button id="radarPlayPause" type="button">▶︎ Play</button>
|
||
<input id="radarSlider" type="range" min="0" max="0" value="0" step="1" style="flex:1;" />
|
||
<span id="radarTs" class="micro" style="color:#98a2b3; min-width:220px; text-align:right;"></span>
|
||
</div>
|
||
|
||
<p class="micro" style="color:#98a2b3">
|
||
Radar © NOAA/NWS (MRMS) · time‑enabled imagery (WMS) with ~4‑hour rolling window and ~5‑minute cadence.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- Sources / Attribution -->
|
||
<section class="panel">
|
||
<details>
|
||
<summary>Data sources</summary>
|
||
<ul>
|
||
<li>Geocoding: Open‑Meteo (primary), Nominatim / OpenStreetMap (fallback)</li>
|
||
<li>Weather providers: Open‑Meteo, National Weather Service (api.weather.gov), MET Norway, 7Timer!
|
||
</li>
|
||
<li>Radar: NOAA/NWS MRMS via public OGC services (WMS/WMTS)</li>
|
||
</ul>
|
||
<p class="micro" style="color:#98a2b3">
|
||
We cache results for 24 hours to minimize network calls and improve performance.
|
||
</p>
|
||
</details>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<span>© <span id="year"></span> WEATHER</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Leaflet JS (LOCAL, same folder as index.html) -->
|
||
<script src="./leaflet.js"></script>
|
||
|
||
<!-- Esri Leaflet (new, local) -->
|
||
<script src="./esri-leaflet.js"></script>
|
||
|
||
<!-- Your app; must come after Leaflet -->
|
||
<script src="./app.v6.4.js" defer></script>
|
||
</body>
|
||
|
||
</html> |