feat(500.html): 添加 500 错误页面，包含动态语言支持和动画效果

2025-09-12 12:28:17 +08:00
parent 9ac3d34a2a
commit ae3aa66498
2 changed files with 751 additions and 179 deletions
--- a/html/500.html
+++ b/html/500.html
@@ -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>