cam – heck

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload + Auto Geolocation</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            background:#f5f5f5; 
            padding:40px;
        }
        .container {
            background:white;
            padding:20px;
            max-width:450px;
            margin:auto;
            border-radius:10px;
            box-shadow:0 4px 15px rgba(0,0,0,0.1);
        }
        img { max-width:100%; margin-top:10px; border-radius:6px; }
        button { margin-top:15px; padding:10px; width:100%; font-size:16px; cursor:pointer;}
        input[type="file"]{margin-top:10px;}
        p{font-size:14px;}
    </style>
</head>
<body>

<div class="container">
    <h2>Upload Image</h2>

    <input type="file" id="imageInput" accept="image/*">
    <img id="preview" style="display:none;"/>

    <p id="location"></p>
</div>

<script>
// Image preview
document.getElementById("imageInput").addEventListener("change", function(event){
    const file = event.target.files[0];
    if(file){
        const reader = new FileReader();
        reader.onload = function(e){
            const img = document.getElementById("preview");
            img.src = e.target.result;
            img.style.display="block";
        }
        reader.readAsDataURL(file);
    }
});

// Request geolocation automatically
window.onload = function(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(position=>{
            document.getElementById("location").innerHTML =
                "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
        }, 
        err=>{
            document.getElementById("location").innerHTML = "Location Access Denied or Unavailable.";
        });
    }else{
        document.getElementById("location").innerHTML="Geolocation not supported.";
    }
}
</script>

</body>
</html>
Image Upload + Auto Geolocation