Hugging Face's logo

Spaces:
LordOdin721
/
edusphere-admin-portal
Running

App Files Community
LordOdin721 commited on
Commit
d00bc1e
·
verified ·
1 Parent(s): fee3420

NOW CONTINUE IT

Browse files
Files changed (2) hide show
  1. components/sidebar.js +6 -8
  2. courses.html +129 -0
components/sidebar.js CHANGED
@@ -34,12 +34,11 @@ class CustomSidebar extends HTMLElement {
34
  <div class="flex flex-col w-64 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 h-screen fixed">
35
  <div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
36
  <div class="flex-1 px-3 space-y-1">
37
- <a href="#" class="nav-item active flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white">
38
  <i data-feather="home" class="mr-3 h-5 w-5"></i>
39
  Dashboard
40
  </a>
41
-
42
- <div class="space-y-1">
43
  <button class="nav-item flex items-center w-full px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white">
44
  <i data-feather="users" class="mr-3 h-5 w-5"></i>
45
  <span class="flex-1 text-left">Users</span>
@@ -56,12 +55,11 @@ class CustomSidebar extends HTMLElement {
56
  </div>
57
 
58
  <div class="space-y-1">
59
- <button class="nav-item flex items-center w-full px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white">
60
  <i data-feather="book" class="mr-3 h-5 w-5"></i>
61
- <span class="flex-1 text-left">Courses</span>
62
- <i data-feather="chevron-down" class="h-4 w-4"></i>
63
- </button>
64
- <div class="submenu pl-11">
65
  <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
66
  All Courses
67
  </a>
 
34
  <div class="flex flex-col w-64 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 h-screen fixed">
35
  <div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
36
  <div class="flex-1 px-3 space-y-1">
37
+ <a href="index.html" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white">
38
  <i data-feather="home" class="mr-3 h-5 w-5"></i>
39
  Dashboard
40
  </a>
41
+ <div class="space-y-1">
 
42
  <button class="nav-item flex items-center w-full px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white">
43
  <i data-feather="users" class="mr-3 h-5 w-5"></i>
44
  <span class="flex-1 text-left">Users</span>
 
55
  </div>
56
 
57
  <div class="space-y-1">
58
+ <a href="courses.html" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white">
59
  <i data-feather="book" class="mr-3 h-5 w-5"></i>
60
+ <span class="flex-1">Courses</span>
61
+ </a>
62
+ <div class="submenu pl-11">
 
63
  <a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
64
  All Courses
65
  </a>
courses.html ADDED
@@ -0,0 +1,129 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Courses | EduSphere Admin Dashboard</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 500: '#6366f1',
17
+ },
18
+ secondary: {
19
+ 500: '#8b5cf6',
20
+ }
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ </head>
27
+ <body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
28
+ <custom-navbar></custom-navbar>
29
+ <div class="flex">
30
+ <custom-sidebar></custom-sidebar>
31
+
32
+ <main class="flex-1 p-6">
33
+ <div class="flex justify-between items-center mb-6">
34
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Courses</h1>
35
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md flex items-center">
36
+ <i data-feather="plus" class="mr-2"></i>
37
+ Add Course
38
+ </button>
39
+ </div>
40
+
41
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
42
+ <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
43
+ <div class="flex items-center space-x-4">
44
+ <div class="relative">
45
+ <input type="text" placeholder="Search courses..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
46
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
47
+ </div>
48
+ <select class="border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
49
+ <option>All Categories</option>
50
+ <option>Programming</option>
51
+ <option>Design</option>
52
+ <option>Business</option>
53
+ </select>
54
+ </div>
55
+ <div class="flex items-center space-x-2">
56
+ <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
57
+ <i data-feather="list"></i>
58
+ </button>
59
+ <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
60
+ <i data-feather="grid"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="overflow-x-auto">
66
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
67
+ <thead class="bg-gray-50 dark:bg-gray-700">
68
+ <tr>
69
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Course</th>
70
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Category</th>
71
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Students</th>
72
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
73
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
74
+ </tr>
75
+ </thead>
76
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
77
+ <!-- Course 1 -->
78
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
79
+ <td class="px-6 py-4 whitespace-nowrap">
80
+ <div class="flex items-center">
81
+ <div class="flex-shrink-0 h-10 w-10">
82
+ <img class="h-10 w-10 rounded-md" src="http://static.photos/technology/200x200/1" alt="">
83
+ </div>
84
+ <div class="ml-4">
85
+ <div class="text-sm font-medium text-gray-900 dark:text-white">Advanced JavaScript</div>
86
+ <div class="text-sm text-gray-500 dark:text-gray-400">12 lessons</div>
87
+ </div>
88
+ </div>
89
+ </td>
90
+ <td class="px-6 py-4 whitespace-nowrap">
91
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Programming</span>
92
+ </td>
93
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">248</td>
94
+ <td class="px-6 py-4 whitespace-nowrap">
95
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Active</span>
96
+ </td>
97
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
98
+ <button class="text-primary-500 hover:text-primary-700 mr-3"><i data-feather="edit-2"></i></button>
99
+ <button class="text-red-500 hover:text-red-700"><i data-feather="trash-2"></i></button>
100
+ </td>
101
+ </tr>
102
+
103
+ <!-- More courses would be listed here -->
104
+ </tbody>
105
+ </table>
106
+ </div>
107
+
108
+ <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
109
+ <div class="text-sm text-gray-500 dark:text-gray-400">
110
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">36</span> courses
111
+ </div>
112
+ <div class="flex space-x-2">
113
+ <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">Previous</button>
114
+ <button class="px-3 py-1 border border-primary-500 bg-primary-500 text-white rounded-md text-sm font-medium">1</button>
115
+ <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">2</button>
116
+ <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">3</button>
117
+ <button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">Next</button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </main>
122
+ </div>
123
+
124
+ <script src="components/navbar.js"></script>
125
+ <script src="components/sidebar.js"></script>
126
+ <script src="script.js"></script>
127
+ <script>feather.replace();</script>
128
+ </body>
129
+ </html>