<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Bot</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
#chat-container {
width: 450px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
#chat-log {
height: 350px;
overflow-y: scroll;
}
.user-message {
background-color: #cce5ff;
text-align: right;
animation: slideInRight 0.5s ease;
}
.bot-message {
background-color: #d4edda;
text-align: left;
animation: slideInLeft 0.5s ease;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
</style>
</head>
<body>
<div id="chat-container" class="container mt-5">
<div id="chat-log" class="mb-3"></div>
<div class="input-group mb-3">
<input type="text" id="user-input" class="form-control" placeholder="Type your message..." onkeypress="return handleKeyPress(event)">
<div class="input-group-append">
<button onclick="sendMessage()" class="btn btn-primary">Send</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
const chatLog = document.getElementById('chat-log');
const userInput = document.getElementById('user-input');
function sendMessage() {
const userMessage = userInput.value;
if (userMessage.trim() === '') return;
appendMessage('You', userMessage, 'user-message');
const botResponse = generateBotResponse(userMessage);
setTimeout(() => {
appendMessage('Bot', botResponse, 'bot-message');
}, 1000);
userInput.value = '';
}
function handleKeyPress(event) {
if (event.keyCode === 13) {
sendMessage();
return false;
}
}
function appendMessage(sender, message, className) {
const messageElement = document.createElement('div');
messageElement.textContent = `${sender}: ${message}`;
messageElement.classList.add('alert', className);
chatLog.appendChild(messageElement);
chatLog.scrollTop = chatLog.scrollHeight;
}
function generateBotResponse(userMessage) {
}
</script>
</body>
</html>
.webp)
