<!-- jadwal sholat otomatis --> <div class="prayer-times" id="prayerGrid"> <!-- diisi js --> </div>
.azan-active background: #b3413a; color: #fff1b5; animation: pulse 1s infinite;
.date-info font-size: 1.6rem; font-weight: 500; color: #f3e5ab; background: #1a2f2b80; display: inline-block; padding: 6px 20px; border-radius: 40px; backdrop-filter: blur(2px); margin-top: 8px; aplikasi jam digital masjid gratis
// 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();
function useOfflineSchedule() // Jadwal offline standar masjid umum (kota Jakarta rata2) prayerSchedule = Subuh: "04:45", Dzuhur: "12:05", Ashar: "15:25", Maghrib: "18:02", Isya: "19:18" ; // Hijriah offline sederhana (coba generate dari tanggal masehi) const today = new Date(); hijriElement.innerText = `📅 Estimasi Hijriah · $today.toLocaleDateString()`; document.getElementById('lokasiMasjid').innerHTML = `🕌 Masjid (Mode Offline)`; renderPrayerTimes(new Date()); !-- jadwal sholat otomatis -->
.footer-note text-align: center; font-size: 0.7rem; color: #bbbb88; margin-top: 20px;
// 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; div class="prayer-times" id="prayerGrid">
/* status azan & alarm */ .azan-status margin: 20px 12px 8px; text-align: center; background: #00000070; border-radius: 60px; padding: 10px; font-size: 1rem; font-weight: bold; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;
.prayer-name font-size: 1.1rem; font-weight: bold; color: #ffd966; letter-spacing: 1px;
.hijri-date font-size: 0.95rem; background: #2c5a50; padding: 4px 12px; border-radius: 30px; color: #f9eec1;
// Flag azan sudah dipanggil untuk waktu yang sama let lastAzanTriggerHourMin = "";
