tag:blogger.com,1999:blog-26195366547611519322026-06-10T05:00:00.123+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.comBlogger257125tag:blogger.com,1999:blog-2619536654761151932.post-18216382897763434372026-06-10T05:00:00.000+05:302026-06-10T05:00:00.119+05:3010 June 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-69715801192594701672026-06-10T05:00:00.000+05:302026-06-10T05:00:00.119+05:30June - 10<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 100%;"> <tbody>
<tr> <td><center>
<b>Aaj Ki Hadees</b></center>
</td> </tr>
<tr> <td><center>
<b>ูุงู ุชูุณูุจููููู ุฃูุญูุฏูุง</b></center>
<center>
<b> </b></center>
<center>
<b>Laa tasubbanna ahadaa</b><br />
<br />
Tarjama: Hargiz kisi ko gaali mat do.<br />
<br />
(Abu Dawood: 4084)<br />
<br />
โ Kisi ko gaali dena bahot bada gunaah hai.<br />
โ Gaali dene se Allah Ta'ala naaraaz hota hai.<br />
โ Gaali dene waalon se log nafrat karte hain.<br />
<br />
<center>
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=June%20%E2%80%93%2010&body=%D9%84%D8%A7%D9%8E%20%D8%AA%D9%8E%D8%B3%D9%8F%D8%A8%D9%91%D9%8E%D9%86%D9%91%D9%8E%20%D8%A3%D9%8E%D8%AD%D9%8E%D8%AF%D9%8B%D8%A7%0D%0A%0D%0A%E2%9C%BA%20*Laa%20tasubbanna%20ahadaa*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Hargiz%20kisi%20ko%20gaali%20mat%20do.%0D%0A%0D%0A%E2%9C%BA%20(Abu%20Dawood:%204084)%0D%0A%0D%0A%E2%97%87%20Kisi%20ko%20gaali%20dena%20bahot%20bada%20gunaah%20hai.%0D%0A%0D%0A%E2%97%87%20Gaali%20dene%20se%20Allah%20Ta'ala%20naaraaz%20hota%20hai.%0D%0A%0D%0A%E2%97%87%20Gaali%20dene%20waalon%20se%20log%20nafrat%20karte%20hain.%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June โ 10 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*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%84%D8%A7%D9%8E%20%D8%AA%D9%8E%D8%B3%D9%8F%D8%A8%D9%91%D9%8E%D9%86%D9%91%D9%8E%20%D8%A3%D9%8E%D8%AD%D9%8E%D8%AF%D9%8B%D8%A7%0D%0A%0D%0A%E2%9C%BA%20*Laa%20tasubbanna%20ahadaa*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Hargiz%20kisi%20ko%20gaali%20mat%20do.%0D%0A%0D%0A%E2%9C%BA%20%28Abu%20Dawood:%204084%29%0D%0A%0D%0A%E2%97%87%20Kisi%20ko%20gaali%20dena%20bahot%20bada%20gunaah%20hai.%0D%0A%0D%0A%E2%97%87%20Gaali%20dene%20se%20Allah%20Ta%27ala%20naaraaz%20hota%20hai.%0D%0A%0D%0A%E2%97%87%20Gaali%20dene%20waalon%20se%20log%20nafrat%20karte%20hain.%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%84%D8%A7%D9%8E%20%D8%AA%D9%8E%D8%B3%D9%8F%D8%A8%D9%91%D9%8E%D9%86%D9%91%D9%8E%20%D8%A3%D9%8E%D8%AD%D9%8E%D8%AF%D9%8B%D8%A7%0D%0A%0D%0A%E2%9C%BA%20*Laa%20tasubbanna%20ahadaa*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Hargiz%20kisi%20ko%20gaali%20mat%20do.%0D%0A%0D%0A%E2%9C%BA%20(Abu%20Dawood:%204084)%0D%0A%0D%0A%E2%97%87%20Kisi%20ko%20gaali%20dena%20bahot%20bada%20gunaah%20hai.%0D%0A%0D%0A%E2%97%87%20Gaali%20dene%20se%20Allah%20Ta'ala%20naaraaz%20hota%20hai.%0D%0A%0D%0A%E2%97%87%20Gaali%20dene%20waalon%20se%20log%20nafrat%20karte%20hain.%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a><b> </b></center>
</center>
</td></tr>
</tbody></table>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-2573982081537924362026-06-09T16:30:00.000+05:302026-06-09T16:30:00.119+05:3009 June Evening 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-47412546762358973822026-06-09T05:00:00.000+05:302026-06-09T05:00:00.205+05:30June - 09<div dir="ltr" style="text-align: left;" trbidi="on"><table border="1" style="width: 100%;"> <tbody><tr> <td><center><b>Aaj Ki Hadees</b></center></td> </tr><tr> <td><center><b>ููุนููู ุฑูุณููููู ุงูููู ุตููููู ุงูููู ุนููููููู ููุณููููู
ู ุงูุฑููุงุดููู ููุงููู
ูุฑูุชูุดููู</b></center><center><b> </b></center><center><b>La'ana rasoolullaahi sallallaahu 'alaihi wasallam arraashiya walmurtashee</b><br /><br />Tarjama: Rasoolullah ๏ทบ ne rishwat dene aur lene waale par laanat farmaai hai.<br /><br />(Abu Dawud: 3580)<br /><br /> <br /><center><span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=June%20%E2%80%93%2009&body=%D9%84%D9%8E%D8%B9%D9%8E%D9%86%D9%8E%20%D8%B1%D9%8E%D8%B3%D9%8F%D9%88%D9%92%D9%84%D9%8F%20%D8%A7%D9%84%D9%84%D9%87%D9%90%20%D8%B5%D9%8E%D9%84%D9%91%D9%8E%D9%89%20%D8%A7%D9%84%D9%84%D9%87%D9%8F%20%D8%B9%D9%8E%D9%84%D9%8E%D9%8A%D9%92%D9%87%D9%90%20%D9%88%D9%8E%D8%B3%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%20%D8%A7%D9%84%D8%B1%D9%91%D9%8E%D8%A7%D8%B4%D9%90%D9%8A%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D9%92%D9%85%D9%8F%D8%B1%D9%92%D8%AA%D9%8E%D8%B4%D9%90%D9%8A%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*La'ana%20rasoolullaahi%20sallallaahu%20'alaihi%20wasallam%20arraashiya%20walmurtashee*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Rasoolullah%20%EF%B7%BA%20ne%20rishwat%20dene%20aur%20lene%20waale%20par%20laanat%20farmaai%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Abu%20Dawud:%203580)%0D%0A%0D%0A%F0%9F%93%B2%20Shared Via DailyIslamicMessage.blogspot.com" target="_blank" title="Send June โ 09 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*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%84%D9%8E%D8%B9%D9%8E%D9%86%D9%8E%20%D8%B1%D9%8E%D8%B3%D9%8F%D9%88%D9%92%D9%84%D9%8F%20%D8%A7%D9%84%D9%84%D9%87%D9%90%20%D8%B5%D9%8E%D9%84%D9%91%D9%8E%D9%89%20%D8%A7%D9%84%D9%84%D9%87%D9%8F%20%D8%B9%D9%8E%D9%84%D9%8E%D9%8A%D9%92%D9%87%D9%90%20%D9%88%D9%8E%D8%B3%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%20%D8%A7%D9%84%D8%B1%D9%91%D9%8E%D8%A7%D8%B4%D9%90%D9%8A%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D9%92%D9%85%D9%8F%D8%B1%D9%92%D8%AA%D9%8E%D8%B4%D9%90%D9%8A%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*La%27ana%20rasoolullaahi%20sallallaahu%20%27alaihi%20wasallam%20arraashiya%20walmurtashee*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Rasoolullah%20%EF%B7%BA%20ne%20rishwat%20dene%20aur%20lene%20waale%20par%20laanat%20farmaai%20hai.%0D%0A%0D%0A%E2%9C%BA%20%28Abu%20Dawud:%203580%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%84%D9%8E%D8%B9%D9%8E%D9%86%D9%8E%20%D8%B1%D9%8E%D8%B3%D9%8F%D9%88%D9%92%D9%84%D9%8F%20%D8%A7%D9%84%D9%84%D9%87%D9%90%20%D8%B5%D9%8E%D9%84%D9%91%D9%8E%D9%89%20%D8%A7%D9%84%D9%84%D9%87%D9%8F%20%D8%B9%D9%8E%D9%84%D9%8E%D9%8A%D9%92%D9%87%D9%90%20%D9%88%D9%8E%D8%B3%D9%8E%D9%84%D9%91%D9%8E%D9%85%D9%8E%20%D8%A7%D9%84%D8%B1%D9%91%D9%8E%D8%A7%D8%B4%D9%90%D9%8A%D9%8E%20%D9%88%D9%8E%D8%A7%D9%84%D9%92%D9%85%D9%8F%D8%B1%D9%92%D8%AA%D9%8E%D8%B4%D9%90%D9%8A%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*La'ana%20rasoolullaahi%20sallallaahu%20'alaihi%20wasallam%20arraashiya%20walmurtashee*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Rasoolullah%20%EF%B7%BA%20ne%20rishwat%20dene%20aur%20lene%20waale%20par%20laanat%20farmaai%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Abu%20Dawud:%203580)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a><b> </b></center></center></td></tr></tbody></table><br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-72316295977481947422026-06-09T05:00:00.000+05:302026-06-09T05:00:00.205+05:3009 June 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-2787898694266663772026-06-08T16:30:00.000+05:302026-06-08T16:30:00.119+05:3008 June Evening 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-18992260420722932242026-06-08T05:00:00.009+05:302026-06-08T05:00:00.195+05:30June - 08<div dir="ltr" style="text-align: left;" trbidi="on"><table border="1" style="width: 100%;"> <tbody><tr> <td><center><b>Aaj Ki Hadees</b></center></td> </tr><tr> <td><center><b>ุฅูุฐูุงุณูุฃูููุชู ููุงุณูุฃููู ุงูููู</b></center><center><b> </b></center><center><b>Izaa sa'alta fas'alillaah</b><br /><br />Tarjama: Tujhe jab kuchh maangna ho to Allah Ta'ala hi se maanga kar.<br /><br />(Tirmizi: 2516)<br /> <br /><center><span class="Apple-style-span" style="color: blue;"> </span></center><center><span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=June%20%E2%80%93%2008&body=%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%B3%D9%8E%D8%A3%D9%8E%D9%84%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%A3%D9%8E%D9%84%D9%90%20%D8%A7%D9%84%D9%84%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*Izaa%20sa'alta%20fas'alillaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tujhe%20jab%20kuchh%20maangna%20ho%20to%20Allah%20Ta'ala%20hi%20se%20maanga%20kar.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202516)%0D%0A%0D%0A%F0%9F%93%B2%20Shared Via DailyIslamicMessage.blogspot.com" target="_blank" title="Send June โ 08 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*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%B3%D9%8E%D8%A3%D9%8E%D9%84%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%A3%D9%8E%D9%84%D9%90%20%D8%A7%D9%84%D9%84%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*Izaa%20sa%27alta%20fas%27alillaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tujhe%20jab%20kuchh%20maangna%20ho%20to%20Allah%20Ta%27ala%20hi%20se%20maanga%20kar.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%202516%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%B3%D9%8E%D8%A3%D9%8E%D9%84%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%A3%D9%8E%D9%84%D9%90%20%D8%A7%D9%84%D9%84%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*Izaa%20sa'alta%20fas'alillaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tujhe%20jab%20kuchh%20maangna%20ho%20to%20Allah%20Ta'ala%20hi%20se%20maanga%20kar.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202516)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20*Download%20App*%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></center><b></b></center></td></tr></tbody></table><br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-33476254498416119042026-06-08T05:00:00.000+05:302026-06-08T05:00:00.549+05:3008 June 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-50456354025380547192026-06-08T05:00:00.000+05:302026-06-08T05:00:00.549+05:30June - 08<div dir="ltr" style="text-align: left;" trbidi="on"><table border="1" style="width: 100%;"> <tbody><tr> <td><center><b>Aaj Ki Hadees</b></center></td> </tr><tr> <td><center><b>ุฅูุฐูุงุณูุฃูููุชู ููุงุณูุฃููู ุงูููู</b></center><center><b> </b></center><center><b>Izaa sa'alta fas'alillaah</b><br /><br />Tarjama: Tujhe jab kuchh maangna ho to Allah Ta'ala hi se maanga kar.<br /><br />(Tirmizi: 2516)<br /> <br /><center><span class="Apple-style-span" style="color: blue;"> </span></center><center><span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=June%20%E2%80%93%2008&body=%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%B3%D9%8E%D8%A3%D9%8E%D9%84%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%A3%D9%8E%D9%84%D9%90%20%D8%A7%D9%84%D9%84%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*Izaa%20sa'alta%20fas'alillaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tujhe%20jab%20kuchh%20maangna%20ho%20to%20Allah%20Ta'ala%20hi%20se%20maanga%20kar.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202516)%0D%0A%0D%0A%F0%9F%93%B2%20Shared Via DailyIslamicMessage.blogspot.com" target="_blank" title="Send June โ 08 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*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%B3%D9%8E%D8%A3%D9%8E%D9%84%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%A3%D9%8E%D9%84%D9%90%20%D8%A7%D9%84%D9%84%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*Izaa%20sa%27alta%20fas%27alillaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tujhe%20jab%20kuchh%20maangna%20ho%20to%20Allah%20Ta%27ala%20hi%20se%20maanga%20kar.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%202516%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%B3%D9%8E%D8%A3%D9%8E%D9%84%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%A3%D9%8E%D9%84%D9%90%20%D8%A7%D9%84%D9%84%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*Izaa%20sa'alta%20fas'alillaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Tujhe%20jab%20kuchh%20maangna%20ho%20to%20Allah%20Ta'ala%20hi%20se%20maanga%20kar.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202516)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></center><b></b></center></td></tr></tbody></table><br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-42759036797628040782026-06-07T16:30:00.000+05:302026-06-07T16:30:00.117+05:3007 June Evening 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-27086606598505694782026-06-07T05:00:00.002+05:302026-06-07T05:00:00.123+05:30June - 07<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 100%;"> <tbody>
<tr> <td><center>
<b>Aaj Ki Hadees</b></center>
</td> </tr>
<tr> <td><center>
<b>ุงููุณููุฎูููู ููุฑููุจู ู
ูููู ุงูููู ููุฑููุจู ู
ูููู ุงููุฌููููุฉู</b></center>
<center>
<b> </b></center>
<center>
<b>Assakhiyyu qareebum minallaahi qareebum minal jannah</b><br />
<br />
Tarjama: Sakhi aadmi Allah se qareeb hota hai, Jannat ke qareeb hota hai.<br />
<br />
(Tirmizi: 1961)<br />
<br />
<center>
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=June%20%E2%80%93%2007&body=%D8%A7%D9%8E%D9%84%D8%B3%D9%91%D9%8E%D8%AE%D9%90%D9%8A%D9%91%D9%8F%20%D9%82%D9%8E%D8%B1%D9%90%D9%8A%D8%A8%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%84%D9%87%D9%90%20%D9%82%D9%8E%D8%B1%D9%90%D9%8A%D8%A8%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Assakhiyyu%20qareebum%20minallaahi%20qareebum%20minal%20jannah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Sakhi%20aadmi%20Allah%20se%20qareeb%20hota%20hai,%20Jannat%20ke%20qareeb%20hota%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202061)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June โ 07 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*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A7%D9%8E%D9%84%D8%B3%D9%91%D9%8E%D8%AE%D9%90%D9%8A%D9%91%D9%8F%20%D9%82%D9%8E%D8%B1%D9%90%D9%8A%D8%A8%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%84%D9%87%D9%90%20%D9%82%D9%8E%D8%B1%D9%90%D9%8A%D8%A8%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Assakhiyyu%20qareebum%20minallaahi%20qareebum%20minal%20jannah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Sakhi%20aadmi%20Allah%20se%20qareeb%20hota%20hai,%20Jannat%20ke%20qareeb%20hota%20hai.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%202061%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A7%D9%8E%D9%84%D8%B3%D9%91%D9%8E%D8%AE%D9%90%D9%8A%D9%91%D9%8F%20%D9%82%D9%8E%D8%B1%D9%90%D9%8A%D8%A8%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%84%D9%87%D9%90%20%D9%82%D9%8E%D8%B1%D9%90%D9%8A%D8%A8%D9%8C%20%D9%85%D9%90%D9%91%D9%86%D9%8E%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Assakhiyyu%20qareebum%20minallaahi%20qareebum%20minal%20jannah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Sakhi%20aadmi%20Allah%20se%20qareeb%20hota%20hai,%20Jannat%20ke%20qareeb%20hota%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202061)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a><b> </b></center>
</center>
</td></tr>
</tbody></table>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-89482573621788273622026-06-07T05:00:00.000+05:302026-06-07T05:00:00.270+05:3007 June 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-23258419134587589322026-06-06T16:30:00.000+05:302026-06-06T16:30:00.132+05:3006 June Evening 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-10308853258797991312026-06-06T05:00:00.000+05:302026-06-06T05:00:00.191+05:30June - 06<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>
<span class="arabic_text_details arabic">ููุนููู ุงูููููู ุงูุณููุงุฑููู</span></center>
<center>
<b> </b></center>
<center>
<b>La'anallaahus saariq</b><br />
<br />
Tarjama: Allah Ta'ala chor par laanat farmaata hai.<br />
<br />
(Bukhari: 6799)<br />
<br />
Chori karn bahot bada gunaah hai.<br />
Chori karne waale se Allah Ta'al bahot naaraaz hote hain.<br />
Chori karne waala har ek ke nazdeek naapasand aur zaleel hota hai.<br />
<br />
<center>
<span class="Apple-style-span" style="color: blue;">Share on: </span><a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%D9%84%D9%8E%D8%B9%D9%8E%D9%86%D9%8E%20%D8%A7%D9%84%D9%84%D9%91%D9%8E%D9%87%D9%8F%20%D8%A7%D9%84%D8%B3%D9%91%D9%8E%D8%A7%D8%B1%D9%90%D9%82%D9%8E%0D%0A%0D%0A%E2%9C%BA%20*La'anallaahus%20saariq*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Allah%20Ta'ala%20chor%20par%20laanat%20farmaata%20hai.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%206799)%0D%0A%0D%0A%E2%9C%BA%20Chori%20karn%20bahot%20bada%20gunaah%20hai.%0D%0A%0D%0A%E2%9C%BA%20Chori%20karne%20waale%20se%20Allah%20Ta'al%20bahot%20naaraaz%20hote%20hain.%0D%0A%0D%0A%E2%9C%BA%20Chori%20karne%20waala%20har%20ek%20ke%20nazdeek%20naapasand%20aur%20zaleel%20hota%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><b> </b></center>
</center>
</td></tr>
</tbody></table>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-72937724215923277442026-06-06T05:00:00.000+05:302026-06-06T05:00:00.191+05:3006 June 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-28881196761353296722026-06-05T16:30:00.000+05:302026-06-05T16:30:00.195+05:3005 June Evening 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-2622286354134111352026-06-05T05:00:00.000+05:302026-06-05T05:00:00.208+05:30June - 05<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 100%;"> <tbody>
<tr> <td><center>
<b>Aaj Ki Hadees</b></center>
</td> </tr>
<tr> <td><center>
<b>ุฅูุฐูุงุงุณูุชูุนูููุชู ููุงุณูุชูุนููู ุจูุงูููู</b></center>
<center>
<b> </b></center>
<center>
<b>Izasta'anta fasta'in billaah</b><br />
<br />
Tarjama: Jab tum madad maango to Allah Ta'ala hi se madad maango.<br />
<br />
(Tirmizi: 2516)<br />
<br />
<center>
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=June%20%E2%80%93%2005&body=%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%A7%D8%B3%D9%92%D8%AA%D9%8E%D8%B9%D9%8E%D9%86%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%AA%D9%8E%D8%B9%D9%90%D9%86%D9%92%20%D8%A8%D9%90%D8%A7%D9%84%D9%84%D9%87%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Izasta'anta%20fasta'in%20billaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jab%20tum%20madad%20maango%20to%20Allah%20Ta'ala%20hi%20se%20madad%20maango.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202516)%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June โ 05 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*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%A7%D8%B3%D9%92%D8%AA%D9%8E%D8%B9%D9%8E%D9%86%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%AA%D9%8E%D8%B9%D9%90%D9%86%D9%92%20%D8%A8%D9%90%D8%A7%D9%84%D9%84%D9%87%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Izasta%27anta%20fasta%27in%20billaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jab%20tum%20madad%20maango%20to%20Allah%20Ta%27ala%20hi%20se%20madad%20maango.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%202516%29%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D8%A5%D9%90%D8%B0%D9%8E%D8%A7%D8%A7%D8%B3%D9%92%D8%AA%D9%8E%D8%B9%D9%8E%D9%86%D9%92%D8%AA%D9%8E%20%D9%81%D9%8E%D8%A7%D8%B3%D9%92%D8%AA%D9%8E%D8%B9%D9%90%D9%86%D9%92%20%D8%A8%D9%90%D8%A7%D9%84%D9%84%D9%87%D9%90%0D%0A%0D%0A%E2%9C%BA%20*Izasta'anta%20fasta'in%20billaah*%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jab%20tum%20madad%20maango%20to%20Allah%20Ta'ala%20hi%20se%20madad%20maango.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202516)%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a><b> </b></center>
</center>
</td></tr>
</tbody></table>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-69319995207517464112026-06-05T05:00:00.000+05:302026-06-05T05:00:00.208+05:3005 June 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-80131131082102766412026-06-04T16:30:00.000+05:302026-06-04T16:30:00.207+05:3004 June Evening 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-66270677827871119512026-06-04T05:00:00.001+05:302026-06-04T05:00:00.212+05:3004 JUNE Hadees - Jis Ne Logon Ka Shukriya Ada Nahin Kiya Us Ne Allah Ka Shukriya Ada Nahin Kiya<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 100%;"> <tbody>
<tr> <td><center>
<b>Aaj Ki Hadees</b></center>
</td> </tr>
<tr> <td><center>
<b>ู
ููู ูููู
ู ููุดูููุฑู ุงููููุงุณู ููู
ู ููุดูููุฑูุงูููููู</b></center>
<center>
<b> </b></center>
<center>
<b>Mallam yashkurinnaasa lam yashkurillaah</b><br />
<br />
Tarjama: Jis ne logon ka shukriya ada nahin kiya us ne Allah ka shukriya ada nahin kiya.<br />
<br />
(Tirmizi: 1955)<br />
<br />
โก Shukriya ada karna achchhi aadat hai.<br />
โก Agar koi ehsaan Kare to uska shukriya ada karna chaahiye.<br />
โก Na shukri Allah Ta'ala ko na pasand hai.<br />
<br />
<center>
<span class="Apple-style-span" style="color: blue;">Share on:</span> <a href="mailto:?subject=June%20%E2%80%93%2004&body=%D9%85%D9%8E%D9%86%D9%92%20%D9%84%D9%91%D9%8E%D9%85%D9%92%20%D9%8A%D9%8E%D8%B4%D9%92%D9%83%D9%8F%D8%B1%D9%90%20%D8%A7%D9%84%D9%86%D9%8C%D9%8E%D8%A7%D8%B3%D9%8E%20%D9%84%D9%8E%D9%85%D9%92%20%D9%8A%D9%8E%D8%B4%D9%92%D9%83%D9%8F%D8%B1%D9%90%D8%A7%D9%84%D9%84%D9%91%D9%8E%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20Mallam%20yashkurinnaasa%20lam%20yashkurillaah%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jis%20ne%20logon%20ka%20shukriya%20ada%20nahin%20kiya%20us%20ne%20Allah%20ka%20shukriya%20ada%20nahin%20kiya.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202055)%0D%0A%0D%0A%E2%96%A1%20Shukriya%20ada%20karna%20achchhi%20aadat%20hai.%0D%0A%0D%0A%E2%96%A1%20Agar%20koi%20ehsaan%20Kare%20to%20uska%20shukriya%20ada%20karna%20chaahiye.%0D%0A%0D%0A%E2%96%A1%20Na%20shukri%20Allah%20Ta'ala%20ko%20na%20pasand%20hai.%0D%0A%0D%0A%F0%9F%93%B2%20*Download%20Islamic%20Messages%20Android%20App*%20-%20Goo.gl/mg4455" target="_blank" title="Send June โ 04 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*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%85%D9%8E%D9%86%D9%92%20%D9%84%D9%91%D9%8E%D9%85%D9%92%20%D9%8A%D9%8E%D8%B4%D9%92%D9%83%D9%8F%D8%B1%D9%90%20%D8%A7%D9%84%D9%86%D9%8C%D9%8E%D8%A7%D8%B3%D9%8E%20%D9%84%D9%8E%D9%85%D9%92%20%D9%8A%D9%8E%D8%B4%D9%92%D9%83%D9%8F%D8%B1%D9%90%D8%A7%D9%84%D9%84%D9%91%D9%8E%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20Mallam%20yashkurinnaasa%20lam%20yashkurillaah%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jis%20ne%20logon%20ka%20shukriya%20ada%20nahin%20kiya%20us%20ne%20Allah%20ka%20shukriya%20ada%20nahin%20kiya.%0D%0A%0D%0A%E2%9C%BA%20%28Tirmizi:%202055%29%0D%0A%0D%0A%E2%96%A1%20Shukriya%20ada%20karna%20achchhi%20aadat%20hai.%0D%0A%0D%0A%E2%96%A1%20Agar%20koi%20ehsaan%20Kare%20to%20uska%20shukriya%20ada%20karna%20chaahiye.%0D%0A%0D%0A%E2%96%A1%20Na%20shukri%20Allah%20Ta%27ala%20ko%20na%20pasand%20hai.%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%93%B2%20Download%20App%20Goo.gl/mg4455"><u><span class="Apple-style-span" style="color: #38761d;">Telegram</span></u></a> | <a href="whatsapp://send?text=%F0%9F%8C%B7%20%20%E2%96%AB%20%20*Aaj%20Ki%20Hadees*%20%20%E2%96%AB%20%20%F0%9F%8C%B7%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A%F0%9F%8D%81%20%D9%85%D9%8E%D9%86%D9%92%20%D9%84%D9%91%D9%8E%D9%85%D9%92%20%D9%8A%D9%8E%D8%B4%D9%92%D9%83%D9%8F%D8%B1%D9%90%20%D8%A7%D9%84%D9%86%D9%8C%D9%8E%D8%A7%D8%B3%D9%8E%20%D9%84%D9%8E%D9%85%D9%92%20%D9%8A%D9%8E%D8%B4%D9%92%D9%83%D9%8F%D8%B1%D9%90%D8%A7%D9%84%D9%84%D9%91%D9%8E%D9%87%D9%8E%0D%0A%0D%0A%E2%9C%BA%20Mallam%20yashkurinnaasa%20lam%20yashkurillaah%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jis%20ne%20logon%20ka%20shukriya%20ada%20nahin%20kiya%20us%20ne%20Allah%20ka%20shukriya%20ada%20nahin%20kiya.%0D%0A%0D%0A%E2%9C%BA%20(Tirmizi:%202055)%0D%0A%0D%0A%E2%96%A1%20Shukriya%20ada%20karna%20achchhi%20aadat%20hai.%0D%0A%0D%0A%E2%96%A1%20Agar%20koi%20ehsaan%20Kare%20to%20uska%20shukriya%20ada%20karna%20chaahiye.%0D%0A%0D%0A%E2%96%A1%20Na%20shukri%20Allah%20Ta'ala%20ko%20na%20pasand%20hai.%0D%0A%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%E3%80%B0%0D%0A๐ฒ Join: Islam316.blogspot.com"><u><span class="Apple-style-span" style="color: #38761d;">WhatsApp</span></u></a></center>
<b></b></center>
</td></tr>
<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/Vfk_-LiQ944/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://Youtube.com/embed/Vfk_-LiQ944" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div>
</td> </tr>
</tbody></table>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-73025111077578126962026-06-04T05:00:00.000+05:302026-06-04T05:00:00.481+05:3004 June 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-22610211237203232092026-06-03T16:30:00.000+05:302026-06-03T16:30:00.117+05:3003 June Evening 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-32008028537933028732026-06-03T05:00:00.000+05:302026-06-03T05:00:00.119+05:3003 JUNE (Aaj Ki Hadees) - Jo Shakhs Meri Itaa'at Karega Woh Jannat Mein Daakhil Hoga<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" style="width: 100%;"> <tbody>
<tr> <td><center>
<b>Aaj Ki Hadees</b></center>
</td> </tr>
<tr> <td><center>
<b>ู
ููู ุฃูุทูุงุนููููู ุฏูุฎููู ุงููุฌููููุฉู</b></center>
<center>
<b> </b></center>
<center>
<b>Man ataa'ani dakhalal jannah</b><br />
<br />
Tarjama: Jo shakhs meri itaa'at karega woh Jannat mein daakhil hoga.<br />
<br />
(Bukhari: 7280)<br />
<br />
Hamare liye Hazrat Muhammad ๏ทบ ko Rasool maanna zaroori hai.<br />
<br />
Aap ๏ทบ ke tareeqon par chalna zaroori hai.<br />
<br /> Jo Aap ๏ทบ ke tareeqon par chalega woh Jannat mein daakhil hoga.<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%20%D9%85%D9%8E%D9%86%D9%92%20%D8%A3%D9%8E%D8%B7%D9%8E%D8%A7%D8%B9%D9%8E%D9%86%D9%90%D9%8A%D9%92%20%D8%AF%D9%8E%D8%AE%D9%8E%D9%84%D9%8E%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%8E%0D%0A%0D%0A%E2%9C%BA%20Man%20ataa%27ani%20dakhalal%20jannah%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jo%20shakhs%20meri%20itaa%27at%20karega%20woh%20Jannat%20mein%20daakhil%20hoga.%0D%0A%0D%0A%E2%9C%BA%20%28Bukhari:%207280%29%0D%0A%0D%0A%E2%9C%BA%20Hamare%20liye%20Hazrat%20Muhammad%20%EF%B7%BA%20%20ko%20Rasool%20maanna%20zaroori%20hai.%0D%0A%0D%0A%E2%9C%BA%20Aap%20%EF%B7%BA%20%20ke%20tareeqon%20par%20chalna%20zaroori%20hai.%0D%0A%0D%0A%E2%9C%BA%20Jo%20Aap%20%EF%B7%BA%20%20ke%20tareeqon%20par%20chalega%20woh%20Jannat%20mein%20daakhil%20hoga.%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%20%D9%85%D9%8E%D9%86%D9%92%20%D8%A3%D9%8E%D8%B7%D9%8E%D8%A7%D8%B9%D9%8E%D9%86%D9%90%D9%8A%D9%92%20%D8%AF%D9%8E%D8%AE%D9%8E%D9%84%D9%8E%20%D8%A7%D9%84%D9%92%D8%AC%D9%8E%D9%86%D9%91%D9%8E%D8%A9%D9%8E%0D%0A%0D%0A%E2%9C%BA%20Man%20ataa'ani%20dakhalal%20jannah%0D%0A%0D%0A%E2%9C%BA%20Tarjama:%20Jo%20shakhs%20meri%20itaa'at%20karega%20woh%20Jannat%20mein%20daakhil%20hoga.%0D%0A%0D%0A%E2%9C%BA%20(Bukhari:%207280)%0D%0A%0D%0A%E2%9C%BA%20Hamare%20liye%20Hazrat%20Muhammad%20%EF%B7%BA%20%20ko%20Rasool%20maanna%20zaroori%20hai.%0D%0A%0D%0A%E2%9C%BA%20Aap%20%EF%B7%BA%20%20ke%20tareeqon%20par%20chalna%20zaroori%20hai.%0D%0A%0D%0A%E2%9C%BA%20Jo%20Aap%20%EF%B7%BA%20%20ke%20tareeqon%20par%20chalega%20woh%20Jannat%20mein%20daakhil%20hoga.%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/1UQy-zd40SA/0.jpg" frameborder="0" height="266" id="okplayer" mozallowfullscreen="mozallowfullscreen" name="okplayer" scrolling="no" seamless="seamless" src="https://Youtube.com/embed/1UQy-zd40SA" style="height: 270px; left: 0px; position: absolute; top: 0px; width: 320px;" webkitallowfullscreen="webkitAllowFullScreen" width="320"></iframe> </div>
</td> </tr>
</tbody></table>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2619536654761151932.post-82329188388914268132026-06-03T05:00:00.000+05:302026-06-03T05:00:00.119+05:3003 June 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-57332470276847574222026-06-02T16:30:00.000+05:302026-06-02T16:30:00.128+05:3002 June Evening 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.com0