{% extends "layouts/default.html" %} {% block title %}{_ "QR Code Generator" _}{% endblock %} {% block content %} <form name="qr-form" id="qr-form"> {{ token | safe }} </form> <div class="container"> <h1 class="title">QR Generator</h1> <div class="columns"> <div class="column is-half"> <!-- textarea --> <div class="field"> <label class="label" for="string">Text Data</label> <div class="control"> <textarea class="textarea" id="string" name="string" form="qr-form" hx-post="/qr" hx-include="[name='qr-form']" hx-target="#results" hx-trigger="keyup changed delay:500ms">{{ string }}</textarea> </div> </div> <!-- form options --> <div class="columns"> <!-- form option --> <div class="column is-narrow"> <div class="field is-narrow"> <label class="label" for="ec-level">EC Level</label> <div class="control"> <div class="select"> <select id="ec-level" name="ec-level" form="qr-form" hx-post="/qr" hx-include="[name='qr-form']" hx-target="#results" hx-trigger="change throttle:500ms"> <option {% if ec-level == "L" %}selected="selected"{% endif %} value="L">L</option> <option {% if ec-level == "M" %}selected="selected"{% endif %} value="M">M</option> <option {% if ec-level == "Q" %}selected="selected"{% endif %} value="Q">Q</option> <option {% if ec-level == "H" %}selected="selected"{% endif %} value="H">H</option> </select> </div> </div> </div> </div> <!-- form option --> <div class="column"> <div class="field"> <label class="label" for="encoding-mode">Encoding Mode</label> <div class="control"> <div class="select"> <select id="encoding-mode" name="encoding-mode" form="qr-form" hx-post="/qr" hx-include="[name='qr-form']" hx-target="#results" hx-trigger="change throttle:500ms"> <option {% if encoding-mode == "ALPHANUMERIC" %}selected="selected"{% endif %} value="ALPHANUMERIC">ALPHANUMERIC</option> <option {% if encoding-mode == "8-BIT-BYTE" %}selected="selected"{% endif %} value="8-BIT-BYTE">8-BIT-BYTE</option> </select> </div> </div> </div> </div> <!-- form option --> <div class="column"> <div class="field is-narrow"> <label class="label" for="mask-number">Mask Number</label> <div class="control"> <input class="input" id="mask-number" name="mask-number" form="qr-form" max="7" min="-1" type="number" value="{{ mask-number }}" hx-post="/qr" hx-include="[name='qr-form']" hx-target="#results" hx-trigger="change throttle:500ms"> </div> </div> </div> <!-- form option --> <div class="column"> <div class="field is-narrow"> <label class="label" for="min-version">Min. Version</label> <div class="control"> <input class="input" id="min-version" name="min-version" form="qr-form" type="number" min="1" max="40" value="{{ min-version }}" hx-include="[name='qr-form']" hx-post="/qr" hx-target="#results" hx-trigger="change throttle:500ms"> </div> </div> </div> </div> <!-- Submit button --> <div class="field"> <div class="control"> <button class="button is-primary" hx-post="/qr" hx-include="[name='qr-form']" hx-target="#results" hx-trigger="click">Generate</button> </div> </div> <hr> <div class="message is-info"> <div class="message-header"> Helpful Links: </div> <div class="message-body"> <ul> <li><a href="https://www.thonky.com/qr-code-tutorial/alphanumeric-table">Table of Alphanumeric Values</a></li> </ul> </div> </div> </div> <!-- Right hand side: QR Image --> <div class="column is-half"> <div class="columns is-centered"> <div class="column is-fullwidth"> <div class="card image is-4x3" id="results"> <img src="/public/qr.png" alt="QR Code"> </div> </div> </div> </div> </div> </div> {% endblock %}