msb-public
/
QR-Code-generator
mirror of https://github.com/nayuki/QR-Code-generator
4
3
Code Issues Projects Releases Wiki Activity

Indented the HTML file fully.

Browse Source
pull/65/head
Project Nayuki 6 years ago
parent e20059b9ca
commit e9f7133692
1 changed files with 109 additions and 109 deletions

218
typescript-javascript/qrcodegen-input-demo.html
Unescape View File

@ -22,113 +22,113 @@
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>QR Code generator library demo (JavaScript)</title> <title>QR Code generator library demo (JavaScript)</title>
<style type="text/css"> <style type="text/css">
html { html {
font-family: sans-serif; font-family: sans-serif;
} }
td { td {
vertical-align: top; vertical-align: top;
padding-top: 0.2em; padding-top: 0.2em;
padding-bottom: 0.2em; padding-bottom: 0.2em;
} }
td:first-child { td:first-child {
white-space: pre; white-space: pre;
padding-right: 0.5em; padding-right: 0.5em;
} }
input[type=radio], input[type=checkbox] { input[type=radio], input[type=checkbox] {
margin: 0em; margin: 0em;
padding: 0em; padding: 0em;
} }
input[type=radio] + label, input[type=checkbox] + label { input[type=radio] + label, input[type=checkbox] + label {
margin-right: 0.8em; margin-right: 0.8em;
padding-left: 0.2em; padding-left: 0.2em;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>QR Code generator demo library (JavaScript)</h1> <h1>QR Code generator demo library (JavaScript)</h1>
<div id="loading"> <div id="loading">
<p>Loading application...</p> <p>Loading application...</p>
<p>(Are the JavaScript files missing?)</p> <p>(Are the JavaScript files missing?)</p>
<p>(The JavaScript code needs to be compiled from the TypeScript code.)</p> <p>(The JavaScript code needs to be compiled from the TypeScript code.)</p>
</div> </div>
<form id="loaded" style="display:none" action="#" method="get" onsubmit="return false;"> <form id="loaded" style="display:none" action="#" method="get" onsubmit="return false;">
<table class="noborder" style="width:100%"> <table class="noborder" style="width:100%">
<tbody> <tbody>
<tr> <tr>
<td><strong>Text string:</strong></td> <td><strong>Text string:</strong></td>
<td style="width:100%"><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:100%; max-width:30em; height:5em; font-family:inherit"></textarea></td> <td style="width:100%"><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:100%; max-width:30em; height:5em; font-family:inherit"></textarea></td>
</tr> </tr>
<tr> <tr>
<td><strong>QR Code:</strong></td> <td><strong>QR Code:</strong></td>
<td> <td>
<canvas id="qrcode-canvas" style="padding:1em; background-color:#E8E8E8"></canvas> <canvas id="qrcode-canvas" style="padding:1em; background-color:#E8E8E8"></canvas>
<svg id="qrcode-svg" style="width:30em; height:30em; padding:1em; background-color:#E8E8E8"> <svg id="qrcode-svg" style="width:30em; height:30em; padding:1em; background-color:#E8E8E8">
<rect width="100%" height="100%" fill="#FFFFFF" stroke-width="0"></rect> <rect width="100%" height="100%" fill="#FFFFFF" stroke-width="0"></rect>
<path d="" fill="#000000" stroke-width="0"></path> <path d="" fill="#000000" stroke-width="0"></path>
</svg> </svg>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><strong>Error correction:</strong></td> <td><strong>Error correction:</strong></td>
<td> <td>
<input type="radio" name="errcorlvl" id="errcorlvl-low" checked="checked"><label for="errcorlvl-low">Low</label> <input type="radio" name="errcorlvl" id="errcorlvl-low" checked="checked"><label for="errcorlvl-low">Low</label>
<input type="radio" name="errcorlvl" id="errcorlvl-medium"><label for="errcorlvl-medium">Medium</label> <input type="radio" name="errcorlvl" id="errcorlvl-medium"><label for="errcorlvl-medium">Medium</label>
<input type="radio" name="errcorlvl" id="errcorlvl-quartile"><label for="errcorlvl-quartile">Quartile</label> <input type="radio" name="errcorlvl" id="errcorlvl-quartile"><label for="errcorlvl-quartile">Quartile</label>
<input type="radio" name="errcorlvl" id="errcorlvl-high"><label for="errcorlvl-high">High</label> <input type="radio" name="errcorlvl" id="errcorlvl-high"><label for="errcorlvl-high">High</label>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Output format:</td> <td>Output format:</td>
<td> <td>
<input type="radio" name="output-format" id="output-format-bitmap" checked="checked"><label for="output-format-bitmap">Bitmap</label> <input type="radio" name="output-format" id="output-format-bitmap" checked="checked"><label for="output-format-bitmap">Bitmap</label>
<input type="radio" name="output-format" id="output-format-vector"><label for="output-format-vector">Vector</label> <input type="radio" name="output-format" id="output-format-vector"><label for="output-format-vector">Vector</label>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Border:</td> <td>Border:</td>
<td><input type="number" value="4" min="0" max="100" step="1" id="border-input" style="width:4em"> modules</td> <td><input type="number" value="4" min="0" max="100" step="1" id="border-input" style="width:4em"> modules</td>
</tr> </tr>
<tr id="scale-row"> <tr id="scale-row">
<td>Scale:</td> <td>Scale:</td>
<td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em"> pixels per module</td> <td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em"> pixels per module</td>
</tr> </tr>
<tr> <tr>
<td>Version range:</td> <td>Version range:</td>
<td> <td>
Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="app.handleVersionMinMax('min');">, Minimum = <input type="number" value="1" min="1" max="40" step="1" id="version-min-input" style="width:4em" oninput="app.handleVersionMinMax('min');">,
maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="app.handleVersionMinMax('max');"> maximum = <input type="number" value="40" min="1" max="40" step="1" id="version-max-input" style="width:4em" oninput="app.handleVersionMinMax('max');">
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Mask pattern:</td> <td>Mask pattern:</td>
<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> <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>
</tr> </tr>
<tr> <tr>
<td>Boost ECC:</td> <td>Boost ECC:</td>
<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> <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>
</tr> </tr>
<tr> <tr>
<td>Statistics:</td> <td>Statistics:</td>
<td id="statistics-output" style="white-space:pre"></td> <td id="statistics-output" style="white-space:pre"></td>
</tr> </tr>
<tr id="svg-xml-row"> <tr id="svg-xml-row">
<td>SVG XML code:</td> <td>SVG XML code:</td>
<td> <td>
<textarea id="svg-xml-output" readonly="readonly" style="width:100%; max-width:50em; height:15em; font-family:monospace"></textarea> <textarea id="svg-xml-output" readonly="readonly" style="width:100%; max-width:50em; height:15em; font-family:monospace"></textarea>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</form> </form>
<script type="application/javascript" src="qrcodegen.js"></script> <script type="application/javascript" src="qrcodegen.js"></script>
<script type="application/javascript" src="qrcodegen-input-demo.js"></script> <script type="application/javascript" src="qrcodegen-input-demo.js"></script>
<hr> <hr>
<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> <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>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save