Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Editor - Replit Clone</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0088CC', | |
| secondary: '#1F2937' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h2 class="font-bold text-lg truncate" id="projectName">Project Name</h2> | |
| <p class="text-gray-400 text-sm">JavaScript</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded cursor-pointer" onclick="toggleFolder('src')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="folder" class="w-4 h-4 text-blue-400"></i> | |
| <span>src</span> | |
| </div> | |
| <i data-feather="chevron-down" class="w-4 h-4" id="src-chevron"></i> | |
| </div> | |
| <div class="ml-6" id="src-folder"> | |
| <div class="flex items-center gap-2 p-2 hover:bg-gray-700 rounded cursor-pointer" onclick="openFile('index.js')"> | |
| <i data-feather="file" class="w-4 h-4 text-yellow-400"></i> | |
| <span>index.js</span> | |
| </div> | |
| <div class="flex items-center gap-2 p-2 hover:bg-gray-700 rounded cursor-pointer" onclick="openFile('styles.css')"> | |
| <i data-feather="file" class="w-4 h-4 text-blue-400"></i> | |
| <span>styles.css</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-700 rounded cursor-pointer" onclick="toggleFolder('public')"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="folder" class="w-4 h-4 text-blue-400"></i> | |
| <span>public</span> | |
| </div> | |
| <i data-feather="chevron-down" class="w-4 h-4" id="public-chevron"></i> | |
| </div> | |
| <div class="ml-6" id="public-folder"> | |
| <div class="flex items-center gap-2 p-2 hover:bg-gray-700 rounded cursor-pointer" onclick="openFile('index.html')"> | |
| <i data-feather="file" class="w-4 h-4 text-green-400"></i> | |
| <span>index.html</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <button class="w-full bg-primary hover:bg-blue-600 text-white py-2 rounded-lg flex items-center justify-center gap-2" onclick="runCode()"> | |
| <i data-feather="play"></i> | |
| Run | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Editor Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Editor Tabs --> | |
| <div class="flex bg-gray-800 border-b border-gray-700"> | |
| <div class="px-4 py-2 bg-gray-700 border-r border-gray-600 flex items-center gap-2"> | |
| <i data-feather="file" class="w-4 h-4"></i> | |
| <span id="current-file">index.js</span> | |
| <i data-feather="x" class="w-4 h-4 cursor-pointer hover:bg-gray-600 rounded" onclick="closeTab()"></i> | |
| </div> | |
| <div class="px-4 py-2 flex items-center gap-2 text-gray-400 hover:bg-gray-700 cursor-pointer" onclick="newFile()"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <!-- Monaco Editor Container --> | |
| <div id="editor" class="flex-1"></div> | |
| <!-- Console Output --> | |
| <div class="h-48 bg-black border-t border-gray-700 flex flex-col"> | |
| <div class="flex items-center justify-between p-2 bg-gray-800"> | |
| <div class="flex items-center gap-4"> | |
| <span class="font-medium">Console</span> | |
| <div class="flex gap-2"> | |
| <button class="text-gray-400 hover:text-white" onclick="clearConsole()"> | |
| <i data-feather="terminal" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white" onclick="toggleConsoleView()"> | |
| <i data-feather="layers" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white" onclick="clearConsole()"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 p-2 font-mono text-sm overflow-y-auto" id="console-output"> | |
| <div class="text-green-400">$ npm start</div> | |
| <div>> Starting development server...</div> | |
| <div>> Compiled successfully!</div> | |
| <div>> Server running on http://localhost:3000</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <ai-agent></ai-agent> | |
| <div class="fixed bottom-4 right-20 z-50"> | |
| <button class="bg-primary hover:bg-blue-600 text-white p-3 rounded-full shadow-lg flex items-center justify-center" | |
| onclick="window.dispatchEvent(new CustomEvent('toggleAIChat'))"> | |
| <i data-feather="message-square"></i> | |
| </button> | |
| </div> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/ai-agent.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Global variables | |
| let editor; | |
| let currentFile = 'index.js'; | |
| let consoleOutput = document.getElementById('console-output'); | |
| // Initialize Monaco Editor | |
| require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs' }}); | |
| require(['vs/editor/editor.main'], function() { | |
| editor = monaco.editor.create(document.getElementById('editor'), { | |
| value: [ | |
| '// Welcome to Replit Clone!', | |
| '// Start coding your amazing project here.', | |
| '', | |
| 'console.log("Hello, World!");', | |
| '', | |
| 'function greet(name) {', | |
| ' return `Hello, ${name}!`;', | |
| '}', | |
| '', | |
| 'greet("Developer");' | |
| ].join('\n'), | |
| language: 'javascript', | |
| theme: 'vs-dark', | |
| automaticLayout: true, | |
| minimap: { | |
| enabled: false | |
| } | |
| }); | |
| }); | |
| // Update project name from URL params | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const projectName = urlParams.get('project') || urlParams.get('template') || 'New Project'; | |
| document.getElementById('projectName').textContent = projectName.charAt(0).toUpperCase() + projectName.slice(1); | |
| // Interactive functions | |
| function toggleFolder(folderName) { | |
| const folder = document.getElementById(`${folderName}-folder`); | |
| const chevron = document.getElementById(`${folderName}-chevron`); | |
| if (folder.style.display === 'none') { | |
| folder.style.display = 'block'; | |
| chevron.setAttribute('data-feather', 'chevron-down'); | |
| } else { | |
| folder.style.display = 'none'; | |
| chevron.setAttribute('data-feather', 'chevron-right'); | |
| } | |
| feather.replace(); | |
| } | |
| function openFile(filename) { | |
| currentFile = filename; | |
| document.getElementById('current-file').textContent = filename; | |
| // In a real app, this would load the file content | |
| if (editor) { | |
| if (filename.endsWith('.js')) { | |
| editor.setModelLanguage(editor.getModel(), 'javascript'); | |
| } else if (filename.endsWith('.css')) { | |
| editor.setModelLanguage(editor.getModel(), 'css'); | |
| } else if (filename.endsWith('.html')) { | |
| editor.setModelLanguage(editor.getModel(), 'html'); | |
| } | |
| } | |
| } | |
| function closeTab() { | |
| alert('Closing tab...'); | |
| } | |
| function newFile() { | |
| const filename = prompt('Enter new file name:'); | |
| if (filename) { | |
| alert(`Creating new file: ${filename}`); | |
| // In a real app, this would create a new file | |
| } | |
| } | |
| function runCode() { | |
| // Simulate code execution | |
| const output = document.createElement('div'); | |
| output.textContent = '> Code executed successfully!'; | |
| output.className = 'text-green-400'; | |
| consoleOutput.appendChild(output); | |
| consoleOutput.scrollTop = consoleOutput.scrollHeight; | |
| } | |
| function clearConsole() { | |
| consoleOutput.innerHTML = ''; | |
| } | |
| function toggleConsoleView() { | |
| alert('Toggling console view...'); | |
| } | |
| </script> | |
| </body> | |
| </html> | |