create a beautiful website that runs code like a online compiler which should contains all laguage
3a28595
verified
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeNebula - Cloud Compiler Constellation</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 src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| nebula: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .code-font { | |
| font-family: 'Fira Code', monospace; | |
| } | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .editor-container { | |
| height: calc(100vh - 200px); | |
| } | |
| @media (max-width: 768px) { | |
| .editor-container { | |
| height: calc(100vh - 160px); | |
| } | |
| } | |
| .language-selector:hover .language-dropdown { | |
| display: block; | |
| } | |
| .syntax-highlight { | |
| background: rgba(14, 165, 233, 0.2); | |
| border-left: 3px solid rgba(14, 165, 233, 1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300 h-full"> | |
| <div id="vanta-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="code" class="text-nebula-600 dark:text-nebula-400 h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold text-nebula-600 dark:text-nebula-400">CodeNebula</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-nebula-100 dark:bg-nebula-900 text-nebula-700 dark:text-nebula-300">Editor</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Projects</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Templates</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Docs</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button type="button" class="p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none"> | |
| <i data-feather="sun" class="h-5 w-5 dark:hidden"></i> | |
| <i data-feather="moon" class="h-5 w-5 hidden dark:block"></i> | |
| </button> | |
| <button type="button" class="ml-3 p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none"> | |
| <i data-feather="share-2" class="h-5 w-5"></i> | |
| </button> | |
| <button type="button" class="ml-3 p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none"> | |
| <i data-feather="settings" class="h-5 w-5"></i> | |
| </button> | |
| <button class="ml-3 bg-nebula-600 hover:bg-nebula-700 text-white px-4 py-1.5 rounded-md text-sm font-medium flex items-center"> | |
| <i data-feather="user" class="h-4 w-4 mr-1"></i> | |
| Sign In | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400 focus:outline-none"> | |
| <i data-feather="menu" class="h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Sidebar --> | |
| <div class="w-full md:w-64 flex-shrink-0 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"> | |
| <h2 class="font-semibold text-lg">Project Files</h2> | |
| <button class="text-nebula-600 dark:text-nebula-400 hover:text-nebula-700 dark:hover:text-nebula-300"> | |
| <i data-feather="plus" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| <div class="p-2"> | |
| <div class="space-y-1"> | |
| <div class="flex items-center px-3 py-2 text-sm rounded-md bg-nebula-100 dark:bg-nebula-900 text-nebula-700 dark:text-nebula-300"> | |
| <i data-feather="file-text" class="h-4 w-4 mr-2"></i> | |
| main.py | |
| </div> | |
| <div class="flex items-center px-3 py-2 text-sm rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="file-text" class="h-4 w-4 mr-2"></i> | |
| utils.py | |
| </div> | |
| <div class="flex items-center px-3 py-2 text-sm rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="file-text" class="h-4 w-4 mr-2"></i> | |
| config.json | |
| </div> | |
| <div class="flex items-center px-3 py-2 text-sm rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="folder" class="h-4 w-4 mr-2"></i> | |
| assets | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-500 dark:text-gray-400">Storage</span> | |
| <span class="font-medium">15% used</span> | |
| </div> | |
| <div class="mt-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> | |
| <div class="bg-nebula-600 h-2 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editor Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Toolbar --> | |
| <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm mb-4"> | |
| <div class="px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="language-selector relative"> | |
| <button class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="file-text" class="h-4 w-4 mr-1"></i> | |
| Python | |
| <i data-feather="chevron-down" class="h-4 w-4 ml-1"></i> | |
| </button> | |
| <div class="language-dropdown hidden absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 border border-gray-200 dark:border-gray-700"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Python</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">JavaScript</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Java</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">C++</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Ruby</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">PHP</a> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="refresh-cw" class="h-4 w-4"></i> | |
| </button> | |
| <button class="text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="save" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="terminal" class="h-4 w-4 mr-1"></i> | |
| Console | |
| </button> | |
| <button class="bg-nebula-600 hover:bg-nebula-700 text-white px-4 py-1 rounded-md text-sm font-medium flex items-center"> | |
| <i data-feather="play" class="h-4 w-4 mr-1"></i> | |
| Run | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editor and Output --> | |
| <div class="flex-1 flex flex-col md:flex-row gap-4"> | |
| <!-- Code Editor --> | |
| <div class="flex-1 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden editor-container"> | |
| <div class="h-full"> | |
| <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50 dark:bg-gray-700"> | |
| <div class="flex items-center"> | |
| <i data-feather="file-text" class="h-4 w-4 text-nebula-600 dark:text-nebula-400 mr-2"></i> | |
| <span class="text-sm font-medium">main.py</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="minimize-2" class="h-4 w-4"></i> | |
| </button> | |
| <button class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="maximize-2" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 h-full overflow-auto"> | |
| <pre class="code-font text-sm"><code class="language-python"># Welcome to CodeNebula! | |
| # This is a Python code editor with real-time execution | |
| def fibonacci(n): | |
| """Generate Fibonacci sequence up to n terms""" | |
| a, b = 0, 1 | |
| for _ in range(n): | |
| yield a | |
| a, b = b, a + b | |
| # Print first 10 Fibonacci numbers | |
| for num in fibonacci(10): | |
| print(num) | |
| # Try running this code! | |
| # Click the Run button above or press Ctrl+Enter</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Output Panel --> | |
| <div class="md:w-1/3 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden editor-container"> | |
| <div class="h-full flex flex-col"> | |
| <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gray-50 dark:bg-gray-700"> | |
| <div class="flex items-center"> | |
| <i data-feather="terminal" class="h-4 w-4 text-nebula-600 dark:text-nebula-400 mr-2"></i> | |
| <span class="text-sm font-medium">Output</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="trash-2" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 flex-1 overflow-auto bg-gray-50 dark:bg-gray-900"> | |
| <div class="text-sm code-font"> | |
| <div class="text-green-600 dark:text-green-400">>> Running main.py</div> | |
| <div class="mt-2 whitespace-pre">0 | |
| 1 | |
| 1 | |
| 2 | |
| 3 | |
| 5 | |
| 8 | |
| 13 | |
| 21 | |
| 34</div> | |
| <div class="mt-2 text-green-600 dark:text-green-400">>> Program finished with exit code 0</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border-t border-gray-200 dark:border-gray-700 mt-6"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="code" class="text-nebula-600 dark:text-nebula-400 h-5 w-5"></i> | |
| <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">CodeNebula © 2023</span> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-nebula-600 dark:hover:text-nebula-400"> | |
| <i data-feather="github" class="h-5 w-5"></ | |
| </body> | |
| </html> |