PIVOT 1.1.0

templates/qr_code.html

@@ -0,0 +1,53 @@
+{% extends "base.html" %}
+
+{% block title %}QR-generator{% endblock %}
+{% block page_title %}QR-codegenerator{% endblock %}
+{% block main_class %}narrow{% endblock %}
+
+{% block extra_css %}
+<style>
+    .steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
+    .steps > li { position: relative; padding-left: 44px; padding-bottom: 22px; }
+    .steps > li::before {
+        counter-increment: step; content: counter(step);
+        position: absolute; left: 0; top: 0;
+        width: 30px; height: 30px; border-radius: 50%;
+        display: grid; place-items: center;
+        background: var(--primary-light); color: var(--primary-color); font-weight: 700;
+    }
+    .steps h3 { margin: 3px 0 10px; }
+    .options-box { padding: 6px 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0 18px; }
+    .options-box .check { padding: 8px 0; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="card">
+    <div class="page-head">
+        <div>
+            <h2>💡 QR-codes maken</h2>
+            <p class="muted" style="margin:0">Maak eenvoudig QR-codes aan vanuit een Excel-bestand.</p>
+        </div>
+    </div>
+
+    <ol class="steps">
+        <li>
+            <h3>Download het sjabloon</h3>
+            <a href="{{ url_for('qr_generator.download_template') }}" class="btn btn-light">📥 Sjabloon (.xlsx)</a>
+        </li>
+        <li>
+            <h3>Upload je ingevulde bestand</h3>
+            <form action="{{ url_for('qr_generator.upload_file') }}" method="post" enctype="multipart/form-data">
+                <input type="file" name="file" accept=".xlsx, .xls" required>
+
+                <div class="options-box">
+                    <label class="check"><input type="checkbox" id="show_top" name="show_top" checked> Toon tekst boven QR-code</label>
+                    <label class="check"><input type="checkbox" id="show_bottom" name="show_bottom" checked> Toon tekst onder QR-code</label>
+                </div>
+
+                <button type="submit" class="btn-block btn-lg">🚀 Genereer QR-codes (ZIP)</button>
+            </form>
+        </li>
+    </ol>
+</div>
+{% endblock %}