Add 'main-site/color-picker/' from commit '248d73a619ea4fbdca711a516f464cd0a505bfae'

git-subtree-dir: main-site/color-picker git-subtree-mainline: 21ebb9667b34023f8d563bf8fa2abf7f838f51d7 git-subtree-split: 248d73a619ea4fbdca711a516f464cd0a505bfae
2026-04-13 19:22:30 -04:00 · 2026-04-13 19:22:30 -04:00 · f58ae2c5f7
commit f58ae2c5f7
parent 21ebb9667b 248d73a619
36 changed files with 2899 additions and 0 deletions
--- a/main-site/color-picker/.vscode/settings.json
+++ b/main-site/color-picker/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5504
+}
--- a/main-site/color-picker/1shine.svg
+++ b/main-site/color-picker/1shine.svg
--- a/main-site/color-picker/assets/logo/BeachPartyBalloons-logo.webp
+++ b/main-site/color-picker/assets/logo/BeachPartyBalloons-logo.webp
--- a/main-site/color-picker/assets/pictures/asfalt-dark.png
+++ b/main-site/color-picker/assets/pictures/asfalt-dark.png
--- a/main-site/color-picker/color.css
+++ b/main-site/color-picker/color.css
--- a/main-site/color-picker/colors.json
+++ b/main-site/color-picker/colors.json
@ -0,0 +1,254 @@
+[
+  {
+    "family": "Whites & Neutrals",
+    "colors": [
+      { "name": "White", "hex": "#ffffff" },
+      { "name": "Retro White", "hex": "#e8e3d9" },
+      { "name": "Sand", "hex": "#e1d8c6" },
+      { "name": "Cameo", "hex": "#e9ccc8" },
+      { "name": "Grey", "hex": "#ced3d4" },
+      { "name": "Stone", "hex": "#989689" },
+      { "name": "Fog", "hex": "#6b9098" },
+      { "name": "Smoke", "hex": "#75777b" },
+      { "name": "Black", "hex": "#0b0d0f" }
+    ]
+  },
+  {
+    "family": "Pinks & Reds",
+    "colors": [
+      { "name": "Blush", "hex": "#fbd6c0" },
+      { "name": "Light Pink", "hex": "#fcccda" },
+      { "name": "Melon", "hex": "#fac4bc"},
+      { "name": "Rose Pink", "hex": "#d984a3" },
+      { "name": "Fuchsia", "hex": "#eb4799" },
+      { "name": "Aloha", "hex": "#e45c56" },
+      { "name": "Red", "hex": "#ef2a2f" },
+      { "name": "Pastel Magenta", "hex": "#B72E6C"},
+      { "name": "Coral", "hex": "#bd4b3b" },
+      { "name": "Wild Berry", "hex": "#79384c"},
+      { "name": "Maroon", "hex": "#80011f" }
+    ]
+  },
+  {
+    "family": "Oranges & Browns & Yellows",
+    "colors": [
+      { "name": "Pastel Yellow", "hex": "#fcfd96" },
+      { "name": "Yellow", "hex": "#f5e812" },
+      { "name": "Goldenrod", "hex": "#f7b615" },
+      { "name": "Orange", "hex": "#ef6b24" },
+      { "name":"Blended Brown","hex":"#c9aea0"},
+      { "name": "Coffee", "hex": "#957461" },
+      { "name": "Burnt Orange", "hex": "#9d4223" }
+    ]
+  },
+  {
+    "family": "Greens",
+    "colors": [
+      { "name": "Eucalyptus", "hex": "#a3bba3" },
+      { "name": "Pastel Green", "hex": "#acdba7" },
+      { "name": "Lime Green", "hex": "#8fc73e" },
+      { "name": "Seafoam", "hex": "#00c7b2" },
+      { "name": "Grass Green", "hex": "#28b35e" },
+      { "name": "Empowermint", "hex": "#779786" },
+      { "name": "Forest Green", "hex": "#218b21" },
+      { "name": "Willow", "hex": "#4a715c" }
+    ]
+  },
+  {
+    "family": "Blues",
+    "colors": [
+      { "name": "Sky Blue", "hex": "#87ceec" },
+      { "name": "Sea Glass", "hex": "#80a4bc" },
+      { "name": "Caribbean Blue", "hex": "#0bbbb6" },
+      { "name": "Medium Blue", "hex": "#1b89e8" },
+      { "name": "Blue Slate", "hex": "#327295" },
+      { "name": "Tropical Teal", "hex": "#0d868f" },
+      { "name": "Royal Blue", "hex": "#005eb7" },
+      { "name": "Dark Blue", "hex": "#26408e" },
+      { "name": "Navy", "hex": "#262266" }
+    ]
+  },
+  {
+    "family": "Purples",
+    "colors": [
+      { "name": "Pastel Dusk", "hex": "#d7c4c8" },
+      { "name": "Lilac", "hex": "#c69edb" },
+      { "name": "Canyon Rose", "hex": "#ca93b3" },
+      { "name": "Rosewood", "hex": "#ad7271" },
+      { "name": "Lavender", "hex": "#866c92" },
+      { "name": "Orchid", "hex": "#a42487" },
+      { "name": "Violet", "hex": "#812a8c" }
+    ]
+  },
+  {
+    "family": "Pearl and Matallic Colors",
+    "colors": [
+      {
+        "name": "Pearl White",
+        "hex": "#F8F8F8",
+        "metallic": true,
+        "pearlType": "white",
+        "image": "images/pearl-white.webp"
+      },
+      {
+        "name": "Classic Silver",
+        "hex": "#C0C0C0",
+        "metallic": true,
+        "pearlType": "silver",
+        "image": "images/classic-silver.webp"
+      },
+      {
+        "name": "Pearl Pink",
+        "hex": "#F4C2D0",
+        "metallic": true,
+        "pearlType": "pink",
+        "image": "images/pearl-pink.webp"
+      },
+      {
+        "name": "Pearl Peach",
+        "hex": "#F4D2C2",
+        "metallic": true,
+        "pearlType": "pink",
+        "image": "images/pearl-peach.webp"
+      },
+      {
+        "name": "Classic Rose Gold",
+        "hex": "#B76E79",
+        "metallic": true,
+        "pearlType": "pink",
+        "image": "images/metalic-rosegold.webp"
+      },
+      {
+        "name": "Pearl Lilac",
+        "hex": "#C8A2C8",
+        "metallic": true,
+        "pearlType": "lilac",
+        "image": "images/pearl-lilac.webp"
+      },
+      {
+        "name": "Pearl Light Blue",
+        "hex": "#87CEEB",
+        "metallic": true,
+        "pearlType": "blue",
+        "image": "images/pearl-lightblue.webp"
+      },
+      {
+        "name": "Pearl Periwinkle",
+        "hex": "#CCCCFF",
+        "metallic": true,
+        "pearlType": "blue",
+        "image": "images/pearl-periwinkle.webp"
+      },
+      {
+        "name": "Pearl Fuchsia",
+        "hex": "#FD49AB",
+        "metallic": true,
+        "pearlType": "fuchsia",
+        "image": "images/pearl-fuchsia.webp"
+      },
+      {
+        "name": "Pearl Violet",
+        "hex": "#8F00FF",
+        "metallic": true,
+        "pearlType": "violet",
+        "image": "images/pearl-violet.webp"
+      },
+      {
+        "name": "Pearl Sapphire",
+        "hex": "#0F52BA",
+        "metallic": true,
+        "pearlType": "sapphire",
+        "image": "images/pearl-sapphire.webp"
+      },
+      {
+        "name": "Pearl Midnight Blue",
+        "hex": "#191970",
+        "metallic": true,
+        "pearlType": "midnight-blue",
+        "image": "images/pearl-midnightblue.webp"
+      },
+      {
+        "name": "Classic Gold",
+        "hex": "#E32636",
+        "metallic": true,
+        "pearlType": "gold",
+        "image": "images/classic-gold.webp"
+      }
+    ]
+  },
+  {
+    "family": "Chrome Colors",
+    "colors": [
+      {
+        "name": "Chrome Rose Gold",
+        "hex": "#B76E79",
+        "metallic": true,
+        "chromeType": "rosegold",
+        "image": "images/chrome-rosegold.webp"
+      },
+      {
+        "name": "Chrome Pink",
+        "hex": "#FF69B4",
+        "metallic": true,
+        "chromeType": "rosegold",
+        "image": "images/chrome-pink.webp"
+      },
+      {
+        "name": "Chrome Purple",
+        "hex": "#DFFF00",
+        "metallic": true,
+        "chromeType": "purple",
+        "image": "images/chrome-purple.webp"
+      },
+      {
+        "name": "Chrome Champagne",
+        "hex": "#F7E7CE",
+        "metallic": true,
+        "chromeType": "champagne",
+        "image": "images/chrome-champagne.webp"
+      },
+      {
+        "name": "Chrome Truffle",
+        "hex": "#D2B48C",
+        "metallic": true,
+        "chromeType": "champagne",
+        "image": "images/chrome-truffle.webp"
+      },
+      {
+        "name": "Chrome Silver",
+        "hex": "#C0C0C0",
+        "metallic": true,
+        "chromeType": "silver",
+        "image": "images/chrome-silver.webp"
+      },
+      {
+        "name": "Chrome Space Grey",
+        "hex": "#5C5C5C",
+        "metallic": true,
+        "chromeType": "spacegrey",
+        "image": "images/chrome-spacegrey.webp"
+      },
+      {
+        "name": "Chrome Gold",
+        "hex": "#a18b67",
+        "metallic": true,
+        "chromeType": "gold",
+        "image": "images/chrome-gold.webp"
+      },
+      {
+        "name": "Chrome Green",
+        "hex": "#457066",
+        "metallic": true,
+        "chromeType": "green",
+        "image": "images/chrome-green.webp"
+      },
+      {
+        "name": "Chrome Blue",
+        "hex": "#2d576f",
+        "metallic": true,
+        "chromeType": "blue",
+        "image": "images/chrome-blue.webp"
+      }
+    ]
+  }
+]
--- a/main-site/color-picker/images/1balloon-mask.svg
+++ b/main-site/color-picker/images/1balloon-mask.svg
@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="12in"
+   height="12in"
+   viewBox="0 0 39.999867 39.999867"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xml:space="preserve"
+   sodipodi:docname="balloon-mask1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="true"
+     inkscape:pageopacity="0.00392157"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="in"
+     showgrid="true"
+     inkscape:zoom="0.93262836"
+     inkscape:cx="847.06839"
+     inkscape:cy="614.39264"
+     inkscape:window-width="2560"
+     inkscape:window-height="1532"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:pageshadow="2"
+     inkscape:lockguides="false"
+     showborder="true"
+     inkscape:snap-global="false"><inkscape:grid
+       id="grid1"
+       units="in"
+       originx="0"
+       originy="0"
+       spacingx="3.3333222"
+       spacingy="3.3333222"
+       empcolor="#0099e5"
+       empopacity="0.41176471"
+       color="#e51100"
+       opacity="0.30196078"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="true"
+       snapvisiblegridlinesonly="true"
+       enabled="true" /></sodipodi:namedview><defs
+     id="defs1"><color-profile
+       name="Built-in-display"
+       xlink:href="../../../.local/share/icc/edid-88fcf6ba6729e8e4531280899cfccbad.icc"
+       id="color-profile3338" /><color-profile
+       name="Built-in-display"
+       xlink:href="../../../.local/share/icc/edid-88fcf6ba6729e8e4531280899cfccbad.icc"
+       id="color-profile3340" /></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><path
+       style="fill:#ffffff;stroke:#000000;stroke-width:0;stroke-linejoin:round;stroke-dashoffset:297.6;paint-order:stroke markers fill"
+       d="m 21.227687,32.109589 c 0.624172,-0.03563 0.710957,-0.06698 0.809593,-0.292541 0.111029,-0.253897 0.09912,-0.307345 -0.240234,-1.078141 -0.174461,-0.396274 -0.294294,-0.741734 -0.2663,-0.76769 0.028,-0.02596 0.228136,-0.112851 0.44475,-0.193094 1.995094,-0.739052 3.728405,-2.506163 5.411409,-5.516916 1.220107,-2.182667 2.190925,-4.927783 2.72858,-7.715409 0.205455,-1.065242 0.27528,-3.230083 0.132803,-4.117189 -0.92694,-5.3136132 -5.113634,-8.7321766 -9.099685,-8.8288819 -1.386756,-0.032517 -1.869622,0.036057 -2.992621,0.4247129 -3.317278,1.1480578 -5.807323,4.2711432 -6.501356,8.154187 -0.262848,1.470608 -0.187185,3.472708 0.205696,5.44264 0.625764,3.137673 1.896442,6.36622 3.388147,8.608653 0.43191,0.649277 1.544521,1.935737 2.054649,2.375694 0.442106,0.381296 1.399196,0.967298 1.866288,1.142685 0.188138,0.07064 0.341629,0.146181 0.341096,0.167867 -5.41e-4,0.02169 -0.143212,0.330201 -0.317063,0.685577 -0.403624,0.825076 -0.418669,1.148088 -0.06362,1.36587 0.156034,0.09572 1.415279,0.180933 2.097874,0.141981 z"
+       id="path2013"
+       sodipodi:nodetypes="sssssssccssssssssss" /></g></svg>
--- a/main-site/color-picker/images/balloon-mask(1).svg
+++ b/main-site/color-picker/images/balloon-mask(1).svg
@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="266.66666"
+   height="266.66666"
+   viewBox="0 0 266.66666 266.66666"
+   sodipodi:docname="970844-200.png"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   inkscape:dataloss="true"
+   inkscape:export-filename="balloon.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.8537501"
+     inkscape:cx="133.33333"
+     inkscape:cy="133.33333"
+     inkscape:window-width="1913"
+     inkscape:window-height="965"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g1" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1">
+    <path
+       style="fill:#000000"
+       d="m 110.86728,176.98292 c -4.14002,0 -4.72369,-2.23401 -2.50756,-9.59765 l 1.86611,-6.20063 -6.64984,-2.17505 C 79.220392,151.04328 59.783306,123.31229 54.44661,88.916447 50.643745,64.406394 58.908048,38.185685 75.880855,20.91057 112.83686,-16.70367 169.04213,6.1526753 179.48832,63.043415 c 1.80388,9.824085 1.93369,13.895611 0.74359,23.324138 -3.90357,30.925927 -19.83967,57.568167 -41.24178,68.948697 -4.48207,2.38333 -8.96523,4.34252 -9.96258,4.35375 -4.50331,0.0507 -5.26813,1.96681 -3.1647,7.92856 2.23565,6.33649 1.10587,9.38436 -3.47859,9.38436 z"
+       id="path1"
+       sodipodi:nodetypes="sscssssssssss" />
+  </g>
+</svg>
--- a/main-site/color-picker/images/balloon-mask.svg
+++ b/main-site/color-picker/images/balloon-mask.svg
@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="266.66666"
+   height="266.66666"
+   viewBox="0 0 266.66666 266.66666"
+   sodipodi:docname="970844-200.png"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   inkscape:dataloss="true"
+   inkscape:export-filename="balloon.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.8537501"
+     inkscape:cx="133.33333"
+     inkscape:cy="133.33333"
+     inkscape:window-width="1913"
+     inkscape:window-height="965"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g1" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1">
+    <path
+       style="fill:#000000"
+       d="m 110.86728,176.98292 c -4.14002,0 -4.72369,-2.23401 -2.50756,-9.59765 l 1.86611,-6.20063 -6.64984,-2.17505 C 79.220392,151.04328 59.783306,123.31229 54.44661,88.916447 50.643745,64.406394 58.908048,38.185685 75.880855,20.91057 112.83686,-16.70367 169.04213,6.1526753 179.48832,63.043415 c 1.80388,9.824085 1.93369,13.895611 0.74359,23.324138 -3.90357,30.925927 -19.83967,57.568167 -41.24178,68.948697 -4.48207,2.38333 -8.96523,4.34252 -9.96258,4.35375 -4.50331,0.0507 -5.26813,1.96681 -3.1647,7.92856 2.23565,6.33649 1.10587,9.38436 -3.47859,9.38436 z"
+       id="path1"
+       sodipodi:nodetypes="sscssssssssss" />
+  </g>
+</svg>
--- a/main-site/color-picker/images/chrome-blue.webp
+++ b/main-site/color-picker/images/chrome-blue.webp
--- a/main-site/color-picker/images/chrome-champagne.webp
+++ b/main-site/color-picker/images/chrome-champagne.webp
--- a/main-site/color-picker/images/chrome-gold.webp
+++ b/main-site/color-picker/images/chrome-gold.webp
--- a/main-site/color-picker/images/chrome-green.webp
+++ b/main-site/color-picker/images/chrome-green.webp
--- a/main-site/color-picker/images/chrome-pink.webp
+++ b/main-site/color-picker/images/chrome-pink.webp
--- a/main-site/color-picker/images/chrome-purple.webp
+++ b/main-site/color-picker/images/chrome-purple.webp
--- a/main-site/color-picker/images/chrome-rosegold.webp
+++ b/main-site/color-picker/images/chrome-rosegold.webp
--- a/main-site/color-picker/images/chrome-silver.webp
+++ b/main-site/color-picker/images/chrome-silver.webp
--- a/main-site/color-picker/images/chrome-spacegrey.webp
+++ b/main-site/color-picker/images/chrome-spacegrey.webp
--- a/main-site/color-picker/images/chrome-truffle.webp
+++ b/main-site/color-picker/images/chrome-truffle.webp
--- a/main-site/color-picker/images/classic-gold.webp
+++ b/main-site/color-picker/images/classic-gold.webp
--- a/main-site/color-picker/images/classic-silver.webp
+++ b/main-site/color-picker/images/classic-silver.webp
--- a/main-site/color-picker/images/metalic-rosegold.webp
+++ b/main-site/color-picker/images/metalic-rosegold.webp
--- a/main-site/color-picker/images/pearl-fuchsia.webp
+++ b/main-site/color-picker/images/pearl-fuchsia.webp
--- a/main-site/color-picker/images/pearl-lightblue.webp
+++ b/main-site/color-picker/images/pearl-lightblue.webp
--- a/main-site/color-picker/images/pearl-lilac.webp
+++ b/main-site/color-picker/images/pearl-lilac.webp
--- a/main-site/color-picker/images/pearl-midnightblue.webp
+++ b/main-site/color-picker/images/pearl-midnightblue.webp
--- a/main-site/color-picker/images/pearl-peach.webp
+++ b/main-site/color-picker/images/pearl-peach.webp
--- a/main-site/color-picker/images/pearl-periwinkle.webp
+++ b/main-site/color-picker/images/pearl-periwinkle.webp
--- a/main-site/color-picker/images/pearl-pink.webp
+++ b/main-site/color-picker/images/pearl-pink.webp
--- a/main-site/color-picker/images/pearl-sapphire.webp
+++ b/main-site/color-picker/images/pearl-sapphire.webp
--- a/main-site/color-picker/images/pearl-violet.webp
+++ b/main-site/color-picker/images/pearl-violet.webp
--- a/main-site/color-picker/images/pearl-white.webp
+++ b/main-site/color-picker/images/pearl-white.webp
--- a/main-site/color-picker/index.html
+++ b/main-site/color-picker/index.html
@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Beach Party Balloons Color Palette Picker</title>
+  
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <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">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png">
+  <link rel="manifest" href="../assets/favicon/site.webmanifest">
+</head>
+
+<body> 
+  <nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand is-size-1">
+      <a class="navbar-item" href="/">
+           <img style="background-color: white;" src="../assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo"> 
+      </a>
+  
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+  
+    <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>
+        <a class="navbar-item" href="../gallery/">Gallery</a>
+        <a class="navbar-item is-active is-tab" href="../color/">Colors</a>
+        <a class="navbar-item" href="../contact/">Contact</a>
+      </div>
+    </div>
+  </nav>
+
+<main class="color-picker-app">
+    <section class="picker-layout">
+      <aside id="selected-palette" aria-label="Selected palette">
+        <div class="palette-header-row">
+          <div class="palette-title-group">
+            <h2 class="has-text-dark">Your Palette</h2>
+          </div>
+          <div id="palette-controls" aria-label="Palette controls">
+            <label class="switch" title="Toggle Animations" aria-label="Toggle animations">
+              <input type="checkbox" id="toggle-animation" checked>
+              <span class="slider"></span>
+            </label>
+            <button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette" aria-label="Shuffle palette">
+              <i class="fa-solid fa-shuffle"></i>
+            </button>
+            <button id="preset-palettes" class="palette-control-btn" title="Palette Ideas" aria-label="Palette ideas">
+              <i class="fa-solid fa-palette"></i>
+            </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 class="palette-meta-row">
+          <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>
+    <p>Made with 🎨 and 🎈 | Chris © 2025</p>
+  </footer>
+
+  <div class="palette-modal-backdrop">
+    <div class="palette-modal">
+      <h3>Share Your Palette</h3>
+      <div id="modal-color-list"></div>
+      <button id="close-modal">Close</button>
+    </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="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>
+
+</body>
+</html>
--- a/main-site/color-picker/list.txt
+++ b/main-site/color-picker/list.txt
@ -0,0 +1,64 @@
+Retro White  #e8e3d9
+White  #ffffff
+Cameo  #e9ccc8
+Sand  #e1d8c6
+Stone  #8f8d7c
+Willow  #497259
+Latte  #a97d55
+Smoke  #75777b
+Grey  #ced3d4
+Light Pink  #fcccda
+Blush  #ecccad
+Rose Pink  #d984a3
+Fuchsia  #eb4799
+Rosewood  #ad7271
+Cayon Rose  #ca93b3
+Coral  #bd4b3b
+Rose Gold
+Aloha  #e45c56
+Red  #ef2a2f
+Maroon  #80011f
+Burnt Orange  #9d4223
+Orange  #ef6b24
+Goldenrod  #f7b615
+Yellow  #f5e812
+Pastel Yellow  #fcfd96
+Lime Green  #8fc73e
+Grass Green  #28b35e
+Seafoam  #00c7b2
+Pastel Green  #acdba7
+Forest Green  #218b21
+Orchid  #a42487
+Sky Blue  #c6e9e8
+Medium Blue  #1b89e8
+Royal Blue  #005eb7
+Blue Slate  #327295
+Caribbean Blue  #0bbbb6
+Tropical Teal  #0d868f
+Dark Blue  #26408e
+Navy  #262266
+Violet  #812a8c
+Lavender  #866c92
+Lilac #c69edb
+Coffee  #957461
+Classic Gold #dea85e
+Fog  #6b9098
+Empowermint  #779786
+Ecualyptus  #497259
+Pastel Dusk #d7c4c8
+black  #0b0d0f
+
+Pearl White
+Pearl Midnight Blue
+Pearl Fuchsia
+Pearl Periwinkle
+Pearl Sapphire
+Pearl Violet
+Pearl Lilac
+Pearl Blue
+Pearl Green
+Pearl Pink
+Pearl Fuchsia
+Pearl Red
+
+Wildberry
--- a/main-site/color-picker/script.js
+++ b/main-site/color-picker/script.js
@ -0,0 +1,818 @@
+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
+const savedPaletteJSON = localStorage.getItem('userPalette');
+if (savedPaletteJSON) {
+  try {
+    selectedPalette = JSON.parse(savedPaletteJSON);
+  } catch (e) {
+    console.error("Error parsing saved palette from Local Storage", e);
+    selectedPalette = []; // Reset if data is corrupt
+  }
+}
+
+// Main function to fetch color data and build the page
+fetch('colors.json')
+  .then(response => response.json())
+  .then(data => {
+    allColorFamilies = data;
+    renderColorFamilies();
+    initializeLibraryControls();
+
+    // 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.
+ */
+function savePaletteToLocalStorage() {
+  localStorage.setItem('userPalette', JSON.stringify(selectedPalette));
+}
+
+/**
+ * Renders the selected colors as floating balloons in the top palette.
+ */
+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) {
+      floatDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
+      floatDelay = `${(Math.random() * 2).toFixed(2)}s`;
+      floatGroup.style.animationDuration = floatDuration;
+      floatGroup.style.animationDelay = floatDelay;
+    } else {
+      floatGroup.style.animation = 'none';
+    }
+
+    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');
+
+    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);
+
+    const svgNS = "http://www.w3.org/2000/svg";
+    const stringSVG = document.createElementNS(svgNS, "svg");
+    stringSVG.setAttribute("class", "balloon-string-svg");
+    stringSVG.setAttribute("viewBox", "0 0 20 60");
+    const path = document.createElementNS(svgNS, "path");
+    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);
+    floatGroup.appendChild(stringSVG);
+    swatchWrapper.appendChild(floatGroup);
+
+    const colorName = document.createElement('span');
+    colorName.classList.add('color-name', 'highlighted-name');
+    colorName.textContent = color.name;
+    swatchWrapper.appendChild(colorName);
+
+    swatch.addEventListener('click', () => {
+      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
+      renderSelectedPalette();
+      updateSwatchHighlights();
+    });
+
+    swatch.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        swatch.click();
+      }
+    });
+
+    paletteColorsContainer.appendChild(swatchWrapper);
+  });
+
+  updatePaletteUIState();
+  savePaletteToLocalStorage();
+}
+
+/**
+ * Updates the visual highlight on the main color swatches to show which are selected.
+ */
+function updateSwatchHighlights() {
+  const allSwatches = document.querySelectorAll('#color-families .color-swatch');
+  allSwatches.forEach(swatch => {
+    const color = swatch.dataset.color;
+    const background = swatch.querySelector('.color-background');
+    const nameEl = swatch.parentElement.querySelector('.color-name');
+    const isSelected = selectedPalette.some(c => c.hex === color);
+
+    if (isSelected) {
+      background.classList.add('chosen');
+      nameEl.classList.add('highlighted-name');
+    } else {
+      background.classList.remove('chosen');
+      nameEl.classList.remove('highlighted-name');
+    }
+  });
+}
+
+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").
+ * @returns {boolean} - True if the color is light, false otherwise.
+ */
+function isLightColor(hex) {
+  if (!hex) return false;
+  return getPerceivedBrightness(hex) > 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;
+}
+
+/**
+ * Shuffles an array in place.
+ * @param {Array} array - The array to shuffle.
+ * @returns {Array} - The shuffled array.
+ */
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+/**
+ * Initializes the palette on page load, prioritizing a new shared URL
+ * over existing local storage, without overwriting it.
+ * @param {Array} allColorData - The entire array of color families from colors.json.
+ */
+function initializePaletteOnLoad(allColorData) {
+  const params = new URLSearchParams(window.location.search);
+  const colorsFromURL = params.get('colors');
+
+  // Check if a 'colors' parameter exists in the URL
+  if (colorsFromURL) {
+    console.log("Loading palette from share link for this session...");
+    const flatColorList = allColorData.flatMap(family => family.colors);
+    const hexCodesFromURL = colorsFromURL.split(',');
+    const paletteFromURL = hexCodesFromURL.map(hex => {
+      return flatColorList.find(color => color.hex === `#${hex}`);
+    }).filter(Boolean);
+
+    if (paletteFromURL.length > 0) {
+      selectedPalette = paletteFromURL; // Load for viewing
+    }
+    
+    // Clean the address bar but DO NOT save to local storage yet
+    history.replaceState(null, '', window.location.pathname);
+  }
+  // If no URL parameter, the existing palette from local storage is used by default.
+  else {
+    console.log("Loading palette from Local Storage.");
+  }
+
+  // Render whatever palette was decided upon (from URL or local storage).
+  // The render function itself will only save when the palette is changed.
+  renderSelectedPalette(); 
+  updateSwatchHighlights();
+}
+
+
+// --- Event Listeners ---
+
+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();
+});
+
+document.getElementById('toggle-animation').addEventListener('click', (e) => {
+  animationsEnabled = e.target.checked;
+  renderSelectedPalette();
+});
+
+document.getElementById('shuffle-palette').addEventListener('click', () => {
+  selectedPalette = shuffleArray(selectedPalette);
+  renderSelectedPalette();
+});
+
+// --- Modal Functionality ---
+
+function openPresetModal() {
+  renderPresetPaletteModal();
+  presetModalBackdrop.style.display = 'flex';
+  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) {
+    alert("Your palette is empty! Add some colors to create a shareable link.");
+    return;
+  }
+
+  const baseURL = window.location.href.split('?')[0];
+  const colorParams = selectedPalette.map(color => color.hex.substring(1)).join(',');
+  const shareableLink = `${baseURL}?colors=${colorParams}`;
+
+  modalColorList.innerHTML = `
+    <p>Copy this link to share your palette:</p>
+    <input type="text" id="share-link-input" value="${shareableLink}" readonly>
+    <button id="copy-link-button">Copy Link</button>
+  `;
+
+  document.getElementById('copy-link-button').addEventListener('click', () => {
+    const linkInput = document.getElementById('share-link-input');
+    navigator.clipboard.writeText(linkInput.value).then(() => {
+      const copyButton = document.getElementById('copy-link-button');
+      copyButton.textContent = 'Copied! ✅';
+      setTimeout(() => {
+        copyButton.textContent = 'Copy Link';
+      }, 2000);
+    }).catch(err => {
+      console.error('Failed to copy link: ', err);
+      alert('Failed to copy link.');
+    });
+  });
+
+  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', () => {
+  // Don't do anything if the palette is empty
+  if (selectedPalette.length === 0) {
+    alert("Palette is empty. Add some colors to zoom in!");
+    return;
+  }
+ 
+  // Build a utility-focused static comparison layout (no strings/motion)
+  renderZoomPaletteComparison();
+ 
+  // 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 ---
+
+// 1. Click on the dark background (the overlay itself)
+zoomOverlay.addEventListener('click', (event) => {
+  // Only close if the click is on the overlay, not the content inside
+  if (event.target === zoomOverlay) {
+    closeZoomView();
+  }
+});
+
+// 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));
+  });
+}
--- a/main-site/color-picker/shine.svg
+++ b/main-site/color-picker/shine.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12in" height="12in" version="1.1" viewBox="0 0 40 40" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#fff"><ellipse cx="13.333" cy="5" rx="3.3333" ry="1.6667" stroke-width="0" style="paint-order:stroke markers fill"/><path d="m-24.93-4.1667c1.0417 0 1.7361 1.3889 1.7361 2.4305s-0.69444 1.7361-1.7361 1.7361-1.7361-0.69444-1.7361-1.7361 0.69444-2.4305 1.7361-2.4305z" stroke-width=".034722"/></g></svg>