diff --git a/configs/bank-landing/index.html b/configs/bank-landing/index.html index 4d31411..44ccf50 100644 --- a/configs/bank-landing/index.html +++ b/configs/bank-landing/index.html @@ -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 @@ - +
+ + +
@@ -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) {