http
HTTP/1.1 200 OK
Content-Type: text/html
Permissions-Policy: magnetometer=(self), geolocation=(self), gyroscope=(self)
<!DOCTYPE html>
<html>
<head><title>Navigation</title></head>
<body>
<div id="compass">North: --°</div>
<script>
const magnetometer = new Magnetometer({frequency: 10});
magnetometer.addEventListener('reading', () => {
const x = magnetometer.x;
const y = magnetometer.y;
const z = magnetometer.z;
const heading = Math.atan2(y, x) * (180 / Math.PI);
document.getElementById('compass').textContent = `North: ${heading.toFixed(0)}°`;
});
magnetometer.start();
</script>
</body>
</html>