Hugging Face's logo

Spaces:
ymd78329
/
tracker
Running

App Files Community
tracker / index.html
ymd78329's picture
ymd78329
Don't Show 'ফিরে আসার উপায়' in homepage until I open it from threeline menu - Follow Up Deployment
f5232dc verified
Raw
History Blame Contribute Delete
49.4 kB
<!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);
 cursor: pointer;
 }
.rank-badge {
 transition: all 0.3s ease;
 }
.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>
 <div class="overflow-y-auto h-full pb-20">
 <div class="menu-item p-4 border-b border-gray-200 flex items-center" onclick="showContentPage('pornInfoPage')">
 <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" onclick="showContentPage('addictionInfoPage')">
 <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" onclick="showContentPage('waysToReturnPage')">
 <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" onclick="showContentPage('islamicQuizPage')">
 <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" onclick="window.open('https://drive.google.com/drive/folders/1O3CxfhtwvZ95QpllPg-Abztj1HT2qUcZ', '_blank')">
 <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" onclick="showContentPage('historyPage')">
 <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" onclick="showContentPage('rankingSystemPage')">
 <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">
 <!-- Content Pages (initially hidden) -->
 <div id="contentPages" class="hidden">
 <div id="pornInfoPage" class="hidden">
 <h2 class="text-2xl font-bold mb-4">পর্ণ কি ও কেন?</h2>
 <div class="prose">
 <p class="mb-4">পর্ণোগ্রাফি বা পর্ণ হল যৌন উদ্দেশ্যে তৈরি ভিডিও, ছবি বা লেখা যা মানুষের যৌন আচরণকে প্রদর্শন করে। ইসলামে এটি সম্পূর্ণ হারাম এবং নিষিদ্ধ।</p>
<h3 class="text-xl font-semibold mb-2">পর্ণের ক্ষতিকর দিক:</h3>
 <ul class="list-disc pl-5 mb-4">
 <li class="mb-2">মানসিক ও শারীরিক স্বাস্থ্যের অবনতি</li>
 <li class="mb-2">পরিবার ও সামাজিক সম্পর্কের ক্ষতি</li>
 <li class="mb-2">ধর্মীয় ও নৈতিক মূল্যবোধের অবক্ষয়</li>
 <li class="mb-2">মস্তিষ্কের রাসায়নিক ভারসাম্য নষ্ট করা</li>
 </ul>
<h3 class="text-xl font-semibold mb-2">ইসলামিক দৃষ্টিকোণ:</h3>
 <p>ইসলামে যেকোনো ধরনের অশ্লীলতা সম্পূর্ণ হারাম। কুরআনে বলা হয়েছে: "তোমরা ব্যভিচারের কাছেও যেও না, নিশ্চয় তা অশ্লীল কাজ ও নিকৃষ্ট পথ।" (সূরা আল-ইসরা, আয়াত: ৩২)</p>
 </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="addictionInfoPage" class="hidden">
 <h2 class="text-2xl font-bold mb-4">আসক্তি কি ও কেনো?</h2>
 <div class="prose">
 <p class="mb-4">আসক্তি হল কোন বস্তু বা কাজের প্রতি অত্যধিক নির্ভরশীলতা যা ব্যক্তির শারীরিক, মানসিক ও সামাজিক জীবনে নেতিবাচক প্রভাব ফেলে। ইসলামে সব ধরনের আসক্তি হারাম।</p>
<h3 class="text-xl font-semibold mb-2">আসক্তির প্রভাব:</h3>
 <ul class="list-disc pl-5 mb-4">
 <li class="mb-2">অন্তরের কাঠিন্য ও আল্লাহর জিকির থেকে দূরে সরিয়ে দেওয়া</li>
 <li class="mb-2">সময় ও সম্পদের অপচয়</li>
 <li class="mb-2">পরিবার ও সামাজিক সম্পর্কের ক্ষতি</li>
 <li class="mb-2">ইবাদতের প্রতি অনীহা সৃষ্টি করা</li>
 </ul>
<h3 class="text-xl font-semibold mb-2">ইসলামিক দৃষ্টিকোণ:</h3>
 <p>রাসূল (সা.) বলেছেন, "প্রত্যেক নেশাদায়ক বস্তুই হারাম।" (সহীহ বুখারী ৫৫৮৬) আসক্তি মানুষকে আল্লাহর স্মরণ থেকে গাফিল করে তোলে এবং ধীরে ধীরে ধ্বংসের দিকে নিয়ে যায়।</p>
 </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>
 <h2 class="text-2xl font-bold mb-4">পর্ণ কি ও কেন?</h2>
 <div class="prose">
 <p class="mb-4">পর্ণোগ্রাফি বা পর্ণ হল যৌন উদ্দেশ্যে তৈরি ভিডিও, ছবি বা লেখা যা মানুষের যৌন আচরণকে প্রদর্শন করে। ইসলামে এটি সম্পূর্ণ হারাম এবং নিষিদ্ধ।</p>
<h3 class="text-xl font-semibold mb-2">পর্ণের ক্ষতিকর দিক:</h3>
 <ul class="list-disc pl-5 mb-4">
 <li class="mb-2">মানসিক ও শারীরিক স্বাস্থ্যের অবনতি</li>
 <li class="mb-2">পরিবার ও সামাজিক সম্পর্কের ক্ষতি</li>
 <li class="mb-2">ধর্মীয় ও নৈতিক মূল্যবোধের অবক্ষয়</li>
 <li class="mb-2">মস্তিষ্কের রাসায়নিক ভারসাম্য নষ্ট করা</li>
 </ul>
<h3 class="text-xl font-semibold mb-2">ইসলামিক দৃষ্টিকোণ:</h3>
 <p>ইসলামে যেকোনো ধরনের অশ্লীলতা সম্পূর্ণ হারাম। কুরআনে বলা হয়েছে: "তোমরা ব্যভিচারের কাছেও যেও না, নিশ্চয় তা অশ্লীল কাজ ও নিকৃষ্ট পথ।" (সূরা আল-ইসরা, আয়াত: ৩২)</p>
 </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="waysToReturnPage" class="hidden">
 <h2 class="text-2xl font-bold mb-4">ফিরে আসার উপায়</h2>
 <div class="prose">
 <p class="mb-4">পর্ণ আসক্তি থেকে মুক্তি পাওয়া সহজ নয়, কিন্তু আল্লাহর সাহায্যে এবং সঠিক পদ্ধতি অবলম্বন করে এটি সম্ভব।</p>
<h3 class="text-xl font-semibold mb-2">প্রধান উপায়সমূহ:</h3>
 <ul class="list-disc pl-5 mb-4">
 <li class="mb-2">নিয়মিত নামাজ পড়া এবং আল্লাহর কাছে ক্ষমা প্রার্থনা করা</li>
 <li class="mb-2">অনুপ্রেরণামূলক ইসলামিক বক্তব্য ও বই পড়া</li>
 <li class="mb-2">সোশ্যাল মিডিয়া ও ইন্টারনেট ব্যবহার সীমিত করা</li>
 <li class="mb-2">ব্যস্ত থাকা - পড়াশোনা, কাজ বা হবিতে মনোনিবেশ করা</li>
 <li class="mb-2">বিশ্বস্ত বন্ধু বা পরিবারের সাথে সমস্যা শেয়ার করা</li>
 </ul>
<h3 class="text-xl font-semibold mb-2">ইসলামিক পরামর্শ:</h3>
 <p>রাসূলুল্লাহ (সা.) বলেছেন, "যে ব্যক্তি আল্লাহর জন্য কোনো কিছু ত্যাগ করে, আল্লাহ তাকে তার চেয়ে উত্তম কিছু দান করেন।" (মুসনাদে আহমাদ) আল্লাহর উপর ভরসা রেখে ধৈর্য ধারণ করুন, ইনশাআল্লাহ আপনি সফল হবেন。</p>
 </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="rankingSystemPage" class="hidden">
 <h2 class="text-2xl font-bold mb-4">র‍্যাংকিং সিস্টেম</h2>
 <div class="prose space-y-4">
 <div class="flex items-start">
 <span class="text-2xl mr-3">🟢</span>
 <div>
 <h3 class="font-semibold">Novice (সদ্য শুরু করা সাহসীদের জন্য)</h3>
 <p class="text-gray-600">🕐 ১ থেকে ৩ দিন যারা গুনাহ থেকে নিজেকে বাঁচাতে সদ্য চেষ্টা শুরু করেছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">🟠</span>
 <div>
 <h3 class="font-semibold">Courageous (সাহসী)</h3>
 <p class="text-gray-600">🕐 ৩ থেকে ৮ দিন যারা গুনাহ থেকে দূরে থাকতে সাহসিকতার পরিচয় দিচ্ছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">🟡</span>
 <div>
 <h3 class="font-semibold">Alert (সতর্ক)</h3>
 <p class="text-gray-600">🕐 ৮ থেকে ১৫ দিন যারা গুনাহ থেকে বাঁচতে সর্বদা সতর্ক থাকছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">🔵</span>
 <div>
 <h3 class="font-semibold">Purified (পরিশুদ্ধ)</h3>
 <p class="text-gray-600">🕐 ১৫ থেকে ২৫ দিন যারা গুনাহ থেকে অনেকটাই দূরে সরে এসেছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">🟣</span>
 <div>
 <h3 class="font-semibold">Self-Purified (আত্মপরিশুদ্ধ)</h3>
 <p class="text-gray-600">🕐 ২৫ থেকে ৪৫ দিন যারা গুনাহমুক্ত জীবন গড়ার জন্য কঠোর চেষ্টা করছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">🟤</span>
 <div>
 <h3 class="font-semibold">God-Fearing (খোদাভীরু)</h3>
 <p class="text-gray-600">🕐 ৪৫ থেকে ৯০ দিন যারা আল্লাহর ভয় অন্তরে ধারণ করে জীবন পরিচালনা করছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">⚪</span>
 <div>
 <h3 class="font-semibold">The Truthful (সত্যনিষ্ঠ)</h3>
 <p class="text-gray-600">🕐 ৯০ থেকে ১৫০ দিন যারা সত্য ও আল্লাহর প্রতি একনিষ্ঠভাবে চলতে চায়।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">💠</span>
 <div>
 <h3 class="font-semibold">On the Path of Guidance (হিদায়াতের পথে)</h3>
 <p class="text-gray-600">🕐 ১৫০ থেকে ২২০ দিন যারা আল্লাহর হিদায়াতের পথে দৃঢ়ভাবে এগিয়ে চলেছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">🔷</span>
 <div>
 <h3 class="font-semibold">Connected to the Creator (স্রষ্টার সাথে সম্পর্কিত)</h3>
 <p class="text-gray-600">🕐 ২২০ থেকে ৩৬৫ দিন যারা আল্লাহর সঙ্গে গভীর সম্পর্ক স্থাপন করতে সক্ষম হয়েছে।</p>
 </div>
 </div>
<div class="flex items-start">
 <span class="text-2xl mr-3">💖</span>
 <div>
 <h3 class="font-semibold">Beloved of the Merciful (রহমতের প্রিয়জন)</h3>
 <p class="text-gray-600">যারা আল্লাহর রহমতের জন্য প্রিয় ও গ্রহণযোগ্য হয়ে উঠেছে।</p>
 </div>
 </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="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">
 <p class="mb-4">আপনার ইসলামিক জ্ঞান পরীক্ষা করুন এই ইন্টারেক্টিভ কুইজের মাধ্যমে। প্রতিটি প্রশ্নের সঠিক উত্তর নির্বাচন করুন এবং আপনার স্কোর দেখুন।</p>
<div class="quiz-container space-y-4">
 <div class="quiz-question bg-white p-4 rounded-lg shadow">
 <h3 class="font-semibold mb-2">১. ইসলামের পাঁচটি স্তম্ভের মধ্যে কোনটি প্রথম?</h3>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="radio" name="q1" class="mr-2" data-correct="true"> কালিমা পাঠ
 </label>
 <label class="flex items-center">
 <input type="radio" name="q1" class="mr-2"> নামায
 </label>
 <label class="flex items-center">
 <input type="radio" name="q1" class="mr-2"> রোযা
 </label>
 <label class="flex items-center">
 <input type="radio" name="q1" class="mr-2"> হজ্জ
 </label>
 </div>
 </div>
<div class="quiz-question bg-white p-4 rounded-lg shadow">
 <h3 class="font-semibold mb-2">২. কুরআন মজীদে কতটি সূরা আছে?</h3>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="radio" name="q2" class="mr-2"> ১০০
 </label>
 <label class="flex items-center">
 <input type="radio" name="q2" class="mr-2" data-correct="true"> ১১৪
 </label>
 <label class="flex items-center">
 <input type="radio" name="q2" class="mr-2"> ১২৪
 </label>
 <label class="flex items-center">
 <input type="radio" name="q2" class="mr-2"> ১৫০
 </label>
 </div>
 </div>
<div class="quiz-question bg-white p-4 rounded-lg shadow">
 <h3 class="font-semibold mb-2">৩. নবী মুহাম্মদ (সা.) এর পিতার নাম কি?</h3>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="radio" name="q3" class="mr-2"> আবু তালিব
 </label>
 <label class="flex items-center">
 <input type="radio" name="q3" class="mr-2" data-correct="true"> আব্দুল্লাহ
 </label>
 <label class="flex items-center">
 <input type="radio" name="q3" class="mr-2"> আবু বকর
 </label>
 <label class="flex items-center">
 <input type="radio" name="q3" class="mr-2"> আব্দুল মুত্তালিব
 </label>
 </div>
 </div>
<div class="quiz-question bg-white p-4 rounded-lg shadow">
 <h3 class="font-semibold mb-2">৪. ইসলামের ইতিহাসে প্রথম শহীদ কে?</h3>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="radio" name="q4" class="mr-2"> হযরত ওমর (রা.)
 </label>
 <label class="flex items-center">
 <input type="radio" name="q4" class="mr-2"> হযরত আলী (রা.)
 </label>
 <label class="flex items-center">
 <input type="radio" name="q4" class="mr-2" data-correct="true"> হযরত সুমাইয়া (রা.)
 </label>
 <label class="flex items-center">
 <input type="radio" name="q4" class="mr-2"> হযরত খাদিজা (রা.)
 </label>
 </div>
 </div>
<div class="quiz-question bg-white p-4 rounded-lg shadow">
 <h3 class="font-semibold mb-2">৫. কোন সূরাকে কুরআনের হৃদয় বলা হয়?</h3>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="radio" name="q5" class="mr-2"> সূরা ফাতিহা
 </label>
 <label class="flex items-center">
 <input type="radio" name="q5" class="mr-2"> সূরা বাকারা
 </label>
 <label class="flex items-center">
 <input type="radio" name="q5" class="mr-2"> সূরা ইখলাস
 </label>
 <label class="flex items-center">
 <input type="radio" name="q5" class="mr-2" data-correct="true"> সূরা ইয়াসিন
 </label>
 </div>
 </div>
<div class="quiz-question bg-white p-4 rounded-lg shadow">
 <h3 class="font-semibold mb-2">৬. কাবা শরীফ প্রথম কে নির্মাণ করেন?</h3>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="radio" name="q6" class="mr-2"> নবী ইব্রাহিম (আ.) ও ইসমাইল (আ.)
 </label>
 <label class="flex items-center">
 <input type="radio" name="q6" class="mr-2" data-correct="true"> নবী আদম (আ.)
 </label>
 <label class="flex items-center">
 <input type="radio" name="q6" class="mr-2"> ফেরেশতা জিবরাইল (আ.)
 </label>
 <label class="flex items-center">
 <input type="radio" name="q6" class="mr-2"> নবী নূহ (আ.)
 </label>
 </div>
 </div>
 </div>
<div class="flex justify-between mt-6">
 <button onclick="hideContentPage()" class="bg-blue-500 text-white py-2 px-4 rounded-md">
 <i class="fas fa-arrow-left mr-2"></i> ফিরে যান
 </button>
 <button id="checkAnswers" class="bg-green-500 text-white py-2 px-4 rounded-md">
 <i class="fas fa-check-circle mr-2"></i> উত্তর যাচাই করুন
 </button>
 </div>
<div id="quizResult" class="mt-4 p-4 bg-blue-50 rounded-lg hidden">
 <h3 class="font-bold text-blue-800">আপনার ফলাফল:</h3>
 <p id="scoreDisplay" class="text-lg mt-2"></p>
 <p id="feedback" class="mt-2"></p>
 </div>
 </div>
 </div>
<script>
 document.getElementById('checkAnswers').addEventListener('click', function() {
 let correctAnswers = 0;
 const totalQuestions = 6;
// Check each question
 for(let i = 1; i <= totalQuestions; i++) {
 const selectedOption = document.querySelector(`input[name="q${i}"]:checked`);
 if(selectedOption && selectedOption.hasAttribute('data-correct')) {
 correctAnswers++;
 }
 }
// Show results
 const scorePercentage = Math.round((correctAnswers / totalQuestions) * 100);
 document.getElementById('scoreDisplay').textContent = `${correctAnswers}/${totalQuestions} (${scorePercentage}%)`;
// Provide feedback
 let feedback = '';
 if(scorePercentage >= 80) {
 feedback = 'অভিনন্দন! আপনার ইসলামিক জ্ঞান অত্যন্ত ভালো।';
 } else if(scorePercentage >= 50) {
 feedback = 'ভালো চেষ্টা! আরো কিছু বিষয় শেখার আছে।';
 } else {
 feedback = 'চেষ্টা চালিয়ে যান! ইসলামিক জ্ঞান বৃদ্ধির জন্য পড়াশোনা করুন।';
 }
 document.getElementById('feedback').textContent = feedback;
// Show result
 document.getElementById('quizResult').classList.remove('hidden');
 });
 </script>
 </div>
 </div>
 <!-- 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 id="rankProgress" 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 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>
<!-- 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>
 // Content Page Functions
 function showContentPage(pageId) {
 document.querySelector('#contentPages').classList.remove('hidden');
 document.querySelector('#contentPages > div').classList.add('hidden');
 document.querySelector(`#${pageId}`).classList.remove('hidden');
 document.querySelector('main > div:not(#contentPages)').classList.add('hidden');
 closeMenu();
 }
 function hideContentPage() {
 document.querySelector('#contentPages').classList.add('hidden');
 document.querySelector('main > div:not(#contentPages)').classList.remove('hidden');
 }
 // 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
 let resetHistory = JSON.parse(localStorage.getItem('resetHistory')) || [];
 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');
 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;
 progressCircle.style.strokeDasharray = circumference;
 progressCircle.style.strokeDashoffset = circumference;
function updateTimer() {
 seconds++;
 currentStreakTime++;
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`;
// 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', () => {
 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);
// 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
 seconds = 0;
 minutes = 0;
 hours = 0;
 currentStreakTime = 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';
// Update streak display
 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>