Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VS Code Clone</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://unpkg.com/monaco-editor@0.36.1/min/vs/loader.js"></script> | |
| <style> | |
| .monaco-editor { | |
| width: 100%; | |
| height: calc(100vh - 40px); | |
| } | |
| .file:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .active-file { | |
| background-color: rgba(30, 144, 255, 0.2); | |
| } | |
| .tab.active { | |
| background-color: #1e1e1e; | |
| border-top: 2px solid #007acc; | |
| } | |
| .tab:hover:not(.active) { | |
| background-color: #2a2d2e; | |
| } | |
| .resize-handle { | |
| width: 4px; | |
| cursor: col-resize; | |
| transition: background-color 0.2s; | |
| } | |
| .resize-handle:hover { | |
| background-color: #007acc; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e1e1e; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #3c3c3c; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 h-screen overflow-hidden"> | |
| <div class="flex flex-col h-full"> | |
| <!-- Title Bar --> | |
| <div class="bg-gray-800 px-4 py-2 flex items-center justify-between border-b border-gray-700"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-code text-blue-400 mr-2"></i> | |
| <span class="font-semibold">VS Code Clone</span> | |
| </div> | |
| <div class="hidden md:flex space-x-4 text-sm"> | |
| <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">File</span> | |
| <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Edit</span> | |
| <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">View</span> | |
| <span class="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Help</span> | |
| </div> | |
| </div> | |
| <div class="text-sm"> | |
| <span class="px-2">index.html</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <i class="fas fa-window-minimize cursor-pointer hover:text-gray-400"></i> | |
| <i class="fas fa-window-maximize cursor-pointer hover:text-gray-400"></i> | |
| <i class="fas fa-times cursor-pointer hover:text-red-400"></i> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="flex"> | |
| <!-- Activity Bar --> | |
| <div class="bg-gray-800 w-12 flex flex-col items-center py-4 space-y-6"> | |
| <div class="p-2 rounded hover:bg-gray-700 cursor-pointer text-blue-400"> | |
| <i class="fas fa-file-code"></i> | |
| </div> | |
| <div class="p-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <div class="p-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-code-branch"></i> | |
| </div> | |
| <div class="p-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-bug"></i> | |
| </div> | |
| <div class="p-2 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| </div> | |
| <!-- Explorer --> | |
| <div id="explorer" class="bg-gray-800 w-64 flex flex-col border-r border-gray-700 overflow-y-auto"> | |
| <div class="px-4 py-3 font-medium flex justify-between items-center"> | |
| <span>EXPLORER</span> | |
| <i class="fas fa-ellipsis-h cursor-pointer hover:bg-gray-700 p-1 rounded"></i> | |
| </div> | |
| <div class="px-2 py-1"> | |
| <div class="flex items-center px-2 py-1 rounded hover:bg-gray-700 cursor-pointer"> | |
| <i class="fas fa-chevron-down text-xs mr-2 w-4"></i> | |
| <i class="fas fa-folder-open text-yellow-400 mr-2"></i> | |
| <span>project</span> | |
| </div> | |
| <div id="file-tree" class="pl-6"> | |
| <!-- Files will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resize Handle --> | |
| <div class="resize-handle" id="resize-handle"></div> | |
| <!-- Editor Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Tabs --> | |
| <div id="tabs" class="bg-gray-800 flex items-center overflow-x-auto border-b border-gray-700"> | |
| <!-- Tabs will be added here --> | |
| </div> | |
| <!-- Editor --> | |
| <div id="editor-container" class="flex-1 overflow-hidden"> | |
| <div id="editor" class="monaco-editor"></div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="bg-blue-600 text-white px-4 py-1 flex justify-between text-xs"> | |
| <div class="flex space-x-4"> | |
| <span><i class="fas fa-code-branch mr-1"></i> main</span> | |
| <span><i class="fas fa-check-circle mr-1"></i> Prettier</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <span>UTF-8</span> | |
| <span>LF</span> | |
| <span>HTML</span> | |
| <span><i class="fas fa-wifi"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sample React project structure | |
| const fileStructure = [ | |
| { name: 'package.json', type: 'file', icon: 'fas fa-file-code', language: 'json' }, | |
| { name: 'README.md', type: 'file', icon: 'fab fa-markdown', language: 'markdown' }, | |
| { name: 'public', type: 'folder', children: [ | |
| { name: 'index.html', type: 'file', icon: 'fab fa-html5', language: 'html' }, | |
| { name: 'favicon.ico', type: 'file', icon: 'far fa-image', language: 'plaintext' }, | |
| { name: 'manifest.json', type: 'file', icon: 'fas fa-file-code', language: 'json' } | |
| ]}, | |
| { | |
| name: 'src', | |
| type: 'folder', | |
| children: [ | |
| { name: 'index.js', type: 'file', icon: 'fab fa-js', language: 'javascript' }, | |
| { name: 'App.js', type: 'file', icon: 'fab fa-react', language: 'javascript' }, | |
| { name: 'App.css', type: 'file', icon: 'fab fa-css3-alt', language: 'css' }, | |
| { | |
| name: 'components', | |
| type: 'folder', | |
| children: [ | |
| { name: 'Header.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' }, | |
| { name: 'Footer.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' }, | |
| { name: 'MainContent.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' } | |
| ] | |
| }, | |
| { | |
| name: 'pages', | |
| type: 'folder', | |
| children: [ | |
| { name: 'Home.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' }, | |
| { name: 'About.jsx', type: 'file', icon: 'fab fa-react', language: 'javascript' } | |
| ] | |
| }, | |
| { name: 'assets', type: 'folder', children: [ | |
| { name: 'images', type: 'folder', children: [ | |
| { name: 'logo.svg', type: 'file', icon: 'far fa-image', language: 'plaintext' } | |
| ]}, | |
| { name: 'styles', type: 'folder', children: [ | |
| { name: 'global.css', type: 'file', icon: 'fab fa-css3-alt', language: 'css' }, | |
| { name: 'theme.css', type: 'file', icon: 'fab fa-css3-alt', language: 'css' } | |
| ]} | |
| ]} | |
| ] | |
| }, | |
| { name: 'node_modules', type: 'folder', icon: 'fas fa-folder', children: [] } | |
| ]; | |
| // Sample file content | |
| const fileContents = { | |
| 'index.html': `<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VS Code Clone</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <h1>VS Code Clone</h1> | |
| <p>This is a VS Code clone built with Monaco editor</p> | |
| </div> | |
| <script src="app.js"></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=onigetoc/vs-code-editor-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |