Spaces:

tokey4
/

anycoder-1f8d9771

Running

File size: 30,886 Bytes

<!DOCTYPE html>
<html lang="en">

<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: {
        extend: {
          colors: {
            primary: '#6366f1',
            'primary-dark': '#4f46e5',
            'primary-light': '#818cf8',
            secondary: '#0ea5e9',
            accent: '#f59e0b',
            background: '#0f172a',
            surface: '#1e293b',
            'surface-light': '#334155',
            'text-primary': '#f1f5f9',
            'text-muted': '#94a3b8',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
          }
        }
      }
    }
  </script>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .gradient-text {
      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .gradient-bg {
      background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #0f172a;
    }

    ::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      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 {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .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: 0;
      transition: all 0.3s ease;
      z-index: 1000;
    }

    .toast.show {
      transform: translateY(0);
      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;
      min-width: 800px;
    }

    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;
      text-transform: capitalize;
    }

    .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;
    }

    .badge-secondary {
      background: rgba(148, 163, 184, 0.2);
      color: #94a3b8;
    }

    /* 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 max-w-sm">
      <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">Status</label>
            <select id="courseStatus"
              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="published">Published</option>
              <option value="draft">Draft</option>
              <option value="archived">Archived</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">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>
        <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">Name</label>
            <input type="text" id="userName" 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 Doe">
          </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>
        <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="banned">Banned</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;" id="nav-dashboard"
          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-primary bg-primary/20 transition-all">
          <i class="fas fa-chart-line w-5"></i>
          <span class="sidebar-text">Dashboard</span>
        </a>
        <a href="#" onclick="showSection('courses'); return false;" id="nav-courses"
          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">
          <i class="fas fa-book w-5"></i>
          <span class="sidebar-text">Courses</span>
        </a>
        <a href="#" onclick="showSection('users'); return false;" id="nav-users"
          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">
          <i class="fas fa-users w-5"></i>
          <span class="sidebar-text">Users</span>
        </a>
        <a href="#" onclick="showSection('settings'); return false;" id="nav-settings"
          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">
          <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 overflow-x-hidden">
      <!-- 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>
            <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="dashboard" class="p-4 md:p-8 animate-fade-in">
        <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">
            <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">
            <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">
            <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">
            <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>
      </section>

      <!-- Courses Section -->
      <section id="courses" class="hidden p-4 md:p-8 animate-fade-in">
        <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>
          </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>
      </section>

      <!-- Users Section -->
      <section id="users" class="hidden p-4 md:p-8 animate-fade-in">
        <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">Users</h1>
            <p class="text-text-muted">Manage students and instructors</p>
          </div>
          <button onclick="openUserModal()"
            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 User
          </button>
        </div>

        <!-- Users 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>User</th>
                  <th>Role</th>
                  <th>Status</th>
                  <th>Joined Date</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody id="usersTableBody">
                <!-- Dynamic content -->
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- Settings Section -->
      <section id="settings" class="hidden p-4 md:p-8 animate-fade-in">
        <div class="mb-8">
          <h1 class="text-2xl md:text-3xl font-bold mb-2">Settings</h1>
          <p class="text-text-muted">Configure platform preferences</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- Profile Card -->
          <div class="bg-surface rounded-2xl border border-surface-light p-6">
            <div class="flex flex-col items-center">
              <div class="w-24 h-24 rounded-full gradient-bg flex items-center justify-center text-white text-3xl font-bold mb-4">
                A
              </div>
              <h3 class="text-xl font-bold">Admin User</h3>
              <p class="text-text-muted text-sm mb-6">Super Administrator</p>
              <button class="w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary/10 transition-all">Edit Profile</button>
            </div>
          </div>

          <!-- General Settings -->
          <div class="lg:col-span-2 bg-surface rounded-2xl border border-surface-light p-6">
            <h3 class="text-xl font-bold mb-6">General Settings</h3>
            <form class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="block text-sm font-medium mb-2">Site Name</label>
                  <input type="text" value="EduLearn" class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary">
                </div>
                <div>
                  <label class="block text-sm font-medium mb-2">Support Email</label>
                  <input type="email" value="support@edulearn.com" class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary">
                </div>
              </div>
              
              <div>
                <label class="block text-sm font-medium mb-2">Platform Currency</label>
                <select class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary">
                  <option value="USD">USD ($)</option>
                  <option value="EUR">EUR (€)</option>
                  <option value="GBP">GBP (£)</option>
                </select>
              </div>

              <div class="flex items-center justify-between p-4 bg-background rounded-xl">
                <div>
                  <h4 class="font-medium">Maintenance Mode</h4>
                  <p class="text-text-muted text-sm">Disable access for standard users</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" value="" class="sr-only peer">
                  <div class="w-11 h-6 bg-surface-light peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                </label>
              </div>

              <div class="pt-4">
                 <button type="button" onclick="showToast('Settings saved successfully!')" class="px-6 py-3 gradient-bg text-white rounded-xl hover:opacity-90 transition-all">Save Changes</button>
              </div>
            </form>
          </div>
        </div>
      </section>

    </main>
  </div>

  <script>
    // Mock Data
    let courses = [
      { id: 1, title: 'Python for Beginners', category: 'Programming', instructor: 'Sarah Johnson', students: 2456, price: 49.99, status: 'published' },
      { id: 2, title: 'Web Development Bootcamp', category: 'Programming', instructor: 'Mike Chen', students: 1892, price: 89.99, status: 'published' },
      { id: 3, title: 'Digital Marketing 101', category: 'Business', instructor: 'Emma Wilson', students: 854, price: 39.99, status: 'draft' },
      { id: 4, title: 'Advanced Electronics', category: 'Electronics', instructor: 'David Brown', students: 432, price: 59.99, status: 'archived' },
      { id: 5, title: 'UI/UX Design Masterclass', category: 'Design', instructor: 'Lisa Taylor', students: 1205, price: 69.99, status: 'published' },
    ];

    let users = [
      { id: 1, name: 'Alice Freeman', email: 'alice@example.com', role: 'Student', status: 'active', joined: '2023-01-15' },
      { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'Instructor', status: 'active', joined: '2022-11-20' },
      { id: 3, name: 'Charlie Davis', email: 'charlie@example.com', role: 'Student', status: 'inactive', joined: '2023-03-10' },
      { id: 4, name: 'Diana Prince', email: 'diana@example.com', role: 'Admin', status: 'active', joined: '2022-08-05' },
      { id: 5, name: 'Evan Wright', email: 'evan@example.com', role: 'Student', status: 'banned', joined: '2023-02-28' },
    ];

    let deleteTarget = null; // { type: 'course'|'user', id: number }

    // Navigation Logic
    function showSection(sectionId) {
      // Hide all sections
      document.querySelectorAll('section').forEach(el => el.classList.add('hidden'));
      // Show target section
      document.getElementById(sectionId).classList.remove('hidden');
      
      // Update sidebar active state
      document.querySelectorAll('.sidebar-item').forEach(el => {
        el.classList.remove('bg-primary/20', 'text-text-primary');
        el.classList.add('text-text-muted');
      });
      
      const activeLink = document.getElementById(`nav-${sectionId}`);
      if(activeLink) {
        activeLink.classList.remove('text-text-muted');
        activeLink.classList.add('bg-primary/20', 'text-text-primary');
      }
    }

    // Sidebar Toggle
    function toggleSidebar() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('collapsed');
      
      // Mobile logic
      if (window.innerWidth < 1024) {
        if (!sidebar.classList.contains('collapsed')) {
          sidebar.style.transform = 'translateX(0)';
        } else {
          sidebar.style.transform = 'translateX(-100%)';
        }
      }
    }

    // Render Tables
    function renderCourses() {
      const tbody = document.getElementById('coursesTableBody');
      tbody.innerHTML = courses.map(course => `
        <tr>
          <td><input type="checkbox" class="custom-checkbox"></td>
          <td>
            <div class="font-medium text-text-primary">${course.title}</div>
          </td>
          <td><span class="text-sm text-text-muted">${course.category}</span></td>
          <td>
            <div class="flex items-center gap-2">
              <div class="w-6 h-6 rounded-full bg-surface-light flex items-center justify-center text-xs text-white">
                ${course.instructor.charAt(0)}
              </div>
              <span class="text-sm">${