diff --git a/color.css b/color.css index e59aa7f..284ef8e 100644 --- a/color.css +++ b/color.css @@ -1,204 +1,544 @@ -:root{ - /* balloon sizing (W x H = ratio ~ 1.36) */ - --balloon-w: 110px; - --balloon-ratio: 1.36; /* 100x136 baseline */ - --string-offset: 54px; /* how far down the string starts from top of swatch */ - --palette-gap-x: 18px; - --palette-gap-y: 12px; +: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; - box-sizing: border-box; - /* font-family: sans-serif; */ - font-family: "Autour One", serif; - background-color: #c2c2c2; - background-image: url("assets/pictures/asfalt-dark.png"); - /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */ -} -#main-header { - text-align: center; - padding: 20px 10px; - background: #ffffffdd; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); - border-radius: 12px; - margin-bottom: 20px; + font-size: clamp(1.1rem, 2.8vw, 1.8rem); + line-height: 1.15; + color: #14354a; } -#main-header h1 { - font-size: 2rem; - margin-bottom: 5px; +.page-hero-text { + margin: 8px 0 0; + font-size: 0.88rem; + line-height: 1.35; + color: var(--bpb-muted); } -#main-header p { - font-size: 1rem; - color: #666; +.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 !important; - top: 60px; /* This tells it where to stick */ - z-index: 10; /* This ensures it stays on top of other content */ - max-width: 85%; - margin: auto; - padding: 10px; - background-color: #e8e8e8; - background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); - border: 2px solid #ccc; - border-radius: 10px; - - /* Flexbox settings */ - display: flex; - flex-direction: column; - gap: 15px; - - /* Sizing and Scrolling Fix */ - max-height: 30vh; - min-height: 0; + 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); } -/* Strong shadow when stuck */ #selected-palette.stuck { - box-shadow: 16px 16px 15px rgba(0, 0, 0, 0.25); - border: 1px solid rgb(0, 0, 0); - border-radius: 7px; -} - - - -#palette-colors { - display: flex; - flex-wrap: wrap; - justify-content: center; - /* padding: 10px; */ - - /* ✨ Scrolling Fix */ - overflow-y: auto; /* Change from 'visible' to 'auto' for vertical scroll */ - flex-grow: 1; /* Allow this container to fill available space */ -} - - -#clear-palette { - margin-top: 20px; - padding: 8px 12px; - font-size: 0.9rem; - background: #8ae7db; - border: 1px solid #ccc; - border-radius: 15px; - cursor: pointer; - margin: auto; - -} - -#color-families { - display: flex; - flex-direction: column; - gap: 15px; - font-family: "Autour One", serif; - -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -footer { - text-align: center; - font-size: 0.9rem; - color: #777; - padding: 20px; -} - -@media (max-width: 480px) { - .color-name { - font-size: 0.7rem; - } - - #main-header h1 { - font-size: 1.5rem; - } -} -.color-family { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - padding-bottom: 20px; - border-bottom: 1px solid #ccc; - animation: fadeInUp 0.5s ease; - font-family: "Autour One", serif; - -} -.swatch-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 10px 20px; /* add horizontal AND vertical gaps */ -} - -.color-family h3 { - text-align: center; - margin: 10px 0 5px; - font-size: 1rem; - font-weight: bold; -} - - -.swatch-wrapper { - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - /* width: 60px; */ - /* margin: 0 5px; */ - /* padding: 10px; */ - max-width: min-content; - position: relative; - overflow-wrap: break-word; - transition: filter 0.3s ease; - filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); - + box-shadow: var(--bpb-shadow-strong); } .palette-header-row { - display: flex; - justify-content: space-between; /* Pushes title and buttons apart */ - align-items: center; /* Vertically centers them */ - width: 100%; /* Makes the row fill the container */ - /* padding: 0 10px; Adds some horizontal spacing */ - margin: auto; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 10px; + align-items: start; } -/* Remove the default margins from your title */ -#selected-palette h2 { +.palette-title-group h2 { margin: 0; - font-size: 1.2rem; + font-size: 1.15rem; + color: #15384c; } - -.metallic-element[data-color="#FFD700"] { - background: linear-gradient(to bottom, #B88606, #79550E); - box-shadow: - inset 0 0 0 0 rgba(255, 255, 255, 0.3), - inset 0 0 0 1px rgba(0, 0, 0, 0.3), - inset 0 0 10px rgba(0, 0, 0, 0.2); +.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; +} - .color-swatch { - width: 100px; - height: 136px; +.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; - background: #ccc; /* fallback */ - transition: transform 0.3s ease; 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; @@ -209,85 +549,153 @@ footer { mask-size: contain; mask-repeat: no-repeat; mask-position: center; -font-family: "Autour One", serif; - -} - -.color-shine.has-halo { - filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4)); } .color-swatch:hover, .color-swatch:active { - transform: scale(1.2); + transform: translateY(-2px) scale(1.05); } - -/* Adjust shine for chosen state if necessary */ +.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.1); /* Light gray border */ - box-shadow: 1 1 1; + 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.6; - z-index: 100; /* make this high enough */ + 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 { - font-size: 0.85rem; + transition: color 0.2s ease, text-decoration-color 0.2s ease; + font-size: 0.76rem; + line-height: 1.15; text-align: center; - margin-top: 5px; - word-break: keep-all; /* Prevent breaking long words */ - /* white-space: nowrap; Keep names on a single line */ - /* overflow: hidden; /*Hide overflow text if necessary */ - text-overflow: ellipsis; /* Add ... when text is too long */ - max-width: 100%; - /* background-color: #e8e8e8; */ - z-index: 1; -} - - -@media (max-width: 600px) { - - .swatch-wrapper { - width: 60px; - } - - .color-name { - font-size: 0.65rem; - max-width: 50px; - word-wrap: break-word; - } - - #selected-palette h2 { - font-size: 1.1rem; - } -} - -.color-name { - transition: all 0.3s ease; + color: #334854; + width: min(100%, 98px); + min-height: 1.7em; + white-space: normal; + word-break: break-word; } .color-name.highlighted-name { - text-decoration:underline; - font-weight: bold; - color: #111; + 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.2); } + 50% { transform: scale(1.12); } 100% { transform: scale(1); } } @@ -295,49 +703,17 @@ font-family: "Autour One", serif; animation: pop 0.25s ease; } -.chosen{ +.chosen { z-index: 4; } -.color-swatch.chosen { - outline: 3px solid #333; - outline-offset: 1px; - width: 90px; /* Keep these specific dimensions for chosen state */ - height: 126px; /* Keep these specific dimensions for chosen state */ - z-index: 10; - /* IMPORTANT: Re-apply the complex shadow from the base .color-swatch, - and add the extra glow/shadow you want for the chosen state. - This ensures depth is maintained. */ - box-shadow: - inset 2px 2px 6px rgba(255, 255, 255, 0.6), /* Retain inner highlight for depth */ - 0 8px 16px rgba(0, 0, 0, 0.3), /* Slightly larger/darker outer shadow for more pop */ - 0 0 15px rgba(0, 0, 0, 0.4); /* More pronounced glow for chosen state */ -} - /* Shared metallic style */ .metallic { position: relative; border: 1px solid rgba(255, 255, 255, 0.3); - /* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6), - 0 2px 4px rgba(0, 0, 0, 0.3); */ overflow: hidden; } -/* Highlight overlay */ -.metallic1::after { - content: ''; - position: absolute; - top: 15%; - left: 15%; - width: 70%; - height: 70%; - background: radial-gradient(circle at top left, rgba(255,255,255,0.3), transparent 70%); - transform: rotate(-20deg); - pointer-events: none; - border-radius: 50%; -} - -/* Specific chrome variants */ .chrome-gold { background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748); } @@ -366,318 +742,710 @@ font-family: "Autour One", serif; background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2); } - -@keyframes balloonFloat { - 0%, 100% { transform: translateY(0) rotate(-4deg); } - 50% { transform: translateY(-25px) rotate(4deg); } -} - -.balloon-float { - animation-name: balloonFloat; - animation-timing-function: 4s ease-in-out; - animation-iteration-count: infinite; - transform-origin: bottom center; - position: relative; -} - -.color-background { - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} -/* --- SVG Balloon String --- */ -.balloon-string-svg { - position: absolute; - top: 82px; /* match .color-swatch height */ - left: 45%; - transform: translateX(-50%); - width: 20px; - height: 40px; - z-index: -4; - pointer-events: none; - overflow: visible; - transform-origin: top center; - animation: svgWiggle 2s ease-in-out infinite; -} - - -.balloon-float-group { - position: relative; - display: flex; - flex-direction: column; +#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; - animation-name: balloonFloat; - animation-duration: 4s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - transform-origin: bottom 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); } -.wiggle-path { - stroke: #727171; - stroke-width: 2; - fill: none; - stroke-linecap: round; - stroke-dasharray: 1, 2; +#palette-controls .palette-control-btn:hover { + background: #f7f2e2; + transform: translateY(-1px); } -@keyframes svgWiggle { - 0%, 100% { - transform: translateX(-50%) rotate(0deg); - } - 25% { - transform: translateX(-50%) rotate(2deg); - } - 50% { - transform: translateX(-50%) rotate(-2.5deg); - } - 75% { - transform: translateX(-50%) rotate(1.5deg); - } -} - -#palette-controls { - position: static; - top: 10px; - right: 10px; - display: flex; - align-items: center; - gap: 10px; - z-index: 200; -} -/* Toggle Switch Styling */ .switch { position: relative; display: inline-block; width: 40px; height: 20px; } + .switch input { opacity: 0; width: 0; height: 0; } + .slider { position: absolute; cursor: pointer; - top: 0; left: 0; - right: 0; bottom: 0; - background-color: #ccc; - transition: 0.4s; + 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: 3px; - bottom: 3px; + left: 2px; + bottom: 2px; background-color: white; - transition: 0.4s; + transition: 0.3s; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } + input:checked + .slider { - background-color: #4caf50; + background-color: var(--bpb-accent); } + input:checked + .slider:before { - transform: translateX(20px); + transform: translateX(19px); } -/* --- NEW STYLES START HERE --- */ -/* Styling for the new icon buttons in the palette header */ -.palette-control-btn { - font-size: 1rem; /* Set a consistent icon size */ - padding: 0; /* Remove padding to control size with width/height */ - border: 1px solid #ddd; - background: #f0f0f0; - border-radius: 6px; - cursor: pointer; - width: 32px; /* Give the button a square shape */ - height: 32px; - display: inline-flex; /* Use flexbox to center the icon */ - justify-content: center; - align-items: center; - transition: background-color 0.2s ease; -} - -.palette-control-btn:hover { - background-color: #e0e0e0; -} -/* --- NEW STYLES END HERE --- */ - .palette-modal-backdrop { position: fixed; - top: 0; left: 0; - width: 100vw; height: 100vh; - background: rgba(0, 0, 0, 0.4); - display: none; /* Default is hidden */ + 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: white; - padding: 20px; - border-radius: 12px; - max-width: 90%; - width: 400px; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); + 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; } -/* Styling for the share link input field inside the modal */ +.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: 90%; - padding: 8px; - margin: 15px auto 0; - border: 1px solid #ccc; - border-radius: 4px; + width: 100%; + padding: 10px; + margin: 14px auto 0; + border: 1px solid #d7d7d7; + border-radius: 8px; font-size: 0.9rem; - text-align: center; + text-align: left; + background: #fff; } -/* Styling for the copy button inside the modal */ -#copy-link-button { - margin-top: 15px; - padding: 10px 20px; - font-size: 1rem; - font-weight: bold; - background-color: #4CAF50; /* Green */ - color: white; - border: none; - border-radius: 5px; +#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; - transition: background-color 0.3s ease; +} + +#copy-link-button { + background: var(--bpb-accent); + color: white; + border-color: var(--bpb-accent-strong); } #copy-link-button:hover { - background-color: #45a049; + background: var(--bpb-accent-strong); } -/* --- Zoom Overlay Feature --- */ +#close-modal { + margin-left: 8px; + background: #fff; + color: #15384c; +} #zoom-overlay { position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.75); /* Dark, semi-transparent background */ - z-index: 1001; /* Ensure it's on top of everything */ - - /* Use flexbox to center the content */ + inset: 0; + background-color: rgba(0, 0, 0, 0.78); + z-index: 1001; display: flex; justify-content: center; align-items: center; - - /* Start hidden and transition opacity */ opacity: 0; visibility: hidden; - transition: opacity 0.3s ease, visibility 0.3s ease; - - cursor: zoom-out; /* Hint to the user how to close it */ + transition: opacity 0.25s ease, visibility 0.25s ease; + cursor: zoom-out; + padding: 16px; } -/* The class we'll toggle with JavaScript to show the overlay */ #zoom-overlay.is-active { opacity: 1; visibility: visible; } -/* The container for the zoomed-in palette balloons */ +#zoom-modal-shell { + position: relative; + width: min(94vw, 1120px); +} + #zoomed-palette-content { - width: 90vw; - height: 80vh; - padding: 20px; - - /* Looks like the original palette */ - background-color: #e8e8e8; - background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); - border-radius: 15px; - - /* Allow scrolling if there are many balloons */ - overflow-y: auto; - - /* Arrange the cloned balloons */ + 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; - flex-wrap: wrap; + 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; - gap: 20px; - - cursor: default; /* Use a normal cursor for the content itself */ + 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; } -/* Make the balloons and their names larger in the zoom view */ -#zoomed-palette-content .swatch-wrapper { - transform: scale(1.1); +#zoom-close:hover { + background: #f7f2e2; } -/* --- Responsive Sizing for Selected Palette Balloons --- */ - -/* Add some spacing between the balloons in the top palette */ -#palette-colors { - gap: 15px; +footer { + text-align: center; + font-size: 0.8rem; + color: #5f6f78; + padding: 10px 16px 22px; } -/* Apply these styles ONLY on screens 768px or smaller (tablets and phones) */ -@media (max-width: 768px) { - - /* Reduce the size of the balloon itself */ - #selected-palette .color-swatch { - width: 70px; - height: 95px; +@media (max-width: 1100px) { + .picker-layout { + grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } - /* Reposition the balloon string to match the new, smaller height */ - #selected-palette .balloon-string-svg { - top: 60px; /* Adjust this value if the string looks detached */ + #color-families { + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } - /* Make the color name text smaller to fit */ - #selected-palette .color-name { - font-size: 0.7rem; + .swatch-container { + grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } - /* Reduce the gap between balloons on mobile for a tighter fit */ - #palette-colors { + :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; + } } -/* --- Responsive Sizing for Selected Palette Balloons --- */ - -/* Add some spacing between the balloons in the top palette */ -#palette-colors { - gap: 15px; -} - -/* Apply these styles ONLY on screens 768px or smaller (tablets and phones) */ -@media (max-width: 768px) { - - /* Reduce the size of the balloon itself */ - #selected-palette .color-swatch { - width: 50px; - height: 75px; +@media (max-width: 900px) { + .picker-layout { + grid-template-columns: 1fr; } - /* Reposition the balloon string to match the new, smaller height */ - #selected-palette .balloon-string-svg { - top: 40px; /* Adjust this value if the string looks detached */ - height: 25px; + #selected-palette { + position: sticky; + top: 6px; + max-height: none; } - /* Make the color name text smaller to fit */ - #selected-palette .color-name { - font-size: 0.7rem; - } - - /* Reduce the gap between balloons on mobile for a tighter fit */ #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; } -} \ No newline at end of file + + #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/colors.json b/colors.json index ed646c5..99ed82f 100644 --- a/colors.json +++ b/colors.json @@ -36,7 +36,7 @@ { "name": "Yellow", "hex": "#f5e812" }, { "name": "Goldenrod", "hex": "#f7b615" }, { "name": "Orange", "hex": "#ef6b24" }, - { "name":"Blended Brown","hex":"#c9aea0"} + { "name":"Blended Brown","hex":"#c9aea0"}, { "name": "Coffee", "hex": "#957461" }, { "name": "Burnt Orange", "hex": "#9d4223" } ] @@ -92,28 +92,28 @@ }, { "name": "Classic Silver", - "hex": "#F4C2C2", + "hex": "#C0C0C0", "metallic": true, "pearlType": "silver", "image": "images/classic-silver.webp" }, { "name": "Pearl Pink", - "hex": "#F4C2C2", + "hex": "#F4C2D0", "metallic": true, "pearlType": "pink", "image": "images/pearl-pink.webp" }, { "name": "Pearl Peach", - "hex": "#F4C2C2", + "hex": "#F4D2C2", "metallic": true, "pearlType": "pink", "image": "images/pearl-peach.webp" }, { "name": "Classic Rose Gold", - "hex": "#F4C2C2", + "hex": "#B76E79", "metallic": true, "pearlType": "pink", "image": "images/metalic-rosegold.webp" @@ -134,7 +134,7 @@ }, { "name": "Pearl Periwinkle", - "hex": "#F4C2C2", + "hex": "#CCCCFF", "metallic": true, "pearlType": "blue", "image": "images/pearl-periwinkle.webp" @@ -181,14 +181,14 @@ "colors": [ { "name": "Chrome Rose Gold", - "hex": "#FFBF00", + "hex": "#B76E79", "metallic": true, "chromeType": "rosegold", "image": "images/chrome-rosegold.webp" }, { "name": "Chrome Pink", - "hex": "#FFBF00", + "hex": "#FF69B4", "metallic": true, "chromeType": "rosegold", "image": "images/chrome-pink.webp" @@ -202,28 +202,28 @@ }, { "name": "Chrome Champagne", - "hex": "#FF1DCE", + "hex": "#F7E7CE", "metallic": true, "chromeType": "champagne", "image": "images/chrome-champagne.webp" }, { "name": "Chrome Truffle", - "hex": "#FF1DCE", + "hex": "#D2B48C", "metallic": true, "chromeType": "champagne", "image": "images/chrome-truffle.webp" }, { "name": "Chrome Silver", - "hex": "#a8a9a4", + "hex": "#C0C0C0", "metallic": true, "chromeType": "silver", "image": "images/chrome-silver.webp" }, { "name": "Chrome Space Grey", - "hex": "#a8a9a4", + "hex": "#5C5C5C", "metallic": true, "chromeType": "spacegrey", "image": "images/chrome-spacegrey.webp" diff --git a/images/pearl-peach.webp b/images/pearl-peach.webp index 6965d72..72ba410 100644 Binary files a/images/pearl-peach.webp and b/images/pearl-peach.webp differ diff --git a/index.html b/index.html index e517ad5..54ad98c 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + @@ -37,6 +38,7 @@
Home + Shop About Us FAQ Terms @@ -47,35 +49,50 @@
-
-
-
-

Your Palette

-
- - - - +
+
+
- -
-
- - -
-
-
+
+ 0 selected + Tap a balloon below to add it here +
+ +
+ +
+ +
+ + +
+

Colors

+
+
+
+ +
-
+
+ × +
+
+ - - \ No newline at end of file + diff --git a/script.js b/script.js index b6c1acc..33f6bc4 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,53 @@ let selectedPalette = []; let animationsEnabled = true; +let allColorFamilies = []; +let colorSearchQuery = ''; +let colorSortMode = 'default'; + +const PRESET_PALETTES = [ + { + id: 'soft-baby-shower', + name: 'Pastels', + tag: 'Pastels', + description: 'Gentle mix of pink, blue, lilac, and white.', + colors: ['White', 'Light Pink', 'Sky Blue', 'Lilac', 'Pastel Green', 'Pastel Yellow'] + }, + { + id: 'beach-party', + name: 'Muted Naturals', + tag: 'Neutral', + description: 'Soft neutral mix with a chrome champagne accent.', + colors: ['Cameo', 'Sand', 'White', 'Chrome Champagne'] + }, + { + id: 'elegant-neutral', + name: 'Elegant Neutral', + tag: 'Event', + description: 'Wedding-friendly neutrals with soft warmth.', + colors: ['White', 'Retro White', 'Sand', 'Cameo', 'Fog'] + }, + { + id: 'chrome-lux', + name: 'Midnight Steel', + tag: 'Bold', + description: 'Deep dark base with pearl blues and chrome grey accents.', + colors: ['Black', 'Pearl Midnight Blue', 'Pearl Sapphire', 'Chrome Space Grey'] + }, + { + id: 'jewel-night', + name: 'Modern Minimal', + tag: 'Trend', + description: 'Clean neutrals with a muted blue accent for a current look.', + colors: ['White', 'Sand', 'Grey', 'Fog', 'Sea Glass'] + }, + { + id: 'pearl-dream', + name: 'Tropical Rainbow', + tag: 'Bright', + description: 'Bold tropical brights for playful rainbow installs.', + colors: ['Fuchsia', 'Goldenrod', 'Caribbean Blue', 'Lime Green', 'Yellow', 'Lavender'] + } +]; // --- LOCAL STORAGE LOADING --- // Load palette from Local Storage on startup @@ -17,89 +65,239 @@ if (savedPaletteJSON) { fetch('colors.json') .then(response => response.json()) .then(data => { - const colorFamiliesContainer = document.getElementById('color-families'); - - // Create the color swatch for each color in the JSON data - data.forEach(family => { - const familyDiv = document.createElement('div'); - familyDiv.classList.add('color-family'); - familyDiv.classList.add('has-text-dark'); - familyDiv.innerHTML = `

${family.family}

`; - - const swatchContainer = document.createElement('div'); - swatchContainer.classList.add('swatch-container'); - - family.colors.forEach(color => { - const swatchWrapper = document.createElement('div'); - swatchWrapper.classList.add('swatch-wrapper'); - - const swatch = document.createElement('div'); - swatch.classList.add('color-swatch'); - swatch.dataset.color = color.hex; - swatch.style.color = color.hex; - - const backgroundDiv = document.createElement('div'); - backgroundDiv.classList.add('color-background'); - - if (color.image) { - backgroundDiv.style.backgroundImage = `url(${color.image})`; - } else { - backgroundDiv.style.backgroundColor = color.hex; - } - - if (color.metallic && color.chromeType) { - backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`); - } - - const shineImg = document.createElement('img'); - shineImg.classList.add('color-shine'); - shineImg.src = "shine.svg"; - shineImg.alt = ""; - - if (isLightColor(color.hex)) { - backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)'; - shineImg.classList.add('has-halo'); - } - - swatch.appendChild(backgroundDiv); - swatch.appendChild(shineImg); - - const colorName = document.createElement('span'); - colorName.classList.add('color-name'); - colorName.textContent = color.name; - - // Event listener to add/remove a color from the palette - swatch.addEventListener('click', () => { - const isSelected = selectedPalette.some(c => c.hex === color.hex); - if (isSelected) { - selectedPalette = selectedPalette.filter(c => c.hex !== color.hex); - } else { - selectedPalette.push(color); - } - - backgroundDiv.classList.add('pop'); - backgroundDiv.addEventListener('animationend', () => { - backgroundDiv.classList.remove('pop'); - }, { once: true }); - - renderSelectedPalette(); - updateSwatchHighlights(); - }); - - swatchWrapper.appendChild(swatch); - swatchWrapper.appendChild(colorName); - swatchContainer.appendChild(swatchWrapper); - }); - - familyDiv.appendChild(swatchContainer); - colorFamiliesContainer.appendChild(familyDiv); - }); + 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 = `

${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. */ @@ -114,16 +312,36 @@ function renderSelectedPalette() { const paletteColorsContainer = document.getElementById('palette-colors'); paletteColorsContainer.innerHTML = ''; + if (selectedPalette.length === 0) { + paletteColorsContainer.classList.add('is-empty'); + paletteColorsContainer.innerHTML = ` +
+ + 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) { - floatGroup.style.animationDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`; - floatGroup.style.animationDelay = `${(Math.random() * 2).toFixed(2)}s`; + 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'; } @@ -131,6 +349,9 @@ function renderSelectedPalette() { const swatch = document.createElement('div'); swatch.classList.add('color-swatch'); swatch.dataset.color = color.hex; + swatch.setAttribute('role', 'button'); + swatch.setAttribute('tabindex', '0'); + swatch.setAttribute('aria-label', `Remove ${color.name} from palette`); const backgroundDiv = document.createElement('div'); backgroundDiv.classList.add('color-background', 'chosen'); @@ -141,8 +362,11 @@ function renderSelectedPalette() { backgroundDiv.style.backgroundColor = color.hex; } - if (color.metallic && color.chromeType) { - backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`); + if (color.metallic) { + backgroundDiv.classList.add('metallic'); + if (color.chromeType && !color.image) { + backgroundDiv.classList.add(`chrome-${color.chromeType}`); + } } const shineImg = document.createElement('img'); @@ -163,10 +387,39 @@ function renderSelectedPalette() { stringSVG.setAttribute("class", "balloon-string-svg"); stringSVG.setAttribute("viewBox", "0 0 20 60"); const path = document.createElementNS(svgNS, "path"); - path.setAttribute("d", "M10 0 C8 10, 12 20, 10 30 C8 40, 12 50, 10 60"); + const basePathD = "M10 0 C6 8, 14 14, 9 22 C5 29, 14 35, 10 43 C7 49, 12 54, 10 60"; + const rightLeadD = "M10 0 C8 7, 16 13, 12 21 C8 28, 16 34, 13 42 C10 48, 13 54, 11 60"; + const rightSnapD = "M10 0 C9 8, 17 15, 13 23 C9 30, 17 36, 14 44 C11 50, 14 55, 12 60"; + const centerRecoverD = "M10 0 C7 8, 15 14, 10 22 C6 29, 13 35, 9 43 C7 49, 12 54, 10 60"; + const leftLeadD = "M10 0 C4 8, 12 14, 7 22 C3 29, 12 35, 8 43 C5 49, 11 54, 9 60"; + const leftSnapD = "M10 0 C3 9, 11 15, 6 23 C2 30, 11 36, 7 44 C4 50, 10 55, 8 60"; + const centerSettleD = "M10 0 C6 8, 14 14, 9 22 C5 29, 13 35, 9 43 C7 49, 12 54, 10 60"; + + path.setAttribute("d", basePathD); + path.setAttribute("class", "wiggle-path"); path.setAttribute("stroke", "#444"); path.setAttribute("stroke-width", "2"); path.setAttribute("fill", "none"); + + if (animationsEnabled) { + const bendAnimate = document.createElementNS(svgNS, "animate"); + bendAnimate.setAttribute("attributeName", "d"); + bendAnimate.setAttribute("dur", floatDuration); + bendAnimate.setAttribute("begin", floatDelay); + bendAnimate.setAttribute("repeatCount", "indefinite"); + bendAnimate.setAttribute( + "values", + `${basePathD};${rightLeadD};${rightSnapD};${centerRecoverD};${leftLeadD};${leftSnapD};${centerSettleD};${basePathD}` + ); + bendAnimate.setAttribute("keyTimes", "0;0.14;0.24;0.42;0.62;0.74;0.9;1"); + bendAnimate.setAttribute("calcMode", "spline"); + bendAnimate.setAttribute( + "keySplines", + "0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1" + ); + path.appendChild(bendAnimate); + } + stringSVG.appendChild(path); floatGroup.appendChild(swatch); @@ -184,9 +437,17 @@ function renderSelectedPalette() { updateSwatchHighlights(); }); + swatch.addEventListener('keydown', (event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + swatch.click(); + } + }); + paletteColorsContainer.appendChild(swatchWrapper); }); + updatePaletteUIState(); savePaletteToLocalStorage(); } @@ -211,6 +472,25 @@ function updateSwatchHighlights() { }); } +function updatePaletteUIState() { + const countBadge = document.getElementById('palette-count'); + const clearButton = document.getElementById('clear-palette'); + const shareButtonEl = document.getElementById('share-palette'); + const shuffleButton = document.getElementById('shuffle-palette'); + const zoomButtonEl = document.getElementById('zoom-palette'); + + const count = selectedPalette.length; + if (countBadge) { + countBadge.textContent = `${count} selected`; + } + + const hasSelection = count > 0; + [clearButton, shareButtonEl, shuffleButton, zoomButtonEl].forEach(button => { + if (!button) return; + button.disabled = !hasSelection; + }); +} + /** * Determines if a hex color is light or dark to decide on border visibility. * @param {string} hex - The hex color code (e.g., "#FFFFFF"). @@ -218,9 +498,16 @@ function updateSwatchHighlights() { */ function isLightColor(hex) { if (!hex) return false; - const rgb = hex.replace('#', '').match(/.{1,2}/g).map(x => parseInt(x, 16)); - const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000; - return brightness > 220; + 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; } /** @@ -275,7 +562,47 @@ function initializePaletteOnLoad(allColorData) { // --- Event Listeners --- -document.getElementById('clear-palette').addEventListener('click', () => { +const shareButton = document.getElementById('share-palette'); +const modalBackdrop = document.querySelector('.palette-modal-backdrop'); +const closeModalButton = document.getElementById('close-modal'); +const modalColorList = document.getElementById('modal-color-list'); +const presetButton = document.getElementById('preset-palettes'); +const presetModalBackdrop = document.querySelector('.preset-modal-backdrop'); +const closePresetModalButton = document.getElementById('close-preset-modal'); + +function syncModalInteractionLock() { + const shareOpen = modalBackdrop && getComputedStyle(modalBackdrop).display !== 'none'; + const presetOpen = presetModalBackdrop && getComputedStyle(presetModalBackdrop).display !== 'none'; + const zoomOpen = zoomOverlay && zoomOverlay.classList.contains('is-active'); + document.body.classList.toggle('modal-open', Boolean(shareOpen || presetOpen || zoomOpen)); +} + +async function confirmClearPalette() { + if (typeof Swal !== 'undefined' && Swal.fire) { + const result = await Swal.fire({ + title: 'Clear palette?', + text: 'This removes all selected balloons from your palette.', + icon: 'warning', + showCancelButton: true, + confirmButtonText: 'Clear Palette', + cancelButtonText: 'Cancel', + reverseButtons: true, + confirmButtonColor: '#0ea7a0', + background: '#fffdf7', + color: '#15384c' + }); + return result.isConfirmed; + } + + return confirm('Are you sure you want to clear your entire palette?'); +} + +// --- Event Listeners --- + +document.getElementById('clear-palette').addEventListener('click', async () => { + const shouldClear = await confirmClearPalette(); + if (!shouldClear) return; + selectedPalette = []; renderSelectedPalette(); updateSwatchHighlights(); @@ -293,10 +620,18 @@ document.getElementById('shuffle-palette').addEventListener('click', () => { // --- Modal Functionality --- -const shareButton = document.getElementById('share-palette'); -const modalBackdrop = document.querySelector('.palette-modal-backdrop'); -const closeModalButton = document.getElementById('close-modal'); -const modalColorList = document.getElementById('modal-color-list'); +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) { @@ -329,23 +664,96 @@ shareButton.addEventListener('click', () => { }); modalBackdrop.style.display = 'flex'; + syncModalInteractionLock(); }); closeModalButton.addEventListener('click', () => { modalBackdrop.style.display = 'none'; + syncModalInteractionLock(); }); modalBackdrop.addEventListener('click', (event) => { if (event.target === modalBackdrop) { modalBackdrop.style.display = 'none'; + syncModalInteractionLock(); } }); +if (presetButton && presetModalBackdrop && closePresetModalButton) { + presetButton.addEventListener('click', openPresetModal); + closePresetModalButton.addEventListener('click', closePresetModal); + presetModalBackdrop.addEventListener('click', (event) => { + if (event.target === presetModalBackdrop) { + closePresetModal(); + } + }); +} + // --- Zoom Palette Functionality --- const zoomButton = document.getElementById('zoom-palette'); const zoomOverlay = document.getElementById('zoom-overlay'); const zoomedPaletteContent = document.getElementById('zoomed-palette-content'); +const zoomCloseButton = document.getElementById('zoom-close'); + +function renderZoomPaletteComparison() { + zoomedPaletteContent.innerHTML = ''; + + const grid = document.createElement('div'); + grid.classList.add('zoom-palette-grid'); + + selectedPalette.forEach(color => { + const card = document.createElement('div'); + card.classList.add('zoom-color-card'); + + const balloonWrap = document.createElement('div'); + balloonWrap.classList.add('zoom-balloon-wrap'); + + const swatch = document.createElement('div'); + swatch.classList.add('color-swatch', 'zoom-color-balloon'); + swatch.dataset.color = color.hex; + + const backgroundDiv = document.createElement('div'); + backgroundDiv.classList.add('color-background', 'chosen'); + + if (color.image) { + backgroundDiv.style.backgroundImage = `url(${color.image})`; + } else { + backgroundDiv.style.backgroundColor = color.hex; + } + + if (color.metallic) { + backgroundDiv.classList.add('metallic'); + if (color.chromeType && !color.image) { + backgroundDiv.classList.add(`chrome-${color.chromeType}`); + } + } + + const shineImg = document.createElement('img'); + shineImg.classList.add('color-shine'); + shineImg.src = "shine.svg"; + shineImg.alt = ""; + + if (isLightColor(color.hex)) { + backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)'; + shineImg.classList.add('has-halo'); + } + + swatch.appendChild(backgroundDiv); + swatch.appendChild(shineImg); + balloonWrap.appendChild(swatch); + + const name = document.createElement('div'); + name.classList.add('zoom-color-name'); + name.textContent = color.name; + + card.appendChild(balloonWrap); + card.appendChild(name); + grid.appendChild(card); + }); + + zoomedPaletteContent.appendChild(grid); +} // --- Event Listener to OPEN the zoom view --- zoomButton.addEventListener('click', () => { @@ -355,26 +763,18 @@ zoomButton.addEventListener('click', () => { return; } - // Get the original container of the colored balloons - const originalPaletteColors = document.getElementById('palette-colors'); - - // Clear any old content and create a deep clone of the balloons - zoomedPaletteContent.innerHTML = ''; - const clonedContent = originalPaletteColors.cloneNode(true); - - // The clone doesn't need its own ID - clonedContent.id = ''; - - // Append the cloned balloons to our zoom container - zoomedPaletteContent.appendChild(clonedContent); + // 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 --- @@ -387,9 +787,32 @@ zoomOverlay.addEventListener('click', (event) => { } }); -// 2. Press the 'Escape' key +// 2. Click the close button +zoomCloseButton.addEventListener('click', (event) => { + event.preventDefault(); + closeZoomView(); +}); + +// 3. Press the 'Escape' key document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && presetModalBackdrop?.style.display === 'flex') { + closePresetModal(); + return; + } if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) { closeZoomView(); } }); + +// --- Mobile navbar burger (Bulma) --- +const navbarBurger = document.querySelector('.navbar-burger'); +const navbarMenu = document.getElementById('navbarBasicExample'); + +if (navbarBurger && navbarMenu) { + navbarBurger.addEventListener('click', () => { + navbarBurger.classList.toggle('is-active'); + navbarMenu.classList.toggle('is-active'); + const isExpanded = navbarBurger.classList.contains('is-active'); + navbarBurger.setAttribute('aria-expanded', String(isExpanded)); + }); +}