- initial
This commit is contained in:
Ty Clifford
@@ -0,0 +1,216 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
?><!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Weather</title>
|
||||
<link rel="preconnect" href="https://unpkg.com">
|
||||
<link rel="preconnect" href="https://tile.openstreetmap.org">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<span class="brand-mark"></span>
|
||||
<div>
|
||||
<h1>Weather</h1>
|
||||
<p id="locationLabel">Search a location</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="search" id="searchForm" autocomplete="off">
|
||||
<div class="search-box">
|
||||
<i data-lucide="search"></i>
|
||||
<input id="locationInput" name="q" type="search" placeholder="City, state, or ZIP" aria-label="City, state, or ZIP">
|
||||
<button type="submit">
|
||||
<i data-lucide="navigation"></i>
|
||||
<span>Go</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-results" id="searchResults" hidden></div>
|
||||
</form>
|
||||
|
||||
<div class="top-actions">
|
||||
<button class="icon-button" type="button" id="refreshButton" title="Refresh now">
|
||||
<i data-lucide="refresh-cw"></i>
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
<button class="icon-button" type="button" id="themeButton" title="Switch theme">
|
||||
<i data-lucide="sun-moon"></i>
|
||||
<span id="themeLabel">Light</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="layout">
|
||||
<aside class="control-panel">
|
||||
<div class="panel-heading">
|
||||
<h2>Controls</h2>
|
||||
<span id="refreshCountdown">5:00</span>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>Views</h3>
|
||||
<label><input type="checkbox" data-pref="sections.current"> Current</label>
|
||||
<label><input type="checkbox" data-pref="sections.map"> Radar</label>
|
||||
<label><input type="checkbox" data-pref="sections.hourly"> Hourly</label>
|
||||
<label><input type="checkbox" data-pref="sections.daily"> Daily</label>
|
||||
<label><input type="checkbox" data-pref="sections.weekly"> Weekly</label>
|
||||
<label><input type="checkbox" data-pref="sections.air"> Air</label>
|
||||
<label><input type="checkbox" data-pref="sections.history"> History</label>
|
||||
<label><input type="checkbox" data-pref="sections.archives"> Archives</label>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>Map</h3>
|
||||
<label><input type="checkbox" data-pref="layers.radar"> Radar</label>
|
||||
<label><input type="checkbox" data-pref="layers.wind"> Wind</label>
|
||||
<label><input type="checkbox" data-pref="layers.rain"> Rain</label>
|
||||
<label><input type="checkbox" data-pref="layers.aqi"> Air quality</label>
|
||||
<label><input type="checkbox" data-pref="layers.clouds"> Clouds</label>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3>Data</h3>
|
||||
<label><input type="checkbox" data-pref="metrics.humidity"> Humidity</label>
|
||||
<label><input type="checkbox" data-pref="metrics.wind"> Wind</label>
|
||||
<label><input type="checkbox" data-pref="metrics.precip"> Precipitation</label>
|
||||
<label><input type="checkbox" data-pref="metrics.pressure"> Pressure</label>
|
||||
<label><input type="checkbox" data-pref="metrics.uv"> UV</label>
|
||||
<label><input type="checkbox" data-pref="metrics.aqi"> AQI</label>
|
||||
<label><input type="checkbox" data-pref="metrics.pollen"> Pollen</label>
|
||||
</div>
|
||||
|
||||
<div class="control-actions">
|
||||
<button type="button" id="exportPrefs">
|
||||
<i data-lucide="download"></i>
|
||||
<span>Export prefs</span>
|
||||
</button>
|
||||
<button type="button" id="importPrefsButton">
|
||||
<i data-lucide="upload"></i>
|
||||
<span>Import prefs</span>
|
||||
</button>
|
||||
<input id="importPrefsFile" type="file" accept="application/json" hidden>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section class="content">
|
||||
<section class="status-line" id="statusLine" aria-live="polite">Ready</section>
|
||||
|
||||
<section class="section-grid" id="currentSection" data-section="current">
|
||||
<div class="current-card main-current">
|
||||
<div>
|
||||
<span class="eyebrow">Current</span>
|
||||
<h2 id="currentTemp">--</h2>
|
||||
<p id="currentSummary">Waiting for weather data</p>
|
||||
</div>
|
||||
<canvas id="todaySpark" width="360" height="150" aria-label="Temperature trend"></canvas>
|
||||
</div>
|
||||
<div class="metric-grid" id="metricGrid"></div>
|
||||
</section>
|
||||
|
||||
<section class="map-section" id="mapSection" data-section="map">
|
||||
<div class="section-title">
|
||||
<h2>Radar</h2>
|
||||
<span id="radarTime">Live layer</span>
|
||||
</div>
|
||||
<div id="weatherMap" class="weather-map"></div>
|
||||
</section>
|
||||
|
||||
<section class="data-section" id="hourlySection" data-section="hourly">
|
||||
<div class="section-title">
|
||||
<h2>Hourly</h2>
|
||||
<span id="hourlyMeta">Next 48 hours</span>
|
||||
</div>
|
||||
<div class="scroll-table">
|
||||
<table>
|
||||
<thead id="hourlyHead"></thead>
|
||||
<tbody id="hourlyBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="data-section" id="dailySection" data-section="daily">
|
||||
<div class="section-title">
|
||||
<h2>Daily</h2>
|
||||
<span>16 day projection</span>
|
||||
</div>
|
||||
<div class="daily-grid" id="dailyGrid"></div>
|
||||
</section>
|
||||
|
||||
<section class="data-section" id="weeklySection" data-section="weekly">
|
||||
<div class="section-title">
|
||||
<h2>Weekly</h2>
|
||||
<span>Grouped projection</span>
|
||||
</div>
|
||||
<div class="weekly-grid" id="weeklyGrid"></div>
|
||||
</section>
|
||||
|
||||
<section class="section-grid two-column">
|
||||
<div class="data-section" id="airSection" data-section="air">
|
||||
<div class="section-title">
|
||||
<h2>Air</h2>
|
||||
<span id="airMeta">AQI and pollutants</span>
|
||||
</div>
|
||||
<div class="air-grid" id="airGrid"></div>
|
||||
<canvas id="aqiSpark" width="420" height="160" aria-label="AQI trend"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="data-section" id="historySection" data-section="history">
|
||||
<div class="section-title">
|
||||
<h2>History</h2>
|
||||
<span id="historyDate">Current date</span>
|
||||
</div>
|
||||
<ul class="fact-list" id="historyFacts"></ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="data-section" id="archivesSection" data-section="archives">
|
||||
<div class="section-title">
|
||||
<h2>Archives</h2>
|
||||
<button type="button" id="exportArchives">
|
||||
<i data-lucide="file-json"></i>
|
||||
<span>Export results</span>
|
||||
</button>
|
||||
</div>
|
||||
<form class="archive-search" id="archiveForm">
|
||||
<input id="archiveQuery" type="search" placeholder="Search archive" aria-label="Search archive">
|
||||
<select id="archiveKind" aria-label="Archive kind">
|
||||
<option value="">All</option>
|
||||
<option value="hourly">Hourly</option>
|
||||
<option value="daily">Daily</option>
|
||||
</select>
|
||||
<input id="archiveStart" type="date" aria-label="Start date">
|
||||
<input id="archiveEnd" type="date" aria-label="End date">
|
||||
<button type="submit">
|
||||
<i data-lucide="database"></i>
|
||||
<span>Search</span>
|
||||
</button>
|
||||
</form>
|
||||
<div class="archive-list" id="archiveList"></div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<dialog id="archiveDialog">
|
||||
<div class="dialog-head">
|
||||
<h2 id="archiveDialogTitle">Archive</h2>
|
||||
<button type="button" id="closeArchiveDialog" class="round-button" title="Close">
|
||||
<i data-lucide="x"></i>
|
||||
</button>
|
||||
</div>
|
||||
<pre id="archiveDialogBody"></pre>
|
||||
</dialog>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<script src="assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user