Hugging Face's logo

Spaces:
zonana
/
leveling
Running

App Files Community
zonana commited on
Commit
89e39b7
·
verified ·
1 Parent(s): 637bc5d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +495 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Leveling
3
- emoji: 🐠
4
- colorFrom: yellow
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: leveling
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: green
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,495 @@
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>SOLO LEVELING SYSTEM | Job Assignment</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
+ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Rajdhani', sans-serif;
14
+ background-color: #0a0a12;
15
+ color: #e0e0e0;
16
+ overflow-x: hidden;
17
+ background-image:
18
+ radial-gradient(circle at 10% 20%, rgba(0, 100, 255, 0.03) 0%, transparent 20%),
19
+ radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.03) 0%, transparent 20%),
20
+ linear-gradient(to bottom, #0a0a12 0%, #07070e 100%);
21
+ }
22
+
23
+ .metal-texture {
24
+ background:
25
+ linear-gradient(135deg, #1a1a2e 25%, transparent 25%) -10px 0,
26
+ linear-gradient(225deg, #1a1a2e 25%, transparent 25%) -10px 0,
27
+ linear-gradient(315deg, #1a1a2e 25%, transparent 25%),
28
+ linear-gradient(45deg, #1a1a2e 25%, transparent 25%);
29
+ background-size: 20px 20px;
30
+ border: 1px solid rgba(0, 255, 255, 0.1);
31
+ box-shadow:
32
+ inset 0 0 20px rgba(0, 0, 0, 0.5),
33
+ 0 0 30px rgba(0, 100, 255, 0.2);
34
+ }
35
+
36
+ .hud-panel {
37
+ background: rgba(10, 15, 30, 0.8);
38
+ border: 1px solid rgba(0, 150, 255, 0.2);
39
+ box-shadow:
40
+ inset 0 0 30px rgba(0, 50, 100, 0.3),
41
+ 0 5px 20px rgba(0, 0, 0, 0.5);
42
+ backdrop-filter: blur(8px);
43
+ position: relative;
44
+ overflow: hidden;
45
+ }
46
+
47
+ .hud-panel::before {
48
+ content: '';
49
+ position: absolute;
50
+ top: 0;
51
+ left: 0;
52
+ right: 0;
53
+ height: 2px;
54
+ background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.7), transparent);
55
+ }
56
+
57
+ .hud-panel::after {
58
+ content: '';
59
+ position: absolute;
60
+ bottom: 0;
61
+ left: 0;
62
+ right: 0;
63
+ height: 1px;
64
+ background: linear-gradient(90deg, transparent, rgba(0, 100, 200, 0.5), transparent);
65
+ }
66
+
67
+ .corner-decoration {
68
+ position: absolute;
69
+ width: 15px;
70
+ height: 15px;
71
+ border-color: rgba(0, 200, 255, 0.5);
72
+ }
73
+
74
+ .corner-decoration.tl {
75
+ top: 0;
76
+ left: 0;
77
+ border-top: 2px solid;
78
+ border-left: 2px solid;
79
+ }
80
+
81
+ .corner-decoration.tr {
82
+ top: 0;
83
+ right: 0;
84
+ border-top: 2px solid;
85
+ border-right: 2px solid;
86
+ }
87
+
88
+ .corner-decoration.bl {
89
+ bottom: 0;
90
+ left: 0;
91
+ border-bottom: 2px solid;
92
+ border-left: 2px solid;
93
+ }
94
+
95
+ .corner-decoration.br {
96
+ bottom: 0;
97
+ right: 0;
98
+ border-bottom: 2px solid;
99
+ border-right: 2px solid;
100
+ }
101
+
102
+ .data-line {
103
+ background: linear-gradient(90deg, rgba(0, 100, 255, 0.1), transparent);
104
+ border-left: 3px solid rgba(0, 150, 255, 0.5);
105
+ }
106
+
107
+ .level-S { color: #ff55ff; text-shadow: 0 0 15px rgba(255, 85, 255, 0.7); }
108
+ .level-A { color: #ff5555; text-shadow: 0 0 12px rgba(255, 85, 85, 0.7); }
109
+ .level-B { color: #ffaa00; text-shadow: 0 0 10px rgba(255, 170, 0, 0.7); }
110
+ .level-C { color: #55ff55; text-shadow: 0 0 8px rgba(85, 255, 85, 0.7); }
111
+ .level-D { color: #5555ff; text-shadow: 0 0 6px rgba(85, 85, 255, 0.7); }
112
+ .level-E { color: #aaaaaa; text-shadow: 0 0 4px rgba(170, 170, 170, 0.7); }
113
+
114
+ .pulse-animation {
115
+ animation: pulse 2s infinite ease-in-out;
116
+ }
117
+
118
+ @keyframes pulse {
119
+ 0% { opacity: 0.8; transform: scale(0.98); }
120
+ 50% { opacity: 1; transform: scale(1.02); }
121
+ 100% { opacity: 0.8; transform: scale(0.98); }
122
+ }
123
+
124
+ .connection-dots {
125
+ background-image: radial-gradient(circle, rgba(0, 200, 255, 0.5) 2px, transparent 2px);
126
+ background-size: 10px 10px;
127
+ }
128
+
129
+ #assign-btn {
130
+ transition: all 0.3s ease;
131
+ perspective: 1000px;
132
+ transform-style: preserve-3d;
133
+ }
134
+
135
+ #assign-btn::before {
136
+ content: '';
137
+ position: absolute;
138
+ top: -3px;
139
+ left: -3px;
140
+ right: -3px;
141
+ bottom: -3px;
142
+ background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffaa);
143
+ z-index: -1;
144
+ filter: blur(5px);
145
+ opacity: 0;
146
+ transition: opacity 0.3s ease;
147
+ }
148
+
149
+ #assign-btn:hover::before {
150
+ opacity: 0.7;
151
+ }
152
+
153
+ #assign-btn:active {
154
+ transform: translateY(2px) scale(0.98);
155
+ }
156
+
157
+ .status-light {
158
+ width: 12px;
159
+ height: 12px;
160
+ border-radius: 50%;
161
+ background-color: #ff5555;
162
+ box-shadow: 0 0 10px #ff5555;
163
+ animation: status-pulse 1.5s infinite;
164
+ }
165
+
166
+ .status-light.ready {
167
+ background-color: #55ff55;
168
+ box-shadow: 0 0 10px #55ff55;
169
+ animation: none;
170
+ }
171
+
172
+ @keyframes status-pulse {
173
+ 0% { opacity: 0.3; }
174
+ 50% { opacity: 1; }
175
+ 100% { opacity: 0.3; }
176
+ }
177
+
178
+ .hexagon-badge {
179
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
180
+ width: 40px;
181
+ height: 45px;
182
+ display: flex;
183
+ align-items: center;
184
+ justify-content: center;
185
+ }
186
+ </style>
187
+ </head>
188
+ <body class="min-h-screen flex flex-col items-center justify-center p-4">
189
+ <!-- Main System Container -->
190
+ <div class="w-full max-w-3xl hud-panel metal-texture rounded-lg p-6 relative overflow-hidden">
191
+ <!-- Corner decorations -->
192
+ <div class="corner-decoration tl"></div>
193
+ <div class="corner-decoration tr"></div>
194
+ <div class="corner-decoration bl"></div>
195
+ <div class="corner-decoration br"></div>
196
+
197
+ <!-- Connection dots along the edges -->
198
+ <div class="absolute top-0 left-0 right-0 h-1 connection-dots"></div>
199
+ <div class="absolute bottom-0 left-0 right-0 h-1 connection-dots"></div>
200
+
201
+ <!-- System Header -->
202
+ <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-800">
203
+ <div class="flex items-center">
204
+ <div class="hexagon-badge bg-gradient-to-b from-blue-600 to-blue-800 mr-4">
205
+ <i class="fas fa-user-shield text-white text-lg"></i>
206
+ </div>
207
+ <div>
208
+ <h1 class="text-2xl font-bold text-white tracking-wider">SOLO LEVELING SYSTEM</h1>
209
+ <p class="text-sm text-blue-400 font-mono">JOB ASSIGNMENT PROTOCOL v3.7.2</p>
210
+ </div>
211
+ </div>
212
+ <div class="flex items-center">
213
+ <div class="status-light mr-2"></div>
214
+ <span id="system-status" class="text-sm font-mono text-red-400">STANDBY</span>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Main Content -->
219
+ <div class="flex flex-col items-center">
220
+ <!-- Assignment Display -->
221
+ <div id="assignment-display" class="w-full max-w-md hud-panel rounded-lg p-8 mb-8 flex flex-col items-center">
222
+ <div id="job-icon" class="w-32 h-32 bg-gray-900 rounded-full flex items-center justify-center mb-6 border-2 border-dashed border-gray-700">
223
+ <i class="fas fa-question text-4xl text-gray-600"></i>
224
+ </div>
225
+ <div id="job-name" class="text-2xl font-bold text-center mb-2">NO ASSIGNMENT</div>
226
+ <div id="job-level" class="text-xl text-center text-gray-500">---</div>
227
+ </div>
228
+
229
+ <!-- Stats Panel -->
230
+ <div class="w-full hud-panel rounded-lg p-6 mb-8">
231
+ <div class="grid grid-cols-2 gap-4">
232
+ <div class="data-line p-3 rounded">
233
+ <div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">ASSIGNMENTS</div>
234
+ <div id="total-assignments" class="text-3xl font-bold">0</div>
235
+ </div>
236
+ <div class="data-line p-3 rounded">
237
+ <div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">LAST LEVEL</div>
238
+ <div id="last-level" class="text-3xl font-bold">---</div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Assignment Button -->
244
+ <button id="assign-btn" class="relative px-12 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold rounded-lg transition-all mb-8">
245
+ <div class="flex items-center">
246
+ <i class="fas fa-dice-d20 mr-3 text-xl"></i>
247
+ <span>INITIATE ASSIGNMENT</span>
248
+ </div>
249
+ </button>
250
+
251
+ <!-- Level Distribution -->
252
+ <div class="w-full hud-panel rounded-lg p-6">
253
+ <h3 class="text-lg font-bold text-center mb-4 tracking-wider">LEVEL DISTRIBUTION</h3>
254
+ <div class="space-y-4">
255
+ <div class="flex items-center">
256
+ <div class="w-8 font-mono font-bold level-S">S</div>
257
+ <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
258
+ <div id="s-level-bar" class="h-full bg-gradient-to-r from-purple-800 to-pink-600"></div>
259
+ </div>
260
+ <div id="s-level-count" class="w-8 text-right font-mono">0%</div>
261
+ </div>
262
+ <div class="flex items-center">
263
+ <div class="w-8 font-mono font-bold level-A">A</div>
264
+ <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
265
+ <div id="a-level-bar" class="h-full bg-gradient-to-r from-red-800 to-orange-600"></div>
266
+ </div>
267
+ <div id="a-level-count" class="w-8 text-right font-mono">0%</div>
268
+ </div>
269
+ <div class="flex items-center">
270
+ <div class="w-8 font-mono font-bold level-B">B</div>
271
+ <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
272
+ <div id="b-level-bar" class="h-full bg-gradient-to-r from-yellow-600 to-amber-600"></div>
273
+ </div>
274
+ <div id="b-level-count" class="w-8 text-right font-mono">0%</div>
275
+ </div>
276
+ <div class="flex items-center">
277
+ <div class="w-8 font-mono font-bold level-C">C</div>
278
+ <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
279
+ <div id="c-level-bar" class="h-full bg-gradient-to-r from-green-600 to-lime-600"></div>
280
+ </div>
281
+ <div id="c-level-count" class="w-8 text-right font-mono">0%</div>
282
+ </div>
283
+ <div class="flex items-center">
284
+ <div class="w-8 font-mono font-bold level-D">D</div>
285
+ <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
286
+ <div id="d-level-bar" class="h-full bg-gradient-to-r from-blue-600 to-indigo-600"></div>
287
+ </div>
288
+ <div id="d-level-count" class="w-8 text-right font-mono">0%</div>
289
+ </div>
290
+ <div class="flex items-center">
291
+ <div class="w-8 font-mono font-bold level-E">E</div>
292
+ <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
293
+ <div id="e-level-bar" class="h-full bg-gray-600"></div>
294
+ </div>
295
+ <div id="e-level-count" class="w-8 text-right font-mono">0%</div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- System Footer -->
302
+ <div class="mt-8 pt-4 border-t border-gray-800 text-xs text-gray-500 text-center font-mono">
303
+ <p>NEXUS CORP SECURE SYSTEM | ENCRYPTION: QUANTUM-256</p>
304
+ <p class="mt-1" id="system-timestamp">LOADING TIMESTAMP...</p>
305
+ </div>
306
+ </div>
307
+
308
+ <script>
309
+ // Job data with more detailed descriptions
310
+ const jobCategories = [
311
+ {
312
+ name: "Shadow Monarch",
313
+ icon: "fa-user-ninja",
314
+ color: "bg-gradient-to-b from-purple-900 to-purple-700",
315
+ desc: "Master of darkness and stealth operations"
316
+ },
317
+ {
318
+ name: "Beast Tamer",
319
+ icon: "fa-paw",
320
+ color: "bg-gradient-to-b from-amber-800 to-amber-600",
321
+ desc: "Commander of magical beasts and creatures"
322
+ },
323
+ {
324
+ name: "Arcane Mage",
325
+ icon: "fa-hat-wizard",
326
+ color: "bg-gradient-to-b from-blue-800 to-blue-600",
327
+ desc: "Weaver of powerful arcane energies"
328
+ },
329
+ {
330
+ name: "Soul Reaper",
331
+ icon: "fa-scythe",
332
+ color: "bg-gradient-to-b from-green-800 to-green-600",
333
+ desc: "Harvester of souls and manipulator of death"
334
+ },
335
+ {
336
+ name: "Dragon Knight",
337
+ icon: "fa-dragon",
338
+ color: "bg-gradient-to-b from-red-800 to-red-600",
339
+ desc: "Legendary warrior bonded with dragon kin"
340
+ },
341
+ {
342
+ name: "Time Weaver",
343
+ icon: "fa-clock",
344
+ color: "bg-gradient-to-b from-cyan-800 to-cyan-600",
345
+ desc: "Manipulator of temporal energies"
346
+ },
347
+ {
348
+ name: "Necromancer",
349
+ icon: "fa-skull",
350
+ color: "bg-gradient-to-b from-gray-800 to-gray-600",
351
+ desc: "Commander of the undead legions"
352
+ },
353
+ {
354
+ name: "Celestial Archer",
355
+ icon: "fa-bow-arrow",
356
+ color: "bg-gradient-to-b from-indigo-800 to-indigo-600",
357
+ desc: "Hunter with celestial precision"
358
+ }
359
+ ];
360
+
361
+ const levels = ["S", "A", "B", "C", "D", "E"];
362
+ const levelWeights = [0.03, 0.07, 0.15, 0.25, 0.3, 0.2]; // More realistic distribution
363
+
364
+ let assignmentsCount = 0;
365
+ let levelCounts = { S: 0, A: 0, B: 0, C: 0, D: 0, E: 0 };
366
+ let lastAssignedLevel = null;
367
+
368
+ // DOM elements
369
+ const assignBtn = document.getElementById('assign-btn');
370
+ const jobIcon = document.getElementById('job-icon');
371
+ const jobName = document.getElementById('job-name');
372
+ const jobLevel = document.getElementById('job-level');
373
+ const totalAssignments = document.getElementById('total-assignments');
374
+ const lastLevel = document.getElementById('last-level');
375
+ const systemStatus = document.getElementById('system-status');
376
+ const statusLight = document.querySelector('.status-light');
377
+
378
+ // System timestamp
379
+ function updateSystemTimestamp() {
380
+ const now = new Date();
381
+ const dateStr = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
382
+ const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
383
+
384
+ document.getElementById('system-timestamp').textContent = `SYSTEM TIME: ${dateStr} ${timeStr}`;
385
+ }
386
+
387
+ setInterval(updateSystemTimestamp, 1000);
388
+ updateSystemTimestamp();
389
+
390
+ // Assignment function
391
+ assignBtn.addEventListener('click', () => {
392
+ if (assignBtn.disabled) return;
393
+
394
+ // Set system to busy
395
+ assignBtn.disabled = true;
396
+ systemStatus.textContent = "PROCESSING";
397
+ systemStatus.className = "text-sm font-mono text-yellow-400";
398
+ statusLight.className = "status-light mr-2";
399
+
400
+ // Show processing animation
401
+ jobIcon.innerHTML = '<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-cyan-500"></div>';
402
+ jobName.textContent = "ANALYZING POTENTIAL";
403
+ jobLevel.textContent = "CALCULATING LEVEL...";
404
+ jobName.className = "text-2xl font-bold text-center mb-2 text-yellow-400";
405
+ jobLevel.className = "text-xl text-center text-yellow-400";
406
+
407
+ // Simulate system processing
408
+ setTimeout(() => {
409
+ // Select random job
410
+ const randomJobIndex = Math.floor(Math.random() * jobCategories.length);
411
+ const selectedJob = jobCategories[randomJobIndex];
412
+
413
+ // Select level based on weights
414
+ const randomLevelValue = Math.random();
415
+ let cumulativeWeight = 0;
416
+ let assignedLevel = "E";
417
+
418
+ for (let i = 0; i < levels.length; i++) {
419
+ cumulativeWeight += levelWeights[i];
420
+ if (randomLevelValue <= cumulativeWeight) {
421
+ assignedLevel = levels[i];
422
+ break;
423
+ }
424
+ }
425
+
426
+ // Update counts
427
+ assignmentsCount++;
428
+ levelCounts[assignedLevel]++;
429
+ lastAssignedLevel = assignedLevel;
430
+
431
+ // Update UI with the new assignment
432
+ updateAssignmentDisplay(selectedJob, assignedLevel);
433
+ updateStats();
434
+ updateLevelDistribution();
435
+
436
+ // Set system back to ready
437
+ setTimeout(() => {
438
+ assignBtn.disabled = false;
439
+ systemStatus.textContent = "READY";
440
+ systemStatus.className = "text-sm font-mono text-green-400";
441
+ statusLight.className = "status-light ready mr-2";
442
+ }, 1500);
443
+
444
+ }, 2000 + Math.random() * 1000); // Random processing time between 2-3 seconds
445
+ });
446
+
447
+ // Update the assignment display
448
+ function updateAssignmentDisplay(job, level) {
449
+ // Set job icon
450
+ jobIcon.className = `w-32 h-32 ${job.color} rounded-full flex items-center justify-center mb-6`;
451
+ jobIcon.innerHTML = `<i class="fas ${job.icon} text-4xl text-white"></i>`;
452
+
453
+ // Set job name and description
454
+ jobName.textContent = job.name;
455
+ jobName.className = `text-2xl font-bold text-center mb-2 level-${level}`;
456
+
457
+ // Set level
458
+ jobLevel.textContent = `${level} LEVEL`;
459
+ jobLevel.className = `text-2xl font-bold text-center level-${level} pulse-animation`;
460
+
461
+ // Add subtle animation
462
+ jobIcon.classList.add('pulse-animation');
463
+ setTimeout(() => {
464
+ jobIcon.classList.remove('pulse-animation');
465
+ }, 2000);
466
+ }
467
+
468
+ // Update stats display
469
+ function updateStats() {
470
+ totalAssignments.textContent = assignmentsCount;
471
+
472
+ if (lastAssignedLevel) {
473
+ lastLevel.textContent = lastAssignedLevel;
474
+ lastLevel.className = `text-3xl font-bold level-${lastAssignedLevel}`;
475
+ }
476
+ }
477
+
478
+ // Update level distribution bars
479
+ function updateLevelDistribution() {
480
+ if (assignmentsCount === 0) return;
481
+
482
+ levels.forEach(level => {
483
+ const percentage = Math.round((levelCounts[level] / assignmentsCount) * 100);
484
+ document.getElementById(`${level.toLowerCase()}-level-bar`).style.width = `${percentage}%`;
485
+ document.getElementById(`${level.toLowerCase()}-level-count`).textContent = `${percentage}%`;
486
+ });
487
+ }
488
+
489
+ // Initialize system status
490
+ systemStatus.textContent = "READY";
491
+ systemStatus.className = "text-sm font-mono text-green-400";
492
+ statusLight.className = "status-light ready mr-2";
493
+ </script>
494
+ <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=zonana/leveling" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
495
+ </html>