392 lines
12 KiB
HTML
392 lines
12 KiB
HTML
<!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;
|
||
transition: background 0.3s ease;
|
||
}
|
||
.line-1 {
|
||
width: 2px;
|
||
height: 200px;
|
||
top: 50%;
|
||
left: 30%;
|
||
transform: translateY(-50%) rotate(45deg);
|
||
animation: lineMove1 9s ease-in-out infinite;
|
||
}
|
||
.line-2 {
|
||
width: 2px;
|
||
height: 150px;
|
||
top: 40%;
|
||
right: 30%;
|
||
transform: translateY(-50%) rotate(-45deg);
|
||
animation: lineMove2 11s ease-in-out infinite;
|
||
}
|
||
|
||
.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: 0s;
|
||
}
|
||
|
||
.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 lineMove1 {
|
||
0%, 100% { transform: translateY(-50%) rotate(45deg); }
|
||
30% { transform: translateY(-50%) rotate(60deg); }
|
||
60% { transform: translateY(-50%) rotate(30deg); }
|
||
}
|
||
@keyframes lineMove2 {
|
||
0%, 100% { transform: translateY(-50%) rotate(-45deg); }
|
||
40% { transform: translateY(-50%) rotate(-30deg); }
|
||
80% { transform: translateY(-50%) rotate(-60deg); }
|
||
}
|
||
|
||
@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> |