|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- {% 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 %}
|