ELM Times - Single Page Prayer Times Web App

This is a simple single page prayer times web app built using Preact and Webpack. It displays the prayer times for a specific mosque including the time, date and latest video from the mosque's YouTube channel.

Using ELM Times for your own mosque

Feel free to use the code for your own mosque by following the steps below.

Examples:

• Coventry Cross Mosque
• Nusratul Islam Masjid

Version 2.0

ELM Times has been rewritten in version 2.0 so there will be some breaking changes if you're currently using the previous version. In this version we've made it even easier to get up and running without having any development knowledge.

Installation

1. Download the code
2. Update config.json
3. Update index.html
4. Update manifest.json
5. Add assets
6. Upload files

1. Download the code

Get the ELM Times codebase by cloning this repo or downloading the zip and extracting it.

2. Update config.json

Open the config.json file in a text editor and update the options for your mosque.

Option | Value | Requirement | Description --- | --- | --- | --- theme | maroon, navy, teal, purple | Required | The colour theme for the app noSlides | integer | Required | The number of slides for the desktop version e.g. 3 sliderSpeed | integer | Required | The speed of the slider in seconds e.g. 3 aboutTitle | string | Optional | The title for the About page about | string | Required | The html content for the About page youtubeKey | string | Optional | The YouTube api key. If you do not include this option the "Videos" page will be removed. youTubeChannelId | string | Optional | The YouTube channel ID. Required if youtubeKey has been set. gaid | string | Optional | Your Google Analytics ID elm | boolean | Required | If you're using ELM's times and functionality then set this as true otherwise false disableAsr2 | boolean | Optional | If your mosque doesn't have the times for Asr Mithl 2 then you can disable it by including this option. You can remove this Asr time from your timetable CSV file.

3. Update index.html

Open the index.html file in a text editor and update the meta tags for your mosque.

<!-- Page meta -->
<meta name="description" content="...">
<meta name="keywords" content="...">

<!-- Facebook -->
<meta property="og:title" content="...">
<meta property="og:image" content="...">
<meta property="og:url" content="...">
<meta property="og:description" content="...">
<meta property="og:site_name" content="...">

4. Update manifest.json

This file allows your users to save the web app to their mobile homescreens and let them use the app offline.

Option | Value | Description --- | --- | --- short_name | string | The name under the app icon so make it short e.g. ELM name | string | The website name e.g. East London Mosque background_color | string | The hex colour for the app e.g. #95112d theme_color | string | The hex colour for the app e.g. #95112d

If you want to match the background_color and theme_color with the prayer times theme colour then have a look at the colour codes in src/scss/_variables.scss.

5. Add assets

All the images live in subdirectories inside the root assets folder:

Folder | Description | Files --- | --- | --- icons | Contains the app icons used for mobile homescreens | Replace all the images in this folder using the same filenames logos | Contains the logo images in 3 different sizes | Replace all the images in this folder using the same filenames slides | Contains the slideshow images used for desktop browsers | You can add any number of images in this folder and the filenames should follow this style slide-n.jpg where n is the number of the slide. They will be displayed in alphabetical order according to filename. social | Contains the thumbnail used when sharing a link on social media (i.e. Facebook) | Replace the image keeping the same filename timetables | Contains the prayer times in comma delimited CSV format | See below for more information

6. Upload files

Once you're done with the above steps then all you need to do is upload the following files and folders to your web hosting server:

• /assets
• /css
• /js
• config.json
• index.html
• manifest.json
• service-worker.js

Timetables

The timetables should go into the assets/timetables folder and should meet the following requirements:

1. Should be in a comma delimited CSV format.
2. Should contain all the times for the year.
3. Should have a filename of the year itself i.e. 2017.csv.
4. Should not contain a header row i.e. Month, Date, Fajr Start etc.
5. Should be in 12 hour format i.e. 2.36.
6. Should contain rows of prayer times in the following order:

Month, Date, Fajr Start Time, Fajr Jamaah Time, Sunrise Time, Dhuhr Start Time, Dhuhr Jamaah Time, Asr Start Time (1st Mihtl), Asr Start Time (2nd Mithl), Asr Jamaah Time, Maghrib Start Time, Maghrib Jamaah Time, Isha Start Time, Isha Jamaah Time

Example:

2,9,5.45,6.15,7.22,12.20,12.45,2.38,3.16,3.45,5.08,5.13,6.39,7.15

Developers

As mentioned above this app has been developed using preact/webpack. Follow these steps to get started:

1. Install yarn globally: npm install -g yarn
2. Install dependencies: yarn
3. Run the dev server http://localhost:8080: yarn dev
4. To make a build run: yarn build
5. To test run: yarn test

Contributing

1. Fork it!
2. Create your feature/hotfix branch: git checkout -b feature/my-super-feature
3. Commit your changes: git commit -m "Added some feature"
4. Push to the branch: git push origin feature/my-super-feature
5. Submit a pull request

License

MIT License