A distraction-free, modern web application for reading and listening to the Noble Quran with synchronized audio, verse-by-verse recitation, and multiple translations.
Quran for Every Soul is a progressive web application (PWA) that provides an elegant, distraction-free interface for accessing the Quran. The application features:
- Synchronized Audio Playback: Verse-by-verse recitation with multiple reciters
- Multiple Translations: Support for 40+ languages
- Algorithm Functionality: AI-powered 'For You' Recommendations
- Offline Support: Service worker caching for offline access
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Modern UI: Clean, minimalist interface with dark mode
quran-lite.pages.dev/
├── index.html # Main HTML entry point
├── swxjs.js # Service worker for offline functionality
├── LICENSE # License
├── CREDITS.MD # Credits
├── README.md # This file
│
├── src/ # Source code directory
│ ├── core/ # Core application logic
│ │ └── app.js # Main application fileerror-handling-img.js
│ │ └── error-handling-img.js # error-handling-img.js
│ ├── components/ # UI components
│ │ ├── navigation.js # Navigation component
│ │ ├── recommendations.js # AI recommendations
│ │ ├── arabic-modal-handler.js # Arabic reading capability modal
│ │ ├── offline-status.js # Offline status indicator
│ │ └── search/ # Search-related components
│ │ ├── grid-navigation.js # Search grid navigation
│ │ └── voice-search-bridge.js # Voice search integration
│ └── utils/ # Utility functions
│ ├── analytics.js # Google Analytics integration
│ ├── content-protection.js # Content protection utilities
│ ├── github-redirect.js # GitHub.io to Pages.dev redirect
│ ├── resolution.js # Screen resolution detection
│ └── service-worker-registration.js # Service worker setup
│
├── styles/ # Stylesheet directory
│ ├── index.css # Main stylesheet
│ ├── index1.css # Alternative stylesheet (translation-only view)
│ ├── arabic-modal.css # Arabic modal styles
│ ├── user-select.css # User selection prevention styles
│ └── inline-styles.css # Extracted inline styles
│
├── assets/ # Static assets
│ ├── images/ # Image files (verse images, icons)
│ ├── audio/ # Audio files
│ │ └── play/ # Audio recitation files
│ └── data/ # Data files
│ └── translations/ # Translation XML files
│
├── functions/ # Serverless functions (if applicable)
│ └── api/ # API endpoints
│ ├── recommend.js # Recommendation API
│ ├── search.js # Search API
│ └── transcribe.js # Transcription API
│
└── [other directories] # Additional project files
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- A local web server (for development)
-
Clone or download the repository
git clone [repository-url] cd quran-lite.pages.dev -
Start a local web server
Using Python:
# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000
Using Node.js (http-server):
npx http-server -p 8000
Using PHP:
php -S localhost:8000
-
Open in browser Navigate to
http://localhost:8000in your web browser
The application is designed to be deployed to static hosting services such as:
- Cloudflare Pages: Automatic deployment from Git
- Netlify: Drag-and-drop or Git integration
- GitHub Pages: Direct hosting from repository
- Vercel: Zero-configuration deployment
- Ensure all file paths are correct for your hosting environment
- Upload all files to your hosting service
- Configure the service worker to work with your domain
- Update any absolute URLs in the codebase if necessary
The application includes a service worker (swxjs.js) for offline functionality. The service worker will automatically register when the application loads. To update the service worker cache version, modify the CACHE_VERSION constant in swxjs.js.
Key configuration files:
- Service Worker:
swxjs.js- Cache configuration and offline strategies - Main Application:
src/core/app_5f6e7dxjs.js- Core application configuration - Analytics:
src/utils/ga_9c8b7axjs.js- Google Analytics tracking ID
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Frontend: Vanilla JavaScript (ES6+)
- Styling: CSS3 with CSS Variables
- Progressive Web App: Service Workers, Web App Manifest
- Audio: HTML5 Audio API
- Storage: LocalStorage for user preferences
- Verse-by-verse audio playback
- Multiple reciters (Mishary Alafasy, Al Juhany, As Sudais, etc.)
- 40+ translation languages
- Search functionality with AI recommendations
- Continue listening feature
- Bookmarking and favorites
- Offline mode support
- Dark mode design
- Responsive layout
- Keyboard navigation support
- Voice search integration
- Smooth animations and transitions
This is an open-source project. Contributions are welcome! Please ensure:
- Code follows the existing style and structure
- All functions include JSDoc comments
- No inline styles or scripts in HTML
- Console.log statements are removed
- Code is properly formatted
PROPRIETARY AND CONFIDENTIAL - ALL RIGHTS RESERVED
Copyright (c) Haykal M. Zaidi 2024-2026
This software and its source code are the exclusive property of Haykal M. Zaidi. Strictly no part of this software may be used, reproduced, modified, distributed, or copied in any form or by any means without the express prior written permission of the author.
The receipt or possession of this source code does not convey or imply any rights to use it for any purpose.
For issues, questions, or contributions, please refer to the project repository.
Security: media now uses a signed single-use tunneled URL scheme.
- The client requests a short-lived token from
/api/media-tokenand the middleware validates it. - Tokens expire after 1 minute and are marked single-use (in-memory). For production durability replace the in-memory store with a persistent KV or Redis and set
MEDIA_SECRETvia environment.