device motion permission request

js/navbar.mjs

@@ -283,7 +283,7 @@ monotone-shape {
                                     text="Infrastructure Development"></monotone-shape>Infrastructure Development</a>
                         </li>
                         <li><a href="./services.html#design-build"><monotone-shape height="20px" width="20px" shape-id=""
-                                    text="Design & Build"></monotone-shape>Design & Build</a></li>
+                                    text="Design & Build"></monotone-shape>Design and Build</a></li>
                         <li><a href="./services.html#joint-venture-model"><monotone-shape height="20px" width="20px" shape-id=""
                                     text="Joint Venture Model"></monotone-shape>Joint Venture Model</a></li>
                     </ul>

js/tower.js

@@ -9,6 +9,27 @@ function rotateModel(scrollPos) {
   model.setAttribute("rotation", `0 ${rotationY} 0`);
   lastKnownScrollPosition = scrollPos;
 }
+if (DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function") {
+  // For iOS 13+ where permission is required
+  DeviceMotionEvent.requestPermission()
+      .then(permissionState => {
+          if (permissionState === 'granted') {
+              window.addEventListener('devicemotion', handleMotion);
+          } else {
+              // Fallback if permission is not granted
+              handleNoMotionSupport();
+          }
+      })
+      .catch(console.error);
+} else {
+  // No motion support on this device or browser
+  handleNoMotionSupport();
+}
+
+function handleNoMotionSupport() {
+  console.log("Device motion access not available.");
+  // Implement a fallback experience here
+}
 
 document.addEventListener("scroll", () => {
   if (!ticking) {