82 lines
3.3 KiB
JavaScript
82 lines
3.3 KiB
JavaScript
// ------------------------------------------------------------------------
|
||
// 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>`;
|
||
}
|