{% 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-success-subtle text-success mx-auto shadow-sm">
                            <i class="bi bi-check-lg" style="font-size: 2.5rem;"></i>
                        </div>
                    </div>

                    <h2 class="fw-bold text-dark mb-3 fade-out-slow">
                        您已成功登出。
                    </h2>

                    <p class="text-muted mb-5">
                        感谢您使用茄子在线检测系统，<br>期待与您的下一次相遇。
                    </p>

                    <div class="d-grid gap-2 col-8 mx-auto">
                        <a class="btn btn-primary btn-lg rounded-pill shadow-hover" href="{% url 'login' %}" style="background-color: #6f42c1; border: none;">
                            <i class="bi bi-arrow-repeat 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: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 按钮悬浮效果 */
    .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;
    }

    /* === 核心需求：文字慢慢消失动画 === */
    .fade-out-slow {
        /* animation-name: fadeOut;
           duration: 2s (动画持续2秒);
           delay: 1s (停留1秒后开始消失);
           forwards: 保持动画结束后的状态 (即保持透明，不显示)
        */
        animation: fadeOutText 2s ease-in-out 1s forwards;
    }

    @keyframes fadeOutText {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale(0.95); /* 稍微缩小一点，增加消失的动感 */
            height: 0; /* 可选：如果希望文字消失后不占位，可以加这行，但可能会导致下方按钮跳动，建议不加 */
            margin: 0;
        }
    }
</style>
{% endblock %}