fixed drop shadows, and shine

.vscode/settings.json

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

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 = `<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! ✅';

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);
 }