125 lines
5.3 KiB
HTML
125 lines
5.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
|
|
<title>Helia UPlanet Connection</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="awesome.css"> <!-- Include Font Awesome CSS -->
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
#background-container {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-image: url('Umap.jpg'); /* Replace with your image URL */
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
z-index: -1; /* Set a lower z-index to place it behind the arrow container */
|
||
|
|
}
|
||
|
|
|
||
|
|
#arrow-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-image: url('Umap.jpg'); /* Replace with your image URL */
|
||
|
|
z-index: 1; /* Set a higher z-index to place it above the background image */
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow {
|
||
|
|
position: absolute;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
||
|
|
border-radius: 50%;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 50px;
|
||
|
|
font-size: 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#top-left { top: 0; left: 0; transform: translate(0, 0); }
|
||
|
|
#top-center { top: 0; left: 50%; transform: translateX(-50%); }
|
||
|
|
#top-right { top: 0; right: 0; transform: translate(0, 0); }
|
||
|
|
#middle-left { top: 50%; left: 0; transform: translateY(-50%); }
|
||
|
|
#middle-right { top: 50%; right: 0; transform: translateY(-50%); }
|
||
|
|
#bottom-left { bottom: 0; left: 0; transform: translate(0, 0); }
|
||
|
|
#bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
|
||
|
|
#bottom-right { bottom: 0; right: 0; transform: translate(0, 0); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="background-container"></div>
|
||
|
|
<div id="arrow-container">
|
||
|
|
<script>
|
||
|
|
// Get the current page's filename
|
||
|
|
const currentPageFileName = window.location.pathname.split('/').pop();
|
||
|
|
|
||
|
|
// Extract latitude and longitude from the filename
|
||
|
|
const match = currentPageFileName.match(/umap_([\d.]+)_([\d.]+)\.html/);
|
||
|
|
|
||
|
|
if (match) {
|
||
|
|
// Check if latitude and longitude are whole numbers
|
||
|
|
let currentLat = parseFloat(match[1]);
|
||
|
|
let currentLon = parseFloat(match[2]);
|
||
|
|
|
||
|
|
// Convert to numbers with two decimal places if not already
|
||
|
|
if (!isNaN(currentLat)) {
|
||
|
|
currentLat = currentLat.toFixed(2);
|
||
|
|
}
|
||
|
|
if (!isNaN(currentLon)) {
|
||
|
|
currentLon = currentLon.toFixed(2);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Now, you have the latitude and longitude values with two decimal places
|
||
|
|
console.log('Latitude:', currentLat);
|
||
|
|
console.log('Longitude:', currentLon);
|
||
|
|
|
||
|
|
// Calculate URLs with variations in latitude and longitude
|
||
|
|
const urls = [
|
||
|
|
`umap_${(parseFloat(currentLat) + 0.01).toFixed(2)}_${currentLon}.html`,
|
||
|
|
`umap_${(parseFloat(currentLat) + 0.01).toFixed(2)}_${(parseFloat(currentLon) - 0.01).toFixed(2)}.html`,
|
||
|
|
`umap_${(parseFloat(currentLat) + 0.01).toFixed(2)}_${(parseFloat(currentLon) + 0.01).toFixed(2)}.html`,
|
||
|
|
`umap_${currentLat}_${(parseFloat(currentLon) - 0.01).toFixed(2)}.html`,
|
||
|
|
`umap_${currentLat}_${(parseFloat(currentLon) + 0.01).toFixed(2)}.html`,
|
||
|
|
`umap_${(parseFloat(currentLat) - 0.01).toFixed(2)}_${(parseFloat(currentLon) - 0.01).toFixed(2)}.html`,
|
||
|
|
`umap_${(parseFloat(currentLat) - 0.01).toFixed(2)}_${currentLon}.html`,
|
||
|
|
`umap_${(parseFloat(currentLat) - 0.01).toFixed(2)}_${(parseFloat(currentLon) + 0.01).toFixed(2)}.html`
|
||
|
|
];
|
||
|
|
|
||
|
|
// Add arrow links with Font Awesome icons
|
||
|
|
const arrowClasses = ['fas fa-arrow-down', 'fas fa-arrow-up', 'fas fa-arrow-up', 'fas fa-arrow-up', 'fas fa-arrow-left', 'fas fa-arrow-right', 'fas fa-arrow-right', 'fas fa-arrow-down'];
|
||
|
|
|
||
|
|
urls.forEach((url, index) => {
|
||
|
|
const arrow = document.createElement('a');
|
||
|
|
arrow.href = url;
|
||
|
|
arrow.innerHTML = `<i class="${arrowClasses[index]}"></i>`;
|
||
|
|
arrow.className = 'arrow';
|
||
|
|
|
||
|
|
// Position arrows
|
||
|
|
const positions = [
|
||
|
|
{ top: 0, left: '50%' },
|
||
|
|
{ top: 0, left: 0 },
|
||
|
|
{ top: 0, right: 0 },
|
||
|
|
{ top: '50%', left: 0 },
|
||
|
|
{ top: 0, left: '50%' },
|
||
|
|
{ bottom: 0, left: 0 },
|
||
|
|
{ top: '50%', right: 0 },
|
||
|
|
{ bottom: 0, right: 0 }
|
||
|
|
];
|
||
|
|
|
||
|
|
Object.assign(arrow.style, positions[index]);
|
||
|
|
document.getElementById('arrow-container').appendChild(arrow);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log('Filename does not match the expected pattern.');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|