Add 1 files

index.html

@@ -126,13 +126,13 @@
             background-size: 10px 10px;
         }
         
-        #assign-btn {
+        #identify-btn {
             transition: all 0.3s ease;
             perspective: 1000px;
             transform-style: preserve-3d;
         }
         
-        #assign-btn::before {
+        #identify-btn::before {
             content: '';
             position: absolute;
             top: -3px;
@@ -146,11 +146,11 @@
             transition: opacity 0.3s ease;
         }
         
-        #assign-btn:hover::before {
+        #identify-btn:hover::before {
             opacity: 0.7;
         }
         
-        #assign-btn:active {
+        #identify-btn:active {
             transform: translateY(2px) scale(0.98);
         }
         
@@ -183,6 +183,66 @@
             align-items: center;
             justify-content: center;
         }
+        
+        .magic-circle {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            border: 2px dashed rgba(100, 200, 255, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 2rem;
+        }
+        
+        .magic-circle::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 1px solid rgba(100, 200, 255, 0.2);
+            animation: rotate 20s linear infinite;
+        }
+        
+        .magic-circle::after {
+            content: '';
+            position: absolute;
+            width: 90%;
+            height: 90%;
+            border-radius: 50%;
+            border: 1px dotted rgba(200, 150, 255, 0.3);
+            animation: rotate-reverse 15s linear infinite;
+        }
+        
+        @keyframes rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        @keyframes rotate-reverse {
+            0% { transform: rotate(360deg); }
+            100% { transform: rotate(0deg); }
+        }
+        
+        .result-display {
+            text-align: center;
+            margin: 2rem 0;
+        }
+        
+        .result-title {
+            font-size: 3rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+            letter-spacing: 0.05em;
+        }
+        
+        .result-subtitle {
+            font-size: 1.5rem;
+            opacity: 0.8;
+            margin-top: -0.5rem;
+        }
     </style>
 </head>
 <body class="min-h-screen flex flex-col items-center justify-center p-4">
@@ -206,31 +266,52 @@
                 </div>
                 <div>
                     <h1 class="text-2xl font-bold text-white tracking-wider">SOLO LEVELING SYSTEM</h1>
-                    <p class="text-sm text-blue-400 font-mono">JOB ASSIGNMENT PROTOCOL v3.7.2</p>
+                    <p class="text-sm text-blue-400 font-mono">MAGIC IDENTIFICATION PROTOCOL v4.2.1</p>
                 </div>
             </div>
             <div class="flex items-center">
-                <div class="status-light mr-2"></div>
-                <span id="system-status" class="text-sm font-mono text-red-400">STANDBY</span>
+                <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">
-            <!-- Assignment Display -->
-            <div id="assignment-display" class="w-full max-w-md hud-panel rounded-lg p-8 mb-8 flex flex-col items-center">
-                <div id="job-icon" class="w-32 h-32 bg-gray-900 rounded-full flex items-center justify-center mb-6 border-2 border-dashed border-gray-700">
-                    <i class="fas fa-question text-4xl text-gray-600"></i>
+            <!-- Identification Panel -->
+            <div id="identification-panel" class="w-full">
+                <div class="flex flex-col items-center">
+                    <div class="magic-circle">
+                        <i class="fas fa-question text-5xl text-gray-400"></i>
+                    </div>
+                    
+                    <div id="result-container" class="result-display hidden">
+                        <div id="job-name" class="result-title level-E">UNKNOWN</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 circle to initiate magic identification. 
+                            Your class and level will be revealed by the system.
+                        </p>
+                        
+                        <div class="flex justify-center">
+                            <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">
+                                <div class="flex items-center">
+                                    <i class="fas fa-hand-sparkles mr-3 text-xl"></i>
+                                    <span>INITIATE MAGIC IDENTIFICATION</span>
+                                </div>
+                            </button>
+                        </div>
+                    </div>
                 </div>
-                <div id="job-name" class="text-2xl font-bold text-center mb-2">NO ASSIGNMENT</div>
-                <div id="job-level" class="text-xl text-center text-gray-500">---</div>
             </div>
             
             <!-- Stats Panel -->
             <div class="w-full hud-panel rounded-lg p-6 mb-8">
                 <div class="grid grid-cols-2 gap-4">
                     <div class="data-line p-3 rounded">
-                        <div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">ASSIGNMENTS</div>
+                        <div class="text-xs text-blue-400 font-mono uppercase tracking-wider mb-1">IDENTIFICATIONS</div>
                         <div id="total-assignments" class="text-3xl font-bold">0</div>
                     </div>
                     <div class="data-line p-3 rounded">
@@ -240,14 +321,6 @@
                 </div>
             </div>
             
-            <!-- Assignment Button -->
-            <button id="assign-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 mb-8">
-                <div class="flex items-center">
-                    <i class="fas fa-dice-d20 mr-3 text-xl"></i>
-                    <span>INITIATE ASSIGNMENT</span>
-                </div>
-            </button>
-            
             <!-- Level Distribution -->
             <div class="w-full hud-panel rounded-lg p-6">
                 <h3 class="text-lg font-bold text-center mb-4 tracking-wider">LEVEL DISTRIBUTION</h3>
@@ -275,7 +348,7 @@
                     </div>
                     <div class="flex items-center">
                         <div class="w-8 font-mono font-bold level-C">C</div>
-                        <div class="flex-1 h-3 bg-gray-900 rounded-full overflow-hidden mx-2">
+                        <div class="flex-1 h-3 bg-gray-899 rounded-full overflow-hidden mx-2">
                             <div id="c-level-bar" class="h-full bg-gradient-to-r from-green-600 to-lime-600"></div>
                         </div>
                         <div id="c-level-count" class="w-8 text-right font-mono">0%</div>
@@ -311,49 +384,49 @@
             { 
                 name: "Shadow Monarch", 
                 icon: "fa-user-ninja", 
-                color: "bg-gradient-to-b from-purple-900 to-purple-700",
+                color: "from-purple-900 to-purple-700",
                 desc: "Master of darkness and stealth operations"
             },
             { 
                 name: "Beast Tamer", 
                 icon: "fa-paw", 
-                color: "bg-gradient-to-b from-amber-800 to-amber-600",
+                color: "from-amber-800 to-amber-600",
                 desc: "Commander of magical beasts and creatures"
             },
             { 
                 name: "Arcane Mage", 
                 icon: "fa-hat-wizard", 
-                color: "bg-gradient-to-b from-blue-800 to-blue-600",
+                color: "from-blue-800 to-blue-600",
                 desc: "Weaver of powerful arcane energies"
             },
             { 
                 name: "Soul Reaper", 
                 icon: "fa-scythe", 
-                color: "bg-gradient-to-b from-green-800 to-green-600",
+                color: "from-green-800 to-green-600",
                 desc: "Harvester of souls and manipulator of death"
             },
             { 
                 name: "Dragon Knight", 
                 icon: "fa-dragon", 
-                color: "bg-gradient-to-b from-red-800 to-red-600",
+                color: "from-red-800 to-red-600",
                 desc: "Legendary warrior bonded with dragon kin"
             },
             { 
                 name: "Time Weaver", 
                 icon: "fa-clock", 
-                color: "bg-gradient-to-b from-cyan-800 to-cyan-600",
+                color: "from-cyan-800 to-cyan-600",
                 desc: "Manipulator of temporal energies"
             },
             { 
                 name: "Necromancer", 
                 icon: "fa-skull", 
-                color: "bg-gradient-to-b from-gray-800 to-gray-600",
+                color: "from-gray-800 to-gray-600",
                 desc: "Commander of the undead legions"
             },
             { 
                 name: "Celestial Archer", 
                 icon: "fa-bow-arrow", 
-                color: "bg-gradient-to-b from-indigo-800 to-indigo-600",
+                color: "from-indigo-800 to-indigo-600",
                 desc: "Hunter with celestial precision"
             }
         ];
@@ -366,14 +439,14 @@
         let lastAssignedLevel = null;
         
         // DOM elements
-        const assignBtn = document.getElementById('assign-btn');
-        const jobIcon = document.getElementById('job-icon');
+        const identifyBtn = document.getElementById('identify-btn');
+        const magicCircle = document.querySelector('.magic-circle');
+        const resultContainer = document.getElementById('result-container');
         const jobName = document.getElementById('job-name');
         const jobLevel = document.getElementById('job-level');
         const totalAssignments = document.getElementById('total-assignments');
-        const lastLevel = document.getElementById('last-level');
+        const lastLevelDisplay = document.getElementById('last-level');
         const systemStatus = document.getElementById('system-status');
-        const statusLight = document.querySelector('.status-light');
         
         // System timestamp
         function updateSystemTimestamp() {
@@ -387,22 +460,31 @@
         setInterval(updateSystemTimestamp, 1000);
         updateSystemTimestamp();
         
-        // Assignment function
-        assignBtn.addEventListener('click', () => {
-            if (assignBtn.disabled) return;
+        // Identification function
+        identifyBtn.addEventListener('click', () => {
+            if (identifyBtn.disabled) return;
+            
+            // Disable button - can't click again
+            identifyBtn.disabled = true;
+            identifyBtn.innerHTML = '<div class="flex items-center"><i class="fas fa-lock mr-3 text-xl"></i><span>IDENTIFICATION COMPLETE</span></div>';
+            identifyBtn.className = "relative px-12 py-4 bg-gray-700 text-gray-400 font-bold rounded-lg cursor-not-allowed";
             
-            // Set system to busy
-            assignBtn.disabled = true;
+            // Set system to processing
             systemStatus.textContent = "PROCESSING";
             systemStatus.className = "text-sm font-mono text-yellow-400";
-            statusLight.className = "status-light mr-2";
             
             // Show processing animation
-            jobIcon.innerHTML = '<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-cyan-500"></div>';
-            jobName.textContent = "ANALYZING POTENTIAL";
-            jobLevel.textContent = "CALCULATING LEVEL...";
-            jobName.className = "text-2xl font-bold text-center mb-2 text-yellow-400";
-            jobLevel.className = "text-xl text-center text-yellow-400";
+            magicCircle.innerHTML = `
+                <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 opacity-50 animate-pulse"></div>
+                <div class="absolute inset-4 rounded-full bg-gradient-to-r from-purple-500 to-pink-600 opacity-50 animate-pulse" style="animation-delay: 0.2s"></div>
+                <div class="absolute inset-8 rounded-full bg-gradient-to-r from-pink-500 to-red-600 opacity-50 animate-pulse" style="animation-delay: 0.4s"></div>
+                <div class="relative z-10 text-5xl text-white">
+                    <i class="fas fa-cog animate-spin"></i>
+                </div>
+            `;
+            
+            // Hide result container if it's shown
+            resultContainer.classList.add('hidden');
             
             // Simulate system processing
             setTimeout(() => {
@@ -429,40 +511,33 @@
                 lastAssignedLevel = assignedLevel;
                 
                 // Update UI with the new assignment
-                updateAssignmentDisplay(selectedJob, assignedLevel);
+                updateResultDisplay(selectedJob, assignedLevel);
                 updateStats();
                 updateLevelDistribution();
                 
                 // Set system back to ready
-                setTimeout(() => {
-                    assignBtn.disabled = false;
-                    systemStatus.textContent = "READY";
-                    systemStatus.className = "text-sm font-mono text-green-400";
-                    statusLight.className = "status-light ready mr-2";
-                }, 1500);
+                systemStatus.textContent = "IDENTIFICATION COMPLETE";
+                systemStatus.className = "text-sm font-mono text-green-400";
                 
             }, 2000 + Math.random() * 1000); // Random processing time between 2-3 seconds
         });
         
-        // Update the assignment display
-        function updateAssignmentDisplay(job, level) {
-            // Set job icon
-            jobIcon.className = `w-32 h-32 ${job.color} rounded-full flex items-center justify-center mb-6`;
-            jobIcon.innerHTML = `<i class="fas ${job.icon} text-4xl text-white"></i>`;
+        // Update the result display
+        function updateResultDisplay(job, level) {
+            // Update magic circle with job icon
+            magicCircle.innerHTML = `
+                <div class="absolute inset-0 rounded-full bg-gradient-to-${job.color} opacity-90"></div>
+                <i class="fas ${job.icon} text-5xl text-white"></i>
+            `;
             
-            // Set job name and description
+            // Update job name and level display
             jobName.textContent = job.name;
-            jobName.className = `text-2xl font-bold text-center mb-2 level-${level}`;
-            
-            // Set level
-            jobLevel.textContent = `${level} LEVEL`;
-            jobLevel.className = `text-2xl font-bold text-center level-${level} pulse-animation`;
+            jobName.className = `result-title level-${level} pulse-animation`;
+            jobLevel.textContent = `${level} GRADE`;
+            jobLevel.className = `result-subtitle level-${level}`;
             
-            // Add subtle animation
-            jobIcon.classList.add('pulse-animation');
-            setTimeout(() => {
-                jobIcon.classList.remove('pulse-animation');
-            }, 2000);
+            // Show result container
+            resultContainer.classList.remove('hidden');
         }
         
         // Update stats display
@@ -470,8 +545,8 @@
             totalAssignments.textContent = assignmentsCount;
             
             if (lastAssignedLevel) {
-                lastLevel.textContent = lastAssignedLevel;
-                lastLevel.className = `text-3xl font-bold level-${lastAssignedLevel}`;
+                lastLevelDisplay.textContent = lastAssignedLevel;
+                lastLevelDisplay.className = `text-3xl font-bold level-${lastAssignedLevel}`;
             }
         }
         
@@ -485,11 +560,6 @@
                 document.getElementById(`${level.toLowerCase()}-level-count`).textContent = `${percentage}%`;
             });
         }
-        
-        // Initialize system status
-        systemStatus.textContent = "READY";
-        systemStatus.className = "text-sm font-mono text-green-400";
-        statusLight.className = "status-light ready mr-2";
     </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>