From 5d03cc9eb8fea78100779258c145d2e7122b5b5f Mon Sep 17 00:00:00 2001
From: lubiana <lubiana@hannover.ccc.de>
Date: Wed, 11 Jun 2025 23:16:27 +0200
Subject: [PATCH] bonkers

---
 assets/app.js           |   1 +
 assets/modes.js         | 111 ++++++++++++
 assets/styles/modes.css | 373 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 485 insertions(+)

diff --git a/assets/app.js b/assets/app.js
index 548fdcb..7aa7252 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -12,6 +12,7 @@ import './styles/emoji-footprint.css';
 // Import modules
 import './theme.js';
 import './emoji-footprint.js';
+import './modes.js';
 import { initNumberInputs } from './numberInputs.js';
 import { initRadioState } from './radioState.js';
 
diff --git a/assets/modes.js b/assets/modes.js
index e69de29..0f90060 100644
--- a/assets/modes.js
+++ b/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 };
diff --git a/assets/styles/modes.css b/assets/styles/modes.css
index e69de29..33343ca 100644
--- a/assets/styles/modes.css
+++ b/assets/styles/modes.css
@@ -0,0 +1,373 @@
+/* 🌈✨ BONKERS MODE ANIMATIONS ✨🌈 */
+@keyframes rainbowGradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes discoFlash {
+    0%, 100% { 
+        background-color: var(--bs-pink);
+        box-shadow: 0 0 20px var(--bs-pink), 0 0 40px var(--bs-pink);
+    }
+    16.66% { 
+        background-color: var(--bs-purple);
+        box-shadow: 0 0 20px var(--bs-purple), 0 0 40px var(--bs-purple);
+    }
+    33.33% { 
+        background-color: var(--bs-cyan);
+        box-shadow: 0 0 20px var(--bs-cyan), 0 0 40px var(--bs-cyan);
+    }
+    50% { 
+        background-color: var(--bs-yellow);
+        box-shadow: 0 0 20px var(--bs-yellow), 0 0 40px var(--bs-yellow);
+    }
+    66.66% { 
+        background-color: var(--bs-green);
+        box-shadow: 0 0 20px var(--bs-green), 0 0 40px var(--bs-green);
+    }
+    83.33% { 
+        background-color: var(--bs-orange);
+        box-shadow: 0 0 20px var(--bs-orange), 0 0 40px var(--bs-orange);
+    }
+}
+
+@keyframes wiggle {
+    0%, 100% { transform: rotate(0deg); }
+    25% { transform: rotate(-2deg); }
+    75% { transform: rotate(2deg); }
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes rainbowText {
+    0% { color: var(--bs-red); }
+    14.28% { color: var(--bs-orange); }
+    28.57% { color: var(--bs-yellow); }
+    42.85% { color: var(--bs-green); }
+    57.14% { color: var(--bs-cyan); }
+    71.42% { color: var(--bs-purple); }
+    85.71% { color: var(--bs-pink); }
+    100% { color: var(--bs-red); }
+}
+
+@keyframes shine {
+    0% { left: -100%; }
+    50% { left: 100%; }
+    100% { left: 100%; }
+}
+
+@keyframes slayFloat {
+    0% {
+        transform: translateY(0) scale(0.5);
+        opacity: 0;
+    }
+    20% {
+        transform: translateY(-20px) scale(1);
+        opacity: 1;
+    }
+    80% {
+        transform: translateY(-60px) scale(1.2);
+        opacity: 0.8;
+    }
+    100% {
+        transform: translateY(-100px) scale(1.5);
+        opacity: 0;
+    }
+}
+
+/* 🎭 BONKERS MODE CLASSES 🎭 */
+.bonkers-mode {
+    transition: all 0.3s ease-in-out;
+}
+
+.bonkers-mode .btn {
+    animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
+    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
+    background-size: 400% 400%;
+    animation: discoFlash 0.3s infinite, wiggle 0.2s infinite, rainbowGradient 1s ease infinite;
+    border: 4px solid var(--bs-white);
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+}
+
+.bonkers-mode .btn:hover {
+    animation: discoFlash 0.2s infinite, wiggle 0.1s infinite, rainbowGradient 0.5s ease infinite;
+    box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple);
+}
+
+.bonkers-mode .btn::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
+    transform: rotate(45deg);
+    animation: spin 0.5s linear infinite;
+}
+
+.bonkers-mode .navbar {
+    background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
+    background-size: 200% 200%;
+    animation: rainbowGradient 2s ease infinite;
+    box-shadow: 0 0 50px rgba(255, 105, 180, 0.9);
+    height: auto !important;
+    min-height: 56px;
+}
+
+.bonkers-mode .navbar-brand {
+    animation: rainbowText 0.8s infinite, wiggle 0.4s infinite;
+    font-size: 1.8em;
+    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
+    position: relative;
+    overflow: hidden;
+}
+
+.bonkers-mode .navbar-brand::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
+    transform: rotate(45deg);
+    animation: spin 2s linear infinite;
+}
+
+.bonkers-mode .navbar-nav .nav-link {
+    animation: rainbowText 1.2s infinite, wiggle 0.3s infinite;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    border: 2px solid transparent;
+    border-radius: 8px;
+    padding: 8px 16px;
+    margin: 0 4px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.bonkers-mode .navbar-nav .nav-link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    animation: shine 1.5s ease-in-out infinite;
+}
+
+.bonkers-mode .navbar-nav .nav-link:hover {
+    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
+    border-color: var(--bs-white);
+    box-shadow: 0 0 20px var(--bs-pink);
+    animation: discoFlash 0.5s infinite, wiggle 0.2s infinite;
+}
+
+.bonkers-mode .navbar-nav .nav-link.active {
+    background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
+    border-color: var(--bs-white);
+    box-shadow: 0 0 25px var(--bs-yellow);
+    animation: discoFlash 0.8s infinite, wiggle 0.3s infinite;
+}
+
+.bonkers-mode .navbar-text {
+    animation: rainbowText 1.5s infinite, wiggle 0.5s infinite;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    border: 2px solid var(--bs-white);
+    border-radius: 8px;
+    padding: 6px 12px;
+    background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue));
+    box-shadow: 0 0 15px var(--bs-cyan);
+}
+
+.bonkers-mode .navbar-toggler {
+    border: 3px solid var(--bs-white);
+    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
+    animation: discoFlash 0.6s infinite, wiggle 0.4s infinite;
+    box-shadow: 0 0 20px var(--bs-pink);
+}
+
+.bonkers-mode .navbar-toggler:focus {
+    box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5);
+}
+
+.bonkers-mode .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    animation: spin 1s linear infinite;
+}
+
+.bonkers-mode .dropdown-menu {
+    background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
+    border: 3px solid var(--bs-white);
+    box-shadow: 0 0 30px rgba(255,105,180,0.8);
+    animation: rainbowGradient 2s ease infinite;
+}
+
+.bonkers-mode .dropdown-item {
+    animation: rainbowText 1.8s infinite, wiggle 0.6s infinite;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    border-bottom: 1px solid rgba(255,255,255,0.3);
+    transition: all 0.3s ease;
+}
+
+.bonkers-mode .dropdown-item:hover {
+    background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
+    color: var(--bs-white);
+    box-shadow: 0 0 15px var(--bs-yellow);
+    animation: discoFlash 0.5s infinite, wiggle 0.3s infinite;
+}
+
+.bonkers-mode .navbar-collapse {
+    background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1));
+    border-radius: 8px;
+    margin-top: 8px;
+    padding: 8px;
+    border: 2px solid var(--bs-pink);
+}
+
+.bonkers-mode h1, .bonkers-mode h2, .bonkers-mode h3 {
+    animation: rainbowText 1.5s infinite;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.bonkers-mode .table {
+    background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2));
+    animation: rainbowGradient 3s ease infinite;
+    border: 3px solid var(--bs-pink);
+    box-shadow: 0 0 30px rgba(255,105,180,0.5);
+}
+
+.bonkers-mode .table th {
+    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
+    color: var(--bs-white);
+    animation: discoFlash 0.8s infinite;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    font-size: 1.1em;
+}
+
+.bonkers-mode .form-control {
+    border: 3px solid var(--bs-pink);
+    box-shadow: 0 0 15px var(--bs-pink);
+    animation: pulse 0.6s infinite;
+}
+
+.bonkers-mode .alert {
+    animation: discoFlash 0.6s infinite, wiggle 0.3s infinite;
+    border: 4px solid var(--bs-white);
+    font-weight: bold;
+    font-size: 1.1em;
+}
+
+.bonkers-mode .card {
+    background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2));
+    border: 3px solid var(--bs-purple);
+    box-shadow: 0 0 35px rgba(138,43,226,0.6);
+    animation: pulse 1s infinite;
+}
+
+.bonkers-mode .modal-content {
+    background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
+    border: 4px solid var(--bs-white);
+    box-shadow: 0 0 50px rgba(255,105,180,0.8);
+    animation: rainbowGradient 2s ease infinite;
+}
+
+.bonkers-mode .modal-header {
+    background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange));
+    animation: discoFlash 0.8s infinite;
+    font-size: 1.2em;
+}
+
+.bonkers-mode .number-input-wrapper {
+    animation: wiggle 0.4s infinite;
+}
+
+.bonkers-mode .number-input-wrapper .btn {
+    animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
+}
+
+/* Enhanced mode styles (for future use) */
+[data-website-mode="enhanced"] .btn {
+    background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary));
+    border: 2px solid var(--bs-primary);
+    transition: all 0.3s ease;
+}
+
+[data-website-mode="enhanced"] .btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+[data-website-mode="enhanced"] .navbar {
+    background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+/* Emoji Footprint Animation */
+.emoji-footprint {
+    position: absolute;
+    font-size: 1.6rem;
+    pointer-events: none;
+    animation: emojiFade 1s ease-out forwards;
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    z-index: 9999;
+    text-shadow:
+        0 0 4px #ff00bf,
+        0 0 8px #ff80df,
+        0 0 12px #ffccff;
+}
+
+@keyframes emojiFade {
+    0% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(1.5);
+        opacity: 0.7;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(2);
+        opacity: 0;
+    }
+}
+
+/* 💅 SLAY TEXT EFFECTS 💅 */
+.slay-text {
+    position: fixed;
+    font-size: 2rem;
+    font-weight: bold;
+    pointer-events: none;
+    z-index: 10000;
+    animation: slayFloat 3s ease-out forwards;
+    text-shadow: 
+        0 0 10px #ff00bf,
+        0 0 20px #ff80df,
+        0 0 30px #ffccff,
+        2px 2px 4px rgba(0,0,0,0.5);
+    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow));
+    background-size: 400% 400%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: slayFloat 3s ease-out forwards, rainbowGradient 1s ease infinite;
+}