Scrip html Waktu Shalat di Blogger

<style>

#sholatApp {

  font-family: 'Segoe UI', sans-serif;

  max-width: 420px;

  margin: auto;

  padding: 20px;

  border-radius: 20px;

  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);

  color: white;

  box-shadow: 0 10px 30px rgba(0,0,0,0.4);

}

#sholatApp h2 {

  text-align: center;

}

.info {

  text-align: center;

  font-size: 14px;

  opacity: 0.8;

}

.prayer {

  display: flex;

  justify-content: space-between;

  padding: 10px;

  margin: 6px 0;

  border-radius: 10px;

  background: rgba(255,255,255,0.05);

}

.active {

  background: rgba(76, 175, 80, 0.85);

  font-weight: bold;

}

#next {

  text-align: center;

  margin-top: 10px;

}

#countdown {

  text-align: center;

  font-size: 28px;

  font-weight: bold;

  color: #ffd54f;

}

</style>

<div id="sholatApp">

  <h2>🕌 Jadwal Sholat</h2>

  <div class="info">Jakarta, Indonesia</div>

  <div class="info" id="tanggal"></div>

  <div id="list"></div>

  <div id="next"></div>

  <div id="countdown"></div>

</div>

<script>

let jadwal = {};

let prayerList = [];

let nextPrayer = {};

// OFFSET KALIBRASI (sudah disesuaikan mendekati Shalatku)

const offset = {

  Fajr: 0,

  Sunrise: 0,

  Dhuhr: 1,

  Asr: 1,

  Maghrib: 1,

  Isha: 1

};

function adjust(waktu, tambah) {

  let [h,m] = waktu.split(":").map(Number);

  let d = new Date();

  d.setHours(h, m + tambah, 0);

  return d;

}

function formatJam(d) {

  return d.getHours().toString().padStart(2,'0') + ":" +

         d.getMinutes().toString().padStart(2,'0');

}

function tambahMenit(date, menit) {

  let d = new Date(date);

  d.setMinutes(d.getMinutes() + menit);

  return d;

}

function renderUI() {

  let html = "";

  prayerList.forEach(p => {

    html += `<div class="prayer" id="row-${p.id}">

      <span>${p.name}</span>

      <span>${p.display}</span>

    </div>`;

  });

  document.getElementById("list").innerHTML = html;

}

function getNextPrayer() {

  let now = new Date();

  for (let p of prayerList) {

    if (now < p.time) return p;

  }

  let t = new Date(prayerList[0].time);

  t.setDate(t.getDate()+1);

  return {...prayerList[0], time:t};

}

function highlight() {

  document.querySelectorAll('.prayer').forEach(e => e.classList.remove('active'));

  document.getElementById("row-"+nextPrayer.id).classList.add("active");

}

function updateCountdown() {

  let now = new Date();

  let diff = nextPrayer.time - now;

  let h = Math.floor(diff/3600000);

  let m = Math.floor((diff%3600000)/60000);

  let s = Math.floor((diff%60000)/1000);

  document.getElementById("countdown").innerHTML =

    `${h}j ${m}m ${s}d`;

  setTimeout(updateCountdown,1000);

}

async function init() {

  let today = new Date();

  let date = today.toISOString().split('T')[0];

  let res = await fetch(`https://api.aladhan.com/v1/timingsByCity/${date}?city=Jakarta&country=Indonesia&method=20`);

  let data = await res.json();

  jadwal = data.data.timings;

  document.getElementById("tanggal").innerHTML =

    today.toLocaleDateString('id-ID',{weekday:'long',day:'numeric',month:'long',year:'numeric'});

  // APPLY OFFSET

  let subuh = adjust(jadwal.Fajr, offset.Fajr);

  let syuruq = adjust(jadwal.Sunrise, offset.Sunrise);

  let dhuha = tambahMenit(syuruq, 20);

  let dzuhur = adjust(jadwal.Dhuhr, offset.Dhuhr);

  let ashar = adjust(jadwal.Asr, offset.Asr);

  let maghrib = adjust(jadwal.Maghrib, offset.Maghrib);

  let isya = adjust(jadwal.Isha, offset.Isha);

  prayerList = [

    {id:"subuh", name:"Subuh", time:subuh, display:formatJam(subuh)},

    {id:"syuruq", name:"Syuruq", time:syuruq, display:formatJam(syuruq)},

    {id:"dhuha", name:"Dhuha", time:dhuha, display:formatJam(dhuha)},

    {id:"dzuhur", name:"Dzuhur", time:dzuhur, display:formatJam(dzuhur)},

    {id:"ashar", name:"Ashar", time:ashar, display:formatJam(ashar)},

    {id:"maghrib", name:"Maghrib", time:maghrib, display:formatJam(maghrib)},

    {id:"isya", name:"Isya", time:isya, display:formatJam(isya)},

  ];

  renderUI();

  nextPrayer = getNextPrayer();

  document.getElementById("next").innerHTML =

    "Menuju waktu " + nextPrayer.name;

  highlight();

  updateCountdown();

}

init();

</script>