<!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;
<script> // ======================== FITUR JAM DIGITAL MASJID GRATIS ======================== // 1. Jam realtime dengan format HH:MM:SS // 2. Jadwal sholat otomatis (API atau fallback offline) + perhitungan sederhana // Menggunakan API gratis Aladhan untuk akurasi (jika online) + fallback manual. // 3. Deteksi waktu sholat berikutnya + highlight // 4. Azan suara (menggunakan Web Audio / synth sederhana, tanpa file eksternal) // 5. Tanggal Hijriah dari API atau fallback lokal. // 6. Mode responsif, tampilan LED dan nuansa masjid. // ------------------------------------------------------------------------------ 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; Tanggal Hijriah dari API atau fallback lokal
.footer-note text-align: center; font-size: 0.7rem; color: #bbbb88; margin-top: 20px; padding: 18px 12px