<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Location Code Tracker</title>
<style>
body {
font-family: Arial, sans-serif;
background: #0f172a;
color: #e2e8f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
button {
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
background: #22c55e;
color: white;
margin-bottom: 20px;
}
button:hover {
background: #16a34a;
}
.code-box {
font-size: 20px;
background: #1e293b;
padding: 15px 20px;
border-radius: 10px;
min-width: 250px;
text-align: center;
word-break: break-all;
}
.small {
font-size: 12px;
opacity: 0.7;
margin-top: 10px;
text-align: center;
max-width: 300px;
}
</style>
</head>
<body><h2>📍 Simple Location Code Tracker</h2><button onclick="startTracking()">Start</button>
<div class="code-box" id="codeBox">No Code Yet</div><div class="small">Start চাপলে আপনার লোকেশন পারমিশন চাইবে এবং একটি ইউনিক কোড তৈরি হবে</div><script>
function generateCode(lat, lon) {
const time = Date.now().toString(36);
const base = `${lat.toFixed(5)}-${lon.toFixed(5)}`;
return btoa(base + "|" + time).substring(0, 18);
}
function startTracking() {
if (!navigator.geolocation) {
alert("Geolocation not supported");
return;
}
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
const code = generateCode(lat, lon);
document.getElementById("codeBox").innerText = code;
},
function(error) {
alert("Permission denied or error getting location");
}
);
}
</script></body>
</html>
