annotate index.html @ 7:896b7f28d3ad

Fix styles
author nanaya <me@nanaya.pro>
date Fri, 06 Jul 2018 16:28:00 +0900
parents 461c6e7dea56
children e50d930b2af1
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
1 <!doctype html>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
2 <head>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
3 <meta charset="utf-8">
5
461c6e7dea56 Better mobile handling
nanaya <me@myconan.net>
parents: 4
diff changeset
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
5 <title>QR Code Generator</title>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
6
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
7 <style type="text/css">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
8 * {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
9 box-sizing: border-box;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
10 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
11
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
12 html {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
13 height: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
14 margin: 0;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
15 padding: 0;
7
896b7f28d3ad Fix styles
nanaya <me@nanaya.pro>
parents: 5
diff changeset
16 font-family: Arial, sans-serif;
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
17 font-size: 12px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
18 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
19
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
20 body {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
21 margin: 0;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
22 padding: 10px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
23 height: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
24 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
25
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
26 .inputbox {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
27 width: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
28 margin-bottom: 10px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
29 resize: vertical;
7
896b7f28d3ad Fix styles
nanaya <me@nanaya.pro>
parents: 5
diff changeset
30 font-family: Courier New, monospace;
5
461c6e7dea56 Better mobile handling
nanaya <me@myconan.net>
parents: 4
diff changeset
31 /* prevent ios zoom */
461c6e7dea56 Better mobile handling
nanaya <me@myconan.net>
parents: 4
diff changeset
32 font-size: 16px;
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
33 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
34
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
35 .page {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
36 width: 100%;
7
896b7f28d3ad Fix styles
nanaya <me@nanaya.pro>
parents: 5
diff changeset
37 min-height: 100%;
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
38 max-width: 600px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
39 margin: 0 auto;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
40 display: flex;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
41 flex-direction: column;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
42 padding: 10px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
43 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
44
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
45 .page__main {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
46 flex: 1;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
47 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
48
1
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
49 .outputbox {
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
50 will-change: opacity;
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
51 }
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
52
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
53 .outputbox.js-hidden {
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
54 opacity: 0;
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
55 }
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
56
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
57 .title {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
58 font-size: 16px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
59 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
60 </style>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
61 </head>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
62 <body>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
63 <div class="page">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
64 <div class="page__main">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
65 <h1>QR Code Generator</h1>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
66
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
67 <p>
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
68 Type something and get its QR code (almost) immediately.
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
69 </p>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
70
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
71 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
72
1
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
73 <div class="outputbox js-qr-output"></div>
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
74 </div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
75
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
76 <div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
77 <hr>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
78
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
79 <a href="https://bitbucket.org/nanaya1/qr-html">Source</a>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
80 </div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
81 </div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
82
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
83 <script src="qrcode.min.js"></script>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
84
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
85 <script>
3
6875be47fb24 Now with less jquery
nanaya <me@myconan.net>
parents: 2
diff changeset
86 var inputDom = document.getElementsByClassName("js-qr-input")[0]
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
87 var outputDom = document.getElementsByClassName("js-qr-output")[0]
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
88 var qr = new QRCode(outputDom)
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
89
4
cc0a5142a56f Now without lodash
nanaya <me@myconan.net>
parents: 3
diff changeset
90 var runTimeout = null
cc0a5142a56f Now without lodash
nanaya <me@myconan.net>
parents: 3
diff changeset
91 var debouncedRefreshCode = function() {
cc0a5142a56f Now without lodash
nanaya <me@myconan.net>
parents: 3
diff changeset
92 clearTimeout(runTimeout)
cc0a5142a56f Now without lodash
nanaya <me@myconan.net>
parents: 3
diff changeset
93 runTimeout = setTimeout(refreshCode, 100)
cc0a5142a56f Now without lodash
nanaya <me@myconan.net>
parents: 3
diff changeset
94 }
cc0a5142a56f Now without lodash
nanaya <me@myconan.net>
parents: 3
diff changeset
95
3
6875be47fb24 Now with less jquery
nanaya <me@myconan.net>
parents: 2
diff changeset
96 var refreshCode = function() {
6875be47fb24 Now with less jquery
nanaya <me@myconan.net>
parents: 2
diff changeset
97 var text = inputDom.value
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
98
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
99 if (text !== "") {
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
100 qr.makeCode(text)
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
101 outputDom.classList.remove('js-hidden')
1
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
102 } else {
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
103 outputDom.classList.add('js-hidden')
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
104 }
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
105 }
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
106
4
cc0a5142a56f Now without lodash
nanaya <me@myconan.net>
parents: 3
diff changeset
107 inputDom.addEventListener('input', debouncedRefreshCode)
3
6875be47fb24 Now with less jquery
nanaya <me@myconan.net>
parents: 2
diff changeset
108 refreshCode()
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
109 </script>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
110 </body>