155 lines
5.3 KiB
HTML
155 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Simple Chatbot</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
#chatbox {
|
|
border: 2px solid #4CAF50;
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
border-radius: 10px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.user {
|
|
text-align: right;
|
|
color: #2196F3;
|
|
margin: 10px 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bot {
|
|
text-align: left;
|
|
color: #4CAF50;
|
|
margin: 10px 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#userInput {
|
|
width: 70%;
|
|
padding: 10px;
|
|
border: 2px solid #4CAF50;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Simple Chatbot</h1>
|
|
|
|
<div id="chatbox"></div>
|
|
|
|
<input type="text" id="userInput" placeholder="Type your message here...">
|
|
<button onclick="sendMessage()">Send</button>
|
|
|
|
<script>
|
|
// Get the chatbox and input elements
|
|
const chatbox = document.getElementById('chatbox');
|
|
const userInput = document.getElementById('userInput');
|
|
|
|
// Function to add a message to the chatbox
|
|
function addMessage(sender, text) {
|
|
// Create a new div for the message
|
|
const messageDiv = document.createElement('div');
|
|
|
|
// Add CSS class based on sender (user or bot)
|
|
messageDiv.className = sender;
|
|
|
|
// Set the message text
|
|
messageDiv.textContent = text;
|
|
|
|
// Add the message to the chatbox
|
|
chatbox.appendChild(messageDiv);
|
|
|
|
// Scroll to the bottom to show the latest message
|
|
chatbox.scrollTop = chatbox.scrollHeight;
|
|
}
|
|
|
|
// Function to generate bot responses
|
|
function getBotResponse(userMessage) {
|
|
// Convert to lowercase for easier matching
|
|
const message = userMessage.toLowerCase();
|
|
|
|
// Check what the user said and respond accordingly
|
|
if (message.includes('hello') || message.includes('hi')) {
|
|
return "Hello! How can I help you today?";
|
|
} else if (message.includes('how are you')) {
|
|
return "I'm doing great, thanks for asking!";
|
|
} else if (message.includes('bye') || message.includes('goodbye')) {
|
|
return "Goodbye! Have a wonderful day!";
|
|
} else if (message.includes('name')) {
|
|
return "I'm a simple chatbot. You can call me ChatBot!";
|
|
} else if (message.includes('help')) {
|
|
return "I can respond to greetings, questions about how I am, and farewells. Try saying 'hello'!";
|
|
} else {
|
|
return "I'm not sure how to respond to that. Try asking something else!";
|
|
}
|
|
}
|
|
|
|
// Function to handle sending messages
|
|
function sendMessage() {
|
|
// Get the user's message
|
|
const message = userInput.value;
|
|
|
|
// Don't send empty messages
|
|
if (message.trim() === '') {
|
|
return;
|
|
}
|
|
|
|
// Add user message to chat
|
|
addMessage('user', 'You: ' + message);
|
|
|
|
// Get and add bot response
|
|
const botReply = getBotResponse(message);
|
|
addMessage('bot', 'Bot: ' + botReply);
|
|
|
|
// Clear the input field
|
|
userInput.value = '';
|
|
|
|
// Focus back on the input for the next message
|
|
userInput.focus();
|
|
}
|
|
|
|
// Allow sending messages by pressing Enter key
|
|
userInput.addEventListener('keypress', function(event) {
|
|
if (event.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// Add a welcome message when the page loads
|
|
window.onload = function() {
|
|
addMessage('bot', 'Bot: Hello! I am a simple chatbot. Try saying "hello" or "how are you?"');
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
</html> |