Update 404.html

kai9987kai · Jan 31, 2025 · 026bea3 · 026bea3
1 parent a40dbe9
commit 026bea3
Showing 1 changed file with 120 additions and 7 deletions.
diff --git a/404.html b/404.html
@@ -3,7 +3,9 @@
 <head>
     <style>
         body {
-            background-color: #f6f6f6;
+            background: linear-gradient(270deg, #f6f6f6, #e0e0e0, #f6f6f6);
+            background-size: 600% 600%;
+            animation: gradientAnimation 15s ease infinite;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -12,6 +14,12 @@
             font-family: Arial, sans-serif;
         }
 
+        @keyframes gradientAnimation {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
         .content {
             text-align: center;
         }
@@ -20,12 +28,24 @@
             font-size: 10rem;
             margin: 0;
             color: #999;
+            transition: all 0.3s ease;
+        }
+
+        h1:hover {
+            color: #333;
+            transform: scale(1.1);
         }
 
         h2 {
             color: #666;
             font-size: 3rem;
             margin: 0;
+            transition: all 0.3s ease;
+        }
+
+        h2:hover {
+            color: #333;
+            transform: scale(1.05);
         }
 
         p {
@@ -41,25 +61,118 @@
             text-decoration: none;
             border-radius: 4px;
             transition: background-color 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .home-button::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.4s ease, height 0.4s ease;
+        }
+
+        .home-button:active::after {
+            width: 200px;
+            height: 200px;
+            transition: none;
         }
 
         .home-button:hover {
             background-color: #666;
         }
+
+        .gear-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 1rem;
+        }
+
+        .gear {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 5px solid #333;
+            border-top-color: transparent;
+            animation: spinGear 2s linear infinite;
+        }
+
+        .gear1 {
+            animation-direction: normal;
+        }
+
+        .gear2 {
+            margin-left: -20px;
+            animation-direction: reverse;
+        }
+
+        @keyframes spinGear {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        .fallback-message {
+            font-size: 1.5rem;
+            color: #999;
+            margin-top: 1rem;
+        }
+
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 6rem;
+            }
+
+            h2 {
+                font-size: 2rem;
+            }
+
+            .home-button {
+                padding: 0.8rem 1.5rem;
+            }
+        }
     </style>
 </head>
 <body>
-
 <div class="content">
-    <h1>404</h1>
+    <h1>
+        404
+        <img src="error-icon.svg" alt="Error Icon" class="rotating-icon" onerror="this.style.display='none'; this.insertAdjacentHTML('afterend', '<div class=\'fallback-message\'>Failed to load</div>')">
+    </h1>
     <h2>Oops! Page not found.</h2>
     <p>The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.</p>
-    <a href="http://kai9987kai.pw" class="home-button">Go to Home Page</a>
-</div>
+    <p>Redirecting to the home page in <span id="countdown">10</span> seconds...</p>
+    <a href="http://kai9987kai.pw" class="home-button ripple">Go to Home Page</a>
 
+    <!-- Gear Animation -->
+    <div class="gear-container">
+        <div class="gear gear1"></div>
+        <div class="gear gear2"></div>
+    </div>
+</div>
 <script>
-    // Any JavaScript code can be placed here.
-</script>
+    let countdown = 10;
+    const countdownElement = document.getElementById('countdown');
+
+    const interval = setInterval(() => {
+        countdown--;
+        countdownElement.textContent = countdown;
 
+        if (countdown === 0) {
+            clearInterval(interval);
+            window.location.href = "http://kai9987kai.pw";
+        }
+    }, 1000);
+</script>
 </body>
 </html>