Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Notary Visit Check</title>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background:#f8fafc; color:#0f172a; }
  h2 { color:#0284c7; }
  input, button { padding:10px; margin:5px 0; font-size:16px; }
  button { cursor:pointer; border:none; border-radius:6px; }
  #setBtn { background:#0ea5e9; color:white; }
  #gpsBtn { background:#22c55e; color:white; }
  #status { margin-top:15px; font-weight:bold; }
  .ok { color:green; }
  .fail { color:red; }
  #photos { display:none; margin-top:15px; }
</style>
</head>
<body>

<h2>Notary Visit Verification</h2>

<label>Enter Address:</label><br>
<input type="text" id="address" placeholder="e.g. 520 SW 14th Ave, Miami FL"><br>
<button id="setBtn" onclick="setTarget()">Set Address</button>

<p id="targetInfo"><em>No target set yet</em></p>

<button id="gpsBtn" onclick="verifyLocation()" disabled>I am here</button>

<div id="status">Waiting...</div>

<div id="photos">
  <p>Upload proof photos (max 3):</p>
  <input type="file" accept="image/*" capture="environment"><br>
  <input type="file" accept="image/*" capture="environment"><br>
  <input type="file" accept="image/*" capture="environment"><br>
  <button>Submit</button>
</div>

<script>
let targetLat = null, targetLng = null;

// Very simple: we "set" the address but here we put fixed coordinates.
// You would replace with real geocoding if needed.
function setTarget(){
  const addr = document.getElementById("address").value.trim();
  if(!addr){ alert("Please enter an address"); return; }
  // For demo: just hardcode Miami coordinates
  if(addr.includes("520")){ targetLat = 25.7683; targetLng = -80.2230; }
  else { targetLat = 25.774; targetLng = -80.19; }
  document.getElementById("targetInfo").innerHTML =
    "Target set for: <b>"+addr+"</b><br>Coords: "+targetLat+", "+targetLng;
  document.getElementById("gpsBtn").disabled = false;
}

function haversine(lat1, lon1, lat2, lon2){
  const R=6371000, toRad=x=>x*Math.PI/180;
  const dLat=toRad(lat2-lat1), dLon=toRad(lon2-lon1);
  const a=Math.sin(dLat/2)**2+Math.cos(toRad(lat1))*Math.cos(toRad(lat2))*Math.sin(dLon/2)**2;
  return 2*R*Math.asin(Math.sqrt(a));
}

function verifyLocation(){
  if(!navigator.geolocation){ alert("GPS not available"); return; }
  navigator.geolocation.getCurrentPosition(pos=>{
    const lat=pos.coords.latitude, lng=pos.coords.longitude;
    const d=haversine(lat,lng,targetLat,targetLng);
    if(d<=10){
      document.getElementById("status").innerHTML="✅ Correct ("+d.toFixed(1)+" m)";
      document.getElementById("status").className="ok";
      document.getElementById("photos").style.display="block";
    } else {
      document.getElementById("status").innerHTML="❌ Too far ("+d.toFixed(1)+" m). Move closer.";
      document.getElementById("status").className="fail";
      document.getElementById("photos").style.display="none";
    }
  },err=>{
    document.getElementById("status").innerHTML="Error: "+err.message;
  },{enableHighAccuracy:true});
}
</script>

</body>
</html>

Denny Borges PA