halouly/Tajweed-trainer-warsh

A web-based tajweed training app for Warsh recitation (رواية ورش عن نافع), serving learners in North Africa, West Africa, and the Maghreb. # مدرب التجويد - رواية ورش عن نافع # Warsh Tajweed Trainer A web-based tajweed training app for **Warsh recitation** (رواية ورش عن نافع), serving learners in North Africa, West Africa, and the Maghreb. ## Features - 📖 **Authentic Warsh Text** — From King Fahd Quran Complex (KFGQPC) - 🎨 **11 Tajweed Rules** — Color-coded with custom detection engine - 🎧 **Warsh Reciters** — Ibrahim Al-Dosary, Yassin Al-Jazaery - 🎙️ **Self-Recording** — Record and playback your recitation - 📱 **Mobile-First** — Works on phones, tablets, desktops - 🌐 **Fully Offline** — Single HTML file, no server needed - 🔤 **RTL Arabic UI** — Native interface for Arabic speakers ## Warsh-Specific Rules Detected | Rule | Arabic | Color | Description | |------|--------|-------|-------------| | Naql | نقل | Cyan | Vowel transfer from hamza wasl | | Taqlil | تقليل | Orange | Alif tilted toward ya sound | | Tashil | تسهيل | Purple | Softened second hamza | | Ibdal | إبدال | Pink | Hamza replaced with madd letter | | Tarqiq Ra | ترقيق الراء | Sky Blue | Light Ra after kasra | | Madd Badal | مد البدل | Red | 2/4/6 counts flexibility | | Madd 6 | مد 6 حركات | Dark Red | Extended madd (obligatory 6) | | Ghunnah | غنة | Green | Nasalization (2 counts) | | Qalqalah | قلقلة | Blue | Echo on قطبجد | | Tafkheem | تفخيم | Dark Blue | Heavy letters خصضغطقظ | | Silent | صامت | Gray | Unpronounced letters | ## Quick Start 1. Download `index.html` 2. Open in any browser 3. Select surah and ayah range 4. Click "تحميل النص والتجويد" 5. Listen, practice, record! Or use GitHub Pages: `https://[username].github.io` ## Data Sources | Resource | Source | License | |----------|--------|---------| | Warsh Text | fawazahmed0/quran-api → KFGQPC | CC BY 3.0 | | Warsh Font | KFGQPC | Free for Quran apps | | Audio | everyayah.com | Free for personal use | ## Technical Details - **Zero build process** — Pure HTML + React (CDN) + Tailwind (CDN) - **No backend** — All APIs are public CDNs - **Loca …