Files
Lockin-QR-WebApp/index.html
Jacky Li 1fca5b4576 Create index.html
Initial import of QR-scanner WebApp
2025-06-25 11:13:11 -07:00

53 lines
1.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Telegram QR Profile Scanner</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!-- Telegram WebApp SDK -->
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>
html, body { margin:0; padding:0; height:100%; background:#000; }
</style>
</head>
<body>
<script>
const tg = window.Telegram.WebApp;
tg.ready();
tg.expand();
// helper regex for exact t.me/username URLs
const tgRe = /^(?:https?:\/\/)?t\.me\/[A-Za-z0-9_]{5,32}$/;
// function to (re)open the native scanner with an optional prompt
function openScanner(prompt) {
tg.showScanQrPopup({
text: prompt || "Scan a Telegram profile QR"
});
}
// 1) launch on load
openScanner();
// 2) handle scan results
tg.onEvent("qrTextReceived", ({ data }) => {
if (tgRe.test(data)) {
// valid Telegram profile ⇒ send back and close
tg.sendData(data);
tg.closeScanQrPopup();
tg.close();
} else {
// invalid ⇒ re-open scanner with warning
tg.closeScanQrPopup();
setTimeout(() => openScanner("Not a Telegram profile. Try again."), 200);
}
});
// 3) handle user cancel
tg.onEvent("scanQrPopupClosed", () => {
tg.close();
});
</script>
</body>
</html>