La Nueva Escuela

Aplikasi Jam Digital Masjid Gratis Apr 2026

button background: #3c6e5f; border: none; color: white; padding: 8px 15px; border-radius: 32px; font-weight: bold; margin-top: 10px; cursor: pointer; transition: 0.2s; font-family: inherit;

// 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 nama = prayerNamesOrder[i]; const waktu = prayerSchedule[nama] nextPrayerIndex = nextIdx;

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

.alert-badge background: #2e2420; color: #fbc490; padding: 5px 16px; border-radius: 28px; aplikasi jam digital masjid gratis

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

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

.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; button background: #3c6e5f

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

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

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

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

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