3.2.3.2

Fix banner clicks
Make simple/table switch clearer

assets/css/table.css

@@ -1338,6 +1338,17 @@
 
 /* ── SIMPLE / TABLE VIEW TOGGLE ─────────────────────────────────────────── */
 
+.forecast-view-toggle-label {
+  font-family: Manrope, sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: #7a5c2a;
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+
 .forecast-view-toggle {
   display: inline-flex;
   align-items: center;
@@ -1345,11 +1356,14 @@
   margin-right: 8px;
 }
 .fvt-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
   font-family: Manrope, sans-serif;
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
-  padding: 4px 10px;
+  padding: 6px 14px;
   cursor: pointer;
   border: 1.5px solid #c9b08a;
   background: #f5edd6;
@@ -1374,6 +1388,12 @@
   color: #fff;
 }
 
+.fvt-btn-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
 /* Interval buttons shown in the col-toggles bar in simple mode */
 .fvt-interval {
   display: none;
@@ -1385,6 +1405,15 @@
 .table-main--simple .fvt-interval {
   display: inline-flex;
 }
+.fvt-interval-label {
+  font-family: Manrope, sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: #7a5c2a;
+  margin-right: 3px;
+}
 
 /* Hide table-mode column controls when in simple mode */
 .table-main--simple .col-toggles-label,

assets/css/ui.css

@@ -110,13 +110,14 @@
 /* Slideshow dots */
 .event-banner-dots {
   display: flex;
-  gap: 5px;
+  gap: 10px;
   margin-top: 7px;
   align-items: center;
+  padding: 5px 0;
 }
 .event-banner-dot {
-  width: 6px;
+  width: 10px;
-  height: 6px;
+  height: 10px;
   border-radius: 50%;
   opacity: 0.35;
   cursor: pointer;

assets/js/app.js

@@ -616,7 +616,7 @@ export function UTCIForecast() {
                       </div>
                     `}
                     ${activeEvents.length > 1 && html`
-                      <div class="event-banner-dots">
+                      <div class="event-banner-dots" onClick=${(e) => e.stopPropagation()}>
                         ${activeEvents.map((_, i) => html`
                           <span
                             key=${i}
@@ -905,11 +905,19 @@ export function UTCIForecast() {
             <div class="table-with-rail">
             <div class=${'table-main' + (forecastView === 'simple' ? ' table-main--simple' : '')}>
             <div class="col-toggles">
+                <span class="forecast-view-toggle-label">View:</span>
                 <span class="forecast-view-toggle">
-                  <button type="button" class=${'fvt-btn' + (forecastView === 'simple' ? ' on' : '')} onClick=${() => setForecastView('simple')}>Simple</button>
+                  <button type="button" title="Quick view – visual card layout" class=${'fvt-btn' + (forecastView === 'simple' ? ' on' : '')} onClick=${() => setForecastView('simple')}>
-                  <button type="button" class=${'fvt-btn' + (forecastView === 'table' ? ' on' : '')} onClick=${() => setForecastView('table')}>Table</button>
+                    <svg class="fvt-btn-icon" viewBox="0 0 12 12" width="12" height="12"><rect x=".5" y=".5" width="4.5" height="4.5" rx=".8" fill="currentColor"/><rect x="7" y=".5" width="4.5" height="4.5" rx=".8" fill="currentColor"/><rect x=".5" y="7" width="4.5" height="4.5" rx=".8" fill="currentColor"/><rect x="7" y="7" width="4.5" height="4.5" rx=".8" fill="currentColor"/></svg>
+                    Quick
+                  </button>
+                  <button type="button" title="Detailed view – full hourly table" class=${'fvt-btn' + (forecastView === 'table' ? ' on' : '')} onClick=${() => setForecastView('table')}>
+                    <svg class="fvt-btn-icon" viewBox="0 0 12 12" width="12" height="12"><rect x=".5" y="1.5" width="11" height="3" rx=".6" fill="currentColor"/><rect x=".5" y="5.5" width="11" height="2.5" rx=".5" fill="currentColor" opacity=".35"/><rect x=".5" y="8.8" width="11" height="2.5" rx=".5" fill="currentColor" opacity=".25"/></svg>
+                    Detailed
+                  </button>
                 </span>
                 <span class="fvt-interval">
+                  <span class="fvt-interval-label">Hours:</span>
                   ${[1, 2, 3, 4].map(n => html`<button key=${n} type="button" class=${'hour-interval-btn' + (tableInterval === n ? ' on' : '')} title=${n === 1 ? 'Every hour' : `Every ${n} hours`} onClick=${() => setTableInterval(n)}>${n}h</button>`)}
                 </span>
                 ${forecastView === 'simple' && (() => {
@@ -1288,7 +1296,7 @@ export function UTCIForecast() {
               </div>
               <div class="fsc-table-btn-wrap">
                 <button type="button" class="fsc-table-btn" onClick=${() => setForecastView('table')}>
-                  View Detailed Hourly Forecast →
+                  Detailed Hourly Forecast →
                 </button>
               </div>
             </div>

assets/js/events/weather-checks.js

@@ -121,9 +121,9 @@ export function checkHeatSpike(rows) {
     : undefined;
 
   const msgs = {
-    notable: `Temperatures reaching ${maxTemp.toFixed(1)}°C — above seasonal norms. Stay hydrated and avoid prolonged sun exposure.`,
+    notable: `Air temperature reaching ${maxTemp.toFixed(1)}°C — above seasonal norms. Stay hydrated and avoid prolonged sun exposure.`,
-    severe:  `Heat warning: ${maxTemp.toFixed(1)}°C expected today. Risk of heat exhaustion for vulnerable people — keep cool and hydrated.`,
+    severe:  `Heat warning: Air temp ${maxTemp.toFixed(1)}°C expected today. Risk of heat exhaustion for vulnerable people — keep cool and hydrated.`,
-    extreme: `Extreme heat alert: ${maxTemp.toFixed(1)}°C forecast. Risk of heat stroke — avoid outdoor activity during peak hours.`,
+    extreme: `Extreme heat alert: Air temp ${maxTemp.toFixed(1)}°C forecast. Risk of heat stroke — avoid outdoor activity during peak hours.`,
   };
   return {
     id: 'heat-spike',