2.1

New profile icons
New profile higher position
Updated Column toggle row
Fixed text encoding

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;
+  padding-bottom: 6px;
-  margin-bottom: 14px;
+  margin-bottom: 6px;
 }
 
 .header-right {

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;
+  flex-direction: column;
-  gap: 6px;
+  gap: 0;
-  align-items: center;
   margin-bottom: 0;
-  padding: 10px 14px;
+  padding: 0 14px 0;
-  background: #fdf8ee;
+  background: transparent;
-  border: 1.5px solid #d4c0a0;
+  border: none;
-  border-bottom: none;          /* merges visually with the col-toggles bar below */
 }
 
 .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;
+  background: transparent;
-  color: #6b4228;
+  border-radius: 3px;
-  font-family: Manrope, sans-serif;
+  transition: border-color 0.15s, box-shadow 0.15s;
-  font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  transition: all 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;
+  box-shadow: 0 1px 4px rgba(200,146,42,0.25);
-  background: #fef3dc;
 }
 
 .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 ────────────────────────────────────────────────────
+  /* ── Profile bar — single scroll row on all screen sizes ───────────
-     Keep flex-wrap but make every child a consistent ~31% width so
+     No wrapping needed; scroll strip handles layout. Dividers stay.   */
-     they land in tidy rows of 3. The label gets its own full row.    */
   .filter-profiles {
-    flex-wrap: wrap;
+    padding: 4px 10px 0;
-    gap: 6px;
-    padding: 10px 10px;
-    align-items: stretch;
   }
 
-  .filter-profiles-label {
+  /* Slightly smaller cards on mobile */
-    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 */
   .profile-btn {
-    flex: 0 0 calc((100% - 12px) / 3);
+    width: 68px;
-    min-width: 0;
+    height: 68px;
-    box-sizing: border-box;
+    flex: none;
-    text-align: center;
-    padding: 7px 2px;
-    font-size: 11px;
-    letter-spacing: 0.03em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
-  /* CustomSelect (Activities / Places dropdowns) — same width as buttons */
+  .profile-btn-scene {
-  .filter-profiles .cs-wrap {
+    font-size: 18px;
-    flex: 0 0 calc((100% - 12px) / 3);
-    min-width: 0;
   }
-  .filter-profiles .cs-btn {
+
-    width: 100%;
+  .profile-btn-label {
-    padding: 7px 6px;
+    height: 20px;
-    font-size: 11px;
+    font-size: 9px;
-    letter-spacing: 0.03em;
-    justify-content: center;
   }
 
   /* ── Column toggles bar ─────────────────────────────────────────────

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;

assets/js/app.js

@@ -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,10 +385,8 @@ export function UTCIForecast() {
         />`}
 
             
-            ${(isPro || activeCols['utciP'] || activeCols['burn'] || activeCols['vehicleT'] || activeCols['indoorT'] || activeCols['managedT'] || activeCols['pollen']) && html`
             <div class="col-toggles">
                 <span class="col-toggles-label">Columns:</span>
-
                 ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html`
   <span class=${'col-toggle-group' + (visibleCols.utciP ? ' col-toggle-group--expanded' : '')}>
     <${CustomSelect}
@@ -541,9 +539,7 @@ ${(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>`}
+                <span class="col-toggles-display-opts">
-
-            <div class="display-options">
                   <label class="display-opt">
                     <input type="checkbox" checked=${showDecimals} onChange=${toggleShowDecimals} />
                     Decimals
@@ -552,6 +548,7 @@ ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeC
                     <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}>

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`<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

@@ -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

@@ -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

@@ -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,
     };
   });
 

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);