<!DOCTYPE html>
<html lang="zh" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新邮箱</title>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f8f9fa;
            user-select: none; /* Prevent text selection */
        }
    </style>
</head>
<body>
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" style="width: 50%;" translate="no">
        <div class="carousel-inner">
            <div class="carousel-item active text-center p-5" translate="no">
                <h1>更新邮箱</h1>
            </div>
            <div class="carousel-item text-center p-5" translate="no">
                <h1>完成更新</h1>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="completionModal" tabindex="-1" aria-labelledby="completionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" translate="no">
                    <h5 class="modal-title" id="completionModalLabel">邮箱更新完成</h5>
                </div>
                <div class="modal-body" translate="no">
                    邮箱更新已完成。请关闭此标签页。
                </div>
                <div class="modal-footer" translate="no">
                   
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Auto-advance carousel
        const carousel = document.querySelector('#carouselExample');
        const bootstrapCarousel = new bootstrap.Carousel(carousel, {
            interval: 1200,
            ride: true
        });

        // Show modal after carousel cycle
        carousel.addEventListener('slid.bs.carousel', (event) => {
            const activeItem = document.querySelector('.carousel-item.active');
            if (activeItem.textContent.trim() === '完成更新') {
                setTimeout(() => {
                    const modal = new bootstrap.Modal(document.getElementById('completionModal'));
                    modal.show();
                }, 2000);
            }
        });

        // Function to close tab
        function closeTab() {
            window.close();
        }
    </script>
</body>
</html>
