Fraxle
8f161dc8cb
Summaries added — every column in COL_DESCRIPTIONS got a short (1–2 sentences) and a link to its reference row. Full desc text kept intact for the day-tab metric labels. Popup rewired — renders the summary plus a "More about this column →" link, opening in a new tab. Link styling — .col-info-more pinned below the summary so it stays visible if the text scrolls; centred on mobile with the rest. Anchors on the reference page — 35 row ids in columns.html, one per column key. New "Rows" row — the hour/interval header had a popup but no matching row on the reference page; added. Landing highlight — tr:target gets a gold bar and tint, with scroll offset so the nav doesn't cover it.
170 lines
10 KiB
HTML
170 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>On-screen features · SunScope</title>
|
||
<meta name="description" content="The interactive parts of SunScope beyond the table — the sky scope, day-strip weather icons, weather-event alerts and popups, and the What's Coming cosmic events almanac." />
|
||
<meta name="robots" content="index, follow" />
|
||
<link rel="canonical" href="https://sunscope.net/features.html" />
|
||
|
||
<meta property="og:title" content="On-screen features · SunScope" />
|
||
<meta property="og:description" content="The sky scope, day-strip weather icons, weather-event alerts and popups, and the What's Coming cosmic events almanac." />
|
||
<meta property="og:url" content="https://sunscope.net/features.html" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:image" content="https://sunscope.net/og-image.png" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="On-screen features · SunScope" />
|
||
<meta name="twitter:description" content="The sky scope, day-strip weather icons, weather-event alerts and popups, and the What's Coming cosmic events almanac." />
|
||
<meta name="twitter:image" content="https://sunscope.net/og-image.png" />
|
||
|
||
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
|
||
<link rel="stylesheet" href="./assets/about.css?v=15b">
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Article",
|
||
"headline": "On-screen features",
|
||
"about": "Interactive features of the SunScope forecast page.",
|
||
"publisher": { "@type": "Organization", "name": "SunScope", "url": "https://sunscope.net" },
|
||
"mainEntityOfPage": "https://sunscope.net/features.html"
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<header id="site-nav">
|
||
<div class="nav-overlay" onclick="toggleNav(false)"></div>
|
||
<a href="./index.html" class="logo"><span class="logo-sun">Sun</span><svg class="logo-icon" viewBox="0 0 174 173" aria-hidden="true" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(0.986226,0,0,0.986226,-585.724252,-110.041209)"><clipPath id="ss-clip-fe"><circle cx="681.9838" cy="199.4502" r="83.2987"/></clipPath><g clip-path="url(#ss-clip-fe)"><g transform="matrix(0.948836,0,0,0.948836,19.787839,-2.49381)"><path d="M666.992,233.0768C666.3949,230.6581 666.1785,228.6317 666.1785,226.0296C666.1785,208.6786 680.2653,194.5919 697.6163,194.5919C714.9672,194.5919 729.054,208.6786 729.054,226.0296C729.054,228.4125 728.9892,230.9346 728.4859,233.1663" fill="none" stroke="#c8922a" stroke-width="7.48"/></g><g transform="matrix(0.520349,0,0,0.520349,304.766642,64.226716)"><path d="M724.9315,291.8131C777.359,291.8131 826.5862,305.6245 869.1698,329.8044" fill="none" stroke="currentColor" stroke-width="13.64"/></g><g transform="matrix(0.520349,0,0,0.520349,304.766642,64.226716)"><path d="M580.8436,329.719C623.3927,305.592 672.5657,291.8131 724.9315,291.8131" fill="none" stroke="currentColor" stroke-width="13.64"/></g></g><circle cx="681.9838" cy="199.4502" r="83.2987" fill="none" stroke="currentColor" stroke-width="9.13"/></g></svg><span class="logo-scope">Scope</span></a>
|
||
<div class="nav-links" id="nav-drawer">
|
||
<a href="./index.html">Forecast</a>
|
||
<div class="nav-dropdown">
|
||
<a href="./about.html" class="nav-dropdown-toggle active">About<span class="caret">▾</span></a>
|
||
<div class="nav-dropdown-menu">
|
||
<a href="./about.html">Overview</a>
|
||
<a href="./sunsoak.html">SunSoak & the science</a>
|
||
<a href="./profiles.html">Forecast profiles</a>
|
||
<a href="./columns.html">Column reference</a>
|
||
<a href="./temperatures.html">Derived temperatures</a>
|
||
<a href="./features.html" class="active">On-screen features</a>
|
||
<a href="./stress-bands.html">Stress bands</a>
|
||
</div>
|
||
</div>
|
||
<a href="./faq.html">FAQ</a>
|
||
<a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00" target="_blank" rel="noopener noreferrer">Account</a>
|
||
</div>
|
||
<button class="utci-burger" aria-label="Open menu" aria-expanded="false" id="burger-btn" onclick="toggleNav()">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</header>
|
||
<script>
|
||
function toggleNav(force) {
|
||
const nav = document.getElementById('site-nav');
|
||
const drawer = document.getElementById('nav-drawer');
|
||
const btn = document.getElementById('burger-btn');
|
||
const open = force !== undefined ? force : !nav.classList.contains('nav-open');
|
||
nav.classList.toggle('nav-open', open);
|
||
drawer.classList.toggle('is-open', open);
|
||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||
}
|
||
</script>
|
||
|
||
<main>
|
||
<h1>On-screen features</h1>
|
||
<p class="tagline">The interactive bits around the forecast table.</p>
|
||
|
||
<h2>The sky scope</h2>
|
||
<p>
|
||
The large circular visualisation at the top of the page shows the sky conditions. The sky colour
|
||
smoothly interpolates through a full set of elevation-keyed gradients — from deep pre-dawn navy
|
||
through golden sunrise, bright midday blue, warm sunset amber, and back to night — with a sun disc
|
||
whose glow radius and intensity scale with the shortwave radiation at that moment. It's a live
|
||
weather simulation, not just a colour wheel: cloud, rain, snow, and haze are all rendered from the
|
||
forecast, so the scope actually looks overcast, wet, or misty when the weather is. By default it
|
||
tracks the real current time and refreshes automatically alongside the forecast.
|
||
</p>
|
||
|
||
<h2>Day-cycle time-lapse</h2>
|
||
<p>
|
||
Press the <strong>Day cycle</strong> play button (▶) on the scope to run a 24-hour time-lapse.
|
||
SunScope drives the scope smoothly through the next 24 hours — roughly 15 simulated minutes per
|
||
real second, so a full day plays out in about a minute and a half — animating the sky gradients,
|
||
the sun's rise and fall, and the evolving weather as cloud rolls in, rain starts, or fog lifts. A
|
||
live clock label shows the simulated time as it plays; press again to stop and snap back to now.
|
||
</p>
|
||
|
||
<h2>The draggable timeline</h2>
|
||
<p>
|
||
Below the scope sits a 24-hour <strong>timeline bar</strong>. Its background is a gradient built
|
||
from the actual per-hour sky colours across the coming day, so the bar itself previews how the sky
|
||
will shift from dawn to dusk. <strong>Sunrise (↑)</strong> and <strong>sunset (↓)</strong> markers
|
||
sit at their real times on the bar, with clock ticks at the quarter points. Grab the thumb and
|
||
scrub to any instant to jump the scope — and the "why it feels like this" breakdown — to that
|
||
moment, with everything interpolated smoothly between the hourly rows rather than snapping.
|
||
</p>
|
||
|
||
<h2>Day strip weather and temperatures</h2>
|
||
<p>
|
||
Each day tab in the date selector shows the day's forecast at a glance: a weather icon representing
|
||
the dominant daytime conditions (sun, cloud variants, or precipitation), plus the day's high and low
|
||
SunSoak felt temperatures in warm and cool colours. The icon uses the actual daytime solar elevation
|
||
and cloud category data, so it reflects the real character of the day rather than a generic symbol.
|
||
</p>
|
||
|
||
<h2>Profile picker</h2>
|
||
<p>
|
||
The profile and settings picker lives in a popup opened from the nav bar, organised into
|
||
<strong>Common</strong>, <strong>Places</strong>, <strong>Activities</strong>, and
|
||
<strong>Work</strong> tabs. Alongside the profile buttons it holds the relevant config selectors
|
||
for whatever you've picked — Solar Model, Vehicle type and road speed, Building type, Fur colour,
|
||
Fitzpatrick skin type for burn time, and Pollen type — all in one place rather than spread across
|
||
the column bar. The day-tab date strip also adapts to the active profile, showing vehicle, indoor,
|
||
or pet-relevant highs and lows where appropriate.
|
||
</p>
|
||
|
||
<h2>Today at a Glance</h2>
|
||
<p>
|
||
A summary panel above the table pulls together the 4–5 numbers that matter most for the day and
|
||
your active profile — peak heat window, rain risk, wind, UV, and similar — so you don't have to
|
||
scan the full hourly table to get the headline picture. Content adapts to what you're actually
|
||
doing: the Farming profile adds sow and harvest advice from a seasonal crop calendar, for example.
|
||
Every profile also gets a <strong>vs seasonal average</strong> comparison, showing how the day's
|
||
high and 24-hour mean stack up against the 1991–2020 climate normal for that date and location —
|
||
an honest anomaly check on top of the raw forecast numbers.
|
||
</p>
|
||
|
||
<h2>Weather event alerts and popups</h2>
|
||
<p>
|
||
When notable conditions are forecast — a frost, strong winds, fog, or a heat event — a note appears
|
||
across the top of the page, above the navigation, with the full message and the dates it applies to.
|
||
Wind alerts classify conditions from Strong Breeze through to Violent Storm using standard Beaufort
|
||
categories. When several events are active the note cycles between them, and you can click the dots to
|
||
jump straight to one. Tapping or clicking the event icon in the hour column opens a popup with the same
|
||
detail for that particular hour.
|
||
</p>
|
||
|
||
<h2>What's Coming — cosmic events almanac</h2>
|
||
<p>
|
||
A 🔭 panel below the forecast table shows upcoming astronomical events for your location over the
|
||
next 90 days: meteor showers, lunar and solar eclipses, planetary conjunctions, and oppositions. Each
|
||
entry shows the event name, peak date, a countdown, a short description, and a visibility note where
|
||
the event is better from a particular hemisphere or location. When a cosmic event is currently active,
|
||
it also appears in the note at the top of the page alongside the weather alerts.
|
||
</p>
|
||
|
||
<p>
|
||
For how the numbers behind these features are calculated, see
|
||
<a href="./sunsoak.html">SunSoak & the science</a> and the
|
||
<a href="./columns.html">column reference</a>.
|
||
</p>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
© 2026 <a href="https://fraxle.net" target="_blank" rel="noopener noreferrer">Fraxle.NET</a> · <a href="./index.html">Forecast</a> · <a href="./about.html">About</a> · <a href="./faq.html">FAQ</a> · <a href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00" target="_blank" rel="noopener noreferrer">Account</a> · Data: <a href="https://open-meteo.com/" target="_blank" rel="noopener noreferrer">Open-Meteo</a> · UTCI: <a href="https://utci.org/" target="_blank" rel="noopener noreferrer">Bröde 2012</a>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|