Download index.html from zonana/leveling: direct link, hf CLI and curl.
- Browser
- Download file 38.2 kB
-
https://huggingface.co/spaces/zonana/leveling/resolve/main/index.html
- Command line
-
hf download hf://spaces/zonana/leveling/index.html
-
curl -L -o index.html https://huggingface.co/spaces/zonana/leveling/resolve/main/index.html
38.2 kB
| <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> |