The Latest

Aplikasi Jam Digital Masjid Gratis – Quick & Quick

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

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

// 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); aplikasi jam digital masjid gratis

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Jam Digital Masjid | Waktu Salat & Pengingat Azan</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* hindari seleksi teks pada jam */ body background: linear-gradient(145deg, #0a2f2a 0%, #031010 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', 'Poppins', 'Tahoma', system-ui, -apple-system, 'Roboto', sans-serif; padding: 20px;

// 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 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()); // Update data dari API (Aladhan) berdasarkan kota

initApp(); </script> </body> </html>

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

.alert-badge background: #2e2420; color: #fbc490; padding: 5px 16px; border-radius: 28px; const response = await fetch(url)

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

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

@keyframes pulse 0% opacity: 0.7; text-shadow: 0 0 0px gold; 100% opacity: 1; text-shadow: 0 0 6px #ffaa33;

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

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

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

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Jam Digital Masjid | Waktu Salat & Pengingat Azan</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* hindari seleksi teks pada jam */ body background: linear-gradient(145deg, #0a2f2a 0%, #031010 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', 'Poppins', 'Tahoma', system-ui, -apple-system, 'Roboto', sans-serif; padding: 20px;

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

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

.alert-badge background: #2e2420; color: #fbc490; padding: 5px 16px; border-radius: 28px;

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

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

@keyframes pulse 0% opacity: 0.7; text-shadow: 0 0 0px gold; 100% opacity: 1; text-shadow: 0 0 6px #ffaa33;