Spaces:
Running
Running
| <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">${ |