From 552bb87a0d11750064fa2f58d28c074b55acec18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A1=E8=9B=8E?= <tzwlink@163.com>
Date: Wed, 23 Jul 2025 18:52:35 +0800
Subject: [PATCH] =?UTF-8?q?feat/nginx:=20=E9=87=8D=E6=9E=84=20404=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 设计了新的 404 页面布局，增加了更多视觉元素
- 添加了响应式样式，优化了移动端体验
- 增加了交互效果，提升了用户参与度
- 优化了代码结构，提高了页面加载速度
---
 nginx/37point2.cn/404.html | 217 +++++++++++++++++++++++++++----------
 1 file changed, 158 insertions(+), 59 deletions(-)
diff --git a/nginx/37point2.cn/404.html b/nginx/37point2.cn/404.html
index 3c618ed..609543f 100644
--- a/nginx/37point2.cn/404.html
+++ b/nginx/37point2.cn/404.html
@@ -1,63 +1,162 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>404 Not Found</title>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Page Not Found - 404</title>
     <style>
-      :root {
-        --bg-light: #ffffff;
-        --bg-dark: #0d1117;
-        --text-light: #0d1117;
-        --text-dark: #c9d1d9;
-        --accent: #3b82f6;
-      }
-
-      body {
-        margin: 0;
-        padding: 0;
-        display: grid;
-        place-items: center;
-        height: 100vh;
-        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-        background-color: var(--bg-light);
-        color: var(--text-light);
-        transition: background-color 0.3s, color 0.3s;
-      }
-
-      h1 {
-        font-size: 4rem;
-        margin: 0;
-      }
-
-      p {
-        font-size: 1.2rem;
-        margin: 1rem 0;
-      }
-
-      a {
-        color: var(--accent);
-        text-decoration: none;
-        font-weight: 500;
-      }
-
-      a:hover {
-        text-decoration: underline;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          background-color: var(--bg-dark);
-          color: var(--text-dark);
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3f37c9;
+            --text-color: #2b2d42;
+            --bg-color: #f8f9fa;
+            --error-color: #ef233c;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            line-height: 1.6;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 2rem;
+            text-align: center;
+        }
+
+        .container {
+            max-width: 600px;
+            width: 100%;
+        }
+
+        .error-code {
+            font-size: 8rem;
+            font-weight: 800;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+            position: relative;
+            display: inline-block;
+        }
+
+        .error-code::after {
+            content: '404';
+            position: absolute;
+            top: 0;
+            left: 0;
+            color: rgba(67, 97, 238, 0.1);
+            z-index: -1;
+            transform: scale(1.5);
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: var(--text-color);
+        }
+
+        p {
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }
+
+        .actions {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 0.8rem 1.8rem;
+            border-radius: 50px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: var(--secondary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
+        }
+
+        .btn-secondary {
+            background-color: transparent;
+            color: var(--primary-color);
+            border: 2px solid var(--primary-color);
+        }
+
+        .btn-secondary:hover {
+            background-color: rgba(67, 97, 238, 0.1);
+            transform: translateY(-2px);
+        }
+
+        .animation {
+            animation: float 6s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .error-code {
+                font-size: 6rem;
+            }
+
+            h1 {
+                font-size: 2rem;
+            }
         }
-      }
     </style>
-  </head>
-  <body>
-    <main>
-      <h1>404</h1>
-      <p>页面未找到，可能已被移除或不存在。</p>
-      <p><a href="/">返回首页</a></p>
-    </main>
-  </body>
-</html>
+</head>
+<body>
+<div class="container">
+    <div class="error-code animation">404</div>
+    <h1>Page Not Found</h1>
+    <p>The page you're looking for might have been moved, deleted, or doesn't exist.</p>
+    <div class="actions">
+        <a href="/" class="btn btn-primary">Go to Homepage</a>
+        <a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
+    </div>
+</div>
+
+<script>
+    // Console message
+    console.log('%c404 - Page Not Found', 'color: #4361ee; font-size: 2em; font-weight: bold;');
+    console.log('%cLooks like you\'re lost! Use the buttons above to find your way back.', 'color: #2b2d42; font-size: 1.1em;');
+
+    // Simple parallax effect
+    document.addEventListener('mousemove', function(e) {
+        const container = document.querySelector('.container');
+        const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+        const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+        container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+    });
+</script>
+</body>
+</html>
\ No newline at end of file
