Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aesthetic Code Editor</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script> | |
| <style> | |
| .editor-container { | |
| height: calc(100vh - 60px); | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #6366f1; | |
| color: #6366f1; | |
| } | |
| .tab-inactive { | |
| border-bottom: 2px solid transparent; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(99, 102, 241, 0.1); | |
| } | |
| .sidebar-item.active { | |
| background-color: rgba(99, 102, 241, 0.2); | |
| border-left: 3px solid #6366f1; | |
| } | |
| #editor { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| font-size: 14px; | |
| } | |
| .gutter { | |
| background-color: #1e1e2d; | |
| background-repeat: no-repeat; | |
| background-position: 50%; | |
| } | |
| .gutter.gutter-horizontal { | |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); | |
| cursor: col-resize; | |
| } | |
| .gutter.gutter-vertical { | |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); | |
| cursor: row-resize; | |
| } | |
| .split { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 h-screen overflow-hidden"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-800 h-12 flex items-center justify-between px-4 border-b border-gray-700"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-code text-indigo-500 text-xl mr-2"></i> | |
| <span class="font-bold text-lg">Aesthetic Editor</span> | |
| </div> | |
| <div class="hidden md:flex space-x-4 text-sm"> | |
| <button class="hover:text-indigo-400">File</button> | |
| <button class="hover:text-indigo-400">Edit</button> | |
| <button class="hover:text-indigo-400">View</button> | |
| <button class="hover:text-indigo-400">Terminal</button> | |
| <button class="hover:text-indigo-400">Help</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-play mr-1"></i> Run | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-share-alt mr-1"></i> Share | |
| </button> | |
| <div class="h-6 w-6 rounded-full bg-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex h-full"> | |
| <!-- Sidebar --> | |
| <div class="w-16 bg-gray-800 border-r border-gray-700 flex flex-col items-center py-4"> | |
| <button class="sidebar-item active w-full py-3 flex items-center justify-center"> | |
| <i class="fas fa-file-code text-lg"></i> | |
| </button> | |
| <button class="sidebar-item w-full py-3 flex items-center justify-center"> | |
| <i class="fas fa-search text-lg"></i> | |
| </button> | |
| <button class="sidebar-item w-full py-3 flex items-center justify-center"> | |
| <i class="fas fa-code-branch text-lg"></i> | |
| </button> | |
| <button class="sidebar-item w-full py-3 flex items-center justify-center"> | |
| <i class="fas fa-cog text-lg"></i> | |
| </button> | |
| <div class="mt-auto"> | |
| <button class="sidebar-item w-full py-3 flex items-center justify-center"> | |
| <i class="fas fa-question-circle text-lg"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- File Explorer --> | |
| <div class="w-48 bg-gray-800 border-r border-gray-700 hidden md:block"> | |
| <div class="p-3 border-b border-gray-700 flex justify-between items-center"> | |
| <span class="text-sm font-medium">EXPLORER</span> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="p-2"> | |
| <div class="flex items-center text-sm py-1 px-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-folder-open text-yellow-400 mr-2"></i> | |
| <span>Project</span> | |
| </div> | |
| <div class="ml-4 mt-1"> | |
| <div class="flex items-center text-sm py-1 px-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-file-code text-blue-400 mr-2"></i> | |
| <span>index.html</span> | |
| </div> | |
| <div class="flex items-center text-sm py-1 px-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-file-code text-purple-400 mr-2"></i> | |
| <span>styles.css</span> | |
| </div> | |
| <div class="flex items-center text-sm py-1 px-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-file-code text-green-400 mr-2"></i> | |
| <span>app.js</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editor Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Tabs --> | |
| <div class="bg-gray-800 border-b border-gray-700 flex overflow-x-auto"> | |
| <div class="flex"> | |
| <div class="tab-active px-4 py-2 flex items-center text-sm"> | |
| <i class="fas fa-file-code text-blue-400 mr-2"></i> | |
| <span>index.html</span> | |
| <button class="ml-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="tab-inactive px-4 py-2 flex items-center text-sm text-gray-400 hover:text-gray-200"> | |
| <i class="fas fa-file-code text-purple-400 mr-2"></i> | |
| <span>styles.css</span> | |
| <button class="ml-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="tab-inactive px-4 py-2 flex items-center text-sm text-gray-400 hover:text-gray-200"> | |
| <i class="fas fa-file-code text-green-400 mr-2"></i> | |
| <span>app.js</span> | |
| <button class="ml-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ml-auto px-3 flex items-center"> | |
| <button class="text-gray-400 hover:text-white mx-1"> | |
| <i class="fas fa-save"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white mx-1"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Editor and Terminal --> | |
| <div class="flex-1 flex flex-col"> | |
| <div class="editor-container relative"> | |
| <div id="editor"><!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>My Awesome Project</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="text-gradient">Welcome to My Editor</h1> | |
| <p>Start coding your amazing project here!</p> | |
| <button id="mainBtn">Click Me</button> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html></div> | |
| </div> | |
| <div class="gutter gutter-horizontal bg-gray-800 h-1 cursor-row-resize"></div> | |
| <div class="bg-gray-800 h-1/3 flex flex-col"> | |
| <div class="bg-gray-800 border-t border-gray-700 px-3 py-1 flex items-center"> | |
| <span class="text-sm font-medium">TERMINAL</span> | |
| <div class="ml-4 flex space-x-1"> | |
| <button class="text-xs px-2 py-1 rounded hover:bg-gray-700">Problems</button> | |
| <button class="text-xs px-2 py-1 rounded hover:bg-gray-700">Output</button> | |
| <button class="text-xs px-2 py-1 rounded hover:bg-gray-700">Debug Console</button> | |
| <button class="text-xs px-2 py-1 rounded bg-gray-700">Terminal</button> | |
| </div> | |
| <button class="ml-auto text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 p-2 overflow-auto font-mono text-sm bg-gray-900"> | |
| <div class="text-green-400">$ npm start</div> | |
| <div class="text-gray-400">Starting development server...</div> | |
| <div class="text-gray-400">Compiled successfully!</div> | |
| <div class="text-gray-400">You can now view my-app in the browser.</div> | |
| <div class="mt-2"> | |
| <div class="text-blue-400"> Local: http://localhost:3000</div> | |
| <div class="text-blue-400"> On Your Network: http://192.168.1.100:3000</div> | |
| </div> | |
| <div class="text-gray-400 mt-2">Note that the development build is not optimized.</div> | |
| <div class="text-gray-400">To create a production build, use npm run build.</div> | |
| <div class="mt-2 text-green-400">$</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="bg-gray-800 h-6 flex items-center justify-between px-3 text-xs border-t border-gray-700"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-code-branch text-gray-400 mr-1"></i> | |
| <span class="text-gray-300">main*</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-circle text-green-500 mr-1"></i> | |
| <span class="text-gray-300">Prettier</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-laptop-code text-gray-400 mr-1"></i> | |
| <span class="text-gray-300">JavaScript</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-gray-400 mr-1"></i> | |
| <span class="text-gray-300">UTF-8</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-terminal text-gray-400 mr-1"></i> | |
| <span class="text-gray-300">LF</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-gray-300">Ln 10, Col 15</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize ACE Editor | |
| const editor = ace.edit("editor"); | |
| editor.setTheme("ace/theme/tomorrow_night"); | |
| editor.session.setMode("ace/mode/html"); | |
| editor.setOptions({ | |
| fontSize: "13px", | |
| enableBasicAutocompletion: true, | |
| enableLiveAutocompletion: true, | |
| showPrintMargin: false, | |
| highlightActiveLine: true, | |
| tabSize: 2 | |
| }); | |
| // Add gutter for resizing | |
| function initGutter() { | |
| const gutter = document.querySelector('.gutter'); | |
| const editorContainer = document.querySelector('.editor-container'); | |
| const terminal = document.querySelector('.bg-gray-800.h-1\\/3'); | |
| function drag(e) { | |
| document.body.style.cursor = 'row-resize'; | |
| const editorHeight = e.clientY - editorContainer.getBoundingClientRect().top; | |
| const terminalHeight = terminal.parentElement.offsetHeight - editorHeight - 1; | |
| editorContainer.style.height = `${editorHeight}px`; | |
| terminal.style.height = `${terminalHeight}px`; | |
| } | |
| function stopDrag() { | |
| document.body.style.cursor = ''; | |
| document.removeEventListener('mousemove', drag); | |
| document.removeEventListener('mouseup', stopDrag); | |
| } | |
| gutter.addEventListener('mousedown', (e) => { | |
| e.preventDefault(); | |
| document.addEventListener('mousemove', drag); | |
| document.addEventListener('mouseup', stopDrag); | |
| }); | |
| } | |
| // Initialize sidebar items | |
| function initSidebar() { | |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); | |
| sidebarItems.forEach(item => { | |
| item.addEventListener('click', () => { | |
| sidebarItems.forEach(i => i.classList.remove('active')); | |
| item.classList.add('active'); | |
| }); | |
| }); | |
| } | |
| // Initialize tabs | |
| function initTabs() { | |
| const tabs = document.querySelectorAll('.tab-inactive, .tab-active'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', (e) => { | |
| if (e.target.classList.contains('fa-times')) return; | |
| tabs.forEach(t => { | |
| t.classList.remove('tab-active'); | |
| t.classList.add('tab-inactive'); | |
| }); | |
| tab.classList.remove('tab-inactive'); | |
| tab.classList.add('tab-active'); | |
| // Change editor mode based on file type | |
| const fileName = tab.querySelector('span').textContent; | |
| if (fileName.endsWith('.html')) { | |
| editor.session.setMode("ace/mode/html"); | |
| } else if (fileName.endsWith('.css')) { | |
| editor.session.setMode("ace/mode/css"); | |
| } else if (fileName.endsWith('.js')) { | |
| editor.session.setMode("ace/mode/javascript"); | |
| } | |
| }); | |
| }); | |
| } | |
| // Initialize everything when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initGutter(); | |
| initSidebar(); | |
| initTabs(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Utkarsh65447/code-editor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |