QR Code Router

https://wanderproof.ca/pages/qr

<p id="wp-status">Checking QR code…</p>

<div id="wp-registration" style="display:none;">
  <h2>Register Your WanderProof Garment</h2>
  <p>Enter the information you'd like shown if someone finds your loved one.</p>
  <form method="POST" action="https://formspree.io/f/mblblneb">
    <input type="hidden" name="qrid" id="qrid" value="">
    <label>Wearer Name:<br><input type="text" name="wearer"></label><br><br>
    <label>Caregiver Name:<br><input type="text" name="caregiver"></label><br><br>
    <label>Caregiver Phone or Email:<br><input type="text" name="contact"></label><br><br>
    <label>Optional Notes:<br><textarea name="notes"></textarea></label><br><br>
    <button type="submit">Register Garment</button>
  </form>
</div>

<div id="wp-public" style="display:none; padding:20px; text-align:left;">
  <h2 style="font-size: 24px; margin-bottom: 10px;">WanderProof Safety Alert</h2>

  <p style="font-size: 18px; margin-bottom: 20px;">
    This person may need assistance. Please use the contact information below to reach their caregiver.
  </p>

  <div id="wp-public-details"
       style="font-size: 18px; background:#f7f7f7; padding:15px; border-radius:8px;">
  </div>

  <br>

  <form method="POST" action="https://formspree.io/f/mblblneb">
    <input type="hidden" name="qrid" id="alert-qrid">
    <input type="hidden" name="type" value="scan-alert">
    <button type="submit"
            style="margin-top:20px; padding:12px 20px; font-size:18px; background:#333;
            color:#fff; border:none; border-radius:6px;">
      Notify the caregiver I found this person
    </button>
  </form>

</div>

<script>
  const params = new URLSearchParams(window.location.search);
  const qrid = params.get('id');

  if (!qrid) {
    document.getElementById('wp-status').innerText = "Invalid link.";
  } else {
    document.getElementById('qrid').value = qrid;
    fetch("https://api.airtable.com/v0/Wanderpoof Garments/Garments?filterByFormula={QRID}='" + qrid + "'", {
      headers: { Authorization: "Bearer YOUR_API_KEY" }
    })
    .then(res => res.json())
    .then(data => {
      const item = data.records[0];
      if (!item) {
        document.getElementById('wp-status').innerText = "QR code not found.";
      } else {
        const fields = item.fields;
        if (fields.registered !== "yes") {
          // unregistered
          document.getElementById('wp-status').style.display = "none";
          document.getElementById('wp-registration').style.display = "block";
        } else {
          // registered garment
          document.getElementById('wp-status').style.display = "none";
          document.getElementById('wp-public').style.display = "block";
          document.getElementById('wp-public-details').innerHTML =
            "Name: " + fields.wearer + "<br>" +
            "Please contact: " + fields.caregiver + " (" + fields.contact + ")<br>" +
            (fields.notes ? ("Notes: " + fields.notes) : "");
        }
      }
    });
  }
</script>