Add qibla app

soIu · Jun 20, 2024 · 561688f · 561688f
1 parent ae0d8ac
commit 561688f
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 0 deletions.
diff --git a/arrow.png b/arrow.png
diff --git a/kaba.png b/kaba.png
diff --git a/mosque.png b/mosque.png
diff --git a/qibla.html b/qibla.html
@@ -0,0 +1,178 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <style>
+      html {
+        background-color: #0A2463;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        /*background: url(https://s3-alpha-sig.figma.com/img/62f2/bf97/4a3b9901acf2eed77ce9898bf6d459d2?Expires=1719792000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=WO43B5l5G7HQJSUEl-v2WWyVCRDvhuG~hc0S7VzpsIZazoQga~m4k1Vbuaw3vY2BsUqyAbxvrEbyjq3AJR064gT8rptt9~~oiD6A3J6La4iUrNepw0F2OZEFRBxqsfmGJaooiJ7Tr2V0Zt48suZZ8RB-Jt-LXD9RuQIlIjz98EupgzrHnoYeSf-kEZKy~I57UT9m1RS9gDcoXvG-ShtqdiNDoTzhJfYneg82IsA5XZ6WLbUFFKV2ZFRWd~PL-tffGy~wbHHs99Gchb5xXl4ZBba6-1NKBDT6YZ51EtRo57On98HcHc7yI6gdjbr7iftiXHmc5jf1IhkoOVsMqBhOeA__)
+          bottom no-repeat;
+        background-size: contain;*/
+        overflow: hidden;
+      }
+
+      .compass {
+        position: relative;
+        width: 320px;
+        height: 320px;
+        border-radius: 50%;
+        /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
+        margin: auto;
+      }
+
+      .compass > .arrow {
+        position: absolute;
+        width: 120px;
+        height: 90px;
+        top: -100px;
+        left: 50%;
+        transform: translateX(-50%);
+        /*border-style: solid;
+        border-width: 30px 20px 0 20px;
+        border-color: red transparent transparent transparent;*/
+        background: url(kaba.png)
+          center no-repeat;
+        background-size: contain;
+        z-index: 1;
+        transition: opacity 0.5s ease-out;
+        mix-blend-mode: hard-light;
+      }
+
+      .compass > .compass-circle,
+      .compass > .my-point {
+        position: absolute;
+        width: 90%;
+        height: 90%;
+        top: 70%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        transition: transform 0.1s ease-out;
+        background: url(arrow.png)
+          center no-repeat;
+        background-size: 110px;
+      }
+
+      .compass > .my-point {
+        opacity: 0;
+        width: 20%;
+        height: 20%;
+        background: rgb(8, 223, 69);
+        border-radius: 50%;
+        transition: opacity 0.5s ease-out;
+      }
+
+      .start-btn {
+        margin-bottom: auto;
+      }
+    </style>
+  </head>
+  <body style="margin: 0px;">
+    <div class="compass">
+      <div class="arrow"></div>
+      <div class="compass-circle"></div>
+      <div class="my-point"></div>
+    </div>
+    <button style="display: none" class="start-btn">Start compass</button>
+    <img style="left: 50%; transform: translateX(-50%); position: absolute; bottom: -125px; width: 393px; height: 652px; z-index: -1" src="mosque.png"></img>
+  </body>
+  <script>
+    var compassCircle = document.querySelector(".compass-circle");
+    var arrow = document.querySelector(".arrow");
+    var myPoint = document.querySelector(".my-point");
+    var startBtn = document.querySelector(".start-btn");
+    var isIOS =
+      navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
+      navigator.userAgent.match(/AppleWebKit/);
+
+    function init() {
+      startBtn.addEventListener("click", startCompass);
+      navigator.geolocation.getCurrentPosition(locationHandler);
+
+      if (!isIOS) {
+        window.addEventListener("deviceorientationabsolute", handler, true);
+      }
+    }
+
+    function startCompass() {
+      if (isIOS) {
+        DeviceOrientationEvent.requestPermission()
+          .then((response) => {
+            if (response === "granted") {
+              window.addEventListener("deviceorientation", handler, true);
+            } else {
+              console.error("has to be allowed!");
+            }
+          })
+          .catch(() => console.error("not supported"));
+      }
+    }
+
+    function handler(e) {
+      compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
+      //compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
+
+      if (pointDegree !== undefined) {
+        compassCircle.style.transform = `translate(-50%, -50%) rotate(${(Math.abs(pointDegree) - Math.abs(compass))}deg)`;
+        if (window.ReactNativeWebView) {
+          window.ReactNativeWebView.postMessage('done');
+        }
+      }
+      // ±15 degree
+      if (
+        (pointDegree < Math.abs(compass) &&
+          pointDegree + 15 > Math.abs(compass)) ||
+        pointDegree > Math.abs(compass + 15) ||
+        pointDegree < Math.abs(compass)
+      ) {
+        arrow.style.opacity = 0.4;
+      } else if (pointDegree) {
+        arrow.style.opacity = 1;
+      }
+    }
+
+    var pointDegree;
+
+    function locationHandler(position) {
+      var { latitude, longitude } = position.coords;
+      pointDegree = calcDegreeToPoint(latitude, longitude);
+
+      if (pointDegree < 0) {
+        pointDegree = pointDegree + 360;
+      }
+    }
+
+    function calcDegreeToPoint(latitude, longitude) {
+      // Qibla geolocation
+      var point = {
+        lat: 21.422487,
+        lng: 39.826206
+      };
+
+      var phiK = (point.lat * Math.PI) / 180.0;
+      var lambdaK = (point.lng * Math.PI) / 180.0;
+      var phi = (latitude * Math.PI) / 180.0;
+      var lambda = (longitude * Math.PI) / 180.0;
+      var 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>
+