Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="A simple chatbot application built with HTML, CSS, and vanilla JavaScript."> | |
| <meta name="keywords" content="chatbot, AI, simple bot"> | |
| <title>Simple Chatbot</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Simple Chatbot</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </header> | |
| <main> | |
| <div id="chat-container"> | |
| <div id="chat-messages"> | |
| <div class="message bot">Bot: Hello! How can I help you today?</div> | |
| </div> | |
| <div id="input-area"> | |
| <input type="text" id="user-input" placeholder="Type your message..."> | |
| <button id="send-button">Send</button> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>© 2023 Simple Chatbot. All rights reserved.</p> | |
| </footer> | |
| <script src="assets/js/chatbot.js"></script> | |
| </body> | |
| </html> | |
| === assets/css/styles.css === | |
| /* Mobile-first responsive design */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| background-color: #f4f4f4; | |
| } | |
| header { | |
| background-color: #333; | |
| color: white; | |
| text-align: center; | |
| padding: 1rem; | |
| } | |
| header h1 { | |
| margin: 0; | |
| } | |
| header a { | |
| color: #4CAF50; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| margin-top: 0.5rem; | |
| display: block; | |
| } | |
| header a:hover { | |
| text-decoration: underline; | |
| } | |
| main { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| #chat-container { | |
| width: 100%; | |
| max-width: 600px; | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| height: 80vh; | |
| } | |
| #chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .message { | |
| margin-bottom: 1rem; | |
| padding: 0.5rem; | |
| border-radius: 4px; | |
| } | |
| .message.user { | |
| background-color: #4CAF50; | |
| color: white; | |
| text-align: right; | |
| } | |
| .message.bot { | |
| background-color: #e0e0e0; | |
| color: #333; | |
| } | |
| #input-area { | |
| display: flex; | |
| padding: 1rem; | |
| } | |
| #user-input { | |
| flex: 1; | |
| padding: 0.5rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px 0 0 4px; | |
| outline: none; | |
| } | |
| #send-button { | |
| padding: 0.5rem 1rem; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 0 4px 4px 0; | |
| cursor: pointer; | |
| } | |
| #send-button:hover { | |
| background-color: #45a049; | |
| } | |
| footer { | |
| background-color: #333; | |
| color: white; | |
| text-align: center; | |
| padding: 1rem; | |
| margin-top: auto; | |
| } | |
| /* Responsive adjustments */ | |
| @media (min-width: 768px) { | |
| #chat-container { | |
| height: 70vh; | |
| } | |
| } | |
| === assets/js/chatbot.js === | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| // Simple response logic | |
| function getBotResponse(message) { | |
| message = message.toLowerCase(); | |
| if (message.includes('hello') || message.includes('hi')) { | |
| return 'Bot: Hi there! How can I assist you?'; | |
| } else if (message.includes('how are you')) { | |
| return 'Bot: I\'m doing well, thank you! What about you?'; | |
| } else if (message.includes('bye') || message.includes('goodbye')) { | |
| return 'Bot: Goodbye! Have a great day!'; | |
| } else { | |
| return 'Bot: Sorry, I didn\'t understand that. Can you try rephrasing?'; | |
| } | |
| } | |
| // Function to add message to chat | |
| function addMessage(text, className) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${className}`; | |
| messageDiv.textContent = text; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; // Auto-scroll to bottom | |
| } | |
| // Send message function | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addMessage(`You: ${message}`, 'user'); | |
| userInput.value = ''; | |
| // Simulate bot response after a short delay | |
| setTimeout(() => { | |
| const response = getBotResponse(message); | |
| addMessage(response, 'bot'); | |
| }, 500); | |
| } | |
| } | |
| // Event listeners | |
| sendButton.addEventListener('click', sendMessage); | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| }); |