bank landing: GOA shop after withdraw, compact withdraw

Shop stays always visible after the one-step withdraw card.
This commit is contained in:
Hernâni Marques 2026-07-10 18:11:00 +02:00
parent ff4917af2f
commit 548fdcf983
No known key found for this signature in database
2 changed files with 94 additions and 34 deletions

View file

@ -163,6 +163,63 @@
}
.step-card.step-money {
border-color: rgba(62, 207, 191, 0.4);
padding: 1rem 1.05rem 1.05rem;
margin-bottom: 1rem;
}
.step-card.step-money h2 {
font-size: 1.15rem;
margin: 0 0 0.15rem;
}
.step-card.step-money .step-num {
width: 1.75rem;
height: 1.75rem;
font-size: 1rem;
margin-right: 0.4rem;
}
.step-card.step-money .step-tagline {
margin: 0 0 0.65rem;
font-size: 0.88rem;
}
.step-card.step-money .step-body {
gap: 0.5rem;
}
.step-card.step-money .qr-taler-wrap {
max-width: 200px;
}
.step-card.step-money .qr-taler-wrap .goa-pay-taler-qr {
margin-bottom: 0.3rem;
max-width: 200px;
padding: 7px;
border-radius: 16px;
}
.step-card.step-money .goa-pay-taler-qr__inner {
padding: 7px;
border-radius: 14px;
min-height: 0;
}
.step-card.step-money .qr-label {
margin-top: 0;
font-size: 0.78rem;
}
.step-card.step-money .cta {
font-size: 0.92rem;
padding: 0.55rem 1.05rem;
border-radius: 10px;
}
.step-card.step-money a.meta-uri {
margin: 0.1rem 0 0;
font-size: 0.68rem;
max-width: 20rem;
}
.step-card.step-money .balance-note {
margin: 0.35rem 0 0;
padding: 0.4rem 0.55rem;
font-size: 0.76rem;
line-height: 1.35;
}
.step-card.step-money button.gen-own-acct {
margin-top: 0.05rem;
font-size: 0.76rem;
}
.step-num {
display: inline-flex;
@ -825,10 +882,10 @@
</div>
</section>
<!-- ========== STEP 2: one-click community pool withdraw ========== -->
<!-- ========== STEP 2: one-click community pool withdraw (compact) ========== -->
<section class="step-card step-money" id="withdraw" aria-labelledby="step2-title">
<h2 id="step2-title"><span class="step-num">2</span> Withdraw GOA</h2>
<p class="step-tagline">One QR · shared account · no registration</p>
<p class="step-tagline">One QR · shared pool · no registration</p>
<div class="step-body">
<div class="qr-taler-wrap">
<div class="goa-pay-taler-qr" id="qr-withdraw-demo-wrap">
@ -852,6 +909,27 @@
</div>
</section>
<!-- ========== GOA shop (after withdraw, always visible) ========== -->
<aside class="shop-box" aria-labelledby="shop-title">
<h2 id="shop-title">GOA shop · samples</h2>
<p class="shop-lead">Tap → pay link · more at merchant</p>
<div class="shop-grid">
<button type="button" class="shop-item" data-product="orbit-sticker">
<span class="emoji" aria-hidden="true">🪐</span>
<span class="name">Orbit sticker pack</span>
<span class="price">GOA:2</span>
</button>
<button type="button" class="shop-item" data-product="nebula-coffee">
<span class="emoji" aria-hidden="true"></span>
<span class="name">Nebula coffee</span>
<span class="price">GOA:5</span>
</button>
</div>
<p class="shop-foot">
<a href="https://taler.hacktivism.ch/intro/">For more → taler.hacktivism.ch</a>
</p>
</aside>
<div class="how-fold" id="how-fold">
<button type="button" class="how-fold-toggle" id="how-fold-toggle"
aria-expanded="false" aria-controls="how-fold-body">
@ -868,11 +946,11 @@
</div>
</div>
<!-- ========== Optional bank UI + mini GOA shop (collapsed) ========== -->
<!-- ========== Optional: own bank UI account (collapsed) ========== -->
<div class="more-section" id="more-fold">
<button type="button" class="more-fold-toggle" id="more-fold-toggle"
aria-expanded="false" aria-controls="more-fold-body">
<span class="more-fold-toggle-text">Optional · bank UI &amp; GOA shop</span>
<span class="more-fold-toggle-text">Optional · own bank account</span>
<span class="more-fold-chevron" aria-hidden="true"></span>
</button>
<div class="more-fold-body" id="more-fold-body" hidden>
@ -925,26 +1003,6 @@
</button>
</div>
</div>
<aside class="shop-box shop-mini" aria-labelledby="shop-title" style="margin-top:1rem">
<h2 id="shop-title">GOA shop · samples</h2>
<p class="shop-lead">Tap → pay link · more at merchant</p>
<div class="shop-grid">
<button type="button" class="shop-item" data-product="orbit-sticker">
<span class="emoji" aria-hidden="true">🪐</span>
<span class="name">Orbit sticker pack</span>
<span class="price">GOA:2</span>
</button>
<button type="button" class="shop-item" data-product="nebula-coffee">
<span class="emoji" aria-hidden="true"></span>
<span class="name">Nebula coffee</span>
<span class="price">GOA:5</span>
</button>
</div>
<p class="shop-foot">
<a href="https://taler.hacktivism.ch/intro/">For more → taler.hacktivism.ch</a>
</p>
</aside>
</div>
</div>
@ -1071,10 +1129,10 @@
};
imgEl.style.display = "";
}
function makeQr(el, text, logoEl) {
function makeQr(el, text, logoEl, sizeOpt) {
if (!el) return;
el.innerHTML = "";
var size = 220;
var size = sizeOpt || 220;
if (!text) {
el.innerHTML = '<p style="padding:1rem;color:#666;font-size:0.85rem"></p>';
return;
@ -1158,7 +1216,8 @@
makeQr(
document.getElementById("qr-withdraw-demo"),
uri,
document.getElementById("qr-withdraw-demo-logo")
document.getElementById("qr-withdraw-demo-logo"),
176
);
}