Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Code Editor - CodeCollab Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css"> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="pt-20 h-screen flex flex-col"> | |
| <!-- Toolbar --> | |
| <header class="bg-gray-800 border-b border-gray-700 px-4 py-2"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <select id="languageSelect" class="bg-gray-700 text-gray-100 px-3 py-1 rounded border border-gray-600 focus:outline-none focus:border-indigo-500"> | |
| <option value="javascript">JavaScript</option> | |
| <option value="python">Python</option> | |
| <option value="xml">HTML</option> | |
| <option value="css">CSS</option> | |
| </select> | |
| <button id="runButton" class="bg-green-600 hover:bg-green-700 px-4 py-1 rounded flex items-center space-x-2 transition"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| <span>Run</span> | |
| </button> | |
| <button id="shareButton" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-1 rounded flex items-center space-x-2 transition"> | |
| <i data-feather="share-2" class="w-4 h-4"></i> | |
| <span>Share</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-400">Auto-saved</span> | |
| <div class="w-2 h-2 bg-green-500 rounded-full"></div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex flex-col h-full"> | |
| <!-- Editor and Output --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <!-- Code Editor --> | |
| <div class="flex-1 flex flex-col"> | |
| <div class="bg-gray-800 px-4 py-2 border-b border-gray-700 flex items-center justify-between"> | |
| <span class="text-sm font-medium">main.js</span> | |
| <div class="flex items-center space-x-4 text-sm text-gray-400"> | |
| <span>Line 1, Col 1</span> | |
| <span>UTF-8</span> | |
| <span>LF</span> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-hidden"> | |
| <textarea id="codeEditor" class="h-full">// Welcome to CodeCollab Pro Editor! | |
| function greet(name) { | |
| console.log(`Hello, ${name}! Welcome to CodeCollab Pro.`); | |
| } | |
| greet('Developer');</textarea> | |
| </div> | |
| </div> | |
| <!-- Console/Output --> | |
| <div class="w-96 bg-gray-800 border-l border-gray-700 flex flex-col"> | |
| <div class="px-4 py-2 border-b border-gray-700 flex items-center justify-between"> | |
| <span class="text-sm font-medium">Console</span> | |
| <button id="clearConsole" class="text-gray-400 hover:text-gray-200"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div id="console" class="flex-1 p-4 overflow-y-auto font-mono text-sm"> | |
| <div class="text-gray-500">Console output will appear here...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal Section --> | |
| <div class="h-48 bg-gray-900 border-t border-gray-700 flex flex-col"> | |
| <div class="px-4 py-2 border-b border-gray-700 flex items-center justify-between"> | |
| <span class="text-sm font-medium text-gray-300">Terminal</span> | |
| <div class="flex items-center space-x-2"> | |
| <button id="terminalClear" class="text-gray-400 hover:text-gray-200"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| <select id="terminalShell" class="bg-gray-700 text-gray-300 px-2 py-1 rounded text-xs"> | |
| <option value="bash">bash</option> | |
| <option value="powershell">powershell</option> | |
| <option value="cmd">cmd</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="terminal" class="flex-1 p-3 overflow-y-auto font-mono text-sm text-gray-300"> | |
| <div class="terminal-line"> | |
| <span class="text-green-400">$</span> | |
| <span class="ml-2">Welcome to CodeCollab Pro Terminal</span> | |
| </div> | |
| <div class="terminal-input flex items-center mt-1"> | |
| <span class="text-green-400">$</span> | |
| <input type="text" id="terminalInput" class="ml-2 bg-transparent outline-none flex-1" placeholder="Type a command..."> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Collaborators Bar --> | |
| <div class="bg-gray-800 border-t border-gray-700 px-4 py-2"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-400">Active collaborators:</span> | |
| <div class="flex -space-x-2"> | |
| <div class="w-8 h-8 bg-indigo-500 rounded-full flex items-center justify-center text-xs font-bold border-2 border-gray-800"> | |
| A | |
| </div> | |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-xs font-bold border-2 border-gray-800"> | |
| B | |
| </div> | |
| <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-xs font-bold border-2 border-gray-800"> | |
| C | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2 text-sm text-gray-400"> | |
| <i data-feather="lock" class="w-4 h-4"></i> | |
| <span>Secure execution environment</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Initialize CodeMirror | |
| const editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), { | |
| lineNumbers: true, | |
| theme: 'monokai', | |
| mode: 'javascript', | |
| autoCloseBrackets: true, | |
| matchBrackets: true, | |
| indentUnit: 2, | |
| tabSize: 2, | |
| lineWrapping: true | |
| }); | |
| // Language switcher | |
| document.getElementById('languageSelect').addEventListener('change', (e) => { | |
| const mode = e.target.value; | |
| editor.setOption('mode', mode); | |
| // Update sample code based on language | |
| const samples = { | |
| javascript: '// Welcome to CodeCollab Pro Editor!\nfunction greet(name) {\n console.log(`Hello, ${name}! Welcome to CodeCollab Pro.`);\n}\n\ngreet(\'Developer\');', | |
| python: '# Welcome to CodeCollab Pro Editor!\ndef greet(name):\n print(f"Hello, {name}! Welcome to CodeCollab Pro.")\n\ngreet("Developer")', | |
| xml: '<!DOCTYPE html>\n<html>\n<head>\n <title>CodeCollab Pro</title>\n</head>\n<body>\n <h1>Welcome to CodeCollab Pro!</h1>\n</body>\n</html>', | |
| css: '/* Welcome to CodeCollab Pro Editor */\nbody {\n font-family: Arial, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n margin: 0;\n padding: 20px;\n}' | |
| }; | |
| if (samples[mode]) { | |
| editor.setValue(samples[mode]); | |
| } | |
| }); | |
| // Run button functionality | |
| document.getElementById('runButton').addEventListener('click', () => { | |
| const consoleEl = document.getElementById('console'); | |
| const code = editor.getValue(); | |
| const language = document.getElementById('languageSelect').value; | |
| consoleEl.innerHTML = '<div class="text-yellow-400">Running code...</div>'; | |
| // Simulate code execution | |
| setTimeout(() => { | |
| if (language === 'javascript') { | |
| try { | |
| // Capture console.log output | |
| const logs = []; | |
| const originalLog = console.log; | |
| console.log = (...args) => { | |
| logs.push(args.join(' ')); | |
| }; | |
| // Execute code | |
| eval(code); | |
| // Restore original console.log | |
| console.log = originalLog; | |
| // Display output | |
| if (logs.length > 0) { | |
| consoleEl.innerHTML = logs.map(log => | |
| `<div class="text-gray-300">${log}</div>` | |
| ).join(''); | |
| } else { | |
| consoleEl.innerHTML = '<div class="text-gray-500">Code executed successfully (no output)</div>'; | |
| } | |
| } catch (error) { | |
| consoleEl.innerHTML = `<div class="text-red-400">Error: ${error.message}</div>`; | |
| } | |
| } else { | |
| consoleEl.innerHTML = ` | |
| <div class="text-gray-300">Code executed successfully!</div> | |
| <div class="text-gray-500 text-xs mt-2">(Note: Only JavaScript execution is simulated in this demo)</div> | |
| `; | |
| } | |
| }, 1000); | |
| }); | |
| // Clear console | |
| document.getElementById('clearConsole').addEventListener('click', () => { | |
| document.getElementById('console').innerHTML = '<div class="text-gray-500">Console cleared.</div>'; | |
| }); | |
| // Share button | |
| document.getElementById('shareButton').addEventListener('click', () => { | |
| const shareUrl = window.location.href; | |
| navigator.clipboard.writeText(shareUrl).then(() => { | |
| const button = document.getElementById('shareButton'); | |
| const originalContent = button.innerHTML; | |
| button.innerHTML = '<i data-feather="check" class="w-4 h-4"></i><span>Link Copied!</span>'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| button.innerHTML = originalContent; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| }); | |
| // Auto-save simulation | |
| let saveTimeout; | |
| editor.on('change', () => { | |
| clearTimeout(saveTimeout); | |
| const autoSavedIndicator = document.querySelector('.text-gray-400'); | |
| autoSavedIndicator.textContent = 'Saving...'; | |
| autoSavedIndicator.nextElementSibling.classList.remove('bg-green-500'); | |
| autoSavedIndicator.nextElementSibling.classList.add('bg-yellow-500'); | |
| saveTimeout = setTimeout(() => { | |
| autoSavedIndicator.textContent = 'Auto-saved'; | |
| autoSavedIndicator.nextElementSibling.classList.remove('bg-yellow-500'); | |
| autoSavedIndicator.nextElementSibling.classList.add('bg-green-500'); | |
| }, 2000); | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |