diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/images/chrome-blue.png b/images/chrome-blue.png index 6e3f67b..d31f0c3 100644 Binary files a/images/chrome-blue.png and b/images/chrome-blue.png differ diff --git a/script.js b/script.js index dea00f5..82c15b8 100644 --- a/script.js +++ b/script.js @@ -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 = `

${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'); @@ -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', () => { `; - + 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! ✅'; diff --git a/style.css b/style.css index 5aee5b9..60a998b 100644 --- a/style.css +++ b/style.css @@ -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); }