Hugging Face's logo

Spaces:
uiforgenzbitches
/
testing-her
Running

App Files Community
uiforgenzbitches commited on
Commit
363167d
·
verified ·
1 Parent(s): 208a742

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +673 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Testing Her
3
- emoji: 💻
4
- colorFrom: indigo
5
- colorTo: green
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: testing-her
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
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,673 @@
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>Intern HRMS - Group Management System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ 'dark-purple': '#6b21a8',
14
+ 'bright-purple': '#a855f7',
15
+ 'jet-black': '#0a0a0a',
16
+ 'dark-gray': '#1f1f1f',
17
+ 'light-gray': '#2d2d2d'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
24
+ <style>
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #6b21a8 0%, #0a0a0a 100%);
27
+ }
28
+ .sidebar-item:hover {
29
+ background-color: rgba(168, 85, 247, 0.2);
30
+ transform: translateX(5px);
31
+ transition: all 0.3s ease;
32
+ }
33
+ .task-card:hover {
34
+ transform: translateY(-5px);
35
+ box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
36
+ transition: all 0.3s ease;
37
+ }
38
+ .progress-ring__circle {
39
+ transition: stroke-dashoffset 0.35s;
40
+ transform: rotate(-90deg);
41
+ transform-origin: 50% 50%;
42
+ }
43
+ .animate-pulse {
44
+ animation: pulse 2s infinite;
45
+ }
46
+ @keyframes pulse {
47
+ 0% { opacity: 1; }
48
+ 50% { opacity: 0.5; }
49
+ 100% { opacity: 1; }
50
+ }
51
+ body {
52
+ background-color: #0a0a0a;
53
+ color: #e5e7eb;
54
+ }
55
+ .card-bg {
56
+ background-color: #1f1f1f;
57
+ border: 1px solid #2d2d2d;
58
+ }
59
+ .table-header {
60
+ background-color: #6b21a8;
61
+ }
62
+ .table-row:hover {
63
+ background-color: rgba(168, 85, 247, 0.1);
64
+ }
65
+ .glow-purple {
66
+ box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="font-sans">
71
+ <div class="flex h-screen overflow-hidden">
72
+ <!-- Sidebar -->
73
+ <div class="hidden md:flex md:flex-shrink-0">
74
+ <div class="flex flex-col w-64 gradient-bg text-white">
75
+ <div class="flex items-center justify-center h-16 px-4 border-b border-purple-500 border-opacity-20">
76
+ <div class="flex items-center">
77
+ <i class="fas fa-users-cog text-2xl mr-2 text-bright-purple"></i>
78
+ <span class="text-xl font-semibold">Intern HRMS</span>
79
+ </div>
80
+ </div>
81
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
82
+ <div class="space-y-1">
83
+ <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white bg-purple-900 bg-opacity-30">
84
+ <i class="fas fa-tachometer-alt mr-3 text-bright-purple"></i>
85
+ Dashboard
86
+ </a>
87
+ <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-purple-900 hover:bg-opacity-30">
88
+ <i class="fas fa-tasks mr-3 text-bright-purple"></i>
89
+ Task Management
90
+ </a>
91
+ <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-purple-900 hover:bg-opacity-30">
92
+ <i class="fas fa-users mr-3 text-bright-purple"></i>
93
+ Intern Groups
94
+ </a>
95
+ <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-purple-900 hover:bg-opacity-30">
96
+ <i class="fas fa-file-upload mr-3 text-bright-purple"></i>
97
+ Submissions
98
+ </a>
99
+ <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-purple-900 hover:bg-opacity-30">
100
+ <i class="fas fa-star mr-3 text-bright-purple"></i>
101
+ Scoring System
102
+ </a>
103
+ <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-purple-900 hover:bg-opacity-30">
104
+ <i class="fas fa-chart-line mr-3 text-bright-purple"></i>
105
+ Analytics
106
+ </a>
107
+ <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-purple-900 hover:bg-opacity-30">
108
+ <i class="fas fa-cog mr-3 text-bright-purple"></i>
109
+ Settings
110
+ </a>
111
+ </div>
112
+ <div class="mt-auto mb-4">
113
+ <div class="bg-purple-900 bg-opacity-30 p-3 rounded-lg glow-purple">
114
+ <div class="flex items-center">
115
+ <img class="h-10 w-10 rounded-full border-2 border-bright-purple" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User">
116
+ <div class="ml-3">
117
+ <p class="text-sm font-medium text-white">HR Coordinator</p>
118
+ <p class="text-xs text-purple-300">[email protected]</p>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Main Content -->
128
+ <div class="flex flex-col flex-1 overflow-hidden">
129
+ <!-- Top Navigation -->
130
+ <div class="flex items-center justify-between h-16 px-4 bg-dark-gray border-b border-purple-900">
131
+ <div class="flex items-center">
132
+ <button class="md:hidden text-bright-purple focus:outline-none">
133
+ <i class="fas fa-bars"></i>
134
+ </button>
135
+ <h1 class="ml-4 text-lg font-semibold text-white">Intern Management Dashboard</h1>
136
+ </div>
137
+ <div class="flex items-center space-x-4">
138
+ <div class="relative">
139
+ <button class="text-bright-purple focus:outline-none hover:text-white">
140
+ <i class="fas fa-bell"></i>
141
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
142
+ </button>
143
+ </div>
144
+ <div class="relative">
145
+ <button class="flex items-center text-bright-purple focus:outline-none hover:text-white">
146
+ <img class="h-8 w-8 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User">
147
+ <span class="ml-2 text-sm font-medium">HR Admin</span>
148
+ </button>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Main Content Area -->
154
+ <div class="flex-1 overflow-auto p-6">
155
+ <!-- Stats Cards -->
156
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
157
+ <div class="card-bg rounded-lg shadow p-6 glow-purple">
158
+ <div class="flex items-center justify-between">
159
+ <div>
160
+ <p class="text-sm font-medium text-purple-300">Total Interns</p>
161
+ <p class="mt-1 text-3xl font-semibold text-white">1,000</p>
162
+ </div>
163
+ <div class="p-3 rounded-full bg-purple-900 text-bright-purple">
164
+ <i class="fas fa-users text-xl"></i>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ <div class="card-bg rounded-lg shadow p-6 glow-purple">
169
+ <div class="flex items-center justify-between">
170
+ <div>
171
+ <p class="text-sm font-medium text-purple-300">HR Groups</p>
172
+ <p class="mt-1 text-3xl font-semibold text-white">18</p>
173
+ </div>
174
+ <div class="p-3 rounded-full bg-purple-900 text-bright-purple">
175
+ <i class="fas fa-layer-group text-xl"></i>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ <div class="card-bg rounded-lg shadow p-6 glow-purple">
180
+ <div class="flex items-center justify-between">
181
+ <div>
182
+ <p class="text-sm font-medium text-purple-300">Active Tasks</p>
183
+ <p class="mt-1 text-3xl font-semibold text-white">36</p>
184
+ </div>
185
+ <div class="p-3 rounded-full bg-purple-900 text-bright-purple">
186
+ <i class="fas fa-tasks text-xl"></i>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <div class="card-bg rounded-lg shadow p-6 glow-purple">
191
+ <div class="flex items-center justify-between">
192
+ <div>
193
+ <p class="text-sm font-medium text-purple-300">Submissions Due</p>
194
+ <p class="mt-1 text-3xl font-semibold text-white">124</p>
195
+ </div>
196
+ <div class="p-3 rounded-full bg-purple-900 text-bright-purple">
197
+ <i class="fas fa-file-upload text-xl"></i>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Weekly Task Assignment Section -->
204
+ <div class="card-bg rounded-lg shadow mb-6 glow-purple">
205
+ <div class="px-6 py-4 border-b border-purple-900">
206
+ <h2 class="text-lg font-semibold text-white">Weekly Task Assignment</h2>
207
+ </div>
208
+ <div class="p-6">
209
+ <div class="mb-4">
210
+ <label class="block text-sm font-medium text-purple-300 mb-2">Select HR Group</label>
211
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-dark-gray border-purple-900 focus:outline-none focus:ring-bright-purple focus:border-bright-purple sm:text-sm rounded-md text-white">
212
+ <option class="bg-dark-gray">All Groups (1-18)</option>
213
+ <option class="bg-dark-gray">Group 1 (HR: Alice)</option>
214
+ <option class="bg-dark-gray">Group 2 (HR: Bob)</option>
215
+ <option class="bg-dark-gray">Group 3 (HR: Charlie)</option>
216
+ </select>
217
+ </div>
218
+ <div class="mb-4">
219
+ <label class="block text-sm font-medium text-purple-300 mb-2">Task Title</label>
220
+ <input type="text" class="mt-1 focus:ring-bright-purple focus:border-bright-purple block w-full shadow-sm sm:text-sm bg-dark-gray border-purple-900 rounded-md text-white" placeholder="Enter task title">
221
+ </div>
222
+ <div class="mb-4">
223
+ <label class="block text-sm font-medium text-purple-300 mb-2">Task Description</label>
224
+ <textarea rows="4" class="mt-1 focus:ring-bright-purple focus:border-bright-purple block w-full shadow-sm sm:text-sm bg-dark-gray border-purple-900 rounded-md text-white" placeholder="Provide detailed instructions for the task"></textarea>
225
+ </div>
226
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
227
+ <div>
228
+ <label class="block text-sm font-medium text-purple-300 mb-2">Start Date</label>
229
+ <input type="date" class="mt-1 focus:ring-bright-purple focus:border-bright-purple block w-full shadow-sm sm:text-sm bg-dark-gray border-purple-900 rounded-md text-white">
230
+ </div>
231
+ <div>
232
+ <label class="block text-sm font-medium text-purple-300 mb-2">Due Date</label>
233
+ <input type="date" class="mt-1 focus:ring-bright-purple focus:border-bright-purple block w-full shadow-sm sm:text-sm bg-dark-gray border-purple-900 rounded-md text-white">
234
+ </div>
235
+ <div>
236
+ <label class="block text-sm font-medium text-purple-300 mb-2">Max Points</label>
237
+ <input type="number" class="mt-1 focus:ring-bright-purple focus:border-bright-purple block w-full shadow-sm sm:text-sm bg-dark-gray border-purple-900 rounded-md text-white" placeholder="100">
238
+ </div>
239
+ </div>
240
+ <div class="flex justify-end">
241
+ <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-bright-purple hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
242
+ <i class="fas fa-paper-plane mr-2"></i> Assign Task
243
+ </button>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Current Tasks & Groups Section -->
249
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
250
+ <!-- Active Tasks -->
251
+ <div class="card-bg rounded-lg shadow glow-purple">
252
+ <div class="px-6 py-4 border-b border-purple-900">
253
+ <h2 class="text-lg font-semibold text-white">Active Tasks This Week</h2>
254
+ </div>
255
+ <div class="p-4">
256
+ <div class="space-y-4">
257
+ <!-- Task Card 1 -->
258
+ <div class="task-card bg-dark-gray border border-purple-900 rounded-lg p-4 shadow-sm">
259
+ <div class="flex justify-between items-start">
260
+ <div>
261
+ <h3 class="font-medium text-white">Market Research Analysis</h3>
262
+ <p class="text-sm text-purple-300 mt-1">Group 1-5, 7, 9</p>
263
+ </div>
264
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-300">
265
+ Active
266
+ </span>
267
+ </div>
268
+ <p class="text-sm text-gray-400 mt-2">Conduct market research on emerging trends in your assigned sector and prepare a 5-page report with analysis.</p>
269
+ <div class="mt-3 flex items-center justify-between">
270
+ <div class="flex items-center text-sm text-purple-300">
271
+ <i class="far fa-calendar-alt mr-1"></i>
272
+ <span>Due: May 15, 2023</span>
273
+ </div>
274
+ <span class="text-sm font-medium text-bright-purple">Max: 100 pts</span>
275
+ </div>
276
+ <div class="mt-3">
277
+ <div class="flex justify-between text-sm text-purple-300 mb-1">
278
+ <span>Submissions: 45/56</span>
279
+ <span>80%</span>
280
+ </div>
281
+ <div class="w-full bg-purple-900 rounded-full h-2">
282
+ <div class="bg-bright-purple h-2 rounded-full" style="width: 80%"></div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Task Card 2 -->
288
+ <div class="task-card bg-dark-gray border border-purple-900 rounded-lg p-4 shadow-sm">
289
+ <div class="flex justify-between items-start">
290
+ <div>
291
+ <h3 class="font-medium text-white">UI/UX Design Project</h3>
292
+ <p class="text-sm text-purple-300 mt-1">Group 6, 8, 10-12</p>
293
+ </div>
294
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-300">
295
+ Active
296
+ </span>
297
+ </div>
298
+ <p class="text-sm text-gray-400 mt-2">Design a mobile app interface for a food delivery service. Include wireframes and a style guide.</p>
299
+ <div class="mt-3 flex items-center justify-between">
300
+ <div class="flex items-center text-sm text-purple-300">
301
+ <i class="far fa-calendar-alt mr-1"></i>
302
+ <span>Due: May 17, 2023</span>
303
+ </div>
304
+ <span class="text-sm font-medium text-bright-purple">Max: 150 pts</span>
305
+ </div>
306
+ <div class="mt-3">
307
+ <div class="flex justify-between text-sm text-purple-300 mb-1">
308
+ <span>Submissions: 28/72</span>
309
+ <span>39%</span>
310
+ </div>
311
+ <div class="w-full bg-purple-900 rounded-full h-2">
312
+ <div class="bg-bright-purple h-2 rounded-full" style="width: 39%"></div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <div class="mt-4 text-center">
318
+ <button class="text-bright-purple hover:text-white text-sm font-medium">
319
+ View All Tasks <i class="fas fa-chevron-right ml-1"></i>
320
+ </button>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- HR Groups Overview -->
326
+ <div class="card-bg rounded-lg shadow glow-purple">
327
+ <div class="px-6 py-4 border-b border-purple-900">
328
+ <h2 class="text-lg font-semibold text-white">HR Groups Overview</h2>
329
+ </div>
330
+ <div class="p-4">
331
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
332
+ <!-- Group 1 -->
333
+ <div class="border border-purple-900 rounded-lg p-4 hover:border-bright-purple transition-colors bg-dark-gray">
334
+ <div class="flex items-center justify-between">
335
+ <h3 class="font-medium text-white">Group 1</h3>
336
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-900 text-bright-purple">
337
+ 56 interns
338
+ </span>
339
+ </div>
340
+ <p class="text-sm text-purple-300 mt-1">HR: Alice Johnson</p>
341
+ <div class="mt-3 flex items-center">
342
+ <div class="flex-shrink-0">
343
+ <img class="h-8 w-8 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/women/12.jpg" alt="HR">
344
+ </div>
345
+ <div class="ml-3">
346
+ <p class="text-sm font-medium text-white">Alice Johnson</p>
347
+ <p class="text-sm text-purple-300">[email protected]</p>
348
+ </div>
349
+ </div>
350
+ <div class="mt-3">
351
+ <div class="flex justify-between text-sm text-purple-300">
352
+ <span>Active Tasks: 3</span>
353
+ <span>Avg Score: 82%</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Group 2 -->
359
+ <div class="border border-purple-900 rounded-lg p-4 hover:border-bright-purple transition-colors bg-dark-gray">
360
+ <div class="flex items-center justify-between">
361
+ <h3 class="font-medium text-white">Group 2</h3>
362
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-900 text-bright-purple">
363
+ 58 interns
364
+ </span>
365
+ </div>
366
+ <p class="text-sm text-purple-300 mt-1">HR: Bob Smith</p>
367
+ <div class="mt-3 flex items-center">
368
+ <div class="flex-shrink-0">
369
+ <img class="h-8 w-8 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/men/32.jpg" alt="HR">
370
+ </div>
371
+ <div class="ml-3">
372
+ <p class="text-sm font-medium text-white">Bob Smith</p>
373
+ <p class="text-sm text-purple-300">[email protected]</p>
374
+ </div>
375
+ </div>
376
+ <div class="mt-3">
377
+ <div class="flex justify-between text-sm text-purple-300">
378
+ <span>Active Tasks: 2</span>
379
+ <span>Avg Score: 76%</span>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Group 3 -->
385
+ <div class="border border-purple-900 rounded-lg p-4 hover:border-bright-purple transition-colors bg-dark-gray">
386
+ <div class="flex items-center justify-between">
387
+ <h3 class="font-medium text-white">Group 3</h3>
388
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-900 text-bright-purple">
389
+ 55 interns
390
+ </span>
391
+ </div>
392
+ <p class="text-sm text-purple-300 mt-1">HR: Charlie Brown</p>
393
+ <div class="mt-3 flex items-center">
394
+ <div class="flex-shrink-0">
395
+ <img class="h-8 w-8 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/men/44.jpg" alt="HR">
396
+ </div>
397
+ <div class="ml-3">
398
+ <p class="text-sm font-medium text-white">Charlie Brown</p>
399
+ <p class="text-sm text-purple-300">[email protected]</p>
400
+ </div>
401
+ </div>
402
+ <div class="mt-3">
403
+ <div class="flex justify-between text-sm text-purple-300">
404
+ <span>Active Tasks: 4</span>
405
+ <span>Avg Score: 88%</span>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Group 4 -->
411
+ <div class="border border-purple-900 rounded-lg p-4 hover:border-bright-purple transition-colors bg-dark-gray">
412
+ <div class="flex items-center justify-between">
413
+ <h3 class="font-medium text-white">Group 4</h3>
414
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-900 text-bright-purple">
415
+ 52 interns
416
+ </span>
417
+ </div>
418
+ <p class="text-sm text-purple-300 mt-1">HR: Diana Prince</p>
419
+ <div class="mt-3 flex items-center">
420
+ <div class="flex-shrink-0">
421
+ <img class="h-8 w-8 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/women/33.jpg" alt="HR">
422
+ </div>
423
+ <div class="ml-3">
424
+ <p class="text-sm font-medium text-white">Diana Prince</p>
425
+ <p class="text-sm text-purple-300">[email protected]</p>
426
+ </div>
427
+ </div>
428
+ <div class="mt-3">
429
+ <div class="flex justify-between text-sm text-purple-300">
430
+ <span>Active Tasks: 3</span>
431
+ <span>Avg Score: 91%</span>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ <div class="mt-4 text-center">
437
+ <button class="text-bright-purple hover:text-white text-sm font-medium">
438
+ View All Groups <i class="fas fa-chevron-right ml-1"></i>
439
+ </button>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Recent Submissions & Scoring Section -->
446
+ <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
447
+ <!-- Recent Submissions -->
448
+ <div class="card-bg rounded-lg shadow glow-purple">
449
+ <div class="px-6 py-4 border-b border-purple-900">
450
+ <h2 class="text-lg font-semibold text-white">Recent Submissions</h2>
451
+ </div>
452
+ <div class="p-4">
453
+ <div class="overflow-x-auto">
454
+ <table class="min-w-full divide-y divide-purple-900">
455
+ <thead class="table-header">
456
+ <tr>
457
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Intern</th>
458
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Task</th>
459
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Group</th>
460
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Status</th>
461
+ </tr>
462
+ </thead>
463
+ <tbody class="bg-dark-gray divide-y divide-purple-900">
464
+ <tr class="table-row">
465
+ <td class="px-6 py-4 whitespace-nowrap">
466
+ <div class="flex items-center">
467
+ <div class="flex-shrink-0 h-10 w-10">
468
+ <img class="h-10 w-10 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/women/21.jpg" alt="">
469
+ </div>
470
+ <div class="ml-4">
471
+ <div class="text-sm font-medium text-white">Sarah Connor</div>
472
+ <div class="text-sm text-purple-300">[email protected]</div>
473
+ </div>
474
+ </div>
475
+ </td>
476
+ <td class="px-6 py-4 whitespace-nowrap">
477
+ <div class="text-sm text-white">Market Research</div>
478
+ <div class="text-sm text-purple-300">Due: May 15</div>
479
+ </td>
480
+ <td class="px-6 py-4 whitespace-nowrap">
481
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-bright-purple">
482
+ Group 1
483
+ </span>
484
+ </td>
485
+ <td class="px-6 py-4 whitespace-nowrap">
486
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">
487
+ Submitted
488
+ </span>
489
+ </td>
490
+ </tr>
491
+ <tr class="table-row">
492
+ <td class="px-6 py-4 whitespace-nowrap">
493
+ <div class="flex items-center">
494
+ <div class="flex-shrink-0 h-10 w-10">
495
+ <img class="h-10 w-10 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/men/19.jpg" alt="">
496
+ </div>
497
+ <div class="ml-4">
498
+ <div class="text-sm font-medium text-white">John Doe</div>
499
+ <div class="text-sm text-purple-300">[email protected]</div>
500
+ </div>
501
+ </div>
502
+ </td>
503
+ <td class="px-6 py-4 whitespace-nowrap">
504
+ <div class="text-sm text-white">UI/UX Design</div>
505
+ <div class="text-sm text-purple-300">Due: May 17</div>
506
+ </td>
507
+ <td class="px-6 py-4 whitespace-nowrap">
508
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-bright-purple">
509
+ Group 6
510
+ </span>
511
+ </td>
512
+ <td class="px-6 py-4 whitespace-nowrap">
513
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-900 text-yellow-300">
514
+ Pending Review
515
+ </span>
516
+ </td>
517
+ </tr>
518
+ <tr class="table-row">
519
+ <td class="px-6 py-4 whitespace-nowrap">
520
+ <div class="flex items-center">
521
+ <div class="flex-shrink-0 h-10 w-10">
522
+ <img class="h-10 w-10 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/women/47.jpg" alt="">
523
+ </div>
524
+ <div class="ml-4">
525
+ <div class="text-sm font-medium text-white">Emma Watson</div>
526
+ <div class="text-sm text-purple-300">[email protected]</div>
527
+ </div>
528
+ </div>
529
+ </td>
530
+ <td class="px-6 py-4 whitespace-nowrap">
531
+ <div class="text-sm text-white">Content Writing</div>
532
+ <div class="text-sm text-purple-300">Due: May 14</div>
533
+ </td>
534
+ <td class="px-6 py-4 whitespace-nowrap">
535
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-bright-purple">
536
+ Group 3
537
+ </span>
538
+ </td>
539
+ <td class="px-6 py-4 whitespace-nowrap">
540
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">
541
+ Graded (85/100)
542
+ </span>
543
+ </td>
544
+ </tr>
545
+ </tbody>
546
+ </table>
547
+ </div>
548
+ <div class="mt-4 text-center">
549
+ <button class="text-bright-purple hover:text-white text-sm font-medium">
550
+ View All Submissions <i class="fas fa-chevron-right ml-1"></i>
551
+ </button>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- Scoring Dashboard -->
557
+ <div class="card-bg rounded-lg shadow glow-purple">
558
+ <div class="px-6 py-4 border-b border-purple-900">
559
+ <h2 class="text-lg font-semibold text-white">Scoring Dashboard</h2>
560
+ </div>
561
+ <div class="p-6">
562
+ <div class="mb-6">
563
+ <h3 class="text-md font-medium text-white mb-3">Overall Performance</h3>
564
+ <div class="grid grid-cols-3 gap-4">
565
+ <div class="text-center">
566
+ <div class="mx-auto relative w-20 h-20">
567
+ <svg class="w-full h-full" viewBox="0 0 36 36">
568
+ <path class="text-purple-900" d="M18 2.0845
569
+ a 15.9155 15.9155 0 0 1 0 31.831
570
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
571
+ <path class="text-green-500 progress-ring__circle" stroke-dasharray="85, 100" d="M18 2.0845
572
+ a 15.9155 15.9155 0 0 1 0 31.831
573
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
574
+ <text x="18" y="20.5" class="text-sm font-medium text-white" text-anchor="middle" dy=".3em">85%</text>
575
+ </svg>
576
+ </div>
577
+ <p class="mt-2 text-sm text-purple-300">Completion Rate</p>
578
+ </div>
579
+ <div class="text-center">
580
+ <div class="mx-auto relative w-20 h-20">
581
+ <svg class="w-full h-full" viewBox="0 0 36 36">
582
+ <path class="text-purple-900" d="M18 2.0845
583
+ a 15.9155 15.9155 0 0 1 0 31.831
584
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
585
+ <path class="text-bright-purple progress-ring__circle" stroke-dasharray="78, 100" d="M18 2.0845
586
+ a 15.9155 15.9155 0 0 1 0 31.831
587
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
588
+ <text x="18" y="20.5" class="text-sm font-medium text-white" text-anchor="middle" dy=".3em">78%</text>
589
+ </svg>
590
+ </div>
591
+ <p class="mt-2 text-sm text-purple-300">Average Score</p>
592
+ </div>
593
+ <div class="text-center">
594
+ <div class="mx-auto relative w-20 h-20">
595
+ <svg class="w-full h-full" viewBox="0 0 36 36">
596
+ <path class="text-purple-900" d="M18 2.0845
597
+ a 15.9155 15.9155 0 0 1 0 31.831
598
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
599
+ <path class="text-purple-500 progress-ring__circle" stroke-dasharray="92, 100" d="M18 2.0845
600
+ a 15.9155 15.9155 0 0 1 0 31.831
601
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke="currentColor"/>
602
+ <text x="18" y="20.5" class="text-sm font-medium text-white" text-anchor="middle" dy=".3em">92%</text>
603
+ </svg>
604
+ </div>
605
+ <p class="mt-2 text-sm text-purple-300">On-time Submission</p>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ <div>
610
+ <h3 class="text-md font-medium text-white mb-3">Top Performers</h3>
611
+ <div class="space-y-3">
612
+ <div class="flex items-center justify-between p-3 bg-purple-900 rounded-lg glow-purple">
613
+ <div class="flex items-center">
614
+ <img class="h-10 w-10 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Top performer">
615
+ <div class="ml-3">
616
+ <p class="text-sm font-medium text-white">Lisa Ray</p>
617
+ <p class="text-sm text-purple-300">Group 4</p>
618
+ </div>
619
+ </div>
620
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-900 text-green-300">
621
+ 98% Avg
622
+ </span>
623
+ </div>
624
+ <div class="flex items-center justify-between p-3 bg-purple-900 rounded-lg glow-purple">
625
+ <div class="flex items-center">
626
+ <img class="h-10 w-10 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/men/41.jpg" alt="Top performer">
627
+ <div class="ml-3">
628
+ <p class="text-sm font-medium text-white">Michael Scott</p>
629
+ <p class="text-sm text-purple-300">Group 7</p>
630
+ </div>
631
+ </div>
632
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-900 text-green-300">
633
+ 96% Avg
634
+ </span>
635
+ </div>
636
+ <div class="flex items-center justify-between p-3 bg-purple-900 rounded-lg glow-purple">
637
+ <div class="flex items-center">
638
+ <img class="h-10 w-10 rounded-full border border-bright-purple" src="https://randomuser.me/api/portraits/women/35.jpg" alt="Top performer">
639
+ <div class="ml-3">
640
+ <p class="text-sm font-medium text-white">Sarah Parker</p>
641
+ <div class="flex items-center">
642
+ <p class="text-sm text-purple-300">Group 2</p>
643
+ <span class="ml-2 px-1 py-0.5 text-xs rounded-full bg-yellow-900 text-yellow-300 animate-pulse">New</span>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-900 text-green-300">
648
+ 95% Avg
649
+ </span>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <script>
661
+ document.addEventListener('DOMContentLoaded', function() {
662
+ // Mobile menu toggle would go here
663
+ // Data fetching and dynamic content updates would go here
664
+
665
+ // Example: Simulate loading data
666
+ setTimeout(() => {
667
+ const loadingElements = document.querySelectorAll('.animate-pulse');
668
+ loadingElements.forEach(el => el.classList.remove('animate-pulse'));
669
+ }, 2000);
670
+ });
671
+ </script>
672
+ <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=uiforgenzbitches/testing-her" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
673
+ </html>