diff --git a/index.php b/index.php index 6116bc2..fe9ea49 100644 --- a/index.php +++ b/index.php @@ -106,7 +106,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; position: relative; background-clip: padding-box; overflow: hidden; - transition: all 0.5s ease, box-shadow 0.1s ease; + transition: border-radius 0.5s ease, background 0.5s ease, box-shadow 0.1s ease; } /* Animated colorful border */ @@ -929,9 +929,28 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; let sum = 0; for(let i=0; i 95) { + document.documentElement.style.setProperty('--dynamic-glow', 'rgba(255, 0, 0, 0.9)'); + document.documentElement.style.setProperty('--dynamic-glow-dim', 'rgba(255, 0, 0, 0.5)'); + + // Physical vibration effect + const shakeIntensity = (average - 95) * 0.5; + document.documentElement.style.setProperty('--shake-offset-x', `${(Math.random() - 0.5) * shakeIntensity}px`); + document.documentElement.style.setProperty('--shake-offset-y', `${(Math.random() - 0.5) * shakeIntensity}px`); + + // Intense scale boost for the card + const cardScale = 1 + (average / 255) * 0.04; + document.querySelector('.glass-card').style.transform = `translate(var(--shake-offset-x), var(--shake-offset-y)) scale(${cardScale})`; + } else { + const dominantHue = (average * 2 + colorOffset) % 360; + document.documentElement.style.setProperty('--dynamic-glow', `hsla(${dominantHue}, 100%, 60%, 0.8)`); + document.documentElement.style.setProperty('--dynamic-glow-dim', `hsla(${dominantHue}, 100%, 60%, 0.3)`); + document.documentElement.style.setProperty('--shake-offset-x', '0px'); + document.documentElement.style.setProperty('--shake-offset-y', '0px'); + document.querySelector('.glass-card').style.transform = ''; + } } function initVisualizer() {