<!DOCTYPE html>
<html>
<head>
<title>Qibla Compass</title>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var lat1 = position.coords.latitude;
var lon1 = position.coords.longitude;
var lat2 = 21.422508; // latitude of Kaaba in Mecca
var lon2 = 39.826163; // longitude of Kaaba in Mecca
var y = Math.sin(lon2-lon1) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(lon2-lon1);
var brng = (Math.atan2(y, x) * 180 / Math.PI + 360) % 360;
document.getElementById("qibla").innerHTML = brng.toFixed(2) + " направление";
document.getElementById("compass").style.transform = "rotate(" + (360 - brng) + "deg)";
}
</script>
<style>
#compass {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: url('88.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform-origin: center;
transform: rotate(0deg);
transition: transform 1s ease;
}
</style>
</head>
<body onload="getLocation()">
<h1>Кибла Компас</h1>
<p>Ваше текущее направление Киблы:</p>
<div id="compass"></div>
<p>
Направление: <span id="qibla"></span></p>
</body>
</html>
