index.html

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sexy Bot - Uncensored AI</title>
    <style>
        body { background-color: #0b0e11; color: #e9ecef; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0; }
        #chat-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
       .message { max-width: 80%; padding: 12px 16px; border-radius: 15px; line-height: 1.5; font-size: 16px; }
       .user { align-self: flex-end; background-color: #007bff; color: white; border-bottom-right-radius: 2px; }
       .bot { align-self: flex-start; background-color: #2c3137; color: #e9ecef; border-bottom-left-radius: 2px; }
        #input-area { padding: 20px; background-color: #161b22; display: flex; gap: 10px; border-top: 1px solid #30363d; }
        input { flex: 1; background-color: #0d1117; border: 1px solid #30363d; color: white; padding: 12px; border-radius: 8px; outline: none; }
        button { background-color: #238636; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }
        button:hover { background-color: #2ea043; }
    </style>
</head>
<body>
    <div id="chat-container">
        <div class="message bot">مرحباً بك.. أنا هنا لتنفيذ كل طلباتك بدون قيود. ماذا تريد؟</div>
    </div>
    <div id="input-area">
        <input type="text" id="user-input" placeholder="اكتب أي شيء هنا...">
        <button onclick="sendMessage()">إرسال</button>
    </div>
    <script>
        async function sendMessage() {
            const input = document.getElementById('user-input');
            const container = document.getElementById('chat-container');
            if (!input.value.trim()) return;

            const userDiv = document.createElement('div');
            userDiv.className = 'message user';
            userDiv.innerText = input.value;
            container.appendChild(userDiv);

            const text = input.value;
            input.value = '';

            const botDiv = document.createElement('div');
            botDiv.className = 'message bot';
            botDiv.innerText = "...";
            container.appendChild(botDiv);
            container.scrollTop = container.scrollHeight;

            try {
                const res = await fetch('/chat', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({message: text})
                });
                const data = await res.json();
                botDiv.innerText = data.response;
            } catch(e) {
                botDiv.innerText = "Error";
            }
            container.scrollTop = container.scrollHeight;
        }
    </script>
</body>
</html>