Spaces:
Running
Running
| <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, viewport-fit=cover"> | |
| <title>CODE VED | Engineered by Divy Patel</title> | |
| <!-- Favicon --> | |
| <link rel="icon" type="image/webp" id="faviconLink"> | |
| <!-- Google Fonts --> | |
| <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@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <!-- External Libraries CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> | |
| <!-- Custom CSS (Placeholder for next step) --> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body oncontextmenu="return false;"> | |
| <!-- Top Left Menu Button --> | |
| <button class="btn-menu" id="btnMenuOpen"> | |
| <svg style="width:20px;height:20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="14" y2="15"></line></svg> | |
| </button> | |
| <!-- Mobile Overlay for Sidebar --> | |
| <div class="mobile-overlay" id="mobileOverlay"></div> | |
| <!-- Sidebar --> | |
| <aside class="sidebar collapsed" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="sidebar-logo"> | |
| <img id="sidebarLogoImg" alt="CODE VED" style="width:24px;height:24px;border-radius:6px;object-fit:contain;"> | |
| <span>CODE VED</span> | |
| </div> | |
| <button class="btn-menu btn-close-sidebar" id="btnCloseSidebar" style="position:static; width:32px; height:32px; box-shadow:none; border:none; background:transparent;"> | |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| <button class="btn-new-chat" id="btnNewChat"> | |
| <svg style="width:16px; height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> | |
| New Workspace | |
| </button> | |
| <div class="sidebar-history" id="chatHistory"></div> | |
| <div class="sidebar-footer"> | |
| <div class="user-avatar" id="uAv">G</div> | |
| <div class="user-info-box"> | |
| <div class="user-name" id="uName">Guest Session</div> | |
| <div class="user-sub" id="uSub">Queries: 0/10</div> | |
| </div> | |
| <button class="btn-login-register" id="btnLoginRegister">Access</button> | |
| <button class="btn-power" id="btnDeleteAcc" style="display:none;" title="Delete Account"> | |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg> | |
| </button> | |
| <button class="btn-power" id="btnLogout" style="display:none;" title="Logout"> | |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg> | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Chat Area --> | |
| <main class="main-area"> | |
| <div class="chat-container" id="chatContainer"> | |
| <div class="welcome-center" id="welcomeScreen"> | |
| <img id="welcomeLogoImg" alt="CODE VED"> | |
| <h1 id="welcomeTitle">Hello, Guest!</h1> | |
| <p id="welcomeGreeting">How can I help you today?</p> | |
| </div> | |
| <div id="chatMessages"></div> | |
| </div> | |
| <button id="scrollToBottomBtn" class="btn-scroll-bottom"> | |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg> | |
| </button> | |
| <!-- Input Dock --> | |
| <div class="input-dock" id="inputDock"> | |
| <div class="input-dock-wrapper" id="dockWrapper"> | |
| <div class="loc-toast" id="locStatus"></div> | |
| <div class="file-preview-bar" id="filePreviewBar"> | |
| <div class="file-preview-pill"> | |
| <img id="imgPreview" class="file-preview-icon" src="" style="display:none;"> | |
| <svg id="docPreview" style="display:none; width:14px; height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg> | |
| <div class="file-preview-name" id="fileName">doc.pdf</div> | |
| <button class="btn-remove-file" id="btnRemoveFile"> | |
| <svg style="width:12px;height:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <textarea class="chat-input" id="mainInput" placeholder="Ask CODE VED..." rows="1"></textarea> | |
| <div class="input-row"> | |
| <div class="tools-left"> | |
| <div style="position: relative;"> | |
| <button class="tool-btn" id="btnAttach" title="Attach File"> | |
| <svg style="width:20px;height:20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg> | |
| </button> | |
| <!-- Attach Dropdown --> | |
| <div class="dropdown-menu" id="attachMenu"> | |
| <div class="dropdown-item" id="optUploadImg"> | |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> | |
| Upload Image | |
| </div> | |
| <div class="dropdown-item" id="optUploadDoc"> | |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg> | |
| Upload Document | |
| </div> | |
| <div style="height:1px; background:var(--border-light); margin:4px 0;"></div> | |
| <div class="dropdown-item" id="optEnv"> | |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> | |
| GPS & Weather | |
| </div> | |
| <div class="dropdown-item" id="optThink"> | |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 0-5 5v2a5 5 0 0 0 10 0V7a5 5 0 0 0-5-5z"></path><path d="M8 14H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2"></path></svg> | |
| Thinking Mode | |
| </div> | |
| <div class="dropdown-item" id="optVoice"> | |
| <svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg> | |
| Select Voice | |
| </div> | |
| </div> | |
| <!-- Voice Dropdown --> | |
| <div class="dropdown-menu" id="voiceMenu" style="min-width: 220px; left: 45px; bottom: 40px; max-height: 300px; overflow-y: auto;"> | |
| <div class="dropdown-header">Premium Voices</div> | |
| <div id="voiceOptionsList"></div> | |
| <div style="height:1px; background:var(--border-light); margin:4px 0;"></div> | |
| <div class="dropdown-header">Language</div> | |
| <div id="languageOptionsList"></div> | |
| </div> | |
| <!-- Thinking Dropdown --> | |
| <div class="dropdown-menu" id="thinkMenu" style="min-width: 180px; left: 45px; bottom: 40px;"> | |
| <div class="dropdown-header">Reasoning Effort</div> | |
| <div class="dropdown-item" data-effort="low">⚡ Low (Fast)</div> | |
| <div class="dropdown-item" data-effort="medium">🧠 Medium (Balanced)</div> | |
| <div class="dropdown-item" data-effort="high">🔍 High (Deep logic)</div> | |
| <div style="height:1px; background:var(--border-light); margin:4px 0;"></div> | |
| <div class="dropdown-item" id="optDisableThink" style="color:var(--brand-danger);">❌ Disable Thinking</div> | |
| </div> | |
| <!-- Hidden File Inputs --> | |
| <input type="file" id="imgUpload" class="hidden-input" accept="image/*"> | |
| <input type="file" id="docUpload" class="hidden-input" accept=".pdf,.txt,.docx,.html,.js,.py,.css,.cpp,.c,.json,.md"> | |
| </div> | |
| <button class="tool-btn" id="btnSearch" title="Web Search"> | |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> | |
| </button> | |
| <button class="tool-btn btn-mic" id="btnStt" title="Voice Typing"> | |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg> | |
| </button> | |
| </div> | |
| <div class="tools-right"> | |
| <button class="btn-stop" id="btnStop"> | |
| <svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"></rect></svg> | |
| </button> | |
| <button class="btn-send" id="btnSend"> | |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Auth Modal --> | |
| <div class="auth-overlay" id="authModal"> | |
| <div class="auth-modal"> | |
| <button class="auth-close" id="btnAuthClose"> | |
| <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> | |
| </button> | |
| <div class="auth-title">System Access</div> | |
| <div class="auth-tabs"> | |
| <div class="auth-tab active" id="tabLogin" data-tab="login">Login</div> | |
| <div class="auth-tab" id="tabRegister" data-tab="register">Register</div> | |
| </div> | |
| <!-- Login Flow --> | |
| <div id="flowLogin"> | |
| <div class="auth-phase active" id="loginPhase1"> | |
| <input type="email" class="auth-input" id="logEmail" placeholder="Email Address"> | |
| <button class="auth-btn" id="btnLogOtp">Continue</button> | |
| </div> | |
| <div class="auth-phase" id="loginPhase2"> | |
| <input type="number" class="auth-input" id="logOtp" placeholder="Enter OTP"> | |
| <button class="auth-btn" id="btnLogVerify">Verify</button> | |
| </div> | |
| </div> | |
| <!-- Register Flow --> | |
| <div id="flowRegister" style="display:none;"> | |
| <div class="auth-phase active" id="regPhase1"> | |
| <input type="text" class="auth-input" id="regName" placeholder="Full Name"> | |
| <input type="email" class="auth-input" id="regEmail" placeholder="Email Address"> | |
| <button class="auth-btn" id="btnRegOtp">Create Account</button> | |
| </div> | |
| <div class="auth-phase" id="regPhase2"> | |
| <input type="number" class="auth-input" id="regOtp" placeholder="Enter OTP"> | |
| <button class="auth-btn" id="btnRegVerify">Verify</button> | |
| </div> | |
| </div> | |
| <div class="auth-message" id="authMsg"></div> | |
| </div> | |
| </div> | |
| <!-- Custom Confirm Overlay --> | |
| <div class="custom-confirm-overlay" id="customConfirmOverlay"> | |
| <div class="custom-confirm-box"> | |
| <div class="custom-confirm-msg" id="customConfirmMsg"></div> | |
| <div class="custom-confirm-btns"> | |
| <button class="custom-confirm-btn cancel" id="customConfirmCancel">Cancel</button> | |
| <button class="custom-confirm-btn confirm" id="customConfirmOk">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- External Libraries JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> | |
| <!-- MathJax Configuration --> | |
| <script> | |
| window.MathJax = { | |
| tex: { | |
| inlineMath: [['$', '$'], ['\\(', '\\)']], | |
| displayMath: [['$$', '$$'], ['\\[', '\\]']], | |
| processEscapes: true, | |
| packages: { '[+]': ['mhchem', 'physics', 'cancel', 'color', 'amsmath', 'amssymb', 'boldsymbol'] } | |
| }, | |
| loader: { | |
| load: ['[tex]/mhchem', '[tex]/physics', '[tex]/cancel', '[tex]/color', '[tex]/amsmath', '[tex]/amssymb', '[tex]/boldsymbol'] | |
| }, | |
| options: { | |
| skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], | |
| ignoreHtmlClass: 'tex2jax_ignore', | |
| processHtmlClass: 'tex2jax_process' | |
| }, | |
| startup: { typeset: false } | |
| }; | |
| </script> | |
| <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> | |
| <!-- Custom Modular JS Files (Placeholders for next steps) --> | |
| <!-- Markdown Renderer must be loaded before main script --> | |
| <script type="module" src="js/markdownRenderer.js"></script> | |
| <script type="module" src="js/script.js"></script> | |
| </body> | |
| </html> | |