120 lines
4.2 KiB
HTML
120 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>P-Touch Mobile</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
|
|
</head>
|
|
<body>
|
|
<main class="mobile-shell">
|
|
<header>
|
|
<div>
|
|
<h1>P-Touch Mobile</h1>
|
|
<p>PT-P700</p>
|
|
</div>
|
|
<a href="{{ url_for('index') }}">Editor</a>
|
|
</header>
|
|
|
|
<section class="card">
|
|
<label>
|
|
Text
|
|
<textarea id="mobileText" rows="5" autofocus placeholder="Etikettentext"></textarea>
|
|
</label>
|
|
</section>
|
|
|
|
<section class="card settings">
|
|
<div class="grid-2">
|
|
<label>
|
|
Band
|
|
<div class="input-action">
|
|
<select id="mobileTape">
|
|
{% for width in tape_widths %}
|
|
<option value="{{ width }}" {% if width == 24 %}selected{% endif %}>{{ width }} mm</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button id="mobileDetect" type="button">Erkennen</button>
|
|
</div>
|
|
</label>
|
|
<label>
|
|
Kopien
|
|
<div class="stepper" data-stepper="mobileCopies">
|
|
<button type="button" data-step="-1" aria-label="Kopien verringern">-</button>
|
|
<output id="mobileCopiesValue">1</output>
|
|
<button type="button" data-step="1" aria-label="Kopien erhoehen">+</button>
|
|
<input id="mobileCopies" type="hidden" value="1">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div id="mobileTapeInfo" class="tape-info" hidden>
|
|
<div>
|
|
<span>Band</span>
|
|
<strong id="mobileTapeInfoType">-</strong>
|
|
</div>
|
|
<div>
|
|
<span>Druckbreite</span>
|
|
<strong id="mobileTapePrintableWidth">-</strong>
|
|
</div>
|
|
<div>
|
|
<span>Hintergrund</span>
|
|
<strong><i id="mobileTapeBgSwatch"></i><span id="mobileTapeBgText">-</span></strong>
|
|
</div>
|
|
<div>
|
|
<span>Schrift</span>
|
|
<strong><i id="mobileTapeTextSwatch"></i><span id="mobileTapeTextText">-</span></strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<label>
|
|
Schriftgroesse
|
|
<div class="stepper" data-stepper="mobileFont">
|
|
<button type="button" data-step="-0.5" aria-label="Schriftgroesse verringern">-</button>
|
|
<output id="mobileFontValue">6 mm</output>
|
|
<button type="button" data-step="0.5" aria-label="Schriftgroesse erhoehen">+</button>
|
|
<input id="mobileFont" type="hidden" value="6">
|
|
</div>
|
|
</label>
|
|
<label>
|
|
Innenrand
|
|
<div class="stepper" data-stepper="mobileMargin">
|
|
<button type="button" data-step="-0.5" aria-label="Innenrand verringern">-</button>
|
|
<output id="mobileMarginValue">2 mm</output>
|
|
<button type="button" data-step="0.5" aria-label="Innenrand erhoehen">+</button>
|
|
<input id="mobileMargin" type="hidden" value="2">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<label>
|
|
Ausrichtung
|
|
<select id="mobileAlign">
|
|
<option value="left">Links</option>
|
|
<option value="center" selected>Mitte</option>
|
|
<option value="right">Rechts</option>
|
|
</select>
|
|
</label>
|
|
|
|
<div class="toggle-row">
|
|
<label><input id="mobileBold" type="checkbox" checked> Fett</label>
|
|
<label><input id="mobileFrame" type="checkbox"> Rahmen</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="preview">
|
|
<img id="mobilePreview" alt="Vorschau">
|
|
</div>
|
|
<p id="mobileMessage" class="message"></p>
|
|
</section>
|
|
|
|
<nav class="bottom-actions">
|
|
<button id="mobilePreviewBtn" type="button">Vorschau</button>
|
|
<button id="mobilePrintBtn" type="button" class="primary">Drucken</button>
|
|
</nav>
|
|
</main>
|
|
|
|
<script src="{{ url_for('static', filename='mobile.js') }}"></script>
|
|
</body>
|
|
</html>
|