<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Form</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f9; }
        .container { max-width: 600px; margin: 50px auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
        h1 { text-align: center; color: #333; }
        label { display: block; margin: 15px 0 5px; font-weight: bold; }
        input, textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; }
        button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
        button:hover { background-color: #45a049; }
        .message { text-align: center; margin-top: 10px; font-weight: bold; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Application Form</h1>
        <form id="application-form">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" placeholder="Your full name" required>

            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Your email" required>

            <label for="application">Application</label>
            <textarea id="application" name="application" rows="6" placeholder="Why are you applying?" required></textarea>

            <button type="submit">Submit</button>
            <div id="message" class="message"></div>
        </form>
    </div>
    <script>
        document.getElementById('application-form').addEventListener('submit', async function (e) {
            e.preventDefault();

            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const application = document.getElementById('application').value;

            const webhookURL = 'https://discord.com/api/webhooks/1318421851281821746/wQ6vRwLVRAmYybR4c6RLGEixdLEiHwVmEftkqw7v0Px3XT_e1kyIUY8GX5RFkeLXdlBR'; // Replace this with your webhook URL

            const payload = {
                content: `**New Application Submission**\n**Name:** ${name}\n**Email:** ${email}\n**Application:**\n${application}`
            };

            const messageBox = document.getElementById('message');

            try {
                const response = await fetch(webhookURL, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });

                if (response.ok) {
                    messageBox.textContent = "Application sent successfully!";
                    messageBox.style.color = "green";
                    document.getElementById('application-form').reset();
                } else {
                    throw new Error("Failed to send application.");
                }
            } catch (error) {
                console.error("Error:", error);
                messageBox.textContent = "Error: Could not send the application.";
                messageBox.style.color = "red";
            }
        });
    </script>
</body>
</html>