added function to Fumble when you refresh. Great for keyboard shortcuts

like vim motions or just tapping F2.

index.html

@@ -58,6 +58,19 @@
         </div>
     </div>
 
+    <div id="warningModal" class="modal warning-modal">
+        <div class="modal-content">
+            <span class="close-button" style="display: none;">&times;</span>
+            <h2>⚠️ Slow Down!</h2>
+            <p>Clicking too quickly may get you flagged as spam by Wiby.me.</p>
+            <p>Please wait a moment between fumbles.</p>
+            <div id="cooldownTimer" class="cooldown-timer">
+                You can close this warning in: <span id="cooldownSeconds">5</span>s
+            </div>
+            <button id="warningCloseBtn" class="warning-close-btn" disabled>I Understand</button>
+        </div>
+    </div>
+
     <main>
         <iframe 
             id="contentFrame" 
@@ -68,7 +81,52 @@
     </main>
 
     <script>
+        if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
+            if (sessionStorage.getItem('hasVisited')) {
+                window.stop();
+                requestAnimationFrame(() => fumble());
+            }
+        } else if (!sessionStorage.getItem('hasVisited')) {
+            sessionStorage.setItem('hasVisited', 'true');
+        }
+
+        let lastFumbleTime = 0;
+        const cooldownPeriod = 5000; // 5 seconds cooldown
+        let cooldownTimer = null;
+
         const fumble = () => {
+            const currentTime = Date.now();
+            const timeSinceLastFumble = currentTime - lastFumbleTime;
+
+            if (timeSinceLastFumble < cooldownPeriod) {
+                // Show warning modal
+                const warningModal = document.getElementById('warningModal');
+                const cooldownSeconds = document.getElementById('cooldownSeconds');
+                const closeBtn = document.getElementById('warningCloseBtn');
+                warningModal.classList.add('show');
+                closeBtn.disabled = true;
+
+                // Update countdown timer
+                let remainingTime = 5; // 5 second countdown for closing
+                cooldownSeconds.textContent = remainingTime;
+
+                if (cooldownTimer) clearInterval(cooldownTimer);
+                cooldownTimer = setInterval(() => {
+                    remainingTime--;
+                    
+                    if (remainingTime <= 0) {
+                        cooldownSeconds.textContent = '0';
+                        closeBtn.disabled = false;
+                        clearInterval(cooldownTimer);
+                    } else {
+                        cooldownSeconds.textContent = remainingTime;
+                    }
+                }, 1000);
+
+                return;
+            }
+
+            lastFumbleTime = currentTime;
             const frame = document.getElementById('contentFrame');
             frame.src = 'https://wiby.me/surprise/';
             
@@ -146,9 +204,20 @@
             modal.classList.remove('show');
         });
 
-        // Close modal when clicking outside
+        // Update warning modal close handler
+        const warningModal = document.getElementById('warningModal');
+        const warningCloseBtn = document.getElementById('warningCloseBtn');
+        
+        warningCloseBtn.addEventListener('click', () => {
+            if (!warningCloseBtn.disabled) {
+                warningModal.classList.remove('show');
+                if (cooldownTimer) clearInterval(cooldownTimer);
+            }
+        });
+
+        // Remove the click-outside-to-close functionality for warning modal
         window.addEventListener('click', (event) => {
-            if (event.target === modal) {
+            if (event.target === modal) { // Only for help modal
                 modal.classList.remove('show');
             }
         });

styles.css

@@ -442,4 +442,69 @@ button {
     .dark-mode .permission-button:hover {
         background-color: #ff6b4a;
     }
+}
+
+.warning-modal .modal-content {
+    max-width: 400px;
+}
+
+.warning-modal h2 {
+    color: #ff4500;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+}
+
+.cooldown-timer {
+    background: rgba(255, 69, 0, 0.1);
+    padding: 15px;
+    border-radius: 8px;
+    margin-top: 20px;
+    font-weight: bold;
+    color: #ff4500;
+}
+
+.dark-mode .cooldown-timer {
+    background: rgba(255, 107, 74, 0.1);
+    color: #ff6b4a;
+}
+
+@media (max-width: 768px) {
+    .warning-modal .modal-content {
+        width: 90%;
+        margin: -300px auto 0;
+    }
+}
+
+.warning-close-btn {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    margin-top: 20px;
+    background-color: #ff4500;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s ease, opacity 0.3s ease;
+}
+
+.warning-close-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.dark-mode .warning-close-btn {
+    background-color: #ff6b4a;
+}
+
+.warning-close-btn:not(:disabled):hover {
+    background-color: #ff5722;
+}
+
+.dark-mode .warning-close-btn:not(:disabled):hover {
+    background-color: #ff7c5c;
 }