78 lines
3.6 KiB
PHP
78 lines
3.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chatbot</title>
|
|
<style>
|
|
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f2f5; }
|
|
#chat-container { width: 400px; height: 600px; border: 1px solid #ccc; border-radius: 8px; display: flex; flex-direction: column; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
|
|
#chat-log { flex-grow: 1; padding: 10px; overflow-y: auto; border-bottom: 1px solid #ccc; }
|
|
#chat-input-container { display: flex; padding: 10px; }
|
|
#chat-input { flex-grow: 1; border: 1px solid #ccc; border-radius: 4px; padding: 8px; }
|
|
#send-button { margin-left: 10px; padding: 8px 12px; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; }
|
|
.message { margin-bottom: 10px; padding: 8px 12px; border-radius: 18px; max-width: 70%; word-wrap: break-word; }
|
|
.user-message { background-color: #007bff; color: white; align-self: flex-end; margin-left: auto; }
|
|
.bot-message { background-color: #e9e9eb; color: black; align-self: flex-start; }
|
|
.chat-log-inner { display: flex; flex-direction: column; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chat-container">
|
|
<div id="chat-log">
|
|
<div class="chat-log-inner"></div>
|
|
</div>
|
|
<div id="chat-input-container">
|
|
<input type="text" id="chat-input" placeholder="Type a message...">
|
|
<button id="send-button">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const chatLog = document.querySelector('#chat-log .chat-log-inner');
|
|
const chatInput = document.getElementById('chat-input');
|
|
const sendButton = document.getElementById('send-button');
|
|
|
|
const appendMessage = (text, sender) => {
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('message', sender + '-message');
|
|
messageElement.textContent = text;
|
|
chatLog.appendChild(messageElement);
|
|
chatLog.parentElement.scrollTop = chatLog.parentElement.scrollHeight;
|
|
};
|
|
|
|
const sendMessage = async () => {
|
|
const messageText = chatInput.value.trim();
|
|
if (messageText === '') return;
|
|
|
|
appendMessage(messageText, 'user');
|
|
chatInput.value = '';
|
|
|
|
try {
|
|
const response = await fetch('chatbot_api.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: messageText })
|
|
});
|
|
const data = await response.json();
|
|
const botResponse = data.reply || 'Sorry, I could not understand.';
|
|
appendMessage(botResponse, 'bot');
|
|
} catch (error)
|
|
console.error('Error:', error);
|
|
appendMessage('Sorry, something went wrong.', 'bot');
|
|
}
|
|
};
|
|
|
|
sendButton.addEventListener('click', sendMessage);
|
|
chatInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
appendMessage("Hello! I'm a chatbot. How can I help you today?", "bot");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |