From 25639ac2610d405d8f9a155333da4f82b3679d7f Mon Sep 17 00:00:00 2001
From: fishcpy <2049879862@qq.com>
Date: Tue, 11 Mar 2025 23:11:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=B1=BB=E4=BC=BC=E5=BC=80?=
 =?UTF-8?q?=E5=BE=80=E7=9A=84=E9=94=99=E8=AF=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/error/common/error_travellings.html | 165 ++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 templates/error/common/error_travellings.html
diff --git a/templates/error/common/error_travellings.html b/templates/error/common/error_travellings.html
new file mode 100644
index 0000000..0d28728
--- /dev/null
+++ b/templates/error/common/error_travellings.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org"
+      th:fragment="error_fragment">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>[[${error.status + ' - ' + #strings.defaultString(error.title, 'Internal server error')}]]</title>
+    <link rel="icon" th:href="${site.favicon}">
+    <style>
+        * {
+            color: #111827;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        body {
+            transition: background-color 0.5s;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            * {
+                color: #f9fafb;
+            }
+            body {
+                background: #111111;
+            }
+        }
+
+        .blink {
+            position: fixed;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+            display: flex;
+            display: -webkit-flex;
+            align-items: center;
+            justify-content: center;
+            animation: blink 4s linear infinite;
+            -webkit-animation: blink 4s linear infinite;
+            -moz-animation: blink 4s linear infinite;
+            -ms-animation: blink 4s linear infinite;
+            -o-animation: blink 4s linear infinite;
+        }
+
+        @keyframes blink {
+            0% {
+                opacity: 0;
+                transform: scale(1);
+            }
+
+            40% {
+                opacity: 0.3;
+                transform: scale(1);
+            }
+
+            80% {
+                opacity: 1;
+                transform: scale(0.98);
+            }
+
+            100% {
+                opacity: 0.2;
+                transform: scale(1.2);
+            }
+        }
+
+        .botCenter {
+            position: fixed;
+            width: 100%;
+            height: 50px;
+            bottom: 10px;
+            line-height: 20px;
+            font-size: 12px;
+            text-align: center;
+            animation: botCenter 3s linear;
+        }
+ 
+        @keyframes botCenter {
+            0% {
+                opacity: 0;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+
+        .links {
+            --link-color: #5372b4;
+            color: var(--link-color);
+        }
+        .links:hover {
+            border-bottom: 2px solid var(--link-color);
+        }
+        @media (prefers-color-scheme: dark) {
+            .links {
+                --link-color: #9ca3af;
+            }
+        }
+
+        .loading-bar {
+            width: 200px;
+            height: 10px;
+            background-color: #ddd;
+            margin: 20px auto;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+
+        .loading-bar-inner {
+            width: 0;
+            height: 100%;
+            background-color: #007bff;
+            border-radius: 5px;
+            animation: fillBar 2s ease-in-out forwards;
+        }
+
+        @keyframes fillBar {
+            0% {
+                width: 0;
+            }
+            100% {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="blink">
+        <div>
+            <h1>[[${error.status + ' ' + #strings.defaultString(error.title, 'Internal server error')}]]</h1>
+            <p th:if="${error.status >= 500 && error.status < 600}">围观群众太过热情，服务器繁忙，请稍后访问。</p>
+            <p th:if="${error.status >= 400 && error.status < 500}">抱歉，您请求的页面不存在。</p>
+            <p th:if="${error.status >= 400 && error.status < 500}">可能是输入的网址有误，或者该页面已被移动或删除。</p>
+            <a th:if="${error.status >= 400 && error.status < 500}" href="/" class="back-link">手动返回首页</a>
+            <div class="loading-bar">
+                <div class="loading-bar-inner"></div>
+            </div>
+        </div>
+    </div>
+    <div class="botCenter">
+        本页面基于 <a href="https://github.com/travellings-link/travellings" class="links" target="_blank">开往</a> 制作
+    </div>
+
+    <script>
+        const websites = [
+            "/"
+        ];
+
+        function redirectToRandomWebsite() {
+            const randomIndex = Math.floor(Math.random() * websites.length);
+            const randomWebsite = websites[randomIndex];
+            setTimeout(() => {
+                window.location.href = randomWebsite;
+            }, 4000);
+        }
+
+        window.onload = redirectToRandomWebsite;
+    </script>
+</body>
+
+</html>
\ No newline at end of file
