{"id":105176,"date":"2025-10-20T08:49:50","date_gmt":"2025-10-20T01:49:50","guid":{"rendered":"https:\/\/evermos.com\/home\/?page_id=105176"},"modified":"2025-12-17T16:55:25","modified_gmt":"2025-12-17T09:55:25","slug":"jadwal-sholat","status":"publish","type":"page","link":"https:\/\/evermos.com\/home\/jadwal-sholat\/","title":{"rendered":"Jadwal Sholat"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"105176\" class=\"elementor elementor-105176\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-3aa2943 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3aa2943\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8b07640\" data-id=\"8b07640\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a899003 elementor-widget elementor-widget-html\" data-id=\"a899003\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div style=\"width:100%;margin:auto;text-align:center;font-family:'Montserrat',sans-serif;\">\r\n\r\n<h2 id=\"mainTitle\">Jadwal Sholat<\/h2>\r\n\r\n<!-- JAM -->\r\n<div style=\"margin-bottom:10px;\">\r\n  <div style=\"font-weight:600;color:#004751;\">\r\n    \ud83d\udd52 Waktu Sekarang (<span id=\"clockCity\">Bandung<\/span>)\r\n  <\/div>\r\n  <div id=\"digitalClock\"\r\n       style=\"font-size:32px;font-weight:bold;color:#004751;\r\n              font-family:'Courier New',monospace;\">--<\/div>\r\n<\/div>\r\n\r\n<!-- COUNTDOWN -->\r\n<div id=\"nextPrayerCountdown\"\r\n     style=\"margin-bottom:15px;font-weight:600;color:#004751;\"><\/div>\r\n\r\n<!-- SEARCH -->\r\n<div style=\"margin-bottom:20px;position:relative;\">\r\n  <input id=\"cityInput\" placeholder=\"Cari kota\"\r\n    style=\"padding:10px;width:80%;max-width:400px;\r\n           border:1px solid #ccc;border-radius:12px;\"\r\n    oninput=\"showSuggestions()\">\r\n  <div id=\"suggestions\"\r\n       style=\"position:absolute;left:50%;transform:translateX(-50%);\r\n              width:80%;max-width:400px;background:#fff;\r\n              border:1px solid #ddd;border-radius:12px;\r\n              display:none;z-index:10;\"><\/div>\r\n  <button onclick=\"loadPrayerTimes()\"\r\n    style=\"padding:10px 16px;border:none;background:#004751;\r\n           color:#fff;border-radius:12px;margin-left:6px;\">\r\n    Cari\r\n  <\/button>\r\n<\/div>\r\n\r\n<!-- CARDS -->\r\n<div id=\"prayerCards\"><\/div>\r\n\r\n<!-- TABLE -->\r\n<div style=\"overflow-x:auto;margin-top:20px;\">\r\n  <div id=\"prayerTableContainer\"><\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n#prayerCards{\r\n  display:flex;\r\n  gap:14px;\r\n  justify-content:center;\r\n  margin-bottom:20px;\r\n}\r\n.prayer-card{\r\n  min-width:150px;\r\n  background:#fff;\r\n  border-radius:18px;\r\n  padding:16px;\r\n  box-shadow:0 6px 16px rgba(0,0,0,.08);\r\n  border:2px solid transparent;\r\n  transition:.3s;\r\n}\r\n.prayer-card.active{\r\n  border-color:#00a859;\r\n  transform:scale(1.08);\r\n}\r\n.prayer-name{font-weight:600;font-size:14px;}\r\n.prayer-time{font-size:26px;font-weight:700;margin-top:4px;}\r\n.prayer-status{font-size:12px;margin-top:6px;color:#666;}\r\n\r\n@media(max-width:768px){\r\n  #prayerCards{flex-direction:column;padding:0 8px;}\r\n  .prayer-card{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:center;\r\n  }\r\n  .prayer-card.active{transform:none;}\r\n  .prayer-status{\r\n    background:#eee;padding:4px 8px;border-radius:8px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\nconst kotaList=[\"Bandung\",\"Jakarta\",\"Surabaya\",\"Semarang\",\"Pontianak\"];\r\nconst hariMap=[\"Minggu\",\"Senin\",\"Selasa\",\"Rabu\",\"Kamis\",\"Jumat\",\"Sabtu\"];\r\n\r\nlet currentCity=\"Bandung\";\r\nlet todayTimings={};\r\nlet clockInterval,countdownInterval,cardInterval;\r\n\r\n\/* AUTOCOMPLETE *\/\r\nfunction showSuggestions(){\r\n  const box=suggestions;\r\n  box.innerHTML=\"\";\r\n  if(!cityInput.value)return box.style.display=\"none\";\r\n  kotaList.filter(k=>k.toLowerCase().includes(cityInput.value.toLowerCase()))\r\n  .forEach(k=>{\r\n    const d=document.createElement(\"div\");\r\n    d.textContent=k;\r\n    d.style.padding=\"10px\";\r\n    d.onclick=()=>{cityInput.value=k;box.style.display=\"none\";loadPrayerTimes(k);}\r\n    box.appendChild(d);\r\n  });\r\n  box.style.display=\"block\";\r\n}\r\n\r\n\/* CLOCK *\/\r\nfunction startClock(){\r\n  clearInterval(clockInterval);\r\n  clockInterval=setInterval(()=>{\r\n    const n=new Date();\r\n    digitalClock.textContent=\r\n      `${String(n.getHours()).padStart(2,\"0\")}:${String(n.getMinutes()).padStart(2,\"0\")}:${String(n.getSeconds()).padStart(2,\"0\")}`;\r\n  },1000);\r\n}\r\n\r\n\/* COUNTDOWN *\/\r\nfunction startCountdown(){\r\n  clearInterval(countdownInterval);\r\n\r\n  countdownInterval = setInterval(() => {\r\n    const now = new Date();\r\n\r\n    const prayers = [\r\n      [\"Subuh\", todayTimings.Fajr],\r\n      [\"Dzuhur\", todayTimings.Dhuhr],\r\n      [\"Ashar\", todayTimings.Asr],\r\n      [\"Maghrib\", todayTimings.Maghrib],\r\n      [\"Isya\", todayTimings.Isha]\r\n    ];\r\n\r\n    for (let [name, time] of prayers) {\r\n      if (!time) continue;\r\n\r\n      const [h, m] = time.split(\" \")[0].split(\":\");\r\n      const t = new Date();\r\n      t.setHours(h, m, 0, 0);\r\n\r\n      if (t > now) {\r\n        const diff = t - now;\r\n        const hours = Math.floor(diff \/ 3600000);\r\n        const minutes = Math.floor((diff % 3600000) \/ 60000);\r\n\r\n        document.getElementById(\"nextPrayerCountdown\").textContent =\r\n          `\u23f3 Menuju ${name}: ${hours}h ${minutes}m`;\r\n        return;\r\n      }\r\n    }\r\n\r\n    document.getElementById(\"nextPrayerCountdown\").textContent =\r\n      \"\ud83c\udf19 Semua sholat hari ini telah selesai\";\r\n  }, 1000);\r\n}\r\n\r\n\r\n\/* CARDS *\/\r\nfunction renderPrayerCards(){\r\n  const now=new Date();\r\n  const list=[\r\n    [\"Subuh\",todayTimings.Fajr],\r\n    [\"Dzuhur\",todayTimings.Dhuhr],\r\n    [\"Ashar\",todayTimings.Asr],\r\n    [\"Maghrib\",todayTimings.Maghrib],\r\n    [\"Isya\",todayTimings.Isha]\r\n  ];\r\n\r\n  let active=0;\r\n  list.forEach((p,i)=>{\r\n    const [h,m]=p[1].split(\" \")[0].split(\":\");\r\n    const d=new Date();d.setHours(h,m,0,0);\r\n    if(now>=d)active=i;\r\n  });\r\n\r\n  prayerCards.innerHTML=\"\";\r\n  list.forEach((p,i)=>{\r\n    const [h,m]=p[1].split(\" \")[0].split(\":\");\r\n    let status=\"\";\r\n    if(i===active)status=\"Sekarang\";\r\n    if(i===active+1){\r\n      const d=new Date();d.setHours(h,m,0,0);\r\n      const diff=d-now;\r\n      status=`di ${Math.floor(diff\/3600000)}h ${Math.floor(diff%3600000\/60000)}m`;\r\n    }\r\n    prayerCards.innerHTML+=`\r\n      <div class=\"prayer-card ${i===active?'active':''}\">\r\n        <div>\r\n          <div class=\"prayer-name\">${p[0]}<\/div>\r\n          <div class=\"prayer-status\">${status}<\/div>\r\n        <\/div>\r\n        <div class=\"prayer-time\">${h}:${m}<\/div>\r\n      <\/div>`;\r\n  });\r\n}\r\n\r\n\/* LOAD *\/\r\nasync function loadPrayerTimes(city){\r\n  currentCity=city||cityInput.value||currentCity;\r\n  clockCity.textContent=currentCity;\r\n\r\n  const r=await fetch(`https:\/\/api.aladhan.com\/v1\/calendarByCity?city=${currentCity}&country=Indonesia&method=2`);\r\n  const j=await r.json();\r\n\r\n  const t=new Date();\r\n  const day=t.getDate();\r\n  const m=[\"Januari\",\"Februari\",\"Maret\",\"April\",\"Mei\",\"Juni\",\"Juli\",\"Agustus\",\"September\",\"Oktober\",\"November\",\"Desember\"][t.getMonth()];\r\n\r\n  mainTitle.textContent=`Jadwal Sholat ${hariMap[t.getDay()]}, ${day} ${m} - ${currentCity}`;\r\n\r\n  todayTimings=j.data.find(d=>+d.date.gregorian.day===day).timings;\r\n\r\n  startCountdown();\r\n  renderPrayerCards();\r\n\r\n  if(!cardInterval){\r\n    cardInterval=setInterval(renderPrayerCards,60000);\r\n  }\r\n\r\n  \/* TABLE *\/\r\n  let html=`<table style=\"width:100%;border-collapse:collapse\">\r\n    <tr style=\"background:#004751;color:#fff\">\r\n      <th>Tanggal<\/th><th>Subuh<\/th><th>Dzuhur<\/th><th>Ashar<\/th><th>Maghrib<\/th><th>Isya<\/th>\r\n    <\/tr>`;\r\n  j.data.slice(day-4,day+3).forEach(d=>{\r\n    const g=d.date.gregorian;\r\n    const isToday=+g.day===day;\r\n    html+=`\r\n    <tr style=\"${isToday?'outline:2px solid #00a859;':''}\">\r\n      <td>\r\n  ${(() => {\r\n    const [dd, mm, yyyy] = g.date.split(\"-\");\r\n    const dateObj = new Date(yyyy, mm - 1, dd);\r\n    return hariMap[dateObj.getDay()];\r\n  })()},\r\n  ${g.day}\/${g.month.number}\/${g.year}\r\n<\/td>\r\n\r\n      <td>${d.timings.Fajr.split(\" \")[0]}<\/td>\r\n      <td>${d.timings.Dhuhr.split(\" \")[0]}<\/td>\r\n      <td>${d.timings.Asr.split(\" \")[0]}<\/td>\r\n      <td>${d.timings.Maghrib.split(\" \")[0]}<\/td>\r\n      <td>${d.timings.Isha.split(\" \")[0]}<\/td>\r\n    <\/tr>`;\r\n  });\r\n  html+=\"<\/table>\";\r\n  prayerTableContainer.innerHTML=html;\r\n}\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\",()=>{\r\n  startClock();\r\n  loadPrayerTimes(\"Bandung\");\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Jadwal Sholat \ud83d\udd52 Waktu Sekarang (Bandung) &#8212; Cari<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-105176","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages\/105176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/comments?post=105176"}],"version-history":[{"count":240,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages\/105176\/revisions"}],"predecessor-version":[{"id":111487,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/pages\/105176\/revisions\/111487"}],"wp:attachment":[{"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/media?parent=105176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/categories?post=105176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evermos.com\/home\/wp-json\/wp\/v2\/tags?post=105176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}