| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Muslim Supplications - Hisn Al-Muslim</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=Amiri:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Amiri', serif; |
| direction: rtl; |
| background-color: #f5f5f5; |
| } |
| |
| .arabic-text { |
| font-size: 1.5rem; |
| line-height: 2.5rem; |
| } |
| |
| .prayer-time.active { |
| background-color: #2F855A; |
| color: white; |
| } |
| |
| .tab-active { |
| border-bottom: 3px solid #2F855A; |
| color: #2F855A; |
| font-weight: bold; |
| } |
| |
| .remembrance-card { |
| transition: all 0.3s ease; |
| } |
| |
| .remembrance-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| |
| .audio-controls { |
| background-color: rgba(255,255,255,0.9); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| |
| <header class="bg-green-800 text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i class="fas fa-mosque text-3xl mr-3"></i> |
| <div> |
| <h1 class="text-2xl font-bold hovered-element">معتز</h1> |
| <p class="text-green-200">أذكار الصباح والمساء والأدعية اليومية</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <button class="bg-green-700 hover:bg-green-600 px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-share-alt mr-2"></i> |
| مشاركة |
| </button> |
| <button class="bg-green-600 hover:bg-green-500 px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-download mr-2"></i> |
| حفظ |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="py-6 bg-white shadow-md"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold text-center mb-6 text-gray-800">أوقات الصلاة</h2> |
| <div class="flex justify-center mb-4"> |
| <select id="city-select" class="px-4 py-2 border border-gray-300 rounded-lg"> |
| <option value="riyadh">الرياض</option> |
| <option value="makkah">مكة المكرمة</option> |
| <option value="madina">المدينة المنورة</option> |
| <option value="jeddah">جدة</option> |
| <option value="algiers">الجزائر</option> |
| </select> |
| </div> |
| <div class="grid grid-cols-5 gap-2 text-center" id="prayer-times-container"> |
| <div class="prayer-time p-3 rounded-lg border border-gray-200"> |
| <div class="font-bold">الفجر</div> |
| <div class="text-gray-600" id="fajr-time">--:--</div> |
| </div> |
| <div class="prayer-time p-3 rounded-lg border border-gray-200"> |
| <div class="font-bold">الظهر</div> |
| <div class="text-gray-600" id="dhuhr-time">--:--</div> |
| </div> |
| <div class="prayer-time p-3 rounded-lg border border-gray-200"> |
| <div class="font-bold">العصر</div> |
| <div class="text-gray-600" id="asr-time">--:--</div> |
| </div> |
| <div class="prayer-time p-3 rounded-lg border border-gray-200"> |
| <div class="font-bold">المغرب</div> |
| <div class="text-gray-600" id="maghrib-time">--:--</div> |
| </div> |
| <div class="prayer-time p-3 rounded-lg border border-gray-200"> |
| <div class="font-bold">العشاء</div> |
| <div class="text-gray-600" id="isha-time">--:--</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <div class="flex border-b border-gray-200 mb-8 overflow-x-auto"> |
| <button class="tab-active px-6 py-3 text-lg whitespace-nowrap">أذكار الصباح</button> |
| <button class="px-6 py-3 text-lg text-gray-600 whitespace-nowrap">أذكار المساء</button> |
| <button class="px-6 py-3 text-lg text-gray-600 whitespace-nowrap">أذكار بعد الصلاة</button> |
| <button class="px-6 py-3 text-lg text-gray-600 whitespace-nowrap">أذكار النوم</button> |
| <button class="px-6 py-3 text-lg text-gray-600 whitespace-nowrap">أدعية متنوعة</button> |
| <button class="px-6 py-3 text-lg text-gray-600 whitespace-nowrap">الرقية الشرعية</button> |
| <button class="px-6 py-3 text-lg text-gray-600 whitespace-nowrap">القرآن الكريم</button> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-xl font-bold text-gray-800">أعوذ بالله من الشيطان الرجيم</h3> |
| <div class="flex space-x-2 space-x-reverse"> |
| <button class="bg-green-100 hover:bg-green-200 text-green-800 p-2 rounded-full transition-colors"> |
| <i class="fas fa-bookmark hover:text-yellow-500"></i> |
| </button> |
| <button class="bg-green-100 hover:bg-green-200 text-green-800 p-2 rounded-full transition-colors"> |
| <i class="fas fa-share hover:text-blue-500"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="arabic-text mb-6 text-right leading-loose"> |
| بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ |
| <br> |
| قُلْ هُوَ اللَّهُ أَحَدٌ (1) اللَّهُ الصَّمَدُ (2) لَمْ يَلِدْ وَلَمْ يُولَدْ (3) وَلَمْ يَكُنْ لَهُ كُفُوًا أَحَدٌ (4) |
| </div> |
| |
| <div class="bg-gray-100 p-4 rounded-lg mb-6"> |
| <p class="text-gray-700">"قل هو الله أحد" تعدل ثلث القرآن (رواه البخاري)</p> |
| </div> |
| |
| <div class="audio-controls flex items-center justify-between p-3 rounded-lg border border-gray-200"> |
| <audio id="audio-player" src="https://server.mp3quran.net/mish_rms/001.mp3"></audio> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <button id="play-button" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center"> |
| <i class="fas fa-play"></i> |
| </button> |
| <div> |
| <div class="text-sm text-gray-500">تلاوة الشيخ مشاري راشد</div> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <button id="rewind-button" class="text-gray-500"> |
| <i class="fas fa-backward"></i> |
| </button> |
| <span id="time-display" class="text-sm">0:00 / 0:00</span> |
| <button id="forward-button" class="text-gray-500"> |
| <i class="fas fa-forward"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-center mb-4 md:mb-0"> |
| <div class="text-4xl font-bold text-green-600">3</div> |
| <div class="text-gray-600">عدد المرات</div> |
| </div> |
| <div class="flex space-x-4 space-x-reverse"> |
| <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg text-lg"> |
| <i class="fas fa-check mr-2"></i> |
| تمت القراءة |
| </button> |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg text-lg"> |
| <i class="fas fa-redo mr-2"></i> |
| إعادة |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <h3 class="text-xl font-bold mb-4 text-gray-800">أذكار أخرى</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="remembrance-card bg-white rounded-lg shadow-md p-6"> |
| <h4 class="font-bold text-lg mb-3">أذكار الاستيقاظ</h4> |
| <p class="text-gray-600 mb-4">الحمد لله الذي أحيانا بعد ما أماتنا وإليه النشور</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-green-600">10 مرات</span> |
| <button class="text-green-600"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="remembrance-card bg-white rounded-lg shadow-md p-6"> |
| <h4 class="font-bold text-lg mb-3">دعاء الخروج من المنزل</h4> |
| <p class="text-gray-600 mb-4">بسم الله توكلت على الله ولا حول ولا قوة إلا بالله</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-green-600">مرة واحدة</span> |
| <button class="text-green-600"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="remembrance-card bg-white rounded-lg shadow-md p-6"> |
| <h4 class="font-bold text-lg mb-3">أذكار الطعام</h4> |
| <p class="text-gray-600 mb-4">بسم الله، اللهم بارك لنا فيه وأطعمنا خيرًا منه</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-green-600">3 مرات</span> |
| <button class="text-green-600"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="quran-section" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-xl font-bold text-gray-800">القرآن الكريم</h3> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="p-4 border border-green-200 rounded-lg"> |
| <h4 class="font-bold mb-3 text-green-700">قراءة القرآن</h4> |
| <select class="w-full p-2 border border-gray-300 rounded mb-3" id="surah-select"> |
| <option value="">اختر سورة</option> |
| |
| </select> |
| <div id="quran-text" class="arabic-text text-right leading-loose min-h-[300px] border p-4 rounded bg-gray-50"></div> |
| </div> |
| |
| <div class="p-4 border border-green-200 rounded-lg"> |
| <h4 class="font-bold mb-3 text-green-700">استماع للقرآن</h4> |
| <select class="w-full p-2 border border-gray-300 rounded mb-3" id="reciter-select"> |
| <option value="">اختر قارئ</option> |
| <option value="mishary">مشاري راشد</option> |
| <option value="hudhaify">علي الحذيفي</option> |
| <option value="shatri">سعد الغامدي</option> |
| </select> |
| <audio id="quran-audio" controls class="w-full mb-3"></audio> |
| <div class="flex justify-between"> |
| <button id="prev-ayah" class="bg-green-100 px-4 py-2 rounded">السابقة</button> |
| <button id="next-ayah" class="bg-green-100 px-4 py-2 rounded">التالية</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <section class="bg-green-50 py-12"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold text-center mb-8 text-gray-800">مميزات التطبيق</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="text-green-600 text-4xl mb-4"> |
| <i class="fas fa-bell"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">تنبيهات يومية</h3> |
| <p class="text-gray-600">تذكير بأذكار الصباح والمساء والنوم تلقائيًا</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="text-green-600 text-4xl mb-4"> |
| <i class="fas fa-volume-up"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">تلاوة صوتية</h3> |
| <p class="text-gray-600">استماع للأذكار بصوت أشهر القراء</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="text-green-600 text-4xl mb-4"> |
| <i class="fas fa-moon"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">وضع الليل</h3> |
| <p class="text-gray-600">وضع مظلم لقراءة الأذكار ليلاً بسهولة</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold text-center mb-8 text-gray-800">تواصل معنا</h2> |
| <div class="max-w-md mx-auto bg-gray-50 p-6 rounded-lg shadow-md"> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">اسمك</label> |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">البريد الإلكتروني</label> |
| <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">رسالتك</label> |
| <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg"> |
| إرسال الرسالة |
| </button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-green-900 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold mb-2">حصن المسلم</h3> |
| <p class="text-green-200">أذكار وأدعية المسلم اليومية</p> |
| </div> |
| <div class="flex space-x-6 space-x-reverse"> |
| <a href="#" class="text-green-200 hover:text-white"> |
| <i class="fab fa-facebook-f text-xl"></i> |
| </a> |
| <a href="#" class="text-green-200 hover:text-white"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-green-200 hover:text-white"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="border-t border-green-800 mt-6 pt-6 text-center text-green-300"> |
| <p>© 2023 حصن المسلم. جميع الحقوق محفوظة.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg md:hidden"> |
| <div class="flex justify-around"> |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-green-600"> |
| <i class="fas fa-home text-xl"></i> |
| <span class="text-xs mt-1">الرئيسية</span> |
| </a> |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
| <i class="fas fa-book text-xl"></i> |
| <span class="text-xs mt-1">الأذكار</span> |
| </a> |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
| <i class="fas fa-pray text-xl"></i> |
| <span class="text-xs mt-1">الأدعية</span> |
| </a> |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> |
| <i class="fas fa-cog text-xl"></i> |
| <span class="text-xs mt-1">الإعدادات</span> |
| </a> |
| </div> |
| </nav> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const tabs = document.querySelectorAll('.flex.border-b button'); |
| const morningRemembrances = [ |
| { id: 1, text: "أعوذ بالله من الشيطان الرجيم", count: 3 }, |
| { id: 2, text: "سبحان الله وبحمده", count: 100 } |
| ]; |
| |
| const eveningRemembrances = [ |
| { id: 1, text: "أعوذ بالله من الشيطان الرجيم", count: 3 }, |
| { id: 2, text: "لا إله إلا الله وحده لا شريك له", count: 100 } |
| ]; |
| |
| tabs.forEach((tab, index) => { |
| tab.addEventListener('click', () => { |
| tabs.forEach(t => t.classList.remove('tab-active')); |
| tab.classList.add('tab-active'); |
| |
| |
| if (index === 0) { |
| remembrances = [...morningRemembrances]; |
| } else if (index === 1) { |
| remembrances = [...eveningRemembrances]; |
| } |
| |
| |
| loadRemembrance(0); |
| }); |
| }); |
| |
| |
| const bookmarkButtons = document.querySelectorAll('.fa-bookmark, .fa-share'); |
| bookmarkButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| if (this.classList.contains('fa-bookmark')) { |
| this.classList.toggle('text-yellow-500'); |
| } |
| |
| }); |
| }); |
| |
| |
| const audioPlayer = document.getElementById('audio-player'); |
| const playButton = document.getElementById('play-button'); |
| const rewindButton = document.getElementById('rewind-button'); |
| const forwardButton = document.getElementById('forward-button'); |
| const timeDisplay = document.getElementById('time-display'); |
| |
| |
| audioPlayer.addEventListener('timeupdate', function() { |
| const currentTime = formatTimeDisplay(audioPlayer.currentTime); |
| const duration = formatTimeDisplay(audioPlayer.duration); |
| timeDisplay.textContent = `${currentTime} / ${duration}`; |
| }); |
| |
| audioPlayer.addEventListener('loadedmetadata', function() { |
| timeDisplay.textContent = `0:00 / ${formatTimeDisplay(audioPlayer.duration)}`; |
| }); |
| |
| playButton.addEventListener('click', function() { |
| const icon = this.querySelector('i'); |
| if (audioPlayer.paused) { |
| audioPlayer.play() |
| .then(() => { |
| icon.classList.replace('fa-play', 'fa-pause'); |
| }) |
| .catch(error => { |
| console.error('Audio playback failed:', error); |
| alert('حدث خطأ في تشغيل الصوت. يرجى المحاولة مرة أخرى.'); |
| }); |
| } else { |
| audioPlayer.pause(); |
| icon.classList.replace('fa-pause', 'fa-play'); |
| } |
| }); |
| |
| rewindButton.addEventListener('click', function() { |
| audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10); |
| }); |
| |
| forwardButton.addEventListener('click', function() { |
| audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10); |
| }); |
| |
| function formatTimeDisplay(seconds) { |
| const mins = Math.floor(seconds / 60); |
| const secs = Math.floor(seconds % 60); |
| return `${mins}:${secs < 10 ? '0' : ''}${secs}`; |
| } |
| |
| |
| const counterElement = document.querySelector('.text-4xl.font-bold.text-green-600'); |
| const doneButton = document.querySelector('.bg-green-600'); |
| const resetButton = document.querySelector('.bg-gray-200'); |
| |
| |
| const remembrances = [ |
| { id: 1, text: "أعوذ بالله من الشيطان الرجيم", count: 3 }, |
| { id: 2, text: "سبحان الله وبحمده", count: 100 }, |
| { id: 3, text: "لا إله إلا الله وحده لا شريك له", count: 1 } |
| ]; |
| |
| let currentRemembrance = 0; |
| let count = 1; |
| |
| function loadRemembrance(index) { |
| currentRemembrance = index; |
| count = 1; |
| const rem = remembrances[index]; |
| |
| |
| document.querySelector('.arabic-text').innerHTML = rem.text; |
| counterElement.textContent = count; |
| document.querySelector('.text-xl.font-bold').textContent = `ذكر ${index + 1}/${remembrances.length}`; |
| |
| |
| doneButton.classList.replace('bg-gray-400', 'bg-green-600'); |
| doneButton.classList.replace('hover:bg-gray-500', 'hover:bg-green-700'); |
| doneButton.disabled = false; |
| } |
| |
| doneButton.addEventListener('click', function() { |
| counterElement.textContent = count; |
| |
| if (count >= remembrances[currentRemembrance].count) { |
| count = 1; |
| this.classList.replace('bg-green-600', 'bg-gray-400'); |
| this.classList.replace('hover:bg-green-700', 'hover:bg-gray-500'); |
| this.disabled = true; |
| |
| |
| setTimeout(() => { |
| const nextIndex = (currentRemembrance + 1) % remembrances.length; |
| loadRemembrance(nextIndex); |
| }, 1000); |
| } |
| }); |
| |
| resetButton.addEventListener('click', function() { |
| count = 1; |
| counterElement.textContent = count; |
| doneButton.classList.replace('bg-gray-400', 'bg-green-600'); |
| doneButton.classList.replace('hover:bg-gray-500', 'hover:bg-green-700'); |
| doneButton.disabled = false; |
| }); |
| |
| |
| loadRemembrance(0); |
| |
| |
| if ('Notification' in window) { |
| Notification.requestPermission().then(permission => { |
| if (permission === 'granted') { |
| console.log('Notification permission granted'); |
| } |
| }); |
| } |
| |
| |
| function getLocation() { |
| if (navigator.geolocation) { |
| navigator.geolocation.getCurrentPosition( |
| position => { |
| const {latitude, longitude} = position.coords; |
| fetchPrayerTimesByCoords(latitude, longitude); |
| }, |
| error => { |
| console.error('Geolocation error:', error); |
| fetchPrayerTimes('riyadh'); |
| } |
| ); |
| } else { |
| fetchPrayerTimes('riyadh'); |
| } |
| } |
| |
| async function fetchPrayerTimesByCoords(lat, lng) { |
| try { |
| const response = await fetch(`https://api.aladhan.com/v1/timings?latitude=${lat}&longitude=${lng}&method=4`); |
| const data = await response.json(); |
| updatePrayerTimesUI(data.data.timings); |
| } catch (error) { |
| console.error('Error fetching prayer times by coordinates:', error); |
| fetchPrayerTimes('riyadh'); |
| } |
| } |
| |
| |
| async function fetchPrayerTimes(city) { |
| try { |
| const country = city === 'algiers' ? 'Algeria' : 'SaudiArabia'; |
| const response = await fetch(`https://api.aladhan.com/v1/timingsByCity?city=${city}&country=${country}&method=4`); |
| const data = await response.json(); |
| |
| if (data.code === 200) { |
| const timings = data.data.timings; |
| document.getElementById('fajr-time').textContent = formatTime(timings.Fajr); |
| document.getElementById('dhuhr-time').textContent = formatTime(timings.Dhuhr); |
| document.getElementById('asr-time').textContent = formatTime(timings.Asr); |
| document.getElementById('maghrib-time').textContent = formatTime(timings.Maghrib); |
| document.getElementById('isha-time').textContent = formatTime(timings.Isha); |
| |
| |
| highlightCurrentPrayer(timings); |
| setupPrayerNotifications(timings); |
| } |
| } catch (error) { |
| console.error('Error fetching prayer times:', error); |
| } |
| } |
| |
| function formatTime(timeString) { |
| const [hours, minutes] = timeString.split(':'); |
| const hour = parseInt(hours); |
| const ampm = hour >= 12 ? 'م' : 'ص'; |
| const hour12 = hour % 12 || 12; |
| return `${hour12}:${minutes} ${ampm}`; |
| } |
| |
| function highlightCurrentPrayer(timings) { |
| const now = new Date(); |
| const currentHour = now.getHours(); |
| const currentMinute = now.getMinutes(); |
| |
| const prayerTimes = [ |
| { name: 'fajr', time: timings.Fajr.split(':') }, |
| { name: 'dhuhr', time: timings.Dhuhr.split(':') }, |
| { name: 'asr', time: timings.Asr.split(':') }, |
| { name: 'maghrib', time: timings.Maghrib.split(':') }, |
| { name: 'isha', time: timings.Isha.split(':') } |
| ]; |
| |
| let currentPrayer = null; |
| |
| for (let i = 0; i < prayerTimes.length; i++) { |
| const prayerHour = parseInt(prayerTimes[i].time[0]); |
| const prayerMinute = parseInt(prayerTimes[i].time[1]); |
| |
| if ((currentHour < prayerHour) || |
| (currentHour === prayerHour && currentMinute < prayerMinute)) { |
| currentPrayer = prayerTimes[i].name; |
| break; |
| } |
| } |
| |
| |
| document.querySelectorAll('.prayer-time').forEach(el => { |
| el.classList.remove('active'); |
| }); |
| |
| |
| if (currentPrayer) { |
| document.querySelector(`#${currentPrayer}-time`).parentElement.classList.add('active'); |
| } |
| } |
| |
| |
| document.getElementById('city-select').addEventListener('change', function() { |
| fetchPrayerTimes(this.value); |
| }); |
| |
| function setupPrayerNotifications(timings) { |
| if (!('Notification' in window)) return; |
| |
| const now = new Date(); |
| const currentTime = now.getHours() * 60 + now.getMinutes(); |
| |
| const prayerNames = { |
| Fajr: 'الفجر', |
| Dhuhr: 'الظهر', |
| Asr: 'العصر', |
| Maghrib: 'المغرب', |
| Isha: 'العشاء' |
| }; |
| |
| Object.entries(timings).forEach(([prayer, time]) => { |
| if (prayerNames[prayer]) { |
| const [hours, minutes] = time.split(':'); |
| const prayerTime = parseInt(hours) * 60 + parseInt(minutes); |
| |
| |
| if (prayerTime > currentTime && prayerTime - currentTime <= 5) { |
| const notification = new Notification(`حان وقت صلاة ${prayerNames[prayer]} قريبًا`, { |
| body: `سيحين وقت الصلاة خلال 5 دقائق`, |
| icon: 'https://i.imgur.com/7kQEsHU.png' |
| }); |
| } |
| } |
| }); |
| } |
| |
| |
| const quranSection = document.getElementById('quran-section'); |
| const surahSelect = document.getElementById('surah-select'); |
| const quranText = document.getElementById('quran-text'); |
| const quranAudio = document.getElementById('quran-audio'); |
| const reciterSelect = document.getElementById('reciter-select'); |
| |
| |
| async function loadSurahs() { |
| try { |
| const response = await fetch('https://api.alquran.cloud/v1/surah'); |
| const data = await response.json(); |
| |
| data.data.forEach(surah => { |
| const option = document.createElement('option'); |
| option.value = surah.number; |
| option.textContent = `${surah.number}. ${surah.englishName} (${surah.name})`; |
| surahSelect.appendChild(option); |
| }); |
| } catch (error) { |
| console.error('Error loading surahs:', error); |
| } |
| } |
| |
| surahSelect.addEventListener('change', async function() { |
| if (!this.value) return; |
| |
| try { |
| const response = await fetch(`https://api.alquran.cloud/v1/surah/${this.value}/ar.alafasy`); |
| const data = await response.json(); |
| |
| let text = ''; |
| data.data.ayahs.forEach(ayah => { |
| text += `${ayah.text} (${ayah.numberInSurah}) `; |
| }); |
| |
| quranText.innerHTML = text; |
| } catch (error) { |
| console.error('Error loading surah text:', error); |
| } |
| }); |
| |
| reciterSelect.addEventListener('change', function() { |
| if (!this.value || !surahSelect.value) return; |
| |
| const reciters = { |
| mishary: 'https://server.mp3quran.net/mish_rms', |
| hudhaify: 'https://server.mp3quran.net/hud', |
| shatri: 'https://server.mp3quran.net/s_gmd' |
| }; |
| |
| quranAudio.src = `${reciters[this.value]}/${surahSelect.value.padStart(3, '0')}.mp3`; |
| }); |
| |
| |
| tabs.forEach((tab, index) => { |
| tab.addEventListener('click', () => { |
| |
| |
| if (tab.textContent.includes('القرآن')) { |
| quranSection.classList.remove('hidden'); |
| loadSurahs(); |
| } else { |
| quranSection.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| getLocation(); |
| |
| |
| function setupDhikrReminders() { |
| const now = new Date(); |
| const hours = now.getHours(); |
| |
| |
| if (hours >= 5 && hours < 12 && Notification.permission === 'granted') { |
| new Notification('تذكير بأذكار الصباح', { |
| body: 'حان وقت قراءة أذكار الصباح', |
| icon: 'https://i.imgur.com/7kQEsHU.png' |
| }); |
| } |
| |
| else if (hours >= 18 && Notification.permission === 'granted') { |
| new Notification('تذكير بأذكار المساء', { |
| body: 'حان وقت قراءة أذكار المساء', |
| icon: 'https://i.imgur.com/7kQEsHU.png' |
| }); |
| } |
| } |
| |
| |
| setInterval(setupDhikrReminders, 60 * 60 * 1000); |
| setupDhikrReminders(); |
| }); |
| </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=tzamaod/t" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
