.alert-badge background: #2e2420; color: #fbc490; padding: 5px 16px; border-radius: 28px;
Berikut adalah kode untuk gratis, lengkap dengan waktu salat otomatis, tampilan LED, dan pengingat azan (simulasi). Bisa langsung dijalankan di browser.
// Flag azan sudah dipanggil untuk waktu yang sama let lastAzanTriggerHourMin = "";
.next-prayer-highlight background: linear-gradient(145deg, #2c6e5c, #1c4a3e); border: 2px solid #f7c56e; box-shadow: 0 0 10px #ffd966aa; aplikasi jam digital masjid gratis
.time-digits font-family: 'Courier New', 'Fira Mono', 'JetBrains Mono', monospace; font-size: 5rem; font-weight: bold; letter-spacing: 8px; color: #2ef7c4; text-shadow: 0 0 5px #00ffc3, 0 0 15px #00a37a; background: #010b09; display: inline-block; padding: 0.2rem 1rem; border-radius: 2rem; margin-bottom: 12px;
// stop suara function stopAzanSound() if (currentAudio) currentAudio.close().catch(e=>console.log); currentAudio = null; azanMsgSpan.innerText = "⏹️ Suara dihentikan"; setTimeout(() => if (azanMsgSpan.innerText === "⏹️ Suara dihentikan") // refresh nanti update otomatis , 1500);
.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; .alert-badge background: #2e2420
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());
initApp(); </script> </body> </html>
/* info lokasi & hijriah */ .location-area display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-top: 18px; gap: 8px; background: #0c2722aa; border-radius: 50px; padding: 10px 18px; padding: 5px 16px
<div class="azan-status" id="azanStatusArea"> <span class="alert-badge">🔊 Status Azan: </span> <span id="azanMessage" class="alert-badge">Menunggu waktu salat</span> </div> <div style="display: flex; justify-content: center; gap: 15px;"> <button id="testAzanBtn">🔔 Uji Coba Azan (Demo)</button> <button id="resetAzanBtn">🔇 Hentikan Suara</button> </div> <div class="footer-note"> ⏰ Waktu salat berdasarkan kota Jakarta (otomatis deteksi lokasi atau default) • Azan berupa notifikasi suara & visual </div> </div> </div>
.prayer-card background: linear-gradient(135deg, #1f3b35, #102622); border-radius: 32px; text-align: center; padding: 12px 5px; transition: all 0.2s ease; border: 1px solid #2f8b72; box-shadow: 0 4px 6px #00000030;
// inisialisasi + update setiap detik let intervalId; function initApp() getLocationAndUpdate(); // coba ambil data jadwal // update jam tiap 1 detik intervalId = setInterval(() => updateClockAndDate(); , 1000); updateClockAndDate(); testBtn.addEventListener('click', () => stopAzanSound(); triggerAzan("Demo Azan"); ); resetBtn.addEventListener('click', () => stopAzanSound(); azanMsgSpan.classList.remove('azan-active'); azanMsgSpan.innerText = "🔇 Suara dihentikan manual"; setTimeout(() => updateAzanMessageDefault(), 2000); );