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;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f8f5f2; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .category-btn.active { | |
| background-color: #2c3e50; | |
| color: white; | |
| } | |
| .counter-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .counter-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| transition: width 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-3xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <div class="flex items-center justify-center mb-4"> | |
| <i class="fas fa-mosque text-3xl text-amber-600 mr-2"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">تطبيق الأذكار</h1> | |
| </div> | |
| <p class="text-gray-600">"وَلَذِكْرُ اللَّهِ أَكْبَرُ"</p> | |
| </header> | |
| <!-- Time Info --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 text-center"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-left"> | |
| <div class="text-gray-500 text-sm">التاريخ الهجري</div> | |
| <div id="hijri-date" class="font-bold text-gray-800">--/--/----</div> | |
| </div> | |
| <div class="text-center"> | |
| <div id="current-time" class="text-3xl font-bold text-amber-600">--:--</div> | |
| <div id="current-date" class="text-gray-500 text-sm">--/--/----</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-gray-500 text-sm">المتبقي لصلاة</div> | |
| <div id="next-prayer" class="font-bold text-gray-800">--:--</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-around mt-4"> | |
| <div class="p-2 rounded-lg" id="fajr-time"> | |
| <div class="text-xs text-gray-500">الفجر</div> | |
| <div class="font-medium">--:--</div> | |
| </div> | |
| <div class="p-2 rounded-lg" id="dhuhr-time"> | |
| <div class="text-xs text-gray-500">الظهر</div> | |
| <div class="font-medium">--:--</div> | |
| </div> | |
| <div class="p-2 rounded-lg" id="asr-time"> | |
| <div class="text-xs text-gray-500">العصر</div> | |
| <div class="font-medium">--:--</div> | |
| </div> | |
| <div class="p-2 rounded-lg" id="maghrib-time"> | |
| <div class="text-xs text-gray-500">المغرب</div> | |
| <div class="font-medium">--:--</div> | |
| </div> | |
| <div class="p-2 rounded-lg" id="isha-time"> | |
| <div class="text-xs text-gray-500">العشاء</div> | |
| <div class="font-medium">--:--</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <div class="flex overflow-x-auto mb-6 pb-2 scrollbar-hide"> | |
| <button class="category-btn active px-4 py-2 mx-1 rounded-full bg-gray-800 text-white" data-category="morning">أذكار الصباح</button> | |
| <button class="category-btn px-4 py-2 mx-1 rounded-full bg-gray-200 text-gray-800" data-category="evening">أذكار المساء</button> | |
| <button class="category-btn px-4 py-2 mx-1 rounded-full bg-gray-200 text-gray-800" data-category="sleep">أذكار النوم</button> | |
| <button class="category-btn px-4 py-2 mx-1 rounded-full bg-gray-200 text-gray-800" data-category="prayer">أذكار الصلاة</button> | |
| <button class="category-btn px-4 py-2 mx-1 rounded-full bg-gray-200 text-gray-800" data-category="general">أذكار عامة</button> | |
| </div> | |
| <!-- Athkar Content --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden fade-in" id="athkar-container"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800" id="thikr-title">أذكار الصباح</h2> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-gray-500 mr-2" id="current-count">1</span> | |
| <span class="text-sm text-gray-500">/</span> | |
| <span class="text-sm text-gray-500 ml-2" id="total-count">10</span> | |
| </div> | |
| </div> | |
| <div class="progress-bar bg-amber-100 w-full rounded-full mb-6"> | |
| <div class="progress-bar bg-amber-500 rounded-full" style="width: 10%" id="progress-bar"></div> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <div class="text-2xl leading-relaxed text-gray-800 mb-4" id="thikr-text">يبدأ التطبيق بالذكر الأول...</div> | |
| <div class="text-gray-500 mb-2" id="thikr-description">عدد المرات: <span id="thikr-count">3</span></div> | |
| <div class="text-sm text-gray-400" id="thikr-reference">الراوي: - | المحدث: - | المصدر: - | الصفحة أو الرقم: -</div> | |
| </div> | |
| <div class="flex justify-center items-center"> | |
| <button class="counter-btn bg-amber-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl mr-4" id="decrement-btn"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <div class="text-3xl font-bold w-16 text-center" id="counter">0</div> | |
| <button class="counter-btn bg-amber-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl ml-4" id="increment-btn"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-4 flex justify-between"> | |
| <button class="px-4 py-2 rounded-lg bg-gray-200 text-gray-800 flex items-center" id="prev-btn"> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| السابق | |
| </button> | |
| <button class="px-4 py-2 rounded-lg bg-amber-500 text-white flex items-center" id="next-btn"> | |
| التالي | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bookmarks --> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-bookmark text-amber-500 mr-2"></i> | |
| الأذكار المفضلة | |
| </h3> | |
| <div class="grid grid-cols-1 gap-3" id="bookmarks-container"> | |
| <!-- Bookmarks will be added here dynamically --> | |
| <div class="text-center py-4 text-gray-500" id="empty-bookmarks"> | |
| <i class="fas fa-bookmark text-2xl mb-2 opacity-30"></i> | |
| <p>لا توجد أذكار مفضلة</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Athkar Data | |
| const athkarData = { | |
| morning: [ | |
| { | |
| text: "أَعُوذُ بِاللَّهِ مِنَ الشَّيْطَانِ الرَّجِيمِ", | |
| count: 1, | |
| reference: "الراوي: - | المحدث: - | المصدر: - | الصفحة أو الرقم: -" | |
| }, | |
| { | |
| text: "اللَّهُ لاَ إِلَهَ إِلاَّ هُوَ الْحَيُّ الْقَيُّومُ، لاَ تَأْخُذُهُ سِنَةٌ وَلاَ نَوْمٌ، لَهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الأَرْضِ، مَنْ ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلاَّ بِإِذْنِهِ، يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ، وَلاَ يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ إِلاَّ بِمَا شَاءَ، وَسِعَ كُرْسِيُّهُ السَّمَاوَاتِ وَالأَرْضَ، وَلاَ يَئُودُهُ حِفْظُهُمَا، وَهُوَ الْعَلِيُّ الْعَظِيمُ", | |
| count: 1, | |
| reference: "الراوي: أبو هريرة | المحدث: الألباني | المصدر: صحيح الجامع | الصفحة أو الرقم: 18" | |
| }, | |
| { | |
| text: "بِسْمِ اللَّهِ الَّذِي لاَ يَضُرُّ مَعَ اسْمِهِ شَيْءٌ فِي الأَرْضِ وَلاَ فِي السَّمَاءِ وَهُوَ السَّمِيعُ الْعَلِيمُ", | |
| count: 3, | |
| reference: "الراوي: عثمان بن عفان | المحدث: الألباني | المصدر: صحيح أبي داود | الصفحة أو الرقم: 5088" | |
| }, | |
| { | |
| text: "رَضِيتُ بِاللَّهِ رَبًّا، وَبِالإِسْلامِ دِينًا، وَبِمُحَمَّدٍ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ نَبِيًّا", | |
| count: 3, | |
| reference: "الراوي: ثوبان مولى رسول الله | المحدث: مسلم | المصدر: صحيح مسلم | الصفحة أو الرقم: 2727" | |
| }, | |
| { | |
| text: "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ", | |
| count: 100, | |
| reference: "الراوي: أبو هريرة | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 6405" | |
| } | |
| ], | |
| evening: [ | |
| { | |
| text: "أَعُوذُ بِاللَّهِ مِنَ الشَّيْطَانِ الرَّجِيمِ", | |
| count: 1, | |
| reference: "الراوي: - | المحدث: - | المصدر: - | الصفحة أو الرقم: -" | |
| }, | |
| { | |
| text: "اللَّهُ لاَ إِلَهَ إِلاَّ هُوَ الْحَيُّ الْقَيُّومُ، لاَ تَأْخُذُهُ سِنَةٌ وَلاَ نَوْمٌ، لَهُ مَا فِي السَّمَاوَاتِ وَمَا فِي الأَرْضِ، مَنْ ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلاَّ بِإِذْنِهِ، يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ، وَلاَ يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ إِلاَّ بِمَا شَاءَ، وَسِعَ كُرْسِيُّهُ السَّمَاوَاتِ وَالأَرْضَ، وَلاَ يَئُودُهُ حِفْظُهُمَا، وَهُوَ الْعَلِيُّ الْعَظِيمُ", | |
| count: 1, | |
| reference: "الراوي: أبو هريرة | المحدث: الألباني | المصدر: صحيح الجامع | الصفحة أو الرقم: 18" | |
| }, | |
| { | |
| text: "أَمْسَيْنَا وَأَمْسَى الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ، لاَ إِلَهَ إِلاَّ اللَّهُ وَحْدَهُ لاَ شَرِيكَ لَهُ", | |
| count: 1, | |
| reference: "الراوي: عبدالله بن مسعود | المحدث: مسلم | المصدر: صحيح مسلم | الصفحة أو الرقم: 2723" | |
| }, | |
| { | |
| text: "اللَّهُمَّ بِكَ أَمْسَيْنَا، وَبِكَ أَصْبَحْنَا، وَبِكَ نَحْيَا، وَبِكَ نَمُوتُ، وَإِلَيْكَ النُّشُورُ", | |
| count: 1, | |
| reference: "الراوي: أبو هريرة | المحدث: الترمذي | المصدر: سنن الترمذي | الصفحة أو الرقم: 3391" | |
| }, | |
| { | |
| text: "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ", | |
| count: 100, | |
| reference: "الراوي: أبو هريرة | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 6405" | |
| } | |
| ], | |
| sleep: [ | |
| { | |
| text: "بِاسْمِكَ رَبِّي وَضَعْتُ جَنْبِي، وَبِكَ أَرْفَعُهُ، فَإِنْ أَمْسَكْتَ نَفْسِي فَارْحَمْهَا، وَإِنْ أَرْسَلْتَهَا فَاحْفَظْهَا بِمَا تَحْفَظُ بِهِ عِبَادَكَ الصَّالِحِينَ", | |
| count: 1, | |
| reference: "الراوي: البراء بن عازب | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 6320" | |
| }, | |
| { | |
| text: "اللَّهُمَّ قِنِي عَذَابَكَ يَوْمَ تَبْعَثُ عِبَادَكَ", | |
| count: 3, | |
| reference: "الراوي: حذيفة بن اليمان | المحدث: الترمذي | المصدر: سنن الترمذي | الصفحة أو الرقم: 3398" | |
| }, | |
| { | |
| text: "سُبْحَانَ اللَّهِ (33) وَالْحَمْدُ لِلَّهِ (33) وَاللَّهُ أَكْبَرُ (34)", | |
| count: 1, | |
| reference: "الراوي: علي بن أبي طالب | المحدث: مسلم | المصدر: صحيح مسلم | الصفحة أو الرقم: 2727" | |
| }, | |
| { | |
| text: "آمَنَ الرَّسُولُ بِمَا أُنْزِلَ إِلَيْهِ مِنْ رَبِّهِ وَالْمُؤْمِنُونَ ۚ كُلٌّ آمَنَ بِاللَّهِ وَمَلَائِكَتِهِ وَكُتُبِهِ وَرُسُلِهِ لَا نُفَرِّقُ بَيْنَ أَحَدٍ مِنْ رُسُلِهِ ۚ وَقَالُوا سَمِعْنَا وَأَطَعْنَا ۖ غُفْرَانَكَ رَبَّنَا وَإِلَيْكَ الْمَصِيرُ", | |
| count: 1, | |
| reference: "الراوي: - | المحدث: - | المصدر: سورة البقرة | الصفحة أو الرقم: 285" | |
| } | |
| ], | |
| prayer: [ | |
| { | |
| text: "سُبْحَانَ رَبِّيَ الْعَظِيمِ", | |
| count: 3, | |
| reference: "الراوي: حذيفة بن اليمان | المحدث: مسلم | المصدر: صحيح مسلم | الصفحة أو الرقم: 772" | |
| }, | |
| { | |
| text: "سُبْحَانَ رَبِّيَ الْأَعْلَى", | |
| count: 3, | |
| reference: "الراوي: حذيفة بن اليمان | المحدث: مسلم | المصدر: صحيح مسلم | الصفحة أو الرقم: 772" | |
| }, | |
| { | |
| text: "سَمِعَ اللَّهُ لِمَنْ حَمِدَهُ", | |
| count: 1, | |
| reference: "الراوي: أبو هريرة | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 789" | |
| }, | |
| { | |
| text: "رَبَّنَا لَكَ الْحَمْدُ", | |
| count: 1, | |
| reference: "الراوي: أبو هريرة | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 796" | |
| }, | |
| { | |
| text: "اللَّهُ أَكْبَرُ", | |
| count: 3, | |
| reference: "الراوي: عبدالله بن مسعود | المحدث: مسلم | المصدر: صحيح مسلم | الصفحة أو الرقم: 598" | |
| } | |
| ], | |
| general: [ | |
| { | |
| text: "لَا إِلَهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ، لَهُ الْمُلْكُ وَلَهُ الْحَمْدُ، وَهُوَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ", | |
| count: 100, | |
| reference: "الراوي: أبو هريرة | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 3293" | |
| }, | |
| { | |
| text: "سُبْحَانَ اللَّهِ وَالْحَمْدُ لِلَّهِ وَاللَّهُ أَكْبَرُ", | |
| count: 33, | |
| reference: "الراوي: أبو هريرة | المحدث: مسلم | المصدر: صحيح مسلم | الصفحة أو الرقم: 2724" | |
| }, | |
| { | |
| text: "لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللَّهِ", | |
| count: 100, | |
| reference: "الراوي: أبو موسى الأشعري | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 6406" | |
| }, | |
| { | |
| text: "اللَّهُمَّ صَلِّ عَلَى مُحَمَّدٍ وَعَلَى آلِ مُحَمَّدٍ، كَمَا صَلَّيْتَ عَلَى إِبْرَاهِيمَ وَعَلَى آلِ إِبْرَاهِيمَ، إِنَّكَ حَمِيدٌ مَجِيدٌ، اللَّهُمَّ بَارِكْ عَلَى مُحَمَّدٍ وَعَلَى آلِ مُحَمَّدٍ، كَمَا بَارَكْتَ عَلَى إِبْرَاهِيمَ وَعَلَى آلِ إِبْرَاهِيمَ، إِنَّكَ حَمِيدٌ مَجِيدٌ", | |
| count: 10, | |
| reference: "الراوي: كعب بن عجرة | المحدث: البخاري | المصدر: صحيح البخاري | الصفحة أو الرقم: 3370" | |
| } | |
| ] | |
| }; | |
| // App State | |
| let currentCategory = 'morning'; | |
| let currentThikrIndex = 0; | |
| let currentCount = 0; | |
| let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || []; | |
| // DOM Elements | |
| const categoryBtns = document.querySelectorAll('.category-btn'); | |
| const thikrTitle = document.getElementById('thikr-title'); | |
| const thikrText = document.getElementById('thikr-text'); | |
| const thikrCount = document.getElementById('thikr-count'); | |
| const thikrReference = document.getElementById('thikr-reference'); | |
| const counter = document.getElementById('counter'); | |
| const incrementBtn = document.getElementById('increment-btn'); | |
| const decrementBtn = document.getElementById('decrement-btn'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const currentCountEl = document.getElementById('current-count'); | |
| const totalCountEl = document.getElementById('total-count'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const bookmarksContainer = document.getElementById('bookmarks-container'); | |
| const emptyBookmarks = document.getElementById('empty-bookmarks'); | |
| // Initialize the app | |
| function initApp() { | |
| updateThikr(); | |
| updateBookmarks(); | |
| updateDateTime(); | |
| setInterval(updateDateTime, 1000); | |
| // Set prayer times (mock data - in a real app you would use an API) | |
| document.getElementById('fajr-time').querySelector('div:last-child').textContent = '04:30'; | |
| document.getElementById('dhuhr-time').querySelector('div:last-child').textContent = '12:30'; | |
| document.getElementById('asr-time').querySelector('div:last-child').textContent = '15:45'; | |
| document.getElementById('maghrib-time').querySelector('div:last-child').textContent = '18:20'; | |
| document.getElementById('isha-time').querySelector('div:last-child').textContent = '19:45'; | |
| document.getElementById('next-prayer').textContent = '02:15'; | |
| } | |
| // Update Thikr display | |
| function updateThikr() { | |
| const thikrList = athkarData[currentCategory]; | |
| const currentThikr = thikrList[currentThikrIndex]; | |
| thikrTitle.textContent = getCategoryName(currentCategory); | |
| thikrText.textContent = currentThikr.text; | |
| thikrCount.textContent = currentThikr.count; | |
| thikrReference.textContent = currentThikr.reference; | |
| counter.textContent = currentCount; | |
| currentCountEl.textContent = currentThikrIndex + 1; | |
| totalCountEl.textContent = thikrList.length; | |
| const progressPercentage = ((currentThikrIndex + 1) / thikrList.length) * 100; | |
| progressBar.style.width = `${progressPercentage}%`; | |
| // Disable/enable navigation buttons | |
| prevBtn.disabled = currentThikrIndex === 0; | |
| nextBtn.disabled = currentThikrIndex === thikrList.length - 1; | |
| // Reset counter when changing thikr | |
| currentCount = 0; | |
| counter.textContent = currentCount; | |
| // Add fade-in animation | |
| document.getElementById('athkar-container').classList.add('fade-in'); | |
| setTimeout(() => { | |
| document.getElementById('athkar-container').classList.remove('fade-in'); | |
| }, 500); | |
| } | |
| // Get category name in Arabic | |
| function getCategoryName(category) { | |
| const names = { | |
| morning: 'أذكار الصباح', | |
| evening: 'أذكار المساء', | |
| sleep: 'أذكار النوم', | |
| prayer: 'أذكار الصلاة', | |
| general: 'أذكار عامة' | |
| }; | |
| return names[category]; | |
| } | |
| // Update bookmarks display | |
| function updateBookmarks() { | |
| if (bookmarks.length === 0) { | |
| emptyBookmarks.style.display = 'block'; | |
| bookmarksContainer.innerHTML = ''; | |
| bookmarksContainer.appendChild(emptyBookmarks); | |
| return; | |
| } | |
| emptyBookmarks.style.display = 'none'; | |
| bookmarksContainer.innerHTML = ''; | |
| bookmarks.forEach((bookmark, index) => { | |
| const bookmarkEl = document.createElement('div'); | |
| bookmarkEl.className = 'bg-white rounded-lg shadow p-4 flex justify-between items-center'; | |
| bookmarkEl.innerHTML = ` | |
| <div class="flex-1"> | |
| <div class="text-gray-800">${bookmark.text.substring(0, 50)}${bookmark.text.length > 50 ? '...' : ''}</div> | |
| <div class="text-sm text-gray-500 mt-1">${bookmark.category}</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bookmark-remove-btn px-3 py-1 rounded-lg bg-red-100 text-red-500 ml-2" data-index="${index}"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <button class="bookmark-view-btn px-3 py-1 rounded-lg bg-amber-100 text-amber-500" data-index="${index}"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| `; | |
| bookmarksContainer.appendChild(bookmarkEl); | |
| }); | |
| // Add event listeners to bookmark buttons | |
| document.querySelectorAll('.bookmark-remove-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const index = e.target.closest('button').dataset.index; | |
| removeBookmark(index); | |
| }); | |
| }); | |
| document.querySelectorAll('.bookmark-view-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const index = e.target.closest('button').dataset.index; | |
| viewBookmark(index); | |
| }); | |
| }); | |
| } | |
| // Add current thikr to bookmarks | |
| function addBookmark() { | |
| const thikrList = athkarData[currentCategory]; | |
| const currentThikr = thikrList[currentThikrIndex]; | |
| const bookmark = { | |
| text: currentThikr.text, | |
| category: getCategoryName(currentCategory), | |
| reference: currentThikr.reference, | |
| count: currentThikr.count | |
| }; | |
| // Check if already bookmarked | |
| const isAlreadyBookmarked = bookmarks.some(b => | |
| b.text === bookmark.text && b.category === bookmark.category | |
| ); | |
| if (!isAlreadyBookmarked) { | |
| bookmarks.push(bookmark); | |
| localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); | |
| updateBookmarks(); | |
| // Show success message | |
| alert('تمت إضافة الذكر إلى المفضلة بنجاح'); | |
| } else { | |
| alert('هذا الذكر مضاف مسبقاً إلى المفضلة'); | |
| } | |
| } | |
| // Remove bookmark | |
| function removeBookmark(index) { | |
| bookmarks.splice(index, 1); | |
| localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); | |
| updateBookmarks(); | |
| } | |
| // View bookmark | |
| function viewBookmark(index) { | |
| const bookmark = bookmarks[index]; | |
| // Find the category | |
| for (const category in athkarData) { | |
| if (getCategoryName(category) === bookmark.category) { | |
| currentCategory = category; | |
| break; | |
| } | |
| } | |
| // Find the thikr in the category | |
| const thikrList = athkarData[currentCategory]; | |
| currentThikrIndex = thikrList.findIndex(t => t.text === bookmark.text); | |
| if (currentThikrIndex === -1) { | |
| currentThikrIndex = 0; | |
| } | |
| // Update category buttons | |
| categoryBtns.forEach(btn => { | |
| btn.classList.remove('active', 'bg-gray-800', 'text-white'); | |
| btn.classList.add('bg-gray-200', 'text-gray-800'); | |
| if (btn.dataset.category === currentCategory) { | |
| btn.classList.add('active', 'bg-gray-800', 'text-white'); | |
| btn.classList.remove('bg-gray-200', 'text-gray-800'); | |
| } | |
| }); | |
| updateThikr(); | |
| // Scroll to top | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Update date and time | |
| function updateDateTime() { | |
| const now = new Date(); | |
| // Current time | |
| const timeOptions = { hour: '2-digit', minute: '2-digit' }; | |
| document.getElementById('current-time').textContent = now.toLocaleTimeString('ar-EG', timeOptions); | |
| // Current date | |
| const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| document.getElementById('current-date').textContent = now.toLocaleDateString('ar-EG', dateOptions); | |
| // Hijri date (mock - in a real app you would use a library) | |
| const hijriDate = getHijriDate(now); | |
| document.getElementById('hijri-date').textContent = hijriDate; | |
| } | |
| // Mock Hijri date function | |
| function getHijriDate(date) { | |
| // This is a simplified mock function | |
| // In a real app, use a proper Hijri date library | |
| const hijriMonths = [ | |
| 'محرم', 'صفر', 'ربيع الأول', 'ربيع الثاني', | |
| 'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان', | |
| 'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة' | |
| ]; | |
| const day = date.getDate(); | |
| const month = hijriMonths[date.getMonth()]; | |
| const year = 1445 + Math.floor(Math.random() * 2); // Random between 1445-1446 | |
| return `${day} ${month} ${year}`; | |
| } | |
| // Event Listeners | |
| categoryBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| categoryBtns.forEach(b => { | |
| b.classList.remove('active', 'bg-gray-800', 'text-white'); | |
| b.classList.add('bg-gray-200', 'text-gray-800'); | |
| }); | |
| btn.classList.add('active', 'bg-gray-800', 'text-white'); | |
| btn.classList.remove('bg-gray-200', 'text-gray-800'); | |
| currentCategory = btn.dataset.category; | |
| currentThikrIndex = 0; | |
| updateThikr(); | |
| }); | |
| }); | |
| incrementBtn.addEventListener('click', () => { | |
| const thikrList = athkarData[currentCategory]; | |
| const currentThikr = thikrList[currentThikrIndex]; | |
| if (currentCount < currentThikr.count) { | |
| currentCount++; | |
| counter.textContent = currentCount; | |
| } | |
| }); | |
| decrementBtn.addEventListener('click', () => { | |
| if (currentCount > 0) { | |
| currentCount--; | |
| counter.textContent = currentCount; | |
| } | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| const thikrList = athkarData[currentCategory]; | |
| if (currentThikrIndex < thikrList.length - 1) { | |
| currentThikrIndex++; | |
| updateThikr(); | |
| } | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| if (currentThikrIndex > 0) { | |
| currentThikrIndex--; | |
| updateThikr(); | |
| } | |
| }); | |
| // Add bookmark button (not shown in UI but can be added) | |
| // For example, you could add a bookmark button next to the counter | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', initApp); | |
| </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=REDMOOD/azkar-application" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |