tag:blogger.com,1999:blog-26195366547611519322026-05-21T05:00:00.211+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.comBlogger196125tag:blogger.com,1999:blog-2619536654761151932.post-79612671683393624612026-05-21T05:00:00.008+05:302026-05-21T05:00:00.207+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-57958936865697647172026-05-21T05:00:00.004+05:302026-05-21T05:00:00.207+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> &lt;<table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center> <b>Huzoor ﷺ ne irshaad farmaaya: Jo (maalik) apne gulaam par tohmat lagaaye; haalaanke woh gulaam begunaah hai, to qayaamat ke din us maalik ko had ke taur par kode maare jaaenge. (Abu Daaood: 5165)</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%20Huzoor%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20(maalik)%20apne%20gulaam%20par%20tohmat%20lagaaye;%20haalaanke%20woh%20gulaam%20begunaah%20hai,%20to%20qayaamat%20ke%20din%20us%20maalik%20ko%20had%20ke%20taur%20par%20kode%20maare%20jaaenge.%20(Abu%20Daaood:%205165)%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/Spm1U3sJzzA/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/Spm1U3sJzzA?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/Spm1U3sJzzA"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-12359852735465068472026-05-20T16:30:00.000+05:302026-05-20T16:30:00.121+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="height: 0px; max-width: 800px; padding-bottom: 60%; position: relative; width: 100%;"> <div id="player" style="height: 200px; max-width: 640px; width: 100%;"></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; font-weight: bold; margin-bottom: 1px; margin-top: -15px; text-align: center;">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-color: currentcolor; border-image: initial; border-radius: 50%; border-style: none; border-width: medium; 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> <html lang="en"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <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 frameborder="0" height="552" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%"> Loading… </iframe> </div> </body> </html> <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div id="latestBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 0px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 0px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="fetchtotal"> <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;">📅 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="border-collapse: collapse; width: 100%;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> &nbsp;&nbsp; <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 50 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 rgb(51, 65, 85); margin-top: 20px; padding-top: 12px;"> <!--Title: Muted Cyan-Grey--> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 8px; text-align: center; text-transform: uppercase;">All Dhikr Summary</div> <!--Progress Bar: Dark Track with Vibrant Glow--> <div style="background: rgb(30, 41, 59); border-radius: 10px; border: 1px solid rgb(51, 65, 85); height: 6px; margin: 0px 0px 10px; overflow: hidden;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, rgb(251, 191, 36), rgb(245, 158, 11)); box-shadow: rgba(251, 191, 36, 0.4) 0px 0px 8px; height: 100%; width: 0%;"></div> </div> <!--Summary Box: DEEP DARK BACKGROUND--> <div id="summarySection" style="background: rgb(15, 23, 42); border-radius: 12px; border: 1px solid rgb(30, 41, 59); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 20px; padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; font-size: 11px; gap: 5px;"></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: rgba(251, 191, 36, 0.2) 0px 0px 5px;"> 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, 50); 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> </div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-80904822764011449262026-05-20T05:00:00.006+05:302026-05-20T05:00:00.120+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-35570116735510011462026-05-20T05:00:00.003+05:302026-05-20T05:00:00.120+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 (Raziyallahu 'anhu) farmaate hain ke maine Nabi Kareem ﷺ ko ye irshaad farmaate hue suna: Jab Qayaamat ka din hoga to mujhe shafaat ki ijaazat di jayegi. Main arz karunga: Aye mere Rabb! jannat mein har us shakhs ko daakhil farmaa dijiye jiske dil mein raaee ke daane ke baraabar bhi (imaan) ho, (Allah Ta'ala meri is shafaat ko qubool farmaalenge) aur woh log jannat mein daakhil hojayeingey. Phir main arz karunga jannat mein har us shakhs ko daakhil farmaa dijiye jis ke dil mein zaraasa bhi (imaan) ho. (Bukhari: 7509)</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%20Hazrat%20Anas%20(Raziyallahu%20'anhu)%20farmaate%20hain%20ke%20maine%20Nabi%20Kareem%20%EF%B7%BA%20%20ko%20ye%20irshaad%20farmaate%20hue%20suna:%20Jab%20Qayaamat%20ka%20din%20hoga%20to%20mujhe%20shafaat%20ki%20ijaazat%20di%20jayegi.%20Main%20arz%20karunga:%20Aye%20mere%20Rabb!%20jannat%20mein%20har%20us%20shakhs%20ko%20daakhil%20farmaa%20dijiye%20jiske%20dil%20mein%20raaee%20ke%20daane%20ke%20baraabar%20bhi%20(imaan)%20ho,%20(Allah%20Ta'ala%20meri%20is%20shafaat%20ko%20qubool%20farmaalenge)%20aur%20woh%20log%20jannat%20mein%20daakhil%20hojayeingey.%20Phir%20main%20arz%20karunga%20jannat%20mein%20har%20us%20shakhs%20ko%20daakhil%20farmaa%20dijiye%20jis%20ke%20dil%20mein%20zaraasa%20bhi%20(imaan)%20ho.%20(Bukhari:%207509)%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><center> <b>For Audio Click Below</b></center> </td> </tr> <tr> <td><div class="separator" style="clear: both; text-align: center;"> <iframe frameborder="0" height="150" src="https://www.youtube-nocookie.com/embed/ulhqs52Vln0?showinfo=0&amp;rel=0&amp;cc_load_policy=1&amp;iv_load_policy=3&amp;theme=light&amp;fs=0&amp;color=white&amp;autohide=0&amp;controls=0&amp;disablekb=1" width="250"></iframe></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-72940757682908438462026-05-19T16:30:00.000+05:302026-05-19T16:30:00.120+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="height: 0px; max-width: 800px; padding-bottom: 60%; position: relative; width: 100%;"> <div id="player" style="height: 200px; max-width: 640px; width: 100%;"></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; font-weight: bold; margin-bottom: 1px; margin-top: -15px; text-align: center;">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-color: currentcolor; border-image: initial; border-radius: 50%; border-style: none; border-width: medium; 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> <html lang="en"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <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 frameborder="0" height="552" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%"> Loading… </iframe> </div> </body> </html> <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div id="latestBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 0px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 0px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="fetchtotal"> <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;">📅 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="border-collapse: collapse; width: 100%;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> &nbsp;&nbsp; <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 50 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 rgb(51, 65, 85); margin-top: 20px; padding-top: 12px;"> <!--Title: Muted Cyan-Grey--> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 8px; text-align: center; text-transform: uppercase;">All Dhikr Summary</div> <!--Progress Bar: Dark Track with Vibrant Glow--> <div style="background: rgb(30, 41, 59); border-radius: 10px; border: 1px solid rgb(51, 65, 85); height: 6px; margin: 0px 0px 10px; overflow: hidden;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, rgb(251, 191, 36), rgb(245, 158, 11)); box-shadow: rgba(251, 191, 36, 0.4) 0px 0px 8px; height: 100%; width: 0%;"></div> </div> <!--Summary Box: DEEP DARK BACKGROUND--> <div id="summarySection" style="background: rgb(15, 23, 42); border-radius: 12px; border: 1px solid rgb(30, 41, 59); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 20px; padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; font-size: 11px; gap: 5px;"></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: rgba(251, 191, 36, 0.2) 0px 0px 5px;"> 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, 50); 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> </div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-7017651473952808802026-05-19T05:00:00.005+05:302026-05-19T05:00:00.130+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-5825781972722276052026-05-19T05:00:00.002+05:302026-05-19T05:00:00.130+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center><b>Hadees</b></center> </td> </tr> <tr> <td><center> <b>Rasoolullah ﷺ ka irshaad hai ke jo shakhs 2 namaazon ko bagair kisi uzr ke ek waqt mein padhe, woh kabeera gunaahon ke darwaazon mein se ek darwaazeh par pahonch gaya. (Tirmizi: 188)</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%20Rasoolullah%20%EF%B7%BA%20ka%20irshaad%20hai%20ke%20jo%20shakhs%202%20namaazon%20ko%20bagair%20kisi%20uzr%20ke%20ek%20waqt%20mein%20padhe,%20woh%20kabeera%20gunaahon%20ke%20darwaazon%20mein%20se%20ek%20darwaazeh%20par%20pahonch%20gaya.%20(Tirmizi:%20188)%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><div class="separator" style="clear: both; text-align: center;"> <iframe frameborder="0" height="150" src="https://www.youtube-nocookie.com/embed/sHTtU8mtwqs?showinfo=0&amp;rel=0&amp;cc_load_policy=1&amp;iv_load_policy=3&amp;theme=light&amp;fs=0&amp;color=white&amp;autohide=0&amp;controls=0&amp;disablekb=1" width="150"></iframe></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/sHTtU8mtwqs/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/sHTtU8mtwqs?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/sHTtU8mtwqs"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-68767007095531692292026-05-18T16:30:00.000+05:302026-05-18T16:30:00.119+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="height: 0px; max-width: 800px; padding-bottom: 60%; position: relative; width: 100%;"> <div id="player" style="height: 200px; max-width: 640px; width: 100%;"></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; font-weight: bold; margin-bottom: 1px; margin-top: -15px; text-align: center;">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-color: currentcolor; border-image: initial; border-radius: 50%; border-style: none; border-width: medium; 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> <html lang="en"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <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 frameborder="0" height="552" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%"> Loading… </iframe> </div> </body> </html> <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div id="latestBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 0px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 0px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="fetchtotal"> <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;">📅 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="border-collapse: collapse; width: 100%;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> &nbsp;&nbsp; <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 50 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 rgb(51, 65, 85); margin-top: 20px; padding-top: 12px;"> <!--Title: Muted Cyan-Grey--> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 8px; text-align: center; text-transform: uppercase;">All Dhikr Summary</div> <!--Progress Bar: Dark Track with Vibrant Glow--> <div style="background: rgb(30, 41, 59); border-radius: 10px; border: 1px solid rgb(51, 65, 85); height: 6px; margin: 0px 0px 10px; overflow: hidden;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, rgb(251, 191, 36), rgb(245, 158, 11)); box-shadow: rgba(251, 191, 36, 0.4) 0px 0px 8px; height: 100%; width: 0%;"></div> </div> <!--Summary Box: DEEP DARK BACKGROUND--> <div id="summarySection" style="background: rgb(15, 23, 42); border-radius: 12px; border: 1px solid rgb(30, 41, 59); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 20px; padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; font-size: 11px; gap: 5px;"></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: rgba(251, 191, 36, 0.2) 0px 0px 5px;"> 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, 50); 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> </div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-51478386579051268102026-05-18T05:00:00.005+05:302026-05-18T05:00:00.183+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-23631954274024844752026-05-18T05:00:00.002+05:302026-05-18T05:00:00.183+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>Huzoor ﷺ ne farmaaya ke jis shakhs ne Qur'aan padha, phir us ko zabaani yaad kiya aur us ke halaal ko halaal aur haraam ko haraam jaana to Haq Ta'ala Shaanuhu us ko Jannat mein daakhil farmaaeinge aur us ke gharaane mein se aise das aadmiyon ke baare mein us ki shafa'at qubool farmaaeinge jin ke liye Jahannam waajib ho chuki ho. (Tirmizi: 2905)</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%20Huzoor%20%EF%B7%BA%20ne%20farmaaya%20ke%20jis%20shakhs%20ne%20Qur'aan%20padha,%20phir%20us%20ko%20zabaani%20yaad%20kiya%20aur%20us%20ke%20halaal%20ko%20halaal%20aur%20haraam%20ko%20haraam%20jaana%20to%20Haq%20Ta'ala%20Shaanuhu%20us%20ko%20Jannat%20mein%20daakhil%20farmaaeinge%20aur%20us%20ke%20gharaane%20mein%20se%20aise%20das%20aadmiyon%20ke%20baare%20mein%20us%20ki%20shafa'at%20qubool%20farmaaeinge%20jin%20ke%20liye%20Jahannam%20waajib%20ho%20chuki%20ho.%20(Tirmizi:%202905)%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/hDI_OxhPoTQ/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/hDI_OxhPoTQ?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/hDI_OxhPoTQ"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-45728088436478499942026-05-17T16:30:00.000+05:302026-05-17T16:30:00.112+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="height: 0px; max-width: 800px; padding-bottom: 60%; position: relative; width: 100%;"> <div id="player" style="height: 200px; max-width: 640px; width: 100%;"></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; font-weight: bold; margin-bottom: 1px; margin-top: -15px; text-align: center;">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-color: currentcolor; border-image: initial; border-radius: 50%; border-style: none; border-width: medium; 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> <html lang="en"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <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 frameborder="0" height="552" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%"> Loading… </iframe> </div> </body> </html> <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div id="latestBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 0px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 0px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="fetchtotal"> <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;">📅 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="border-collapse: collapse; width: 100%;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> &nbsp;&nbsp; <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 50 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 rgb(51, 65, 85); margin-top: 20px; padding-top: 12px;"> <!--Title: Muted Cyan-Grey--> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 8px; text-align: center; text-transform: uppercase;">All Dhikr Summary</div> <!--Progress Bar: Dark Track with Vibrant Glow--> <div style="background: rgb(30, 41, 59); border-radius: 10px; border: 1px solid rgb(51, 65, 85); height: 6px; margin: 0px 0px 10px; overflow: hidden;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, rgb(251, 191, 36), rgb(245, 158, 11)); box-shadow: rgba(251, 191, 36, 0.4) 0px 0px 8px; height: 100%; width: 0%;"></div> </div> <!--Summary Box: DEEP DARK BACKGROUND--> <div id="summarySection" style="background: rgb(15, 23, 42); border-radius: 12px; border: 1px solid rgb(30, 41, 59); box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 20px; padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; font-size: 11px; gap: 5px;"></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: rgba(251, 191, 36, 0.2) 0px 0px 5px;"> 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, 50); 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> </div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-2131664106376291522026-05-17T05:00:00.006+05:302026-05-17T05:00:00.123+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-78892763985265486762026-05-17T05:00:00.003+05:302026-05-17T05:00:00.123+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 Nabi Kareem ﷺ ne irshaad farmaaya: Imaan ye hai ki tum Allah Ta'ala ko uske farishton ko aur (aakhirat mein) Allah Ta'ala se milne ko aur uske Rasoolon ko haq jaano aur haq maano (aur mout ke baad dubaara) uthaye jaane ko haq jaano aur haq maano. (Bukhari: 50)</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%20Hazrat%20Abu%20Hurairah%20(Raziyallahu%20'anhu)%20se%20riwaayat%20hai%20ke%20Nabi%20Kareem%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Imaan%20ye%20hai%20ki%20tum%20Allah%20Ta'ala%20ko%20uske%20farishton%20ko%20aur%20(aakhirat%20mein)%20Allah%20Ta'ala%20se%20milne%20ko%20aur%20uske%20Rasoolon%20ko%20haq%20jaano%20aur%20haq%20maano%20(aur%20mout%20ke%20baad%20dubaara)%20uthaye%20jaane%20ko%20haq%20jaano%20aur%20haq%20maano.%20(Bukhari:%2050)%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/8WkKtVNhQ1o/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/8WkKtVNhQ1o?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/8WkKtVNhQ1o"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr></tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-6192564249223121002026-05-16T05:00:00.003+05:302026-05-16T05:00:00.121+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>Rasullulah ﷺ ne irshaad farmaaya: Jab tum mein se koi so kar uthe, to bartan mein haath daalne se pehle haathon ko dhole. (Bukhari: 162)</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%20Rasullulah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jab%20tum%20mein%20se%20koi%20so%20kar%20uthe,%20to%20bartan%20mein%20haath%20daalne%20se%20pehle%20haathon%20ko%20dhole.%20(Bukhari:%20162)%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/uBnaa-1OLbY/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/uBnaa-1OLbY?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/uBnaa-1OLbY"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-14776799555449394962026-05-15T05:00:00.003+05:302026-05-15T05:00:00.193+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 riwaayat karte hain ke Rasulullah ﷺ ne irshaad farmaaya: Aadmi ka jamaat se namaaz padhna apne ghar aur baazar mein namaaz padhne se pachees (25) darje zyaada sawaab rakhta hai. (Bukhari: 647)</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%20Hazrat%20Abu%20Hurairah%20Raziyallahu%20%27anhu%20riwaayat%20karte%20hain%20ke%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Aadmi%20ka%20jamaat%20se%20namaaz%20padhna%20apne%20ghar%20aur%20baazar%20mein%20namaaz%20padhne%20se%20pachees%20(25)%20darje%20zyaada%20sawaab%20rakhta%20hai.%20(Bukhari:%20647)%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 App* Goo.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*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%20Hazrat%20Abu%20Hurairah%20Raziyallahu%20'anhu%20riwaayat%20karte%20hain%20ke%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Aadmi%20ka%20jamaat%20se%20namaaz%20padhna%20apne%20ghar%20aur%20baazar%20mein%20namaaz%20padhne%20se%20pachees%20(25)%20darje%20zyaada%20sawaab%20rakhta%20hai.%20(Bukhari:%20647)%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/UHp_XwV8GTM/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/UHp_XwV8GTM?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/UHp_XwV8GTM"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr></tbody></table></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-4573874614202461342026-05-14T05:00:00.004+05:302026-05-14T05:00:00.216+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 Raziyallahu 'anhu se riwaayat hai ke Nabi Kareem ﷺ ne irshaad farmaaya: Apni safon ko seedha kiya karo, kyunki Namaaz ko achchhi tarah adaa karne mein safon ko seedha karna shaamil hai. (Bukhari: 723)</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%20Hazrat%20Anas%20Raziyallahu%20'anhu%20se%20riwaayat%20hai%20ke%20Nabi%20Kareem%20%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Apni%20safon%20ko%20seedha%20kiya%20karo,%20kyunki%20Namaaz%20ko%20achchhi%20tarah%20adaa%20karne%20mein%20safon%20ko%20seedha%20karna%20shaamil%20hai.%20(Bukhari:%20723)%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/4RQ9PmDBeg4/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/4RQ9PmDBeg4?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/4RQ9PmDBeg4"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-51044520945584078452026-05-13T05:00:00.003+05:302026-05-13T05:00:00.123+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center> <b>Aaj Ki Hadees</b></center> </td> </tr> <tr> <td><center> <b>Rasullulah ﷺ ne farmaaya: Khade ho kar Namaaz padho, agar khade hone ki taaqat na ho to baithh kar padho aur agar baithh kar padhne ki bhi taaqat na ho to karwat par let kar padho. (Tirimizi: 372)</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%20Rasullulah%20%EF%B7%BA%20ne%20farmaaya:%20Khade%20ho%20kar%20Namaaz%20padho,%20agar%20khade%20hone%20ki%20taaqat%20na%20ho%20to%20baithh%20kar%20padho%20aur%20agar%20baithh%20kar%20padhne%20ki%20bhi%20taaqat%20na%20ho%20to%20karwat%20par%20let%20kar%20padho.%20(Tirimizi:%20372)%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/Jz7rRpPzWaE/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/Jz7rRpPzWaE?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/Jz7rRpPzWaE"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-45233625293936398112026-05-12T05:00:00.005+05:302026-05-12T05:00:00.121+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>Huzoor ﷺ ne farmaaya: Aapas mein hadiya liya diya Karo, kyun ke hadiya aur tohfa dilon se keene ko khatm kar deta hai. (Tirmizi: 2130)</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%20Huzoor%20%EF%B7%BA%20ne%20farmaaya:%20Aapas%20mein%20hadiya%20liya%20diya%20Karo,%20kyun%20ke%20hadiya%20aur%20tohfa%20dilon%20se%20keene%20ko%20khatm%20kar%20deta%20hai.%20(Tirmizi:%202130)%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/36Fs-rlenXA/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/36Fs-rlenXA?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/36Fs-rlenXA"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-59147232384141640172026-05-11T05:00:00.004+05:302026-05-11T05:00:00.131+05:30<div dir="ltr" style="text-align: left;" trbidi="on"> <table border="1" style="width: 100%;"> <tbody> <tr> <td><center> <b>Aaj Ki Hadees</b></center> </td> </tr> <tr> <td><center> <b>Hazrat Abu Hurairah Raziyallahu Anhu se riwaayat hai ke maine Rasulullah ﷺ ko ye irshaad farmaate hue suna: Meri Ummat Qayamat ke din is haal mein bulaayee jaayegi ke unke haath paon aur chehre wuzu mein dhulne ki wajahse raoshan aur chamakdaar hongey. Lihaaza jo shakhs apni raoshni badhana chahe, to use chahiye ke wo ise badhaaye. (Bukhari: 136)</b></center> <center> <b>&nbsp;</b></center> <center> Faida: Matlab ye hai ke wuzu is ehtemaam se kiya jaye ke azaa-e-wazu mein koi jagah khushk na rahe.<br /> <br /> <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%20Hazrat%20Abu%20Hurairah%20Raziyallahu%20Anhu%20se%20riwaayat%20hai%20ke%20maine%20Rasulullah%20%EF%B7%BA%20ko%20ye%20irshaad%20farmaate%20hue%20suna:%20Meri%20Ummat%20Qayamat%20ke%20din%20is%20haal%20mein%20bulaayee%20jaayegi%20ke%20unke%20haath%20paon%20aur%20chehre%20wuzu%20mein%20dhulne%20ki%20wajahse%20raoshan%20aur%20chamakdaar%20hongey.%20Lihaaza%20jo%20shakhs%20apni%20raoshni%20badhana%20chahe,%20to%20use%20chahiye%20ke%20wo%20ise%20badhaaye.%20(Bukhari:%20136)%0D%0A%0D%0A%E2%9C%BA%20Faida:%20Matlab%20ye%20hai%20ke%20wuzu%20is%20ehtemaam%20se%20kiya%20jaye%20ke%20azaa-e-wazu%20mein%20koi%20jagah%20khushk%20na%20rahe.%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><b> </b></center> </center> </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/IPvFlHZcUmo/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/IPvFlHZcUmo?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/IPvFlHZcUmo"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> <br /></div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-62056824130082569992026-05-10T05:00:00.003+05:302026-05-10T05:00:00.121+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 A'ishah Raziyallahu 'anha riwaayat karti hain ke Rasulullah ﷺ ne irshaad farmaaya: Allah Ta'ala safon ke daayein jaanib khade hone waalon par rehmat naazil farmaate hain aur farishte unke liye maghfirat ki dua karte hain. (Abu Dawud: 676)</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%20A%27ishah%20Raziyallahu%20%27anha%20riwaayat%20karti%20hain%20ke%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Allah%20Ta%27ala%20safon%20ke%20daayein%20jaanib%20khade%20hone%20waalon%20par%20rehmat%20naazil%20farmaate%20hain%20aur%20farishte%20unke%20liye%20maghfirat%20ki%20dua%20karte%20hain.%20(Abu%20Dawud:%20676)%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%20A'ishah%20Raziyallahu%20'anha%20riwaayat%20karti%20hain%20ke%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Allah%20Ta'ala%20safon%20ke%20daayein%20jaanib%20khade%20hone%20waalon%20par%20rehmat%20naazil%20farmaate%20hain%20aur%20farishte%20unke%20liye%20maghfirat%20ki%20dua%20karte%20hain.%20(Abu%20Dawud:%20676)%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/H8J0DAeHo7Y/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/H8J0DAeHo7Y?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/H8J0DAeHo7Y"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-73738858191675350722026-05-09T05:00:00.002+05:302026-05-09T05: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>Allah ke Rasool ﷺ ne farmaaya: Saari makhlooq Allah Ta'ala ki ayaal (aur ghar ke afraad ki haisiyat rakhti) hai aur Allah Ta'ala ko sab se ziyaada mehboob woh aadmi hai, jo us ki ayaal ke saath achchha bartaao aur ehsaan ka muaamla kare. (Sho'abul Iman: 8448)</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:%20Allah%20ke%20Rasool%20%EF%B7%BA%20ne%20farmaaya:%20Saari%20makhlooq%20Allah%20Ta%27ala%20ki%20ayaal%20(aur%20ghar%20ke%20afraad%20ki%20haisiyat%20rakhti)%20hai%20aur%20Allah%20Ta%27ala%20ko%20sab%20se%20ziyaada%20mehboob%20woh%20aadmi%20hai,%20jo%20us%20ki%20ayaal%20ke%20saath%20achchha%20bartaao%20aur%20ehsaan%20ka%20muaamla%20kare.%20(Sho%27abul%20Iman:%208448)%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:%20Allah%20ke%20Rasool%20%EF%B7%BA%20ne%20farmaaya:%20Saari%20makhlooq%20Allah%20Ta'ala%20ki%20ayaal%20(aur%20ghar%20ke%20afraad%20ki%20haisiyat%20rakhti)%20hai%20aur%20Allah%20Ta'ala%20ko%20sab%20se%20ziyaada%20mehboob%20woh%20aadmi%20hai,%20jo%20us%20ki%20ayaal%20ke%20saath%20achchha%20bartaao%20aur%20ehsaan%20ka%20muaamla%20kare.%20(Sho'abul%20Iman:%208448)%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/FgLrWtEpzY0/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/FgLrWtEpzY0?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/FgLrWtEpzY0"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-620549657986789432026-05-08T05:00:00.003+05:302026-05-08T05: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>Huzoor ﷺ ne farmaaya: Tum log zameen waalon par rahem karo, aasmaan waala rab tum par rahem karega. (Abu Dawood: 4941)</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="https://api.whatsapp.com/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:%20Huzoor%20%EF%B7%BA%20ne%20farmaaya:%20Tum%20log%20zameen%20waalon%20par%20rahem%20karo,%20aasmaan%20waala%20rab%20tum%20par%20rahem%20karega.%20(Abu%20Dawood:%204941)%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/vu1IF1029ww/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/vu1IF1029ww?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/vu1IF1029ww"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-27086763027315645242026-05-07T05:00:00.003+05:302026-05-07T05:00:00.202+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 Bara Bin 'Azib Raziyallahu 'anhuma riwaayat karte hain ke Rasulullah ﷺ ne irshaad farmaaya: Allah Ta'ala agli safon se qareeb saf waalon par rehmat naazil farmaate hain aur uske farishte unke liye dua karte hain. Allah Ta'ala ko us qadam se zyaada koi qadam mehboob nahin, jisko insaan saf ki khaali jagah ko pur karne ke liye uthhaata hai. (Abu Dawud: 543)</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="https://api.whatsapp.com/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%20Bara%20Bin%20'Azib%20Raziyallahu%20'anhuma%20riwaayat%20karte%20hain%20ke%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Allah%20Ta'ala%20agli%20safon%20se%20qareeb%20saf%20waalon%20par%20rehmat%20naazil%20farmaate%20hain%20aur%20uske%20farishte%20unke%20liye%20dua%20karte%20hain.%20Allah%20Ta'ala%20ko%20us%20qadam%20se%20zyaada%20koi%20qadam%20mehboob%20nahin,%20jisko%20insaan%20saf%20ki%20khaali%20jagah%20ko%20pur%20karne%20ke%20liye%20uthhaata%20hai.%20(Abu%20Dawud:%20543)%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/Aj0uAeNzlQ4/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/Aj0uAeNzlQ4?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/Aj0uAeNzlQ4"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-50118636550617694002026-05-06T05:00:00.003+05:302026-05-06T05:00:00.128+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 Bara Bin 'Azib Raziyallahu 'anhuma se riwaayat hai ke Rasulullah ﷺ saf mein ek kinaare se dusre kinaare tak tashreef laate, humare sinon aur kaandhon par haath mubaarak phair kar safon ko seedha farmaate aur irshaad farmaate: (Safon mein) aage peeche na raho, agar aisa hua to tumhare dilon mein ek dusre se ikhtilaaf paida ho jayega aur farmaaya karte: Allah Ta'ala agli saf waalon par rehmatein naazil farmaate hain aur unke liye farishte maghfirat ki dua karte hain. (Abu Dawud: 664)</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%20Bara%20Bin%20%27Azib%20Raziyallahu%20%27anhuma%20se%20riwaayat%20hai%20ke%20Rasulullah%20%EF%B7%BA%20saf%20mein%20ek%20kinaare%20se%20dusre%20kinaare%20tak%20tashreef%20laate,%20humare%20sinon%20aur%20kaandhon%20par%20haath%20mubaarak%20phair%20kar%20safon%20ko%20seedha%20farmaate%20aur%20irshaad%20farmaate:%20(Safon%20mein)%20aage%20peeche%20na%20raho,%20agar%20aisa%20hua%20to%20tumhare%20dilon%20mein%20ek%20dusre%20se%20ikhtilaaf%20paida%20ho%20jayega%20aur%20farmaaya%20karte:%20Allah%20Ta%27ala%20agli%20saf%20waalon%20par%20rehmatein%20naazil%20farmaate%20hain%20aur%20unke%20liye%20farishte%20maghfirat%20ki%20dua%20karte%20hain.%20(Abu%20Dawud:%20664)%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%20Bara%20Bin%20'Azib%20Raziyallahu%20'anhuma%20se%20riwaayat%20hai%20ke%20Rasulullah%20%EF%B7%BA%20saf%20mein%20ek%20kinaare%20se%20dusre%20kinaare%20tak%20tashreef%20laate,%20humare%20sinon%20aur%20kaandhon%20par%20haath%20mubaarak%20phair%20kar%20safon%20ko%20seedha%20farmaate%20aur%20irshaad%20farmaate:%20(Safon%20mein)%20aage%20peeche%20na%20raho,%20agar%20aisa%20hua%20to%20tumhare%20dilon%20mein%20ek%20dusre%20se%20ikhtilaaf%20paida%20ho%20jayega%20aur%20farmaaya%20karte:%20Allah%20Ta'ala%20agli%20saf%20waalon%20par%20rehmatein%20naazil%20farmaate%20hain%20aur%20unke%20liye%20farishte%20maghfirat%20ki%20dua%20karte%20hain.%20(Abu%20Dawud:%20664)%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/TYsg3L0odMA/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/TYsg3L0odMA?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/TYsg3L0odMA"><span style="color: #339966;"><u>WhatsApp</u></span></a></div> </td> </tr> </tbody></table> </div> Unknownnoreply@blogger.com0