Introducing the Prayer Time App: Your Companion for Islamic Prayer Schedules

The Prayer Time App (for demo visit prayer.tabish.in) is a web application designed to deliver Islamic prayer times . Powered by the Aladhan API  this app offers a seamless experience for tracking daily prayers—Fajr, Dhuhr, Asr, Maghrib, and Isha—along with additional timings like Subah Sadiq and Qaza.

In this comprehensive guide, we’ll explore the app’s standout features, explain how it works, provide a step-by-step installation guide, and highlight the powerful admin panel for customization. Discover why the Prayer Time App is the ultimate tool for managing your prayer schedule.

Why Choose the Prayer Time App?

The Prayer Time App combines precision, flexibility, and a modern user interface to cater to both individual users and communities. Here’s why it’s a must-have for Muslims seeking reliable prayer time solutions:

Key Features of the Prayer Time App

• • Accurate Prayer Times with Aladhan API
    Integrates the Aladhan API to provide real-time prayer schedules tailored to your location and preferred calculation method (e.g., Muslim World League, Umm al-Qura).

• • Real-Time Date and Time Display
    Shows current English and Islamic (Hijri) dates in real-time.
    Features a countdown timer to the next prayer, ensuring you never miss a Salah.

• • Dynamic Prayer Highlighting
    Highlights the current prayer for quick reference.
    Displays a red blinking bar during Makruh Waqt, with buzzer sound (from azan/buzzer.mp3).

• • Customizable Audio Notifications
    Plays Azan audio (e.g., azan/fajr.mp3) at prayer times.
    Supports hourly reminders with customizable MP3 playback.

• • Responsive and Themed UI/UX
    Offers multiple layout options: grid, list .
    Includes light and dark themes for comfortable viewing.

• • Dynamic Backgrounds
    Customize backgrounds via the admin panel at prayer.tabish.in/admin.html.

• • Offline Support
    Caches prayer data in localStorage for offline access, with real-time updates via postMessage.

• • Admin Panel
    Configure settings like location, calculation method, and audio preferences with ease.

How the Prayer Time App Works

The Prayer Time App leverages modern web technologies for reliability and performance. Here’s how it operates:

1. Data Fetching with Aladhan API

The app sends HTTP requests to the Aladhan API to retrieve prayer times based on your city and calculation method. For example:

https://api.aladhan.com/v1/timingsByCity?city=Mecca&country=Saudi%20Arabia&method=2

This API call returns timings for Fajr, Dhuhr, Asr, Maghrib, Isha, and additional times like Subah Sadiq.

2. Real-Time Updates

• A JavaScript-based clock updates the current time, Islamic date, and countdown to the next prayer every second.
• The getCurrentPrayer function highlights the active prayer by comparing the current time to the API-fetched schedule.

3. Audio and Visual Cues

• Plays an Azan MP3 (e.g., azan/fajr.mp3) at prayer times.
• During Makruh Waqt, a red blinking bar appears with an optional buzzer sound (azan/buzzer.mp3).

4. Offline and Real-Time Sync

• Prayer times are cached in localStorage for offline functionality.
• Settings changes (e.g., city or method) sync across tabs/devices using postMessage.

5. Responsive Design

The app uses CSS Grid, Flexbox, and media queries to ensure compatibility across devices, from mobiles to large displays.

How to Install the Prayer Time App on Linux

For Linux users, the Prayer Time App can be installed to run in kiosk mode for personal use. Below is the installation script:

#!/bin/bash

# Exit on any error
set -e

# Variables
GIT_URL="https://github.com/tabishshaikh90/Prayertime.git"
CLONE_DIR="$HOME/prayertime"
PRAYER_URL="http://localhost/prayertime"
APACHE_DIR="/var/www/html/prayertime"
DESKTOP_FILE="$HOME/.config/autostart/prayertime.desktop"

# Function to check if a command exists
command_exists() {
    which "$1" >/dev/null 2>&1
}

echo "Starting installation process..."

# Step 1: Install Git and clone the repository
echo "Installing Git..."
sudo apt-get update -y
sudo apt-get install -y git

if [ -d "$CLONE_DIR" ]; then
    echo "Repository already cloned at $CLONE_DIR. Pulling latest changes..."
    cd "$CLONE_DIR"
    git pull origin main
else
    echo "Cloning prayer time repository from $GIT_URL..."
    git clone "$GIT_URL" "$CLONE_DIR"
fi

# Step 2: Install Apache and PHP
echo "Installing Apache and PHP..."
sudo apt-get install -y apache2 php libapache2-mod-php
sudo systemctl start apache2
sudo systemctl enable apache2

# Copy files to Apache web root
echo "Setting up prayer time application in Apache..."
sudo mkdir -p "$APACHE_DIR"
sudo cp -r "$CLONE_DIR"/* "$APACHE_DIR/"
sudo chown -R www-data:www-data "$APACHE_DIR"
sudo chmod -R 755 "$APACHE_DIR"

# Enable .htaccess for PHP
sudo a2enmod rewrite
echo "
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
" | sudo tee /etc/apache2/sites-available/prayertime.conf
sudo a2ensite prayertime.conf
sudo systemctl restart apache2

# Step 3: Check for Chrome or Chromium
echo "Checking for Google Chrome or Chromium..."
CHROME_BIN=""
if command_exists google-chrome; then
    CHROME_BIN="google-chrome"
elif command_exists chromium-browser; then
    CHROME_BIN="chromium-browser"
else
    echo "No Chrome browser found. Installing Google Chrome..."
    wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    sudo apt-get install -y ./google-chrome-stable_current_amd64.deb
    rm google-chrome-stable_current_amd64.deb
    CHROME_BIN="google-chrome"
fi

# Step 4: Run the website in kiosk mode
echo "Launching prayer time website in $CHROME_BIN kiosk mode..."
$CHROME_BIN --kiosk "$PRAYER_URL" &

# Step 5: Configure startup (optional)
echo "Would you like to open the prayer time website automatically on system startup? (y/n)"
read -r response
if [[ "$response" =~ ^[Yy]$ ]]; then
    echo "Configuring startup application..."
    mkdir -p "$HOME/.config/autostart"
    cat < "$DESKTOP_FILE"
[Desktop Entry]
Type=Application
Name=Prayer Time
Exec=$CHROME_BIN --kiosk $PRAYER_URL
Hidden=false
NoDisplay=false
X-GNOME-Autostart-enabled=true
Comment=Open prayer time website in kiosk mode
EOF
    chmod +x "$DESKTOP_FILE"
    echo "Startup configuration complete. The prayer time website will open on boot."
else
    echo "Skipping startup configuration."
fi

echo "Installation and setup complete!"

Installation on Windows

For Windows users, follow these steps:

1. Install XAMPP to set up a local server.
2. Copy the Prayer Time folder to the htdocs directory in your XAMPP installation.
3. Start the XAMPP server and access the app via http://localhost/prayertime.

Customizing with the Admin Panel

The admin panel at prayer.tabish.in/admin.html offers customization options:

• Set your city and country for accurate prayer times.
• Choose your calculation method (e.g., Muslim World League, Karachi).
• Customize audio notifications for Azan or hourly reminders.
• Adjust background themes and layout styles.

Why the Prayer Time App Stands Out

Unlike other prayer time apps, this app offers:

• Offline Functionality: Cached data ensures uninterrupted use.
• Customizable Experience: Tailor audio, themes, and layouts.
• Kiosk mode and Wall clock: Kiosk mode and large-display support.