| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CodeMaster Pro IDE</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> |
| <style> |
| * { box-sizing: border-box; } |
| body { margin: 0; overflow: hidden; background: #0f172a; color: #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } |
| |
| |
| ::-webkit-scrollbar { width: 8px; height: 8px; } |
| ::-webkit-scrollbar-track { background: #1e293b; } |
| ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; } |
| ::-webkit-scrollbar-thumb:hover { background: #64748b; } |
| |
| |
| #editor-container { height: calc(100vh - 40px); position: relative; } |
| |
| |
| .file-tree-item { cursor: pointer; user-select: none; transition: all 0.2s; } |
| .file-tree-item:hover { background: #1e293b; } |
| .file-tree-item.active { background: #334155; border-left: 2px solid #60a5fa; } |
| .file-tree-item.selected { background: #2563eb; } |
| |
| |
| .tab { display: flex; align-items: center; padding: 8px 12px; background: #1e293b; border-right: 1px solid #0f172a; cursor: pointer; font-size: 13px; max-width: 200px; min-width: 100px; transition: all 0.2s; } |
| .tab:hover { background: #334155; } |
| .tab.active { background: #0f172a; border-top: 2px solid #60a5fa; } |
| .tab.modified::after { content: '●'; margin-left: 4px; color: #60a5fa; font-size: 8px; } |
| .tab-close { margin-left: 8px; opacity: 0; transition: opacity 0.2s; } |
| .tab:hover .tab-close { opacity: 1; } |
| .tab-close:hover { color: #ef4444; } |
| |
| |
| .ai-suggestion { position: absolute; background: #1e293b; border: 1px solid #60a5fa; border-radius: 4px; padding: 4px 8px; font-size: 12px; color: #94a3b8; z-index: 1000; pointer-events: none; font-family: monospace; } |
| |
| |
| .resize-handle { width: 4px; cursor: col-resize; background: transparent; transition: background 0.2s; } |
| .resize-handle:hover { background: #60a5fa; } |
| |
| |
| .console-line { font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; padding: 2px 8px; border-left: 3px solid transparent; } |
| .console-line.error { color: #ef4444; border-left-color: #ef4444; background: rgba(239, 68, 68, 0.1); } |
| .console-line.warn { color: #f59e0b; border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.1); } |
| .console-line.info { color: #60a5fa; border-left-color: #60a5fa; } |
| .console-line.log { color: #e2e8f0; } |
| |
| |
| .ext-html { color: #e44d26; } |
| .ext-css { color: #264de4; } |
| .ext-js { color: #f7df1e; } |
| .ext-json { color: #8bc34a; } |
| |
| |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } |
| .learning-indicator { animation: pulse 2s infinite; } |
| |
| |
| .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; } |
| .modal.active { display: flex; } |
| .modal-content { background: #1e293b; border-radius: 8px; padding: 24px; max-width: 500px; width: 90%; border: 1px solid #334155; } |
| |
| |
| #qrcode { margin: 20px auto; width: 256px; height: 256px; } |
| |
| |
| .context-menu { position: fixed; background: #1e293b; border: 1px solid #334155; border-radius: 4px; padding: 4px 0; z-index: 10000; min-width: 150px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); } |
| .context-menu-item { padding: 8px 16px; cursor: pointer; font-size: 13px; transition: background 0.2s; } |
| .context-menu-item:hover { background: #334155; } |
| .context-menu-separator { height: 1px; background: #334155; margin: 4px 0; } |
| </style> |
| </head> |
| <body> |
| |
| <div class="h-10 bg-slate-900 border-b border-slate-700 flex items-center px-4 justify-between"> |
| <div class="flex items-center gap-4"> |
| <div class="flex items-center gap-2 text-blue-400 font-bold"> |
| <i data-lucide="code-2" class="w-5 h-5"></i> |
| <span>CodeMaster Pro</span> |
| </div> |
| <div class="flex items-center gap-2 text-sm"> |
| <button onclick="app.newFile()" class="px-3 py-1 hover:bg-slate-700 rounded flex items-center gap-1 transition"> |
| <i data-lucide="file-plus" class="w-4 h-4"></i> New File |
| </button> |
| <button onclick="app.newFolder()" class="px-3 py-1 hover:bg-slate-700 rounded flex items-center gap-1 transition"> |
| <i data-lucide="folder-plus" class="w-4 h-4"></i> New Folder |
| </button> |
| <button onclick="app.saveAll()" class="px-3 py-1 hover:bg-slate-700 rounded flex items-center gap-1 transition"> |
| <i data-lucide="save" class="w-4 h-4"></i> Save All |
| </button> |
| </div> |
| </div> |
| <div class="flex items-center gap-2 text-sm"> |
| <button onclick="app.toggleAI()" class="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded flex items-center gap-1 transition" id="ai-btn"> |
| <i data-lucide="brain" class="w-4 h-4"></i> AI Assistant |
| </button> |
| <button onclick="app.showRemotePreview()" class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded flex items-center gap-1 transition"> |
| <i data-lucide="smartphone" class="w-4 h-4"></i> Remote Preview |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="flex h-screen"> |
| |
| <div id="sidebar" class="w-64 bg-slate-900 border-r border-slate-700 flex flex-col" style="height: calc(100vh - 40px);"> |
| <div class="p-3 border-b border-slate-700 font-semibold text-sm flex justify-between items-center"> |
| <span>EXPLORER</span> |
| <i data-lucide="folder-tree" class="w-4 h-4 text-slate-400"></i> |
| </div> |
| <div id="file-tree" class="flex-1 overflow-y-auto p-2"> |
| |
| </div> |
| </div> |
|
|
| |
| <div class="resize-handle" onmousedown="app.startResize('sidebar')"></div> |
|
|
| |
| <div class="flex-1 flex flex-col bg-slate-950" style="height: calc(100vh - 40px);"> |
| |
| <div id="tabs" class="flex bg-slate-900 overflow-x-auto border-b border-slate-700" style="min-height: 35px;"> |
| |
| </div> |
|
|
| |
| <div class="flex-1 flex relative"> |
| <div id="editor-container" class="flex-1"></div> |
| |
| |
| <div id="ai-panel" class="w-0 bg-slate-900 border-l border-slate-700 overflow-hidden transition-all duration-300 flex flex-col"> |
| <div class="p-3 border-b border-slate-700 font-semibold text-sm flex justify-between items-center"> |
| <span>AI LEARNING</span> |
| <button onclick="app.toggleAI()" class="text-slate-400 hover:text-white"> |
| <i data-lucide="x" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <div class="flex-1 overflow-y-auto p-3"> |
| <div class="mb-4"> |
| <div class="text-xs text-slate-400 mb-1">Learning Status</div> |
| <div class="flex items-center gap-2"> |
| <div id="learning-indicator" class="w-2 h-2 bg-green-500 rounded-full learning-indicator"></div> |
| <span class="text-sm">Active</span> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="text-xs text-slate-400 mb-1">Coding Patterns Learned</div> |
| <div id="patterns-count" class="text-2xl font-bold text-purple-400">0</div> |
| </div> |
|
|
| <div class="mb-4"> |
| <div class="text-xs text-slate-400 mb-1">Confidence Level</div> |
| <div class="w-full bg-slate-700 rounded-full h-2"> |
| <div id="confidence-bar" class="bg-purple-500 h-2 rounded-full transition-all" style="width: 0%"></div> |
| </div> |
| <div id="confidence-text" class="text-right text-xs mt-1">0%</div> |
| </div> |
|
|
| <div class="mb-4"> |
| <div class="text-xs text-slate-400 mb-2">Frequent Snippets</div> |
| <div id="frequent-snippets" class="space-y-2"> |
| |
| </div> |
| </div> |
|
|
| <div class="mb-4"> |
| <div class="text-xs text-slate-400 mb-2">Suggestions History</div> |
| <div id="suggestions-history" class="space-y-1 text-xs"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="bottom-panel" class="h-48 bg-slate-900 border-t border-slate-700 flex flex-col"> |
| <div class="flex items-center justify-between px-3 py-2 border-b border-slate-700 bg-slate-800"> |
| <div class="flex items-center gap-4"> |
| <button onclick="app.switchPanel('console')" class="text-sm flex items-center gap-1 hover:text-blue-400 transition panel-tab active" data-panel="console"> |
| <i data-lucide="terminal" class="w-4 h-4"></i> Console |
| </button> |
| <button onclick="app.switchPanel('problems')" class="text-sm flex items-center gap-1 hover:text-blue-400 transition panel-tab" data-panel="problems"> |
| <i data-lucide="alert-circle" class="w-4 h-4"></i> Problems <span id="problem-count" class="bg-red-500 text-white text-xs px-1.5 rounded">0</span> |
| </button> |
| <button onclick="app.switchPanel('preview')" class="text-sm flex items-center gap-1 hover:text-blue-400 transition panel-tab" data-panel="preview"> |
| <i data-lucide="play" class="w-4 h-4"></i> Preview |
| </button> |
| </div> |
| <div class="flex items-center gap-2"> |
| <select id="primary-file" onchange="app.setPrimaryFile(this.value)" class="bg-slate-700 border border-slate-600 rounded px-2 py-1 text-sm"> |
| <option value="">Select Primary File</option> |
| </select> |
| <button onclick="app.toggleBottomPanel()" class="text-slate-400 hover:text-white"> |
| <i data-lucide="chevron-down" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div id="panel-content" class="flex-1 overflow-auto"> |
| |
| <div id="console-panel" class="panel-section h-full"> |
| <div id="console-output" class="h-full overflow-y-auto p-2"></div> |
| </div> |
| |
| |
| <div id="problems-panel" class="panel-section hidden h-full"> |
| <div id="problems-list" class="h-full overflow-y-auto p-2"></div> |
| </div> |
| |
| |
| <div id="preview-panel" class="panel-section hidden h-full relative"> |
| <iframe id="preview-frame" class="w-full h-full border-0 bg-white"></iframe> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="modal" class="modal"> |
| <div class="modal-content"> |
| <h3 id="modal-title" class="text-lg font-semibold mb-4">New File</h3> |
| <input type="text" id="modal-input" class="w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 mb-4 text-white placeholder-slate-400" placeholder="Enter name..."> |
| <div class="flex justify-end gap-2"> |
| <button onclick="app.closeModal()" class="px-4 py-2 hover:bg-slate-700 rounded transition">Cancel</button> |
| <button onclick="app.confirmModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded transition">Create</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="remote-modal" class="modal"> |
| <div class="modal-content"> |
| <h3 class="text-lg font-semibold mb-2">Remote Preview</h3> |
| <p class="text-sm text-slate-400 mb-4">Scan this QR code or open the URL on another device connected to the same Wi-Fi network.</p> |
| <div id="qrcode"></div> |
| <div class="text-center mb-4"> |
| <code id="preview-url" class="bg-slate-800 px-3 py-1 rounded text-sm break-all"></code> |
| </div> |
| <div class="flex justify-center"> |
| <button onclick="app.closeRemoteModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded transition">Close</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="context-menu" class="context-menu hidden"></div> |
|
|
| |
| <div id="ai-suggestion" class="ai-suggestion hidden"></div> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
