Al-Quran Online · Ilmu Alam
Live: quran.ilmualam.com · Publisher: The Ilmu Alam
A free, fast, installable Al-Quran reader for Malay speakers. All 114 surah (6,236 ayat, 30 juzuk) with Arabic text, Rumi transliteration, Bahasa Melayu translation and verse-by-verse audio from five qari. No account, no tracking, works offline.
The site is a single static page generated by a small Python build. GitHub Pages serves it with no server, database or framework.
Features
| Area | What it does |
|---|
| Reader | Opens any surah in a full-screen reader (#surah-36, #surah-36-ayat-12). Views: all / Arabic / Rumi / Malay. Adjustable Arabic size. Bookmarks, copy, share, and resume where you left off. |
| Audio | Verse-by-verse murottal from EveryAyah.com: Alafasy, As-Sudais, Al-Husary, Abdul Basit, Al-Ghamadi. Auto-advance and lock-screen controls (Media Session). |
| Surah list | All 114 surah pre-rendered in the HTML, so it's crawlable without JavaScript. Instant search by name, number or meaning, plus filters (popular, Juz 30, Makkiyyah, Madaniyyah). Each card links to the full article on ilmualam.com. |
| Tools | Jadual Khatam (daily pages/surah:ayat, juz-aligned, .ics export, progress ticks), Jadual Hafazan (any juz, popular surah or whole Quran, by ayat or page, rest days), Tasbih Digital (33·33·33·1 sequence, vibration, wake lock, saved counts), Cari Ayat (search 6,236 Malay translations or 2:255), Senarai 30 Juzuk (juz, sajdah, manzil). Hub: /alat/. |
| Ramadan | Waktu Berbuka Puasa + 15 state pages: 30-day imsakiyah for all 60 JAKIM zones, live countdown to imsak/berbuka, fasting tracker, .ics alarms (berbuka, imsak), niat & doa, Lailatul Qadar nights. Expected dates (MABIMS) until JAKIM's takwim is synced, then official dates and times automatically (tools/ramadan.py). |
| Learning | Cara Solat (step-by-step player for all 5 fardu, bacaan with sources, qada calculator), Belajar Iqra' 1–6 (unlimited generated drills per level, hidden rumi, device Arabic voice), Belajar Mengaji (29 huruf: makhraj, forms, harakat; 4-mode quiz; progress checklist). Content: tools/ibadah2.py, pages: tools/pages4.py. |
| Masjid finder | Cari Masjid & Surau + one page per JAKIM zone (60): nearest masjid/surau from the visitor's location (live Overpass query, 3 → 10 → 25 km, with zone detection), the zone's places grouped by town with address, OSM map and directions links, today's official JAKIM times, a 7-day table and links to the prayer-times tool. JSON-LD: CollectionPage, Place (the zone), ItemList of Mosque/PlaceOfWorship, BreadcrumbList, FAQPage. A zone page stays noindex until its OSM data is synced (tools/masjid.py, tools/pages5.py). |
| Kalendar Hijrah | Kalendar Hijrah: today's Hijri date from JAKIM's own takwim (the Hijri column of the synced timetables), the day turning at Maghrib for the chosen zone, a month grid marking sunat fasting (Isnin/Khamis, Ayyamul Bidh, Arafah, Tasu'a/Asyura, 6 Syawal), Ramadan and days fasting is forbidden, a two-way converter, upcoming Islamic events with countdown and .ics, Hijri age and zakat haul. Outside the synced range it falls back to the tabular calendar, labelled an estimate (tools/hijri.py, mirrored in alat.js). |
| Tahlil Ringkas | Tahlil Ringkas: 29 readings in order (Quranic text straight from data-surah/), the deceased's name in the dedication, the doa for the deceased (HR Muslim 963) in four pronoun forms (lelaki/perempuan/ramai), per-ayat audio, zikir counters, a shareable personalised link, a printable booklet with a named cover, a full-screen majlis mode for TV/projector, and the next haul date in the Hijri calendar (tools/tahlil.py, tools/pages6.py). |
| Solat Sunat | Solat Sunat hub + 8 pages (taubat, dhuha, hajat, jenazah, witir, istikharah, tahajjud, tarawih): the /belajar-solat/ step player with each prayer's niat and surah, doa with sources (weak narrations labelled), time cards from the JAKIM timetable for the chosen zone (dhuha window, last third of the night, witir window; hub: forbidden times), jenazah niat/doa for lelaki/perempuan/ramai, the visitor's matter inserted into the istikharah/hajat doa meaning, a tarawih rakaat counter, rawatib table. HowTo + FAQ JSON-LD (tools/sunat.py, tools/pages7.py). |
| Jamak & Qasar | Solat Jamak & Qasar: musafir calculator over 223 towns (straight-line distance vs 2 marhalah ≈81 km with a Google Maps road link, the 4-full-day stay rule, GPS origin, shareable trip link), today's jamak taqdim/takhir windows for the destination's JAKIM zone, the step player for 7 combinations (two prayers back to back, each with its own niat), syarat, dalil and FAQ (tools/pages8.py). |
| Asmaul Husna | Asmaul Husna: 99 names (Arabic, rumi, Malay meaning) with a hand-picked ayah for 74 of them, each checked by the build against the Quran text so a wrong reference fails the build; name of the day, search, memorised ticks, flashcards with the device's Arabic voice, 10-question quiz, printable poster (tools/asmaul.py). |
| Zakat Fitrah | Zakat Fitrah: 1447H/2026 rates for 15 states (sources shown), household calculator, rice weight (gantang Baghdad 2.6 kg), and the coming Ramadan's payment timeline from the Hijri calendar (harus, wajib, afdal, makruh, haram). Update ZF/ZF_YEAR in tools/pages9.py when the new rates are announced (usually Jan–Feb). |
| Zakat Pendapatan | Zakat Pendapatan: gross and net (deduction) methods side by side, state nisab (or 85 g × gold price), deduction presets (basic, LZS had kifayah), monthly salary deduction, and the income-tax rebate (ITA s.6A(3), YA2025 bands) showing what the zakat really costs. Inputs stay on the device. Update NISAB/PRESET/BANDS in tools/pages10.py when the councils or LHDN publish new figures. |
| Zakat Simpanan, Emas, Perniagaan | Zakat Simpanan (bank, ASB, Tabung Haji, FD on the lowest balance + dividends, Hijri 2.5% or Gregorian 2.577%, haul date from the Hijri calendar), Zakat Emas (kept and worn gold, purity, uruf of 15 states) and Zakat Perniagaan (working-capital method, Muslim ownership) in tools/pages11.py; uruf in URUF. |
| Kisah 25 Nabi | Kisah 25 Nabi hub + one page per prophet (25): facts, the story point by point with the ayat it rests on, key ayat in full and every ayah that names the prophet (grouped by surah, name highlighted). The ayat are found in data-surah/ by tools/nabi.py (spelling-insensitive match on the Arabic name; Hud, Soleh, Yahya, Ilyas and Muhammad are listed by hand because their names are also ordinary words, then checked against the text); EXPECT pins each count (Musa 136, Ibrahim 69, Nuh 43…) so a data or matcher change fails the build. Hub: list, mention ranking, Ulul Azmi, Al-An'am 83–86 and surah named after prophets. JSON-LD: CollectionPage + ItemList, Person per prophet, FAQPage. Pages in tools/pages13.py; the full article with timeline and quiz stays on www.ilmualam.com and is linked, not duplicated. |
| Faraid | Kalkulator Faraid: Shafi'i inheritance engine in tools/faraid.py (23 heirs, hajb with reasons, 'aul, 'umariyyatain, musytarakah, takmilah, asabah ma'al ghair, Baitulmal or radd; datuk with siblings is reported, not computed), net estate after debts, funeral costs and the 1/3 bequest cap. python3 tools/faraid.py runs textbook cases; the browser test compares alat.js with Python on 400 random cases (tools/zk_cases.py). |
| Ibadah pages | Waktu Solat (64 towns, countdown, month table, qibla; official JAKIM timetable when synced, otherwise JAKIM-parameter calculation clearly labelled), Doa Harian (hadith doa with references, 36 Quranic doa highlighted inside the ayah, ayat amalan), Zikir Pagi & Petang (pagi-petang, selepas solat, sebelum tidur, per-item daily counters), Belajar Tajwid (nun/mim analyser, Juz 30 examples with audio, 10-question quiz). |
| Site pages | Tentang Kami, Hubungi Kami, Terma Penggunaan, Dasar Privasi, 404.html. Five-column footer on every page. |
| Header & footer | Sticky header: primary links on desktop, a hamburger that opens the full grouped menu (HTML popover, so it works without JS), and site search (Ctrl+K) over every page and all 114 surah (assets/data/cari.json, generated by the build, fetched on first open). The footer matches the www.ilmualam.com footer: brand, popular tools, categories, a follow.it email form (CSP form-action https://api.follow.it) and a bottom bar. |
| PWA | Installable, with icons, shortcuts and a maskable icon. A service worker caches the page and every surah opened, so reading works offline. Only audio needs a connection. |
| Performance | Inline critical CSS, one deferred script, self-hosted Amiri font (Arabic subset), chunked rendering. Lighthouse mobile: 97–100 performance, 100 accessibility, best practices and SEO. CLS ≈ 0. |
| SEO / AEO | JSON-LD graph (Organization, WebSite, WebPage + speakable, BreadcrumbList, WebApplication, ItemList of 114 surah, FAQPage). Also Open Graph/Twitter cards, sitemap.xml, AI-crawler-friendly robots.txt and llms.txt. |
| Privacy & ads | dasar-privasi.html (privacy, PDPA 2010) and terma-penggunaan/ (terms, disclaimer). AdSense support is built in but off until configured, and ads are never shown inside the reader. |
| Sharing | WhatsApp, Telegram, Facebook, X, copy link and native share. These are plain links with no third-party scripts. |
How it works
tools/ (source) build.py site root (generated, deployed)
───────────────────── ───────── ───────────────────────────────
page.html, layout.html ─┐ ┌─> index.html, */index.html, 404.html
pages.py, plans.py ─┤ ├─> dasar-privasi.html, assets/og/*.jpg
header.html, footer.html ├─> templates + data + CSS ─────┼─> sw.js, manifest.webmanifest
home.css (+ quran.min.css)│ -> HTML, JSON-LD, SW, maps ├─> sitemap.xml, robots.txt, llms.txt
surahs.py, data-surah/* ─┤ ├─> assets/js/surah-cta.js
qmeta.json, og.py ─┘ └─> assets/data/terjemahan-ms.json
Runtime has no dependencies: assets/js/quran-home.js (vanilla JS, ~16 KB) adds search, the reader, audio, sharing and PWA install on top of the pre-rendered HTML. Tool pages also load assets/js/alat.js (~17 KB).
Every tool page is complete without JavaScript: tools/plans.py renders the default khatam/hafazan schedule into the HTML at build time, and alat.js mirrors the same maths line for line, so the script redraws byte-identical HTML (no flash, CLS 0). tools/test-alat.mjs checks that equality plus tasbih, search and reader links in a real browser.
Page, juz, sajdah and manzil boundaries (Mushaf Madinah, 604 pages) are in tools/qmeta.json, converted from Tanzil data via quran-meta (MIT).
Project structure
quran/
├── index.html # GENERATED: landing page + reader
├── dasar-privasi.html # GENERATED: privacy policy, terms, disclaimer
├── sw.js # GENERATED: service worker (version = content hash)
├── manifest.webmanifest # GENERATED: PWA manifest
├── sitemap.xml · robots.txt · llms.txt # GENERATED
├── favicon.ico · CNAME
├── data-surah/surah-1…114.json # Arabic, Rumi, Malay translation per ayat
├── assets/
│ ├── js/quran-home.js # landing page + reader runtime
│ ├── js/surah-cta.js # GENERATED: "read & listen" box for ilmualam.com articles
│ ├── css/quran.min.css # reader component styles (inlined by the build)
│ ├── fonts/ # Amiri Arabic subset (SIL OFL 1.1)
│ └── icons/ # PWA icons, favicon, logo
├── tools/ # SOURCE: edit these, then run the build
│ ├── build.py # the build (config at the top: dates, AdSense)
│ ├── cssbuild.py # merges + minifies CSS
│ ├── surahs.py # surah names, meanings, juz, article URLs
│ ├── page.html · privacy.html · header.html · footer.html
│ ├── home.css · sw.js · surah-cta.js
└── engine/ · micro/ · assets/khatam/ · other assets/js|css files
# widgets embedded in ilmualam.com posts; see below
Development
Requires only Python 3.8+. No packages, no Node.
git clone https://github.com/ilmualam/quran.git && cd quran
python3 tools/build.py # regenerate every generated file
python3 -m http.server 8765 # open http://localhost:8765
node tools/test-alat.mjs # browser tests (needs Playwright; PLAYWRIGHT_PATH=<node_modules dir> if not global)
The build prints a one-line report: page size, total ayat (it must be 6,236), whether ads are on, and any surah still missing an article link.
Rule: never hand-edit or merge-resolve the generated files (index.html, sw.js, etc.). Change the source in tools/ and rebuild. If two branches conflict in a generated file, take either side and run the build again.
Common tasks
| Task | Where |
|---|
| Change home text, sections or FAQ | tools/page.html, FAQ list in tools/build.py |
| Change a tool / info page (text, FAQ, schema) | tools/pages.py (privacy body: tools/privacy.html) |
| Change schedule maths | tools/plans.py and assets/js/alat.js, then run the browser test |
| Tool page styles | tools/tools.css (inlined only on non-home pages) |
| Doa, zikir, tajwid content | tools/ibadah.py (Quranic text is always read from data-surah/ by reference) and tools/pages2.py |
| Prayer-time maths / towns / zones | tools/solat.py and the waktu-solat block in assets/js/alat.js |
| Official JAKIM timetables | .github/workflows/solat-data.yml runs tools/solat_fetch.py monthly (or Actions → Prayer times (JAKIM) → Run workflow), writes assets/data/solat/<ZONE>-<YEAR>.json, rebuilds and commits |
| "Hari ini" freshness | .github/workflows/daily-refresh.yml rebuilds the date-dependent pages at 00:07 MYT daily (no data fetch) |
| Masjid & surau lists | .github/workflows/masjid-data.yml runs tools/masjid_fetch.py monthly (or Actions → Masjid & surau (OpenStreetMap) → Run workflow): one Overpass query per state, each place goes to the zone of its nearest town anchor (ZONEINFO in tools/masjid.py), writes assets/data/masjid/<ZONE>.json, rebuilds and commits |
| Masjid zone towns / page text | ZONEINFO in tools/masjid.py (zone list = ZONES in tools/solat.py, same 60 zones as bukitbesi/waktu-solat), page text in tools/pages5.py, live search in the masjid block of assets/js/alat.js |
| Social cards | tools/og.py redraws assets/og/<page>.jpg when a page's ogtitle/desc changes |
| Change header / footer links | tools/header.html, |
Enabling AdSense
Set your publisher ID and up to three ad-unit slot IDs at the top of tools/build.py, then rebuild:
ADS_CLIENT = "ca-pub-XXXXXXXXXXXXXXXX"
ADS_SLOTS = ["1234567890", "2345678901", "3456789012"]
- Slots sit after the surah list, after "Konteks Malaysia" and after the FAQ. Each reserves its height, so ads cause no layout shift.
- The AdSense script loads only after the visitor's first scroll or tap (or 4 seconds), so it never delays LCP.
- The Content Security Policy is relaxed only while ads are enabled.
- Turn on Google's consent message (AdSense → Privacy & messaging) for EEA/UK visitors.
Article button on ilmualam.com (Blogger)
assets/js/surah-cta.js adds a "🎧 Baca & Dengar Surah …" box to each of the 114 surah articles on www.ilmualam.com, linking to that surah in this reader. The build generates it from ARTICLES, so it stays in sync. It runs only on matching article URLs and inserts the box before the first subheading, so it doesn't shift what the reader is already looking at.
Install it once in Blogger (Layout → Add a Gadget → HTML/JavaScript, or just before </body> in the theme):
<script defer src="https://quran.ilmualam.com/assets/js/surah-cta.js"></script>
Deployment
GitHub Pages serves the main branch root as-is: .nojekyll turns Jekyll off because the Python build already produces the final HTML, sitemap, canonical tags and JSON-LD (Jekyll would only add build time and ignore files it doesn't understand); CNAME points it at quran.ilmualam.com. Pushing to main deploys within about a minute. Each build changes the service worker's version hash, so returning visitors get the new version on their next visit.
Legacy widgets (do not delete blindly)
engine/, micro/, assets/khatam/ and the older files in assets/js/ and assets/css/ (quran-engine*.js, quran.v2*.css, doa-kerja-js, sitemap.js, …) are not used by quran.ilmualam.com. Older posts on www.ilmualam.com may still load them from this domain, though. Before removing any of them, search the Blogger theme and posts for the filename.
Data sources & credits
- Arabic text & Malay translation: Uthmani text and the Abdullah Muhammad Basmeih translation, as published by AlQuran Cloud, stored in
data-surah/.
- Audio: EveryAyah.com, streamed directly. Credit to each qari.
- Masjid & surau: © OpenStreetMap contributors, Open Database License (ODbL) 1.0, via the Overpass API.
assets/data/masjid/ is a derived database and stays under the ODbL; every page that shows it carries the credit.
- Prayer times: JAKIM e-solat (www.e-solat.gov.my).
- Font: Amiri by Khaled Hosny, SIL Open Font License 1.1 (
assets/fonts/AMIRI-OFL-LICENSE.txt).
Always verify against a printed mushaf approved by the religious authorities. Report text errors via ilmualam.com/p/contact.html.
License
Source code: MIT, except files that carry their own copyright header. Quran text, translation, audio and font remain under their respective owners' terms.
© 2025–2026 The Ilmu Alam · Ilmu Tanpa Sempadan, Amal Tanpa Batasan, Akhirat Jua Pengakhiran.
