<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirecting {{ key }}</title>
    <link rel="stylesheet" href="/static/styles.css">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-full h-full flex flex-col justify-center items-center">
    <div class="flex items-center justify-center w-full h-full">
        <div class="relative w-full h-full bg-cover bg-center"
             style="background-image: url('/static/custom/background.jpg')"></div>

        <div class="absolute w-11/12 sm:w-2/3 md:w-1/2 lg:w-1/3 h-2/5 rounded-xl p-5 flex flex-col gap-5 justify-center items-center">
            <div class="absolute inset-0 bg-black opacity-70 rounded-xl"></div>
            <div class="relative logo flex justify-center items-center">
                <img class="h-24 sm:h-32 md:h-48" src="/static/custom/logo.png" alt="logo">
            </div>

            <h1 class="relative text-xl sm:text-2xl md:text-3xl text-white">Redirecting...</h1>
            <p class="relative text-white">You will be redirected in <span id="countdown">5</span> seconds.</p>
        </div>
    </div>
</div>
<script>
    let countdown = 5;
    const countdownElement = document.getElementById('countdown');
    const interval = setInterval(() => {
        countdown--;
        countdownElement.textContent = countdown;
        if (countdown <= 0) {
            clearInterval(interval);
            window.location.href = '{{ target_url }}';
        }
    }, 1000);
</script>
</body>
</html>