Hugging Face's logo

Spaces:
joyman12
/
checkchue
Running

App Files Community
joyman12 commited on
Commit
ebb9903
·
verified ·
1 Parent(s): 24d96c1

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1222 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Checkchue
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: checkchue
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1222 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Teacher Dashboard - Classroom Management</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar.collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar.collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .sidebar.collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar.collapsed .nav-item {
23
+ justify-content: center;
24
+ }
25
+ .content {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .content.expanded {
29
+ margin-left: 70px;
30
+ }
31
+ .subject-card:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
34
+ }
35
+ .tab-content {
36
+ display: none;
37
+ }
38
+ .tab-content.active {
39
+ display: block;
40
+ }
41
+ .assignment-card:hover .assignment-actions {
42
+ opacity: 1;
43
+ }
44
+ .assignment-actions {
45
+ opacity: 0;
46
+ transition: opacity 0.3s ease;
47
+ }
48
+ .calendar-day:hover {
49
+ background-color: #f0f9ff;
50
+ }
51
+ .calendar-day.today {
52
+ background-color: #e0f2fe;
53
+ }
54
+ .calendar-day.has-events::after {
55
+ content: '';
56
+ position: absolute;
57
+ bottom: 5px;
58
+ left: 50%;
59
+ transform: translateX(-50%);
60
+ width: 6px;
61
+ height: 6px;
62
+ border-radius: 50%;
63
+ background-color: #3b82f6;
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-50 font-sans">
68
+ <div class="flex h-screen overflow-hidden">
69
+ <!-- Sidebar -->
70
+ <div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
71
+ <!-- Logo -->
72
+ <div class="p-4 flex items-center space-x-2 border-b border-blue-700">
73
+ <i class="fas fa-chalkboard-teacher text-2xl"></i>
74
+ <span class="logo-text text-xl font-bold">EduManage</span>
75
+ </div>
76
+
77
+ <!-- User Profile -->
78
+ <div class="p-4 flex items-center space-x-3 border-b border-blue-700">
79
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full">
80
+ <div class="sidebar-text">
81
+ <div class="font-medium">Sarah Johnson</div>
82
+ <div class="text-xs text-blue-200">Math & Science Teacher</div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Navigation -->
87
+ <nav class="flex-1 overflow-y-auto">
88
+ <div class="p-2">
89
+ <div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1">
90
+ <i class="fas fa-tachometer-alt"></i>
91
+ <span class="sidebar-text">Dashboard</span>
92
+ </div>
93
+
94
+ <div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1">
95
+ <i class="fas fa-book"></i>
96
+ <span class="sidebar-text">Subjects</span>
97
+ </div>
98
+
99
+ <div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1">
100
+ <i class="fas fa-users"></i>
101
+ <span class="sidebar-text">Classes</span>
102
+ </div>
103
+
104
+ <div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1">
105
+ <i class="fas fa-tasks"></i>
106
+ <span class="sidebar-text">Assignments</span>
107
+ </div>
108
+
109
+ <div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1">
110
+ <i class="fas fa-file-alt"></i>
111
+ <span class="sidebar-text">Exams</span>
112
+ </div>
113
+
114
+ <div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1">
115
+ <i class="fas fa-calendar-alt"></i>
116
+ <span class="sidebar-text">Calendar</span>
117
+ </div>
118
+
119
+ <div class="nav-item px-3 py-2 rounded-md flex items-center space-x-3 text-blue-100 hover:bg-blue-700 cursor-pointer mb-1">
120
+ <i class="fas fa-chart-bar"></i>
121
+ <span class="sidebar-text">Reports</span>
122
+ </div>
123
+ </div>
124
+ </nav>
125
+
126
+ <!-- Collapse Button -->
127
+ <div class="p-4 border-t border-blue-700 flex justify-end">
128
+ <button id="toggleSidebar" class="text-blue-200 hover:text-white">
129
+ <i class="fas fa-chevron-left"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Main Content -->
135
+ <div class="content flex-1 overflow-y-auto">
136
+ <!-- Header -->
137
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
138
+ <h1 class="text-2xl font-bold text-gray-800">Teacher Dashboard</h1>
139
+ <div class="flex items-center space-x-4">
140
+ <div class="relative">
141
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
142
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
143
+ </div>
144
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
145
+ <i class="fas fa-bell"></i>
146
+ </button>
147
+ </div>
148
+ </header>
149
+
150
+ <!-- Dashboard Content -->
151
+ <main class="p-6">
152
+ <!-- Quick Stats -->
153
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
154
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-blue-500">
155
+ <div class="flex justify-between items-center">
156
+ <div>
157
+ <p class="text-gray-500">Subjects</p>
158
+ <h3 class="text-2xl font-bold">5</h3>
159
+ </div>
160
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
161
+ <i class="fas fa-book text-xl"></i>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-green-500">
167
+ <div class="flex justify-between items-center">
168
+ <div>
169
+ <p class="text-gray-500">Classes</p>
170
+ <h3 class="text-2xl font-bold">8</h3>
171
+ </div>
172
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
173
+ <i class="fas fa-users text-xl"></i>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-yellow-500">
179
+ <div class="flex justify-between items-center">
180
+ <div>
181
+ <p class="text-gray-500">Assignments</p>
182
+ <h3 class="text-2xl font-bold">24</h3>
183
+ </div>
184
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
185
+ <i class="fas fa-tasks text-xl"></i>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-red-500">
191
+ <div class="flex justify-between items-center">
192
+ <div>
193
+ <p class="text-gray-500">Exams</p>
194
+ <h3 class="text-2xl font-bold">6</h3>
195
+ </div>
196
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
197
+ <i class="fas fa-file-alt text-xl"></i>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Tabs Navigation -->
204
+ <div class="bg-white rounded-lg shadow-sm mb-6">
205
+ <div class="border-b border-gray-200">
206
+ <nav class="flex -mb-px">
207
+ <button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-blue-500 text-blue-600" data-tab="subjects">
208
+ <i class="fas fa-book mr-2"></i> Subjects
209
+ </button>
210
+ <button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="classes">
211
+ <i class="fas fa-users mr-2"></i> Classes
212
+ </button>
213
+ <button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="assignments">
214
+ <i class="fas fa-tasks mr-2"></i> Assignments
215
+ </button>
216
+ <button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="exams">
217
+ <i class="fas fa-file-alt mr-2"></i> Exams
218
+ </button>
219
+ <button class="tab-btn py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="calendar">
220
+ <i class="fas fa-calendar-alt mr-2"></i> Calendar
221
+ </button>
222
+ </nav>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Tab Contents -->
227
+ <div id="tab-contents">
228
+ <!-- Subjects Tab -->
229
+ <div id="subjects" class="tab-content active">
230
+ <div class="flex justify-between items-center mb-6">
231
+ <h2 class="text-xl font-bold text-gray-800">Your Subjects</h2>
232
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
233
+ <i class="fas fa-plus mr-2"></i> Add Subject
234
+ </button>
235
+ </div>
236
+
237
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
238
+ <!-- Subject Card 1 -->
239
+ <div class="subject-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition duration-300">
240
+ <div class="bg-blue-600 p-4 text-white">
241
+ <div class="flex justify-between items-center">
242
+ <h3 class="font-bold text-lg">Mathematics</h3>
243
+ <div class="flex space-x-2">
244
+ <button class="p-1 rounded-full hover:bg-blue-500">
245
+ <i class="fas fa-edit"></i>
246
+ </button>
247
+ <button class="p-1 rounded-full hover:bg-blue-500">
248
+ <i class="fas fa-trash"></i>
249
+ </button>
250
+ </div>
251
+ </div>
252
+ <p class="text-blue-100 text-sm mt-1">Grade 9-12</p>
253
+ </div>
254
+ <div class="p-4">
255
+ <div class="flex justify-between items-center mb-3">
256
+ <div>
257
+ <p class="text-gray-500 text-sm">Classes</p>
258
+ <p class="font-medium">3</p>
259
+ </div>
260
+ <div>
261
+ <p class="text-gray-500 text-sm">Lessons</p>
262
+ <p class="font-medium">15</p>
263
+ </div>
264
+ <div>
265
+ <p class="text-gray-500 text-sm">Students</p>
266
+ <p class="font-medium">87</p>
267
+ </div>
268
+ </div>
269
+ <div class="pt-3 border-t border-gray-100">
270
+ <p class="text-gray-500 text-sm mb-1">Recent Activity</p>
271
+ <p class="text-sm">New assignment added to Algebra II</p>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Subject Card 2 -->
277
+ <div class="subject-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition duration-300">
278
+ <div class="bg-green-600 p-4 text-white">
279
+ <div class="flex justify-between items-center">
280
+ <h3 class="font-bold text-lg">Science</h3>
281
+ <div class="flex space-x-2">
282
+ <button class="p-1 rounded-full hover:bg-green-500">
283
+ <i class="fas fa-edit"></i>
284
+ </button>
285
+ <button class="p-1 rounded-full hover:bg-green-500">
286
+ <i class="fas fa-trash"></i>
287
+ </button>
288
+ </div>
289
+ </div>
290
+ <p class="text-green-100 text-sm mt-1">Grade 10-11</p>
291
+ </div>
292
+ <div class="p-4">
293
+ <div class="flex justify-between items-center mb-3">
294
+ <div>
295
+ <p class="text-gray-500 text-sm">Classes</p>
296
+ <p class="font-medium">2</p>
297
+ </div>
298
+ <div>
299
+ <p class="text-gray-500 text-sm">Lessons</p>
300
+ <p class="font-medium">12</p>
301
+ </div>
302
+ <div>
303
+ <p class="text-gray-500 text-sm">Students</p>
304
+ <p class="font-medium">62</p>
305
+ </div>
306
+ </div>
307
+ <div class="pt-3 border-t border-gray-100">
308
+ <p class="text-gray-500 text-sm mb-1">Recent Activity</p>
309
+ <p class="text-sm">Chemistry lab scheduled for tomorrow</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Subject Card 3 -->
315
+ <div class="subject-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition duration-300">
316
+ <div class="bg-purple-600 p-4 text-white">
317
+ <div class="flex justify-between items-center">
318
+ <h3 class="font-bold text-lg">Physics</h3>
319
+ <div class="flex space-x-2">
320
+ <button class="p-1 rounded-full hover:bg-purple-500">
321
+ <i class="fas fa-edit"></i>
322
+ </button>
323
+ <button class="p-1 rounded-full hover:bg-purple-500">
324
+ <i class="fas fa-trash"></i>
325
+ </button>
326
+ </div>
327
+ </div>
328
+ <p class="text-purple-100 text-sm mt-1">Grade 11-12</p>
329
+ </div>
330
+ <div class="p-4">
331
+ <div class="flex justify-between items-center mb-3">
332
+ <div>
333
+ <p class="text-gray-500 text-sm">Classes</p>
334
+ <p class="font-medium">1</p>
335
+ </div>
336
+ <div>
337
+ <p class="text-gray-500 text-sm">Lessons</p>
338
+ <p class="font-medium">8</p>
339
+ </div>
340
+ <div>
341
+ <p class="text-gray-500 text-sm">Students</p>
342
+ <p class="font-medium">32</p>
343
+ </div>
344
+ </div>
345
+ <div class="pt-3 border-t border-gray-100">
346
+ <p class="text-gray-500 text-sm mb-1">Recent Activity</p>
347
+ <p class="text-sm">Chapter 3 test results uploaded</p>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Add New Subject Card -->
353
+ <div class="subject-card bg-white rounded-lg shadow-sm border-2 border-dashed border-gray-300 hover:border-blue-500 transition duration-300 flex flex-col items-center justify-center p-6 cursor-pointer">
354
+ <div class="text-blue-500 mb-2">
355
+ <i class="fas fa-plus-circle text-4xl"></i>
356
+ </div>
357
+ <h3 class="text-lg font-medium text-gray-700">Add New Subject</h3>
358
+ <p class="text-gray-500 text-sm mt-1">Create a new subject to organize your classes</p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Classes Tab -->
364
+ <div id="classes" class="tab-content">
365
+ <div class="flex justify-between items-center mb-6">
366
+ <h2 class="text-xl font-bold text-gray-800">Your Classes</h2>
367
+ <div class="flex space-x-3">
368
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
369
+ <option>Filter by Subject</option>
370
+ <option>Mathematics</option>
371
+ <option>Science</option>
372
+ <option>Physics</option>
373
+ </select>
374
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
375
+ <i class="fas fa-plus mr-2"></i> Add Class
376
+ </button>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
381
+ <div class="overflow-x-auto">
382
+ <table class="min-w-full divide-y divide-gray-200">
383
+ <thead class="bg-gray-50">
384
+ <tr>
385
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class Name</th>
386
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
387
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Grade</th>
388
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Students</th>
389
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Schedule</th>
390
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
391
+ </tr>
392
+ </thead>
393
+ <tbody class="bg-white divide-y divide-gray-200">
394
+ <tr class="hover:bg-gray-50">
395
+ <td class="px-6 py-4 whitespace-nowrap">
396
+ <div class="flex items-center">
397
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
398
+ <i class="fas fa-calculator"></i>
399
+ </div>
400
+ <div class="ml-4">
401
+ <div class="text-sm font-medium text-gray-900">Algebra II</div>
402
+ <div class="text-sm text-gray-500">Section A</div>
403
+ </div>
404
+ </div>
405
+ </td>
406
+ <td class="px-6 py-4 whitespace-nowrap">
407
+ <div class="text-sm text-gray-900">Mathematics</div>
408
+ </td>
409
+ <td class="px-6 py-4 whitespace-nowrap">
410
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Grade 10</span>
411
+ </td>
412
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
413
+ 28
414
+ </td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
416
+ Mon, Wed, Fri - 9:00 AM
417
+ </td>
418
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
419
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
420
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
421
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
422
+ </td>
423
+ </tr>
424
+
425
+ <tr class="hover:bg-gray-50">
426
+ <td class="px-6 py-4 whitespace-nowrap">
427
+ <div class="flex items-center">
428
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
429
+ <i class="fas fa-atom"></i>
430
+ </div>
431
+ <div class="ml-4">
432
+ <div class="text-sm font-medium text-gray-900">Chemistry</div>
433
+ <div class="text-sm text-gray-500">Section B</div>
434
+ </div>
435
+ </div>
436
+ </td>
437
+ <td class="px-6 py-4 whitespace-nowrap">
438
+ <div class="text-sm text-gray-900">Science</div>
439
+ </td>
440
+ <td class="px-6 py-4 whitespace-nowrap">
441
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Grade 11</span>
442
+ </td>
443
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
444
+ 32
445
+ </td>
446
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
447
+ Tue, Thu - 10:30 AM
448
+ </td>
449
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
450
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
451
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
452
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
453
+ </td>
454
+ </tr>
455
+
456
+ <tr class="hover:bg-gray-50">
457
+ <td class="px-6 py-4 whitespace-nowrap">
458
+ <div class="flex items-center">
459
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
460
+ <i class="fas fa-rocket"></i>
461
+ </div>
462
+ <div class="ml-4">
463
+ <div class="text-sm font-medium text-gray-900">Physics</div>
464
+ <div class="text-sm text-gray-500">Honors</div>
465
+ </div>
466
+ </div>
467
+ </td>
468
+ <td class="px-6 py-4 whitespace-nowrap">
469
+ <div class="text-sm text-gray-900">Physics</div>
470
+ </td>
471
+ <td class="px-6 py-4 whitespace-nowrap">
472
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Grade 12</span>
473
+ </td>
474
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
475
+ 24
476
+ </td>
477
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
478
+ Mon, Wed, Fri - 1:00 PM
479
+ </td>
480
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
481
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
482
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
483
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
484
+ </td>
485
+ </tr>
486
+
487
+ <tr class="hover:bg-gray-50">
488
+ <td class="px-6 py-4 whitespace-nowrap">
489
+ <div class="flex items-center">
490
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
491
+ <i class="fas fa-shapes"></i>
492
+ </div>
493
+ <div class="ml-4">
494
+ <div class="text-sm font-medium text-gray-900">Geometry</div>
495
+ <div class="text-sm text-gray-500">Section C</div>
496
+ </div>
497
+ </div>
498
+ </td>
499
+ <td class="px-6 py-4 whitespace-nowrap">
500
+ <div class="text-sm text-gray-900">Mathematics</div>
501
+ </td>
502
+ <td class="px-6 py-4 whitespace-nowrap">
503
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Grade 9</span>
504
+ </td>
505
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
506
+ 27
507
+ </td>
508
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
509
+ Tue, Thu - 8:00 AM
510
+ </td>
511
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
512
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
513
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
514
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
515
+ </td>
516
+ </tr>
517
+ </tbody>
518
+ </table>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Assignments Tab -->
524
+ <div id="assignments" class="tab-content">
525
+ <div class="flex justify-between items-center mb-6">
526
+ <h2 class="text-xl font-bold text-gray-800">Assignments</h2>
527
+ <div class="flex space-x-3">
528
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
529
+ <option>All Classes</option>
530
+ <option>Algebra II</option>
531
+ <option>Chemistry</option>
532
+ <option>Physics</option>
533
+ <option>Geometry</option>
534
+ </select>
535
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
536
+ <option>All Status</option>
537
+ <option>Active</option>
538
+ <option>Completed</option>
539
+ <option>Graded</option>
540
+ </select>
541
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
542
+ <i class="fas fa-plus mr-2"></i> New Assignment
543
+ </button>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
548
+ <!-- Assignment Card 1 -->
549
+ <div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
550
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
551
+ <div>
552
+ <h3 class="font-bold text-lg">Quadratic Equations Practice</h3>
553
+ <p class="text-sm text-gray-500">Algebra II - Section A</p>
554
+ </div>
555
+ <div class="assignment-actions flex space-x-2">
556
+ <button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200">
557
+ <i class="fas fa-edit text-sm"></i>
558
+ </button>
559
+ <button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200">
560
+ <i class="fas fa-trash text-sm"></i>
561
+ </button>
562
+ </div>
563
+ </div>
564
+ <div class="p-4">
565
+ <div class="flex justify-between items-center mb-3">
566
+ <div>
567
+ <p class="text-gray-500 text-sm">Due Date</p>
568
+ <p class="font-medium">May 15, 2023</p>
569
+ </div>
570
+ <div>
571
+ <p class="text-gray-500 text-sm">Status</p>
572
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
573
+ </div>
574
+ </div>
575
+ <div class="mb-3">
576
+ <p class="text-gray-500 text-sm mb-1">Description</p>
577
+ <p class="text-sm">Practice solving quadratic equations using factoring, completing the square, and quadratic formula.</p>
578
+ </div>
579
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
580
+ <div>
581
+ <p class="text-gray-500 text-sm">Submissions</p>
582
+ <p class="font-medium">12/28</p>
583
+ </div>
584
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
585
+ View Details <i class="fas fa-chevron-right ml-1 text-xs"></i>
586
+ </button>
587
+ </div>
588
+ </div>
589
+ </div>
590
+
591
+ <!-- Assignment Card 2 -->
592
+ <div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
593
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
594
+ <div>
595
+ <h3 class="font-bold text-lg">Chemical Reactions Lab Report</h3>
596
+ <p class="text-sm text-gray-500">Chemistry - Section B</p>
597
+ </div>
598
+ <div class="assignment-actions flex space-x-2">
599
+ <button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200">
600
+ <i class="fas fa-edit text-sm"></i>
601
+ </button>
602
+ <button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200">
603
+ <i class="fas fa-trash text-sm"></i>
604
+ </button>
605
+ </div>
606
+ </div>
607
+ <div class="p-4">
608
+ <div class="flex justify-between items-center mb-3">
609
+ <div>
610
+ <p class="text-gray-500 text-sm">Due Date</p>
611
+ <p class="font-medium">May 18, 2023</p>
612
+ </div>
613
+ <div>
614
+ <p class="text-gray-500 text-sm">Status</p>
615
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Grading</span>
616
+ </div>
617
+ </div>
618
+ <div class="mb-3">
619
+ <p class="text-gray-500 text-sm mb-1">Description</p>
620
+ <p class="text-sm">Write a lab report on the chemical reactions experiment conducted last week.</p>
621
+ </div>
622
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
623
+ <div>
624
+ <p class="text-gray-500 text-sm">Submissions</p>
625
+ <p class="font-medium">28/32</p>
626
+ </div>
627
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
628
+ View Details <i class="fas fa-chevron-right ml-1 text-xs"></i>
629
+ </button>
630
+ </div>
631
+ </div>
632
+ </div>
633
+
634
+ <!-- Assignment Card 3 -->
635
+ <div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
636
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
637
+ <div>
638
+ <h3 class="font-bold text-lg">Newton's Laws Problems</h3>
639
+ <p class="text-sm text-gray-500">Physics - Honors</p>
640
+ </div>
641
+ <div class="assignment-actions flex space-x-2">
642
+ <button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200">
643
+ <i class="fas fa-edit text-sm"></i>
644
+ </button>
645
+ <button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200">
646
+ <i class="fas fa-trash text-sm"></i>
647
+ </button>
648
+ </div>
649
+ </div>
650
+ <div class="p-4">
651
+ <div class="flex justify-between items-center mb-3">
652
+ <div>
653
+ <p class="text-gray-500 text-sm">Due Date</p>
654
+ <p class="font-medium">May 20, 2023</p>
655
+ </div>
656
+ <div>
657
+ <p class="text-gray-500 text-sm">Status</p>
658
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
659
+ </div>
660
+ </div>
661
+ <div class="mb-3">
662
+ <p class="text-gray-500 text-sm mb-1">Description</p>
663
+ <p class="text-sm">Solve problems related to Newton's three laws of motion from textbook Chapter 4.</p>
664
+ </div>
665
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
666
+ <div>
667
+ <p class="text-gray-500 text-sm">Submissions</p>
668
+ <p class="font-medium">5/24</p>
669
+ </div>
670
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
671
+ View Details <i class="fas fa-chevron-right ml-1 text-xs"></i>
672
+ </button>
673
+ </div>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- Assignment Card 4 -->
678
+ <div class="assignment-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
679
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
680
+ <div>
681
+ <h3 class="font-bold text-lg">Geometry Proofs</h3>
682
+ <p class="text-sm text-gray-500">Geometry - Section C</p>
683
+ </div>
684
+ <div class="assignment-actions flex space-x-2">
685
+ <button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200">
686
+ <i class="fas fa-edit text-sm"></i>
687
+ </button>
688
+ <button class="p-1 rounded-full bg-red-100 text-red-600 hover:bg-red-200">
689
+ <i class="fas fa-trash text-sm"></i>
690
+ </button>
691
+ </div>
692
+ </div>
693
+ <div class="p-4">
694
+ <div class="flex justify-between items-center mb-3">
695
+ <div>
696
+ <p class="text-gray-500 text-sm">Due Date</p>
697
+ <p class="font-medium">May 10, 2023</p>
698
+ </div>
699
+ <div>
700
+ <p class="text-gray-500 text-sm">Status</p>
701
+ <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Graded</span>
702
+ </div>
703
+ </div>
704
+ <div class="mb-3">
705
+ <p class="text-gray-500 text-sm mb-1">Description</p>
706
+ <p class="text-sm">Complete the geometric proofs worksheet on triangle congruence.</p>
707
+ </div>
708
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
709
+ <div>
710
+ <p class="text-gray-500 text-sm">Submissions</p>
711
+ <p class="font-medium">27/27</p>
712
+ </div>
713
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
714
+ View Details <i class="fas fa-chevron-right ml-1 text-xs"></i>
715
+ </button>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+
722
+ <!-- Exams Tab -->
723
+ <div id="exams" class="tab-content">
724
+ <div class="flex justify-between items-center mb-6">
725
+ <h2 class="text-xl font-bold text-gray-800">Exams</h2>
726
+ <div class="flex space-x-3">
727
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
728
+ <option>All Classes</option>
729
+ <option>Algebra II</option>
730
+ <option>Chemistry</option>
731
+ <option>Physics</option>
732
+ <option>Geometry</option>
733
+ </select>
734
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
735
+ <option>All Status</option>
736
+ <option>Upcoming</option>
737
+ <option>Completed</option>
738
+ <option>Graded</option>
739
+ </select>
740
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
741
+ <i class="fas fa-plus mr-2"></i> Schedule Exam
742
+ </button>
743
+ </div>
744
+ </div>
745
+
746
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
747
+ <div class="overflow-x-auto">
748
+ <table class="min-w-full divide-y divide-gray-200">
749
+ <thead class="bg-gray-50">
750
+ <tr>
751
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exam Title</th>
752
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th>
753
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
754
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
755
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
756
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Average Score</th>
757
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
758
+ </tr>
759
+ </thead>
760
+ <tbody class="bg-white divide-y divide-gray-200">
761
+ <tr class="hover:bg-gray-50">
762
+ <td class="px-6 py-4 whitespace-nowrap">
763
+ <div class="flex items-center">
764
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
765
+ <i class="fas fa-file-alt"></i>
766
+ </div>
767
+ <div class="ml-4">
768
+ <div class="text-sm font-medium text-gray-900">Chapter 3 Test</div>
769
+ <div class="text-sm text-gray-500">Algebra II</div>
770
+ </div>
771
+ </div>
772
+ </td>
773
+ <td class="px-6 py-4 whitespace-nowrap">
774
+ <div class="text-sm text-gray-900">Algebra II - Section A</div>
775
+ </td>
776
+ <td class="px-6 py-4 whitespace-nowrap">
777
+ <div class="text-sm text-gray-900">May 5, 2023</div>
778
+ </td>
779
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
780
+ 45 min
781
+ </td>
782
+ <td class="px-6 py-4 whitespace-nowrap">
783
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Graded</span>
784
+ </td>
785
+ <td class="px-6 py-4 whitespace-nowrap">
786
+ <div class="flex items-center">
787
+ <div class="w-16 bg-gray-200 rounded-full h-2.5 mr-2">
788
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div>
789
+ </div>
790
+ <span class="text-sm font-medium">85%</span>
791
+ </div>
792
+ </td>
793
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
794
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button>
795
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
796
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
797
+ </td>
798
+ </tr>
799
+
800
+ <tr class="hover:bg-gray-50">
801
+ <td class="px-6 py-4 whitespace-nowrap">
802
+ <div class="flex items-center">
803
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
804
+ <i class="fas fa-flask"></i>
805
+ </div>
806
+ <div class="ml-4">
807
+ <div class="text-sm font-medium text-gray-900">Chemical Bonds Exam</div>
808
+ <div class="text-sm text-gray-500">Chemistry</div>
809
+ </div>
810
+ </div>
811
+ </td>
812
+ <td class="px-6 py-4 whitespace-nowrap">
813
+ <div class="text-sm text-gray-900">Chemistry - Section B</div>
814
+ </td>
815
+ <td class="px-6 py-4 whitespace-nowrap">
816
+ <div class="text-sm text-gray-900">May 12, 2023</div>
817
+ </td>
818
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
819
+ 60 min
820
+ </td>
821
+ <td class="px-6 py-4 whitespace-nowrap">
822
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Grading</span>
823
+ </td>
824
+ <td class="px-6 py-4 whitespace-nowrap">
825
+ <div class="flex items-center">
826
+ <div class="w-16 bg-gray-200 rounded-full h-2.5 mr-2">
827
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 65%"></div>
828
+ </div>
829
+ <span class="text-sm font-medium">65%</span>
830
+ </div>
831
+ </td>
832
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
833
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button>
834
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
835
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
836
+ </td>
837
+ </tr>
838
+
839
+ <tr class="hover:bg-gray-50">
840
+ <td class="px-6 py-4 whitespace-nowrap">
841
+ <div class="flex items-center">
842
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
843
+ <i class="fas fa-atom"></i>
844
+ </div>
845
+ <div class="ml-4">
846
+ <div class="text-sm font-medium text-gray-900">Midterm Exam</div>
847
+ <div class="text-sm text-gray-500">Physics</div>
848
+ </div>
849
+ </div>
850
+ </td>
851
+ <td class="px-6 py-4 whitespace-nowrap">
852
+ <div class="text-sm text-gray-900">Physics - Honors</div>
853
+ </td>
854
+ <td class="px-6 py-4 whitespace-nowrap">
855
+ <div class="text-sm text-gray-900">May 22, 2023</div>
856
+ </td>
857
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
858
+ 90 min
859
+ </td>
860
+ <td class="px-6 py-4 whitespace-nowrap">
861
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Upcoming</span>
862
+ </td>
863
+ <td class="px-6 py-4 whitespace-nowrap">
864
+ <div class="text-sm text-gray-500">-</div>
865
+ </td>
866
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
867
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button>
868
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
869
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
870
+ </td>
871
+ </tr>
872
+
873
+ <tr class="hover:bg-gray-50">
874
+ <td class="px-6 py-4 whitespace-nowrap">
875
+ <div class="flex items-center">
876
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
877
+ <i class="fas fa-shapes"></i>
878
+ </div>
879
+ <div class="ml-4">
880
+ <div class="text-sm font-medium text-gray-900">Triangles Quiz</div>
881
+ <div class="text-sm text-gray-500">Geometry</div>
882
+ </div>
883
+ </div>
884
+ </td>
885
+ <td class="px-6 py-4 whitespace-nowrap">
886
+ <div class="text-sm text-gray-900">Geometry - Section C</div>
887
+ </td>
888
+ <td class="px-6 py-4 whitespace-nowrap">
889
+ <div class="text-sm text-gray-900">May 8, 2023</div>
890
+ </td>
891
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
892
+ 30 min
893
+ </td>
894
+ <td class="px-6 py-4 whitespace-nowrap">
895
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Graded</span>
896
+ </td>
897
+ <td class="px-6 py-4 whitespace-nowrap">
898
+ <div class="flex items-center">
899
+ <div class="w-16 bg-gray-200 rounded-full h-2.5 mr-2">
900
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 78%"></div>
901
+ </div>
902
+ <span class="text-sm font-medium">78%</span>
903
+ </div>
904
+ </td>
905
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
906
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-bar"></i></button>
907
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button>
908
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
909
+ </td>
910
+ </tr>
911
+ </tbody>
912
+ </table>
913
+ </div>
914
+ </div>
915
+ </div>
916
+
917
+ <!-- Calendar Tab -->
918
+ <div id="calendar" class="tab-content">
919
+ <div class="flex justify-between items-center mb-6">
920
+ <h2 class="text-xl font-bold text-gray-800">Teaching Calendar</h2>
921
+ <div class="flex space-x-3">
922
+ <button class="border rounded-lg px-3 py-2 hover:bg-gray-100">
923
+ <i class="fas fa-chevron-left"></i>
924
+ </button>
925
+ <button class="border rounded-lg px-3 py-2 bg-blue-600 text-white">
926
+ Today
927
+ </button>
928
+ <button class="border rounded-lg px-3 py-2 hover:bg-gray-100">
929
+ <i class="fas fa-chevron-right"></i>
930
+ </button>
931
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
932
+ <option>Month</option>
933
+ <option>Week</option>
934
+ <option>Day</option>
935
+ </select>
936
+ </div>
937
+ </div>
938
+
939
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
940
+ <!-- Calendar Header -->
941
+ <div class="grid grid-cols-7 gap-px bg-gray-200">
942
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
943
+ Sun
944
+ </div>
945
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
946
+ Mon
947
+ </div>
948
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
949
+ Tue
950
+ </div>
951
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
952
+ Wed
953
+ </div>
954
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
955
+ Thu
956
+ </div>
957
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
958
+ Fri
959
+ </div>
960
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
961
+ Sat
962
+ </div>
963
+ </div>
964
+
965
+ <!-- Calendar Grid -->
966
+ <div class="grid grid-cols-7 gap-px bg-gray-200">
967
+ <!-- Week 1 -->
968
+ <div class="calendar-day bg-white h-32 p-1 relative">
969
+ <div class="text-right text-xs text-gray-400">30</div>
970
+ </div>
971
+ <div class="calendar-day bg-white h-32 p-1 relative">
972
+ <div class="text-right text-xs text-gray-400">1</div>
973
+ </div>
974
+ <div class="calendar-day bg-white h-32 p-1 relative">
975
+ <div class="text-right text-xs text-gray-400">2</div>
976
+ </div>
977
+ <div class="calendar-day bg-white h-32 p-1 relative">
978
+ <div class="text-right text-xs text-gray-400">3</div>
979
+ </div>
980
+ <div class="calendar-day bg-white h-32 p-1 relative">
981
+ <div class="text-right text-xs text-gray-400">4</div>
982
+ </div>
983
+ <div class="calendar-day bg-white h-32 p-1 relative">
984
+ <div class="text-right text-xs text-gray-400">5</div>
985
+ <div class="text-xs mt-1 p-1 rounded bg-blue-100 text-blue-800">Algebra II Test</div>
986
+ </div>
987
+ <div class="calendar-day bg-white h-32 p-1 relative">
988
+ <div class="text-right text-xs text-gray-400">6</div>
989
+ </div>
990
+
991
+ <!-- Week 2 -->
992
+ <div class="calendar-day bg-white h-32 p-1 relative">
993
+ <div class="text-right text-xs text-gray-400">7</div>
994
+ </div>
995
+ <div class="calendar-day bg-white h-32 p-1 relative">
996
+ <div class="text-right text-xs text-gray-400">8</div>
997
+ <div class="text-xs mt-1 p-1 rounded bg-green-100 text-green-800">Geometry Quiz</div>
998
+ </div>
999
+ <div class="calendar-day bg-white h-32 p-1 relative">
1000
+ <div class="text-right text-xs text-gray-400">9</div>
1001
+ </div>
1002
+ <div class="calendar-day bg-white h-32 p-1 relative">
1003
+ <div class="text-right text-xs text-gray-400">10</div>
1004
+ </div>
1005
+ <div class="calendar-day bg-white h-32 p-1 relative">
1006
+ <div class="text-right text-xs text-gray-400">11</div>
1007
+ </div>
1008
+ <div class="calendar-day bg-white h-32 p-1 relative">
1009
+ <div class="text-right text-xs text-gray-400">12</div>
1010
+ <div class="text-xs mt-1 p-1 rounded bg-green-100 text-green-800">Chemistry Exam</div>
1011
+ </div>
1012
+ <div class="calendar-day bg-white h-32 p-1 relative">
1013
+ <div class="text-right text-xs text-gray-400">13</div>
1014
+ </div>
1015
+
1016
+ <!-- Week 3 -->
1017
+ <div class="calendar-day bg-white h-32 p-1 relative">
1018
+ <div class="text-right text-xs text-gray-400">14</div>
1019
+ </div>
1020
+ <div class="calendar-day bg-white h-32 p-1 relative">
1021
+ <div class="text-right text-xs text-gray-400">15</div>
1022
+ <div class="text-xs mt-1 p-1 rounded bg-blue-100 text-blue-800">Algebra Assignment Due</div>
1023
+ </div>
1024
+ <div class="calendar-day bg-white h-32 p-1 relative">
1025
+ <div class="text-right text-xs text-gray-400">16</div>
1026
+ </div>
1027
+ <div class="calendar-day bg-white h-32 p-1 relative">
1028
+ <div class="text-right text-xs text-gray-400">17</div>
1029
+ </div>
1030
+ <div class="calendar-day bg-white h-32 p-1 relative">
1031
+ <div class="text-right text-xs text-gray-400">18</div>
1032
+ <div class="text-xs mt-1 p-1 rounded bg-green-100 text-green-800">Chem Lab Report Due</div>
1033
+ </div>
1034
+ <div class="calendar-day bg-white h-32 p-1 relative">
1035
+ <div class="text-right text-xs text-gray-400">19</div>
1036
+ </div>
1037
+ <div class="calendar-day bg-white h-32 p-1 relative">
1038
+ <div class="text-right text-xs text-gray-400">20</div>
1039
+ </div>
1040
+
1041
+ <!-- Week 4 -->
1042
+ <div class="calendar-day bg-white h-32 p-1 relative">
1043
+ <div class="text-right text-xs text-gray-400">21</div>
1044
+ </div>
1045
+ <div class="calendar-day today bg-white h-32 p-1 relative">
1046
+ <div class="text-right text-xs font-bold">22</div>
1047
+ <div class="text-xs mt-1 p-1 rounded bg-purple-100 text-purple-800">Physics Midterm</div>
1048
+ </div>
1049
+ <div class="calendar-day bg-white h-32 p-1 relative">
1050
+ <div class="text-right text-xs text-gray-400">23</div>
1051
+ </div>
1052
+ <div class="calendar-day bg-white h-32 p-1 relative">
1053
+ <div class="text-right text-xs text-gray-400">24</div>
1054
+ </div>
1055
+ <div class="calendar-day bg-white h-32 p-1 relative">
1056
+ <div class="text-right text-xs text-gray-400">25</div>
1057
+ </div>
1058
+ <div class="calendar-day bg-white h-32 p-1 relative">
1059
+ <div class="text-right text-xs text-gray-400">26</div>
1060
+ </div>
1061
+ <div class="calendar-day bg-white h-32 p-1 relative">
1062
+ <div class="text-right text-xs text-gray-400">27</div>
1063
+ </div>
1064
+
1065
+ <!-- Week 5 -->
1066
+ <div class="calendar-day bg-white h-32 p-1 relative">
1067
+ <div class="text-right text-xs text-gray-400">28</div>
1068
+ </div>
1069
+ <div class="calendar-day bg-white h-32 p-1 relative">
1070
+ <div class="text-right text-xs text-gray-400">29</div>
1071
+ </div>
1072
+ <div class="calendar-day bg-white h-32 p-1 relative">
1073
+ <div class="text-right text-xs text-gray-400">30</div>
1074
+ </div>
1075
+ <div class="calendar-day bg-white h-32 p-1 relative">
1076
+ <div class="text-right text-xs text-gray-400">31</div>
1077
+ </div>
1078
+ <div class="calendar-day bg-gray-50 h-32 p-1 relative">
1079
+ <div class="text-right text-xs text-gray-400">1</div>
1080
+ </div>
1081
+ <div class="calendar-day bg-gray-50 h-32 p-1 relative">
1082
+ <div class="text-right text-xs text-gray-400">2</div>
1083
+ </div>
1084
+ <div class="calendar-day bg-gray-50 h-32 p-1 relative">
1085
+ <div class="text-right text-xs text-gray-400">3</div>
1086
+ </div>
1087
+ </div>
1088
+ </div>
1089
+
1090
+ <!-- Upcoming Events -->
1091
+ <div class="mt-6">
1092
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Upcoming Events</h3>
1093
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
1094
+ <div class="divide-y divide-gray-200">
1095
+ <div class="p-4 hover:bg-gray-50">
1096
+ <div class="flex items-start">
1097
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
1098
+ <i class="fas fa-file-alt"></i>
1099
+ </div>
1100
+ <div class="ml-4">
1101
+ <div class="text-sm font-medium text-gray-900">Physics Midterm</div>
1102
+ <div class="text-sm text-gray-500">May 22, 2023 - 1:00 PM to 2:30 PM</div>
1103
+ <div class="mt-1 text-sm text-gray-700">Physics Honors class - Room 204</div>
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ <div class="p-4 hover:bg-gray-50">
1109
+ <div class="flex items-start">
1110
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
1111
+ <i class="fas fa-flask"></i>
1112
+ </div>
1113
+ <div class="ml-4">
1114
+ <div class="text-sm font-medium text-gray-900">Chemistry Lab</div>
1115
+ <div class="text-sm text-gray-500">May 24, 2023 - 10:30 AM to 12:00 PM</div>
1116
+ <div class="mt-1 text-sm text-gray-700">Chemical Reactions Experiment - Lab 3</div>
1117
+ </div>
1118
+ </div>
1119
+ </div>
1120
+
1121
+ <div class="p-4 hover:bg-gray-50">
1122
+ <div class="flex items-start">
1123
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
1124
+ <i class="fas fa-tasks"></i>
1125
+ </div>
1126
+ <div class="ml-4">
1127
+ <div class="text-sm font-medium text-gray-900">Assignment Due</div>
1128
+ <div class="text-sm text-gray-500">May 25, 2023 - 11:59 PM</div>
1129
+ <div class="mt-1 text-sm text-gray-700">Newton's Laws Problems - Physics Honors</div>
1130
+ </div>
1131
+ </div>
1132
+ </div>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+ </div>
1138
+ </main>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <script>
1143
+ // Toggle sidebar
1144
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
1145
+ const sidebar = document.querySelector('.sidebar');
1146
+ const content = document.querySelector('.content');
1147
+
1148
+ sidebar.classList.toggle('collapsed');
1149
+ content.classList.toggle('expanded');
1150
+
1151
+ // Change icon based on state
1152
+ if (sidebar.classList.contains('collapsed')) {
1153
+ this.innerHTML = '<i class="fas fa-chevron-right"></i>';
1154
+ } else {
1155
+ this.innerHTML = '<i class="fas fa-chevron-left"></i>';
1156
+ }
1157
+ });
1158
+
1159
+ // Tab switching
1160
+ const tabButtons = document.querySelectorAll('.tab-btn');
1161
+ const tabContents = document.querySelectorAll('.tab-content');
1162
+
1163
+ tabButtons.forEach(button => {
1164
+ button.addEventListener('click', function() {
1165
+ // Remove active class from all buttons and contents
1166
+ tabButtons.forEach(btn => {
1167
+ btn.classList.remove('border-blue-500', 'text-blue-600');
1168
+ btn.classList.add('border-transparent', 'text-gray-500');
1169
+ });
1170
+
1171
+ tabContents.forEach(content => {
1172
+ content.classList.remove('active');
1173
+ });
1174
+
1175
+ // Add active class to clicked button and corresponding content
1176
+ this.classList.remove('border-transparent', 'text-gray-500');
1177
+ this.classList.add('border-blue-500', 'text-blue-600');
1178
+
1179
+ const tabId = this.getAttribute('data-tab');
1180
+ document.getElementById(tabId).classList.add('active');
1181
+ });
1182
+ });
1183
+
1184
+ // Today's date for calendar
1185
+ const today = new Date();
1186
+ const todayDate = today.getDate();
1187
+
1188
+ // Mark today in calendar
1189
+ document.querySelectorAll('.calendar-day').forEach(day => {
1190
+ const dayNumber = day.querySelector('div').textContent;
1191
+ if (parseInt(dayNumber) === todayDate) {
1192
+ day.classList.add('today');
1193
+ }
1194
+ });
1195
+
1196
+ // Sample data for calendar events (would normally come from backend)
1197
+ const events = [
1198
+ { date: 5, title: 'Algebra II Test', color: 'blue' },
1199
+ { date: 8, title: 'Geometry Quiz', color: 'green' },
1200
+ { date: 12, title: 'Chemistry Exam', color: 'green' },
1201
+ { date: 15, title: 'Algebra Assignment Due', color: 'blue' },
1202
+ { date: 18, title: 'Chem Lab Report Due', color: 'green' },
1203
+ { date: 22, title: 'Physics Midterm', color: 'purple' }
1204
+ ];
1205
+
1206
+ // Add events to calendar (simplified version)
1207
+ events.forEach(event => {
1208
+ const dayElements = document.querySelectorAll('.calendar-day');
1209
+ dayElements.forEach(day => {
1210
+ const dayNumber = day.querySelector('div').textContent;
1211
+ if (parseInt(dayNumber) === event.date) {
1212
+ day.classList.add('has-events');
1213
+ const eventElement = document.createElement('div');
1214
+ eventElement.className = `text-xs mt-1 p-1 rounded bg-${event.color}-100 text-${event.color}-800`;
1215
+ eventElement.textContent = event.title;
1216
+ day.appendChild(eventElement);
1217
+ }
1218
+ });
1219
+ });
1220
+ </script>
1221
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=joyman12/checkchue" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1222
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ ออกแบบหน้า เว็บ การสอน ของครู ใน หลายวิชา วิชาละหลายห้อง หลายบทเรียน หลายงาน หลายข้อสอบ ให้สวยงาม จัดการง่าย เป็นระเบียบ
2
+ ทำเป็นภาษาไทย และทำให้ ใช้งานได้ทุกฟังก์ชัน
3
+ ทำเป็นภาษาไทย และทำให้ ใช้งานได้ทุกฟังก์ชัน