Mercurial > qr-html
view index.html @ 13:a56d5a527f6c
Update qr library?
author | nanaya <me@nanaya.net> |
---|---|
date | Wed, 11 Sep 2024 21:17:14 +0900 |
parents | a8e0607093f3 |
children | 1fbe0b098f0f |
line wrap: on
line source
<!doctype html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QR Code Generator</title> <style type="text/css"> * { box-sizing: border-box; } html { height: 100%; margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 12px; } body { margin: 0; padding: 10px; height: 100%; } .inputbox { width: 100%; margin-bottom: 10px; resize: vertical; font-family: Courier New, monospace; /* prevent ios zoom */ font-size: 16px; } .page { width: 100%; min-height: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; padding: 10px; } .page__main { flex: 1; } .outputbox { will-change: opacity; } .outputbox.js-hidden { opacity: 0; } .outputbox > canvas { display: none; } .outputbox > img { max-width: 100%; max-height: calc(100vh - 250px); } .title { font-size: 16px; } </style> </head> <body> <div class="page"> <div class="page__main"> <h1>QR Code Generator</h1> <p> Type something and get its QR code (almost) immediately. </p> <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea> <div class="outputbox js-qr-output"></div> </div> <div> <hr> <a href="https://hg.sr.ht/~nanaya/qr-html">Source</a> </div> </div> <script src="qrcode.min.js"></script> <script> var inputDom = document.querySelector(".js-qr-input") var outputDom = document.querySelector(".js-qr-output") var qr = new QRCode(outputDom, { correctLevel: QRCode.CorrectLevel.L, width: 1024, height: 1024 }) var runTimeout = null var debouncedRefreshCode = function() { clearTimeout(runTimeout) runTimeout = setTimeout(refreshCode, 100) } var refreshCode = function() { var text = inputDom.value if (text !== "") { qr.makeCode(text) outputDom.classList.remove('js-hidden') } else { outputDom.classList.add('js-hidden') } } inputDom.addEventListener('input', debouncedRefreshCode) refreshCode() </script> </body>