From 278d152fc14388e5a154d8a5ec278e4b80f1e431 Mon Sep 17 00:00:00 2001 From: chris Date: Fri, 4 Jul 2025 20:28:27 -0400 Subject: [PATCH] new balloon mask --- images/1balloon-mask.svg | 71 +++++ images/balloon-mask.svg | 90 +++--- style.css | 653 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 759 insertions(+), 55 deletions(-) create mode 100644 images/1balloon-mask.svg diff --git a/images/1balloon-mask.svg b/images/1balloon-mask.svg new file mode 100644 index 0000000..cc04ded --- /dev/null +++ b/images/1balloon-mask.svg @@ -0,0 +1,71 @@ + + + + diff --git a/images/balloon-mask.svg b/images/balloon-mask.svg index cc04ded..ab283b1 100644 --- a/images/balloon-mask.svg +++ b/images/balloon-mask.svg @@ -2,70 +2,50 @@ + + + + inkscape:label="Image" + id="g1"> + + + diff --git a/style.css b/style.css index 3e4d105..bfb3edb 100644 --- a/style.css +++ b/style.css @@ -234,10 +234,19 @@ footer { .color-shine { position: absolute; top: 50%; +<<<<<<< HEAD left: 55%; width: 70px; opacity: 0.6; z-index: 100; /* make this high enough */ +======= + left: 50%; + width: 20px; + height: auto; + max-width: 20px; + opacity: 0.5; + z-index: 10; +>>>>>>> a20d50f (new balloon mask) pointer-events: none; transform: translate(-50%, -50%); height: auto; @@ -256,6 +265,650 @@ footer { z-index: 1; } +<<<<<<< HEAD +======= +#palette-colors .color-swatch { + body { + margin: 0; + padding: 10px; + box-sizing: border-box; + /* font-family: sans-serif; */ + font-family: "Autour One", serif; + background-color: #e8e8e8; + background-image: url("https://www.transparenttextures.com/patterns/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; + } + + #main-header h1 { + font-size: 2rem; + margin-bottom: 5px; + } + + #main-header p { + font-size: 1rem; + color: #666; + } + + #selected-palette { + position: sticky; + top: 10px; + background: #fff; + z-index: 100; + padding: 10px; + border: 2px solid #ccc; + border-radius: 10px; + transition: box-shadow 0.3s ease; + max-width: 80%; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + + gap: 15px; + background-color: #e8e8e8; + background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); + /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */ + } + + /* 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; + overflow: visible; + padding: 10px; + /* transition: padding 0.3s ease; */ + transition: max-height 0.3s ease, padding 0.3s ease; + } + + + #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; + + } + + @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; + } + + .swatch-wrapper { + padding: 6px; + } + + #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; + + } + .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-around; + /* width: 60px; */ + margin: 0 5px; + padding: 10px; + max-width: min-content; + /* overflow-wrap: break-word; */ + + + } + + /* .color-swatch { + width: 55px; + height: 65px; + border-radius: 50%; + position: relative; + cursor: pointer; + transition: transform 0.2s ease; + } */ + .color-swatch::before { + content: ''; + position: absolute; + top: 10%; + left: 20%; + width: 60%; + height: 40%; + border-radius: 50% / 30%; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.8), + rgba(255, 255, 255, 0) 70% + ); + pointer-events: none; + filter: blur(4px); + } + + .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); + } + + /* .color-swatch::after { + content: ''; + position: absolute; + top: 2%; + left: 2%; + width: 96%; + height: 96%; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.3); + pointer-events: none; + box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2); + } + */ + .color-swatch { + width: 100px; + height: 136px; + position: relative; + background: #ccc; /* fallback */ + transition: transform 0.3s ease; + + background: radial-gradient(circle at 30% 30%, #fff5, transparent 60%), #ddd; + + -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; + + box-shadow: + inset 2px 2px 6px rgba(255, 255, 255, 0.6), + 0 4px 8px rgba(0, 0, 0, 0.2); + } + + + + .color-swatch::after { + content: ''; + position: absolute; + bottom: -6px; + left: 50%; + transform: translateX(-50%); + width: 10px; + height: 6px; + background: inherit; + border-radius: 50% 50% 30% 30%; + box-shadow: inset 0 0 2px rgba(0,0,0,0.2); + } + + + + .color-swatch:hover, + .color-swatch:active { + transform: scale(1.2); + box-shadow: 0 0 5px rgba(0,0,0,0.2); + } + + .color-swatch.chosen { + outline: 3px solid #333; + outline-offset: 1px; + width: 100px; + height: 136px; + z-index: 10; + } + + .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; + } + .color-shine { + position: absolute; + top: 30%; + left: 50%; + width: 20px; + height: auto; + max-width: 20px; + opacity: 0.5; + z-index: 10; + pointer-events: none; + transform: translate(-50%, -50%); + + } + + .color-name { + font-size: 0.85rem; + 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; + } + + #palette-colors .color-swatch { + width: 100px; + height: 136px; + } + + /* .checkmark-overlay { + position: absolute; + top: 4px; + right: 4px; + font-size: 16px; + font-weight: bold; + color: white; + background: rgba(0, 0, 0, 0.6); + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + z-index: 20; + pointer-events: none; + } */ + + @media (max-width: 600px) { + + .swatch-wrapper { + width: 50px; + } + + .color-name { + font-size: 0.65rem; + max-width: 40px; + word-wrap: break-word; + } + + #selected-palette h2 { + font-size: 1.1rem; + } + } + + .color-name { + transition: all 0.3s ease; + } + + .color-name.highlighted-name { + text-decoration:underline; + font-weight: bold; + color: #111; + } + + @keyframes pop { + 0% { transform: scale(1); } + 50% { transform: scale(1.2); } + 100% { transform: scale(1); } + } + + .color-background.pop { + animation: pop 0.25s ease; + } + + .color-background.chosen { + transform: scale(2.2); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + } + .chosen{ + z-index: 4; + } + + /* 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); + } + + .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); + } + + + @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; +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: 50px; /* match .color-swatch height */ + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 40px; + z-index: 0; + 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; + align-items: center; + animation-name: balloonFloat; +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: 30px; /* match .color-swatch height */ + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 40px; + z-index: 0; + 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; + align-items: center; + animation-name: balloonFloat; + animation-duration: 4s;0px; /* match .color-swatch height */ + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 40px; + z-index: 0; + 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; + align-items: center; + animation-name: balloonFloat; + animation-duration: 4s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + transform-origin: bottom center; + } + + .wiggle-path { + stroke: #727171; + stroke-width: 2; + fill: none; + stroke-linecap: round; + stroke-dasharray: 1, 2; + } + + @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: absolute; + top: 10px; + right: 10px; + display: flex; + align-items: center; + gap: 10px; + z-index: 200; + } + + /* Toggle Switch Styling */ + .switch { + position: relative; + display: inline-block; + width: 60px; + 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; + border-radius: 20px; + } + .slider:before { + position: absolute; + content: ""; + height: 14px; + width: 14px; + left: 3px; + bottom: 3px; + background-color: white; + transition: 0.4s; + border-radius: 50%; + } + input:checked + .slider { + background-color: #4caf50; + } + input:checked + .slider:before { + transform: translateX(20px); + } + + /* Shuffle Button */ + #shuffle-palette { + font-size: 16px; + padding: 4px 8px; + border: none; + background: #f0f0f0; + border-radius: 6px; + cursor: pointer; + } + */ +} + + +/* .checkmark-overlay { + position: absolute; + top: 4px; + right: 4px; + font-size: 16px; + font-weight: bold; + color: white; + background: rgba(0, 0, 0, 0.6); + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + z-index: 20; + pointer-events: none; +} */ +>>>>>>> a20d50f (new balloon mask) @media (max-width: 600px) {