Mercurial > qr-html
diff index.html @ 0:6b5cab0b3f91
Initial
| author | nanaya <me@myconan.net> |
|---|---|
| date | Sat, 15 Oct 2016 16:38:11 +0900 |
| parents | |
| children | 30cd1768611b |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/index.html Sat Oct 15 16:38:11 2016 +0900 @@ -0,0 +1,89 @@ +<!doctype html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <title>QR Code Generator</title> + + <style type="text/css"> + * { + position: relative; + box-sizing: border-box; + } + + html { + height: 100%; + margin: 0; + padding: 0; + font-family: sans-serif; + font-size: 12px; + } + + body { + margin: 0; + padding: 10px; + height: 100%; + } + + .inputbox { + width: 100%; + margin-bottom: 10px; + resize: vertical; + font-family: monospace; + } + + .page { + width: 100%; + height: 100%; + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + padding: 10px; + } + + .page__main { + flex: 1; + } + + .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 immediately. + </p> + + <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea> + + <div class="js-qr-output"></div> + </div> + + <div> + <hr> + + <a href="https://bitbucket.org/nanaya1/qr-html">Source</a> + </div> + </div> + + <script src="jquery.min.js"></script> + <script src="qrcode.min.js"></script> + + <script> + var outputDom = document.getElementsByClassName("js-qr-output")[0]; + var qr = new QRCode(outputDom); + + $(".js-qr-input").on("input", function(e) { + var text = e.target.value; + + if (text !== "") { + qr.makeCode(text); + } + }); + </script> +</body>