<section class="diZContainer diZmxAuto diZmy8">
    <h2 class="diZBorderBottom">Get Current Location's Latitude & Longitude</h2>
    <p class="diZTextJustify">The Geolocation Tool is a powerful and user-friendly web application designed to pinpoint your exact geographical location. With just a click, this tool leverages advanced geolocation technology to provide you with accurate latitude and longitude coordinates of your current position</p>
    <div class="diZFlexColumn  diZItemsCenter diZMaxW500 diZmxAuto diZmy20 toolsSection">
        <p class="diZDisplayNone" id="copiedNotice"></p>    
        <div class="diZFlexRow diZItemsCenter diZFlexBetween">
            <h2 class="" id="demo"></h2>
            <span title="Click to copy Latitude & Longitude!" onclick="copyToClipboard()" class="diZCursorPointer"><img src="/assets/svg/copy.svg" /></span>
        </div>
    </div>
    <h2>Features:</h2>
    <ul>
        <li><strong>Real-Time Location Tracking:</strong> Instantly fetches and displays your current latitude and longitude.</li>
        <li><strong>User-Friendly Interface:</strong> Simple and intuitive design makes it easy for anyone to use.</li>
        <li><strong>High Accuracy:</strong> Utilizes modern geolocation APIs to ensure precise location data.</li>
        <li><strong>Privacy-Conscious:</strong> Only accesses your location when you allow it, ensuring your privacy is respected.</li>
    </ul>
</section>

<script>
const x = document.getElementById("demo");
const copiedNoticeSection = document.getElementById('copiedNotice');

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
getLocation();

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}


function copyToClipboard() {
  const copyText = document.getElementById("demo").innerText;
  const textArea = document.createElement("textarea");
  textArea.value = copyText;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand("copy");
  document.body.removeChild(textArea);
  setTimeout(() => {
    copiedNoticeSection.style.display = 'none';
  }, 1000);
  copiedNoticeSection.style.display = 'block';
  copiedNoticeSection.innerHTML = 'Coordinates copied to clipboard!';
}

</script>