69 lines
2.0 KiB
HTML
69 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, internal-scale=1, viewport-fit=cover">
|
|
<title>My Luggage Info</title>
|
|
<link rel="stylesheet" href="/static/style.css?v=43">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<a class="icon-link" href="/">
|
|
<img class="header-icon" src="/static/icon.png" alt="icon"/>
|
|
</a>
|
|
<h1 class="title">My Luggage Info</h1>
|
|
<div class="spacer"></div>
|
|
</header>
|
|
<div class="container">
|
|
<div class="content flex-vertical">
|
|
<div class="section-one">
|
|
<h1>QR Code</h1>
|
|
<a id="qr-link" href="">
|
|
<div id="qr"></div>
|
|
</a>
|
|
</div>
|
|
<div class="section-two">
|
|
<div id="loading"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<p class="footer-text">Made hastily by <a class="footer-text" href="https://www.linkedin.com/in/steven-tracey18/">Steven Tracey</a></p>
|
|
</footer>
|
|
|
|
<script src="/static/qrcode.min.js"></script>
|
|
<script>
|
|
const path = window.location.pathname;
|
|
const parts = path.split("/");
|
|
const user = parts.pop();
|
|
let url = location.protocol + "//" + location.host + "/u/" + user;
|
|
|
|
const qrcode = new QRCode(document.getElementById('qr'), {
|
|
text: url,
|
|
width: 1024,
|
|
height: 1024,
|
|
colorDark : '#000',
|
|
colorLight : '#fff',
|
|
correctLevel : QRCode.CorrectLevel.L
|
|
});
|
|
|
|
let qrLink = document.getElementById("qr-link");
|
|
let qrImg = document.querySelector("#qr img");
|
|
console.log(qrImg.src);
|
|
qrLink.setAttribute("download", "qrcode-" + user + ".png");
|
|
|
|
const delay = ms => new Promise(res => setTimeout(res, ms));
|
|
const setHref = async () => {
|
|
while (!qrLink.href.startsWith("data:")) {
|
|
await delay(100);
|
|
qrLink.setAttribute("href", qrImg.src);
|
|
console.log("Refreshing...");
|
|
}
|
|
document.getElementById("loading").remove();
|
|
};
|
|
setHref();
|
|
</script>
|
|
</body>
|
|
</html> |