Add auto-redirect to homepage after 5 seconds on 404 page

- Added meta refresh tag for redirect - Added visible countdown timer - Added link to homepage in redirect notice

Add auto-redirect to homepage after 5 seconds on 404 page
- Added meta refresh tag for redirect - Added visible countdown timer - Added link to homepage in redirect notice
47edba78 · Stefy Lanza (nextime / spora ) · 4f6c9528 · 47edba78
Commit 47edba78 authored Feb 24, 2026 by Stefy Lanza (nextime / spora )
Hide whitespace changes
Inline Side-by-side

Showing with 47 additions and 0 deletions

404.html web/404.html +47 -0

No files found.
--- a/web/404.html
+++ b/web/404.html
@@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="refresh" content="5;url=index.html">
    <title>404 - TKO! | Townships Combat League</title>
    <link rel="stylesheet" href="styles.css">
    <style>
@@ -172,6 +173,31 @@
            font-style: italic;
        }

+        .redirect-notice {
+            margin-top: 20px;
+            padding: 15px 25px;
+            background: rgba(0, 255, 136, 0.1);
+            border: 1px solid rgba(0, 255, 136, 0.3);
+            border-radius: 8px;
+            color: var(--text-muted);
+            font-size: 0.95rem;
+        }
+
+        .redirect-notice .countdown {
+            color: var(--success-color);
+            font-weight: 700;
+            font-size: 1.1rem;
+        }
+
+        .redirect-notice a {
+            color: var(--accent-color);
+            text-decoration: underline;
+        }
+
+        .redirect-notice a:hover {
+            color: #00b8e6;
+        }
+
        @media (max-width: 768px) {
            .error-code {
                font-size: 6rem;
@@ -242,7 +268,28 @@
                    <div class="fun-stat-label">Referee Count</div>
                </div>
            </div>
+
+            <div class="redirect-notice">
+                🏠 Redirecting to <a href="index.html">homepage</a> in <span id="countdown" class="countdown">5</span> seconds...
+            </div>
        </div>
    </div>
+
+    <script>
+        // Countdown timer for redirect
+        let seconds = 5;
+        const countdownEl = document.getElementById('countdown');
+        
+        const timer = setInterval(() => {
+            seconds--;
+            if (countdownEl) {
+                countdownEl.textContent = seconds;
+            }
+            if (seconds <= 0) {
+                clearInterval(timer);
+                window.location.href = 'index.html';
+            }
+        }, 1000);
+    </script>
 </body>
 </html>
\ No newline at end of file