Aplikasi Jam Digital Masjid Gratis Apr 2026

// Render jadwal sholat di grid, highlight selanjutnya function renderPrayerTimes(now) if (!prayerGrid) return; prayerGrid.innerHTML = ""; let nowMinutes = now.getHours() * 60 + now.getMinutes(); let nextIdx = -1; let smallestDiff = Infinity; // menentukan sholat berikutnya for (let i = 0; i < prayerNamesOrder.length; i++) const nama = prayerNamesOrder[i]; let waktuStr = prayerSchedule[nama]; if (!waktuStr) continue; let [jam, menit] = waktuStr.split(":").map(Number); let totalMenit = jam * 60 + menit; let diff = totalMenit - nowMinutes; if (diff < 0) diff += 24*60; if (diff < smallestDiff) smallestDiff = diff; nextIdx = i; for (let i = 0; i < prayerNamesOrder.length; i++) "--:--"; const isNext = (i === nextIdx); const card = document.createElement('div'); card.className = 'prayer-card'; if (isNext) card.classList.add('next-prayer-highlight'); card.innerHTML = ` <div class="prayer-name">$nama</div> <div class="prayer-time">$waktu</div> $isNext ? '<div class="next-label">✨ BERIKUTNYA ✨</div>' : '' `; prayerGrid.appendChild(card); nextPrayerIndex = nextIdx;

function updateAzanMessageDefault() if (!azanMsgSpan.innerText.includes("AZAN BERKUMANDANG")) azanMsgSpan.innerHTML = "🔔 Menunggu waktu salat berikutnya"; azanMsgSpan.classList.remove('azan-active');

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

// 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 = Imsak: timings.Imsak ; // 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; aplikasi jam digital masjid gratis

/* jadwal sholat grid */ .prayer-times margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; background: rgba(0, 0, 0, 0.5); border-radius: 48px; padding: 18px 12px;

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

.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; // Render jadwal sholat di grid, highlight selanjutnya

.prayer-time font-size: 1.6rem; font-family: monospace; font-weight: 700; color: #f0f3f5; margin-top: 6px;

.footer-note text-align: center; font-size: 0.7rem; color: #bbbb88; margin-top: 20px;

// Fungsi untuk memutar suara azan (menggunakan oscillator sederhana, mirip nada panjang) function playAzanSound() // Hentikan audio sebelumnya jika ada if (currentAudio) currentAudio.pause(); currentAudio = null; // Menggunakan AudioContext (web audio) untuk suara azan sederhana try window.webkitAudioContext; const audioCtx = new AudioContextClass(); currentAudio = audioCtx; let startTime = audioCtx.currentTime; // nada azan sederhana: rangkaian frekuensi dan durasi (simulasi panggilan) const notes = [ freq: 440, dur: 0.8 , // A freq: 494, dur: 0.8 , // B freq: 523, dur: 1.0 , // C freq: 587, dur: 0.9 , // D freq: 523, dur: 0.8 , freq: 440, dur: 1.2 , freq: 659, dur: 1.0 , // E freq: 587, dur: 1.2 , freq: 523, dur: 1.5 ]; let timeCursor = startTime; for (let note of notes) const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); osc.frequency.value = note.freq; gain.gain.value = 0.35; osc.start(timeCursor); gain.gain.exponentialRampToValueAtTime(0.0001, timeCursor + note.dur); osc.stop(timeCursor + note.dur); timeCursor += note.dur; // tambah nafas panjang const finalOsc = audioCtx.createOscillator(); const finalGain = audioCtx.createGain(); finalOsc.connect(finalGain); finalGain.connect(audioCtx.destination); finalOsc.frequency.value = 440; finalGain.gain.value = 0.3; finalOsc.start(timeCursor); finalGain.gain.exponentialRampToValueAtTime(0.0001, timeCursor + 2.2); finalOsc.stop(timeCursor + 2.2); // resume jika suspended if (audioCtx.state === 'suspended') audioCtx.resume(); // status selesai cleanup setTimeout(() => if (currentAudio === audioCtx) currentAudio = null; , (timeCursor + 2.5) * 1000); catch(e) console.warn("AudioContext error:", e); azanMsgSpan.innerText = "⚠️ Browser tidak support audio, azan visual tetap aktif."; // Render jadwal sholat di grid

.next-prayer-highlight background: linear-gradient(145deg, #2c6e5c, #1c4a3e); border: 2px solid #f7c56e; box-shadow: 0 0 10px #ffd966aa;

// Update jam digital & tgl & cek azan function updateClockAndDate() const now = new Date(); // jam const jam = now.getHours().toString().padStart(2,'0'); const menit = now.getMinutes().toString().padStart(2,'0'); const detik = now.getSeconds().toString().padStart(2,'0'); jamElement.innerText = `$jam:$menit:$detik`; // tanggal Masehi const options = weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' ; tanggalElement.innerText = now.toLocaleDateString('id-ID', options); // cek azan setiap detik checkAzanSchedule(now); // update highlight tiap menit mungkin atau tiap detik juga gpp renderPrayerTimes(now);

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