Spaces:

victor
/

rroro

Running

App Files Files Community

victor HF Staff commited on Mar 28

Commit

ab38c04

verified ·

1 Parent(s): acacfe2

Add index.html

Browse files

Files changed (1) hide show

index.html +388 -132

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>The Ultimate Poo Button Experience</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
@@ -29,7 +29,7 @@
             color: #8B4513;
             margin-bottom: 30px;
             text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-            font-size: 2.5rem;
             text-align: center;
         }
@@ -37,27 +37,30 @@
             display: flex;
             flex-direction: column;
             align-items: center;
         }
         .poo-button {
-            width: 150px;
-            height: 150px;
             background-color: #d4a017;
             border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 80px;
             cursor: pointer;
             user-select: none;
             position: relative;
-            box-shadow: 0 10px 20px rgba(0,0,0,0.2),
-                        inset 0 -10px 20px rgba(0,0,0,0.1),
-                        inset 0 5px 10px rgba(255,255,255,0.3);
             transition: transform 0.1s;
-            margin-bottom: 30px;
-            filter: drop-shadow(0 0 5px rgba(139, 69, 19, 0.4));
             overflow: hidden;
         }
         .poo-button:hover {
@@ -65,109 +68,198 @@
         }
         .poo-button:active {
-            transform: scale(0.95) rotate(5deg);
         }
         .poo-button::after {
             content: '';
             position: absolute;
-            width: 120px;
-            height: 60px;
             background-color: #8B4513;
             border-radius: 50%;
-            top: 30px;
-            filter: blur(10px);
             opacity: 0.3;
         }
         .counter {
-            font-size: 1.5rem;
             color: #8B4513;
-            margin-top: 20px;
             background-color: rgba(255,255,255,0.7);
-            padding: 10px 20px;
-            border-radius: 20px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         .floating-poo {
             position: absolute;
-            font-size: 30px;
             pointer-events: none;
             opacity: 0;
-            animation: float-up 1.5s forwards;
-            filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
         }
         @keyframes float-up {
             0% {
-                transform: translateY(0);
                 opacity: 1;
             }
             100% {
-                transform: translateY(-150px) rotate(360deg);
                 opacity: 0;
             }
         }
         .controls {
-            margin-top: 30px;
             display: flex;
-            gap: 15px;
         }
         .volume-control {
             display: flex;
             align-items: center;
             background-color: rgba(255,255,255,0.7);
-            padding: 10px 15px;
-            border-radius: 30px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         .volume-control label {
-            margin-right: 10px;
             color: #8B4513;
         }
         input[type="range"] {
             accent-color: #d4a017;
         }
         .instructions {
-            margin-top: 20px;
             background-color: rgba(255,255,255,0.7);
-            padding: 15px;
-            border-radius: 10px;
-            max-width: 500px;
             text-align: center;
             color: #8B4513;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            line-height: 1.5;
         }
         .streak {
-            font-size: 1.2rem;
-            margin-top: 15px;
             color: #d4a017;
-            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
         }
-        @media (max-width: 600px) {
             .poo-button {
-                width: 120px;
-                height: 120px;
-                font-size: 60px;
             }
             h1 {
                 font-size: 1.8rem;
             }
         }
     </style>
 </head>
 <body>
-    <h1>The Ultimate Poo Button Experience 💩</h1>
     <div class="poo-container">
         <div class="poo-button" id="pooButton">💩</div>
@@ -175,16 +267,23 @@
         <div class="streak" id="streak">Current streak: 0 clicks per second</div>
     </div>
     <div class="controls">
         <div class="volume-control">
-            <label for="volume">Volume:</label>
             <input type="range" id="volume" name="volume" min="0" max="1" step="0.1" value="0.5">
         </div>
     </div>
     <div class="instructions">
-        <p>Click the poo button as many times as you can! Try to beat your high score.<br>
-        The more you click, the more floating poos you'll create!</p>
     </div>
     <script>
@@ -192,71 +291,87 @@
         const counterElement = document.getElementById('counter');
         const volumeControl = document.getElementById('volume');
         const streakElement = document.getElementById('streak');
         let counter = 0;
         let lastClickTime = 0;
         let streakCount = 0;
-        // Preload fart sounds
         const fartSounds = [
             new Audio('https://assets.mixkit.co/active_storage/sfx/153/153-preview.mp3'),
             new Audio('https://assets.mixkit.co/active_storage/sfx/154/154-preview.mp3'),
             new Audio('https://assets.mixkit.co/active_storage/sfx/155/155-preview.mp3')
         ];
-        // Set volume for all sounds
-        fartSounds.forEach(sound => {
-            sound.volume = volumeControl.value;
-        });
-        // Update volume when slider changes
-        volumeControl.addEventListener('input', () => {
             const volume = volumeControl.value;
             fartSounds.forEach(sound => {
                 sound.volume = volume;
             });
-        });
         pooButton.addEventListener('click', () => {
-            // Increment counter
-            counter++;
             counterElement.textContent = `Poo Count: ${counter}`;
             // Play random fart sound
-            const randomSound = Math.floor(Math.random() * fartSounds.length);
-            fartSounds[randomSound].currentTime = 0;
-            fartSounds[randomSound].play();
-            // Create floating poo
-            createFloatingPoo();
-            // Streak calculation
-            const currentTime = Date.now();
-            const timeDiff = currentTime - lastClickTime;
-            if (timeDiff < 500) { // If clicked within 0.5 seconds
-                streakCount++;
             } else {
-                streakCount = 1; // Reset streak
             }
-            streakElement.textContent = `Current streak: ${streakCount} clicks per second`;
-            // Update last click time
-            lastClickTime = currentTime;
             // Special effects every 10 clicks
             if (counter % 10 === 0) {
-                pooButton.style.animation = 'none';
-                void pooButton.offsetWidth; // Trigger reflow
-                pooButton.style.animation = 'jiggle 0.5s';
-                // Create multiple poos
-                setTimeout(() => {
-                    for (let i = 0; i < 5; i++) {
-                        createFloatingPoo();
-                    }
-                }, 200);
             }
         });
@@ -266,20 +381,181 @@
             poo.textContent = '💩';
             // Random position around the button
-            const left = Math.random() * 100 - 50 + pooButton.offsetLeft + pooButton.offsetWidth / 2;
             poo.style.left = `${left}px`;
             poo.style.top = `${pooButton.offsetTop + pooButton.offsetHeight / 2}px`;
-            // Random animation duration and delay
-            poo.style.animationDuration = `${0.5 + Math.random() * 1.5}s`;
-            poo.style.animationDelay = `${Math.random() * 0.3}s`;
             document.body.appendChild(poo);
-            // Remove after animation
             setTimeout(() => {
                 poo.remove();
-            }, 1500);
         }
         // Easter egg - long press
@@ -287,66 +563,46 @@
         pooButton.addEventListener('mousedown', () => {
             pressTimer = setTimeout(() => {
-                // Big surprise effect
-                for (let i = 0; i < 20; i++) {
-                    setTimeout(() => {
-                        createFloatingPoo();
-                    }, i * 50);
-                }
-                // Play all fart sounds at once
-                fartSounds.forEach(sound => {
-                    sound.currentTime = 0;
-                    sound.play();
-                });
                 // Counter bonus
-                counter += 5;
                 counterElement.textContent = `Poo Count: ${counter}`;
                 // Visual feedback
-                pooButton.style.transform = 'scale(1.2) rotate(20deg)';
-            }, 1000);
         });
-        pooButton.addEventListener('mouseup', () => {
-            clearTimeout(pressTimer);
-        });
-        pooButton.addEventListener('mouseleave', () => {
             clearTimeout(pressTimer);
-        });
         // Mobile touch support
         pooButton.addEventListener('touchstart', (e) => {
             e.preventDefault();
             pressTimer = setTimeout(() => {
-                // Big surprise effect
-                for (let i = 0; i < 20; i++) {
-                    setTimeout(() => {
-                        createFloatingPoo();
-                    }, i * 50);
-                }
-                // Play all fart sounds at once
-                fartSounds.forEach(sound => {
-                    sound.currentTime = 0;
-                    sound.play();
-                });
-                // Counter bonus
-                counter += 5;
                 counterElement.textContent = `Poo Count: ${counter}`;
-                // Visual feedback
-                pooButton.style.transform = 'scale(1.2) rotate(20deg)';
-            }, 1000);
-        });
         pooButton.addEventListener('touchend', (e) => {
             e.preventDefault();
             clearTimeout(pressTimer);
-        });
     </script>
-<p style="text-align: center; font-size: 12px; color: #888; margin-top: 16px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" target="_blank">DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MEGA Poo Button</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
             color: #8B4513;
             margin-bottom: 30px;
             text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+            font-size: 4rem;
             text-align: center;
         }
             display: flex;
             flex-direction: column;
             align-items: center;
+            position: relative;
         }
         .poo-button {
+            width: 300px;
+            height: 300px;
             background-color: #d4a017;
             border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
             display: flex;
             justify-content: center;
             align-items: center;
+            font-size: 150px;
             cursor: pointer;
             user-select: none;
             position: relative;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.3),
+                        inset 0 -20px 40px rgba(0,0,0,0.2),
+                        inset 0 10px 20px rgba(255,255,255,0.4);
             transition: transform 0.1s;
+            margin-bottom: 40px;
+            filter: drop-shadow(0 0 10px rgba(139, 69, 19, 0.5));
             overflow: hidden;
+            z-index: 10;
+            border: 10px solid #8B4513;
         }
         .poo-button:hover {
         }
         .poo-button:active {
+            transform: scale(0.97) rotate(5deg);
         }
         .poo-button::after {
             content: '';
             position: absolute;
+            width: 240px;
+            height: 120px;
             background-color: #8B4513;
             border-radius: 50%;
+            top: 60px;
+            filter: blur(20px);
             opacity: 0.3;
         }
         .counter {
+            font-size: 2.5rem;
             color: #8B4513;
+            margin-top: 30px;
             background-color: rgba(255,255,255,0.7);
+            padding: 15px 30px;
+            border-radius: 30px;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
         }
         .floating-poo {
             position: absolute;
+            font-size: 50px;
             pointer-events: none;
             opacity: 0;
+            animation: float-up 2s forwards;
+            filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
+            z-index: 5;
         }
         @keyframes float-up {
             0% {
+                transform: translateY(0) scale(1);
                 opacity: 1;
             }
             100% {
+                transform: translateY(-250px) rotate(360deg) scale(1.5);
                 opacity: 0;
             }
         }
         .controls {
+            margin-top: 40px;
             display: flex;
+            gap: 20px;
         }
         .volume-control {
             display: flex;
             align-items: center;
             background-color: rgba(255,255,255,0.7);
+            padding: 15px 20px;
+            border-radius: 40px;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
         }
         .volume-control label {
+            margin-right: 15px;
             color: #8B4513;
+            font-size: 1.5rem;
         }
         input[type="range"] {
+            width: 200px;
+            height: 20px;
             accent-color: #d4a017;
         }
         .instructions {
+            margin-top: 30px;
             background-color: rgba(255,255,255,0.7);
+            padding: 20px;
+            border-radius: 15px;
+            max-width: 700px;
             text-align: center;
             color: #8B4513;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
+            line-height: 1.6;
+            font-size: 1.3rem;
         }
         .streak {
+            font-size: 2rem;
+            margin-top: 25px;
             color: #d4a017;
+            text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
+            background-color: rgba(255,255,255,0.7);
+            padding: 15px 25px;
+            border-radius: 25px;
+        }
+        .poo-splat {
+            position: absolute;
+            font-size: 30px;
+            pointer-events: none;
+            opacity: 0;
+            animation: splat 1s forwards;
+            transform-origin: center;
+        }
+        @keyframes splat {
+            0% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(5);
+                opacity: 0;
+            }
+        }
+        .background-poos {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        .background-poo {
+            position: absolute;
+            font-size: 30px;
+            opacity: 0.2;
+            animation: floating 15s infinite linear;
         }
+        @keyframes floating {
+            0% {
+                transform: translateY(0) rotate(0deg);
+            }
+            100% {
+                transform: translateY(-100vh) rotate(360deg);
+            }
+        }
+        .power-ups {
+            display: flex;
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .power-up {
+            width: 80px;
+            height: 80px;
+            background-color: #d4a017;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 40px;
+            cursor: pointer;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            transition: transform 0.3s;
+            border: 5px solid #8B4513;
+        }
+        .power-up:hover {
+            transform: scale(1.1);
+        }
+        @media (max-width: 768px) {
             .poo-button {
+                width: 200px;
+                height: 200px;
+                font-size: 100px;
             }
             h1 {
+                font-size: 2.5rem;
+            }
+            .counter {
                 font-size: 1.8rem;
             }
+            .streak {
+                font-size: 1.5rem;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="background-poos" id="backgroundPoos"></div>
+    <h1>MEGA POO BUTTON 💩💩💩</h1>
     <div class="poo-container">
         <div class="poo-button" id="pooButton">💩</div>
         <div class="streak" id="streak">Current streak: 0 clicks per second</div>
     </div>
+    <div class="power-ups">
+        <div class="power-up" id="powerUp1" title="Turbo Mode (10x power)">🚀</div>
+        <div class="power-up" id="powerUp2" title="Poo Explosion">💥</div>
+        <div class="power-up" id="powerUp3" title="Golden Poos">🌟</div>
+    </div>
     <div class="controls">
         <div class="volume-control">
+            <label for="volume">VOLUME:</label>
             <input type="range" id="volume" name="volume" min="0" max="1" step="0.1" value="0.5">
         </div>
     </div>
     <div class="instructions">
+        <p>Click the HUGE poo button as much as you can!<br>
+        Try beating your high score and unlock special effects with the power-ups.<br>
+        The longer you press, the bigger the surprise!</p>
     </div>
     <script>
         const counterElement = document.getElementById('counter');
         const volumeControl = document.getElementById('volume');
         const streakElement = document.getElementById('streak');
+        const powerUp1 = document.getElementById('powerUp1');
+        const powerUp2 = document.getElementById('powerUp2');
+        const powerUp3 = document.getElementById('powerUp3');
+        const backgroundPoos = document.getElementById('backgroundPoos');
         let counter = 0;
         let lastClickTime = 0;
         let streakCount = 0;
+        let turboMode = false;
+        let goldenPoos = false;
+        let activatedPowerUps = {
+            turbo: 0,
+            explosion: 0,
+            golden: 0
+        };
+        // Create background poos
+        for (let i = 0; i < 30; i++) {
+            createBackgroundPoo();
+        }
+        // Preload sounds
         const fartSounds = [
             new Audio('https://assets.mixkit.co/active_storage/sfx/153/153-preview.mp3'),
             new Audio('https://assets.mixkit.co/active_storage/sfx/154/154-preview.mp3'),
             new Audio('https://assets.mixkit.co/active_storage/sfx/155/155-preview.mp3')
         ];
+        // Additional power-up sounds
+        const powerUpSound = new Audio('https://assets.mixkit.co/active_storage/sfx/264/264-preview.mp3');
+        const explosionSound = new Audio('https://assets.mixkit.co/active_storage/sfx/2439/2439-preview.mp3');
+        // Set initial volume
+        updateAllVolumes();
+        volumeControl.addEventListener('input', updateAllVolumes);
+        function updateAllVolumes() {
             const volume = volumeControl.value;
             fartSounds.forEach(sound => {
                 sound.volume = volume;
             });
+            powerUpSound.volume = volume;
+            explosionSound.volume = volume;
+        }
         pooButton.addEventListener('click', () => {
+            // Increment counter (more if turbo mode)
+            const increment = turboMode ? 10 : 1;
+            counter += increment;
             counterElement.textContent = `Poo Count: ${counter}`;
             // Play random fart sound
+            playRandomSound();
+            // Create floating poos
+            if (goldenPoos) {
+                createGoldenPoo();
             } else {
+                createFloatingPoo();
             }
+            // Additional poos if in turbo mode
+            if (turboMode) {
+                for (let i = 0; i < 3; i++) {
+                    setTimeout(() => {
+                        if (goldenPoos) {
+                            createGoldenPoo();
+                        } else {
+                            createFloatingPoo();
+                        }
+                    }, i * 200);
+                }
+            }
+            // Streak calculation
+            updateStreak();
             // Special effects every 10 clicks
             if (counter % 10 === 0) {
+                triggerSpecialEffect();
             }
         });
             poo.textContent = '💩';
             // Random position around the button
+            const left = Math.random() * 200 - 100 + pooButton.offsetLeft + pooButton.offsetWidth / 2;
             poo.style.left = `${left}px`;
             poo.style.top = `${pooButton.offsetTop + pooButton.offsetHeight / 2}px`;
+            // Random animation properties
+            poo.style.animationDuration = `${0.8 + Math.random() * 2}s`;
+            poo.style.animationDelay = `${Math.random() * 0.5}s`;
             document.body.appendChild(poo);
             setTimeout(() => {
                 poo.remove();
+            }, 2000);
+        }
+        function createGoldenPoo() {
+            const poo = document.createElement('div');
+            poo.className = 'floating-poo';
+            poo.textContent = '🌟';
+            poo.style.color = 'gold';
+            poo.style.textShadow = '0 0 10px gold';
+            const left = Math.random() * 200 - 100 + pooButton.offsetLeft + pooButton.offsetWidth / 2;
+            poo.style.left = `${left}px`;
+            poo.style.top = `${pooButton.offsetTop + pooButton.offsetHeight / 2}px`;
+            poo.style.animationDuration = `${1 + Math.random() * 2}s`;
+            poo.style.animationDelay = `${Math.random() * 0.5}s`;
+            document.body.appendChild(poo);
+            setTimeout(() => {
+                poo.remove();
+            }, 2000);
+        }
+        function createSplat() {
+            const splat = document.createElement('div');
+            splat.className = 'poo-splat';
+            splat.textContent = '💩';
+            const left = Math.random() * 300 - 150 + pooButton.offsetLeft + pooButton.offsetWidth / 2;
+            splat.style.left = `${left}px`;
+            splat.style.top = `${pooButton.offsetTop + pooButton.offsetHeight / 2}px`;
+            document.body.appendChild(splat);
+            setTimeout(() => {
+                splat.remove();
+            }, 1000);
+        }
+        function createBackgroundPoo() {
+            const poo = document.createElement('div');
+            poo.className = 'background-poo';
+            poo.textContent = '💩';
+            poo.style.left = `${Math.random() * 100}vw`;
+            poo.style.top = `${100 + Math.random() * 20}vh`;
+            poo.style.animationDuration = `${10 + Math.random() * 20}s`;
+            poo.style.animationDelay = `${Math.random() * 10}s`;
+            backgroundPoos.appendChild(poo);
+        }
+        function playRandomSound() {
+            const randomSound = Math.floor(Math.random() * fartSounds.length);
+            fartSounds[randomSound].currentTime = 0;
+            fartSounds[randomSound].play();
+        }
+        function updateStreak() {
+            const currentTime = Date.now();
+            const timeDiff = currentTime - lastClickTime;
+            if (timeDiff < 500) {
+                streakCount++;
+            } else {
+                streakCount = 1;
+            }
+            streakElement.textContent = `Current streak: ${streakCount} clicks per second`;
+            lastClickTime = currentTime;
+            // Visual effect for high streaks
+            if (streakCount > 5) {
+                streakElement.style.color = '#ff5555';
+                streakElement.style.fontWeight = 'bold';
+            } else {
+                streakElement.style.color = '#d4a017';
+                streakElement.style.fontWeight = 'normal';
+            }
+        }
+        function triggerSpecialEffect() {
+            // Button animation
+            pooButton.style.transform = 'scale(1.1) rotate(10deg)';
+            setTimeout(() => {
+                pooButton.style.transform = '';
+            }, 300);
+            // Create multiple poos
+            for (let i = 0; i < 7; i++) {
+                setTimeout(() => {
+                    if (goldenPoos) {
+                        createGoldenPoo();
+                    } else {
+                        createFloatingPoo();
+                    }
+                }, i * 150);
+            }
+        }
+        // Power-up functions
+        powerUp1.addEventListener('click', () => {
+            activatePowerUp('turbo');
+        });
+        powerUp2.addEventListener('click', () => {
+            activatePowerUp('explosion');
+        });
+        powerUp3.addEventListener('click', () => {
+            activatePowerUp('golden');
+        });
+        function activatePowerUp(type) {
+            if (activatedPowerUps[type] > Date.now()) return;
+            powerUpSound.currentTime = 0;
+            powerUpSound.play();
+            switch(type) {
+                case 'turbo':
+                    turboMode = true;
+                    pooButton.style.boxShadow = '0 0 30px #ff5555';
+                    setTimeout(() => {
+                        turboMode = false;
+                        pooButton.style.boxShadow = '';
+                    }, 10000);
+                    activatedPowerUps.turbo = Date.now() + 30000; // 30s cooldown
+                    break;
+                case 'explosion':
+                    explosionSound.currentTime = 0;
+                    explosionSound.play();
+                    for (let i = 0; i < 15; i++) {
+                        setTimeout(() => {
+                            createSplat();
+                            playRandomSound();
+                        }, i * 100);
+                    }
+                    counter += 20;
+                    counterElement.textContent = `Poo Count: ${counter}`;
+                    activatedPowerUps.explosion = Date.now() + 20000; // 20s cooldown
+                    break;
+                case 'golden':
+                    goldenPoos = true;
+                    pooButton.style.boxShadow = '0 0 30px gold';
+                    setTimeout(() => {
+                        goldenPoos = false;
+                        pooButton.style.boxShadow = '';
+                    }, 8000);
+                    activatedPowerUps.golden = Date.now() + 25000; // 25s cooldown
+                    break;
+            }
+            // Visual feedback
+            const powerUpElement = document.getElementById(`powerUp${type === 'turbo' ? 1 : type === 'explosion' ? 2 : 3}`);
+            powerUpElement.style.transform = 'scale(1.3)';
+            powerUpElement.style.boxShadow = '0 0 20px gold';
+            setTimeout(() => {
+                powerUpElement.style.transform = '';
+                powerUpElement.style.boxShadow = '';
+            }, 500);
         }
         // Easter egg - long press
         pooButton.addEventListener('mousedown', () => {
             pressTimer = setTimeout(() => {
+                activatePowerUp('explosion');
                 // Counter bonus
+                counter += 25;
                 counterElement.textContent = `Poo Count: ${counter}`;
                 // Visual feedback
+                pooButton.style.transform = 'scale(1.3) rotate(20deg)';
+                // Multiple sounds
+                for (let i = 0; i < 5; i++) {
+                    setTimeout(() => {
+                        playRandomSound();
+                    }, i * 300);
+                }
+            }, 1500);
         });
+        pooButton.addEventListener('mouseup', clearPressTimer);
+        pooButton.addEventListener('mouseleave', clearPressTimer);
+        function clearPressTimer() {
             clearTimeout(pressTimer);
+        }
         // Mobile touch support
         pooButton.addEventListener('touchstart', (e) => {
             e.preventDefault();
             pressTimer = setTimeout(() => {
+                activatePowerUp('explosion');
+                counter += 25;
                 counterElement.textContent = `Poo Count: ${counter}`;
+                pooButton.style.transform = 'scale(1.3) rotate(20deg)';
+            }, 1500);
+        }, {passive: false});
         pooButton.addEventListener('touchend', (e) => {
             e.preventDefault();
             clearTimeout(pressTimer);
+        }, {passive: false});
     </script>
+</body>
 </html>