Spaces:

tokey4
/

anycoder-1f8d9771

Running

App Files Files Community

tokey4 commited on Dec 17, 2025

Commit

6786970

verified ·

1 Parent(s): a0a9096

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +618 -448

index.html CHANGED Viewed

@@ -4,9 +4,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>EduLearn - Your 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">
   <script>
     tailwind.config = {
       theme: {
@@ -23,6 +24,8 @@
             'text-primary': '#f1f5f9',
             'text-muted': '#94a3b8',
             success: '#10b981',
           }
         }
       }
@@ -44,25 +47,10 @@
       background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
     }
-    .gradient-border::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 4px;
-      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
-      transform: scaleX(0);
-      transition: transform 0.3s ease;
-    }
-    .gradient-border:hover::before {
-      transform: scaleX(1);
-    }
     /* Scrollbar */
     ::-webkit-scrollbar {
       width: 8px;
     }
     ::-webkit-scrollbar-track {
@@ -78,11 +66,35 @@
       background: #6366f1;
     }
     /* Animations */
     @keyframes fadeIn {
       from {
         opacity: 0;
-        transform: translateY(20px);
       }
       to {
@@ -92,69 +104,31 @@
     }
     .animate-fade-in {
-      animation: fadeIn 0.5s ease forwards;
-    }
-    .delay-100 { animation-delay: 0.1s; }
-    .delay-200 { animation-delay: 0.2s; }
-    .delay-300 { animation-delay: 0.3s; }
-    .delay-400 { animation-delay: 0.4s; }
-    .delay-500 { animation-delay: 0.5s; }
-    .delay-600 { animation-delay: 0.6s; }
-    .delay-700 { animation-delay: 0.7s; }
-    /* Custom range slider */
-    input[type="range"] {
-      -webkit-appearance: none;
-      appearance: none;
-      height: 6px;
-      background: #334155;
-      border-radius: 3px;
-      outline: none;
-    }
-    input[type="range"]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 14px;
-      height: 14px;
-      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
-      border-radius: 50%;
-      cursor: pointer;
-      transition: transform 0.2s;
     }
-    input[type="range"]::-webkit-slider-thumb:hover {
-      transform: scale(1.2);
-    }
-    input[type="range"]::-moz-range-thumb {
-      width: 14px;
-      height: 14px;
-      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
-      border-radius: 50%;
-      cursor: pointer;
-      border: none;
-    }
-    /* Video placeholder animation */
-    @keyframes pulse {
-      0%, 100% { transform: scale(1); opacity: 1; }
-      50% { transform: scale(1.1); opacity: 0.8; }
     }
-    .pulse-animation {
-      animation: pulse 2s ease-in-out infinite;
     }
-    /* Toast notification */
     .toast {
       position: fixed;
       bottom: 20px;
       right: 20px;
       padding: 16px 24px;
-      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
-      color: white;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
       transform: translateY(100px);
@@ -168,443 +142,639 @@
       opacity: 1;
     }
-    /* Progress completed */
-    .topic-completed {
-      background: rgba(16, 185, 129, 0.1) !important;
-      border-color: #10b981 !important;
     }
-    .topic-completed .play-icon {
-      background: rgba(16, 185, 129, 0.2) !important;
-      color: #10b981 !important;
     }
   </style>
 </head>
-<body class="bg-background text-text-primary min-h-screen leading-relaxed">
   <!-- Toast Notification -->
-  <div id="toast" class="toast">
     <i class="fas fa-check-circle mr-2"></i>
     <span id="toastMessage">Action completed!</span>
   </div>
-  <!-- Header -->
-  <header class="bg-background/95 backdrop-blur-xl border-b border-surface-light fixed w-full top-0 z-50 px-4 md:px-8 py-4">
-    <div class="max-w-7xl mx-auto flex justify-between items-center">
-      <div class="flex items-center gap-3 text-2xl font-bold cursor-pointer" onclick="showHome()">
-        <i class="fas fa-graduation-cap gradient-text"></i>
-        <span class="gradient-text">EduLearn</span>
-      </div>
-      <nav id="nav" class="hidden md:flex items-center gap-8">
-        <a href="#" onclick="showHome(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group nav-link active" data-section="home">
-          Home
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
-        </a>
-        <a href="#" onclick="showCourses(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group nav-link" data-section="courses">
-          Courses
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
-        </a>
-        <a href="#" onclick="showAbout(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group nav-link" data-section="about">
-          About
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
-        </a>
-        <a href="#" onclick="showContact(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300 relative group nav-link" data-section="contact">
-          Contact
-          <span class="absolute bottom-0 left-0 w-0 h-0.5 gradient-bg group-hover:w-full transition-all duration-300"></span>
-        </a>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
-          class="text-text-muted text-sm px-4 py-2 border border-surface-light rounded-full hover:border-primary hover:text-primary-light transition-all duration-300">
-          Built with anycoder
-        </a>
-      </nav>
-      <button class="md:hidden text-text-primary text-xl" onclick="toggleMenu()">
-        <i class="fas fa-bars" id="menuIcon"></i>
-      </button>
-    </div>
-    <!-- Mobile Menu -->
-    <nav id="mobileNav" class="hidden md:hidden flex-col gap-4 mt-4 pb-4 border-t border-surface-light pt-4">
-      <a href="#" onclick="showHome(); toggleMenu(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">Home</a>
-      <a href="#" onclick="showCourses(); toggleMenu(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">Courses</a>
-      <a href="#" onclick="showAbout(); toggleMenu(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">About</a>
-      <a href="#" onclick="showContact(); toggleMenu(); return false;" class="text-text-muted hover:text-text-primary font-medium transition-colors duration-300">Contact</a>
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
-        class="text-text-muted text-sm px-4 py-2 border border-surface-light rounded-full hover:border-primary hover:text-primary-light transition-all duration-300 w-fit">
-        Built with anycoder
-      </a>
-    </nav>
-  </header>
-  <main class="mt-20 min-h-[calc(100vh-80px)]">
-    <!-- Home View -->
-    <section id="homeView">
-      <!-- Hero Section -->
-      <div class="bg-gradient-to-br from-primary/10 to-secondary/10 py-16 px-4 md:px-8 text-center border-b border-surface-light">
-        <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 gradient-text animate-fade-in">Master Your Skills with EduLearn</h1>
-        <p class="text-text-muted text-lg md:text-xl max-w-2xl mx-auto mb-8 animate-fade-in delay-100">
-          Explore our comprehensive courses designed to help you excel in your academic journey and beyond.
-        </p>
-        <div class="max-w-lg mx-auto relative animate-fade-in delay-200">
-          <i class="fas fa-search absolute left-5 top-1/2 -translate-y-1/2 text-text-muted"></i>
-          <input type="text" id="searchInput" placeholder="Search for subjects, topics, or lessons..."
-                 class="w-full py-4 px-6 pl-12 border-2 border-surface-light rounded-full bg-surface text-text-primary text-base focus:outline-none focus:border-primary focus:shadow-lg focus:shadow-primary/20 transition-all duration-300"
-                 oninput="handleSearch(this.value)">
         </div>
-        <div id="searchResults" class="max-w-lg mx-auto mt-4 text-left hidden"></div>
       </div>
-      <!-- Stats Section -->
-      <div class="py-8 px-4 md:px-8 max-w-7xl mx-auto">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div class="bg-surface rounded-xl p-6 text-center border border-surface-light animate-fade-in delay-100">
-            <div class="text-3xl font-bold gradient-text" id="statStudents">0</div>
-            <div class="text-text-muted text-sm mt-1">Active Students</div>
           </div>
-          <div class="bg-surface rounded-xl p-6 text-center border border-surface-light animate-fade-in delay-200">
-            <div class="text-3xl font-bold gradient-text" id="statCourses">0</div>
-            <div class="text-text-muted text-sm mt-1">Total Courses</div>
           </div>
-          <div class="bg-surface rounded-xl p-6 text-center border border-surface-light animate-fade-in delay-300">
-            <div class="text-3xl font-bold gradient-text" id="statHours">0</div>
-            <div class="text-text-muted text-sm mt-1">Hours of Content</div>
           </div>
-          <div class="bg-surface rounded-xl p-6 text-center border border-surface-light animate-fade-in delay-400">
-            <div class="text-3xl font-bold gradient-text" id="statRating">0</div>
-            <div class="text-text-muted text-sm mt-1">Average Rating</div>
           </div>
         </div>
-      </div>
-      <!-- Subjects Grid -->
-      <div class="py-12 px-4 md:px-8 max-w-7xl mx-auto">
-        <h2 class="text-2xl font-bold mb-8 flex items-center gap-3">
-          <i class="fas fa-book-open text-primary"></i> Available Subjects
-        </h2>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="subjectsGrid">
-          <!-- Subject cards will be dynamically inserted -->
         </div>
-      </div>
-    </section>
-    <!-- Courses View -->
-    <section id="coursesView" class="hidden py-12 px-4 md:px-8 max-w-7xl mx-auto">
-      <h1 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">All Courses</h1>
-      <p class="text-text-muted mb-8">Browse our complete catalog of courses</p>
-      <!-- Filter Section -->
-      <div class="flex flex-wrap gap-4 mb-8">
-        <button class="px-6 py-2 rounded-full bg-primary text-white filter-btn active" data-filter="all" onclick="filterCourses('all')">All</button>
-        <button class="px-6 py-2 rounded-full bg-surface border border-surface-light text-text-muted hover:border-primary hover:text-primary-light transition-all filter-btn" data-filter="programming" onclick="filterCourses('programming')">Programming</button>
-        <button class="px-6 py-2 rounded-full bg-surface border border-surface-light text-text-muted hover:border-primary hover:text-primary-light transition-all filter-btn" data-filter="electronics" onclick="filterCourses('electronics')">Electronics</button>
-        <button class="px-6 py-2 rounded-full bg-surface border border-surface-light text-text-muted hover:border-primary hover:text-primary-light transition-all filter-btn" data-filter="business" onclick="filterCourses('business')">Business</button>
-        <button class="px-6 py-2 rounded-full bg-surface border border-surface-light text-text-muted hover:border-primary hover:text-primary-light transition-all filter-btn" data-filter="science" onclick="filterCourses('science')">Science</button>
-      </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="coursesGrid">
-        <!-- Course cards will be dynamically inserted -->
-      </div>
-    </section>
-    <!-- About View -->
-    <section id="aboutView" class="hidden py-12 px-4 md:px-8 max-w-7xl mx-auto">
-      <div class="text-center mb-12">
-        <h1 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">About EduLearn</h1>
-        <p class="text-text-muted max-w-2xl mx-auto">We're on a mission to make quality education accessible to everyone, everywhere.</p>
-      </div>
-      <div class="grid md:grid-cols-2 gap-12 items-center mb-16">
         <div>
-          <h2 class="text-2xl font-bold mb-4">Our Story</h2>
-          <p class="text-text-muted mb-4">Founded in 2020, EduLearn started with a simple idea: everyone deserves access to world-class education. What began as a small collection of programming tutorials has grown into a comprehensive learning platform serving thousands of students worldwide.</p>
-          <p class="text-text-muted">Today, we offer courses in programming, electronics, business, and more, all designed by industry experts and educators who are passionate about teaching.</p>
         </div>
-        <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 border border-surface-light">
-          <div class="grid grid-cols-2 gap-6">
-            <div class="text-center">
-              <div class="text-4xl font-bold gradient-text">50K+</div>
-              <div class="text-text-muted">Students</div>
-            </div>
-            <div class="text-center">
-              <div class="text-4xl font-bold gradient-text">200+</div>
-              <div class="text-text-muted">Courses</div>
-            </div>
-            <div class="text-center">
-              <div class="text-4xl font-bold gradient-text">50+</div>
-              <div class="text-text-muted">Instructors</div>
-            </div>
-            <div class="text-center">
-              <div class="text-4xl font-bold gradient-text">95%</div>
-              <div class="text-text-muted">Satisfaction</div>
-            </div>
-          </div>
         </div>
       </div>
-      <h2 class="text-2xl font-bold mb-8 text-center">Meet Our Team</h2>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="bg-surface rounded-2xl p-6 text-center border border-surface-light hover:border-primary transition-all">
-          <div class="w-24 h-24 rounded-full bg-gradient-to-br from-primary to-secondary mx-auto mb-4 flex items-center justify-center text-3xl text-white">
-            <i class="fas fa-user"></i>
           </div>
-          <h3 class="font-bold text-lg">John Smith</h3>
-          <p class="text-text-muted text-sm">CEO & Founder</p>
-        </div>
-        <div class="bg-surface rounded-2xl p-6 text-center border border-surface-light hover:border-primary transition-all">
-          <div class="w-24 h-24 rounded-full bg-gradient-to-br from-amber-500 to-amber-600 mx-auto mb-4 flex items-center justify-center text-3xl text-white">
-            <i class="fas fa-user"></i>
           </div>
-          <h3 class="font-bold text-lg">Sarah Johnson</h3>
-          <p class="text-text-muted text-sm">Head of Education</p>
         </div>
-        <div class="bg-surface rounded-2xl p-6 text-center border border-surface-light hover:border-primary transition-all">
-          <div class="w-24 h-24 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-600 mx-auto mb-4 flex items-center justify-center text-3xl text-white">
-            <i class="fas fa-user"></i>
-          </div>
-          <h3 class="font-bold text-lg">Mike Chen</h3>
-          <p class="text-text-muted text-sm">Lead Developer</p>
         </div>
-        <div class="bg-surface rounded-2xl p-6 text-center border border-surface-light hover:border-primary transition-all">
-          <div class="w-24 h-24 rounded-full bg-gradient-to-br from-pink-500 to-pink-600 mx-auto mb-4 flex items-center justify-center text-3xl text-white">
-            <i class="fas fa-user"></i>
-          </div>
-          <h3 class="font-bold text-lg">Emily Davis</h3>
-          <p class="text-text-muted text-sm">Content Director</p>
         </div>
       </div>
-    </section>
-    <!-- Contact View -->
-    <section id="contactView" class="hidden py-12 px-4 md:px-8 max-w-7xl mx-auto">
-      <div class="text-center mb-12">
-        <h1 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">Contact Us</h1>
-        <p class="text-text-muted max-w-2xl mx-auto">Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
       </div>
-      <div class="grid md:grid-cols-2 gap-12">
-        <div>
-          <form id="contactForm" class="space-y-6" onsubmit="handleContactSubmit(event)">
-            <div>
-              <label class="block text-sm font-medium mb-2">Your Name</label>
-              <input type="text" id="contactName" required class="w-full py-3 px-4 bg-surface border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all" placeholder="John Doe">
-            </div>
-            <div>
-              <label class="block text-sm font-medium mb-2">Email Address</label>
-              <input type="email" id="contactEmail" required class="w-full py-3 px-4 bg-surface border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all" placeholder="john@example.com">
-            </div>
-            <div>
-              <label class="block text-sm font-medium mb-2">Subject</label>
-              <select id="contactSubject" class="w-full py-3 px-4 bg-surface border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
-                <option value="general">General Inquiry</option>
-                <option value="support">Technical Support</option>
-                <option value="billing">Billing Question</option>
-                <option value="partnership">Partnership</option>
-              </select>
-            </div>
-            <div>
-              <label class="block text-sm font-medium mb-2">Message</label>
-              <textarea id="contactMessage" required rows="5" class="w-full py-3 px-4 bg-surface border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all resize-none" placeholder="Your message..."></textarea>
             </div>
-            <button type="submit" class="w-full py-4 gradient-bg text-white font-semibold rounded-xl hover:opacity-90 transition-all flex items-center justify-center gap-2">
-              <i class="fas fa-paper-plane"></i> Send Message
             </button>
-          </form>
-        </div>
-        <div class="space-y-6">
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
-            <div class="flex items-center gap-4 mb-4">
-              <div class="w-12 h-12 gradient-bg rounded-xl flex items-center justify-center text-white">
-                <i class="fas fa-envelope"></i>
               </div>
-              <div>
-                <h3 class="font-bold">Email Us</h3>
-                <p class="text-text-muted">support@edulearn.com</p>
               </div>
             </div>
           </div>
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
-            <div class="flex items-center gap-4 mb-4">
-              <div class="w-12 h-12 gradient-bg rounded-xl flex items-center justify-center text-white">
-                <i class="fas fa-phone"></i>
-              </div>
-              <div>
-                <h3 class="font-bold">Call Us</h3>
-                <p class="text-text-muted">+1 (234) 567-890</p>
               </div>
             </div>
           </div>
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
-            <div class="flex items-center gap-4 mb-4">
-              <div class="w-12 h-12 gradient-bg rounded-xl flex items-center justify-center text-white">
-                <i class="fas fa-map-marker-alt"></i>
-              </div>
-              <div>
-                <h3 class="font-bold">Visit Us</h3>
-                <p class="text-text-muted">123 Education St, Learning City, LC 12345</p>
               </div>
             </div>
           </div>
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
-            <h3 class="font-bold mb-4">Follow Us</h3>
-            <div class="flex gap-4">
-              <a href="#" class="w-12 h-12 bg-surface-light rounded-xl flex items-center justify-center text-text-muted hover:text-primary-light hover:bg-primary/20 transition-all">
-                <i class="fab fa-facebook-f"></i>
-              </a>
-              <a href="#" class="w-12 h-12 bg-surface-light rounded-xl flex items-center justify-center text-text-muted hover:text-primary-light hover:bg-primary/20 transition-all">
-                <i class="fab fa-twitter"></i>
-              </a>
-              <a href="#" class="w-12 h-12 bg-surface-light rounded-xl flex items-center justify-center text-text-muted hover:text-primary-light hover:bg-primary/20 transition-all">
-                <i class="fab fa-linkedin-in"></i>
-              </a>
-              <a href="#" class="w-12 h-12 bg-surface-light rounded-xl flex items-center justify-center text-text-muted hover:text-primary-light hover:bg-primary/20 transition-all">
-                <i class="fab fa-youtube"></i>
-              </a>
             </div>
           </div>
-        </div>
-      </div>
-    </section>
-    <!-- Subject Detail View -->
-    <section class="hidden py-8 px-4 md:px-8 max-w-6xl mx-auto" id="subjectDetail">
-      <button class="inline-flex items-center gap-2 text-text-muted px-6 py-3 bg-surface rounded-lg hover:bg-surface-light hover:text-text-primary transition-all duration-300 mb-8" onclick="showHome()">
-        <i class="fas fa-arrow-left"></i> Back to Subjects
-      </button>
-      <div class="flex flex-col md:flex-row items-center gap-6 mb-8 p-8 bg-surface rounded-2xl border border-surface-light" id="subjectHeader">
-        <!-- Dynamic content -->
-      </div>
-      <!-- Progress Bar -->
-      <div class="bg-surface rounded-xl p-6 border border-surface-light mb-8">
-        <div class="flex justify-between items-center mb-3">
-          <span class="font-medium">Course Progress</span>
-          <span class="text-primary-light font-bold" id="courseProgressText">0%</span>
-        </div>
-        <div class="w-full h-3 bg-surface-light rounded-full overflow-hidden">
-          <div class="h-full gradient-bg rounded-full transition-all duration-500" id="courseProgressBar" style="width: 0%"></div>
-        </div>
-      </div>
-      <h3 class="text-xl font-bold mb-6 flex items-center gap-3">
-        <i class="fas fa-list text-primary"></i> Chapters
-      </h3>
-      <div class="flex flex-col gap-4" id="chaptersList">
-        <!-- Dynamic content -->
-      </div>
-    </section>
-    <!-- Video Player View -->
-    <section class="hidden py-8 px-4 md:px-8 max-w-6xl mx-auto" id="videoSection">
-      <button class="inline-flex items-center gap-2 text-text-muted px-6 py-3 bg-surface rounded-lg hover:bg-surface-light hover:text-text-primary transition-all duration-300 mb-8" onclick="backToSubject()">
-        <i class="fas fa-arrow-left"></i> Back to Chapters
-      </button>
-      <div class="bg-surface rounded-2xl overflow-hidden border border-surface-light">
-        <div class="relative pt-[56.25%] bg-black" id="videoContainer">
-          <div class="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-surface to-background cursor-pointer" id="videoPlaceholder" onclick="togglePlay()">
-            <i class="fas fa-play-circle text-7xl text-primary mb-4 pulse-animation"></i>
-            <p class="text-text-muted text-xl">Click to start learning</p>
-          </div>
-          <div class="absolute inset-0 hidden items-center justify-center bg-gradient-to-br from-surface to-background" id="videoPlaying">
-            <div class="text-center">
-              <i class="fas fa-video text-6xl text-primary mb-4"></i>
-              <p class="text-text-primary text-xl font-semibold" id="nowPlayingTitle">Now Playing</p>
-              <p class="text-text-muted">Video is playing...</p>
-              <div class="mt-4 flex items-center justify-center gap-2">
-                <div class="w-3 h-3 bg-primary rounded-full animate-pulse"></div>
-                <div class="w-3 h-3 bg-primary rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
-                <div class="w-3 h-3 bg-primary rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
               </div>
             </div>
           </div>
         </div>
-        <!-- Video Controls -->
-        <div class="p-6 bg-surface">
-          <div class="w-full h-2 bg-surface-light rounded-full mb-4 cursor-pointer overflow-hidden" id="progressBar" onclick="seekVideo(event)">
-            <div class="h-full w-0 gradient-bg rounded-full transition-all duration-100" id="progressFill"></div>
           </div>
-          <div class="flex flex-wrap justify-between items-center gap-4">
-            <div class="flex items-center gap-3">
-              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="skipBack()" title="Skip back 10s">
-                <i class="fas fa-backward"></i>
-              </button>
-              <button class="w-14 h-14 gradient-bg text-white rounded-full hover:scale-110 transition-all duration-300 flex items-center justify-center text-xl" onclick="togglePlay()" id="playButton">
-                <i class="fas fa-play" id="playIcon"></i>
-              </button>
-              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="skipForward()" title="Skip forward 10s">
-                <i class="fas fa-forward"></i>
-              </button>
-              <span class="text-text-muted text-sm font-mono" id="timeDisplay">00:00 / 00:00</span>
             </div>
-            <div class="flex items-center gap-3">
-              <div class="flex items-center gap-3">
-                <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="toggleMute()">
-                  <i class="fas fa-volume-up" id="volumeIcon"></i>
-                </button>
-                <input type="range" class="w-20 md:w-24" min="0" max="100" value="75" id="volumeSlider" oninput="changeVolume(this.value)">
               </div>
-              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="changeSpeed()" title="Playback speed">
-                <span class="text-xs font-bold" id="speedDisplay">1x</span>
-              </button>
-              <button class="w-11 h-11 bg-surface-light text-text-primary rounded-full hover:bg-primary hover:scale-110 transition-all duration-300 flex items-center justify-center" onclick="toggleFullscreen()">
-                <i class="fas fa-expand" id="fullscreenIcon"></i>
-              </button>
             </div>
           </div>
         </div>
-        <div class="p-6 border-t border-surface-light" id="videoInfo">
-          <!-- Dynamic content -->
-        </div>
-        <!-- Notes Section -->
-        <div class="p-6 border-t border-surface-light">
-          <h4 class="font-bold mb-4 flex items-center gap-2">
-            <i class="fas fa-sticky-note text-primary"></i> Your Notes
-          </h4>
-          <textarea id="videoNotes" class="w-full h-32 p-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary resize-none" placeholder="Take notes while watching..."></textarea>
-          <button onclick="saveNotes()" class="mt-3 px-6 py-2 gradient-bg text-white rounded-lg hover:opacity-90 transition-all">
-            <i class="fas fa-save mr-2"></i>Save Notes
           </button>
         </div>
-        <!-- Related Topics -->
-        <div class="p-6 border-t border-surface-light">
-          <h4 class="font-bold mb-4 flex items-center gap-2">
-            <i class="fas fa-list text-primary"></i> Up Next
-          </h4>
-          <div id="relatedTopics" class="space-y-3">
-            <!-- Dynamic content -->
           </div>
         </div>
-      </div>
-    </section>
-  </main>
-  <!-- Footer -->
-  <footer class="bg-surface border-t border-surface-light py-12 px-4 md:px-8 mt-16">
-    <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-      <div>
-        <h4 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <i class="fas fa-graduation-cap gradient-text"></i>
-          <span class="gradient-text">EduLearn</span>
-        </h4>
-        <p class="text-text-muted">Empowering students with quality education and comprehensive learning resources.</p>
-        <div class="flex gap-3 mt-4">
-          <a href="#" class="w-10 h-10 bg-surface-light rounded-lg flex items-center justify-center text-text-muted hover:text-primary-light hover:bg-primary/20 transition-all">
-            <i class="fab fa-facebook-f"></i>
-          </a>
-          <a href="#" class="w-10 h-10 bg-surface-light rounded-lg flex items-center justify-center text-text-muted hover:text-primary-light hover:bg-primary/20 transition-all">
-            <i class="fab fa-twitter"></i>
-          </a>
-          <a href="#" class="w-10 h-10 bg-surface-light rounded-lg flex items-center justify-center text-text-muted hover:text-primary-light hover:bg-primary/20 transition-all">
-            <i class="fab fa-linkedin-in"></i>
-          </a>
         </div>
-      </div>
-      <div>
-        <h4 class="text-xl font-bold mb-4">Quick Links</h4>
-        <a href="#" onclick="showHome(); return false;" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">Home</a>
-        <a href="#" onclick="showCourses(); return false;" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">Courses</a>
-        <a href="#" onclick="showAbout(); return false;" class="block text-text-muted hover:text-primary-light transition-colors duration-300 mb-2">About Us</a>
-        <a href="#" onclick="showContact(); return false;" class="block text-text-muted hover:text-primary-

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>EduLearn Admin Panel</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">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script>
     tailwind.config = {
       theme: {
             'text-primary': '#f1f5f9',
             'text-muted': '#94a3b8',
             success: '#10b981',
+            warning: '#f59e0b',
+            danger: '#ef4444',
           }
         }
       }
       background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
     }
     /* Scrollbar */
     ::-webkit-scrollbar {
       width: 8px;
+      height: 8px;
     }
     ::-webkit-scrollbar-track {
       background: #6366f1;
     }
+    /* Sidebar */
+    .sidebar {
+      transition: transform 0.3s ease, width 0.3s ease;
+    }
+    .sidebar.collapsed {
+      transform: translateX(-100%);
+    }
+    @media (min-width: 1024px) {
+      .sidebar.collapsed {
+        transform: translateX(0);
+        width: 80px;
+      }
+      .sidebar.collapsed .sidebar-text {
+        display: none;
+      }
+      .sidebar.collapsed .sidebar-item {
+        justify-content: center;
+      }
+    }
     /* Animations */
     @keyframes fadeIn {
       from {
         opacity: 0;
+        transform: translateY(10px);
       }
       to {
     }
     .animate-fade-in {
+      animation: fadeIn 0.3s ease forwards;
     }
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateX(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
     }
+    .animate-slide-in {
+      animation: slideIn 0.3s ease forwards;
     }
+    /* Toast */
     .toast {
       position: fixed;
       bottom: 20px;
       right: 20px;
       padding: 16px 24px;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
       transform: translateY(100px);
       opacity: 1;
     }
+    /* Modal */
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.7);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+      backdrop-filter: blur(4px);
+    }
+    .modal.show {
+      display: flex;
     }
+    .modal-content {
+      background: #1e293b;
+      border-radius: 16px;
+      max-width: 600px;
+      width: 90%;
+      max-height: 90vh;
+      overflow-y: auto;
+      animation: fadeIn 0.3s ease;
+    }
+    /* Table */
+    .table-container {
+      overflow-x: auto;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th,
+    td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid #334155;
+    }
+    th {
+      background: #0f172a;
+      font-weight: 600;
+      color: #94a3b8;
+      text-transform: uppercase;
+      font-size: 12px;
+      letter-spacing: 0.5px;
+    }
+    tr:hover {
+      background: rgba(99, 102, 241, 0.05);
+    }
+    /* Status badges */
+    .badge {
+      padding: 4px 12px;
+      border-radius: 20px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .badge-success {
+      background: rgba(16, 185, 129, 0.2);
+      color: #10b981;
+    }
+    .badge-warning {
+      background: rgba(245, 158, 11, 0.2);
+      color: #f59e0b;
+    }
+    .badge-danger {
+      background: rgba(239, 68, 68, 0.2);
+      color: #ef4444;
+    }
+    .badge-info {
+      background: rgba(14, 165, 233, 0.2);
+      color: #0ea5e9;
+    }
+    /* Custom checkbox */
+    .custom-checkbox {
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      border: 2px solid #334155;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .custom-checkbox:checked {
+      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
+      border-color: #6366f1;
+    }
+    .custom-checkbox:checked::after {
+      content: '✓';
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 12px;
     }
   </style>
 </head>
+<body class="bg-background text-text-primary min-h-screen">
   <!-- Toast Notification -->
+  <div id="toast" class="toast gradient-bg text-white">
     <i class="fas fa-check-circle mr-2"></i>
     <span id="toastMessage">Action completed!</span>
   </div>
+  <!-- Delete Confirmation Modal -->
+  <div id="deleteModal" class="modal">
+    <div class="modal-content p-6">
+      <div class="text-center">
+        <div class="w-16 h-16 bg-danger/20 rounded-full flex items-center justify-center mx-auto mb-4">
+          <i class="fas fa-trash-alt text-danger text-2xl"></i>
+        </div>
+        <h3 class="text-xl font-bold mb-2">Confirm Delete</h3>
+        <p class="text-text-muted mb-6">Are you sure you want to delete this item? This action cannot be undone.</p>
+        <div class="flex gap-4 justify-center">
+          <button onclick="closeDeleteModal()"
+            class="px-6 py-2 bg-surface-light rounded-lg hover:bg-surface transition-all">Cancel</button>
+          <button onclick="confirmDelete()"
+            class="px-6 py-2 bg-danger text-white rounded-lg hover:bg-red-600 transition-all">Delete</button>
         </div>
       </div>
+    </div>
+  </div>
+  <!-- Add/Edit Course Modal -->
+  <div id="courseModal" class="modal">
+    <div class="modal-content">
+      <div class="p-6 border-b border-surface-light flex justify-between items-center">
+        <h3 class="text-xl font-bold" id="courseModalTitle">Add New Course</h3>
+        <button onclick="closeCourseModal()" class="text-text-muted hover:text-text-primary">
+          <i class="fas fa-times text-xl"></i>
+        </button>
+      </div>
+      <form id="courseForm" class="p-6 space-y-4" onsubmit="saveCourse(event)">
+        <input type="hidden" id="courseId">
+        <div>
+          <label class="block text-sm font-medium mb-2">Course Title</label>
+          <input type="text" id="courseTitle" required
+            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
+            placeholder="Enter course title">
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium mb-2">Category</label>
+            <select id="courseCategory"
+              class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
+              <option value="programming">Programming</option>
+              <option value="electronics">Electronics</option>
+              <option value="business">Business</option>
+              <option value="science">Science</option>
+              <option value="design">Design</option>
+            </select>
           </div>
+          <div>
+            <label class="block text-sm font-medium mb-2">Level</label>
+            <select id="courseLevel"
+              class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </select>
           </div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium mb-2">Price ($)</label>
+            <input type="number" id="coursePrice" required min="0" step="0.01"
+              class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
+              placeholder="49.99">
           </div>
+          <div>
+            <label class="block text-sm font-medium mb-2">Duration (hours)</label>
+            <input type="number" id="courseDuration" required min="1"
+              class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
+              placeholder="10">
           </div>
         </div>
+        <div>
+          <label class="block text-sm font-medium mb-2">Description</label>
+          <textarea id="courseDescription" rows="3"
+            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all resize-none"
+            placeholder="Course description..."></textarea>
         </div>
         <div>
+          <label class="block text-sm font-medium mb-2">Instructor</label>
+          <input type="text" id="courseInstructor" required
+            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
+            placeholder="Instructor name">
         </div>
+        <div class="flex items-center gap-3">
+          <input type="checkbox" id="coursePublished" class="custom-checkbox">
+          <label for="coursePublished" class="text-sm">Publish immediately</label>
         </div>
+        <div class="flex gap-4 pt-4">
+          <button type="button" onclick="closeCourseModal()"
+            class="flex-1 py-3 bg-surface-light rounded-xl hover:bg-surface transition-all">Cancel</button>
+          <button type="submit" class="flex-1 py-3 gradient-bg text-white rounded-xl hover:opacity-90 transition-all">
+            Save Course
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- Add/Edit User Modal -->
+  <div id="userModal" class="modal">
+    <div class="modal-content">
+      <div class="p-6 border-b border-surface-light flex justify-between items-center">
+        <h3 class="text-xl font-bold" id="userModalTitle">Add New User</h3>
+        <button onclick="closeUserModal()" class="text-text-muted hover:text-text-primary">
+          <i class="fas fa-times text-xl"></i>
+        </button>
       </div>
+      <form id="userForm" class="p-6 space-y-4" onsubmit="saveUser(event)">
+        <input type="hidden" id="userId">
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium mb-2">First Name</label>
+            <input type="text" id="userFirstName" required
+              class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
+              placeholder="John">
           </div>
+          <div>
+            <label class="block text-sm font-medium mb-2">Last Name</label>
+            <input type="text" id="userLastName" required
+              class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
+              placeholder="Doe">
           </div>
         </div>
+        <div>
+          <label class="block text-sm font-medium mb-2">Email</label>
+          <input type="email" id="userEmail" required
+            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
+            placeholder="john@example.com">
         </div>
+        <div>
+          <label class="block text-sm font-medium mb-2">Role</label>
+          <select id="userRole"
+            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
+            <option value="student">Student</option>
+            <option value="instructor">Instructor</option>
+            <option value="admin">Admin</option>
+          </select>
+        </div>
+        <div>
+          <label class="block text-sm font-medium mb-2">Status</label>
+          <select id="userStatus"
+            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+            <option value="suspended">Suspended</option>
+          </select>
         </div>
+        <div class="flex gap-4 pt-4">
+          <button type="button" onclick="closeUserModal()"
+            class="flex-1 py-3 bg-surface-light rounded-xl hover:bg-surface transition-all">Cancel</button>
+          <button type="submit" class="flex-1 py-3 gradient-bg text-white rounded-xl hover:opacity-90 transition-all">
+            Save User
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="flex min-h-screen">
+    <!-- Sidebar -->
+    <aside id="sidebar"
+      class="sidebar fixed lg:relative w-64 h-screen bg-surface border-r border-surface-light z-40 flex flex-col">
+      <div class="p-6 border-b border-surface-light">
+        <div class="flex items-center gap-3">
+          <i class="fas fa-graduation-cap text-2xl gradient-text"></i>
+          <span class="text-xl font-bold gradient-text sidebar-text">EduLearn</span>
+        </div>
+        <p class="text-text-muted text-sm mt-1 sidebar-text">Admin Panel</p>
       </div>
+      <nav class="flex-1 p-4 space-y-2">
+        <a href="#" onclick="showSection('dashboard'); return false;"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-primary bg-primary/20 transition-all"
+          data-section="dashboard">
+          <i class="fas fa-chart-line w-5"></i>
+          <span class="sidebar-text">Dashboard</span>
+        </a>
+        <a href="#" onclick="showSection('courses'); return false;"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
+          data-section="courses">
+          <i class="fas fa-book w-5"></i>
+          <span class="sidebar-text">Courses</span>
+        </a>
+        <a href="#" onclick="showSection('users'); return false;"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
+          data-section="users">
+          <i class="fas fa-users w-5"></i>
+          <span class="sidebar-text">Users</span>
+        </a>
+        <a href="#" onclick="showSection('analytics'); return false;"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
+          data-section="analytics">
+          <i class="fas fa-chart-bar w-5"></i>
+          <span class="sidebar-text">Analytics</span>
+        </a>
+        <a href="#" onclick="showSection('content'); return false;"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
+          data-section="content">
+          <i class="fas fa-video w-5"></i>
+          <span class="sidebar-text">Content</span>
+        </a>
+        <a href="#" onclick="showSection('payments'); return false;"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
+          data-section="payments">
+          <i class="fas fa-credit-card w-5"></i>
+          <span class="sidebar-text">Payments</span>
+        </a>
+        <a href="#" onclick="showSection('settings'); return false;"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
+          data-section="settings">
+          <i class="fas fa-cog w-5"></i>
+          <span class="sidebar-text">Settings</span>
+        </a>
+      </nav>
+      <div class="p-4 border-t border-surface-light">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+          class="block text-center text-text-muted text-xs hover:text-primary-light transition-colors sidebar-text">
+          Built with anycoder
+        </a>
       </div>
+    </aside>
+    <!-- Main Content -->
+    <main class="flex-1 lg:ml-0">
+      <!-- Top Header -->
+      <header class="bg-surface/95 backdrop-blur-xl border-b border-surface-light px-4 md:px-8 py-4 sticky top-0 z-30">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center gap-4">
+            <button onclick="toggleSidebar()" class="lg:hidden text-text-primary text-xl">
+              <i class="fas fa-bars"></i>
+            </button>
+            <button onclick="toggleSidebar()" class="hidden lg:block text-text-muted hover:text-text-primary">
+              <i class="fas fa-bars"></i>
+            </button>
+            <div class="relative hidden md:block">
+              <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-text-muted"></i>
+              <input type="text" placeholder="Search..."
+                class="py-2 px-4 pl-10 bg-background border border-surface-light rounded-lg focus:outline-none focus:border-primary transition-all w-64">
             </div>
+          </div>
+          <div class="flex items-center gap-4">
+            <button class="relative p-2 text-text-muted hover:text-text-primary transition-colors">
+              <i class="fas fa-bell text-xl"></i>
+              <span class="absolute top-0 right-0 w-5 h-5 bg-danger text-white text-xs rounded-full flex items-center justify-center">3</span>
             </button>
+            <button class="relative p-2 text-text-muted hover:text-text-primary transition-colors">
+              <i class="fas fa-envelope text-xl"></i>
+              <span class="absolute top-0 right-0 w-5 h-5 bg-primary text-white text-xs rounded-full flex items-center justify-center">5</span>
+            </button>
+            <div class="flex items-center gap-3 pl-4 border-l border-surface-light">
+              <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold">
+                A
               </div>
+              <div class="hidden md:block">
+                <p class="font-medium text-sm">Admin User</p>
+                <p class="text-text-muted text-xs">Super Admin</p>
               </div>
             </div>
           </div>
+        </div>
+      </header>
+      <!-- Dashboard Section -->
+      <section id="dashboardSection" class="p-4 md:p-8">
+        <div class="mb-8">
+          <h1 class="text-2xl md:text-3xl font-bold mb-2">Dashboard</h1>
+          <p class="text-text-muted">Welcome back! Here's what's happening with your platform.</p>
+        </div>
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in">
+            <div class="flex justify-between items-start mb-4">
+              <div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
+                <i class="fas fa-users text-primary text-xl"></i>
               </div>
+              <span class="text-success text-sm flex items-center gap-1">
+                <i class="fas fa-arrow-up"></i> 12%
+              </span>
             </div>
+            <h3 class="text-3xl font-bold mb-1">12,847</h3>
+            <p class="text-text-muted text-sm">Total Students</p>
           </div>
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in" style="animation-delay: 0.1s">
+            <div class="flex justify-between items-start mb-4">
+              <div class="w-12 h-12 rounded-xl bg-secondary/20 flex items-center justify-center">
+                <i class="fas fa-book text-secondary text-xl"></i>
               </div>
+              <span class="text-success text-sm flex items-center gap-1">
+                <i class="fas fa-arrow-up"></i> 8%
+              </span>
             </div>
+            <h3 class="text-3xl font-bold mb-1">156</h3>
+            <p class="text-text-muted text-sm">Active Courses</p>
           </div>
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in" style="animation-delay: 0.2s">
+            <div class="flex justify-between items-start mb-4">
+              <div class="w-12 h-12 rounded-xl bg-success/20 flex items-center justify-center">
+                <i class="fas fa-dollar-sign text-success text-xl"></i>
+              </div>
+              <span class="text-success text-sm flex items-center gap-1">
+                <i class="fas fa-arrow-up"></i> 23%
+              </span>
             </div>
+            <h3 class="text-3xl font-bold mb-1">$48,295</h3>
+            <p class="text-text-muted text-sm">Revenue (Monthly)</p>
           </div>
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in" style="animation-delay: 0.3s">
+            <div class="flex justify-between items-start mb-4">
+              <div class="w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center">
+                <i class="fas fa-star text-accent text-xl"></i>
               </div>
+              <span class="text-danger text-sm flex items-center gap-1">
+                <i class="fas fa-arrow-down"></i> 2%
+              </span>
             </div>
+            <h3 class="text-3xl font-bold mb-1">4.8</h3>
+            <p class="text-text-muted text-sm">Average Rating</p>
           </div>
         </div>
+        <!-- Charts Row -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
+            <h3 class="font-bold mb-4">Revenue Overview</h3>
+            <canvas id="revenueChart" height="200"></canvas>
           </div>
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
+            <h3 class="font-bold mb-4">Student Enrollments</h3>
+            <canvas id="enrollmentChart" height="200"></canvas>
+          </div>
+        </div>
+        <!-- Recent Activity & Top Courses -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
+            <h3 class="font-bold mb-4">Recent Activity</h3>
+            <div class="space-y-4">
+              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
+                <div class="w-10 h-10 rounded-full bg-success/20 flex items-center justify-center">
+                  <i class="fas fa-user-plus text-success"></i>
+                </div>
+                <div class="flex-1">
+                  <p class="font-medium text-sm">New student registered</p>
+                  <p class="text-text-muted text-xs">Sarah Johnson joined Python Basics</p>
+                </div>
+                <span class="text-text-muted text-xs">2 min ago</span>
+              </div>
+              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
+                <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
+                  <i class="fas fa-credit-card text-primary"></i>
+                </div>
+                <div class="flex-1">
+                  <p class="font-medium text-sm">Payment received</p>
+                  <p class="text-text-muted text-xs">$49.99 for Web Development course</p>
+                </div>
+                <span class="text-text-muted text-xs">15 min ago</span>
+              </div>
+              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
+                <div class="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
+                  <i class="fas fa-star text-accent"></i>
+                </div>
+                <div class="flex-1">
+                  <p class="font-medium text-sm">New review posted</p>
+                  <p class="text-text-muted text-xs">5-star review on JavaScript course</p>
+                </div>
+                <span class="text-text-muted text-xs">1 hour ago</span>
+              </div>
+              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
+                <div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center">
+                  <i class="fas fa-book text-secondary"></i>
+                </div>
+                <div class="flex-1">
+                  <p class="font-medium text-sm">Course published</p>
+                  <p class="text-text-muted text-xs">React Advanced Patterns is now live</p>
+                </div>
+                <span class="text-text-muted text-xs">3 hours ago</span>
+              </div>
             </div>
+          </div>
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
+            <h3 class="font-bold mb-4">Top Performing Courses</h3>
+            <div class="space-y-4">
+              <div class="flex items-center gap-4">
+                <span class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center text-white font-bold">1</span>
+                <div class="flex-1">
+                  <p class="font-medium">Python for Beginners</p>
+                  <div class="flex items-center gap-2 text-sm text-text-muted">
+                    <span>2,456 students</span>
+                    <span>•</span>
+                    <span class="text-accent"><i class="fas fa-star"></i> 4.9</span>
+                  </div>
+                </div>
+                <span class="text-success font-bold">$12,280</span>
+              </div>
+              <div class="flex items-center gap-4">
+                <span class="w-8 h-8 rounded-lg bg-surface-light flex items-center justify-center font-bold">2</span>
+                <div class="flex-1">
+                  <p class="font-medium">Web Development Bootcamp</p>
+                  <div class="flex items-center gap-2 text-sm text-text-muted">
+                    <span>1,892 students</span>
+                    <span>•</span>
+                    <span class="text-accent"><i class="fas fa-star"></i> 4.8</span>
+                  </div>
+                </div>
+                <span class="text-success font-bold">$9,460</span>
+              </div>
+              <div class="flex items-center gap-4">
+                <span class="w-8 h-8 rounded-lg bg-surface-light flex items-center justify-center font-bold">3</span>
+                <div class="flex-1">
+                  <p class="font-medium">JavaScript Mastery</p>
+                  <div class="flex items-center gap-2 text-sm text-text-muted">
+                    <span>1,654 students</span>
+                    <span>•</span>
+                    <span class="text-accent"><i class="fas fa-star"></i> 4.7</span>
+                  </div>
+                </div>
+                <span class="text-success font-bold">$8,270</span>
+              </div>
+              <div class="flex items-center gap-4">
+                <span class="w-8 h-8 rounded-lg bg-surface-light flex items-center justify-center font-bold">4</span>
+                <div class="flex-1">
+                  <p class="font-medium">Data Science Fundamentals</p>
+                  <div class="flex items-center gap-2 text-sm text-text-muted">
+                    <span>1,234 students</span>
+                    <span>•</span>
+                    <span class="text-accent"><i class="fas fa-star"></i> 4.6</span>
+                  </div>
+                </div>
+                <span class="text-success font-bold">$6,170</span>
               </div>
             </div>
           </div>
         </div>
+      </section>
+      <!-- Courses Section -->
+      <section id="coursesSection" class="hidden p-4 md:p-8">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+          <div>
+            <h1 class="text-2xl md:text-3xl font-bold mb-2">Courses</h1>
+            <p class="text-text-muted">Manage all courses on the platform</p>
+          </div>
+          <button onclick="openCourseModal()"
+            class="px-6 py-3 gradient-bg text-white rounded-xl hover:opacity-90 transition-all flex items-center gap-2">
+            <i class="fas fa-plus"></i> Add New Course
           </button>
         </div>
+        <!-- Filters -->
+        <div class="flex flex-wrap gap-4 mb-6">
+          <select
+            class="py-2 px-4 bg-surface border border-surface-light rounded-lg focus:outline-none focus:border-primary">
+            <option value="">All Categories</option>
+            <option value="programming">Programming</option>
+            <option value="electronics">Electronics</option>
+            <option value="business">Business</option>
+            <option value="science">Science</option>
+          </select>
+          <select
+            class="py-2 px-4 bg-surface border border-surface-light rounded-lg focus:outline-none focus:border-primary">
+            <option value="">All Status</option>
+            <option value="published">Published</option>
+            <option value="draft">Draft</option>
+            <option value="archived">Archived</option>
+          </select>
+          <div class="relative flex-1 min-w-[200px]">
+            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-text-muted"></i>
+            <input type="text" placeholder="Search courses..."
+              class="w-full py-2 px-4 pl-10 bg-surface border border-surface-light rounded-lg focus:outline-none focus:border-primary">
           </div>
         </div>
+        <!-- Courses Table -->
+        <div class="bg-surface rounded-2xl border border-surface-light overflow-hidden">
+          <div class="table-container">
+            <table>
+              <thead>
+                <tr>
+                  <th><input type="checkbox" class="custom-checkbox"></th>
+                  <th>Course</th>
+                  <th>Category</th>
+                  <th>Instructor</th>
+                  <th>Students</th>
+                  <th>Price</th>
+                  <th>Status</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody id="coursesTableBody">
+                <!-- Dynamic content -->
+              </tbody>
+            </table>
+          </div>
+          <div class="p-4 border-t border-surface-light flex justify-between items-center">
+            <p class="text-text-muted text-sm">Showing 1-10 of 156 courses</p>
+            <div class="flex gap-2">
+              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">Previous</button>
+              <button class="px-4 py-2 gradient-bg text-white rounded-lg">1</button>
+              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">2</button>
+              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">3</button>
+              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">Next</button>
+            </div>
+          </div>
         </div>
+      </section>
+      <!-- Users Section -->
+      <section id="usersSection" class="hidden p-4 md:p-8">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
+          <div>
+            <h1 class="text-2xl md:text-3xl font-bold mb-