GT-QURANREADER-WEB هو عارض متكامل للقرآن الكريم مصمم خصيصًا لبيئة الويب، ويوفر تجربة قراءة سلسة ومريحة. يجمع المشروع بين العرض البصري لصفحات المصحف (صور) وإمكانية التحويل إلى العرض النصي القابل للتخصيص، مع دعم ميزة التلاوة الصوتية المتزامنة من عدة قراء مشهورين.
المشروع مبني بالكامل باستخدام HTML5، CSS3 (متغيرات CSS)، و JavaScript النقي، مما يجعله سريعًا وخفيفًا ومناسبًا كـ PWA (تطبيق ويب تقدمي).
- وضع العرض المزدوج: التبديل السريع بين عرض صورة المصحف وعرض النص القرآني القابل للتحديد والنسخ.
- تخصيص القراءة:
- تغيير الخط: يدعم خطوطًا قرآنية متعددة مثل Uthmanic Hafs و Amiri Quran.
- تحجيم النص: إمكانية التحكم الكامل بحجم الخط لتجربة قراءة مريحة.
- الوضع الليلي: توفير وضع داكن (Dark Mode) مريح للعين.
- التلاوة الصوتية:
- تشغيل تلاوة السور الكاملة من مصادر متعددة (مثل مشاري العفاسي، عبد الباسط، سعد الغامدي).
- شريط تحكم عائم لتشغيل وإيقاف التلاوة.
- سهولة التصفح:
- التنقل بين الصفحات والأجزاء (الأحزاب).
- قوائم منسدلة منظمة لجميع السور والأجزاء (Juz).
- دعم PWA: ملف
manifest.jsonموجود لتمكين تثبيت التطبيق على الأجهزة.
يمكنك زيارة النسخة المنشورة أو تنزيل ملفات المشروع وتشغيلها محليًا.
يمكنك زيارة العارض مباشرة عبر الرابط التالي:
للحصول على نسخة محلية من المشروع:
- استنسخ المستودع:
git clone [https://github.com/salehgnutux/GT-QURANREADER-WEB.git](https://github.com/salehgnutux/GT-QURANREADER-WEB.git)
- انتقل إلى المجلد:
cd GT-QURANREADER-WEB - افتح الملف:
افتح الملف
index.htmlمباشرة في متصفحك.
ملاحظة: يتطلب التطبيق الاتصال بالإنترنت لجلب صور صفحات المصحف وبيانات النص القرآني وروابط التلاوات الصوتية من واجهات برمجية خارجية (APIs).
| الملف/المجلد | الوصف |
|---|---|
index.html |
ملف HTML الرئيسي الذي يحتوي على هيكل التطبيق وجميع النوافذ المنبثقة (Modals). |
style.css |
ملف تنسيقات CSS، ويحتوي على متغيرات الألوان (Dark/Light Mode) وتنسيقات الخطوط القرآنية. |
script.js |
ملف JavaScript الرئيسي، ويحتوي على منطق عمل التطبيق، إدارة الصفحات، التلاوة، وتغيير الخط. |
manifest.json |
ملف إعدادات PWA (تطبيق الويب التقدمي). |
fonts/ |
مجلد يحتوي على الخطوط القرآنية المخصصة (UthmanicHafs1, AmiriQuran). |
icons/ |
مجلد يحتوي على أيقونات التطبيق لاستخدامها في PWA. |
تتم إدارة تغيير حجم الخط في مربع عرض النص بواسطة دالة changeFontSize(sizeChange) داخل كلاس QuranReader في ملف script.js.
الآلية:
- تعديل قيمة متغير CSS مخصص يُسمى
--quran-text-font-size. - يتم تطبيق التغيير على العنصر ذي الكلاس
.quran-text-content. - يتم حفظ القيمة الجديدة في الذاكرة المحلية للمتصفح (
localStorage) لتذكرها عند الزيارة التالية.
نرحب بأي مساهمة لتطوير المشروع وتحسينه! إذا كان لديك اقتراح أو وجدت أي خطأ، يرجى:
- عمل Fork للمستودع.
- إنشاء فرع جديد (Feature Branch):
git checkout -b feature/AmazingFeature - قم بإجراء التعديلات والالتزام بها:
git commit -m 'feat: Add Amazing Feature' - ادفع التغييرات:
git push origin feature/AmazingFeature - افتح طلب دمج (Pull Request).
هذا المشروع مرخص بموجب ترخيص MIT. انظر ملف LICENSE لمزيد من التفاصيل.
ملف fzstd-0.1.1.js هو النسخة v0.1.1 من مكتبة fzstd من عمل 101arrowz بترخيص MIT.
صالح جنوتوكس (SalehGNUTUX)
- GitHub: @SalehGNUTUX
تم تطويره بحب للغة العربية ولخدمة كتاب الله.