1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / qibla /
Filename : index.html
back
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Qibla Compass</title>
      <link rel="stylesheet" href="./style.css">
      <link rel="icon" type="image/png" href="https://img.icons8.com/color/48/000000/qibla-direction.png"/>
   </head>
   <body>
       <div class="bubble">
          <h3 style="text-align:center;background: -webkit-linear-gradient(#006993, #20B2AB);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;">Qibla Compass, the Direction of Islamic Prayer</h3>
            <div class="alert">
               <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
               <p id="text"></p>
            </div>
            <script type="text/javascript">
            var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
            var element = document.getElementById('text');
            if (isMobile) {
               element.innerText = "Your Browser is Compatible with the Compass";
            } else {
               element.innerText = "A PC is not compatible with this compass as it lacks a motion controller, please use a mobile device.";
               }
               </script>
               <script>
                  var close = document.getElementsByClassName("closebtn");
                  var i;
                  
                  for (i = 0; i < close.length; i++) {
                    close[i].onclick = function(){
                      var div = this.parentElement;
                      div.style.opacity = "0";
                      setTimeout(function(){ div.style.display = "none"; }, 600);
                    }
                  }
                  </script>
            <h4>How it Works:</h4>
            <p>When the compass is pointed towards the Qibla, a green circle will appear at the center of the compass, this is the correct direction of prayer from your location.</p>
       </div>
       <br></br>
        <div class="compass">
         <div class="arrow"></div>
         <div class="compass-circle"></div>
         <div class="my-point"></div>
      </div>
      <br></br>
      <button class="start-btn">
            <h4 style="text-align:center; font-size: 24px;background: -webkit-linear-gradient(#006993, #20B2AB);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;">Start Qibla Compass</h4>
      </button>
   </body>
  <!-- <script src="compass.js"></script>-->

<script>
   const compassCircle = document.querySelector(".compass-circle");
const myPoint = document.querySelector(".my-point");
const startBtn = document.querySelector(".start-btn");
const isIOS =
  navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
  navigator.userAgent.match(/AppleWebKit/);

function init() {
   
  //startBtn.addEventListener("click", startCompass);
  navigator.geolocation.getCurrentPosition(locationHandler);

  var successHandler = function(position) { 
alert(position.coords.latitude); 
alert(position.coords.longitude); 
}; 

var errorHandler = function (errorObj) { 
alert(errorObj.code + ": " + errorObj.message); 

alert("something wrong take this lat " + 26.0546106 ); 
alert("something wrong take this lng " +-98.3939791); 

}; 

navigator.geolocation.getCurrentPosition( 
successHandler, errorHandler, 
{enableHighAccuracy: true, maximumAge: 10000});

  if (!isIOS) {
    window.addEventListener("deviceorientationabsolute", handler, true);
  }
}

function startCompass() {
  if (isIOS) {
    DeviceOrientationEvent.requestPermission()
      .then((response) => {
        if (response === "granted") {
          window.addEventListener("deviceorientation", handler, true);
        } else {
          alert("Location Services must be Allowed");
        }
      })
      .catch(() => alert("not supported"));
  }
}

function handler(e) {
  compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
  compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;

  // ±15 degree
  if (
    (pointDegree < Math.abs(compass) &&
      pointDegree + 15 > Math.abs(compass)) ||
    pointDegree > Math.abs(compass + 15) ||
    pointDegree < Math.abs(compass)
  ) {
    myPoint.style.opacity = 0;
  } else if (pointDegree) {
    myPoint.style.opacity = 1;
  }
}

let pointDegree;

function locationHandler(position) {
   alert("asd");
  /*const { latitude, longitude } = position.coords;
  pointDegree = calcDegreeToPoint(latitude, longitude);

  if (pointDegree < 0) {
    pointDegree = pointDegree + 360;
  }*/
}

function calcDegreeToPoint(latitude, longitude) {
  // Qibla geolocation
  const point = {
    lat: 21.422487,
    lng: 39.826206
  };

  const phiK = (point.lat * Math.PI) / 180.0;
  const lambdaK = (point.lng * Math.PI) / 180.0;
  const phi = (latitude * Math.PI) / 180.0;
  const lambda = (longitude * Math.PI) / 180.0;
  alert(lambda);
  const psi =
    (180.0 / Math.PI) *
    Math.atan2(
      Math.sin(lambdaK - lambda),
      Math.cos(phi) * Math.tan(phiK) -
        Math.sin(phi) * Math.cos(lambdaK - lambda)
    );
  return Math.round(psi);
}

init();
</script>  
</html>