2025-09-12 12:28:17 +08:00
<!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;
}
2025-09-12 12:44:35 +08:00
.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;
}
2025-09-12 12:28:17 +08:00
.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);
2025-09-12 12:44:35 +08:00
animation-delay: 0s;
2025-09-12 12:28:17 +08:00
}
.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); }
}
2025-09-12 12:44:35 +08:00
@keyframes lineMove1 {
2025-09-12 12:28:17 +08:00
0%, 100% { transform: translateY(-50%) rotate(45deg); }
2025-09-12 12:44:35 +08:00
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); }
2025-09-12 12:28:17 +08:00
}
@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 {
// 默认英文， ，
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 >
