Spaces:
Running
Running
| <html lang="ar" 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=Tajawal:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| .counter-btn { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .counter-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .counter-display { | |
| transition: all 0.3s ease; | |
| } | |
| .phrase-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .phrase-card.active { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); | |
| border-color: #4f46e5; | |
| } | |
| .counter-animation { | |
| animation: pulse 0.5s ease; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .reset-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .reset-btn:hover { | |
| transform: rotate(360deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center p-4"> | |
| <div class="w-full max-w-md mx-auto"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-indigo-800 mb-2">تسبیح مجازی</h1> | |
| <p class="text-gray-600">احفظ أذكارك بكل سهولة</p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-8"> | |
| <div class="flex justify-between items-center p-4 border-b"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-500">تسبيح اليوم</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-center mb-8"> | |
| <div class="counter-display bg-indigo-50 text-indigo-900 text-5xl font-bold rounded-full w-32 h-32 flex items-center justify-center counter-animation"> | |
| 0 | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3 mb-6"> | |
| <div class="phrase-card border-2 border-gray-200 rounded-xl p-4 text-center cursor-pointer active" data-phrase="سبحان الله"> | |
| <div class="text-2xl font-medium text-gray-800">سبحان الله</div> | |
| <div class="text-sm text-gray-500 mt-1">33x</div> | |
| </div> | |
| <div class="phrase-card border-2 border-gray-200 rounded-xl p-4 text-center cursor-pointer" data-phrase="الحمدالله"> | |
| <div class="text-2xl font-medium text-gray-800">الحمدالله</div> | |
| <div class="text-sm text-gray-500 mt-1">33x</div> | |
| </div> | |
| <div class="phrase-card border-2 border-gray-200 rounded-xl p-4 text-center cursor-pointer" data-phrase="الله اکبر"> | |
| <div class="text-2xl font-medium text-gray-800">الله اکبر</div> | |
| <div class="text-sm text-gray-500 mt-1">34x</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="reset-btn bg-gray-100 text-gray-700 p-3 rounded-full"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| <button class="counter-btn bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-full text-lg"> | |
| اضغط للعد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center text-sm text-gray-500 mt-4"> | |
| <p>اضغط على الزر لزيادة العداد أو اختر ذكراً مختلفاً</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const counterDisplay = document.querySelector('.counter-display'); | |
| const counterBtn = document.querySelector('.counter-btn'); | |
| const resetBtn = document.querySelector('.reset-btn'); | |
| const phraseCards = document.querySelectorAll('.phrase-card'); | |
| let count = 0; | |
| let currentPhrase = 'سبحان الله'; | |
| let maxCount = 33; | |
| // Update active phrase card | |
| function updateActiveCard() { | |
| phraseCards.forEach(card => { | |
| card.classList.remove('active'); | |
| if (card.dataset.phrase === currentPhrase) { | |
| card.classList.add('active'); | |
| } | |
| }); | |
| // Set max count based on phrase | |
| maxCount = currentPhrase === 'الله اکبر' ? 34 : 33; | |
| } | |
| // Handle phrase selection | |
| phraseCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| currentPhrase = this.dataset.phrase; | |
| updateActiveCard(); | |
| // Reset count when changing phrase | |
| count = 0; | |
| counterDisplay.textContent = count; | |
| counterDisplay.classList.add('counter-animation'); | |
| setTimeout(() => { | |
| counterDisplay.classList.remove('counter-animation'); | |
| }, 500); | |
| }); | |
| }); | |
| // Handle counter button click | |
| counterBtn.addEventListener('click', function() { | |
| if (count < maxCount) { | |
| count++; | |
| counterDisplay.textContent = count; | |
| counterDisplay.classList.add('counter-animation'); | |
| setTimeout(() => { | |
| counterDisplay.classList.remove('counter-animation'); | |
| }, 500); | |
| // If reached max count, automatically move to next phrase | |
| if (count === maxCount) { | |
| setTimeout(() => { | |
| if (currentPhrase === 'سبحان الله') { | |
| currentPhrase = 'الحمدالله'; | |
| } else if (currentPhrase === 'الحمدالله') { | |
| currentPhrase = 'الله اکبر'; | |
| } else { | |
| currentPhrase = 'سبحان الله'; | |
| } | |
| count = 0; | |
| counterDisplay.textContent = count; | |
| updateActiveCard(); | |
| }, 300); | |
| } | |
| } | |
| }); | |
| // Handle reset button click | |
| resetBtn.addEventListener('click', function() { | |
| count = 0; | |
| counterDisplay.textContent = count; | |
| counterDisplay.classList.add('counter-animation'); | |
| setTimeout(() => { | |
| counterDisplay.classList.remove('counter-animation'); | |
| }, 500); | |
| }); | |
| // Initialize | |
| updateActiveCard(); | |
| }); | |
| </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/tasbih" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |