Ai #91
Description
<title>My AI Assistant</title> <style> body { margin: 0; font-family: Arial, sans-serif; background: #0f172a; display: flex; justify-content: center; align-items: center; height: 100vh; } .chat-container { width: 400px; height: 600px; background: #1e293b; border-radius: 15px; display: flex; flex-direction: column; overflow: hidden; } .header { background: #2563eb; padding: 15px; text-align: center; font-weight: bold; color: white; } .chat-box { flex: 1; padding: 10px; overflow-y: auto; } .message { margin: 10px 0; padding: 10px; border-radius: 10px; max-width: 75%; } .user { background: #3b82f6; align-self: flex-end; } .bot { background: #334155; align-self: flex-start; } .input-box { display: flex; border-top: 1px solid #444; } input { flex: 1; padding: 10px; border: none; outline: none; } button { padding: 10px 15px; border: none; background: #2563eb; color: white; cursor: pointer; } button:hover { background: #1d4ed8; } </style> <script> function sendMessage() { const input = document.getElementById("userInput"); const chatBox = document.getElementById("chatBox"); if (input.value.trim() === "") return; const userMsg = document.createElement("div"); userMsg.className = "message user"; userMsg.textContent = input.value; chatBox.appendChild(userMsg); const botMsg = document.createElement("div"); botMsg.className = "message bot"; botMsg.textContent = getBotReply(input.value); chatBox.appendChild(botMsg); input.value = ""; chatBox.scrollTop = chatBox.scrollHeight; } function getBotReply(message) { const msg = message.toLowerCase(); if (msg.includes("hello")) return "Hello! How can I help you?"; if (msg.includes("how are you")) return "I'm just code, but I'm running perfectly!"; retu
My AI Assistant 🤖
Send