<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Found this bag?</title>
<style>
body {
margin: 0;
background: radial-gradient(1200px 600px at 50% -10%, #1c1f26, #0b0d11);
color: #f5f7fb;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
}
.card {
max-width: 520px;
margin: 48px auto;
padding: 28px;
border-radius: 18px;
background: rgba(255,255,255,0.06);
box-shadow: 0 10px 40px rgba(0,0,0,.45);
backdrop-filter: blur(8px);
}
h1 {
margin-top: 0;
font-size: 32px;
}
p {
line-height: 1.6;
opacity: .95;
}
.buttons {
margin: 24px 0;
display: grid;
gap: 12px;
}
a.button {
text-decoration: none;
text-align: center;
padding: 14px;
border-radius: 12px;
font-weight: 600;
background: #ffffff;
color: #0b0d11;
}
a.button.secondary {
background: rgba(255,255,255,0.12);
color: #fff;
}
.tip {
font-size: 14px;
opacity: .85;
margin-top: 18px;
}
</style>
</head>
<body>
<div class="card">
<h1>Found this bag?</h1>
<p>
Thank you! Please message me with where you found it.
I’ll respond ASAP.
</p>
<div class="buttons">
<a class="button" id="smsBtn">Text me (fastest)</a>
<a class="button secondary" id="callBtn">Call me</a>
<a class="button secondary" id="emailBtn">Email me</a>
</div>
<p class="tip">
<strong>Tip:</strong> If you’re at an airport, airline lost & found works too.
<br />
<strong>To confirm it’s mine:</strong> ask me to describe the bag or contents.
</p>
</div>
<script>
const PHONE_E164 = "+12148”031293;
const EMAIL = "todd@toddandnicole.com";
document.getElementById("smsBtn").href =
`sms:${PHONE_E164}?body=` +
encodeURIComponent("Hi! I found your bag and scanned the tag.");
document.getElementById("callBtn").href = `tel:${PHONE_E164}`;
document.getElementById("emailBtn").href =
`mailto:${EMAIL}?subject=` +
encodeURIComponent("Found your bag");
</script>
</body>
</html>