chris/color-picker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed drop shadows, and shine

Browse Source
This commit is contained in:
chris 2025-07-14 12:43:56 -04:00
parent 861d281db4
commit 3b52b90e5c
4 changed files with 50 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

BIN
images/chrome-blue.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 41 KiB

74
script.js
View File

@ -18,24 +18,26 @@ 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.innerHTML = `<h3>${family.family}</h3>`;
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');
@ -49,22 +51,23 @@ fetch('colors.json')
backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
}
if (isLightColor(color.hex)) {
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
}
swatch.appendChild(backgroundDiv);
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);
@ -73,22 +76,22 @@ fetch('colors.json')
} else {
selectedPalette.push(color);
}
// Add a 'pop' animation on click
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);
});
@ -96,7 +99,7 @@ fetch('colors.json')
// Initial renders after setting up the page
renderSelectedPalette();
updateSwatchHighlights();
// Check if a palette was shared in the URL (will override Local Storage)
loadPaletteFromURL(data);
})
@ -108,32 +111,32 @@ fetch('colors.json')
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 = '';
selectedPalette.forEach(color => {
const swatchWrapper = document.createElement('div');
swatchWrapper.classList.add('swatch-wrapper');
const floatGroup = document.createElement('div');
floatGroup.classList.add('balloon-float-group');
if (animationsEnabled) {
floatGroup.style.animationDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
floatGroup.style.animationDelay = `${(Math.random() * 2).toFixed(2)}s`;
} else {
floatGroup.style.animation = 'none';
}
const swatch = document.createElement('div');
swatch.classList.add('color-swatch');
swatch.dataset.color = color.hex;
const backgroundDiv = document.createElement('div');
backgroundDiv.classList.add('color-background', 'chosen');
@ -143,20 +146,21 @@ function renderSelectedPalette() {
backgroundDiv.style.backgroundColor = color.hex;
}
if (isLightColor(color.hex)) {
backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
}
if (color.metallic && color.chromeType) {
backgroundDiv.classList.add('metallic', `chrome-${color.chromeType}`);
}
swatch.appendChild(backgroundDiv);
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";
@ -187,10 +191,10 @@ function renderSelectedPalette() {
renderSelectedPalette();
updateSwatchHighlights();
});
paletteColorsContainer.appendChild(swatchWrapper);
});
// Save the state to Local Storage whenever the palette is re-rendered
savePaletteToLocalStorage();
}
@ -205,7 +209,7 @@ function updateSwatchHighlights() {
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');
@ -298,7 +302,7 @@ shareButton.addEventListener('click', () => {
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}`;
@ -308,10 +312,10 @@ shareButton.addEventListener('click', () => {
<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! ✅';

38
style.css
View File

@ -151,34 +151,13 @@ footer {
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));
}
/* .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);
@ -208,17 +187,16 @@ footer {
mask-repeat: no-repeat;
mask-position: center;
/* This is the base shadow for depth and lift */
box-shadow:
inset 2px 2px 6px rgba(255, 255, 255, 0.6), /* Inner highlight for depth */
0 4px 8px rgba(0, 0, 0, 0.2); /* Outer shadow for lift */
}
.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);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}