Spaces:

Jimmy0469
/

codex-cheats

Running

App Files Files Community

Jimmy0469 commited on Jun 29

Commit

ce453d4

verified ·

1 Parent(s): 7994b2d

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cødex Cheats - Code Execution & Learning Platform</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <style> body { font-family: 'Arial', sans-serif; } .dark-mode body { background-color: #1a202c; color: #cbd5e0; } .dark-mode a { color: #63b3ed; } </style> <script> document.addEventListener('DOMContentLoaded', function() { const toggleSwitch = document.querySelector('.switch input[type="checkbox"]'); toggleSwitch.addEventListener('change', switchTheme, false); function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); } } function switchThemeBasedOnLocalStorage() { const theme = localStorage.getItem('theme'); if (theme) { document.documentElement.setAttribute('data-theme', theme); if (theme === 'dark') { toggleSwitch.checked = true; } } } switchThemeBasedOnLocalStorage(); }); </script> </head> <body class="bg-white dark:bg-gray-800 text-gray-800 dark:text-white"> <header class="bg-gray-800 dark:bg-gray-900 text-white py-4"> <div class="container mx-auto flex justify-between items-center px-4"> <h1 class="text-xl font-bold"><span class="text-blue-500"><Cødex></span> Cheats</h1> <nav> <ul class="hidden md:flex space-x-4"> <li><a href="#features" class="hover:text-blue-500">Features</a></li> <li><a href="#community" class="hover:text-blue-500">Community</a></li> <li><a href="#documentary" class="hover:text-blue-500">Documentary</a></li> <li><a href="#contact" class="hover:text-blue-500">Contact</a></li> </ul> <div class="md:hidden"> <button id="mobile-menu-button" class="focus:outline-none"> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/> </svg> </button> </div> </nav> <div class="switch"> <label class="inline-flex relative items-center cursor-pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 transition duration-150 ease-in-out"></div> <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Dark Mode</span> </label> </div> </div> <div id="mobile-menu" class="hidden md:hidden"> <ul class="mt-4 px-4 space-y-4"> <li><a href="#features" class="block hover:text-blue-500">Features</a></li> <li><a href="#community" class="block hover:text-blue-500">Community</a></li> <li><a href="#documentary" class="block hover:text-blue-500">Documentary</a></li> <li><a href="#contact" class="block hover:text-blue-500">Contact</a></li> </ul> </div> <script> const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); </script> </header> <section id="hero" class="py-20 bg-gray-100 dark:bg-gray-700"> <div class="container mx-auto text-center px-4"> <h2 class="text-4xl font-bold mb-4">Revolutionizing Code Learning</h2> <p class="text-lg mb-8">Make coding accessible, engaging, and effective with Cødex Cheats.</p> <div class="flex justify-center space-x-4"> <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Get Started</a> <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">Learn More</a> </div> <pre class="mt-12 bg-gray-200 dark:bg-gray-600 p-4 rounded"><code class="text-gray-700 dark:text-gray-200">console.log("Hello, Cødex Cheats!");</code></pre> </div> </section> <section id="features" class="py-20"> <div class="container mx-auto text-center px-4"> <h2 class="text-3xl font-bold mb-8">Key Features</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">Interactive Code Execution</h3> <p>Real-time code writing, execution, and debugging with immediate feedback.</p> </div> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">AI-Powered Learning</h3> <p>Personalized guidance, code suggestions, and learning paths tailored to individual skill levels.</p> </div> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">Collaborative Community</h3> <p>Network with fellow coders to share knowledge and grow together.</p> </div> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">Practical Learning Tools</h3> <p>Access to tutorials, challenges, and real-world projects for structured skill development.</p> </div> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">Secure Learning Environment</h3> <p>Safe space for code experimentation without security or system concerns.</p> </div> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">Creative Problem Solving</h3> <p>Development of critical thinking skills through innovative coding challenges.</p> </div> </div> </div> </section> <section id="community" class="py-20 bg-gray-100 dark:bg-gray-700"> <div class="container mx-auto text-center px-4"> <h2 class="text-3xl font-bold mb-8">Join Our Community</h2> <p class="text-lg mb-12">Engage with others, share knowledge, and work on real-world projects together.</p> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">Forums & Discussion</h3> <p>Engage with others, ask questions, and share knowledge.</p> </div> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">Collaborative Projects</h3> <p>Work on real-world projects with other members to build portfolios and learn from peers.</p> </div> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">User-Generated Content</h3> <p>Share tutorials, code snippets, and resources to help others.</p> </div> </div> </div> </section> <section id="documentary" class="py-20"> <div class="container mx-auto text-center px-4"> <h2 class="text-3xl font-bold mb-8">Upcoming Documentary</h2> <p class="text-lg mb-12">Discover the story behind Cødex Cheats in our upcoming documentary.</p> <div class="bg-white dark:bg-gray-800 p-8 rounded shadow-md"> <h3 class="text-xl font-bold mb-4">"The Codex Cheats Revolution"</h3> <p>Uncovering the secrets of code execution and learning.</p> <p class="mt-4">Expected release date: June 17, 2025</p> </div> </div> </section> <section id="contact" class="py-20 bg-gray-100 dark:bg-gray-700"> <div class="container mx-auto text-center px-4"> <h2 class="text-3xl font-bold mb-8">Get in Touch</h2> <p class="text-lg mb-12">Have questions or want to learn more? Reach out to us.</p> <form class="max-w-md mx-auto"> <div class="mb-4"> <label for="name" class="block text-sm font-bold mb-2">Name</label> <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Name"> </div> <div class="mb-4"> <label for="email" class="block text-sm font-bold mb-2">Email</label> <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Email"> </div> <div class="mb-6"> <label for="message" class="block text-sm font-bold mb-2">Message</label> <textarea id="message" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline h-40" placeholder="Your Message"></textarea> </div> <div class="flex items-center justify-center"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button"> Send Message </button> </div> </form> <div class="mt-12"> <p class="text-lg">Contact Information:</p> <p class="mt-2">Founders: Iminathi Momelezi Mvinjwa and Ongaka Manisa</p> <p>Email: contact@codexcheats.com</p> <p>Launch Date: June 17, 2025</p> </div> </div> </section> <footer class="bg-gray-800 dark:bg-gray-900 text-white py-8"> <div class="container mx-auto text-center px-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div> <h3 class="text-xl font-bold mb-4">Platform Links</h3> <ul class="space-y-2"> <li><a href="#features" class="hover:text-blue-500">Features</a></li> <li><a href="#community" class="hover:text-blue-500">Community</a></li> <li><a href="#" class="hover:text-blue-500">Learning Tools</a></li> <li><a href="#" class="hover:text-blue-500">Documentation</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Company Information</h3> <ul class="space-y-2"> <li><a href="#" class="hover:text-blue-500">About Us</a></li> <li><a href="#" class="hover:text-blue-500">Blog</a></li> <li><a href="#" class="hover:text-blue-500">Careers</a></li> <li><a href="#contact" class="hover:text-blue-500">Contact</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Legal Information</h3> <ul class="space-y-2"> <li><a href="#" class="hover:text-blue-500">Terms of Service</a></li> <li><a href="#" class="hover:text-blue-500">Privacy Policy</a></li> <li><a href="#" class="hover:text-blue-500">Cookie Policy</a></li> </ul> </div> </div> <p class="mt-8">© 2023 Cødex Cheats. All rights reserved.</p> </div> </footer> </body> </html> Website was created by iminathi mvinjwa and Ongaka Manisa an Gcebo Nkuwana - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +889 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Codex Cheats
-emoji: 💻
-colorFrom: red
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: codex-cheats
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,889 @@
-<!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" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cødex Cheats - Interactive Code Learning Platform</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+        .code-editor {
+            background-color: #2d3748;
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .code-header {
+            background-color: #1a202c;
+            border-top-left-radius: 0.5rem;
+            border-top-right-radius: 0.5rem;
+            padding: 0.5rem 1rem;
+            display: flex;
+            align-items: center;
+        }
+        .code-dots {
+            display: flex;
+            gap: 0.5rem;
+        }
+        .code-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+        .code-dot.red {
+            background-color: #f56565;
+        }
+        .code-dot.yellow {
+            background-color: #ecc94b;
+        }
+        .code-dot.green {
+            background-color: #48bb78;
+        }
+        .code-content {
+            padding: 1rem;
+            font-family: 'Courier New', monospace;
+            overflow-x: auto;
+        }
+        .dark .code-editor {
+            background-color: #1a202c;
+        }
+        .dark .code-header {
+            background-color: #2d3748;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            transition: all 0.3s ease;
+        }
+        .gradient-text {
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
+            background-image: linear-gradient(90deg, #4299e1, #9f7aea);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
+    <header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-code text-white text-xl"></i>
+                </div>
+                <h1 class="text-2xl font-bold">
+                    <span class="gradient-text">Cødex</span> Cheats
+                </h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#features" class="font-medium hover:text-blue-500 transition-colors">Features</a>
+                <a href="#demo" class="font-medium hover:text-blue-500 transition-colors">Live Demo</a>
+                <a href="#community" class="font-medium hover:text-blue-500 transition-colors">Community</a>
+                <a href="#pricing" class="font-medium hover:text-blue-500 transition-colors">Pricing</a>
+                <a href="#contact" class="font-medium hover:text-blue-500 transition-colors">Contact</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                    <i class="fas fa-moon dark:hidden"></i>
+                    <i class="fas fa-sun hidden dark:block"></i>
+                </button>
+                <button class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" id="mobile-menu-button">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <a href="#signup" class="hidden md:block bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition-colors">
+                    Get Started
+                </a>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 shadow-lg">
+            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
+                <a href="#features" class="py-2 hover:text-blue-500 transition-colors">Features</a>
+                <a href="#demo" class="py-2 hover:text-blue-500 transition-colors">Live Demo</a>
+                <a href="#community" class="py-2 hover:text-blue-500 transition-colors">Community</a>
+                <a href="#pricing" class="py-2 hover:text-blue-500 transition-colors">Pricing</a>
+                <a href="#contact" class="py-2 hover:text-blue-500 transition-colors">Contact</a>
+                <a href="#signup" class="py-2 text-blue-500 font-medium">Get Started</a>
+            </div>
+        </div>
+    </header>
+    <main>
+        <!-- Hero Section -->
+        <section class="py-20 md:py-32 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900">
+            <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-12 md:mb-0">
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+                        Learn to Code <span class="gradient-text">Smarter</span>, Not Harder
+                    </h1>
+                    <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8">
+                        Cødex Cheats revolutionizes coding education with interactive execution, AI assistance, and a vibrant community.
+                    </p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="#signup" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-center transition-colors">
+                            Start Learning Free
+                        </a>
+                        <a href="#demo" class="border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-800 px-6 py-3 rounded-lg font-medium text-center transition-colors">
+                            Live Demo <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                    <div class="mt-8 flex items-center space-x-4">
+                        <div class="flex -space-x-2">
+                            <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" alt="User">
+                            <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" alt="User">
+                            <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" alt="User">
+                        </div>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            Join <span class="font-bold text-blue-500">10,000+</span> developers already learning
+                        </p>
+                    </div>
+                </div>
+                <div class="md:w-1/2 relative">
+                    <div class="code-editor floating">
+                        <div class="code-header">
+                            <div class="code-dots">
+                                <div class="code-dot red"></div>
+                                <div class="code-dot yellow"></div>
+                                <div class="code-dot green"></div>
+                            </div>
+                            <div class="ml-2 text-sm text-gray-400">script.js</div>
+                        </div>
+                        <div class="code-content text-gray-300">
+                            <pre><code class="text-sm">// Interactive code execution
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+// AI-powered suggestions
+const suggestion = "Try adding error handling";
+// Real-time output
+console.log(greet("Cødex User"));
+// Collaborative features
+/*
+ * @user1: Great start!
+ * Consider adding parameter validation
+ */
+// Learning resources
+// 📚 Documentation: Array methods
+// 🎥 Video: Async/Await
+// 💡 Tip: Destructuring</code></pre>
+                        </div>
+                    </div>
+                    <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-indigo-500 rounded-full opacity-20"></div>
+                    <div class="absolute -top-6 -right-6 w-32 h-32 bg-blue-500 rounded-full opacity-20"></div>
+                </div>
+            </div>
+        </section>
+        <!-- Features Section -->
+        <section id="features" class="py-20">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                        Everything you need to master coding in one platform
+                    </p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Feature 1 -->
+                    <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
+                        <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-6">
+                            <i class="fas fa-terminal text-blue-500 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Interactive Code Playground</h3>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            Write, execute, and debug code in real-time with our browser-based IDE. No setup required.
+                        </p>
+                    </div>
+                    <!-- Feature 2 -->
+                    <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
+                        <div class="w-14 h-14 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-6">
+                            <i class="fas fa-robot text-purple-500 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">AI-Powered Assistance</h3>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            Get intelligent code suggestions, explanations, and personalized learning paths.
+                        </p>
+                    </div>
+                    <!-- Feature 3 -->
+                    <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
+                        <div class="w-14 h-14 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-6">
+                            <i class="fas fa-users text-green-500 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Collaborative Coding</h3>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            Pair program, share snippets, and get feedback from our developer community.
+                        </p>
+                    </div>
+                    <!-- Feature 4 -->
+                    <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
+                        <div class="w-14 h-14 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mb-6">
+                            <i class="fas fa-project-diagram text-yellow-500 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Real-World Projects</h3>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            Build portfolio-worthy projects with guided instructions and mentorship.
+                        </p>
+                    </div>
+                    <!-- Feature 5 -->
+                    <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
+                        <div class="w-14 h-14 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mb-6">
+                            <i class="fas fa-chart-line text-red-500 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Progress Tracking</h3>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            Visualize your learning journey with detailed analytics and skill assessments.
+                        </p>
+                    </div>
+                    <!-- Feature 6 -->
+                    <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
+                        <div class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center mb-6">
+                            <i class="fas fa-mobile-alt text-indigo-500 text-xl"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Mobile Friendly</h3>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            Learn on the go with our fully responsive platform that works on any device.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Live Demo Section -->
+        <section id="demo" class="py-20 bg-gray-100 dark:bg-gray-800">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Try It Yourself</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                        Experience our interactive code editor with real-time execution
+                    </p>
+                </div>
+                <div class="bg-white dark:bg-gray-700 rounded-xl shadow-xl overflow-hidden">
+                    <div class="flex bg-gray-100 dark:bg-gray-800 p-2">
+                        <div class="flex space-x-2">
+                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                        </div>
+                        <div class="ml-2 text-sm text-gray-500 dark:text-gray-400">demo.js</div>
+                    </div>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
+                        <div class="p-6">
+                            <div class="mb-4">
+                                <select class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-sm">
+                                    <option>JavaScript</option>
+                                    <option>Python</option>
+                                    <option>HTML/CSS</option>
+                                    <option>Java</option>
+                                    <option>C++</option>
+                                </select>
+                            </div>
+                            <textarea id="code-input" class="w-full h-64 bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded p-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" spellcheck="false">// Try writing some code here
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+// This will execute in the output panel
+console.log("Fibonacci of 5 is:", fibonacci(5));
+// Try modifying the code and see the results!</textarea>
+                            <button id="run-code" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium">
+                                <i class="fas fa-play mr-2"></i> Run Code
+                            </button>
+                        </div>
+                        <div class="bg-gray-50 dark:bg-gray-800 p-6 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700">
+                            <h3 class="text-lg font-medium mb-2">Output</h3>
+                            <div id="code-output" class="w-full h-64 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded p-4 font-mono text-sm overflow-auto">
+                                // Your output will appear here
+                            </div>
+                            <div class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400">
+                                <i class="fas fa-info-circle mr-2"></i>
+                                <span>Execution time: 0ms | Memory: 0MB</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Community Section -->
+        <section id="community" class="py-20">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Join Our Community</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                        Connect with developers worldwide and grow together
+                    </p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+                        <div class="text-blue-500 text-4xl mb-4">
+                            <i class="fas fa-comments"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Discussion Forums</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">
+                            Get help, share knowledge, and discuss coding topics with our active community.
+                        </p>
+                        <a href="#" class="text-blue-500 font-medium inline-flex items-center">
+                            Visit Forums <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+                        <div class="text-purple-500 text-4xl mb-4">
+                            <i class="fas fa-laptop-code"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Weekly Challenges</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">
+                            Test your skills with our coding challenges and compete with other developers.
+                        </p>
+                        <a href="#" class="text-purple-500 font-medium inline-flex items-center">
+                            View Challenges <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+                        <div class="text-green-500 text-4xl mb-4">
+                            <i class="fas fa-calendar-alt"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-3">Live Events</h3>
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">
+                            Join webinars, workshops, and Q&A sessions with industry experts.
+                        </p>
+                        <a href="#" class="text-green-500 font-medium inline-flex items-center">
+                            See Events <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="mt-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-8 text-white">
+                    <div class="max-w-3xl mx-auto text-center">
+                        <h3 class="text-2xl md:text-3xl font-bold mb-4">Ready to join 10,000+ developers?</h3>
+                        <p class="text-blue-100 mb-6">
+                            Sign up today and get access to our community, learning resources, and exclusive events.
+                        </p>
+                        <a href="#signup" class="inline-block bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium">
+                            Join Community Now
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Pricing Section -->
+        <section id="pricing" class="py-20 bg-gray-100 dark:bg-gray-800">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                        Choose the plan that fits your learning goals
+                    </p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                    <!-- Free Plan -->
+                    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden">
+                        <div class="p-8">
+                            <h3 class="text-xl font-bold mb-2">Starter</h3>
+                            <p class="text-gray-600 dark:text-gray-300 mb-6">Perfect for beginners</p>
+                            <div class="mb-6">
+                                <span class="text-4xl font-bold">$0</span>
+                                <span class="text-gray-500 dark:text-gray-400">/month</span>
+                            </div>
+                            <ul class="space-y-3 mb-8">
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Basic coding exercises</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Community access</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Limited AI assistance</span>
+                                </li>
+                                <li class="flex items-center text-gray-400">
+                                    <i class="fas fa-times text-gray-400 mr-2"></i>
+                                    <span>No project feedback</span>
+                                </li>
+                            </ul>
+                            <a href="#signup" class="block text-center border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-600 px-6 py-3 rounded-lg font-medium">
+                                Get Started
+                            </a>
+                        </div>
+                    </div>
+                    <!-- Pro Plan -->
+                    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden border-2 border-blue-500 transform scale-105">
+                        <div class="bg-blue-500 text-white text-center py-2">
+                            <span class="font-medium">Most Popular</span>
+                        </div>
+                        <div class="p-8">
+                            <h3 class="text-xl font-bold mb-2">Developer</h3>
+                            <p class="text-gray-600 dark:text-gray-300 mb-6">For serious learners</p>
+                            <div class="mb-6">
+                                <span class="text-4xl font-bold">$19</span>
+                                <span class="text-gray-500 dark:text-gray-400">/month</span>
+                            </div>
+                            <ul class="space-y-3 mb-8">
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>All Starter features</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Full AI assistance</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Project feedback</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Advanced courses</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Certificate of completion</span>
+                                </li>
+                            </ul>
+                            <a href="#signup" class="block text-center bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">
+                                Get Developer Plan
+                            </a>
+                        </div>
+                    </div>
+                    <!-- Team Plan -->
+                    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden">
+                        <div class="p-8">
+                            <h3 class="text-xl font-bold mb-2">Team</h3>
+                            <p class="text-gray-600 dark:text-gray-300 mb-6">For groups & organizations</p>
+                            <div class="mb-6">
+                                <span class="text-4xl font-bold">$49</span>
+                                <span class="text-gray-500 dark:text-gray-400">/month</span>
+                            </div>
+                            <ul class="space-y-3 mb-8">
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>All Developer features</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Up to 5 team members</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Team progress tracking</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Private team workspace</span>
+                                </li>
+                                <li class="flex items-center">
+                                    <i class="fas fa-check text-green-500 mr-2"></i>
+                                    <span>Priority support</span>
+                                </li>
+                            </ul>
+                            <a href="#contact" class="block text-center border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-600 px-6 py-3 rounded-lg font-medium">
+                                Contact Sales
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-12 text-center">
+                    <p class="text-gray-600 dark:text-gray-300">
+                        Not sure which plan is right for you? <a href="#contact" class="text-blue-500 hover:underline">Contact our team</a> for help.
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- Testimonials Section -->
+        <section class="py-20">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Users Say</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                        Don't just take our word for it - hear from our community
+                    </p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Testimonial 1 -->
+                    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Sarah Johnson</h4>
+                                <p class="text-gray-500 dark:text-gray-400 text-sm">Frontend Developer</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            "Cødex Cheats completely transformed how I learn new technologies. The interactive coding environment and AI suggestions helped me land my first developer job!"
+                        </p>
+                        <div class="mt-4 text-yellow-400">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                        </div>
+                    </div>
+                    <!-- Testimonial 2 -->
+                    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Michael Chen</h4>
+                                <p class="text-gray-500 dark:text-gray-400 text-sm">Computer Science Student</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            "As a student, I love how Cødex Cheats breaks down complex concepts into manageable chunks. The community feedback on my projects has been invaluable."
+                        </p>
+                        <div class="mt-4 text-yellow-400">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star-half-alt"></i>
+                        </div>
+                    </div>
+                    <!-- Testimonial 3 -->
+                    <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+                        <div class="flex items-center mb-4">
+                            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+                                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Patel">
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Priya Patel</h4>
+                                <p class="text-gray-500 dark:text-gray-400 text-sm">Bootcamp Graduate</p>
+                            </div>
+                        </div>
+                        <p class="text-gray-600 dark:text-gray-300">
+                            "After completing a coding bootcamp, Cødex Cheats helped me fill in knowledge gaps and prepare for technical interviews. The real-world projects were game-changers."
+                        </p>
+                        <div class="mt-4 text-yellow-400">
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                            <i class="fas fa-star"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Contact Section -->
+        <section id="contact" class="py-20 bg-gray-100 dark:bg-gray-800">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In Touch</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+                        Have questions? We'd love to hear from you!
+                    </p>
+                </div>
+                <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden">
+                    <div class="grid grid-cols-1 md:grid-cols-2">
+                        <div class="p-8 md:p-12">
+                            <h3 class="text-2xl font-bold mb-6">Send us a message</h3>
+                            <form>
+                                <div class="mb-4">
+                                    <label for="name" class="block text-sm font-medium mb-2">Your Name</label>
+                                    <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800">
+                                </div>
+                                <div class="mb-4">
+                                    <label for="email" class="block text-sm font-medium mb-2">Email Address</label>
+                                    <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800">
+                                </div>
+                                <div class="mb-4">
+                                    <label for="subject" class="block text-sm font-medium mb-2">Subject</label>
+                                    <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800">
+                                </div>
+                                <div class="mb-6">
+                                    <label for="message" class="block text-sm font-medium mb-2">Message</label>
+                                    <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800"></textarea>
+                                </div>
+                                <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">
+                                    Send Message
+                                </button>
+                            </form>
+                        </div>
+                        <div class="bg-blue-500 text-white p-8 md:p-12">
+                            <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
+                            <div class="space-y-6">
+                                <div>
+                                    <h4 class="font-medium mb-2">Email</h4>
+                                    <p>contact@codexcheats.com</p>
+                                </div>
+                                <div>
+                                    <h4 class="font-medium mb-2">Founders</h4>
+                                    <p>Iminathi Momelezi Mvinjwa</p>
+                                    <p>Ongaka Manisa</p>
+                                    <p>Gcebo Nkuwana</p>
+                                </div>
+                                <div>
+                                    <h4 class="font-medium mb-2">Launch Date</h4>
+                                    <p>June 17, 2025</p>
+                                </div>
+                                <div>
+                                    <h4 class="font-medium mb-2">Follow Us</h4>
+                                    <div class="flex space-x-4">
+                                        <a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
+                                            <i class="fab fa-twitter"></i>
+                                        </a>
+                                        <a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
+                                            <i class="fab fa-github"></i>
+                                        </a>
+                                        <a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
+                                            <i class="fab fa-linkedin-in"></i>
+                                        </a>
+                                        <a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
+                                            <i class="fab fa-discord"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Signup CTA -->
+        <section id="signup" class="py-20 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
+            <div class="container mx-auto px-4 text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Coding Skills?</h2>
+                <p class="text-xl mb-8 max-w-2xl mx-auto">
+                    Join thousands of developers who are already learning smarter with Cødex Cheats.
+                </p>
+                <a href="#" class="inline-block bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg shadow-lg transform hover:scale-105 transition-transform">
+                    Start Learning Free Today
+                </a>
+                <p class="mt-6 text-blue-200">
+                    No credit card required. Cancel anytime.
+                </p>
+            </div>
+        </section>
+    </main>
+    <footer class="bg-gray-800 dark:bg-gray-900 text-gray-300 py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+                            <i class="fas fa-code text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-bold text-white">Cødex Cheats</h3>
+                    </div>
+                    <p class="mb-4">
+                        Revolutionizing code learning with interactive execution and AI-powered assistance.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold text-white mb-4">Platform</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#features" class="hover:text-white">Features</a></li>
+                        <li><a href="#demo" class="hover:text-white">Live Demo</a></li>
+                        <li><a href="#pricing" class="hover:text-white">Pricing</a></li>
+                        <li><a href="#" class="hover:text-white">Documentation</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold text-white mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">Blog</a></li>
+                        <li><a href="#" class="hover:text-white">Tutorials</a></li>
+                        <li><a href="#" class="hover:text-white">Community</a></li>
+                        <li><a href="#" class="hover:text-white">Support</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold text-white mb-4">Company</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-white">About Us</a></li>
+                        <li><a href="#" class="hover:text-white">Careers</a></li>
+                        <li><a href="#contact" class="hover:text-white">Contact</a></li>
+                        <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p>© 2023 Cødex Cheats. All rights reserved.</p>
+                <div class="mt-4 md:mt-0">
+                    <p>Created with ❤️ by Iminathi Mvinjwa, Ongaka Manisa & Gcebo Nkuwana</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
+        });
+        // Check for saved theme preference
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            html.classList.add('dark');
+        } else {
+            html.classList.remove('dark');
+        }
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        // Simple code execution for demo
+        const runButton = document.getElementById('run-code');
+        const codeInput = document.getElementById('code-input');
+        const codeOutput = document.getElementById('code-output');
+        runButton.addEventListener('click', () => {
+            try {
+                // Clear previous output
+                codeOutput.innerHTML = '';
+                // Capture console.log
+                const originalConsoleLog = console.log;
+                console.log = function() {
+                    originalConsoleLog.apply(console, arguments);
+                    // Convert arguments to string
+                    let output = '';
+                    for (let i = 0; i < arguments.length; i++) {
+                        if (i !== 0) output += ' ';
+                        if (typeof arguments[i] === 'object') {
+                            output += JSON.stringify(arguments[i]);
+                        } else {
+                            output += arguments[i];
+                        }
+                    }
+                    // Display in output panel
+                    const line = document.createElement('div');
+                    line.textContent = '> ' + output;
+                    codeOutput.appendChild(line);
+                };
+                // Execute code
+                const startTime = performance.now();
+                new Function(codeInput.value)();
+                const endTime = performance.now();
+                // Restore console.log
+                console.log = originalConsoleLog;
+                // Update execution info
+                const executionTime = (endTime - startTime).toFixed(2);
+                document.querySelector('.fa-info-circle').nextElementSibling.textContent =
+                    `Execution time: ${executionTime}ms | Memory: 0MB`;
+            } catch (error) {
+                const errorLine = document.createElement('div');
+                errorLine.className = 'text-red-400';
+                errorLine.textContent = '> Error: ' + error.message;
+                codeOutput.appendChild(errorLine);
+            }
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jimmy0469/codex-cheats" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>