SunScope Extra is active.
diff --git a/assets/js/components/DayTabs.js b/assets/js/components/DayTabs.js
index 6830316..a7cb69b 100644
--- a/assets/js/components/DayTabs.js
+++ b/assets/js/components/DayTabs.js
@@ -11,6 +11,7 @@
// selectedDay - index of the active day tab
// setSelectedDay - setter for selectedDay
// isPro - boolean Pro status
+// openRestore - opens the "Already subscribed?" restore modal
// FREE_DAYS - number of free days
// proPromptDay - index of locked day that was clicked
// setProPromptDay - setter for proPromptDay
@@ -47,6 +48,7 @@ import htm from '../../vendor/htm.js';
import { confidenceBand } from '../utils.js';
import { FREE_DAYS, FILTER_PROFILES, OUTDOORS_VARIANTS, profileButtonOrder, activityVariantKeys, placeVariantKeys, workVariantKeys } from '../config.js';
import { CloudIcon, PrecipIcon, CustomSelect } from '../components.js';
+import { SubscribeModal } from './SubscribeModal.js';
const html = htm.bind(h);
@@ -80,6 +82,7 @@ export function DayTabs({
days,
selectedDay, setSelectedDay,
isPro,
+ openRestore,
proPromptDay, setProPromptDay,
proPromptSource, setProPromptSource,
activeProfile, activateProfile, activeCols,
@@ -447,131 +450,12 @@ export function DayTabs({
detail: 'Extra unlocks the full 14-day forecast, customisable columns, specialist profiles, and an ad-free view.',
};
return html`
-
`;
+}
diff --git a/assets/js/components/WelcomeModal.js b/assets/js/components/WelcomeModal.js
new file mode 100644
index 0000000..e9886c0
--- /dev/null
+++ b/assets/js/components/WelcomeModal.js
@@ -0,0 +1,81 @@
+// ------------------------------------------------------------------------
+// components/WelcomeModal.js - First-visit onboarding popup.
+//
+// A friendly, dead-simple overlay that walks a new user through the three
+// key moves in plain language. Auto-shows once on first visit (gated by the
+// sunscope_welcome_seen flag in useAppState) and is reopenable from the
+// footer "How it works" link.
+//
+// Purely presentational - all open/close state lives in useAppState.
+//
+// Props:
+// onClose - called when the user dismisses (Got it, ×, backdrop, or Esc)
+// ------------------------------------------------------------------------
+
+import { h } from '../../vendor/preact.js';
+import { useEffect } from '../../vendor/preact-hooks.js';
+import htm from '../../vendor/htm.js';
+
+const html = htm.bind(h);
+
+const STEPS = [
+ {
+ icon: '☀️',
+ title: 'SunSoak is the number to watch',
+ body: html`Pick a Solar model (open, urban, beach…) in the SunSoak dropdown
+ to match where you are. It shows what your body actually feels in the sun — not just the
+ air temperature.`,
+ },
+ {
+ icon: '🎯',
+ title: 'Choose a profile',
+ body: html`Tap Places, Activities or Work
+ to instantly load the columns that matter for your situation — like Beach, Cycling or
+ Farming.`,
+ },
+ {
+ icon: '⚙️',
+ title: 'Make it yours',
+ body: html`Hit Edit columns to add or remove any data you like — UV and
+ sunburn time, vehicle interior, soil, air quality and more.`,
+ },
+];
+
+export function WelcomeModal({ onClose }) {
+ // Dismiss on Esc.
+ useEffect(() => {
+ const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+ document.addEventListener('keydown', onKey);
+ return () => document.removeEventListener('keydown', onKey);
+ }, [onClose]);
+
+ return html`
+
+
e.stopPropagation()}>
+
+
+
Welcome to SunScope
+
How to read the sky in 3 steps
+
+
+ This isn't your usual weather forecast. SunScope shows how the weather actually${' '}
+ feels — so for the best results, pick the environment that
+ matches where you'll be.
+
💾 Don't worry — SunScope remembers your choices for next time.
+
+
+
`;
+}
diff --git a/assets/js/components/Wordmark.js b/assets/js/components/Wordmark.js
new file mode 100644
index 0000000..edfba23
--- /dev/null
+++ b/assets/js/components/Wordmark.js
@@ -0,0 +1,34 @@
+// ------------------------------------------------------------------------
+// components/Wordmark.js - The SunScope sun-icon wordmark (Sun + icon +
+// Scope), sized for use inside modals.
+//
+// Mirrors the nav/header markup but self-contained: each instance gets a
+// unique clipPath id so multiple wordmarks can render on the page without
+// the SVG clip colliding. Size via the `fontSize` prop.
+// ------------------------------------------------------------------------
+
+import { h } from '../../vendor/preact.js';
+import { useState } from '../../vendor/preact-hooks.js';
+import htm from '../../vendor/htm.js';
+
+const html = htm.bind(h);
+
+let _wmCounter = 0; // bump per instance for a stable unique id
+
+export function Wordmark({ fontSize = '34px' }) {
+ const [clipId] = useState(() => 'ss-clip-wm-' + (++_wmCounter));
+ return html`
+