|
0
|
1 <!doctype html>
|
|
|
2 <head>
|
|
|
3 <meta charset="utf-8">
|
|
|
4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=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;
|
|
|
32 }
|
|
|
33
|
|
|
34 .page {
|
|
|
35 width: 100%;
|
|
|
36 height: 100%;
|
|
|
37 max-width: 600px;
|
|
|
38 margin: 0 auto;
|
|
|
39 display: flex;
|
|
|
40 flex-direction: column;
|
|
|
41 padding: 10px;
|
|
|
42 }
|
|
|
43
|
|
|
44 .page__main {
|
|
|
45 flex: 1;
|
|
|
46 }
|
|
|
47
|
|
1
|
48 .outputbox {
|
|
|
49 will-change: opacity;
|
|
|
50 }
|
|
|
51
|
|
|
52 .outputbox.js-hidden {
|
|
|
53 opacity: 0;
|
|
|
54 }
|
|
|
55
|
|
0
|
56 .title {
|
|
|
57 font-size: 16px;
|
|
|
58 }
|
|
|
59 </style>
|
|
|
60 </head>
|
|
|
61 <body>
|
|
|
62 <div class="page">
|
|
|
63 <div class="page__main">
|
|
|
64 <h1>QR Code Generator</h1>
|
|
|
65
|
|
|
66 <p>
|
|
|
67 Type something and get its QR code immediately.
|
|
|
68 </p>
|
|
|
69
|
|
|
70 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
|
|
|
71
|
|
1
|
72 <div class="outputbox js-qr-output"></div>
|
|
0
|
73 </div>
|
|
|
74
|
|
|
75 <div>
|
|
|
76 <hr>
|
|
|
77
|
|
|
78 <a href="https://bitbucket.org/nanaya1/qr-html">Source</a>
|
|
|
79 </div>
|
|
|
80 </div>
|
|
|
81
|
|
|
82 <script src="jquery.min.js"></script>
|
|
|
83 <script src="qrcode.min.js"></script>
|
|
|
84
|
|
|
85 <script>
|
|
|
86 var outputDom = document.getElementsByClassName("js-qr-output")[0];
|
|
|
87 var qr = new QRCode(outputDom);
|
|
|
88
|
|
|
89 $(".js-qr-input").on("input", function(e) {
|
|
|
90 var text = e.target.value;
|
|
|
91
|
|
|
92 if (text !== "") {
|
|
|
93 qr.makeCode(text);
|
|
1
|
94 outputDom.classList.remove('js-hidden');
|
|
|
95 } else {
|
|
|
96 outputDom.classList.add('js-hidden');
|
|
0
|
97 }
|
|
|
98 });
|
|
|
99 </script>
|
|
|
100 </body>
|
