klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengingat Shalat & Dzikir Harian</title>
<style>
:root {
--bg: #ECEFF1;
--card: #FFFFFF;
--text: #222;
--border: #E0E0E0;
--accent: linear-gradient(90deg, #2196F3, #00BCD4);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--card: #1E1E1E;
--text: #EAEAEA;
--border: #333;
--accent: linear-gradient(90deg, #00BCD4, #2196F3);
}
}
body {
font-family: sans-serif;
text-align: center;
background: linear-gradient(to bottom, #b2f7ef, #fff);
color: #222;
padding: 20px;
overflow-x: hidden;
}
header {
width: 100%;
background: var(--accent);
color: white;
text-align: center;
padding: 15px 0;
font-size: 1.3em;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card {
background: white;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
margin: 10px auto;
padding: 15px;
width: 90%;
max-width: 400px;
}
button {
background: #2e86de;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
margin-top: 10px;
}
button:active {
background: #145ea8;
}
.count {
font-size: 24px;
margin: 10px 0;
}
/* === Kotak bawah layar === */
#infoBox {
position: fixed;
right: 10px;
bottom: 10px;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
padding: 10px 15px;
font-size: 13px;
text-align: left;
line-height: 1.4em;
}
#countdown {
font-weight: bold;
color: #2e86de;
}
</style>
</head>
<body>
<header>🕌 Waktu Shalat & Dzikir</header>
<div id="shalatTimes" class="card">Memuat waktu shalat...</div>
<div class="card">
<h3>📿 Dzikir Harian</h3>
<p>Subhanallah, Alhamdulillah, Allahu Akbar</p>
<div class="count" id="dzikirCount">0</div>
<button onclick="tambahDzikir()">+1</button>
<button onclick="resetDzikir()">Reset</button>
</div>
<!-- Kotak bawah layar -->
<div id="infoBox">
<div id="hariTanggal"></div>
<div id="jamSekarang"></div>
<div>⏳ Shalat berikutnya:<br><span id="countdown">Menghitung...</span></div>
</div>
<script>
// ==== Waktu Shalat (gunakan kota Sukabumi default) ====
let jadwal = {};
async function getWaktuShalat() {
const url = "https://api.aladhan.com/v1/timingsByCity?city=Sukabumi&country=Indonesia&method=2";
try {
const res = await fetch(url);
const data = await res.json();
const t = data.data.timings;
jadwal = t;
document.getElementById("shalatTimes").innerHTML = `
<h3>🕒 Waktu Shalat - Sukabumi</h3>
Subuh: ${t.Fajr}<br>
Dzuhur: ${t.Dhuhr}<br>
Ashar: ${t.Asr}<br>
Maghrib: ${t.Maghrib}<br>
Isya: ${t.Isha}
`;
hitungMundurShalat();
} catch (e) {
document.getElementById("shalatTimes").innerHTML = "Gagal memuat waktu shalat.";
}
}
getWaktuShalat();
// ==== Dzikir Counter ====
let dzikir = localStorage.getItem("dzikirCount") || 0;
document.getElementById("dzikirCount").innerText = dzikir;
function tambahDzikir() {
dzikir++;
document.getElementById("dzikirCount").innerText = dzikir;
localStorage.setItem("dzikirCount", dzikir);
}
function resetDzikir() {
dzikir = 0;
document.getElementById("dzikirCount").innerText = dzikir;
localStorage.setItem("dzikirCount", dzikir);
}
// ==== Jam & Tanggal ====
function updateWaktu() {
const now = new Date();
const hari = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"][now.getDay()];
const tgl = now.getDate().toString().padStart(2,'0');
const bln = (now.getMonth()+1).toString().padStart(2,'0');
const thn = now.getFullYear();
const jam = now.toLocaleTimeString('id-ID');
document.getElementById("hariTanggal").innerText = `${hari}, ${tgl}/${bln}/${thn}`;
document.getElementById("jamSekarang").innerText = `🕰️ ${jam}`;
}
setInterval(updateWaktu, 1000);
updateWaktu();
// ==== Timer Mundur ke Waktu Shalat Selanjutnya ====
function hitungMundurShalat() {
if (!jadwal.Fajr) return;
const urut = ["Fajr","Dhuhr","Asr","Maghrib","Isha"];
const now = new Date();
let target = null;
for (let i=0; i<urut.length; i++) {
const [h,m] = jadwal[urut[i]].split(":");
const waktuShalat = new Date();
waktuShalat.setHours(parseInt(h));
waktuShalat.setMinutes(parseInt(m));
waktuShalat.setSeconds(0);
if (now < waktuShalat) {
target = waktuShalat;
break;
}
}
// Jika sudah semua, target = shalat subuh besok
if (!target) {
const [h,m] = jadwal["Fajr"].split(":");
target = new Date();
target.setDate(target.getDate()+1);
target.setHours(parseInt(h));
target.setMinutes(parseInt(m));
target.setSeconds(0);
}
const interval = setInterval(() => {
const sisa = (target - new Date()) / 1000;
if (sisa <= 0) {
clearInterval(interval);
document.getElementById("countdown").innerText = "Sudah masuk waktu shalat!";
getWaktuShalat();
return;
}
const jam = Math.floor(sisa / 3600);
const mnt = Math.floor((sisa % 3600) / 60);
const dtk = Math.floor(sisa % 60);
document.getElementById("countdown").innerText =
`${jam.toString().padStart(2,'0')}:${mnt.toString().padStart(2,'0')}:${dtk.toString().padStart(2,'0')}`;
}, 1000);
}
</script>
</body>
</html>
Komentar untuk Kode script jadwal waktu Shalat dan Dzikir