| <!DOCTYPE html> |
| <html> |
|
|
| <head> |
| <title>Student Support Chatbot</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
| <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}" /> |
| </head> |
|
|
| <body> |
| <div class="chat-container"> |
| <header class="chat-header"> |
| <div class="bot-info"> |
| <div class="avatar-container"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" class="bot-avatar" |
| alt="Student Bot"> |
| <span class="status-indicator"></span> |
| </div> |
| <div class="text-info"> |
| <h1>Student Support Assistant</h1> |
| <p>Ask me anything about college & academics</p> |
| </div> |
| </div> |
| <span class="header-badge">🎓 AI Powered</span> |
| </header> |
|
|
| <main id="chat-box" class="chat-box"> |
| <div class="message bot-message intro-animation"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" class="avatar" alt="Bot"> |
| <div class="message-content"> |
| <p>Hello! I am your Student Support Assistant 🎓 Ask me anything about admissions, courses, fees, or campus life!</p> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="chat-footer"> |
| <form id="messageArea" class="input-form"> |
| <input type="text" id="text" name="msg" placeholder="Type your message here..." autocomplete="off" |
| required> |
| <button type="submit" id="send"><i class="fas fa-paper-plane"></i></button> |
| </form> |
| </footer> |
| </div> |
|
|
| <script> |
| $(document).ready(function () { |
| const chatBox = $('#chat-box'); |
| |
| function scrollToBottom() { |
| chatBox.animate({ scrollTop: chatBox.prop("scrollHeight") }, 300); |
| } |
| |
| function formatTime() { |
| const date = new Date(); |
| let hours = date.getHours(); |
| let minutes = date.getMinutes(); |
| const ampm = hours >= 12 ? 'PM' : 'AM'; |
| hours = hours % 12; |
| hours = hours ? hours : 12; |
| minutes = minutes < 10 ? '0' + minutes : minutes; |
| return hours + ':' + minutes + ' ' + ampm; |
| } |
| |
| function showTypingIndicator() { |
| const html = ` |
| <div class="message bot-message typing-indicator slide-in" id="typing"> |
| <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" class="avatar" alt="Bot"> |
| <div class="message-content"> |
| <div class="typing-dots"> |
| <span></span><span></span><span></span> |
| </div> |
| </div> |
| </div>`; |
| chatBox.append(html); |
| scrollToBottom(); |
| } |
| |
| function removeTypingIndicator() { |
| $('#typing').remove(); |
| } |
| |
| $("#messageArea").on("submit", function (event) { |
| event.preventDefault(); |
| |
| const rawText = $("#text").val().trim(); |
| if (!rawText) return; |
| |
| const time = formatTime(); |
| const userHtml = ` |
| <div class="message user-message slide-in"> |
| <div class="message-content"> |
| <p>${rawText}</p> |
| <span class="time">${time}</span> |
| </div> |
| <img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="avatar" alt="User"> |
| </div>`; |
| |
| $("#text").val(""); |
| chatBox.append(userHtml); |
| scrollToBottom(); |
| showTypingIndicator(); |
| |
| $.ajax({ |
| data: { msg: rawText }, |
| type: "POST", |
| url: "/get", |
| }).done(function (data) { |
| removeTypingIndicator(); |
| const botHtml = ` |
| <div class="message bot-message slide-in"> |
| <img src="https://cdn-icons-png.flaticon.com/512/387/387569.png" class="avatar" alt="Bot"> |
| <div class="message-content"> |
| <p>${data}</p> |
| <span class="time">${formatTime()}</span> |
| </div> |
| </div>`; |
| chatBox.append(botHtml); |
| scrollToBottom(); |
| }).fail(function (jqXHR) { |
| removeTypingIndicator(); |
| let errorMessage = "Sorry, I am currently facing an internal error. Please check your API keys or try again later."; |
| if (jqXHR.responseText) { |
| errorMessage = jqXHR.responseText; |
| } |
| const errorHtml = ` |
| <div class="message bot-message error-message slide-in"> |
| <img src="https://cdn-icons-png.flaticon.com/512/387/387569.png" class="avatar" alt="Bot"> |
| <div class="message-content"> |
| <p><i class="fas fa-exclamation-triangle"></i> ${errorMessage}</p> |
| </div> |
| </div>`; |
| chatBox.append(errorHtml); |
| scrollToBottom(); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
|
|
| </html> |
