<!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-ring__circle { 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"> <!-- 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> <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 Content --> <main class="p-6"> <!-- Motivation Quote --> <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> <!-- Progress Circle --> <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"> <!-- Background circle --> <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/> <!-- Progress circle --> <circle class="progress-ring__circle" 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> <!-- Start/Reset Buttons --> <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> <!-- Current Rank --> <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> <!-- Quick Stats --> <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> <!-- Motivational Tip --> <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> <!-- Bottom Navigation --> <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
