hernani/koopa-admin-log
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bank landing: “How the shared account works” as expandable fold

Browse source 
The how-it-works list was always open and competed with the withdraw QR.

Make it a collapsed gold fold: title row with chevron, body expands on click.
Same wireFold helper style as the optional bank UI section.
This commit is contained in:
Hernâni Marques 2026-07-10 20:34:05 +02:00
parent 8b1a7f9d58
commit 265a7fa3eb
No known key found for this signature in database
1 changed files with 79 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

102
configs/bank-landing/index.html
View file

@ -82,14 +82,6 @@
border: 1px solid rgba(232, 168, 56, 0.4);
letter-spacing: 0.04em;
}
.how-note {
margin: 0 0 1.15rem;
padding: 0.8rem 0.95rem;
border-radius: 12px;
font-size: 0.88rem;
line-height: 1.45;
text-align: left;
}
.balance-note {
margin: 0.75rem 0 0;
padding: 0.55rem 0.7rem;
@ -102,17 +94,60 @@
text-align: left;
}
.balance-note strong { color: #f0c86a; font-weight: 750; }
.how-note {
/* How shared account works: collapsed until click */
.how-fold {
margin: 0 0 1.15rem;
border: 1px solid rgba(232, 168, 56, 0.4);
border-radius: 14px;
overflow: hidden;
background: rgba(232, 168, 56, 0.08);
border: 1px solid rgba(232, 168, 56, 0.35);
color: #f5e6c8;
font-size: 0.88rem;
line-height: 1.45;
}
.how-note strong { color: #f0c86a; font-weight: 750; }
.how-note ol {
margin: 0.4rem 0 0;
.how-fold-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
margin: 0;
padding: 0.75rem 0.9rem;
border: 0;
background: transparent;
color: #f0c86a;
font: inherit;
font-size: 0.9rem;
font-weight: 750;
text-align: left;
cursor: pointer;
line-height: 1.3;
}
.how-fold-toggle:hover {
background: rgba(232, 168, 56, 0.12);
color: #f5d78a;
}
.how-fold-toggle-text { flex: 1; }
.how-fold-chevron {
flex-shrink: 0;
transition: transform 0.15s ease;
color: #e8a838;
font-size: 0.95rem;
}
.how-fold.open .how-fold-chevron { transform: rotate(90deg); }
.how-fold-body {
display: none;
padding: 0 0.95rem 0.9rem;
border-top: 1px solid rgba(232, 168, 56, 0.28);
}
.how-fold.open .how-fold-body { display: block; }
.how-fold-body ol {
margin: 0.55rem 0 0;
padding-left: 1.2rem;
}
.how-note li { margin: 0.25rem 0; }
.how-fold-body li { margin: 0.3rem 0; }
.how-fold-body strong { color: #f0c86a; font-weight: 750; }
.step-card {
background: var(--card);
@ -706,15 +741,21 @@
</div>
</section>
<aside class="how-note" aria-labelledby="how-title">
<strong id="how-title">How the shared account works</strong>
<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">
<span class="how-fold-toggle-text" id="how-title">How the shared account works</span>
<span class="how-fold-chevron" aria-hidden="true">›</span>
</button>
<div class="how-fold-body" id="how-fold-body" hidden>
<ol>
<li><strong>Now live:</strong> one <strong>shared bank account</strong> (community pool) already holds GOA for everyone.</li>
<li>Each “Open shared withdraw” / QR is a <strong>one-shot withdraw from that shared account</strong> — you do <em>not</em> log into the bank for this step.</li>
<li>Your GNU Taler app receives coins after the bank confirms (automatic on this demo).</li>
<li>Optional below: register your <em>own</em> bank UI account only if you want a private balance separate from the pool.</li>
</ol>
</aside>
</div>
</div>
<!-- ========== Optional bank UI + mini GOA shop (collapsed) ========== -->
<div class="more-section" id="more-fold">
@ -983,29 +1024,32 @@
var refreshBtn = document.getElementById("withdraw-demo-refresh");
if (refreshBtn) refreshBtn.onclick = function () { loadDemoWithdraw(); };
/* Optional bank UI + shop: collapsed until click (like settlement QR fold) */
(function () {
var fold = document.getElementById("more-fold");
var btn = document.getElementById("more-fold-toggle");
var body = document.getElementById("more-fold-body");
/* Collapsible folds (like settlement QR fold) */
function wireFold(foldId, btnId, bodyId, onOpen) {
var fold = document.getElementById(foldId);
var btn = document.getElementById(btnId);
var body = document.getElementById(bodyId);
if (!fold || !btn || !body) return;
var webuiPainted = false;
function paintWebuiQr() {
if (webuiPainted) return;
makeQr(document.getElementById("qr-webui"), WEBUI);
webuiPainted = true;
}
btn.addEventListener("click", function () {
var open = !fold.classList.contains("open");
fold.classList.toggle("open", open);
btn.setAttribute("aria-expanded", open ? "true" : "false");
if (open) {
body.removeAttribute("hidden");
paintWebuiQr();
if (onOpen) onOpen();
} else {
body.setAttribute("hidden", "");
}
});
}
wireFold("how-fold", "how-fold-toggle", "how-fold-body");
(function () {
var webuiPainted = false;
wireFold("more-fold", "more-fold-toggle", "more-fold-body", function () {
if (webuiPainted) return;
makeQr(document.getElementById("qr-webui"), WEBUI);
webuiPainted = true;
});
})();
function fmtCest(unix, fallback) {