{"id":147,"date":"2026-06-15T09:12:50","date_gmt":"2026-06-15T09:12:50","guid":{"rendered":"https:\/\/oks.digital\/?page_id=147"},"modified":"2026-08-15T16:53:40","modified_gmt":"2026-08-15T16:53:40","slug":"prayer-times","status":"publish","type":"page","link":"https:\/\/oks.digital\/ar\/prayer-times\/","title":{"rendered":"\u0623\u0648\u0642\u0627\u062a \u0627\u0644\u0635\u0644\u0627\u0629"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n#pt-page,\n#pt-page * {\n  box-sizing: border-box;\n}\n\n#pt-page {\n  --pt-dark: #10251b;\n  --pt-green: #176b43;\n  --pt-green-dark: #0f4f31;\n  --pt-green-light: #e7f6ee;\n  --pt-text: #53645b;\n  --pt-border: #dceae2;\n  --pt-soft: #f5faf7;\n  --pt-white: #ffffff;\n  color: var(--pt-text);\n}\n\n.pt-wrap {\n  width: min(1120px, 92%);\n  margin: 0 auto;\n}\n\n.pt-hero {\n  padding: 62px 0 70px;\n  background:\n    radial-gradient(\n      circle at 90% 10%,\n      rgba(23, 107, 67, 0.11),\n      transparent 27%\n    ),\n    linear-gradient(\n      135deg,\n      #f3fbf7 0%,\n      #ffffff 55%,\n      #eef8f3 100%\n    );\n}\n\n.pt-header {\n  max-width: 820px;\n  margin-bottom: 32px;\n}\n\n.pt-badge,\n.pt-eyebrow {\n  display: inline-block;\n  color: var(--pt-green);\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.pt-badge {\n  padding: 8px 14px;\n  border: 1px solid #cce9d8;\n  border-radius: 999px;\n  background: var(--pt-green-light);\n}\n\n.pt-eyebrow {\n  margin-bottom: 10px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.pt-header h1 {\n  margin: 18px 0;\n  color: var(--pt-dark);\n  font-size: clamp(36px, 5vw, 58px);\n  font-weight: 800;\n  letter-spacing: -1.2px;\n  line-height: 1.08;\n}\n\n.pt-header p {\n  max-width: 760px;\n  margin: 0;\n  color: var(--pt-text);\n  font-size: 18px;\n  line-height: 1.75;\n}\n\n.pt-layout {\n  display: grid;\n  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);\n  gap: 24px;\n  align-items: start;\n}\n\n.pt-control-card,\n.pt-result-card {\n  padding: 27px;\n  border: 1px solid var(--pt-border);\n  border-radius: 22px;\n  background: var(--pt-white);\n  box-shadow: 0 16px 42px rgba(16, 37, 27, 0.08);\n}\n\n.pt-card-heading {\n  display: flex;\n  gap: 13px;\n  align-items: flex-start;\n  margin-bottom: 21px;\n}\n\n.pt-step {\n  display: flex;\n  width: 35px;\n  height: 35px;\n  flex: 0 0 35px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: var(--pt-green-light);\n  color: var(--pt-green);\n  font-weight: 800;\n}\n\n.pt-card-heading h2 {\n  margin: 0 0 4px;\n  color: var(--pt-dark);\n  font-size: 24px;\n  line-height: 1.25;\n}\n\n.pt-card-heading p {\n  margin: 0;\n  color: #6a786f;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.pt-field {\n  margin-bottom: 15px;\n}\n\n.pt-field label {\n  display: block;\n  margin-bottom: 7px;\n  color: #34483d;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.pt-input {\n  width: 100%;\n  min-height: 48px;\n  padding: 11px 13px;\n  border: 1px solid #cfe1d7;\n  border-radius: 11px;\n  background: var(--pt-white);\n  color: var(--pt-dark);\n  font: inherit;\n  font-size: 15px;\n}\n\n.pt-input:focus {\n  border-color: var(--pt-green);\n  outline: 3px solid rgba(23, 107, 67, 0.14);\n}\n\n.pt-btn {\n  display: inline-flex;\n  width: 100%;\n  min-height: 50px;\n  align-items: center;\n  justify-content: center;\n  gap: 7px;\n  padding: 13px 18px;\n  border: 1px solid transparent;\n  border-radius: 11px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.2;\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    color 0.2s ease,\n    transform 0.2s ease;\n}\n\n.pt-primary {\n  background: var(--pt-green);\n  color: var(--pt-white);\n}\n\n.pt-primary:hover {\n  background: var(--pt-green-dark);\n  transform: translateY(-1px);\n}\n\n.pt-location-btn {\n  border-color: #bcdcca;\n  background: var(--pt-green-light);\n  color: var(--pt-green-dark);\n}\n\n.pt-location-btn:hover {\n  border-color: #99cbae;\n  background: #dcf1e5;\n}\n\n.pt-btn:focus-visible {\n  outline: 3px solid rgba(23, 107, 67, 0.25);\n  outline-offset: 3px;\n}\n\n.pt-btn:disabled,\n.pt-input:disabled {\n  cursor: wait;\n  opacity: 0.62;\n}\n\n.pt-divider {\n  display: flex;\n  align-items: center;\n  margin: 14px 0;\n  color: #7a8980;\n  font-size: 13px;\n  text-align: center;\n}\n\n.pt-divider::before,\n.pt-divider::after {\n  height: 1px;\n  flex: 1;\n  background: var(--pt-border);\n  content: \"\";\n}\n\n.pt-divider span {\n  padding: 0 11px;\n}\n\n.pt-privacy {\n  display: flex;\n  gap: 9px;\n  align-items: flex-start;\n  margin-top: 18px;\n  padding: 12px;\n  border-radius: 10px;\n  background: var(--pt-soft);\n}\n\n.pt-privacy p {\n  margin: 0;\n  color: #637269;\n  font-size: 12px;\n  line-height: 1.55;\n}\n\n.pt-status {\n  min-height: 22px;\n  margin-bottom: 13px;\n  color: #66756c;\n  font-size: 14px;\n}\n\n.pt-error {\n  margin-bottom: 15px;\n  padding: 13px 15px;\n  border-left: 4px solid #c83832;\n  border-radius: 10px;\n  background: #fff1f1;\n  color: #8c2722;\n  font-size: 14px;\n  line-height: 1.55;\n}\n\n.pt-date-box {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 11px;\n  margin-bottom: 17px;\n}\n\n.pt-date-box > div {\n  padding: 12px 14px;\n  border: 1px solid var(--pt-border);\n  border-radius: 11px;\n  background: var(--pt-soft);\n}\n\n.pt-meta-label {\n  display: block;\n  margin-bottom: 3px;\n  color: #718078;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n}\n\n.pt-date-box strong {\n  color: var(--pt-dark);\n  font-size: 14px;\n}\n\n.pt-prayer-table {\n  display: grid;\n  gap: 9px;\n}\n\n.pt-prayer-row {\n  display: flex;\n  min-height: 66px;\n  align-items: center;\n  justify-content: space-between;\n  gap: 15px;\n  padding: 11px 15px;\n  border: 1px solid #e1ece6;\n  border-radius: 13px;\n  background: linear-gradient(180deg, #ffffff, #f8fcfa);\n}\n\n.pt-sunrise-row {\n  background: linear-gradient(180deg, #fffdf7, #fff8e9);\n}\n\n.pt-prayer-name {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.pt-prayer-icon {\n  display: flex;\n  width: 39px;\n  height: 39px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 11px;\n  background: var(--pt-green-light);\n  font-size: 19px;\n}\n\n.pt-prayer-name strong {\n  display: block;\n  color: var(--pt-dark);\n  font-size: 16px;\n}\n\n.pt-prayer-name small {\n  display: block;\n  margin-top: 2px;\n  color: #77857d;\n  font-size: 12px;\n}\n\n.pt-prayer-row time {\n  color: var(--pt-green);\n  font-size: 19px;\n  font-weight: 800;\n  white-space: nowrap;\n}\n\n.pt-result-information {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  margin-top: 15px;\n}\n\n.pt-result-information > div {\n  padding: 10px;\n  border-radius: 9px;\n  background: var(--pt-soft);\n}\n\n.pt-result-information span,\n.pt-result-information strong {\n  display: block;\n}\n\n.pt-result-information span {\n  margin-bottom: 3px;\n  color: #74837a;\n  font-size: 11px;\n}\n\n.pt-result-information strong {\n  color: #31463a;\n  font-size: 12px;\n  line-height: 1.35;\n}\n\n.pt-section {\n  padding: 66px 0;\n  background: var(--pt-white);\n}\n\n.pt-soft-section {\n  background: var(--pt-soft);\n}\n\n.pt-section-heading {\n  max-width: 760px;\n  margin-bottom: 28px;\n}\n\n.pt-section h2 {\n  margin: 0 0 14px;\n  color: var(--pt-dark);\n  font-size: clamp(28px, 4vw, 40px);\n  line-height: 1.2;\n}\n\n.pt-content-grid {\n  display: grid;\n  grid-template-columns: 1fr 0.78fr;\n  gap: 46px;\n  align-items: center;\n}\n\n.pt-steps-list {\n  display: grid;\n  gap: 13px;\n  margin: 23px 0 0;\n  padding: 0;\n  counter-reset: pt-step;\n  list-style: none;\n}\n\n.pt-steps-list li {\n  position: relative;\n  min-height: 37px;\n  padding: 7px 0 7px 48px;\n  color: #4f6057;\n  font-size: 16px;\n  line-height: 1.6;\n  counter-increment: pt-step;\n}\n\n.pt-steps-list li::before {\n  position: absolute;\n  top: 2px;\n  left: 0;\n  display: flex;\n  width: 36px;\n  height: 36px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: var(--pt-green-light);\n  color: var(--pt-green);\n  content: counter(pt-step);\n  font-weight: 800;\n}\n\n.pt-information-card {\n  padding: 27px;\n  border: 1px solid var(--pt-border);\n  border-radius: 18px;\n  background: var(--pt-soft);\n}\n\n.pt-information-card h3 {\n  margin: 0 0 12px;\n  color: var(--pt-dark);\n  font-size: 22px;\n}\n\n.pt-information-card p {\n  margin: 0 0 12px;\n  color: #596a60;\n  font-size: 15px;\n  line-height: 1.7;\n}\n\n.pt-information-card p:last-child {\n  margin-bottom: 0;\n}\n\n.pt-info-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 17px;\n}\n\n.pt-info-item {\n  padding: 21px;\n  border: 1px solid var(--pt-border);\n  border-radius: 15px;\n  background: var(--pt-white);\n}\n\n.pt-info-item h3 {\n  margin: 0 0 8px;\n  color: var(--pt-dark);\n  font-size: 19px;\n}\n\n.pt-info-item p {\n  margin: 0;\n  color: #607168;\n  font-size: 14px;\n  line-height: 1.65;\n}\n\n.pt-faq-list {\n  display: grid;\n  gap: 11px;\n  max-width: 900px;\n}\n\n.pt-faq {\n  border: 1px solid var(--pt-border);\n  border-radius: 13px;\n  background: var(--pt-white);\n}\n\n.pt-faq summary {\n  position: relative;\n  padding: 17px 50px 17px 19px;\n  color: var(--pt-dark);\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 700;\n  list-style: none;\n}\n\n.pt-faq summary::-webkit-details-marker {\n  display: none;\n}\n\n.pt-faq summary::after {\n  position: absolute;\n  top: 50%;\n  right: 19px;\n  color: var(--pt-green);\n  content: \"+\";\n  font-size: 23px;\n  transform: translateY(-50%);\n}\n\n.pt-faq[open] summary::after {\n  content: \"\u2212\";\n}\n\n.pt-faq p {\n  margin: 0;\n  padding: 0 19px 18px;\n  color: #5d6d64;\n  font-size: 14px;\n  line-height: 1.7;\n}\n\n.pt-note {\n  display: grid;\n  grid-template-columns: 48px 1fr;\n  gap: 16px;\n  margin-top: 30px;\n  padding: 25px;\n  border: 1px solid #d2e7db;\n  border-left: 5px solid var(--pt-green);\n  border-radius: 16px;\n  background: var(--pt-soft);\n}\n\n.pt-note-icon {\n  display: flex;\n  width: 46px;\n  height: 46px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 13px;\n  background: var(--pt-green-light);\n  font-size: 21px;\n}\n\n.pt-note h2 {\n  margin-bottom: 7px;\n  font-size: 23px;\n}\n\n.pt-note p {\n  max-width: 850px;\n  margin: 0 0 10px;\n  color: #596a60;\n  font-size: 14px;\n  line-height: 1.7;\n}\n\n.pt-note a {\n  color: var(--pt-green);\n  font-size: 14px;\n  font-weight: 700;\n  text-decoration: none;\n}\n\n.pt-note a:hover {\n  text-decoration: underline;\n}\n\n@media (max-width: 900px) {\n  .pt-layout,\n  .pt-content-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .pt-info-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .pt-result-card {\n    order: 2;\n  }\n}\n\n@media (max-width: 620px) {\n  .pt-hero {\n    padding: 42px 0 48px;\n  }\n\n  .pt-header h1 {\n    font-size: 37px;\n    letter-spacing: -0.7px;\n  }\n\n  .pt-header p {\n    font-size: 16px;\n  }\n\n  .pt-control-card,\n  .pt-result-card {\n    padding: 20px;\n    border-radius: 17px;\n  }\n\n  .pt-date-box,\n  .pt-result-information,\n  .pt-info-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .pt-prayer-row {\n    padding: 10px 12px;\n  }\n\n  .pt-prayer-icon {\n    width: 35px;\n    height: 35px;\n  }\n\n  .pt-prayer-row time {\n    font-size: 16px;\n  }\n\n  .pt-section {\n    padding: 48px 0;\n  }\n\n  .pt-note {\n    grid-template-columns: 1fr;\n    padding: 21px;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  \"use strict\";\n\n  const API_BASE = \"https:\/\/api.aladhan.com\/v1\";\n  const REQUEST_TIMEOUT = 12000;\n\n  function initializePrayerTimes() {\n    const page = document.getElementById(\"pt-page\");\n\n    if (!page) {\n      return;\n    }\n\n    const cityForm = document.getElementById(\"pt-city-form\");\n    const cityInput = document.getElementById(\"pt-city\");\n    const countryInput = document.getElementById(\"pt-country\");\n    const methodSelect = document.getElementById(\"pt-method\");\n    const schoolSelect = document.getElementById(\"pt-school\");\n    const cityButton = document.getElementById(\"pt-city-button\");\n    const locationButton = document.getElementById(\"pt-location-button\");\n    const resultSubtitle = document.getElementById(\"pt-result-subtitle\");\n    const statusBox = document.getElementById(\"pt-status\");\n    const errorBox = document.getElementById(\"pt-error\");\n    const resultContent = document.getElementById(\"pt-result-content\");\n\n    const prayerNames = [\n      \"Fajr\",\n      \"Sunrise\",\n      \"Dhuhr\",\n      \"Asr\",\n      \"Maghrib\",\n      \"Isha\"\n    ];\n\n    function setLoading(isLoading, message) {\n      page.setAttribute(\"aria-busy\", isLoading ? \"true\" : \"false\");\n\n      cityInput.disabled = isLoading;\n      countryInput.disabled = isLoading;\n      methodSelect.disabled = isLoading;\n      schoolSelect.disabled = isLoading;\n      cityButton.disabled = isLoading;\n      locationButton.disabled = isLoading;\n\n      if (isLoading) {\n        cityButton.textContent = \"Loading...\";\n        locationButton.textContent = \"Loading...\";\n        statusBox.textContent = message || \"Loading prayer times...\";\n      } else {\n        cityButton.textContent = \"Search Prayer Times\";\n        locationButton.innerHTML =\n          '<span aria-hidden=\"true\">\ud83d\udccd<\/span> Use My Current Location';\n      }\n    }\n\n    function showError(message) {\n      errorBox.textContent = message;\n      errorBox.hidden = false;\n      statusBox.textContent = \"\";\n    }\n\n    function clearError() {\n      errorBox.textContent = \"\";\n      errorBox.hidden = true;\n    }\n\n    function formatPrayerTime(value) {\n      if (!value || typeof value !== \"string\") {\n        return \"--:--\";\n      }\n\n      const cleanValue = value.split(\" \")[0];\n      const parts = cleanValue.split(\":\");\n\n      if (parts.length < 2) {\n        return cleanValue;\n      }\n\n      let hour = parseInt(parts[0], 10);\n      const minute = parts[1];\n\n      if (Number.isNaN(hour)) {\n        return cleanValue;\n      }\n\n      const period = hour >= 12 ? \"PM\" : \"AM\";\n      hour = hour % 12 || 12;\n\n      return hour + \":\" + minute + \" \" + period;\n    }\n\n    function getSelectedText(selectElement) {\n      const selectedOption =\n        selectElement.options[selectElement.selectedIndex];\n\n      return selectedOption ? selectedOption.textContent.trim() : \"\";\n    }\n\n    async function requestPrayerData(url) {\n      const controller = new AbortController();\n\n      const timeoutId = window.setTimeout(function () {\n        controller.abort();\n      }, REQUEST_TIMEOUT);\n\n      try {\n        const response = await fetch(url, {\n          method: \"GET\",\n          headers: {\n            Accept: \"application\/json\"\n          },\n          signal: controller.signal\n        });\n\n        if (!response.ok) {\n          throw new Error(\"The prayer-time service could not be reached.\");\n        }\n\n        const responseData = await response.json();\n\n        if (\n          !responseData ||\n          Number(responseData.code) !== 200 ||\n          !responseData.data ||\n          !responseData.data.timings\n        ) {\n          throw new Error(\"Prayer times are unavailable for this location.\");\n        }\n\n        return responseData.data;\n      } catch (error) {\n        if (error.name === \"AbortError\") {\n          throw new Error(\n            \"The request took too long. Please check your internet connection.\"\n          );\n        }\n\n        throw error;\n      } finally {\n        window.clearTimeout(timeoutId);\n      }\n    }\n\n    function displayPrayerTimes(data, locationName) {\n      prayerNames.forEach(function (prayerName) {\n        const timeElement = document.getElementById(\n          \"pt-\" + prayerName\n        );\n\n        if (timeElement) {\n          const formattedTime = formatPrayerTime(\n            data.timings[prayerName]\n          );\n\n          timeElement.textContent = formattedTime;\n          timeElement.setAttribute(\n            \"datetime\",\n            data.timings[prayerName].split(\" \")[0]\n          );\n        }\n      });\n\n      const readableDate =\n        data.date && data.date.readable\n          ? data.date.readable\n          : \"Not available\";\n\n      const hijriDate =\n        data.date &&\n        data.date.hijri &&\n        data.date.hijri.day &&\n        data.date.hijri.month &&\n        data.date.hijri.month.en &&\n        data.date.hijri.year\n          ? data.date.hijri.day +\n            \" \" +\n            data.date.hijri.month.en +\n            \" \" +\n            data.date.hijri.year +\n            \" AH\"\n          : \"Not available\";\n\n      document.getElementById(\"pt-gregorian-date\").textContent =\n        readableDate;\n\n      document.getElementById(\"pt-hijri-date\").textContent =\n        hijriDate;\n\n      document.getElementById(\"pt-method-result\").textContent =\n        getSelectedText(methodSelect);\n\n      document.getElementById(\"pt-school-result\").textContent =\n        getSelectedText(schoolSelect);\n\n      document.getElementById(\"pt-timezone-result\").textContent =\n        data.meta && data.meta.timezone\n          ? data.meta.timezone\n          : \"Not available\";\n\n      resultSubtitle.textContent = locationName;\n      statusBox.textContent = \"Prayer times loaded successfully.\";\n      resultContent.hidden = false;\n    }\n\n    async function loadByCity() {\n      const city = cityInput.value.trim();\n      const country = countryInput.value.trim();\n      const method = methodSelect.value;\n      const school = schoolSelect.value;\n\n      if (!city || !country) {\n        showError(\"Please enter both a city and country.\");\n        return;\n      }\n\n      clearError();\n      setLoading(\n        true,\n        \"Loading prayer times for \" + city + \"...\"\n      );\n\n      const parameters = new URLSearchParams({\n        city: city,\n        country: country,\n        method: method,\n        school: school\n      });\n\n      const url =\n        API_BASE +\n        \"\/timingsByCity?\" +\n        parameters.toString();\n\n      try {\n        const data = await requestPrayerData(url);\n\n        displayPrayerTimes(\n          data,\n          city + \", \" + country\n        );\n      } catch (error) {\n        console.error(\"Prayer-time city error:\", error);\n\n        showError(\n          error.message ||\n            \"Unable to load prayer times. Check the city and country.\"\n        );\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    async function loadByCoordinates(latitude, longitude) {\n      clearError();\n\n      setLoading(\n        true,\n        \"Calculating prayer times for your location...\"\n      );\n\n      const timestamp = Math.floor(Date.now() \/ 1000);\n\n      const parameters = new URLSearchParams({\n        latitude: String(latitude),\n        longitude: String(longitude),\n        method: methodSelect.value,\n        school: schoolSelect.value\n      });\n\n      const url =\n        API_BASE +\n        \"\/timings\/\" +\n        timestamp +\n        \"?\" +\n        parameters.toString();\n\n      try {\n        const data = await requestPrayerData(url);\n\n        displayPrayerTimes(\n          data,\n          \"Your current location\"\n        );\n      } catch (error) {\n        console.error(\"Prayer-time location error:\", error);\n\n        showError(\n          error.message ||\n            \"Unable to load prayer times for your location.\"\n        );\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    function requestCurrentLocation() {\n      clearError();\n\n      if (!navigator.geolocation) {\n        showError(\n          \"Your browser does not support location. Please search by city.\"\n        );\n        return;\n      }\n\n      locationButton.disabled = true;\n      locationButton.textContent = \"Waiting for permission...\";\n      statusBox.textContent = \"Waiting for location permission...\";\n\n      navigator.geolocation.getCurrentPosition(\n        function (position) {\n          loadByCoordinates(\n            position.coords.latitude,\n            position.coords.longitude\n          );\n        },\n        function (error) {\n          let message =\n            \"Your location could not be accessed. Please search by city.\";\n\n          if (error.code === error.PERMISSION_DENIED) {\n            message =\n              \"Location permission was blocked. Please search by city.\";\n          } else if (error.code === error.TIMEOUT) {\n            message =\n              \"The location request timed out. Please search by city.\";\n          } else if (error.code === error.POSITION_UNAVAILABLE) {\n            message =\n              \"Your location is unavailable. Please search by city.\";\n          }\n\n          showError(message);\n\n          locationButton.disabled = false;\n          locationButton.innerHTML =\n            '<span aria-hidden=\"true\">\ud83d\udccd<\/span> Use My Current Location';\n        },\n        {\n          enableHighAccuracy: false,\n          timeout: 10000,\n          maximumAge: 300000\n        }\n      );\n    }\n\n    cityForm.addEventListener(\"submit\", function (event) {\n      event.preventDefault();\n      loadByCity();\n    });\n\n    locationButton.addEventListener(\n      \"click\",\n      requestCurrentLocation\n    );\n\n    loadByCity();\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initializePrayerTimes\n    );\n  } else {\n    initializePrayerTimes();\n  }\n})();\n<\/script>\n\n<main id=\"pt-page\">\n\n  <section class=\"pt-hero\">\n    <div class=\"pt-wrap\">\n\n      <div class=\"pt-header\">\n        <span class=\"pt-badge\">\ud83d\udd4b Daily Salah Timings<\/span>\n\n        <h1>Prayer Times Today by City or Current Location<\/h1>\n\n        <p>\n          Check today\u2019s Fajr, Sunrise, Dhuhr, Asr, Maghrib and Isha times.\n          Search by city or use your current location.\n        <\/p>\n      <\/div>\n\n      <div class=\"pt-layout\">\n\n        <div class=\"pt-control-card\">\n          <div class=\"pt-card-heading\">\n            <span class=\"pt-step\">1<\/span>\n\n            <div>\n              <h2>Choose Your Location<\/h2>\n              <p>Search by city or use your device location.<\/p>\n            <\/div>\n          <\/div>\n\n          <form id=\"pt-city-form\">\n\n            <div class=\"pt-field\">\n              <label for=\"pt-city\">City<\/label>\n\n              <input\n                type=\"text\"\n                id=\"pt-city\"\n                class=\"pt-input\"\n                value=\"Abu Dhabi\"\n                placeholder=\"Example: Abu Dhabi\"\n                autocomplete=\"address-level2\"\n                required\n              >\n            <\/div>\n\n            <div class=\"pt-field\">\n              <label for=\"pt-country\">Country<\/label>\n\n              <input\n                type=\"text\"\n                id=\"pt-country\"\n                class=\"pt-input\"\n                value=\"United Arab Emirates\"\n                placeholder=\"Example: United Arab Emirates\"\n                autocomplete=\"country-name\"\n                required\n              >\n            <\/div>\n\n            <div class=\"pt-field\">\n              <label for=\"pt-method\">Calculation method<\/label>\n\n              <select id=\"pt-method\" class=\"pt-input\">\n                <option value=\"8\">Gulf Region<\/option>\n                <option value=\"16\">Dubai \u2013 Experimental<\/option>\n                <option value=\"3\">Muslim World League<\/option>\n                <option value=\"4\">Umm Al-Qura, Makkah<\/option>\n                <option value=\"1\">University of Karachi<\/option>\n                <option value=\"2\">ISNA \u2013 North America<\/option>\n                <option value=\"5\">Egyptian General Authority<\/option>\n              <\/select>\n            <\/div>\n\n            <div class=\"pt-field\">\n              <label for=\"pt-school\">Asr calculation<\/label>\n\n              <select id=\"pt-school\" class=\"pt-input\">\n                <option value=\"0\">Standard<\/option>\n                <option value=\"1\">Hanafi<\/option>\n              <\/select>\n            <\/div>\n\n            <button\n              type=\"submit\"\n              id=\"pt-city-button\"\n              class=\"pt-btn pt-primary\"\n            >\n              Search Prayer Times\n            <\/button>\n\n            <div class=\"pt-divider\">\n              <span>or<\/span>\n            <\/div>\n\n            <button\n              type=\"button\"\n              id=\"pt-location-button\"\n              class=\"pt-btn pt-location-btn\"\n            >\n              <span aria-hidden=\"true\">\ud83d\udccd<\/span>\n              Use My Current Location\n            <\/button>\n\n          <\/form>\n\n          <div class=\"pt-privacy\">\n            <span aria-hidden=\"true\">\ud83d\udd12<\/span>\n\n            <p>\n              Your location is used only to calculate prayer times. It is not\n              saved by this website.\n            <\/p>\n          <\/div>\n        <\/div>\n\n\n        <div class=\"pt-result-card\" id=\"pt-result-card\">\n\n          <div class=\"pt-card-heading\">\n            <span class=\"pt-step\">2<\/span>\n\n            <div>\n              <h2>Today\u2019s Prayer Times<\/h2>\n              <p id=\"pt-result-subtitle\">Abu Dhabi, United Arab Emirates<\/p>\n            <\/div>\n          <\/div>\n\n          <div\n            id=\"pt-status\"\n            class=\"pt-status\"\n            role=\"status\"\n            aria-live=\"polite\"\n          >\n            Loading prayer times&#8230;\n          <\/div>\n\n          <div\n            id=\"pt-error\"\n            class=\"pt-error\"\n            role=\"alert\"\n            hidden\n          ><\/div>\n\n          <div id=\"pt-result-content\" hidden>\n\n            <div class=\"pt-date-box\">\n\n              <div>\n                <span class=\"pt-meta-label\">Gregorian date<\/span>\n                <strong id=\"pt-gregorian-date\">\u2014<\/strong>\n              <\/div>\n\n              <div>\n                <span class=\"pt-meta-label\">Hijri date<\/span>\n                <strong id=\"pt-hijri-date\">\u2014<\/strong>\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"pt-prayer-table\">\n\n              <div class=\"pt-prayer-row\">\n                <div class=\"pt-prayer-name\">\n                  <span class=\"pt-prayer-icon\" aria-hidden=\"true\">\ud83c\udf0c<\/span>\n\n                  <div>\n                    <strong>Fajr<\/strong>\n                    <small>Dawn prayer<\/small>\n                  <\/div>\n                <\/div>\n\n                <time id=\"pt-Fajr\">&#8211;:&#8211;<\/time>\n              <\/div>\n\n\n              <div class=\"pt-prayer-row pt-sunrise-row\">\n                <div class=\"pt-prayer-name\">\n                  <span class=\"pt-prayer-icon\" aria-hidden=\"true\">\ud83c\udf05<\/span>\n\n                  <div>\n                    <strong>Sunrise<\/strong>\n                    <small>Sunrise time<\/small>\n                  <\/div>\n                <\/div>\n\n                <time id=\"pt-Sunrise\">&#8211;:&#8211;<\/time>\n              <\/div>\n\n\n              <div class=\"pt-prayer-row\">\n                <div class=\"pt-prayer-name\">\n                  <span class=\"pt-prayer-icon\" aria-hidden=\"true\">\u2600\ufe0f<\/span>\n\n                  <div>\n                    <strong>Dhuhr<\/strong>\n                    <small>Midday prayer<\/small>\n                  <\/div>\n                <\/div>\n\n                <time id=\"pt-Dhuhr\">&#8211;:&#8211;<\/time>\n              <\/div>\n\n\n              <div class=\"pt-prayer-row\">\n                <div class=\"pt-prayer-name\">\n                  <span class=\"pt-prayer-icon\" aria-hidden=\"true\">\ud83c\udf24\ufe0f<\/span>\n\n                  <div>\n                    <strong>Asr<\/strong>\n                    <small>Afternoon prayer<\/small>\n                  <\/div>\n                <\/div>\n\n                <time id=\"pt-Asr\">&#8211;:&#8211;<\/time>\n              <\/div>\n\n\n              <div class=\"pt-prayer-row\">\n                <div class=\"pt-prayer-name\">\n                  <span class=\"pt-prayer-icon\" aria-hidden=\"true\">\ud83c\udf07<\/span>\n\n                  <div>\n                    <strong>Maghrib<\/strong>\n                    <small>Sunset prayer<\/small>\n                  <\/div>\n                <\/div>\n\n                <time id=\"pt-Maghrib\">&#8211;:&#8211;<\/time>\n              <\/div>\n\n\n              <div class=\"pt-prayer-row\">\n                <div class=\"pt-prayer-name\">\n                  <span class=\"pt-prayer-icon\" aria-hidden=\"true\">\ud83c\udf19<\/span>\n\n                  <div>\n                    <strong>Isha<\/strong>\n                    <small>Night prayer<\/small>\n                  <\/div>\n                <\/div>\n\n                <time id=\"pt-Isha\">&#8211;:&#8211;<\/time>\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"pt-result-information\">\n\n              <div>\n                <span>Calculation method<\/span>\n                <strong id=\"pt-method-result\">Gulf Region<\/strong>\n              <\/div>\n\n              <div>\n                <span>Asr method<\/span>\n                <strong id=\"pt-school-result\">Standard<\/strong>\n              <\/div>\n\n              <div>\n                <span>Timezone<\/span>\n                <strong id=\"pt-timezone-result\">\u2014<\/strong>\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- HIJRI DATE CONVERTER INTERNAL LINK -->\n  <section class=\"pt-section\">\n    <div class=\"pt-wrap\">\n\n      <div class=\"pt-information-card\">\n        <h3>Need to Convert Another Date?<\/h3>\n\n        <p>\n          Use our\n          <a href=\"\/hijri-date-converter\/\">Hijri Date Converter<\/a>\n          to convert any Gregorian date to the corresponding Islamic Hijri date.\n        <\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n\n  <section class=\"pt-section\">\n    <div class=\"pt-wrap\">\n\n      <div class=\"pt-content-grid\">\n\n        <div>\n          <span class=\"pt-eyebrow\">How to use the tool<\/span>\n\n          <h2>Check Prayer Times in Three Simple Steps<\/h2>\n\n          <ol class=\"pt-steps-list\">\n\n            <li>\n              Enter your city and country, or select \u201cUse My Current Location.\u201d\n            <\/li>\n\n            <li>\n              Choose the prayer calculation method and Asr calculation.\n            <\/li>\n\n            <li>\n              Check today\u2019s Fajr, Dhuhr, Asr, Maghrib and Isha times.\n            <\/li>\n\n          <\/ol>\n        <\/div>\n\n\n        <div class=\"pt-information-card\">\n          <h3>Why can prayer times differ?<\/h3>\n\n          <p>\n            Prayer times can differ because Islamic authorities may use\n            different calculation methods, angles and local adjustments.\n          <\/p>\n\n          <p>\n            Your mosque may also follow an official local timetable instead of\n            a general online calculation.\n          <\/p>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <section class=\"pt-section pt-soft-section\">\n    <div class=\"pt-wrap\">\n\n      <div class=\"pt-section-heading\">\n        <span class=\"pt-eyebrow\">Helpful information<\/span>\n\n        <h2>Understanding the Daily Prayer Times<\/h2>\n      <\/div>\n\n\n      <div class=\"pt-info-grid\">\n\n        <div class=\"pt-info-item\">\n          <h3>Fajr<\/h3>\n\n          <p>\n            Fajr is the dawn prayer. Its time begins before sunrise.\n          <\/p>\n        <\/div>\n\n\n        <div class=\"pt-info-item\">\n          <h3>Dhuhr<\/h3>\n\n          <p>\n            Dhuhr is the midday prayer after the sun passes its highest point.\n          <\/p>\n        <\/div>\n\n\n        <div class=\"pt-info-item\">\n          <h3>Asr<\/h3>\n\n          <p>\n            Asr is the afternoon prayer. Its calculated time can differ\n            between Standard and Hanafi methods.\n          <\/p>\n        <\/div>\n\n\n        <div class=\"pt-info-item\">\n          <h3>Maghrib<\/h3>\n\n          <p>\n            Maghrib begins shortly after sunset.\n          <\/p>\n        <\/div>\n\n\n        <div class=\"pt-info-item\">\n          <h3>Isha<\/h3>\n\n          <p>\n            Isha is the night prayer after evening twilight disappears.\n          <\/p>\n        <\/div>\n\n\n        <div class=\"pt-info-item\">\n          <h3>Sunrise<\/h3>\n\n          <p>\n            Sunrise is displayed for information. It is not one of the five\n            daily obligatory prayers.\n          <\/p>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <section class=\"pt-section\">\n    <div class=\"pt-wrap\">\n\n      <div class=\"pt-section-heading\">\n        <span class=\"pt-eyebrow\">Common questions<\/span>\n\n        <h2>Prayer Times Frequently Asked Questions<\/h2>\n      <\/div>\n\n\n      <div class=\"pt-faq-list\">\n\n        <details class=\"pt-faq\">\n          <summary>Which calculation method should I select in the UAE?<\/summary>\n\n          <p>\n            Gulf Region is provided as the default option. Because local\n            authority timings can include official adjustments, confirm\n            important prayer times with your local mosque or UAE Islamic\n            authority.\n          <\/p>\n        <\/details>\n\n\n        <details class=\"pt-faq\">\n          <summary>What is the difference between Standard and Hanafi Asr?<\/summary>\n\n          <p>\n            These options use different shadow-length calculations for the\n            beginning of Asr. Select the method followed by your mosque or\n            school of Islamic jurisprudence.\n          <\/p>\n        <\/details>\n\n\n        <details class=\"pt-faq\">\n          <summary>Why does the website request my location?<\/summary>\n\n          <p>\n            Your latitude and longitude help calculate prayer times for your\n            current position. Location permission is requested only when you\n            select \u201cUse My Current Location.\u201d\n          <\/p>\n        <\/details>\n\n\n        <details class=\"pt-faq\">\n          <summary>What happens if I block location permission?<\/summary>\n\n          <p>\n            You can still search for prayer times by entering your city and\n            country manually.\n          <\/p>\n        <\/details>\n\n      <\/div>\n\n\n      <div class=\"pt-note\">\n\n        <div class=\"pt-note-icon\" aria-hidden=\"true\">\u2139\ufe0f<\/div>\n\n        <div>\n          <h2>Important Accuracy Note<\/h2>\n\n          <p>\n            These are calculated prayer times and may differ from your local\n            mosque or official timetable. Always confirm important timings\n            with your local mosque or responsible Islamic authority.\n          <\/p>\n\n          <a href=\"https:\/\/www.awqaf.gov.ae\/prayer-times?lang=en\" target=\"_blank\" rel=\"noopener noreferrer\">\n            Check official UAE prayer timings \u2192\n          <\/a>\n\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n<\/main>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd4b Daily Salah Timings Prayer Times Today by City or Current Location Check today\u2019s Fajr, Sunrise, Dhuhr, Asr, Maghrib and Isha times. Search by city or use your current location. 1 Choose Your Location Search by city or use your device location. City Country Calculation method Gulf RegionDubai \u2013 ExperimentalMuslim World LeagueUmm Al-Qura, MakkahUniversity of&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-147","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"kashi883@gmail.com","author_link":"https:\/\/oks.digital\/ar\/author\/kashi883gmail-com\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":3,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/147\/revisions"}],"predecessor-version":[{"id":290,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/147\/revisions\/290"}],"wp:attachment":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/media?parent=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}