feat(500.html): 添加 500 错误页面，包含动态语言支持和动画效果
This commit is contained in:
560
html/404.html
560
html/404.html
@@ -1,195 +1,397 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="auto">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title id="page-title">Page Not Found - 404</title>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404</title>
|
||||
<style>
|
||||
: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);
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
|
||||
/* 默认浅色主题 */
|
||||
:root {
|
||||
--bg-color: #f8f9fa;
|
||||
--text-color: #212529;
|
||||
--secondary-text: #6c757d;
|
||||
--line-color: #212529;
|
||||
--dot-color: #495057;
|
||||
--btn-home-bg: #212529;
|
||||
--btn-home-text: #f8f9fa;
|
||||
--btn-home-hover: #343a40;
|
||||
--btn-back-bg: transparent;
|
||||
--btn-back-border: #212529;
|
||||
--btn-back-text: #212529;
|
||||
--btn-back-hover: rgba(33, 37, 41, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.error-code {
|
||||
font-size: 6rem;
|
||||
|
||||
/* 暗色主题 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #121212;
|
||||
--text-color: #e9ecef;
|
||||
--secondary-text: #adb5bd;
|
||||
--line-color: #e9ecef;
|
||||
--dot-color: #868e96;
|
||||
--btn-home-bg: #e9ecef;
|
||||
--btn-home-text: #121212;
|
||||
--btn-home-hover: #f8f9fa;
|
||||
--btn-back-bg: transparent;
|
||||
--btn-back-border: #e9ecef;
|
||||
--btn-back-text: #e9ecef;
|
||||
--btn-back-hover: rgba(233, 236, 239, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background: var(--bg-color);
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
color: var(--text-color);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.art-section {
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* 抽象线条艺术 */
|
||||
.line-art {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.horizontal-line,
|
||||
.vertical-line,
|
||||
.diagonal-line-1,
|
||||
.diagonal-line-2 {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: lineFloat 8s ease-in-out infinite;
|
||||
background: var(--line-color);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.horizontal-line {
|
||||
width: 60%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
width: 2px;
|
||||
height: 60%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.diagonal-line-1 {
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.diagonal-line-2 {
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
/* 漂浮的点 */
|
||||
.floating-dot {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--dot-color);
|
||||
border-radius: 50%;
|
||||
animation: floatDot 6s ease-in-out infinite;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
top: 20%;
|
||||
left: 30%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
top: 70%;
|
||||
left: 70%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
top: 40%;
|
||||
left: 80%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.dot-4 {
|
||||
top: 80%;
|
||||
left: 20%;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
/* 错误代码 */
|
||||
.error-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 80px;
|
||||
font-weight: 900;
|
||||
color: var(--text-color);
|
||||
font-family: 'Georgia', serif;
|
||||
letter-spacing: 8px;
|
||||
z-index: 2;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-color);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: var(--secondary-text);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 300;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 32px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-home {
|
||||
background: var(--btn-home-bg);
|
||||
color: var(--btn-home-text);
|
||||
}
|
||||
|
||||
.btn-home:hover {
|
||||
background: var(--btn-home-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
background: var(--btn-back-bg);
|
||||
color: var(--btn-back-text);
|
||||
border: 1px solid var(--btn-back-border);
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: var(--btn-back-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes lineFloat {
|
||||
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
25% { transform: translate(-50%, -50%) rotate(5deg); }
|
||||
50% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
75% { transform: translate(-50%, -50%) rotate(-5deg); }
|
||||
}
|
||||
|
||||
@keyframes floatDot {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
25% { transform: translate(10px, -15px); }
|
||||
50% { transform: translate(0, 0); }
|
||||
75% { transform: translate(-10px, 15px); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.art-section {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.error-text { font-size: 60px; }
|
||||
|
||||
h1 { font-size: 24px; }
|
||||
p { font-size: 14px; }
|
||||
|
||||
.info-section {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px) {
|
||||
.art-section {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-text { font-size: 50px; }
|
||||
|
||||
h1 { font-size: 22px; }
|
||||
p { font-size: 14px; margin-bottom: 20px; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="error-code animation">404</div>
|
||||
<h1 id="heading">Page Not Found</h1>
|
||||
<p id="message">
|
||||
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" id="home-btn">Go to Homepage</a>
|
||||
<a
|
||||
href="javascript:history.back()"
|
||||
class="btn btn-secondary"
|
||||
id="back-btn"
|
||||
>Go Back</a
|
||||
>
|
||||
</div>
|
||||
<div class="art-section">
|
||||
<div class="line-art">
|
||||
<div class="horizontal-line"></div>
|
||||
<div class="vertical-line"></div>
|
||||
<div class="diagonal-line-1"></div>
|
||||
<div class="diagonal-line-2"></div>
|
||||
<div class="floating-dot dot-1"></div>
|
||||
<div class="floating-dot dot-2"></div>
|
||||
<div class="floating-dot dot-3"></div>
|
||||
<div class="floating-dot dot-4"></div>
|
||||
<div class="error-text">404</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h1 id="title">PAGE NOT FOUND</h1>
|
||||
<p id="description">The page you are looking for does not exist. It may have been moved, deleted, or the URL may be incorrect.</p>
|
||||
<div class="btn-container">
|
||||
<button class="btn btn-home" id="homeBtn" onclick="window.location.href='/'">Return Home</button>
|
||||
<button class="btn btn-back" id="backBtn" onclick="history.back()">Go Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Language detection and content switching
|
||||
function setLanguage() {
|
||||
const userLanguage = navigator.language || navigator.userLanguage;
|
||||
const isChinese = userLanguage.toLowerCase().includes("zh-cn");
|
||||
// 语言内容配置
|
||||
const translations = {
|
||||
'zh': {
|
||||
title: '页面未找到',
|
||||
description: '您寻找的页面不存在，可能已被移动、删除，或网址输入有误。',
|
||||
homeBtn: '返回首页',
|
||||
backBtn: '返回上一页'
|
||||
},
|
||||
'zh-CN': {
|
||||
title: '页面未找到',
|
||||
description: '您寻找的页面不存在，可能已被移动、删除，或网址输入有误。',
|
||||
homeBtn: '返回首页',
|
||||
backBtn: '返回上一页'
|
||||
},
|
||||
'zh-TW': {
|
||||
title: '頁面未找到',
|
||||
description: '您尋找的頁面不存在，可能已被移動、刪除，或網址輸入有誤。',
|
||||
homeBtn: '返回首頁',
|
||||
backBtn: '返回上一頁'
|
||||
},
|
||||
'zh-HK': {
|
||||
title: '頁面未找到',
|
||||
description: '您尋找的頁面不存在，可能已被移動、刪除，或網址輸入有誤。',
|
||||
homeBtn: '返回首頁',
|
||||
backBtn: '返回上一頁'
|
||||
},
|
||||
'en': {
|
||||
title: 'PAGE NOT FOUND',
|
||||
description: 'The page you are looking for does not exist. It may have been moved, deleted, or the URL may be incorrect.',
|
||||
homeBtn: 'Return Home',
|
||||
backBtn: 'Go Back'
|
||||
}
|
||||
};
|
||||
|
||||
if (isChinese) {
|
||||
document.getElementById("page-title").textContent =
|
||||
"页面未找到 - 404";
|
||||
document.getElementById("heading").textContent = "页面未找到";
|
||||
document.getElementById("message").textContent =
|
||||
"您访问的页面可能已被移动、删除或暂时不可用。";
|
||||
document.getElementById("home-btn").textContent = "返回首页";
|
||||
document.getElementById("back-btn").textContent = "返回上一页";
|
||||
|
||||
console.log(
|
||||
"%c404 - 页面未找到",
|
||||
"color: #4361ee; font-size: 2em; font-weight: bold;"
|
||||
);
|
||||
console.log(
|
||||
"%c您似乎迷路了，但别担心！点击上面的按钮可以找到回去的路。",
|
||||
"color: #2b2d42; font-size: 1.1em;"
|
||||
);
|
||||
} else {
|
||||
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;"
|
||||
);
|
||||
// 获取浏览器语言
|
||||
function getBrowserLanguage() {
|
||||
return (navigator.language || navigator.userLanguage || 'en').toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
// Set language on page load
|
||||
window.addEventListener("DOMContentLoaded", setLanguage);
|
||||
// 设置页面语言
|
||||
function setLanguage() {
|
||||
const lang = getBrowserLanguage();
|
||||
const langCode = lang.startsWith('zh') ?
|
||||
(lang === 'zh-cn' || lang === 'zh') ? 'zh-CN' :
|
||||
(lang === 'zh-tw') ? 'zh-TW' :
|
||||
(lang === 'zh-hk') ? 'zh-HK' : 'zh' : 'en';
|
||||
|
||||
// 如果是中文语言，则更新页面内容
|
||||
if (langCode.startsWith('zh')) {
|
||||
document.getElementById('title').textContent = translations[langCode].title;
|
||||
document.getElementById('description').textContent = translations[langCode].description;
|
||||
document.getElementById('homeBtn').textContent = translations[langCode].homeBtn;
|
||||
document.getElementById('backBtn').textContent = translations[langCode].backBtn;
|
||||
document.documentElement.lang = langCode;
|
||||
} else {
|
||||
// 默认英文
|
||||
document.getElementById('homeBtn').textContent = translations.en.homeBtn;
|
||||
document.getElementById('backBtn').textContent = translations.en.backBtn;
|
||||
document.documentElement.lang = 'en';
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后设置语言
|
||||
document.addEventListener('DOMContentLoaded', setLanguage);
|
||||
|
||||
// 监听主题变化
|
||||
if (window.matchMedia) {
|
||||
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
darkModeMediaQuery.addEventListener('change', () => {
|
||||
// 强制重绘以确保颜色正确更新
|
||||
document.body.style.opacity = 0.99;
|
||||
setTimeout(() => {
|
||||
document.body.style.opacity = 1;
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
370
html/500.html
Normal file
370
html/500.html
Normal file
@@ -0,0 +1,370 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>500</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 默认浅色主题变量 */
|
||||
:root {
|
||||
--bg-color: #f8f9fa;
|
||||
--text-color: #212529;
|
||||
--secondary-text: #6c757d;
|
||||
--circle-color: #212529;
|
||||
--line-color: #212529;
|
||||
--dot-color: #dc3545;
|
||||
--btn-bg: transparent;
|
||||
--btn-border: #212529;
|
||||
--btn-text: #212529;
|
||||
--btn-hover-bg: #212529;
|
||||
--btn-hover-text: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 暗色主题变量 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #121212;
|
||||
--text-color: #e9ecef;
|
||||
--secondary-text: #adb5bd;
|
||||
--circle-color: #e9ecef;
|
||||
--line-color: #e9ecef;
|
||||
--dot-color: #cf6679; /* 暗色模式下稍柔和的红色 */
|
||||
--btn-bg: transparent;
|
||||
--btn-border: #e9ecef;
|
||||
--btn-text: #e9ecef;
|
||||
--btn-hover-bg: #e9ecef;
|
||||
--btn-hover-text: #121212;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-color);
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
color: var(--text-color);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.art-section {
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border: 2px solid var(--circle-color);
|
||||
border-radius: 50%;
|
||||
animation: rotate 20s linear infinite;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
animation-direction: reverse;
|
||||
animation-duration: 15s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
top: 60px;
|
||||
left: 60px;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 80px;
|
||||
font-weight: 900;
|
||||
color: var(--text-color);
|
||||
font-family: 'Georgia', serif;
|
||||
letter-spacing: 8px;
|
||||
z-index: 2;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
background: var(--line-color);
|
||||
transform-origin: center;
|
||||
animation: lineMove 8s ease-in-out infinite;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
top: 50%;
|
||||
left: 30%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
width: 2px;
|
||||
height: 150px;
|
||||
top: 40%;
|
||||
right: 30%;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--dot-color);
|
||||
border-radius: 50%;
|
||||
animation: pulse 3s infinite;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
top: 30%;
|
||||
left: 25%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
bottom: 25%;
|
||||
right: 20%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
top: 60%;
|
||||
right: 35%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-color);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: var(--secondary-text);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 300;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--btn-bg);
|
||||
border: 1px solid var(--btn-border);
|
||||
color: var(--btn-text);
|
||||
padding: 12px 32px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--btn-hover-bg);
|
||||
color: var(--btn-hover-text);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes lineMove {
|
||||
0%, 100% { transform: translateY(-50%) rotate(45deg); }
|
||||
50% { transform: translateY(-50%) rotate(135deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.5); opacity: 0.7; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.art-section {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.circle-1 { width: 200px; height: 200px; }
|
||||
.circle-2 { width: 160px; height: 160px; top: 20px; left: 20px; }
|
||||
.circle-3 { width: 120px; height: 120px; top: 40px; left: 40px; }
|
||||
|
||||
.error-text { font-size: 60px; }
|
||||
|
||||
h1 { font-size: 24px; }
|
||||
p { font-size: 14px; }
|
||||
|
||||
.info-section {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px) {
|
||||
.art-section {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.circle-1 { width: 200px; height: 200px; }
|
||||
.circle-2 { width: 160px; height: 160px; top: 20px; left: 20px; }
|
||||
.circle-3 { width: 120px; height: 120px; top: 40px; left: 40px; }
|
||||
|
||||
.error-text { font-size: 50px; }
|
||||
|
||||
h1 { font-size: 22px; }
|
||||
p { font-size: 14px; margin-bottom: 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="art-section">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
<div class="circle circle-3"></div>
|
||||
<div class="error-text">500</div>
|
||||
<div class="line line-1"></div>
|
||||
<div class="line line-2"></div>
|
||||
<div class="dot dot-1"></div>
|
||||
<div class="dot dot-2"></div>
|
||||
<div class="dot dot-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h1 id="title">UNEXPECTED INTERRUPTION</h1>
|
||||
<p id="description">Artistic creation sometimes needs a pause to think. Our system is reimagining the best solution. Please come back later to enjoy the complete work.</p>
|
||||
<button class="btn" id="homeBtn" onclick="window.location.href='/'">CONTINUE EXPLORING</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 语言内容配置
|
||||
const translations = {
|
||||
'zh': {
|
||||
title: '意外中断',
|
||||
description: '艺术创作有时也需要暂停思考。我们的系统正在重新构思最佳方案，请稍后再来欣赏完整的作品。',
|
||||
homeBtn: '继续探索'
|
||||
},
|
||||
'zh-CN': {
|
||||
title: '意外中断',
|
||||
description: '艺术创作有时也需要暂停思考。我们的系统正在重新构思最佳方案，请稍后再来欣赏完整的作品。',
|
||||
homeBtn: '继续探索'
|
||||
},
|
||||
'zh-TW': {
|
||||
title: '意外中斷',
|
||||
description: '藝術創作有時也需要暫停思考。我們的系統正在重新構思最佳方案，請稍後再來欣賞完整的作品。',
|
||||
homeBtn: '繼續探索'
|
||||
},
|
||||
'zh-HK': {
|
||||
title: '意外中斷',
|
||||
description: '藝術創作有時也需要暫停思考。我們的系統正在重新構思最佳方案，請稍後再來欣賞完整的作品。',
|
||||
homeBtn: '繼續探索'
|
||||
},
|
||||
'en': {
|
||||
title: 'UNEXPECTED INTERRUPTION',
|
||||
description: 'Artistic creation sometimes needs a pause to think. Our system is reimagining the best solution. Please come back later to enjoy the complete work.',
|
||||
homeBtn: 'CONTINUE EXPLORING'
|
||||
}
|
||||
};
|
||||
|
||||
// 获取浏览器语言
|
||||
function getBrowserLanguage() {
|
||||
return (navigator.language || navigator.userLanguage || 'en').toLowerCase();
|
||||
}
|
||||
|
||||
// 设置页面语言
|
||||
function setLanguage() {
|
||||
const lang = getBrowserLanguage();
|
||||
const langCode = lang.startsWith('zh') ?
|
||||
(lang === 'zh-cn' || lang === 'zh') ? 'zh-CN' :
|
||||
(lang === 'zh-tw') ? 'zh-TW' :
|
||||
(lang === 'zh-hk') ? 'zh-HK' : 'zh' : 'en';
|
||||
|
||||
// 如果是中文语言，则更新页面内容
|
||||
if (langCode.startsWith('zh')) {
|
||||
document.getElementById('title').textContent = translations[langCode].title;
|
||||
document.getElementById('description').textContent = translations[langCode].description;
|
||||
document.getElementById('homeBtn').textContent = translations[langCode].homeBtn;
|
||||
document.documentElement.lang = langCode;
|
||||
} else {
|
||||
// 默认英文，无需更改，但设置正确的lang属性
|
||||
document.documentElement.lang = 'en';
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后设置语言
|
||||
document.addEventListener('DOMContentLoaded', setLanguage);
|
||||
|
||||
// 监听系统主题变化
|
||||
if (window.matchMedia) {
|
||||
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
darkModeMediaQuery.addEventListener('change', () => {
|
||||
// 强制重绘以确保颜色正确更新
|
||||
document.body.style.opacity = 0.99;
|
||||
setTimeout(() => {
|
||||
document.body.style.opacity = 1;
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user