Feature: QR-Code mit Logo im Referral-Block — SW by-v441, APP_VER 420

qrcode.min.js (qrcodejs) lazy geladen; QRCode.CorrectLevel.H damit Logo-Overlay
(icon-180.png, 36px) den Code noch lesbar lässt; App.loadScript() public gemacht.
This commit is contained in:
rene 2026-04-27 06:23:01 +02:00
parent b4c3698a3a
commit e35a7a2692
4 changed files with 26 additions and 3 deletions

View file

@ -696,6 +696,17 @@ window.Page_settings = (() => {
overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${r.link}</div>
<button class="btn btn-primary btn-sm" id="ref-share-btn">${UI.icon('arrow-square-out')} Teilen</button>
</div>
<!-- QR-Code -->
<div style="display:flex;justify-content:center;margin-bottom:var(--space-4)">
<div style="position:relative;width:160px;height:160px">
<div id="ref-qr" style="width:160px;height:160px;border-radius:var(--radius-md);overflow:hidden"></div>
<img src="/icons/icon-180.png" alt=""
style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:36px;height:36px;border-radius:8px;border:2px solid #fff">
</div>
</div>
<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">
${UI.icon('users')} <strong>${r.count}</strong> ${r.count === 1 ? 'Person' : 'Personen'} über deinen Link registriert
</div>
@ -714,6 +725,16 @@ window.Page_settings = (() => {
UI.toast.success('Link kopiert!');
}
});
// QR-Code rendern (Bibliothek lazy laden)
await App.loadScript('/js/qrcode.min.js');
new QRCode(document.getElementById('ref-qr'), {
text: r.link,
width: 160,
height: 160,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
});
} catch { el.innerHTML = ''; }
}