Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Code Playground | Build & Preview Apps</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .code-editor { | |
| height: 400px; | |
| } | |
| .preview-frame { | |
| height: 400px; | |
| background: white; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| .monaco-editor { | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2" data-aos="fade-down">Code Playground</h1> | |
| <p class="text-gray-600" data-aos="fade-up">Build, test and preview your web apps in real-time</p> | |
| </header> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="zoom-in"> | |
| <div class="flex border-b"> | |
| <button id="html-tab" class="px-6 py-3 font-medium tab-active">HTML</button> | |
| <button id="css-tab" class="px-6 py-3 font-medium text-gray-500">CSS</button> | |
| <button id="js-tab" class="px-6 py-3 font-medium text-gray-500">JavaScript</button> | |
| <div class="ml-auto flex items-center pr-4"> | |
| <button id="run-btn" class="flex items-center bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md"> | |
| <i data-feather="play" class="mr-2 w-4 h-4"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4"> | |
| <div class="code-editor"> | |
| <div class="flex mb-2"> | |
| <div class="flex space-x-1"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <textarea id="html-editor" class="w-full h-full border rounded p-4 font-mono text-sm" spellcheck="false"> | |
| <html> | |
| <head> | |
| <title>My App</title> | |
| </head> | |
| <body> | |
| <h1>Welcome to Code Playground</h1> | |
| <p>Start coding here!</p> | |
| </body> | |
| </html></textarea> | |
| <textarea id="css-editor" class="w-full h-full border rounded p-4 font-mono text-sm hidden" spellcheck="false">/* Add your CSS here */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| line-height: 1.6; | |
| }</textarea> | |
| <textarea id="js-editor" class="w-full h-full border rounded p-4 font-mono text-sm hidden" spellcheck="false">// Add your JavaScript here | |
| console.log('Hello from Code Playground!');</textarea> | |
| </div> | |
| <div class="preview-frame"> | |
| <iframe id="preview" class="w-full h-full border rounded"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i data-feather="code" class="text-blue-500"></i> | |
| </div> | |
| <h3 class="font-semibold">Real-time Preview</h3> | |
| </div> | |
| <p class="text-gray-600">See your changes instantly as you code with our live preview feature.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i data-feather="edit-3" class="text-purple-500"></i> | |
| </div> | |
| <h3 class="font-semibold">Multiple Editors</h3> | |
| </div> | |
| <p class="text-gray-600">Separate editors for HTML, CSS and JavaScript for better organization.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i data-feather="download" class="text-green-500"></i> | |
| </div> | |
| <h3 class="font-semibold">Export Options</h3> | |
| </div> | |
| <p class="text-gray-600">Download your project as a ZIP file or copy the code to clipboard.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Tab switching functionality | |
| const htmlTab = document.getElementById('html-tab'); | |
| const cssTab = document.getElementById('css-tab'); | |
| const jsTab = document.getElementById('js-tab'); | |
| const htmlEditor = document.getElementById('html-editor'); | |
| const cssEditor = document.getElementById('css-editor'); | |
| const jsEditor = document.getElementById('js-editor'); | |
| const runBtn = document.getElementById('run-btn'); | |
| const preview = document.getElementById('preview'); | |
| function switchTab(activeTab, activeEditor) { | |
| // Remove active class from all tabs | |
| [htmlTab, cssTab, jsTab].forEach(tab => { | |
| tab.classList.remove('tab-active'); | |
| tab.classList.add('text-gray-500'); | |
| }); | |
| // Hide all editors | |
| [htmlEditor, cssEditor, jsEditor].forEach(editor => { | |
| editor.classList.add('hidden'); | |
| }); | |
| // Add active class to clicked tab and show corresponding editor | |
| activeTab.classList.add('tab-active'); | |
| activeTab.classList.remove('text-gray-500'); | |
| activeEditor.classList.remove('hidden'); | |
| } | |
| htmlTab.addEventListener('click', () => switchTab(htmlTab, htmlEditor)); | |
| cssTab.addEventListener('click', () => switchTab(cssTab, cssEditor)); | |
| jsTab.addEventListener('click', () => switchTab(jsTab, jsEditor)); | |
| // Run code functionality | |
| function runCode() { | |
| const html = htmlEditor.value; | |
| const css = cssEditor.value; | |
| const js = jsEditor.value; | |
| // Create a complete HTML document with the code | |
| const fullCode = ` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style>${css}</style> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| ${html} | |
| <script> | |
| try { | |
| ${js} | |
| } catch (e) { | |
| console.error(e); | |
| } | |
| <\/script> | |
| </body> | |
| </html> | |
| `; | |
| // Update the iframe with the new code | |
| preview.srcdoc = fullCode; | |
| // Show success feedback | |
| const runBtn = document.getElementById('run-btn'); | |
| runBtn.innerHTML = '<i data-feather="check" class="mr-2 w-4 h-4"></i> Running'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| runBtn.innerHTML = '<i data-feather="play" class="mr-2 w-4 h-4"></i> Run'; | |
| feather.replace(); | |
| }, 1000); | |
| } | |
| runBtn.addEventListener('click', runCode); | |
| // Run the code initially | |
| document.addEventListener('DOMContentLoaded', function() { | |
| runCode(); | |
| // Auto-run when code changes (with debounce) | |
| let timeout; | |
| [htmlEditor, cssEditor, jsEditor].forEach(editor => { | |
| editor.addEventListener('input', function() { | |
| clearTimeout(timeout); | |
| timeout = setTimeout(runCode, 1000); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |