Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCraft Wizardry</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: { | |
| primary: '#6366f1', | |
| secondary: '#f43f5e' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-100 text-gray-900"> | |
| <div id="vanta-bg"></div> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-16"> | |
| <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary"> | |
| CodeCraft Wizardry | |
| </h1> | |
| <p class="text-xl text-gray-700 max-w-2xl mx-auto"> | |
| Unleash your coding magic with this powerful development environment | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Run App Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="play" class="text-primary mr-3"></i> | |
| <h2 class="text-2xl font-semibold">Run Your App</h2> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| Follow these simple steps to get your application up and running | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| 1 | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Open your terminal or command prompt</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| 2 | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Navigate to your project directory</p> | |
| <code class="mt-1 block bg-gray-100 px-2 py-1 rounded text-sm text-gray-800">cd path/to/your/project</code> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| 3 | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Install dependencies (if needed)</p> | |
| <code class="mt-1 block bg-gray-100 px-2 py-1 rounded text-sm text-gray-800">npm install</code> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| 4 | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Start the development server</p> | |
| <code class="mt-1 block bg-gray-100 px-2 py-1 rounded text-sm text-gray-800">npm run dev</code> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary-100 flex items-center justify-center text-primary-600"> | |
| 5 | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Open your browser to</p> | |
| <code class="mt-1 block bg-gray-100 px-2 py-1 rounded text-sm text-gray-800">http://localhost:3000</code> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="zap" class="text-secondary mr-3"></i> | |
| <h2 class="text-2xl font-semibold">Key Features</h2> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="check-circle" class="text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700 font-medium">Hot Reloading</p> | |
| <p class="text-gray-500 text-sm">See changes instantly without refreshing</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="check-circle" class="text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700 font-medium">Responsive Design</p> | |
| <p class="text-gray-500 text-sm">Works on all device sizes</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="check-circle" class="text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700 font-medium">Modern UI</p> | |
| <p class="text-gray-500 text-sm">Clean, intuitive interface</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i data-feather="check-circle" class="text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700 font-medium">Powerful Tools</p> | |
| <p class="text-gray-500 text-sm">Built with Tailwind, Feather Icons & Vanta.js</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="codesandbox" class="text-primary mr-3"></i> | |
| <h2 class="text-2xl font-semibold">Quick Actions</h2> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="#" onclick="copyToClipboard('npm install -g live-server && live-server')" class="p-4 bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg flex flex-col items-center justify-center hover:shadow-md transition-all"> | |
| <i data-feather="play" class="text-primary mb-2"></i> | |
| <span class="font-medium text-gray-700">Run with Live Server</span> | |
| </a> | |
| <a href="#" onclick="copyToClipboard('python -m http.server 8000')" class="p-4 bg-gradient-to-br from-secondary-50 to-secondary-100 rounded-lg flex flex-col items-center justify-center hover:shadow-md transition-all"> | |
| <i data-feather="server" class="text-secondary mb-2"></i> | |
| <span class="font-medium text-gray-700">Python HTTP Server</span> | |
| </a> | |
| <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" class="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg flex flex-col items-center justify-center hover:shadow-md transition-all"> | |
| <i data-feather="download" class="text-gray-600 mb-2"></i> | |
| <span class="font-medium text-gray-700">VS Code Extension</span> | |
| </a> | |
| <a href="https://www.npmjs.com/package/http-server" target="_blank" class="p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-lg flex flex-col items-center justify-center hover:shadow-md transition-all"> | |
| <i data-feather="package" class="text-yellow-600 mb-2"></i> | |
| <span class="font-medium text-gray-700">http-server</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-16 text-center text-gray-500"> | |
| <p>© 2023 CodeCraft Wizardry. All rights reserved.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| function copyToClipboard(text) { | |
| navigator.clipboard.writeText(text).then(() => { | |
| alert('Command copied to clipboard! Run this in your terminal.'); | |
| }).catch(err => { | |
| console.error('Could not copy text: ', err); | |
| }); | |
| } | |
| // Initialize Vanta.js | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6366f1, | |
| backgroundColor: 0xf1f5f9, | |
| size: 1.00 | |
| }); | |
| // Initialize Feather Icons | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |