When I click on 'ইতিহাস' in the hamburger menu, show my reset history & time duration. - Follow Up Deployment

index.html

@@ -106,7 +106,7 @@
                     <i class="fas fa-question-circle mr-3 text-blue-500"></i>
                     <span>ইসলামিক কুইজ</span>
                 </div>
-                <div class="menu-item p-4 border-b border-gray-200 flex items-center">
+                <div class="menu-item p-4 border-b border-gray-200 flex items-center" onclick="showContentPage('historyPage')">
                     <i class="fas fa-history mr-3 text-blue-500"></i>
                     <span>ইতিহাস</span>
                 </div>
@@ -274,6 +274,18 @@
                     </button>
                 </div>
 
+                <div id="historyPage" class="hidden">
+                    <h2 class="text-2xl font-bold mb-4">আপনার রিসেট ইতিহাস</h2>
+                    <div class="prose">
+                        <div id="resetHistory" class="space-y-4">
+                            <!-- History items will be added here dynamically -->
+                        </div>
+                    </div>
+                    <button onclick="hideContentPage()" class="mt-6 bg-blue-500 text-white py-2 px-4 rounded-md">
+                        <i class="fas fa-arrow-left mr-2"></i> ফিরে যান
+                    </button>
+                </div>
+
                 <div id="islamicQuizPage" class="hidden">
                     <h2 class="text-2xl font-bold mb-4">ইসলামিক কুইজ</h2>
                     <div class="prose">
@@ -571,6 +583,7 @@
         }
         
         // Timer Logic
+        let resetHistory = JSON.parse(localStorage.getItem('resetHistory')) || [];
         const timer = document.getElementById('timer');
         const startBtn = document.getElementById('startBtn');
         const resetBtn = document.getElementById('resetBtn');
@@ -669,10 +682,27 @@
         resetBtn.addEventListener('click', () => {
             clearInterval(timerInterval);
             
-            // Update highest streak if current is higher
-            if (currentStreakTime > highestStreakTime) {
-                highestStreakTime = currentStreakTime;
-                localStorage.setItem('highestStreakTime', highestStreakTime);
+            // Record reset history
+            if (currentStreakTime > 0) {
+                const now = new Date();
+                const historyItem = {
+                    date: now.toLocaleString(),
+                    duration: formatDuration(currentStreakTime),
+                    seconds: currentStreakTime
+                };
+                resetHistory.unshift(historyItem);
+                localStorage.setItem('resetHistory', JSON.stringify(resetHistory));
+                
+                // Update highest streak if current is higher
+                if (currentStreakTime > highestStreakTime) {
+                    highestStreakTime = currentStreakTime;
+                    localStorage.setItem('highestStreakTime', highestStreakTime);
+                }
+                
+                // Update history display if visible
+                if (!document.getElementById('historyPage').classList.contains('hidden')) {
+                    displayResetHistory();
+                }
             }
             
             // Reset timer
@@ -692,11 +722,51 @@
             updateStreakDisplay();
         });
         
+        function formatDuration(totalSeconds) {
+            const days = Math.floor(totalSeconds / 86400);
+            const hours = Math.floor((totalSeconds % 86400) / 3600);
+            const minutes = Math.floor((totalSeconds % 3600) / 60);
+            const seconds = totalSeconds % 60;
+            
+            let parts = [];
+            if (days > 0) parts.push(`${days} দিন`);
+            if (hours > 0) parts.push(`${hours} ঘণ্টা`);
+            if (minutes > 0) parts.push(`${minutes} মিনিট`);
+            if (seconds > 0 || parts.length === 0) parts.push(`${seconds} সেকেন্ড`);
+            
+            return parts.join(' ');
+        }
+        
+        function displayResetHistory() {
+            const historyContainer = document.getElementById('resetHistory');
+            historyContainer.innerHTML = '';
+            
+            if (resetHistory.length === 0) {
+                historyContainer.innerHTML = '<p class="text-gray-500">কোন রিসেট ইতিহাস পাওয়া যায়নি</p>';
+                return;
+            }
+            
+            resetHistory.forEach(item => {
+                const historyItem = document.createElement('div');
+                historyItem.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-200';
+                historyItem.innerHTML = `
+                    <div class="flex justify-between items-center">
+                        <span class="font-medium">${item.date}</span>
+                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">${item.duration}</span>
+                    </div>
+                `;
+                historyContainer.appendChild(historyItem);
+            });
+        }
+        
         // Initialize from localStorage
         if (localStorage.getItem('highestStreakTime')) {
             highestStreakTime = parseInt(localStorage.getItem('highestStreakTime'));
             updateStreakDisplay();
         }
+        
+        // Update history page display when shown
+        document.getElementById('historyPage').addEventListener('show', displayResetHistory);
     </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=ymd78329/tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>