|
--- |
|
license: artistic-2.0 |
|
--- |
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>ChatBot</title> |
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.css" rel="stylesheet" type="text/css" /> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
</head> |
|
<body class="bg-gray-100 h-screen flex items-center justify-center"> |
|
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md"> |
|
<h1 class="text-2xl font-bold mb-4 text-center">Your Friendly ChatBot</h1> |
|
<div id="chatbox" class="chat chat-start h-96 overflow-y-auto mb-4"></div> |
|
<div class="flex"> |
|
<input type="text" id="inputMessage" placeholder="Type your message here..." class="input input-bordered flex-grow"> |
|
<button id="sendMessage" class="btn btn-primary ml-2">Send</button> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
var inputMessage = document.getElementById("inputMessage"); |
|
var sendMessage = document.getElementById("sendMessage"); |
|
var chatbox = document.getElementById("chatbox"); |
|
|
|
sendMessage.addEventListener("click", function() { |
|
var message = inputMessage.value; |
|
if (message.trim() !== "") { |
|
sendMessageToChat(message, "user"); |
|
inputMessage.value = ""; |
|
sendMessageToChat("Sorry, the chatbot is unavailable at the moment. Please try again later.", "assistant"); |
|
} |
|
}); |
|
|
|
function sendMessageToChat(message, role) { |
|
var messageElement = document.createElement("div"); |
|
messageElement.classList.add("chat-bubble", role === "user" ? "chat-bubble-primary" : "chat-bubble-secondary"); |
|
messageElement.innerHTML = "<p><strong>" + role + ":</strong> " + message + "</p>"; |
|
chatbox.appendChild(messageElement); |
|
chatbox.scrollTop = chatbox.scrollHeight; |
|
} |
|
</script> |
|
</body> |
|
</html> |
