thenasihun / me-azkar-web

Morning Evening Azkar Web Application - Daily Supplication or Dua #MEAzkar

Morning Evening (ME) Azkar - Daily Supplications

A beautiful, responsive web interface for reading daily morning evening azkar Islamic supplications (duas) with audio playback and multilingual support.

Features

🕒 Time-Based Display

• Automatically shows morning/evening supplications based on current time
• Manual toggle between morning and evening views

📖 Rich Content Display

• Original Arabic text with proper typography
• Urdu and English translations
• Detailed supplication explanations
• Reference information (book sources and hadith numbers)

🔊 Audio Integration

• Built-in audio player controls
• Play/pause functionality
• Repeat mode
• Seamless audio file integration

🌍 Multilingual Support

• Toggle between English and Urdu translations
• Responsive Urdu font rendering
• Language preference saving

📱 Responsive Design

• Mobile-first approach
• Cross-browser compatibility
• Accessible interface
• Smooth animations and transitions

✨ Additional Features

• Direct sharing functionality
• SEO optimization for search engines
• Automatic JSON data loading
• Progressive Web App (PWA) ready

Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Edge)
• Web server for local development (optional)

Installation

1. Clone the repository:

git clone https://github.com/thenasihun/me-azkar-web.git

2. Navigate to project directory:

cd me-azkar-web

3. Open in browser: open index.html file in any modern browser

Project Structure

. ├── index.html # Main application entry ├── supplications.json # Supplication data ├── assets/ # Media assets │ ├── audio/ # MP3 files (1.mp3, 2.mp3, etc.) │ └── fonts/ # Custom web fonts ├── .github/ │ └── workflows/ # GitHub Actions config └── README.md # This documentation

Configuration

1. Edit supplications.json to modify content
2. Add audio files in assets/audio/ as [id].mp3
3. Adjust styling in CSS variables:

:root {
  --primary: #2c3e50;
  --secondary: #3a5f5f;
  --accent: #2ecc71;
}

Deployment

Automatically deployed via GitHub Pages:

1. Push to main branch
2. GitHub Actions builds and deploys
3. Live at: https://your-username.github.io/your-repo

Contributing

1. Fork the repository
2. Create feature branch:

git checkout -b feature/new-feature

3. Commit changes:

git commit -m 'Add some feature'

4. Push to branch:

git push origin feature/new-feature

5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

Noto Arabic Font Noto Nastaliq Urdu

Visit nasihun.com official website & join our whatsapp channel for daily islamic content