bank landing: GOA shop after withdraw, compact withdraw
Shop stays always visible after the one-step withdraw card.
This commit is contained in:
parent
ff4917af2f
commit
548fdcf983
2 changed files with 94 additions and 34 deletions
|
|
@ -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 & 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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue