Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions

Add an Alerts page to the nav with a "what are alerts" explainer (#153)

Browse source 
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).
This commit is contained in:
Emi Griffith 2026-07-16 16:41:24 -07:00 committed by GitHub
parent f4acdafe01
commit 73b112625b
8 changed files with 36 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/calendar.html
View file

@ -42,6 +42,7 @@
<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">Alerts</a>
</nav>
</div>
</details>

1
static/compare.html
View file

@ -43,6 +43,7 @@
<a href="day" data-view="day">Day Detail</a>
<a href="compare" data-view="compare" class="active">Compare</a>
<a href="climate">Climate</a>
<a href="alerts">Alerts</a>
</nav>
</div>
</details>

1
static/day.html
View file

@ -43,6 +43,7 @@
<a href="day" data-view="day" class="active">Day Detail</a>
<a href="compare" data-view="compare">Compare</a>
<a href="climate">Climate</a>
<a href="alerts">Alerts</a>
</nav>
</div>
</details>

1
static/index.html
View file

@ -46,6 +46,7 @@
<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">Alerts</a>
</nav>
</div>
</details>

1
static/legend.html
View file

@ -42,6 +42,7 @@
<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">Alerts</a>
</nav>
</div>
</details>

17
static/style.css
View file

@ -376,6 +376,16 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.alerts-gate h2 { margin: 0; }
.alerts-gate { max-width: 520px; }
.alerts-lede { margin: 0; }
/* The "what are alerts" steps read as a left-aligned list inside the centered card. */
.alerts-explain {
text-align: left; align-self: stretch; margin: 2px 0; padding-left: 24px;
display: flex; flex-direction: column; gap: 10px; line-height: 1.5;
}
.alerts-explain li { padding-left: 4px; }
.alerts-eg { margin: 0; font-style: italic; }
.alerts-gate-note { margin: 0; font-size: 13px; }
.alerts-gate .acct-submit { max-width: 280px; }
.alerts-toolbar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
@ -491,6 +501,13 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
.view-nav a:hover { color: var(--text); }
.view-nav a.active { background: var(--accent); color: #fff; }
/* Small laptops / large tablets: the inline header (six tabs + °F/°C + account) is
tight, so trim the tab padding to keep the row from spilling past ~800px into a
horizontal scrollbar. Phones (≤640px) collapse into the hamburger instead. */
@media (min-width: 641px) and (max-width: 1000px) {
.view-nav a { padding: 8px 11px; }
}
/* Hamburger wrapper. On desktop the menu and its panel are transparent
(display:contents), so the nav pills plus the injected °F/°C toggle, bell and
account render inline in the header row and the hamburger summary is hidden;

1
static/subscriptions.html
View file

@ -40,6 +40,7 @@
<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>

16
static/subscriptions.js
View file

@ -55,10 +55,20 @@ async function load() {
function renderGate() {
body.innerHTML = `
<div class="alerts-gate panel">
<h2>Sign in to manage alerts</h2>
<p class="muted">Create an account to subscribe to cities and get notified when their
weather is unusually extreme — above the percentile you choose.</p>
<h2>What are weather alerts?</h2>
<p class="alerts-lede">Thermograph can watch any city and tell you when its weather turns
<b>unusually extreme for that place</b> — a heat spell, a cold snap, heavy rain — graded
against ~45 years of local climate history.</p>
<ol class="alerts-explain">
<li><b>Pick a city</b> and the metrics to watch — high, low, feels-like, rain, wind…</li>
<li><b>Set a threshold.</b> Alert when a day passes, say, the <b>97th percentile</b> for
that location. Higher = rarer, so fewer but more significant alerts.</li>
<li><b>Get notified</b> in-app (and via OS push on this device) when a recorded day — or
the upcoming forecast — crosses your threshold. At most one notification per week per alert.</li>
</ol>
<p class="alerts-eg muted">For example: “Tell me when Tokyo's high passes the 97th percentile.”</p>
<button type="button" class="acct-submit" id="gate-signin">Sign in / Create account</button>
<p class="alerts-gate-note muted">You'll need an account to create and manage alerts.</p>
</div>`;
body.querySelector("#gate-signin").onclick = () => openAuth("login");
}