Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCanvas 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 = { 500 | |
| theme: { | |
| extend: { 500 | |
| colors: { 400 | |
| primary: {400 | |
| 500: '#6366f1', | |
| },500 500 | |
| secondary: { | |
| 500 '#10b981', | |
| } | |
| } | |
| } | |
| } | |
| } 500 | |
| </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); | |
| } | |
| .step-number { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 16px; | |
| flex-shrink: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50 text-gray-800"> | |
| <div id="vanta-bg"></div> | |
| <header class="bg-white bg-opacity-80 backdrop-blur-md shadow-sm sticky top-0 z-10"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="code" class="text-primary-500 mr-2"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">CodeCanvas Wizardry</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="index.html" class="text-gray-600 hover:text-primary-500 transition">Home</a></li> | |
| <li><a href="docs.html" class="text-gray-600 hover:text-primary-500 transition">Docs</a></li> | |
| <li><a href="examples.html" class="text-gray-600 hover:text-primary-500 transition">Examples</a></li> | |
| <li><a href="faq.html" class="text-gray-600 hover:text-primary-500 transition">FAQ</a></li> | |
| <li><a href="contact.html" class="text-gray-600 hover:text-primary-500 transition">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition shadow-sm flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> | |
| Get Started | |
| </button> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <section class="text-center mb-20"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">How to <span class="text-primary-500">Run Programs</span></h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8"> | |
| Step-by-step instructions for executing code in various environments and programming languages. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg transition shadow-sm flex items-center"> | |
| <i data-feather="book-open" class="mr-2"></i> | |
| Read Documentation | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-gray-800 border border-gray-200 px-6 py-3 rounded-lg transition shadow-sm flex items-center"> | |
| <i data-feather="github" class="mr-2"></i> | |
| View on GitHub | |
| </button> | |
| </div> | |
| </section> | |
| <section class="mb-20"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover"> | |
| <div class="bg-primary-500 bg-opacity-10 p-3 rounded-lg w-12 h-12 flex items-center justify-center mb-4"> | |
| <i data-feather="terminal" class="text-primary-500"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Quick Setup</h3> | |
| <p class="text-gray-600 mb-4">Get started in minutes with our optimized configuration wizard.</p> | |
| <a href="#" class="text-primary-500 hover:text-primary-600 font-medium flex items-center"> | |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover"> | |
| <div class="bg-secondary-500 bg-opacity-10 p-3 rounded-lg w-12 h-12 flex items-center justify-center mb-4"> | |
| <i data-feather="cpu" class="text-secondary-500"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Advanced Features</h3> | |
| <p class="text-gray-600 mb-4">Unlock powerful capabilities with our comprehensive documentation.</p> | |
| <a href="#" class="text-secondary-500 hover:text-secondary-600 font-medium flex items-center"> | |
| Explore <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover"> | |
| <div class="bg-purple-500 bg-opacity-10 p-3 rounded-lg w-12 h-12 flex items-center justify-center mb-4"> | |
| <i data-feather="users" class="text-purple-500"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Community Support</h3> | |
| <p class="text-gray-600 mb-4">Join thousands of developers in our active community forums.</p> | |
| <a href="#" class="text-purple-500 hover:text-purple-600 font-medium flex items-center"> | |
| Join now <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-white rounded-xl shadow-md p-8 mb-20"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Running Your Code</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="flex items-start mb-8"> | |
| <div class="step-number bg-primary-500 text-white font-bold">1</div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Install Required Software</h3> | |
| <p class="text-gray-600 mb-3">Install the runtime/compiler for your language:</p> | |
| <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto"> | |
| <span class="text-green-600">#</span> Python: apt install python3<br> | |
| <span class="text-green-600">#</span> Node.js: apt install nodejs npm<br> | |
| <span class="text-green-600">#</span> Java: apt install default-jdk | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-8"> | |
| <div class="step-number bg-primary-500 text-white font-bold">2</div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Write Your Code</h3> | |
| <p class="text-gray-600 mb-3">Create a file with your program code:</p> | |
| <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto"> | |
| <span class="text-green-600">#</span> Python: touch script.py<br> | |
| <span class="text-green-600">#</span> JavaScript: touch app.js<br> | |
| <span class="text-green-600">#</span> Java: touch Main.java | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-8"> | |
| <div class="step-number bg-primary-500 text-white font-bold">3</div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Execute Your Program</h3> | |
| <p class="text-gray-600 mb-3">Run your code with the appropriate command:</p> | |
| <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto"> | |
| <span class="text-green-600">$</span> python3 script.py<br> | |
| <span class="text-green-600">$</span> node app.js<br> | |
| <span class="text-green-600">$</span> javac Main.java && java Main | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="step-number bg-primary-500 text-white font-bold">4</div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Troubleshooting</h3> | |
| <p class="text-gray-600 mb-3">Common issues and solutions:</p> | |
| <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto"> | |
| <span class="text-green-600">#</span> Check error messages<br> | |
| <span class="text-green-600">#</span> Verify file permissions<br> | |
| <span class="text-green-600">#</span> Ensure all dependencies are installed | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-20"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Frequently Asked Questions</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="text-lg font-medium">How do I customize the color scheme?</h3> | |
| <i data-feather="chevron-down" class="text-gray-400 transition-transform duration-200"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden"> | |
| <p class="text-gray-600">You can customize colors by editing the wizardry.config.js file and specifying your preferred color palette using Tailwind CSS color names or hex values.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="text-lg font-medium">What are the system requirements?</h3> | |
| <i data-feather="chevron-down" class="text-gray-400 transition-transform duration-200"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden"> | |
| <p class="text-gray-600">The wizardry requires Node.js v14 or higher and works on Windows, macOS, and Linux systems. At least 2GB of RAM is recommended for optimal performance.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="text-lg font-medium">How can I contribute to the project?</h3> | |
| <i data-feather="chevron-down" class="text-gray-400 transition-transform duration-200"></i> | |
| </button> | |
| <div class="px-6 pb-6 hidden"> | |
| <p class="text-gray-600">We welcome contributions! Fork our GitHub repository, make your changes, and submit a pull request. Please read our contribution guidelines first.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">CodeCanvas Wizardry</h3> | |
| <p class="text-gray-600 mb-4">Magical tools for modern developers.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"><i data-feather="github"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"><i data-feather="linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-primary-500 transition"><i data-feather="discord"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Community</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">GitHub Discussions</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Stack Overflow</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Twitter</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Discord</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-600 hover:text-primary-500 transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-8 text-center text-gray-500"> | |
| <p>© 2023 CodeCanvas Wizardry. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js globe background | |
| 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: 0xf8fafc, | |
| size: 0.8 | |
| }); | |
| // FAQ accordion functionality | |
| document.querySelectorAll('.bg-white button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.style.transform = content.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)'; | |
| }); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |