Hugging Face's logo

Spaces:
zonana
/
leveling
Running

App Files Community
zonana commited on
Commit
6c2f05c
·
verified ·
1 Parent(s): 5ef7620

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +475 -306
index.html CHANGED
@@ -3,7 +3,7 @@
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>
@@ -11,35 +11,77 @@
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
  }
@@ -51,7 +93,7 @@
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 {
@@ -61,14 +103,14 @@
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 {
@@ -100,16 +142,16 @@
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;
@@ -122,13 +164,13 @@
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
  .circular-btn {
130
- width: 120px;
131
- height: 120px;
132
  border-radius: 50%;
133
  display: flex;
134
  flex-direction: column;
@@ -140,31 +182,40 @@
140
  transform-style: preserve-3d;
141
  cursor: pointer;
142
  margin: 0 auto;
 
 
 
 
 
 
143
  }
144
 
145
  .circular-btn::before {
146
  content: '';
147
  position: absolute;
148
- top: -5px;
149
- left: -5px;
150
- right: -5px;
151
- bottom: -5px;
152
- background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffaa);
153
  border-radius: 50%;
154
- z-index: -1;
155
- filter: blur(10px);
156
- opacity: 0;
157
- transition: opacity 0.3s ease;
158
  }
159
 
160
  .circular-btn:hover::before {
161
- opacity: 0.7;
162
  }
163
 
164
  .circular-btn:active {
165
  transform: translateY(2px) scale(0.98);
166
  }
167
 
 
 
 
 
 
 
168
  .status-light {
169
  width: 12px;
170
  height: 12px;
@@ -195,46 +246,15 @@
195
  justify-content: center;
196
  }
197
 
198
- .magic-circle {
199
  position: relative;
200
- width: 200px;
201
- height: 200px;
202
- border-radius: 50%;
203
- border: 2px dashed rgba(100, 200, 255, 0.5);
204
  display: flex;
205
  align-items: center;
206
  justify-content: center;
207
  margin-bottom: 2rem;
208
- }
209
-
210
- .magic-circle::before {
211
- content: '';
212
- position: absolute;
213
- width: 100%;
214
- height: 100%;
215
- border-radius: 50%;
216
- border: 1px solid rgba(100, 200, 255, 0.2);
217
- animation: rotate 20s linear infinite;
218
- }
219
-
220
- .magic-circle::after {
221
- content: '';
222
- position: absolute;
223
- width: 90%;
224
- height: 90%;
225
- border-radius: 50%;
226
- border: 1px dotted rgba(200, 150, 255, 0.3);
227
- animation: rotate-reverse 15s linear infinite;
228
- }
229
-
230
- @keyframes rotate {
231
- 0% { transform: rotate(0deg); }
232
- 100% { transform: rotate(360deg); }
233
- }
234
-
235
- @keyframes rotate-reverse {
236
- 0% { transform: rotate(360deg); }
237
- 100% { transform: rotate(0deg); }
238
  }
239
 
240
  .result-display {
@@ -247,12 +267,24 @@
247
  font-weight: bold;
248
  margin-bottom: 0.5rem;
249
  letter-spacing: 0.05em;
 
250
  }
251
 
252
  .result-subtitle {
253
  font-size: 1.5rem;
254
  opacity: 0.8;
255
- margin-top: -0.5rem;
 
 
 
 
 
 
 
 
 
 
 
256
  }
257
 
258
  .stat-container {
@@ -275,7 +307,7 @@
275
 
276
  .stat-bar {
277
  height: 8px;
278
- background-color: #1e1e2e;
279
  border-radius: 4px;
280
  overflow: hidden;
281
  }
@@ -287,33 +319,90 @@
287
  }
288
 
289
  .mana-fill {
290
- background: linear-gradient(90deg, #3498db, #9b59b6);
291
  }
292
 
293
  .strength-fill {
294
- background: linear-gradient(90deg, #e74c3c, #f39c12);
295
  }
296
 
297
  .wisdom-fill {
298
- background: linear-gradient(90deg, #2ecc71, #3498db);
299
  }
300
 
301
  .agility-fill {
302
- background: linear-gradient(90deg, #f1c40f, #2ecc71);
303
  }
304
 
305
  .luck-fill {
306
- background: linear-gradient(90deg, #9b59b6, #e74c3c);
307
  }
308
 
309
  .defense-fill {
310
- background: linear-gradient(90deg, #34495e, #7f8c8d);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
311
  }
312
  </style>
313
  </head>
314
  <body class="min-h-screen flex flex-col items-center justify-center p-4">
315
  <!-- Main System Container -->
316
- <div class="w-full max-w-3xl hud-panel metal-texture rounded-lg p-6 relative overflow-hidden">
317
  <!-- Corner decorations -->
318
  <div class="corner-decoration tl"></div>
319
  <div class="corner-decoration tr"></div>
@@ -327,12 +416,12 @@
327
  <!-- System Header -->
328
  <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-800">
329
  <div class="flex items-center">
330
- <div class="hexagon-badge bg-gradient-to-b from-blue-600 to-blue-800 mr-4">
331
  <i class="fas fa-user-shield text-white text-lg"></i>
332
  </div>
333
  <div>
334
- <h1 class="text-2xl font-bold text-white tracking-wider">SOLO LEVELING SYSTEM</h1>
335
- <p class="text-sm text-blue-400 font-mono">CLASS IDENTIFICATION PROTOCOL v4.2.1</p>
336
  </div>
337
  </div>
338
  <div class="flex items-center">
@@ -346,12 +435,12 @@
346
  <!-- Identification Panel -->
347
  <div id="identification-panel" class="w-full">
348
  <div class="flex flex-col items-center">
349
- <div class="magic-circle">
350
- <i class="fas fa-question text-5xl text-gray-400"></i>
351
  </div>
352
 
353
  <div id="result-container" class="result-display hidden">
354
- <div id="job-name" class="result-title level-E">UNKNOWN</div>
355
  <div id="job-level" class="result-subtitle level-E">---</div>
356
  </div>
357
 
@@ -361,34 +450,61 @@
361
  Your class and abilities will be revealed by the system.
362
  </p>
363
 
364
- <div id="identify-btn" class="circular-btn bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold">
365
- <i class="fas fa-hand-sparkles text-3xl mb-1"></i>
366
- <span class="text-xs">IDENTIFY</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  </div>
368
  </div>
369
  </div>
370
  </div>
371
 
372
  <!-- Stats Panel -->
373
- <div class="w-full hud-panel rounded-lg p-6 mb-8">
374
  <div class="grid grid-cols-1 gap-4">
375
  <div class="data-line p-3 rounded">
376
- <div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">LAST LEVEL</div>
377
  <div id="last-level" class="text-3xl font-bold">---</div>
378
  </div>
379
  </div>
380
  </div>
381
 
 
 
 
 
 
 
 
 
 
 
 
 
 
382
  <!-- Ability Distribution -->
383
  <div class="w-full hud-panel rounded-lg p-6">
384
  <h3 class="text-lg font-bold text-center mb-4 tracking-wider">ABILITY VALUE DISTRIBUTION</h3>
385
  <div class="space-y-4">
386
  <div class="stat-container">
387
  <div class="stat-label">
388
- <span><i class="fas fa-bolt"></i>MANA <span id="mana-value" class="font-mono">0/10000</span></span>
389
  </div>
390
  <div class="stat-bar">
391
- <div id="mana-bar" class="stat-fill mana-fill" style="width: 0%"></div>
392
  </div>
393
  </div>
394
 
@@ -448,221 +564,134 @@
448
  </div>
449
 
450
  <script>
451
- // Expanded job data with ability distributions
452
  const jobCategories = [
453
  {
454
  name: "Fire Mage",
 
455
  icon: "fa-fire",
456
- color: "from-red-800 to-red-600",
457
- desc: "Master of destructive fire magic",
458
- abilities: {
459
- mana: 9500,
460
- strength: 40,
461
- wisdom: 90,
462
- agility: 60,
463
- luck: 70,
464
- defense: 30
465
- }
466
  },
467
  {
468
  name: "Ice Mage",
 
469
  icon: "fa-snowflake",
470
- color: "from-cyan-800 to-blue-600",
471
- desc: "Controller of freezing ice magic",
472
- abilities: {
473
- mana: 9200,
474
- strength: 30,
475
- wisdom: 95,
476
- agility: 50,
477
- luck: 75,
478
- defense: 45
479
- }
480
  },
481
  {
482
  name: "Lightning Mage",
 
483
  icon: "fa-bolt",
484
- color: "from-yellow-600 to-purple-800",
485
- desc: "Wielder of shocking lightning magic",
486
- abilities: {
487
- mana: 9700,
488
- strength: 35,
489
- wisdom: 85,
490
- agility: 85,
491
- luck: 65,
492
- defense: 25
493
- }
494
  },
495
  {
496
  name: "Necromancer",
 
497
  icon: "fa-skull",
498
- color: "from-gray-800 to-gray-600",
499
- desc: "Commander of the undead legions",
500
- abilities: {
501
- mana: 9000,
502
- strength: 60,
503
- wisdom: 85,
504
- agility: 50,
505
- luck: 75,
506
- defense: 65
507
- }
508
  },
509
  {
510
  name: "Summoner",
 
511
  icon: "fa-ghost",
512
- color: "from-purple-800 to-indigo-600",
513
- desc: "Summoner of powerful entities",
514
- abilities: {
515
- mana: 8800,
516
- strength: 50,
517
- wisdom: 95,
518
- agility: 55,
519
- luck: 90,
520
- defense: 40
521
- }
522
  },
523
  {
524
  name: "Healer",
 
525
  icon: "fa-hand-holding-medical",
526
- color: "from-green-800 to-teal-600",
527
- desc: "Restorer of life and vitality",
528
- abilities: {
529
- mana: 8000,
530
- strength: 25,
531
- wisdom: 100,
532
- agility: 40,
533
- luck: 95,
534
- defense: 35
535
- }
536
  },
537
  {
538
  name: "Tank",
 
539
  icon: "fa-shield-virus",
540
- color: "from-gray-700 to-gray-800",
541
- desc: "Immovable defensive specialist",
542
- abilities: {
543
- mana: 3000,
544
- strength: 75,
545
- wisdom: 30,
546
- agility: 40,
547
- luck: 50,
548
- defense: 100
549
- }
550
  },
551
  {
552
  name: "Knight",
 
553
  icon: "fa-helmet-battle",
554
- color: "from-blue-900 to-blue-700",
555
- desc: "Honorable melee combatant",
556
- abilities: {
557
- mana: 4000,
558
- strength: 90,
559
- wisdom: 40,
560
- agility: 70,
561
- luck: 60,
562
- defense: 90
563
- }
564
  },
565
  {
566
  name: "Orc Warrior",
 
567
  icon: "fa-tusks",
568
- color: "from-green-900 to-green-700",
569
- desc: "Brutal strength-focused fighter",
570
- abilities: {
571
- mana: 2000,
572
- strength: 100,
573
- wisdom: 20,
574
- agility: 60,
575
- luck: 40,
576
- defense: 80
577
- }
578
  },
579
  {
580
  name: "Fighter",
 
581
  icon: "fa-hand-fist",
582
- color: "from-red-900 to-red-700",
583
- desc: "Versatile melee combatant",
584
- abilities: {
585
- mana: 3500,
586
- strength: 95,
587
- wisdom: 35,
588
- agility: 80,
589
- luck: 65,
590
- defense: 70
591
- }
592
  },
593
  {
594
  name: "Sorcerer",
 
595
  icon: "fa-hat-wizard",
596
- color: "from-purple-900 to-indigo-800",
597
- desc: "Master of arcane energies",
598
- abilities: {
599
- mana: 9800,
600
- strength: 25,
601
- wisdom: 100,
602
- agility: 45,
603
- luck: 80,
604
- defense: 20
605
- }
606
  },
607
  {
608
  name: "Swordsman",
 
609
  icon: "fa-sword",
610
- color: "from-gray-600 to-blue-800",
611
- desc: "Skilled blade master",
612
- abilities: {
613
- mana: 3000,
614
- strength: 85,
615
- wisdom: 50,
616
- agility: 95,
617
- luck: 70,
618
- defense: 75
619
- }
620
  },
621
  {
622
  name: "Mechanic",
 
623
  icon: "fa-robot",
624
- color: "from-yellow-800 to-gray-600",
625
- desc: "Master of machines and gadgets",
626
- abilities: {
627
- mana: 5000,
628
- strength: 70,
629
- wisdom: 85,
630
- agility: 60,
631
- luck: 55,
632
- defense: 65
633
- }
634
  },
635
  {
636
  name: "Archer",
 
637
  icon: "fa-bow-arrow",
638
- color: "from-brown-600 to-green-800",
639
- desc: "Precision ranged attacker",
640
- abilities: {
641
- mana: 4500,
642
- strength: 65,
643
- wisdom: 60,
644
- agility: 100,
645
- luck: 85,
646
- defense: 40
647
- }
648
  }
649
  ];
650
 
651
  const levels = ["S", "A", "B", "C", "D", "E"];
652
- const levelWeights = [0.03, 0.07, 0.15, 0.25, 0.3, 0.2];
653
 
654
  let assignmentsCount = 0;
655
  let levelCounts = { S: 0, A: 0, B: 0, C: 0, D: 0, E: 0 };
656
  let lastAssignedLevel = null;
 
657
 
658
  // DOM elements
659
  const identifyBtn = document.getElementById('identify-btn');
660
- const magicCircle = document.querySelector('.magic-circle');
661
  const resultContainer = document.getElementById('result-container');
662
  const jobName = document.getElementById('job-name');
663
  const jobLevel = document.getElementById('job-level');
664
  const lastLevelDisplay = document.getElementById('last-level');
665
  const systemStatus = document.getElementById('system-status');
 
 
 
666
 
667
  // System timestamp
668
  function updateSystemTimestamp() {
@@ -676,76 +705,212 @@
676
  setInterval(updateSystemTimestamp, 1000);
677
  updateSystemTimestamp();
678
 
679
- // Identification function
680
- identifyBtn.addEventListener('click', () => {
681
- if (identifyBtn.classList.contains('hidden')) return;
682
-
683
- // Hide the button
684
- identifyBtn.classList.add('hidden');
 
 
 
 
 
685
 
686
- // Set system to processing
687
- systemStatus.textContent = "PROCESSING";
688
- systemStatus.className = "text-sm font-mono text-yellow-400";
689
-
690
- // Show processing animation
691
- magicCircle.innerHTML = `
692
- <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 opacity-50 animate-pulse"></div>
693
- <div class="absolute inset-4 rounded-full bg-gradient-to-r from-purple-500 to-pink-600 opacity-50 animate-pulse" style="animation-delay: 0.2s"></div>
694
- <div class="absolute inset-8 rounded-full bg-gradient-to-r from-pink-500 to-red-600 opacity-50 animate-pulse" style="animation-delay: 0.4s"></div>
695
- <div class="relative z-10 text-5xl text-white">
696
- <i class="fas fa-cog animate-spin"></i>
697
- </div>
698
- `;
699
 
700
- // Hide result container if it's shown
701
- resultContainer.classList.add('hidden');
702
-
703
- // Simulate system processing
704
- setTimeout(() => {
705
- // Select random job
706
- const randomJobIndex = Math.floor(Math.random() * jobCategories.length);
707
- const selectedJob = jobCategories[randomJobIndex];
708
-
709
- // Select level based on weights
710
- const randomLevelValue = Math.random();
711
- let cumulativeWeight = 0;
712
- let assignedLevel = "E";
713
 
714
- for (let i = 0; i < levels.length; i++) {
715
- cumulativeWeight += levelWeights[i];
716
- if (randomLevelValue <= cumulativeWeight) {
717
- assignedLevel = levels[i];
718
- break;
719
- }
 
 
 
720
  }
721
 
722
- // Update counts
723
- assignmentsCount++;
724
- levelCounts[assignedLevel]++;
725
- lastAssignedLevel = assignedLevel;
726
 
727
- // Update UI with the new assignment
728
- updateResultDisplay(selectedJob, assignedLevel);
729
- updateStats();
730
- updateAbilityDisplay(selectedJob.abilities);
731
 
732
- // Set system back to ready
733
- systemStatus.textContent = "IDENTIFICATION COMPLETE";
734
- systemStatus.className = "text-sm font-mono text-green-400";
 
 
 
 
 
 
 
 
 
 
 
 
735
 
736
- }, 2000 + Math.random() * 1000); // Random processing time between 2-3 seconds
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
737
  });
738
 
739
  // Update the result display
740
  function updateResultDisplay(job, level) {
741
- // Update magic circle with job icon
742
- magicCircle.innerHTML = `
743
- <div class="absolute inset-0 rounded-full bg-gradient-to-r ${job.color} opacity-90"></div>
744
- <i class="fas ${job.icon} text-5xl text-white"></i>
745
- `;
746
 
747
- // Update job name and level display
748
- jobName.textContent = job.name;
749
  jobName.className = `result-title level-${level} pulse-animation`;
750
  jobLevel.textContent = `${level} GRADE`;
751
  jobLevel.className = `result-subtitle level-${level}`;
@@ -764,29 +929,33 @@
764
 
765
  // Update ability display
766
  function updateAbilityDisplay(abilities) {
767
- // Update mana
768
- document.getElementById('mana-bar').style.width = `${(abilities.mana / 10000) * 100}%`;
769
- document.getElementById('mana-value').textContent = `${abilities.mana}/10000`;
 
 
 
 
770
 
771
  // Update strength
772
  document.getElementById('strength-bar').style.width = `${abilities.strength}%`;
773
- document.getElementById('strength-value').textContent = `${abilities.strength}/100`;
774
 
775
  // Update wisdom
776
  document.getElementById('wisdom-bar').style.width = `${abilities.wisdom}%`;
777
- document.getElementById('wisdom-value').textContent = `${abilities.wisdom}/100`;
778
 
779
  // Update agility
780
  document.getElementById('agility-bar').style.width = `${abilities.agility}%`;
781
- document.getElementById('agility-value').textContent = `${abilities.agility}/100`;
782
 
783
  // Update luck
784
  document.getElementById('luck-bar').style.width = `${abilities.luck}%`;
785
- document.getElementById('luck-value').textContent = `${abilities.luck}/100`;
786
 
787
  // Update defense
788
  document.getElementById('defense-bar').style.width = `${abilities.defense}%`;
789
- document.getElementById('defense-value').textContent = `${abilities.defense}/100`;
790
  }
791
  </script>
792
  <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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Professional Identification System</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>
 
11
 
12
  body {
13
  font-family: 'Rajdhani', sans-serif;
14
+ background-color: #06060f;
15
  color: #e0e0e0;
16
  overflow-x: hidden;
17
  background-image:
18
+ radial-gradient(circle at 10% 20%, rgba(0, 60, 90, 0.05) 0%, transparent 20%),
19
+ radial-gradient(circle at 90% 80%, rgba(60, 0, 90, 0.05) 0%, transparent 20%),
20
+ linear-gradient(to bottom, #05050a 0%, #040408 100%);
21
  }
22
 
23
  .metal-texture {
24
  background:
25
+ linear-gradient(135deg, #121222 25%, transparent 25%) -10px 0,
26
+ linear-gradient(225deg, #121222 25%, transparent 25%) -10px 0,
27
+ linear-gradient(315deg, #121222 25%, transparent 25%),
28
+ linear-gradient(45deg, #121222 25%, transparent 25%);
29
  background-size: 20px 20px;
30
+ border: 1px solid rgba(0, 130, 180, 0.15);
31
  box-shadow:
32
+ inset 0 0 30px rgba(0, 0, 0, 0.8),
33
+ 0 0 40px rgba(0, 60, 90, 0.2);
34
+ }
35
+
36
+ .flame-effect {
37
+ position: relative;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .flame-effect::before {
42
+ content: '';
43
+ position: absolute;
44
+ top: -10px;
45
+ left: -10px;
46
+ right: -10px;
47
+ bottom: -10px;
48
+ background: linear-gradient(45deg, #000000, #100010, #000000);
49
+ border-radius: inherit;
50
+ z-index: -1;
51
+ filter: blur(8px);
52
+ opacity: 0.9;
53
+ }
54
+
55
+ .flame-effect::after {
56
+ content: '';
57
+ position: absolute;
58
+ top: -20px;
59
+ left: -20px;
60
+ right: -20px;
61
+ bottom: -20px;
62
+ background:
63
+ radial-gradient(ellipse at 20% 20%, #300000 0%, transparent 50%),
64
+ radial-gradient(ellipse at 80% 80%, #200040 0%, transparent 50%),
65
+ radial-gradient(ellipse at center, #000000 60%, #100010 100%);
66
+ border-radius: inherit;
67
+ z-index: -2;
68
+ filter: blur(20px);
69
+ opacity: 0.6;
70
+ animation: flame-pulse 4s infinite alternate;
71
+ }
72
+
73
+ @keyframes flame-pulse {
74
+ 0% { opacity: 0.4; }
75
+ 100% { opacity: 0.7; }
76
  }
77
 
78
  .hud-panel {
79
+ background: rgba(8, 10, 20, 0.9);
80
+ border: 1px solid rgba(0, 90, 130, 0.2);
81
  box-shadow:
82
+ inset 0 0 40px rgba(0, 20, 40, 0.4),
83
+ 0 5px 25px rgba(0, 0, 0, 0.8);
84
+ backdrop-filter: blur(10px);
85
  position: relative;
86
  overflow: hidden;
87
  }
 
93
  left: 0;
94
  right: 0;
95
  height: 2px;
96
+ background: linear-gradient(90deg, transparent, rgba(0, 130, 180, 0.6), transparent);
97
  }
98
 
99
  .hud-panel::after {
 
103
  left: 0;
104
  right: 0;
105
  height: 1px;
106
+ background: linear-gradient(90deg, transparent, rgba(0, 70, 100, 0.4), transparent);
107
  }
108
 
109
  .corner-decoration {
110
  position: absolute;
111
  width: 15px;
112
  height: 15px;
113
+ border-color: rgba(0, 160, 200, 0.5);
114
  }
115
 
116
  .corner-decoration.tl {
 
142
  }
143
 
144
  .data-line {
145
+ background: linear-gradient(90deg, rgba(0, 70, 100, 0.15), transparent);
146
+ border-left: 3px solid rgba(0, 110, 160, 0.5);
147
  }
148
 
149
+ .level-S { color: #60c8f2; text-shadow: 0 0 20px rgba(96, 200, 242, 0.8); }
150
+ .level-A { color: #80c8f0; text-shadow: 0 0 15px rgba(128, 200, 240, 0.7); }
151
+ .level-B { color: #90b0d0; text-shadow: 0 0 12px rgba(144, 176, 208, 0.6); }
152
+ .level-C { color: #a0a0c0; text-shadow: 0 0 10px rgba(160, 160, 192, 0.5); }
153
+ .level-D { color: #b080a0; text-shadow: 0 0 8px rgba(176, 128, 160, 0.4); }
154
+ .level-E { color: #c06080; text-shadow: 0 0 6px rgba(192, 96, 128, 0.3); }
155
 
156
  .pulse-animation {
157
  animation: pulse 2s infinite ease-in-out;
 
164
  }
165
 
166
  .connection-dots {
167
+ background-image: radial-gradient(circle, rgba(0, 130, 180, 0.5) 2px, transparent 2px);
168
  background-size: 10px 10px;
169
  }
170
 
171
  .circular-btn {
172
+ width: 140px;
173
+ height: 140px;
174
  border-radius: 50%;
175
  display: flex;
176
  flex-direction: column;
 
182
  transform-style: preserve-3d;
183
  cursor: pointer;
184
  margin: 0 auto;
185
+ background-image: url('https://images.unsplash.com/photo-1519683109079-d5f539e1542f?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60');
186
+ background-size: cover;
187
+ background-position: center;
188
+ overflow: hidden;
189
+ border: 3px solid rgba(0, 160, 200, 0.6);
190
+ box-shadow: 0 0 25px rgba(0, 110, 160, 0.6);
191
  }
192
 
193
  .circular-btn::before {
194
  content: '';
195
  position: absolute;
196
+ top: 0;
197
+ left: 0;
198
+ right: 0;
199
+ bottom: 0;
200
+ background: linear-gradient(135deg, rgba(0, 110, 160, 0.4), rgba(0, 70, 100, 0.6));
201
  border-radius: 50%;
202
+ z-index: 1;
 
 
 
203
  }
204
 
205
  .circular-btn:hover::before {
206
+ background: linear-gradient(135deg, rgba(0, 130, 180, 0.5), rgba(0, 90, 130, 0.7));
207
  }
208
 
209
  .circular-btn:active {
210
  transform: translateY(2px) scale(0.98);
211
  }
212
 
213
+ .circular-btn-content {
214
+ position: relative;
215
+ z-index: 2;
216
+ text-align: center;
217
+ }
218
+
219
  .status-light {
220
  width: 12px;
221
  height: 12px;
 
246
  justify-content: center;
247
  }
248
 
249
+ .job-icon-container {
250
  position: relative;
251
+ width: 180px;
252
+ height: 180px;
 
 
253
  display: flex;
254
  align-items: center;
255
  justify-content: center;
256
  margin-bottom: 2rem;
257
+ overflow: visible;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  }
259
 
260
  .result-display {
 
267
  font-weight: bold;
268
  margin-bottom: 0.5rem;
269
  letter-spacing: 0.05em;
270
+ line-height: 1.5;
271
  }
272
 
273
  .result-subtitle {
274
  font-size: 1.5rem;
275
  opacity: 0.8;
276
+ margin-top: 0.5rem;
277
+ line-height: 1.2;
278
+ }
279
+
280
+ .chinese-label {
281
+ font-size: 1rem;
282
+ font-weight: normal;
283
+ display: block;
284
+ margin-top: -1.4rem; /* Increased spacing */
285
+ opacity: 0.7;
286
+ letter-spacing: 0;
287
+ line-height: 1.8; /* Increased line height */
288
  }
289
 
290
  .stat-container {
 
307
 
308
  .stat-bar {
309
  height: 8px;
310
+ background-color: #151525;
311
  border-radius: 4px;
312
  overflow: hidden;
313
  }
 
319
  }
320
 
321
  .mana-fill {
322
+ background: linear-gradient(90deg, #2068b0, #5a4acd);
323
  }
324
 
325
  .strength-fill {
326
+ background: linear-gradient(90deg, #d43c2c, #e38c02);
327
  }
328
 
329
  .wisdom-fill {
330
+ background: linear-gradient(90deg, #1ebb61, #2088db);
331
  }
332
 
333
  .agility-fill {
334
+ background: linear-gradient(90deg, #e1b40f, #1ebb61);
335
  }
336
 
337
  .luck-fill {
338
+ background: linear-gradient(90deg, #8b49b6, #d43c2c);
339
  }
340
 
341
  .defense-fill {
342
+ background: linear-gradient(90deg, #24496e, #6f7c8d);
343
+ }
344
+
345
+ .life-fill {
346
+ background: linear-gradient(90deg, #ff5b5b, #d43c2c);
347
+ }
348
+
349
+ .reset-btn {
350
+ transition: all 0.3s ease;
351
+ transform: translateY(10px);
352
+ opacity: 0;
353
+ pointer-events: none;
354
+ }
355
+
356
+ .reset-btn.visible {
357
+ transform: translateY(0);
358
+ opacity: 1;
359
+ }
360
+
361
+ .progress-container {
362
+ width: 100%;
363
+ height: 5px;
364
+ background-color: rgba(0, 70, 100, 0.3);
365
+ border-radius: 3px;
366
+ overflow: hidden;
367
+ margin-top: 1rem;
368
+ position: relative;
369
+ }
370
+
371
+ .progress-bar {
372
+ height: 100%;
373
+ width: 0%;
374
+ background: linear-gradient(90deg, #0055aa, #00aaff);
375
+ border-radius: 3px;
376
+ transition: width 0.1s linear;
377
+ }
378
+
379
+ .progress-percent {
380
+ position: absolute;
381
+ right: 0;
382
+ top: -20px;
383
+ font-size: 0.8rem;
384
+ color: #00aaff;
385
+ font-family: monospace;
386
+ }
387
+
388
+ .version-text {
389
+ display: inline-block;
390
+ overflow: hidden;
391
+ text-overflow: ellipsis;
392
+ white-space: nowrap;
393
+ max-width: 200px;
394
+ }
395
+
396
+ .job-icon {
397
+ font-size: 10rem;
398
+ color: white;
399
+ text-shadow: 0 0 30px rgba(255,255,255,0.5);
400
  }
401
  </style>
402
  </head>
403
  <body class="min-h-screen flex flex-col items-center justify-center p-4">
404
  <!-- Main System Container -->
405
+ <div class="w-full max-w-3xl hud-panel metal-texture flame-effect rounded-lg p-6 relative overflow-hidden">
406
  <!-- Corner decorations -->
407
  <div class="corner-decoration tl"></div>
408
  <div class="corner-decoration tr"></div>
 
416
  <!-- System Header -->
417
  <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-800">
418
  <div class="flex items-center">
419
+ <div class="hexagon-badge bg-gradient-to-b from-blue-800 to-blue-900 mr-4">
420
  <i class="fas fa-user-shield text-white text-lg"></i>
421
  </div>
422
  <div>
423
+ <h1 class="text-2xl font-bold text-white tracking-wider">PROFESSIONAL IDENTIFICATION SYSTEM</h1>
424
+ <p class="text-sm text-blue-400 font-mono version-text">CLASS IDENTIFICATION PROTOCOL v4.2.2</p>
425
  </div>
426
  </div>
427
  <div class="flex items-center">
 
435
  <!-- Identification Panel -->
436
  <div id="identification-panel" class="w-full">
437
  <div class="flex flex-col items-center">
438
+ <div class="job-icon-container">
439
+ <i id="job-icon" class="fas fa-question job-icon"></i>
440
  </div>
441
 
442
  <div id="result-container" class="result-display hidden">
443
+ <div id="job-name" class="result-title level-E">UNKNOWN<span class="chinese-label">未知</span></div>
444
  <div id="job-level" class="result-subtitle level-E">---</div>
445
  </div>
446
 
 
450
  Your class and abilities will be revealed by the system.
451
  </p>
452
 
453
+ <div id="identify-btn" class="circular-btn">
454
+ <div class="circular-btn-content">
455
+ <i class="fas fa-hand-sparkles text-3xl mb-1 text-white"></i>
456
+ <span class="text-xs text-white uppercase tracking-wider">IDENTIFY</span>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Progress bar for identification process -->
461
+ <div id="progress-container" class="progress-container hidden">
462
+ <div id="progress-percent" class="progress-percent">0%</div>
463
+ <div id="progress-bar" class="progress-bar"></div>
464
+ </div>
465
+
466
+ <div id="reset-btn" class="reset-btn mt-4 text-center">
467
+ <button class="px-4 py-2 bg-gradient-to-r from-blue-700 to-blue-800 text-white rounded-md text-sm font-bold hover:from-blue-600 hover:to-blue-700 transition-colors">
468
+ <i class="fas fa-redo mr-2"></i>IDENTIFY AGAIN
469
+ </button>
470
  </div>
471
  </div>
472
  </div>
473
  </div>
474
 
475
  <!-- Stats Panel -->
476
+ <div class="w-full hud-panel rounded-lg p-6 mb-4">
477
  <div class="grid grid-cols-1 gap-4">
478
  <div class="data-line p-3 rounded">
479
+ <div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">YOUR GRADE</div>
480
  <div id="last-level" class="text-3xl font-bold">---</div>
481
  </div>
482
  </div>
483
  </div>
484
 
485
+ <!-- Mana Block -->
486
+ <div class="w-full hud-panel rounded-lg p-6 mb-4">
487
+ <h3 class="text-lg font-bold text-center mb-4 tracking-wider">ARCANE ENERGY</h3>
488
+ <div class="stat-container">
489
+ <div class="stat-label">
490
+ <span><i class="fas fa-bolt"></i>MANA <span id="mana-value" class="font-mono">0/1000</span></span>
491
+ </div>
492
+ <div class="stat-bar">
493
+ <div id="mana-bar" class="stat-fill mana-fill" style="width: 0%"></div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
  <!-- Ability Distribution -->
499
  <div class="w-full hud-panel rounded-lg p-6">
500
  <h3 class="text-lg font-bold text-center mb-4 tracking-wider">ABILITY VALUE DISTRIBUTION</h3>
501
  <div class="space-y-4">
502
  <div class="stat-container">
503
  <div class="stat-label">
504
+ <span><i class="fas fa-heart"></i>LIFE <span id="life-value" class="font-mono">0/100</span></span>
505
  </div>
506
  <div class="stat-bar">
507
+ <div id="life-bar" class="stat-fill life-fill" style="width: 0%"></div>
508
  </div>
509
  </div>
510
 
 
564
  </div>
565
 
566
  <script>
567
+ // Expanded job data with ability distributions and Chinese labels
568
  const jobCategories = [
569
  {
570
  name: "Fire Mage",
571
+ chinese: "火焰法师",
572
  icon: "fa-fire",
573
+ color: "text-red-500",
574
+ desc: "Master of destructive fire magic"
 
 
 
 
 
 
 
 
575
  },
576
  {
577
  name: "Ice Mage",
578
+ chinese: "冰霜法师",
579
  icon: "fa-snowflake",
580
+ color: "text-cyan-400",
581
+ desc: "Controller of freezing ice magic"
 
 
 
 
 
 
 
 
582
  },
583
  {
584
  name: "Lightning Mage",
585
+ chinese: "雷电法师",
586
  icon: "fa-bolt",
587
+ color: "text-yellow-400",
588
+ desc: "Wielder of shocking lightning magic"
 
 
 
 
 
 
 
 
589
  },
590
  {
591
  name: "Necromancer",
592
+ chinese: "死灵法师",
593
  icon: "fa-skull",
594
+ color: "text-gray-500",
595
+ desc: "Commander of the undead legions"
 
 
 
 
 
 
 
 
596
  },
597
  {
598
  name: "Summoner",
599
+ chinese: "召唤师",
600
  icon: "fa-ghost",
601
+ color: "text-purple-500",
602
+ desc: "Summoner of powerful entities"
 
 
 
 
 
 
 
 
603
  },
604
  {
605
  name: "Healer",
606
+ chinese: "治疗师",
607
  icon: "fa-hand-holding-medical",
608
+ color: "text-green-400",
609
+ desc: "Restorer of life and vitality"
 
 
 
 
 
 
 
 
610
  },
611
  {
612
  name: "Tank",
613
+ chinese: "坦克",
614
  icon: "fa-shield-virus",
615
+ color: "text-gray-400",
616
+ desc: "Immovable defensive specialist"
 
 
 
 
 
 
 
 
617
  },
618
  {
619
  name: "Knight",
620
+ chinese: "骑士",
621
  icon: "fa-helmet-battle",
622
+ color: "text-blue-400",
623
+ desc: "Honorable melee combatant"
 
 
 
 
 
 
 
 
624
  },
625
  {
626
  name: "Orc Warrior",
627
+ chinese: "兽人战士",
628
  icon: "fa-tusks",
629
+ color: "text-green-600",
630
+ desc: "Brutal strength-focused fighter"
 
 
 
 
 
 
 
 
631
  },
632
  {
633
  name: "Fighter",
634
+ chinese: "格斗家",
635
  icon: "fa-hand-fist",
636
+ color: "text-red-600",
637
+ desc: "Versatile melee combatant"
 
 
 
 
 
 
 
 
638
  },
639
  {
640
  name: "Sorcerer",
641
+ chinese: "术士",
642
  icon: "fa-hat-wizard",
643
+ color: "text-purple-600",
644
+ desc: "Master of arcane energies"
 
 
 
 
 
 
 
 
645
  },
646
  {
647
  name: "Swordsman",
648
+ chinese: "剑客",
649
  icon: "fa-sword",
650
+ color: "text-blue-300",
651
+ desc: "Skilled blade master"
 
 
 
 
 
 
 
 
652
  },
653
  {
654
  name: "Mechanic",
655
+ chinese: "机械师",
656
  icon: "fa-robot",
657
+ color: "text-yellow-500",
658
+ desc: "Master of machines and gadgets"
 
 
 
 
 
 
 
 
659
  },
660
  {
661
  name: "Archer",
662
+ chinese: "弓箭手",
663
  icon: "fa-bow-arrow",
664
+ color: "text-green-300",
665
+ desc: "Precision ranged attacker"
666
+ },
667
+ {
668
+ name: "Assassin",
669
+ chinese: "刺客",
670
+ icon: "fa-user-ninja",
671
+ color: "text-gray-700",
672
+ desc: "Silent and deadly killer"
 
673
  }
674
  ];
675
 
676
  const levels = ["S", "A", "B", "C", "D", "E"];
677
+ const levelWeights = [0.08, 0.15, 0.20, 0.25, 0.24, 0.08]; // Increased S and A level probability
678
 
679
  let assignmentsCount = 0;
680
  let levelCounts = { S: 0, A: 0, B: 0, C: 0, D: 0, E: 0 };
681
  let lastAssignedLevel = null;
682
+ let isProcessing = false;
683
 
684
  // DOM elements
685
  const identifyBtn = document.getElementById('identify-btn');
686
+ const jobIcon = document.getElementById('job-icon');
687
  const resultContainer = document.getElementById('result-container');
688
  const jobName = document.getElementById('job-name');
689
  const jobLevel = document.getElementById('job-level');
690
  const lastLevelDisplay = document.getElementById('last-level');
691
  const systemStatus = document.getElementById('system-status');
692
+ const progressContainer = document.getElementById('progress-container');
693
+ const progressBar = document.getElementById('progress-bar');
694
+ const progressPercent = document.getElementById('progress-percent');
695
 
696
  // System timestamp
697
  function updateSystemTimestamp() {
 
705
  setInterval(updateSystemTimestamp, 1000);
706
  updateSystemTimestamp();
707
 
708
+ // Generate random abilities based on level
709
+ function generateAbilities(level) {
710
+ const abilities = {
711
+ life: 0,
712
+ mana: 0,
713
+ strength: 0,
714
+ wisdom: 0,
715
+ agility: 0,
716
+ luck: 0,
717
+ defense: 0
718
+ };
719
 
720
+ // Base values
721
+ const baseValues = {
722
+ life: 50,
723
+ mana: 400,
724
+ strength: 30,
725
+ wisdom: 30,
726
+ agility: 30,
727
+ luck: 30,
728
+ defense: 30
729
+ };
 
 
 
730
 
731
+ // Generate random values within constraints
732
+ for (const ability in abilities) {
733
+ let minValue = baseValues[ability];
734
+ let maxValue = ability === 'mana' ? 1000 : 100;
 
 
 
 
 
 
 
 
 
735
 
736
+ // Adjust for level
737
+ let levelMultiplier = 1;
738
+ switch(level) {
739
+ case 'S': levelMultiplier = 1.4; break;
740
+ case 'A': levelMultiplier = 1.2; break;
741
+ case 'B': levelMultiplier = 1.0; break;
742
+ case 'C': levelMultiplier = 0.8; break;
743
+ case 'D': levelMultiplier = 0.6; break;
744
+ case 'E': levelMultiplier = 0.5; break;
745
  }
746
 
747
+ // Adjust min/max based on level
748
+ minValue *= levelMultiplier;
749
+ maxValue *= levelMultiplier;
 
750
 
751
+ // Calculate random value with some variance
752
+ const value = Math.floor(minValue + (Math.random() ** 2) * (maxValue - minValue));
 
 
753
 
754
+ // Ensure values don't exceed max
755
+ abilities[ability] = Math.min(value, maxValue);
756
+ }
757
+
758
+ // Apply level-specific constraints
759
+ if (level === 'S') {
760
+ // All abilities must be above 50% for S rank
761
+ for (const ability in abilities) {
762
+ const max = ability === 'mana' ? 1000 : 100;
763
+ abilities[ability] = Math.max(abilities[ability], max * 0.5);
764
+ }
765
+ } else if (level === 'A') {
766
+ // At least 4 abilities above 50% for A rank
767
+ let aboveHalfCount = 0;
768
+ const abilitiesToIncrease = [];
769
 
770
+ // Count existing above-half abilities
771
+ for (const ability in abilities) {
772
+ const max = ability === 'mana' ? 1000 : 100;
773
+ if (abilities[ability] > max * 0.5) {
774
+ aboveHalfCount++;
775
+ } else {
776
+ abilitiesToIncrease.push(ability);
777
+ }
778
+ }
779
+
780
+ // Need to boost some abilities
781
+ while (aboveHalfCount < 4 && abilitiesToIncrease.length > 0) {
782
+ const randomIndex = Math.floor(Math.random() * abilitiesToIncrease.length);
783
+ const ability = abilitiesToIncrease.splice(randomIndex, 1)[0];
784
+ const max = ability === 'mana' ? 1000 : 100;
785
+ abilities[ability] = max * 0.5 + Math.random() * max * 0.3;
786
+ aboveHalfCount++;
787
+ }
788
+ }
789
+
790
+ return abilities;
791
+ }
792
+
793
+ // Reset system for new identification
794
+ function resetSystem() {
795
+ resultContainer.classList.add('hidden');
796
+ jobIcon.className = "fas fa-question job-icon";
797
+ jobIcon.classList.remove(...jobCategories.map(job => job.color));
798
+ systemStatus.textContent = "READY";
799
+ systemStatus.className = "text-sm font-mono text-green-400";
800
+
801
+ // Reset all ability bars
802
+ document.querySelectorAll('.stat-fill').forEach(el => {
803
+ el.style.width = '0%';
804
+ });
805
+
806
+ document.querySelectorAll('.font-mono').forEach(el => {
807
+ if (el.id !== 'system-timestamp') {
808
+ el.textContent = '0' + el.textContent.substring(el.textContent.indexOf('/'));
809
+ }
810
+ });
811
+
812
+ lastLevelDisplay.textContent = '---';
813
+ lastLevelDisplay.className = 'text-3xl font-bold';
814
+ }
815
+
816
+ // Identification function
817
+ function identifyClass() {
818
+ if (isProcessing) return;
819
+ isProcessing = true;
820
+
821
+ // Show processing bar
822
+ progressContainer.classList.remove('hidden');
823
+ progressBar.style.width = '0%';
824
+ progressPercent.textContent = '0%';
825
+
826
+ // Animate progress bar
827
+ const processTime = 1500 + Math.random() * 1000; // Random processing time between 1.5-2.5 seconds
828
+ const startTime = Date.now();
829
+
830
+ const updateProgress = () => {
831
+ const elapsed = Date.now() - startTime;
832
+ const progress = Math.min(elapsed / processTime * 100, 100);
833
+ progressBar.style.width = `${progress}%`;
834
+ progressPercent.textContent = `${Math.floor(progress)}%`;
835
+
836
+ if (progress < 100) {
837
+ requestAnimationFrame(updateProgress);
838
+ } else {
839
+ // Only show result when progress is 100%
840
+ setTimeout(() => {
841
+ // Hide progress bar when done
842
+ progressContainer.classList.add('hidden');
843
+
844
+ // Select random job
845
+ const randomJobIndex = Math.floor(Math.random() * jobCategories.length);
846
+ const selectedJob = jobCategories[randomJobIndex];
847
+
848
+ // Select level based on weights
849
+ const randomLevelValue = Math.random();
850
+ let cumulativeWeight = 0;
851
+ let assignedLevel = "E";
852
+
853
+ for (let i = 0; i < levels.length; i++) {
854
+ cumulativeWeight += levelWeights[i];
855
+ if (randomLevelValue <= cumulativeWeight) {
856
+ assignedLevel = levels[i];
857
+ break;
858
+ }
859
+ }
860
+
861
+ // Generate random abilities for this job and level
862
+ const abilities = generateAbilities(assignedLevel);
863
+
864
+ // Update counts
865
+ assignmentsCount++;
866
+ levelCounts[assignedLevel]++;
867
+ lastAssignedLevel = assignedLevel;
868
+
869
+ // Update UI with the new assignment
870
+ updateResultDisplay(selectedJob, assignedLevel);
871
+ updateStats();
872
+ updateAbilityDisplay(abilities);
873
+
874
+ isProcessing = false;
875
+
876
+ // Set system back to ready
877
+ systemStatus.textContent = "READY";
878
+ systemStatus.className = "text-sm font-mono text-green-400";
879
+ }, 100);
880
+ }
881
+ };
882
+
883
+ updateProgress();
884
+
885
+ // Hide question mark during processing
886
+ jobIcon.className = "fas fa-spinner fa-spin job-icon";
887
+ jobIcon.classList.remove(...jobCategories.map(job => job.color));
888
+
889
+ // Set system to processing
890
+ systemStatus.textContent = "PROCESSING";
891
+ systemStatus.className = "text-sm font-mono text-yellow-400";
892
+ }
893
+
894
+ // Event listeners
895
+ identifyBtn.addEventListener('click', function() {
896
+ if (resultContainer.classList.contains('hidden')) {
897
+ // First identification
898
+ identifyClass();
899
+ } else {
900
+ // Re-identification
901
+ resetSystem();
902
+ setTimeout(identifyClass, 500);
903
+ }
904
  });
905
 
906
  // Update the result display
907
  function updateResultDisplay(job, level) {
908
+ // Update job icon (large symbol without background)
909
+ jobIcon.className = `fas ${job.icon} job-icon ${job.color}`;
910
+ jobIcon.classList.remove('fa-spinner', 'fa-spin', 'fa-question');
 
 
911
 
912
+ // Update job name and level display with more spacing
913
+ jobName.innerHTML = `${job.name}<span class="chinese-label">${job.chinese}</span>`;
914
  jobName.className = `result-title level-${level} pulse-animation`;
915
  jobLevel.textContent = `${level} GRADE`;
916
  jobLevel.className = `result-subtitle level-${level}`;
 
929
 
930
  // Update ability display
931
  function updateAbilityDisplay(abilities) {
932
+ // Update mana (now with 1000 max)
933
+ document.getElementById('mana-bar').style.width = `${(abilities.mana / 1000) * 100}%`;
934
+ document.getElementById('mana-value').textContent = `${abilities.mana.toFixed(0)}/1000`;
935
+
936
+ // Update life
937
+ document.getElementById('life-bar').style.width = `${abilities.life}%`;
938
+ document.getElementById('life-value').textContent = `${abilities.life.toFixed(0)}/100`;
939
 
940
  // Update strength
941
  document.getElementById('strength-bar').style.width = `${abilities.strength}%`;
942
+ document.getElementById('strength-value').textContent = `${abilities.strength.toFixed(0)}/100`;
943
 
944
  // Update wisdom
945
  document.getElementById('wisdom-bar').style.width = `${abilities.wisdom}%`;
946
+ document.getElementById('wisdom-value').textContent = `${abilities.wisdom.toFixed(0)}/100`;
947
 
948
  // Update agility
949
  document.getElementById('agility-bar').style.width = `${abilities.agility}%`;
950
+ document.getElementById('agility-value').textContent = `${abilities.agility.toFixed(0)}/100`;
951
 
952
  // Update luck
953
  document.getElementById('luck-bar').style.width = `${abilities.luck}%`;
954
+ document.getElementById('luck-value').textContent = `${abilities.luck.toFixed(0)}/100`;
955
 
956
  // Update defense
957
  document.getElementById('defense-bar').style.width = `${abilities.defense}%`;
958
+ document.getElementById('defense-value').textContent = `${abilities.defense.toFixed(0)}/100`;
959
  }
960
  </script>
961
  <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>