|
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
|
|
|
48 .title {
|
|
|
49 font-size: 16px;
|
|
|
50 }
|
|
|
51 </style>
|
|
|
52 </head>
|
|
|
53 <body>
|
|
|
54 <div class="page">
|
|
|
55 <div class="page__main">
|
|
|
56 <h1>QR Code Generator</h1>
|
|
|
57
|
|
|
58 <p>
|
|
|
59 Type something and get its QR code immediately.
|
|
|
60 </p>
|
|
|
61
|
|
|
62 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
|
|
|
63
|
|
|
64 <div class="js-qr-output"></div>
|
|
|
65 </div>
|
|
|
66
|
|
|
67 <div>
|
|
|
68 <hr>
|
|
|
69
|
|
|
70 <a href="https://bitbucket.org/nanaya1/qr-html">Source</a>
|
|
|
71 </div>
|
|
|
72 </div>
|
|
|
73
|
|
|
74 <script src="jquery.min.js"></script>
|
|
|
75 <script src="qrcode.min.js"></script>
|
|
|
76
|
|
|
77 <script>
|
|
|
78 var outputDom = document.getElementsByClassName("js-qr-output")[0];
|
|
|
79 var qr = new QRCode(outputDom);
|
|
|
80
|
|
|
81 $(".js-qr-input").on("input", function(e) {
|
|
|
82 var text = e.target.value;
|
|
|
83
|
|
|
84 if (text !== "") {
|
|
|
85 qr.makeCode(text);
|
|
|
86 }
|
|
|
87 });
|
|
|
88 </script>
|
|
|
89 </body>
|
