2.9.8

Move info boxes to model popups

assets/js/app.js

@@ -34,6 +34,8 @@ import { getCellTagEvents, getUpcomingEvents } from './events.js';
 import { POLLEN_TYPES, COL_DESCRIPTIONS, UTCI_ENVIRONMENTS } from './config.js';
 import { useAppState } from './hooks/useAppState.js';
 import { DayTabs } from './components/DayTabs.js';
+import { WelcomeModal } from './components/WelcomeModal.js';
+import { RestoreModal } from './components/RestoreModal.js';
 import { computeWhyFeelsLike, computeGlanceSummary } from './compute.js';
 import { solarElevationDeg } from './physics.js';
 import { exportDayXls } from './export.js';
@@ -94,6 +96,8 @@ export function UTCIForecast() {
     activeProfile, setActiveProfile, activateProfile, activeCols,
     visibleCols, setVisibleCols, toggleCol,
 	showDecimals, toggleShowDecimals,
+    welcomeOpen, closeWelcome, openWelcome,
+    restoreOpen, openRestore, closeRestore,
 	showUnits, toggleShowUnits,
 	tableInterval, setTableInterval,
     activityOptions, placeOptions, workOptions,
@@ -613,10 +617,14 @@ export function UTCIForecast() {
             </div>
           </div>`}
 
+        ${welcomeOpen && html`<${WelcomeModal} onClose=${closeWelcome} />`}
+        ${restoreOpen && html`<${RestoreModal} onClose=${closeRestore} setIsPro=${setIsPro} />`}
+
         ${forecast && days.length > 0 && html`<${DayTabs}
           days=${days}
           selectedDay=${selectedDay} setSelectedDay=${setSelectedDay}
           isPro=${isPro}
+          openRestore=${openRestore}
           proPromptDay=${proPromptDay} setProPromptDay=${setProPromptDay}
           proPromptSource=${proPromptSource} setProPromptSource=${setProPromptSource}
           activeProfile=${activeProfile} activateProfile=${activateProfile} activeCols=${activeCols}
@@ -1331,6 +1339,10 @@ export function UTCIForecast() {
           that gap can exceed 10 °C even at modest air temperatures. The environment modifier in the
           SunSoak dropdown adjusts the solar load for your surroundings — switch it to match where you are
           for the most accurate reading.
+          ${' '}<a onClick=${openWelcome}
+             style=${{ color: '#9a7d5a', borderBottom: '1px solid rgba(154,125,90,0.4)', paddingBottom: '1px', textDecoration: 'none', cursor: 'pointer' }}>
+            How it works →
+          </a>
           ${isPro && html`
             <div style=${{ marginTop: '10px', paddingTop: '10px', borderTop: '1px solid #d4c0a0' }}>
               SunScope Extra is active.