Spaces:

ymd78329
/

tracker

Running

App Files Files Community

ymd78329 commited on Jul 7, 2025

Commit

843ced6

verified ·

1 Parent(s): 8fe5364

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Track Addiction | Yeasin Editz</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=Tiro+Bangla&display=swap'); body { font-family: 'Tiro Bangla', serif; background-color: #f5f7fa; } .character { animation: run 2s infinite steps(8); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233b82f6"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>'); background-repeat: no-repeat; width: 80px; height: 80px; } @keyframes run { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } } .progress-ringcircle { transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); transform-origin: 50% 50%; } .menu-item:hover { background-color: rgba(59, 130, 246, 0.1); } .rank-badge { transition: all 0.3s ease; } .rank-badge:hover { transform: scale(1.05); } </style> </head> <body class="min-h-screen bg-gray-50">  <div class="max-w-md mx-auto bg-white shadow-lg min-h-screen relative overflow-hidden">  <header class="bg-blue-500 text-white p-4 flex justify-between items-center sticky top-0 z-10"> <h1 class="text-xl font-bold">Track Addiction</h1> <button id="menuBtn" class="text-white focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </header>  <div id="sideMenu" class="fixed top-0 left-0 w-64 h-full bg-white shadow-lg transform -translate-x-full transition-transform duration-300 z-20"> <div class="p-4 bg-blue-500 text-white flex justify-between items-center"> <h2 class="text-xl font-bold">মেনু</h2> <button id="closeMenuBtn" class="text-white focus:outline-none"> <i class="fas fa-times text-xl"></i> </button> </div> <div class="overflow-y-auto h-full pb-20"> <div class="menu-item p-4 border-b border-gray-200 flex items-center"> <i class="fas fa-book mr-3 text-blue-500"></i> <span>পর্ণ কি এবং কেন?</span> </div> <div class="menu-item p-4 border-b border-gray-200 flex items-center"> <i class="fas fa-brain mr-3 text-blue-500"></i> <span>আসক্তি কি এবং কেনো?</span> </div> <div class="menu-item p-4 border-b border-gray-200 flex items-center"> <i class="fas fa-undo mr-3 text-blue-500"></i> <span>ফিরে আসার উপায়</span> </div> <div class="menu-item p-4 border-b border-gray-200 flex items-center"> <i class="fas fa-mosque mr-3 text-blue-500"></i> <span>পাপ থেকে বিরত থাকার উপায়</span> </div> <div class="menu-item p-4 border-b border-gray-200 flex items-center"> <i class="fas fa-book-open mr-3 text-blue-500"></i> <span>ইসলামিক বই</span> </div> <div class="menu-item p-4 border-b border-gray-200 flex items-center"> <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"> <i class="fas fa-history mr-3 text-blue-500"></i> <span>ইতিহাস</span> </div> <div class="menu-item p-4 border-b border-gray-200 flex items-center"> <i class="fas fa-trophy mr-3 text-blue-500"></i> <span>র‍্যাংকিং সিস্টেম</span> </div> <div class="p-4 mt-4"> <p class="text-sm text-gray-600">ডেভেলপার: ইয়াসিন এডিটজ</p> <p class="text-xs text-gray-500 mt-1">ভার্সন 1.0.0</p> </div> </div> </div>  <main class="p-6">  <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 rounded-r"> <p class="text-blue-800 font-medium">"যে ব্যক্তি নিজেকে সংশোধন করে নেয়, আল্লাহ তাকে সংশোধন করে দেন।" - সহীহ বুখারী</p> </div>  <div class="flex justify-center mb-6"> <div class="relative w-64 h-64"> <svg class="w-full h-full" viewBox="0 0 100 100">  <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/>  <circle class="progress-ringcircle" cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="141.5"/> </svg> <div class="absolute inset-0 flex flex-col items-center justify-center"> <div class="character mb-4"></div> <div id="timer" class="text-3xl font-bold text-gray-800">00:00:00</div> <p class="text-gray-600 mt-2">পরিষ্কার সময়</p> </div> </div> </div>  <div class="flex justify-center space-x-4 mb-8"> <button id="startBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full shadow-md transition duration-300"> শুরু করুন </button> <button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-full shadow-md transition duration-300"> রিসেট করুন </button> </div>  <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6"> <h3 class="text-lg font-semibold text-gray-800 mb-3">আপনার বর্তমান র‍্যাংক</h3> <div class="flex items-center"> <div class="rank-badge bg-green-100 text-green-800 w-16 h-16 rounded-full flex items-center justify-center mr-4"> <span class="text-2xl">🟢</span> </div> <div> <h4 class="font-bold text-gray-800">Novice (সদ্য শুরু করা সাহসীদের জন্য)</h4> <p class="text-sm text-gray-600">১–৩ দিন পরিষ্কার</p> <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> <div class="bg-green-500 h-2.5 rounded-full" style="width: 30%"></div> </div> </div> </div> </div>  <div class="grid grid-cols-2 gap-4 mb-6"> <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> <p class="text-gray-600 text-sm">বর্তমান স্ট্রিক</p> <p class="text-2xl font-bold text-blue-600">0 দিন</p> </div> <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> <p class="text-gray-600 text-sm">সর্বোচ্চ স্ট্রিক</p> <p class="text-2xl font-bold text-blue-600">0 দিন</p> </div> </div>  <div class="bg-blue-50 rounded-lg p-4"> <h3 class="font-semibold text-blue-800 mb-2">আজকের টিপ</h3> <p class="text-gray-700">যখনই আপনার মন্দ চিন্তা আসে, তখনই "আউযুবিল্লাহি মিনাশ শাইতানির রাজিম" পড়ুন এবং অজু করে নিন।</p> </div> </main>  <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3 max-w-md mx-auto"> <button class="text-blue-500 p-2 rounded-full"> <i class="fas fa-home text-xl"></i> </button> <button class="text-gray-500 p-2 rounded-full"> <i class="fas fa-chart-line text-xl"></i> </button> <button class="text-gray-500 p-2 rounded-full"> <i class="fas fa-book text-xl"></i> </button> <button class="text-gray-500 p-2 rounded-full"> <i class="fas fa-user text-xl"></i> </button> </nav> </div> <script> // Menu Toggle const menuBtn = document.getElementById('menuBtn'); const closeMenuBtn = document.getElementById('closeMenuBtn'); const sideMenu = document.getElementById('sideMenu'); menuBtn.addEventListener('click', () => { sideMenu.classList.remove('-translate-x-full'); }); closeMenuBtn.addEventListener('click', () => { sideMenu.classList.add('-translate-x-full'); }); // Timer Logic const timer = document.getElementById('timer'); const startBtn = document.getElementById('startBtn'); const resetBtn = document.getElementById('resetBtn'); const progressCircle = document.querySelector('.progress-ring__circle'); const character = document.querySelector('.character'); let seconds = 0; let minutes = 0; let hours = 0; let timerInterval; let isRunning = false; // Initialize timer display timer.textContent = '00:00:00'; // Set the progress circle const circumference = 2 * Math.PI * 45; progressCircle.style.strokeDasharray = circumference; progressCircle.style.strokeDashoffset = circumference; function updateTimer() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; if (minutes >= 60) { minutes = 0; hours++; } } const formattedTime = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); timer.textContent = formattedTime; // Update progress circle const totalSeconds = hours * 3600 + minutes * 60 + seconds; const progress = totalSeconds % 86400; // Reset daily for demo const offset = circumference - (progress / 86400) * circumference; progressCircle.style.strokeDashoffset = offset; // Update character animation speed const speed = 2 - (totalSeconds % 100) / 100; character.style.animationDuration = `${speed}s`; } startBtn.addEventListener('click', () => { if (!isRunning) { timerInterval = setInterval(updateTimer, 1000); isRunning = true; startBtn.textContent = 'চলছে...'; startBtn.classList.remove('bg-blue-500', 'hover:bg-blue-600'); startBtn.classList.add('bg-green-500', 'hover:bg-green-600'); } }); resetBtn.addEventListener('click', () => { clearInterval(timerInterval); seconds = 0; minutes = 0; hours = 0; timer.textContent = '00:00:00'; isRunning = false; startBtn.textContent = 'শুরু করুন'; startBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); startBtn.classList.add('bg-blue-500', 'hover:bg-blue-600'); progressCircle.style.strokeDashoffset = circumference; character.style.animationDuration = '2s'; }); </script> </body> </html> 1. Make the hamburger menu button functional to open the drawer. 2. Add an explicit IconButton in the AppBar leading property that triggers `Scaffold.of(context).openDrawer()`. 3. Implement a variable to track the highest streak time in milliseconds. 4. On reset button tap, compare current streak with the highest streak and update if current is higher. 5. Reset the stopwatch and timer so the timer shows 00:00:00 after reset. 6. Display both current streak and highest streak on the home screen below the timer. 7. Test that: - Tapping the hamburger icon opens the side menu drawer. - Timer resets to zero on pressing reset. - Highest streak time is preserved and updated correctly after reset. - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +87 -21

index.html CHANGED Viewed

@@ -44,24 +44,39 @@
         .rank-badge:hover {
             transform: scale(1.05);
         }
     </style>
 </head>
 <body class="min-h-screen bg-gray-50">
     <!-- Main App Container -->
     <div class="max-w-md mx-auto bg-white shadow-lg min-h-screen relative overflow-hidden">
         <!-- Header -->
         <header class="bg-blue-500 text-white p-4 flex justify-between items-center sticky top-0 z-10">
-            <h1 class="text-xl font-bold">Track Addiction</h1>
-            <button id="menuBtn" class="text-white focus:outline-none">
                 <i class="fas fa-bars text-2xl"></i>
             </button>
         </header>
         <!-- Side Menu -->
         <div id="sideMenu" class="fixed top-0 left-0 w-64 h-full bg-white shadow-lg transform -translate-x-full transition-transform duration-300 z-20">
             <div class="p-4 bg-blue-500 text-white flex justify-between items-center">
                 <h2 class="text-xl font-bold">মেনু</h2>
-                <button id="closeMenuBtn" class="text-white focus:outline-none">
                     <i class="fas fa-times text-xl"></i>
                 </button>
             </div>
@@ -150,7 +165,7 @@
                         <h4 class="font-bold text-gray-800">Novice (সদ্য শুরু করা সাহসীদের জন্য)</h4>
                         <p class="text-sm text-gray-600">১–৩ দিন পরিষ্কার</p>
                         <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
-                            <div class="bg-green-500 h-2.5 rounded-full" style="width: 30%"></div>
                         </div>
                     </div>
                 </div>
@@ -160,11 +175,11 @@
             <div class="grid grid-cols-2 gap-4 mb-6">
                 <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                     <p class="text-gray-600 text-sm">বর্তমান স্ট্রিক</p>
-                    <p class="text-2xl font-bold text-blue-600">0 দিন</p>
                 </div>
                 <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                     <p class="text-gray-600 text-sm">সর্বোচ্চ স্ট্রিক</p>
-                    <p class="text-2xl font-bold text-blue-600">0 দিন</p>
                 </div>
             </div>
@@ -193,18 +208,16 @@
     </div>
     <script>
-        // Menu Toggle
-        const menuBtn = document.getElementById('menuBtn');
-        const closeMenuBtn = document.getElementById('closeMenuBtn');
-        const sideMenu = document.getElementById('sideMenu');
-        menuBtn.addEventListener('click', () => {
-            sideMenu.classList.remove('-translate-x-full');
-        });
-        closeMenuBtn.addEventListener('click', () => {
-            sideMenu.classList.add('-translate-x-full');
-        });
         // Timer Logic
         const timer = document.getElementById('timer');
@@ -212,15 +225,20 @@
         const resetBtn = document.getElementById('resetBtn');
         const progressCircle = document.querySelector('.progress-ring__circle');
         const character = document.querySelector('.character');
         let seconds = 0;
         let minutes = 0;
         let hours = 0;
         let timerInterval;
         let isRunning = false;
-        // Initialize timer display
-        timer.textContent = '00:00:00';
         // Set the progress circle
         const circumference = 2 * Math.PI * 45;
@@ -229,6 +247,8 @@
         function updateTimer() {
             seconds++;
             if (seconds >= 60) {
                 seconds = 0;
                 minutes++;
@@ -239,8 +259,8 @@
             }
             const formattedTime =
-                (hours < 10 ? '0' + hours : hours) + ':' +
-                (minutes < 10 ? '0' + minutes : minutes) + ':' +
                 (seconds < 10 ? '0' + seconds : seconds);
             timer.textContent = formattedTime;
@@ -254,6 +274,35 @@
             // Update character animation speed
             const speed = 2 - (totalSeconds % 100) / 100;
             character.style.animationDuration = `${speed}s`;
         }
         startBtn.addEventListener('click', () => {
@@ -268,9 +317,18 @@
         resetBtn.addEventListener('click', () => {
             clearInterval(timerInterval);
             seconds = 0;
             minutes = 0;
             hours = 0;
             timer.textContent = '00:00:00';
             isRunning = false;
             startBtn.textContent = 'শুরু করুন';
@@ -278,8 +336,16 @@
             startBtn.classList.add('bg-blue-500', 'hover:bg-blue-600');
             progressCircle.style.strokeDashoffset = circumference;
             character.style.animationDuration = '2s';
         });
     </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>

         .rank-badge:hover {
             transform: scale(1.05);
         }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 15;
+            display: none;
+        }
     </style>
 </head>
 <body class="min-h-screen bg-gray-50">
+    <!-- Overlay for menu -->
+    <div id="overlay" class="overlay" onclick="closeMenu()"></div>
     <!-- Main App Container -->
     <div class="max-w-md mx-auto bg-white shadow-lg min-h-screen relative overflow-hidden">
         <!-- Header -->
         <header class="bg-blue-500 text-white p-4 flex justify-between items-center sticky top-0 z-10">
+            <button onclick="openMenu()" class="text-white focus:outline-none">
                 <i class="fas fa-bars text-2xl"></i>
             </button>
+            <h1 class="text-xl font-bold">Track Addiction</h1>
+            <div class="w-8"></div> <!-- Spacer for balance -->
         </header>
         <!-- Side Menu -->
         <div id="sideMenu" class="fixed top-0 left-0 w-64 h-full bg-white shadow-lg transform -translate-x-full transition-transform duration-300 z-20">
             <div class="p-4 bg-blue-500 text-white flex justify-between items-center">
                 <h2 class="text-xl font-bold">মেনু</h2>
+                <button onclick="closeMenu()" class="text-white focus:outline-none">
                     <i class="fas fa-times text-xl"></i>
                 </button>
             </div>
                         <h4 class="font-bold text-gray-800">Novice (সদ্য শুরু করা সাহসীদের জন্য)</h4>
                         <p class="text-sm text-gray-600">১–৩ দিন পরিষ্কার</p>
                         <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
+                            <div id="rankProgress" class="bg-green-500 h-2.5 rounded-full" style="width: 30%"></div>
                         </div>
                     </div>
                 </div>
             <div class="grid grid-cols-2 gap-4 mb-6">
                 <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                     <p class="text-gray-600 text-sm">বর্তমান স্ট্রিক</p>
+                    <p id="currentStreak" class="text-2xl font-bold text-blue-600">0 দিন</p>
                 </div>
                 <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                     <p class="text-gray-600 text-sm">সর্বোচ্চ স্ট্রিক</p>
+                    <p id="highestStreak" class="text-2xl font-bold text-blue-600">0 দিন</p>
                 </div>
             </div>
     </div>
     <script>
+        // Menu Functions
+        function openMenu() {
+            document.getElementById('sideMenu').classList.remove('-translate-x-full');
+            document.getElementById('overlay').style.display = 'block';
+        }
+        function closeMenu() {
+            document.getElementById('sideMenu').classList.add('-translate-x-full');
+            document.getElementById('overlay').style.display = 'none';
+        }
         // Timer Logic
         const timer = document.getElementById('timer');
         const resetBtn = document.getElementById('resetBtn');
         const progressCircle = document.querySelector('.progress-ring__circle');
         const character = document.querySelector('.character');
+        const currentStreak = document.getElementById('currentStreak');
+        const highestStreak = document.getElementById('highestStreak');
+        const rankProgress = document.getElementById('rankProgress');
         let seconds = 0;
         let minutes = 0;
         let hours = 0;
         let timerInterval;
         let isRunning = false;
+        let highestStreakTime = localStorage.getItem('highestStreakTime') || 0;
+        let currentStreakTime = 0;
+        // Initialize display
+        updateStreakDisplay();
         // Set the progress circle
         const circumference = 2 * Math.PI * 45;
         function updateTimer() {
             seconds++;
+            currentStreakTime++;
             if (seconds >= 60) {
                 seconds = 0;
                 minutes++;
             }
             const formattedTime =
+                (hours < 10 ? '0' + hours : hours) + ':' +
+                (minutes < 10 ? '0' + minutes : minutes) + ':' +
                 (seconds < 10 ? '0' + seconds : seconds);
             timer.textContent = formattedTime;
             // Update character animation speed
             const speed = 2 - (totalSeconds % 100) / 100;
             character.style.animationDuration = `${speed}s`;
+            // Update streak display every minute
+            if (totalSeconds % 60 === 0) {
+                updateStreakDisplay();
+            }
+        }
+        function updateStreakDisplay() {
+            // Convert milliseconds to days (86400000 ms per day)
+            const currentDays = Math.floor(currentStreakTime / 86400);
+            const highestDays = Math.floor(highestStreakTime / 86400);
+            currentStreak.textContent = currentDays + ' দিন';
+            highestStreak.textContent = highestDays + ' দিন';
+            // Update rank progress
+            if (currentDays <= 3) {
+                rankProgress.style.width = `${(currentDays / 3) * 100}%`;
+                rankProgress.classList.remove('bg-yellow-500', 'bg-red-500');
+                rankProgress.classList.add('bg-green-500');
+            } else if (currentDays <= 7) {
+                rankProgress.style.width = `${((currentDays - 3) / 4) * 100}%`;
+                rankProgress.classList.remove('bg-green-500', 'bg-red-500');
+                rankProgress.classList.add('bg-yellow-500');
+            } else {
+                rankProgress.style.width = `${((currentDays - 7) / 7) * 100}%`;
+                rankProgress.classList.remove('bg-green-500', 'bg-yellow-500');
+                rankProgress.classList.add('bg-red-500');
+            }
         }
         startBtn.addEventListener('click', () => {
         resetBtn.addEventListener('click', () => {
             clearInterval(timerInterval);
+            // Update highest streak if current is higher
+            if (currentStreakTime > highestStreakTime) {
+                highestStreakTime = currentStreakTime;
+                localStorage.setItem('highestStreakTime', highestStreakTime);
+            }
+            // Reset timer
             seconds = 0;
             minutes = 0;
             hours = 0;
+            currentStreakTime = 0;
             timer.textContent = '00:00:00';
             isRunning = false;
             startBtn.textContent = 'শুরু করুন';
             startBtn.classList.add('bg-blue-500', 'hover:bg-blue-600');
             progressCircle.style.strokeDashoffset = circumference;
             character.style.animationDuration = '2s';
+            // Update streak display
+            updateStreakDisplay();
         });
+        // Initialize from localStorage
+        if (localStorage.getItem('highestStreakTime')) {
+            highestStreakTime = parseInt(localStorage.getItem('highestStreakTime'));
+            updateStreakDisplay();
+        }
     </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>