Here's a very simple project that IMHO can help finding missing people, whether is someone with limited cognitive capabilities or even a "normal" person who happens to pass out in an unknown location, e.g. The requirements is that the target person carries a QR code (a forearm tattoo is suggested).
Disclaimer
Despite its good cause, this project can illustrate how dangerous and malicious a JavaScript code can be, as this one will send and email with the users' coordinates to an unknown person without their knowledge.
There is the purposed flow:
- Person "A" goes missing
- Person "B" finds person "A"
- "B" scans the QR code using a phone
- A web page is loaded, and 2 things happen:
- "B" sees some basic info for person "A"
- In the background, an email is sent to person "C" (who is responsible for person "A"), containing person "B" 's coordinates (provided that they have location settings on).
Tips:
- Host web pages for free: https://pages.github.com/
- Use a url-shortener to get a simpler QR code
- Use DuckDuckGo's search engine to get a QR code. Just type qr and the desired URL
Here's what the page could look like:
Here you will get the library to send emails and info on how to get a free SMTP server: https://smtpjs.com/
JS:
script.js
function sendEmail(body) {
Email.send({
Host: "smtp.elasticemail.com",
Username: "<mail>",
Password: "<password>",
To: '<email>',
From: "<email>",
Subject: "John Doe has been found!",
Body: body
});
}
function sendEmailWithCoordinates(pos) {
let lat = pos.coords.latitude;
let lng = pos.coords.longitude;
let url = `https://www.google.com/maps/dir//${lat},${lng}/@${lat},${lng},21z/data=!4m2!4m1!3e2`;
sendEmail(url);
}
function sendEmailWithoutCoordinates() {
sendEmail("Could not get the device's coordinates...");
}
function startLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(sendEmailWithCoordinates, sendEmailWithoutCoordinates);
}
}
window.addEventListener("load", startLocation);
By using this same API (navigator.geolocation), you can set the location for a "watch" mode, and keep sending multiple emails with the updated coordinates, instead of sending it only once. For more info regarding Geolocation API: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HELP ME. I AM LOST</title>
<link rel="stylesheet" href="style.css">
<script defer src="https://smtpjs.com/v3/smtp.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="main">
<img src="photo.jpg" alt="JOHN DOE'S PHOTO">
<h1>JOHN DOE</h1>
<h2>PLEASE, CALL MY RELATIVE:</h2>
<a href="tel:+351999999999">
<h1>(+351) 999 999 999</h1>
</a>
<h3>MY ADDRESS:</h3>
<address>10,MAIN STREET</address>
<a href="https://www.google.com/maps/dir//41.2766,-8.3762/@41.2766,-8.3762,21z/data=!4m2!4m1!3e2">
<button>MAP TO MY HOUSE</button>
</a>
</body>
</html>
CSS
style.css
body,
html {
margin: 0px;
height: 100%;
}
#main {
justify-items: center;
align-items: center;
text-align: center;
background-color: lightcyan;
padding: 5%;
}
img {
width: 60%;
border: solid 3px;
border-radius: 3px;
}
button {
padding: 5%;
margin: 5%;
background-color: blue;
color: white;
}
Thanks for the time reading this!
Follow me:
LinkedIn | Dev.to | Buy me a coffee | GitHub
Top comments (0)