tag:blogger.com,1999:blog-26195366547611519322026-04-29T05:00:00.120+05:30<a href="https://www.youtube.com/c/dailyislamicmessages">Daily Islamic Messages Youtube Channel</a> | <a href="https://www.youtube.com/Bayanats">Bayanat YouTube Channel</a>Unknownnoreply@blogger.comBlogger173125tag:blogger.com,1999:blog-2619536654761151932.post-19575913900904456742026-04-29T05:00:00.009+05:302026-04-29T05:00:00.118+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-115799476137391602026-04-29T05:00:00.006+05:302026-04-29T05:00:00.118+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Hazrat Shoaib 'alaihissalam ne apni qaum se farmaaya (Tarjama): (Aur main jis tarha in baaton ki tum ko taleem karta hoon, khud bhi to is par amal karta hoon) aur main ye nahi chahta ke jis kaam se tumhein mana karoon mein khud use karoon. (Hud 11: 88)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Main%20ye%20nahi%20chahta%20ke%20jis%20kaam%20se%20tumhein%20mana%20karoon%20mein%20khud%20use%20karoon&amp;body=Hazrat%20Shoaib%20'alaihissalam%20ne%20apni%20qaum%20se%20farmaaya%20(Tarjama):%20(Aur%20main%20jis%20tarha%20in%20baaton%20ki%20tum%20ko%20taleem%20karta%20hoon,%20khud%20bhi%20to%20is%20par%20amal%20karta%20hoon)%20aur%20main%20ye%20nahi%20chahta%20ke%20jis%20kaam%20se%20tumhein%20mana%20karoon%20mein%20khud%20use%20karoon.%20(Hud%2011:%2088)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Main ye nahi chahta ke jis kaam se tumhein mana karoon mein khud use karoon in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hazrat%20Shoaib%20%27alaihissalam%20ne%20apni%20qaum%20se%20farmaaya%20(Tarjama):%20(Aur%20main%20jis%20tarha%20in%20baaton%20ki%20tum%20ko%20taleem%20karta%20hoon,%20khud%20bhi%20to%20is%20par%20amal%20karta%20hoon)%20aur%20main%20ye%20nahi%20chahta%20ke%20jis%20kaam%20se%20tumhein%20mana%20karoon%20mein%20khud%20use%20karoon.%20(Hud%2011:%2088)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hazrat%20Shoaib%20'alaihissalam%20ne%20apni%20qaum%20se%20farmaaya%20(Tarjama):%20(Aur%20main%20jis%20tarha%20in%20baaton%20ki%20tum%20ko%20taleem%20karta%20hoon,%20khud%20bhi%20to%20is%20par%20amal%20karta%20hoon)%20aur%20main%20ye%20nahi%20chahta%20ke%20jis%20kaam%20se%20tumhein%20mana%20karoon%20mein%20khud%20use%20karoon.%20(Hud%2011:%2088)%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-35862377317473689142026-04-29T05:00:00.004+05:302026-04-29T05:00:00.118+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat Buraidah Raziyallahu 'anhu se riwaayat hai ke Nabi-e-Kareem ﷺ ne irshaad farmaaya: Jo log andheron mein bakasrat masjidon ko jaate rehte hain unko Qayaamat ke din poore poore Noor ki khush khabri suna dijiye. (Abu Dawud: 561)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Buraidah%20Raziyallahu%20%27anhu%20se%20riwaayat%20hai%20ke%20Nabi-e-Kareem%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20log%20andheron%20mein%20bakasrat%20masjidon%20ko%20jaate%20rehte%20hain%20unko%20Qayaamat%20ke%20din%20poore%20poore%20Noor%20ki%20khush%20khabri%20suna%20dijiye.%20(Abu%20Dawud:%20561)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20*Download%20Qur%27an%20and%20Hadith%20Android%20App*%20-%20Goo.gl/ggEr5O"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Buraidah%20Raziyallahu%20'anhu%20se%20riwaayat%20hai%20ke%20Nabi-e-Kareem%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20log%20andheron%20mein%20bakasrat%20masjidon%20ko%20jaate%20rehte%20hain%20unko%20Qayaamat%20ke%20din%20poore%20poore%20Noor%20ki%20khush%20khabri%20suna%20dijiye.%20(Abu%20Dawud:%20561)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/dMhKpuQaHVE/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/dMhKpuQaHVE?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/dMhKpuQaHVE"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-64774028296055102322026-04-28T05:00:00.009+05:302026-04-28T05:00:00.116+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-79634715402031616632026-04-28T05:00:00.006+05:302026-04-28T05:00:00.116+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Allah Ta'ala ka irshaad hai (Tarjama): Beshak Allah Ta'ala se unke wohi bande darte hain jo unki Azmat ka Ilm rakhte hain. (Fatir 35: 28)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Allah%20Ta'ala%20se%20unke%20wohi%20bande%20darte%20hain%20jo%20unki%20Azmat%20ka%20Ilm%20rakhte%20hain&amp;body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Beshak%20Allah%20Ta'ala%20se%20unke%20wohi%20bande%20darte%20hain%20jo%20unki%20Azmat%20ka%20Ilm%20rakhte%20hain.%20(Fatir%2035:%2028)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Allah Ta'ala se unke wohi bande darte hain jo unki Azmat ka Ilm rakhte hain in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Beshak%20Allah%20Ta%27ala%20se%20unke%20wohi%20bande%20darte%20hain%20jo%20unki%20Azmat%20ka%20Ilm%20rakhte%20hain.%20(Fatir%2035:%2028)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Beshak%20Allah%20Ta'ala%20se%20unke%20wohi%20bande%20darte%20hain%20jo%20unki%20Azmat%20ka%20Ilm%20rakhte%20hain.%20(Fatir%2035:%2028)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-43003290832602486862026-04-28T05:00:00.005+05:302026-04-28T05:00:00.116+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat Anas Bin Malik Raziyallahu 'anhu se riwaayat hai ke Rasulullah ﷺ ne irshaad farmaaya: Azaan aur iqaamat ke darmiyani waqt mein ki dua rad nahi hoti yani qubool hoti hai. Sahaaba-e-Kiraam Raziyallahu 'anhum ne arz kiya: Ya Rasulullah! Hum kya dua maange? Aap ﷺ ne irshaad farmaaya: Allah Ta'ala se duniya wa aakhirat ki aafiyat maanga karo. (Tirmizi: 3594)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Anas%20Bin%20Malik%20Raziyallahu%20'anhu%20se%20riwaayat%20hai%20ke%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Azaan%20aur%20iqaamat%20ke%20darmiyani%20waqt%20mein%20ki%20dua%20rad%20nahi%20hoti%20yani%20qubool%20hoti%20hai.%20Sahaaba-e-Kiraam%20Raziyallahu%20'anhum%20ne%20arz%20kiya:%20Ya%20Rasulullah!%20Hum%20kya%20dua%20maange?%20Aap%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Allah%20Ta'ala%20se%20duniya%20wa%20aakhirat%20ki%20aafiyat%20maanga%20karo.%20(Tirmizi:%203594)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/K5eAVnjOgEw/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/K5eAVnjOgEw?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/K5eAVnjOgEw"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-9789803238802139772026-04-27T05:00:00.007+05:302026-04-27T05:00:00.118+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-50834181061858926982026-04-27T05:00:00.005+05:302026-04-27T05:00:00.118+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Allah Ta'ala ka irshaad hai (Tarjama): Aur Hum ye misaalein logon ke liye bayaan karte hai, (lekin) inhe ilm waale hi samajhte hain. (Al-'Ankabut 29: 43)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Hum%20ye%20misaalein%20logon%20ke%20liye%20bayaan%20karte%20hai&amp;body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Hum%20ye%20misaalein%20logon%20ke%20liye%20bayaan%20karte%20hai,%20(lekin)%20inhe%20ilm%20waale%20hi%20samajhte%20hain.%20(Al-'Ankabut%2029:%2043)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Hum ye misaalein logon ke liye bayaan karte hai in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Hum%20ye%20misaalein%20logon%20ke%20liye%20bayaan%20karte%20hai,%20(lekin)%20inhe%20ilm%20waale%20hi%20samajhte%20hain.%20(Al-%27Ankabut%2029:%2043)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Hum%20ye%20misaalein%20logon%20ke%20liye%20bayaan%20karte%20hai,%20(lekin)%20inhe%20ilm%20waale%20hi%20samajhte%20hain.%20(Al-'Ankabut%2029:%2043)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-58670164543955702382026-04-27T05:00:00.004+05:302026-04-27T05:00:00.118+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat Abdullah Bin Umar Raziyallahu 'anhuma farmaate hain ke ek shakhs ne arz kiya: Ya Rasulullah! azaan kehne waale ham se Ajar wo swab mein badhehue hai (Kya koi aisa amal hai ke humein bhi azaan dene wali fazilat miljaaye ?) Rasulullah ﷺ ne irshaad farmaaya: Wohi kalimaat kaha karo jo mu'azzin kehte hain phir jab tum azaan ka jawaab de chuke to dua maango (jo maangoge) wo diya jayega. (Abu Dawud: 524)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span> <a apple-style-span="" href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Abdullah%20Bin%20Umar%20Raziyallahu%20'anhuma%20farmaate%20hain%20ke%20ek%20shakhs%20ne%20arz%20kiya:%20Ya%20Rasulullah!%20azaan%20kehne%20waale%20ham%20se%20Ajar%20wo%20swab%20mein%20badhehue%20hai%20(Kya%20koi%20aisa%20amal%20hai%20ke%20humein%20bhi%20azaan%20dene%20wali%20fazilat%20miljaaye%20?)%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Wohi%20kalimaat%20kaha%20karo%20jo%20mu'azzin%20kehte%20hain%20phir%20jab%20tum%20azaan%20ka%20jawaab%20de%20chuka%20to%20dua%20maango%20(jo%20maangoge)%20wo%20diya%20jayega.%20(Abu%20Dawud:%20524)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td></tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/mgPgYF6ouv0/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/mgPgYF6ouv0?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/mgPgYF6ouv0"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-23665611971579487342026-04-26T05:00:00.007+05:302026-04-26T05:00:00.117+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-22474520952719489232026-04-26T05:00:00.005+05:302026-04-26T05:00:00.117+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Allah Ta'ala ka irshaad hai (Tarjama): Aur bilashubah humne Dawud aur Sulaiman ko ilm ataa farmaaya aur us par un dono Nabiyon ne kaha ke sab tareefein us Allah Ta'ala ke liye hain jinho ne hamein apne bahut se Imaan waale bandon par fazilat di. (An-Nam 27: 15)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Bilashubah%20humne%20Dawud%20aur%20Sulaiman%20ko%20ilm%20ataa%20farmaaya&amp;body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20bilashubah%20humne%20Dawud%20aur%20Sulaiman%20ko%20ilm%20ataa%20farmaaya%20aur%20us%20par%20un%20dono%20Nabiyon%20ne%20kaha%20ke%20sab%20tareefein%20us%20Allah%20Ta'ala%20ke%20liye%20hain%20jinho%20ne%20hamein%20apne%20bahut%20se%20Imaan%20waale%20bandon%20par%20fazilat%20di.%20(An-Nam%2027:%2015)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Bilashubah humne Dawud aur Sulaiman ko ilm ataa farmaaya in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20bilashubah%20humne%20Dawud%20aur%20Sulaiman%20ko%20ilm%20ataa%20farmaaya%20aur%20us%20par%20un%20dono%20Nabiyon%20ne%20kaha%20ke%20sab%20tareefein%20us%20Allah%20Ta%27ala%20ke%20liye%20hain%20jinho%20ne%20hamein%20apne%20bahut%20se%20Imaan%20waale%20bandon%20par%20fazilat%20di.%20(An-Nam%2027:%2015)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20bilashubah%20humne%20Dawud%20aur%20Sulaiman%20ko%20ilm%20ataa%20farmaaya%20aur%20us%20par%20un%20dono%20Nabiyon%20ne%20kaha%20ke%20sab%20tareefein%20us%20Allah%20Ta'ala%20ke%20liye%20hain%20jinho%20ne%20hamein%20apne%20bahut%20se%20Imaan%20waale%20bandon%20par%20fazilat%20di.%20(An-Nam%2027:%2015)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-90730363879562703562026-04-26T05:00:00.004+05:302026-04-26T05:00:00.117+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat Abu Qatadah Raziyallahu 'anhu riwaayat karte hain ke maine Nabi Kareem ﷺ ko irshaad farmaate hue suna: Achchha Khuwaab Allah Ta'ala ki taraf se hai aur bura khuwaab (jis mein ghabrahat ho) shaitan ki taraf se hai. Jab tum mein se koi khuwaab mein napasandida cheez dekhe to jis waqt uthe (apni bayein taraf) teen martaba thuthkaare aur us khuwaab ki burai se Allah Ta'ala ki panah maange to woh khuwaab us shakhs ko nuqsaan na pahunchayega. (Bukhari: 5747)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Abu%20Qatadah%20Raziyallahu%20'anhu%20riwaayat%20karte%20hain%20ke%20maine%20Nabi%20Kareem%20%EF%B7%BA%20ko%20irshaad%20farmaate%20hue%20suna:%20Achchha%20Khuwaab%20Allah%20Ta'ala%20ki%20taraf%20se%20hai%20aur%20bura%20khuwaab%20(jis%20mein%20ghabrahat%20ho)%20shaitan%20ki%20taraf%20se%20hai.%20Jab%20tum%20mein%20se%20koi%20khuwaab%20mein%20napasandida%20cheez%20dekhe%20to%20jis%20waqt%20uthe%20(apni%20bayein%20taraf)%20teen%20martaba%20thuthkaare%20aur%20us%20khuwaab%20ki%20burai%20se%20Allah%20Ta'ala%20ki%20panah%20maange%20to%20woh%20khuwaab%20us%20shakhs%20ko%20nuqsaan%20na%20pahunchayega.%20(Bukhari:%205747)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/qR0hhrEXhx4/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/qR0hhrEXhx4?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/qR0hhrEXhx4"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-16411940446835016502026-04-25T05:00:00.006+05:302026-04-25T05:00:00.114+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-3630417294309605722026-04-25T05:00:00.004+05:302026-04-25T05:00:00.114+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Rasool Allah (Sallallahu-'Alaihi-Wa-Sallam) se khitaab hai (Tarjama): Aur Aap ye dua kijiye ke Aye mere Rabb mera Ilm bada dijiye. (Ta Ha 20: 1 14)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Aap%20ye%20dua%20kijiye%20ke%20Aye%20mere%20Rabb%20mera%20Ilm%20bada%20dijiye&amp;body=Rasool%20Allah%20(Sallallahu-'Alaihi-Wa-Sallam)%20se%20khitaab%20hai%20(Tarjama):%20Aur%20Aap%20ye%20dua%20kijiye%20ke%20Aye%20mere%20Rabb%20mera%20Ilm%20bada%20dijiye.%20(Ta%20Ha%2020:%201%2014)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Aap ye dua kijiye ke Aye mere Rabb mera Ilm bada dijiye in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Rasool%20Allah%20(Sallallahu-%27Alaihi-Wa-Sallam)%20se%20khitaab%20hai%20(Tarjama):%20Aur%20Aap%20ye%20dua%20kijiye%20ke%20Aye%20mere%20Rabb%20mera%20Ilm%20bada%20dijiye.%20(Ta%20Ha%2020:%201%2014)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Rasool%20Allah%20(Sallallahu-'Alaihi-Wa-Sallam)%20se%20khitaab%20hai%20(Tarjama):%20Aur%20Aap%20ye%20dua%20kijiye%20ke%20Aye%20mere%20Rabb%20mera%20Ilm%20bada%20dijiye.%20(Ta%20Ha%2020:%201%2014)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-42327210487802269592026-04-25T05:00:00.003+05:302026-04-25T05:00:00.114+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat Mu'az bin jabal Raziyallahu 'anhu se riwaayat hai ke Nabi Kareem ﷺ ne irshaad farmaaya: Jo Musalmaan bhi raat ko bawazu zikr karte hue sota hai phir jab kisi waqt raat mein uski aankh khulti hai aur wo Allah Ta'ala se duniya wa aakhirat ki kisi bhi khair ka sawaal karta hai Allah Ta'ala use wo cheez zaroor ataa farmaate hain. (Abu Dawud: 5042)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20*Hadees:%20Hazrat%20Mu'az%20bin%20jabal%20Raziyallahu%20'anhu%20se%20riwaayat%20hai%20ke%20Nabi%20Kareem%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20Musalmaan%20bhi%20raat%20ko%20bawazu%20zikr%20karte%20hue%20sota%20hai%20phir%20jab%20kisi%20waqt%20raat%20mein%20uski%20aankh%20khulti%20hai%20aur%20wo%20Allah%20Ta'ala%20se%20duniya%20wa%20aakhirat%20ki%20kisi%20bhi%20khair%20ka%20sawaal%20karta%20hai%20Allah%20Ta'ala%20use%20wo%20cheez%20zaroor%20ataa%20farmaate%20hain.%20(Abu%20Dawud:%205042)*%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/zPX4PRWlAAI/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/zPX4PRWlAAI?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/zPX4PRWlAAI"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-86436679768283353202026-04-24T05:00:00.008+05:302026-04-24T05:00:00.117+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-32062339379005076272026-04-24T05:00:00.006+05:302026-04-24T05:00:00.117+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Rasool Allah (Sallallahu-'Alaihi-Wa-Sallam) se khitaab hai (Tarjama): Allah Ta'ala ne aap par kitaab aur ilm ki baatein nazil farmayi aur aap ko woh baatein sikhai jo aap na jaante the aur aap par Allah Ta'ala ka bada fazal hai. (An-Nisa 4: 113)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Allah%20Ta'ala%20ne%20aap%20par%20kitaab%20aur%20ilm%20ki%20baatein%20nazil%20farmayi&amp;body=Rasool%20Allah%20(Sallallahu-'Alaihi-Wa-Sallam)%20se%20khitaab%20hai%20(Tarjama):%20Allah%20Ta'ala%20ne%20aap%20par%20kitaab%20aur%20ilm%20ki%20baatein%20nazil%20farmayi%20aur%20aap%20ko%20woh%20baatein%20sikhai%20jo%20aap%20na%20jaante%20the%20aur%20aap%20par%20Allah%20Ta'ala%20ka%20bada%20fazal%20hai.%20(An-Nisa%204:%20113)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Allah Ta'ala ne aap par kitaab aur ilm ki baatein nazil farmayi in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Rasool%20Allah%20(Sallallahu-%27Alaihi-Wa-Sallam)%20se%20khitaab%20hai%20(Tarjama):%20Allah%20Ta%27ala%20ne%20aap%20par%20kitaab%20aur%20ilm%20ki%20baatein%20nazil%20farmayi%20aur%20aap%20ko%20woh%20baatein%20sikhai%20jo%20aap%20na%20jaante%20the%20aur%20aap%20par%20Allah%20Ta%27ala%20ka%20bada%20fazal%20hai.%20(An-Nisa%204:%20113)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Rasool%20Allah%20(Sallallahu-'Alaihi-Wa-Sallam)%20se%20khitaab%20hai%20(Tarjama):%20Allah%20Ta'ala%20ne%20aap%20par%20kitaab%20aur%20ilm%20ki%20baatein%20nazil%20farmayi%20aur%20aap%20ko%20woh%20baatein%20sikhai%20jo%20aap%20na%20jaante%20the%20aur%20aap%20par%20Allah%20Ta'ala%20ka%20bada%20fazal%20hai.%20(An-Nisa%204:%20113)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-38331283640186343932026-04-24T05:00:00.004+05:302026-04-24T05:00:00.117+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat Abu Hurairah Raziyallahu 'anhu se riwaayat hai ke Rasulullah ﷺ ne irshaad farmaaya: Teen duaain khaas taur par qubool ki jaati hain jin ke qubool hone mein koi shak nahi (aulaad ke haq mein) baap ki dua, musaafir ki dua aur mazloom ki dua. (Abu Dawud: 1536)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Abu%20Hurairah%20Raziyallahu%20'anhu%20se%20riwaayat%20hai%20ke%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Teen%20duaain%20khaas%20taur%20par%20qubool%20ki%20jaati%20hain%20jin%20ke%20qubool%20hone%20mein%20koi%20shak%20nahi%20(aulaad%20ke%20haq%20mein)%20baap%20ki%20dua,%20musaafir%20ki%20dua%20aur%20mazloom%20ki%20dua.%20(Abu%20Dawud:%201536)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/Iw9hBHORt3U/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/Iw9hBHORt3U?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/Iw9hBHORt3U"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-84508222551035792392026-04-23T05:00:00.006+05:302026-04-23T05:00:00.115+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-60208145622405847222026-04-23T05:00:00.004+05:302026-04-23T05:00:00.115+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Allah Ta'ala ka irshaad hai (Tarjama): Aur Allah Ta'ala khoob paak rehne waalon ko pasand farmate hain. (At-Tauba 9: 108)<br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Allah%20Ta'ala%20khoob%20paak%20rehne%20waalon%20ko%20pasand%20farmate%20hain&amp;body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Allah%20Ta'ala%20khoob%20paak%20rehne%20waalon%20ko%20pasand%20farmate%20hain.%20(At-Tauba%209:%20108)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Allah Ta'ala khoob paak rehne waalon ko pasand farmate hain in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Allah%20Ta%27ala%20khoob%20paak%20rehne%20waalon%20ko%20pasand%20farmate%20hain.%20(At-Tauba%209:%20108)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Allah%20Ta'ala%20khoob%20paak%20rehne%20waalon%20ko%20pasand%20farmate%20hain.%20(At-Tauba%209:%20108)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-30252893495689147812026-04-23T05:00:00.003+05:302026-04-23T05:00:00.115+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat 'Aishah Raziyallahu 'anha farmaati hain ke Rasulullah ﷺ hadiya qubool farmaate the aur iske jawaab mein khwaah usi waqt ya dusre waqt khud bhi ataa farmaate the. (Bukhari: 2585)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20'Aishah%20Raziyallahu%20'anha%20farmaati%20hain%20ke%20Rasulullah%20%EF%B7%BA%20hadiya%20qubool%20farmaate%20the%20aur%20iske%20jawaab%20mein%20khwaah%20usi%20waqt%20ya%20dusre%20waqt%20khud%20bhi%20ataa%20farmaate%20the.%20(Bukhari:%202585)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/urY3nQw9dOI/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/urY3nQw9dOI?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/urY3nQw9dOI"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-74914857227896723192026-04-22T05:00:00.006+05:302026-04-22T05:00:00.117+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-67446699537650948482026-04-22T05:00:00.004+05:302026-04-22T05:00:00.117+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> Allah Ta'ala ka irshaad hai (Tarjama): Tum log Allah Ta'ala se isteghfaar kyun nahi karte taake tum par rahem kiya jaye. (An-Naml: 46)<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=Tum%20log%20Allah%20Ta'ala%20se%20isteghfaar%20kyun%20nahi%20karte&amp;body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Tum%20log%20Allah%20Ta'ala%20se%20isteghfaar%20kyun%20nahi%20karte%20taake%20tum%20par%20rahem%20kiya%20jaye.%20(An-Naml:%2046)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Tum log Allah Ta'ala se isteghfaar kyun nahi karte in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Tum%20log%20Allah%20Ta%27ala%20se%20isteghfaar%20kyun%20nahi%20karte%20taake%20tum%20par%20rahem%20kiya%20jaye.%20(An-Naml:%2046)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Tum%20log%20Allah%20Ta'ala%20se%20isteghfaar%20kyun%20nahi%20karte%20taake%20tum%20par%20rahem%20kiya%20jaye.%20(An-Naml:%2046)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-27801524153628686892026-04-22T05:00:00.003+05:302026-04-22T05:00:00.117+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center><b>Hazrat Abu Musa Ashari Raziyallahu 'anhu se riwaayat hai ke Nabi Kareem ﷺ ne irshaad farmaaya: Bhooke ko khaana khilaao, beemaar ki ayadat karo aur (nahaq) qaidi ko rihayi dilaane ki koshish karo. (Bukhari: 5373)</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Abu%20Musa%20Ashari%20Raziyallahu%20'anhu%20se%20riwaayat%20hai%20ke%20Nabi%20Kareem%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Bhooke%20ko%20khaana%20khilaao,%20beemaar%20ki%20ayadat%20karo%20aur%20(nahaq)%20qaidi%20ko%20rihayi%20dilaane%20ki%20koshish%20karo.%20(Bukhari:%205373)%0D%0A📲 Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div> </td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;"> <iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/IPZqv9uWkZQ/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/IPZqv9uWkZQ?rel=0" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div> </td> </tr> <tr> <td style="text-align: center;"><div style="text-align: center;"> <span style="color: #660000;">Share Youtube Link on: </span><a href="whatsapp://send?text=https://youtu.be/IPZqv9uWkZQ"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-416751563438197052026-04-21T05:00:00.007+05:302026-04-21T05:00:00.117+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0