fraxle
ad889d938b
New profile icons New profile higher position Updated Column toggle row Fixed text encoding
622 lines
28 KiB
JavaScript
622 lines
28 KiB
JavaScript
// ------------------------------------------------------------------------
|
||
// components/DayTabs.js - Day-tab strip, pro-prompt card, confidence
|
||
// band bar, and filter-profile row for the UTCIForecast app.
|
||
//
|
||
// Extracted from app.js to keep the main component under the AI edit
|
||
// safe-zone. All state lives in useAppState - this component is purely
|
||
// presentational and receives everything it needs as props.
|
||
//
|
||
// Props:
|
||
// days - array of day objects from buildHourlyRows
|
||
// selectedDay - index of the active day tab
|
||
// setSelectedDay - setter for selectedDay
|
||
// isPro - boolean Pro status
|
||
// FREE_DAYS - number of free days
|
||
// proPromptDay - index of locked day that was clicked
|
||
// setProPromptDay - setter for proPromptDay
|
||
// proPromptSource - string key for upsell copy
|
||
// setProPromptSource - setter for proPromptSource
|
||
// activeProfile - current filter profile key
|
||
// activateProfile - function to switch profile
|
||
// activeCols - effective column set for current profile
|
||
// visibleCols - object of col-key -> boolean visibility
|
||
// activityOptions - dropdown options for Activities selector
|
||
// placeOptions - dropdown options for Places selector
|
||
// workOptions - dropdown options for Work selector
|
||
// activityValue - current activity dropdown value
|
||
// activityLabel - current activity dropdown label
|
||
// placeValue - current place dropdown value
|
||
// placeLabel - current place dropdown label
|
||
// workValue - current work dropdown value
|
||
// workLabel - current work dropdown label
|
||
// outdoorsVariant - current outdoors sub-variant key
|
||
// setOutdoorsVariantAndSave - setter that also persists to localStorage
|
||
// setActiveProfile - raw setter for activeProfile
|
||
// setVisibleCols - raw setter for visibleCols
|
||
// setIndoorMode - setter for indoorMode
|
||
// setIndoorManaged - setter for indoorManaged
|
||
// dayTabsRef - ref for the scrollable tab strip element
|
||
// canScrollLeft - boolean for left-fade chevron
|
||
// canScrollRight - boolean for right-fade chevron
|
||
// scrollDayTabs - function(dir) to scroll strip left/right
|
||
// ------------------------------------------------------------------------
|
||
|
||
import { h, Fragment } from '../../vendor/preact.js';
|
||
import { useRef, useEffect } from '../../vendor/preact-hooks.js';
|
||
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';
|
||
|
||
const html = htm.bind(h);
|
||
|
||
// Converts a base RGB colour into the same 135° gradient used by the thermal
|
||
// bands legend: 50% white blend to pastelise, then a subtle light→dark sweep.
|
||
function weatherGradient(r, g, b) {
|
||
const blend = (c) => Math.round(c + (255 - c) * 0.82);
|
||
const [mr, mg, mb] = [blend(r), blend(g), blend(b)];
|
||
const lighten = (c) => Math.min(255, Math.round(c + (255 - c) * 0.30));
|
||
const darken = (c) => Math.round(c * 0.96);
|
||
const light = `rgb(${lighten(mr)},${lighten(mg)},${lighten(mb)})`;
|
||
const mid = `rgb(${mr},${mg},${mb})`;
|
||
const dark = `rgb(${darken(mr)},${darken(mg)},${darken(mb)})`;
|
||
return `linear-gradient(135deg, ${light} 0%, ${mid} 60%, ${dark} 100%)`;
|
||
}
|
||
|
||
export function DayTabs({
|
||
days,
|
||
selectedDay, setSelectedDay,
|
||
isPro,
|
||
proPromptDay, setProPromptDay,
|
||
proPromptSource, setProPromptSource,
|
||
activeProfile, activateProfile, activeCols,
|
||
visibleCols,
|
||
activityOptions, placeOptions, workOptions,
|
||
activityValue, activityLabel,
|
||
placeValue, placeLabel,
|
||
workValue, workLabel,
|
||
outdoorsVariant, setOutdoorsVariantAndSave,
|
||
setActiveProfile, setVisibleCols,
|
||
setIndoorMode, setIndoorManaged, setBuildingType,
|
||
dayTabsRef, canScrollLeft, canScrollRight, scrollDayTabs,
|
||
}) {
|
||
const profileScrollRef = useRef(null);
|
||
const profileWrapRef = useRef(null);
|
||
|
||
useEffect(() => {
|
||
const el = profileScrollRef.current;
|
||
const wrap = profileWrapRef.current;
|
||
if (!el) return;
|
||
let isDown = false, startX = 0, startScroll = 0, hasDragged = false;
|
||
|
||
const updateFades = () => {
|
||
if (!wrap) return;
|
||
wrap.classList.toggle('fade-left', el.scrollLeft > 1);
|
||
wrap.classList.toggle('fade-right', el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
||
};
|
||
|
||
const onMouseDown = (e) => {
|
||
if (!el.contains(e.target) || e.button !== 0) return;
|
||
isDown = true; hasDragged = false;
|
||
startX = e.clientX; startScroll = el.scrollLeft;
|
||
document.body.style.userSelect = 'none';
|
||
document.body.style.webkitUserSelect = 'none';
|
||
};
|
||
const onMouseMove = (e) => {
|
||
if (!isDown) return;
|
||
const dx = e.clientX - startX;
|
||
if (Math.abs(dx) > 5) {
|
||
hasDragged = true;
|
||
el.style.cursor = 'grabbing';
|
||
el.scrollLeft = startScroll - dx;
|
||
}
|
||
};
|
||
const onMouseUp = () => {
|
||
if (!isDown) return;
|
||
isDown = false;
|
||
el.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
document.body.style.webkitUserSelect = '';
|
||
};
|
||
const onClickCapture = (e) => {
|
||
if (hasDragged) { e.stopPropagation(); e.preventDefault(); hasDragged = false; }
|
||
};
|
||
|
||
el.addEventListener('scroll', updateFades);
|
||
updateFades(); // set initial fade state
|
||
|
||
document.addEventListener('mousedown', onMouseDown);
|
||
document.addEventListener('mousemove', onMouseMove);
|
||
document.addEventListener('mouseup', onMouseUp);
|
||
el.addEventListener('click', onClickCapture, true);
|
||
return () => {
|
||
el.removeEventListener('scroll', updateFades);
|
||
document.removeEventListener('mousedown', onMouseDown);
|
||
document.removeEventListener('mousemove', onMouseMove);
|
||
document.removeEventListener('mouseup', onMouseUp);
|
||
el.removeEventListener('click', onClickCapture, true);
|
||
};
|
||
}, []);
|
||
|
||
return html`
|
||
<${Fragment}>
|
||
|
||
<div class="filter-profiles">
|
||
<div class="profile-scroll-wrap" ref=${profileWrapRef}>
|
||
<div class="profile-scroll" ref=${profileScrollRef}>
|
||
${profileButtonOrder.slice(0, 3).map((key) => {
|
||
const profile = FILTER_PROFILES[key];
|
||
const locked = profile.proOnly && !isPro;
|
||
return html`
|
||
<button
|
||
key=${key}
|
||
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
|
||
style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||
title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
|
||
onClick=${() => {
|
||
if (locked) {
|
||
setProPromptSource(`profile:${key}`);
|
||
setProPromptDay(0);
|
||
return;
|
||
}
|
||
activateProfile(key);
|
||
}}
|
||
>
|
||
<span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
|
||
<span class="profile-btn-label">${profile.label}${locked ? ' 🔒' : ''}</span>
|
||
</button>`;
|
||
})}
|
||
<span class="profile-divider" aria-hidden="true"></span>
|
||
<${CustomSelect}
|
||
key="places"
|
||
value=${placeValue}
|
||
isOn=${activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)}
|
||
noHide=${true}
|
||
hideLabel="Places"
|
||
buttonLabel=${placeValue === 'off' ? 'Places' : `${placeLabel}`}
|
||
grpClass="profile-card"
|
||
sceneStyle=${{ background: placeValue !== 'off' && OUTDOORS_VARIANTS[placeValue]?.scene ? OUTDOORS_VARIANTS[placeValue].scene : "url('assets/images/profiles/places.png') center / cover no-repeat, linear-gradient(160deg,#98ccc0,#c4e4dc)" }}
|
||
sceneContent=${null}
|
||
options=${placeOptions}
|
||
onChange=${(v) => {
|
||
if (v === 'off') { activateProfile('basic'); return; }
|
||
if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
|
||
setProPromptSource(`variant:${v}`);
|
||
setProPromptDay(0);
|
||
return;
|
||
}
|
||
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
|
||
setActiveProfile('outdoors');
|
||
setOutdoorsVariantAndSave(v);
|
||
setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
|
||
setIndoorMode('off');
|
||
setIndoorManaged(false);
|
||
}}
|
||
/>
|
||
<${CustomSelect}
|
||
key="activities"
|
||
value=${activityValue}
|
||
isOn=${activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant)}
|
||
noHide=${true}
|
||
hideLabel="Activities"
|
||
buttonLabel=${activityValue === 'off' ? 'Activities' : `${activityLabel}`}
|
||
grpClass="profile-card"
|
||
sceneStyle=${{ background: activityValue !== 'off' && OUTDOORS_VARIANTS[activityValue]?.scene ? OUTDOORS_VARIANTS[activityValue].scene : "url('assets/images/profiles/activities.png') center / cover no-repeat, linear-gradient(160deg,#e0c0a0,#f0d8c0)" }}
|
||
sceneContent=${null}
|
||
options=${activityOptions}
|
||
onChange=${(v) => {
|
||
if (v === 'off') { activateProfile('basic'); return; }
|
||
if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
|
||
setProPromptSource(`variant:${v}`);
|
||
setProPromptDay(0);
|
||
return;
|
||
}
|
||
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
|
||
setActiveProfile('outdoors');
|
||
setOutdoorsVariantAndSave(v);
|
||
setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
|
||
setIndoorMode('off');
|
||
setIndoorManaged(false);
|
||
}}
|
||
/>
|
||
<${CustomSelect}
|
||
key="work"
|
||
value=${workValue}
|
||
isOn=${activeProfile === 'farming' || (activeProfile === 'outdoors' && workVariantKeys.includes(outdoorsVariant))}
|
||
noHide=${true}
|
||
hideLabel="Work"
|
||
buttonLabel=${workValue === 'off' ? 'Work' : `${workLabel}`}
|
||
grpClass="profile-card"
|
||
sceneStyle=${{ background: workValue === 'farming' ? FILTER_PROFILES.farming.scene : workValue !== 'off' && OUTDOORS_VARIANTS[workValue]?.scene ? OUTDOORS_VARIANTS[workValue].scene : "url('assets/images/profiles/work.png') center / cover no-repeat, linear-gradient(160deg,#b0b0d4,#d0d0e8)" }}
|
||
sceneContent=${null}
|
||
options=${workOptions}
|
||
onChange=${(v) => {
|
||
if (v === 'off') { activateProfile('basic'); return; }
|
||
if (v === 'farming') { activateProfile('farming'); return; }
|
||
if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
|
||
setProPromptSource(`variant:${v}`);
|
||
setProPromptDay(0);
|
||
return;
|
||
}
|
||
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
|
||
setActiveProfile('outdoors');
|
||
setOutdoorsVariantAndSave(v);
|
||
setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
|
||
if (v === 'office') {
|
||
setBuildingType('office');
|
||
setIndoorMode('on');
|
||
setIndoorManaged(false);
|
||
} else {
|
||
setIndoorMode('off');
|
||
setIndoorManaged(false);
|
||
}
|
||
}}
|
||
/>
|
||
<span class="profile-divider" aria-hidden="true"></span>
|
||
${profileButtonOrder.slice(3).map((key) => {
|
||
const profile = FILTER_PROFILES[key];
|
||
const locked = profile.proOnly && !isPro;
|
||
return html`
|
||
<button
|
||
key=${key}
|
||
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
|
||
style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||
title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
|
||
onClick=${() => {
|
||
if (locked) {
|
||
setProPromptSource(`profile:${key}`);
|
||
setProPromptDay(0);
|
||
return;
|
||
}
|
||
activateProfile(key);
|
||
}}
|
||
>
|
||
<span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
|
||
<span class="profile-btn-label">${profile.label}${locked ? ' 🔒' : ''}</span>
|
||
</button>`;
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class=${`utci-day-tabs-wrap${canScrollLeft ? ' fade-left' : ''}${canScrollRight ? ' fade-right' : ''}`}>
|
||
<button
|
||
class=${`utci-day-scroll left${canScrollLeft ? '' : ' hidden'}`}
|
||
onClick=${() => scrollDayTabs(-1)}
|
||
aria-label="Scroll days left"
|
||
type="button">‹</button>
|
||
<button
|
||
class=${`utci-day-scroll right${canScrollRight ? '' : ' hidden'}`}
|
||
onClick=${() => scrollDayTabs(1)}
|
||
aria-label="Scroll days right"
|
||
type="button">›</button>
|
||
<div class="utci-day-tabs" ref=${dayTabsRef}>
|
||
${days.map((d, i) => {
|
||
const band = confidenceBand(i);
|
||
const locked = !isPro && i >= FREE_DAYS;
|
||
const isActive = i === selectedDay;
|
||
const dDate = new Date(d.key + 'T00:00Z');
|
||
const dayName = i === 0 ? 'Today'
|
||
: i === 1 ? 'Tomorrow'
|
||
: dDate.toLocaleDateString('en-GB', { weekday: 'short', timeZone: 'UTC' });
|
||
const utcipVals = d.rows.map(r => r.utciAdj).filter(v => isFinite(v));
|
||
const dayHi = utcipVals.length ? Math.round(Math.max(...utcipVals)) : null;
|
||
const dayLo = utcipVals.length ? Math.round(Math.min(...utcipVals)) : null;
|
||
|
||
// Day-tab weather icon - use daytime rows where available
|
||
const dayRows = d.rows.filter(r => r.elev > 0);
|
||
const repRows = dayRows.length > 0 ? dayRows : d.rows;
|
||
const dayPrecip = repRows.reduce((s, r) => s + (r.precip || 0), 0);
|
||
const daySnow = repRows.reduce((s, r) => s + (r.snow || 0), 0);
|
||
const catCounts = {};
|
||
repRows.forEach(r => { if (r.cloudCat) catCounts[r.cloudCat] = (catCounts[r.cloudCat] || 0) + 1; });
|
||
const modalCloudCat = Object.keys(catCounts).sort((a, b) => catCounts[b] - catCounts[a])[0] || 'clear';
|
||
const midRow = repRows[Math.floor(repRows.length / 2)];
|
||
const repElev = midRow ? midRow.elev : 45;
|
||
const repDt = midRow ? midRow.dt : dDate;
|
||
const showPrecip = dayPrecip >= 0.3 || daySnow >= 0.1;
|
||
|
||
// Base RGB for each weather condition — pastelised by weatherGradient()
|
||
const [wR, wG, wB] = (daySnow >= 0.1) ? [100, 160, 230]
|
||
: (dayHi > 38) ? [210, 60, 30]
|
||
: showPrecip ? [ 50, 120, 200]
|
||
: (dayHi > 32) ? [220, 110, 30]
|
||
: (dayHi > 26) ? [220, 180, 30]
|
||
: modalCloudCat === 'overcast' ? [100, 110, 130]
|
||
: (dayHi !== null && dayHi < 9) ? [ 60, 110, 180]
|
||
: modalCloudCat === 'scattered' ? [160, 150, 130]
|
||
: modalCloudCat === 'wispy' ? [200, 180, 130]
|
||
: [220, 190, 50];
|
||
const wBg = weatherGradient(wR, wG, wB);
|
||
const wText = '#2a1d10';
|
||
|
||
return html`
|
||
<button
|
||
key=${d.key}
|
||
class=${`utci-day-tab ${isActive ? 'active' : ''}${locked ? ' locked' : ''}`}
|
||
onClick=${() => {
|
||
if (locked) {
|
||
setProPromptSource('day');
|
||
setProPromptDay(i);
|
||
} else {
|
||
setSelectedDay(i);
|
||
setProPromptDay(null);
|
||
}
|
||
}}
|
||
title=${locked
|
||
? `${band.label} · SunScope Extra unlocks day ${i + 1}`
|
||
: `${band.label} · day ${i + 1} of 14`}
|
||
style=${{
|
||
background: wBg,
|
||
color: wText,
|
||
border: '1px solid #c9b08a',
|
||
opacity: locked ? 0.5 : 1,
|
||
cursor: locked ? 'not-allowed' : 'pointer',
|
||
position: 'relative',
|
||
filter: isActive ? 'saturate(1.1) brightness(1.04)' : 'none',
|
||
}}
|
||
>
|
||
<span style=${{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: isActive ? '5px' : '4px',
|
||
background: band.bg,
|
||
borderTop: '1px solid #c9b08a',
|
||
borderRadius: '0 0 2px 2px',
|
||
transition: 'height 0.1s',
|
||
}} aria-hidden="true"></span>
|
||
${locked && html`
|
||
<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.75 }}>🔒</span>`}
|
||
${dayName}
|
||
<span class="utci-day-date" style=${{ color: '#5a3f24' }}>
|
||
${dDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' })}
|
||
</span>
|
||
<span style=${{ display: 'block', margin: '3px auto 0', lineHeight: 1 }}>
|
||
${showPrecip
|
||
? html`<${PrecipIcon} precip=${dayPrecip} snow=${daySnow} size=${22} />`
|
||
: html`<${CloudIcon} category=${modalCloudCat} elev=${repElev} dt=${repDt} size=${22} />`}
|
||
</span>
|
||
${dayHi !== null && html`
|
||
<span style=${{
|
||
display: 'block',
|
||
fontFamily: 'Fraunces, serif',
|
||
fontStyle: 'italic',
|
||
fontSize: '11px',
|
||
marginTop: '2px',
|
||
letterSpacing: 0,
|
||
textTransform: 'none',
|
||
}}>
|
||
<span style=${{ color: '#c0622a', fontWeight: 600 }}>${dayHi}°</span>
|
||
<span style=${{ opacity: 0.5 }}> / </span>
|
||
<span style=${{ color: '#3a6080' }}>${dayLo}°</span>
|
||
</span>`}
|
||
</button>`;
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
${proPromptDay !== null && days[proPromptDay] && (() => {
|
||
const promptDate = new Date(days[proPromptDay].key + 'T00:00Z');
|
||
const dayName = promptDate.toLocaleDateString('en-GB', { weekday: 'long', timeZone: 'UTC' });
|
||
const extraPromptCopy = {
|
||
// Profile buttons
|
||
'profile:alltemps': {
|
||
title: 'Temps is part of SunScope Extra',
|
||
detail: 'Extra unlocks the temperature comparison view — air, soil, concrete, vehicle interior, and indoor estimates side by side in one place.',
|
||
},
|
||
'profile:showall': {
|
||
title: 'Show All is part of SunScope Extra',
|
||
detail: 'Extra unlocks the full column set — every data point SunScope tracks, visible at once for deep-dive analysis.',
|
||
},
|
||
'profile:custom': {
|
||
title: 'Custom columns are part of SunScope Extra',
|
||
detail: 'Extra lets you hand-pick exactly which columns appear. Mix and match air, dew, soil, UV, UTCI and more to build your perfect view.',
|
||
},
|
||
// Places
|
||
'variant:construction': {
|
||
title: 'Construction is part of SunScope Extra',
|
||
detail: 'Extra adds the Construction profile with felt temperature, wind, rain probability, visibility, and air quality — the key factors for safe site working.',
|
||
},
|
||
// Activities
|
||
'variant:hiking': {
|
||
title: 'Hiking is part of SunScope Extra',
|
||
detail: 'Extra adds the Hiking profile with felt temperature, UV index, burn time, wind direction, and visibility — essential for longer days on exposed terrain.',
|
||
},
|
||
'variant:photography': {
|
||
title: 'Photography is part of SunScope Extra',
|
||
detail: 'Extra adds the Photography profile with direct and diffuse radiation, sun elevation, cloud cover, and visibility — the conditions that make or break a shoot.',
|
||
},
|
||
'variant:sailing': {
|
||
title: 'Sailing is part of SunScope Extra',
|
||
detail: 'Extra adds the Sailing profile with wind speed and direction, dew point, UV, burn time, sun elevation, and visibility for on-water planning.',
|
||
},
|
||
'variant:wintersports': {
|
||
title: 'Winter Sports is part of SunScope Extra',
|
||
detail: 'Extra adds the Winter Sports profile with UV-A and UV-B, burn time, sun elevation, wind direction, and visibility for snow and slope conditions.',
|
||
},
|
||
'variant:naturist': {
|
||
title: 'Naturist is part of SunScope Extra',
|
||
detail: 'Extra adds the Naturist profile with full skin-exposure detail — UV, burn time, felt temperature, dew point, humidity, and air quality.',
|
||
},
|
||
// Work
|
||
'variant:market': {
|
||
title: 'Market Trading is part of SunScope Extra',
|
||
detail: 'Extra adds the Market Trading profile with felt temperature, wind direction, rain probability, and visibility — the key factors for planning stall days.',
|
||
},
|
||
'variant:windowcleaning': {
|
||
title: 'Window Cleaning is part of SunScope Extra',
|
||
detail: 'Extra adds the Window Cleaning profile focused on wind speed and direction, rain, and felt temperature — the conditions that determine whether work is safe and worthwhile.',
|
||
},
|
||
'variant:office': {
|
||
title: 'Office is part of SunScope Extra',
|
||
detail: 'Extra adds the Office profile with solar gain, managed indoor temperature, humidity, air quality, and rain probability — useful for commute planning and building comfort.',
|
||
},
|
||
};
|
||
const promptCopy = extraPromptCopy[proPromptSource] || {
|
||
title: `${dayName}'s forecast is part of SunScope Extra`,
|
||
detail: 'Extra unlocks the full 14-day forecast, customisable columns, specialist profiles, and an ad-free view.',
|
||
};
|
||
return html`
|
||
<div style=${{
|
||
margin: '12px 0',
|
||
padding: '18px 22px',
|
||
background: '#fdf8ee',
|
||
border: '1.5px solid #c9b08a',
|
||
borderLeft: '4px solid #c8922a',
|
||
borderRadius: '0 4px 4px 0',
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
gap: '14px',
|
||
}}>
|
||
<div style=${{ flex: '1 1 320px', minWidth: '260px' }}>
|
||
<div style=${{
|
||
fontFamily: 'Fraunces, serif',
|
||
fontStyle: 'italic',
|
||
fontSize: '19px',
|
||
fontWeight: 700,
|
||
color: '#1e1208',
|
||
marginBottom: '6px',
|
||
lineHeight: 1.25,
|
||
}}>
|
||
<span style=${{ fontStyle: 'normal' }}>🔒</span> ${promptCopy.title}
|
||
</div>
|
||
<div style=${{
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontSize: '13.5px',
|
||
color: '#4a3420',
|
||
lineHeight: 1.65,
|
||
}}>
|
||
${promptCopy.detail}
|
||
</div>
|
||
<div style=${{
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontWeight: 700,
|
||
fontSize: '11px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.07em',
|
||
color: '#c8922a',
|
||
marginTop: '10px',
|
||
}}>
|
||
£2 / month · cancel any time
|
||
</div>
|
||
</div>
|
||
<div style=${{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '8px',
|
||
alignItems: 'flex-end',
|
||
}}>
|
||
<a
|
||
href="https://buy.stripe.com/9B63cw7vl8k15Ei9DQd7q00"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style=${{
|
||
display: 'inline-block',
|
||
padding: '10px 18px',
|
||
background: '#c8922a',
|
||
color: '#fff',
|
||
textDecoration: 'none',
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontWeight: 700,
|
||
fontSize: '11px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.07em',
|
||
borderRadius: '3px',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
Subscribe — £2/month
|
||
</a>
|
||
<a
|
||
href="/restore.php"
|
||
style=${{
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontWeight: 700,
|
||
fontSize: '10px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.07em',
|
||
color: '#c8922a',
|
||
textDecoration: 'none',
|
||
borderBottom: '1px solid rgba(200,146,42,0.4)',
|
||
paddingBottom: '1px',
|
||
}}
|
||
>
|
||
Already subscribed? Restore access →
|
||
</a>
|
||
<a
|
||
href="https://billing.stripe.com/p/login/9B63cw7vl8k15Ei9DQd7q00"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style=${{
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontWeight: 700,
|
||
fontSize: '10px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.07em',
|
||
color: '#b09870',
|
||
textDecoration: 'none',
|
||
borderBottom: '1px solid rgba(176,152,112,0.4)',
|
||
paddingBottom: '1px',
|
||
}}
|
||
>
|
||
Manage or cancel subscription →
|
||
</a>
|
||
<button
|
||
onClick=${() => setProPromptDay(null)}
|
||
style=${{
|
||
background: 'transparent',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontWeight: 700,
|
||
fontSize: '10px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.07em',
|
||
color: '#b09870',
|
||
padding: '2px 4px',
|
||
}}
|
||
>
|
||
dismiss
|
||
</button>
|
||
</div>
|
||
</div>`;
|
||
})()}
|
||
|
||
${(() => {
|
||
const band = confidenceBand(selectedDay);
|
||
const isOutlook = selectedDay >= 7;
|
||
return html`
|
||
<div style=${{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '10px',
|
||
margin: '0 0 14px',
|
||
padding: '6px 10px',
|
||
background: band.tint,
|
||
borderLeft: `3px solid ${band.edge}`,
|
||
borderBottom: `1px solid ${band.edge}`,
|
||
borderRadius: '0 4px 4px 0',
|
||
fontSize: '12px',
|
||
color: '#3a2a18',
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontWeight: 600,
|
||
flexWrap: 'wrap',
|
||
}}>
|
||
<span style=${{ letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700 }}>
|
||
Day ${selectedDay + 1} of 14 · Forecast clarity: ${band.label}
|
||
</span>
|
||
${isOutlook && html`
|
||
<span style=${{ opacity: 0.7, fontStyle: 'italic' }}>
|
||
forecast skill is reduced — treat hourly detail as trend, not precision
|
||
</span>`}
|
||
</div>`;
|
||
})()}
|
||
|
||
|
||
</${Fragment}>`;
|
||
}
|