gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.1

Browse Source 
New profile icons
New profile higher position
Updated Column toggle row
Fixed text encoding
This commit is contained in:
fraxle
2026-06-01 12:59:19 +01:00
parent 75537d0250
commit ad889d938b
40 changed files with 604 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/New Text Document.txt
View File
assets/css/header.css
+2 -2
View File
@@ -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 {
assets/css/table.css
+142 -61
View File
@@ -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 ─────────────────────────────────────────────
assets/css/ui.css
+200 -9
View File
@@ -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;
assets/images/profiles/activities.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

assets/images/profiles/airport.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

assets/images/profiles/all.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

assets/images/profiles/basic.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

assets/images/profiles/beach.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

assets/images/profiles/construction.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

assets/images/profiles/custom.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

assets/images/profiles/cycling.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/events.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/farming.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/festival.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

assets/images/profiles/fishing.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

assets/images/profiles/forest.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

assets/images/profiles/hiking.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/home.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

assets/images/profiles/market.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

assets/images/profiles/naturist.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/office.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

assets/images/profiles/park.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

assets/images/profiles/photography.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/places.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

assets/images/profiles/running.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

assets/images/profiles/sailing.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

assets/images/profiles/temps.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

assets/images/profiles/urban.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

assets/images/profiles/vehicle.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

assets/images/profiles/walking.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/window.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

assets/images/profiles/winter.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/images/profiles/work.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

assets/js/app.js
+14 -17
View File
@@ -291,7 +291,7 @@ export function UTCIForecast() {
utciEnvShort=${UTCI_ENVIRONMENTS[utciEnv]?.shortLabel ?? null}
/>
<div class="scope-env-row" data-env=${utciEnv}>
<span class="scope-env-label">Surroundings</span>
<span class="scope-env-label">Environment</span>
<${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`
<div class="col-toggles">
<div class="col-toggles">
<span class="col-toggles-label">Columns:</span>
${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html`
${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html`
<span class=${'col-toggle-group' + (visibleCols.utciP ? ' col-toggle-group--expanded' : '')}>
<${CustomSelect}
value=${utciEnv}
@@ -541,19 +539,18 @@ ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeC
${isPro && (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['direct']) && html`<button class=${`col-toggle grp-solar${visibleCols.direct ? ' on' : ''}`} onClick=${() => toggleCol('direct')}>Direct</button>`}
${isPro && (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['diffuse']) && html`<button class=${`col-toggle grp-solar${visibleCols.diffuse ? ' on' : ''}`} onClick=${() => toggleCol('diffuse')}>Diffuse</button>`}
</div>`}
<div class="display-options">
<label class="display-opt">
<input type="checkbox" checked=${showDecimals} onChange=${toggleShowDecimals} />
Decimals
</label>
<label class="display-opt">
<input type="checkbox" checked=${showUnits} onChange=${toggleShowUnits} />
Units
</label>
<span class="col-toggles-display-opts">
<label class="display-opt">
<input type="checkbox" checked=${showDecimals} onChange=${toggleShowDecimals} />
Decimals
</label>
<label class="display-opt">
<input type="checkbox" checked=${showUnits} onChange=${toggleShowUnits} />
Units
</label>
</span>
</div>
<div class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
<span class="utci-scroll-chevron left" aria-hidden="true">‹</span>
<span class="utci-scroll-chevron right" aria-hidden="true">›</span>
assets/js/components.js
+2 -1
View File
@@ -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`<span class="cs-btn-scene" style=${sceneStyle}>${sceneContent || ''}</span>`}
<span class="cs-btn-overlay"></span>
<span class="cs-btn-label">${btnLabel}</span>
<span class="cs-arrow"></span>
assets/js/components/DayTabs.js
+197 -119
View File
@@ -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}>
<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'}`}
@@ -419,125 +616,6 @@ export function DayTabs({
</div>`;
})()}
<div class="filter-profiles" style=${{ borderBottom: isPro ? 'none' : '' }}>
<span class="filter-profiles-label">Profile:</span>
${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);
}}
>${profile.icon} ${profile.label}${locked ? ' 🔒' : ''}</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}`}
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);
}
}}
/>
<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);
}}
>${profile.icon} ${profile.label}${locked ? ' 🔒' : ''}</button>`;
})}
</div>
</${Fragment}>`;
}
assets/js/config.js
+8
View File
@@ -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 },
assets/js/hooks/useAppState.js
+20 -5
View File
@@ -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,
};
});