| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SASTRA University Chatbot</title> |
| |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> |
| <link rel="icon" href="https://www.sastra.edu/favicon.ico"> |
| </head> |
| <body> |
| |
| <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> |
| <div class="container"> |
| <a class="navbar-brand" href="/"> |
| <img src="https://www.sastra.edu/images/logo.png" alt="SASTRA Logo" height="40" class="d-inline-block align-text-top me-2"> |
| SASTRA University Chatbot |
| </a> |
| <div class="navbar-nav ms-auto"> |
| <a href="/admin" class="nav-link"> |
| <i class="fas fa-cog"></i> Admin |
| </a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="container mt-4"> |
| <div class="row"> |
| <div class="col-md-12"> |
| |
| <div class="card mb-4 border-primary"> |
| <div class="card-header bg-primary text-white"> |
| <h5 class="mb-0"> |
| <i class="fas fa-university me-2"></i>Welcome to SASTRA University Assistant |
| </h5> |
| </div> |
| <div class="card-body"> |
| <p class="mb-1">Ask me about admissions, academics, placements, facilities, and more!</p> |
| <small class="text-muted">I can respond in multiple languages using the dropdown below.</small> |
| </div> |
| </div> |
|
|
| |
| <div class="card chat-container"> |
| <div class="card-header bg-white border-bottom"> |
| <div class="d-flex justify-content-between align-items-center"> |
| <h5 class="mb-0"> |
| <i class="fas fa-robot me-2 text-primary"></i>Chat Assistant |
| </h5> |
| <div class="language-selector"> |
| <select id="languageSelect" class="form-select form-select-sm"> |
| <option value="en">English</option> |
| <option value="ta">தமிழ் (Tamil)</option> |
| <option value="te">తెలుగు (Telugu)</option> |
| <option value="kn">ಕನ್ನಡ (Kannada)</option> |
| <option value="hi">हिन्दी (Hindi)</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="card-body chat-body" id="chatMessages"> |
| |
| <div class="message bot-message"> |
| <div class="message-content"> |
| <strong>SASTRA Bot:</strong> Hello! I'm your SASTRA University assistant. How can I help you today? |
| </div> |
| <div class="message-time text-muted"> |
| Just now |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="card-footer bg-light"> |
| <div class="input-group"> |
| <input type="text" id="userInput" class="form-control" |
| placeholder="Type your question here..." |
| onkeypress="handleKeyPress(event)"> |
| <button class="btn btn-primary" id="sendButton" onclick="sendMessage()"> |
| <i class="fas fa-paper-plane"></i> Send |
| </button> |
| <button class="btn btn-outline-secondary" onclick="clearChat()"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| <small class="text-muted mt-2 d-block"> |
| <i class="fas fa-info-circle"></i> Press Enter to send, Shift+Enter for new line |
| </small> |
| </div> |
| </div> |
|
|
| |
| <div class="card mt-4"> |
| <div class="card-header"> |
| <h6 class="mb-0"> |
| <i class="fas fa-lightbulb me-2"></i>Try asking: |
| </h6> |
| </div> |
| <div class="card-body"> |
| <div class="row"> |
| <div class="col-md-4"> |
| <button class="btn btn-outline-primary btn-sm mb-2 w-100" onclick="quickQuestion(this)"> |
| What are the admission requirements? |
| </button> |
| </div> |
| <div class="col-md-4"> |
| <button class="btn btn-outline-primary btn-sm mb-2 w-100" onclick="quickQuestion(this)"> |
| Tell me about placements |
| </button> |
| </div> |
| <div class="col-md-4"> |
| <button class="btn btn-outline-primary btn-sm mb-2 w-100" onclick="quickQuestion(this)"> |
| Courses offered |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true"> |
| <div class="modal-dialog modal-dialog-centered"> |
| <div class="modal-content"> |
| <div class="modal-body text-center py-4"> |
| <div class="spinner-border text-primary mb-3" role="status"> |
| <span class="visually-hidden">Loading...</span> |
| </div> |
| <h5>Thinking...</h5> |
| <p class="text-muted">Processing your request</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> |
| |
| <script src="{{ url_for('static', filename='js/chat.js') }}"></script> |
| </body> |
| </html> |
