| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Shanin Portfolio</title> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <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"> |
| </head> |
| <body class="bg-gradient-to-br from-gray-900 via-slate-900 to-gray-800 text-gray-200 font-poppins"> |
|
|
| <div class="flex justify-center items-center h-screen p-4"> |
| <div class="flex flex-col w-full max-w-xl h-[650px] bg-slate-800/60 border border-slate-700 rounded-2xl shadow-xl overflow-hidden"> |
|
|
| |
| <div class="flex justify-between items-center px-5 py-4 bg-slate-900/70 border-b border-slate-700"> |
| <div class="flex items-center"> |
| <img src="/static/icon.png" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-cyan-400 mr-4"> |
| <div> |
| <h5 class="text-white text-lg font-semibold">💬 Aiyub's Medical Assistant</h5> |
| <p class="text-gray-400 text-sm">Ask me anything about my work!</p> |
| </div> |
| </div> |
| <button class="text-cyan-400 hover:text-cyan-300 border-0 p-0"> |
| <i class="fas fa-arrow-left"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="messageFormeight" class="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-950/50 scroll-smooth"></div> |
|
|
| |
| <div class="border-t border-slate-700 bg-slate-900/70 p-4"> |
| <form id="messageArea" class="flex items-center space-x-3"> |
| <input type="text" id="text" name="msg" placeholder="Type a message..." required |
| class="flex-1 px-4 py-3 rounded-full bg-slate-800 border border-cyan-500/40 focus:outline-none focus:ring-2 focus:ring-cyan-400 text-gray-100 placeholder-gray-400"> |
| <button type="submit" class="bg-cyan-500 hover:bg-cyan-400 transition rounded-full p-3 text-white"> |
| <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> |
| $(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 flex justify-end"> |
| <div class="msg-text bg-cyan-500 text-white p-3 rounded-2xl relative shadow-sm max-w-[80%]"> |
| ${rawText} |
| <span class="absolute text-[10px] text-white/50 bottom-[-15px] right-2">${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 flex justify-start"> |
| <div class="msg-text bg-slate-800/80 text-gray-200 p-3 rounded-2xl relative shadow-sm border border-slate-700 max-w-[80%]"> |
| ${data} |
| <span class="absolute text-[10px] text-white/50 bottom-[-15px] right-2">${str_time}</span> |
| </div> |
| </div>`; |
| $("#messageFormeight").append(botHtml).scrollTop($("#messageFormeight")[0].scrollHeight); |
| }); |
| }); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
|
|
