tag:blogger.com,1999:blog-26195366547611519322026-04-09T05:00:00.119+05:30Islamic Messages in Urdu-English Transliteration<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.comBlogger137125tag:blogger.com,1999:blog-2619536654761151932.post-58467860279437022682026-04-09T05:00:00.011+05:302026-04-09T05:00:00.114+05:3009 April Morning Zikr 2026<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: "Courier New", 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>
<div style="padding: 20px; text-align: center; background: #fff; border-top: 1px solid #f1f5f9;">
<a href="whatsapp://channel/0029Va9QdRV8kyyFKM2qvI2t" target="_blank" style="text-decoration: none; display: inline-block; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
<p style="margin: 0; font-size: 0.55rem; color: #64748b; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;">
๐ฒ Join: <span style="color: #064e3b; border-bottom: 2px solid #f59e0b;">Daily Islamic Messages WhatsApp Channel</span>
</p>
</a>
</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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
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-19272151137310115392026-04-09T05:00:00.010+05:302026-04-09T05:00:00.114+05:3009 APRIL (Hadees) - Jis Ne Meri Sunnat Zinda Ki Us Ne Mujh Se Muhabbat Ki<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>Rasoolullah (Sallallahu-Alaihi-Wa-Sallam) ne irshaad farmaaya ke jis ne meri sunnat zinda ki us ne mujh se muhabbat ki aur jis ne mujh se muhabbat ki woh Jannat mein mere saath hoga. (Tirmizi: 2678)</b></center>
<center>
<b> </b></center>
<center>Faida: Allah Ta'ala ke yahaan wahi amal maqbool hota hai jo Huzoor
(Sallallahu-Alaihi-Wa-Sallam) ke tareeqon ke mutaabiq ho. Lihaaza Huzoor
(Sallallahu-Alaihi-Wa-Sallam) ke tareeqon ko jaanna aur Aap
(Sallallahu-Alaihi-Wa-Sallam) ki batlaai hui duaaon, sunnaton aur aadaab
ko seekhna aur un par amal karna ummat ke har fard ke liye zaroori hai.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Rasoolullah%20%28Sallallahu-Alaihi-Wa-Sallam%29%20ne%20irshaad%20farmaaya%20ke%20jis%20ne%20meri%20sunnat%20zinda%20ki%20us%20ne%20mujh%20se%20muhabbat%20ki%20aur%20jis%20ne%20mujh%20se%20muhabbat%20ki%20woh%20Jannat%20mein%20mere%20saath%20hoga.%20%28Tirmizi:%202678%29%0D%0A%0D%0A%E2%9C%BA%20Allah%20Ta%27ala%20ke%20yahaan%20wahi%20amal%20maqbool%20hota%20hai%20jo%20Huzoor%20%28Sallallahu-Alaihi-Wa-Sallam%29%20ke%20tareeqon%20ke%20mutaabiq%20ho.%20Lihaaza%20Huzoor%20%28Sallallahu-Alaihi-Wa-Sallam%29%20ke%20tareeqon%20ko%20jaanna%20aur%20Aap%20%28Sallallahu-Alaihi-Wa-Sallam%29%20ki%20batlaai%20hui%20duaaon,%20sunnaton%20aur%20aadaab%20ko%20seekhna%20aur%20un%20par%20amal%20karna%20ummat%20ke%20har%20fard%20ke%20liye%20zaroori%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%20*Download%20Qur%27an%20and%20Hadith%20Android%20App*%20-%20Goo.gl/ggEr5O"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Rasoolullah%20(Sallallahu-Alaihi-Wa-Sallam)%20ne%20irshaad%20farmaaya%20ke%20jis%20ne%20meri%20sunnat%20zinda%20ki%20us%20ne%20mujh%20se%20muhabbat%20ki%20aur%20jis%20ne%20mujh%20se%20muhabbat%20ki%20woh%20Jannat%20mein%20mere%20saath%20hoga.%20(Tirmizi:%202678)%0D%0A%0D%0A%E2%9C%BA%20Allah%20Ta'ala%20ke%20yahaan%20wahi%20amal%20maqbool%20hota%20hai%20jo%20Huzoor%20(Sallallahu-Alaihi-Wa-Sallam)%20ke%20tareeqon%20ke%20mutaabiq%20ho.%20Lihaaza%20Huzoor%20(Sallallahu-Alaihi-Wa-Sallam)%20ke%20tareeqon%20ko%20jaanna%20aur%20Aap%20(Sallallahu-Alaihi-Wa-Sallam)%20ki%20batlaai%20hui%20duaaon,%20sunnaton%20aur%20aadaab%20ko%20seekhna%20aur%20un%20par%20amal%20karna%20ummat%20ke%20har%20fard%20ke%20liye%20zaroori%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></div>
<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/eV3KZ_7r3_4/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/eV3KZ_7r3_4?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/eV3KZ_7r3_4"><span style="color: #339966;"><u>WhatsApp</u></span></a></div>
</td> </tr>
</tbody></table>
<div style="padding: 20px; text-align: center; background: #fff; border-top: 1px solid #f1f5f9;">
<a href="whatsapp://channel/0029Va9QdRV8kyyFKM2qvI2t" target="_blank" style="text-decoration: none; display: inline-block; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
<p style="margin: 0; font-size: 0.55rem; color: #64748b; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;">
๐ฒ Join: <span style="color: #064e3b; border-bottom: 2px solid #f59e0b;">Daily Islamic Messages WhatsApp Channel</span>
</p>
</a>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-78994477855734437652026-04-09T05:00:00.007+05:302026-04-09T05:00:00.114+05:30April - 09 (Quran)<div dir="ltr" style="text-align: left;" trbidi="on">
Qur'an main Allah Ta'ala farmaata hai (Tarjuma): Aur jin logon ne kufr ki rawish apnaali hai, un ke liye dozakh ki aag hai, na to un ka kaam tamaam kiya jaayega ke woh mar hi jaaein aur na un se dozakh ka azaab halka kiya jaayega. Har naashukre kaafir ko ham aisi hi saza dete hain. (Sura-e-Faatir: 36)</div><div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=Har%20naashukre%20kaafir%20ko%20ham%20aisi%20hi%20saza%20dete%20hain&body=Qur'an%20main%20Allah%20Ta'ala%20farmaata%20hai%20(Tarjuma):%20Aur%20jin%20logon%20ne%20kufr%20ki%20rawish%20apnaali%20hai,%20un%20ke%20liye%20dozakh%20ki%20aag%20hai,%20na%20to%20un%20ka%20kaam%20tamaam%20kiya%20jaayega%20ke%20woh%20mar%20hi%20jaaein%20aur%20na%20un%20se%20dozakh%20ka%20azaab%20halka%20kiya%20jaayega.%20Har%20naashukre%20kaafir%20ko%20ham%20aisi%20hi%20saza%20dete%20hain.%20(Sura-e-Faatir:%2036)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Har naashukre kaafir ko ham aisi hi saza dete hain in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a> | <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Qur%27an%20main%20Allah%20Ta%27ala%20farmaata%20hai%20(Tarjuma):%20Aur%20jin%20logon%20ne%20kufr%20ki%20rawish%20apnaali%20hai,%20un%20ke%20liye%20dozakh%20ki%20aag%20hai,%20na%20to%20un%20ka%20kaam%20tamaam%20kiya%20jaayega%20ke%20woh%20mar%20hi%20jaaein%20aur%20na%20un%20se%20dozakh%20ka%20azaab%20halka%20kiya%20jaayega.%20Har%20naashukre%20kaafir%20ko%20ham%20aisi%20hi%20saza%20dete%20hain.%20(Sura-e-Faatir:%2036)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Qur'an%20main%20Allah%20Ta'ala%20farmaata%20hai%20(Tarjuma):%20Aur%20jin%20logon%20ne%20kufr%20ki%20rawish%20apnaali%20hai,%20un%20ke%20liye%20dozakh%20ki%20aag%20hai,%20na%20to%20un%20ka%20kaam%20tamaam%20kiya%20jaayega%20ke%20woh%20mar%20hi%20jaaein%20aur%20na%20un%20se%20dozakh%20ka%20azaab%20halka%20kiya%20jaayega.%20Har%20naashukre%20kaafir%20ko%20ham%20aisi%20hi%20saza%20dete%20hain.%20(Sura-e-Faatir:%2036)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-16929014383941469172026-04-08T16:30:00.002+05:302026-04-08T16:30:00.131+05:3008 April Evening Zikr<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: "Courier New", 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>
<div style="padding: 20px; text-align: center; background: #fff; border-top: 1px solid #f1f5f9;">
<a href="whatsapp://channel/0029Va9QdRV8kyyFKM2qvI2t" target="_blank" style="text-decoration: none; display: inline-block; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
<p style="margin: 0; font-size: 0.55rem; color: #64748b; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;">
๐ฒ Join: <span style="color: #064e3b; border-bottom: 2px solid #f59e0b;">Daily Islamic Messages WhatsApp Channel</span>
</p>
</a>
</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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
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-57445792744363684372026-04-08T05:00:00.009+05:302026-04-08T08:14:31.785+05:3008 April Morning Zikr 2026<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: "Courier New", 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>
<div style="padding: 20px; text-align: center; background: #fff; border-top: 1px solid #f1f5f9;">
<a href="whatsapp://channel/0029Va9QdRV8kyyFKM2qvI2t" target="_blank" style="text-decoration: none; display: inline-block; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
<p style="margin: 0; font-size: 0.55rem; color: #64748b; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;">
๐ฒ Join: <span style="color: #064e3b; border-bottom: 2px solid #f59e0b;">Daily Islamic Messages WhatsApp Channel</span>
</p>
</a>
</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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
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-82633605561625473262026-04-08T05:00:00.008+05:302026-04-08T08:12:39.380+05:3008 APRIL (Hadees) - Jo Shakhs Apna Kapda Fakhr Ke Taur Par Ghaseet Kar Chalega<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>Hadees: Huzoor ๏ทบ ne irshaad farmaaya: Jo Shakhs apna kapda fakhr ke taur par ghaseet kar chalega, to Qayaamat ke din Allah Ta'ala us ki taraf (rahmat ki) nazar nahin farmaayeinge. (Bukhari: 3665)</b></center>
</td> </tr>
<tr> <td><div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Huzoor%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20Shakhs%20apna%20kapda%20fakhr%20ke%20taur%20par%20ghaseet%20kar%20chalega,%20to%20Qayaamat%20ke%20din%20Allah%20Ta%27ala%20us%20ki%20taraf%20(rahmat%20ki)%20nazar%20nahin%20farmaayeinge.%20(Bukhari:%203665)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20*Download%20Qur%27an%20and%20Hadith%20Android%20App*%20-%20Goo.gl/ggEr5O"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Huzoor%20%EF%B7%BA%20ne%20irshaad%20farmaaya:%20Jo%20Shakhs%20apna%20kapda%20fakhr%20ke%20taur%20par%20ghaseet%20kar%20chalega,%20to%20Qayaamat%20ke%20din%20Allah%20Ta'ala%20us%20ki%20taraf%20(rahmat%20ki)%20nazar%20nahin%20farmaayeinge.%20(Bukhari:%203665)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;">
<iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/kttFhOvQTTQ/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/kttFhOvQTTQ?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/kttFhOvQTTQ"><span style="color: #339966;"><u>WhatsApp</u></span></a></div>
</td> </tr>
</tbody></table>
<div style="padding: 20px; text-align: center; background: #fff; border-top: 1px solid #f1f5f9;">
<a href="whatsapp://channel/0029Va9QdRV8kyyFKM2qvI2t" target="_blank" style="text-decoration: none; display: inline-block; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
<p style="margin: 0; font-size: 0.55rem; color: #64748b; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;">
๐ฒ Join: <span style="color: #064e3b; border-bottom: 2px solid #f59e0b;">Daily Islamic Messages WhatsApp Channel</span>
</p>
</a>
</div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-7186651180914187282026-04-08T05:00:00.005+05:302026-04-08T05:00:00.117+05:30April - 08 (Quran)<div dir="ltr" style="text-align: left;" trbidi="on">
Allah Ta'ala ka irshaad hai (Tarjuma): Imaan waalo! Tum Allah Ta'ala ke saamne sachche dil se tauba karo (ke dil mein is gunah ka khayal bhi na rahe). (Surah At-Tahrim 66: 8)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=Sachche%20dil%20se%20tauba%20karo&body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjuma):%20Imaan%20waalo!%20Tum%20Allah%20Ta'ala%20ke%20saamne%20sachche%20dil%20se%20tauba%20karo%20(ke%20dil%20mein%20is%20gunah%20ka%20khayal%20bhi%20na%20rahe).%20(Surah%20At-Tahrim%2066:%208)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Sachche dil se tauba karo in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a> | <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjuma):%20Imaan%20waalo!%20Tum%20Allah%20Ta%27ala%20ke%20saamne%20sachche%20dil%20se%20tauba%20karo%20(ke%20dil%20mein%20is%20gunah%20ka%20khayal%20bhi%20na%20rahe).%20(Surah%20At-Tahrim%2066:%208)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjuma):%20Imaan%20waalo!%20Tum%20Allah%20Ta'ala%20ke%20saamne%20sachche%20dil%20se%20tauba%20karo%20(ke%20dil%20mein%20is%20gunah%20ka%20khayal%20bhi%20na%20rahe).%20(Surah%20At-Tahrim%2066:%208)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-49885026104186393802026-04-07T16:30:00.003+05:302026-04-07T16:30:00.122+05:3007 April Evening Zikr<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: "Courier New", 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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
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-67030165072358456302026-04-07T05:00:00.007+05:302026-04-07T08:24:05.190+05:3007 April Morning Zikr 2026<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: "Courier New", 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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
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-18521921881310864812026-04-07T05:00:00.005+05:302026-04-07T05:00:00.117+05:30April - 07 (Quran)<div dir="ltr" style="text-align: left;" trbidi="on">
Allah Ta'ala ka Irshaad hai (Tarjama): Jo shakhs mehnat karta hai wo apne nafa ke liye mehnat karta hai (warna) Allah Ta'ala ko to tamaam jahaan waalon mein se kisi ki hajat nahin. (Surah Al-Ankabut: 6)<br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=Jo%20shakhs%20mehnat%20karta%20hai%20wo%20apne%20nafa%20ke%20liye%20mehnat%20karta%20hai&body=Allah%20Ta'ala%20ka%20Irshaad%20hai%20(Tarjama):%20Jo%20shakhs%20mehnat%20karta%20hai%20wo%20apne%20nafa%20ke%20liye%20mehnat%20karta%20hai%20(warna)%20Allah%20Ta'ala%20ko%20to%20tamaam%20jahaan%20waalon%20mein%20se%20kisi%20ki%20hajat%20nahin.%20(Surah%20Al-Ankabut:%206)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Jo shakhs mehnat karta hai wo apne nafa ke liye mehnat karta hai in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a> | <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20Irshaad%20hai%20(Tarjama):%20Jo%20shakhs%20mehnat%20karta%20hai%20wo%20apne%20nafa%20ke%20liye%20mehnat%20karta%20hai%20(warna)%20Allah%20Ta%27ala%20ko%20to%20tamaam%20jahaan%20waalon%20mein%20se%20kisi%20ki%20hajat%20nahin.%20(Surah%20Al-Ankabut:%206)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20Irshaad%20hai%20(Tarjama):%20Jo%20shakhs%20mehnat%20karta%20hai%20wo%20apne%20nafa%20ke%20liye%20mehnat%20karta%20hai%20(warna)%20Allah%20Ta'ala%20ko%20to%20tamaam%20jahaan%20waalon%20mein%20se%20kisi%20ki%20hajat%20nahin.%20(Surah%20Al-Ankabut:%206)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-5914225664553909252026-04-07T05:00:00.004+05:302026-04-07T05:00:00.117+05:3007 APRIL (Hadees) - Jis Shakhs Ne Ilm Allah Ta'ala Ki Raza Ke Alawa Kisi Aur Maqsad Keliye Sikha<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 100%;"> <tbody>
<tr> <td><center><b>Hadees</b></center>
</td> </tr>
<tr> <td><center><b>Hazrat Abdullah Bin Umar (Raziyallahu Anhu) se riwayat hai ke Rasool Allah (Sallallahu-Alaihi-Wa-Sallam) ne irshaad farmaaya: Jis shakhs ne ilm Allah Ta'ala ki raza ke alawa kisi aur maqsad (masalan izzat, shauhrat, maal waghaira hasil karne) keliye sikha to woh apna thikana Jahannum mein banale. (Tirmizi: 2655)</b></center>
</td> </tr>
<tr> <td><div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Abdullah%20Bin%20Umar%20(Raziyallahu%20Anhu)%20se%20riwayat%20hai%20ke%20Rasool%20Allah%20(Sallallahu-Alaihi-Wa-Sallam)%20ne%20irshaad%20farmaaya:%20Jis%20shakhs%20ne%20ilm%20Allah%20Ta%27ala%20ki%20raza%20ke%20alawa%20kisi%20aur%20maqsad%20(masalan%20izzat,%20shauhrat,%20maal%20waghaira%20hasil%20karne)%20keliye%20sikha%20to%20woh%20apna%20thikana%20Jahannum%20mein%20banale.%20(Tirmizi:%202655)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20*Download%20Qur%27an%20and%20Hadith%20Android%20App*%20-%20Goo.gl/ggEr5O"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Hazrat%20Abdullah%20Bin%20Umar%20(Raziyallahu%20Anhu)%20se%20riwayat%20hai%20ke%20Rasool%20Allah%20(Sallallahu-Alaihi-Wa-Sallam)%20ne%20irshaad%20farmaaya:%20Jis%20shakhs%20ne%20ilm%20Allah%20Ta'ala%20ki%20raza%20ke%20alawa%20kisi%20aur%20maqsad%20(masalan%20izzat,%20shauhrat,%20maal%20waghaira%20hasil%20karne)%20keliye%20sikha%20to%20woh%20apna%20thikana%20Jahannum%20mein%20banale.%20(Tirmizi:%202655)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;">
<iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/zYyK7i4B5O0/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/zYyK7i4B5O0?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/zYyK7i4B5O0"><span style="color: #339966;"><u>WhatsApp</u></span></a></div>
</td> </tr>
</tbody></table>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-75986947525748975192026-04-06T16:30:00.001+05:302026-04-06T19:17:57.225+05:3006 April Evening Zikr<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: "Courier New", 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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
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-53063964158991434602026-04-06T05:00:00.006+05:302026-04-06T05:00:00.119+05:3006 April Morning Zikr 2026<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: "Courier New", 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 50 Leaderboard</div>
<div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;">
<table style="border-collapse: collapse; width: 100%;">
<tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody>
</table>
</div>
</div>
<div style="border-top: 1px solid #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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};">
<!-- Rank Number: Larger, more legible bubble -->
<td style="padding: 6px 10px; width: 35px; vertical-align: middle;">
<div style="
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 900;
background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'};
color: ${i < 3 ? '#ffffff' : '#475569'};
">
${i + 1}
</div>
</td>
<!-- Name: Prominent and clear -->
<td style="padding: 6px 10px; text-align: left; vertical-align: middle;">
<div style="
font-size: 0.9rem;
font-weight: ${i < 3 ? '800' : '600'};
color: ${i === 0 ? '#92400e' : '#0f172a'};
letter-spacing: -0.01em;
line-height: 1.2;
">
${name}
</div>
</td>
<!-- Icon/Points: Scaled up for balance -->
<td style="padding: 6px 12px; text-align: right; vertical-align: middle;">
<span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};">
${i < 3 ? 'โ
' : 'โฆ'}
</span>
</td>
</tr>
`;
});
}
document.getElementById("latestSubmissionsList").innerHTML = html;
} catch (e) {
console.error("Fetch error:", e);
document.getElementById("latestSubmissionsList").innerHTML =
"<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>";
}
}
async function fetchLeaderboard() {
const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv";
try {
const res = await fetch(url);
const csv = await res.text();
const rows = csv.split('\n').map(r => r.split(',')).slice(1);
const leaderboardData = rows
.map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 }))
.sort((a, b) => b.total - a.total)
.slice(0, 50);
if (leaderboardData.length === 0) throw new Error();
// 1. Separate the Champion
const [champion, ...runnersUp] = leaderboardData;
// 2. Render Champion Card (Unique Style)
const championHTML = `
<div style="margin-bottom: 15px;">
<table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;">
<tr>
<td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">๐</td>
<td style="padding: 12px 10px; vertical-align: middle;">
<div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div>
<div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div>
<td style="padding: 12px 20px; text-align: right; vertical-align: middle;">
<div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;">
${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span>
</div>
</td>
</tr>
</table>
</div>
`;
// 3. Render the rest of the list
const rowsHTML = runnersUp.map((u, i) => {
const rank = i + 2; // Offset by 2 because we sliced the first one
const medal = rank === 2 ? "๐ฅ" : rank === 3 ? "๐ฅ" : rank;
return `
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid #f1f5f9;">
<!-- Medal -->
<td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;">
${medal}
</td>
<!-- Name -->
<td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;">
${u.name}
</td>
<!-- Total -->
<td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;">
${u.total.toLocaleString()}00
</td>
</tr>
</tbody>
</table>`;
}).join('');
// Inject both into your container
els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`;
} catch (e) {
els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>";
}
}
// Auto-refresh latest every 60 seconds
setInterval(fetchLatestSubmissions, 60000);
function loadCurrent() {
const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}');
totalCount = data.total; roundCount = totalCount % 100;
roundsCompleted = Math.floor(totalCount / 100);
els.goalInput.value = localStorage.getItem('dailyGoal') || 100;
updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList();
}
function updateUI() {
// Modified: Using full name from dhikrData
els.dhikrText.textContent = dhikrData[currentIdx].name;
els.fazailBox.textContent = dhikrData[currentIdx].fazail;
els.countDisplay.textContent = format(roundCount);
els.total.textContent = totalCount; els.round.textContent = roundsCompleted;
els.thisRound.textContent = `${roundCount} / 100`;
const p = (roundCount / 100) * 100;
els.percent.textContent = Math.round(p) + "%";
els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29);
updateStats();
}
function updateStats() {
let grand = 0; let html = "";
dhikrData.forEach((item, i) => {
const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
grand += cnt;
// Modified: Removed split to show full name in summary list
html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`;
});
els.summaryList.innerHTML = html;
els.grandTotal.textContent = grand;
let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0];
els.levelBadge.textContent = lvl.title;
els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%";
const goal = parseInt(els.goalInput.value) || 100;
els.dailyGoalText.textContent = `${grand} / ${goal}`;
const dailyP = Math.min((grand / goal) * 100, 100);
els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12);
if (grand >= goal) {
els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block";
localStorage.setItem('lastDhikrDate', new Date().toDateString());
} else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; }
}
function increment() {
totalCount++;
roundCount = totalCount % 100;
// Update Daily Total
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() };
dailyData.count++;
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); }
else { vibrate(40); }
saveCurrent(); updateUI(); playSound("clickSound");
}
function saveCurrent() {
const today = new Date().toLocaleDateString(); // Get today's date string
// Save total count (Existing)
localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount }));
// Save daily count (New)
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {};
// If the date in storage isn't today, reset the daily total
if (dailyData.date !== today) {
dailyData = { date: today, count: 0 };
}
// We increment this in the increment() function below
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
}
function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } }
function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } }
function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); }
function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } }
function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); }
function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "๐" : "๐"; }
function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); }
function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); }
function shareToWhatsApp() {
const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 };
const zikrToday = dailyData.count;
const dhikrName = dhikrData[currentIdx].name;
const streak = document.getElementById("streakCount").textContent;
// 1. Build your text message exactly as you want it to appear
const message = `*My Dhikr Journey Today*
_Join me in earning rewards!_
*Current Status:*
*My Streak:* ${streak} Days
*Dhikr:* ${dhikrName}
*Total:* ${totalCount}
- - - - - - - - - - - - - - - - - - - - - - -
*All Zikr Done Today:* ${zikrToday}
*Grand Total of All Zikr:* ${els.grandTotal.textContent}
- - - - - - - - - - - - - - - - - - - - - - -
*Start your Dhikr now:*
https://islamizikr.blogspot.com
_Alhamdulillah! Keep going..._`;
// 2. Use encodeURIComponent to make the message URL-safe
const encodedMessage = encodeURIComponent(message);
// 3. Use the correct Universal Link format
// Format: https://wa.me[YOUR_ENCODED_TEXT]
const whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
// 4. Open the link
window.open(whatsappUrl, '_blank');
}
function exportCounts() {
let t = "Dhikr Counts:\n\n";
dhikrData.forEach((d, i) => {
const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
if (c > 0) t += `${d.name}: ${c}\n`;
});
// Fallback for Android/WebViews
const textArea = document.createElement("textarea");
textArea.value = t;
// Ensure it's not visible but exists in the DOM
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert("All counts copied to clipboard!");
} else {
alert("Unable to copy. Please try manually.");
}
} catch (err) {
alert("Copying not supported on this device.");
}
document.body.removeChild(textArea);
}
loadCurrent();
</script>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-25724534450338676852026-04-06T05:00:00.005+05:302026-04-06T05:00:00.119+05:30April - 06 (Quran)<div dir="ltr" style="text-align: left;" trbidi="on">
Allah Ta'ala ka irshaad hai (Tarjama): Aur Allah Ta'ala ki razamandi hi keliye kharch kiya karo. (Al-Baqarah 2: 272)<br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=Allah%20Ta'ala%20ki%20razamandi%20hi%20keliye%20kharch%20kiya%20karo&body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Allah%20Ta'ala%20ki%20razamandi%20hi%20keliye%20kharch%20kiya%20karo.%20(Al-Baqarah%202:%20272)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Allah Ta'ala ki razamandi hi keliye kharch kiya karo in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a> | <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Allah%20Ta%27ala%20ki%20razamandi%20hi%20keliye%20kharch%20kiya%20karo.%20(Al-Baqarah%202:%20272)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20Allah%20Ta'ala%20ki%20razamandi%20hi%20keliye%20kharch%20kiya%20karo.%20(Al-Baqarah%202:%20272)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-91226109812500759102026-04-06T05:00:00.003+05:302026-04-06T05:00:00.119+05:3006 APRIL (Hadees) - Chor Imaan Ki Haalat Mein Chori Nahin Karta<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>Rasullullah ๏ทบ ne farmaaya: Chor Imaan ki haalat mein chori nahin karta (Yaani chori ke waqt chor ka imaan nikal jaata hai, phir baad mein Imaan laut aata hai). (Abu Dawud: 4689)</b></center>
</td> </tr>
<tr> <td><div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Rasullullah%20%EF%B7%BA%20ne%20farmaaya:%20Chor%20Imaan%20ki%20haalat%20mein%20chori%20nahin%20karta%20(Yaani%20chori%20ke%20waqt%20chor%20ka%20imaan%20nikal%20jaata%20hai,%20phir%20baad%20mein%20Imaan%20laut%20aata%20hai).%20(Abu%20Dawud:%204689)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20*Download%20Qur%27an%20and%20Hadith%20Android%20App*%20-%20Goo.gl/ggEr5O"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Rasullullah%20%EF%B7%BA%20ne%20farmaaya:%20Chor%20Imaan%20ki%20haalat%20mein%20chori%20nahin%20karta%20(Yaani%20chori%20ke%20waqt%20chor%20ka%20imaan%20nikal%20jaata%20hai,%20phir%20baad%20mein%20Imaan%20laut%20aata%20hai).%20(Abu%20Dawud:%204689)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;">
<iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/NRM0jrur1IA/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/NRM0jrur1IA?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/NRM0jrur1IA"><span style="color: #339966;"><u>WhatsApp</u></span></a></div>
</td> </tr>
</tbody></table>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-53066627107424002332026-04-05T16:30:00.000+05:302026-04-05T16:30:00.125+05:3005 April Evening Zikr<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: "Courier New", 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 50 Leaderboard</div>
<div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;">
<table style="border-collapse: collapse; width: 100%;">
<tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody>
</table>
</div>
</div>
<div style="border-top: 1px solid #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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};">
<!-- Rank Number: Larger, more legible bubble -->
<td style="padding: 6px 10px; width: 35px; vertical-align: middle;">
<div style="
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 900;
background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'};
color: ${i < 3 ? '#ffffff' : '#475569'};
">
${i + 1}
</div>
</td>
<!-- Name: Prominent and clear -->
<td style="padding: 6px 10px; text-align: left; vertical-align: middle;">
<div style="
font-size: 0.9rem;
font-weight: ${i < 3 ? '800' : '600'};
color: ${i === 0 ? '#92400e' : '#0f172a'};
letter-spacing: -0.01em;
line-height: 1.2;
">
${name}
</div>
</td>
<!-- Icon/Points: Scaled up for balance -->
<td style="padding: 6px 12px; text-align: right; vertical-align: middle;">
<span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};">
${i < 3 ? 'โ
' : 'โฆ'}
</span>
</td>
</tr>
`;
});
}
document.getElementById("latestSubmissionsList").innerHTML = html;
} catch (e) {
console.error("Fetch error:", e);
document.getElementById("latestSubmissionsList").innerHTML =
"<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>";
}
}
async function fetchLeaderboard() {
const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv";
try {
const res = await fetch(url);
const csv = await res.text();
const rows = csv.split('\n').map(r => r.split(',')).slice(1);
const leaderboardData = rows
.map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 }))
.sort((a, b) => b.total - a.total)
.slice(0, 50);
if (leaderboardData.length === 0) throw new Error();
// 1. Separate the Champion
const [champion, ...runnersUp] = leaderboardData;
// 2. Render Champion Card (Unique Style)
const championHTML = `
<div style="margin-bottom: 15px;">
<table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;">
<tr>
<td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">๐</td>
<td style="padding: 12px 10px; vertical-align: middle;">
<div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div>
<div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div>
<td style="padding: 12px 20px; text-align: right; vertical-align: middle;">
<div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;">
${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span>
</div>
</td>
</tr>
</table>
</div>
`;
// 3. Render the rest of the list
const rowsHTML = runnersUp.map((u, i) => {
const rank = i + 2; // Offset by 2 because we sliced the first one
const medal = rank === 2 ? "๐ฅ" : rank === 3 ? "๐ฅ" : rank;
return `
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid #f1f5f9;">
<!-- Medal -->
<td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;">
${medal}
</td>
<!-- Name -->
<td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;">
${u.name}
</td>
<!-- Total -->
<td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;">
${u.total.toLocaleString()}00
</td>
</tr>
</tbody>
</table>`;
}).join('');
// Inject both into your container
els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`;
} catch (e) {
els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>";
}
}
// Auto-refresh latest every 60 seconds
setInterval(fetchLatestSubmissions, 60000);
function loadCurrent() {
const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}');
totalCount = data.total; roundCount = totalCount % 100;
roundsCompleted = Math.floor(totalCount / 100);
els.goalInput.value = localStorage.getItem('dailyGoal') || 100;
updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList();
}
function updateUI() {
// Modified: Using full name from dhikrData
els.dhikrText.textContent = dhikrData[currentIdx].name;
els.fazailBox.textContent = dhikrData[currentIdx].fazail;
els.countDisplay.textContent = format(roundCount);
els.total.textContent = totalCount; els.round.textContent = roundsCompleted;
els.thisRound.textContent = `${roundCount} / 100`;
const p = (roundCount / 100) * 100;
els.percent.textContent = Math.round(p) + "%";
els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29);
updateStats();
}
function updateStats() {
let grand = 0; let html = "";
dhikrData.forEach((item, i) => {
const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
grand += cnt;
// Modified: Removed split to show full name in summary list
html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`;
});
els.summaryList.innerHTML = html;
els.grandTotal.textContent = grand;
let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0];
els.levelBadge.textContent = lvl.title;
els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%";
const goal = parseInt(els.goalInput.value) || 100;
els.dailyGoalText.textContent = `${grand} / ${goal}`;
const dailyP = Math.min((grand / goal) * 100, 100);
els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12);
if (grand >= goal) {
els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block";
localStorage.setItem('lastDhikrDate', new Date().toDateString());
} else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; }
}
function increment() {
totalCount++;
roundCount = totalCount % 100;
// Update Daily Total
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() };
dailyData.count++;
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); }
else { vibrate(40); }
saveCurrent(); updateUI(); playSound("clickSound");
}
function saveCurrent() {
const today = new Date().toLocaleDateString(); // Get today's date string
// Save total count (Existing)
localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount }));
// Save daily count (New)
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {};
// If the date in storage isn't today, reset the daily total
if (dailyData.date !== today) {
dailyData = { date: today, count: 0 };
}
// We increment this in the increment() function below
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
}
function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } }
function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } }
function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); }
function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } }
function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); }
function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "๐" : "๐"; }
function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); }
function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); }
function shareToWhatsApp() {
const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 };
const zikrToday = dailyData.count;
const dhikrName = dhikrData[currentIdx].name;
const streak = document.getElementById("streakCount").textContent;
// 1. Build your text message exactly as you want it to appear
const message = `*My Dhikr Journey Today*
_Join me in earning rewards!_
*Current Status:*
*My Streak:* ${streak} Days
*Dhikr:* ${dhikrName}
*Total:* ${totalCount}
- - - - - - - - - - - - - - - - - - - - - - -
*All Zikr Done Today:* ${zikrToday}
*Grand Total of All Zikr:* ${els.grandTotal.textContent}
- - - - - - - - - - - - - - - - - - - - - - -
*Start your Dhikr now:*
https://islamizikr.blogspot.com
_Alhamdulillah! Keep going..._`;
// 2. Use encodeURIComponent to make the message URL-safe
const encodedMessage = encodeURIComponent(message);
// 3. Use the correct Universal Link format
// Format: https://wa.me[YOUR_ENCODED_TEXT]
const whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
// 4. Open the link
window.open(whatsappUrl, '_blank');
}
function exportCounts() {
let t = "Dhikr Counts:\n\n";
dhikrData.forEach((d, i) => {
const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
if (c > 0) t += `${d.name}: ${c}\n`;
});
// Fallback for Android/WebViews
const textArea = document.createElement("textarea");
textArea.value = t;
// Ensure it's not visible but exists in the DOM
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert("All counts copied to clipboard!");
} else {
alert("Unable to copy. Please try manually.");
}
} catch (err) {
alert("Copying not supported on this device.");
}
document.body.removeChild(textArea);
}
loadCurrent();
</script>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-42162010754017326582026-04-05T05:00:00.006+05:302026-04-05T05:00:00.117+05:3005 April Morning Zikr 2026<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: "Courier New", 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 50 Leaderboard</div>
<div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;">
<table style="border-collapse: collapse; width: 100%;">
<tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody>
</table>
</div>
</div>
<div style="border-top: 1px solid #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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};">
<!-- Rank Number: Larger, more legible bubble -->
<td style="padding: 6px 10px; width: 35px; vertical-align: middle;">
<div style="
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 900;
background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'};
color: ${i < 3 ? '#ffffff' : '#475569'};
">
${i + 1}
</div>
</td>
<!-- Name: Prominent and clear -->
<td style="padding: 6px 10px; text-align: left; vertical-align: middle;">
<div style="
font-size: 0.9rem;
font-weight: ${i < 3 ? '800' : '600'};
color: ${i === 0 ? '#92400e' : '#0f172a'};
letter-spacing: -0.01em;
line-height: 1.2;
">
${name}
</div>
</td>
<!-- Icon/Points: Scaled up for balance -->
<td style="padding: 6px 12px; text-align: right; vertical-align: middle;">
<span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};">
${i < 3 ? 'โ
' : 'โฆ'}
</span>
</td>
</tr>
`;
});
}
document.getElementById("latestSubmissionsList").innerHTML = html;
} catch (e) {
console.error("Fetch error:", e);
document.getElementById("latestSubmissionsList").innerHTML =
"<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>";
}
}
async function fetchLeaderboard() {
const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv";
try {
const res = await fetch(url);
const csv = await res.text();
const rows = csv.split('\n').map(r => r.split(',')).slice(1);
const leaderboardData = rows
.map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 }))
.sort((a, b) => b.total - a.total)
.slice(0, 50);
if (leaderboardData.length === 0) throw new Error();
// 1. Separate the Champion
const [champion, ...runnersUp] = leaderboardData;
// 2. Render Champion Card (Unique Style)
const championHTML = `
<div style="margin-bottom: 15px;">
<table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;">
<tr>
<td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">๐</td>
<td style="padding: 12px 10px; vertical-align: middle;">
<div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div>
<div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div>
<td style="padding: 12px 20px; text-align: right; vertical-align: middle;">
<div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;">
${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span>
</div>
</td>
</tr>
</table>
</div>
`;
// 3. Render the rest of the list
const rowsHTML = runnersUp.map((u, i) => {
const rank = i + 2; // Offset by 2 because we sliced the first one
const medal = rank === 2 ? "๐ฅ" : rank === 3 ? "๐ฅ" : rank;
return `
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid #f1f5f9;">
<!-- Medal -->
<td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;">
${medal}
</td>
<!-- Name -->
<td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;">
${u.name}
</td>
<!-- Total -->
<td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;">
${u.total.toLocaleString()}00
</td>
</tr>
</tbody>
</table>`;
}).join('');
// Inject both into your container
els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`;
} catch (e) {
els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>";
}
}
// Auto-refresh latest every 60 seconds
setInterval(fetchLatestSubmissions, 60000);
function loadCurrent() {
const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}');
totalCount = data.total; roundCount = totalCount % 100;
roundsCompleted = Math.floor(totalCount / 100);
els.goalInput.value = localStorage.getItem('dailyGoal') || 100;
updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList();
}
function updateUI() {
// Modified: Using full name from dhikrData
els.dhikrText.textContent = dhikrData[currentIdx].name;
els.fazailBox.textContent = dhikrData[currentIdx].fazail;
els.countDisplay.textContent = format(roundCount);
els.total.textContent = totalCount; els.round.textContent = roundsCompleted;
els.thisRound.textContent = `${roundCount} / 100`;
const p = (roundCount / 100) * 100;
els.percent.textContent = Math.round(p) + "%";
els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29);
updateStats();
}
function updateStats() {
let grand = 0; let html = "";
dhikrData.forEach((item, i) => {
const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
grand += cnt;
// Modified: Removed split to show full name in summary list
html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`;
});
els.summaryList.innerHTML = html;
els.grandTotal.textContent = grand;
let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0];
els.levelBadge.textContent = lvl.title;
els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%";
const goal = parseInt(els.goalInput.value) || 100;
els.dailyGoalText.textContent = `${grand} / ${goal}`;
const dailyP = Math.min((grand / goal) * 100, 100);
els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12);
if (grand >= goal) {
els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block";
localStorage.setItem('lastDhikrDate', new Date().toDateString());
} else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; }
}
function increment() {
totalCount++;
roundCount = totalCount % 100;
// Update Daily Total
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() };
dailyData.count++;
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); }
else { vibrate(40); }
saveCurrent(); updateUI(); playSound("clickSound");
}
function saveCurrent() {
const today = new Date().toLocaleDateString(); // Get today's date string
// Save total count (Existing)
localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount }));
// Save daily count (New)
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {};
// If the date in storage isn't today, reset the daily total
if (dailyData.date !== today) {
dailyData = { date: today, count: 0 };
}
// We increment this in the increment() function below
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
}
function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } }
function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } }
function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); }
function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } }
function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); }
function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "๐" : "๐"; }
function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); }
function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); }
function shareToWhatsApp() {
const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 };
const zikrToday = dailyData.count;
const dhikrName = dhikrData[currentIdx].name;
const streak = document.getElementById("streakCount").textContent;
// 1. Build your text message exactly as you want it to appear
const message = `*My Dhikr Journey Today*
_Join me in earning rewards!_
*Current Status:*
*My Streak:* ${streak} Days
*Dhikr:* ${dhikrName}
*Total:* ${totalCount}
- - - - - - - - - - - - - - - - - - - - - - -
*All Zikr Done Today:* ${zikrToday}
*Grand Total of All Zikr:* ${els.grandTotal.textContent}
- - - - - - - - - - - - - - - - - - - - - - -
*Start your Dhikr now:*
https://islamizikr.blogspot.com
_Alhamdulillah! Keep going..._`;
// 2. Use encodeURIComponent to make the message URL-safe
const encodedMessage = encodeURIComponent(message);
// 3. Use the correct Universal Link format
// Format: https://wa.me[YOUR_ENCODED_TEXT]
const whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
// 4. Open the link
window.open(whatsappUrl, '_blank');
}
function exportCounts() {
let t = "Dhikr Counts:\n\n";
dhikrData.forEach((d, i) => {
const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
if (c > 0) t += `${d.name}: ${c}\n`;
});
// Fallback for Android/WebViews
const textArea = document.createElement("textarea");
textArea.value = t;
// Ensure it's not visible but exists in the DOM
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert("All counts copied to clipboard!");
} else {
alert("Unable to copy. Please try manually.");
}
} catch (err) {
alert("Copying not supported on this device.");
}
document.body.removeChild(textArea);
}
loadCurrent();
</script>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-24861373910934890742026-04-05T05:00:00.005+05:302026-04-05T05:00:00.117+05:30April - 05 (Quran)<div dir="ltr" style="text-align: left;" trbidi="on">
Allah Ta'ala ka irshaad hai (Tarjama): Aur ek musalman ghulam mushrik azaad mard se kahin behtar hai khuwah woh mushrik mard tumko kitna hi bhala kyun na maloom hota ho. (Al-Baqarah 2: 221)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=Ek%20musalman%20ghulam%20mushrik%20azaad%20mard%20se%20kahin%20behtar%20hai&body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20ek%20musalman%20ghulam%20mushrik%20azaad%20mard%20se%20kahin%20behtar%20hai%20khuwah%20woh%20mushrik%20mard%20tumko%20kitna%20hi%20bhala%20kyun%20na%20maloom%20hota%20ho.%20(Al-Baqarah%202:%20221)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Ek musalman ghulam mushrik azaad mard se kahin behtar hai in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a> | <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20ek%20musalman%20ghulam%20mushrik%20azaad%20mard%20se%20kahin%20behtar%20hai%20khuwah%20woh%20mushrik%20mard%20tumko%20kitna%20hi%20bhala%20kyun%20na%20maloom%20hota%20ho.%20(Al-Baqarah%202:%20221)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aur%20ek%20musalman%20ghulam%20mushrik%20azaad%20mard%20se%20kahin%20behtar%20hai%20khuwah%20woh%20mushrik%20mard%20tumko%20kitna%20hi%20bhala%20kyun%20na%20maloom%20hota%20ho.%20(Al-Baqarah%202:%20221)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-35053624634355020142026-04-05T05:00:00.004+05:302026-04-05T05:00:00.117+05:3005 APRIL (Hadees) - Huzur ๏ทบ Ne Farmaaya: Haya Imaan Ka Ek Shoba Hai<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>Huzur ๏ทบ ne farmaaya: Haya Imaan ka ek shoba hai. (Ibne Maajah: 58)</b></center>
</td> </tr>
<tr> <td><div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Huzur%20%EF%B7%BA%20ne%20farmaaya:%20Haya%20Imaan%20ka%20ek%20shoba%20hai.%20(Ibne%20Maajah:%2058)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20*Download%20Qur%27an%20and%20Hadith%20Android%20App*%20-%20Goo.gl/ggEr5O"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Huzur%20%EF%B7%BA%20ne%20farmaaya:%20Haya%20Imaan%20ka%20ek%20shoba%20hai.%20(Ibne%20Maajah:%2058)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;">
<iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/LalByPvNy0I/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/LalByPvNy0I?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/LalByPvNy0I"><span style="color: #339966;"><u>WhatsApp</u></span></a></div>
</td> </tr>
</tbody></table>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-11372069682855829772026-04-04T16:30:00.001+05:302026-04-04T16:30:00.124+05:3004 April Evening Zikr<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: "Courier New", 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 50 Leaderboard</div>
<div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;">
<table style="border-collapse: collapse; width: 100%;">
<tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody>
</table>
</div>
</div>
<div style="border-top: 1px solid #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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};">
<!-- Rank Number: Larger, more legible bubble -->
<td style="padding: 6px 10px; width: 35px; vertical-align: middle;">
<div style="
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 900;
background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'};
color: ${i < 3 ? '#ffffff' : '#475569'};
">
${i + 1}
</div>
</td>
<!-- Name: Prominent and clear -->
<td style="padding: 6px 10px; text-align: left; vertical-align: middle;">
<div style="
font-size: 0.9rem;
font-weight: ${i < 3 ? '800' : '600'};
color: ${i === 0 ? '#92400e' : '#0f172a'};
letter-spacing: -0.01em;
line-height: 1.2;
">
${name}
</div>
</td>
<!-- Icon/Points: Scaled up for balance -->
<td style="padding: 6px 12px; text-align: right; vertical-align: middle;">
<span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};">
${i < 3 ? 'โ
' : 'โฆ'}
</span>
</td>
</tr>
`;
});
}
document.getElementById("latestSubmissionsList").innerHTML = html;
} catch (e) {
console.error("Fetch error:", e);
document.getElementById("latestSubmissionsList").innerHTML =
"<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>";
}
}
async function fetchLeaderboard() {
const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv";
try {
const res = await fetch(url);
const csv = await res.text();
const rows = csv.split('\n').map(r => r.split(',')).slice(1);
const leaderboardData = rows
.map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 }))
.sort((a, b) => b.total - a.total)
.slice(0, 50);
if (leaderboardData.length === 0) throw new Error();
// 1. Separate the Champion
const [champion, ...runnersUp] = leaderboardData;
// 2. Render Champion Card (Unique Style)
const championHTML = `
<div style="margin-bottom: 15px;">
<table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;">
<tr>
<td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">๐</td>
<td style="padding: 12px 10px; vertical-align: middle;">
<div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div>
<div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div>
<td style="padding: 12px 20px; text-align: right; vertical-align: middle;">
<div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;">
${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span>
</div>
</td>
</tr>
</table>
</div>
`;
// 3. Render the rest of the list
const rowsHTML = runnersUp.map((u, i) => {
const rank = i + 2; // Offset by 2 because we sliced the first one
const medal = rank === 2 ? "๐ฅ" : rank === 3 ? "๐ฅ" : rank;
return `
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid #f1f5f9;">
<!-- Medal -->
<td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;">
${medal}
</td>
<!-- Name -->
<td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;">
${u.name}
</td>
<!-- Total -->
<td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;">
${u.total.toLocaleString()}00
</td>
</tr>
</tbody>
</table>`;
}).join('');
// Inject both into your container
els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`;
} catch (e) {
els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>";
}
}
// Auto-refresh latest every 60 seconds
setInterval(fetchLatestSubmissions, 60000);
function loadCurrent() {
const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}');
totalCount = data.total; roundCount = totalCount % 100;
roundsCompleted = Math.floor(totalCount / 100);
els.goalInput.value = localStorage.getItem('dailyGoal') || 100;
updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList();
}
function updateUI() {
// Modified: Using full name from dhikrData
els.dhikrText.textContent = dhikrData[currentIdx].name;
els.fazailBox.textContent = dhikrData[currentIdx].fazail;
els.countDisplay.textContent = format(roundCount);
els.total.textContent = totalCount; els.round.textContent = roundsCompleted;
els.thisRound.textContent = `${roundCount} / 100`;
const p = (roundCount / 100) * 100;
els.percent.textContent = Math.round(p) + "%";
els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29);
updateStats();
}
function updateStats() {
let grand = 0; let html = "";
dhikrData.forEach((item, i) => {
const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
grand += cnt;
// Modified: Removed split to show full name in summary list
html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`;
});
els.summaryList.innerHTML = html;
els.grandTotal.textContent = grand;
let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0];
els.levelBadge.textContent = lvl.title;
els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%";
const goal = parseInt(els.goalInput.value) || 100;
els.dailyGoalText.textContent = `${grand} / ${goal}`;
const dailyP = Math.min((grand / goal) * 100, 100);
els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12);
if (grand >= goal) {
els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block";
localStorage.setItem('lastDhikrDate', new Date().toDateString());
} else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; }
}
function increment() {
totalCount++;
roundCount = totalCount % 100;
// Update Daily Total
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() };
dailyData.count++;
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); }
else { vibrate(40); }
saveCurrent(); updateUI(); playSound("clickSound");
}
function saveCurrent() {
const today = new Date().toLocaleDateString(); // Get today's date string
// Save total count (Existing)
localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount }));
// Save daily count (New)
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {};
// If the date in storage isn't today, reset the daily total
if (dailyData.date !== today) {
dailyData = { date: today, count: 0 };
}
// We increment this in the increment() function below
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
}
function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } }
function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } }
function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); }
function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } }
function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); }
function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "๐" : "๐"; }
function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); }
function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); }
function shareToWhatsApp() {
const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 };
const zikrToday = dailyData.count;
const dhikrName = dhikrData[currentIdx].name;
const streak = document.getElementById("streakCount").textContent;
// 1. Build your text message exactly as you want it to appear
const message = `*My Dhikr Journey Today*
_Join me in earning rewards!_
*Current Status:*
*My Streak:* ${streak} Days
*Dhikr:* ${dhikrName}
*Total:* ${totalCount}
- - - - - - - - - - - - - - - - - - - - - - -
*All Zikr Done Today:* ${zikrToday}
*Grand Total of All Zikr:* ${els.grandTotal.textContent}
- - - - - - - - - - - - - - - - - - - - - - -
*Start your Dhikr now:*
https://islamizikr.blogspot.com
_Alhamdulillah! Keep going..._`;
// 2. Use encodeURIComponent to make the message URL-safe
const encodedMessage = encodeURIComponent(message);
// 3. Use the correct Universal Link format
// Format: https://wa.me[YOUR_ENCODED_TEXT]
const whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
// 4. Open the link
window.open(whatsappUrl, '_blank');
}
function exportCounts() {
let t = "Dhikr Counts:\n\n";
dhikrData.forEach((d, i) => {
const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
if (c > 0) t += `${d.name}: ${c}\n`;
});
// Fallback for Android/WebViews
const textArea = document.createElement("textarea");
textArea.value = t;
// Ensure it's not visible but exists in the DOM
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert("All counts copied to clipboard!");
} else {
alert("Unable to copy. Please try manually.");
}
} catch (err) {
alert("Copying not supported on this device.");
}
document.body.removeChild(textArea);
}
loadCurrent();
</script>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-69377271940282376112026-04-04T05:00:00.015+05:302026-04-04T05:00:00.116+05:3004 April Morning Zikr 2026<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: "Courier New", 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 50 Leaderboard</div>
<div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;">
<table style="border-collapse: collapse; width: 100%;">
<tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody>
</table>
</div>
</div>
<div style="border-top: 1px solid #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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};">
<!-- Rank Number: Larger, more legible bubble -->
<td style="padding: 6px 10px; width: 35px; vertical-align: middle;">
<div style="
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 900;
background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'};
color: ${i < 3 ? '#ffffff' : '#475569'};
">
${i + 1}
</div>
</td>
<!-- Name: Prominent and clear -->
<td style="padding: 6px 10px; text-align: left; vertical-align: middle;">
<div style="
font-size: 0.9rem;
font-weight: ${i < 3 ? '800' : '600'};
color: ${i === 0 ? '#92400e' : '#0f172a'};
letter-spacing: -0.01em;
line-height: 1.2;
">
${name}
</div>
</td>
<!-- Icon/Points: Scaled up for balance -->
<td style="padding: 6px 12px; text-align: right; vertical-align: middle;">
<span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};">
${i < 3 ? 'โ
' : 'โฆ'}
</span>
</td>
</tr>
`;
});
}
document.getElementById("latestSubmissionsList").innerHTML = html;
} catch (e) {
console.error("Fetch error:", e);
document.getElementById("latestSubmissionsList").innerHTML =
"<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>";
}
}
async function fetchLeaderboard() {
const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv";
try {
const res = await fetch(url);
const csv = await res.text();
const rows = csv.split('\n').map(r => r.split(',')).slice(1);
const leaderboardData = rows
.map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 }))
.sort((a, b) => b.total - a.total)
.slice(0, 50);
if (leaderboardData.length === 0) throw new Error();
// 1. Separate the Champion
const [champion, ...runnersUp] = leaderboardData;
// 2. Render Champion Card (Unique Style)
const championHTML = `
<div style="margin-bottom: 15px;">
<table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;">
<tr>
<td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">๐</td>
<td style="padding: 12px 10px; vertical-align: middle;">
<div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div>
<div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div>
<td style="padding: 12px 20px; text-align: right; vertical-align: middle;">
<div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;">
${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span>
</div>
</td>
</tr>
</table>
</div>
`;
// 3. Render the rest of the list
const rowsHTML = runnersUp.map((u, i) => {
const rank = i + 2; // Offset by 2 because we sliced the first one
const medal = rank === 2 ? "๐ฅ" : rank === 3 ? "๐ฅ" : rank;
return `
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid #f1f5f9;">
<!-- Medal -->
<td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;">
${medal}
</td>
<!-- Name -->
<td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;">
${u.name}
</td>
<!-- Total -->
<td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;">
${u.total.toLocaleString()}00
</td>
</tr>
</tbody>
</table>`;
}).join('');
// Inject both into your container
els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`;
} catch (e) {
els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>";
}
}
// Auto-refresh latest every 60 seconds
setInterval(fetchLatestSubmissions, 60000);
function loadCurrent() {
const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}');
totalCount = data.total; roundCount = totalCount % 100;
roundsCompleted = Math.floor(totalCount / 100);
els.goalInput.value = localStorage.getItem('dailyGoal') || 100;
updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList();
}
function updateUI() {
// Modified: Using full name from dhikrData
els.dhikrText.textContent = dhikrData[currentIdx].name;
els.fazailBox.textContent = dhikrData[currentIdx].fazail;
els.countDisplay.textContent = format(roundCount);
els.total.textContent = totalCount; els.round.textContent = roundsCompleted;
els.thisRound.textContent = `${roundCount} / 100`;
const p = (roundCount / 100) * 100;
els.percent.textContent = Math.round(p) + "%";
els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29);
updateStats();
}
function updateStats() {
let grand = 0; let html = "";
dhikrData.forEach((item, i) => {
const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
grand += cnt;
// Modified: Removed split to show full name in summary list
html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`;
});
els.summaryList.innerHTML = html;
els.grandTotal.textContent = grand;
let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0];
els.levelBadge.textContent = lvl.title;
els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%";
const goal = parseInt(els.goalInput.value) || 100;
els.dailyGoalText.textContent = `${grand} / ${goal}`;
const dailyP = Math.min((grand / goal) * 100, 100);
els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12);
if (grand >= goal) {
els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block";
localStorage.setItem('lastDhikrDate', new Date().toDateString());
} else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; }
}
function increment() {
totalCount++;
roundCount = totalCount % 100;
// Update Daily Total
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() };
dailyData.count++;
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); }
else { vibrate(40); }
saveCurrent(); updateUI(); playSound("clickSound");
}
function saveCurrent() {
const today = new Date().toLocaleDateString(); // Get today's date string
// Save total count (Existing)
localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount }));
// Save daily count (New)
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {};
// If the date in storage isn't today, reset the daily total
if (dailyData.date !== today) {
dailyData = { date: today, count: 0 };
}
// We increment this in the increment() function below
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
}
function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } }
function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } }
function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); }
function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } }
function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); }
function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "๐" : "๐"; }
function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); }
function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); }
function shareToWhatsApp() {
const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 };
const zikrToday = dailyData.count;
const dhikrName = dhikrData[currentIdx].name;
const streak = document.getElementById("streakCount").textContent;
// 1. Build your text message exactly as you want it to appear
const message = `*My Dhikr Journey Today*
_Join me in earning rewards!_
*Current Status:*
*My Streak:* ${streak} Days
*Dhikr:* ${dhikrName}
*Total:* ${totalCount}
- - - - - - - - - - - - - - - - - - - - - - -
*All Zikr Done Today:* ${zikrToday}
*Grand Total of All Zikr:* ${els.grandTotal.textContent}
- - - - - - - - - - - - - - - - - - - - - - -
*Start your Dhikr now:*
https://islamizikr.blogspot.com
_Alhamdulillah! Keep going..._`;
// 2. Use encodeURIComponent to make the message URL-safe
const encodedMessage = encodeURIComponent(message);
// 3. Use the correct Universal Link format
// Format: https://wa.me[YOUR_ENCODED_TEXT]
const whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
// 4. Open the link
window.open(whatsappUrl, '_blank');
}
function exportCounts() {
let t = "Dhikr Counts:\n\n";
dhikrData.forEach((d, i) => {
const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
if (c > 0) t += `${d.name}: ${c}\n`;
});
// Fallback for Android/WebViews
const textArea = document.createElement("textarea");
textArea.value = t;
// Ensure it's not visible but exists in the DOM
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert("All counts copied to clipboard!");
} else {
alert("Unable to copy. Please try manually.");
}
} catch (err) {
alert("Copying not supported on this device.");
}
document.body.removeChild(textArea);
}
loadCurrent();
</script>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-33067710651475043352026-04-04T05:00:00.014+05:302026-04-04T05:00:00.116+05:30Hadees: Har Ek Ki Du'aa Qabool Hoti Hai<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 100%;"> <tbody>
<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/74JYBRgiRAY/0.jpg" frameborder="0" height="266"
id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no"
seamless="seamless" src="https://youtube.com/embed/74JYBRgiRAY?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=๐ฒ Join: Islam316.blogspot.com"><span style="color:
#339966;"><u>WhatsApp</u></span></a></div>
</td> </tr>
</tbody></table>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-66466207296178157802026-04-04T05:00:00.012+05:302026-04-04T05:00:00.116+05:30April - 04 (Quran)<div dir="ltr" style="text-align: left;" trbidi="on">
Allah Ta'ala ka irshaad hai (Tarjama): Aye Imaan WaaIon! Islam mein poore ke poore daakhil hojaao. (Sura-e-Baqarah 2: 208)<br />
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=Islam%20mein%20poore%20ke%20poore%20daakhil%20hojaao&body=Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aye%20Imaan%20WaaIon!%20Islam%20mein%20poore%20ke%20poore%20daakhil%20hojaao.%20(Sura-e-Baqarah%202:%20208)%0D%0A%0D%0A%F0%9F%93%B2%20Aur%20Messages%20keliye%20Daily%20Islamic%20Messages%20Android%20app%20download%20karlein%20islinkse%20play.google.com/store/apps/details?id=com.dism" target="_blank" title="Send Islam mein poore ke poore daakhil hojaao in an Email"><u><span class="Apple-style-span" style="color: #38761d;">Email</span></u></a> | <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta%27ala%20ka%20irshaad%20hai%20(Tarjama):%20Aye%20Imaan%20WaaIon!%20Islam%20mein%20poore%20ke%20poore%20daakhil%20hojaao.%20(Sura-e-Baqarah%202:%20208)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20Islamic%20Messages%20Android%20App%20-%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*%D8%A8%D9%90%D8%B3%D9%92%D9%85%D9%90%20%D9%B1%D9%84%D9%84%D9%87%D9%90%20%D9%B1%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%92%D9%85%D9%B0%D9%86%D9%90%20%D8%A7%D9%84%D8%B1%D9%8E%D9%91%D8%AD%D9%90%D9%8A%D9%92%D9%85%D9%90*%20%E2%96%AB%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Allah%20Ta'ala%20ka%20irshaad%20hai%20(Tarjama):%20Aye%20Imaan%20WaaIon!%20Islam%20mein%20poore%20ke%20poore%20daakhil%20hojaao.%20(Sura-e-Baqarah%202:%20208)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-72118760108043605982026-04-04T05:00:00.011+05:302026-04-04T05:00:00.116+05:3004 APRIL (Hadees) - Huzur ๏ทบ Ne Farmaaya: Sharm Wa Haya Bhalaai Laati Hai<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>Huzur ๏ทบ ne farmaaya: Sharm wa haya bhalaai laati hai. (Bukhari: 6117)</b></center>
</td> </tr>
<tr> <td><div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="https://telegram.me/share/url?url=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Huzur%20%EF%B7%BA%20ne%20farmaaya:%20Sharm%20wa%20haya%20bhalaai%20laati%20hai.%20(Bukhari:%206117)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20*Download%20Qur%27an%20and%20Hadith%20Android%20App*%20-%20Goo.gl/ggEr5O"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20Hadees:%20Huzur%20%EF%B7%BA%20ne%20farmaaya:%20Sharm%20wa%20haya%20bhalaai%20laati%20hai.%20(Bukhari:%206117)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></div>
</td> </tr><tr> <td style="text-align: center;"><div style="height: 270px; overflow: hidden; position: relative; width: 320px;">
<iframe allowfullscreen="allowfullscreen" data-thumbnail-src="https://i.ytimg.com/vi/HytIDUEaN_4/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://youtube.com/embed/HytIDUEaN_4?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/HytIDUEaN_4"><span style="color: #339966;"><u>WhatsApp</u></span></a></div>
</td> </tr>
</tbody></table>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-35469614159135229972026-04-03T16:30:00.000+05:302026-04-03T16:30:00.130+05:3003 April Evening Zikr<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: "Courier New", 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 50 Leaderboard</div>
<div id="leaderboardBox" style="background: rgb(255, 255, 255); border-radius: 16px; border: 1px solid rgb(241, 245, 249); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; font-size: 13px; padding: 0px;">
<table style="border-collapse: collapse; width: 100%;">
<tbody id="leaderboardList"><tr><td colspan="3">Loading rankings...</td></tr></tbody>
</table>
</div>
</div>
<div style="border-top: 1px solid #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, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
html += `<tr style="border-bottom: 1px solid #f1f5f9; height: 34px; background-color: ${i < 3 ? '#fffbeb' : 'transparent'};">
<!-- Rank Number: Larger, more legible bubble -->
<td style="padding: 6px 10px; width: 35px; vertical-align: middle;">
<div style="
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 900;
background: ${i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#b45309' : '#f1f5f9'};
color: ${i < 3 ? '#ffffff' : '#475569'};
">
${i + 1}
</div>
</td>
<!-- Name: Prominent and clear -->
<td style="padding: 6px 10px; text-align: left; vertical-align: middle;">
<div style="
font-size: 0.9rem;
font-weight: ${i < 3 ? '800' : '600'};
color: ${i === 0 ? '#92400e' : '#0f172a'};
letter-spacing: -0.01em;
line-height: 1.2;
">
${name}
</div>
</td>
<!-- Icon/Points: Scaled up for balance -->
<td style="padding: 6px 12px; text-align: right; vertical-align: middle;">
<span style="font-size: 0.8rem; font-weight: 700; color: ${i < 3 ? '#fbbf24' : '#cbd5e1'};">
${i < 3 ? 'โ
' : 'โฆ'}
</span>
</td>
</tr>
`;
});
}
document.getElementById("latestSubmissionsList").innerHTML = html;
} catch (e) {
console.error("Fetch error:", e);
document.getElementById("latestSubmissionsList").innerHTML =
"<tr><td colspan='2' style='padding:12px; color:#ef4444; text-align:center;'>Error loading submissions (check if sheet is still published)</td></tr>";
}
}
async function fetchLeaderboard() {
const url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS03daWU5zAUkAiqw25mELsgoYKPl0A2Z3KOpeYtStOyBi-amwG44n0DR78Ztyc1Go3yO50_Fav4D9i/pub?gid=189690890&single=true&output=csv";
try {
const res = await fetch(url);
const csv = await res.text();
const rows = csv.split('\n').map(r => r.split(',')).slice(1);
const leaderboardData = rows
.map(c => ({ name: (c[1] || 'Anon').trim(), total: parseInt(c[2]) || 0 }))
.sort((a, b) => b.total - a.total)
.slice(0, 50);
if (leaderboardData.length === 0) throw new Error();
// 1. Separate the Champion
const [champion, ...runnersUp] = leaderboardData;
// 2. Render Champion Card (Unique Style)
const championHTML = `
<div style="margin-bottom: 15px;">
<table style="width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #fbbf24; border-radius: 12px; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); overflow: hidden;">
<tr>
<td style="padding: 12px 20px; width: 50px; text-align: center; font-size: 1.8rem; vertical-align: middle;">๐</td>
<td style="padding: 12px 10px; vertical-align: middle;">
<div style="text-transform: uppercase; font-size: 0.5rem; font-weight: 900; color: #92400e; letter-spacing: 0.15em; line-height: 1;">Current Champion</div>
<div style="font-size: 0.9rem; font-weight: 800; color: #1e3a8a; margin: 0; line-height: 1.1;">${champion.name}</div>
<td style="padding: 12px 20px; text-align: right; vertical-align: middle;">
<div style="font-size: 0.75rem; font-weight: 900; color: #16a34a; white-space: nowrap; line-height: 1;">
${champion.total.toLocaleString()}00 <span style="font-size: 0.6rem; font-weight: 700; opacity: 0.8;">ZIKR</span>
</div>
</td>
</tr>
</table>
</div>
`;
// 3. Render the rest of the list
const rowsHTML = runnersUp.map((u, i) => {
const rank = i + 2; // Offset by 2 because we sliced the first one
const medal = rank === 2 ? "๐ฅ" : rank === 3 ? "๐ฅ" : rank;
return `
<table style="width: 100%; border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid #f1f5f9;">
<!-- Medal -->
<td style="padding: 4px 8px; font-size: 0.7rem; font-weight: bold; color: #64748b; width: 10px; line-height: 1;">
${medal}
</td>
<!-- Name -->
<td style="padding: 4px 8px; text-align: left; font-size: 0.75rem; font-weight: 500; line-height: 1;">
${u.name}
</td>
<!-- Total -->
<td style="padding: 4px 8px; text-align: right; font-size: 0.75rem; font-weight: 800; color: #16a34a; line-height: 1;">
${u.total.toLocaleString()}00
</td>
</tr>
</tbody>
</table>`;
}).join('');
// Inject both into your container
els.leaderboardList.innerHTML = championHTML + `<table style="width:100%; border-collapse:collapse;">${rowsHTML}</table>`;
} catch (e) {
els.leaderboardList.innerHTML = "<div style='text-align:center; padding:20px; color:#ef4444;'>Unable to load rankings</div>";
}
}
// Auto-refresh latest every 60 seconds
setInterval(fetchLatestSubmissions, 60000);
function loadCurrent() {
const data = JSON.parse(localStorage.getItem(`zikrCount_${currentIdx}`) || '{"total":0}');
totalCount = data.total; roundCount = totalCount % 100;
roundsCompleted = Math.floor(totalCount / 100);
els.goalInput.value = localStorage.getItem('dailyGoal') || 100;
updateUI(); fetchLeaderboard(); fetchLatestSubmissions(); checkStreak();fetchtotalList();
}
function updateUI() {
// Modified: Using full name from dhikrData
els.dhikrText.textContent = dhikrData[currentIdx].name;
els.fazailBox.textContent = dhikrData[currentIdx].fazail;
els.countDisplay.textContent = format(roundCount);
els.total.textContent = totalCount; els.round.textContent = roundsCompleted;
els.thisRound.textContent = `${roundCount} / 100`;
const p = (roundCount / 100) * 100;
els.percent.textContent = Math.round(p) + "%";
els.prog.setAttribute("stroke-dashoffset", 339.29 - (p / 100) * 339.29);
updateStats();
}
function updateStats() {
let grand = 0; let html = "";
dhikrData.forEach((item, i) => {
const cnt = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
grand += cnt;
// Modified: Removed split to show full name in summary list
html += `<div style="display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; gap:10px;"><span style="text-align:left;">${item.name}</span><b style="color:#16a34a; white-space:nowrap;">${cnt}</b></div>`;
});
els.summaryList.innerHTML = html;
els.grandTotal.textContent = grand;
let lvl = levels.slice().reverse().find(l => grand >= l.min) || levels[0];
els.levelBadge.textContent = lvl.title;
els.levelBar.style.width = lvl.next ? Math.min(((grand - lvl.min)/(lvl.next - lvl.min)) * 100, 100) + "%" : "100%";
const goal = parseInt(els.goalInput.value) || 100;
els.dailyGoalText.textContent = `${grand} / ${goal}`;
const dailyP = Math.min((grand / goal) * 100, 100);
els.dailyProg.setAttribute("stroke-dashoffset", 402.12 - (dailyP / 100) * 402.12);
if (grand >= goal) {
els.goalSuccess.style.display = "block"; els.goalBadge.style.display = "block";
localStorage.setItem('lastDhikrDate', new Date().toDateString());
} else { els.goalSuccess.style.display = "none"; els.goalBadge.style.display = "none"; }
}
function increment() {
totalCount++;
roundCount = totalCount % 100;
// Update Daily Total
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0, date: new Date().toLocaleDateString() };
dailyData.count++;
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
if (roundCount === 0) { roundsCompleted++; vibrate(300, 100, 300); }
else { vibrate(40); }
saveCurrent(); updateUI(); playSound("clickSound");
}
function saveCurrent() {
const today = new Date().toLocaleDateString(); // Get today's date string
// Save total count (Existing)
localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount }));
// Save daily count (New)
let dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || {};
// If the date in storage isn't today, reset the daily total
if (dailyData.date !== today) {
dailyData = { date: today, count: 0 };
}
// We increment this in the increment() function below
localStorage.setItem('dailyZikr', JSON.stringify(dailyData));
}
function playSound(id) { if(soundEnabled) { const s = document.getElementById(id); s.currentTime = 0; s.play().catch(()=>{}); } }
function decrement() { if(totalCount > 0) { totalCount--; roundCount = totalCount % 100; roundsCompleted = Math.floor(totalCount / 100); saveCurrent(); updateUI(); playSound("decrementSound"); vibrate(20); } }
function saveCurrent() { localStorage.setItem(`zikrCount_${currentIdx}`, JSON.stringify({ total: totalCount })); }
function resetCount() { if (confirm(`Reset counts for this Dhikr?`)) { totalCount = roundCount = roundsCompleted = 0; saveCurrent(); updateUI(); } }
function loadDhikr(i) { currentIdx = parseInt(i); loadCurrent(); }
function toggleSound() { soundEnabled = !soundEnabled; document.getElementById("soundToggle").textContent = soundEnabled ? "๐" : "๐"; }
function vibrate(...pattern) { if (typeof navigator !== "undefined" && navigator.vibrate) navigator.vibrate(pattern); }
function updateGoal(v) { localStorage.setItem('dailyGoal', v); updateUI(); }
function shareToWhatsApp() {
const dailyData = JSON.parse(localStorage.getItem('dailyZikr')) || { count: 0 };
const zikrToday = dailyData.count;
const dhikrName = dhikrData[currentIdx].name;
const streak = document.getElementById("streakCount").textContent;
// 1. Build your text message exactly as you want it to appear
const message = `*My Dhikr Journey Today*
_Join me in earning rewards!_
*Current Status:*
*My Streak:* ${streak} Days
*Dhikr:* ${dhikrName}
*Total:* ${totalCount}
- - - - - - - - - - - - - - - - - - - - - - -
*All Zikr Done Today:* ${zikrToday}
*Grand Total of All Zikr:* ${els.grandTotal.textContent}
- - - - - - - - - - - - - - - - - - - - - - -
*Start your Dhikr now:*
https://islamizikr.blogspot.com
_Alhamdulillah! Keep going..._`;
// 2. Use encodeURIComponent to make the message URL-safe
const encodedMessage = encodeURIComponent(message);
// 3. Use the correct Universal Link format
// Format: https://wa.me[YOUR_ENCODED_TEXT]
const whatsappUrl = `https://wa.me/?text=${encodedMessage}`;
// 4. Open the link
window.open(whatsappUrl, '_blank');
}
function exportCounts() {
let t = "Dhikr Counts:\n\n";
dhikrData.forEach((d, i) => {
const c = JSON.parse(localStorage.getItem(`zikrCount_${i}`) || '{"total":0}').total;
if (c > 0) t += `${d.name}: ${c}\n`;
});
// Fallback for Android/WebViews
const textArea = document.createElement("textarea");
textArea.value = t;
// Ensure it's not visible but exists in the DOM
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert("All counts copied to clipboard!");
} else {
alert("Unable to copy. Please try manually.");
}
} catch (err) {
alert("Copying not supported on this device.");
}
document.body.removeChild(textArea);
}
loadCurrent();
</script>
Unknownnoreply@blogger.com0