Fase 3 priority 2: presets, random style, qr scanner, PWA

Preset system: qr_presets table (migration 005) plus a presets.php AJAX
endpoint (list/save/delete, CSRF-protected, scoped to the logged-in user's
own id - presets are personal, never shared across accounts). UI/JS lives in
dist/js/qrcode-style-tools.js.

Random style button: client-side only, fills foreground/background with a
random hex color pair (playful randomize, no contrast/scannability
guarantee).

Qr scanner (scan_qrcode.php): camera or image upload, decoded entirely
client-side via html5-qrcode (CDN, pinned to 2.3.8).

PWA: manifest.json + service-worker.js, icons generated from the existing
DynamicQRCode_Original.png glyph. The service worker only caches static
assets (css/js/images) and deliberately never touches PHP pages, since those
carry CSRF tokens and session-specific content that must never be cached.

Fixes a gap found while testing: qrcode_options.php is only a shared partial
for the static qr forms - the dynamic qr form (form_dynamic_add.php) has its
own separate copy of the foreground/background/level/size/filename/format
fields (pre-existing structure, not something introduced here). That meant
frame_text and the new preset/random-style UI never showed up on the
dynamic qr page. Added the same fields there too, verified with a dynamic qr
plus frame text (150x180px, the expected +30px padding).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-09 00:49:45 +02:00
parent f7d2de355e
commit be9164850a
14 changed files with 580 additions and 6 deletions
+44 -2
View File
@@ -35,7 +35,7 @@
<div class="col-6 col-md-3">
<label for="size">Size (px)</label>
<select name="size" class="form-control">
<select name="size" id="size" class="form-control">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
@@ -51,13 +51,47 @@
</div>
</div>
<div class="col-sm-12 mb-2">
<div class="row">
<div class="col-6 col-md-3">
<button type="button" id="random_style_btn" class="btn btn-outline-secondary btn-block">
<i class="fa fa-dice"></i> Random style
</button>
</div>
<div class="col-6 col-md-3">
<label for="preset_select">Load preset</label>
<div class="input-group">
<select id="preset_select" class="form-control">
<option value="">-- Select --</option>
</select>
<div class="input-group-append">
<button type="button" id="preset_delete_btn" class="btn btn-outline-secondary" title="Delete selected preset"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<label for="preset_name">Save as preset</label>
<div class="input-group">
<input type="text" id="preset_name" class="form-control" placeholder="Preset name" maxlength="50">
<div class="input-group-append">
<button type="button" id="preset_save_btn" class="btn btn-outline-secondary"><i class="fa fa-save"></i></button>
</div>
</div>
</div>
</div>
</div>
<script src="dist/js/qrcode-style-tools.js?nocache=<?php print rand();?>"></script>
<!-- Its use is not recommended. Read the documentation
<div class="form-group">
<label for="logo">Logo</label>
<?php //include 'logo.php' ?>
</div>
-->
<div class="col-sm-4">
<div class="form-group">
<label for="link">URL *</label>
@@ -94,6 +128,14 @@
<option value="eps">EPS</option>
</select>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="frame_text">Frame text</label>
<input type="text" name="frame_text" value="" placeholder="e.g. Scan me" maxlength="60" class="form-control" id="frame_text">
<small class="form-text text-muted">Optional label rendered below the code. Only applies to PNG/JPEG/GIF, not SVG/EPS.</small>
</div>
</div>
</div>
</div>