diff --git a/images/balloon-mask(1).svg b/images/balloon-mask(1).svg new file mode 100644 index 0000000..ab283b1 --- /dev/null +++ b/images/balloon-mask(1).svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/images/classic-gold.webp b/images/classic-gold.webp index df0980f..e6bb51b 100644 Binary files a/images/classic-gold.webp and b/images/classic-gold.webp differ diff --git a/script.js b/script.js index 3a6a08b..b6c1acc 100644 --- a/script.js +++ b/script.js @@ -102,16 +102,9 @@ fetch('colors.json') /** * Saves the current 'selectedPalette' array to the browser's Local Storage. - * We also save the URL params that would be generated from this palette. */ function savePaletteToLocalStorage() { localStorage.setItem('userPalette', JSON.stringify(selectedPalette)); - - // Generate the canonical URL parameter string for the CURRENT palette - const currentPaletteParams = selectedPalette.map(c => c.hex.substring(1)).join(','); - - // Always save this as the source, so we can detect incoming new links - localStorage.setItem('paletteSourceUrl', currentPaletteParams); } /** @@ -245,18 +238,16 @@ function shuffleArray(array) { /** * Initializes the palette on page load, prioritizing a new shared URL - * over existing local storage. + * 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'); - const savedSourceUrl = localStorage.getItem('paletteSourceUrl'); - // Case 1: A new shared link has been clicked. - // The URL has colors, and they are different from the source of the currently saved palette. - if (colorsFromURL && colorsFromURL !== savedSourceUrl) { - console.log("Loading palette from new share link..."); + // 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 => { @@ -264,29 +255,28 @@ function initializePaletteOnLoad(allColorData) { }).filter(Boolean); if (paletteFromURL.length > 0) { - selectedPalette = paletteFromURL; + selectedPalette = paletteFromURL; // Load for viewing } - - // "Claim" this URL by saving it, then clean the address bar. - savePaletteToLocalStorage(); + + // Clean the address bar but DO NOT save to local storage yet history.replaceState(null, '', window.location.pathname); } - // Case 2: The user is just reloading a page. Default to local storage. + // If no URL parameter, the existing palette from local storage is used by default. else { console.log("Loading palette from Local Storage."); - // No action needed; palette is already loaded from local storage at the top. } - // Finally, render whatever palette was decided upon. - renderSelectedPalette(); + // 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 --- document.getElementById('clear-palette').addEventListener('click', () => { selectedPalette = []; - localStorage.removeItem('paletteSourceUrl'); // Also clear the source renderSelectedPalette(); updateSwatchHighlights(); }); @@ -364,20 +354,20 @@ zoomButton.addEventListener('click', () => { alert("Palette is empty. Add some colors to zoom in!"); return; } - + // Get the original container of the colored balloons const originalPaletteColors = document.getElementById('palette-colors'); - + // Clear any old content and create a deep clone of the balloons zoomedPaletteContent.innerHTML = ''; const clonedContent = originalPaletteColors.cloneNode(true); - + // The clone doesn't need its own ID clonedContent.id = ''; - + // Append the cloned balloons to our zoom container zoomedPaletteContent.appendChild(clonedContent); - + // Show the overlay by adding the .is-active class zoomOverlay.classList.add('is-active'); }); @@ -403,11 +393,3 @@ document.addEventListener('keydown', (event) => { closeZoomView(); } }); - -const animInput = document.getElementById('toggle-animation'); -const animWrap = animInput.closest('.icon-switch'); -animWrap.setAttribute('aria-pressed', animInput.checked ? 'true' : 'false'); - -animInput.addEventListener('change', () => { - animWrap.setAttribute('aria-pressed', animInput.checked ? 'true' : 'false'); -});