Spaces:

tzamaod
/

t

Running

App Files Files Community

tzamaod commited on Aug 18, 2025

Commit

93e3d86

verified ·

1 Parent(s): 678c060

تطبيق بسيط للموبايل أو الويب، يحتوي على: أذكار الصباح والمساء (قابلة للتشغيل صوتيًا). القرآن الكريم (قراءة + استماع). مواقيت الصلاة (حسب الموقع الجغرافي باستخدام API). تنبيهات (إشعار عند دخول وقت الصلاة + تذكير بالأذكار). - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +758 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: T
-emoji: ⚡
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: t
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,758 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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 -->
+    <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>
+    <!-- Prayer Times -->
+    <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 Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Tabs Navigation -->
+        <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>
+        <!-- Current Remembrance -->
+        <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>
+        <!-- Remembrance Counter -->
+        <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>
+        <!-- More Remembrances -->
+        <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>
+        <!-- Quran Section -->
+        <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>
+                        <!-- Surahs will be populated by JS -->
+                    </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>
+    <!-- Features Section -->
+    <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>
+    <!-- Contact 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 -->
+    <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>
+    <!-- Bottom Navigation -->
+    <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() {
+            // Tab functionality
+            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');
+                    // Load appropriate remembrances based on tab
+                    if (index === 0) { // Morning
+                        remembrances = [...morningRemembrances];
+                    } else if (index === 1) { // Evening
+                        remembrances = [...eveningRemembrances];
+                    }
+                    // Reset to first remembrance
+                    loadRemembrance(0);
+                });
+            });
+            // Bookmark and share buttons
+            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');
+                    }
+                    // Add actual bookmark/share functionality here
+                });
+            });
+            // Audio player functionality
+            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');
+            // Update 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}`;
+            }
+            // Remembrance Counter System
+            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');
+            // Sample remembrance data
+            const remembrances = [
+                { id: 1, text: "أعوذ بالله من الشيطان الرجيم", count: 3 },
+                { id: 2, text: "سبحان الله وبحمده", count: 100 },
+                { id: 3, text: "لا إله إلا الله وحده لا شريك له", count: 1 }
+            ];
+            let currentRemembrance = 0;
+            let count = 1; // Start counting from 1 instead of 0
+            function loadRemembrance(index) {
+                currentRemembrance = index;
+                count = 1; // Reset to 1 instead of 0
+                const rem = remembrances[index];
+                // Update UI
+                document.querySelector('.arabic-text').innerHTML = rem.text;
+                counterElement.textContent = count;
+                document.querySelector('.text-xl.font-bold').textContent = `ذكر ${index + 1}/${remembrances.length}`;
+                // Reset button states
+                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; // Reset to 1 for next time
+                    this.classList.replace('bg-green-600', 'bg-gray-400');
+                    this.classList.replace('hover:bg-green-700', 'hover:bg-gray-500');
+                    this.disabled = true;
+                    // Move to next remembrance after 1 second
+                    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;
+            });
+            // Initialize first remembrance
+            loadRemembrance(0);
+            // Notification permission
+            if ('Notification' in window) {
+                Notification.requestPermission().then(permission => {
+                    if (permission === 'granted') {
+                        console.log('Notification permission granted');
+                    }
+                });
+            }
+            // Geolocation
+            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'); // Default to Riyadh if geolocation fails
+                        }
+                    );
+                } 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');
+                }
+            }
+            // Prayer Times API
+            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);
+                        // Highlight current prayer time
+                        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;
+                    }
+                }
+                // Remove all active classes first
+                document.querySelectorAll('.prayer-time').forEach(el => {
+                    el.classList.remove('active');
+                });
+                // Add active class to current prayer
+                if (currentPrayer) {
+                    document.querySelector(`#${currentPrayer}-time`).parentElement.classList.add('active');
+                }
+            }
+            // Initial load and city change
+            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);
+                        // Notify 5 minutes before prayer
+                        if (prayerTime > currentTime && prayerTime - currentTime <= 5) {
+                            const notification = new Notification(`حان وقت صلاة ${prayerNames[prayer]} قريبًا`, {
+                                body: `سيحين وقت الصلاة خلال 5 دقائق`,
+                                icon: 'https://i.imgur.com/7kQEsHU.png'
+                            });
+                        }
+                    }
+                });
+            }
+            // Quran functionality
+            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');
+            // Load Surahs list
+            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`;
+            });
+            // Tab switching for Quran
+            tabs.forEach((tab, index) => {
+                tab.addEventListener('click', () => {
+                    // ... existing tab code ...
+                    if (tab.textContent.includes('القرآن')) {
+                        quranSection.classList.remove('hidden');
+                        loadSurahs();
+                    } else {
+                        quranSection.classList.add('hidden');
+                    }
+                });
+            });
+            // Load initial prayer times using geolocation
+            getLocation();
+            // Setup morning/evening reminders
+            function setupDhikrReminders() {
+                const now = new Date();
+                const hours = now.getHours();
+                // Morning reminder at 6 AM
+                if (hours >= 5 && hours < 12 && Notification.permission === 'granted') {
+                    new Notification('تذكير بأذكار الصباح', {
+                        body: 'حان وقت قراءة أذكار الصباح',
+                        icon: 'https://i.imgur.com/7kQEsHU.png'
+                    });
+                }
+                // Evening reminder at 6 PM
+                else if (hours >= 18 && Notification.permission === 'granted') {
+                    new Notification('تذكير بأذكار المساء', {
+                        body: 'حان وقت قراءة أذكار المساء',
+                        icon: 'https://i.imgur.com/7kQEsHU.png'
+                    });
+                }
+            }
+            // Check for reminders every hour
+            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>