Spaces:

Adamchab
/

dhikr-enfant

Running

App Files Files Community

Adamchab commited on Apr 6

Commit

c641a0c

verified ·

1 Parent(s): 276bcb5

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +650 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Dhikr Enfant
-emoji: 🏆
-colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: dhikr-enfant
+emoji: 🐳
+colorFrom: green
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,650 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dhikr pour Enfants - Récompenses</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        @keyframes fall {
+            to { transform: translateY(100vh) rotate(360deg); }
+        }
+        .bounce-animation {
+            animation: bounce 1s infinite;
+        }
+        .progress-ring__circle {
+            transition: stroke-dashoffset 0.35s;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+        .star-reward {
+            transition: all 0.3s ease;
+        }
+        .star-reward:hover {
+            transform: scale(1.2);
+        }
+        .dhikr-option {
+            transition: all 0.3s ease;
+        }
+        .dhikr-option:hover {
+            transform: translateY(-5px);
+        }
+        .dhikr-option.selected {
+            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.5);
+        }
+        .fall-animation {
+            animation: fall linear forwards;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-b from-blue-50 to-purple-50 min-h-screen font-sans">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-purple-800 mb-2">Dhikr des Petits Cœurs</h1>
+            <p class="text-lg text-purple-600">Choisis ton dhikr et gagne des récompenses !</p>
+        </header>
+        <!-- Main Content -->
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Dhikr Counter -->
+            <div class="bg-white rounded-2xl shadow-xl p-6 flex-1">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-semibold text-purple-700">Dhikr du Jour</h2>
+                    <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Aujourd'hui</span>
+                </div>
+                <!-- Dhikr Selection -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-medium text-purple-800 mb-3">Choisis ton dhikr</h3>
+                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                        <div class="dhikr-option bg-white border-2 border-purple-200 rounded-xl p-3 text-center cursor-pointer" data-dhikr="subhanallah">
+                            <div class="w-12 h-12 mx-auto mb-2 bg-purple-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-sun text-purple-600 text-xl"></i>
+                            </div>
+                            <p class="text-sm font-medium text-purple-800">Subhanallah</p>
+                            <p class="text-xs text-purple-600">Gloire à Allah</p>
+                        </div>
+                        <div class="dhikr-option bg-white border-2 border-purple-200 rounded-xl p-3 text-center cursor-pointer" data-dhikr="alhamdulillah">
+                            <div class="w-12 h-12 mx-auto mb-2 bg-green-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-hands-praying text-green-600 text-xl"></i>
+                            </div>
+                            <p class="text-sm font-medium text-purple-800">Alhamdulillah</p>
+                            <p class="text-xs text-purple-600">Louange à Allah</p>
+                        </div>
+                        <div class="dhikr-option bg-white border-2 border-purple-200 rounded-xl p-3 text-center cursor-pointer" data-dhikr="allahuakbar">
+                            <div class="w-12 h-12 mx-auto mb-2 bg-blue-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-mountain text-blue-600 text-xl"></i>
+                            </div>
+                            <p class="text-sm font-medium text-purple-800">Allahu Akbar</p>
+                            <p class="text-xs text-purple-600">Allah est Grand</p>
+                        </div>
+                        <div class="dhikr-option bg-white border-2 border-purple-200 rounded-xl p-3 text-center cursor-pointer" data-dhikr="astaghfirullah">
+                            <div class="w-12 h-12 mx-auto mb-2 bg-yellow-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-hand-holding-heart text-yellow-600 text-xl"></i>
+                            </div>
+                            <p class="text-sm font-medium text-purple-800">Astaghfirullah</p>
+                            <p class="text-xs text-purple-600">Je demande pardon</p>
+                        </div>
+                        <div class="dhikr-option bg-white border-2 border-purple-200 rounded-xl p-3 text-center cursor-pointer" data-dhikr="laillahaillallah">
+                            <div class="w-12 h-12 mx-auto mb-2 bg-red-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-star text-red-600 text-xl"></i>
+                            </div>
+                            <p class="text-sm font-medium text-purple-800">La ilaha illallah</p>
+                            <p class="text-xs text-purple-600">Pas de divinité sauf Allah</p>
+                        </div>
+                        <div class="dhikr-option bg-white border-2 border-purple-200 rounded-xl p-3 text-center cursor-pointer" data-dhikr="salat">
+                            <div class="w-12 h-12 mx-auto mb-2 bg-indigo-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-mosque text-indigo-600 text-xl"></i>
+                            </div>
+                            <p class="text-sm font-medium text-purple-800">Salat ala Nabi</p>
+                            <p class="text-xs text-purple-600">Prière sur le Prophète</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Selected Dhikr Display -->
+                <div id="selectedDhikrContainer" class="hidden">
+                    <div class="flex flex-col items-center mb-8">
+                        <div class="relative w-48 h-48 mb-6">
+                            <svg class="w-full h-full" viewBox="0 0 100 100">
+                                <!-- Background circle -->
+                                <circle class="text-purple-100" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
+                                <!-- Progress circle -->
+                                <circle class="text-purple-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"
+                                        stroke-dasharray="251.2" stroke-dashoffset="calc(251.2 - (251.2 * var(--progress)) / 100)" />
+                            </svg>
+                            <div class="absolute inset-0 flex items-center justify-center flex-col">
+                                <span id="counter" class="text-5xl font-bold text-purple-800">0</span>
+                                <span class="text-purple-600">/ <span id="dailyGoal">100</span></span>
+                            </div>
+                        </div>
+                        <div class="text-center mb-6">
+                            <p class="text-purple-700 mb-2">Dis :</p>
+                            <p id="dhikrArabic" class="text-2xl font-arabic text-purple-900 mb-2">سُبْحَانَ اللَّهِ</p>
+                            <p id="dhikrTranslation" class="text-purple-600">"Gloire à Allah"</p>
+                        </div>
+                        <button id="dhikrBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 shadow-lg">
+                            <i class="fas fa-hands-praying mr-2"></i> J'ai fait un Dhikr
+                        </button>
+                    </div>
+                    <div class="bg-purple-50 rounded-xl p-4">
+                        <h3 class="font-semibold text-purple-800 mb-2">Objectif du jour</h3>
+                        <div class="w-full bg-purple-200 rounded-full h-4">
+                            <div id="dailyProgress" class="bg-purple-600 h-4 rounded-full" style="width: 0%"></div>
+                        </div>
+                        <p class="text-purple-700 text-sm mt-2"><span id="dailyCount">0</span>/<span id="dailyGoalText">100</span> - Continue comme ça !</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Rewards Section -->
+            <div class="bg-white rounded-2xl shadow-xl p-6 flex-1">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-semibold text-purple-700">Mes Récompenses</h2>
+                    <div class="flex items-center bg-yellow-100 px-3 py-1 rounded-full">
+                        <i class="fas fa-star text-yellow-500 mr-1"></i>
+                        <span id="totalStars" class="font-medium text-yellow-800">0</span>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h3 class="text-lg font-medium text-purple-800 mb-3">Prochaines récompenses</h3>
+                    <div class="grid grid-cols-3 gap-4">
+                        <div class="reward-card bg-purple-50 rounded-xl p-3 text-center border-2 border-purple-200">
+                            <div class="w-16 h-16 mx-auto mb-2 bg-purple-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-star text-yellow-400 text-2xl"></i>
+                            </div>
+                            <p class="text-sm text-purple-800">10 Dhikrs</p>
+                            <button id="claim10" class="mt-2 bg-purple-200 text-purple-800 text-xs py-1 px-2 rounded-full disabled:opacity-50" disabled>
+                                À gagner
+                            </button>
+                        </div>
+                        <div class="reward-card bg-purple-50 rounded-xl p-3 text-center border-2 border-purple-200">
+                            <div class="w-16 h-16 mx-auto mb-2 bg-purple-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-trophy text-yellow-400 text-2xl"></i>
+                            </div>
+                            <p class="text-sm text-purple-800">50 Dhikrs</p>
+                            <button id="claim50" class="mt-2 bg-purple-200 text-purple-800 text-xs py-1 px-2 rounded-full disabled:opacity-50" disabled>
+                                À gagner
+                            </button>
+                        </div>
+                        <div class="reward-card bg-purple-50 rounded-xl p-3 text-center border-2 border-purple-200">
+                            <div class="w-16 h-16 mx-auto mb-2 bg-purple-100 rounded-full flex items-center justify-center">
+                                <i class="fas fa-crown text-yellow-400 text-2xl"></i>
+                            </div>
+                            <p class="text-sm text-purple-800">100 Dhikrs</p>
+                            <button id="claim100" class="mt-2 bg-purple-200 text-purple-800 text-xs py-1 px-2 rounded-full disabled:opacity-50" disabled>
+                                À gagner
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-medium text-purple-800 mb-3">Mes trophées</h3>
+                    <div id="trophies" class="grid grid-cols-4 gap-3">
+                        <!-- Trophies will appear here -->
+                    </div>
+                </div>
+                <!-- Dhikr Stats -->
+                <div class="mt-8">
+                    <h3 class="text-lg font-medium text-purple-800 mb-3">Mes statistiques</h3>
+                    <div class="space-y-3">
+                        <div>
+                            <div class="flex justify-between text-sm text-purple-700 mb-1">
+                                <span>Subhanallah</span>
+                                <span id="subhanallahCount">0</span>
+                            </div>
+                            <div class="w-full bg-purple-100 rounded-full h-2">
+                                <div class="bg-purple-400 h-2 rounded-full" style="width: 0%" id="subhanallahProgress"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between text-sm text-purple-700 mb-1">
+                                <span>Alhamdulillah</span>
+                                <span id="alhamdulillahCount">0</span>
+                            </div>
+                            <div class="w-full bg-green-100 rounded-full h-2">
+                                <div class="bg-green-400 h-2 rounded-full" style="width: 0%" id="alhamdulillahProgress"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between text-sm text-purple-700 mb-1">
+                                <span>Allahu Akbar</span>
+                                <span id="allahuakbarCount">0</span>
+                            </div>
+                            <div class="w-full bg-blue-100 rounded-full h-2">
+                                <div class="bg-blue-400 h-2 rounded-full" style="width: 0%" id="allahuakbarProgress"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between text-sm text-purple-700 mb-1">
+                                <span>Astaghfirullah</span>
+                                <span id="astaghfirullahCount">0</span>
+                            </div>
+                            <div class="w-full bg-yellow-100 rounded-full h-2">
+                                <div class="bg-yellow-400 h-2 rounded-full" style="width: 0%" id="astaghfirullahProgress"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between text-sm text-purple-700 mb-1">
+                                <span>La ilaha illallah</span>
+                                <span id="laillahaillallahCount">0</span>
+                            </div>
+                            <div class="w-full bg-red-100 rounded-full h-2">
+                                <div class="bg-red-400 h-2 rounded-full" style="width: 0%" id="laillahaillallahProgress"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between text-sm text-purple-700 mb-1">
+                                <span>Salat ala Nabi</span>
+                                <span id="salatCount">0</span>
+                            </div>
+                            <div class="w-full bg-indigo-100 rounded-full h-2">
+                                <div class="bg-indigo-400 h-2 rounded-full" style="width: 0%" id="salatProgress"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Celebration Modal -->
+        <div id="celebrationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 text-center relative">
+                <button id="closeModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+                <div class="bounce-animation text-6xl text-yellow-400 mb-4">
+                    <i id="modalIcon" class="fas fa-trophy"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-purple-800 mb-2">Félicitations !</h3>
+                <p id="modalMessage" class="text-purple-600 mb-4">Tu as gagné une récompense !</p>
+                <div class="flex justify-center">
+                    <div class="star-reward bg-yellow-100 rounded-full w-16 h-16 flex items-center justify-center">
+                        <i class="fas fa-star text-yellow-400 text-3xl"></i>
+                        <span class="absolute text-yellow-800 font-bold text-sm">+1</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Elements
+            const dhikrBtn = document.getElementById('dhikrBtn');
+            const counter = document.getElementById('counter');
+            const dailyCount = document.getElementById('dailyCount');
+            const dailyProgress = document.getElementById('dailyProgress');
+            const dailyGoal = document.getElementById('dailyGoal');
+            const dailyGoalText = document.getElementById('dailyGoalText');
+            const totalStars = document.getElementById('totalStars');
+            const claim10 = document.getElementById('claim10');
+            const claim50 = document.getElementById('claim50');
+            const claim100 = document.getElementById('claim100');
+            const trophiesContainer = document.getElementById('trophies');
+            const celebrationModal = document.getElementById('celebrationModal');
+            const modalMessage = document.getElementById('modalMessage');
+            const modalIcon = document.getElementById('modalIcon');
+            const closeModal = document.getElementById('closeModal');
+            const dhikrOptions = document.querySelectorAll('.dhikr-option');
+            const selectedDhikrContainer = document.getElementById('selectedDhikrContainer');
+            const dhikrArabic = document.getElementById('dhikrArabic');
+            const dhikrTranslation = document.getElementById('dhikrTranslation');
+            // Dhikr data
+            const dhikrData = {
+                subhanallah: {
+                    arabic: "سُبْحَانَ اللَّهِ",
+                    translation: "Gloire à Allah",
+                    color: "purple",
+                    icon: "fa-sun",
+                    dailyGoal: 33
+                },
+                alhamdulillah: {
+                    arabic: "الْحَمْدُ لِلَّهِ",
+                    translation: "Louange à Allah",
+                    color: "green",
+                    icon: "fa-hands-praying",
+                    dailyGoal: 33
+                },
+                allahuakbar: {
+                    arabic: "اللهُ أَكْبَرُ",
+                    translation: "Allah est Grand",
+                    color: "blue",
+                    icon: "fa-mountain",
+                    dailyGoal: 34
+                },
+                astaghfirullah: {
+                    arabic: "أَسْتَغْفِرُ اللَّهَ",
+                    translation: "Je demande pardon à Allah",
+                    color: "yellow",
+                    icon: "fa-hand-holding-heart",
+                    dailyGoal: 25
+                },
+                laillahaillallah: {
+                    arabic: "لَا إِلَٰهَ إِلَّا اللَّهُ",
+                    translation: "Pas de divinité sauf Allah",
+                    color: "red",
+                    icon: "fa-star",
+                    dailyGoal: 50
+                },
+                salat: {
+                    arabic: "اللَّهُمَّ صَلِّ عَلَى مُحَمَّدٍ",
+                    translation: "Ô Allah, prie sur Mohammed",
+                    color: "indigo",
+                    icon: "fa-mosque",
+                    dailyGoal: 10
+                }
+            };
+            // State
+            let currentDhikr = null;
+            let counts = {
+                subhanallah: localStorage.getItem('subhanallahCount') ? parseInt(localStorage.getItem('subhanallahCount')) : 0,
+                alhamdulillah: localStorage.getItem('alhamdulillahCount') ? parseInt(localStorage.getItem('alhamdulillahCount')) : 0,
+                allahuakbar: localStorage.getItem('allahuakbarCount') ? parseInt(localStorage.getItem('allahuakbarCount')) : 0,
+                astaghfirullah: localStorage.getItem('astaghfirullahCount') ? parseInt(localStorage.getItem('astaghfirullahCount')) : 0,
+                laillahaillallah: localStorage.getItem('laillahaillallahCount') ? parseInt(localStorage.getItem('laillahaillallahCount')) : 0,
+                salat: localStorage.getItem('salatCount') ? parseInt(localStorage.getItem('salatCount')) : 0,
+                today: localStorage.getItem('todayCount') ? parseInt(localStorage.getItem('todayCount')) : 0
+            };
+            let stars = localStorage.getItem('stars') ? parseInt(localStorage.getItem('stars')) : 0;
+            let claimedRewards = localStorage.getItem('claimedRewards') ? JSON.parse(localStorage.getItem('claimedRewards')) : [];
+            // Initialize
+            updateStatsDisplay();
+            updateRewardButtons();
+            updateTrophies();
+            // Event Listeners
+            dhikrBtn.addEventListener('click', addDhikr);
+            claim10.addEventListener('click', () => claimReward(10));
+            claim50.addEventListener('click', () => claimReward(50));
+            claim100.addEventListener('click', () => claimReward(100));
+            closeModal.addEventListener('click', () => celebrationModal.classList.add('hidden'));
+            dhikrOptions.forEach(option => {
+                option.addEventListener('click', function() {
+                    const dhikrType = this.getAttribute('data-dhikr');
+                    selectDhikr(dhikrType);
+                });
+            });
+            // Functions
+            function selectDhikr(dhikrType) {
+                currentDhikr = dhikrType;
+                // Update UI
+                dhikrOptions.forEach(option => {
+                    option.classList.remove('selected');
+                    if (option.getAttribute('data-dhikr') === dhikrType) {
+                        option.classList.add('selected');
+                    }
+                });
+                const dhikr = dhikrData[dhikrType];
+                dhikrArabic.textContent = dhikr.arabic;
+                dhikrTranslation.textContent = `"${dhikr.translation}"`;
+                dailyGoal.textContent = dhikr.dailyGoal;
+                dailyGoalText.textContent = dhikr.dailyGoal;
+                // Update counter with today's count
+                counter.textContent = counts.today;
+                dailyCount.textContent = counts.today;
+                dailyProgress.style.width = `${Math.min(100, (counts.today / dhikr.dailyGoal) * 100)}%`;
+                // Update progress ring
+                const progressCircle = document.querySelector('.progress-ring__circle');
+                const progress = Math.min(100, (counts.today / dhikr.dailyGoal) * 100);
+                progressCircle.style.setProperty('--progress', progress);
+                // Show the dhikr container
+                selectedDhikrContainer.classList.remove('hidden');
+                // Change button color based on selected dhikr
+                dhikrBtn.className = `bg-${dhikr.color}-600 hover:bg-${dhikr.color}-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 shadow-lg`;
+            }
+            function addDhikr() {
+                if (!currentDhikr) return;
+                counts[currentDhikr]++;
+                counts.today++;
+                // Save to localStorage
+                localStorage.setItem(`${currentDhikr}Count`, counts[currentDhikr]);
+                localStorage.setItem('todayCount', counts.today);
+                updateCounter();
+                updateProgressRing();
+                updateRewardButtons();
+                updateStatsDisplay();
+                // Animation
+                dhikrBtn.classList.add('animate-pulse');
+                setTimeout(() => {
+                    dhikrBtn.classList.remove('animate-pulse');
+                }, 300);
+                // Check for rewards
+                checkForRewards();
+                // Create floating dhikr text
+                createFloatingDhikr();
+            }
+            function createFloatingDhikr() {
+                const dhikr = dhikrData[currentDhikr];
+                const floatingText = document.createElement('div');
+                floatingText.className = `absolute text-${dhikr.color}-600 font-arabic text-xl font-bold opacity-0`;
+                floatingText.textContent = dhikr.arabic;
+                floatingText.style.top = `${Math.random() * 50 + 25}%`;
+                floatingText.style.left = `${Math.random() * 80 + 10}%`;
+                floatingText.style.animation = 'floatUp 2s forwards';
+                document.body.appendChild(floatingText);
+                setTimeout(() => {
+                    floatingText.remove();
+                }, 2000);
+            }
+            function updateCounter() {
+                const dhikr = dhikrData[currentDhikr];
+                counter.textContent = counts.today;
+                dailyCount.textContent = counts.today;
+                dailyProgress.style.width = `${Math.min(100, (counts.today / dhikr.dailyGoal) * 100)}%`;
+            }
+            function updateProgressRing() {
+                const dhikr = dhikrData[currentDhikr];
+                const progressCircle = document.querySelector('.progress-ring__circle');
+                const progress = Math.min(100, (counts.today / dhikr.dailyGoal) * 100);
+                progressCircle.style.setProperty('--progress', progress);
+            }
+            function updateRewardButtons() {
+                const totalCount = Object.values(counts).reduce((a, b) => a + b, 0) - counts.today;
+                if (totalCount >= 10 && !claimedRewards.includes(10)) {
+                    claim10.disabled = false;
+                    claim10.classList.remove('bg-purple-200');
+                    claim10.classList.add('bg-yellow-400', 'hover:bg-yellow-500');
+                    claim10.textContent = 'Récupérer !';
+                }
+                if (totalCount >= 50 && !claimedRewards.includes(50)) {
+                    claim50.disabled = false;
+                    claim50.classList.remove('bg-purple-200');
+                    claim50.classList.add('bg-yellow-400', 'hover:bg-yellow-500');
+                    claim50.textContent = 'Récupérer !';
+                }
+                if (totalCount >= 100 && !claimedRewards.includes(100)) {
+                    claim100.disabled = false;
+                    claim100.classList.remove('bg-purple-200');
+                    claim100.classList.add('bg-yellow-400', 'hover:bg-yellow-500');
+                    claim100.textContent = 'Récupérer !';
+                }
+            }
+            function checkForRewards() {
+                const dhikr = dhikrData[currentDhikr];
+                // Check for daily completion
+                if (counts.today === dhikr.dailyGoal) {
+                    showCelebration(`Tu as terminé ton objectif quotidien pour ${dhikr.translation}!`, dhikr.icon);
+                    addStars(1);
+                }
+            }
+            function claimReward(threshold) {
+                const totalCount = Object.values(counts).reduce((a, b) => a + b, 0) - counts.today;
+                if (totalCount >= threshold && !claimedRewards.includes(threshold)) {
+                    claimedRewards.push(threshold);
+                    localStorage.setItem('claimedRewards', JSON.stringify(claimedRewards));
+                    let starsToAdd = 0;
+                    let message = "";
+                    let icon = "fa-trophy";
+                    switch(threshold) {
+                        case 10:
+                            starsToAdd = 1;
+                            message = "Bravo pour tes 10 dhikrs !";
+                            icon = "fa-star";
+                            break;
+                        case 50:
+                            starsToAdd = 3;
+                            message = "Incroyable ! 50 dhikrs !";
+                            icon = "fa-trophy";
+                            break;
+                        case 100:
+                            starsToAdd = 5;
+                            message = "100 dhikrs ! Tu es un champion !";
+                            icon = "fa-crown";
+                            break;
+                    }
+                    addStars(starsToAdd);
+                    showCelebration(message, icon);
+                    updateRewardButtons();
+                    updateTrophies();
+                }
+            }
+            function addStars(amount) {
+                stars += amount;
+                localStorage.setItem('stars', stars);
+                totalStars.textContent = stars;
+                // Star animation
+                for (let i = 0; i < amount; i++) {
+                    setTimeout(() => {
+                        const starElement = document.createElement('div');
+                        starElement.innerHTML = '<i class="fas fa-star text-yellow-400"></i>';
+                        starElement.className = 'absolute text-2xl animate-ping';
+                        starElement.style.top = `${Math.random() * 100}%`;
+                        starElement.style.left = `${Math.random() * 100}%`;
+                        document.body.appendChild(starElement);
+                        setTimeout(() => {
+                            starElement.remove();
+                        }, 1000);
+                    }, i * 200);
+                }
+            }
+            function showCelebration(message, icon) {
+                modalMessage.textContent = message;
+                modalIcon.className = `fas ${icon} text-6xl text-yellow-400 mb-4 bounce-animation`;
+                celebrationModal.classList.remove('hidden');
+                // Confetti effect
+                for (let i = 0; i < 50; i++) {
+                    setTimeout(() => {
+                        const confetti = document.createElement('div');
+                        confetti.className = 'absolute w-2 h-2 rounded-full fall-animation';
+                        confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                        confetti.style.left = `${Math.random() * 100}%`;
+                        confetti.style.top = `-10px`;
+                        confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
+                        confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
+                        document.getElementById('celebrationModal').appendChild(confetti);
+                        setTimeout(() => {
+                            confetti.remove();
+                        }, 3000);
+                    }, i * 100);
+                }
+            }
+            function updateTrophies() {
+                trophiesContainer.innerHTML = '';
+                if (claimedRewards.includes(10)) {
+                    addTrophy('10 dhikrs', 'fas fa-star', 'bg-yellow-100 text-yellow-600');
+                }
+                if (claimedRewards.includes(50)) {
+                    addTrophy('50 dhikrs', 'fas fa-trophy', 'bg-purple-100 text-purple-600');
+                }
+                if (claimedRewards.includes(100)) {
+                    addTrophy('100 dhikrs', 'fas fa-crown', 'bg-green-100 text-green-600');
+                }
+                // Add special trophies for completing daily goals
+                Object.entries(counts).forEach(([dhikrType, count]) => {
+                    if (dhikrType !== 'today' && count >= dhikrData[dhikrType].dailyGoal) {
+                        addTrophy(`${dhikrData[dhikrType].translation}`, `fas ${dhikrData[dhikrType].icon}`, `bg-${dhikrData[dhikrType].color}-100 text-${dhikrData[dhikrType].color}-600`);
+                    }
+                });
+            }
+            function addTrophy(title, icon, colors) {
+                const trophy = document.createElement('div');
+                trophy.className = 'flex flex-col items-center';
+                trophy.innerHTML = `
+                    <div class="w-12 h-12 rounded-full ${colors.split(' ')[0]} flex items-center justify-center mb-1">
+                        <i class="${icon} ${colors.split(' ')[1]} text-xl"></i>
+                    </div>
+                    <span class="text-xs text-center text-gray-700">${title}</span>
+                `;
+                trophiesContainer.appendChild(trophy);
+            }
+            function updateStatsDisplay() {
+                document.getElementById('subhanallahCount').textContent = counts.subhanallah;
+                document.getElementById('alhamdulillahCount').textContent = counts.alhamdulillah;
+                document.getElementById('allahuakbarCount').textContent = counts.allahuakbar;
+                document.getElementById('astaghfirullahCount').textContent = counts.astaghfirullah;
+                document.getElementById('laillahaillallahCount').textContent = counts.laillahaillallah;
+                document.getElementById('salatCount').textContent = counts.salat;
+                // Update progress bars
+                document.getElementById('subhanallahProgress').style.width = `${Math.min(100, (counts.subhanallah / 100) * 100)}%`;
+                document.getElementById('alhamdulillahProgress').style.width = `${Math.min(100, (counts.alhamdulillah / 100) * 100)}%`;
+                document.getElementById('allahuakbarProgress').style.width = `${Math.min(100, (counts.allahuakbar / 100) * 100)}%`;
+                document.getElementById('astaghfirullahProgress').style.width = `${Math.min(100, (counts.astaghfirullah / 100) * 100)}%`;
+                document.getElementById('laillahaillallahProgress').style.width = `${Math.min(100, (counts.laillahaillallah / 100) * 100)}%`;
+                document.getElementById('salatProgress').style.width = `${Math.min(100, (counts.salat / 100) * 100)}%`;
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Adamchab/dhikr-enfant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>