<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Request</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            background-color: black;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Poppins', sans-serif;
            overflow: hidden; /* Prevents snowflakes from being cut off */
            position: relative;
        }
        .container {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
        }
        h1 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #f2f2f2;
            font-weight: 600;
        }
        input[type="text"] {
            padding: 12px 15px;
            font-size: 16px;
            width: 300px;
            border: none;
            border-radius: 8px;
            background: #1c1c1c;
            color: white;
            outline: none;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease-in-out;
            font-family: 'Poppins', sans-serif;
        }
        input[type="text"]:focus {
            box-shadow: 0px 6px 15px rgba(50, 50, 50, 0.5);
            background: #2a2a2a;
        }
        button {
            margin-top: 10px;
            padding: 12px 25px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(45deg, #00b4db, #0083b0);
            color: white;
            cursor: pointer;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease-in-out;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
        }
        button:disabled {
            background: gray;
            cursor: not-allowed;
            box-shadow: none;
        }
        button:hover {
            transform: scale(1.1); /* Makes the button grow slightly */
        }
        .error {
            color: red;
            margin-top: 10px;
            font-size: 14px;
        }
        .success {
            color: green;
            margin-top: 10px;
            font-size: 14px;
        }
        .cooldown {
            color: orange;
            margin-top: 10px;
            font-size: 14px;
        }

        /* Snowing animation */
        .snowflake {
            position: absolute;
            top: -10px;
            color: rgb(147, 174, 201);
            font-size: 20px;
            opacity: 0; /* Initially invisible */
            animation: fall 10s linear infinite, fadeInOut 1s infinite alternate; /* Infinite loop of fall and fade in-out */
            pointer-events: none;
        }

        @keyframes fall {
            0% {
                transform: translateY(-100px);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh);
                opacity: 0.7;
            }
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        /* Snowflakes animation */
        .snowflake:nth-child(1) { left: 10%; animation-duration: 12s; }
        .snowflake:nth-child(2) { left: 20%; animation-duration: 15s; }
        .snowflake:nth-child(3) { left: 30%; animation-duration: 18s; }
        .snowflake:nth-child(4) { left: 40%; animation-duration: 10s; }
        .snowflake:nth-child(5) { left: 50%; animation-duration: 14s; }
        .snowflake:nth-child(6) { left: 60%; animation-duration: 16s; }
        .snowflake:nth-child(7) { left: 70%; animation-duration: 20s; }
        .snowflake:nth-child(8) { left: 80%; animation-duration: 17s; }
        .snowflake:nth-child(9) { left: 90%; animation-duration: 13s; }
        .snowflake:nth-child(10) { left: 5%; animation-duration: 11s; }
        .snowflake:nth-child(11) { left: 15%; animation-duration: 14s; }
        .snowflake:nth-child(12) { left: 25%; animation-duration: 19s; }
        .snowflake:nth-child(13) { left: 35%; animation-duration: 12s; }
        .snowflake:nth-child(14) { left: 45%; animation-duration: 16s; }
        .snowflake:nth-child(15) { left: 55%; animation-duration: 18s; }
        .snowflake:nth-child(16) { left: 65%; animation-duration: 13s; }
        .snowflake:nth-child(17) { left: 75%; animation-duration: 17s; }
        .snowflake:nth-child(18) { left: 85%; animation-duration: 14s; }
        .snowflake:nth-child(19) { left: 95%; animation-duration: 16s; }
        .snowflake:nth-child(20) { left: 10%; animation-duration: 13s; }
        .snowflake:nth-child(21) { left: 20%; animation-duration: 11s; }
        .snowflake:nth-child(22) { left: 30%; animation-duration: 12s; }
        .snowflake:nth-child(23) { left: 40%; animation-duration: 15s; }
        .snowflake:nth-child(24) { left: 50%; animation-duration: 16s; }
        .snowflake:nth-child(25) { left: 60%; animation-duration: 14s; }
        .snowflake:nth-child(26) { left: 70%; animation-duration: 18s; }
        .snowflake:nth-child(27) { left: 80%; animation-duration: 19s; }
        .snowflake:nth-child(28) { left: 90%; animation-duration: 10s; }
        .snowflake:nth-child(29) { left: 25%; animation-duration: 16s; }
        .snowflake:nth-child(30) { left: 35%; animation-duration: 13s; }
        .snowflake:nth-child(31) { left: 45%; animation-duration: 12s; }
        .snowflake:nth-child(32) { left: 55%; animation-duration: 15s; }
        .snowflake:nth-child(33) { left: 65%; animation-duration: 18s; }
        .snowflake:nth-child(34) { left: 75%; animation-duration: 14s; }
        .snowflake:nth-child(35) { left: 85%; animation-duration: 17s; }
        .snowflake:nth-child(36) { left: 5%; animation-duration: 13s; }
        .snowflake:nth-child(37) { left: 15%; animation-duration: 14s; }
        .snowflake:nth-child(38) { left: 25%; animation-duration: 12s; }
        .snowflake:nth-child(39) { left: 35%; animation-duration: 10s; }
        .snowflake:nth-child(40) { left: 45%; animation-duration: 16s; }
        .snowflake:nth-child(41) { left: 55%; animation-duration: 18s; }
        .snowflake:nth-child(42) { left: 65%; animation-duration: 19s; }
        .snowflake:nth-child(43) { left: 75%; animation-duration: 14s; }
        .snowflake:nth-child(44) { left: 85%; animation-duration: 13s; }
        .snowflake:nth-child(45) { left: 95%; animation-duration: 16s; }
        .snowflake:nth-child(46) { left: 5%; animation-duration: 12s; }
        .snowflake:nth-child(47) { left: 15%; animation-duration: 17s; }
        .snowflake:nth-child(48) { left: 25%; animation-duration: 14s; }
        .snowflake:nth-child(49) { left: 35%; animation-duration: 10s; }
        .snowflake:nth-child(50) { left: 45%; animation-duration: 16s; }
    </style>
</head>
<body>
    <div id="snowflakes"></div>
    <div class="container">
        <h1>Request a Game</h1>
        <input type="text" id="gameInput" maxlength="50" placeholder="Enter the game name...">
        <button id="submitButton" onclick="sendRequest()">Submit</button>
        <p id="message"></p>
    </div>

    <script>
        let isCooldown = false; // Tracks cooldown status
        const cooldownTime = 10; // Cooldown duration in seconds
        const badWords = ["Nigger", "nigger", "NIGGER", "Fuck", "fuck", "FUCK", "Pussy", "pussy", "PUSSY", "Dick", "dick", "DICK"]; // Add your bad words here

        // Snowflakes Animation
        function createSnowflakes() {
            for (let i = 0; i < 50; i++) { // Create 50 snowflakes
                let snowflake = document.createElement('div');
                snowflake.classList.add('snowflake');
                snowflake.textContent = '❄';
                snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
                snowflake.style.animationDuration = Math.random() * 5 + 10 + 's';
                snowflake.style.left = Math.random() * 100 + '%';
                snowflake.style.animationDelay = Math.random() * 5 + 's';
                document.getElementById('snowflakes').appendChild(snowflake);
            }
        }

        // Call the snowflake function to create the snow
        createSnowflakes();

        async function sendRequest() {
            const input = document.getElementById('gameInput');
            const message = document.getElementById('message');
            const button = document.getElementById('submitButton');
            const gameName = input.value.trim();

            // Clear previous message
            message.textContent = "";

            // Validate input
            if (gameName === "") {
                message.textContent = "Please write a game!";
                message.className = "error";
                return;
            }

            // Check if the input contains bad words
            if (badWords.some((word) => gameName.toLowerCase().includes(word))) {
                message.textContent = "Inappropriate content detected! Please enter a valid game.";
                message.className = "error";
                return;
            }

            // Check cooldown status
            if (isCooldown) {
                message.textContent = "Please wait for the cooldown to end.";
                message.className = "cooldown";
                return;
            }

            // Discord webhook URL
            const webhookURL = "https://discord.com/api/webhooks/1313968153281302548/nPzMb3Xi2dJK7XruyjpFlHgIUy-7w6sDMi7XZAHstZwx6HQzTlyul2puhdMrPWF_Fz6T";

            // Send the request to Discord
            try {
                await fetch(webhookURL, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        content: ` # New game request: ${gameName}🎅`
                    })
                });
                message.textContent = "Game request sent successfully!";
                message.className = "success";
                input.value = ""; // Clear input
                startCooldown(button, message);
            } catch (error) {
                message.textContent = "Error sending the request. Please try again!";
                message.className = "error";
            }
        }

        function startCooldown(button, message) {
            isCooldown = true;
            button.disabled = true;

            let timeLeft = cooldownTime;
            const cooldownInterval = setInterval(() => {
                message.textContent = `Cooldown: Please wait ${timeLeft} seconds.`;
                message.className = "cooldown";

                timeLeft--;
                if (timeLeft < 0) {
                    clearInterval(cooldownInterval);
                    message.textContent = "";
                    button.disabled = false;
                    isCooldown = false;
                }
            }, 1000);
        }
    </script>
</body>
</html>