split up the app

public/js/scripts.js

@@ -0,0 +1,109 @@
+// Language selector functionality
+function changeLanguage(lang) {
+    const url = new URL(window.location);
+    url.searchParams.set('lang', lang);
+    window.location.href = url.toString();
+}
+
+// Enhanced logo interaction
+function logoClick() {
+    // Add a fun interaction when logo is clicked
+    const logo = document.querySelector('.logo');
+    logo.style.animationPlayState = 'running';
+    
+    // Get a new "no" response when logo is clicked
+    setTimeout(() => {
+        location.reload();
+    }, 500);
+}
+
+// Sparkle effects on hover
+function createSparkles(element) {
+    const rect = element.getBoundingClientRect();
+    const sparkles = 5;
+    
+    for (let i = 0; i < sparkles; i++) {
+        const sparkle = document.createElement('div');
+        sparkle.innerHTML = '✨';
+        sparkle.style.position = 'fixed';
+        sparkle.style.left = (rect.left + Math.random() * rect.width) + 'px';
+        sparkle.style.top = (rect.top + Math.random() * rect.height) + 'px';
+        sparkle.style.fontSize = (Math.random() * 20 + 10) + 'px';
+        sparkle.style.pointerEvents = 'none';
+        sparkle.style.zIndex = '1000';
+        sparkle.style.animation = 'sparkleFloat 2s ease-out forwards';
+        
+        document.body.appendChild(sparkle);
+        
+        setTimeout(() => {
+            sparkle.remove();
+        }, 2000);
+    }
+}
+
+// Initialize event listeners when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Add sparkle effects on logo hover
+    const logo = document.querySelector('.logo');
+    if (logo) {
+        logo.addEventListener('mouseenter', function() {
+            createSparkles(this);
+        });
+    }
+    
+    // Add keyboard shortcuts
+    document.addEventListener('keydown', function(event) {
+        // Press 'R' to refresh and get new response
+        if (event.key.toLowerCase() === 'r' && !event.ctrlKey && !event.metaKey) {
+            location.reload();
+        }
+        
+        // Press 'L' to focus language selector
+        if (event.key.toLowerCase() === 'l' && !event.ctrlKey && !event.metaKey) {
+            const languageSelector = document.querySelector('.language-selector');
+            if (languageSelector) {
+                languageSelector.focus();
+            }
+        }
+    });
+    
+    // Add subtle animations to elements on scroll (if needed in future)
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    });
+    
+    // Observe elements for animation (currently not needed but prepared for future use)
+    const animatedElements = document.querySelectorAll('.container > *');
+    animatedElements.forEach(el => {
+        observer.observe(el);
+    });
+});
+
+// Add some fun easter eggs
+let clickCount = 0;
+const logo = document.querySelector('.logo');
+
+if (logo) {
+    logo.addEventListener('click', function() {
+        clickCount++;
+        
+        // Easter egg: Multiple rapid clicks
+        if (clickCount >= 5) {
+            this.style.animation = 'logoShake 0.5s ease-in-out, rotate 2s linear infinite';
+            setTimeout(() => {
+                this.style.animation = 'logoFloat 4s ease-in-out infinite';
+            }, 2000);
+            clickCount = 0;
+        }
+    });
+}
+
+// Reset click count after a delay
+setInterval(() => {
+    clickCount = 0;
+}, 3000);