Mercurial > qr-html

comparison index.html @ 14:1fbe0b098f0f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Adjust styling - max 256px - 8px padding - plain line instead of hr (more precise margin)
author nanaya <me@nanaya.net>
date Wed, 11 Sep 2024 21:27:58 +0900
parents a8e0607093f3
children d6a6c128cd5a
comparison
equal deleted inserted replaced
13:a56d5a527f6c 14:1fbe0b098f0f
17 font-size: 12px; 17 font-size: 12px;
18 } 18 }
19 19
20 body { 20 body {
21 margin: 0; 21 margin: 0;
22 padding: 10px; 22 padding: 8px;
23 height: 100%; 23 height: 100%;
24 } 24 }
25 25
26 .inputbox { 26 .inputbox {
27 width: 100%; 27 width: 100%;
28 margin-bottom: 10px; 28 margin-bottom: 8px;
29 resize: vertical; 29 resize: vertical;
30 font-family: Courier New, monospace; 30 font-family: Courier New, monospace;
31 /* prevent ios zoom */ 31 /* prevent ios zoom */
32 font-size: 16px; 32 font-size: 16px;
33 } 33 }
35 .page { 35 .page {
36 width: 100%; 36 width: 100%;
37 min-height: 100%; 37 min-height: 100%;
38 max-width: 600px; 38 max-width: 600px;
39 margin: 0 auto; 39 margin: 0 auto;
40 display: flex; 40 display: grid;
41 flex-direction: column; 41 grid-template-rows: 1fr auto;
42 padding: 10px; 42 gap: 8px;
43 } 43 }
44 44
45 .page__main { 45 .page__footer {
46 flex: 1; 46 border-top: 1px solid #333;
47 padding-top: 8px;
47 } 48 }
48 49
49 .outputbox { 50 .outputbox {
50 will-change: opacity; 51 max-width: 256px;
51 }
52
53 .outputbox.js-hidden {
54 opacity: 0;
55 } 52 }
56 53
57 .outputbox > canvas { 54 .outputbox > canvas {
58 display: none; 55 display: none;
59 } 56 }
60 57
61 .outputbox > img { 58 .outputbox > img {
62 max-width: 100%; 59 max-width: 100%;
63 max-height: calc(100vh - 250px);
64 } 60 }
65 61
66 .title { 62 .title {
67 font-size: 16px; 63 font-size: 16px;
68 } 64 }
80 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea> 76 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
81 77
82 <div class="outputbox js-qr-output"></div> 78 <div class="outputbox js-qr-output"></div>
83 </div> 79 </div>
84 80
85 <div> 81 <div class="page__footer">
86 <hr>
87
88 <a href="https://hg.sr.ht/~nanaya/qr-html">Source</a> 82 <a href="https://hg.sr.ht/~nanaya/qr-html">Source</a>
89 </div> 83 </div>
90 </div> 84 </div>
91 85
92 <script src="qrcode.min.js"></script> 86 <script src="qrcode.min.js"></script>
93 87
94 <script> 88 <script>
95 var inputDom = document.querySelector(".js-qr-input") 89 var inputDom = document.querySelector(".js-qr-input")
96 var outputDom = document.querySelector(".js-qr-output") 90 var outputDom = document.querySelector(".js-qr-output")
97 var qr = new QRCode(outputDom, { correctLevel: QRCode.CorrectLevel.L, width: 1024, height: 1024 }) 91 var qr = new QRCode(outputDom, { correctLevel: QRCode.CorrectLevel.L, width: 256, height: 256 })
98 92
99 var runTimeout = null 93 var runTimeout = null
100 var debouncedRefreshCode = function() {
101 clearTimeout(runTimeout)
102 runTimeout = setTimeout(refreshCode, 100)
103 }
104 94
105 var refreshCode = function() { 95 var refreshCode = function() {
106 var text = inputDom.value 96 var text = inputDom.value
107 97
108 if (text !== "") { 98 if (text === "") {
99 outputDom.style.display = 'none';
100 } else {
101 outputDom.style.display = 'block';
109 qr.makeCode(text) 102 qr.makeCode(text)
110 outputDom.classList.remove('js-hidden')
111 } else {
112 outputDom.classList.add('js-hidden')
113 } 103 }
114 } 104 }
115 105
116 inputDom.addEventListener('input', debouncedRefreshCode) 106 inputDom.addEventListener('input', refreshCode)
117 refreshCode() 107 refreshCode()
118 </script> 108 </script>
119 </body> 109 </body>