Justin Fisher
114 lines
4.1 KiB
HTML
114 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>US County Climate Explorer</title>
|
|
<link rel="icon" href="data:," />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""
|
|
/>
|
|
<link rel="stylesheet" href="styles.css?v=dtr-20260531" />
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<aside class="control-panel">
|
|
<h1>US County Climate Explorer</h1>
|
|
<p class="intro">Explore county-level climate filters. Click any county to inspect details and zoom directly to it.</p>
|
|
|
|
<div class="control-stack">
|
|
<label for="metricGroupSelect">Group</label>
|
|
<select id="metricGroupSelect"></select>
|
|
|
|
<div id="metricSelectWrap" class="metric-select-wrap">
|
|
<label for="metricSelect">Metric</label>
|
|
<select id="metricSelect"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="koppenFilterWrap" class="range-wrap is-hidden">
|
|
<label for="koppenFilterSelect">Category Filter</label>
|
|
<select id="koppenFilterSelect"></select>
|
|
</div>
|
|
|
|
<div class="range-wrap">
|
|
<label for="minRange">Minimum Value</label>
|
|
<input id="minRange" type="range" />
|
|
<output id="minValue"></output>
|
|
</div>
|
|
|
|
<div class="range-wrap">
|
|
<label for="maxRange">Maximum Value</label>
|
|
<input id="maxRange" type="range" />
|
|
<output id="maxValue"></output>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="resetViewButton" type="button">Reset Country View</button>
|
|
<button id="clearSelectionButton" type="button">Clear Selection</button>
|
|
</div>
|
|
|
|
<div class="control-panel-spacer" aria-hidden="true"></div>
|
|
<div class="sources-control" style="margin-top: auto;">
|
|
<button id="sourcesButton" type="button" aria-haspopup="dialog">Sources</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="map-panel">
|
|
<div id="map" aria-label="US county climate map"></div>
|
|
<section id="metricInfoPanel" class="metric-info-panel" aria-label="County metric details">
|
|
<button
|
|
id="metricInfoToggle"
|
|
class="metric-info-toggle"
|
|
type="button"
|
|
aria-expanded="true"
|
|
aria-controls="stateDetails"
|
|
>
|
|
Hide County Metrics
|
|
</button>
|
|
<div id="stateDetails" class="state-details">
|
|
<h2>Selected County</h2>
|
|
<p>Click a county to see details and auto-focus.</p>
|
|
</div>
|
|
</section>
|
|
<section id="legendInfoPanel" class="legend-info-panel is-collapsed" aria-label="Map legend">
|
|
<button
|
|
id="legendInfoToggle"
|
|
class="legend-info-toggle"
|
|
type="button"
|
|
aria-expanded="false"
|
|
aria-controls="legend"
|
|
>
|
|
Show Legend
|
|
</button>
|
|
<div id="legend" class="legend"></div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="sourcesModal" class="sources-modal" role="dialog" aria-modal="true" aria-labelledby="sourcesModalTitle" hidden>
|
|
<div class="sources-modal-backdrop" data-sources-close></div>
|
|
<section class="sources-dialog" aria-label="Sources details">
|
|
<header class="sources-dialog-header">
|
|
<h2 id="sourcesModalTitle">Sources</h2>
|
|
<button id="sourcesCloseButton" class="sources-close-button" type="button" aria-label="Close sources">X</button>
|
|
</header>
|
|
<div id="sourcesModalContent" class="sources-modal-content"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<script
|
|
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""
|
|
></script>
|
|
<script src="app.js?v=precip-months-20260601"></script>
|
|
</body>
|
|
</html>
|