2.9.8

Move info boxes to model popups
2026-06-11 18:12:04 +01:00
parent b41c4bd75c
commit 9a9684ba99
12 changed files with 615 additions and 306 deletions
@@ -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 <strong>Solar model</strong> (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 <strong>Places</strong>, <strong>Activities</strong> or <strong>Work</strong>
+      to instantly load the columns that matter for your situation — like Beach, Cycling or
+      Farming.`,
+  },
+  {
+    icon: '⚙️',
+    title: 'Make it yours',
+    body: html`Hit <strong>Edit columns</strong> 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`
+    <div class="welcome-overlay" onClick=${onClose}>
+      <div class="welcome-card" role="dialog" aria-modal="true" aria-labelledby="welcome-title"
+        onClick=${(e) => e.stopPropagation()}>
+        <button class="welcome-close" aria-label="Close" onClick=${onClose}>×</button>
+        <div class="welcome-head">
+          <div class="welcome-kicker">Welcome to SunScope</div>
+          <h2 class="welcome-title" id="welcome-title">How to read the sky in 3 steps</h2>
+        </div>
+        <p class="welcome-intro">
+          This isn't your usual weather forecast. SunScope shows how the weather actually${' '}
+          <em>feels</em> — so for the best results, pick the <strong>environment</strong> that
+          matches where you'll be.
+        </p>
+        <ol class="welcome-steps">
+          ${STEPS.map((s, i) => html`
+            <li class="welcome-step" key=${i}>
+              <span class="welcome-step-num">${i + 1}</span>
+              <span class="welcome-step-icon" aria-hidden="true">${s.icon}</span>
+              <span class="welcome-step-text">
+                <span class="welcome-step-title">${s.title}</span>
+                <span class="welcome-step-body">${s.body}</span>
+              </span>
+            </li>`)}
+        </ol>
+        <p class="welcome-remember">💾 Don't worry — SunScope remembers your choices for next time.</p>
+        <button class="welcome-cta" onClick=${onClose}>Got it</button>
+      </div>
+    </div>`;
+}