Redesign color picker UI and improve palette modals

colors.json

@@ -36,7 +36,7 @@
       { "name": "Yellow", "hex": "#f5e812" },
       { "name": "Goldenrod", "hex": "#f7b615" },
       { "name": "Orange", "hex": "#ef6b24" },
-      { "name":"Blended Brown","hex":"#c9aea0"}
+      { "name":"Blended Brown","hex":"#c9aea0"},
       { "name": "Coffee", "hex": "#957461" },
       { "name": "Burnt Orange", "hex": "#9d4223" }
     ]
@@ -92,28 +92,28 @@
       },
       {
         "name": "Classic Silver",
-        "hex": "#F4C2C2",
+        "hex": "#C0C0C0",
         "metallic": true,
         "pearlType": "silver",
         "image": "images/classic-silver.webp"
       },
       {
         "name": "Pearl Pink",
-        "hex": "#F4C2C2",
+        "hex": "#F4C2D0",
         "metallic": true,
         "pearlType": "pink",
         "image": "images/pearl-pink.webp"
       },
       {
         "name": "Pearl Peach",
-        "hex": "#F4C2C2",
+        "hex": "#F4D2C2",
         "metallic": true,
         "pearlType": "pink",
         "image": "images/pearl-peach.webp"
       },
       {
         "name": "Classic Rose Gold",
-        "hex": "#F4C2C2",
+        "hex": "#B76E79",
         "metallic": true,
         "pearlType": "pink",
         "image": "images/metalic-rosegold.webp"
@@ -134,7 +134,7 @@
       },
       {
         "name": "Pearl Periwinkle",
-        "hex": "#F4C2C2",
+        "hex": "#CCCCFF",
         "metallic": true,
         "pearlType": "blue",
         "image": "images/pearl-periwinkle.webp"
@@ -181,14 +181,14 @@
     "colors": [
       {
         "name": "Chrome Rose Gold",
-        "hex": "#FFBF00",
+        "hex": "#B76E79",
         "metallic": true,
         "chromeType": "rosegold",
         "image": "images/chrome-rosegold.webp"
       },
       {
         "name": "Chrome Pink",
-        "hex": "#FFBF00",
+        "hex": "#FF69B4",
         "metallic": true,
         "chromeType": "rosegold",
         "image": "images/chrome-pink.webp"
@@ -202,28 +202,28 @@
       },
       {
         "name": "Chrome Champagne",
-        "hex": "#FF1DCE",
+        "hex": "#F7E7CE",
         "metallic": true,
         "chromeType": "champagne",
         "image": "images/chrome-champagne.webp"
       },
       {
         "name": "Chrome Truffle",
-        "hex": "#FF1DCE",
+        "hex": "#D2B48C",
         "metallic": true,
         "chromeType": "champagne",
         "image": "images/chrome-truffle.webp"
       },
       {
         "name": "Chrome Silver",
-        "hex": "#a8a9a4",
+        "hex": "#C0C0C0",
         "metallic": true,
         "chromeType": "silver",
         "image": "images/chrome-silver.webp"
       },
       {
         "name": "Chrome Space Grey",
-        "hex": "#a8a9a4",
+        "hex": "#5C5C5C",
         "metallic": true,
         "chromeType": "spacegrey",
         "image": "images/chrome-spacegrey.webp"

index.html

@@ -9,6 +9,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
   
   <link rel="stylesheet" href="../style.css">
   <link rel="stylesheet" href="color.css">
@@ -37,6 +38,7 @@
     <div id="navbarBasicExample" class="navbar-menu has-text-right">
       <div class="navbar-end">
         <a class="navbar-item is-tab" href="/">Home</a>
+        <a class="navbar-item" href="https://shop.beachpartyballoons.com">Shop</a>
         <a class="navbar-item" href="../about/">About Us</a>
         <a class="navbar-item" href="../faq/">FAQ</a>
         <a class="navbar-item" href="../terms/">Terms</a>
@@ -47,35 +49,50 @@
     </div>
   </nav>
 
-<main>
+<main class="color-picker-app">
-    <div id="selected-palette">
+    <section class="picker-layout">
-      <div class="palette-header-row">
+      <aside id="selected-palette" aria-label="Selected palette">
-        <h2 class="has-text-dark">Your Palette</h2>
+        <div class="palette-header-row">
-        <div id="palette-controls">
+          <div class="palette-title-group">
-          <label class="switch" title="Toggle Animations">
+            <h2 class="has-text-dark">Your Palette</h2>
-            <input type="checkbox" id="toggle-animation" checked>
+          </div>
-            <span class="slider"></span>
+          <div id="palette-controls" aria-label="Palette controls">
-          </label>
+            <label class="switch" title="Toggle Animations" aria-label="Toggle animations">
-          <button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette">
+              <input type="checkbox" id="toggle-animation" checked>
-            <i class="fa-solid fa-shuffle"></i>
+              <span class="slider"></span>
-          </button>
+            </label>
-          <button id="share-palette" class="palette-control-btn" title="Share Palette">
+            <button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette" aria-label="Shuffle palette">
-            <i class="fa-solid fa-share-nodes"></i>
+              <i class="fa-solid fa-shuffle"></i>
-          </button>
+            </button>
-          <button id="zoom-palette" class="palette-control-btn" title="Zoom In Palette">
+            <button id="preset-palettes" class="palette-control-btn" title="Palette Ideas" aria-label="Palette ideas">
-            <i class="fa-solid fa-magnifying-glass-plus"></i>
+              <i class="fa-solid fa-palette"></i>
-          </button>
+            </button>
+            <button id="share-palette" class="palette-control-btn" title="Share Palette" aria-label="Share palette">
+              <i class="fa-solid fa-share-nodes"></i>
+            </button>
+            <button id="zoom-palette" class="palette-control-btn" title="Zoom In Palette" aria-label="Zoom palette">
+              <i class="fa-solid fa-magnifying-glass-plus"></i>
+            </button>
+          </div>
         </div>
-      </div>
-      
-      <div id="palette-colors">
-        </div>
-      
-      <button id="clear-palette" class="has-text-dark">Clear Palette</button>
-    </div>
 
-    <div id="color-families">
+        <div class="palette-meta-row">
-    </div>
+          <span id="palette-count" class="palette-count-badge">0 selected</span>
+          <span class="palette-hint">Tap a balloon below to add it here</span>
+        </div>
+
+        <div id="palette-colors" aria-live="polite"></div>
+
+        <div class="palette-footer-row">
+          <button id="clear-palette" class="has-text-dark">Clear Palette</button>
+        </div>
+      </aside>
+
+      <section class="library-panel" aria-labelledby="library-heading">
+        <h2 id="library-heading" class="library-inline-title">Colors</h2>
+        <div id="color-families"></div>
+      </section>
+    </section>
   </main>
   
   <footer>
@@ -90,12 +107,28 @@
     </div>
   </div>
 
+  <div class="preset-modal-backdrop" aria-hidden="true">
+    <div class="preset-modal" role="dialog" aria-modal="true" aria-labelledby="preset-modal-title">
+      <div class="preset-modal-header">
+        <h3 id="preset-modal-title">Palette Ideas</h3>
+        <button id="close-preset-modal" type="button" aria-label="Close palette ideas">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+      <p class="preset-modal-subtitle">Quick starting points you can tweak after applying.</p>
+      <div id="preset-palette-list"></div>
+    </div>
+  </div>
+
   <div id="zoom-overlay">
-    <div id="zoomed-palette-content"></div>
+    <div id="zoom-modal-shell">
+      <a href="#" id="zoom-close" aria-label="Close zoom view">×</a>
+      <div id="zoomed-palette-content"></div>
+    </div>
   </div>
   
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="script.js"></script>
-  <script src="../script.js"></script>
 
 </body>
-</html>
+</html>

script.js

@@ -1,5 +1,53 @@
 let selectedPalette = [];
 let animationsEnabled = true;
+let allColorFamilies = [];
+let colorSearchQuery = '';
+let colorSortMode = 'default';
+
+const PRESET_PALETTES = [
+  {
+    id: 'soft-baby-shower',
+    name: 'Pastels',
+    tag: 'Pastels',
+    description: 'Gentle mix of pink, blue, lilac, and white.',
+    colors: ['White', 'Light Pink', 'Sky Blue', 'Lilac', 'Pastel Green', 'Pastel Yellow']
+  },
+  {
+    id: 'beach-party',
+    name: 'Muted Naturals',
+    tag: 'Neutral',
+    description: 'Soft neutral mix with a chrome champagne accent.',
+    colors: ['Cameo', 'Sand', 'White', 'Chrome Champagne']
+  },
+  {
+    id: 'elegant-neutral',
+    name: 'Elegant Neutral',
+    tag: 'Event',
+    description: 'Wedding-friendly neutrals with soft warmth.',
+    colors: ['White', 'Retro White', 'Sand', 'Cameo', 'Fog']
+  },
+  {
+    id: 'chrome-lux',
+    name: 'Midnight Steel',
+    tag: 'Bold',
+    description: 'Deep dark base with pearl blues and chrome grey accents.',
+    colors: ['Black', 'Pearl Midnight Blue', 'Pearl Sapphire', 'Chrome Space Grey']
+  },
+  {
+    id: 'jewel-night',
+    name: 'Modern Minimal',
+    tag: 'Trend',
+    description: 'Clean neutrals with a muted blue accent for a current look.',
+    colors: ['White', 'Sand', 'Grey', 'Fog', 'Sea Glass']
+  },
+  {
+    id: 'pearl-dream',
+    name: 'Tropical Rainbow',
+    tag: 'Bright',
+    description: 'Bold tropical brights for playful rainbow installs.',
+    colors: ['Fuchsia', 'Goldenrod', 'Caribbean Blue', 'Lime Green', 'Yellow', 'Lavender']
+  }
+];
 
 // --- LOCAL STORAGE LOADING ---
 // Load palette from Local Storage on startup
@@ -17,89 +65,239 @@ if (savedPaletteJSON) {
 fetch('colors.json')
   .then(response => response.json())
   .then(data => {
-    const colorFamiliesContainer = document.getElementById('color-families');
+    allColorFamilies = data;
-
+    renderColorFamilies();
-    // Create the color swatch for each color in the JSON data
+    initializeLibraryControls();
-    data.forEach(family => {
-      const familyDiv = document.createElement('div');
-      familyDiv.classList.add('color-family');
-      familyDiv.classList.add('has-text-dark');
-      familyDiv.innerHTML = `<h3>${family.family}</h3>`;
-
-      const swatchContainer = document.createElement('div');
-      swatchContainer.classList.add('swatch-container');
-
-      family.colors.forEach(color => {
-        const swatchWrapper = document.createElement('div');
-        swatchWrapper.classList.add('swatch-wrapper');
-
-        const swatch = document.createElement('div');
-        swatch.classList.add('color-swatch');
-        swatch.dataset.color = color.hex;
-        swatch.style.color = color.hex;
-
-        const backgroundDiv = document.createElement('div');
-        backgroundDiv.classList.add('color-background');
-
-        if (color.image) {
-          backgroundDiv.style.backgroundImage = `url(${color.image})`;
-        } else {
-          backgroundDiv.style.backgroundColor = color.hex;
-        }
-
-        if (color.metallic && color.chromeType) {
-          backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
-        }
-
-        const shineImg = document.createElement('img');
-        shineImg.classList.add('color-shine');
-        shineImg.src = "shine.svg";
-        shineImg.alt = "";
-
-        if (isLightColor(color.hex)) {
-          backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
-          shineImg.classList.add('has-halo');
-        }
-
-        swatch.appendChild(backgroundDiv);
-        swatch.appendChild(shineImg);
-
-        const colorName = document.createElement('span');
-        colorName.classList.add('color-name');
-        colorName.textContent = color.name;
-
-        // Event listener to add/remove a color from the palette
-        swatch.addEventListener('click', () => {
-          const isSelected = selectedPalette.some(c => c.hex === color.hex);
-          if (isSelected) {
-            selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
-          } else {
-            selectedPalette.push(color);
-          }
-
-          backgroundDiv.classList.add('pop');
-          backgroundDiv.addEventListener('animationend', () => {
-            backgroundDiv.classList.remove('pop');
-          }, { once: true });
-
-          renderSelectedPalette();
-          updateSwatchHighlights();
-        });
-
-        swatchWrapper.appendChild(swatch);
-        swatchWrapper.appendChild(colorName);
-        swatchContainer.appendChild(swatchWrapper);
-      });
-
-      familyDiv.appendChild(swatchContainer);
-      colorFamiliesContainer.appendChild(familyDiv);
-    });
 
     // Initialize the palette, checking for shared links or local versions
     initializePaletteOnLoad(data);
   })
   .catch(error => console.error('Error loading colors:', error));
 
+function renderColorFamilies() {
+  const colorFamiliesContainer = document.getElementById('color-families');
+  colorFamiliesContainer.innerHTML = '';
+
+  const query = colorSearchQuery.trim().toLowerCase();
+  let visibleFamilyCount = 0;
+
+  allColorFamilies.forEach(family => {
+    const familyMatchesQuery = family.family.toLowerCase().includes(query);
+    let colors = [...family.colors];
+
+    if (colorSortMode === 'az') {
+      colors.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (colorSortMode === 'lightness') {
+      colors.sort((a, b) => getPerceivedBrightness(a.hex ?? '#000000') - getPerceivedBrightness(b.hex ?? '#000000'));
+    }
+
+    if (query) {
+      colors = colors.filter(color => {
+        const nameMatch = color.name.toLowerCase().includes(query);
+        const hexMatch = (color.hex || '').toLowerCase().includes(query);
+        return familyMatchesQuery || nameMatch || hexMatch;
+      });
+    }
+
+    if (query && colors.length === 0) {
+      return;
+    }
+
+    visibleFamilyCount += 1;
+
+    const familyDiv = document.createElement('div');
+    familyDiv.classList.add('color-family', 'has-text-dark');
+    familyDiv.innerHTML = `<h3>${family.family}</h3>`;
+
+    const swatchContainer = document.createElement('div');
+    swatchContainer.classList.add('swatch-container');
+
+    colors.forEach(color => {
+      swatchContainer.appendChild(createColorSwatch(color));
+    });
+
+    familyDiv.appendChild(swatchContainer);
+    colorFamiliesContainer.appendChild(familyDiv);
+  });
+
+  colorFamiliesContainer.classList.toggle('has-filtered-results-none', visibleFamilyCount === 0);
+  updateSwatchHighlights();
+}
+
+function createColorSwatch(color) {
+  const swatchWrapper = document.createElement('div');
+  swatchWrapper.classList.add('swatch-wrapper');
+
+  const swatch = document.createElement('div');
+  swatch.classList.add('color-swatch');
+  swatch.dataset.color = color.hex;
+  swatch.style.color = color.hex;
+  swatch.setAttribute('role', 'button');
+  swatch.setAttribute('tabindex', '0');
+  swatch.setAttribute('aria-label', `Toggle ${color.name}`);
+
+  const backgroundDiv = document.createElement('div');
+  backgroundDiv.classList.add('color-background');
+
+  if (color.image) {
+    backgroundDiv.classList.add('finish-image');
+    backgroundDiv.style.backgroundImage = `url(${color.image})`;
+  } else {
+    backgroundDiv.style.backgroundColor = color.hex;
+  }
+
+        if (color.metallic) {
+          backgroundDiv.classList.add('metallic');
+          if (color.chromeType && !color.image) {
+            backgroundDiv.classList.add(`chrome-${color.chromeType}`);
+          }
+        }
+
+  const shineImg = document.createElement('img');
+  shineImg.classList.add('color-shine');
+  shineImg.src = "shine.svg";
+  shineImg.alt = "";
+
+  if (isLightColor(color.hex)) {
+    backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
+    shineImg.classList.add('has-halo');
+  }
+
+  swatch.appendChild(backgroundDiv);
+  swatch.appendChild(shineImg);
+
+  const colorName = document.createElement('span');
+  colorName.classList.add('color-name');
+  colorName.textContent = color.name;
+
+  swatch.addEventListener('click', () => {
+    const isSelected = selectedPalette.some(c => c.hex === color.hex);
+    if (isSelected) {
+      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
+    } else {
+      selectedPalette.push(color);
+    }
+
+    backgroundDiv.classList.add('pop');
+    backgroundDiv.addEventListener('animationend', () => {
+      backgroundDiv.classList.remove('pop');
+    }, { once: true });
+
+    renderSelectedPalette();
+    updateSwatchHighlights();
+  });
+
+  swatch.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      swatch.click();
+    }
+  });
+
+  swatchWrapper.appendChild(swatch);
+  swatchWrapper.appendChild(colorName);
+  return swatchWrapper;
+}
+
+function initializeLibraryControls() {
+  const searchInput = document.getElementById('color-search');
+  const sortSelect = document.getElementById('color-sort');
+
+  if (searchInput) {
+    searchInput.addEventListener('input', (event) => {
+      colorSearchQuery = event.target.value || '';
+      renderColorFamilies();
+    });
+  }
+
+  if (sortSelect) {
+    sortSelect.addEventListener('change', (event) => {
+      colorSortMode = event.target.value || 'default';
+      renderColorFamilies();
+    });
+  }
+}
+
+function findColorByNameOrHex(token) {
+  const normalized = String(token || '').trim().toLowerCase();
+  if (!normalized) return null;
+  const allColors = allColorFamilies.flatMap(family => family.colors);
+
+  return allColors.find(color =>
+    color.name.toLowerCase() === normalized ||
+    (color.hex || '').toLowerCase() === normalized
+  ) || null;
+}
+
+function resolvePresetPalette(preset) {
+  return preset.colors
+    .map(findColorByNameOrHex)
+    .filter(Boolean);
+}
+
+function renderPresetPaletteModal() {
+  const presetList = document.getElementById('preset-palette-list');
+  if (!presetList) return;
+
+  presetList.innerHTML = '';
+
+  PRESET_PALETTES.forEach(preset => {
+    const resolvedColors = resolvePresetPalette(preset);
+
+    const card = document.createElement('div');
+    card.className = 'preset-card';
+
+    const titleRow = document.createElement('div');
+    titleRow.className = 'preset-card-title-row';
+    titleRow.innerHTML = `
+      <h4 class="preset-card-title">${preset.name}</h4>
+      <span class="preset-card-tag">${preset.tag}</span>
+    `;
+
+    const desc = document.createElement('p');
+    desc.className = 'preset-card-desc';
+    desc.textContent = preset.description;
+
+    const preview = document.createElement('div');
+    preview.className = 'preset-preview';
+    resolvedColors.forEach(color => {
+      const dot = document.createElement('span');
+      dot.className = 'preset-dot';
+      dot.title = color.name;
+
+      if (color.image) {
+        dot.classList.add('is-image');
+        dot.style.backgroundImage = `url(${color.image})`;
+      } else {
+        dot.style.backgroundColor = color.hex;
+      }
+
+      if (isLightColor(color.hex)) {
+        dot.style.borderColor = 'rgba(21,56,76,0.24)';
+      }
+
+      preview.appendChild(dot);
+    });
+
+    const applyButton = document.createElement('button');
+    applyButton.type = 'button';
+    applyButton.textContent = 'Use Palette';
+    applyButton.addEventListener('click', () => {
+      if (resolvedColors.length === 0) return;
+      selectedPalette = resolvedColors.map(color => ({ ...color }));
+      renderSelectedPalette();
+      updateSwatchHighlights();
+      closePresetModal();
+    });
+
+    card.appendChild(titleRow);
+    card.appendChild(desc);
+    card.appendChild(preview);
+    card.appendChild(applyButton);
+    presetList.appendChild(card);
+  });
+}
+
 /**
  * Saves the current 'selectedPalette' array to the browser's Local Storage.
  */
@@ -114,16 +312,36 @@ function renderSelectedPalette() {
   const paletteColorsContainer = document.getElementById('palette-colors');
   paletteColorsContainer.innerHTML = '';
 
+  if (selectedPalette.length === 0) {
+    paletteColorsContainer.classList.add('is-empty');
+    paletteColorsContainer.innerHTML = `
+      <div class="palette-empty-state">
+        <i class="fa-solid fa-circle-dot"></i>
+        <strong>No balloons selected yet</strong>
+        <span>Tap colors below to build a palette, then shuffle, zoom, or share it.</span>
+      </div>
+    `;
+    updatePaletteUIState();
+    savePaletteToLocalStorage();
+    return;
+  }
+
+  paletteColorsContainer.classList.remove('is-empty');
+
   selectedPalette.forEach(color => {
     const swatchWrapper = document.createElement('div');
     swatchWrapper.classList.add('swatch-wrapper');
 
     const floatGroup = document.createElement('div');
     floatGroup.classList.add('balloon-float-group');
+    let floatDuration = '4s';
+    let floatDelay = '0s';
 
     if (animationsEnabled) {
-      floatGroup.style.animationDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
+      floatDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
-      floatGroup.style.animationDelay = `${(Math.random() * 2).toFixed(2)}s`;
+      floatDelay = `${(Math.random() * 2).toFixed(2)}s`;
+      floatGroup.style.animationDuration = floatDuration;
+      floatGroup.style.animationDelay = floatDelay;
     } else {
       floatGroup.style.animation = 'none';
     }
@@ -131,6 +349,9 @@ function renderSelectedPalette() {
     const swatch = document.createElement('div');
     swatch.classList.add('color-swatch');
     swatch.dataset.color = color.hex;
+    swatch.setAttribute('role', 'button');
+    swatch.setAttribute('tabindex', '0');
+    swatch.setAttribute('aria-label', `Remove ${color.name} from palette`);
 
     const backgroundDiv = document.createElement('div');
     backgroundDiv.classList.add('color-background', 'chosen');
@@ -141,8 +362,11 @@ function renderSelectedPalette() {
       backgroundDiv.style.backgroundColor = color.hex;
     }
 
-    if (color.metallic && color.chromeType) {
+    if (color.metallic) {
-      backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
+      backgroundDiv.classList.add('metallic');
+      if (color.chromeType && !color.image) {
+        backgroundDiv.classList.add(`chrome-${color.chromeType}`);
+      }
     }
 
     const shineImg = document.createElement('img');
@@ -163,10 +387,39 @@ function renderSelectedPalette() {
     stringSVG.setAttribute("class", "balloon-string-svg");
     stringSVG.setAttribute("viewBox", "0 0 20 60");
     const path = document.createElementNS(svgNS, "path");
-    path.setAttribute("d", "M10 0 C8 10, 12 20, 10 30 C8 40, 12 50, 10 60");
+    const basePathD = "M10 0 C6 8, 14 14, 9 22 C5 29, 14 35, 10 43 C7 49, 12 54, 10 60";
+    const rightLeadD = "M10 0 C8 7, 16 13, 12 21 C8 28, 16 34, 13 42 C10 48, 13 54, 11 60";
+    const rightSnapD = "M10 0 C9 8, 17 15, 13 23 C9 30, 17 36, 14 44 C11 50, 14 55, 12 60";
+    const centerRecoverD = "M10 0 C7 8, 15 14, 10 22 C6 29, 13 35, 9 43 C7 49, 12 54, 10 60";
+    const leftLeadD = "M10 0 C4 8, 12 14, 7 22 C3 29, 12 35, 8 43 C5 49, 11 54, 9 60";
+    const leftSnapD = "M10 0 C3 9, 11 15, 6 23 C2 30, 11 36, 7 44 C4 50, 10 55, 8 60";
+    const centerSettleD = "M10 0 C6 8, 14 14, 9 22 C5 29, 13 35, 9 43 C7 49, 12 54, 10 60";
+
+    path.setAttribute("d", basePathD);
+    path.setAttribute("class", "wiggle-path");
     path.setAttribute("stroke", "#444");
     path.setAttribute("stroke-width", "2");
     path.setAttribute("fill", "none");
+
+    if (animationsEnabled) {
+      const bendAnimate = document.createElementNS(svgNS, "animate");
+      bendAnimate.setAttribute("attributeName", "d");
+      bendAnimate.setAttribute("dur", floatDuration);
+      bendAnimate.setAttribute("begin", floatDelay);
+      bendAnimate.setAttribute("repeatCount", "indefinite");
+      bendAnimate.setAttribute(
+        "values",
+        `${basePathD};${rightLeadD};${rightSnapD};${centerRecoverD};${leftLeadD};${leftSnapD};${centerSettleD};${basePathD}`
+      );
+      bendAnimate.setAttribute("keyTimes", "0;0.14;0.24;0.42;0.62;0.74;0.9;1");
+      bendAnimate.setAttribute("calcMode", "spline");
+      bendAnimate.setAttribute(
+        "keySplines",
+        "0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1"
+      );
+      path.appendChild(bendAnimate);
+    }
+
     stringSVG.appendChild(path);
 
     floatGroup.appendChild(swatch);
@@ -184,9 +437,17 @@ function renderSelectedPalette() {
       updateSwatchHighlights();
     });
 
+    swatch.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        swatch.click();
+      }
+    });
+
     paletteColorsContainer.appendChild(swatchWrapper);
   });
 
+  updatePaletteUIState();
   savePaletteToLocalStorage();
 }
 
@@ -211,6 +472,25 @@ function updateSwatchHighlights() {
   });
 }
 
+function updatePaletteUIState() {
+  const countBadge = document.getElementById('palette-count');
+  const clearButton = document.getElementById('clear-palette');
+  const shareButtonEl = document.getElementById('share-palette');
+  const shuffleButton = document.getElementById('shuffle-palette');
+  const zoomButtonEl = document.getElementById('zoom-palette');
+
+  const count = selectedPalette.length;
+  if (countBadge) {
+    countBadge.textContent = `${count} selected`;
+  }
+
+  const hasSelection = count > 0;
+  [clearButton, shareButtonEl, shuffleButton, zoomButtonEl].forEach(button => {
+    if (!button) return;
+    button.disabled = !hasSelection;
+  });
+}
+
 /**
  * Determines if a hex color is light or dark to decide on border visibility.
  * @param {string} hex - The hex color code (e.g., "#FFFFFF").
@@ -218,9 +498,16 @@ function updateSwatchHighlights() {
  */
 function isLightColor(hex) {
   if (!hex) return false;
-  const rgb = hex.replace('#', '').match(/.{1,2}/g).map(x => parseInt(x, 16));
+  return getPerceivedBrightness(hex) > 220;
-  const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+}
-  return brightness > 220;
+
+function getPerceivedBrightness(hex) {
+  if (!hex) return 0;
+  const normalized = hex.replace('#', '');
+  const pairs = normalized.match(/.{1,2}/g);
+  if (!pairs || pairs.length < 3) return 0;
+  const rgb = pairs.map(x => parseInt(x, 16));
+  return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
 }
 
 /**
@@ -275,7 +562,47 @@ function initializePaletteOnLoad(allColorData) {
 
 // --- Event Listeners ---
 
-document.getElementById('clear-palette').addEventListener('click', () => {
+const shareButton = document.getElementById('share-palette');
+const modalBackdrop = document.querySelector('.palette-modal-backdrop');
+const closeModalButton = document.getElementById('close-modal');
+const modalColorList = document.getElementById('modal-color-list');
+const presetButton = document.getElementById('preset-palettes');
+const presetModalBackdrop = document.querySelector('.preset-modal-backdrop');
+const closePresetModalButton = document.getElementById('close-preset-modal');
+
+function syncModalInteractionLock() {
+  const shareOpen = modalBackdrop && getComputedStyle(modalBackdrop).display !== 'none';
+  const presetOpen = presetModalBackdrop && getComputedStyle(presetModalBackdrop).display !== 'none';
+  const zoomOpen = zoomOverlay && zoomOverlay.classList.contains('is-active');
+  document.body.classList.toggle('modal-open', Boolean(shareOpen || presetOpen || zoomOpen));
+}
+
+async function confirmClearPalette() {
+  if (typeof Swal !== 'undefined' && Swal.fire) {
+    const result = await Swal.fire({
+      title: 'Clear palette?',
+      text: 'This removes all selected balloons from your palette.',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonText: 'Clear Palette',
+      cancelButtonText: 'Cancel',
+      reverseButtons: true,
+      confirmButtonColor: '#0ea7a0',
+      background: '#fffdf7',
+      color: '#15384c'
+    });
+    return result.isConfirmed;
+  }
+
+  return confirm('Are you sure you want to clear your entire palette?');
+}
+
+// --- Event Listeners ---
+
+document.getElementById('clear-palette').addEventListener('click', async () => {
+  const shouldClear = await confirmClearPalette();
+  if (!shouldClear) return;
+
   selectedPalette = [];
   renderSelectedPalette();
   updateSwatchHighlights();
@@ -293,10 +620,18 @@ document.getElementById('shuffle-palette').addEventListener('click', () => {
 
 // --- Modal Functionality ---
 
-const shareButton = document.getElementById('share-palette');
+function openPresetModal() {
-const modalBackdrop = document.querySelector('.palette-modal-backdrop');
+  renderPresetPaletteModal();
-const closeModalButton = document.getElementById('close-modal');
+  presetModalBackdrop.style.display = 'flex';
-const modalColorList = document.getElementById('modal-color-list');
+  presetModalBackdrop.setAttribute('aria-hidden', 'false');
+  syncModalInteractionLock();
+}
+
+function closePresetModal() {
+  presetModalBackdrop.style.display = 'none';
+  presetModalBackdrop.setAttribute('aria-hidden', 'true');
+  syncModalInteractionLock();
+}
 
 shareButton.addEventListener('click', () => {
   if (selectedPalette.length === 0) {
@@ -329,23 +664,96 @@ shareButton.addEventListener('click', () => {
   });
 
   modalBackdrop.style.display = 'flex';
+  syncModalInteractionLock();
 });
 
 closeModalButton.addEventListener('click', () => {
   modalBackdrop.style.display = 'none';
+  syncModalInteractionLock();
 });
 
 modalBackdrop.addEventListener('click', (event) => {
   if (event.target === modalBackdrop) {
     modalBackdrop.style.display = 'none';
+    syncModalInteractionLock();
   }
 });
 
+if (presetButton && presetModalBackdrop && closePresetModalButton) {
+  presetButton.addEventListener('click', openPresetModal);
+  closePresetModalButton.addEventListener('click', closePresetModal);
+  presetModalBackdrop.addEventListener('click', (event) => {
+    if (event.target === presetModalBackdrop) {
+      closePresetModal();
+    }
+  });
+}
+
 // --- Zoom Palette Functionality ---
 
 const zoomButton = document.getElementById('zoom-palette');
 const zoomOverlay = document.getElementById('zoom-overlay');
 const zoomedPaletteContent = document.getElementById('zoomed-palette-content');
+const zoomCloseButton = document.getElementById('zoom-close');
+
+function renderZoomPaletteComparison() {
+  zoomedPaletteContent.innerHTML = '';
+
+  const grid = document.createElement('div');
+  grid.classList.add('zoom-palette-grid');
+
+  selectedPalette.forEach(color => {
+    const card = document.createElement('div');
+    card.classList.add('zoom-color-card');
+
+    const balloonWrap = document.createElement('div');
+    balloonWrap.classList.add('zoom-balloon-wrap');
+
+    const swatch = document.createElement('div');
+    swatch.classList.add('color-swatch', 'zoom-color-balloon');
+    swatch.dataset.color = color.hex;
+
+    const backgroundDiv = document.createElement('div');
+    backgroundDiv.classList.add('color-background', 'chosen');
+
+    if (color.image) {
+      backgroundDiv.style.backgroundImage = `url(${color.image})`;
+    } else {
+      backgroundDiv.style.backgroundColor = color.hex;
+    }
+
+    if (color.metallic) {
+      backgroundDiv.classList.add('metallic');
+      if (color.chromeType && !color.image) {
+        backgroundDiv.classList.add(`chrome-${color.chromeType}`);
+      }
+    }
+
+    const shineImg = document.createElement('img');
+    shineImg.classList.add('color-shine');
+    shineImg.src = "shine.svg";
+    shineImg.alt = "";
+
+    if (isLightColor(color.hex)) {
+      backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
+      shineImg.classList.add('has-halo');
+    }
+
+    swatch.appendChild(backgroundDiv);
+    swatch.appendChild(shineImg);
+    balloonWrap.appendChild(swatch);
+
+    const name = document.createElement('div');
+    name.classList.add('zoom-color-name');
+    name.textContent = color.name;
+
+    card.appendChild(balloonWrap);
+    card.appendChild(name);
+    grid.appendChild(card);
+  });
+
+  zoomedPaletteContent.appendChild(grid);
+}
 
 // --- Event Listener to OPEN the zoom view ---
 zoomButton.addEventListener('click', () => {
@@ -355,26 +763,18 @@ zoomButton.addEventListener('click', () => {
     return;
   }
  
-  // Get the original container of the colored balloons
+  // Build a utility-focused static comparison layout (no strings/motion)
-  const originalPaletteColors = document.getElementById('palette-colors');
+  renderZoomPaletteComparison();
- 
-  // Clear any old content and create a deep clone of the balloons
-  zoomedPaletteContent.innerHTML = '';
-  const clonedContent = originalPaletteColors.cloneNode(true);
- 
-  // The clone doesn't need its own ID
-  clonedContent.id = ''; 
- 
-  // Append the cloned balloons to our zoom container
-  zoomedPaletteContent.appendChild(clonedContent);
  
   // Show the overlay by adding the .is-active class
   zoomOverlay.classList.add('is-active');
+  syncModalInteractionLock();
 });
 
 // --- Function to CLOSE the zoom view ---
 function closeZoomView() {
   zoomOverlay.classList.remove('is-active');
+  syncModalInteractionLock();
 }
 
 // --- Two ways to CLOSE the view for easy access ---
@@ -387,9 +787,32 @@ zoomOverlay.addEventListener('click', (event) => {
   }
 });
 
-// 2. Press the 'Escape' key
+// 2. Click the close button
+zoomCloseButton.addEventListener('click', (event) => {
+  event.preventDefault();
+  closeZoomView();
+});
+
+// 3. Press the 'Escape' key
 document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape' && presetModalBackdrop?.style.display === 'flex') {
+    closePresetModal();
+    return;
+  }
   if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) {
     closeZoomView();
   }
 });
+
+// --- Mobile navbar burger (Bulma) ---
+const navbarBurger = document.querySelector('.navbar-burger');
+const navbarMenu = document.getElementById('navbarBasicExample');
+
+if (navbarBurger && navbarMenu) {
+  navbarBurger.addEventListener('click', () => {
+    navbarBurger.classList.toggle('is-active');
+    navbarMenu.classList.toggle('is-active');
+    const isExpanded = navbarBurger.classList.contains('is-active');
+    navbarBurger.setAttribute('aria-expanded', String(isExpanded));
+  });
+}