|
0
|
1 <!doctype html>
|
|
|
2 <head>
|
|
|
3 <meta charset="utf-8">
|
|
5
|
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
0
|
5 <title>QR Code Generator</title>
|
|
|
6
|
|
|
7 <style type="text/css">
|
|
|
8 * {
|
|
|
9 position: relative;
|
|
|
10 box-sizing: border-box;
|
|
|
11 }
|
|
|
12
|
|
|
13 html {
|
|
|
14 height: 100%;
|
|
|
15 margin: 0;
|
|
|
16 padding: 0;
|
|
|
17 font-family: sans-serif;
|
|
|
18 font-size: 12px;
|
|
|
19 }
|
|
|
20
|
|
|
21 body {
|
|
|
22 margin: 0;
|
|
|
23 padding: 10px;
|
|
|
24 height: 100%;
|
|
|
25 }
|
|
|
26
|
|
|
27 .inputbox {
|
|
|
28 width: 100%;
|
|
|
29 margin-bottom: 10px;
|
|
|
30 resize: vertical;
|
|
|
31 font-family: monospace;
|
|
5
|
32 /* prevent ios zoom */
|
|
|
33 font-size: 16px;
|
|
0
|
34 }
|
|
|
35
|
|
|
36 .page {
|
|
|
37 width: 100%;
|
|
|
38 height: 100%;
|
|
|
39 max-width: 600px;
|
|
|
40 margin: 0 auto;
|
|
|
41 display: flex;
|
|
|
42 flex-direction: column;
|
|
|
43 padding: 10px;
|
|
|
44 }
|
|
|
45
|
|
|
46 .page__main {
|
|
|
47 flex: 1;
|
|
|
48 }
|
|
|
49
|
|
1
|
50 .outputbox {
|
|
|
51 will-change: opacity;
|
|
|
52 }
|
|
|
53
|
|
|
54 .outputbox.js-hidden {
|
|
|
55 opacity: 0;
|
|
|
56 }
|
|
|
57
|
|
0
|
58 .title {
|
|
|
59 font-size: 16px;
|
|
|
60 }
|
|
|
61 </style>
|
|
|
62 </head>
|
|
|
63 <body>
|
|
|
64 <div class="page">
|
|
|
65 <div class="page__main">
|
|
|
66 <h1>QR Code Generator</h1>
|
|
|
67
|
|
|
68 <p>
|
|
2
|
69 Type something and get its QR code (almost) immediately.
|
|
0
|
70 </p>
|
|
|
71
|
|
|
72 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
|
|
|
73
|
|
1
|
74 <div class="outputbox js-qr-output"></div>
|
|
0
|
75 </div>
|
|
|
76
|
|
|
77 <div>
|
|
|
78 <hr>
|
|
|
79
|
|
|
80 <a href="https://bitbucket.org/nanaya1/qr-html">Source</a>
|
|
|
81 </div>
|
|
|
82 </div>
|
|
|
83
|
|
|
84 <script src="qrcode.min.js"></script>
|
|
|
85
|
|
|
86 <script>
|
|
3
|
87 var inputDom = document.getElementsByClassName("js-qr-input")[0]
|
|
2
|
88 var outputDom = document.getElementsByClassName("js-qr-output")[0]
|
|
|
89 var qr = new QRCode(outputDom)
|
|
0
|
90
|
|
4
|
91 var runTimeout = null
|
|
|
92 var debouncedRefreshCode = function() {
|
|
|
93 clearTimeout(runTimeout)
|
|
|
94 runTimeout = setTimeout(refreshCode, 100)
|
|
|
95 }
|
|
|
96
|
|
3
|
97 var refreshCode = function() {
|
|
|
98 var text = inputDom.value
|
|
0
|
99
|
|
|
100 if (text !== "") {
|
|
2
|
101 qr.makeCode(text)
|
|
|
102 outputDom.classList.remove('js-hidden')
|
|
1
|
103 } else {
|
|
2
|
104 outputDom.classList.add('js-hidden')
|
|
0
|
105 }
|
|
2
|
106 }
|
|
|
107
|
|
4
|
108 inputDom.addEventListener('input', debouncedRefreshCode)
|
|
3
|
109 refreshCode()
|
|
0
|
110 </script>
|
|
|
111 </body>
|
