Mercurial > qr-html

comparison index.html @ 0:6b5cab0b3f91

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial
author nanaya <me@myconan.net>
date Sat, 15 Oct 2016 16:38:11 +0900
parents
children 30cd1768611b
comparison
equal deleted inserted replaced
-1:000000000000 0:6b5cab0b3f91
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>