zonana commited on
Commit
b691cf6
·
verified ·
1 Parent(s): bf7abc8

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +219 -81
index.html CHANGED
@@ -126,31 +126,42 @@
126
  background-size: 10px 10px;
127
  }
128
 
129
- #identify-btn {
 
 
 
 
 
 
 
 
130
  transition: all 0.3s ease;
131
  perspective: 1000px;
132
  transform-style: preserve-3d;
 
 
133
  }
134
 
135
- #identify-btn::before {
136
  content: '';
137
  position: absolute;
138
- top: -3px;
139
- left: -3px;
140
- right: -3px;
141
- bottom: -3px;
142
  background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffaa);
 
143
  z-index: -1;
144
- filter: blur(5px);
145
  opacity: 0;
146
  transition: opacity 0.3s ease;
147
  }
148
 
149
- #identify-btn:hover::before {
150
  opacity: 0.7;
151
  }
152
 
153
- #identify-btn:active {
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 magic identification.
295
- Your class and level will be revealed by the system.
296
  </p>
297
 
298
- <div class="flex justify-center">
299
- <button id="identify-btn" class="relative px-12 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold rounded-lg transition-all">
300
- <div class="flex items-center">
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-2 gap-4">
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
- <!-- Level Distribution -->
325
  <div class="w-full hud-panel rounded-lg p-6">
326
- <h3 class="text-lg font-bold text-center mb-4 tracking-wider">LEVEL DISTRIBUTION</h3>
327
  <div class="space-y-4">
328
- <div class="flex items-center">
329
- <div class="w-8 font-mono font-bold level-S">S</div>
330
- <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
331
- <div id="s-level-bar" class="h-full bg-gradient-to-r from-purple-800 to-pink-600"></div>
 
 
332
  </div>
333
- <div id="s-level-count" class="w-8 text-right font-mono">0%</div>
334
  </div>
335
- <div class="flex items-center">
336
- <div class="w-8 font-mono font-bold level-A">A</div>
337
- <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
338
- <div id="a-level-bar" class="h-full bg-gradient-to-r from-red-800 to-orange-600"></div>
 
 
 
339
  </div>
340
- <div id="a-level-count" class="w-8 text-right font-mono">0%</div>
341
  </div>
342
- <div class="flex items-center">
343
- <div class="w-8 font-mono font-bold level-B">B</div>
344
- <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
345
- <div id="b-level-bar" class="h-full bg-gradient-to-r from-yellow-600 to-amber-600"></div>
 
 
 
346
  </div>
347
- <div id="b-level-count" class="w-8 text-right font-mono">0%</div>
348
  </div>
349
- <div class="flex items-center">
350
- <div class="w-8 font-mono font-bold level-C">C</div>
351
- <div class="flex-1 h-3 bg-gray-899 rounded-full overflow-hidden mx-2">
352
- <div id="c-level-bar" class="h-full bg-gradient-to-r from-green-600 to-lime-600"></div>
 
 
 
353
  </div>
354
- <div id="c-level-count" class="w-8 text-right font-mono">0%</div>
355
  </div>
356
- <div class="flex items-center">
357
- <div class="w-8 font-mono font-bold level-D">D</div>
358
- <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
359
- <div id="d-level-bar" class="h-full bg-gradient-to-r from-blue-600 to-indigo-600"></div>
 
 
 
360
  </div>
361
- <div id="d-level-count" class="w-8 text-right font-mono">0%</div>
362
  </div>
363
- <div class="flex items-center">
364
- <div class="w-8 font-mono font-bold level-E">E</div>
365
- <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
366
- <div id="e-level-bar" class="h-full bg-gray-600"></div>
 
 
 
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 more detailed descriptions
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.disabled) return;
466
 
467
- // Disable button - can't click again
468
- identifyBtn.disabled = true;
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
- updateLevelDistribution();
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 level distribution bars
554
- function updateLevelDistribution() {
555
- if (assignmentsCount === 0) return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
556
 
557
- levels.forEach(level => {
558
- const percentage = Math.round((levelCounts[level] / assignmentsCount) * 100);
559
- document.getElementById(`${level.toLowerCase()}-level-bar`).style.width = `${percentage}%`;
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>