3.3.2.3

Fix bottom panels
Add semi-cloud icons

assets/css/ui.css

@@ -1277,14 +1277,15 @@
 }
 
 .utci-about {
-  flex: 0 0 920px;
+  flex: 2 1 0;
+  min-width: 0;
   padding: 24px 28px;
   background: #fdf8ee;
   border: 1.5px solid #c9b08a;
 }
 
 .utci-reading-box {
-  flex: 1;
+  flex: 1 1 0;
   min-width: 0;
   padding: 24px 28px;
   background: #fdf8ee;

assets/js/app.js

@@ -1832,6 +1832,7 @@ export function UTCIForecast() {
                   { t:  1,  label: 'Cold',         value: '0–10°C' },
                   { t: 11,  label: 'Cool',         value: '10–19°C' },
                   { t: 21,  label: 'Comfortable',  value: '19–24°C', bold: true },
+                  { t: 25,  label: 'Warm',         value: '24–27°C' },
                   { t: 29,  label: 'Caution',      value: '27–32°C' },
                   { t: 36,  label: 'Extreme',      value: '32–41°C' },
                   { t: 47,  label: 'Danger',       value: '41°C+' },

assets/js/components.js

@@ -396,7 +396,10 @@ export function WindVane({ bearing, size = 30 }) {
 
 // -------------------------------------------------------------------
 // CLOUDICON - Brass Line cloud / haze / overcast glyphs.
-// No sun or moon here; the time-cell SkyScope owns day/night imagery.
+// The time-cell SkyScope owns full day/night imagery; this stays a
+// simple glyph. Exception: 'wispy'/'scattered' in daylight draw a
+// small sun peeking from behind the cloud, so a lightly-clouded day
+// still reads as "mostly sunny" rather than looking fully overcast.
 // -------------------------------------------------------------------
 //   category: 'clear' | 'wispy' | 'scattered' | 'overcast'
 //   elev:     solar elevation in degrees (negative = night)
@@ -460,10 +463,19 @@ export function CloudIcon({ category, size = 30, elev = 90, dt = new Date(), fil
         <circle cx=${size*0.75} cy=${size*0.60} r=${size*0.025} fill=${brass} opacity="0.70" />
         <circle cx=${size*0.18} cy=${size*0.66} r=${size*0.018} fill=${brass} opacity="0.55" />
         <circle cx=${size*0.88} cy=${size*0.48} r=${size*0.018} fill=${brass} opacity="0.55" />`}
-      ${category === 'wispy' && html`
+      ${category === 'wispy' && elev >= 0 && html`
+        ${sun(size * 0.66, size * 0.30, size * 0.13)}
+        ${line(size * 0.14, size * 0.58, size * 0.64, size * 0.58, brass, sw * 0.85, 0.85)}
+        ${line(size * 0.24, size * 0.74, size * 0.78, size * 0.74, ink, sw * 0.78, 0.68)}`}
+      ${category === 'wispy' && elev < 0 && html`
         ${mist(size * 0.18, brass)}
         ${line(size * 0.18, size * 0.56, size * 0.60, size * 0.56, muted, sw * 0.7, 0.6)}`}
-      ${category === 'scattered' && html`
+      ${category === 'scattered' && elev >= 0 && html`
+        ${sun(size * 0.72, size * 0.24, size * 0.11)}
+        <path d=${cloudPath(-size * 0.12, size * 0.02, 0.64)} fill=${filled ? 'rgba(255,255,255,0.88)' : 'none'} stroke=${filled ? 'none' : ink}
+              stroke-width=${sw} stroke-linecap=${cap} stroke-linejoin=${join} />
+        ${!filled && line(size * 0.12, size * 0.60, size * 0.38, size * 0.60, brass, sw * 0.72, 0.78)}`}
+      ${category === 'scattered' && elev < 0 && html`
         <path d=${cloudPath(0, -size * 0.2425, 0.82)} fill=${filled ? 'rgba(255,255,255,0.88)' : 'none'} stroke=${filled ? 'none' : ink}
               stroke-width=${sw} stroke-linecap=${cap} stroke-linejoin=${join} />
         ${!filled && line(size * 0.20, size * 0.58, size * 0.48, size * 0.58, brass, sw * 0.75, 0.78)}`}

assets/js/compute.js

@@ -607,7 +607,7 @@ export function computeGlanceSummary(todayRows, profile, variant, skinType, cols
   // ── Vehicle ────────────────────────────────────────────────────────────
   if (profile === 'vehicle') {
     const peakCabin  = peakRow('vehicleT');
-    const dangerFrom = todayRows.find(r => r.vehicleT != null && r.vehicleT >= 29);
+    const dangerWins = allWindows(todayRows, r => r.vehicleT != null && r.vehicleT >= 29);
 
     return [
       ...climateItem,
@@ -620,8 +620,8 @@ export function computeGlanceSummary(todayRows, profile, variant, skinType, cols
       }, {
         icon: '🧒',
         label: 'Children/pets in car',
-        value: dangerFrom ? `Unsafe from ${hhmm(dangerFrom.iso)}` : 'Safe all day',
+        value: dangerWins.length ? `Unsafe ${formatWindows(dangerWins)}` : 'Safe all day',
-        alert: !!dangerFrom,
+        alert: dangerWins.length > 0,
         grp: 'felt',
       }] : []),
       ...(show('precipProb') ? [rainItem] : []),
@@ -698,7 +698,7 @@ export function computeGlanceSummary(todayRows, profile, variant, skinType, cols
     const peakIndoor = peakRow('indoorT');
     const maxPollen  = Math.max(0, ...todayRows.map(r => r.grassPollen ?? 0));
     const peakAqi    = Math.max(0, ...todayRows.map(r => r.aqi ?? 0));
-    const carDanger  = todayRows.find(r => r.vehicleT != null && r.vehicleT >= 29);
+    const carDangerWins = allWindows(todayRows, r => r.vehicleT != null && r.vehicleT >= 29);
 
     return [
       ...(show('furSurfaceT') ? [{
@@ -725,8 +725,8 @@ export function computeGlanceSummary(todayRows, profile, variant, skinType, cols
       ...(show('vehicleT') ? [{
         icon: '🧒',
         label: 'Kids/pets in car',
-        value: carDanger ? `Unsafe from ${hhmm(carDanger.iso)}` : 'Safe all day',
+        value: carDangerWins.length ? `Unsafe ${formatWindows(carDangerWins)}` : 'Safe all day',
-        alert: !!carDanger,
+        alert: carDangerWins.length > 0,
         grp: 'felt',
       }] : []),
       ...lightningItem,