Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>I'm in Charge — Virtual Assistant</title> | |
| <meta name="description" content="Bilingual RAG virtual assistant for Gapura Airport Services document intelligence."> | |
| <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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <!-- Sidebar (desktop) / Drawer (mobile) --> | |
| <div class="sidebar-overlay" id="sidebar-overlay"></div> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <img src="/assets/image.png" alt="Gapura Airport Services" class="logo"> | |
| <button class="btn-close-sidebar" id="btn-close-sidebar" aria-label="Close menu"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <button class="nav-btn active" data-panel="chat" id="nav-chat"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> | |
| </svg> | |
| <span>Chat</span> | |
| </button> | |
| <button class="nav-btn" data-panel="upload" id="nav-upload"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> | |
| <polyline points="14 2 14 8 20 8"/> | |
| <line x1="12" y1="18" x2="12" y2="12"/> | |
| <line x1="9" y1="15" x2="12" y2="12"/> | |
| <line x1="15" y1="15" x2="12" y2="12"/> | |
| </svg> | |
| <span>Documents</span> | |
| </button> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="lang-switcher"> | |
| <label for="lang-select">Language</label> | |
| <select id="lang-select"> | |
| <option value="auto">Auto-Detect</option> | |
| <option value="en">English</option> | |
| <option value="id">Bahasa Indonesia</option> | |
| </select> | |
| </div> | |
| <div class="stats-mini" id="stats-mini"></div> | |
| </div> | |
| </aside> | |
| <!-- Main content --> | |
| <main class="main-content"> | |
| <!-- Chat Panel --> | |
| <section class="panel active" id="panel-chat"> | |
| <header class="panel-header"> | |
| <button class="btn-menu" id="btn-menu" aria-label="Open menu"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/> | |
| </svg> | |
| </button> | |
| <div class="header-title"> | |
| <h1><em>I'm in Charge</em> Virtual Assistant</h1> | |
| <p class="header-sub">Bilingual document intelligence — English & Bahasa Indonesia</p> | |
| </div> | |
| <button class="btn-icon" id="btn-clear-chat" title="Clear conversation"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> | |
| </svg> | |
| </button> | |
| </header> | |
| <div class="chat-container" id="chat-container"> | |
| <div class="chat-welcome" id="chat-welcome"> | |
| <div class="welcome-icon"> | |
| <img src="/assets/image.png" alt="" class="welcome-logo"> | |
| </div> | |
| <h2>How can I help you today?</h2> | |
| <p>Upload documents and ask questions — I'll answer based on your files.</p> | |
| <div class="welcome-hints"> | |
| <button class="hint-chip" onclick="sendHint(this)">Ringkasan dokumen ini apa?</button> | |
| <button class="hint-chip" onclick="sendHint(this)">What are the key findings?</button> | |
| <button class="hint-chip" onclick="sendHint(this)">Jelaskan poin utama</button> | |
| </div> | |
| </div> | |
| <div class="messages" id="messages"></div> | |
| </div> | |
| <div class="chat-input-area"> | |
| <form id="chat-form" class="chat-form"> | |
| <div class="input-wrapper"> | |
| <textarea id="chat-input" placeholder="Ask a question about your documents..." rows="1" maxlength="2000"></textarea> | |
| <button type="submit" class="btn-send" id="btn-send" disabled> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Upload Panel --> | |
| <section class="panel" id="panel-upload"> | |
| <header class="panel-header"> | |
| <button class="btn-menu" aria-label="Open menu" onclick="document.getElementById('sidebar').classList.add('open'); document.getElementById('sidebar-overlay').classList.add('open');"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/> | |
| </svg> | |
| </button> | |
| <div class="header-title"> | |
| <h1>Document Manager</h1> | |
| <p class="header-sub">Upload PDF files to build the knowledge base</p> | |
| </div> | |
| </header> | |
| <div class="upload-area"> | |
| <div class="drop-zone" id="drop-zone"> | |
| <div class="drop-zone-content"> | |
| <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="drop-icon"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> | |
| <polyline points="17 8 12 3 7 8"/> | |
| <line x1="12" y1="3" x2="12" y2="15"/> | |
| </svg> | |
| <p class="drop-text">Drop PDF files here</p> | |
| <p class="drop-hint">or click to browse · max 50MB per file</p> | |
| </div> | |
| <input type="file" id="file-input" accept=".pdf" multiple hidden> | |
| </div> | |
| <div class="upload-log" id="upload-log"></div> | |
| </div> | |
| </section> | |
| <!-- Mobile Bottom Nav --> | |
| <nav class="bottom-nav" id="bottom-nav"> | |
| <button class="bottom-nav-btn active" data-panel="chat"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> | |
| </svg> | |
| <span>Chat</span> | |
| </button> | |
| <button class="bottom-nav-btn" data-panel="upload"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> | |
| <polyline points="14 2 14 8 20 8"/> | |
| <line x1="12" y1="18" x2="12" y2="12"/> | |
| </svg> | |
| <span>Docs</span> | |
| </button> | |
| <button class="bottom-nav-btn" id="btn-bottom-settings"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/> | |
| </svg> | |
| <span>Settings</span> | |
| </button> | |
| </nav> | |
| </main> | |
| </div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |