{% extends "base.html" %}

{% block title %}404 - 页面未找到{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-content">
        <div class="error-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h1>404</h1>
        <h2>页面未找到</h2>
        <p>抱歉，您访问的页面不存在或已被移除。</p>

        <div class="error-actions">
            <a href="{{ url_for('index') }}" class="btn btn-primary">
                <i class="fas fa-home"></i> 返回首页
            </a>
            <button onclick="goBack()" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回上页
            </button>
        </div>

        <div class="error-details">
            <h3>可能的原因：</h3>
            <ul>
                <li>您输入的网址可能有误</li>
                <li>页面已被移动或删除</li>
                <li>服务器暂时无法响应</li>
            </ul>
        </div>

        <div class="search-suggestion">
            <h3>您可能想访问：</h3>
            <div class="suggested-links">
                <a href="{{ url_for('index') }}">首页</a>
                <a href="{{ url_for('upload_page') }}">上传代码</a>
                <a href="{{ url_for('results_page') }}">验证结果</a>
            </div>
        </div>
    </div>
</div>

<script>
function goBack() {
    if (window.history.length > 1) {
        window.history.back();
    } else {
        window.location.href = "{{ url_for('index') }}";
    }
}

// Auto-redirect after 30 seconds
setTimeout(() => {
    window.location.href = "{{ url_for('index') }}";
}, 30000);
</script>
{% endblock %}

{% block extra_css %}
<style>
.error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 40px 20px;
}

.error-content {
    text-align: center;
    max-width: 600px;
    background: white;
    padding: 60px 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.error-icon {
    font-size: 4rem;
    color: #ffc107;
    margin-bottom: 20px;
}

.error-content h1 {
    font-size: 6rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
}

.error-content h2 {
    font-size: 2rem;
    color: #666;
    margin: 0 0 20px 0;
}

.error-content p {
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.error-details {
    text-align: left;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.error-details h3 {
    color: #333;
    margin: 0 0 15px 0;
}

.error-details ul {
    margin: 0;
    padding-left: 20px;
}

.error-details li {
    color: #666;
    margin-bottom: 8px;
}

.search-suggestion {
    text-align: left;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
}

.search-suggestion h3 {
    color: #333;
    margin: 0 0 15px 0;
}

.suggested-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.suggested-links a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    background: white;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.suggested-links a:hover {
    background: #667eea;
    color: white;
}

@media (max-width: 768px) {
    .error-content {
        padding: 40px 20px;
    }

    .error-content h1 {
        font-size: 4rem;
    }

    .error-content h2 {
        font-size: 1.5rem;
    }

    .error-actions {
        flex-direction: column;
        align-items: center;
    }

    .suggested-links {
        justify-content: center;
    }
}
</style>
{% endblock %}