Mercurial > qr-html

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Generator</title>

    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }

        body {
            margin: 0;
            padding: 10px;
            height: 100%;
        }

        .inputbox {
            width: 100%;
            margin-bottom: 10px;
            resize: vertical;
            font-family: Courier New, monospace;
            /* prevent ios zoom */
            font-size: 16px;
        }

        .page {
            width: 100%;
            min-height: 100%;
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }

        .page__main {
            flex: 1;
        }

        .outputbox {
            will-change: opacity;
        }

        .outputbox.js-hidden {
            opacity: 0;
        }

        .outputbox > canvas {
            display: none;
        }

        .outputbox > img {
            max-width: 100%;
            max-height: calc(100vh - 250px);
        }

        .title {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="page__main">
            <h1>QR Code Generator</h1>

            <p>
                Type something and get its QR code (almost) immediately.
            </p>

            <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>

            <div class="outputbox js-qr-output"></div>
        </div>

        <div>
            <hr>

            <a href="https://bitbucket.org/nanaya1/qr-html">Source</a>
        </div>
    </div>

    <script src="qrcode.min.js"></script>

    <script>
        var inputDom = document.querySelector(".js-qr-input")
        var outputDom = document.querySelector(".js-qr-output")
        var qr = new QRCode(outputDom, { correctLevel: QRCode.CorrectLevel.L, width: 1024, height: 1024 })

        var runTimeout = null
        var debouncedRefreshCode = function() {
            clearTimeout(runTimeout)
            runTimeout = setTimeout(refreshCode, 100)
        }

        var refreshCode = function() {
            var text = inputDom.value

            if (text !== "") {
                qr.makeCode(text)
                outputDom.classList.remove('js-hidden')
            } else {
                outputDom.classList.add('js-hidden')
            }
        }

        inputDom.addEventListener('input', debouncedRefreshCode)
        refreshCode()
    </script>
</body>
author	nanaya <me@nanaya.pro>
date	Sat, 28 Nov 2020 06:38:34 +0900
parents	09146b1bfb65
children	a8e0607093f3