File size: 3,014 Bytes
b4f404b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aiyub's Medicalbot</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="chat-container d-flex justify-content-center align-items-center vh-100">
<div class="chat-box shadow-lg">
<div class="chat-header d-flex align-items-center p-3">
<img src="/static/icon.png" class="chat-avatar me-3">
<div>
<h5 class="mb-0">Aiyub's Medicalbot</h5>
<small class="text-light">Ask me anything about me!</small>
</div>
</div>
<div id="messageFormeight" class="chat-body p-3">
<!-- Messages will appear here -->
</div>
<div class="chat-footer p-3">
<form id="messageArea" class="d-flex">
<input type="text" id="text" name="msg" class="form-control me-2" placeholder="Type a message..." required>
<button type="submit" class="btn btn-accent"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
$("#messageArea").on("submit", function(event) {
event.preventDefault();
const date = new Date();
const str_time = date.getHours().toString().padStart(2,'0') + ":" + date.getMinutes().toString().padStart(2,'0');
const rawText = $("#text").val();
$("#text").val("");
const userHtml = `
<div class="message user-message mb-3 d-flex justify-content-end">
<div class="msg-text bg-accent text-white p-3 rounded-4">
${rawText} <span class="time">${str_time}</span>
</div>
</div>`;
$("#messageFormeight").append(userHtml).scrollTop($("#messageFormeight")[0].scrollHeight);
$.post("/get", { msg: rawText }, function(data) {
const botHtml = `
<div class="message bot-message mb-3 d-flex justify-content-start">
<div class="msg-text bg-dark-light text-light p-3 rounded-4">
${data} <span class="time">${str_time}</span>
</div>
</div>`;
$("#messageFormeight").append(botHtml).scrollTop($("#messageFormeight")[0].scrollHeight);
});
});
});
</script>
</body>
</html>
|