Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes"> | |
| <title>DEVPORTAL</title> | |
| <meta name="description" content="Cloud developer workspace with terminal, code editor, and AI assistant."> | |
| <meta name="theme-color" content="#000000"> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta property="og:title" content="DEVPORTAL"> | |
| <meta property="og:description" content="Cloud developer workspace"> | |
| <meta property="og:image" content="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1200&auto=format&fit=crop"> | |
| <link rel="stylesheet" href="/static/css/variables.css"> | |
| <link rel="stylesheet" href="/static/css/layout.css"> | |
| <link rel="stylesheet" href="/static/css/dashboard.css"> | |
| <link rel="stylesheet" href="/static/css/terminal.css"> | |
| <link rel="stylesheet" href="/static/css/editor.css"> | |
| <link rel="stylesheet" href="/static/css/settings.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.3/ace.js" defer></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js" defer></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js" defer></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css"> | |
| <!-- xterm.js terminal emulator (served locally) --> | |
| <link rel="stylesheet" href="/static/vendor/xterm/xterm.css"> | |
| <script src="/static/vendor/xterm/xterm.js"></script> | |
| <script src="/static/vendor/xterm/addon-fit.js"></script> | |
| <script src="/static/vendor/xterm/addon-web-links.js"></script> | |
| </head> | |
| <body> | |
| <a href="#main-content" class="skip-link">Skip to content</a> | |
| {% include 'views/auth.html' %} | |
| <div id="app-layout"> | |
| <div id="sidebar-overlay" onclick="toggleSidebar()"></div> | |
| <nav id="sidebar" aria-label="Navigation"> | |
| <div class="logo-area"> | |
| <div class="logo-icon"><i class="fa-solid fa-terminal"></i></div> | |
| <span class="logo-text">DEV<span class="logo-accent">PORTAL</span></span> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-label">Workspace</div> | |
| <div class="nav-item" data-view="dashboard-view" onclick="switchView('dashboard-view',this)"> | |
| <i class="fa-solid fa-grid-2"></i> Home | |
| </div> | |
| <div class="nav-item active" data-view="terminal-view" onclick="switchView('terminal-view',this)"> | |
| <i class="fa-solid fa-terminal"></i> Terminal | |
| </div> | |
| <div class="nav-item" data-view="editor-view" onclick="switchView('editor-view',this)"> | |
| <i class="fa-solid fa-code"></i> Editor | |
| </div> | |
| <div class="nav-item" data-view="projects-view" onclick="switchView('projects-view',this)"> | |
| <i class="fa-solid fa-folder-open"></i> Projects | |
| </div> | |
| <div class="nav-item" data-view="ai-chat-view" onclick="switchView('ai-chat-view',this)"> | |
| <i class="fa-solid fa-wand-magic-sparkles" style="color:var(--accent)"></i> AI Chat | |
| </div> | |
| <hr class="nav-divider"> | |
| <div class="nav-label">System</div> | |
| <div class="nav-item" data-view="settings-view" onclick="switchView('settings-view',this)"> | |
| <i class="fa-solid fa-sliders"></i> Settings | |
| </div> | |
| <div class="nav-item" data-view="apps-view" onclick="switchView('apps-view',this)"> | |
| <i class="fa-solid fa-plug"></i> Apps | |
| </div> | |
| <div class="nav-item" onclick="logout()" style="color:var(--error)"> | |
| <i class="fa-solid fa-right-from-bracket"></i> Logout | |
| </div> | |
| </div> | |
| </nav> | |
| <main id="main-content"> | |
| <header id="top-bar"> | |
| <button id="mobile-menu-btn" class="topbar-btn" onclick="toggleSidebar()" aria-label="Menu"> | |
| <i class="fa-solid fa-bars"></i> | |
| </button> | |
| <div style="display:flex;align-items:center;gap:var(--sp-2)"> | |
| <button class="topbar-btn" onclick="toggleTheme()" aria-label="Toggle theme"> | |
| <i id="theme-icon" class="fa-solid fa-moon"></i> | |
| </button> | |
| <div id="connection-status" class="conn-badge" role="status"> | |
| <span id="connection-dot" class="conn-dot"></span> | |
| <span id="connection-text">Offline</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div id="dashboard-view" class="view-container">{% include 'views/dashboard.html' %}</div> | |
| <div id="terminal-view" class="view-container active">{% include 'views/terminal.html' %}</div> | |
| <div id="editor-view" class="view-container">{% include 'views/editor.html' %}</div> | |
| <div id="projects-view" class="view-container">{% include 'views/projects.html' %}</div> | |
| <div id="ai-chat-view" class="view-container">{% include 'views/ai_chat.html' %}</div> | |
| <div id="settings-view" class="view-container">{% include 'views/settings.html' %}</div> | |
| <div id="apps-view" class="view-container">{% include 'views/apps.html' %}</div> | |
| </main> | |
| </div> | |
| <div id="toast-container" aria-live="polite"></div> | |
| <nav id="bottom-nav" aria-label="Main navigation"> | |
| <div class="bnav-item active" data-view="terminal-view" onclick="navTo('terminal-view',this)"> | |
| <i class="fa-solid fa-terminal"></i><span>Terminal</span> | |
| </div> | |
| <div class="bnav-item" data-view="editor-view" onclick="navTo('editor-view',this)"> | |
| <i class="fa-solid fa-code"></i><span>Editor</span> | |
| </div> | |
| <div class="bnav-item" data-view="ai-chat-view" onclick="navTo('ai-chat-view',this)"> | |
| <i class="fa-solid fa-wand-magic-sparkles"></i><span>AI</span> | |
| </div> | |
| <div class="bnav-item" data-view="projects-view" onclick="navTo('projects-view',this)"> | |
| <i class="fa-solid fa-folder-open"></i><span>Projects</span> | |
| </div> | |
| <div class="bnav-item" data-view="dashboard-view" onclick="navTo('dashboard-view',this)"> | |
| <i class="fa-solid fa-grid-2"></i><span>Home</span> | |
| </div> | |
| </nav> | |
| <script src="/static/js/app.js?v=8"></script> | |
| <script src="/static/js/auth.js?v=8"></script> | |
| <script src="/static/js/terminal.js?v=8"></script> | |
| <script src="/static/js/editor.js?v=8"></script> | |
| <script src="/static/js/settings.js?v=8"></script> | |
| <script src="/static/js/dashboard.js?v=8"></script> | |
| <script src="/static/js/projects.js?v=8"></script> | |
| <script> | |
| function toggleSidebar(){ | |
| document.getElementById('sidebar').classList.toggle('open'); | |
| document.getElementById('sidebar-overlay').classList.toggle('active'); | |
| } | |
| function navTo(id,el){ | |
| var sNav=document.querySelector('.nav-item[data-view="'+id+'"]'); | |
| switchView(id,sNav); | |
| document.querySelectorAll('.bnav-item').forEach(function(i){i.classList.remove('active')}); | |
| el.classList.add('active'); | |
| document.getElementById('sidebar').classList.remove('open'); | |
| document.getElementById('sidebar-overlay').classList.remove('active'); | |
| } | |
| </script> | |
| </body> | |
| </html> | |