add a new wersion Compass

lenadgit · Jan 25, 2024 · 7751cfd · 7751cfd
1 parent 190acc9
commit 7751cfd
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 0 deletions.
diff --git a/compass-2/index.html b/compass-2/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>Compass</title>
+
+    <link href="css/style.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="compass">
+      <div class="arrow"></div>
+      <div class="compass-circle"></div>
+      <div class="my-point"></div>
+    </div>
+      <button class="start-btn">Start compass</button>
+
+    <script>
+      const compassCircle = document.querySelector(".compass-circle");
+      const startBtn = document.querySelector(".start-btn");
+      const myPoint = document.querySelector(".my-point");
+      let compass;
+      const isIOS = !(
+        navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
+        navigator.userAgent.match(/AppleWebKit/)
+  );
+      function init() {
+        startBtn.addEventListener("click", startCompass);
+};
+
+function startCompass() {
+  if (isIOS) {
+    DeviceOrientationEvent.requestPermission()
+      .then((response) => {
+        if (response === "granted") {
+          window.addEventListener("deviceorientation", handler, true);
+        } else {
+          alert("has to be allowed!");
+        }
+      })
+      .catch(() => alert("not supported"));
+  } else {
+    window.addEventListener("deviceorientationabsolute", handler, true);
+  }
+}
+
+function handler(e) {
+  compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
+  compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
+}
+
+init();
+    </script>
+  </body>
+</html>
diff --git a/compass-2/style.css b/compass-2/style.css
@@ -0,0 +1,44 @@
+.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: 0;
+  height: 0;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-style: solid;
+  border-width: 30px 20px 0 20px;
+  border-color: red transparent transparent transparent;
+  z-index: 1;
+}
+
+.compass > .compass-circle,
+.compass > .my-point {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: transform 0.1s ease-out;
+  background: url(https://cdn.onlinewebfonts.com/svg/img_467023.png) center
+    no-repeat;
+  background-size: contain;
+}
+
+.compass > .my-point {
+  opacity: 0;
+  width: 20%;
+  height: 20%;
+  background: rgb(8, 223, 69);
+  border-radius: 50%;
+  transition: opacity 0.5s ease-out;
+}