| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VicoXDarkGPT - AI Coding Assistant</title> |
| <link rel="stylesheet" href="style.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| </head> |
| <body> |
| <div id="app"> |
| |
| <div id="sidebar" class="sidebar"> |
| <div class="sidebar-header"> |
| <h3>Conversations</h3> |
| <button id="close-sidebar-btn" class="close-btn">×</button> |
| </div> |
| <div class="sidebar-section"> |
| <h4>Recent Chats</h4> |
| <div class="sidebar-item active" data-id="new-chat"> |
| <i class="fas fa-comment-dots"></i> |
| <span>New Chat</span> |
| </div> |
| <div class="sidebar-item" data-id="project-planning"> |
| <i class="fas fa-lightbulb"></i> |
| <span>Project Planning</span> |
| </div> |
| <div class="sidebar-item" data-id="code-review"> |
| <i class="fas fa-code"></i> |
| <span>Code Review</span> |
| </div> |
| <div class="sidebar-item" data-id="web-app-builder"> |
| <i class="fas fa-project-diagram"></i> |
| <span>Web App Builder</span> |
| </div> |
| </div> |
| <div class="sidebar-section"> |
| <h4>Project Files</h4> |
| <div class="sidebar-item" data-id="file-explorer"> |
| <i class="fas fa-folder-open"></i> |
| <span>File Explorer</span> |
| </div> |
| <div class="sidebar-item" data-id="checkpoints"> |
| <i class="fas fa-save"></i> |
| <span>Checkpoints</span> |
| </div> |
| <div class="sidebar-item" data-id="terminal"> |
| <i class="fas fa-terminal"></i> |
| <span>Terminal</span> |
| </div> |
| </div> |
| <div class="sidebar-section"> |
| <h4>Settings</h4> |
| <div class="sidebar-item"> |
| <i class="fas fa-cog"></i> |
| <span>AI Mode: Replit Agent</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-palette"></i> |
| <span>Theme: Dark</span> |
| </div> |
| <div class="sidebar-item"> |
| <i class="fas fa-chart-bar"></i> |
| <span>Usage Stats</span> |
| </div> |
| </div> |
| <div class="sidebar-section"> |
| <h4>Features</h4> |
| <div class="sidebar-item" data-id="create-application"> |
| <i class="fas fa-rocket"></i> |
| <span>Create Application</span> |
| </div> |
| <div class="sidebar-item" data-id="auto-debug"> |
| <i class="fas fa-bug"></i> |
| <span>Auto Debug</span> |
| </div> |
| <div class="sidebar-item" data-id="code-suggestions"> |
| <i class="fas fa-lightbulb"></i> |
| <span>Code Suggestions</span> |
| </div> |
| <div class="sidebar-item" data-id="performance-analysis"> |
| <i class="fas fa-chart-line"></i> |
| <span>Performance Analysis</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="main-content" class="main-content"> |
| |
| <header class="header"> |
| <div class="header-left"> |
| <button id="hamburger-btn" class="hamburger-btn"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <div class="logo"> |
| <i class="fas fa-comments"></i> |
| <span>VicoXDarkGPT</span> |
| </div> |
| </div> |
| <div class="header-right"> |
| <select id="mode-selector" class="mode-selector"> |
| <option value="default">Default Assistant</option> |
| <option value="coder" selected>Coder Specialist</option> |
| <option value="builder">Builder/Architect</option> |
| <option value="replit_agent">Replit Agent</option> |
| </select> |
| <select id="model-selector" class="model-selector"> |
| <option value="qwen/qwen3-32b">🧠 Qwen3 32B (Coder/Reasoning)</option> |
| <option value="llama-3.3-70b-versatile">🚀 Llama 3.3 70B (Versatile)</option> |
| <option value="llama-3.1-8b-instant">⚡ Llama 3.1 8B (Instant)</option> |
| <option value="groq/compound">🔗 Compound (Multi-Task)</option> |
| <option value="moonshotai/kimi-k2-instruct-0905">👑 Kimi K2 Instruct (Long Context)</option> |
| </select> |
| <button id="new-chat-btn" class="new-chat-btn"> |
| <i class="fas fa-plus"></i> New Chat |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="tab-container"> |
| <div class="tab-header"> |
| <div class="tab active" data-tab="chat">Chat</div> |
| <div class="tab" data-tab="files">Files</div> |
| <div class="tab" data-tab="terminal">Terminal</div> |
| <div class="tab" data-tab="preview">Preview</div> |
| </div> |
| |
| |
| <div id="chat-tab" class="tab-content active"> |
| |
| <div id="chat-container" class="chat-container"> |
| |
| <div id="welcome-screen" class="welcome-screen"> |
| <div class="welcome-icon"> |
| <i class="fas fa-comments"></i> |
| </div> |
| <h1 class="welcome-title">VicoXDarkGPT</h1> |
| <p class="welcome-subtitle">Your AI-powered coding companion for building applications</p> |
| <div class="suggestion-cards"> |
| <div class="suggestion-card" data-prompt="Create a todo list app with React and Python backend"> |
| <div class="suggestion-title"><i class="fas fa-list-check"></i> Todo List App</div> |
| <div class="suggestion-desc">Full-stack application with React frontend and Python backend</div> |
| </div> |
| <div class="suggestion-card" data-prompt="Build a weather app that shows real-time weather data"> |
| <div class="suggestion-title"><i class="fas fa-cloud-sun"></i> Weather App</div> |
| <div class="suggestion-desc">Real-time weather data with API integration</div> |
| </div> |
| <div class="suggestion-card" data-prompt="Create a chat application with WebSockets"> |
| <div class="suggestion-title"><i class="fas fa-comments"></i> Chat Application</div> |
| <div class="suggestion-desc">Real-time messaging with WebSockets</div> |
| </div> |
| <div class="suggestion-card" data-prompt="Generate a machine learning model for image classification"> |
| <div class="suggestion-title"><i class="fas fa-brain"></i> ML Image Classifier</div> |
| <div class="suggestion-desc">Computer vision with deep learning</div> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| |
| |
| <div id="files-tab" class="tab-content"> |
| <div class="files-header"> |
| <div class="file-actions"> |
| <button id="new-file-btn" class="file-action-btn"><i class="fas fa-plus"></i> New File</button> |
| <button id="new-folder-btn" class="file-action-btn"><i class="fas fa-folder-plus"></i> New Folder</button> |
| </div> |
| <div class="file-search"> |
| <input type="text" placeholder="Search files..."> |
| </div> |
| </div> |
| <div id="file-tree" class="file-tree"> |
| <div class="file-item" data-file="main.py"> |
| <i class="fas fa-file-code"></i> main.py |
| </div> |
| <div class="file-item" data-file="app.py"> |
| <i class="fas fa-file-code"></i> app.py |
| </div> |
| <div class="folder-item"> |
| <i class="fas fa-folder"></i> components |
| <div class="folder-content"> |
| <div class="file-item" data-file="header.py"> |
| <i class="fas fa-file-code"></i> header.py |
| </div> |
| <div class="file-item" data-file="footer.py"> |
| <i class="fas fa-file-code"></i> footer.py |
| </div> |
| </div> |
| </div> |
| <div class="folder-item"> |
| <i class="fas fa-folder"></i> static |
| <div class="folder-content"> |
| <div class="file-item" data-file="style.css"> |
| <i class="fas fa-file-code"></i> style.css |
| </div> |
| <div class="file-item" data-file="script.js"> |
| <i class="fas fa-file-code"></i> script.js |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="terminal-tab" class="tab-content"> |
| <div class="terminal-header"> |
| <div class="terminal-title">Terminal</div> |
| <div class="terminal-controls"> |
| <button id="clear-terminal-btn" class="terminal-control-btn"><i class="fas fa-broom"></i> Clear</button> |
| <button id="run-code-btn" class="terminal-control-btn"><i class="fas fa-play"></i> Run</button> |
| </div> |
| </div> |
| <div id="terminal-output" class="terminal-output"> |
| <div class="terminal-line">$ Welcome to VicoXDarkGPT Terminal</div> |
| <div class="terminal-line">$ Type 'help' for available commands</div> |
| </div> |
| <div class="terminal-input-container"> |
| <span class="terminal-prompt">$</span> |
| <input type="text" id="terminal-input" placeholder="Type command..."> |
| </div> |
| </div> |
| |
| |
| <div id="preview-tab" class="tab-content"> |
| <div class="preview-header"> |
| <div class="preview-title">Preview</div> |
| <div class="preview-controls"> |
| <button id="refresh-preview-btn" class="preview-control-btn"><i class="fas fa-sync-alt"></i> Refresh</button> |
| <button id="open-preview-btn" class="preview-control-btn"><i class="fas fa-external-link-alt"></i> Open in New Tab</button> |
| </div> |
| </div> |
| <iframe id="preview-frame" src="about:blank" title="Preview"></iframe> |
| </div> |
| </div> |
|
|
| |
| <div class="input-area"> |
| <div class="input-container"> |
| <textarea |
| id="user-input" |
| class="message-input" |
| placeholder="Type your message here..." |
| rows="1" |
| ></textarea> |
| <button id="send-button" class="send-button"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div class="input-hint"> |
| Press Enter to send, Shift+Enter for new line • Powered by Groq API |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="api.js"></script> |
| <script src="script.js"></script> |
| </body> |
| </html> |
