Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Medibot · Medical Assistant</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}?v=7"/> | |
| </head> | |
| <body> | |
| <div class="dashboard"> | |
| <!-- LEFT: brand / status panel --> | |
| <aside class="panel"> | |
| <div class="panel_top"> | |
| <div class="brand"> | |
| <span class="brand_mark"><i class="fas fa-heartbeat"></i></span> | |
| <span class="brand_name">Medi<span>bot</span></span> | |
| </div> | |
| </div> | |
| <div class="panel_avatar"> | |
| <div class="avatar_ring"> | |
| <i class="fas fa-user-md avatar_img"></i> | |
| <span class="avatar_status"></span> | |
| </div> | |
| <h2>Medibot Assistant</h2> | |
| <p class="role">AI Medical Assistant</p> | |
| <div class="status_chip"><span class="dot"></span>Online · Ready to help</div> | |
| </div> | |
| <p class="panel_desc"> | |
| Ask about symptoms, conditions, medications, or general health guidance. Responses are generated by an AI model trained on medical literature. | |
| </p> | |
| <div class="panel_stats"> | |
| <div class="stat"> | |
| <i class="fas fa-bolt"></i> | |
| <div><span>Instant</span><small>Response time</small></div> | |
| </div> | |
| <div class="stat"> | |
| <i class="fas fa-shield-alt"></i> | |
| <div><span>Private</span><small>No data stored</small></div> | |
| </div> | |
| </div> | |
| <div class="panel_footer"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <span>Not a substitute for professional medical advice. In an emergency, contact a doctor.</span> | |
| </div> | |
| </aside> | |
| <!-- RIGHT: chat area --> | |
| <main class="chat"> | |
| <header class="chat_head"> | |
| <div class="chat_head_left"> | |
| <span>Conversation</span> | |
| <p>Secure session · AI-generated responses</p> | |
| </div> | |
| <div class="chat_head_right"><i class="fas fa-ellipsis-v"></i></div> | |
| </header> | |
| <div id="messageFormeight" class="msg_card_body"> | |
| <div class="welcome_block"> | |
| <div class="welcome_icon"><i class="fas fa-stethoscope"></i></div> | |
| <h3>Welcome to Medibot</h3> | |
| <p>Start by describing your symptoms or asking a health-related question below.</p> | |
| </div> | |
| </div> | |
| <div class="card-footer"> | |
| <form id="messageArea" class="input-group"> | |
| <input type="text" id="text" name="msg" placeholder="Describe your symptoms or ask a question..." autocomplete="off" class="type_msg" required/> | |
| <button type="submit" id="send" class="send_btn"><i class="fas fa-paper-plane"></i></button> | |
| </form> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| $("#messageArea").on("submit", function(event) { | |
| const date = new Date(); | |
| const hour = date.getHours(); | |
| const minute = date.getMinutes(); | |
| const str_time = hour+":"+minute; | |
| var rawText = $("#text").val(); | |
| var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">'+ str_time + '</span></div><div class="img_cont_msg user_avatar"><i class="fas fa-user"></i></div></div>'; | |
| $("#text").val(""); | |
| $("#messageFormeight").append(userHtml); | |
| $("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight); | |
| var typingHtml = '<div class="d-flex justify-content-start mb-4 typing_row" id="typingIndicator"><div class="img_cont_msg bot_avatar"><i class="fas fa-user-md"></i></div><div class="msg_cotainer typing_dots"><span></span><span></span><span></span></div></div>'; | |
| $("#messageFormeight").append(typingHtml); | |
| $("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight); | |
| $.ajax({ | |
| data: { | |
| msg: rawText, | |
| }, | |
| type: "POST", | |
| url: "/get", | |
| }).done(function(data) { | |
| $("#typingIndicator").remove(); | |
| var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg bot_avatar"><i class="fas fa-user-md"></i></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>'; | |
| $("#messageFormeight").append($.parseHTML(botHtml)); | |
| $("#messageFormeight").scrollTop($("#messageFormeight")[0].scrollHeight); | |
| }); | |
| event.preventDefault(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |