Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>صلوات شمار - شمارنده صلوات</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Noto Naskh Arabic', serif; | |
| background-color: #f5f5f5; | |
| transition: background-color 0.5s; | |
| } | |
| .counter-container { | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.3s; | |
| } | |
| .counter-container:hover { | |
| transform: translateY(-5px); | |
| } | |
| .btn { | |
| transition: all 0.3s; | |
| } | |
| .btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .btn:active { | |
| transform: scale(0.95); | |
| } | |
| .pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f0f; | |
| opacity: 0; | |
| } | |
| .theme-btn { | |
| transition: all 0.3s; | |
| } | |
| .theme-btn:hover { | |
| transform: rotate(15deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="fixed top-4 left-4 flex space-x-2 space-x-reverse"> | |
| <button id="theme-blue" class="theme-btn w-8 h-8 rounded-full bg-blue-500"></button> | |
| <button id="theme-green" class="theme-btn w-8 h-8 rounded-full bg-green-500"></button> | |
| <button id="theme-purple" class="theme-btn w-8 h-8 rounded-full bg-purple-500"></button> | |
| <button id="theme-red" class="theme-btn w-8 h-8 rounded-full bg-red-500"></button> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">صلوات شمار</h1> | |
| <p class="text-lg text-gray-600">با هر صلوات، بهشت به استقبال شما می‌آید</p> | |
| </div> | |
| <div class="counter-container bg-white rounded-2xl p-8 w-full max-w-md relative overflow-hidden"> | |
| <div id="confetti-container" class="absolute inset-0 pointer-events-none"></div> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="text-right"> | |
| <p class="text-gray-500">تعداد صلوات امروز</p> | |
| <p id="daily-counter" class="text-2xl font-bold">0</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-gray-500">کل صلوات</p> | |
| <p id="total-counter" class="text-2xl font-bold">0</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mb-8"> | |
| <div class="relative"> | |
| <div id="counter" class="text-7xl font-bold text-center mb-4 transition-all duration-300">0</div> | |
| <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-70"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center space-x-4 space-x-reverse"> | |
| <button id="reset-btn" class="btn px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"> | |
| <i class="fas fa-redo ml-2"></i> بازنشانی | |
| </button> | |
| <button id="count-btn" class="btn px-8 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 pulse"> | |
| <i class="fas fa-praying-hands ml-2"></i> صلوات | |
| </button> | |
| <button id="auto-btn" class="btn px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600"> | |
| <i class="fas fa-play ml-2"></i> خودکار | |
| </button> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">هدف امروز</span> | |
| <span id="goal-progress" class="text-sm font-medium">0/100</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="goal-bar" class="bg-blue-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-white rounded-xl p-6 w-full max-w-md"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800">فضیلت صلوات</h2> | |
| <div class="text-gray-700 leading-relaxed text-justify"> | |
| <p class="mb-3">پیامبر اکرم (ص) فرمودند: هر کس بر من صلوات بفرستد، خداوند به تعداد آن صلوات، ده برابر به او پاداش می‌دهد.</p> | |
| <p class="mb-3">امام صادق (ع) فرمودند: صلوات بر محمد و آل محمد گناهان را مانند برگ درختان در فصل خزان می‌ریزد.</p> | |
| <p>امام رضا (ع) فرمودند: هر که می‌خواهد از پل صراط همچون برق جهنده عبور کند، بر محمد و آل محمد بسیار صلوات بفرستد.</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| <p>امروز: <span id="today-date" class="font-medium"></span></p> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const counterEl = document.getElementById('counter'); | |
| const totalCounterEl = document.getElementById('total-counter'); | |
| const dailyCounterEl = document.getElementById('daily-counter'); | |
| const countBtn = document.getElementById('count-btn'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| const autoBtn = document.getElementById('auto-btn'); | |
| const goalBar = document.getElementById('goal-bar'); | |
| const goalProgress = document.getElementById('goal-progress'); | |
| const todayDateEl = document.getElementById('today-date'); | |
| const confettiContainer = document.getElementById('confetti-container'); | |
| const themeButtons = document.querySelectorAll('.theme-btn'); | |
| // Variables | |
| let count = 0; | |
| let totalCount = localStorage.getItem('totalSalawat') ? parseInt(localStorage.getItem('totalSalawat')) : 0; | |
| let dailyCount = localStorage.getItem('dailySalawat') ? parseInt(localStorage.getItem('dailySalawat')) : 0; | |
| let lastDate = localStorage.getItem('lastDate') || ''; | |
| const today = new Date().toLocaleDateString('fa-IR'); | |
| const dailyGoal = 100; | |
| let autoInterval = null; | |
| let currentTheme = 'blue'; | |
| // Initialize | |
| updateCounters(); | |
| updateDate(); | |
| checkDate(); | |
| updateGoalProgress(); | |
| // Event Listeners | |
| countBtn.addEventListener('click', incrementCount); | |
| resetBtn.addEventListener('click', resetCount); | |
| autoBtn.addEventListener('click', toggleAutoCount); | |
| // Theme buttons | |
| themeButtons.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| currentTheme = this.id.replace('theme-', ''); | |
| applyTheme(currentTheme); | |
| }); | |
| }); | |
| // Functions | |
| function incrementCount() { | |
| count++; | |
| dailyCount++; | |
| totalCount++; | |
| updateCounters(); | |
| saveToLocalStorage(); | |
| updateGoalProgress(); | |
| // Animation | |
| counterEl.classList.add('scale-110'); | |
| setTimeout(() => { | |
| counterEl.classList.remove('scale-110'); | |
| }, 200); | |
| // Confetti for every 10 counts | |
| if (count % 10 === 0) { | |
| createConfetti(); | |
| } | |
| // Special effect for 100 counts | |
| if (count % 100 === 0) { | |
| celebrate(); | |
| } | |
| } | |
| function updateCounters() { | |
| counterEl.textContent = count; | |
| totalCounterEl.textContent = totalCount.toLocaleString('fa-IR'); | |
| dailyCounterEl.textContent = dailyCount.toLocaleString('fa-IR'); | |
| } | |
| function resetCount() { | |
| count = 0; | |
| updateCounters(); | |
| } | |
| function toggleAutoCount() { | |
| if (autoInterval) { | |
| clearInterval(autoInterval); | |
| autoInterval = null; | |
| autoBtn.innerHTML = '<i class="fas fa-play ml-2"></i> خودکار'; | |
| autoBtn.classList.remove('bg-red-500', 'hover:bg-red-600'); | |
| autoBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| } else { | |
| autoInterval = setInterval(incrementCount, 1000); | |
| autoBtn.innerHTML = '<i class="fas fa-stop ml-2"></i> توقف'; | |
| autoBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); | |
| autoBtn.classList.add('bg-red-500', 'hover:bg-red-600'); | |
| } | |
| } | |
| function saveToLocalStorage() { | |
| localStorage.setItem('totalSalawat', totalCount); | |
| localStorage.setItem('dailySalawat', dailyCount); | |
| localStorage.setItem('lastDate', today); | |
| } | |
| function checkDate() { | |
| if (lastDate !== today) { | |
| // New day, reset daily count but keep total | |
| dailyCount = 0; | |
| count = 0; | |
| updateCounters(); | |
| } | |
| } | |
| function updateDate() { | |
| todayDateEl.textContent = today; | |
| } | |
| function updateGoalProgress() { | |
| const progress = Math.min((dailyCount / dailyGoal) * 100, 100); | |
| goalBar.style.width = `${progress}%`; | |
| goalProgress.textContent = `${dailyCount}/${dailyGoal}`; | |
| // Change color based on progress | |
| if (progress >= 100) { | |
| goalBar.classList.remove('bg-blue-500', 'bg-green-500', 'bg-yellow-500'); | |
| goalBar.classList.add('bg-purple-500'); | |
| } else if (progress >= 70) { | |
| goalBar.classList.remove('bg-blue-500', 'bg-yellow-500', 'bg-purple-500'); | |
| goalBar.classList.add('bg-green-500'); | |
| } else if (progress >= 30) { | |
| goalBar.classList.remove('bg-blue-500', 'bg-green-500', 'bg-purple-500'); | |
| goalBar.classList.add('bg-yellow-500'); | |
| } else { | |
| goalBar.classList.remove('bg-green-500', 'bg-yellow-500', 'bg-purple-500'); | |
| goalBar.classList.add('bg-blue-500'); | |
| } | |
| } | |
| function createConfetti() { | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.classList.add('confetti'); | |
| // Random position | |
| const xPos = Math.random() * 100; | |
| const yPos = Math.random() * 100; | |
| // Random color | |
| const colors = ['#f0f', '#0ff', '#ff0', '#f00', '#0f0', '#00f']; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.left = `${xPos}%`; | |
| confetti.style.top = `${yPos}%`; | |
| confetti.style.backgroundColor = color; | |
| confetti.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| confettiContainer.appendChild(confetti); | |
| // Animate | |
| setTimeout(() => { | |
| confetti.style.opacity = '1'; | |
| confetti.style.transform = `translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 + 100}px) rotate(${Math.random() * 360}deg)`; | |
| confetti.style.transition = `all ${Math.random() * 2 + 1}s ease-out`; | |
| // Remove after animation | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 2000); | |
| }, 10); | |
| } | |
| } | |
| function celebrate() { | |
| // Flash animation | |
| document.body.classList.add('bg-blue-100'); | |
| setTimeout(() => { | |
| document.body.classList.remove('bg-blue-100'); | |
| }, 300); | |
| // Big confetti | |
| createConfetti(); | |
| setTimeout(createConfetti, 300); | |
| setTimeout(createConfetti, 600); | |
| // Play sound if possible | |
| if (typeof Audio !== 'undefined') { | |
| const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3'); | |
| audio.play().catch(e => console.log('Audio play failed:', e)); | |
| } | |
| } | |
| function applyTheme(theme) { | |
| // Remove all theme classes first | |
| document.querySelectorAll('.bg-blue-500, .bg-green-500, .bg-purple-500, .bg-red-500').forEach(el => { | |
| el.classList.remove('bg-blue-500', 'hover:bg-blue-600', | |
| 'bg-green-500', 'hover:bg-green-600', | |
| 'bg-purple-500', 'hover:bg-purple-600', | |
| 'bg-red-500', 'hover:bg-red-600'); | |
| }); | |
| // Apply new theme | |
| switch(theme) { | |
| case 'blue': | |
| countBtn.classList.add('bg-blue-500', 'hover:bg-blue-600'); | |
| autoBtn.classList.add('bg-blue-500', 'hover:bg-blue-600'); | |
| goalBar.classList.add('bg-blue-500'); | |
| break; | |
| case 'green': | |
| countBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| autoBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| goalBar.classList.add('bg-green-500'); | |
| break; | |
| case 'purple': | |
| countBtn.classList.add('bg-purple-500', 'hover:bg-purple-600'); | |
| autoBtn.classList.add('bg-purple-500', 'hover:bg-purple-600'); | |
| goalBar.classList.add('bg-purple-500'); | |
| break; | |
| case 'red': | |
| countBtn.classList.add('bg-red-500', 'hover:bg-red-600'); | |
| autoBtn.classList.add('bg-red-500', 'hover:bg-red-600'); | |
| goalBar.classList.add('bg-red-500'); | |
| break; | |
| } | |
| // Save theme preference | |
| localStorage.setItem('salawatTheme', theme); | |
| } | |
| // Load saved theme | |
| const savedTheme = localStorage.getItem('salawatTheme'); | |
| if (savedTheme) { | |
| applyTheme(savedTheme); | |
| currentTheme = savedTheme; | |
| } | |
| // Keyboard support | |
| document.addEventListener('keydown', function(e) { | |
| if (e.code === 'Space' || e.key === ' ') { | |
| e.preventDefault(); | |
| incrementCount(); | |
| } | |
| }); | |
| }); | |
| </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=amirpoorazima/salavat-shomar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |