155 lines
5.2 KiB
HTML
155 lines
5.2 KiB
HTML
{% 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 %}
|