73b112625b
Put Alerts in the main navigation (after Climate) across the interactive pages and the SEO/climate pages, so it's a discoverable entry point rather than only the header bell. The bell stays; this is an additional way in. The signed-out /alerts gate now leads with a clear "What are weather alerts?" explainer — what they do, how the percentile threshold works, and an example — above the sign-in / create-account button, so visitors understand the feature before signing in. The extra nav item pushed the inline header past ~800px into a horizontal scrollbar; trim the tab padding in the 641–1000px band so the row fits again (phones already collapse into the hamburger).
59 lines
2.8 KiB
HTML
59 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Thermograph — weather alerts</title>
|
|
<meta name="description" content="Subscribe to a city and get notified when its weather is unusually extreme — above the percentile you choose." />
|
|
<meta name="theme-color" content="#f0803c" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="Thermograph" />
|
|
<meta property="og:title" content="Thermograph — weather alerts" />
|
|
<meta property="og:description" content="Subscribe to a city and get notified when its weather is unusually extreme — above the percentile you choose." />
|
|
<meta property="og:url" content="__ORIGIN__/alerts" />
|
|
<meta property="og:image" content="__ORIGIN__/logo.png" />
|
|
<meta property="og:image:width" content="512" />
|
|
<meta property="og:image:height" content="512" />
|
|
<meta property="og:image:alt" content="Thermograph logo" />
|
|
<meta name="twitter:card" content="summary" />
|
|
<link rel="canonical" href="__ORIGIN__/alerts" />
|
|
<link rel="icon" href="logo.svg" type="image/svg+xml" />
|
|
<link rel="apple-touch-icon" href="logo.png" />
|
|
<link rel="manifest" href="manifest.webmanifest" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="brand">
|
|
<span class="logo"><svg viewBox="116 116 280 280" width="28" height="28" aria-hidden="true"><rect x="116" y="116" width="134" height="134" rx="20" fill="currentColor"/><rect x="262" y="262" width="134" height="134" rx="20" fill="currentColor"/></svg></span>
|
|
<div>
|
|
<h1>Thermograph · Alerts</h1>
|
|
<p class="tag">Get notified when a city's weather passes the percentile you set</p>
|
|
</div>
|
|
<details class="nav-menu">
|
|
<summary class="nav-toggle" aria-label="Menu"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></summary>
|
|
<div class="nav-panel">
|
|
<nav class="view-nav" aria-label="Views">
|
|
<a href="./" data-view="map">Weekly</a>
|
|
<a href="calendar" data-view="calendar">Calendar</a>
|
|
<a href="day" data-view="day">Day Detail</a>
|
|
<a href="compare" data-view="compare">Compare</a>
|
|
<a href="climate">Climate</a>
|
|
<a href="alerts" class="active">Alerts</a>
|
|
</nav>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="alerts-body" class="alerts-body">
|
|
<p class="alerts-loading">Loading…</p>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script type="module" src="subscriptions.js"></script>
|
|
</body>
|
|
</html>
|