cl-deck-builder2/templates/qr.html
2024-03-05 22:11:33 -05:00

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