bonkers

assets/modes.js

@@ -0,0 +1,111 @@
+// Bonkers mode functionality
+function initBonkersMode() {
+    // Check if we're in bonkers mode
+    const currentMode = document.documentElement.getAttribute('data-website-mode');
+    
+    if (currentMode === 'bonkers') {
+        // Apply bonkers mode immediately
+        document.body.classList.add('bonkers-mode');
+        
+        // Start the fabulous effects
+        createExtraSparkles();
+        createSlayEffects();
+        
+        console.log('🌈✨ Bonkers mode activated! ✨🌈');
+    } else {
+        // Remove bonkers mode if it was active
+        document.body.classList.remove('bonkers-mode');
+    }
+}
+
+// Function to create extra sparkles during bonkers mode
+function createExtraSparkles() {
+    const currentMode = document.documentElement.getAttribute('data-website-mode');
+    if (currentMode !== 'bonkers') return;
+    
+    const extraEmojis = ['💫', '⭐', '🎊', '🎈', '🎪', '🎭', '🎨', '👑', '💎', '🔥', '⚡', '💃', '🕺', '🎵', '🎶', '🎤'];
+    const sparkle = document.createElement('div');
+    sparkle.className = 'emoji-footprint';
+    sparkle.textContent = extraEmojis[Math.floor(Math.random() * extraEmojis.length)];
+    sparkle.style.left = Math.random() * window.innerWidth + 'px';
+    sparkle.style.top = Math.random() * window.innerHeight + 'px';
+    document.body.appendChild(sparkle);
+
+    setTimeout(() => {
+        if (sparkle.parentNode) {
+            sparkle.remove();
+        }
+    }, 2000);
+    
+    // Continue creating extra sparkles while in bonkers mode
+    const newMode = document.documentElement.getAttribute('data-website-mode');
+    if (newMode === 'bonkers') {
+        setTimeout(() => createExtraSparkles(), 300);
+    }
+}
+
+// Function to create slay effects
+function createSlayEffects() {
+    const currentMode = document.documentElement.getAttribute('data-website-mode');
+    if (currentMode !== 'bonkers') return;
+    
+    // Create floating "SLAY" text effects
+    const slayWords = ['SLAY', 'QUEEN', 'FABULOUS', 'ICONIC', 'LEGENDARY', 'STUNNING', 'GORGEOUS', 'FLAWLESS'];
+    const slayElement = document.createElement('div');
+    slayElement.className = 'slay-text';
+    slayElement.textContent = slayWords[Math.floor(Math.random() * slayWords.length)];
+    slayElement.style.left = Math.random() * window.innerWidth + 'px';
+    slayElement.style.top = Math.random() * window.innerHeight + 'px';
+    document.body.appendChild(slayElement);
+
+    setTimeout(() => {
+        if (slayElement.parentNode) {
+            slayElement.remove();
+        }
+    }, 3000);
+    
+    // Continue creating slay effects while in bonkers mode
+    const newMode = document.documentElement.getAttribute('data-website-mode');
+    if (newMode === 'bonkers') {
+        setTimeout(() => createSlayEffects(), 1000);
+    }
+}
+
+// Watch for mode changes
+function watchModeChanges() {
+    // Create a MutationObserver to watch for changes to the data-website-mode attribute
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'data-website-mode') {
+                const newMode = document.documentElement.getAttribute('data-website-mode');
+                
+                if (newMode === 'bonkers') {
+                    document.body.classList.add('bonkers-mode');
+                    
+                    // Start the fabulous effects
+                    createExtraSparkles();
+                    createSlayEffects();
+                    
+                    console.log('🌈✨ Switched to bonkers mode! ✨🌈');
+                } else {
+                    document.body.classList.remove('bonkers-mode');
+                    console.log(`😴 Switched to ${newMode} mode`);
+                }
+            }
+        });
+    });
+    
+    // Start observing
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-website-mode']
+    });
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initBonkersMode();
+    watchModeChanges();
+});
+
+export { initBonkersMode, watchModeChanges };