forked from STI/Astroport.ONE
134 lines
4.1 KiB
HTML
134 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Compass</title>
|
|
<style>
|
|
#compass {
|
|
width: 300px;
|
|
height: 300px;
|
|
border: 2px solid black;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
margin: 50px auto;
|
|
}
|
|
.needle {
|
|
width: 2px;
|
|
height: 150px;
|
|
background-color: red;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
transition: transform 0.5s ease;
|
|
}
|
|
#location-info {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="compass">
|
|
<div id="needle-1" class="needle"></div>
|
|
<div id="needle-2" class="needle"></div>
|
|
<div id="needle-3" class="needle"></div>
|
|
<div id="needle-4" class="needle"></div>
|
|
<div id="needle-5" class="needle"></div>
|
|
<div id="needle-6" class="needle"></div>
|
|
<div id="needle-7" class="needle"></div>
|
|
<div id="needle-8" class="needle"></div>
|
|
</div>
|
|
<div id="location-info"></div>
|
|
|
|
<script>
|
|
function degreesToRadians(degrees) {
|
|
return degrees * (Math.PI/180);
|
|
}
|
|
|
|
function distanceBetweenCoords(lat1, lon1, lat2, lon2) {
|
|
var earthRadiusKm = 6371;
|
|
|
|
var dLat = degreesToRadians(lat2-lat1);
|
|
var dLon = degreesToRadians(lon2-lon1);
|
|
|
|
var a =
|
|
Math.sin(dLat/2) * Math.sin(dLat/2) +
|
|
Math.cos(degreesToRadians(lat1)) * Math.cos(degreesToRadians(lat2)) *
|
|
Math.sin(dLon/2) * Math.sin(dLon/2);
|
|
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
|
var distance = earthRadiusKm * c;
|
|
|
|
return distance;
|
|
}
|
|
|
|
function updateCompass(heading) {
|
|
var needles = document.querySelectorAll('.needle');
|
|
needles.forEach(function(needle) {
|
|
needle.style.transform = `translateX(-50%) translateY(-50%) rotate(${heading}deg)`;
|
|
});
|
|
}
|
|
|
|
function showLocationInfo(latitude, longitude) {
|
|
var infoElement = document.getElementById('location-info');
|
|
infoElement.innerHTML = `Latitude: ${latitude.toFixed(5)}, Longitude: ${longitude.toFixed(5)}`;
|
|
|
|
// Calculate distances to key spots with different precisions
|
|
var distances = {
|
|
'Sector 1 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude + 0.01, longitude),
|
|
'Sector 2 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude, longitude + 0.01),
|
|
'Sector 3 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude - 0.01, longitude),
|
|
'Sector 4 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude, longitude - 0.01),
|
|
'Region 1 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude + 0.1, longitude),
|
|
'Region 2 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude, longitude + 0.1),
|
|
'Region 3 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude - 0.1, longitude),
|
|
'Region 4 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude, longitude - 0.1)
|
|
};
|
|
|
|
// Check proximity and open URL if less than 10 meters
|
|
for (var key in distances) {
|
|
var distance = distances[key];
|
|
if (distance < 0.01) { // Less than 10 meters (0.01 in degrees is approximately 10 meters)
|
|
window.open('https://example.com'); // Change URL to the desired one
|
|
break; // Stop checking once a key spot within proximity is found
|
|
}
|
|
}
|
|
|
|
// Display distances
|
|
for (var key in distances) {
|
|
infoElement.innerHTML += `<br>${key}: ${distances[key].toFixed(2)} km`;
|
|
}
|
|
}
|
|
|
|
function getLocation() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
var latitude = position.coords.latitude;
|
|
var longitude = position.coords.longitude;
|
|
|
|
showLocationInfo(latitude, longitude);
|
|
|
|
navigator.geolocation.watchPosition(function(position) {
|
|
var newLatitude = position.coords.latitude;
|
|
var newLongitude = position.coords.longitude;
|
|
|
|
var heading = Math.atan2(newLongitude - longitude, newLatitude - latitude) * (180 / Math.PI);
|
|
updateCompass(heading);
|
|
|
|
showLocationInfo(newLatitude, newLongitude);
|
|
|
|
latitude = newLatitude;
|
|
longitude = newLongitude;
|
|
});
|
|
});
|
|
} else {
|
|
alert("Geolocation is not supported by this browser.");
|
|
}
|
|
}
|
|
|
|
getLocation();
|
|
</script>
|
|
</body>
|
|
</html>
|