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); } | |
| } | |
| .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); | |
| } | |
| </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">Compte tes dhikrs 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> | |
| <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">/ 100</span> | |
| </div> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <p class="text-purple-700 mb-2">Dis :</p> | |
| <p class="text-2xl font-arabic text-purple-900 mb-2">سُبْحَانَ اللَّهِ</p> | |
| <p 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>/100 - Continue comme ça !</p> | |
| </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> | |
| </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 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 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 closeModal = document.getElementById('closeModal'); | |
| // State | |
| let count = localStorage.getItem('dhikrCount') ? parseInt(localStorage.getItem('dhikrCount')) : 0; | |
| let todayCount = 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 | |
| updateCounter(); | |
| updateProgressRing(); | |
| 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')); | |
| // Functions | |
| function addDhikr() { | |
| count++; | |
| todayCount++; | |
| localStorage.setItem('dhikrCount', count); | |
| localStorage.setItem('todayCount', todayCount); | |
| updateCounter(); | |
| updateProgressRing(); | |
| updateRewardButtons(); | |
| // Animation | |
| dhikrBtn.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| dhikrBtn.classList.remove('animate-pulse'); | |
| }, 300); | |
| // Check for rewards | |
| checkForRewards(); | |
| } | |
| function updateCounter() { | |
| counter.textContent = count; | |
| dailyCount.textContent = todayCount; | |
| dailyProgress.style.width = `${Math.min(100, (todayCount / 100) * 100)}%`; | |
| } | |
| function updateProgressRing() { | |
| const progressCircle = document.querySelector('.progress-ring__circle'); | |
| const progress = Math.min(100, (todayCount / 100) * 100); | |
| progressCircle.style.setProperty('--progress', progress); | |
| } | |
| function updateRewardButtons() { | |
| if (count >= 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 (count >= 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 (count >= 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() { | |
| // Check for daily completion | |
| if (todayCount === 100) { | |
| showCelebration("Tu as terminé ton objectif quotidien !"); | |
| addStars(1); | |
| } | |
| } | |
| function claimReward(threshold) { | |
| if (count >= threshold && !claimedRewards.includes(threshold)) { | |
| claimedRewards.push(threshold); | |
| localStorage.setItem('claimedRewards', JSON.stringify(claimedRewards)); | |
| let starsToAdd = 0; | |
| let message = ""; | |
| switch(threshold) { | |
| case 10: | |
| starsToAdd = 1; | |
| message = "Bravo pour tes 10 dhikrs !"; | |
| break; | |
| case 50: | |
| starsToAdd = 3; | |
| message = "Incroyable ! 50 dhikrs !"; | |
| break; | |
| case 100: | |
| starsToAdd = 5; | |
| message = "100 dhikrs ! Tu es un champion !"; | |
| break; | |
| } | |
| addStars(starsToAdd); | |
| showCelebration(message); | |
| updateRewardButtons(); | |
| updateTrophies(); | |
| } | |
| } | |
| function addStars(amount) { | |
| stars += amount; | |
| localStorage.setItem('stars', stars); | |
| totalStars.textContent = stars; | |
| // Star animation | |
| 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); | |
| } | |
| function showCelebration(message) { | |
| modalMessage.textContent = message; | |
| celebrationModal.classList.remove('hidden'); | |
| // Confetti effect | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'absolute w-2 h-2 rounded-full'; | |
| confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; | |
| confetti.style.left = `${Math.random() * 100}%`; | |
| confetti.style.top = `${Math.random() * 100}%`; | |
| confetti.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| confetti.style.animation = `fall ${Math.random() * 3 + 2}s linear forwards`; | |
| document.getElementById('celebrationModal').appendChild(confetti); | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 3000); | |
| } | |
| } | |
| 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'); | |
| } | |
| if (todayCount >= 100) { | |
| addTrophy('Objectif quotidien', 'fas fa-check-circle', 'bg-blue-100 text-blue-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); | |
| } | |
| }); | |
| </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-enfants" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |