Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeEditor Pro - Modern Web IDE</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --bg-primary: #0d1117; | |
| --bg-secondary: #161b22; | |
| --bg-tertiary: #21262d; | |
| --bg-hover: #30363d; | |
| --bg-active: #1f2428; | |
| --text-primary: #c9d1d9; | |
| --text-secondary: #8b949e; | |
| --text-muted: #484f58; | |
| --border-color: #30363d; | |
| --accent: #58a6ff; | |
| --accent-hover: #79c0ff; | |
| --success: #3fb950; | |
| --warning: #d29922; | |
| --error: #f85149; | |
| --sidebar-width: 240px; | |
| --header-height: 40px; | |
| --status-height: 25px; | |
| } | |
| body.light-theme { | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f6f8fa; | |
| --bg-tertiary: #ffffff; | |
| --bg-hover: #f3f4f6; | |
| --bg-active: #e5e7eb; | |
| --text-primary: #24292f; | |
| --text-secondary: #656d76; | |
| --text-muted: #8b949e; | |
| --border-color: #d0d7de; | |
| --accent: #0969da; | |
| --accent-hover: #0b5cad; | |
| --success: #1a7f37; | |
| --warning: #9a6700; | |
| --error: #d1242f; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header */ | |
| .header { | |
| background: var(--bg-secondary); | |
| height: var(--header-height); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 12px; | |
| border-bottom: 1px solid var(--border-color); | |
| flex-shrink: 0; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .header-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| padding: 4px 8px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: all 0.2s; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .header-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .logo { | |
| font-weight: 600; | |
| font-size: 14px; | |
| color: var(--accent); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .logo:hover { | |
| color: var(--accent-hover); | |
| } | |
| /* Main Layout */ | |
| .main-container { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-secondary); | |
| border-right: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| margin-left: calc(var(--sidebar-width) * -1); | |
| } | |
| .sidebar-header { | |
| padding: 12px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .sidebar-title { | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| letter-spacing: 0.5px; | |
| font-weight: 600; | |
| } | |
| .file-tree { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 4px; | |
| } | |
| .file-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 4px 8px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: background 0.2s; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .file-item:hover { | |
| background: var(--bg-hover); | |
| } | |
| .file-item.active { | |
| background: var(--bg-hover); | |
| color: var(--accent); | |
| } | |
| .file-icon { | |
| width: 16px; | |
| margin-right: 8px; | |
| color: var(--text-muted); | |
| } | |
| .file-name { | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* Editor Area */ | |
| .editor-area { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--bg-primary); | |
| } | |
| .tabs-container { | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| overflow-x: auto; | |
| flex-shrink: 0; | |
| } | |
| .tab { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px 12px; | |
| background: var(--bg-tertiary); | |
| border-right: 1px solid var(--border-color); | |
| cursor: pointer; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| transition: all 0.2s; | |
| position: relative; | |
| } | |
| .tab:hover { | |
| background: var(--bg-hover); | |
| } | |
| .tab.active { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| } | |
| .tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--accent); | |
| } | |
| .tab-close { | |
| margin-left: 8px; | |
| padding: 2px; | |
| border-radius: 3px; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .tab:hover .tab-close { | |
| opacity: 1; | |
| } | |
| .tab-close:hover { | |
| background: var(--bg-hover); | |
| } | |
| .editor-wrapper { | |
| flex: 1; | |
| display: flex; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .line-numbers { | |
| width: 50px; | |
| background: var(--bg-secondary); | |
| border-right: 1px solid var(--border-color); | |
| padding: 12px 0; | |
| text-align: right; | |
| color: var(--text-muted); | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| user-select: none; | |
| overflow: hidden; | |
| } | |
| .line-number { | |
| padding: 0 10px; | |
| height: 21px; | |
| } | |
| .code-editor { | |
| flex: 1; | |
| padding: 12px; | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| overflow-y: auto; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .code-editor::-webkit-scrollbar { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| .code-editor::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| } | |
| .code-editor::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 5px; | |
| } | |
| .code-editor::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| /* Status Bar */ | |
| .status-bar { | |
| height: var(--status-height); | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 12px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| gap: 16px; | |
| } | |
| .status-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .status-separator { | |
| width: 1px; | |
| height: 12px; | |
| background: var(--border-color); | |
| } | |
| /* Command Palette */ | |
| .command-palette { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 600px; | |
| max-width: 90%; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); | |
| display: none; | |
| z-index: 1000; | |
| overflow: hidden; | |
| } | |
| .command-palette.active { | |
| display: block; | |
| } | |
| .command-input { | |
| width: 100%; | |
| padding: 12px; | |
| background: var(--bg-primary); | |
| border: none; | |
| outline: none; | |
| font-size: 14px; | |
| color: var(--text-primary); | |
| } | |
| .command-list { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .command-item { | |
| padding: 8px 12px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: background 0.2s; | |
| } | |
| .command-item:hover { | |
| background: var(--bg-hover); | |
| } | |
| .command-item.selected { | |
| background: var(--bg-hover); | |
| } | |
| .command-key { | |
| margin-left: auto; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| background: var(--bg-secondary); | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| } | |
| /* Terminal */ | |
| .terminal { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 200px; | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| display: none; | |
| flex-direction: column; | |
| z-index: 10; | |
| } | |
| .terminal.active { | |
| display: flex; | |
| } | |
| .terminal-header { | |
| background: var(--bg-tertiary); | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 12px; | |
| } | |
| .terminal-body { | |
| flex: 1; | |
| padding: 8px; | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 13px; | |
| overflow-y: auto; | |
| color: var(--text-primary); | |
| } | |
| .terminal-input { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .terminal-prompt { | |
| color: var(--accent); | |
| } | |
| .terminal-input input { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| outline: none; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: inherit; | |
| } | |
| /* Floating Action Button */ | |
| .fab { | |
| position: fixed; | |
| bottom: 40px; | |
| right: 20px; | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| transition: all 0.3s; | |
| z-index: 100; | |
| } | |
| .fab:hover { | |
| transform: scale(1.1); | |
| background: var(--accent-hover); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: fixed; | |
| z-index: 100; | |
| height: 100%; | |
| box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| } | |
| .command-palette { | |
| width: 95%; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| display: inline-block; | |
| width: 14px; | |
| height: 14px; | |
| border: 2px solid var(--text-muted); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.2s; | |
| border: 1px solid var(--border-color); | |
| margin-bottom: 4px; | |
| } | |
| .tooltip:hover::after { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <button class="header-btn" id="menuToggle" data-tooltip="Toggle Sidebar"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo" target="_blank"> | |
| <i class="fas fa-code"></i> | |
| CodeEditor Pro | |
| </a> | |
| <span style="color: var(--text-muted); font-size: 12px;">| Built with anycoder</span> | |
| </div> | |
| <div class="header-right"> | |
| <button class="header-btn tooltip" data-tooltip="New File" onclick="newFile()"> | |
| <i class="fas fa-file-plus"></i> | |
| </button> | |
| <button class="header-btn tooltip" data-tooltip="Save" onclick="saveFile()"> | |
| <i class="fas fa-save"></i> | |
| </button> | |
| <button class="header-btn tooltip" data-tooltip="Find" onclick="toggleSearch()"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="header-btn tooltip" data-tooltip="Run Code" onclick="runCode()"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="header-btn tooltip" data-tooltip="Toggle Terminal" onclick="toggleTerminal()"> | |
| <i class="fas fa-terminal"></i> | |
| </button> | |
| <button class="header-btn tooltip" data-tooltip="Toggle Theme" onclick="toggleTheme()"> | |
| <i class="fas fa-moon" id="themeIcon"></i> | |
| </button> | |
| <button class="header-btn tooltip" data-tooltip="Command Palette" onclick="toggleCommandPalette()"> | |
| <i class="fas fa-command"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="main-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <span class="sidebar-title">Explorer</span> | |
| <button class="header-btn" onclick="createNewFile()"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="file-tree" id="fileTree"> | |
| <div class="file-item active" onclick="selectFile(this, 'index.html')"> | |
| <i class="fas fa-file-code file-icon"></i> | |
| <span class="file-name">index.html</span> | |
| </div> | |
| <div class="file-item" onclick="selectFile(this, 'style.css')"> | |
| <i class="fas fa-file-code file-icon"></i> | |
| <span class="file-name">style.css</span> | |
| </div> | |
| <div class="file-item" onclick="selectFile(this, 'script.js')"> | |
| <i class="fas fa-file-code file-icon"></i> | |
| <span class="file-name">script.js</span> | |
| </div> | |
| <div class="file-item" onclick="selectFile(this, 'README.md')"> | |
| <i class="fas fa-file-alt file-icon"></i> | |
| <span class="file-name">README.md</span> | |
| </div> | |
| <div class="file-item" onclick="selectFile(this, 'package.json')"> | |
| <i class="fas fa-file-code file-icon"></i> | |
| <span class="file-name">package.json</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Editor Area --> | |
| <div class="editor-area"> | |
| <!-- Tabs --> | |
| <div class="tabs-container" id="tabsContainer"> | |
| <div class="tab active" onclick="switchTab(this, 'index.html')"> | |
| <i class="fas fa-file-code"></i> | |
| <span>index.html</span> | |
| <i class="fas fa-times tab-close" onclick="closeTab(event, this)"></i> | |
| </div> | |
| </div> | |
| <!-- Editor --> | |
| <div class="editor-wrapper"> | |
| <div class="line-numbers" id="lineNumbers"> | |
| <div class="line-number">1</div> | |
| </div> | |
| <textarea class="code-editor" id="codeEditor" spellcheck="false" placeholder="Start typing your code here..." oninput="updateLineNumbers()"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="status-bar"> | |
| <div class="status-item"> | |
| <i class="fas fa-code-branch"></i> | |
| <span>main</span> | |
| </div> | |
| <div class="status-separator"></div> | |
| <div class="status-item"> | |
| <span>Ln 1, Col 1</span> | |
| </div> | |
| <div class="status-separator"></div> | |
| <div class="status-item"> | |
| <span>Spaces: 2</span> | |
| </div> | |
| <div class="status-separator"></div> | |
| <div class="status-item"> | |
| <span>UTF-8</span> | |
| </div> | |
| <div class="status-separator"></div> | |
| <div class="status-item"> | |
| <span id="savedStatus">✓ Saved</span> | |
| </div> | |
| </div> | |
| <!-- Command Palette --> | |
| <div class="command-palette" id="commandPalette"> | |
| <input type="text" class="command-input" id="commandInput" placeholder="Type a command or search..."> | |
| <div class="command-list"> | |
| <div class="command-item" onclick="executeCommand('newFile')"> | |
| <i class="fas fa-file-plus"></i> | |
| <span>New File</span> | |
| <span class="command-key">Ctrl+N</span> | |
| </div> | |
| <div class="command-item" onclick="executeCommand('save')"> | |
| <i class="fas fa-save"></i> | |
| <span>Save</span> | |
| <span class="command-key">Ctrl+S</span> | |
| </div> | |
| <div class="command-item" onclick="executeCommand('find')"> | |
| <i class="fas fa-search"></i> | |
| <span>Find</span> | |
| <span class="command-key">Ctrl+F</span> | |
| </div> | |
| <div class="command-item" onclick="executeCommand('run')"> | |
| <i class="fas fa-play"></i> | |
| <span>Run Code</span> | |
| <span class="command-key">F5</span> | |
| </div> | |
| <div class="command-item" onclick="executeCommand('theme')"> | |
| <i class="fas fa-moon"></i> | |
| <span>Toggle Theme</span> | |
| <span class="command-key">Ctrl+T</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal --> | |
| <div class="terminal" id="terminal"> | |
| <div class="terminal-header"> | |
| <span>Terminal</span> | |
| <button class="header-btn" onclick="toggleTerminal()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="terminal-body" id="terminalBody"> | |
| <div>Welcome to CodeEditor Pro Terminal v1.0.0</div> | |
| <div>Type 'help' for available commands</div> | |
| <br> | |
| </div> | |
| <div class="terminal-input"> | |
| <span class="terminal-prompt">$</span> | |
| <input type="text" id="terminalInput" placeholder="Enter command..." onkeypress="handleTerminalInput(event)"> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <button class="fab" onclick="quickAction()"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <script> | |