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: 8px;
            height: 100%;
        }

        .inputbox {
            width: 100%;
            margin-bottom: 8px;
            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: grid;
            grid-template-rows: 1fr auto;
            gap: 8px;
        }

        .page__footer {
            border-top: 1px solid #333;
            padding-top: 8px;
        }

        .outputbox {
            max-width: 256px;
        }

        .outputbox > canvas {
            display: none;
        }

        .outputbox > img {
            max-width: 100%;
        }

        .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 class="page__footer">
            <a href="https://hg.nanaya.net/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: 256, height: 256 })

        var runTimeout = null

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

            if (text === "") {
                outputDom.style.display = 'none';
            } else {
                outputDom.style.display = 'block';
                qr.makeCode(text)
            }
        }

        inputDom.addEventListener('input', refreshCode)
        refreshCode()
    </script>
</body>
author	nanaya <me@nanaya.net>
date	Wed, 11 Sep 2024 21:28:26 +0900
parents	1fbe0b098f0f
children	c582629d15e7