<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/spectre.css" />
    <link rel="stylesheet" href="css/qrihs.css" />
    <script src="js/qrious.min.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
    <title>Q-RIHS</title>
</head>
<body>
    <!-- Preload logos for canvas -->
    <img loading="eager" src="./img/e-rihsit_logo.png" class="d-hide" />
    <img loading="eager" src="./img/logo_ispc.png" class="d-hide" />
    <h1 class="text-center">Q-RIHS</h1>

    <h2 class="text-center">Tracciamento strumenti E-RIHS</h2>

    <p class="text-center p-2">Inserire link e ID strumento per generare l'etichetta con il QR Code</p>

    <div class="container main">
        <div class="columns mt-2">
            <div class="column col-lg-7 col-xl-8 col-sm-12 p-2">
                <input class="d-block" type="text" name="link" placeholder="Inserire link" />
                <input class="d-block" type="text" name="id-str" placeholder="Inserire ID strumento" />
                <button class="btn btn-primary c-hand" id="gen">
                    Genera etichetta
                </button>
                <div class="divider"></div>
                <button class="btn btn-primary disabled c-hand mt-2" id="download">
                    Scarica PNG
                </button>
            </div>
            <div class="column col-lg-5 col-xl-4 col-sm-12 text-center" style="border: #ccc 1px solid;">
                <canvas id="qrcode" width="244" height="468">
                    Etichetta strumento
                </canvas>
                <p class="text-center">Anteprima</p>
            </div>
        </div>
    </div>
    <footer class="text-center text-italic p-2">
        Powered by NicoPa
    </footer>

</body>
</html>