diff --git a/assets/New Text Document.txt b/assets/New Text Document.txt new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/header.css b/assets/css/header.css index 139584c..c4bb086 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -9,8 +9,8 @@ grid-template-columns: 1fr auto 1fr; /* title | dial | search */ gap: 32px; align-items: center; - padding-bottom: 14px; - margin-bottom: 14px; + padding-bottom: 6px; + margin-bottom: 6px; } .header-right { diff --git a/assets/css/table.css b/assets/css/table.css index 351071f..2a97353 100644 --- a/assets/css/table.css +++ b/assets/css/table.css @@ -11,6 +11,7 @@ /* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */ .utci-day-tabs-wrap { position: relative; + margin-top: 14px; } /* Edge fade gradients — only show when there's content to scroll to. */ @@ -126,14 +127,12 @@ .filter-profiles { display: flex; - flex-wrap: wrap; - gap: 6px; - align-items: center; + flex-direction: column; + gap: 0; margin-bottom: 0; - padding: 10px 14px; - background: #fdf8ee; - border: 1.5px solid #d4c0a0; - border-bottom: none; /* merges visually with the col-toggles bar below */ + padding: 0 14px 0; + background: transparent; + border: none; } .filter-profiles-label { @@ -143,45 +142,143 @@ text-transform: uppercase; letter-spacing: 0.08em; color: #7a5c2a; - margin-right: 4px; + margin-bottom: 6px; white-space: nowrap; + text-align: center; } +/* Single scrollable row of profile cards */ +.profile-scroll { + display: flex; + flex-wrap: nowrap; + gap: 6px; + align-items: center; + pointer-events: none; + justify-content: center; /* centre when content fits */ + justify-content: safe center; /* fall back to flex-start if it overflows */ + overflow-x: auto; + overflow-y: auto; /* forced by browser when overflow-x is non-visible */ + padding-bottom: 260px; /* extends clip boundary so dropdown panels aren't cut off */ + margin-bottom: -260px; /* cancel that extra space in the layout */ + scrollbar-width: none; + -ms-overflow-style: none; + padding-right: 4px; /* breathing room at right edge */ +} +.profile-scroll::-webkit-scrollbar { display: none; } +.profile-scroll > * { pointer-events: auto; } + +/* Fade-edge wrapper — hosts the ::before/::after gradient overlays */ +.profile-scroll-wrap { + position: relative; + width: 100%; +} + +.profile-scroll-wrap::before, +.profile-scroll-wrap::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + width: 52px; + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease; + z-index: 2; +} +.profile-scroll-wrap::before { + left: 0; + background: linear-gradient(to right, #f5edd6 10%, transparent 100%); +} +.profile-scroll-wrap::after { + right: 0; + background: linear-gradient(to left, #f5edd6 10%, transparent 100%); +} +.profile-scroll-wrap.fade-left::before { opacity: 1; } +.profile-scroll-wrap.fade-right::after { opacity: 1; } + /* Vertical rule separating general-use profiles from technical ones */ .profile-divider { display: inline-block; width: 1px; align-self: stretch; background: #c9b08a; - margin: 2px 6px; + margin: 0 2px; opacity: 0.6; + flex-shrink: 0; } .profile-btn { - padding: 5px 13px; + width: 80px; + height: 80px; + padding: 0; + position: relative; + display: inline-flex; + flex-direction: column; + align-items: stretch; + overflow: hidden; cursor: pointer; border: 1.5px solid #c9b08a; - background: #f5edd6; - color: #6b4228; - font-family: Manrope, sans-serif; - font-size: 13px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.06em; - transition: all 0.15s; + background: transparent; + border-radius: 3px; + transition: border-color 0.15s, box-shadow 0.15s; -webkit-user-select: none; user-select: none; } +.profile-btn-scene { + flex: 1; + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + line-height: 1; + opacity: 0.45; + transition: opacity 0.2s; +} + +.profile-btn:hover .profile-btn-scene { + opacity: 0.7; +} + +.profile-btn.active .profile-btn-scene { + opacity: 1; +} + +.profile-btn-label { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + font-family: Manrope, sans-serif; + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + background: rgba(30,18,8,0.52); + color: #fff; + padding: 0 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .profile-btn:hover { border-color: #c8922a; - color: #6b4f2a; - background: #fef3dc; + box-shadow: 0 1px 4px rgba(200,146,42,0.25); } .profile-btn.active { - background: #c8922a; border-color: #c8922a; +} + +.profile-btn.active .profile-btn-label { + background: rgba(200,146,42,0.82); color: #fff; } @@ -193,10 +290,20 @@ flex-wrap: wrap; gap: 6px; align-items: center; - margin-bottom: 10px; + margin-bottom: 0; padding: 10px 14px; background: #fdf8ee; border: 1.5px solid #d4c0a0; + border-bottom: none; +} + +.col-toggles-display-opts { + display: flex; + align-items: center; + gap: 12px; + margin-left: auto; + padding-left: 10px; + flex-shrink: 0; } .col-toggles-label { @@ -840,52 +947,26 @@ /* ── FILTER PROFILES + COLUMN TOGGLES — mobile fixes ───────────────── */ @media (max-width: 640px) { - /* ── Profile bar ──────────────────────────────────────────────────── - Keep flex-wrap but make every child a consistent ~31% width so - they land in tidy rows of 3. The label gets its own full row. */ + /* ── Profile bar — single scroll row on all screen sizes ─────────── + No wrapping needed; scroll strip handles layout. Dividers stay. */ .filter-profiles { - flex-wrap: wrap; - gap: 6px; - padding: 10px 10px; - align-items: stretch; + padding: 4px 10px 0; } - .filter-profiles-label { - flex: 0 0 100%; /* own row */ - margin-right: 0; - margin-bottom: 0; - } - - /* Hide vertical pipe dividers — not needed when wrapping */ - .profile-divider { - display: none; - } - - /* Plain profile buttons: fixed ~31% so 3 fit per row */ + /* Slightly smaller cards on mobile */ .profile-btn { - flex: 0 0 calc((100% - 12px) / 3); - min-width: 0; - box-sizing: border-box; - text-align: center; - padding: 7px 2px; - font-size: 11px; - letter-spacing: 0.03em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + width: 68px; + height: 68px; + flex: none; } - /* CustomSelect (Activities / Places dropdowns) — same width as buttons */ - .filter-profiles .cs-wrap { - flex: 0 0 calc((100% - 12px) / 3); - min-width: 0; + .profile-btn-scene { + font-size: 18px; } - .filter-profiles .cs-btn { - width: 100%; - padding: 7px 6px; - font-size: 11px; - letter-spacing: 0.03em; - justify-content: center; + + .profile-btn-label { + height: 20px; + font-size: 9px; } /* ── Column toggles bar ───────────────────────────────────────────── diff --git a/assets/css/ui.css b/assets/css/ui.css index f880e74..d5424ac 100644 --- a/assets/css/ui.css +++ b/assets/css/ui.css @@ -442,6 +442,123 @@ .cs-vent.grp-felt.on:hover { background: rgba(213,233,226,0.80); color: #0c7d4e; border-color: #0c7d4e; } .cs-vent.grp-surface.on:hover { background: rgba(211,224,238,0.80); color: #1e5aa0; border-color: #1e5aa0; } +/* ── CUSTOM SELECT - profile card variant ──────────────────────────────── + Square 80×80px card with scene image area + label strip at bottom. + Used for the Places / Activities / Work triggers in the profile bar. */ + +.profile-scroll .cs-wrap { + height: 80px; +} + +.cs-btn.profile-card { + width: 80px; + height: 80px; + padding: 0; + position: relative; + flex-direction: column; + align-items: stretch; + overflow: hidden; + border-radius: 3px; + gap: 0; + white-space: normal; +} + +.cs-btn.profile-card .cs-btn-scene { + flex: 1; + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + line-height: 1; + opacity: 0.45; + transition: opacity 0.2s; +} + +.cs-btn.profile-card:hover .cs-btn-scene { + opacity: 0.7; +} + +.cs-btn.profile-card.on .cs-btn-scene { + opacity: 1; +} + +.cs-btn.profile-card .cs-btn-label { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + background: rgba(30,18,8,0.52); + color: #fff; + padding: 0 14px 0 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.cs-btn.profile-card .cs-arrow { + position: absolute; + right: 6px; + bottom: 9px; + margin: 0; + color: rgba(255,255,255,0.9); +} + +.cs-btn.profile-card.on { + background: transparent; + border-color: #c8922a; +} + +.cs-btn.profile-card.on .cs-btn-label { + background: rgba(200,146,42,0.82); + color: #fff; +} + +.cs-btn.profile-card.on .cs-arrow { + color: #fff; +} + +.cs-btn.profile-card:hover { + background: transparent; + color: inherit; + border-color: #c8922a; + box-shadow: 0 1px 4px rgba(200,146,42,0.25); +} + +.cs-btn.profile-card.on:hover { + background: transparent; +} + +@media (max-width: 640px) { + .profile-scroll .cs-wrap { + height: 68px; + } + .cs-btn.profile-card { + width: 68px; + height: 68px; + } + .cs-btn.profile-card .cs-arrow { + bottom: 7px; + right: 5px; + } + .cs-btn.profile-card .cs-btn-scene { + font-size: 18px; + } + .cs-btn.profile-card .cs-btn-label { + height: 20px; + font-size: 9px; + } +} + /* Hover overlay — invisible by default, only activated in specific contexts */ .cs-btn-overlay { display: none; @@ -498,6 +615,89 @@ right: 0; } +/* Card-grid panel — wrapping flex grid of scene cards */ +.cs-panel.cs-panel--cards { + display: flex; + flex-wrap: wrap; + gap: 5px; + padding: 6px; + min-width: 0; + width: max-content; + max-width: min(320px, 90vw); + white-space: normal; + overflow: visible; +} + +/* Individual card option */ +.cs-option.cs-option-card { + display: inline-flex; + flex-direction: column; + align-items: stretch; + width: 68px; + height: 68px; + padding: 0; + overflow: hidden; + border: 1.5px solid #c9b08a; + border-radius: 3px; + background: transparent; + transition: border-color 0.15s, box-shadow 0.15s; +} +.cs-option.cs-option-card:hover { + background: transparent; + color: inherit; + border-color: #c8922a; + box-shadow: 0 1px 5px rgba(200,146,42,0.3); +} +.cs-option.cs-option-card.selected { + border-color: #c8922a; + background: transparent; + color: inherit; +} +.cs-option.cs-option-card.disabled { + opacity: 0.55; +} +.cs-option.cs-option-card.disabled:hover { + border-color: #c9b08a; + box-shadow: none; +} + +/* Scene area (gradient + emoji) */ +.cs-option-scene { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + line-height: 1; + background-size: cover; + background-position: center; +} + +/* Label strip at the bottom */ +.cs-option-label { + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-family: Manrope, sans-serif; + font-size: 9px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + background: rgba(245,237,214,0.92); + border-top: 1px solid rgba(201,176,138,0.4); + color: #6b4228; + padding: 0 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.cs-option.cs-option-card.selected .cs-option-label { + background: #c8922a; + color: #fff; + border-top-color: rgba(0,0,0,0.1); +} + /* Each option row */ .cs-option { display: block; @@ -810,15 +1010,6 @@ text-decoration: underline; } -/* display-options row - decimal and degree symbol toggles */ -.display-options { - display: flex; - justify-content: flex-end; - gap: 14px; - padding: 4px 10px 2px; - font-size: 12px; - color: var(--c-muted, #888); -} .display-opt { display: flex; align-items: center; diff --git a/assets/images/profiles/activities.png b/assets/images/profiles/activities.png new file mode 100644 index 0000000..76a1e16 Binary files /dev/null and b/assets/images/profiles/activities.png differ diff --git a/assets/images/profiles/airport.png b/assets/images/profiles/airport.png new file mode 100644 index 0000000..d35be85 Binary files /dev/null and b/assets/images/profiles/airport.png differ diff --git a/assets/images/profiles/all.png b/assets/images/profiles/all.png new file mode 100644 index 0000000..620575b Binary files /dev/null and b/assets/images/profiles/all.png differ diff --git a/assets/images/profiles/basic.png b/assets/images/profiles/basic.png new file mode 100644 index 0000000..81c5ce9 Binary files /dev/null and b/assets/images/profiles/basic.png differ diff --git a/assets/images/profiles/beach.png b/assets/images/profiles/beach.png new file mode 100644 index 0000000..955d363 Binary files /dev/null and b/assets/images/profiles/beach.png differ diff --git a/assets/images/profiles/construction.png b/assets/images/profiles/construction.png new file mode 100644 index 0000000..cb9675d Binary files /dev/null and b/assets/images/profiles/construction.png differ diff --git a/assets/images/profiles/custom.png b/assets/images/profiles/custom.png new file mode 100644 index 0000000..dac1ce6 Binary files /dev/null and b/assets/images/profiles/custom.png differ diff --git a/assets/images/profiles/cycling.png b/assets/images/profiles/cycling.png new file mode 100644 index 0000000..43d6b23 Binary files /dev/null and b/assets/images/profiles/cycling.png differ diff --git a/assets/images/profiles/events.png b/assets/images/profiles/events.png new file mode 100644 index 0000000..adb50f9 Binary files /dev/null and b/assets/images/profiles/events.png differ diff --git a/assets/images/profiles/farming.png b/assets/images/profiles/farming.png new file mode 100644 index 0000000..692d27a Binary files /dev/null and b/assets/images/profiles/farming.png differ diff --git a/assets/images/profiles/festival.png b/assets/images/profiles/festival.png new file mode 100644 index 0000000..ca4f454 Binary files /dev/null and b/assets/images/profiles/festival.png differ diff --git a/assets/images/profiles/fishing.png b/assets/images/profiles/fishing.png new file mode 100644 index 0000000..eebe254 Binary files /dev/null and b/assets/images/profiles/fishing.png differ diff --git a/assets/images/profiles/forest.png b/assets/images/profiles/forest.png new file mode 100644 index 0000000..4149276 Binary files /dev/null and b/assets/images/profiles/forest.png differ diff --git a/assets/images/profiles/hiking.png b/assets/images/profiles/hiking.png new file mode 100644 index 0000000..3a1ee6e Binary files /dev/null and b/assets/images/profiles/hiking.png differ diff --git a/assets/images/profiles/home.png b/assets/images/profiles/home.png new file mode 100644 index 0000000..1e6ae33 Binary files /dev/null and b/assets/images/profiles/home.png differ diff --git a/assets/images/profiles/market.png b/assets/images/profiles/market.png new file mode 100644 index 0000000..025100a Binary files /dev/null and b/assets/images/profiles/market.png differ diff --git a/assets/images/profiles/naturist.png b/assets/images/profiles/naturist.png new file mode 100644 index 0000000..c214413 Binary files /dev/null and b/assets/images/profiles/naturist.png differ diff --git a/assets/images/profiles/office.png b/assets/images/profiles/office.png new file mode 100644 index 0000000..1784016 Binary files /dev/null and b/assets/images/profiles/office.png differ diff --git a/assets/images/profiles/park.png b/assets/images/profiles/park.png new file mode 100644 index 0000000..305ad7e Binary files /dev/null and b/assets/images/profiles/park.png differ diff --git a/assets/images/profiles/photography.png b/assets/images/profiles/photography.png new file mode 100644 index 0000000..1042931 Binary files /dev/null and b/assets/images/profiles/photography.png differ diff --git a/assets/images/profiles/places.png b/assets/images/profiles/places.png new file mode 100644 index 0000000..56018eb Binary files /dev/null and b/assets/images/profiles/places.png differ diff --git a/assets/images/profiles/running.png b/assets/images/profiles/running.png new file mode 100644 index 0000000..3b54340 Binary files /dev/null and b/assets/images/profiles/running.png differ diff --git a/assets/images/profiles/sailing.png b/assets/images/profiles/sailing.png new file mode 100644 index 0000000..41ae976 Binary files /dev/null and b/assets/images/profiles/sailing.png differ diff --git a/assets/images/profiles/temps.png b/assets/images/profiles/temps.png new file mode 100644 index 0000000..86db519 Binary files /dev/null and b/assets/images/profiles/temps.png differ diff --git a/assets/images/profiles/urban.png b/assets/images/profiles/urban.png new file mode 100644 index 0000000..2289dc8 Binary files /dev/null and b/assets/images/profiles/urban.png differ diff --git a/assets/images/profiles/vehicle.png b/assets/images/profiles/vehicle.png new file mode 100644 index 0000000..4eedc98 Binary files /dev/null and b/assets/images/profiles/vehicle.png differ diff --git a/assets/images/profiles/walking.png b/assets/images/profiles/walking.png new file mode 100644 index 0000000..8ed7f8b Binary files /dev/null and b/assets/images/profiles/walking.png differ diff --git a/assets/images/profiles/window.png b/assets/images/profiles/window.png new file mode 100644 index 0000000..ddc3c3e Binary files /dev/null and b/assets/images/profiles/window.png differ diff --git a/assets/images/profiles/winter.png b/assets/images/profiles/winter.png new file mode 100644 index 0000000..339432d Binary files /dev/null and b/assets/images/profiles/winter.png differ diff --git a/assets/images/profiles/work.png b/assets/images/profiles/work.png new file mode 100644 index 0000000..c837660 Binary files /dev/null and b/assets/images/profiles/work.png differ diff --git a/assets/js/app.js b/assets/js/app.js index b7a899a..e3f7051 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -291,7 +291,7 @@ export function UTCIForecast() { utciEnvShort=${UTCI_ENVIRONMENTS[utciEnv]?.shortLabel ?? null} />
- Surroundings + Environment <${CustomSelect} value=${utciEnv} isOn=${true} @@ -385,11 +385,9 @@ export function UTCIForecast() { />`} - ${(isPro || activeCols['utciP'] || activeCols['burn'] || activeCols['vehicleT'] || activeCols['indoorT'] || activeCols['managedT'] || activeCols['pollen']) && html` -
+
Columns: - -${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html` + ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html` <${CustomSelect} value=${utciEnv} @@ -541,19 +539,18 @@ ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeC ${isPro && (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['direct']) && html``} ${isPro && (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['diffuse']) && html``} -
`} - -
- - + + + +
- +
diff --git a/assets/js/components.js b/assets/js/components.js index 223490d..955a81b 100644 --- a/assets/js/components.js +++ b/assets/js/components.js @@ -41,7 +41,7 @@ const MOON_TEX = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADD // groupedLeft - bool - fuse right side with a VentPill // isLastChild - bool - restore right border-radius when no sibling follows // ------------------------------------------------------------------- -export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, buttonLabel, isOn, noHide, groupedLeft, isLastChild, grpClass }) { +export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, buttonLabel, isOn, noHide, groupedLeft, isLastChild, grpClass, sceneStyle, sceneContent }) { const [open, setOpen] = useState(false); const [flipRight, setFlipRight] = useState(false); const wrapRef = useRef(null); @@ -94,6 +94,7 @@ export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, onClick=${(e) => { e.stopPropagation(); setOpen(o => !o); }} type="button" > + ${sceneStyle !== undefined && html`${sceneContent || ''}`} ${btnLabel} diff --git a/assets/js/components/DayTabs.js b/assets/js/components/DayTabs.js index d54c5fc..ad74102 100644 --- a/assets/js/components/DayTabs.js +++ b/assets/js/components/DayTabs.js @@ -42,6 +42,7 @@ // ------------------------------------------------------------------------ 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'; @@ -79,9 +80,205 @@ export function DayTabs({ 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}> +
+
+
+ ${profileButtonOrder.slice(0, 3).map((key) => { + const profile = FILTER_PROFILES[key]; + const locked = profile.proOnly && !isPro; + return html` + `; + })} + + <${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); + } + }} + /> + + ${profileButtonOrder.slice(3).map((key) => { + const profile = FILTER_PROFILES[key]; + const locked = profile.proOnly && !isPro; + return html` + `; + })} +
+
+
+
`; - })} - - <${CustomSelect} - key="places" - value=${placeValue} - isOn=${activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)} - noHide=${true} - hideLabel="🌤️ Places" - buttonLabel=${placeValue === 'off' ? '🌤️ Places' : `${placeLabel}`} - 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}`} - 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}`} - 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); - } - }} - /> - - ${profileButtonOrder.slice(3).map((key) => { - const profile = FILTER_PROFILES[key]; - const locked = profile.proOnly && !isPro; - return html` - `; - })} -
`; } diff --git a/assets/js/config.js b/assets/js/config.js index 3ab80f5..0ebd03a 100644 --- a/assets/js/config.js +++ b/assets/js/config.js @@ -28,44 +28,52 @@ export const FILTER_PROFILES = { basic: { label: 'Basic', icon: '🌡️', + scene: "url('assets/images/profiles/basic.png') center / cover no-repeat, linear-gradient(160deg,#b8d8e8,#daeef8)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true, aqi: false, pollen: false }, }, home: { label: 'Home', icon: '🏠', + scene: "url('assets/images/profiles/home.png') center / cover no-repeat, linear-gradient(160deg,#b0d890,#d0ecb8)", cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: true, managedT: true, vis: false, aqi: true, pollen: true }, }, vehicle: { label: 'Vehicle', icon: '🚗', + scene: "url('assets/images/profiles/vehicle.png') center / cover no-repeat, linear-gradient(160deg,#a8bcc8,#ccd8e4)", cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: true, concreteT: false, vehicleT: true, indoorT: false, managedT: false, vis: true, aqi: false, pollen: false }, }, farming: { label: 'Farming', icon: '🌾', + scene: "url('assets/images/profiles/farming.png') center / cover no-repeat, linear-gradient(160deg,#d8bc90,#ece0b8)", cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: true, cloud: true, sun: true, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, precipProb: true, soilT: true, soilT6: true, soilM: true, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: true, pollen: true }, }, outdoors: { label: 'Places', icon: '🌤️', + scene: "url('assets/images/profiles/places.png') center / cover no-repeat, linear-gradient(160deg,#98ccc0,#c4e4dc)", // Default cols match the first variant (urban). Switching variant updates visibleCols. cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true, uvB: false, burn: true, utciP: true, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: false, concreteT: true, vehicleT: false, indoorT: false, managedT: false, vis: true, aqi: true, pollen: false }, }, alltemps: { label: 'Temps', icon: '🌡️', + scene: "url('assets/images/profiles/temps.png') center / cover no-repeat, linear-gradient(160deg,#d8b0b0,#ecd0c8)", proOnly: true, cols: { hour: true, air: true, rh: false, dew: false, wind: false, dir: false, cloud: false, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: false, precipProb: false, soilT: true, soilT6: false, soilM: false, concreteT: true, vehicleT: true, indoorT: true, managedT: true, vis: false, aqi: false, pollen: false }, }, showall: { label: 'Show All', icon: '⚙️', + scene: "url('assets/images/profiles/all.png') center / cover no-repeat, linear-gradient(160deg,#b4b4d4,#d4d4ec)", proOnly: true, cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: true, cloud: true, sun: true, direct: true, diffuse: true, tmrt: true, delta: true, utci: true, uvA: true, uvB: true, burn: true, utciP: true, precip: true, precipProb: true, soilT: true, soilT6: true, soilM: true, concreteT: true, vehicleT: true, indoorT: true, managedT: true, vis: true, aqi: true, pollen: true }, }, custom: { label: 'Custom', icon: '✏️', + scene: "url('assets/images/profiles/custom.png') center / cover no-repeat, linear-gradient(160deg,#d8b0cc,#ecd0e4)", proOnly: true, // Blank slate - only Hour is on. User enables whichever columns they want. cols: { hour: true, air: false, rh: false, dew: false, wind: false, dir: false, cloud: false, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: false, precipProb: false, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: false }, diff --git a/assets/js/hooks/useAppState.js b/assets/js/hooks/useAppState.js index d74707e..6eafb37 100644 --- a/assets/js/hooks/useAppState.js +++ b/assets/js/hooks/useAppState.js @@ -298,26 +298,41 @@ export function useAppState() { // Derived selectors used by profile controls const activityOptions = activityVariantKeys.map((k) => { const v = OUTDOORS_VARIANTS[k]; + const locked = v.proOnly && !isPro; return { value: k, - label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`, + label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`, + name: `${v.name}${locked ? ' 🔒' : ''}`, + scene: v.scene, + icon: v.icon, + disabled: locked, }; }); const placeOptions = placeVariantKeys.map((k) => { const v = OUTDOORS_VARIANTS[k]; + const locked = v.proOnly && !isPro; return { value: k, - label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`, + label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`, + name: `${v.name}${locked ? ' 🔒' : ''}`, + scene: v.scene, + icon: v.icon, + disabled: locked, }; }); const workOptions = workVariantKeys.map((k) => { const v = k === 'farming' - ? { name: FILTER_PROFILES.farming.label, proOnly: false } + ? { name: FILTER_PROFILES.farming.label, proOnly: false, scene: FILTER_PROFILES.farming.scene, icon: FILTER_PROFILES.farming.icon } : OUTDOORS_VARIANTS[k]; - const icon = k === 'farming' ? FILTER_PROFILES.farming.icon : variantIcons[k]; + const locked = v.proOnly && !isPro; + const iconGlyph = k === 'farming' ? FILTER_PROFILES.farming.icon : variantIcons[k]; return { value: k, - label: `${icon} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`, + label: `${iconGlyph} ${v.name}${locked ? ' 🔒' : ''}`, + name: `${v.name}${locked ? ' 🔒' : ''}`, + scene: v.scene, + icon: v.icon || iconGlyph, + disabled: locked, }; }); diff --git a/build.js b/build.js index 273fec0..513ac25 100644 --- a/build.js +++ b/build.js @@ -181,7 +181,25 @@ async function build() { console.log(' -> fonts/ (' + fs.readdirSync(fontsDir).length + ' files)'); } - // 7. Copy static files + // 7. Copy images + console.log(' Copying images...'); + const imagesDir = path.join(ROOT, 'assets', 'images'); + if (fs.existsSync(imagesDir)) { + const copyDirRecursive = (src, dest) => { + fs.mkdirSync(dest, { recursive: true }); + for (const entry of fs.readdirSync(src, { withFileTypes: true })) { + const srcPath = path.join(src, entry.name); + const destPath = path.join(dest, entry.name); + if (entry.isDirectory()) copyDirRecursive(srcPath, destPath); + else fs.copyFileSync(srcPath, destPath); + } + }; + copyDirRecursive(imagesDir, path.join(DIST, 'assets', 'images')); + const imageCount = fs.readdirSync(path.join(imagesDir, 'profiles')).length; + console.log(' -> assets/images/ (' + imageCount + ' profile images)'); + } + + // 8. Copy static files console.log(' Copying static files...'); for (const f of ['robots.txt', 'sitemap.xml', 'og-image.png']) { const src = path.join(ROOT, f);