Add 1 files
Browse files- index.html +219 -81
index.html
CHANGED
|
@@ -126,31 +126,42 @@
|
|
| 126 |
background-size: 10px 10px;
|
| 127 |
}
|
| 128 |
|
| 129 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 130 |
transition: all 0.3s ease;
|
| 131 |
perspective: 1000px;
|
| 132 |
transform-style: preserve-3d;
|
|
|
|
|
|
|
| 133 |
}
|
| 134 |
|
| 135 |
-
|
| 136 |
content: '';
|
| 137 |
position: absolute;
|
| 138 |
-
top: -
|
| 139 |
-
left: -
|
| 140 |
-
right: -
|
| 141 |
-
bottom: -
|
| 142 |
background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffaa);
|
|
|
|
| 143 |
z-index: -1;
|
| 144 |
-
filter: blur(
|
| 145 |
opacity: 0;
|
| 146 |
transition: opacity 0.3s ease;
|
| 147 |
}
|
| 148 |
|
| 149 |
-
|
| 150 |
opacity: 0.7;
|
| 151 |
}
|
| 152 |
|
| 153 |
-
|
| 154 |
transform: translateY(2px) scale(0.98);
|
| 155 |
}
|
| 156 |
|
|
@@ -243,6 +254,55 @@
|
|
| 243 |
opacity: 0.8;
|
| 244 |
margin-top: -0.5rem;
|
| 245 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 246 |
</style>
|
| 247 |
</head>
|
| 248 |
<body class="min-h-screen flex flex-col items-center justify-center p-4">
|
|
@@ -291,17 +351,13 @@
|
|
| 291 |
|
| 292 |
<div class="hud-panel rounded-lg p-6 my-4 w-full">
|
| 293 |
<p class="text-center text-gray-300 mb-4">
|
| 294 |
-
Place your hand on the circle to initiate
|
| 295 |
-
Your class and
|
| 296 |
</p>
|
| 297 |
|
| 298 |
-
<div class="
|
| 299 |
-
<
|
| 300 |
-
|
| 301 |
-
<i class="fas fa-hand-sparkles mr-3 text-xl"></i>
|
| 302 |
-
<span>INITIATE MAGIC IDENTIFICATION</span>
|
| 303 |
-
</div>
|
| 304 |
-
</button>
|
| 305 |
</div>
|
| 306 |
</div>
|
| 307 |
</div>
|
|
@@ -309,11 +365,7 @@
|
|
| 309 |
|
| 310 |
<!-- Stats Panel -->
|
| 311 |
<div class="w-full hud-panel rounded-lg p-6 mb-8">
|
| 312 |
-
<div class="grid grid-cols-
|
| 313 |
-
<div class="data-line p-3 rounded">
|
| 314 |
-
<div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">IDENTIFICATIONS</div>
|
| 315 |
-
<div id="total-assignments" class="text-3xl font-bold">0</div>
|
| 316 |
-
</div>
|
| 317 |
<div class="data-line p-3 rounded">
|
| 318 |
<div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">LAST LEVEL</div>
|
| 319 |
<div id="last-level" class="text-3xl font-bold">---</div>
|
|
@@ -321,51 +373,62 @@
|
|
| 321 |
</div>
|
| 322 |
</div>
|
| 323 |
|
| 324 |
-
<!--
|
| 325 |
<div class="w-full hud-panel rounded-lg p-6">
|
| 326 |
-
<h3 class="text-lg font-bold text-center mb-4 tracking-wider">
|
| 327 |
<div class="space-y-4">
|
| 328 |
-
<div class="
|
| 329 |
-
<div class="
|
| 330 |
-
|
| 331 |
-
|
|
|
|
|
|
|
| 332 |
</div>
|
| 333 |
-
<div id="s-level-count" class="w-8 text-right font-mono">0%</div>
|
| 334 |
</div>
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
<div class="
|
| 338 |
-
<
|
|
|
|
|
|
|
|
|
|
| 339 |
</div>
|
| 340 |
-
<div id="a-level-count" class="w-8 text-right font-mono">0%</div>
|
| 341 |
</div>
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
<div class="
|
| 345 |
-
<
|
|
|
|
|
|
|
|
|
|
| 346 |
</div>
|
| 347 |
-
<div id="b-level-count" class="w-8 text-right font-mono">0%</div>
|
| 348 |
</div>
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
<div class="
|
| 352 |
-
<
|
|
|
|
|
|
|
|
|
|
| 353 |
</div>
|
| 354 |
-
<div id="c-level-count" class="w-8 text-right font-mono">0%</div>
|
| 355 |
</div>
|
| 356 |
-
|
| 357 |
-
|
| 358 |
-
<div class="
|
| 359 |
-
<
|
|
|
|
|
|
|
|
|
|
| 360 |
</div>
|
| 361 |
-
<div id="d-level-count" class="w-8 text-right font-mono">0%</div>
|
| 362 |
</div>
|
| 363 |
-
|
| 364 |
-
|
| 365 |
-
<div class="
|
| 366 |
-
<
|
|
|
|
|
|
|
|
|
|
| 367 |
</div>
|
| 368 |
-
<div id="e-level-count" class="w-8 text-right font-mono">0%</div>
|
| 369 |
</div>
|
| 370 |
</div>
|
| 371 |
</div>
|
|
@@ -379,55 +442,119 @@
|
|
| 379 |
</div>
|
| 380 |
|
| 381 |
<script>
|
| 382 |
-
// Job data with
|
| 383 |
const jobCategories = [
|
| 384 |
{
|
| 385 |
name: "Shadow Monarch",
|
| 386 |
icon: "fa-user-ninja",
|
| 387 |
color: "from-purple-900 to-purple-700",
|
| 388 |
-
desc: "Master of darkness and stealth operations"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 389 |
},
|
| 390 |
{
|
| 391 |
name: "Beast Tamer",
|
| 392 |
icon: "fa-paw",
|
| 393 |
color: "from-amber-800 to-amber-600",
|
| 394 |
-
desc: "Commander of magical beasts and creatures"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 395 |
},
|
| 396 |
{
|
| 397 |
name: "Arcane Mage",
|
| 398 |
icon: "fa-hat-wizard",
|
| 399 |
color: "from-blue-800 to-blue-600",
|
| 400 |
-
desc: "Weaver of powerful arcane energies"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 401 |
},
|
| 402 |
{
|
| 403 |
name: "Soul Reaper",
|
| 404 |
icon: "fa-scythe",
|
| 405 |
color: "from-green-800 to-green-600",
|
| 406 |
-
desc: "Harvester of souls and manipulator of death"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 407 |
},
|
| 408 |
{
|
| 409 |
name: "Dragon Knight",
|
| 410 |
icon: "fa-dragon",
|
| 411 |
color: "from-red-800 to-red-600",
|
| 412 |
-
desc: "Legendary warrior bonded with dragon kin"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 413 |
},
|
| 414 |
{
|
| 415 |
name: "Time Weaver",
|
| 416 |
icon: "fa-clock",
|
| 417 |
color: "from-cyan-800 to-cyan-600",
|
| 418 |
-
desc: "Manipulator of temporal energies"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 419 |
},
|
| 420 |
{
|
| 421 |
name: "Necromancer",
|
| 422 |
icon: "fa-skull",
|
| 423 |
color: "from-gray-800 to-gray-600",
|
| 424 |
-
desc: "Commander of the undead legions"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 425 |
},
|
| 426 |
{
|
| 427 |
name: "Celestial Archer",
|
| 428 |
icon: "fa-bow-arrow",
|
| 429 |
color: "from-indigo-800 to-indigo-600",
|
| 430 |
-
desc: "Hunter with celestial precision"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 431 |
}
|
| 432 |
];
|
| 433 |
|
|
@@ -444,7 +571,6 @@
|
|
| 444 |
const resultContainer = document.getElementById('result-container');
|
| 445 |
const jobName = document.getElementById('job-name');
|
| 446 |
const jobLevel = document.getElementById('job-level');
|
| 447 |
-
const totalAssignments = document.getElementById('total-assignments');
|
| 448 |
const lastLevelDisplay = document.getElementById('last-level');
|
| 449 |
const systemStatus = document.getElementById('system-status');
|
| 450 |
|
|
@@ -462,12 +588,10 @@
|
|
| 462 |
|
| 463 |
// Identification function
|
| 464 |
identifyBtn.addEventListener('click', () => {
|
| 465 |
-
if (identifyBtn.
|
| 466 |
|
| 467 |
-
//
|
| 468 |
-
identifyBtn.
|
| 469 |
-
identifyBtn.innerHTML = '<div class="flex items-center"><i class="fas fa-lock mr-3 text-xl"></i><span>IDENTIFICATION COMPLETE</span></div>';
|
| 470 |
-
identifyBtn.className = "relative px-12 py-4 bg-gray-700 text-gray-400 font-bold rounded-lg cursor-not-allowed";
|
| 471 |
|
| 472 |
// Set system to processing
|
| 473 |
systemStatus.textContent = "PROCESSING";
|
|
@@ -513,7 +637,7 @@
|
|
| 513 |
// Update UI with the new assignment
|
| 514 |
updateResultDisplay(selectedJob, assignedLevel);
|
| 515 |
updateStats();
|
| 516 |
-
|
| 517 |
|
| 518 |
// Set system back to ready
|
| 519 |
systemStatus.textContent = "IDENTIFICATION COMPLETE";
|
|
@@ -542,23 +666,37 @@
|
|
| 542 |
|
| 543 |
// Update stats display
|
| 544 |
function updateStats() {
|
| 545 |
-
totalAssignments.textContent = assignmentsCount;
|
| 546 |
-
|
| 547 |
if (lastAssignedLevel) {
|
| 548 |
lastLevelDisplay.textContent = lastAssignedLevel;
|
| 549 |
lastLevelDisplay.className = `text-3xl font-bold level-${lastAssignedLevel}`;
|
| 550 |
}
|
| 551 |
}
|
| 552 |
|
| 553 |
-
// Update
|
| 554 |
-
function
|
| 555 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 556 |
|
| 557 |
-
|
| 558 |
-
|
| 559 |
-
|
| 560 |
-
document.getElementById(`${level.toLowerCase()}-level-count`).textContent = `${percentage}%`;
|
| 561 |
-
});
|
| 562 |
}
|
| 563 |
</script>
|
| 564 |
<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>
|
|
|
|
| 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;
|
| 135 |
+
align-items: center;
|
| 136 |
+
justify-content: center;
|
| 137 |
+
position: relative;
|
| 138 |
transition: all 0.3s ease;
|
| 139 |
perspective: 1000px;
|
| 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 |
|
|
|
|
| 254 |
opacity: 0.8;
|
| 255 |
margin-top: -0.5rem;
|
| 256 |
}
|
| 257 |
+
|
| 258 |
+
.stat-container {
|
| 259 |
+
width: 100%;
|
| 260 |
+
margin-bottom: 12px;
|
| 261 |
+
}
|
| 262 |
+
|
| 263 |
+
.stat-label {
|
| 264 |
+
display: flex;
|
| 265 |
+
justify-content: space-between;
|
| 266 |
+
margin-bottom: 4px;
|
| 267 |
+
font-size: 0.9rem;
|
| 268 |
+
}
|
| 269 |
+
|
| 270 |
+
.stat-bar {
|
| 271 |
+
height: 8px;
|
| 272 |
+
background-color: #1e1e2e;
|
| 273 |
+
border-radius: 4px;
|
| 274 |
+
overflow: hidden;
|
| 275 |
+
}
|
| 276 |
+
|
| 277 |
+
.stat-fill {
|
| 278 |
+
height: 100%;
|
| 279 |
+
border-radius: 4px;
|
| 280 |
+
transition: width 0.5s ease;
|
| 281 |
+
}
|
| 282 |
+
|
| 283 |
+
.mana-fill {
|
| 284 |
+
background: linear-gradient(90deg, #3498db, #9b59b6);
|
| 285 |
+
}
|
| 286 |
+
|
| 287 |
+
.strength-fill {
|
| 288 |
+
background: linear-gradient(90deg, #e74c3c, #f39c12);
|
| 289 |
+
}
|
| 290 |
+
|
| 291 |
+
.wisdom-fill {
|
| 292 |
+
background: linear-gradient(90deg, #2ecc71, #3498db);
|
| 293 |
+
}
|
| 294 |
+
|
| 295 |
+
.agility-fill {
|
| 296 |
+
background: linear-gradient(90deg, #f1c40f, #2ecc71);
|
| 297 |
+
}
|
| 298 |
+
|
| 299 |
+
.luck-fill {
|
| 300 |
+
background: linear-gradient(90deg, #9b59b6, #e74c3c);
|
| 301 |
+
}
|
| 302 |
+
|
| 303 |
+
.defense-fill {
|
| 304 |
+
background: linear-gradient(90deg, #34495e, #7f8c8d);
|
| 305 |
+
}
|
| 306 |
</style>
|
| 307 |
</head>
|
| 308 |
<body class="min-h-screen flex flex-col items-center justify-center p-4">
|
|
|
|
| 351 |
|
| 352 |
<div class="hud-panel rounded-lg p-6 my-4 w-full">
|
| 353 |
<p class="text-center text-gray-300 mb-4">
|
| 354 |
+
Place your hand on the magic circle to initiate identification.
|
| 355 |
+
Your class and abilities will be revealed by the system.
|
| 356 |
</p>
|
| 357 |
|
| 358 |
+
<div id="identify-btn" class="circular-btn bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold">
|
| 359 |
+
<i class="fas fa-hand-sparkles text-3xl mb-1"></i>
|
| 360 |
+
<span class="text-xs">IDENTIFY</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 361 |
</div>
|
| 362 |
</div>
|
| 363 |
</div>
|
|
|
|
| 365 |
|
| 366 |
<!-- Stats Panel -->
|
| 367 |
<div class="w-full hud-panel rounded-lg p-6 mb-8">
|
| 368 |
+
<div class="grid grid-cols-1 gap-4">
|
|
|
|
|
|
|
|
|
|
|
|
|
| 369 |
<div class="data-line p-3 rounded">
|
| 370 |
<div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">LAST LEVEL</div>
|
| 371 |
<div id="last-level" class="text-3xl font-bold">---</div>
|
|
|
|
| 373 |
</div>
|
| 374 |
</div>
|
| 375 |
|
| 376 |
+
<!-- Ability Distribution -->
|
| 377 |
<div class="w-full hud-panel rounded-lg p-6">
|
| 378 |
+
<h3 class="text-lg font-bold text-center mb-4 tracking-wider">ABILITY VALUE DISTRIBUTION</h3>
|
| 379 |
<div class="space-y-4">
|
| 380 |
+
<div class="stat-container">
|
| 381 |
+
<div class="stat-label">
|
| 382 |
+
<span>MANA <span id="mana-value" class="font-mono">0/10000</span></span>
|
| 383 |
+
</div>
|
| 384 |
+
<div class="stat-bar">
|
| 385 |
+
<div id="mana-bar" class="stat-fill mana-fill" style="width: 0%"></div>
|
| 386 |
</div>
|
|
|
|
| 387 |
</div>
|
| 388 |
+
|
| 389 |
+
<div class="stat-container">
|
| 390 |
+
<div class="stat-label">
|
| 391 |
+
<span>STRENGTH <span id="strength-value" class="font-mono">0/100</span></span>
|
| 392 |
+
</div>
|
| 393 |
+
<div class="stat-bar">
|
| 394 |
+
<div id="strength-bar" class="stat-fill strength-fill" style="width: 0%"></div>
|
| 395 |
</div>
|
|
|
|
| 396 |
</div>
|
| 397 |
+
|
| 398 |
+
<div class="stat-container">
|
| 399 |
+
<div class="stat-label">
|
| 400 |
+
<span>WISDOM <span id="wisdom-value" class="font-mono">0/100</span></span>
|
| 401 |
+
</div>
|
| 402 |
+
<div class="stat-bar">
|
| 403 |
+
<div id="wisdom-bar" class="stat-fill wisdom-fill" style="width: 0%"></div>
|
| 404 |
</div>
|
|
|
|
| 405 |
</div>
|
| 406 |
+
|
| 407 |
+
<div class="stat-container">
|
| 408 |
+
<div class="stat-label">
|
| 409 |
+
<span>AGILITY <span id="agility-value" class="font-mono">0/100</span></span>
|
| 410 |
+
</div>
|
| 411 |
+
<div class="stat-bar">
|
| 412 |
+
<div id="agility-bar" class="stat-fill agility-fill" style="width: 0%"></div>
|
| 413 |
</div>
|
|
|
|
| 414 |
</div>
|
| 415 |
+
|
| 416 |
+
<div class="stat-container">
|
| 417 |
+
<div class="stat-label">
|
| 418 |
+
<span>LUCK <span id="luck-value" class="font-mono">0/100</span></span>
|
| 419 |
+
</div>
|
| 420 |
+
<div class="stat-bar">
|
| 421 |
+
<div id="luck-bar" class="stat-fill luck-fill" style="width: 0%"></div>
|
| 422 |
</div>
|
|
|
|
| 423 |
</div>
|
| 424 |
+
|
| 425 |
+
<div class="stat-container">
|
| 426 |
+
<div class="stat-label">
|
| 427 |
+
<span>DEFENSE <span id="defense-value" class="font-mono">0/100</span></span>
|
| 428 |
+
</div>
|
| 429 |
+
<div class="stat-bar">
|
| 430 |
+
<div id="defense-bar" class="stat-fill defense-fill" style="width: 0%"></div>
|
| 431 |
</div>
|
|
|
|
| 432 |
</div>
|
| 433 |
</div>
|
| 434 |
</div>
|
|
|
|
| 442 |
</div>
|
| 443 |
|
| 444 |
<script>
|
| 445 |
+
// Job data with ability distributions
|
| 446 |
const jobCategories = [
|
| 447 |
{
|
| 448 |
name: "Shadow Monarch",
|
| 449 |
icon: "fa-user-ninja",
|
| 450 |
color: "from-purple-900 to-purple-700",
|
| 451 |
+
desc: "Master of darkness and stealth operations",
|
| 452 |
+
abilities: {
|
| 453 |
+
mana: 9500,
|
| 454 |
+
strength: 80,
|
| 455 |
+
wisdom: 75,
|
| 456 |
+
agility: 95,
|
| 457 |
+
luck: 70,
|
| 458 |
+
defense: 60
|
| 459 |
+
}
|
| 460 |
},
|
| 461 |
{
|
| 462 |
name: "Beast Tamer",
|
| 463 |
icon: "fa-paw",
|
| 464 |
color: "from-amber-800 to-amber-600",
|
| 465 |
+
desc: "Commander of magical beasts and creatures",
|
| 466 |
+
abilities: {
|
| 467 |
+
mana: 7500,
|
| 468 |
+
strength: 90,
|
| 469 |
+
wisdom: 60,
|
| 470 |
+
agility: 70,
|
| 471 |
+
luck: 85,
|
| 472 |
+
defense: 75
|
| 473 |
+
}
|
| 474 |
},
|
| 475 |
{
|
| 476 |
name: "Arcane Mage",
|
| 477 |
icon: "fa-hat-wizard",
|
| 478 |
color: "from-blue-800 to-blue-600",
|
| 479 |
+
desc: "Weaver of powerful arcane energies",
|
| 480 |
+
abilities: {
|
| 481 |
+
mana: 9900,
|
| 482 |
+
strength: 30,
|
| 483 |
+
wisdom: 100,
|
| 484 |
+
agility: 40,
|
| 485 |
+
luck: 50,
|
| 486 |
+
defense: 35
|
| 487 |
+
}
|
| 488 |
},
|
| 489 |
{
|
| 490 |
name: "Soul Reaper",
|
| 491 |
icon: "fa-scythe",
|
| 492 |
color: "from-green-800 to-green-600",
|
| 493 |
+
desc: "Harvester of souls and manipulator of death",
|
| 494 |
+
abilities: {
|
| 495 |
+
mana: 8800,
|
| 496 |
+
strength: 70,
|
| 497 |
+
wisdom: 90,
|
| 498 |
+
agility: 80,
|
| 499 |
+
luck: 40,
|
| 500 |
+
defense: 50
|
| 501 |
+
}
|
| 502 |
},
|
| 503 |
{
|
| 504 |
name: "Dragon Knight",
|
| 505 |
icon: "fa-dragon",
|
| 506 |
color: "from-red-800 to-red-600",
|
| 507 |
+
desc: "Legendary warrior bonded with dragon kin",
|
| 508 |
+
abilities: {
|
| 509 |
+
mana: 6000,
|
| 510 |
+
strength: 100,
|
| 511 |
+
wisdom: 50,
|
| 512 |
+
agility: 85,
|
| 513 |
+
luck: 40,
|
| 514 |
+
defense: 95
|
| 515 |
+
}
|
| 516 |
},
|
| 517 |
{
|
| 518 |
name: "Time Weaver",
|
| 519 |
icon: "fa-clock",
|
| 520 |
color: "from-cyan-800 to-cyan-600",
|
| 521 |
+
desc: "Manipulator of temporal energies",
|
| 522 |
+
abilities: {
|
| 523 |
+
mana: 9700,
|
| 524 |
+
strength: 20,
|
| 525 |
+
wisdom: 95,
|
| 526 |
+
agility: 65,
|
| 527 |
+
luck: 90,
|
| 528 |
+
defense: 30
|
| 529 |
+
}
|
| 530 |
},
|
| 531 |
{
|
| 532 |
name: "Necromancer",
|
| 533 |
icon: "fa-skull",
|
| 534 |
color: "from-gray-800 to-gray-600",
|
| 535 |
+
desc: "Commander of the undead legions",
|
| 536 |
+
abilities: {
|
| 537 |
+
mana: 9000,
|
| 538 |
+
strength: 60,
|
| 539 |
+
wisdom: 85,
|
| 540 |
+
agility: 50,
|
| 541 |
+
luck: 75,
|
| 542 |
+
defense: 65
|
| 543 |
+
}
|
| 544 |
},
|
| 545 |
{
|
| 546 |
name: "Celestial Archer",
|
| 547 |
icon: "fa-bow-arrow",
|
| 548 |
color: "from-indigo-800 to-indigo-600",
|
| 549 |
+
desc: "Hunter with celestial precision",
|
| 550 |
+
abilities: {
|
| 551 |
+
mana: 6500,
|
| 552 |
+
strength: 65,
|
| 553 |
+
wisdom: 70,
|
| 554 |
+
agility: 100,
|
| 555 |
+
luck: 85,
|
| 556 |
+
defense: 45
|
| 557 |
+
}
|
| 558 |
}
|
| 559 |
];
|
| 560 |
|
|
|
|
| 571 |
const resultContainer = document.getElementById('result-container');
|
| 572 |
const jobName = document.getElementById('job-name');
|
| 573 |
const jobLevel = document.getElementById('job-level');
|
|
|
|
| 574 |
const lastLevelDisplay = document.getElementById('last-level');
|
| 575 |
const systemStatus = document.getElementById('system-status');
|
| 576 |
|
|
|
|
| 588 |
|
| 589 |
// Identification function
|
| 590 |
identifyBtn.addEventListener('click', () => {
|
| 591 |
+
if (identifyBtn.classList.contains('hidden')) return;
|
| 592 |
|
| 593 |
+
// Hide the button
|
| 594 |
+
identifyBtn.classList.add('hidden');
|
|
|
|
|
|
|
| 595 |
|
| 596 |
// Set system to processing
|
| 597 |
systemStatus.textContent = "PROCESSING";
|
|
|
|
| 637 |
// Update UI with the new assignment
|
| 638 |
updateResultDisplay(selectedJob, assignedLevel);
|
| 639 |
updateStats();
|
| 640 |
+
updateAbilityDisplay(selectedJob.abilities);
|
| 641 |
|
| 642 |
// Set system back to ready
|
| 643 |
systemStatus.textContent = "IDENTIFICATION COMPLETE";
|
|
|
|
| 666 |
|
| 667 |
// Update stats display
|
| 668 |
function updateStats() {
|
|
|
|
|
|
|
| 669 |
if (lastAssignedLevel) {
|
| 670 |
lastLevelDisplay.textContent = lastAssignedLevel;
|
| 671 |
lastLevelDisplay.className = `text-3xl font-bold level-${lastAssignedLevel}`;
|
| 672 |
}
|
| 673 |
}
|
| 674 |
|
| 675 |
+
// Update ability display
|
| 676 |
+
function updateAbilityDisplay(abilities) {
|
| 677 |
+
// Update mana
|
| 678 |
+
document.getElementById('mana-bar').style.width = `${(abilities.mana / 10000) * 100}%`;
|
| 679 |
+
document.getElementById('mana-value').textContent = `${abilities.mana}/10000`;
|
| 680 |
+
|
| 681 |
+
// Update strength
|
| 682 |
+
document.getElementById('strength-bar').style.width = `${abilities.strength}%`;
|
| 683 |
+
document.getElementById('strength-value').textContent = `${abilities.strength}/100`;
|
| 684 |
+
|
| 685 |
+
// Update wisdom
|
| 686 |
+
document.getElementById('wisdom-bar').style.width = `${abilities.wisdom}%`;
|
| 687 |
+
document.getElementById('wisdom-value').textContent = `${abilities.wisdom}/100`;
|
| 688 |
+
|
| 689 |
+
// Update agility
|
| 690 |
+
document.getElementById('agility-bar').style.width = `${abilities.agility}%`;
|
| 691 |
+
document.getElementById('agility-value').textContent = `${abilities.agility}/100`;
|
| 692 |
+
|
| 693 |
+
// Update luck
|
| 694 |
+
document.getElementById('luck-bar').style.width = `${abilities.luck}%`;
|
| 695 |
+
document.getElementById('luck-value').textContent = `${abilities.luck}/100`;
|
| 696 |
|
| 697 |
+
// Update defense
|
| 698 |
+
document.getElementById('defense-bar').style.width = `${abilities.defense}%`;
|
| 699 |
+
document.getElementById('defense-value').textContent = `${abilities.defense}/100`;
|
|
|
|
|
|
|
| 700 |
}
|
| 701 |
</script>
|
| 702 |
<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>
|