<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <style>
        body { 
            font-family: 'Microsoft YaHei', sans-serif; 
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            margin: 0; 
            padding: 0; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            min-height: 100vh; 
            color: #333; 
        }
        .container { 
            text-align: center; 
            padding: 2.5rem; 
            background: white; 
            border-radius: 12px; 
            box-shadow: 0 5px 25px rgba(0,0,0,0.1); 
            max-width: 500px; 
            width: 90%; 
            position: relative;
            overflow: hidden;
        }
        .container:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #007bff, #dc3545);
        }
        h1 { 
            color: #dc3545; 
            font-size: 5rem; 
            margin: 0 0 1rem 0; 
            text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
        }
        p { 
            font-size: 1.1rem; 
            margin: 0.5rem 0; 
            line-height: 1.6; 
        }
        .countdown {
            font-size: 1.2rem;
            margin: 1.5rem 0;
            padding: 0.8rem;
            background: #f8f9fa;
            border-radius: 6px;
            display: inline-block;
            font-weight: bold;
        }
        .countdown-number {
            color: #dc3545;
            font-weight: 800;
        }
        .btn { 
            display: inline-block; 
            margin-top: 1rem; 
            padding: 0.75rem 1.5rem; 
            background-color: #007bff; 
            color: white; 
            text-decoration: none; 
            border-radius: 5px; 
            transition: all 0.3s; 
            border: none;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
        }
        .btn:hover { 
            background-color: #0056b3; 
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .animation {
            margin: 1.5rem auto;
            width: 150px;
            height: 150px;
            position: relative;
        }
        .circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(220, 53, 69, 0.1);
            animation: pulse 2s infinite;
        }
        .circle:nth-child(1) {
            width: 150px;
            height: 150px;
            animation-delay: 0s;
        }
        .circle:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 15px;
            left: 15px;
            animation-delay: 0.2s;
        }
        .circle:nth-child(3) {
            width: 90px;
            height: 90px;
            top: 30px;
            left: 30px;
            animation-delay: 0.4s;
        }
        .circle:nth-child(4) {
            width: 60px;
            height: 60px;
            top: 45px;
            left: 45px;
            animation-delay: 0.6s;
        }
        @keyframes pulse {
            0% { transform: scale(0.95); opacity: 0.7; }
            50% { transform: scale(1); opacity: 0.3; }
            100% { transform: scale(0.95); opacity: 0.7; }
        }
        @media (max-width: 480px) {
            h1 { font-size: 4rem; }
            .container { padding: 1.5rem; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>404</h1>
        <p>很抱歉，您访问的页面不存在。</p>
        <p>可能的原因：页面已被删除、网址输入错误或页面已移动。</p>
        
        <div class="animation">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        
        <div class="countdown">
            <span id="countdown-text"><span class="countdown-number" id="countdown">3</span> 秒后自动返回首页</span>
        </div>
        
        <a href="http://www.shom17.net" class="btn">立即返回首页</a>
    </div>

    <script>
        // 倒计时和跳转功能
        function startCountdown() {
            let seconds = 3;
            const countdownElement = document.getElementById('countdown');
            const countdownTextElement = document.getElementById('countdown-text');
            
            const countdownInterval = setInterval(() => {
                seconds--;
                countdownElement.textContent = seconds;
                
                if (seconds <= 0) {
                    clearInterval(countdownInterval);
                    window.location.href = 'http://www.shom17.net';
                }
            }, 1000);
        }
        
        // 页面加载完成后开始倒计时
        window.onload = function() {
            startCountdown();
        };
    </script>
</body>
</html>