Aplikasi Jam Digital Masjid Gratis – Trending

// 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); );

/* Container utama masjid style */ .masjid-container max-width: 750px; width: 100%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); border-radius: 80px 80px 60px 60px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.1); padding: 20px 20px 35px; border: 1px solid rgba(218, 165, 32, 0.4);

/* area jam digital LED */ .jam-led background: #0a0f0e; border-radius: 48px; padding: 25px 15px; text-align: center; box-shadow: inset 0 0 12px #00b89433, 0 10px 20px rgba(0,0,0,0.3); border: 1px solid #2e7d64; aplikasi jam digital masjid gratis

let prayerNamesOrder = ["Subuh", "Dzuhur", "Ashar", "Maghrib", "Isya"]; let nextPrayerIndex = -1; let currentAudio = null; // untuk menghentikan azan

// Data jadwal sholat let prayerSchedule = Imsak: "04:30", Subuh: "04:45", Dzuhur: "12:00", Ashar: "15:20", Maghrib: "18:00", Isya: "19:15" ; // fallback sementara // inisialisasi + update setiap detik let intervalId;

/* panel utama */ .digital-masjid background: #000000aa; border-radius: 50px; padding: 20px; backdrop-filter: blur(4px);

.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; function initApp() getLocationAndUpdate()

// Trigger azan (visual + suara) function triggerAzan(prayerName) if (!prayerName) return; azanMsgSpan.innerHTML = `🕌 WAKTU $prayerName.toUpperCase() · AZAN BERKUMANDANG 🕌`; azanMsgSpan.classList.add('azan-active'); playAzanSound(); // visual berkedip 8 detik lalu normal (tapi tetap pesan) setTimeout(() => if (azanMsgSpan.classList.contains('azan-active')) azanMsgSpan.classList.remove('azan-active'); azanMsgSpan.innerHTML = `✅ Azan $prayerName telah dikumandangkan`; setTimeout(() => if(azanMsgSpan.innerText.includes("telah dikumandangkan")) updateAzanMessageDefault(); , 4000); , 8000);

.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;

.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;

.azan-active background: #b3413a; color: #fff1b5; animation: pulse 1s infinite;