<!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>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Courier New', Courier, monospace;
            background: black;
            color: white;
            overflow: hidden;
        }

        .container {
            text-align: center;
            padding-top: 15%;
        }

        h1 {
            font-size: 3em;
            text-shadow: 0 0 10px white, 0 0 20px white;
        }

        .countdown {
            background: rgba(128, 128, 128, 0.8);
            padding: 20px;
            border-radius: 10px;
            display: inline-block;
            margin-top: 20px;
        }

        .footer {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            font-size: 0.9em;
        }

        .footer a {
            color: cyan;
            text-decoration: none;
            margin: 0 10px;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        #what-happened {
            display: none;
            background: rgba(50, 50, 50, 0.95);
            color: white;
            padding: 20px;
            border-radius: 10px;
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

        .small-text {
            font-size: 0.8em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Coming Soon...</h1>
        <div class="countdown" id="countdown">Loading...</div>
    </div>

    <div class="footer">/
        <a href="https://discord.gg/SacxXrDDS8" target="_blank">Join our Discord</a> / 
        <a href="https://discord.gg/5MPYAAmHcR" target="_blank">Netisu</a> / 
        <a href="#" id="what-happened-link">What Happened to Epic Hill?</a> / 
    </div>

    <div id="what-happened">
        <p>After Alexander Dunn took down multiple other sandboxes, we decided it was best to not risk a C&D. We apologize for disappointing our users. A new project is coming soon!</p>
        <p>Here's some other sandboxes you can play!</p>
        <p class="small-text">
            <a href="https://netisu.com" target="_blank">Netisu</a><br>
            <a href="https://www.squish-town.xyz/" target="_blank">Squish Town</a><br>
            <a href="https://polymondus.serv00.net/" target="_blank">Polymondus</a>
        </p>
    </div>

    <script>
        const countdownElement = document.getElementById('countdown');
        const targetTime = 1735711200 * 1000; 

        function updateCountdown() {
            const now = new Date().getTime();
            const difference = targetTime - now;

            if (difference > 0) {
                const days = Math.floor(difference / (1000 * 60 * 60 * 24));
                const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((difference % (1000 * 60)) / 1000);

                countdownElement.innerText = `${days}d ${hours}h ${minutes}m ${seconds}s`;
            } else {
                countdownElement.innerText = "it might be outidk";
            }
        }

        setInterval(updateCountdown, 1000);

        document.getElementById('what-happened-link').addEventListener('click', () => {
            const box = document.getElementById('what-happened');
            box.style.display = box.style.display === 'none' ? 'block' : 'none';
        });
    </script>
</body>
</html>
