From ae38882c7c35441c4279162869b9063370d8b412 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hern=C3=A2ni=20Marques?= Date: Fri, 10 Jul 2026 20:37:30 +0200 Subject: [PATCH] bank landing: QR_Taler blue ring on page QR codes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Page-level withdraw and bank-UI QRs were plain white boxes. Align them with the merchant shop pay popup (taler-merchant-webui QR_Taler / web-util): • animated conic ring (#0042B3 / #F1F1F4) • off-DOM encode to PNG • center qr-logo.svg plate Reuses shop-pay.css classes already loaded on the bank intro page. --- configs/bank-landing/index.html | 132 ++++++++++++++++++++++---------- 1 file changed, 90 insertions(+), 42 deletions(-) diff --git a/configs/bank-landing/index.html b/configs/bank-landing/index.html index 44ccf50..7dbd4f6 100644 --- a/configs/bank-landing/index.html +++ b/configs/bank-landing/index.html @@ -215,28 +215,25 @@ align-self: stretch; } .step-body li { margin: 0.4rem 0; } - .qr-box { - background: #fff; - padding: 0.85rem; - border-radius: 14px; + /* Page QRs: QR_Taler blue ring (same classes as shop-pay / merchant webui) */ + .qr-taler-wrap { text-align: center; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); + width: 100%; + max-width: 280px; } - .qr-box img, .qr-box canvas, .qr-box svg { - display: block; - width: 220px; - height: 220px; - margin: 0 auto; + .qr-taler-wrap .goa-pay-taler-qr { + margin-bottom: 0.55rem; } .qr-label { - margin-top: 0.6rem; + margin-top: 0.15rem; font-size: 0.85rem; - color: #3a342c; + color: var(--muted); font-weight: 700; - max-width: 240px; + max-width: 260px; margin-left: auto; margin-right: auto; } + .more-card .qr-label { color: #c9b8a0; } .cta { display: inline-block; text-align: center; @@ -447,10 +444,9 @@ justify-content: center; margin: 1rem 0 0.25rem; } - .more-qr .qr-box { + .more-qr .qr-taler-wrap { transform: scale(0.92); transform-origin: center top; - opacity: 0.95; } .stats { background: rgba(18, 28, 28, 0.55); @@ -719,8 +715,11 @@

2 Withdraw from shared account

One QR · shared community bank account · no registration

-
-
+
+
+
+ +
Shared account · scan or open in wallet
@@ -769,8 +768,11 @@

Own bank account?

Register in the bank UI for your own balance (separate from the shared pool).

-
-
+
+
+
+ +
Bank UI · register / login
@@ -908,23 +910,48 @@ /* Secondary: own-account path (register first) */ var WITHDRAW_EXCHANGE = "taler://withdraw-exchange/exchange.hacktivism.ch/"; - function makeQr(el, text) { + /* QR_Taler: off-DOM encode → PNG img + center logo (same as shop-pay / merchant) */ + function logoSrc() { + try { + var b = document.querySelector("base"); + if (b && b.href) return new URL("qr-logo.svg", b.href).href; + } catch (e) {} + return "/intro/qr-logo.svg"; + } + function setQrLogo(imgEl) { + if (!imgEl) return; + imgEl.src = logoSrc(); + imgEl.onerror = function () { + imgEl.style.display = "none"; + }; + imgEl.style.display = ""; + } + function makeQr(el, text, logoEl) { if (!el) return; el.innerHTML = ""; + var size = 220; if (!text) { - el.textContent = "…"; + el.innerHTML = '

…

'; return; } if (typeof QRCode === "undefined") { - el.textContent = "QR lib missing"; + el.innerHTML = '

QR lib missing

'; return; } - // Encode off-DOM so QR is visible (canvas/img not collapsed) - var size = 220; + var level = + QRCode.CorrectLevel && QRCode.CorrectLevel.M != null + ? QRCode.CorrectLevel.M + : 1; var scratch = document.createElement("div"); + scratch.setAttribute("aria-hidden", "true"); scratch.style.cssText = - "position:fixed;left:-9999px;top:0;width:" + size + "px;height:" + size + "px;opacity:0"; + "position:fixed;left:-9999px;top:0;width:" + + size + + "px;height:" + + size + + "px;overflow:hidden;opacity:0;pointer-events:none"; document.body.appendChild(scratch); + var dataUrl = ""; try { new QRCode(scratch, { text: String(text), @@ -932,26 +959,39 @@ height: size, colorDark: "#000000", colorLight: "#ffffff", - correctLevel: QRCode.CorrectLevel.M + correctLevel: level }); var canvas = scratch.querySelector("canvas"); - var dataUrl = canvas ? canvas.toDataURL("image/png") : ""; - if (dataUrl) { - var img = document.createElement("img"); - img.alt = "QR code"; - img.width = size; - img.height = size; - img.src = dataUrl; - img.style.display = "block"; - img.style.margin = "0 auto"; - el.appendChild(img); - } else { - el.appendChild(scratch.firstChild || document.createTextNode("QR failed")); + var libImg = scratch.querySelector("img"); + if (canvas && canvas.width > 0) { + try { + dataUrl = canvas.toDataURL("image/png"); + } catch (e1) {} } - } catch (e) { - el.textContent = "QR encode failed"; + if (!dataUrl && libImg && libImg.src && libImg.src.indexOf("data:") === 0) { + dataUrl = libImg.src; + } + } catch (err) { + dataUrl = ""; } if (scratch.parentNode) scratch.parentNode.removeChild(scratch); + if (!dataUrl) { + el.innerHTML = '

QR encode failed

'; + return; + } + var img = document.createElement("img"); + img.alt = "QR code"; + img.width = size; + img.height = size; + img.src = dataUrl; + img.style.display = "block"; + img.style.width = size + "px"; + img.style.height = size + "px"; + img.style.maxWidth = "100%"; + img.style.margin = "0 auto"; + img.style.background = "#fff"; + el.appendChild(img); + setQrLogo(logoEl); } function setDemoWithdraw(uri, amount) { @@ -972,7 +1012,11 @@ amtEl.hidden = true; } } - makeQr(document.getElementById("qr-withdraw-demo"), uri); + makeQr( + document.getElementById("qr-withdraw-demo"), + uri, + document.getElementById("qr-withdraw-demo-logo") + ); } function loadDemoWithdraw() { @@ -1047,7 +1091,11 @@ var webuiPainted = false; wireFold("more-fold", "more-fold-toggle", "more-fold-body", function () { if (webuiPainted) return; - makeQr(document.getElementById("qr-webui"), WEBUI); + makeQr( + document.getElementById("qr-webui"), + WEBUI, + document.getElementById("qr-webui-logo") + ); webuiPainted = true; }); })();