1<!-- 2 - QR Code generator input demo (HTML+JavaScript) 3 - 4 - Copyright (c) Project Nayuki. (MIT License) 5 - https://www.nayuki.io/page/qr-code-generator-library 6 - 7 - Permission is hereby granted, free of charge, to any person obtaining a copy of 8 - this software and associated documentation files (the "Software"), to deal in 9 - the Software without restriction, including without limitation the rights to 10 - use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 11 - the Software, and to permit persons to whom the Software is furnished to do so, 12 - subject to the following conditions: 13 - * The above copyright notice and this permission notice shall be included in 14 - all copies or substantial portions of the Software. 15 - * The Software is provided "as is", without warranty of any kind, express or 16 - implied, including but not limited to the warranties of merchantability, 17 - fitness for a particular purpose and noninfringement. In no event shall the 18 - authors or copyright holders be liable for any claim, damages or other 19 - liability, whether in an action of contract, tort or otherwise, arising from, 20 - out of or in connection with the Software or the use or other dealings in the 21 - Software. 22 --> 23<!DOCTYPE html> 24<html> 25 <head> 26 <meta charset="UTF-8"> 27 <title>QR Code generator input demo (JavaScript)</title> 28 <style type="text/css"> 29 html { 30 font-family: sans-serif; 31 } 32 h1 { 33 text-align: center; 34 } 35 table { 36 border-collapse: collapse; 37 } 38 td { 39 vertical-align: top; 40 padding-top: 0.2em; 41 padding-bottom: 0.2em; 42 } 43 td:first-child { 44 white-space: pre; 45 padding-right: 0.5em; 46 } 47 input[type=number], input[type=text], textarea { 48 font-size: inherit; 49 font-family: inherit; 50 } 51 input[type=radio], input[type=checkbox] { 52 margin: 0em; 53 padding: 0em; 54 } 55 input[type=radio] + label, input[type=checkbox] + label { 56 margin-right: 0.8em; 57 padding-left: 0.2em; 58 } 59 hr { 60 margin: 2em 0em; 61 border: none; 62 border-top: 0.1em solid #A0A0A0; 63 } 64 </style> 65 </head> 66 67 <body> 68 <h1>QR Code generator input demo (JavaScript)</h1> 69 <div id="loading"> 70 <p>Loading application...</p> 71 <p>(Are the JavaScript files missing?)</p> 72 <p>(The JavaScript code needs to be compiled from the TypeScript code.)</p> 73 </div> 74 <form id="loaded" style="display:none" onsubmit="event.preventDefault();"> 75 <table> 76 <tbody> 77 <tr> 78 <td><strong>Text string:</strong></td> 79 <td><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:30em; height:5em"></textarea></td> 80 </tr> 81 <tr> 82 <td><strong>QR Code:</strong></td> 83 <td> 84 <canvas id="qrcode-canvas" style="padding:1em; background-color:#E8E8E8"></canvas> 85 <svg id="qrcode-svg" style="width:30em; height:30em; padding:1em; background-color:#E8E8E8"> 86 <rect width="100%" height="100%" fill="#FFFFFF" stroke-width="0"></rect> 87 <path d="" fill="#000000" stroke-width="0"></path> 88 </svg> 89 </td> 90 </tr> 91 <tr> 92 <td><strong>Error correction:</strong></td> 93 <td> 94 <input type="radio" name="errcorlvl" id="errcorlvl-low" checked="checked"><label for="errcorlvl-low">Low</label> 95 <input type="radio" name="errcorlvl" id="errcorlvl-medium"><label for="errcorlvl-medium">Medium</label> 96 <input type="radio" name="errcorlvl" id="errcorlvl-quartile"><label for="errcorlvl-quartile">Quartile</label> 97 <input type="radio" name="errcorlvl" id="errcorlvl-high"><label for="errcorlvl-high">High</label> 98 </td> 99 </tr> 100 <tr> 101 <td>Output format:</td> 102 <td> 103 <input type="radio" name="output-format" id="output-format-bitmap" checked="checked"><label for="output-format-bitmap">Bitmap</label> 104 <input type="radio" name="output-format" id="output-format-vector"><label for="output-format-vector">Vector</label> 105 </td> 106 </tr> 107 <tr> 108 <td>Border:</td> 109 <td><input type="number" value="4" min="0" max="100" step="1" id="border-input" style="width:4em"> modules</td> 110 </tr> 111 <tr id="scale-row"> 112 <td>Scale:</td> 113 <td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em"> pixels per module</td> 114 </tr> 115 <tr> 116 <td>Colors:</td> 117 <td> 118 Light = <input type="text" value="#FFFFFF" id="light-color-input" style="width:6em">, 119 dark = <input type="text" value="#000000" id="dark-color-input" style="width:6em"> 120 </td> 121 </tr> 122 <tr> 123 <td>Version range:</td> 124 <td> 125 Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="app.handleVersionMinMax('min');">, 126 maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="app.handleVersionMinMax('max');"> 127 </td> 128 </tr> 129 <tr> 130 <td>Mask pattern:</td> 131 <td><input type="number" value="-1" min="-1" max="7" step="1" id="mask-input" style="width:4em"> (−1 for automatic, 0 to 7 for manual)</td> 132 </tr> 133 <tr> 134 <td>Boost ECC:</td> 135 <td><input type="checkbox" checked="checked" id="boost-ecc-input"><label for="boost-ecc-input">Increase <abbr title="error-correcting code">ECC</abbr> level within same version</label></td> 136 </tr> 137 <tr> 138 <td>Statistics:</td> 139 <td id="statistics-output" style="white-space:pre"></td> 140 </tr> 141 <tr id="svg-xml-row"> 142 <td>SVG XML code:</td> 143 <td> 144 <textarea id="svg-xml-output" readonly="readonly" style="width:100%; max-width:50em; height:15em; font-family:monospace"></textarea> 145 </td> 146 </tr> 147 </tbody> 148 </table> 149 </form> 150 <script type="application/javascript" src="qrcodegen.js"></script> 151 <script type="application/javascript" src="qrcodegen-input-demo.js"></script> 152 153 <hr> 154 <p>Copyright © Project Nayuki – <a href="https://www.nayuki.io/page/qr-code-generator-library">https://www.nayuki.io/page/qr-code-generator-library</a></p> 155 </body> 156</html> 157