Added additional information which calculates how long until the next level.

index.html

@@ -29,6 +29,7 @@
       opacity: 0.5;
       z-index: -1;
     }
+    .cursor-pointer { cursor: pointer; }
   </style>
 </head>
 <body class="bg-slate-50 flex items-center justify-center min-h-screen p-4">
@@ -58,6 +59,20 @@
         <span id="level-left"></span>
         <span id="level-right"></span>
       </div>
+
+      <!-- Toggle arrow -->
+      <div class="mt-2 text-gray-400 text-xl cursor-pointer" id="toggle-extra">▼</div>
+
+      <!-- Extra info -->
+      <div id="extra-info" class="hidden mt-3 text-sm text-slate-600">
+        <p>
+          Assuming you average 
+          <span id="xp-per-day">15,000</span> XP per day, 
+          you will reach the next level in 
+          <span id="days-next">0</span> days and level 80 in 
+          <span id="days-80">0</span> days. <span id="edit-xp" class="ml-1 text-blue-500 cursor-pointer">✏️</span>
+        </p>
+      </div>
     </div>
   </div>
 
@@ -74,6 +89,10 @@
       806000000, 836000000, 866000000, 896000000, 926000000, 956000000, 986000000, 1016000000, 1046000000, 1076000000,  // 71–80
     ];
 
+    let avgXpPerDay = 15000;
+    let currentXp = 0;
+    let currentLevel = 1;
+
     function calculateLevel(xp) {
       let level = 1;
       for (let i = 0; i < xpThresholds.length; i++) {
@@ -86,31 +105,60 @@
       return level;
     }
 
+    function updateExtraInfo() {
+      let nextLevelXp = (currentLevel < xpThresholds.length) ? xpThresholds[currentLevel] : currentXp;
+      let xpToNext = Math.max(0, nextLevelXp - currentXp);
+      let xpTo80 = Math.max(0, xpThresholds[79] - currentXp);
+
+      let daysNext = Math.ceil(xpToNext / avgXpPerDay);
+      let days80 = Math.ceil(xpTo80 / avgXpPerDay);
+
+      document.getElementById('xp-per-day').textContent = avgXpPerDay.toLocaleString();
+      document.getElementById('days-next').textContent = daysNext.toLocaleString();
+      document.getElementById('days-80').textContent = days80.toLocaleString();
+    }
+
     document.getElementById('calculate-btn').addEventListener('click', () => {
       let xp = document.getElementById('xp-input').value.replace(/,/g,'').trim();
       if (!xp || isNaN(xp)) {
         alert('Please enter a valid number for XP.');
         return;
       }
-      xp = parseInt(xp, 10);
+      currentXp = parseInt(xp, 10);
 
-      let level = calculateLevel(xp);
+      currentLevel = calculateLevel(currentXp);
-      let nextLevelXp = (level < xpThresholds.length) ? xpThresholds[level] : xp;
+      let nextLevelXp = (currentLevel < xpThresholds.length) ? xpThresholds[currentLevel] : currentXp;
-      let currentLevelXp = xpThresholds[level - 1];
+      let currentLevelXp = xpThresholds[currentLevel - 1];
-      let progress = (xp - currentLevelXp) / (nextLevelXp - currentLevelXp) * 100;
+      let progress = (currentXp - currentLevelXp) / (nextLevelXp - currentLevelXp) * 100;
 
       // Update UI
       document.getElementById('progress-bar').style.width = progress + '%';
-      document.getElementById('level-text').textContent = `Level ${level}`;
+      document.getElementById('level-text').textContent = `Level ${currentLevel}`;
-      document.getElementById('level-left').textContent = level;
+      document.getElementById('level-left').textContent = currentLevel;
-      document.getElementById('level-right').textContent = (level < xpThresholds.length) ? level + 1 : level;
+      document.getElementById('level-right').textContent = (currentLevel < xpThresholds.length) ? currentLevel + 1 : currentLevel;
 
       document.getElementById('result').classList.remove('hidden');
+
+      updateExtraInfo();
     });
 
     document.getElementById('xp-input').addEventListener('input', (e)=>{
       e.target.value = e.target.value.replace(/[^0-9,]/g,'');
     });
+
+    // Toggle extra info
+    document.getElementById('toggle-extra').addEventListener('click', () => {
+      document.getElementById('extra-info').classList.toggle('hidden');
+    });
+
+    // Edit XP/day
+    document.getElementById('edit-xp').addEventListener('click', () => {
+      let newVal = prompt("Enter your average XP per day:", avgXpPerDay);
+      if (newVal && !isNaN(newVal) && parseInt(newVal) > 0) {
+        avgXpPerDay = parseInt(newVal, 10);
+        updateExtraInfo();
+      }
+    });
   </script>
 
 </body>