<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coming Soon</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom font for a clean look */
body {
font-family: 'Inter', sans-serif;
background-color: #1a202c; /* Dark background */
color: #e2e8f0; /* Light text color */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* Full viewport height */
margin: 0;
padding: 20px; /* Add some padding for smaller screens */
box-sizing: border-box; /* Include padding in element's total width and height */
}
/* Style for the main heading to use Times New Roman */
.coming-soon-heading {
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body class="antialiased">
<div class="text-center bg-gray-800 p-8 md:p-12 rounded-lg shadow-2xl max-w-xl w-full">
<!-- Main Heading -->
<h1 class="text-4xl md:text-6xl font-extrabold mb-4 tracking-tight text-white coming-soon-heading">
Coming Soon!
</h1>
<!-- Subtitle/Message -->
<p class="text-lg md:text-xl text-gray-400 mb-8">
We're working hard to bring you something amazing. Stay tuned!
</p>
<!-- Countdown Timer Section -->
<div id="countdown" class="flex justify-center space-x-4 md:space-x-8 text-white">
<div class="flex flex-col items-center p-3 md:p-4 bg-gray-700 rounded-lg shadow-md">
<span id="days" class="text-3xl md:text-5xl font-bold">00</span>
<span class="text-xs md:text-sm uppercase mt-1 text-gray-300">Days</span>
</div>
<div class="flex flex-col items-center p-3 md:p-4 bg-gray-700 rounded-lg shadow-md">
<span id="hours" class="text-3xl md:text-5xl font-bold">00</span>
<span class="text-xs md:text-sm uppercase mt-1 text-gray-300">Hours</span>
</div>
<div class="flex flex-col items-center p-3 md:p-4 bg-gray-700 rounded-lg shadow-md">
<span id="minutes" class="text-3xl md:text-5xl font-bold">00</span>
<span class="text-xs md:text-sm uppercase mt-1 text-gray-300">Minutes</span>
</div>
<div class="flex flex-col items-center p-3 md:p-4 bg-gray-700 rounded-lg shadow-md">
<span id="seconds" class="text-3xl md:text-5xl font-bold">00</span>
<span class="text-xs md:text-sm uppercase mt-1 text-gray-300">Seconds</span>
</div>
</div>
<!-- The "Follow us for updates" section has been removed -->
</div>
<script>
// Set the date we're counting down to (e.g., 30 days from now)
const countdownDate = new Date();
countdownDate.setDate(countdownDate.getDate() + 30); // Set to 30 days from today
// Update the countdown every 1 second
const x = setInterval(function() {
// Get today's date and time
const now = new Date().getTime();
// Find the distance between now and the countdown date
const distance = countdownDate.getTime() - now;
// Time calculations for days, hours, minutes and seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the corresponding elements
document.getElementById("days").innerHTML = String(days).padStart(2, '0');
document.getElementById("hours").innerHTML = String(hours).padStart(2, '0');
document.getElementById("minutes").innerHTML = String(minutes).padStart(2, '0');
document.getElementById("seconds").innerHTML = String(seconds).padStart(2, '0');
// If the countdown is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<span class='text-2xl font-bold text-green-400'>We are LIVE!</span>";
document.getElementById("countdown").classList.remove('flex', 'space-x-4', 'md:space-x-8');
document.getElementById("countdown").classList.add('block');
}
}, 1000); // Update every 1 second
</script>
</body>
</html>