<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coming Soon - RadeMark</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Poppins:wght@300;600&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            background: url('https://picsum.photos/1920/1080?random') no-repeat center center fixed;
            background-size: cover;
            color: white;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
            transition: background 1.5s ease-in-out; /* Adding transition */
        }

        .container {
            width: 100%;
            max-width: 800px;
            background: rgba(0, 0, 0, 0.30);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
            animation: fadeIn 1.5s;
        }

        h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 3.5rem;
            margin-bottom: 25px;
            text-transform: uppercase;
            letter-spacing: 6px;
        }

        p {
            font-size: 1.4rem;
            margin-bottom: 40px;
            font-weight: 300;
        }

        .countdown {
            display: flex;
            justify-content: center;
            gap: 25px;
            font-family: 'Orbitron', sans-serif;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        .countdown div {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px 20px;
            border-radius: 10px;
            flex: 1 1 120px;
            margin: 5px;
        }

        .countdown span {
            display: block;
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .countdown div span {
            color: #f39c12;
        }

        footer {
            margin-top: 50px;
            font-size: 1rem;
            opacity: 0.8;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Media Queries for responsiveness */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }

            p {
                font-size: 1.2rem;
            }

            .countdown div {
                flex: 1 1 90px;
                font-size: 1.2rem;
            }

            footer {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 2rem;
            }

            p {
                font-size: 1rem;
            }

            .countdown div {
                flex: 1 1 70px;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Something Big Is Coming Soon!</h1>
        <p>We’re building something amazing. Stay tuned!</p>

        <div class="countdown">
            <div>
                <span id="days">00</span>
                Days
            </div>
            <div>
                <span id="hours">00</span>
                Hours
            </div>
            <div>
                <span id="minutes">00</span>
                Minutes
            </div>
            <div>
                <span id="seconds">00</span>
                Seconds
            </div>
        </div>

        <footer>&copy; 2025 RadeMark - All Rights Reserved</footer>
    </div>

    <script>
        // Set the date we're counting down to
        const countdownDate = new Date("2025-02-01T00:00:00").getTime();

        // Update the countdown every 1 second
        const interval = setInterval(() => {
            const now = new Date().getTime();
            const distance = countdownDate - now;

            if (distance < 0) {
                clearInterval(interval);
                document.querySelector('.countdown').innerHTML = "We're Live!";
                return;
            }

            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);

            document.getElementById('days').textContent = days;
            document.getElementById('hours').textContent = hours;
            document.getElementById('minutes').textContent = minutes;
            document.getElementById('seconds').textContent = seconds;
        }, 1000);

        // Change background only after successful fetch
        async function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function changeBackground() {
            try {
                const response = await fetch(`https://picsum.photos/1920/1080?random=${Math.random()}`, { method: 'GET' });
                if (response.ok) {
                    const imageUrl = response.url;
                    const img = new Image();
                    img.onload = () => {
                        document.body.style.transition = "background 1.5s ease-in-out"; // Apply transition effect
                        document.body.style.background = `url('${imageUrl}') no-repeat center center fixed`;
                        document.body.style.backgroundSize = "cover";
                    };
                    img.src = imageUrl; // Triggers the loading of the image
                }
            } catch (error) {
                console.error("Failed to fetch background image:", error);
            }
        }

        setInterval(changeBackground, 5000);
    </script>
</body>
</html>
