open-redirect/api/src/templates/redirect.html

39 lines
1.5 KiB
HTML

<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">
<div class="relative w-screen h-screen bg-cover bg-center"
style="background-image: url('/static/custom/background.jpg')"></div>
<div class="absolute 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-48" src="/static/custom/logo.png" alt="logo">
</div>
<h1 class="relative 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>