Profile:
- ${Object.entries(FILTER_PROFILES).map(([key, profile]) => {
+ ${profileButtonOrder.slice(0, 3).map((key) => {
+ const profile = FILTER_PROFILES[key];
const locked = profile.proOnly && !isPro;
- // The 'outdoors' profile becomes a CustomSelect dropdown,
- // followed by a separator dividing general-use from technical profiles.
- if (key === 'outdoors') {
- return html`
- <${CustomSelect}
- key="outdoors"
- value=${activeProfile === 'outdoors' ? outdoorsVariant : 'off'}
- isOn=${activeProfile === 'outdoors'}
- noHide=${true}
- hideLabel=${`${profile.icon} ${profile.label}`}
- options=${Object.entries(OUTDOORS_VARIANTS).map(([k, v]) => ({
- value: k,
- label: v.name + (v.proOnly && !isPro ? ' 🔒' : ''),
- disabled: false,
- }))}
- onChange=${(v) => {
- if (v === 'off') {
- setActiveProfile('basic');
- setVisibleCols({ ...FILTER_PROFILES.basic.cols });
- setIndoorMode('off');
- return;
- }
- if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
- setProPromptSource(`variant:${v}`);
- setProPromptDay(0);
- return;
- }
- setActiveProfile('outdoors');
- setOutdoorsVariant(v);
- setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
- setIndoorMode('off');
- }}
- />
-
`;
- }
-
return html`
`;
+ })}
+ <${CustomSelect}
+ key="activities"
+ value=${activityValue}
+ isOn=${activeProfile === 'farming' || (activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant))}
+ noHide=${true}
+ hideLabel="🎯 Activities"
+ buttonLabel=${activityValue === 'off' ? '🎯 Activities' : `🎯 Activities: ${activityLabel}`}
+ options=${activityOptions}
+ 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;
+ }
+ setActiveProfile('outdoors');
+ setOutdoorsVariant(v);
+ setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
+ setIndoorMode('off');
+ setIndoorManaged(false);
+ }}
+ />
+ <${CustomSelect}
+ key="places"
+ value=${placeValue}
+ isOn=${activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)}
+ noHide=${true}
+ hideLabel="🌤️ Places"
+ buttonLabel=${placeValue === 'off' ? '🌤️ Places' : `🌤️ Places: ${placeLabel}`}
+ options=${placeOptions}
+ onChange=${(v) => {
+ if (v === 'off') {
+ activateProfile('basic');
+ return;
+ }
+ if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
+ setProPromptSource(`variant:${v}`);
+ setProPromptDay(0);
+ return;
+ }
+ setActiveProfile('outdoors');
+ setOutdoorsVariant(v);
+ setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
+ setIndoorMode('off');
+ setIndoorManaged(false);
+ }}
+ />
+
+ ${profileButtonOrder.slice(3).map((key) => {
+ const profile = FILTER_PROFILES[key];
+ const locked = profile.proOnly && !isPro;
+
+ return html`
+
`;
})}
@@ -1601,7 +1691,7 @@ ${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['a
${visibleCols.dir && html`
<${WindVane} bearing=${r.wd} size=${28} />
- ${r.compass.label}
+ ${r.compass.label}
| `}
${visibleCols.cloud && html`
diff --git a/assets/js/components.js b/assets/js/components.js
index e8e08b8..619eb65 100644
--- a/assets/js/components.js
+++ b/assets/js/components.js
@@ -37,7 +37,7 @@ const html = htm.bind(h);
// 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, isOn, noHide, groupedLeft, isLastChild }) {
+export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, buttonLabel, isOn, noHide, groupedLeft, isLastChild }) {
const [open, setOpen] = useState(false);
const wrapRef = useRef(null);
@@ -60,9 +60,9 @@ export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel,
// Build the label shown on the button
const activeOpt = options.find(o => o.value === value);
- const btnLabel = isOn
+ const btnLabel = buttonLabel || (isOn
? (activeOpt ? activeOpt.label : hideLabel)
- : hideLabel;
+ : hideLabel);
const btnClass = [
'cs-btn',
@@ -157,8 +157,6 @@ export function SkyScope({ elev, dt, glob = 0, size = 26 }) {
const isRising = localHour < 12;
const skyGrad = skyGradientForElev(elev, isRising);
- // Flat horizon colour used for moon shadow fill
- const skyHorizon = skyGrad.bot;
const isDay = elev > 0; // sun only drawn when actually above horizon
const isTwil = elev > -8 && !isDay; // moon shown in twilight too
@@ -173,7 +171,6 @@ export function SkyScope({ elev, dt, glob = 0, size = 26 }) {
// so it's intense at the sun centre and fades smoothly to transparent.
const radFrac = Math.min(1, (glob || 0) / 900); // 0 (dark) → 1 (blazing)
const horizFrac = Math.max(0, 1 - elev / 20); // extra warmth near horizon
- const glowColor = isRising ? '#ffb040' : '#ffc060';
const glowR = sunR + 4 + radFrac * 6; // total glow radius
const glowPeak = 0.35 + radFrac * 0.45 + horizFrac * 0.15; // centre opacity
@@ -291,7 +288,7 @@ export function WindVane({ bearing, size = 30 }) {
style=${{ flexShrink: 0, display: 'inline-block', verticalAlign: 'middle', overflow: 'visible' }}>
N
- ${renderMoon(r, r, u*0.50)}`
- : html`
-
- ${[0,45,90,135,180,225,270,315].map(a => {
- const x1 = r + Math.sin(a*Math.PI/180) * u*0.65;
- const y1 = r - Math.cos(a*Math.PI/180) * u*0.65;
- const x2 = r + Math.sin(a*Math.PI/180) * u*0.95;
- const y2 = r - Math.cos(a*Math.PI/180) * u*0.95;
- return html``;
- })}
-
- `)}
+ ${category === 'clear' && html`
+ ${line(size * 0.26, size * 0.50, size * 0.74, size * 0.50, brass, sw, 0.9)}
+ ${line(size * 0.38, size * 0.64, size * 0.62, size * 0.64, muted, sw * 0.75, 0.7)}`}
${category === 'wispy' && html`
-
- ${isNight
- ? renderMoon(r, r*0.95, u*0.42)
- : html``}
-
- `}
+ ${mist(size * 0.38, brass)}
+ ${line(size * 0.18, size * 0.78, size * 0.60, size * 0.78, muted, sw * 0.7, 0.6)}`}
${category === 'scattered' && html`
-
- ${isNight
- ? renderMoon(r+u*0.45, r-u*0.40, u*0.32)
- : html``}
-
-
-
-
-
-
- `}
+
+ ${line(size * 0.20, size * 0.78, size * 0.48, size * 0.78, brass, sw * 0.75, 0.78)}`}
${category === 'overcast' && html`
-
-
-
-
-
-
- `}
+
+ `}
`;
}
@@ -626,18 +592,18 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
+ font-family="Manrope, sans-serif" font-weight="700" letter-spacing="1.2">
UTCI NOW
+ font-family="Manrope, sans-serif" font-weight="700" letter-spacing="0.5">
${cat.label.toUpperCase()}
`
: html`
+ font-family="Manrope, sans-serif" font-weight="700" letter-spacing="0.8">
AWAITING
`}
`;
@@ -664,25 +630,28 @@ export function PrecipIcon({ precip = 0, snow = 0, size = 28 }) {
const hasRain = precip > 0;
const hasSnow = snow > 0;
const mixed = hasRain && hasSnow;
-
- // Drop shape: teardrop path centred on (cx, cy), radius dr
- const drop = (cx, cy, dr) => {
- const tip = cy + dr * 1.55;
- const cw = dr * 0.72;
- return `M ${cx} ${tip} C ${cx - cw} ${cy + dr * 0.6}, ${cx - dr} ${cy - dr * 0.3}, ${cx} ${cy - dr} C ${cx + dr} ${cy - dr * 0.3}, ${cx + cw} ${cy + dr * 0.6}, ${cx} ${tip} Z`;
- };
-
- // Six-pointed snowflake: centre lines + diagonal lines
+ const brass = '#c8922a';
+ const ink = '#2a1a08';
+ const rain = '#2a6a90';
+ const snowBlue = '#3f73c4';
+ const sw = Math.max(1.25, size * 0.055);
+ const cloud = html`
+ `;
+ const rainStroke = (cx, cy, heavy = false) => html`
+ `;
const flake = (cx, cy, fr) => html`
-
+
-
-
- ${[-1, 1].map(sx => [-1, 1].map(sy => html`
- `))}
+
+
`;
// Dry — just a faint dash
@@ -691,7 +660,7 @@ export function PrecipIcon({ precip = 0, snow = 0, size = 28 }) {
`;
}
@@ -699,9 +668,7 @@ export function PrecipIcon({ precip = 0, snow = 0, size = 28 }) {
const rainDrops = !hasRain ? 0 : precip < 1 ? 1 : precip < 4 ? 2 : 3;
// Snow intensity → number of flakes
const snowFlakes = !hasSnow ? 0 : snow < 0.5 ? 1 : 2;
- const dropColor = '#5090b0';
- const dr = size * 0.13; // drop radius
- const fr = size * 0.18; // flake arm length
+ const fr = size * 0.08; // flake arm length
// Layout: spread items evenly across the icon width
const items = (mixed ? rainDrops + snowFlakes : hasRain ? rainDrops : snowFlakes);
@@ -710,20 +677,23 @@ export function PrecipIcon({ precip = 0, snow = 0, size = 28 }) {
return html`
`;
}
diff --git a/restore.php b/restore.php
index 4477f02..e21ada8 100644
--- a/restore.php
+++ b/restore.php
@@ -133,10 +133,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
color: #fff;
border: none;
border-radius: 4px;
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'Manrope', sans-serif;
+ font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
- letter-spacing: 0.12em;
+ letter-spacing: 0.07em;
cursor: pointer;
}
button:hover { background: #a06e18; }
@@ -153,10 +154,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
.back {
margin-top: 1.5rem;
- font-family: 'JetBrains Mono', monospace;
+ font-family: 'Manrope', sans-serif;
+ font-weight: 700;
font-size: 0.7rem;
text-transform: uppercase;
- letter-spacing: 0.1em;
+ letter-spacing: 0.06em;
}
.back a { color: #b09870; text-decoration: none; }
.back a:hover { color: #c8922a; }
|