| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CodeFast - Instant Code Editor</title> |
| <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> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#8b5cf6', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .code-editor { |
| min-height: 300px; |
| font-family: 'Courier New', monospace; |
| } |
| .preview-frame { |
| border: 1px solid #e2e8f0; |
| min-height: 300px; |
| } |
| .draggable { |
| cursor: col-resize; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <header class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-primary-500"></div> |
| <h1 class="text-xl font-bold text-gray-800">CodeFast</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="text-gray-600 hover:text-primary-500">Features</a> |
| <a href="#" class="text-gray-600 hover:text-primary-500">Pricing</a> |
| <a href="#" class="text-gray-600 hover:text-primary-500">Docs</a> |
| <a href="#" class="text-gray-600 hover:text-primary-500">Blog</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="hidden md:block text-gray-600 hover:text-primary-500">Sign In</button> |
| <button class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition">Get Started</button> |
| <button class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <main> |
| <section class="max-w-7xl mx-auto px-4 py-16"> |
| <div class="text-center mb-12"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Instant Code Editor</h1> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Write, test and share code in real-time with our lightning-fast editor.</p> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="flex flex-col md:flex-row"> |
| |
| <div class="flex-1 border-r border-gray-200"> |
| <div class="flex items-center justify-between bg-gray-50 px-4 py-2 border-b border-gray-200"> |
| <div class="flex items-center space-x-2"> |
| <span class="w-3 h-3 rounded-full bg-red-500"></span> |
| <span class="w-3 h-3 rounded-full bg-yellow-500"></span> |
| <span class="w-3 h-3 rounded-full bg-green-500"></span> |
| <span class="text-sm text-gray-500 ml-2">index.html</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button class="text-gray-500 hover:text-primary-500"> |
| <i data-feather="copy" class="w-4 h-4"></i> |
| </button> |
| <button class="text-gray-500 hover:text-primary-500"> |
| <i data-feather="share-2" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <textarea class="w-full h-64 code-editor bg-gray-50 p-4 rounded-lg font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" spellcheck="false"> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>My Awesome Page</title> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| margin: 0; |
| } |
| .card { |
| background: white; |
| border-radius: 10px; |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| padding: 2rem; |
| text-align: center; |
| max-width: 400px; |
| } |
| h1 { |
| color: #6366f1; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>Hello World!</h1> |
| <p>Welcome to my awesome webpage</p> |
| <button style="background: #6366f1; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; margin-top: 1rem;">Click Me</button> |
| </div> |
| </body> |
| </html> |
| </textarea> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1"> |
| <div class="bg-gray-50 px-4 py-2 border-b border-gray-200 flex justify-between items-center"> |
| <div class="text-sm text-gray-500">Preview</div> |
| <div class="flex items-center space-x-2"> |
| <button class="text-gray-500 hover:text-primary-500"> |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> |
| </button> |
| <button class="text-gray-500 hover:text-primary-500"> |
| <i data-feather="maximize-2" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| <div class="p-4"> |
| <iframe class="w-full h-64 preview-frame bg-white rounded-lg" srcdoc="<!DOCTYPE html><html><head><title>My Awesome Page</title><style>body{font-family: Arial,sans-serif;background: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0}.card{background: white;border-radius: 10px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);padding: 2rem;text-align: center;max-width: 400px}h1{color: #6366f1}</style></head><body><div class='card'><h1>Hello World!</h1><p>Welcome to my awesome webpage</p><button style='background: #6366f1; color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; margin-top: 1rem;'>Click Me</button></div></body></html>"></iframe> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-8 text-center"> |
| <button class="px-6 py-3 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition font-medium">Run Code</button> |
| </div> |
| </section> |
|
|
| <section class="bg-gray-100 py-16"> |
| <div class="max-w-7xl mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to code, collaborate and share your projects</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
| <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4"> |
| <i data-feather="zap" class="text-primary-500"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Instant Results</h3> |
| <p class="text-gray-600">See your changes in real-time without refreshing the page.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
| <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4"> |
| <i data-feather="share-2" class="text-primary-500"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Easy Sharing</h3> |
| <p class="text-gray-600">Share your projects with a single click. No setup required.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
| <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4"> |
| <i data-feather="code" class="text-primary-500"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Multi-language</h3> |
| <p class="text-gray-600">Supports HTML, CSS, JavaScript and more coming soon.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="max-w-7xl mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">CodeFast</h3> |
| <p class="text-gray-400">The fastest way to write and share code online.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Product</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Examples</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Company</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400">© 2023 CodeFast. All rights reserved.</p> |
| <div class="flex space-x-4 mt-4 md:mt-0"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="github"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="linkedin"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const editor = document.querySelector('.code-editor'); |
| const preview = document.querySelector('.preview-frame'); |
| |
| editor.addEventListener('input', function() { |
| |
| preview.srcdoc = editor.value; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
