its good but make the top bar better its looking like shit

README.md

@@ -1,10 +1,13 @@
 ---
-title: Roblox Code Wizardry
-emoji: 😻
-colorFrom: green
-colorTo: indigo
+title: Roblox Code Wizardry 🧙‍♂️
+colorFrom: blue
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,68 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .footer-link:hover {
+          color: #5865F2;
+        }
+      </style>
+      <footer class="bg-gray-800 border-t border-gray-700 mt-12">
+        <div class="container mx-auto px-4 py-8">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div>
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-8 h-8 bg-primary-500 rounded-lg flex items-center justify-center">
+                  <i data-feather="code" class="text-white"></i>
+                </div>
+                <span class="text-xl font-bold">Script Haven</span>
+              </div>
+              <p class="text-gray-400 text-sm">The best place to share and discover Roblox scripts with the community.</p>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-4">Navigation</h3>
+              <ul class="space-y-2">
+                <li><a href="index.html" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">Home</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">Categories</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">Top Scripts</a></li>
+                <li><a href="submit.html" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">Submit Script</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-4">Legal</h3>
+              <ul class="space-y-2">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">Terms of Service</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">Privacy Policy</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">DMCA</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-primary-500 transition-colors">Contact</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-4">Connect</h3>
+              <div class="flex gap-4 mb-4">
+                <a href="#" class="text-gray-400 hover:text-primary-500 transition-colors">
+                  <i data-feather="discord" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-primary-500 transition-colors">
+                  <i data-feather="twitter" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-primary-500 transition-colors">
+                  <i data-feather="github" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-primary-500 transition-colors">
+                  <i data-feather="youtube" class="w-5 h-5"></i>
+                </a>
+              </div>
+              <p class="text-gray-500 text-sm">© 2023 Script Haven. All rights reserved.</p>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,126 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          background: linear-gradient(90deg, rgba(17,24,39,0.95) 0%, rgba(37,99,235,0.15) 100%);
+          backdrop-filter: blur(12px);
+          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .nav-link {
+          position: relative;
+          transition: all 0.3s ease;
+        }
+        .nav-link:hover {
+          color: #5865F2;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -8px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: #5865F2;
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        .mobile-menu {
+          transition: all 0.3s ease;
+          background: rgba(17, 24, 39, 0.98);
+          backdrop-filter: blur(12px);
+        }
+        .logo-text {
+          background: linear-gradient(90deg, #5865F2 0%, #8A2BE2 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          font-weight: 700;
+        }
+        .theme-toggle {
+          transition: transform 0.3s ease;
+        }
+        .theme-toggle:hover {
+          transform: rotate(30deg);
+        }
+        .sign-in-btn {
+          background: linear-gradient(90deg, #5865F2 0%, #8A2BE2 100%);
+          transition: all 0.3s ease;
+        }
+        .sign-in-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
+        }
+      </style>
+<nav class="navbar border-b border-gray-800 fixed w-full z-10">
+        <div class="container mx-auto px-4">
+          <div class="flex justify-between items-center py-4">
+            <a href="index.html" class="flex items-center gap-2">
+              <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg">
+                <i data-feather="code" class="text-white w-5 h-5"></i>
+              </div>
+              <span class="text-xl font-bold logo-text">Code Wizardry</span>
+            </a>
+            
+            <div class="hidden md:flex items-center gap-8">
+              <a href="index.html" class="nav-link text-gray-300">Home</a>
+              <a href="#" class="nav-link text-gray-300">Categories</a>
+              <a href="#" class="nav-link text-gray-300">Top Scripts</a>
+              <a href="submit.html" class="nav-link text-gray-300">Submit</a>
+              
+              <div class="flex items-center gap-4 ml-4">
+                <button id="theme-toggle" class="text-gray-400 hover:text-primary-500 p-2 rounded-full theme-toggle">
+                  <i data-feather="moon" class="w-5 h-5"></i>
+                </button>
+                <a href="#" class="sign-in-btn text-white px-5 py-2.5 rounded-lg text-sm font-medium">
+                  Sign In
+                </a>
+              </div>
+            </div>
+            <button id="mobile-menu-button" class="md:hidden text-gray-400 hover:text-primary-500 focus:outline-none transition-colors">
+              <i data-feather="menu" class="w-6 h-6"></i>
+            </button>
+</div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="mobile-menu hidden md:hidden border-t border-gray-700">
+<div class="container mx-auto px-4 py-3">
+            <div class="flex flex-col space-y-3">
+              <a href="index.html" class="nav-link text-gray-300 py-3 px-4">Home</a>
+              <a href="#" class="nav-link text-gray-300 py-3 px-4">Categories</a>
+              <a href="#" class="nav-link text-gray-300 py-3 px-4">Top Scripts</a>
+              <a href="submit.html" class="nav-link text-gray-300 py-3 px-4">Submit</a>
+              <div class="pt-2 border-t border-gray-700 px-4 pb-4">
+                <a href="#" class="block text-center sign-in-btn text-white px-4 py-3 rounded-lg font-medium">
+                  Sign In
+                </a>
+              </div>
+</div>
+          </div>
+        </div>
+      </nav>
+    `;
+
+    // Mobile menu toggle
+    const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
+    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+    
+    mobileMenuButton.addEventListener('click', () => {
+      mobileMenu.classList.toggle('hidden');
+      feather.replace();
+    });
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (event) => {
+      if (!this.shadowRoot.contains(event.target) && !mobileMenu.classList.contains('hidden')) {
+        mobileMenu.classList.add('hidden');
+      }
+    });
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,173 @@
-<!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" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roblox Script Haven | Share & Discover Game Scripts</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#5865F2',
+                            600: '#4752C4'
+                        },
+                        secondary: {
+                            500: '#ED4245',
+                            600: '#D13538'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 mb-6">
+                <div>
+                    <h1 class="text-4xl font-bold mb-2">Roblox Script Haven</h1>
+                    <p class="text-gray-400">Share and discover the best game scripts with the community</p>
+                </div>
+                <a href="submit.html" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2">
+                    <i data-feather="plus"></i> Submit Script
+                </a>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Script Card 1 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-primary-500 transition-colors">
+                    <div class="p-5">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-semibold">Infinite Yield</h3>
+                            <span class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded">Verified</span>
+                        </div>
+                        <p class="text-gray-400 mb-4">The most popular admin script with over 100 commands for game control.</p>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2 text-sm text-gray-400">
+                                <i data-feather="user" class="w-4 h-4"></i>
+                                <span>ScriptMaster</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-sm text-gray-400">
+                                <i data-feather="download" class="w-4 h-4"></i>
+                                <span>12.4k</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-700 px-5 py-3 flex justify-between items-center">
+                        <span class="text-sm text-gray-300">Roblox Executor Required</span>
+                        <a href="script.html" class="text-primary-500 hover:text-primary-400 text-sm font-medium flex items-center gap-1">
+                            View <i data-feather="chevron-right" class="w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Script Card 2 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-primary-500 transition-colors">
+                    <div class="p-5">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-semibold">Dark Dex</h3>
+                            <span class="bg-yellow-500/20 text-yellow-400 text-xs px-2 py-1 rounded">Popular</span>
+                        </div>
+                        <p class="text-gray-400 mb-4">Advanced explorer for Roblox games with powerful inspection tools.</p>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2 text-sm text-gray-400">
+                                <i data-feather="user" class="w-4 h-4"></i>
+                                <span>ExplorerPro</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-sm text-gray-400">
+                                <i data-feather="download" class="w-4 h-4"></i>
+                                <span>8.7k</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-700 px-5 py-3 flex justify-between items-center">
+                        <span class="text-sm text-gray-300">Synapse X Recommended</span>
+                        <a href="script.html" class="text-primary-500 hover:text-primary-400 text-sm font-medium flex items-center gap-1">
+                            View <i data-feather="chevron-right" class="w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Script Card 3 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-primary-500 transition-colors">
+                    <div class="p-5">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-semibold">Owl Hub</h3>
+                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">New</span>
+                        </div>
+                        <p class="text-gray-400 mb-4">Universal script hub with support for multiple popular games.</p>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-2 text-sm text-gray-400">
+                                <i data-feather="user" class="w-4 h-4"></i>
+                                <span>OwlScripts</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-sm text-gray-400">
+                                <i data-feather="download" class="w-4 h-4"></i>
+                                <span>5.2k</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-700 px-5 py-3 flex justify-between items-center">
+                        <span class="text-sm text-gray-300">KRNL Supported</span>
+                        <a href="script.html" class="text-primary-500 hover:text-primary-400 text-sm font-medium flex items-center gap-1">
+                            View <i data-feather="chevron-right" class="w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="mb-12">
+            <h2 class="text-2xl font-bold mb-6">Top Categories</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 transition-colors flex flex-col items-center">
+                    <div class="w-12 h-12 bg-primary-500/20 rounded-full flex items-center justify-center mb-2">
+                        <i data-feather="shield" class="text-primary-500"></i>
+                    </div>
+                    <span class="font-medium">Admin</span>
+                    <span class="text-xs text-gray-400">124 scripts</span>
+                </a>
+                <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 transition-colors flex flex-col items-center">
+                    <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center mb-2">
+                        <i data-feather="zap" class="text-green-500"></i>
+                    </div>
+                    <span class="font-medium">Exploits</span>
+                    <span class="text-xs text-gray-400">87 scripts</span>
+                </a>
+                <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 transition-colors flex flex-col items-center">
+                    <div class="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center mb-2">
+                        <i data-feather="eye" class="text-purple-500"></i>
+                    </div>
+                    <span class="font-medium">ESP</span>
+                    <span class="text-xs text-gray-400">56 scripts</span>
+                </a>
+                <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 transition-colors flex flex-col items-center">
+                    <div class="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center mb-2">
+                        <i data-feather="box" class="text-yellow-500"></i>
+                    </div>
+                    <span class="font-medium">Game Hubs</span>
+                    <span class="text-xs text-gray-400">42 scripts</span>
+                </a>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Infinite Yield | Roblox Script Haven</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8 max-w-4xl">
+        <div class="flex flex-col md:flex-row gap-8">
+            <div class="md:w-2/3">
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <div>
+                            <h1 class="text-2xl font-bold mb-1">Infinite Yield</h1>
+                            <div class="flex items-center gap-2 text-sm text-gray-400 mb-4">
+                                <span class="bg-green-500/20 text-green-400 px-2 py-1 rounded">Verified</span>
+                                <span>By ScriptMaster</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i data-feather="bookmark" class="w-5 h-5"></i>
+                            </button>
+                            <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg">
+                                <i data-feather="share-2" class="w-5 h-5"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="mb-6">
+                        <p class="text-gray-300 mb-4">The most comprehensive admin script for Roblox with over 100 commands for complete game control. Features include player management, server tools, fun commands, and more.</p>
+                        
+                        <div class="flex flex-wrap gap-2 mb-6">
+                            <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm">Admin</span>
+                            <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm">Commands</span>
+                            <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm">Utility</span>
+                        </div>
+
+                        <div class="grid grid-cols-2 gap-4 mb-6">
+                            <div class="bg-gray-700/50 p-3 rounded-lg">
+                                <div class="text-sm text-gray-400 mb-1">Downloads</div>
+                                <div class="text-xl font-semibold">12,487</div>
+                            </div>
+                            <div class="bg-gray-700/50 p-3 rounded-lg">
+                                <div class="text-sm text-gray-400 mb-1">Last Updated</div>
+                                <div class="text-xl font-semibold">2 days ago</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mb-6">
+                        <h3 class="text-lg font-semibold mb-3">Requirements</h3>
+                        <ul class="space-y-2 text-gray-300">
+                            <li class="flex items-center gap-2">
+                                <i data-feather="check" class="w-4 h-4 text-green-500"></i>
+                                <span>Roblox Executor (Synapse X recommended)</span>
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <i data-feather="check" class="w-4 h-4 text-green-500"></i>
+                                <span>Basic knowledge of Lua scripting</span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="mb-6">
+                        <h3 class="text-lg font-semibold mb-3">Features</h3>
+                        <ul class="space-y-2 text-gray-300">
+                            <li class="flex items-center gap-2">
+                                <i data-feather="check-circle" class="w-4 h-4 text-primary-500"></i>
+                                <span>100+ admin commands</span>
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <i data-feather="check-circle" class="w-4 h-4 text-primary-500"></i>
+                                <span>Player management tools</span>
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <i data-feather="check-circle" class="w-4 h-4 text-primary-500"></i>
+                                <span>Server utilities</span>
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <i data-feather="check-circle" class="w-4 h-4 text-primary-500"></i>
+                                <span>Fun commands and effects</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+                    <h2 class="text-xl font-bold mb-4">Script Code</h2>
+                    <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
+                        <pre class="text-gray-300 font-mono text-sm"><code>-- Infinite Yield Admin Script
+-- Loadstring for easy execution
+loadstring(game:HttpGet('https://raw.githubusercontent.com/EdgeIY/infiniteyield/master/source'))()
+
+-- Main command list
+local cmds = {
+    ":fly - Enables flight mode",
+    ":noclip - Toggles noclip",
+    ":bring [player] - Brings player to you",
+    ":kill [player] - Kills the specified player",
+    ":tools - Gives you all tools",
+    ":esp - Shows player ESP",
+    ":unesp - Removes player ESP",
+    ":cmds - Shows all commands"
+}
+
+-- More commands available in the full script</code></pre>
+                    </div>
+                    <button class="mt-4 bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg font-medium transition-colors flex items-center gap-2">
+                        <i data-feather="copy"></i> Copy Script
+                    </button>
+                </div>
+            </div>
+
+            <div class="md:w-1/3">
+                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 sticky top-4">
+                    <h3 class="text-lg font-semibold mb-4">About Author</h3>
+                    <div class="flex items-center gap-3 mb-4">
+                        <div class="w-12 h-12 bg-primary-500/20 rounded-full flex items-center justify-center">
+                            <i data-feather="user" class="text-primary-500"></i>
+                        </div>
+                        <div>
+                            <div class="font-medium">ScriptMaster</div>
+                            <div class="text-sm text-gray-400">Verified Creator</div>
+                        </div>
+                    </div>
+
+                    <div class="mb-6">
+                        <div class="text-sm text-gray-400 mb-2">Other Scripts</div>
+                        <ul class="space-y-2">
+                            <li>
+                                <a href="#" class="text-gray-300 hover:text-primary-500 text-sm flex items-center gap-2">
+                                    <i data-feather="file-text" class="w-4 h-4"></i>
+                                    <span>Dark Dex Explorer</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="text-gray-300 hover:text-primary-500 text-sm flex items-center gap-2">
+                                    <i data-feather="file-text" class="w-4 h-4"></i>
+                                    <span>Simple Spy</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="mb-6">
+                        <div class="text-sm text-gray-400 mb-2">Executor Compatibility</div>
+                        <ul class="space-y-2">
+                            <li class="flex items-center gap-2 text-gray-300">
+                                <i data-feather="check" class="w-4 h-4 text-green-500"></i>
+                                <span>Synapse X</span>
+                            </li>
+                            <li class="flex items-center gap-2 text-gray-300">
+                                <i data-feather="check" class="w-4 h-4 text-green-500"></i>
+                                <span>Script-Ware</span>
+                            </li>
+                            <li class="flex items-center gap-2 text-gray-300">
+                                <i data-feather="check" class="w-4 h-4 text-green-500"></i>
+                                <span>KRNL</span>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <button class="w-full bg-secondary-500 hover:bg-secondary-600 text-white px-6 py-2 rounded-lg font-medium transition-colors flex items-center justify-center gap-2">
+                        <i data-feather="download"></i> Download Script
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

script.js

@@ -0,0 +1,55 @@
+// Copy script functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
+    tooltipTriggers.forEach(trigger => {
+        trigger.addEventListener('mouseenter', function() {
+            const tooltip = document.createElement('div');
+            tooltip.className = 'absolute z-10 bg-gray-800 text-white text-xs px-2 py-1 rounded shadow-lg';
+            tooltip.textContent = this.getAttribute('data-tooltip');
+            this.appendChild(tooltip);
+            
+            this.addEventListener('mouseleave', function() {
+                tooltip.remove();
+            });
+        });
+    });
+
+    // Copy script button
+    const copyButtons = document.querySelectorAll('[data-copy-script]');
+    copyButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const scriptCode = this.previousElementSibling.textContent;
+            navigator.clipboard.writeText(scriptCode).then(() => {
+                const originalText = this.innerHTML;
+                this.innerHTML = '<i data-feather="check"></i> Copied!';
+                feather.replace();
+                
+                setTimeout(() => {
+                    this.innerHTML = originalText;
+                    feather.replace();
+                }, 2000);
+            });
+        });
+    });
+
+    // Theme toggle functionality
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', function() {
+            const html = document.documentElement;
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        });
+    }
+
+    // Check for saved theme preference
+    if (localStorage.getItem('theme') === 'light') {
+        document.documentElement.classList.remove('dark');
+    }
+});

style.css

@@ -1,28 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Code block styling */
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation for buttons */
+button, a[role="button"] {
+    transition: all 0.2s ease;
 }
+
+/* Tooltip styles */
+.tooltip {
+    position: relative;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 120px;
+    background-color: #111827;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}

submit.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Submit Script | Roblox Script Haven</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8 max-w-3xl">
+        <div class="mb-8">
+            <h1 class="text-3xl font-bold mb-2">Submit Your Script</h1>
+            <p class="text-gray-400">Share your Roblox script with the community and help fellow players</p>
+        </div>
+
+        <form class="bg-gray-800 rounded-xl p-6 border border-gray-700">
+            <div class="mb-6">
+                <label for="script-name" class="block text-sm font-medium mb-2">Script Name</label>
+                <input type="text" id="script-name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="e.g. Infinite Yield">
+            </div>
+
+            <div class="mb-6">
+                <label for="script-description" class="block text-sm font-medium mb-2">Description</label>
+                <textarea id="script-description" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Describe what your script does..."></textarea>
+            </div>
+
+            <div class="mb-6">
+                <label for="script-code" class="block text-sm font-medium mb-2">Script Code</label>
+                <textarea id="script-code" rows="8" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Paste your Lua script here..."></textarea>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                <div>
+                    <label for="script-category" class="block text-sm font-medium mb-2">Category</label>
+                    <select id="script-category" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                        <option value="">Select a category</option>
+                        <option value="admin">Admin</option>
+                        <option value="exploit">Exploit</option>
+                        <option value="esp">ESP</option>
+                        <option value="hub">Game Hub</option>
+                        <option value="other">Other</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="script-executor" class="block text-sm font-medium mb-2">Recommended Executor</label>
+                    <select id="script-executor" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                        <option value="">Select executor</option>
+                        <option value="synapse">Synapse X</option>
+                        <option value="krnl">KRNL</option>
+                        <option value="scriptware">Script-Ware</option>
+                        <option value="any">Any Executor</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="mb-6">
+                <label class="flex items-center">
+                    <input type="checkbox" class="rounded bg-gray-700 border-gray-600 text-primary-500 focus:ring-primary-500">
+                    <span class="ml-2 text-sm">I confirm this script is safe and doesn't contain malware</span>
+                </label>
+            </div>
+
+            <div class="flex justify-end gap-4">
+                <a href="index.html" class="px-6 py-2 rounded-lg border border-gray-600 hover:bg-gray-700 transition-colors">Cancel</a>
+                <button type="submit" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg font-medium transition-colors flex items-center gap-2">
+                    <i data-feather="upload"></i> Submit Script
+                </button>
+            </div>
+        </form>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>