<html><head><base href="." />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>discord webhook</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container {
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 400px;
}

.input-group {
    margin-bottom: 1rem;
}

.warning {
    color: #666666;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    text-align: center;
    line-height: 1.4;
}

.discord-link {
    color: #5865f2;
    text-decoration: none;
    font-size: 0.85rem;
    text-align: center;
    display: block;
    margin-top: 1rem;
    transition: color 0.2s ease;
}

.discord-link:hover {
    color: #4752c4;
    text-decoration: underline;
}

textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1.5px solid #e1e1e1;
    border-radius: 12px;
    background: #ffffff;
    color: #333333;
    resize: vertical;
    min-height: 100px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: #5865f2;
}

button {
    width: 100%;
    padding: 0.75rem;
    background: #5865f2;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

button:hover {
    background: #4752c4;
    transform: translateY(-1px);
}

button:disabled {
    background: #e1e1e1;
    cursor: not-allowed;
    transform: none;
}

.status {
    margin-top: 1rem;
    text-align: center;
    color: #666666;
    font-size: 0.9rem;
}

::placeholder {
    color: #999999;
    text-transform: lowercase;
}

.popup {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #ffffff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
    z-index: 1000;
    max-width: 300px;
}

.popup-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.popup-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.popup-text {
    color: #333333;
    font-size: 0.9rem;
}

.popup-username {
    font-weight: 600;
    color: #5865f2;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
</style>
</head>
<body>
    <div class="container">
        <div class="warning">
            these messages are sent to a discord server, please do not abuse
        </div>
        <div class="input-group">
            <textarea id="messageInput" placeholder="enter your message..."></textarea>
        </div>
        <button id="sendButton" onclick="sendMessage()">send message</button>
        <div id="status" class="status"></div>
        <a href="https://discord.gg/M6hP5hZprd" target="_blank" class="discord-link">discord server of the chaos: https://discord.gg/M6hP5hZprd</a>
    </div>

    <script>
        const webhookURL = 'https://discord.com/api/webhooks/1316133008683831368/3aXU1bYB4ifgrolAtpd_pOqms4TJTS0-WK9mr7cgcDjLROWVbq9GSe_kVsUCOW_gOZth';
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');
        const status = document.getElementById('status');

        // Initialize WebsimSocket for multiplayer
        const room = new WebsimSocket();

        function showPopup(username, avatarUrl, message) {
            const popup = document.createElement('div');
            popup.className = 'popup';
            
            popup.innerHTML = `
                <div class="popup-content">
                    <img src="${avatarUrl}" alt="${username}" class="popup-avatar">
                    <div class="popup-text">
                        <span class="popup-username">${username}</span>: ${message}
                    </div>
                </div>
            `;
            
            document.body.appendChild(popup);
            
            // Remove popup after animation completes
            setTimeout(() => {
                popup.remove();
            }, 3000);
        }

        function containsBlacklistedContent(message) {
            // Check for @everyone, @here, or <@...> pattern
            return message.includes('@everyone') || 
                   message.includes('@here') || 
                   /<@.*?>/.test(message);
        }

        async function sendMessage() {
            let message = messageInput.value.trim();
            
            if (!message) {
                status.textContent = 'please enter a message';
                return;
            }

            // Check for blacklisted content
            if (containsBlacklistedContent(message)) {
                status.textContent = 'blacklisted message❌';
                return;
            }

            sendButton.disabled = true;
            status.textContent = 'sending...';

            try {
                const response = await fetch(webhookURL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        content: `(websim) ${room.party.client.username}: ${message}`
                    })
                });

                if (response.ok) {
                    status.textContent = 'message sent successfully!';
                    messageInput.value = '';
                    
                    // Notify other users about the message
                    room.send({
                        type: 'message_sent',
                        message: message
                    });

                    // Show popup for own message
                    showPopup(
                        room.party.client.username,
                        `https://images.websim.ai/avatar/${room.party.client.username}`,
                        message
                    );
                } else {
                    throw new Error('failed to send message');
                }
            } catch (error) {
                status.textContent = 'error sending message. please try again.';
                console.error('Error:', error);
            } finally {
                sendButton.disabled = false;
            }
        }

        // Listen for messages from other users
        room.onmessage = (event) => {
            const data = event.data;
            if (data.type === 'message_sent') {
                console.log(`${data.username} sent a message: ${data.message}`);
                // Show popup for other users' messages
                showPopup(
                    data.username,
                    `https://images.websim.ai/avatar/${data.username}`,
                    data.message
                );
            }
        };

        // Handle peer updates
        room.party.subscribe((peers) => {
            console.log('Connected users:', Object.values(peers).map(peer => peer.username));
        });

        messageInput.addEventListener('keydown', (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>