Hugging Face's logo

Spaces:
zonana
/
leveling
Running

App Files Community
leveling / index.html
zonana's picture
zonana
Add 1 files
6c2f05c verified
Raw
History Blame Contribute Delete
38.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Professional Identification System</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
body {
 font-family: 'Rajdhani', sans-serif;
 background-color: #06060f;
 color: #e0e0e0;
 overflow-x: hidden;
 background-image:
radial-gradient(circle at 10% 20%, rgba(0, 60, 90, 0.05) 0%, transparent 20%),
 radial-gradient(circle at 90% 80%, rgba(60, 0, 90, 0.05) 0%, transparent 20%),
 linear-gradient(to bottom, #05050a 0%, #040408 100%);
 }
.metal-texture {
 background:
linear-gradient(135deg, #121222 25%, transparent 25%) -10px 0,
 linear-gradient(225deg, #121222 25%, transparent 25%) -10px 0,
 linear-gradient(315deg, #121222 25%, transparent 25%),
 linear-gradient(45deg, #121222 25%, transparent 25%);
 background-size: 20px 20px;
 border: 1px solid rgba(0, 130, 180, 0.15);
 box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0.8),
 0 0 40px rgba(0, 60, 90, 0.2);
 }
.flame-effect {
 position: relative;
 overflow: hidden;
 }
.flame-effect::before {
 content: '';
 position: absolute;
 top: -10px;
 left: -10px;
 right: -10px;
 bottom: -10px;
 background: linear-gradient(45deg, #000000, #100010, #000000);
 border-radius: inherit;
 z-index: -1;
 filter: blur(8px);
 opacity: 0.9;
 }
.flame-effect::after {
 content: '';
 position: absolute;
 top: -20px;
 left: -20px;
 right: -20px;
 bottom: -20px;
 background:
radial-gradient(ellipse at 20% 20%, #300000 0%, transparent 50%),
 radial-gradient(ellipse at 80% 80%, #200040 0%, transparent 50%),
 radial-gradient(ellipse at center, #000000 60%, #100010 100%);
 border-radius: inherit;
 z-index: -2;
 filter: blur(20px);
 opacity: 0.6;
 animation: flame-pulse 4s infinite alternate;
 }
@keyframes flame-pulse {
 0% { opacity: 0.4; }
 100% { opacity: 0.7; }
 }
.hud-panel {
 background: rgba(8, 10, 20, 0.9);
 border: 1px solid rgba(0, 90, 130, 0.2);
 box-shadow:
inset 0 0 40px rgba(0, 20, 40, 0.4),
 0 5px 25px rgba(0, 0, 0, 0.8);
 backdrop-filter: blur(10px);
 position: relative;
 overflow: hidden;
 }
.hud-panel::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent, rgba(0, 130, 180, 0.6), transparent);
 }
.hud-panel::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(0, 70, 100, 0.4), transparent);
 }
.corner-decoration {
 position: absolute;
 width: 15px;
 height: 15px;
 border-color: rgba(0, 160, 200, 0.5);
 }
.corner-decoration.tl {
 top: 0;
 left: 0;
 border-top: 2px solid;
 border-left: 2px solid;
 }
.corner-decoration.tr {
 top: 0;
 right: 0;
 border-top: 2px solid;
 border-right: 2px solid;
 }
.corner-decoration.bl {
 bottom: 0;
 left: 0;
 border-bottom: 2px solid;
 border-left: 2px solid;
 }
.corner-decoration.br {
 bottom: 0;
 right: 0;
 border-bottom: 2px solid;
 border-right: 2px solid;
 }
.data-line {
 background: linear-gradient(90deg, rgba(0, 70, 100, 0.15), transparent);
 border-left: 3px solid rgba(0, 110, 160, 0.5);
 }
.level-S { color: #60c8f2; text-shadow: 0 0 20px rgba(96, 200, 242, 0.8); }
 .level-A { color: #80c8f0; text-shadow: 0 0 15px rgba(128, 200, 240, 0.7); }
 .level-B { color: #90b0d0; text-shadow: 0 0 12px rgba(144, 176, 208, 0.6); }
 .level-C { color: #a0a0c0; text-shadow: 0 0 10px rgba(160, 160, 192, 0.5); }
 .level-D { color: #b080a0; text-shadow: 0 0 8px rgba(176, 128, 160, 0.4); }
 .level-E { color: #c06080; text-shadow: 0 0 6px rgba(192, 96, 128, 0.3); }
.pulse-animation {
 animation: pulse 2s infinite ease-in-out;
 }
@keyframes pulse {
 0% { opacity: 0.8; transform: scale(0.98); }
 50% { opacity: 1; transform: scale(1.02); }
 100% { opacity: 0.8; transform: scale(0.98); }
 }
.connection-dots {
 background-image: radial-gradient(circle, rgba(0, 130, 180, 0.5) 2px, transparent 2px);
 background-size: 10px 10px;
 }
.circular-btn {
 width: 140px;
 height: 140px;
 border-radius: 50%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: relative;
 transition: all 0.3s ease;
 perspective: 1000px;
 transform-style: preserve-3d;
 cursor: pointer;
 margin: 0 auto;
 background-image: url('https://images.unsplash.com/photo-1519683109079-d5f539e1542f?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60');
 background-size: cover;
 background-position: center;
 overflow: hidden;
 border: 3px solid rgba(0, 160, 200, 0.6);
 box-shadow: 0 0 25px rgba(0, 110, 160, 0.6);
 }
.circular-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg, rgba(0, 110, 160, 0.4), rgba(0, 70, 100, 0.6));
 border-radius: 50%;
 z-index: 1;
 }
.circular-btn:hover::before {
 background: linear-gradient(135deg, rgba(0, 130, 180, 0.5), rgba(0, 90, 130, 0.7));
 }
.circular-btn:active {
 transform: translateY(2px) scale(0.98);
 }
.circular-btn-content {
 position: relative;
 z-index: 2;
 text-align: center;
 }
.status-light {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #ff5555;
 box-shadow: 0 0 10px #ff5555;
 animation: status-pulse 1.5s infinite;
 }
.status-light.ready {
 background-color: #55ff55;
 box-shadow: 0 0 10px #55ff55;
 animation: none;
 }
@keyframes status-pulse {
 0% { opacity: 0.3; }
 50% { opacity: 1; }
 100% { opacity: 0.3; }
 }
.hexagon-badge {
 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 width: 40px;
 height: 45px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.job-icon-container {
 position: relative;
 width: 180px;
 height: 180px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 2rem;
 overflow: visible;
 }
.result-display {
 text-align: center;
 margin: 2rem 0;
 }
.result-title {
 font-size: 3rem;
 font-weight: bold;
 margin-bottom: 0.5rem;
 letter-spacing: 0.05em;
 line-height: 1.5;
 }
.result-subtitle {
 font-size: 1.5rem;
 opacity: 0.8;
 margin-top: 0.5rem;
 line-height: 1.2;
 }
.chinese-label {
 font-size: 1rem;
 font-weight: normal;
 display: block;
 margin-top: -1.4rem; /* Increased spacing */
 opacity: 0.7;
 letter-spacing: 0;
 line-height: 1.8; /* Increased line height */
 }
.stat-container {
 width: 100%;
 margin-bottom: 12px;
 }
.stat-label {
 display: flex;
 justify-content: space-between;
 margin-bottom: 4px;
 font-size: 0.9rem;
 }
.stat-label i {
 margin-right: 8px;
 width: 16px;
 text-align: center;
 }
.stat-bar {
 height: 8px;
 background-color: #151525;
 border-radius: 4px;
 overflow: hidden;
 }
.stat-fill {
 height: 100%;
 border-radius: 4px;
 transition: width 0.5s ease;
 }
.mana-fill {
 background: linear-gradient(90deg, #2068b0, #5a4acd);
 }
.strength-fill {
 background: linear-gradient(90deg, #d43c2c, #e38c02);
 }
.wisdom-fill {
 background: linear-gradient(90deg, #1ebb61, #2088db);
 }
.agility-fill {
 background: linear-gradient(90deg, #e1b40f, #1ebb61);
 }
.luck-fill {
 background: linear-gradient(90deg, #8b49b6, #d43c2c);
 }
.defense-fill {
 background: linear-gradient(90deg, #24496e, #6f7c8d);
 }
.life-fill {
 background: linear-gradient(90deg, #ff5b5b, #d43c2c);
 }
.reset-btn {
 transition: all 0.3s ease;
 transform: translateY(10px);
 opacity: 0;
 pointer-events: none;
 }
.reset-btn.visible {
 transform: translateY(0);
 opacity: 1;
 }
.progress-container {
 width: 100%;
 height: 5px;
 background-color: rgba(0, 70, 100, 0.3);
 border-radius: 3px;
 overflow: hidden;
 margin-top: 1rem;
 position: relative;
 }
.progress-bar {
 height: 100%;
 width: 0%;
 background: linear-gradient(90deg, #0055aa, #00aaff);
 border-radius: 3px;
 transition: width 0.1s linear;
 }
.progress-percent {
 position: absolute;
 right: 0;
 top: -20px;
 font-size: 0.8rem;
 color: #00aaff;
 font-family: monospace;
 }
.version-text {
 display: inline-block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 max-width: 200px;
 }
.job-icon {
 font-size: 10rem;
 color: white;
 text-shadow: 0 0 30px rgba(255,255,255,0.5);
 }
 </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
 <!-- Main System Container -->
 <div class="w-full max-w-3xl hud-panel metal-texture flame-effect rounded-lg p-6 relative overflow-hidden">
 <!-- Corner decorations -->
 <div class="corner-decoration tl"></div>
 <div class="corner-decoration tr"></div>
 <div class="corner-decoration bl"></div>
 <div class="corner-decoration br"></div>
<!-- Connection dots along the edges -->
 <div class="absolute top-0 left-0 right-0 h-1 connection-dots"></div>
 <div class="absolute bottom-0 left-0 right-0 h-1 connection-dots"></div>
<!-- System Header -->
 <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-800">
 <div class="flex items-center">
 <div class="hexagon-badge bg-gradient-to-b from-blue-800 to-blue-900 mr-4">
 <i class="fas fa-user-shield text-white text-lg"></i>
 </div>
 <div>
 <h1 class="text-2xl font-bold text-white tracking-wider">PROFESSIONAL IDENTIFICATION SYSTEM</h1>
 <p class="text-sm text-blue-400 font-mono version-text">CLASS IDENTIFICATION PROTOCOL v4.2.2</p>
 </div>
 </div>
 <div class="flex items-center">
 <div class="status-light ready mr-2"></div>
 <span id="system-status" class="text-sm font-mono text-green-400">READY</span>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex flex-col items-center">
 <!-- Identification Panel -->
 <div id="identification-panel" class="w-full">
 <div class="flex flex-col items-center">
 <div class="job-icon-container">
 <i id="job-icon" class="fas fa-question job-icon"></i>
 </div>
<div id="result-container" class="result-display hidden">
 <div id="job-name" class="result-title level-E">UNKNOWN<span class="chinese-label">未知</span></div>
 <div id="job-level" class="result-subtitle level-E">---</div>
 </div>
<div class="hud-panel rounded-lg p-6 my-4 w-full">
 <p class="text-center text-gray-300 mb-4">
 Place your hand on the magic circle to initiate identification.
Your class and abilities will be revealed by the system.
 </p>
<div id="identify-btn" class="circular-btn">
 <div class="circular-btn-content">
 <i class="fas fa-hand-sparkles text-3xl mb-1 text-white"></i>
 <span class="text-xs text-white uppercase tracking-wider">IDENTIFY</span>
 </div>
 </div>
<!-- Progress bar for identification process -->
 <div id="progress-container" class="progress-container hidden">
 <div id="progress-percent" class="progress-percent">0%</div>
 <div id="progress-bar" class="progress-bar"></div>
 </div>
<div id="reset-btn" class="reset-btn mt-4 text-center">
 <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">
 <i class="fas fa-redo mr-2"></i>IDENTIFY AGAIN
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Stats Panel -->
 <div class="w-full hud-panel rounded-lg p-6 mb-4">
 <div class="grid grid-cols-1 gap-4">
 <div class="data-line p-3 rounded">
 <div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">YOUR GRADE</div>
 <div id="last-level" class="text-3xl font-bold">---</div>
 </div>
 </div>
 </div>
<!-- Mana Block -->
 <div class="w-full hud-panel rounded-lg p-6 mb-4">
 <h3 class="text-lg font-bold text-center mb-4 tracking-wider">ARCANE ENERGY</h3>
 <div class="stat-container">
 <div class="stat-label">
 <span><i class="fas fa-bolt"></i>MANA <span id="mana-value" class="font-mono">0/1000</span></span>
 </div>
 <div class="stat-bar">
 <div id="mana-bar" class="stat-fill mana-fill" style="width: 0%"></div>
 </div>
 </div>
 </div>
<!-- Ability Distribution -->
 <div class="w-full hud-panel rounded-lg p-6">
 <h3 class="text-lg font-bold text-center mb-4 tracking-wider">ABILITY VALUE DISTRIBUTION</h3>
 <div class="space-y-4">
 <div class="stat-container">
 <div class="stat-label">
 <span><i class="fas fa-heart"></i>LIFE <span id="life-value" class="font-mono">0/100</span></span>
 </div>
 <div class="stat-bar">
 <div id="life-bar" class="stat-fill life-fill" style="width: 0%"></div>
 </div>
 </div>
<div class="stat-container">
 <div class="stat-label">
 <span><i class="fas fa-fist-raised"></i>STRENGTH <span id="strength-value" class="font-mono">0/100</span></span>
 </div>
 <div class="stat-bar">
 <div id="strength-bar" class="stat-fill strength-fill" style="width: 0%"></div>
 </div>
 </div>
<div class="stat-container">
 <div class="stat-label">
 <span><i class="fas fa-brain"></i>WISDOM <span id="wisdom-value" class="font-mono">0/100</span></span>
 </div>
 <div class="stat-bar">
 <div id="wisdom-bar" class="stat-fill wisdom-fill" style="width: 0%"></div>
 </div>
 </div>
<div class="stat-container">
 <div class="stat-label">
 <span><i class="fas fa-running"></i>AGILITY <span id="agility-value" class="font-mono">0/100</span></span>
 </div>
 <div class="stat-bar">
 <div id="agility-bar" class="stat-fill agility-fill" style="width: 0%"></div>
 </div>
 </div>
<div class="stat-container">
 <div class="stat-label">
 <span><i class="fas fa-clover"></i>LUCK <span id="luck-value" class="font-mono">0/100</span></span>
 </div>
 <div class="stat-bar">
 <div id="luck-bar" class="stat-fill luck-fill" style="width: 0%"></div>
 </div>
 </div>
<div class="stat-container">
 <div class="stat-label">
 <span><i class="fas fa-shield-alt"></i>DEFENSE <span id="defense-value" class="font-mono">0/100</span></span>
 </div>
 <div class="stat-bar">
 <div id="defense-bar" class="stat-fill defense-fill" style="width: 0%"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- System Footer -->
 <div class="mt-8 pt-4 border-t border-gray-800 text-xs text-gray-500 text-center font-mono">
 <p>NEXUS CORP SECURE SYSTEM | ENCRYPTION: QUANTUM-256</p>
 <p class="mt-1" id="system-timestamp">LOADING TIMESTAMP...</p>
 </div>
 </div>
<script>
 // Expanded job data with ability distributions and Chinese labels
 const jobCategories = [
 {
name: "Fire Mage",
chinese: "火焰法师",
 icon: "fa-fire",
color: "text-red-500",
 desc: "Master of destructive fire magic"
 },
 {
name: "Ice Mage",
chinese: "冰霜法师",
 icon: "fa-snowflake",
color: "text-cyan-400",
 desc: "Controller of freezing ice magic"
 },
 {
name: "Lightning Mage",
chinese: "雷电法师",
 icon: "fa-bolt",
color: "text-yellow-400",
 desc: "Wielder of shocking lightning magic"
 },
 {
name: "Necromancer",
chinese: "死灵法师",
 icon: "fa-skull",
color: "text-gray-500",
 desc: "Commander of the undead legions"
 },
 {
name: "Summoner",
chinese: "召唤师",
 icon: "fa-ghost",
color: "text-purple-500",
 desc: "Summoner of powerful entities"
 },
 {
name: "Healer",
chinese: "治疗师",
 icon: "fa-hand-holding-medical",
color: "text-green-400",
 desc: "Restorer of life and vitality"
 },
 {
name: "Tank",
chinese: "坦克",
 icon: "fa-shield-virus",
color: "text-gray-400",
 desc: "Immovable defensive specialist"
 },
 {
name: "Knight",
chinese: "骑士",
 icon: "fa-helmet-battle",
color: "text-blue-400",
 desc: "Honorable melee combatant"
 },
 {
name: "Orc Warrior",
chinese: "兽人战士",
 icon: "fa-tusks",
color: "text-green-600",
 desc: "Brutal strength-focused fighter"
 },
 {
name: "Fighter",
chinese: "格斗家",
 icon: "fa-hand-fist",
color: "text-red-600",
 desc: "Versatile melee combatant"
 },
 {
name: "Sorcerer",
chinese: "术士",
 icon: "fa-hat-wizard",
color: "text-purple-600",
 desc: "Master of arcane energies"
 },
 {
name: "Swordsman",
chinese: "剑客",
 icon: "fa-sword",
color: "text-blue-300",
 desc: "Skilled blade master"
 },
 {
name: "Mechanic",
chinese: "机械师",
 icon: "fa-robot",
color: "text-yellow-500",
 desc: "Master of machines and gadgets"
 },
 {
name: "Archer",
chinese: "弓箭手",
 icon: "fa-bow-arrow",
color: "text-green-300",
 desc: "Precision ranged attacker"
 },
 {
name: "Assassin",
chinese: "刺客",
 icon: "fa-user-ninja",
color: "text-gray-700",
 desc: "Silent and deadly killer"
 }
 ];
const levels = ["S", "A", "B", "C", "D", "E"];
 const levelWeights = [0.08, 0.15, 0.20, 0.25, 0.24, 0.08]; // Increased S and A level probability
let assignmentsCount = 0;
 let levelCounts = { S: 0, A: 0, B: 0, C: 0, D: 0, E: 0 };
 let lastAssignedLevel = null;
 let isProcessing = false;
// DOM elements
 const identifyBtn = document.getElementById('identify-btn');
 const jobIcon = document.getElementById('job-icon');
 const resultContainer = document.getElementById('result-container');
 const jobName = document.getElementById('job-name');
 const jobLevel = document.getElementById('job-level');
 const lastLevelDisplay = document.getElementById('last-level');
 const systemStatus = document.getElementById('system-status');
 const progressContainer = document.getElementById('progress-container');
 const progressBar = document.getElementById('progress-bar');
 const progressPercent = document.getElementById('progress-percent');
// System timestamp
 function updateSystemTimestamp() {
 const now = new Date();
 const dateStr = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
 const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
document.getElementById('system-timestamp').textContent = `SYSTEM TIME: ${dateStr} ${timeStr}`;
 }
setInterval(updateSystemTimestamp, 1000);
 updateSystemTimestamp();
// Generate random abilities based on level
 function generateAbilities(level) {
 const abilities = {
 life: 0,
 mana: 0,
 strength: 0,
 wisdom: 0,
 agility: 0,
 luck: 0,
 defense: 0
 };
// Base values
 const baseValues = {
 life: 50,
 mana: 400,
 strength: 30,
 wisdom: 30,
 agility: 30,
 luck: 30,
 defense: 30
 };
// Generate random values within constraints
 for (const ability in abilities) {
 let minValue = baseValues[ability];
 let maxValue = ability === 'mana' ? 1000 : 100;
// Adjust for level
 let levelMultiplier = 1;
 switch(level) {
 case 'S': levelMultiplier = 1.4; break;
 case 'A': levelMultiplier = 1.2; break;
 case 'B': levelMultiplier = 1.0; break;
 case 'C': levelMultiplier = 0.8; break;
 case 'D': levelMultiplier = 0.6; break;
 case 'E': levelMultiplier = 0.5; break;
 }
// Adjust min/max based on level
 minValue *= levelMultiplier;
 maxValue *= levelMultiplier;
// Calculate random value with some variance
 const value = Math.floor(minValue + (Math.random() ** 2) * (maxValue - minValue));
// Ensure values don't exceed max
 abilities[ability] = Math.min(value, maxValue);
 }
// Apply level-specific constraints
 if (level === 'S') {
 // All abilities must be above 50% for S rank
 for (const ability in abilities) {
 const max = ability === 'mana' ? 1000 : 100;
 abilities[ability] = Math.max(abilities[ability], max * 0.5);
 }
 } else if (level === 'A') {
 // At least 4 abilities above 50% for A rank
 let aboveHalfCount = 0;
 const abilitiesToIncrease = [];
// Count existing above-half abilities
 for (const ability in abilities) {
 const max = ability === 'mana' ? 1000 : 100;
 if (abilities[ability] > max * 0.5) {
 aboveHalfCount++;
 } else {
 abilitiesToIncrease.push(ability);
 }
 }
// Need to boost some abilities
 while (aboveHalfCount < 4 && abilitiesToIncrease.length > 0) {
 const randomIndex = Math.floor(Math.random() * abilitiesToIncrease.length);
 const ability = abilitiesToIncrease.splice(randomIndex, 1)[0];
 const max = ability === 'mana' ? 1000 : 100;
 abilities[ability] = max * 0.5 + Math.random() * max * 0.3;
 aboveHalfCount++;
 }
 }
return abilities;
 }
// Reset system for new identification
 function resetSystem() {
 resultContainer.classList.add('hidden');
 jobIcon.className = "fas fa-question job-icon";
 jobIcon.classList.remove(...jobCategories.map(job => job.color));
 systemStatus.textContent = "READY";
 systemStatus.className = "text-sm font-mono text-green-400";
// Reset all ability bars
 document.querySelectorAll('.stat-fill').forEach(el => {
 el.style.width = '0%';
 });
document.querySelectorAll('.font-mono').forEach(el => {
 if (el.id !== 'system-timestamp') {
 el.textContent = '0' + el.textContent.substring(el.textContent.indexOf('/'));
 }
 });
lastLevelDisplay.textContent = '---';
 lastLevelDisplay.className = 'text-3xl font-bold';
 }
// Identification function
 function identifyClass() {
 if (isProcessing) return;
 isProcessing = true;
// Show processing bar
 progressContainer.classList.remove('hidden');
 progressBar.style.width = '0%';
 progressPercent.textContent = '0%';
// Animate progress bar
 const processTime = 1500 + Math.random() * 1000; // Random processing time between 1.5-2.5 seconds
 const startTime = Date.now();
const updateProgress = () => {
 const elapsed = Date.now() - startTime;
 const progress = Math.min(elapsed / processTime * 100, 100);
 progressBar.style.width = `${progress}%`;
 progressPercent.textContent = `${Math.floor(progress)}%`;
if (progress < 100) {
 requestAnimationFrame(updateProgress);
 } else {
 // Only show result when progress is 100%
 setTimeout(() => {
 // Hide progress bar when done
 progressContainer.classList.add('hidden');
// Select random job
 const randomJobIndex = Math.floor(Math.random() * jobCategories.length);
 const selectedJob = jobCategories[randomJobIndex];
// Select level based on weights
 const randomLevelValue = Math.random();
 let cumulativeWeight = 0;
 let assignedLevel = "E";
for (let i = 0; i < levels.length; i++) {
 cumulativeWeight += levelWeights[i];
 if (randomLevelValue <= cumulativeWeight) {
 assignedLevel = levels[i];
 break;
 }
 }
// Generate random abilities for this job and level
 const abilities = generateAbilities(assignedLevel);
// Update counts
 assignmentsCount++;
 levelCounts[assignedLevel]++;
 lastAssignedLevel = assignedLevel;
// Update UI with the new assignment
 updateResultDisplay(selectedJob, assignedLevel);
 updateStats();
 updateAbilityDisplay(abilities);
isProcessing = false;
// Set system back to ready
 systemStatus.textContent = "READY";
 systemStatus.className = "text-sm font-mono text-green-400";
 }, 100);
 }
 };
updateProgress();
// Hide question mark during processing
 jobIcon.className = "fas fa-spinner fa-spin job-icon";
 jobIcon.classList.remove(...jobCategories.map(job => job.color));
// Set system to processing
 systemStatus.textContent = "PROCESSING";
 systemStatus.className = "text-sm font-mono text-yellow-400";
 }
// Event listeners
 identifyBtn.addEventListener('click', function() {
 if (resultContainer.classList.contains('hidden')) {
 // First identification
 identifyClass();
 } else {
 // Re-identification
 resetSystem();
 setTimeout(identifyClass, 500);
 }
 });
// Update the result display
 function updateResultDisplay(job, level) {
 // Update job icon (large symbol without background)
 jobIcon.className = `fas ${job.icon} job-icon ${job.color}`;
 jobIcon.classList.remove('fa-spinner', 'fa-spin', 'fa-question');
// Update job name and level display with more spacing
 jobName.innerHTML = `${job.name}<span class="chinese-label">${job.chinese}</span>`;
 jobName.className = `result-title level-${level} pulse-animation`;
 jobLevel.textContent = `${level} GRADE`;
 jobLevel.className = `result-subtitle level-${level}`;
// Show result container
 resultContainer.classList.remove('hidden');
 }
// Update stats display
 function updateStats() {
 if (lastAssignedLevel) {
 lastLevelDisplay.textContent = lastAssignedLevel;
 lastLevelDisplay.className = `text-3xl font-bold level-${lastAssignedLevel}`;
 }
 }
// Update ability display
 function updateAbilityDisplay(abilities) {
 // Update mana (now with 1000 max)
 document.getElementById('mana-bar').style.width = `${(abilities.mana / 1000) * 100}%`;
 document.getElementById('mana-value').textContent = `${abilities.mana.toFixed(0)}/1000`;
// Update life
 document.getElementById('life-bar').style.width = `${abilities.life}%`;
 document.getElementById('life-value').textContent = `${abilities.life.toFixed(0)}/100`;
// Update strength
 document.getElementById('strength-bar').style.width = `${abilities.strength}%`;
 document.getElementById('strength-value').textContent = `${abilities.strength.toFixed(0)}/100`;
// Update wisdom
 document.getElementById('wisdom-bar').style.width = `${abilities.wisdom}%`;
 document.getElementById('wisdom-value').textContent = `${abilities.wisdom.toFixed(0)}/100`;
// Update agility
 document.getElementById('agility-bar').style.width = `${abilities.agility}%`;
 document.getElementById('agility-value').textContent = `${abilities.agility.toFixed(0)}/100`;
// Update luck
 document.getElementById('luck-bar').style.width = `${abilities.luck}%`;
 document.getElementById('luck-value').textContent = `${abilities.luck.toFixed(0)}/100`;
// Update defense
 document.getElementById('defense-bar').style.width = `${abilities.defense}%`;
 document.getElementById('defense-value').textContent = `${abilities.defense.toFixed(0)}/100`;
 }
 </script>
<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>
</html>