{"id":149,"date":"2026-06-15T10:33:39","date_gmt":"2026-06-15T10:33:39","guid":{"rendered":"https:\/\/oks.digital\/?page_id=149"},"modified":"2026-08-19T14:11:27","modified_gmt":"2026-08-19T14:11:27","slug":"qibla-direction","status":"publish","type":"page","link":"https:\/\/oks.digital\/ar\/qibla-direction\/","title":{"rendered":"\u0645\u062d\u062f\u062f \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0628\u0644\u0629"},"content":{"rendered":"<style data-wp-block-html=\"css\">\n.it-qibla-degree {\n  font-size: clamp(46px, 7vw, 76px);\n  font-weight: 900;\n  color: #0f5132;\n  line-height: 1;\n  margin: 12px 0;\n}\n\n.it-qibla-label {\n  color: #66756b;\n  font-size: 18px;\n}\n\n.it-compass-box {\n  background: linear-gradient(180deg, #ffffff, #fbfff8);\n  border: 1px solid #e7eadf;\n  border-radius: 20px;\n  padding: 22px;\n  text-align: center;\n}\n\n.it-compass-icon {\n  font-size: 58px;\n  margin-bottom: 8px;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nlet qiblaOrientationHandler = null;\nlet qiblaCompassTimeout = null;\nlet qiblaSmoothedHeading = null;\n\nasync function calcQibla() {\n  const box = document.getElementById(\"qiblaResult\");\n\n  if (!box) return;\n\n  \/\/ Stop any previous compass listener\n  stopQiblaCompass();\n\n  box.innerHTML = \"Getting your location...\";\n\n  \/\/ Kaaba coordinates\n  const makkahLat = 21.4225 * Math.PI \/ 180;\n  const makkahLng = 39.8262 * Math.PI \/ 180;\n\n  \/\/ =====================================\n  \/\/ CALCULATE QIBLA BEARING\n  \/\/ =====================================\n  function calculateBearing(lat, lng) {\n    const userLat = lat * Math.PI \/ 180;\n    const userLng = lng * Math.PI \/ 180;\n    const diffLng = makkahLng - userLng;\n\n    const y = Math.sin(diffLng);\n\n    const x =\n      Math.cos(userLat) * Math.tan(makkahLat) -\n      Math.sin(userLat) * Math.cos(diffLng);\n\n    let bearing = Math.atan2(y, x) * 180 \/ Math.PI;\n\n    bearing = (bearing + 360) % 360;\n\n    return bearing;\n  }\n\n  \/\/ =====================================\n  \/\/ ASK FOR COMPASS PERMISSION\n  \/\/ =====================================\n  let compassPermission = \"unavailable\";\n\n  if (typeof DeviceOrientationEvent !== \"undefined\") {\n\n    \/\/ iPhone \/ iPad and browsers requiring permission\n    if (typeof DeviceOrientationEvent.requestPermission === \"function\") {\n      try {\n        const permission =\n          await DeviceOrientationEvent.requestPermission(true);\n\n        compassPermission =\n          permission === \"granted\" ? \"granted\" : \"denied\";\n\n      } catch (error) {\n        compassPermission = \"denied\";\n      }\n\n    } else {\n\n      \/\/ Android Chrome etc.\n      compassPermission = \"granted\";\n    }\n  }\n\n  \/\/ =====================================\n  \/\/ GET USER LOCATION\n  \/\/ =====================================\n  if (!navigator.geolocation) {\n    showLocationError();\n    return;\n  }\n\n  navigator.geolocation.getCurrentPosition(\n\n    position => {\n\n      const lat = position.coords.latitude;\n      const lng = position.coords.longitude;\n\n      const qiblaBearing =\n        calculateBearing(lat, lng);\n\n      showResult(qiblaBearing);\n\n      if (compassPermission === \"granted\") {\n        startQiblaCompass(qiblaBearing);\n      } else {\n        showCompassUnavailable();\n      }\n    },\n\n    error => {\n      showLocationError(error);\n    },\n\n    {\n      enableHighAccuracy: true,\n      timeout: 10000,\n      maximumAge: 60000\n    }\n  );\n\n\n  \/\/ =====================================\n  \/\/ SHOW RESULT\n  \/\/ =====================================\n  function showResult(degree) {\n\n    box.innerHTML = `\n      <div class=\"it-compass-box\">\n\n        <h2>Qibla Direction<\/h2>\n\n        <div class=\"it-qibla-degree\">\n          ${degree.toFixed(1)}\u00b0\n        <\/div>\n\n        <p class=\"it-qibla-label\">\n          Qibla bearing from true north\n        <\/p>\n\n\n        <div class=\"it-live-compass\">\n\n          <!-- Rotating compass dial -->\n          <div\n            class=\"it-compass-dial\"\n            id=\"qiblaDial\"\n          >\n\n            <div class=\"it-compass-north\">N<\/div>\n            <div class=\"it-compass-east\">E<\/div>\n            <div class=\"it-compass-south\">S<\/div>\n            <div class=\"it-compass-west\">W<\/div>\n\n          <\/div>\n\n\n          <!-- Qibla arrow -->\n          <div\n            class=\"it-qibla-arrow\"\n            id=\"qiblaArrow\"\n          >\n            \u2191\n          <\/div>\n\n\n          <!-- Center point -->\n          <div class=\"it-compass-center\"><\/div>\n\n        <\/div>\n\n\n        <div\n          class=\"it-qibla-guidance\"\n          id=\"qiblaGuidance\"\n        >\n          Starting live compass...\n        <\/div>\n\n\n        <div\n          class=\"it-phone-heading\"\n          id=\"phoneHeading\"\n        ><\/div>\n\n\n        <p class=\"it-qibla-help\">\n          Hold your phone flat with the top of the phone pointing forward.\n          Keep it away from metal objects, vehicles, electrical equipment\n          and magnets.\n        <\/p>\n\n      <\/div>\n    `;\n  }\n\n\n  \/\/ =====================================\n  \/\/ LOCATION ERROR\n  \/\/ =====================================\n  function showLocationError(error) {\n\n    let message =\n      \"Please allow location access to calculate the Qibla direction.\";\n\n    if (error && error.code === 1) {\n      message =\n        \"Location permission was denied. Please enable location permission and try again.\";\n    }\n\n    box.innerHTML = `\n      <div class=\"it-compass-box\">\n\n        <div class=\"it-compass-icon\">\n          \ud83d\udccd\n        <\/div>\n\n        <h2>Location Required<\/h2>\n\n        <p class=\"it-qibla-label\">\n          ${message}\n        <\/p>\n\n      <\/div>\n    `;\n  }\n}\n\n\n\n\/\/ =====================================\n\/\/ LIVE PHONE COMPASS\n\/\/ =====================================\n\nfunction startQiblaCompass(qiblaBearing) {\n\n  const arrow =\n    document.getElementById(\"qiblaArrow\");\n\n  const dial =\n    document.getElementById(\"qiblaDial\");\n\n  const guidance =\n    document.getElementById(\"qiblaGuidance\");\n\n  const headingBox =\n    document.getElementById(\"phoneHeading\");\n\n  if (!arrow || !guidance) return;\n\n\n  let receivedCompassData = false;\n\n  qiblaSmoothedHeading = null;\n\n\n  \/\/ =====================================\n  \/\/ SMOOTH COMPASS MOVEMENT\n  \/\/ =====================================\n  function smoothHeading(newHeading) {\n\n    if (qiblaSmoothedHeading === null) {\n      qiblaSmoothedHeading = newHeading;\n      return newHeading;\n    }\n\n    let difference =\n      ((newHeading - qiblaSmoothedHeading + 540) % 360) - 180;\n\n    qiblaSmoothedHeading =\n      (\n        qiblaSmoothedHeading +\n        difference * 0.18 +\n        360\n      ) % 360;\n\n    return qiblaSmoothedHeading;\n  }\n\n\n  \/\/ =====================================\n  \/\/ PROCESS PHONE COMPASS\n  \/\/ =====================================\n  qiblaOrientationHandler = function(event) {\n\n    let heading = null;\n\n\n    \/\/ -------------------------------------\n    \/\/ iPhone \/ iPad Safari\n    \/\/ -------------------------------------\n    if (\n      typeof event.webkitCompassHeading === \"number\"\n    ) {\n\n      heading = event.webkitCompassHeading;\n\n    }\n\n\n    \/\/ -------------------------------------\n    \/\/ Android \/ absolute orientation\n    \/\/ -------------------------------------\n    else if (\n      event.absolute === true &&\n      typeof event.alpha === \"number\"\n    ) {\n\n      heading =\n        (360 - event.alpha) % 360;\n\n    }\n\n\n    \/\/ No true compass information\n    if (heading === null) {\n      return;\n    }\n\n\n    receivedCompassData = true;\n\n    heading = smoothHeading(heading);\n\n\n    \/\/ =====================================\n    \/\/ ROTATE N \/ E \/ S \/ W COMPASS DIAL\n    \/\/ =====================================\n    if (dial) {\n\n      \/\/ Save phone heading for letter correction\n      dial.style.setProperty(\n        \"--phone-heading\",\n        `${heading}deg`\n      );\n\n      \/\/ Rotate entire compass dial\n      \/\/ North now moves to its true position\n      dial.style.transform =\n        `rotate(${-heading}deg)`;\n    }\n\n\n    \/\/ =====================================\n    \/\/ CALCULATE QIBLA POSITION\n    \/\/ RELATIVE TO PHONE\n    \/\/ =====================================\n\n    let difference =\n      ((qiblaBearing - heading + 540) % 360) - 180;\n\n\n    \/\/ =====================================\n    \/\/ ROTATE QIBLA ARROW\n    \/\/ =====================================\n\n    arrow.style.transform =\n      `rotate(${difference}deg)`;\n\n\n    const absoluteDifference =\n      Math.abs(difference);\n\n\n    \/\/ =====================================\n    \/\/ USER GUIDANCE\n    \/\/ =====================================\n\n    if (absoluteDifference <= 5) {\n\n      guidance.innerHTML =\n        \"\u2705 <strong>Qibla aligned<\/strong>\";\n\n      guidance.classList.add(\n        \"is-aligned\"\n      );\n\n    } else {\n\n      guidance.classList.remove(\n        \"is-aligned\"\n      );\n\n\n      if (difference > 0) {\n\n        guidance.innerHTML =\n          `\u21bb Turn right ${absoluteDifference.toFixed(0)}\u00b0`;\n\n      } else {\n\n        guidance.innerHTML =\n          `\u21ba Turn left ${absoluteDifference.toFixed(0)}\u00b0`;\n\n      }\n    }\n\n\n    \/\/ =====================================\n    \/\/ SHOW PHONE DIRECTION\n    \/\/ =====================================\n\n    if (headingBox) {\n\n      headingBox.innerHTML =\n        `Phone direction: ${heading.toFixed(0)}\u00b0`;\n\n    }\n  };\n\n\n  \/\/ =====================================\n  \/\/ START COMPASS EVENTS\n  \/\/ =====================================\n\n  window.addEventListener(\n    \"deviceorientationabsolute\",\n    qiblaOrientationHandler,\n    true\n  );\n\n\n  window.addEventListener(\n    \"deviceorientation\",\n    qiblaOrientationHandler,\n    true\n  );\n\n\n  \/\/ =====================================\n  \/\/ COMPASS NOT AVAILABLE\n  \/\/ =====================================\n\n  qiblaCompassTimeout =\n    setTimeout(() => {\n\n      if (!receivedCompassData) {\n\n        guidance.innerHTML =\n          \"Live compass is not available on this device. Use the Qibla bearing shown above.\";\n\n        if (headingBox) {\n          headingBox.innerHTML = \"\";\n        }\n      }\n\n    }, 4000);\n}\n\n\n\n\/\/ =====================================\n\/\/ STOP PREVIOUS COMPASS\n\/\/ =====================================\n\nfunction stopQiblaCompass() {\n\n  if (qiblaOrientationHandler) {\n\n    window.removeEventListener(\n      \"deviceorientationabsolute\",\n      qiblaOrientationHandler,\n      true\n    );\n\n    window.removeEventListener(\n      \"deviceorientation\",\n      qiblaOrientationHandler,\n      true\n    );\n\n    qiblaOrientationHandler = null;\n  }\n\n\n  if (qiblaCompassTimeout) {\n\n    clearTimeout(\n      qiblaCompassTimeout\n    );\n\n    qiblaCompassTimeout = null;\n  }\n\n\n  qiblaSmoothedHeading = null;\n}\n\n\n\n\/\/ =====================================\n\/\/ COMPASS PERMISSION NOT AVAILABLE\n\/\/ =====================================\n\nfunction showCompassUnavailable() {\n\n  const guidance =\n    document.getElementById(\n      \"qiblaGuidance\"\n    );\n\n  if (guidance) {\n\n    guidance.innerHTML =\n      \"Live compass permission was not granted. The calculated Qibla bearing above is still available.\";\n\n  }\n}\n<\/script>\n\n<section class=\"it-tool-page\">\n  <div class=\"it-wrap\">\n    <div class=\"it-tool-header\">\n      <span class=\"it-badge\">\ud83e\udded Qibla Direction<\/span>\n      <h1>\u0645\u062d\u062f\u062f \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0628\u0644\u0629<\/h1>\n      <p>\n        Find the Qibla direction from your current location. Allow location permission, then face the shown bearing from true north.\n      <\/p>\n    <\/div>\n\n    <div class=\"it-tool-layout\">\n      <div class=\"it-tool-card\">\n        <h2>How to Use<\/h2>\n        <p>\n          Click the button below and allow browser location permission. The tool will calculate the Qibla direction from your current place.\n        <\/p>\n\n        <button class=\"it-btn it-primary it-load-btn\" onclick=\"calcQibla()\">\n          \u0645\u0639\u0631\u0641\u0629 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0628\u0644\u0629\n        <\/button>\n      <\/div>\n\n      <div class=\"it-result-card\" id=\"qiblaResult\">\n        Click the button to calculate Qibla direction.\n      <\/div>\n    <\/div>\n\n    <div class=\"it-note it-tool-note\">\n      <h2>Important Note<\/h2>\n      <p>\n        For best accuracy, keep your phone away from metal objects, electrical items, vehicles, and magnets. Calibrate your mobile compass before using it.\n      <\/p>\n    <\/div>\n  <\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>\ud83e\udded Qibla Direction Qibla Direction Finder Find the Qibla direction from your current location. Allow location permission, then face the shown bearing from true north. How to Use Click the button below and allow browser location permission. The tool will calculate the Qibla direction from your current place. Find Qibla Direction Click the button to&#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":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-149","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\/149","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=149"}],"version-history":[{"count":5,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/149\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/pages\/149\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/oks.digital\/ar\/wp-json\/wp\/v2\/media?parent=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}