Spaces:
Running
Running
| <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> |