Spaces:

FreshlyBakD
/

codecanvas-wizardry

Running

App Files Files Community

FreshlyBakD commited on Sep 29, 2025

Commit

73af324

verified ·

1 Parent(s): 2969873

can you run the program or tell me how to?

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +295 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Codecanvas Wizardry
-emoji: 👁
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CodeCanvas Wizardry 🧙‍♂️
+colorFrom: green
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,296 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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 = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                500: '#6366f1',
+              },
+              secondary: {
+                500: '#10b981',
+              }
+            }
+          }
+        }
+      }
+    </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="#" class="text-gray-600 hover:text-primary-500 transition">Home</a></li>
+          <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Docs</a></li>
+          <li><a href="#" class="text-gray-600 hover:text-primary-500 transition">Examples</a></li>
+          <li><a href="#" 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">Unleash Your <span class="text-primary-500">Code Magic</span></h2>
+      <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
+        Comprehensive guide to executing programs with mystical precision. Follow our enchanted steps to bring your code to life.
+      </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">Step-by-Step Execution Guide</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 Dependencies</h3>
+            <p class="text-gray-600 mb-3">Ensure you have Node.js and npm installed on your system.</p>
+            <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+              <span class="text-green-600">$</span> npm install -g codecanvas-wizardry
+            </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">Configure Your Project</h3>
+            <p class="text-gray-600 mb-3">Create a configuration file in your project root directory.</p>
+            <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+              <span class="text-green-600">$</span> touch wizardry.config.js
+            </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">Run the Program</h3>
+            <p class="text-gray-600 mb-3">Execute the program with your preferred options.</p>
+            <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+              <span class="text-green-600">$</span> wizardry run --theme=dark --colors=primary:indigo,secondary:emerald
+            </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">Monitor Output</h3>
+            <p class="text-gray-600 mb-3">View real-time execution logs and results.</p>
+            <div class="bg-gray-100 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+              <span class="text-green-600">$</span> wizardry logs --follow
+            </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>