Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="AI-powered document intelligence platform with bucket organization."> | |
| <title>Iribl AI - Document Intelligence</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/css/styles.css"> | |
| <link rel="icon" type="image/svg+xml" | |
| href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧠</text></svg>"> | |
| </head> | |
| <body> | |
| <!-- Toast Container --> | |
| <div class="toast-container" id="toastContainer"></div> | |
| <!-- Mobile Backdrop Overlay --> | |
| <div class="mobile-backdrop" id="mobileBackdrop"></div> | |
| <!-- Mobile Bottom Navigation --> | |
| <nav class="mobile-nav" id="mobileNav"> | |
| <button class="mobile-nav-btn" id="mobileLeftToggle" title="Menu"> | |
| <span class="nav-icon">☰</span> | |
| <span class="nav-label">Menu</span> | |
| </button> | |
| <button class="mobile-nav-btn active" id="mobileChatToggle" title="Chat"> | |
| <span class="nav-icon">💬</span> | |
| <span class="nav-label">Chat</span> | |
| </button> | |
| <button class="mobile-nav-btn" id="mobileRightToggle" title="Documents"> | |
| <span class="nav-icon">📚</span> | |
| <span class="nav-label">Docs</span> | |
| </button> | |
| </nav> | |
| <!-- Auth Modal --> | |
| <div class="modal-overlay" id="authModal"> | |
| <div class="modal glass-panel"> | |
| <div class="modal-header"> | |
| <div class="modal-logo">🧠</div> | |
| <h2 class="modal-title">Welcome to Iribl AI</h2> | |
| <p class="modal-subtitle">Your intelligent document companion</p> | |
| </div> | |
| <div class="role-tabs"> | |
| <button class="role-tab active" data-role="admin">👔 Admin</button> | |
| <button class="role-tab" data-role="employee">Employee</button> | |
| </div> | |
| <div class="auth-tabs" id="authTabs"> | |
| <button class="auth-tab active" data-tab="login">Sign In</button> | |
| <button class="auth-tab" data-tab="register">Sign Up</button> | |
| </div> | |
| <form id="loginForm" class="auth-form"> | |
| <div class="form-group"> | |
| <label class="form-label">Username</label> | |
| <input type="text" class="form-input" name="username" placeholder="Enter your username" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Password</label> | |
| <input type="password" class="form-input" name="password" placeholder="Enter your password" | |
| required> | |
| </div> | |
| <div id="loginError" class="form-error hidden"></div> | |
| <button type="submit" class="btn btn-primary auth-btn"> | |
| <span class="btn-text">Sign In</span> | |
| <span class="btn-loader hidden"> | |
| <div class="loading-spinner"></div> | |
| </span> | |
| </button> | |
| </form> | |
| <form id="registerForm" class="auth-form hidden"> | |
| <div class="form-group"> | |
| <label class="form-label">Username</label> | |
| <input type="text" class="form-input" name="username" placeholder="Choose a username" required | |
| minlength="3"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Email (optional)</label> | |
| <input type="email" class="form-input" name="email" placeholder="your@email.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Password</label> | |
| <input type="password" class="form-input" name="password" placeholder="Create a password" required | |
| minlength="6"> | |
| </div> | |
| <div id="registerError" class="form-error hidden"></div> | |
| <button type="submit" class="btn btn-primary auth-btn"> | |
| <span class="btn-text">Create Admin Account</span> | |
| <span class="btn-loader hidden"> | |
| <div class="loading-spinner"></div> | |
| </span> | |
| </button> | |
| </form> | |
| <form id="employeeLoginForm" class="auth-form hidden"> | |
| <div class="form-group"> | |
| <label class="form-label">Email</label> | |
| <input type="email" class="form-input" name="email" placeholder="Enter your work email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Password</label> | |
| <input type="password" class="form-input" name="password" placeholder="Enter your password" | |
| required> | |
| </div> | |
| <div id="employeeLoginError" class="form-error hidden"></div> | |
| <button type="submit" class="btn btn-primary auth-btn"> | |
| <span class="btn-text">Sign In as Employee</span> | |
| <span class="btn-loader hidden"> | |
| <div class="loading-spinner"></div> | |
| </span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Add Employee Modal --> | |
| <div class="modal-overlay" id="addEmployeeModal"> | |
| <div class="modal glass-panel"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">➕ Add Employee</h2> | |
| <p class="modal-subtitle">Create login credentials for a new employee</p> | |
| </div> | |
| <form id="addEmployeeForm" class="auth-form"> | |
| <div class="form-group"> | |
| <label class="form-label">Employee Email</label> | |
| <input type="email" class="form-input" name="email" placeholder="employee@company.com" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Password</label> | |
| <input type="password" class="form-input" name="password" placeholder="Create a password" required | |
| minlength="6"> | |
| </div> | |
| <div id="addEmployeeError" class="form-error hidden"></div> | |
| <div class="modal-actions"> | |
| <button type="button" class="btn btn-secondary" id="cancelAddEmployee">Cancel</button> | |
| <button type="submit" class="btn btn-primary"> | |
| <span class="btn-text">Add Employee</span> | |
| <span class="btn-loader hidden"> | |
| <div class="loading-spinner"></div> | |
| </span> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Create Bucket Modal --> | |
| <div class="modal-overlay" id="createBucketModal"> | |
| <div class="modal glass-panel"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">📁 Create Bucket</h2> | |
| <p class="modal-subtitle">Organize your documents into buckets</p> | |
| </div> | |
| <form id="createBucketForm" class="auth-form"> | |
| <div class="form-group"> | |
| <label class="form-label">Bucket Name</label> | |
| <input type="text" class="form-input" name="name" placeholder="e.g., Project Alpha" required> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Description (optional)</label> | |
| <input type="text" class="form-input" name="description" placeholder="Brief description..."> | |
| </div> | |
| <div id="createBucketError" class="form-error hidden"></div> | |
| <div class="modal-actions"> | |
| <button type="button" class="btn btn-secondary" id="cancelCreateBucket">Cancel</button> | |
| <button type="submit" class="btn btn-primary"> | |
| <span class="btn-text">Create Bucket</span> | |
| <span class="btn-loader hidden"> | |
| <div class="loading-spinner"></div> | |
| </span> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Document Viewer Modal --> | |
| <div class="modal-overlay" id="docViewerModal"> | |
| <div class="modal glass-panel doc-viewer-modal"> | |
| <div class="doc-viewer-header"> | |
| <h3 id="docViewerTitle">Document</h3> | |
| <button class="btn btn-ghost" id="closeDocViewer">✕</button> | |
| </div> | |
| <div class="doc-viewer-content" id="docViewerContent"> | |
| <div class="loading-spinner"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main App Container --> | |
| <div class="app-container" id="appContainer"> | |
| <main class="main-content"> | |
| <!-- LEFT SIDEBAR --> | |
| <aside class="sidebar sidebar-left" id="leftSidebar"> | |
| <div class="sidebar-toggle" id="leftToggle" title="Toggle sidebar"> | |
| <span class="toggle-icon">◀</span> | |
| </div> | |
| <div class="sidebar-content"> | |
| <!-- User Info --> | |
| <section class="sidebar-section glass-panel user-section"> | |
| <div class="user-info-row"> | |
| <div class="user-badge"> | |
| <div class="user-avatar" id="userAvatar">U</div> | |
| <div class="user-details"> | |
| <span id="userName">User</span> | |
| <span class="user-role" id="userRole">Admin</span> | |
| </div> | |
| </div> | |
| <button class="btn btn-logout" id="logoutBtn" title="Sign Out">logout</button> | |
| </div> | |
| </section> | |
| <!-- Admin: Employees --> | |
| <section class="sidebar-section glass-panel collapsible hidden" id="adminSection"> | |
| <div class="section-header" data-target="employeesList"> | |
| <h3 class="sidebar-title"><span></span> Employees</h3> | |
| <div class="section-actions"> | |
| <button class="btn btn-ghost" id="addEmployeeBtn" title="Add">➕</button> | |
| <span class="collapse-icon">▼</span> | |
| </div> | |
| </div> | |
| <div class="section-body" id="employeesList"> | |
| <div class="empty-state small"> | |
| <div class="empty-text">No employees</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Buckets --> | |
| <section class="sidebar-section glass-panel collapsible"> | |
| <div class="section-header" data-target="bucketsBody"> | |
| <h3 class="sidebar-title"><span>📁</span> Buckets</h3> | |
| <div class="section-actions"> | |
| <button class="btn btn-ghost" id="createBucketBtn" title="Create">➕</button> | |
| <span class="collapse-icon">▼</span> | |
| </div> | |
| </div> | |
| <div class="section-body" id="bucketsBody"> | |
| <div class="buckets-list" id="bucketsList"> | |
| <div class="bucket-item active" data-id=""> | |
| <span class="bucket-name">📂 All Documents</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload --> | |
| <section class="sidebar-section glass-panel collapsible"> | |
| <div class="section-header" data-target="uploadBody"> | |
| <h3 class="sidebar-title"><span></span> Upload</h3> | |
| <span class="collapse-icon">▼</span> | |
| </div> | |
| <div class="section-body" id="uploadBody"> | |
| <div class="custom-select" id="uploadBucketWrapper"> | |
| <div class="select-trigger" id="uploadBucketTrigger"> | |
| <span class="select-value">No Bucket (General)</span> | |
| <span class="select-arrow">▼</span> | |
| </div> | |
| <div class="select-options" id="uploadBucketOptions"></div> | |
| <input type="hidden" id="uploadBucketSelect" value=""> | |
| </div> | |
| <div class="upload-zone" id="uploadZone"> | |
| <input type="file" id="fileInput" hidden multiple | |
| accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.md,.png,.jpg,.jpeg,.gif,.webp"> | |
| <div class="upload-icon">📁</div> | |
| <div class="upload-title">Drop files here</div> | |
| <div class="upload-subtitle">or click to browse</div> | |
| </div> | |
| <div id="uploadProgress" class="hidden"> | |
| <div class="progress-info"> | |
| <div class="loading-spinner"></div> | |
| <span id="uploadStatus">Uploading...</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <button class="btn btn-cancel-upload" id="cancelUploadBtn" title="Cancel Upload">✕ | |
| Cancel</button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </aside> | |
| <!-- CHAT AREA (CENTER) --> | |
| <section class="chat-container glass-panel"> | |
| <!-- Bucket Filter --> | |
| <div class="chat-bucket-filter"> | |
| <span class="filter-label">🔍 Querying:</span> | |
| <div class="custom-select compact" id="chatBucketWrapper"> | |
| <div class="select-trigger" id="chatBucketTrigger"> | |
| <span class="select-value">All Documents</span> | |
| <span class="select-arrow">▼</span> | |
| </div> | |
| <div class="select-options" id="chatBucketOptions"></div> | |
| <input type="hidden" id="chatBucketSelect" value=""> | |
| </div> | |
| <button class="btn btn-new-chat" id="newChatBtn" title="Start New Chat">➕ New Chat</button> | |
| <button class="btn btn-clear-chat" id="clearChatBtnTop" title="Clear Current Chat">Clear</button> | |
| </div> | |
| <!-- Messages --> | |
| <div class="chat-messages" id="chatMessages"> | |
| <!-- Document Summary Panel --> | |
| <div class="summary-panel hidden" id="summaryPanel"> | |
| <div class="summary-header"> | |
| <span class="summary-icon">📄</span> | |
| <span class="summary-title" id="summaryTitle">Document Summary</span> | |
| </div> | |
| <div class="summary-content" id="summaryContent"> | |
| <div class="summary-text" id="summaryText"></div> | |
| </div> | |
| <button class="summary-close" id="summaryClose" title="Close summary">✕</button> | |
| </div> | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <div class="welcome-icon"><img src="/images/WhatsApp Image 2025-12-23 at 5.10.00 PM.jpeg" | |
| alt="Logo" | |
| style="width: 220px; height: auto; filter: invert(1); mix-blend-mode: lighten;"></div> | |
| <h2 class="welcome-title">Welcome to Iribl AI</h2> | |
| <p class="welcome-subtitle"> | |
| Upload documents, organize into buckets, and ask questions. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div class="typing-indicator hidden" id="typingIndicator"> | |
| <div class="message-avatar">🧠</div> | |
| <div class="typing-dots"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="chat-input-container"> | |
| <div class="chat-input-wrapper"> | |
| <textarea class="chat-input" id="chatInput" placeholder="Ask anything about your documents..." | |
| rows="1"></textarea> | |
| <button class="send-btn" id="sendBtn" disabled title="Send">➤</button> | |
| <button class="stop-btn hidden" id="stopBtn" title="Stop generating">■</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- RIGHT SIDEBAR --> | |
| <aside class="sidebar sidebar-right" id="rightSidebar"> | |
| <div class="sidebar-toggle" id="rightToggle" title="Toggle sidebar"> | |
| <span class="toggle-icon">▶</span> | |
| </div> | |
| <div class="sidebar-content"> | |
| <!-- Documents --> | |
| <section class="sidebar-section glass-panel documents-section collapsible"> | |
| <div class="section-header" data-target="documentsBody"> | |
| <h3 class="sidebar-title"> | |
| <span>📚</span> Documents | |
| <span id="docCount" class="doc-count">(0)</span> | |
| </h3> | |
| <span class="collapse-icon">▼</span> | |
| </div> | |
| <div class="section-body documents-body" id="documentsBody"> | |
| <div class="documents-list" id="documentsList"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">📭</div> | |
| <div class="empty-text">No documents yet</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Chat History --> | |
| <section class="sidebar-section glass-panel chat-history-section collapsible"> | |
| <div class="section-header" data-target="chatHistoryBody"> | |
| <h3 class="sidebar-title"> | |
| <span>💬</span> Chat History | |
| <span id="chatHistoryCount" class="doc-count">(0)</span> | |
| </h3> | |
| <div class="section-actions"> | |
| <button class="btn btn-ghost" id="clearChatBtn" title="Clear current chat">🗑️</button> | |
| <span class="collapse-icon">▼</span> | |
| </div> | |
| </div> | |
| <div class="section-body chat-history-body" id="chatHistoryBody"> | |
| <div class="chat-history-list" id="chatHistoryList"> | |
| <div class="empty-state small"> | |
| <div class="empty-text">No chats yet</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </aside> | |
| </main> | |
| </div> | |
| <script src="/js/app.js"></script> | |
| </body> | |
| </html> |