Add 'main-site/color-picker/' from commit '248d73a619ea4fbdca711a516f464cd0a505bfae'
git-subtree-dir: main-site/color-picker git-subtree-mainline: 21ebb9667b34023f8d563bf8fa2abf7f838f51d7 git-subtree-split: 248d73a619ea4fbdca711a516f464cd0a505bfae
This commit is contained in:
commit
f58ae2c5f7
3
main-site/color-picker/.vscode/settings.json
vendored
Normal file
3
main-site/color-picker/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"liveServer.settings.port": 5504
|
||||||
|
}
|
||||||
BIN
main-site/color-picker/1shine.svg
Normal file
BIN
main-site/color-picker/1shine.svg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
main-site/color-picker/assets/logo/BeachPartyBalloons-logo.webp
Normal file
BIN
main-site/color-picker/assets/logo/BeachPartyBalloons-logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
main-site/color-picker/assets/pictures/asfalt-dark.png
Normal file
BIN
main-site/color-picker/assets/pictures/asfalt-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
1451
main-site/color-picker/color.css
Normal file
1451
main-site/color-picker/color.css
Normal file
File diff suppressed because it is too large
Load Diff
254
main-site/color-picker/colors.json
Normal file
254
main-site/color-picker/colors.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
71
main-site/color-picker/images/1balloon-mask.svg
Normal file
71
main-site/color-picker/images/1balloon-mask.svg
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="12in"
|
||||||
|
height="12in"
|
||||||
|
viewBox="0 0 39.999867 39.999867"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||||
|
xml:space="preserve"
|
||||||
|
sodipodi:docname="balloon-mask1.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#111111"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="true"
|
||||||
|
inkscape:pageopacity="0.00392157"
|
||||||
|
inkscape:pagecheckerboard="1"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="in"
|
||||||
|
showgrid="true"
|
||||||
|
inkscape:zoom="0.93262836"
|
||||||
|
inkscape:cx="847.06839"
|
||||||
|
inkscape:cy="614.39264"
|
||||||
|
inkscape:window-width="2560"
|
||||||
|
inkscape:window-height="1532"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:lockguides="false"
|
||||||
|
showborder="true"
|
||||||
|
inkscape:snap-global="false"><inkscape:grid
|
||||||
|
id="grid1"
|
||||||
|
units="in"
|
||||||
|
originx="0"
|
||||||
|
originy="0"
|
||||||
|
spacingx="3.3333222"
|
||||||
|
spacingy="3.3333222"
|
||||||
|
empcolor="#0099e5"
|
||||||
|
empopacity="0.41176471"
|
||||||
|
color="#e51100"
|
||||||
|
opacity="0.30196078"
|
||||||
|
empspacing="5"
|
||||||
|
dotted="false"
|
||||||
|
gridanglex="30"
|
||||||
|
gridanglez="30"
|
||||||
|
visible="true"
|
||||||
|
snapvisiblegridlinesonly="true"
|
||||||
|
enabled="true" /></sodipodi:namedview><defs
|
||||||
|
id="defs1"><color-profile
|
||||||
|
name="Built-in-display"
|
||||||
|
xlink:href="../../../.local/share/icc/edid-88fcf6ba6729e8e4531280899cfccbad.icc"
|
||||||
|
id="color-profile3338" /><color-profile
|
||||||
|
name="Built-in-display"
|
||||||
|
xlink:href="../../../.local/share/icc/edid-88fcf6ba6729e8e4531280899cfccbad.icc"
|
||||||
|
id="color-profile3340" /></defs><g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"><path
|
||||||
|
style="fill:#ffffff;stroke:#000000;stroke-width:0;stroke-linejoin:round;stroke-dashoffset:297.6;paint-order:stroke markers fill"
|
||||||
|
d="m 21.227687,32.109589 c 0.624172,-0.03563 0.710957,-0.06698 0.809593,-0.292541 0.111029,-0.253897 0.09912,-0.307345 -0.240234,-1.078141 -0.174461,-0.396274 -0.294294,-0.741734 -0.2663,-0.76769 0.028,-0.02596 0.228136,-0.112851 0.44475,-0.193094 1.995094,-0.739052 3.728405,-2.506163 5.411409,-5.516916 1.220107,-2.182667 2.190925,-4.927783 2.72858,-7.715409 0.205455,-1.065242 0.27528,-3.230083 0.132803,-4.117189 -0.92694,-5.3136132 -5.113634,-8.7321766 -9.099685,-8.8288819 -1.386756,-0.032517 -1.869622,0.036057 -2.992621,0.4247129 -3.317278,1.1480578 -5.807323,4.2711432 -6.501356,8.154187 -0.262848,1.470608 -0.187185,3.472708 0.205696,5.44264 0.625764,3.137673 1.896442,6.36622 3.388147,8.608653 0.43191,0.649277 1.544521,1.935737 2.054649,2.375694 0.442106,0.381296 1.399196,0.967298 1.866288,1.142685 0.188138,0.07064 0.341629,0.146181 0.341096,0.167867 -5.41e-4,0.02169 -0.143212,0.330201 -0.317063,0.685577 -0.403624,0.825076 -0.418669,1.148088 -0.06362,1.36587 0.156034,0.09572 1.415279,0.180933 2.097874,0.141981 z"
|
||||||
|
id="path2013"
|
||||||
|
sodipodi:nodetypes="sssssssccssssssssss" /></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
51
main-site/color-picker/images/balloon-mask(1).svg
Normal file
51
main-site/color-picker/images/balloon-mask(1).svg
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="266.66666"
|
||||||
|
height="266.66666"
|
||||||
|
viewBox="0 0 266.66666 266.66666"
|
||||||
|
sodipodi:docname="970844-200.png"
|
||||||
|
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||||
|
inkscape:dataloss="true"
|
||||||
|
inkscape:export-filename="balloon.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.8537501"
|
||||||
|
inkscape:cx="133.33333"
|
||||||
|
inkscape:cy="133.33333"
|
||||||
|
inkscape:window-width="1913"
|
||||||
|
inkscape:window-height="965"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g1" />
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Image"
|
||||||
|
id="g1">
|
||||||
|
<path
|
||||||
|
style="fill:#000000"
|
||||||
|
d="m 110.86728,176.98292 c -4.14002,0 -4.72369,-2.23401 -2.50756,-9.59765 l 1.86611,-6.20063 -6.64984,-2.17505 C 79.220392,151.04328 59.783306,123.31229 54.44661,88.916447 50.643745,64.406394 58.908048,38.185685 75.880855,20.91057 112.83686,-16.70367 169.04213,6.1526753 179.48832,63.043415 c 1.80388,9.824085 1.93369,13.895611 0.74359,23.324138 -3.90357,30.925927 -19.83967,57.568167 -41.24178,68.948697 -4.48207,2.38333 -8.96523,4.34252 -9.96258,4.35375 -4.50331,0.0507 -5.26813,1.96681 -3.1647,7.92856 2.23565,6.33649 1.10587,9.38436 -3.47859,9.38436 z"
|
||||||
|
id="path1"
|
||||||
|
sodipodi:nodetypes="sscssssssssss" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
51
main-site/color-picker/images/balloon-mask.svg
Normal file
51
main-site/color-picker/images/balloon-mask.svg
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="266.66666"
|
||||||
|
height="266.66666"
|
||||||
|
viewBox="0 0 266.66666 266.66666"
|
||||||
|
sodipodi:docname="970844-200.png"
|
||||||
|
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||||
|
inkscape:dataloss="true"
|
||||||
|
inkscape:export-filename="balloon.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="2.8537501"
|
||||||
|
inkscape:cx="133.33333"
|
||||||
|
inkscape:cy="133.33333"
|
||||||
|
inkscape:window-width="1913"
|
||||||
|
inkscape:window-height="965"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g1" />
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Image"
|
||||||
|
id="g1">
|
||||||
|
<path
|
||||||
|
style="fill:#000000"
|
||||||
|
d="m 110.86728,176.98292 c -4.14002,0 -4.72369,-2.23401 -2.50756,-9.59765 l 1.86611,-6.20063 -6.64984,-2.17505 C 79.220392,151.04328 59.783306,123.31229 54.44661,88.916447 50.643745,64.406394 58.908048,38.185685 75.880855,20.91057 112.83686,-16.70367 169.04213,6.1526753 179.48832,63.043415 c 1.80388,9.824085 1.93369,13.895611 0.74359,23.324138 -3.90357,30.925927 -19.83967,57.568167 -41.24178,68.948697 -4.48207,2.38333 -8.96523,4.34252 -9.96258,4.35375 -4.50331,0.0507 -5.26813,1.96681 -3.1647,7.92856 2.23565,6.33649 1.10587,9.38436 -3.47859,9.38436 z"
|
||||||
|
id="path1"
|
||||||
|
sodipodi:nodetypes="sscssssssssss" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
main-site/color-picker/images/chrome-blue.webp
Normal file
BIN
main-site/color-picker/images/chrome-blue.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
main-site/color-picker/images/chrome-champagne.webp
Normal file
BIN
main-site/color-picker/images/chrome-champagne.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
main-site/color-picker/images/chrome-gold.webp
Normal file
BIN
main-site/color-picker/images/chrome-gold.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
main-site/color-picker/images/chrome-green.webp
Normal file
BIN
main-site/color-picker/images/chrome-green.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
main-site/color-picker/images/chrome-pink.webp
Normal file
BIN
main-site/color-picker/images/chrome-pink.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
main-site/color-picker/images/chrome-purple.webp
Normal file
BIN
main-site/color-picker/images/chrome-purple.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
main-site/color-picker/images/chrome-rosegold.webp
Normal file
BIN
main-site/color-picker/images/chrome-rosegold.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
main-site/color-picker/images/chrome-silver.webp
Normal file
BIN
main-site/color-picker/images/chrome-silver.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
main-site/color-picker/images/chrome-spacegrey.webp
Normal file
BIN
main-site/color-picker/images/chrome-spacegrey.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
main-site/color-picker/images/chrome-truffle.webp
Normal file
BIN
main-site/color-picker/images/chrome-truffle.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
main-site/color-picker/images/classic-gold.webp
Normal file
BIN
main-site/color-picker/images/classic-gold.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
main-site/color-picker/images/classic-silver.webp
Normal file
BIN
main-site/color-picker/images/classic-silver.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
main-site/color-picker/images/metalic-rosegold.webp
Normal file
BIN
main-site/color-picker/images/metalic-rosegold.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
main-site/color-picker/images/pearl-fuchsia.webp
Normal file
BIN
main-site/color-picker/images/pearl-fuchsia.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
main-site/color-picker/images/pearl-lightblue.webp
Normal file
BIN
main-site/color-picker/images/pearl-lightblue.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
main-site/color-picker/images/pearl-lilac.webp
Normal file
BIN
main-site/color-picker/images/pearl-lilac.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
main-site/color-picker/images/pearl-midnightblue.webp
Normal file
BIN
main-site/color-picker/images/pearl-midnightblue.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
main-site/color-picker/images/pearl-peach.webp
Normal file
BIN
main-site/color-picker/images/pearl-peach.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
BIN
main-site/color-picker/images/pearl-periwinkle.webp
Normal file
BIN
main-site/color-picker/images/pearl-periwinkle.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
main-site/color-picker/images/pearl-pink.webp
Normal file
BIN
main-site/color-picker/images/pearl-pink.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
main-site/color-picker/images/pearl-sapphire.webp
Normal file
BIN
main-site/color-picker/images/pearl-sapphire.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
main-site/color-picker/images/pearl-violet.webp
Normal file
BIN
main-site/color-picker/images/pearl-violet.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
main-site/color-picker/images/pearl-white.webp
Normal file
BIN
main-site/color-picker/images/pearl-white.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
134
main-site/color-picker/index.html
Normal file
134
main-site/color-picker/index.html
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Beach Party Balloons Color Palette Picker</title>
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../style.css">
|
||||||
|
<link rel="stylesheet" href="color.css">
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="../assets/favicon/site.webmanifest">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav class="navbar is-info is-spaced has-shadow" role="navigation" aria-label="main navigation">
|
||||||
|
<div class="navbar-brand is-size-1">
|
||||||
|
<a class="navbar-item" href="/">
|
||||||
|
<img style="background-color: white;" src="../assets/logo/BeachPartyBalloons-logo.webp" alt="Beach Party Balloons logo">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="navbarBasicExample" class="navbar-menu has-text-right">
|
||||||
|
<div class="navbar-end">
|
||||||
|
<a class="navbar-item is-tab" href="/">Home</a>
|
||||||
|
<a class="navbar-item" href="https://shop.beachpartyballoons.com">Shop</a>
|
||||||
|
<a class="navbar-item" href="../about/">About Us</a>
|
||||||
|
<a class="navbar-item" href="../faq/">FAQ</a>
|
||||||
|
<a class="navbar-item" href="../terms/">Terms</a>
|
||||||
|
<a class="navbar-item" href="../gallery/">Gallery</a>
|
||||||
|
<a class="navbar-item is-active is-tab" href="../color/">Colors</a>
|
||||||
|
<a class="navbar-item" href="../contact/">Contact</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="color-picker-app">
|
||||||
|
<section class="picker-layout">
|
||||||
|
<aside id="selected-palette" aria-label="Selected palette">
|
||||||
|
<div class="palette-header-row">
|
||||||
|
<div class="palette-title-group">
|
||||||
|
<h2 class="has-text-dark">Your Palette</h2>
|
||||||
|
</div>
|
||||||
|
<div id="palette-controls" aria-label="Palette controls">
|
||||||
|
<label class="switch" title="Toggle Animations" aria-label="Toggle animations">
|
||||||
|
<input type="checkbox" id="toggle-animation" checked>
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
<button id="shuffle-palette" class="palette-control-btn" title="Shuffle Palette" aria-label="Shuffle palette">
|
||||||
|
<i class="fa-solid fa-shuffle"></i>
|
||||||
|
</button>
|
||||||
|
<button id="preset-palettes" class="palette-control-btn" title="Palette Ideas" aria-label="Palette ideas">
|
||||||
|
<i class="fa-solid fa-palette"></i>
|
||||||
|
</button>
|
||||||
|
<button id="share-palette" class="palette-control-btn" title="Share Palette" aria-label="Share palette">
|
||||||
|
<i class="fa-solid fa-share-nodes"></i>
|
||||||
|
</button>
|
||||||
|
<button id="zoom-palette" class="palette-control-btn" title="Zoom In Palette" aria-label="Zoom palette">
|
||||||
|
<i class="fa-solid fa-magnifying-glass-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="palette-meta-row">
|
||||||
|
<span id="palette-count" class="palette-count-badge">0 selected</span>
|
||||||
|
<span class="palette-hint">Tap a balloon below to add it here</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="palette-colors" aria-live="polite"></div>
|
||||||
|
|
||||||
|
<div class="palette-footer-row">
|
||||||
|
<button id="clear-palette" class="has-text-dark">Clear Palette</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="library-panel" aria-labelledby="library-heading">
|
||||||
|
<h2 id="library-heading" class="library-inline-title">Colors</h2>
|
||||||
|
<div id="color-families"></div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Made with 🎨 and 🎈 | Chris © 2025</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div class="palette-modal-backdrop">
|
||||||
|
<div class="palette-modal">
|
||||||
|
<h3>Share Your Palette</h3>
|
||||||
|
<div id="modal-color-list"></div>
|
||||||
|
<button id="close-modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preset-modal-backdrop" aria-hidden="true">
|
||||||
|
<div class="preset-modal" role="dialog" aria-modal="true" aria-labelledby="preset-modal-title">
|
||||||
|
<div class="preset-modal-header">
|
||||||
|
<h3 id="preset-modal-title">Palette Ideas</h3>
|
||||||
|
<button id="close-preset-modal" type="button" aria-label="Close palette ideas">
|
||||||
|
<i class="fa-solid fa-xmark"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="preset-modal-subtitle">Quick starting points you can tweak after applying.</p>
|
||||||
|
<div id="preset-palette-list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="zoom-overlay">
|
||||||
|
<div id="zoom-modal-shell">
|
||||||
|
<a href="#" id="zoom-close" aria-label="Close zoom view">×</a>
|
||||||
|
<div id="zoomed-palette-content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
64
main-site/color-picker/list.txt
Normal file
64
main-site/color-picker/list.txt
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
Retro White #e8e3d9
|
||||||
|
White #ffffff
|
||||||
|
Cameo #e9ccc8
|
||||||
|
Sand #e1d8c6
|
||||||
|
Stone #8f8d7c
|
||||||
|
Willow #497259
|
||||||
|
Latte #a97d55
|
||||||
|
Smoke #75777b
|
||||||
|
Grey #ced3d4
|
||||||
|
Light Pink #fcccda
|
||||||
|
Blush #ecccad
|
||||||
|
Rose Pink #d984a3
|
||||||
|
Fuchsia #eb4799
|
||||||
|
Rosewood #ad7271
|
||||||
|
Cayon Rose #ca93b3
|
||||||
|
Coral #bd4b3b
|
||||||
|
Rose Gold
|
||||||
|
Aloha #e45c56
|
||||||
|
Red #ef2a2f
|
||||||
|
Maroon #80011f
|
||||||
|
Burnt Orange #9d4223
|
||||||
|
Orange #ef6b24
|
||||||
|
Goldenrod #f7b615
|
||||||
|
Yellow #f5e812
|
||||||
|
Pastel Yellow #fcfd96
|
||||||
|
Lime Green #8fc73e
|
||||||
|
Grass Green #28b35e
|
||||||
|
Seafoam #00c7b2
|
||||||
|
Pastel Green #acdba7
|
||||||
|
Forest Green #218b21
|
||||||
|
Orchid #a42487
|
||||||
|
Sky Blue #c6e9e8
|
||||||
|
Medium Blue #1b89e8
|
||||||
|
Royal Blue #005eb7
|
||||||
|
Blue Slate #327295
|
||||||
|
Caribbean Blue #0bbbb6
|
||||||
|
Tropical Teal #0d868f
|
||||||
|
Dark Blue #26408e
|
||||||
|
Navy #262266
|
||||||
|
Violet #812a8c
|
||||||
|
Lavender #866c92
|
||||||
|
Lilac #c69edb
|
||||||
|
Coffee #957461
|
||||||
|
Classic Gold #dea85e
|
||||||
|
Fog #6b9098
|
||||||
|
Empowermint #779786
|
||||||
|
Ecualyptus #497259
|
||||||
|
Pastel Dusk #d7c4c8
|
||||||
|
black #0b0d0f
|
||||||
|
|
||||||
|
Pearl White
|
||||||
|
Pearl Midnight Blue
|
||||||
|
Pearl Fuchsia
|
||||||
|
Pearl Periwinkle
|
||||||
|
Pearl Sapphire
|
||||||
|
Pearl Violet
|
||||||
|
Pearl Lilac
|
||||||
|
Pearl Blue
|
||||||
|
Pearl Green
|
||||||
|
Pearl Pink
|
||||||
|
Pearl Fuchsia
|
||||||
|
Pearl Red
|
||||||
|
|
||||||
|
Wildberry
|
||||||
818
main-site/color-picker/script.js
Normal file
818
main-site/color-picker/script.js
Normal file
@ -0,0 +1,818 @@
|
|||||||
|
let selectedPalette = [];
|
||||||
|
let animationsEnabled = true;
|
||||||
|
let allColorFamilies = [];
|
||||||
|
let colorSearchQuery = '';
|
||||||
|
let colorSortMode = 'default';
|
||||||
|
|
||||||
|
const PRESET_PALETTES = [
|
||||||
|
{
|
||||||
|
id: 'soft-baby-shower',
|
||||||
|
name: 'Pastels',
|
||||||
|
tag: 'Pastels',
|
||||||
|
description: 'Gentle mix of pink, blue, lilac, and white.',
|
||||||
|
colors: ['White', 'Light Pink', 'Sky Blue', 'Lilac', 'Pastel Green', 'Pastel Yellow']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'beach-party',
|
||||||
|
name: 'Muted Naturals',
|
||||||
|
tag: 'Neutral',
|
||||||
|
description: 'Soft neutral mix with a chrome champagne accent.',
|
||||||
|
colors: ['Cameo', 'Sand', 'White', 'Chrome Champagne']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'elegant-neutral',
|
||||||
|
name: 'Elegant Neutral',
|
||||||
|
tag: 'Event',
|
||||||
|
description: 'Wedding-friendly neutrals with soft warmth.',
|
||||||
|
colors: ['White', 'Retro White', 'Sand', 'Cameo', 'Fog']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'chrome-lux',
|
||||||
|
name: 'Midnight Steel',
|
||||||
|
tag: 'Bold',
|
||||||
|
description: 'Deep dark base with pearl blues and chrome grey accents.',
|
||||||
|
colors: ['Black', 'Pearl Midnight Blue', 'Pearl Sapphire', 'Chrome Space Grey']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'jewel-night',
|
||||||
|
name: 'Modern Minimal',
|
||||||
|
tag: 'Trend',
|
||||||
|
description: 'Clean neutrals with a muted blue accent for a current look.',
|
||||||
|
colors: ['White', 'Sand', 'Grey', 'Fog', 'Sea Glass']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pearl-dream',
|
||||||
|
name: 'Tropical Rainbow',
|
||||||
|
tag: 'Bright',
|
||||||
|
description: 'Bold tropical brights for playful rainbow installs.',
|
||||||
|
colors: ['Fuchsia', 'Goldenrod', 'Caribbean Blue', 'Lime Green', 'Yellow', 'Lavender']
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// --- LOCAL STORAGE LOADING ---
|
||||||
|
// Load palette from Local Storage on startup
|
||||||
|
const savedPaletteJSON = localStorage.getItem('userPalette');
|
||||||
|
if (savedPaletteJSON) {
|
||||||
|
try {
|
||||||
|
selectedPalette = JSON.parse(savedPaletteJSON);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error parsing saved palette from Local Storage", e);
|
||||||
|
selectedPalette = []; // Reset if data is corrupt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main function to fetch color data and build the page
|
||||||
|
fetch('colors.json')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
allColorFamilies = data;
|
||||||
|
renderColorFamilies();
|
||||||
|
initializeLibraryControls();
|
||||||
|
|
||||||
|
// Initialize the palette, checking for shared links or local versions
|
||||||
|
initializePaletteOnLoad(data);
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error loading colors:', error));
|
||||||
|
|
||||||
|
function renderColorFamilies() {
|
||||||
|
const colorFamiliesContainer = document.getElementById('color-families');
|
||||||
|
colorFamiliesContainer.innerHTML = '';
|
||||||
|
|
||||||
|
const query = colorSearchQuery.trim().toLowerCase();
|
||||||
|
let visibleFamilyCount = 0;
|
||||||
|
|
||||||
|
allColorFamilies.forEach(family => {
|
||||||
|
const familyMatchesQuery = family.family.toLowerCase().includes(query);
|
||||||
|
let colors = [...family.colors];
|
||||||
|
|
||||||
|
if (colorSortMode === 'az') {
|
||||||
|
colors.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
} else if (colorSortMode === 'lightness') {
|
||||||
|
colors.sort((a, b) => getPerceivedBrightness(a.hex ?? '#000000') - getPerceivedBrightness(b.hex ?? '#000000'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (query) {
|
||||||
|
colors = colors.filter(color => {
|
||||||
|
const nameMatch = color.name.toLowerCase().includes(query);
|
||||||
|
const hexMatch = (color.hex || '').toLowerCase().includes(query);
|
||||||
|
return familyMatchesQuery || nameMatch || hexMatch;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (query && colors.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
visibleFamilyCount += 1;
|
||||||
|
|
||||||
|
const familyDiv = document.createElement('div');
|
||||||
|
familyDiv.classList.add('color-family', 'has-text-dark');
|
||||||
|
familyDiv.innerHTML = `<h3>${family.family}</h3>`;
|
||||||
|
|
||||||
|
const swatchContainer = document.createElement('div');
|
||||||
|
swatchContainer.classList.add('swatch-container');
|
||||||
|
|
||||||
|
colors.forEach(color => {
|
||||||
|
swatchContainer.appendChild(createColorSwatch(color));
|
||||||
|
});
|
||||||
|
|
||||||
|
familyDiv.appendChild(swatchContainer);
|
||||||
|
colorFamiliesContainer.appendChild(familyDiv);
|
||||||
|
});
|
||||||
|
|
||||||
|
colorFamiliesContainer.classList.toggle('has-filtered-results-none', visibleFamilyCount === 0);
|
||||||
|
updateSwatchHighlights();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createColorSwatch(color) {
|
||||||
|
const swatchWrapper = document.createElement('div');
|
||||||
|
swatchWrapper.classList.add('swatch-wrapper');
|
||||||
|
|
||||||
|
const swatch = document.createElement('div');
|
||||||
|
swatch.classList.add('color-swatch');
|
||||||
|
swatch.dataset.color = color.hex;
|
||||||
|
swatch.style.color = color.hex;
|
||||||
|
swatch.setAttribute('role', 'button');
|
||||||
|
swatch.setAttribute('tabindex', '0');
|
||||||
|
swatch.setAttribute('aria-label', `Toggle ${color.name}`);
|
||||||
|
|
||||||
|
const backgroundDiv = document.createElement('div');
|
||||||
|
backgroundDiv.classList.add('color-background');
|
||||||
|
|
||||||
|
if (color.image) {
|
||||||
|
backgroundDiv.classList.add('finish-image');
|
||||||
|
backgroundDiv.style.backgroundImage = `url(${color.image})`;
|
||||||
|
} else {
|
||||||
|
backgroundDiv.style.backgroundColor = color.hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (color.metallic) {
|
||||||
|
backgroundDiv.classList.add('metallic');
|
||||||
|
if (color.chromeType && !color.image) {
|
||||||
|
backgroundDiv.classList.add(`chrome-${color.chromeType}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const shineImg = document.createElement('img');
|
||||||
|
shineImg.classList.add('color-shine');
|
||||||
|
shineImg.src = "shine.svg";
|
||||||
|
shineImg.alt = "";
|
||||||
|
|
||||||
|
if (isLightColor(color.hex)) {
|
||||||
|
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
|
||||||
|
shineImg.classList.add('has-halo');
|
||||||
|
}
|
||||||
|
|
||||||
|
swatch.appendChild(backgroundDiv);
|
||||||
|
swatch.appendChild(shineImg);
|
||||||
|
|
||||||
|
const colorName = document.createElement('span');
|
||||||
|
colorName.classList.add('color-name');
|
||||||
|
colorName.textContent = color.name;
|
||||||
|
|
||||||
|
swatch.addEventListener('click', () => {
|
||||||
|
const isSelected = selectedPalette.some(c => c.hex === color.hex);
|
||||||
|
if (isSelected) {
|
||||||
|
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
|
||||||
|
} else {
|
||||||
|
selectedPalette.push(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
backgroundDiv.classList.add('pop');
|
||||||
|
backgroundDiv.addEventListener('animationend', () => {
|
||||||
|
backgroundDiv.classList.remove('pop');
|
||||||
|
}, { once: true });
|
||||||
|
|
||||||
|
renderSelectedPalette();
|
||||||
|
updateSwatchHighlights();
|
||||||
|
});
|
||||||
|
|
||||||
|
swatch.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'Enter' || event.key === ' ') {
|
||||||
|
event.preventDefault();
|
||||||
|
swatch.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
swatchWrapper.appendChild(swatch);
|
||||||
|
swatchWrapper.appendChild(colorName);
|
||||||
|
return swatchWrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeLibraryControls() {
|
||||||
|
const searchInput = document.getElementById('color-search');
|
||||||
|
const sortSelect = document.getElementById('color-sort');
|
||||||
|
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', (event) => {
|
||||||
|
colorSearchQuery = event.target.value || '';
|
||||||
|
renderColorFamilies();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sortSelect) {
|
||||||
|
sortSelect.addEventListener('change', (event) => {
|
||||||
|
colorSortMode = event.target.value || 'default';
|
||||||
|
renderColorFamilies();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function findColorByNameOrHex(token) {
|
||||||
|
const normalized = String(token || '').trim().toLowerCase();
|
||||||
|
if (!normalized) return null;
|
||||||
|
const allColors = allColorFamilies.flatMap(family => family.colors);
|
||||||
|
|
||||||
|
return allColors.find(color =>
|
||||||
|
color.name.toLowerCase() === normalized ||
|
||||||
|
(color.hex || '').toLowerCase() === normalized
|
||||||
|
) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolvePresetPalette(preset) {
|
||||||
|
return preset.colors
|
||||||
|
.map(findColorByNameOrHex)
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPresetPaletteModal() {
|
||||||
|
const presetList = document.getElementById('preset-palette-list');
|
||||||
|
if (!presetList) return;
|
||||||
|
|
||||||
|
presetList.innerHTML = '';
|
||||||
|
|
||||||
|
PRESET_PALETTES.forEach(preset => {
|
||||||
|
const resolvedColors = resolvePresetPalette(preset);
|
||||||
|
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'preset-card';
|
||||||
|
|
||||||
|
const titleRow = document.createElement('div');
|
||||||
|
titleRow.className = 'preset-card-title-row';
|
||||||
|
titleRow.innerHTML = `
|
||||||
|
<h4 class="preset-card-title">${preset.name}</h4>
|
||||||
|
<span class="preset-card-tag">${preset.tag}</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const desc = document.createElement('p');
|
||||||
|
desc.className = 'preset-card-desc';
|
||||||
|
desc.textContent = preset.description;
|
||||||
|
|
||||||
|
const preview = document.createElement('div');
|
||||||
|
preview.className = 'preset-preview';
|
||||||
|
resolvedColors.forEach(color => {
|
||||||
|
const dot = document.createElement('span');
|
||||||
|
dot.className = 'preset-dot';
|
||||||
|
dot.title = color.name;
|
||||||
|
|
||||||
|
if (color.image) {
|
||||||
|
dot.classList.add('is-image');
|
||||||
|
dot.style.backgroundImage = `url(${color.image})`;
|
||||||
|
} else {
|
||||||
|
dot.style.backgroundColor = color.hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLightColor(color.hex)) {
|
||||||
|
dot.style.borderColor = 'rgba(21,56,76,0.24)';
|
||||||
|
}
|
||||||
|
|
||||||
|
preview.appendChild(dot);
|
||||||
|
});
|
||||||
|
|
||||||
|
const applyButton = document.createElement('button');
|
||||||
|
applyButton.type = 'button';
|
||||||
|
applyButton.textContent = 'Use Palette';
|
||||||
|
applyButton.addEventListener('click', () => {
|
||||||
|
if (resolvedColors.length === 0) return;
|
||||||
|
selectedPalette = resolvedColors.map(color => ({ ...color }));
|
||||||
|
renderSelectedPalette();
|
||||||
|
updateSwatchHighlights();
|
||||||
|
closePresetModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
card.appendChild(titleRow);
|
||||||
|
card.appendChild(desc);
|
||||||
|
card.appendChild(preview);
|
||||||
|
card.appendChild(applyButton);
|
||||||
|
presetList.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Saves the current 'selectedPalette' array to the browser's Local Storage.
|
||||||
|
*/
|
||||||
|
function savePaletteToLocalStorage() {
|
||||||
|
localStorage.setItem('userPalette', JSON.stringify(selectedPalette));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders the selected colors as floating balloons in the top palette.
|
||||||
|
*/
|
||||||
|
function renderSelectedPalette() {
|
||||||
|
const paletteColorsContainer = document.getElementById('palette-colors');
|
||||||
|
paletteColorsContainer.innerHTML = '';
|
||||||
|
|
||||||
|
if (selectedPalette.length === 0) {
|
||||||
|
paletteColorsContainer.classList.add('is-empty');
|
||||||
|
paletteColorsContainer.innerHTML = `
|
||||||
|
<div class="palette-empty-state">
|
||||||
|
<i class="fa-solid fa-circle-dot"></i>
|
||||||
|
<strong>No balloons selected yet</strong>
|
||||||
|
<span>Tap colors below to build a palette, then shuffle, zoom, or share it.</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
updatePaletteUIState();
|
||||||
|
savePaletteToLocalStorage();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
paletteColorsContainer.classList.remove('is-empty');
|
||||||
|
|
||||||
|
selectedPalette.forEach(color => {
|
||||||
|
const swatchWrapper = document.createElement('div');
|
||||||
|
swatchWrapper.classList.add('swatch-wrapper');
|
||||||
|
|
||||||
|
const floatGroup = document.createElement('div');
|
||||||
|
floatGroup.classList.add('balloon-float-group');
|
||||||
|
let floatDuration = '4s';
|
||||||
|
let floatDelay = '0s';
|
||||||
|
|
||||||
|
if (animationsEnabled) {
|
||||||
|
floatDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
|
||||||
|
floatDelay = `${(Math.random() * 2).toFixed(2)}s`;
|
||||||
|
floatGroup.style.animationDuration = floatDuration;
|
||||||
|
floatGroup.style.animationDelay = floatDelay;
|
||||||
|
} else {
|
||||||
|
floatGroup.style.animation = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
const swatch = document.createElement('div');
|
||||||
|
swatch.classList.add('color-swatch');
|
||||||
|
swatch.dataset.color = color.hex;
|
||||||
|
swatch.setAttribute('role', 'button');
|
||||||
|
swatch.setAttribute('tabindex', '0');
|
||||||
|
swatch.setAttribute('aria-label', `Remove ${color.name} from palette`);
|
||||||
|
|
||||||
|
const backgroundDiv = document.createElement('div');
|
||||||
|
backgroundDiv.classList.add('color-background', 'chosen');
|
||||||
|
|
||||||
|
if (color.image) {
|
||||||
|
backgroundDiv.style.backgroundImage = `url(${color.image})`;
|
||||||
|
} else {
|
||||||
|
backgroundDiv.style.backgroundColor = color.hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (color.metallic) {
|
||||||
|
backgroundDiv.classList.add('metallic');
|
||||||
|
if (color.chromeType && !color.image) {
|
||||||
|
backgroundDiv.classList.add(`chrome-${color.chromeType}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const shineImg = document.createElement('img');
|
||||||
|
shineImg.classList.add('color-shine');
|
||||||
|
shineImg.src = "shine.svg";
|
||||||
|
shineImg.alt = "";
|
||||||
|
|
||||||
|
if (isLightColor(color.hex)) {
|
||||||
|
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
|
||||||
|
shineImg.classList.add('has-halo');
|
||||||
|
}
|
||||||
|
|
||||||
|
swatch.appendChild(backgroundDiv);
|
||||||
|
swatch.appendChild(shineImg);
|
||||||
|
|
||||||
|
const svgNS = "http://www.w3.org/2000/svg";
|
||||||
|
const stringSVG = document.createElementNS(svgNS, "svg");
|
||||||
|
stringSVG.setAttribute("class", "balloon-string-svg");
|
||||||
|
stringSVG.setAttribute("viewBox", "0 0 20 60");
|
||||||
|
const path = document.createElementNS(svgNS, "path");
|
||||||
|
const basePathD = "M10 0 C6 8, 14 14, 9 22 C5 29, 14 35, 10 43 C7 49, 12 54, 10 60";
|
||||||
|
const rightLeadD = "M10 0 C8 7, 16 13, 12 21 C8 28, 16 34, 13 42 C10 48, 13 54, 11 60";
|
||||||
|
const rightSnapD = "M10 0 C9 8, 17 15, 13 23 C9 30, 17 36, 14 44 C11 50, 14 55, 12 60";
|
||||||
|
const centerRecoverD = "M10 0 C7 8, 15 14, 10 22 C6 29, 13 35, 9 43 C7 49, 12 54, 10 60";
|
||||||
|
const leftLeadD = "M10 0 C4 8, 12 14, 7 22 C3 29, 12 35, 8 43 C5 49, 11 54, 9 60";
|
||||||
|
const leftSnapD = "M10 0 C3 9, 11 15, 6 23 C2 30, 11 36, 7 44 C4 50, 10 55, 8 60";
|
||||||
|
const centerSettleD = "M10 0 C6 8, 14 14, 9 22 C5 29, 13 35, 9 43 C7 49, 12 54, 10 60";
|
||||||
|
|
||||||
|
path.setAttribute("d", basePathD);
|
||||||
|
path.setAttribute("class", "wiggle-path");
|
||||||
|
path.setAttribute("stroke", "#444");
|
||||||
|
path.setAttribute("stroke-width", "2");
|
||||||
|
path.setAttribute("fill", "none");
|
||||||
|
|
||||||
|
if (animationsEnabled) {
|
||||||
|
const bendAnimate = document.createElementNS(svgNS, "animate");
|
||||||
|
bendAnimate.setAttribute("attributeName", "d");
|
||||||
|
bendAnimate.setAttribute("dur", floatDuration);
|
||||||
|
bendAnimate.setAttribute("begin", floatDelay);
|
||||||
|
bendAnimate.setAttribute("repeatCount", "indefinite");
|
||||||
|
bendAnimate.setAttribute(
|
||||||
|
"values",
|
||||||
|
`${basePathD};${rightLeadD};${rightSnapD};${centerRecoverD};${leftLeadD};${leftSnapD};${centerSettleD};${basePathD}`
|
||||||
|
);
|
||||||
|
bendAnimate.setAttribute("keyTimes", "0;0.14;0.24;0.42;0.62;0.74;0.9;1");
|
||||||
|
bendAnimate.setAttribute("calcMode", "spline");
|
||||||
|
bendAnimate.setAttribute(
|
||||||
|
"keySplines",
|
||||||
|
"0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1"
|
||||||
|
);
|
||||||
|
path.appendChild(bendAnimate);
|
||||||
|
}
|
||||||
|
|
||||||
|
stringSVG.appendChild(path);
|
||||||
|
|
||||||
|
floatGroup.appendChild(swatch);
|
||||||
|
floatGroup.appendChild(stringSVG);
|
||||||
|
swatchWrapper.appendChild(floatGroup);
|
||||||
|
|
||||||
|
const colorName = document.createElement('span');
|
||||||
|
colorName.classList.add('color-name', 'highlighted-name');
|
||||||
|
colorName.textContent = color.name;
|
||||||
|
swatchWrapper.appendChild(colorName);
|
||||||
|
|
||||||
|
swatch.addEventListener('click', () => {
|
||||||
|
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
|
||||||
|
renderSelectedPalette();
|
||||||
|
updateSwatchHighlights();
|
||||||
|
});
|
||||||
|
|
||||||
|
swatch.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'Enter' || event.key === ' ') {
|
||||||
|
event.preventDefault();
|
||||||
|
swatch.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
paletteColorsContainer.appendChild(swatchWrapper);
|
||||||
|
});
|
||||||
|
|
||||||
|
updatePaletteUIState();
|
||||||
|
savePaletteToLocalStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the visual highlight on the main color swatches to show which are selected.
|
||||||
|
*/
|
||||||
|
function updateSwatchHighlights() {
|
||||||
|
const allSwatches = document.querySelectorAll('#color-families .color-swatch');
|
||||||
|
allSwatches.forEach(swatch => {
|
||||||
|
const color = swatch.dataset.color;
|
||||||
|
const background = swatch.querySelector('.color-background');
|
||||||
|
const nameEl = swatch.parentElement.querySelector('.color-name');
|
||||||
|
const isSelected = selectedPalette.some(c => c.hex === color);
|
||||||
|
|
||||||
|
if (isSelected) {
|
||||||
|
background.classList.add('chosen');
|
||||||
|
nameEl.classList.add('highlighted-name');
|
||||||
|
} else {
|
||||||
|
background.classList.remove('chosen');
|
||||||
|
nameEl.classList.remove('highlighted-name');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePaletteUIState() {
|
||||||
|
const countBadge = document.getElementById('palette-count');
|
||||||
|
const clearButton = document.getElementById('clear-palette');
|
||||||
|
const shareButtonEl = document.getElementById('share-palette');
|
||||||
|
const shuffleButton = document.getElementById('shuffle-palette');
|
||||||
|
const zoomButtonEl = document.getElementById('zoom-palette');
|
||||||
|
|
||||||
|
const count = selectedPalette.length;
|
||||||
|
if (countBadge) {
|
||||||
|
countBadge.textContent = `${count} selected`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasSelection = count > 0;
|
||||||
|
[clearButton, shareButtonEl, shuffleButton, zoomButtonEl].forEach(button => {
|
||||||
|
if (!button) return;
|
||||||
|
button.disabled = !hasSelection;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Determines if a hex color is light or dark to decide on border visibility.
|
||||||
|
* @param {string} hex - The hex color code (e.g., "#FFFFFF").
|
||||||
|
* @returns {boolean} - True if the color is light, false otherwise.
|
||||||
|
*/
|
||||||
|
function isLightColor(hex) {
|
||||||
|
if (!hex) return false;
|
||||||
|
return getPerceivedBrightness(hex) > 220;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPerceivedBrightness(hex) {
|
||||||
|
if (!hex) return 0;
|
||||||
|
const normalized = hex.replace('#', '');
|
||||||
|
const pairs = normalized.match(/.{1,2}/g);
|
||||||
|
if (!pairs || pairs.length < 3) return 0;
|
||||||
|
const rgb = pairs.map(x => parseInt(x, 16));
|
||||||
|
return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shuffles an array in place.
|
||||||
|
* @param {Array} array - The array to shuffle.
|
||||||
|
* @returns {Array} - The shuffled array.
|
||||||
|
*/
|
||||||
|
function shuffleArray(array) {
|
||||||
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[array[i], array[j]] = [array[j], array[i]];
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes the palette on page load, prioritizing a new shared URL
|
||||||
|
* over existing local storage, without overwriting it.
|
||||||
|
* @param {Array} allColorData - The entire array of color families from colors.json.
|
||||||
|
*/
|
||||||
|
function initializePaletteOnLoad(allColorData) {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const colorsFromURL = params.get('colors');
|
||||||
|
|
||||||
|
// Check if a 'colors' parameter exists in the URL
|
||||||
|
if (colorsFromURL) {
|
||||||
|
console.log("Loading palette from share link for this session...");
|
||||||
|
const flatColorList = allColorData.flatMap(family => family.colors);
|
||||||
|
const hexCodesFromURL = colorsFromURL.split(',');
|
||||||
|
const paletteFromURL = hexCodesFromURL.map(hex => {
|
||||||
|
return flatColorList.find(color => color.hex === `#${hex}`);
|
||||||
|
}).filter(Boolean);
|
||||||
|
|
||||||
|
if (paletteFromURL.length > 0) {
|
||||||
|
selectedPalette = paletteFromURL; // Load for viewing
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clean the address bar but DO NOT save to local storage yet
|
||||||
|
history.replaceState(null, '', window.location.pathname);
|
||||||
|
}
|
||||||
|
// If no URL parameter, the existing palette from local storage is used by default.
|
||||||
|
else {
|
||||||
|
console.log("Loading palette from Local Storage.");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render whatever palette was decided upon (from URL or local storage).
|
||||||
|
// The render function itself will only save when the palette is changed.
|
||||||
|
renderSelectedPalette();
|
||||||
|
updateSwatchHighlights();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --- Event Listeners ---
|
||||||
|
|
||||||
|
const shareButton = document.getElementById('share-palette');
|
||||||
|
const modalBackdrop = document.querySelector('.palette-modal-backdrop');
|
||||||
|
const closeModalButton = document.getElementById('close-modal');
|
||||||
|
const modalColorList = document.getElementById('modal-color-list');
|
||||||
|
const presetButton = document.getElementById('preset-palettes');
|
||||||
|
const presetModalBackdrop = document.querySelector('.preset-modal-backdrop');
|
||||||
|
const closePresetModalButton = document.getElementById('close-preset-modal');
|
||||||
|
|
||||||
|
function syncModalInteractionLock() {
|
||||||
|
const shareOpen = modalBackdrop && getComputedStyle(modalBackdrop).display !== 'none';
|
||||||
|
const presetOpen = presetModalBackdrop && getComputedStyle(presetModalBackdrop).display !== 'none';
|
||||||
|
const zoomOpen = zoomOverlay && zoomOverlay.classList.contains('is-active');
|
||||||
|
document.body.classList.toggle('modal-open', Boolean(shareOpen || presetOpen || zoomOpen));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmClearPalette() {
|
||||||
|
if (typeof Swal !== 'undefined' && Swal.fire) {
|
||||||
|
const result = await Swal.fire({
|
||||||
|
title: 'Clear palette?',
|
||||||
|
text: 'This removes all selected balloons from your palette.',
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Clear Palette',
|
||||||
|
cancelButtonText: 'Cancel',
|
||||||
|
reverseButtons: true,
|
||||||
|
confirmButtonColor: '#0ea7a0',
|
||||||
|
background: '#fffdf7',
|
||||||
|
color: '#15384c'
|
||||||
|
});
|
||||||
|
return result.isConfirmed;
|
||||||
|
}
|
||||||
|
|
||||||
|
return confirm('Are you sure you want to clear your entire palette?');
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Event Listeners ---
|
||||||
|
|
||||||
|
document.getElementById('clear-palette').addEventListener('click', async () => {
|
||||||
|
const shouldClear = await confirmClearPalette();
|
||||||
|
if (!shouldClear) return;
|
||||||
|
|
||||||
|
selectedPalette = [];
|
||||||
|
renderSelectedPalette();
|
||||||
|
updateSwatchHighlights();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('toggle-animation').addEventListener('click', (e) => {
|
||||||
|
animationsEnabled = e.target.checked;
|
||||||
|
renderSelectedPalette();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('shuffle-palette').addEventListener('click', () => {
|
||||||
|
selectedPalette = shuffleArray(selectedPalette);
|
||||||
|
renderSelectedPalette();
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Modal Functionality ---
|
||||||
|
|
||||||
|
function openPresetModal() {
|
||||||
|
renderPresetPaletteModal();
|
||||||
|
presetModalBackdrop.style.display = 'flex';
|
||||||
|
presetModalBackdrop.setAttribute('aria-hidden', 'false');
|
||||||
|
syncModalInteractionLock();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closePresetModal() {
|
||||||
|
presetModalBackdrop.style.display = 'none';
|
||||||
|
presetModalBackdrop.setAttribute('aria-hidden', 'true');
|
||||||
|
syncModalInteractionLock();
|
||||||
|
}
|
||||||
|
|
||||||
|
shareButton.addEventListener('click', () => {
|
||||||
|
if (selectedPalette.length === 0) {
|
||||||
|
alert("Your palette is empty! Add some colors to create a shareable link.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseURL = window.location.href.split('?')[0];
|
||||||
|
const colorParams = selectedPalette.map(color => color.hex.substring(1)).join(',');
|
||||||
|
const shareableLink = `${baseURL}?colors=${colorParams}`;
|
||||||
|
|
||||||
|
modalColorList.innerHTML = `
|
||||||
|
<p>Copy this link to share your palette:</p>
|
||||||
|
<input type="text" id="share-link-input" value="${shareableLink}" readonly>
|
||||||
|
<button id="copy-link-button">Copy Link</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('copy-link-button').addEventListener('click', () => {
|
||||||
|
const linkInput = document.getElementById('share-link-input');
|
||||||
|
navigator.clipboard.writeText(linkInput.value).then(() => {
|
||||||
|
const copyButton = document.getElementById('copy-link-button');
|
||||||
|
copyButton.textContent = 'Copied! ✅';
|
||||||
|
setTimeout(() => {
|
||||||
|
copyButton.textContent = 'Copy Link';
|
||||||
|
}, 2000);
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Failed to copy link: ', err);
|
||||||
|
alert('Failed to copy link.');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
modalBackdrop.style.display = 'flex';
|
||||||
|
syncModalInteractionLock();
|
||||||
|
});
|
||||||
|
|
||||||
|
closeModalButton.addEventListener('click', () => {
|
||||||
|
modalBackdrop.style.display = 'none';
|
||||||
|
syncModalInteractionLock();
|
||||||
|
});
|
||||||
|
|
||||||
|
modalBackdrop.addEventListener('click', (event) => {
|
||||||
|
if (event.target === modalBackdrop) {
|
||||||
|
modalBackdrop.style.display = 'none';
|
||||||
|
syncModalInteractionLock();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (presetButton && presetModalBackdrop && closePresetModalButton) {
|
||||||
|
presetButton.addEventListener('click', openPresetModal);
|
||||||
|
closePresetModalButton.addEventListener('click', closePresetModal);
|
||||||
|
presetModalBackdrop.addEventListener('click', (event) => {
|
||||||
|
if (event.target === presetModalBackdrop) {
|
||||||
|
closePresetModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Zoom Palette Functionality ---
|
||||||
|
|
||||||
|
const zoomButton = document.getElementById('zoom-palette');
|
||||||
|
const zoomOverlay = document.getElementById('zoom-overlay');
|
||||||
|
const zoomedPaletteContent = document.getElementById('zoomed-palette-content');
|
||||||
|
const zoomCloseButton = document.getElementById('zoom-close');
|
||||||
|
|
||||||
|
function renderZoomPaletteComparison() {
|
||||||
|
zoomedPaletteContent.innerHTML = '';
|
||||||
|
|
||||||
|
const grid = document.createElement('div');
|
||||||
|
grid.classList.add('zoom-palette-grid');
|
||||||
|
|
||||||
|
selectedPalette.forEach(color => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.classList.add('zoom-color-card');
|
||||||
|
|
||||||
|
const balloonWrap = document.createElement('div');
|
||||||
|
balloonWrap.classList.add('zoom-balloon-wrap');
|
||||||
|
|
||||||
|
const swatch = document.createElement('div');
|
||||||
|
swatch.classList.add('color-swatch', 'zoom-color-balloon');
|
||||||
|
swatch.dataset.color = color.hex;
|
||||||
|
|
||||||
|
const backgroundDiv = document.createElement('div');
|
||||||
|
backgroundDiv.classList.add('color-background', 'chosen');
|
||||||
|
|
||||||
|
if (color.image) {
|
||||||
|
backgroundDiv.style.backgroundImage = `url(${color.image})`;
|
||||||
|
} else {
|
||||||
|
backgroundDiv.style.backgroundColor = color.hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (color.metallic) {
|
||||||
|
backgroundDiv.classList.add('metallic');
|
||||||
|
if (color.chromeType && !color.image) {
|
||||||
|
backgroundDiv.classList.add(`chrome-${color.chromeType}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const shineImg = document.createElement('img');
|
||||||
|
shineImg.classList.add('color-shine');
|
||||||
|
shineImg.src = "shine.svg";
|
||||||
|
shineImg.alt = "";
|
||||||
|
|
||||||
|
if (isLightColor(color.hex)) {
|
||||||
|
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
|
||||||
|
shineImg.classList.add('has-halo');
|
||||||
|
}
|
||||||
|
|
||||||
|
swatch.appendChild(backgroundDiv);
|
||||||
|
swatch.appendChild(shineImg);
|
||||||
|
balloonWrap.appendChild(swatch);
|
||||||
|
|
||||||
|
const name = document.createElement('div');
|
||||||
|
name.classList.add('zoom-color-name');
|
||||||
|
name.textContent = color.name;
|
||||||
|
|
||||||
|
card.appendChild(balloonWrap);
|
||||||
|
card.appendChild(name);
|
||||||
|
grid.appendChild(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
zoomedPaletteContent.appendChild(grid);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Event Listener to OPEN the zoom view ---
|
||||||
|
zoomButton.addEventListener('click', () => {
|
||||||
|
// Don't do anything if the palette is empty
|
||||||
|
if (selectedPalette.length === 0) {
|
||||||
|
alert("Palette is empty. Add some colors to zoom in!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build a utility-focused static comparison layout (no strings/motion)
|
||||||
|
renderZoomPaletteComparison();
|
||||||
|
|
||||||
|
// Show the overlay by adding the .is-active class
|
||||||
|
zoomOverlay.classList.add('is-active');
|
||||||
|
syncModalInteractionLock();
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Function to CLOSE the zoom view ---
|
||||||
|
function closeZoomView() {
|
||||||
|
zoomOverlay.classList.remove('is-active');
|
||||||
|
syncModalInteractionLock();
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Two ways to CLOSE the view for easy access ---
|
||||||
|
|
||||||
|
// 1. Click on the dark background (the overlay itself)
|
||||||
|
zoomOverlay.addEventListener('click', (event) => {
|
||||||
|
// Only close if the click is on the overlay, not the content inside
|
||||||
|
if (event.target === zoomOverlay) {
|
||||||
|
closeZoomView();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. Click the close button
|
||||||
|
zoomCloseButton.addEventListener('click', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
closeZoomView();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Press the 'Escape' key
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'Escape' && presetModalBackdrop?.style.display === 'flex') {
|
||||||
|
closePresetModal();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) {
|
||||||
|
closeZoomView();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Mobile navbar burger (Bulma) ---
|
||||||
|
const navbarBurger = document.querySelector('.navbar-burger');
|
||||||
|
const navbarMenu = document.getElementById('navbarBasicExample');
|
||||||
|
|
||||||
|
if (navbarBurger && navbarMenu) {
|
||||||
|
navbarBurger.addEventListener('click', () => {
|
||||||
|
navbarBurger.classList.toggle('is-active');
|
||||||
|
navbarMenu.classList.toggle('is-active');
|
||||||
|
const isExpanded = navbarBurger.classList.contains('is-active');
|
||||||
|
navbarBurger.setAttribute('aria-expanded', String(isExpanded));
|
||||||
|
});
|
||||||
|
}
|
||||||
2
main-site/color-picker/shine.svg
Normal file
2
main-site/color-picker/shine.svg
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="12in" height="12in" version="1.1" viewBox="0 0 40 40" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#fff"><ellipse cx="13.333" cy="5" rx="3.3333" ry="1.6667" stroke-width="0" style="paint-order:stroke markers fill"/><path d="m-24.93-4.1667c1.0417 0 1.7361 1.3889 1.7361 2.4305s-0.69444 1.7361-1.7361 1.7361-1.7361-0.69444-1.7361-1.7361 0.69444-2.4305 1.7361-2.4305z" stroke-width=".034722"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 515 B |
Loading…
x
Reference in New Issue
Block a user