| | <!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"> |
| | |
| | </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> |
| |
|
