Spaces:

VellaroSKIBIDI
/

codedex-clone-dark-coder-hub

Running

App Files Files Community

VellaroSKIBIDI commited on Nov 4, 2025

Commit

6f00a0c

verified ·

1 Parent(s): bff980a

make it exactly ;like coddex

Browse files

Files changed (5) hide show

components/footer.js +11 -12
components/navbar.js +5 -6
index.html +8 -8
script.js +15 -25
style.css +17 -9

components/footer.js CHANGED Viewed

@@ -49,25 +49,24 @@ class CustomFooter extends HTMLElement {
             </div>
             <div>
-              <h3 class="text-lg font-semibold mb-4">Learn</h3>
               <ul class="space-y-2">
-                <li><a href="/python" class="footer-link text-gray-400">Python</a></li>
-                <li><a href="/javascript" class="footer-link text-gray-400">JavaScript</a></li>
-                <li><a href="/web-dev" class="footer-link text-gray-400">Web Development</a></li>
-                <li><a href="/github-copilot" class="footer-link text-gray-400">GitHub Copilot</a></li>
               </ul>
-            </div>
             <div>
               <h3 class="text-lg font-semibold mb-4">Community</h3>
               <ul class="space-y-2">
-                <li><a href="/community" class="footer-link text-gray-400">Community Hub</a></li>
-                <li><a href="/community/leaderboards" class="footer-link text-gray-400">Leaderboards</a></li>
-                <li><a href="/community/project-showcase" class="footer-link text-gray-400">Project Showcase</a></li>
-                <li><a href="/community/monthly-challenge" class="footer-link text-gray-400">Monthly Challenge</a></li>
-                <li><a href="/community/30-nites-of-code" class="footer-link text-gray-400">30 Nites of Code</a></li>
               </ul>
-            </div>
             <div>
               <h3 class="text-lg font-semibold mb-4">Resources</h3>

             </div>
             <div>
+              <h3 class="text-lg font-semibold mb-4">Resources</h3>
               <ul class="space-y-2">
+                <li><a href="/learn" class="footer-link text-gray-400">Learning Paths</a></li>
+                <li><a href="/docs" class="footer-link text-gray-400">Documentation</a></li>
+                <li><a href="/cheatsheets" class="footer-link text-gray-400">Cheatsheets</a></li>
+                <li><a href="/tools" class="footer-link text-gray-400">Developer Tools</a></li>
               </ul>
+</div>
             <div>
               <h3 class="text-lg font-semibold mb-4">Community</h3>
               <ul class="space-y-2">
+                <li><a href="/community" class="footer-link text-gray-400">Forum</a></li>
+                <li><a href="/events" class="footer-link text-gray-400">Events</a></li>
+                <li><a href="/leaderboard" class="footer-link text-gray-400">Leaderboard</a></li>
+                <li><a href="/mentors" class="footer-link text-gray-400">Mentors</a></li>
               </ul>
+</div>
             <div>
               <h3 class="text-lg font-semibold mb-4">Resources</h3>

components/navbar.js CHANGED Viewed

@@ -59,21 +59,20 @@ class CustomNavbar extends HTMLElement {
             <div class="hidden lg:flex items-center space-x-8">
               <div class="flex space-x-6">
-                <a href="/python" class="nav-link py-2">Python</a>
-                <a href="/javascript" class="nav-link py-2">JavaScript</a>
-                <a href="/web-dev" class="nav-link py-2">Web Dev</a>
                 <a href="/challenges" class="nav-link py-2">Challenges</a>
                 <a href="/projects" class="nav-link py-2">Projects</a>
                 <a href="/community" class="nav-link py-2">Community</a>
-              </div>
               <div class="flex items-center ml-8 space-x-4">
                 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition">
                   <i data-feather="moon" class="hidden dark:block"></i>
                   <i data-feather="sun" class="dark:hidden"></i>
                 </button>
-                <a href="/builds" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition">Build</a>
-              </div>
             </div>
             <button id="mobile-menu-button" class="lg:hidden p-2 rounded-md hover:bg-gray-700 transition">

             <div class="hidden lg:flex items-center space-x-8">
               <div class="flex space-x-6">
                 <a href="/challenges" class="nav-link py-2">Challenges</a>
                 <a href="/projects" class="nav-link py-2">Projects</a>
+                <a href="/learn" class="nav-link py-2">Learn</a>
                 <a href="/community" class="nav-link py-2">Community</a>
+                <a href="/blog" class="nav-link py-2">Blog</a>
+</div>
               <div class="flex items-center ml-8 space-x-4">
                 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition">
                   <i data-feather="moon" class="hidden dark:block"></i>
                   <i data-feather="sun" class="dark:hidden"></i>
                 </button>
+                <a href="/new-project" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition">New Project</a>
+</div>
             </div>
             <button id="mobile-menu-button" class="lg:hidden p-2 rounded-md hover:bg-gray-700 transition">

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CodeDex Clone | Home</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>
@@ -32,12 +32,12 @@
     <main class="container mx-auto px-4 py-8">
         <section class="mb-16">
             <div class="text-center">
-                <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">Master Coding with Fun Challenges</h1>
-                <p class="text-xl text-gray-400 max-w-3xl mx-auto">Join our community of developers, complete challenges, build projects, and climb the leaderboards!</p>
-                <div class="mt-8 flex justify-center gap-4">
-                    <a href="/python" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition">Start Learning</a>
-                    <a href="/community" class="px-6 py-3 border border-gray-700 hover:bg-gray-800 rounded-lg font-medium transition">Join Community</a>
-                </div>
             </div>
         </section>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeDex | Learn to Code</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>
     <main class="container mx-auto px-4 py-8">
         <section class="mb-16">
             <div class="text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">Learn, Build, Share</h1>
+                <p class="text-xl text-gray-400 max-w-3xl mx-auto">The interactive platform to learn coding through challenges and projects</p>
+<div class="mt-8 flex justify-center gap-4">
+                    <a href="/challenges" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition">Start Coding</a>
+                    <a href="/projects" class="px-6 py-3 border border-gray-700 hover:bg-gray-800 rounded-lg font-medium transition">View Projects</a>
+</div>
             </div>
         </section>

script.js CHANGED Viewed

@@ -41,31 +41,21 @@ if (localStorage.getItem('theme') === 'light') {
 } else {
     document.documentElement.classList.add('dark');
 }
-// Initialize tooltips
 document.addEventListener('DOMContentLoaded', () => {
-    const tooltipElements = document.querySelectorAll('[data-tooltip]');
-    tooltipElements.forEach(el => {
-        el.addEventListener('mouseenter', () => {
-            const tooltip = document.createElement('div');
-            tooltip.className = 'absolute z-50 px-3 py-1 text-sm bg-gray-800 text-white rounded-md shadow-lg';
-            tooltip.textContent = el.getAttribute('data-tooltip');
-            const rect = el.getBoundingClientRect();
-            tooltip.style.top = `${rect.top - 40}px`;
-            tooltip.style.left = `${rect.left + rect.width / 2}px`;
-            tooltip.style.transform = 'translateX(-50%)';
-            tooltip.id = 'current-tooltip';
-            document.body.appendChild(tooltip);
-        });
-        el.addEventListener('mouseleave', () => {
-            const tooltip = document.getElementById('current-tooltip');
-            if (tooltip) {
-                tooltip.remove();
-            }
-        });
     });
-});

 } else {
     document.documentElement.classList.add('dark');
 }
+// CodeDex specific initialization
 document.addEventListener('DOMContentLoaded', () => {
+    // Add active class to current nav link
+    const currentPath = window.location.pathname;
+    const navLinks = document.querySelectorAll('custom-navbar a, custom-footer a');
+    navLinks.forEach(link => {
+        if (link.getAttribute('href') === currentPath) {
+            link.classList.add('active');
+        }
     });
+    // Initialize code editor if present
+    if (document.querySelector('.code-editor')) {
+        // This would be replaced with actual CodeMirror or Monaco editor initialization
+        console.log('Code editor initialized');
+    }
+});

style.css CHANGED Viewed

@@ -47,22 +47,30 @@ body {
         transform: translateY(0);
     }
 }
-/* Utility classes */
-.hover-scale {
-    transition: transform 0.2s ease;
 }
-.hover-scale:hover {
-    transform: scale(1.03);
 }
-.gradient-text {
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
 }
 /* Dark mode toggle transition */
 .dark-mode-transition * {
     transition: background-color 0.3s ease, border-color 0.3s ease;

         transform: translateY(0);
     }
 }
+/* CodeDex specific styles */
+.code-editor {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.challenge-card {
+    transition: all 0.2s ease;
 }
+.challenge-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 }
+.active {
+    color: #6366f1 !important;
+    font-weight: 600;
 }
+.active:after {
+    width: 100% !important;
+}
 /* Dark mode toggle transition */
 .dark-mode-transition * {
     transition: background-color 0.3s ease, border-color 0.3s ease;