mosix7/mosresearch
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>AI Assistant Model</title>7 <style>8 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #343541; color: #ececf1; margin: 0; display: flex; flex-direction: column; height: 100vh; }9 .header { background-color: #202123; padding: 15px 20px; text-align: center; border-bottom: 1px solid #4d4d4f; font-weight: bold; font-size: 1.1em; }10 .chat-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }11 .message { display: flex; max-width: 800px; margin: 0 auto; width: 100%; line-height: 1.6; }12 .user-msg { justify-content: flex-end; }13 .ai-msg { justify-content: flex-start; }14 .bubble { padding: 15px 20px; border-radius: 8px; max-width: 80%; }15 .user-msg .bubble { background-color: #10a37f; color: white; }16 .ai-msg .bubble { background-color: #444654; }17 .input-area { background-color: #343541; padding: 20px; border-top: 1px solid #4d4d4f; display: flex; justify-content: center; }18 .input-box { display: flex; width: 100%; max-width: 800px; background-color: #40414f; border-radius: 8px; padding: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.1); }19 input { flex: 1; background: transparent; border: none; color: white; padding: 10px; font-size: 1em; outline: none; }20 button { background-color: transparent; border: none; color: #10a37f; cursor: pointer; padding: 10px; font-size: 1.2em; }21 button:hover { opacity: 0.8; }22 .status { text-align: center; font-size: 0.8em; color: #8e8ea0; margin-top: 10px; }23 </style>24</head>25<body>26 <div class="header">ChatBot AI - Demo Space</div>27 <div class="chat-container" id="chat">28 <div class="message ai-msg">29 <div class="bubble">Hello! I am an AI language model demo. How can I help you today?</div>30 </div>31 </div>32 <div class="input-area">33 <div style="width: 100%; max-width: 800px; text-align: center;">34 <div class="input-box">35 <input type="text" id="userInput" placeholder="Send a message..." onkeypress="handlePress(event)">36 <button onclick="sendMessage()">➤</button>37 </div>38 <div class="status">AI model may produce inaccurate information.</div>39 </div>40 </div>41 42 <script>43 function sendMessage() {44 const input = document.getElementById('userInput');45 const chat = document.getElementById('chat');46 if (input.value.trim() === '') return;47 48 // Add user message49 const userDiv = document.createElement('div');50 userDiv.className = 'message user-msg';51 userDiv.innerHTML = `<div class="bubble">${input.value}</div>`;52 chat.appendChild(userDiv);53 54 const originalInput = input.value;55 input.value = '';56 chat.scrollTop = chat.scrollHeight;57 58 // Fake AI response delay59 setTimeout(() => {60 const aiDiv = document.createElement('div');61 aiDiv.className = 'message ai-msg';62 aiDiv.innerHTML =mn; height: 100vh; }63 .header { background-color: #202123; padding: 15px 20px; text-align: center; b64 chat.appendChild(aiDiv);65 chat.scrollTop = chat.scrollHeight;66 }, 1000);67 }68 function handlePress(e) { if (e.key === 'Enter') sendMessage(); }69 </script>70</body>71</html>