mirror of
https://ghfast.top/https://github.com/zsjy/halo-theme-dream2.0-plus.git
synced 2025-03-15 13:09:40 +08:00
添加类似开往的错误页面
This commit is contained in:
parent
5aa707909f
commit
25639ac261
165
templates/error/common/error_travellings.html
Normal file
165
templates/error/common/error_travellings.html
Normal file
@ -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>
|
Loading…
x
Reference in New Issue
Block a user