diff options
| author | Anton Šijanec <sijanecantonluka@gmail.com> | 2020-03-30 15:12:21 +0200 |
|---|---|---|
| committer | Anton Šijanec <sijanecantonluka@gmail.com> | 2020-03-30 15:12:21 +0200 |
| commit | 49ff1d32a7e3569a46e2311beedd66a6bb0520e4 (patch) | |
| tree | 05e8bb48ec29058d06a38d32045553a100e2fe55 /qr.html | |
| download | upn-49ff1d32a7e3569a46e2311beedd66a6bb0520e4.tar upn-49ff1d32a7e3569a46e2311beedd66a6bb0520e4.tar.gz upn-49ff1d32a7e3569a46e2311beedd66a6bb0520e4.tar.bz2 upn-49ff1d32a7e3569a46e2311beedd66a6bb0520e4.tar.lz upn-49ff1d32a7e3569a46e2311beedd66a6bb0520e4.tar.xz upn-49ff1d32a7e3569a46e2311beedd66a6bb0520e4.tar.zst upn-49ff1d32a7e3569a46e2311beedd66a6bb0520e4.zip | |
Diffstat (limited to 'qr.html')
| -rw-r--r-- | qr.html | 121 |
1 files changed, 121 insertions, 0 deletions
@@ -0,0 +1,121 @@ +<!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>upn softver</title> + <!--[if ie]><script type="text/javascript" src="vendors/excanvas/excanvas.js"></script><![endif]--> + <script src="qrcode.js"></script> + <script src="qrcode.tosjis.js"></script> + <script src="iso-8859-2.js"></script> + <style> + .container { display: flex; } + .controls { + display: flex; flex-direction: column; + width: 100%; + padding: 0 5px 0 5px; + background-color: ghostwhite; + } + .controls > label { margin-bottom: 5px; margin-top: 10px; } + .controls > textarea { flex: 1; margin-bottom: 10px; } + .controls > input { width: 100%; margin: 0; padding: 0; flex: 1; } + .qrcode-container { + display: flex; align-items: center; justify-content: center; + min-height: 300px; min-width: 300px; padding: 10px; + background-color: ghostwhite; + } + .qrcode-image { box-shadow: 2px 2px 12px lightgray; } + .error { color: red; max-width: 280px; } + </style> + </head> + <body> + <div class="container"> + <div class="controls" style="max-width: 320px;"> + <div class="container"> + + <div class="controls" style="flex: 1;"> + <textarea rows=19 id="input-text">UPNQR +X + +SI56051008010486080 +Novo podjetje d.o.o. +Lepa cesta 15 +3698 Loški Potok +00000013167 +11.07.2016 +X +SUSB +Letna naročnina na ZZYS +11.11.2020 +DE12500105170648489890 +RF45SBO2010 +Gesselshaft GmbH +Rosenthal 15 +DE-86807 Buchloe +222 +</textarea> + </div> + + </div> + <div class="qrcode-container"> + <p id="error" class="error"></p> + <canvas id="canvas" class="qrcode-image"></canvas> + </div> + </div> + + <script> + var canvasEl = document.getElementById('canvas') + var textEl = document.getElementById('input-text') + var errorEl = document.getElementById('error') + function debounce (func, wait, immediate) { + var timeout + return function () { + var context = this + var args = arguments + var later = function () { + timeout = null + if (!immediate) func.apply(context, args) + } + + var callNow = immediate && !timeout + clearTimeout(timeout) + timeout = setTimeout(later, wait) + if (callNow) func.apply(context, args) + } + } + + function drawQR (text) { + errorEl.style.display = 'none' + canvasEl.style.display = 'block' + + QRCode.toCanvas(canvasEl, text, { + version: 15, + errorCorrectionLevel: "M", + margin: 0, + color: { + light: "#ffffff", + dark: "#000000" + }, + toSJISFunc: QRCode.toSJIS + }, function (error, canvas) { + if (error) { + canvasEl.style.display = 'none' + errorEl.style.display = 'inline' + errorEl.textContent = error + } + }) + } + + var updateQR = debounce(function () { + var mode = "Byte"; + if (mode !== 'Auto') { + drawQR([{ data: iso88592.encode(textEl.value.replace(/[\t\n]/g,)), mode: mode }]) + } else { + drawQR(iso88592.encode(textEl.value.replace(/[\t\n]/g,))) + } + }, 250) + textEl.addEventListener('keyup', updateQR, false); + updateQR(); + </script> + + </body> +</html>
\ No newline at end of file |