diff --git a/main-site/color-picker/.vscode/settings.json b/main-site/color-picker/.vscode/settings.json
new file mode 100644
index 0000000..a0de46f
--- /dev/null
+++ b/main-site/color-picker/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5504
+}
\ No newline at end of file
diff --git a/main-site/color-picker/1shine.svg b/main-site/color-picker/1shine.svg
new file mode 100644
index 0000000..62218e2
Binary files /dev/null and b/main-site/color-picker/1shine.svg differ
diff --git a/main-site/color-picker/assets/logo/BeachPartyBalloons-logo.webp b/main-site/color-picker/assets/logo/BeachPartyBalloons-logo.webp
new file mode 100644
index 0000000..4dc4ebb
Binary files /dev/null and b/main-site/color-picker/assets/logo/BeachPartyBalloons-logo.webp differ
diff --git a/main-site/color-picker/assets/pictures/asfalt-dark.png b/main-site/color-picker/assets/pictures/asfalt-dark.png
new file mode 100644
index 0000000..286f884
Binary files /dev/null and b/main-site/color-picker/assets/pictures/asfalt-dark.png differ
diff --git a/main-site/color-picker/color.css b/main-site/color-picker/color.css
new file mode 100644
index 0000000..284ef8e
--- /dev/null
+++ b/main-site/color-picker/color.css
@@ -0,0 +1,1451 @@
+:root {
+ --bpb-bg: #efe8d7;
+ --bpb-bg-2: #f8f5ea;
+ --bpb-panel: rgba(255, 253, 247, 0.92);
+ --bpb-panel-strong: #fffdf7;
+ --bpb-border: #e4dbc1;
+ --bpb-border-strong: #d7cbab;
+ --bpb-text: #183348;
+ --bpb-muted: #5f6f78;
+ --bpb-accent: #0ea7a0;
+ --bpb-accent-strong: #0a7f7b;
+ --bpb-shadow: 0 12px 28px rgba(28, 40, 64, 0.1);
+ --bpb-shadow-strong: 0 18px 38px rgba(28, 40, 64, 0.16);
+ --radius-lg: 18px;
+ --radius-md: 14px;
+ --radius-sm: 10px;
+ --compare-bg: #e2e5e8;
+ --compare-bg-2: #d8dde2;
+ --compare-border: #bfc7cf;
+
+ --swatch-w: 108px;
+ --swatch-h: 148px;
+ --palette-swatch-w: 90px;
+ --palette-swatch-h: 124px;
+ --string-top: 88px;
+ --palette-string-top: 72px;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ min-height: 100%;
+}
+
+body {
+ font-family: "Autour One", serif;
+ color: var(--bpb-text);
+ background:
+ radial-gradient(circle at 12% 12%, rgba(255, 248, 221, 0.95), rgba(255, 248, 221, 0) 42%),
+ radial-gradient(circle at 88% 2%, rgba(14, 167, 160, 0.12), rgba(14, 167, 160, 0) 28%),
+ linear-gradient(180deg, #f4efdf 0%, var(--bpb-bg) 36%, #ebe3cf 100%);
+}
+
+body.modal-open {
+ overflow: hidden;
+ overscroll-behavior: none;
+}
+
+body.modal-open > *:not(.palette-modal-backdrop):not(.preset-modal-backdrop):not(#zoom-overlay):not(script) {
+ pointer-events: none;
+}
+
+.navbar {
+ background: rgba(14, 167, 160, 0.94) !important;
+ backdrop-filter: blur(6px);
+}
+
+.navbar .navbar-item,
+.navbar .navbar-link {
+ color: #08383b;
+ font-weight: 700;
+}
+
+.navbar .navbar-item.is-active,
+.navbar .navbar-item:hover {
+ background: rgba(255, 255, 255, 0.28) !important;
+ color: #072d2f !important;
+}
+
+.navbar-brand .navbar-item img {
+ max-height: 2.5rem;
+ border-radius: 8px;
+ padding: 4px;
+}
+
+.color-picker-app {
+ width: min(1240px, calc(100% - 20px));
+ margin: 14px auto 24px;
+ display: grid;
+ gap: 16px;
+}
+
+.page-hero {
+ position: relative;
+ overflow: clip;
+ display: grid;
+ grid-template-columns: 1.2fr minmax(140px, 220px);
+ gap: 12px;
+ align-items: center;
+ padding: 16px 18px;
+ background:
+ linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 251, 240, 0.92)),
+ url('assets/pictures/asfalt-light.png');
+ border: 1px solid var(--bpb-border);
+ border-radius: 20px;
+ box-shadow: var(--bpb-shadow);
+}
+
+.page-hero::after {
+ content: "";
+ position: absolute;
+ inset: auto -60px -60px auto;
+ width: 180px;
+ height: 180px;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(14, 167, 160, 0.18), rgba(14, 167, 160, 0));
+ pointer-events: none;
+}
+
+.eyebrow {
+ margin: 0 0 6px;
+ color: var(--bpb-accent-strong);
+ font-size: 0.78rem;
+ letter-spacing: 0.04em;
+}
+
+.page-hero h1 {
+ margin: 0;
+ font-size: clamp(1.1rem, 2.8vw, 1.8rem);
+ line-height: 1.15;
+ color: #14354a;
+}
+
+.page-hero-text {
+ margin: 8px 0 0;
+ font-size: 0.88rem;
+ line-height: 1.35;
+ color: var(--bpb-muted);
+}
+
+.hero-balloons {
+ position: relative;
+ min-height: 124px;
+ display: flex;
+ align-items: end;
+ justify-content: center;
+}
+
+.hero-balloon {
+ position: absolute;
+ width: 52px;
+ height: 74px;
+ border-radius: 50% 50% 48% 48% / 44% 44% 56% 56%;
+ box-shadow: 0 10px 18px rgba(25, 39, 60, 0.16);
+ animation: heroFloat 5.2s ease-in-out infinite;
+}
+
+.hero-balloon::before {
+ content: "";
+ position: absolute;
+ inset: 10px auto auto 10px;
+ width: 16px;
+ height: 10px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.55);
+ transform: rotate(-22deg);
+}
+
+.hero-balloon::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: calc(100% - 2px);
+ width: 1.5px;
+ height: 38px;
+ background: linear-gradient(180deg, rgba(78, 78, 78, 0.9), rgba(78, 78, 78, 0.1));
+ transform: translateX(-50%);
+}
+
+.hero-balloon-a {
+ background: linear-gradient(160deg, #fff4a5, #ffd25f 52%, #cf9d27);
+ transform: translate(-34px, 10px) rotate(-4deg);
+ animation-delay: -0.6s;
+}
+
+.hero-balloon-b {
+ background: linear-gradient(160deg, #d8f9ff, #6fd7eb 52%, #2694b6);
+ transform: translate(2px, -6px) rotate(5deg);
+ width: 58px;
+ height: 82px;
+ animation-duration: 4.8s;
+}
+
+.hero-balloon-c {
+ background: linear-gradient(160deg, #ffe4ee, #ff9dc1 54%, #cc5d86);
+ transform: translate(42px, 6px) rotate(7deg);
+ animation-delay: -1.4s;
+ animation-duration: 5.6s;
+}
+
+@keyframes heroFloat {
+ 0%, 100% { transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); }
+ 50% { transform: translate(var(--x, 0), calc(var(--y, 0) - 8px)) rotate(calc(var(--r, 0deg) * -1)); }
+}
+
+.hero-balloon-a { --x: -34px; --y: 10px; --r: -4deg; }
+.hero-balloon-b { --x: 2px; --y: -6px; --r: 5deg; }
+.hero-balloon-c { --x: 42px; --y: 6px; --r: 7deg; }
+
+.picker-layout {
+ display: grid;
+ grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
+ gap: 16px;
+ align-items: start;
+}
+
+#selected-palette {
+ position: sticky;
+ top: 10px;
+ z-index: 5;
+ display: grid;
+ gap: 12px;
+ padding: 14px;
+ background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,252,244,0.92));
+ border: 1px solid var(--bpb-border-strong);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--bpb-shadow);
+ backdrop-filter: blur(4px);
+ max-height: calc(100vh - 28px);
+}
+
+#selected-palette.stuck {
+ box-shadow: var(--bpb-shadow-strong);
+}
+
+.palette-header-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 10px;
+ align-items: start;
+}
+
+.palette-title-group h2 {
+ margin: 0;
+ font-size: 1.15rem;
+ color: #15384c;
+}
+
+.palette-subtitle {
+ margin: 4px 0 0;
+ font-size: 0.72rem;
+ line-height: 1.3;
+ color: var(--bpb-muted);
+}
+
+#palette-controls {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+}
+
+.palette-meta-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.palette-count-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 10px;
+ border-radius: 999px;
+ background: rgba(14, 167, 160, 0.1);
+ border: 1px solid rgba(14, 167, 160, 0.25);
+ color: #0b6561;
+ font-size: 0.76rem;
+}
+
+.palette-hint {
+ font-size: 0.72rem;
+ color: var(--bpb-muted);
+}
+
+#palette-colors {
+ position: relative;
+ min-height: 190px;
+ max-height: min(52vh, 420px);
+ padding: 10px 10px 16px;
+ border-radius: var(--radius-md);
+ border: 1px solid var(--compare-border);
+ background:
+ radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 38%),
+ linear-gradient(180deg, #e1e6ea 0%, #e1e6ea 100%);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: flex-start;
+ gap: 8px 10px;
+ overflow: auto;
+}
+
+#palette-colors.is-empty {
+ display: grid;
+ place-items: center;
+}
+
+.palette-empty-state {
+ display: grid;
+ gap: 6px;
+ justify-items: center;
+ text-align: center;
+ color: var(--bpb-muted);
+ padding: 18px 8px;
+}
+
+.palette-empty-state i {
+ font-size: 1.3rem;
+ color: rgba(21, 56, 76, 0.45);
+}
+
+.palette-empty-state strong {
+ color: #17384c;
+ font-size: 0.9rem;
+}
+
+.palette-empty-state span {
+ font-size: 0.74rem;
+ line-height: 1.35;
+}
+
+.palette-footer-row {
+ display: flex;
+ justify-content: flex-end;
+}
+
+#clear-palette {
+ border: 1px solid rgba(21, 56, 76, 0.18);
+ background: #ffffff;
+ color: #15384c;
+ padding: 8px 12px;
+ border-radius: 999px;
+ cursor: pointer;
+ font-size: 0.82rem;
+ box-shadow: 0 6px 12px rgba(24, 40, 72, 0.06);
+}
+
+#clear-palette:hover {
+ background: #f8f3e6;
+}
+
+#clear-palette:disabled,
+.palette-control-btn:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+.library-panel {
+ display: grid;
+ gap: 12px;
+ min-width: 0;
+}
+
+.library-inline-title {
+ margin: 0;
+ padding: 2px 4px 0;
+ font-size: 0.95rem;
+ color: #15384c;
+}
+
+.library-header {
+ padding: 14px 16px;
+ border-radius: var(--radius-lg);
+ border: 1px solid var(--bpb-border);
+ background: rgba(255, 253, 246, 0.86);
+ box-shadow: var(--bpb-shadow);
+}
+
+.library-header h2 {
+ margin: 0;
+ font-size: 1.05rem;
+ color: #15384c;
+}
+
+.library-header p {
+ margin: 5px 0 0;
+ color: var(--bpb-muted);
+ font-size: 0.78rem;
+ line-height: 1.35;
+}
+
+.library-controls {
+ margin-top: 10px;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px;
+ align-items: center;
+}
+
+.library-search {
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr);
+ align-items: center;
+ gap: 6px;
+ border: 1px solid rgba(21, 56, 76, 0.14);
+ background: rgba(255, 255, 255, 0.88);
+ border-radius: 999px;
+ padding: 6px 10px;
+}
+
+.library-search i {
+ color: #6a7880;
+ font-size: 0.8rem;
+}
+
+.library-search input {
+ border: 0;
+ outline: 0;
+ background: transparent;
+ color: #17384c;
+ font-family: inherit;
+ font-size: 0.78rem;
+ min-width: 0;
+}
+
+.library-search input::placeholder {
+ color: #7c8a92;
+}
+
+.library-sort {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--bpb-muted);
+ font-size: 0.72rem;
+}
+
+.library-sort select {
+ border: 1px solid rgba(21, 56, 76, 0.14);
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.92);
+ color: #17384c;
+ font-family: inherit;
+ font-size: 0.72rem;
+ padding: 6px 10px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+#color-families {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 12px;
+ width: 100%;
+ min-width: 0;
+}
+
+.color-family {
+ display: grid;
+ align-content: start;
+ gap: 10px;
+ padding: 14px 12px 16px;
+ background:
+ linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,251,240,0.92));
+ border: 1px solid var(--bpb-border);
+ border-radius: var(--radius-md);
+ box-shadow: var(--bpb-shadow);
+ animation: fadeInUp 0.45s ease;
+}
+
+.color-family h3 {
+ text-align: left;
+ margin: 0;
+ padding-inline: 4px;
+ font-size: 0.95rem;
+ color: #15384c;
+}
+
+.color-family.is-hidden {
+ display: none;
+}
+
+.family-empty-note {
+ display: none;
+}
+
+#color-families.has-filtered-results-none::before {
+ content: "No colors match that search.";
+ display: block;
+ grid-column: 1 / -1;
+ padding: 16px;
+ text-align: center;
+ border-radius: var(--radius-md);
+ border: 1px dashed rgba(21, 56, 76, 0.2);
+ background: rgba(255, 255, 255, 0.82);
+ color: var(--bpb-muted);
+ box-shadow: var(--bpb-shadow);
+}
+
+.swatch-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+ gap: 10px 8px;
+ align-items: start;
+}
+
+.swatch-wrapper {
+ position: relative;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 3px;
+ min-width: 0;
+ transition: filter 0.2s ease;
+ filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
+}
+
+.swatch-wrapper:hover {
+ filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
+}
+
+.color-swatch {
+ width: var(--swatch-w);
+ height: var(--swatch-h);
+ position: relative;
+ z-index: 1;
+ background: radial-gradient(circle at 30% 30%, #fff5, transparent 60%), #ddd;
+ transition: transform 0.2s ease;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+
+ -webkit-mask-image: url('images/balloon-mask.svg');
+ -webkit-mask-size: contain;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+
+ mask-image: url('images/balloon-mask.svg');
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ mask-position: center;
+}
+
+.color-swatch:hover,
+.color-swatch:active {
+ transform: translateY(-2px) scale(1.05);
+}
+
+.color-swatch:focus-visible {
+ outline: 3px solid rgba(14, 167, 160, 0.45);
+ outline-offset: 3px;
+ border-radius: 14px;
+}
+
+.color-background {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border: 2px solid rgba(0, 0, 0, 0.08);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.color-background.finish-image {
+ background-size: 125%;
+ background-position: center;
+}
+
+.color-background.chosen {
+ border-color: rgba(12, 86, 109, 0.55);
+ box-shadow:
+ inset 0 0 0 2px rgba(255, 255, 255, 0.28),
+ 0 0 0 3px rgba(14, 167, 160, 0.22);
+}
+
+.color-shine {
+ position: absolute;
+ top: 45%;
+ left: 45%;
+ width: 70px;
+ opacity: 0.62;
+ z-index: 100;
+ pointer-events: none;
+ transform: translate(-50%, -50%);
+ height: auto;
+}
+
+.color-shine.has-halo {
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
+}
+
+.color-name {
+ transition: color 0.2s ease, text-decoration-color 0.2s ease;
+ font-size: 0.76rem;
+ line-height: 1.15;
+ text-align: center;
+ color: #334854;
+ width: min(100%, 98px);
+ min-height: 1.7em;
+ white-space: normal;
+ word-break: break-word;
+}
+
+.color-name.highlighted-name {
+ text-decoration: underline;
+ text-decoration-thickness: 2px;
+ text-underline-offset: 2px;
+ font-weight: 700;
+ color: #132f42;
+}
+
+#selected-palette .swatch-wrapper {
+ gap: 4px;
+}
+
+#selected-palette .color-swatch {
+ width: var(--palette-swatch-w);
+ height: var(--palette-swatch-h);
+}
+
+#selected-palette .color-swatch:hover,
+#selected-palette .color-swatch:active {
+ transform: translateY(-2px) scale(1.03);
+}
+
+#selected-palette .color-name {
+ width: min(100%, 84px);
+ font-size: 0.68rem;
+ min-height: 2.2em;
+}
+
+.balloon-float-group {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ animation-name: balloonFloat;
+ animation-duration: 4s;
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ transform-origin: bottom center;
+}
+
+@keyframes balloonFloat {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-14px); }
+}
+
+.balloon-string-svg {
+ position: absolute;
+ top: var(--string-top);
+ left: calc(47% - 3px);
+ transform: translateX(-50%);
+ width: 18px;
+ height: 38px;
+ z-index: -1;
+ pointer-events: none;
+ overflow: visible;
+ transform-origin: top center;
+}
+
+#selected-palette .balloon-string-svg {
+ top: var(--palette-string-top);
+ height: 32px;
+}
+
+.wiggle-path {
+ stroke: #727171;
+ stroke-width: 2;
+ fill: none;
+ stroke-linecap: round;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes pop {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.12); }
+ 100% { transform: scale(1); }
+}
+
+.color-background.pop {
+ animation: pop 0.25s ease;
+}
+
+.chosen {
+ z-index: 4;
+}
+
+/* Shared metallic style */
+.metallic {
+ position: relative;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ overflow: hidden;
+}
+
+.chrome-gold {
+ background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748);
+}
+
+.chrome-silver {
+ background: linear-gradient(145deg, #e0e0e0, #a9a9a9, #808080, #e0e0e0);
+}
+
+.chrome-rosegold {
+ background: linear-gradient(145deg, #fbe3dc, #e6b7a9, #d19387, #fbe3dc);
+}
+
+.chrome-champagne {
+ background: linear-gradient(145deg, #fff2cc, #f2e6b6, #d9c08e, #fff2cc);
+}
+
+.chrome-blue {
+ background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff);
+}
+
+.chrome-purple {
+ background: linear-gradient(145deg, #e0ccff, #b08be1, #915bc4, #e0ccff);
+}
+
+.chrome-green {
+ background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2);
+}
+
+#palette-controls .palette-control-btn {
+ font-size: 0.95rem;
+ padding: 0;
+ border: 1px solid var(--bpb-border);
+ background: #fff;
+ color: #17384c;
+ border-radius: 10px;
+ cursor: pointer;
+ width: 34px;
+ height: 34px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
+ box-shadow: 0 4px 10px rgba(24, 40, 72, 0.08);
+}
+
+#palette-controls .palette-control-btn:hover {
+ background: #f7f2e2;
+ transform: translateY(-1px);
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 20px;
+}
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ inset: 0;
+ background-color: #e6dfc8;
+ transition: 0.3s;
+ border-radius: 20px;
+ border: 1px solid rgba(21, 56, 76, 0.12);
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 14px;
+ width: 14px;
+ left: 2px;
+ bottom: 2px;
+ background-color: white;
+ transition: 0.3s;
+ border-radius: 50%;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+input:checked + .slider {
+ background-color: var(--bpb-accent);
+}
+
+input:checked + .slider:before {
+ transform: translateX(19px);
+}
+
+.palette-modal-backdrop {
+ position: fixed;
+ inset: 0;
+ background: rgba(11, 20, 32, 0.55);
+ display: none;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ z-index: 1000;
+}
+
+.palette-modal-backdrop .palette-modal {
+ background: var(--bpb-panel-strong);
+ padding: 18px;
+ border-radius: 16px;
+ border: 1px solid var(--bpb-border);
+ max-width: 480px;
+ width: min(100%, 480px);
+ box-shadow: var(--bpb-shadow-strong);
+ text-align: center;
+ display: block;
+}
+
+.palette-modal h3 {
+ margin: 0;
+ color: #15384c;
+}
+
+.preset-modal-backdrop {
+ position: fixed;
+ inset: 0;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+ background: rgba(11, 20, 32, 0.42);
+ z-index: 1000;
+}
+
+.preset-modal {
+ width: min(100%, 720px);
+ max-height: min(82vh, 760px);
+ overflow: auto;
+ background: rgba(255, 253, 247, 0.96);
+ border: 1px solid var(--bpb-border);
+ border-radius: 16px;
+ box-shadow: var(--bpb-shadow-strong);
+ padding: 14px;
+}
+
+.preset-modal-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+}
+
+.preset-modal-header h3 {
+ margin: 0;
+ color: #15384c;
+ font-size: 1rem;
+}
+
+#close-preset-modal {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ border: 1px solid rgba(21, 56, 76, 0.14);
+ background: #fff;
+ color: #15384c;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+#close-preset-modal:hover {
+ background: #f7f2e2;
+}
+
+.preset-modal-subtitle {
+ margin: 6px 0 10px;
+ color: var(--bpb-muted);
+ font-size: 0.75rem;
+}
+
+#preset-palette-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: 10px;
+}
+
+.preset-card {
+ display: grid;
+ gap: 8px;
+ padding: 10px;
+ border-radius: 14px;
+ border: 1px solid rgba(21, 56, 76, 0.1);
+ background: rgba(255, 255, 255, 0.86);
+ box-shadow: 0 4px 10px rgba(24, 40, 72, 0.05);
+}
+
+.preset-card-title-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.preset-card-title {
+ margin: 0;
+ font-size: 0.82rem;
+ color: #15384c;
+ line-height: 1.15;
+}
+
+.preset-card-tag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2px 8px;
+ border-radius: 999px;
+ border: 1px solid rgba(21, 56, 76, 0.1);
+ background: rgba(21, 56, 76, 0.05);
+ color: #47616f;
+ font-size: 0.6rem;
+ white-space: nowrap;
+}
+
+.preset-card-desc {
+ margin: 0;
+ color: #5f6f78;
+ font-size: 0.68rem;
+ line-height: 1.3;
+ min-height: 2.2em;
+}
+
+.preset-preview {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.preset-dot {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 1px solid rgba(21, 56, 76, 0.15);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
+ flex: 0 0 auto;
+}
+
+.preset-dot.is-image {
+ background-size: 220%;
+ background-position: center 34%;
+ background-repeat: no-repeat;
+}
+
+.preset-card button {
+ justify-self: start;
+ border: 1px solid rgba(21, 56, 76, 0.14);
+ background: #fff;
+ color: #15384c;
+ border-radius: 999px;
+ padding: 6px 10px;
+ font-size: 0.72rem;
+ cursor: pointer;
+}
+
+.preset-card button:hover {
+ background: #f7f2e2;
+}
+
+#share-link-input {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ margin: 14px auto 0;
+ border: 1px solid #d7d7d7;
+ border-radius: 8px;
+ font-size: 0.9rem;
+ text-align: left;
+ background: #fff;
+}
+
+#copy-link-button,
+#close-modal {
+ margin-top: 14px;
+ padding: 9px 14px;
+ font-size: 0.9rem;
+ font-weight: 700;
+ border-radius: 999px;
+ border: 1px solid rgba(21, 56, 76, 0.15);
+ cursor: pointer;
+}
+
+#copy-link-button {
+ background: var(--bpb-accent);
+ color: white;
+ border-color: var(--bpb-accent-strong);
+}
+
+#copy-link-button:hover {
+ background: var(--bpb-accent-strong);
+}
+
+#close-modal {
+ margin-left: 8px;
+ background: #fff;
+ color: #15384c;
+}
+
+#zoom-overlay {
+ position: fixed;
+ inset: 0;
+ background-color: rgba(0, 0, 0, 0.78);
+ z-index: 1001;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.25s ease, visibility 0.25s ease;
+ cursor: zoom-out;
+ padding: 16px;
+}
+
+#zoom-overlay.is-active {
+ opacity: 1;
+ visibility: visible;
+}
+
+#zoom-modal-shell {
+ position: relative;
+ width: min(94vw, 1120px);
+}
+
+#zoomed-palette-content {
+ width: 100%;
+ max-height: 82vh;
+ padding: 16px;
+ background:
+ linear-gradient(180deg, #eef0f3 0%, #dfe4e9 100%);
+ border-radius: 16px;
+ border: 1px solid var(--bpb-border);
+ box-shadow: var(--bpb-shadow-strong);
+ overflow: auto;
+ display: block;
+ cursor: default;
+}
+
+.zoom-palette-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
+ gap: 12px;
+ align-items: start;
+}
+
+.zoom-color-card {
+ display: grid;
+ gap: 4px;
+ justify-items: center;
+ align-content: start;
+ padding: 10px 10px 8px;
+ background: transparent;
+ border: 0;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.zoom-balloon-wrap {
+ height: 138px;
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ width: 100%;
+}
+
+.zoom-color-balloon {
+ width: 120px;
+ height: 164px;
+ cursor: default;
+ filter: drop-shadow(0 10px 14px rgba(24, 40, 72, 0.2));
+}
+
+#zoomed-palette-content .zoom-color-balloon .color-background {
+ border: 2px solid rgba(21, 56, 76, 0.2);
+}
+
+#zoomed-palette-content .zoom-color-balloon .color-background.chosen {
+ border-color: rgba(21, 56, 76, 0.34);
+ box-shadow:
+ inset 0 0 0 2px rgba(255, 255, 255, 0.45),
+ 0 0 0 3px rgba(21, 56, 76, 0.12);
+}
+
+.zoom-color-balloon:hover,
+.zoom-color-balloon:active {
+ transform: none;
+}
+
+.zoom-color-balloon .color-shine {
+ width: 84px;
+}
+
+.zoom-color-name {
+ text-align: center;
+ color: #15384c;
+ font-size: 0.8rem;
+ line-height: 1.05;
+ margin-top: -18px;
+}
+
+#zoom-close {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: var(--bpb-panel-strong);
+ border: 1px solid var(--bpb-border);
+ color: #15384c;
+ text-decoration: none;
+ font-size: 20px;
+ line-height: 1;
+ z-index: 1002;
+}
+
+#zoom-close:hover {
+ background: #f7f2e2;
+}
+
+footer {
+ text-align: center;
+ font-size: 0.8rem;
+ color: #5f6f78;
+ padding: 10px 16px 22px;
+}
+
+@media (max-width: 1100px) {
+ .picker-layout {
+ grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
+ }
+
+ #color-families {
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ }
+
+ .swatch-container {
+ grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
+ }
+
+ :root {
+ --swatch-w: 96px;
+ --swatch-h: 132px;
+ --palette-swatch-w: 80px;
+ --palette-swatch-h: 110px;
+ --string-top: 78px;
+ --palette-string-top: 64px;
+ }
+
+ .color-shine {
+ width: 62px;
+ }
+}
+
+@media (min-width: 1101px) {
+ .picker-layout {
+ grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
+ gap: 18px;
+ }
+
+ #color-families {
+ grid-template-columns: 1fr;
+ gap: 10px;
+ }
+
+ .color-family {
+ grid-template-columns: 180px minmax(0, 1fr);
+ align-items: start;
+ gap: 12px;
+ padding: 12px 14px;
+ }
+
+ .color-family h3 {
+ margin: 0;
+ padding: 8px 10px;
+ border-radius: 12px;
+ background: rgba(21, 56, 76, 0.05);
+ border: 1px solid rgba(21, 56, 76, 0.08);
+ line-height: 1.15;
+ position: sticky;
+ top: 0;
+ }
+
+ .swatch-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 10px 8px;
+ }
+
+ .swatch-container .swatch-wrapper {
+ width: 106px;
+ }
+
+ .swatch-container .color-name {
+ width: 100%;
+ min-height: 1.9em;
+ }
+}
+
+@media (max-width: 900px) {
+ .picker-layout {
+ grid-template-columns: 1fr;
+ }
+
+ #selected-palette {
+ position: sticky;
+ top: 6px;
+ max-height: none;
+ }
+
+ #palette-colors {
+ min-height: 112px;
+ max-height: none;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: flex-start;
+ align-content: stretch;
+ overflow-x: auto;
+ overflow-y: hidden;
+ padding: 8px 10px 10px;
+ gap: 6px;
+ scroll-snap-type: x proximity;
+ }
+
+ #selected-palette .swatch-wrapper {
+ flex: 0 0 auto;
+ scroll-snap-align: start;
+ }
+
+ #selected-palette .color-name {
+ display: none;
+ }
+
+ #selected-palette .balloon-float-group {
+ margin-bottom: 2px;
+ }
+
+ .page-hero {
+ grid-template-columns: 1fr;
+ gap: 8px;
+ padding-right: 14px;
+ }
+
+ .hero-balloons {
+ min-height: 96px;
+ justify-content: flex-end;
+ margin-right: 8px;
+ }
+
+ .library-header {
+ position: sticky;
+ top: 6px;
+ z-index: 4;
+ backdrop-filter: blur(5px);
+ }
+
+ .library-controls {
+ grid-template-columns: 1fr;
+ align-items: stretch;
+ }
+
+ .library-sort {
+ justify-content: space-between;
+ }
+}
+
+@media (max-width: 640px) {
+ .color-picker-app {
+ width: calc(100% - 10px);
+ margin-top: 8px;
+ gap: 10px;
+ }
+
+ .page-hero {
+ padding: 12px;
+ border-radius: 16px;
+ }
+
+ .page-hero h1 {
+ font-size: 1.02rem;
+ }
+
+ .page-hero-text {
+ font-size: 0.76rem;
+ }
+
+ #selected-palette {
+ padding: 10px;
+ gap: 10px;
+ border-radius: 16px;
+ }
+
+ .palette-header-row {
+ grid-template-columns: 1fr;
+ }
+
+ #palette-controls {
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ .palette-meta-row {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+
+ .library-search {
+ padding: 5px 9px;
+ }
+
+ .library-search input,
+ .library-sort,
+ .library-sort select {
+ font-size: 0.68rem;
+ }
+
+ #palette-colors {
+ min-height: 86px;
+ gap: 4px;
+ padding: 6px 8px 8px;
+ }
+
+ #color-families {
+ grid-template-columns: 1fr;
+ gap: 10px;
+ }
+
+ .color-family {
+ padding: 12px 10px 14px;
+ }
+
+ .swatch-container {
+ grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
+ gap: 8px 6px;
+ }
+
+ :root {
+ --swatch-w: 84px;
+ --swatch-h: 116px;
+ --palette-swatch-w: 62px;
+ --palette-swatch-h: 86px;
+ --string-top: 68px;
+ --palette-string-top: 48px;
+ }
+
+ .color-shine {
+ width: 54px;
+ }
+
+ .color-name {
+ font-size: 0.68rem;
+ width: min(100%, 82px);
+ }
+
+ #selected-palette .color-name {
+ display: none;
+ }
+
+ #selected-palette .balloon-string-svg {
+ height: 24px;
+ width: 16px;
+ }
+
+ #zoomed-palette-content {
+ padding: 14px;
+ border-radius: 14px;
+ }
+
+ .zoom-palette-grid {
+ grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
+ gap: 10px;
+ }
+
+ .zoom-color-card {
+ padding: 9px 8px 7px;
+ gap: 3px;
+ }
+
+ .zoom-balloon-wrap {
+ height: 112px;
+ }
+
+ .zoom-color-balloon {
+ width: 100px;
+ height: 136px;
+ filter: drop-shadow(0 8px 12px rgba(24, 40, 72, 0.18));
+ }
+
+ .zoom-color-balloon .color-shine {
+ width: 70px;
+ }
+
+ .zoom-color-name {
+ font-size: 0.68rem;
+ margin-top: -14px;
+ }
+
+ #zoom-close {
+ top: -8px;
+ right: -8px;
+ }
+
+ .navbar-brand .navbar-item img {
+ max-height: 2rem;
+ }
+
+ #preset-palette-list {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/main-site/color-picker/colors.json b/main-site/color-picker/colors.json
new file mode 100644
index 0000000..99ed82f
--- /dev/null
+++ 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"
+ }
+ ]
+ }
+]
diff --git a/main-site/color-picker/images/1balloon-mask.svg b/main-site/color-picker/images/1balloon-mask.svg
new file mode 100644
index 0000000..cc04ded
--- /dev/null
+++ b/main-site/color-picker/images/1balloon-mask.svg
@@ -0,0 +1,71 @@
+
+
+
+
diff --git a/main-site/color-picker/images/balloon-mask(1).svg b/main-site/color-picker/images/balloon-mask(1).svg
new file mode 100644
index 0000000..ab283b1
--- /dev/null
+++ b/main-site/color-picker/images/balloon-mask(1).svg
@@ -0,0 +1,51 @@
+
+
+
+
diff --git a/main-site/color-picker/images/balloon-mask.svg b/main-site/color-picker/images/balloon-mask.svg
new file mode 100644
index 0000000..ab283b1
--- /dev/null
+++ b/main-site/color-picker/images/balloon-mask.svg
@@ -0,0 +1,51 @@
+
+
+
+
diff --git a/main-site/color-picker/images/chrome-blue.webp b/main-site/color-picker/images/chrome-blue.webp
new file mode 100644
index 0000000..10732e6
Binary files /dev/null and b/main-site/color-picker/images/chrome-blue.webp differ
diff --git a/main-site/color-picker/images/chrome-champagne.webp b/main-site/color-picker/images/chrome-champagne.webp
new file mode 100644
index 0000000..e6e3608
Binary files /dev/null and b/main-site/color-picker/images/chrome-champagne.webp differ
diff --git a/main-site/color-picker/images/chrome-gold.webp b/main-site/color-picker/images/chrome-gold.webp
new file mode 100644
index 0000000..4eb30bc
Binary files /dev/null and b/main-site/color-picker/images/chrome-gold.webp differ
diff --git a/main-site/color-picker/images/chrome-green.webp b/main-site/color-picker/images/chrome-green.webp
new file mode 100644
index 0000000..840945b
Binary files /dev/null and b/main-site/color-picker/images/chrome-green.webp differ
diff --git a/main-site/color-picker/images/chrome-pink.webp b/main-site/color-picker/images/chrome-pink.webp
new file mode 100644
index 0000000..e6ae8e3
Binary files /dev/null and b/main-site/color-picker/images/chrome-pink.webp differ
diff --git a/main-site/color-picker/images/chrome-purple.webp b/main-site/color-picker/images/chrome-purple.webp
new file mode 100644
index 0000000..78724b2
Binary files /dev/null and b/main-site/color-picker/images/chrome-purple.webp differ
diff --git a/main-site/color-picker/images/chrome-rosegold.webp b/main-site/color-picker/images/chrome-rosegold.webp
new file mode 100644
index 0000000..24ad095
Binary files /dev/null and b/main-site/color-picker/images/chrome-rosegold.webp differ
diff --git a/main-site/color-picker/images/chrome-silver.webp b/main-site/color-picker/images/chrome-silver.webp
new file mode 100644
index 0000000..624d1dd
Binary files /dev/null and b/main-site/color-picker/images/chrome-silver.webp differ
diff --git a/main-site/color-picker/images/chrome-spacegrey.webp b/main-site/color-picker/images/chrome-spacegrey.webp
new file mode 100644
index 0000000..bd8d388
Binary files /dev/null and b/main-site/color-picker/images/chrome-spacegrey.webp differ
diff --git a/main-site/color-picker/images/chrome-truffle.webp b/main-site/color-picker/images/chrome-truffle.webp
new file mode 100644
index 0000000..be99a06
Binary files /dev/null and b/main-site/color-picker/images/chrome-truffle.webp differ
diff --git a/main-site/color-picker/images/classic-gold.webp b/main-site/color-picker/images/classic-gold.webp
new file mode 100644
index 0000000..e6bb51b
Binary files /dev/null and b/main-site/color-picker/images/classic-gold.webp differ
diff --git a/main-site/color-picker/images/classic-silver.webp b/main-site/color-picker/images/classic-silver.webp
new file mode 100644
index 0000000..ffd60b4
Binary files /dev/null and b/main-site/color-picker/images/classic-silver.webp differ
diff --git a/main-site/color-picker/images/metalic-rosegold.webp b/main-site/color-picker/images/metalic-rosegold.webp
new file mode 100644
index 0000000..f742faf
Binary files /dev/null and b/main-site/color-picker/images/metalic-rosegold.webp differ
diff --git a/main-site/color-picker/images/pearl-fuchsia.webp b/main-site/color-picker/images/pearl-fuchsia.webp
new file mode 100644
index 0000000..cb0c43a
Binary files /dev/null and b/main-site/color-picker/images/pearl-fuchsia.webp differ
diff --git a/main-site/color-picker/images/pearl-lightblue.webp b/main-site/color-picker/images/pearl-lightblue.webp
new file mode 100644
index 0000000..fad0fc2
Binary files /dev/null and b/main-site/color-picker/images/pearl-lightblue.webp differ
diff --git a/main-site/color-picker/images/pearl-lilac.webp b/main-site/color-picker/images/pearl-lilac.webp
new file mode 100644
index 0000000..951f03a
Binary files /dev/null and b/main-site/color-picker/images/pearl-lilac.webp differ
diff --git a/main-site/color-picker/images/pearl-midnightblue.webp b/main-site/color-picker/images/pearl-midnightblue.webp
new file mode 100644
index 0000000..efaa613
Binary files /dev/null and b/main-site/color-picker/images/pearl-midnightblue.webp differ
diff --git a/main-site/color-picker/images/pearl-peach.webp b/main-site/color-picker/images/pearl-peach.webp
new file mode 100644
index 0000000..72ba410
Binary files /dev/null and b/main-site/color-picker/images/pearl-peach.webp differ
diff --git a/main-site/color-picker/images/pearl-periwinkle.webp b/main-site/color-picker/images/pearl-periwinkle.webp
new file mode 100644
index 0000000..6580a77
Binary files /dev/null and b/main-site/color-picker/images/pearl-periwinkle.webp differ
diff --git a/main-site/color-picker/images/pearl-pink.webp b/main-site/color-picker/images/pearl-pink.webp
new file mode 100644
index 0000000..2286f66
Binary files /dev/null and b/main-site/color-picker/images/pearl-pink.webp differ
diff --git a/main-site/color-picker/images/pearl-sapphire.webp b/main-site/color-picker/images/pearl-sapphire.webp
new file mode 100644
index 0000000..d92b635
Binary files /dev/null and b/main-site/color-picker/images/pearl-sapphire.webp differ
diff --git a/main-site/color-picker/images/pearl-violet.webp b/main-site/color-picker/images/pearl-violet.webp
new file mode 100644
index 0000000..40d431c
Binary files /dev/null and b/main-site/color-picker/images/pearl-violet.webp differ
diff --git a/main-site/color-picker/images/pearl-white.webp b/main-site/color-picker/images/pearl-white.webp
new file mode 100644
index 0000000..d5d1d61
Binary files /dev/null and b/main-site/color-picker/images/pearl-white.webp differ
diff --git a/main-site/color-picker/index.html b/main-site/color-picker/index.html
new file mode 100644
index 0000000..54ad98c
--- /dev/null
+++ b/main-site/color-picker/index.html
@@ -0,0 +1,134 @@
+
+
+
+
+
+ Beach Party Balloons Color Palette Picker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Share Your Palette
+
+
+
+
+
+
+
Quick starting points you can tweak after applying.
+
+
+
${family.family}
`;
+
+ 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 = `
+ ${preset.name}
+ ${preset.tag}
+ `;
+
+ 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 = `
+
+
+ No balloons selected yet
+ Tap colors below to build a palette, then shuffle, zoom, or share it.
+
+ `;
+ 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 = `
+ Copy this link to share your palette:
+
+
+ `;
+
+ 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));
+ });
+}
diff --git a/main-site/color-picker/shine.svg b/main-site/color-picker/shine.svg
new file mode 100644
index 0000000..a6e63e7
--- /dev/null
+++ b/main-site/color-picker/shine.svg
@@ -0,0 +1,2 @@
+
+