Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCanvas AI Studio</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#fdf4ff', | |
| 100: '#fae8ff', | |
| 200: '#f5d0fe', | |
| 300: '#f0abfc', | |
| 400: '#e879f9', | |
| 500: '#d946ef', | |
| 600: '#c026d3', | |
| 700: '#a21caf', | |
| 800: '#86198f', | |
| 900: '#701a75', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-mono overflow-hidden"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Filesystem Panel --> | |
| <div id="filesystem-panel" class="w-64 bg-gray-800 border-r border-gray-700 transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0"> | |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-primary-400">Explorer</h2> | |
| <button id="toggle-filesystem" class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| </div> | |
| <div class="p-2"> | |
| <button class="w-full flex items-center gap-2 p-2 rounded hover:bg-gray-700 text-primary-300"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| <span>New File</span> | |
| </button> | |
| <button class="w-full flex items-center gap-2 p-2 rounded hover:bg-gray-700 text-primary-300 mt-2"> | |
| <i data-feather="folder-plus" class="w-4 h-4"></i> | |
| <span>New Folder</span> | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="px-4 py-2 text-sm text-gray-400">PROJECT FILES</div> | |
| <div class="space-y-1"> | |
| <div class="file-item flex items-center gap-2 p-2 hover:bg-gray-700 cursor-pointer rounded mx-2"> | |
| <i data-feather="file-text" class="w-4 h-4 text-blue-400"></i> | |
| <span>index.js</span> | |
| </div> | |
| <div class="file-item flex items-center gap-2 p-2 hover:bg-gray-700 cursor-pointer rounded mx-2"> | |
| <i data-feather="file-text" class="w-4 h-4 text-green-400"></i> | |
| <span>styles.css</span> | |
| </div> | |
| <div class="file-item flex items-center gap-2 p-2 hover:bg-gray-700 cursor-pointer rounded mx-2"> | |
| <i data-feather="file-text" class="w-4 h-4 text-yellow-400"></i> | |
| <span>package.json</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col min-w-0"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center"> | |
| <div class="flex items-center gap-4"> | |
| <button id="mobile-menu" class="lg:hidden p-2 rounded hover:bg-gray-700"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h1 class="text-xl font-bold text-primary-400">CodeCanvas AI Studio</h1> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <button id="restore-filesystem" class="p-2 rounded hover:bg-gray-700 hidden"> | |
| <i data-feather="folder" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-700"> | |
| <i data-feather="play" class="w-4 h-4 text-green-400"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-700"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Editor and Preview Area --> | |
| <div class="flex-1 flex flex-col lg:flex-row overflow-hidden"> | |
| <!-- Code Editor --> | |
| <div class="flex-1 flex flex-col min-w-0"> | |
| <div class="bg-gray-800 border-b border-gray-700 p-2 flex gap-2"> | |
| <div class="bg-primary-500 text-white px-3 py-1 rounded text-sm">index.js</div> | |
| <div class="px-3 py-1 rounded text-sm text-gray-400 hover:bg-gray-700">styles.css</div> | |
| </div> | |
| <div id="editor" class="flex-1 min-h-0"></div> | |
| </div> | |
| <!-- Preview and Chat Area --> | |
| <div class="lg:w-96 flex flex-col border-l border-gray-700 flex-shrink-0"> | |
| <!-- Preview Panel --> | |
| <div class="flex-1 border-b border-gray-700 min-h-0"> | |
| <div class="bg-gray-800 p-3 border-b border-gray-700"> | |
| <h3 class="font-semibold text-primary-400">Preview</h3> | |
| </div> | |
| <div id="preview" class="p-4 h-full bg-white overflow-auto"> | |
| <div class="text-gray-600 text-center py-8">Code preview will appear here</div> | |
| </div> | |
| </div> | |
| <!-- Chat Panel --> | |
| <div class="h-96 min-h-0"> | |
| <div class="bg-gray-800 p-3 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="font-semibold text-secondary-400">AI Assistant</h3> | |
| <button class="p-1 rounded hover:bg-gray-700"> | |
| <i data-feather="message-circle" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="h-full flex flex-col"> | |
| <div id="chat-messages" class="flex-1 p-4 overflow-y-auto space-y-4 min-h-0"> | |
| <div class="bg-gray-800 rounded-lg p-3"> | |
| <div class="text-sm text-secondary-400">AI Assistant</div> | |
| <div class="mt-1 text-sm">Hello! I'm here to help with your code. What would you like to build today?</div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700"> | |
| <div class="flex gap-2"> | |
| <input type="text" placeholder="Ask about your code..." class="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm focus:outline-none focus:border-primary-500"> | |
| <button class="bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded text-sm"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Monaco Editor | |
| require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' }}); | |
| require(['vs/editor/editor.main'], function() { | |
| const editor = monaco.editor.create(document.getElementById('editor'), { | |
| value: `// Welcome to CodeCanvas AI Studio!\nconsole.log("Hello, World!");\n\nfunction fibonacci(n) {\n if (n <= 1) return n;\n return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\n// Try modifying this code and see the preview update!`, | |
| language: 'javascript', | |
| theme: 'vs-dark', | |
| minimap: { enabled: false }, | |
| fontSize: 14, | |
| lineHeight: 1.5, | |
| fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace' | |
| }); | |
| // Update preview on code change | |
| editor.onDidChangeModelContent(() => { | |
| updatePreview(editor.getValue()); | |
| }); | |
| // Initial preview update | |
| updatePreview(editor.getValue()); | |
| }); | |
| function updatePreview(code) { | |
| const preview = document.getElementById('preview'); | |
| try { | |
| // Simple code execution preview | |
| preview.innerHTML = ` | |
| <div class="p-4"> | |
| <h4 class="font-semibold mb-2">Output:</h4> | |
| <div class="bg-gray-100 p-3 rounded font-mono text-sm"> | |
| ${eval(code)} | |
| </div> | |
| </div> | |
| `; | |
| } catch (error) { | |
| preview.innerHTML = ` | |
| <div class="p-4 text-red-600"> | |
| <h4 class="font-semibold mb-2">Error:</h4> | |
| <div class="bg-red-50 p-3 rounded font-mono text-sm"> | |
| ${error.message} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Panel toggle functionality | |
| document.getElementById('toggle-filesystem').addEventListener('click', function() { | |
| const panel = document.getElementById('filesystem-panel'); | |
| const restoreButton = document.getElementById('restore-filesystem'); | |
| const isExpanded = panel.classList.contains('w-64'); | |
| if (isExpanded) { | |
| panel.classList.remove('w-64'); | |
| panel.classList.add('w-0', 'overflow-hidden', 'p-0', 'border-r-0'); | |
| restoreButton.classList.remove('hidden'); | |
| } else { | |
| panel.classList.remove('w-0', 'overflow-hidden', 'p-0', 'border-r-0'); | |
| panel.classList.add('w-64'); | |
| restoreButton.classList.add('hidden'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Restore filesystem panel from top bar | |
| document.getElementById('restore-filesystem').addEventListener('click', function() { | |
| const panel = document.getElementById('filesystem-panel'); | |
| const restoreButton = document.getElementById('restore-filesystem'); | |
| panel.classList.remove('w-0', 'overflow-hidden', 'p-0', 'border-r-0'); | |
| panel.classList.add('w-64'); | |
| restoreButton.classList.add('hidden'); | |
| feather.replace(); | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu').addEventListener('click', function() { | |
| const panel = document.getElementById('filesystem-panel'); | |
| panel.classList.toggle('hidden'); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |