// Update data dari API (Aladhan) berdasarkan kota (default Jakarta, bisa diganti dengan geolocation optional) async function fetchPrayerTimes(city = "Jakarta", country = "ID") try const today = new Date(); const dateStr = `$today.getDate()-$today.getMonth()+1-$today.getFullYear()`; // menggunakan API Aladhan const url = `https://api.aladhan.com/v1/timingsByCity/$dateStr?city=$encodeURIComponent(city)&country=$encodeURIComponent(country)&method=2`; const response = await fetch(url); const data = await response.json(); if (data.code === 200 && data.data && data.data.timings) const timings = data.data.timings; prayerSchedule = "04:30", Subuh: timings.Fajr ; // juga dapatkan hijriah if (data.data.date && data.data.date.hijri) const hijri = data.data.date.hijri; hijriElement.innerText = `$hijri.day $hijri.month.en $hijri.year H`; else hijriElement.innerText = "📅 Hijriah tersedia"; document.getElementById('lokasiMasjid').innerHTML = `🕌 Masjid $city`; // setelah update schedule, render ulang renderPrayerTimes(new Date()); return true; else throw new Error("Gagal ambil jadwal"); catch (err) console.warn("Gagal mengambil dari API, menggunakan jadwal offline & estimasi", err); // fallback offline: generate jadwal berdasarkan metode sederhana + waktu lokal (simulasi) useOfflineSchedule(); return false;
<script> // ======================== FITUR JAM DIGITAL MASJID GRATIS ======================== // 1. Jam realtime dengan format HH:MM:SS // 2. Jadwal sholat otomatis (API atau fallback offline) + perhitungan sederhana // Menggunakan API gratis Aladhan untuk akurasi (jika online) + fallback manual. // 3. Deteksi waktu sholat berikutnya + highlight // 4. Azan suara (menggunakan Web Audio / synth sederhana, tanpa file eksternal) // 5. Tanggal Hijriah dari API atau fallback lokal. // 6. Mode responsif, tampilan LED dan nuansa masjid. // ------------------------------------------------------------------------------
<!-- jadwal sholat otomatis --> <div class="prayer-times" id="prayerGrid"> <!-- diisi js --> </div> aplikasi jam digital masjid gratis
.next-label font-size: 0.7rem; background: #e6b422; display: inline-block; padding: 2px 10px; border-radius: 50px; margin-top: 5px; color: #1f2c1b; font-weight: bold;
// Flag azan sudah dipanggil untuk waktu yang sama let lastAzanTriggerHourMin = ""; // Update data dari API (Aladhan) berdasarkan kota
/* panel utama */ .digital-masjid background: #000000aa; border-radius: 50px; padding: 20px; backdrop-filter: blur(4px);
// Tambahan geolocation (opsional) untuk lebih akurat function getLocationAndUpdate() if ("geolocation" in navigator) navigator.geolocation.getCurrentPosition(async (position) => const lat = position.coords.latitude; const lon = position.coords.longitude; try const url = `https://api.aladhan.com/v1/timings?latitude=$lat&longitude=$lon&method=2`; const res = await fetch(url); const data = await res.json(); if (data.code === 200 && data.data && data.data.timings) const timings = data.data.timings; prayerSchedule = Subuh: timings.Fajr, Dzuhur: timings.Dhuhr, Ashar: timings.Asr, Maghrib: timings.Maghrib, Isya: timings.Isha ; if(data.data.date.hijri) hijriElement.innerText = `$data.data.date.hijri.day $data.data.date.hijri.month.en $data.data.date.hijri.year H`; document.getElementById('lokasiMasjid').innerHTML = `📍 Masjid (GPS)`; renderPrayerTimes(new Date()); catch(e) console.log("Geo API error"); , () => fetchPrayerTimes(); // fallback jakarta ); else fetchPrayerTimes(); Tanggal Hijriah dari API atau fallback lokal
// Elemen DOM const jamElement = document.getElementById('jamDigital'); const tanggalElement = document.getElementById('tanggalMasehi'); const hijriElement = document.getElementById('hijriDisplay'); const prayerGrid = document.getElementById('prayerGrid'); const azanMsgSpan = document.getElementById('azanMessage'); const testBtn = document.getElementById('testAzanBtn'); const resetBtn = document.getElementById('resetAzanBtn');