{% extends 'base.html' %}

{% block title %}访问被拒绝 - 茄子在线检测系统{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-8 fade-in-up">
            
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden text-center">
                <div class="card-body p-5">
                    
                    <div class="mb-4">
                        <div class="icon-circle bg-danger-subtle text-danger mx-auto shadow-sm">
                            <i class="bi bi-shield-lock-fill" style="font-size: 3rem;"></i>
                        </div>
                    </div>

                    <h2 class="fw-bold text-dark mb-3">
                        访问被拒绝
                    </h2>

                    <p class="text-secondary mb-5">
                        抱歉，您的权限不足，无法访问此页面。<br>
                        如果您认为这是一个错误，请联系系统管理员。
                    </p>

                    <div class="d-grid gap-2 col-8 mx-auto">
                        <a href="/" class="btn btn-primary btn-lg rounded-pill shadow-hover" style="background-color: #6f42c1; border: none;">
                            <i class="bi bi-house-door-fill me-2"></i>返回首页
                        </a>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

<style>
    /* 进场动画 */
    .fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    @keyframes fadeInUp {
        to { opacity: 1; transform: translateY(0); }
    }

    /* 图标圆圈背景 */
    .icon-circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    .icon-circle:hover {
        transform: scale(1.05);
    }

    /* 按钮悬浮效果 */
    .shadow-hover {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .shadow-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(111, 66, 193, 0.3) !important;
    }
</style>
{% endblock %}