tag:blogger.com,1999:blog-26195366547611519322026-06-30T16:30:00.191+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.comBlogger325125tag:blogger.com,1999:blog-2619536654761151932.post-53579549280039289602026-06-30T16:30:00.000+05:302026-06-30T16:30:00.186+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-73094583556770433442026-06-30T16:30:00.000+05:302026-06-30T16:30:00.186+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-48831642247295726262026-06-30T05:00:00.009+05:302026-06-30T05:00:00.122+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>خَيْرُكُمْ مَنْ تَعَلَّمَ الْقُرْآنَ وَعَلَّمَهُ</b></center> <center> <b>&nbsp;</b></center> <center> <b>Khairukum man ta'allamal Qur'aana wa 'allamah</b><br /> <br /> Tarjama: Tum mein sab se behtar woh hai jo Qur'aan ko seekhe aur sikhaaye.<br /> <br /> (Bukhaari: 5027)<br /> <br /> Qur'an-e-Kareem duniya ki sab se achchhi kitaab hai, is mein achchi achchi baatein aur qisse hain. Jin ko padh kar insaan ko sukoon milta hai, aur us par amal karne se duniya-o-aakhirat mein kaamyaabi milti hai, jo aadmi Qur'aan padhta aur padhaata hai, woh sab se achchha aadmi hai.<br /> <br /> <center> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2030&amp;body=%D8%AE%D9%8E%D9%8A%D9%92%D8%B1%D9%8F%D9%83%D9%8F%D9%85%D9%92%20%D9%85%D9%8E%D9%86%D9%92%20%D8%AA%D9%8E%D8%B9%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%20%D8%A7%D9%84%D9%92%D9%82%D9%8F%D8%B1%D9%92%D8%A2%D9%86%D9%8E%20%D9%88%D9%8E%D8%B9%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%D9%87%D9%8F%0D%0A%0D%0A%E2%9C%BA%20*Khairukum%20man%20ta'allamal%20Qur'aana%20wa%20'allamah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tum%20mein%20sab%20se%20behtar%20woh%20hai%20jo%20Qur'aan%20ko%20seekhe%20aur%20sikhaaye.%0D%0A%0D%0A%E2%9C%BA%20(Bukhaari:%205027)%0D%0A%0D%0A%E2%9C%BA%20Qur'an-e-Kareem%20duniya%20ki%20sab%20se%20achchhi%20kitaab%20hai,%20is%20mein%20achchi%20achchi%20baatein%20aur%20qisse%20hain.%20Jin%20ko%20padh%20kar%20insaan%20ko%20sukoon%20milta%20hai,%20aur%20us%20par%20amal%20karne%20se%20duniya-o-aakhirat%20mein%20kaamyaabi%20milti%20hai,%20jo%20aadmi%20Qur'aan%20padhta%20aur%20padhaata%20hai,%20woh%20sab%20se%20achchha%20aadmi%20hai.%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June – 30 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%AE%D9%8E%D9%8A%D9%92%D8%B1%D9%8F%D9%83%D9%8F%D9%85%D9%92%20%D9%85%D9%8E%D9%86%D9%92%20%D8%AA%D9%8E%D8%B9%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%20%D8%A7%D9%84%D9%92%D9%82%D9%8F%D8%B1%D9%92%D8%A2%D9%86%D9%8E%20%D9%88%D9%8E%D8%B9%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%D9%87%D9%8F%0D%0A%0D%0A%E2%9C%BA%20*Khairukum%20man%20ta%27allamal%20Qur%27aana%20wa%20%27allamah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tum%20mein%20sab%20se%20behtar%20woh%20hai%20jo%20Qur%27aan%20ko%20seekhe%20aur%20sikhaaye.%0D%0A%0D%0A%E2%9C%BA%20%28Bukhaari:%205027%29%0D%0A%0D%0A%E2%9C%BA%20Qur%27an-e-Kareem%20duniya%20ki%20sab%20se%20achchhi%20kitaab%20hai,%20is%20mein%20achchi%20achchi%20baatein%20aur%20qisse%20hain.%20Jin%20ko%20padh%20kar%20insaan%20ko%20sukoon%20milta%20hai,%20aur%20us%20par%20amal%20karne%20se%20duniya-o-aakhirat%20mein%20kaamyaabi%20milti%20hai,%20jo%20aadmi%20Qur%27aan%20padhta%20aur%20padhaata%20hai,%20woh%20sab%20se%20achchha%20aadmi%20hai.%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%AE%D9%8E%D9%8A%D9%92%D8%B1%D9%8F%D9%83%D9%8F%D9%85%D9%92%20%D9%85%D9%8E%D9%86%D9%92%20%D8%AA%D9%8E%D8%B9%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%20%D8%A7%D9%84%D9%92%D9%82%D9%8F%D8%B1%D9%92%D8%A2%D9%86%D9%8E%20%D9%88%D9%8E%D8%B9%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%D9%87%D9%8F%0D%0A%0D%0A%E2%9C%BA%20*Khairukum%20man%20ta'allamal%20Qur'aana%20wa%20'allamah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tum%20mein%20sab%20se%20behtar%20woh%20hai%20jo%20Qur'aan%20ko%20seekhe%20aur%20sikhaaye.%0D%0A%0D%0A%E2%9C%BA%20(Bukhaari:%205027)%0D%0A%0D%0A%E2%9C%BA%20Qur'an-e-Kareem%20duniya%20ki%20sab%20se%20achchhi%20kitaab%20hai,%20is%20mein%20achchi%20achchi%20baatein%20aur%20qisse%20hain.%20Jin%20ko%20padh%20kar%20insaan%20ko%20sukoon%20milta%20hai,%20aur%20us%20par%20amal%20karne%20se%20duniya-o-aakhirat%20mein%20kaamyaabi%20milti%20hai,%20jo%20aadmi%20Qur'aan%20padhta%20aur%20padhaata%20hai,%20woh%20sab%20se%20achchha%20aadmi%20hai.%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></center> <b></b></center> </td></tr> </tbody></table> <br /></div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-17519634615790818652026-06-29T16:30:00.000+05:302026-06-29T16:30:00.210+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-79951609821136242542026-06-29T05:00:00.000+05:302026-06-29T05:00:00.206+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-91997079095141682492026-06-29T05:00:00.000+05:302026-06-29T05:00:00.206+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>مَنْ سَتَرَ مُسْلِمًا سَتَرَهُ اللهُ يَوْمَ الْقِيَامَةِ</b></center> <center> <b>&nbsp;</b></center> <center> <b>Man satara musliman satarahullaahu yaumal qiyaamah</b><br /> <br /> Tarjama: Rasulullah ﷺ ne irshaad farmaaya: Jo shakhs kisi musalmaan ke aib ko chupaata hai Allah Ta'ala Qayaamat ke din us ke aib ko chupaayega.<br /> <br /> (Bukhari: 2442)<br /> <br /> <center> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2029&amp;body=%D9%85%D9%8E%D9%86%D9%92%20%D8%B3%D9%8E%D8%AA%D9%8E%D8%B1%D9%8E%20%D9%85%D9%8F%D8%B3%D9%92%D9%84%D9%90%D9%85%D9%8B%D8%A7%20%D8%B3%D9%8E%D8%AA%D9%8E%D8%B1%D9%8E%D9%87%D9%8F%20%D8%A7%D9%84%D9%84%D9%87%D9%8F%20%D9%8A%D9%8E%D9%88%D9%92%D9%85%D9%8E%20%D8%A7%D9%84%D9%92%D9%82%D9%90%D9%8A%D9%8E%D8%A7%D9%85%D9%8E%D8%A9%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Man%20satara%20musliman%20satarahullaahu%20yaumal%20qiyaamah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20shakhs%20kisi%20musalmaan%20ke%20aib%20ko%20chupaata%20hai%20Allah%20Ta'ala%20Qayaamat%20ke%20din%20us%20ke%20aib%20ko%20chupaayega.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%202442)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June – 29 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%85%D9%8E%D9%86%D9%92%20%D8%B3%D9%8E%D8%AA%D9%8E%D8%B1%D9%8E%20%D9%85%D9%8F%D8%B3%D9%92%D9%84%D9%90%D9%85%D9%8B%D8%A7%20%D8%B3%D9%8E%D8%AA%D9%8E%D8%B1%D9%8E%D9%87%D9%8F%20%D8%A7%D9%84%D9%84%D9%87%D9%8F%20%D9%8A%D9%8E%D9%88%D9%92%D9%85%D9%8E%20%D8%A7%D9%84%D9%92%D9%82%D9%90%D9%8A%D9%8E%D8%A7%D9%85%D9%8E%D8%A9%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Man%20satara%20musliman%20satarahullaahu%20yaumal%20qiyaamah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20shakhs%20kisi%20musalmaan%20ke%20aib%20ko%20chupaata%20hai%20Allah%20Ta%27ala%20Qayaamat%20ke%20din%20us%20ke%20aib%20ko%20chupaayega.%0D%0A%0D%0A%E2%9C%BA%20%28Bukhari:%202442%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%85%D9%8E%D9%86%D9%92%20%D8%B3%D9%8E%D8%AA%D9%8E%D8%B1%D9%8E%20%D9%85%D9%8F%D8%B3%D9%92%D9%84%D9%90%D9%85%D9%8B%D8%A7%20%D8%B3%D9%8E%D8%AA%D9%8E%D8%B1%D9%8E%D9%87%D9%8F%20%D8%A7%D9%84%D9%84%D9%87%D9%8F%20%D9%8A%D9%8E%D9%88%D9%92%D9%85%D9%8E%20%D8%A7%D9%84%D9%92%D9%82%D9%90%D9%8A%D9%8E%D8%A7%D9%85%D9%8E%D8%A9%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Man%20satara%20musliman%20satarahullaahu%20yaumal%20qiyaamah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Rasulullah%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20shakhs%20kisi%20musalmaan%20ke%20aib%20ko%20chupaata%20hai%20Allah%20Ta'ala%20Qayaamat%20ke%20din%20us%20ke%20aib%20ko%20chupaayega.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%202442)%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></center> <b></b></center> </td></tr> </tbody></table> <br /></div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-57018836341837131412026-06-28T16:30:00.000+05:302026-06-28T16: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="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-81740398085967858742026-06-28T05:00:00.009+05:302026-06-28T05:00:00.233+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>أَلْحَيَاءُ شُعْبَةٌ مِّنَ الْإِيْمَانِ</b></center> <center> <b>&nbsp;</b></center> <center> <b>Al Hayaau shu'abatum minal imaan</b><br /> <br /> Tarjama: Haya Imaan ki ek ahem shaakh hai.<br /> <br /> (Bukhari: 9)<br /> <br /> <center> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2028&amp;body=%D8%A3%D9%8E%D9%84%D9%92%D8%AD%D9%8E%D9%8A%D9%8E%D8%A7%D8%A1%D9%8F%20%D8%B4%D9%8F%D8%B9%D9%92%D8%A8%D9%8E%D8%A9%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%92%D8%A5%D9%90%D9%8A%D9%92%D9%85%D9%8E%D8%A7%D9%86%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Al%20Hayaau%20shu'abatum%20minal%20imaan*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Haya%20Imaan%20ki%20ek%20ahem%20shaakh%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%209)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June – 28 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A3%D9%8E%D9%84%D9%92%D8%AD%D9%8E%D9%8A%D9%8E%D8%A7%D8%A1%D9%8F%20%D8%B4%D9%8F%D8%B9%D9%92%D8%A8%D9%8E%D8%A9%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%92%D8%A5%D9%90%D9%8A%D9%92%D9%85%D9%8E%D8%A7%D9%86%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Al%20Hayaau%20shu%27abatum%20minal%20imaan*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Haya%20Imaan%20ki%20ek%20ahem%20shaakh%20hai.%0D%0A%0D%0A%E2%9C%BA%20%28Bukhari:%209%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A3%D9%8E%D9%84%D9%92%D8%AD%D9%8E%D9%8A%D9%8E%D8%A7%D8%A1%D9%8F%20%D8%B4%D9%8F%D8%B9%D9%92%D8%A8%D9%8E%D8%A9%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%92%D8%A5%D9%90%D9%8A%D9%92%D9%85%D9%8E%D8%A7%D9%86%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Al%20Hayaau%20shu'abatum%20minal%20imaan*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Haya%20Imaan%20ki%20ek%20ahem%20shaakh%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%209)%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%0Ahttps://youtu.be/dzhYRyBfmF8"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></center> <b></b></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/dzhYRyBfmF8/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/dzhYRyBfmF8?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/dzhYRyBfmF8"><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-85583156590468588232026-06-28T05:00:00.000+05:302026-06-28T05:00:00.368+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-30893319300466963152026-06-27T16:30:00.000+05:302026-06-27T16: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="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-62144705159025106242026-06-27T05:00:00.009+05:302026-06-27T05:00:00.206+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>إِنَّمَا الْأَعْمَالُ بِالنِّيَّاتِ</b></center> <center> <b>&nbsp;</b></center> <center> <b>Innamal a'amaalu binniyyaat</b><br /> <br /> Tarjama: Aamaal ka daar-o-madaar niyyaton par hai.<br /> <br /> (Bukhari: 1)<br /> <br /> <center> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2027&amp;body=%D8%A5%D9%90%D9%86%D9%8E%D9%91%D9%85%D9%8E%D8%A7%20%D8%A7%D9%84%D9%92%D8%A3%D9%8E%D8%B9%D9%92%D9%85%D9%8E%D8%A7%D9%84%D9%8F%20%D8%A8%D9%90%D8%A7%D9%84%D9%86%D9%90%D9%91%D9%8A%D9%8E%D9%91%D8%A7%D8%AA%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Innamal%20a'amaalu%20binniyyaat*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Aamaal%20ka%20daar-o-madaar%20niyyaton%20par%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%201)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June – 27 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D9%86%D9%8E%D9%91%D9%85%D9%8E%D8%A7%20%D8%A7%D9%84%D9%92%D8%A3%D9%8E%D8%B9%D9%92%D9%85%D9%8E%D8%A7%D9%84%D9%8F%20%D8%A8%D9%90%D8%A7%D9%84%D9%86%D9%90%D9%91%D9%8A%D9%8E%D9%91%D8%A7%D8%AA%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Innamal%20a%27amaalu%20binniyyaat*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Aamaal%20ka%20daar-o-madaar%20niyyaton%20par%20hai.%0D%0A%0D%0A%E2%9C%BA%20%28Bukhari:%201%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D9%86%D9%8E%D9%91%D9%85%D9%8E%D8%A7%20%D8%A7%D9%84%D9%92%D8%A3%D9%8E%D8%B9%D9%92%D9%85%D9%8E%D8%A7%D9%84%D9%8F%20%D8%A8%D9%90%D8%A7%D9%84%D9%86%D9%90%D9%91%D9%8A%D9%8E%D9%91%D8%A7%D8%AA%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Innamal%20a'amaalu%20binniyyaat*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Aamaal%20ka%20daar-o-madaar%20niyyaton%20par%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%201)%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></center> <b></b></center> </td></tr> </tbody></table> <br /></div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-19558622653125072582026-06-27T05:00:00.000+05:302026-06-27T05:00:00.206+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-55153653876324641492026-06-26T16:30:00.000+05:302026-06-26T16:30:00.228+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-57333195084232290382026-06-26T16:30:00.000+05:302026-06-26T16:30:00.228+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-113540659742787382026-06-26T05:00:00.009+05:302026-06-26T05:00:00.205+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>رِضَى الرَّبِّ فِيْ رِضَى الْوَالِدِ</b></center> <center> <b>&nbsp;</b></center> <center> <b>Rizar rabbi fee rizal waalid</b><br /> <br /> Tarjama: Allah Ta'ala ki khushi waalid ki khushi mein hai.<br /> <br /> (Tirmizi: 1899)<br /> <br /> <center> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2026&amp;body=%D8%B1%D9%90%D8%B6%D9%8E%D9%89%20%D8%A7%D9%84%D8%B1%D9%91%D9%8E%D8%A8%D9%91%D9%90%20%D9%81%D9%90%D9%8A%D9%92%20%D8%B1%D9%90%D8%B6%D9%8E%D9%89%20%D8%A7%D9%84%D9%92%D9%88%D9%8E%D8%A7%D9%84%D9%90%D8%AF%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Rizar%20rabbi%20fee%20rizal%20waalid*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Allah%20Ta'ala%20ki%20khushi%20waalid%20ki%20khushi%20mein%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%201899)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June – 26 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%B1%D9%90%D8%B6%D9%8E%D9%89%20%D8%A7%D9%84%D8%B1%D9%91%D9%8E%D8%A8%D9%91%D9%90%20%D9%81%D9%90%D9%8A%D9%92%20%D8%B1%D9%90%D8%B6%D9%8E%D9%89%20%D8%A7%D9%84%D9%92%D9%88%D9%8E%D8%A7%D9%84%D9%90%D8%AF%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Rizar%20rabbi%20fee%20rizal%20waalid*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Allah%20Ta%27ala%20ki%20khushi%20waalid%20ki%20khushi%20mein%20hai.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%201899%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%B1%D9%90%D8%B6%D9%8E%D9%89%20%D8%A7%D9%84%D8%B1%D9%91%D9%8E%D8%A8%D9%91%D9%90%20%D9%81%D9%90%D9%8A%D9%92%20%D8%B1%D9%90%D8%B6%D9%8E%D9%89%20%D8%A7%D9%84%D9%92%D9%88%D9%8E%D8%A7%D9%84%D9%90%D8%AF%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Rizar%20rabbi%20fee%20rizal%20waalid*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Allah%20Ta'ala%20ki%20khushi%20waalid%20ki%20khushi%20mein%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%201899)%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> </tbody></table> <br /></div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-63726021150350009972026-06-25T16:30:00.000+05:302026-06-25T16:30:00.124+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-73298610719637250622026-06-25T16:30:00.000+05:302026-06-25T16:30:00.124+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-34966803284827287322026-06-25T05:00:00.009+05:302026-06-25T05:00:00.207+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>اَلتَّاجِرُ الصَّدُوْقُ الْأَمِيْنُ مَعَ النَّبِيِّيْنَ وَالصِّدِّيْقِيْنَ وَالشُّهَدَاءِ</b></center> <center> <b>&nbsp;</b></center> <center> <b>Attaajirus sadooqul ameenu ma'annabiyyeena wassiddeeqeena wash-shuhadaa</b><br /> <br /> Tarjama: Sachcha amaanatdaar taajir ambiya, Siddeeqeen aur Shuhada ke saath hoga.<br /> <br /> (Tirmizi: 1209)<br /> <br /> <center> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2025&amp;body=%D8%A7%D9%8E%D9%84%D8%AA%D9%91%D9%8E%D8%A7%D8%AC%D9%90%D8%B1%D9%8F%20%D8%A7%D9%84%D8%B5%D9%91%D9%8E%D8%AF%D9%8F%D9%88%D9%92%D9%82%D9%8F%20%D8%A7%D9%84%D9%92%D8%A3%D9%8E%D9%85%D9%90%D9%8A%D9%92%D9%86%D9%8F%20%D9%85%D9%8E%D8%B9%D9%8E%20%D8%A7%D9%84%D9%86%D9%91%D9%8E%D8%A8%D9%90%D9%8A%D9%91%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D8%B5%D9%91%D9%90%D8%AF%D9%91%D9%90%D9%8A%D9%92%D9%82%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D8%B4%D9%91%D9%8F%D9%87%D9%8E%D8%AF%D9%8E%D8%A7%D8%A1%D9%90%0D%0A%0D%0A%E2%9C%BA%20Attaajirus%20sadooqul%20ameenu%20ma'annabiyyeena%20wassiddeeqeena%20wash-shuhadaa%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Sachcha%20amaanatdaar%20taajir%20ambiya,%20Siddeeqeen%20aur%20Shuhada%20ke%20saath%20hoga.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%201209)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June – 25 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A7%D9%8E%D9%84%D8%AA%D9%91%D9%8E%D8%A7%D8%AC%D9%90%D8%B1%D9%8F%20%D8%A7%D9%84%D8%B5%D9%91%D9%8E%D8%AF%D9%8F%D9%88%D9%92%D9%82%D9%8F%20%D8%A7%D9%84%D9%92%D8%A3%D9%8E%D9%85%D9%90%D9%8A%D9%92%D9%86%D9%8F%20%D9%85%D9%8E%D8%B9%D9%8E%20%D8%A7%D9%84%D9%86%D9%91%D9%8E%D8%A8%D9%90%D9%8A%D9%91%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D8%B5%D9%91%D9%90%D8%AF%D9%91%D9%90%D9%8A%D9%92%D9%82%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D8%B4%D9%91%D9%8F%D9%87%D9%8E%D8%AF%D9%8E%D8%A7%D8%A1%D9%90%0D%0A%0D%0A%E2%9C%BA%20Attaajirus%20sadooqul%20ameenu%20ma%27annabiyyeena%20wassiddeeqeena%20wash-shuhadaa%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Sachcha%20amaanatdaar%20taajir%20ambiya,%20Siddeeqeen%20aur%20Shuhada%20ke%20saath%20hoga.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%201209%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A7%D9%8E%D9%84%D8%AA%D9%91%D9%8E%D8%A7%D8%AC%D9%90%D8%B1%D9%8F%20%D8%A7%D9%84%D8%B5%D9%91%D9%8E%D8%AF%D9%8F%D9%88%D9%92%D9%82%D9%8F%20%D8%A7%D9%84%D9%92%D8%A3%D9%8E%D9%85%D9%90%D9%8A%D9%92%D9%86%D9%8F%20%D9%85%D9%8E%D8%B9%D9%8E%20%D8%A7%D9%84%D9%86%D9%91%D9%8E%D8%A8%D9%90%D9%8A%D9%91%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D8%B5%D9%91%D9%90%D8%AF%D9%91%D9%90%D9%8A%D9%92%D9%82%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D8%B4%D9%91%D9%8F%D9%87%D9%8E%D8%AF%D9%8E%D8%A7%D8%A1%D9%90%0D%0A%0D%0A%E2%9C%BA%20Attaajirus%20sadooqul%20ameenu%20ma'annabiyyeena%20wassiddeeqeena%20wash-shuhadaa%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Sachcha%20amaanatdaar%20taajir%20ambiya,%20Siddeeqeen%20aur%20Shuhada%20ke%20saath%20hoga.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%201209)%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></center> <b></b></center> </td></tr> </tbody></table> <br /></div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-90916379703286898652026-06-24T16:30:00.000+05:302026-06-24T16:30:00.115+05:30<div class="light-theme" id="tasbihThemeWrapper" style="min-height: 4vh; padding-bottom: 0px; transition: background 0.4s;"> <div id="tasbihApp" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(226, 232, 240); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 60px; color: #1e293b; font-family: system-ui, sans-serif; margin: 0px auto; max-width: 440px; overflow: hidden; padding: 6px; position: relative; transition: 0.4s;"> <div id="goalSuccess" style="animation: 2s ease 0s infinite normal none running pulseGlow; background: rgba(34, 197, 94, 0.1); display: none; inset: 0px; pointer-events: none; position: absolute; z-index: 10;"></div> <div style="align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px;"> <div style="display: flex; flex-direction: column; gap: 4px;"> <div style="color: #0f172a; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;">Dhikr Counter</div> <div style="align-items: center; display: flex; flex-wrap: wrap; gap: 6px;"> <div id="userLevelBadge" style="background: rgb(254, 243, 199); border-radius: 6px; border: 1px solid rgb(252, 211, 77); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 8px;">Lvl 1: Beginner</div> <div id="streakBadge" style="background: rgb(254, 226, 226); border-radius: 6px; border: 1px solid rgb(252, 165, 165); color: #ef4444; font-size: 11px; font-weight: 800; padding: 2px 8px;">🔥 <span id="streakCount">0</span> Days</div> <div id="goalBadge" style="animation: 0.3s ease 0s 1 normal none running popUp; background: rgb(22, 163, 74); border-radius: 4px; color: white; display: none; font-size: 10px; font-weight: 800; padding: 2px 6px;">🏆 GOAL MET</div> </div> </div> <div id="soundToggle" onclick="toggleSound()" style="cursor: pointer; font-size: 26px; opacity: 0.8; transition: 0.2s;">🔊</div> </div> <div style="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-29271099541559355812026-06-24T05:00:00.009+05:302026-06-24T08:15:45.898+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>أَكْمَلُ الْمُؤْمِنِيْنَ إِيْمَانًا أَحْسَنُهُمْ خُلُقًا</b></center> <center> <b>&nbsp;</b></center> <center> <b>Akmalul mu'mineena imaanan ahsanuhum khuluqan</b><br /> <br /> Tarjama: Imaan waalon mein sab se kaamil Imaan waala woh shakhs hai jis ke akhlaaq sab se achchhe hon.<br /> <br /> (Tirmizi: 1162)<br /> <br /> <center> <span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2024&amp;body=%D8%A3%D9%8E%D9%83%D9%92%D9%85%D9%8E%D9%84%D9%8F%20%D8%A7%D9%84%D9%92%D9%85%D9%8F%D8%A4%D9%92%D9%85%D9%90%D9%86%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D8%A5%D9%90%D9%8A%D9%92%D9%85%D9%8E%D8%A7%D9%86%D9%8B%D8%A7%20%D8%A3%D9%8E%D8%AD%D9%92%D8%B3%D9%8E%D9%86%D9%8F%D9%87%D9%8F%D9%85%D9%92%20%D8%AE%D9%8F%D9%84%D9%8F%D9%82%D9%8B%D8%A7%0D%0A%0D%0A%E2%9C%BA%20*Akmalul%20mu'mineena%20imaanan%20ahsanuhum%20khuluqan*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Imaan%20waalon%20mein%20sab%20se%20kaamil%20Imaan%20waala%20woh%20shakhs%20hai%20jis%20ke%20akhlaaq%20sab%20se%20achchhe%20hon.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%201162)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June – 24 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A3%D9%8E%D9%83%D9%92%D9%85%D9%8E%D9%84%D9%8F%20%D8%A7%D9%84%D9%92%D9%85%D9%8F%D8%A4%D9%92%D9%85%D9%90%D9%86%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D8%A5%D9%90%D9%8A%D9%92%D9%85%D9%8E%D8%A7%D9%86%D9%8B%D8%A7%20%D8%A3%D9%8E%D8%AD%D9%92%D8%B3%D9%8E%D9%86%D9%8F%D9%87%D9%8F%D9%85%D9%92%20%D8%AE%D9%8F%D9%84%D9%8F%D9%82%D9%8B%D8%A7%0D%0A%0D%0A%E2%9C%BA%20*Akmalul%20mu%27mineena%20imaanan%20ahsanuhum%20khuluqan*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Imaan%20waalon%20mein%20sab%20se%20kaamil%20Imaan%20waala%20woh%20shakhs%20hai%20jis%20ke%20akhlaaq%20sab%20se%20achchhe%20hon.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%201162%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A3%D9%8E%D9%83%D9%92%D9%85%D9%8E%D9%84%D9%8F%20%D8%A7%D9%84%D9%92%D9%85%D9%8F%D8%A4%D9%92%D9%85%D9%90%D9%86%D9%90%D9%8A%D9%92%D9%86%D9%8E%20%D8%A5%D9%90%D9%8A%D9%92%D9%85%D9%8E%D8%A7%D9%86%D9%8B%D8%A7%20%D8%A3%D9%8E%D8%AD%D9%92%D8%B3%D9%8E%D9%86%D9%8F%D9%87%D9%8F%D9%85%D9%92%20%D8%AE%D9%8F%D9%84%D9%8F%D9%82%D9%8B%D8%A7%0D%0A%0D%0A%E2%9C%BA%20*Akmalul%20mu'mineena%20imaanan%20ahsanuhum%20khuluqan*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Imaan%20waalon%20mein%20sab%20se%20kaamil%20Imaan%20waala%20woh%20shakhs%20hai%20jis%20ke%20akhlaaq%20sab%20se%20achchhe%20hon.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%201162)%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></center> <b></b></center> </td></tr> </tbody></table> <br /></div> Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-87453073502537748522026-06-24T05:00:00.000+05:302026-06-24T05:00:08.103+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-89508747065937869212026-06-23T16:30:00.000+05:302026-06-23T16:30:00.127+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-60257280097483664852026-06-23T05:00:00.009+05:302026-06-23T05:00:00.626+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>لاَ يَدْخُلُ الْجَنَّةَ خِبٌّ وٌَلاَ مَنَّانٌ وٌَلاَ بَخِيْلٌ</b></center><center><b>&nbsp;</b></center><center><b>Laa yadkhulul jannata khabbunw walaa mannaanuw walaa bakheel</b><br /><br />Tarjama: Dhoke baaz, ehsaan jatlaane waala aur kanjoos, Jannat mein daakhil nahin hoga.<br />(Trimizi: 1963)<br /><br /> <br /><center><span class="Apple-style-span" style="color: blue;">Share on:</span>&nbsp;<a href="mailto:?subject=June%20%E2%80%93%2023&amp;body=%D9%84%D8%A7%D9%8E%20%D9%8A%D9%8E%D8%AF%D9%92%D8%AE%D9%8F%D9%84%D9%8F%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%8E%20%D8%AE%D9%90%D8%A8%D9%91%D9%8C%20%D9%88%D9%8E%D9%8C%D9%84%D8%A7%D9%8E%20%D9%85%D9%8E%D9%86%D9%91%D9%8E%D8%A7%D9%86%D9%8C%20%D9%88%D9%8C%D9%8E%D9%84%D8%A7%D9%8E%20%D8%A8%D9%8E%D8%AE%D9%90%D9%8A%D9%92%D9%84%D9%8C%0D%0A%0D%0A%E2%9C%BA%20*Laa%20yadkhulul%20jannata%20khabbunw%20walaa%20mannaanuw%20walaa%20bakheel.*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Dhoke%20baaz,%20ehsaan%20jatlaane%20waala%20aur%20kanjoos,%20Jannat%20mein%20daakhil%20nahin%20hoga.%0D%0A%0D%0A%E2%9C%BA%20(Trimizi:%201963)%0D%0A%0D%0A%F0%9F%93%B2%20Shared Via DailyIslamicMessage.blogspot.com" target="_blank" title="Send June – 23 in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a>&nbsp;|&nbsp;<a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%84%D8%A7%D9%8E%20%D9%8A%D9%8E%D8%AF%D9%92%D8%AE%D9%8F%D9%84%D9%8F%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%8E%20%D8%AE%D9%90%D8%A8%D9%91%D9%8C%20%D9%88%D9%8E%D9%8C%D9%84%D8%A7%D9%8E%20%D9%85%D9%8E%D9%86%D9%91%D9%8E%D8%A7%D9%86%D9%8C%20%D9%88%D9%8C%D9%8E%D9%84%D8%A7%D9%8E%20%D8%A8%D9%8E%D8%AE%D9%90%D9%8A%D9%92%D9%84%D9%8C%0D%0A%0D%0A%E2%9C%BA%20*Laa%20yadkhulul%20jannata%20khabbunw%20walaa%20mannaanuw%20walaa%20bakheel.*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Dhoke%20baaz,%20ehsaan%20jatlaane%20waala%20aur%20kanjoos,%20Jannat%20mein%20daakhil%20nahin%20hoga.%0D%0A%0D%0A%E2%9C%BA%20%28Trimizi:%201963%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a>&nbsp;|&nbsp;<a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%84%D8%A7%D9%8E%20%D9%8A%D9%8E%D8%AF%D9%92%D8%AE%D9%8F%D9%84%D9%8F%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%8E%20%D8%AE%D9%90%D8%A8%D9%91%D9%8C%20%D9%88%D9%8E%D9%8C%D9%84%D8%A7%D9%8E%20%D9%85%D9%8E%D9%86%D9%91%D9%8E%D8%A7%D9%86%D9%8C%20%D9%88%D9%8C%D9%8E%D9%84%D8%A7%D9%8E%20%D8%A8%D9%8E%D8%AE%D9%90%D9%8A%D9%92%D9%84%D9%8C%0D%0A%0D%0A%E2%9C%BA%20*Laa%20yadkhulul%20jannata%20khabbunw%20walaa%20mannaanuw%20walaa%20bakheel.*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Dhoke%20baaz,%20ehsaan%20jatlaane%20waala%20aur%20kanjoos,%20Jannat%20mein%20daakhil%20nahin%20hoga.%0D%0A%0D%0A%E2%9C%BA%20(Trimizi:%201963)%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%20App*%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a><b> </b></center></center></td></tr></tbody></table><br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-5607178453003386372026-06-23T05:00:00.000+05:302026-06-23T05:00:00.217+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-15870311827764680302026-06-22T16:30:00.000+05:302026-06-22T16: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="position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 60%;"> <div id="player" style="width:100%; max-width:640px; height:200px;"></div> <script> async function loadVideo() { const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=867132479&single=true&output=csv"; const response = await fetch(sheetURL); const text = await response.text(); // Get first cell (video ID) const videoId = text.split(",")[0].trim(); // Inject YouTube player document.getElementById("player").innerHTML = ` <iframe width="100%" height="100%" src="https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> `; } loadVideo(); </script> </div> <div style="display: flex; gap: 4px; margin: 12px 0px; text-align: center;"> <select id="dhikrSelect" onchange="loadDhikr(this.value)" style="background: rgb(255, 255, 255); border-radius: 4px; border: 1px solid rgb(203, 213, 225); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; color: #1e293b; cursor: pointer; flex: 1 1 0%; font-size: 12px; outline: none; padding: 2px;"> <option value="0">Astaghfirullah</option> <option value="1">SubhanAllah</option> <option value="2">Alhamdulillah</option> <option value="3">Allahu Akbar</option> <option value="4">La ilaha illallah</option> <option value="5">SubhanAllahi wa bihamdihi SubhanAllahil Azeem</option> <option value="6">La hawla wala quwwata illa billah</option> <option value="7">Hasbunallah wa ni'mal wakeel</option> <option value="8">SubhanAllahi wa bihamdihi</option> <option value="9">Allahumma salli ala Muhammad</option> <option value="10">Rabbighfir li (My Lord, forgive me)</option> <option value="11">Allahumma inni as'alukal jannah</option> <option value="12">A'udhu billahi minash shaytanir rajeem</option> <option value="13">Bismillahilladhi la yadurru...</option> <option value="14">La ilaha illallah wahdahu la sharika lah...</option> <option value="15">Allahumma antas salam...</option> </select> <div style="width: 8px;"> <input id="dailyGoalInput" onchange="updateGoal(this.value)" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(203, 213, 225); color: #d97706; font-size: 12px; font-weight: bold; padding: 2px; text-align: center; width: 100%;" type="number" value="100" /> </div> </div> <div id="dhikrText" style="color: #0284c7; font-size: 22px; font-weight: 700; line-height: 1.35; margin: 16px 0px 8px; min-height: 20px; padding: 0px 10px; text-align: center;">Astaghfirullah (I seek forgiveness from Allah)</div> <div id="fazailBox" style="background: rgb(241, 245, 249); border-radius: 6px; border: 1px solid rgb(226, 232, 240); color: #64748b; font-size: 13px; line-height: 1; margin: 0px 0px 24px; min-height: 20px; padding: 4px; text-align: center;">Loading virtue...</div> <div style="color: #94a3b8; font-size: 11px; margin-bottom: 1px; margin-top: -15px; text-align: center; font-weight: bold;">Session: <span id="sessionTimer">00:00</span></div> <div id="counterZone" onclick="increment()" style="cursor: pointer; height: 300px; margin: 0px auto 32px; position: relative; user-select: none; width: 300px;"> <svg style="height: 100%; inset: 0px; position: absolute; width: 100%;" viewbox="0 0 140 140"> <circle cx="70" cy="70" fill="none" r="54" stroke-width="10" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" opacity="0.6" r="64" stroke-width="4" stroke="#e2e8f0"> <circle cx="70" cy="70" fill="none" id="prog" r="54" stroke-dasharray="339.29" stroke-dashoffset="339.29" stroke-linecap="round" stroke-width="10" stroke="#22c55e" style="transition: stroke-dashoffset 0.3s;" transform="rotate(-90 70 70)"> <circle cx="70" cy="70" fill="none" id="dailyProg" r="64" stroke-dasharray="402.12" stroke-dashoffset="402.12" stroke-linecap="round" stroke-width="4" stroke="#f59e0b" style="transition: stroke-dashoffset 0.5s;" transform="rotate(-90 70 70)"> </circle></circle></circle></circle></svg> <div id="countDisplay" style="color: #0f172a; display: grid; font-family: &quot;Courier New&quot;, monospace; font-size: 90px; font-weight: bold; inset: 0px; letter-spacing: 4px; place-items: center; position: absolute;">00</div> <div id="percent" style="bottom: 35px; color: #16a34a; font-size: 20px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%);">0%</div> </div> <div style="color: #f59e0b; font-size: 13px; font-weight: 700; margin-bottom: 20px; margin-top: -10px; text-align: center;">Daily Goal: <span id="dailyGoalText">0 / 100</span></div> <div style="color: #475569; display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; gap: 16px; justify-content: space-around; margin: 20px 0px 36px;"> <div>Round: <b id="round" style="color: #d97706;">0</b></div> <div>Today: <b id="thisRound" style="color: #d97706;">0 / 100</b></div> <div>Total: <b id="total" style="color: #d97706;">0</b></div> </div> <div style="align-items: center; display: flex; flex-direction: column; gap: 36px; margin: 36px 0px;"> <button id="tapBtn" onclick="increment()" style="background: linear-gradient(145deg, rgb(34, 197, 94), rgb(21, 128, 61)); border-radius: 50%; border: none; box-shadow: rgba(34, 197, 94, 0.4) 0px 12px 30px; color: white; cursor: pointer; font-size: 24px; font-weight: 800; height: 100px; transition: 0.18s; width: 100px;">+1 Dhikr</button> <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;"> <button class="control-btn" onclick="decrement()" style="--color: #ef4444;">-1</button> <button class="control-btn" onclick="resetCount()" style="--color: #f59e0b;">Reset</button> <button class="control-btn" onclick="exportCounts()" style="--color: #8b5cf6;">Export</button> <button class="control-btn" onclick="shareToWhatsApp()" style="--color: #22c55e;">WhatsApp</button> </div> </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f9f9f9; } .form-container { max-width: 700px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } </style> </head> <body> <div class="form-container"> <!-- Paste your Google Forms embed code here --> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdrX6-hzpENQ5oogEZHFEcpME8lq-A0XqkN-XpM3JRCDqmVxQ/viewform?embedded=true" width="100%" height="552" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> </body> </html> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div id="latestBox" style="background:#fff; border-radius:16px; border:0px solid #f1f5f9; padding:0px; font-size:13px; box-shadow:0 0px 0px rgba(0,0,0,0.03);"> <table style="width:100%; border-collapse:collapse;"> <tbody id="fetchtotal"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div> <div style="margin-top:0px; padding-top:0px; border-top:1px solid #e2e8f0; text-align:center;"> <div style="font-size:16px; color:#334155; margin-bottom:12px; font-weight:700;">📅 Latest Submissions</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="width:100%; border-collapse:collapse;"> <tbody id="latestSubmissionsList"> <tr><td colspan="2">Loading recent submissions...</td></tr> </tbody> </table> </div> </div>    <div style="border-top: 1px solid rgb(226, 232, 240); margin-top: 0px; padding-top: 0px; text-align: center;"> <div style="color: #334155; font-size: 16px; font-weight: 700; margin-bottom: 12px;">🏆 Top 100 Leaderboard</div> <div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;"> <table style="border-collapse: collapse; width: 100%;"> <tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody> </table> </div> </div> <div style="border-top: 1px solid #334155; margin-top: 20px; padding-top: 12px;"> <!-- Title: Muted Cyan-Grey --> <div style="color: #94a3b8; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.12em;">All Dhikr Summary</div> <!-- Progress Bar: Dark Track with Vibrant Glow --> <div style="background: #1e293b; border-radius: 10px; height: 6px; margin: 0 0 10px; overflow: hidden; border: 1px solid #334155;"> <div id="levelProgressBar" style="background: linear-gradient(90deg, #fbbf24, #f59e0b); height: 100%; width: 0%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);"></div> </div> <!-- Summary Box: DEEP DARK BACKGROUND --> <div id="summarySection" style="background: #0f172a; border-radius: 12px; border: 1px solid #1e293b; box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 12px;"> <div id="summaryList" style="color: #cbd5e1; display: flex; flex-direction: column; gap: 5px; font-size: 11px;"></div> <!-- Grand Total: GOLD ACCENT BOX (Dark Mode Style) --> <div style="background: rgba(251, 191, 36, 0.1); border-radius: 8px; border: 1px solid rgba(251, 191, 36, 0.2); color: #fbbf24; font-size: 13px; font-weight: 900; margin-top: 10px; padding: 8px; text-align: center; text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);"> Grand Total: <span id="grandTotal" style="color: #fcd34d;">0</span> </div> </div> </div> <style> .control-btn { width: 75px; height: 75px; border-radius: 50%; background: var(--color); color: #fff !important; font-size: 13px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: 0.2s; } .control-btn:active { transform: scale(0.9); } #counterZone:active { transform: scale(0.98); } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes popUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style> <script> const levels = [ { min: 0, title: "Lvl 1: Beginner", next: 100 }, { min: 100, title: "Lvl 2: Seeker", next: 500 }, { min: 500, title: "Lvl 3: Devoted", next: 1000 }, { min: 1000, title: "Lvl 4: Persistent", next: 5000 }, { min: 5000, title: "Lvl 5: Zakir", next: 10000 }, { min: 10000, title: "Lvl 6: Master", next: 50000 } ]; const dhikrData = [ { name: "Astaghfirullah", translation: "I seek forgiveness from Allah", romanUrdu: "Main Allah se mafi mangta hoon", fazail: "Major Fazilat & Benefits of Istighfar (especially 100 times regularly): 1) Forgiveness of sins — even if they are as numerous as the foam of the sea (minor sins especially wiped away with sincere istighfar). 2) Relief from anxiety, distress & worries — it brings peace to the heart and removes sadness. 3) Opening doors of rizq (provision/sustenance) — Allah removes hardship and brings barakah in wealth & ease. 4) Mercy & blessings descend — affairs become easy, knowledge increases, and protection from calamities. 5) Heart purification — polishes the heart, strengthens iman, and increases closeness to Allah. 6) Acceptance of dua — removes barriers between you and Allah. 7) Path to Jannah — regular istighfar is a means of entering Paradise and repelling harm. 'Scholars emphasize that while the number 100 is Sunnah (and easy — you can say Astaghfirullah over 100 times in just 1 minute), the key is sincerity and presence of heart, not just rushing through the count.'" }, { name: "SubhanAllah", translation: "Glory be to Allah", romanUrdu: "Pak hai Allah", fazail: "Fills scale of good deeds on Judgment Day (Muslim 2691)" }, { name: "Alhamdulillah", translation: "Praise be to Allah", romanUrdu: "Tamam tareefein Allah ke liye hain", fazail: "Fills half the scale - best dhikr (Tirmidhi 3383)" }, { name: "Allahu Akbar", translation: "Allah is the Greatest", romanUrdu: "Allah sab se bada hai", fazail: "Greater than everything - fills heavens and earth (Muslim 2137)" }, { name: "La ilaha illallah", translation: "There is no god but Allah", romanUrdu: "Allah ke siwa koi mabood nahi", fazail: "Heaviest on scale, key to Paradise (Bukhari 6403)" }, { name: "SubhanAllahi wa bihamdihi SubhanAllahil Azeem", translation: "Glory be to Allah and Praise, Glory be to Allah the Supreme", romanUrdu: "Pak hai Allah apni tareef ke sath, Pak hai Allah azmat wala", fazail: "Light on tongue, heavy on scale (Bukhari 6682)" }, { name: "La hawla wala quwwata illa billah", translation: "There is no power nor might except with Allah", romanUrdu: "Na gunaah se bachne ki taqat hai na neki karne ki quwwat magar Allah ki tawfeeq se", fazail: "Treasure from Paradise (Bukhari 4205)" }, { name: "Hasbunallah wa ni'mal wakeel", translation: "Sufficient for us is Allah, and He is the best Disposer of affairs", romanUrdu: "Hamein Allah kafi hai aur woh behtareen karsaz hai", fazail: "Protection saved Ibrahim (Bukhari 3370)" }, { name: "SubhanAllahi wa bihamdihi", translation: "Glory be to Allah and Praise be to Him", romanUrdu: "Pak hai Allah apni tareef ke sath", fazail: "100 times forgives sins (Muslim 2691)" }, { name: "Allahumma salli ala Muhammad", translation: "O Allah, send blessings upon Muhammad", romanUrdu: "Ay Allah, Muhammad (S.A.W) par darood o salam bhej", fazail: "10 blessings for each salawat (Muslim 408)" }, { name: "Rabbighfir li", translation: "My Lord, forgive me", romanUrdu: "Ay mere Rub, mujhe maaf kar de", fazail: "Prophet said 70-100 times (Bukhari 6307)" }, { name: "Allahumma inni as'alukal jannah", translation: "O Allah, I ask You for Paradise", romanUrdu: "Ay Allah, main Tujh se Jannat ka suwal karta hoon", fazail: "Sincere dua grants Jannah (Tirmidhi 2572)" }, { name: "A'udhu billahi minash shaytanir rajeem", translation: "I seek refuge in Allah from Satan the outcast", romanUrdu: "Main Allah ki panah mangta hoon shaitan mardood se", fazail: "Protection from Shaytan (Bukhari 6115)" }, { name: "Bismillahilladhi la yadurru ma’asmihi shay’un fil-ardi wa la fis-sama’i wa huwas-Sami’ul-‘Alim", translation: "In the name of Allah, with whose name nothing can cause harm in the earth nor in the heavens", romanUrdu: "Allah ke naam ke sath jis ke naam ki barkat se zameen aur aasman ki koi cheez nuqsan nahi pahuncha sakti", fazail: "Protection from harm (Abu Dawud 5088)" }, { name: "La ilaha illallahu wahdahu la sharika lah, lahul-mulku wa lahul-hamdu, wa huwa 'ala kulli shay'in qadir.", translation: "There is no god but Allah alone, He has no partner, His is the dominion and His is the praise", romanUrdu: "Allah ke siwa koi mabood nahi, woh akela hai uska koi shareek nahi, usi ki badshahi hai aur usi ke liye tareef hai", fazail: "100 times is a great reward (Bukhari 3293)" }, { name: "Allahumma antas-salamu wa minkas-salamu, tabarakta ya dhal-jalali wal-ikram.", translation: "O Allah, You are Peace and from You comes peace. Blessed are You, O Possessor of Majesty and Honor", romanUrdu: "Ay Allah, Tu salamti wala hai aur Tujhi se salamti hai, barkat wala hai Tu ay azmat aur buzurgi wale", fazail: "Beautiful ending dua (Muslim 592)" } ]; let currentIdx = 0, soundEnabled = true, totalCount = 0, roundCount = 0, roundsCompleted = 0; let startTime = Date.now(); const els = { dhikrText: document.getElementById("dhikrText"), fazailBox: document.getElementById("fazailBox"), countDisplay: document.getElementById("countDisplay"), percent: document.getElementById("percent"), round: document.getElementById("round"), thisRound: document.getElementById("thisRound"), total: document.getElementById("total"), prog: document.getElementById("prog"), dailyProg: document.getElementById("dailyProg"), dailyGoalText: document.getElementById("dailyGoalText"), goalInput: document.getElementById("dailyGoalInput"), summaryList: document.getElementById("summaryList"), grandTotal: document.getElementById("grandTotal"), levelBadge: document.getElementById("userLevelBadge"), levelBar: document.getElementById("levelProgressBar"), goalSuccess: document.getElementById("goalSuccess"), goalBadge: document.getElementById("goalBadge"), leaderboardList: document.getElementById("leaderboardList"), streakCount: document.getElementById("streakCount"), sessionTimer: document.getElementById("sessionTimer") }; function format(n) { return n.toString().padStart(3, "0"); } function checkStreak() { const today = new Date().toDateString(); const lastDate = localStorage.getItem('lastDhikrDate'); let streak = parseInt(localStorage.getItem('userStreak') || "0"); if (lastDate && lastDate !== today) { const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); if (lastDate === yesterday.toDateString()) { streak++; } else { streak = 0; } } els.streakCount.textContent = streak; localStorage.setItem('userStreak', streak); } setInterval(() => { let diff = Math.floor((Date.now() - startTime) / 1000); let m = Math.floor(diff / 60).toString().padStart(2, '0'); let s = (diff % 60).toString().padStart(2, '0'); els.sessionTimer.textContent = `${m}:${s}`; }, 1000); async function fetchtotalList() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=2066860714&single=true&output=csv"; try { const res = await fetch(url); if (!res.ok) throw new Error(); const csv = await res.text(); const rows = csv.trim().split('\n').filter(line => line.trim() !== ''); const totalCount = rows.length > 1 ? (rows.length - 1) : 0; const finalValue = totalCount + "00"; document.getElementById("fetchtotal").innerHTML = ` <div style=" background: #e0f2fe; color: #0369a1; padding: 10px 14px; border-radius: 12px; text-align: center; font-family: sans-serif; max-width: 150px; margin: 10px auto; "> <div style=" font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #0ea5e9; margin-bottom: 2px; "> Total Zikr Done </div> <div style="font-size: 1.6rem; font-weight: 900; line-height: 1;"> ${finalValue} </div> </div> `; } catch (e) { document.getElementById("fetchtotal").innerText = "000"; } } async function fetchLatestSubmissions() { // Use this export format — more reliable in 2026 for public sheets const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=1441647287&single=true&output=csv"; try { // Optional: show loading document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; text-align:center;'>Loading submissions...</td></tr>"; const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error! Status: ${res.status}`); } const csv = await res.text(); // Split into lines, trim, filter empty, then split by comma (still fragile — see note below) const rows = csv.trim().split('\n') .filter(line => line.trim() !== '') .map(line => line.split(',')); // Skip header row (row 0) const dataRows = rows.slice(1); let html = ""; if (dataRows.length === 0) { html = "<tr><td colspan='2' style='padding:12px; color:#64748b; text-align:center;'>No submissions yet</td></tr>"; } else { dataRows.forEach((row, i) => { // Column B = index 1 = Name let name = (row[1] || 'Anon').trim(); // Basic HTML escape to prevent XSS name = name .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;'); html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};"> <!-- Rank Number: Larger, more legible bubble --> <td style="padding: 6px 10px; width: 35px; vertical-align: middle;"> <div style=" display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; font-size: 0.8rem; font-weight: 900; background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'}; color: ${i < 3 ? '#ffffff' : '#475569'}; "> ${i + 1} </div> </td> <!-- Name: Prominent and clear --> <td style="padding: 6px 10px; text-align: left; vertical-align: middle;"> <div style=" font-size: 0.9rem; font-weight: ${i < 3 ? '800' : '600'}; color: ${i === 0 ? '#92400e' : '#0f172a'}; letter-spacing: -0.01em; line-height: 1.2; "> ${name} </div> </td> <!-- Icon/Points: Scaled up for balance --> <td style="padding: 6px 12px; text-align: right; vertical-align: middle;"> <span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};"> ${i < 3 ? '★' : '✦'} </span> </td> </tr> `; }); } document.getElementById("latestSubmissionsList").innerHTML = html; } catch (e) { console.error("Fetch error:", e); document.getElementById("latestSubmissionsList").innerHTML = "<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>"; } } async function fetchLeaderboard() { const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv"; try { const res = await fetch(url); const csv = await res.text(); const rows = csv.split('\n').map(r => r.split(',')).slice(1); const leaderboardData = rows .map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 })) .sort((a, b) => b.total - a.total) .slice(0, 100); if (leaderboardData.length === 0) throw new Error(); // 1. Separate the Champion const [champion, ...runnersUp] = leaderboardData; // 2. Render Champion Card (Unique Style) const championHTML = ` <div style="margin-bottom: 15px;"> <table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;"> <tr> <td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">👑</td> <td style="padding: 12px 10px; vertical-align: middle;"> <div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div> <div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div> <td style="padding: 12px 20px; text-align: right; vertical-align: middle;"> <div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;"> ${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span> </div> </td> </tr> </table> </div> `; // 3. Render the rest of the list const rowsHTML = runnersUp.map((u, i) => { const rank = i + 2; // Offset by 2 because we sliced the first one const medal = rank === 2 ? "🥈" : rank === 3 ? "🥉" : rank; return ` <table style="width: 100%; border-collapse: collapse;"> <tbody> <tr style="border-bottom: 1px solid #f1f5f9;"> <!-- Medal --> <td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;"> ${medal} </td> <!-- Name --> <td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;"> ${u.name} </td> <!-- Total --> <td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;"> ${u.total.toLocaleString()}00 </td> </tr> </tbody> </table>`; }).join(''); // Inject both into your container els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`; } catch (e) { els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>"; } } // Auto-refresh latest every 60 seconds setInterval(fetchLatestSubmissions, 60000); function loadCurrent() { const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}'); totalCount = data.total; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); els.goalInput.value = localStorage.getItem('dailyGoal') || 100; updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList(); } function updateUI() { // Modified: Using full name from dhikrData els.dhikrText.textContent = dhikrData[currentIdx].name; els.fazailBox.textContent = dhikrData[currentIdx].fazail; els.countDisplay.textContent = format(roundCount); els.total.textContent = totalCount; els.round.textContent = roundsCompleted; els.thisRound.textContent = `${roundCount} / 100`; const p = (roundCount / 100) * 100; els.percent.textContent = Math.round(p) + "%"; els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29); updateStats(); } function updateStats() { let grand = 0; let html = ""; dhikrData.forEach((item, i) => { const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; grand += cnt; // Modified: Removed split to show full name in summary list html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`; }); els.summaryList.innerHTML = html; els.grandTotal.textContent = grand; let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0]; els.levelBadge.textContent = lvl.title; els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%"; const goal = parseInt(els.goalInput.value) || 100; els.dailyGoalText.textContent = `${grand} / ${goal}`; const dailyP = Math.min((grand / goal) * 100, 100); els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12); if (grand >= goal) { els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block"; localStorage.setItem('lastDhikrDate', new Date().toDateString()); } else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; } } function increment() { totalCount++; roundCount = totalCount % 100; // Update Daily Total let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() }; dailyData.count++; localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); } else { vibrate(40); } saveCurrent(); updateUI(); playSound("clickSound"); } function saveCurrent() { const today = new Date().toLocaleDateString(); // Get today's date string // Save total count (Existing) localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); // Save daily count (New) let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {}; // If the date in storage isn't today, reset the daily total if (dailyData.date !== today) { dailyData = { date: today, count: 0 }; } // We increment this in the increment() function below localStorage.setItem('dailyZikr', JSON.stringify(dailyData)); } function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } } function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } } function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); } function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } } function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); } function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "🔊" : "🔇"; } function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); } function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); } function shareToWhatsApp() { const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 }; const zikrToday = dailyData.count; const dhikrName = dhikrData[currentIdx].name; const streak = document.getElementById("streakCount").textContent; // 1. Build your text message exactly as you want it to appear const message = `*My Dhikr Journey Today* _Join me in earning rewards!_ *Current Status:* *My Streak:* ${streak} Days *Dhikr:* ${dhikrName} *Total:* ${totalCount} - - - - - - - - - - - - - - - - - - - - - - - *All Zikr Done Today:* ${zikrToday} *Grand Total of All Zikr:* ${els.grandTotal.textContent} - - - - - - - - - - - - - - - - - - - - - - - *Start your Dhikr now:* https://islamizikr.blogspot.com _Alhamdulillah! Keep going..._`; // 2. Use encodeURIComponent to make the message URL-safe const encodedMessage = encodeURIComponent(message); // 3. Use the correct Universal Link format // Format: https://wa.me[YOUR_ENCODED_TEXT] const whatsappUrl = `https://wa.me/?text=${encodedMessage}`; // 4. Open the link window.open(whatsappUrl, '_blank'); } function exportCounts() { let t = "Dhikr Counts:\n\n"; dhikrData.forEach((d, i) => { const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total; if (c > 0) t += `${d.name}: ${c}\n`; }); // Fallback for Android/WebViews const textArea = document.createElement("textarea"); textArea.value = t; // Ensure it's not visible but exists in the DOM textArea.style.position = "fixed"; textArea.style.left = "-9999px"; textArea.style.top = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { alert("All counts copied to clipboard!"); } else { alert("Unable to copy. Please try manually."); } } catch (err) { alert("Copying not supported on this device."); } document.body.removeChild(textArea); } loadCurrent(); </script> Unknownnoreply@blogger.com0