bank landing: shared-account withdraw and live pool balance
Primary bank funding path is the community shared account (not a personal login). Withdraw step explains that briefly and shows a short “surprising balance?” note with the live explorer pool amount from stats.json (balance_explorer). Move GOA flow stats and Performance to the bottom of the page so the install → withdraw path stays first. Collapse optional bank UI / GOA shop behind a click-to-open fold (same interaction pattern as settlement panels).
This commit is contained in:
Hernâni Marques
parent
04bafc84a6
commit
8b1a7f9d58
1 changed files with 238 additions and 165 deletions
|
|
@ -82,7 +82,6 @@
|
||||||
border: 1px solid rgba(232, 168, 56, 0.4);
|
border: 1px solid rgba(232, 168, 56, 0.4);
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
.community-note,
|
|
||||||
.how-note {
|
.how-note {
|
||||||
margin: 0 0 1.15rem;
|
margin: 0 0 1.15rem;
|
||||||
padding: 0.8rem 0.95rem;
|
padding: 0.8rem 0.95rem;
|
||||||
|
|
@ -91,12 +90,18 @@
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.community-note {
|
.balance-note {
|
||||||
background: rgba(94, 234, 212, 0.1);
|
margin: 0.75rem 0 0;
|
||||||
border: 1px solid rgba(94, 234, 212, 0.4);
|
padding: 0.55rem 0.7rem;
|
||||||
color: #ccfbf1;
|
border-radius: 10px;
|
||||||
|
background: rgba(232, 168, 56, 0.08);
|
||||||
|
border: 1px solid rgba(232, 168, 56, 0.32);
|
||||||
|
color: #f5e6c8;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
.community-note strong { color: #5eead4; font-weight: 750; }
|
.balance-note strong { color: #f0c86a; font-weight: 750; }
|
||||||
.how-note {
|
.how-note {
|
||||||
background: rgba(232, 168, 56, 0.08);
|
background: rgba(232, 168, 56, 0.08);
|
||||||
border: 1px solid rgba(232, 168, 56, 0.35);
|
border: 1px solid rgba(232, 168, 56, 0.35);
|
||||||
|
|
@ -307,21 +312,56 @@
|
||||||
.step-tagline .app-ico.ios { color: #5eead4; }
|
.step-tagline .app-ico.ios { color: #5eead4; }
|
||||||
.step-tagline .app-ico.android { color: #f0c86a; }
|
.step-tagline .app-ico.android { color: #f0c86a; }
|
||||||
|
|
||||||
|
/* Optional block: collapsed by default, expand like settlement / wallet fold */
|
||||||
.more-section {
|
.more-section {
|
||||||
margin-top: 2.75rem;
|
margin-top: 1.5rem;
|
||||||
padding-top: 1.75rem;
|
margin-bottom: 1.35rem;
|
||||||
border-top: 1px dashed rgba(201, 184, 160, 0.35);
|
border: 1px solid rgba(201, 184, 160, 0.4);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(18, 28, 28, 0.55);
|
||||||
}
|
}
|
||||||
.more-section > .more-label {
|
.more-section > .more-label {
|
||||||
display: block;
|
display: none; /* replaced by toggle */
|
||||||
text-align: center;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--muted);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
.more-fold-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.8rem 0.95rem;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: #e8c878;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
font-weight: 750;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.more-fold-toggle:hover {
|
||||||
|
background: rgba(232, 168, 56, 0.1);
|
||||||
|
color: #f0d090;
|
||||||
|
}
|
||||||
|
.more-fold-toggle-text { flex: 1; }
|
||||||
|
.more-fold-chevron {
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
color: #3ecfbf;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.more-section.open .more-fold-chevron { transform: rotate(90deg); }
|
||||||
|
.more-fold-body {
|
||||||
|
display: none;
|
||||||
|
padding: 0 0.95rem 1.1rem;
|
||||||
|
border-top: 1px solid rgba(201, 184, 160, 0.3);
|
||||||
|
}
|
||||||
|
.more-section.open .more-fold-body { display: block; }
|
||||||
|
.more-fold-body > .more-card { margin-top: 0.85rem; }
|
||||||
.more-card {
|
.more-card {
|
||||||
background: rgba(18, 28, 28, 0.65);
|
background: rgba(18, 28, 28, 0.65);
|
||||||
border: 1px dashed rgba(62, 207, 191, 0.35);
|
border: 1px dashed rgba(62, 207, 191, 0.35);
|
||||||
|
|
@ -561,21 +601,166 @@
|
||||||
<body data-shop-theme="bank">
|
<body data-shop-theme="bank">
|
||||||
<main>
|
<main>
|
||||||
<header class="hero">
|
<header class="hero">
|
||||||
<span class="badge">Exploration · GOA</span>
|
<span class="badge">Exploration · GOA · shared account</span>
|
||||||
<h1>GOA Exploration Bank</h1>
|
<h1>GOA Exploration Bank</h1>
|
||||||
<p class="sub">
|
<p class="sub">
|
||||||
Install the wallet, then <strong>one QR</strong> withdraws GOA from a
|
This bank now funds wallets from a <strong>single shared bank account</strong>
|
||||||
<strong>community-shared bank account</strong> — no personal bank registration.
|
for everyone. Install the wallet, scan <strong>one QR</strong> — no personal
|
||||||
|
bank registration for the demo.
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<p class="community-note" role="note">
|
<!-- ========== STEP 1: install apps ========== -->
|
||||||
<strong>Community pool.</strong>
|
<section class="step-card" aria-labelledby="step1-title">
|
||||||
Demo GOA comes from one shared exploration account used by everyone on this site
|
<h2 id="step1-title"><span class="step-num">1</span> Get the wallet</h2>
|
||||||
(not your private bank login). Balance is shared; amounts are small; for play only.
|
<div class="step-body">
|
||||||
</p>
|
<div class="app-links">
|
||||||
|
<a class="app-btn"
|
||||||
|
href="https://play.google.com/store/apps/details?id=net.taler.wallet"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
|
aria-label="Android Play Store">
|
||||||
|
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
|
||||||
|
Play Store
|
||||||
|
</a>
|
||||||
|
<a class="app-btn"
|
||||||
|
href="https://f-droid.org/en/packages/net.taler.wallet.fdroid/"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
|
aria-label="Android F-Droid">
|
||||||
|
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
|
||||||
|
F-Droid
|
||||||
|
</a>
|
||||||
|
<a class="app-btn ios"
|
||||||
|
href="https://apps.apple.com/app/taler-wallet/id6463440117"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
|
aria-label="iOS App Store">
|
||||||
|
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 12.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.7-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.5-.7 2.8-.7s1.7.7 2.8.7 1.9-1 2.6-2c.8-1.1 1.1-2.2 1.1-2.3-.1 0-2.2-.8-2.2-3.3zm-2-6.2c.6-.7 1-1.7.9-2.7-1 .1-2.1.6-2.8 1.4-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.8-1.3z"/></svg>
|
||||||
|
App Store
|
||||||
|
</a>
|
||||||
|
<a class="app-btn hub"
|
||||||
|
href="https://wallet.taler.net/"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
|
aria-label="Web browsers (experimental): Chrome, Firefox, Edge, Brave">
|
||||||
|
<span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Edge · Brave">
|
||||||
|
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Chrome">
|
||||||
|
<circle cx="12" cy="12" r="10" fill="#DEE1E6"/>
|
||||||
|
<path fill="#EA4335" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
|
||||||
|
<path fill="#FBBC04" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
|
||||||
|
<path fill="#34A853" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
|
||||||
|
<circle cx="12" cy="12" r="4" fill="#fff"/>
|
||||||
|
<circle cx="12" cy="12" r="3.1" fill="#4285F4"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Firefox">
|
||||||
|
<circle cx="12" cy="12.2" r="8.2" fill="#9059FF"/>
|
||||||
|
<path fill="#FF7139" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
|
||||||
|
<path fill="#FFD567" d="M12.1 9.4c1.6 0 2.9.9 3.5 2.2-.7-.4-1.5-.6-2.4-.6-2.2 0-4 1.6-4.2 3.7-.5-.8-.7-1.8-.6-2.8.4-1.5 1.8-2.5 3.7-2.5z"/>
|
||||||
|
<circle cx="12.2" cy="13.4" r="2.35" fill="#20123A"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Edge">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="edge-g-bank" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0C59A4"/>
|
||||||
|
<stop offset="0.55" stop-color="#1B9DE2"/>
|
||||||
|
<stop offset="1" stop-color="#36C5F0"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="12" cy="12" r="10" fill="url(#edge-g-bank)"/>
|
||||||
|
<path fill="#fff" d="M6.2 14.6c.6 3.1 3.3 5.4 6.6 5.4 3.7 0 6.7-2.7 7.1-6.2-1.4 1.7-3.6 2.7-6 2.7-1.5 0-2.9-.4-4-1.2.6.1 1.2.2 1.8.2 3.4 0 5.9-1.9 5.9-4.6 0-.7-.2-1.3-.5-1.9-1.4-2.5-4.3-3.6-7.2-2.7C7.1 7.2 5.3 9.6 5.3 12.3c0 .8.2 1.6.5 2.3h.4z"/>
|
||||||
|
<path fill="#9CE4FA" opacity="0.9" d="M12.8 8.1c1.9 0 3.5 1.1 3.5 2.8 0 1.9-1.8 3.2-4.4 3.2-1.4 0-2.6-.4-3.5-1 1.5 2.1 4.1 3.2 6.7 2.8 2.2-.3 3.9-1.9 4.4-4-1.1 1.1-2.7 1.7-4.4 1.7-1.6 0-2.9-.7-2.9-1.9 0-1.1 1-1.9 2.5-2.1.4-.1.7-.3.9-.5-.8-.6-1.7-.9-2.8-.9z"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Brave">
|
||||||
|
<path fill="#FB542B" d="M12 2.2 4.8 5.1v5.6c0 5.1 3.4 9.8 7.2 11.1 3.8-1.3 7.2-6 7.2-11.1V5.1L12 2.2z"/>
|
||||||
|
<path fill="#fff" d="M12 5.1 8.1 6.7l.7 1.5L7.2 10l1.5.9L7.6 13.2l2.2.4L12 18.2l2.2-4.6 2.2-.4-1.1-2.3 1.5-.9-1.6-1.8.7-1.5L12 5.1z"/>
|
||||||
|
<path fill="#FB542B" d="M12 7.2 10.3 8l.5 1.1h2.4l.5-1.1L12 7.2zm-1.6 3.1L9.2 11.6l.9.5.4-1.8h-.1zm3.2 0h-.1l.4 1.8.9-.5-1.2-1.3zM10.4 13l-.5 1.1L12 16.1l2.1-2-.5-1.1h-3.2z"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Web browsers (experimental)
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- ========== LIVE STATS ========== -->
|
<!-- ========== STEP 2: one-click community pool withdraw ========== -->
|
||||||
|
<section class="step-card step-money" id="withdraw" aria-labelledby="step2-title">
|
||||||
|
<h2 id="step2-title"><span class="step-num">2</span> Withdraw from shared account</h2>
|
||||||
|
<p class="step-tagline">One QR · shared community bank account · no registration</p>
|
||||||
|
<div class="step-body">
|
||||||
|
<div class="qr-box">
|
||||||
|
<div id="qr-withdraw-demo"></div>
|
||||||
|
<div class="qr-label">Shared account · scan or open in wallet</div>
|
||||||
|
</div>
|
||||||
|
<a class="cta teal" id="open-withdraw-demo" href="#">
|
||||||
|
Open shared withdraw →
|
||||||
|
</a>
|
||||||
|
<p class="meta" id="withdraw-demo-meta">Preparing shared-account withdraw…</p>
|
||||||
|
<p class="meta" id="withdraw-demo-amount" hidden></p>
|
||||||
|
<button type="button" class="cta-sec" id="withdraw-demo-refresh" style="margin-top:0.5rem">
|
||||||
|
Get a fresh QR
|
||||||
|
</button>
|
||||||
|
<p class="balance-note" role="note">
|
||||||
|
<strong>Surprising balance?</strong>
|
||||||
|
Shared pool currently holds
|
||||||
|
<strong id="shared-balance">…</strong>
|
||||||
|
— that is the communal demo account, not yours. You only receive the
|
||||||
|
small withdraw amount into your wallet.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="how-note" aria-labelledby="how-title">
|
||||||
|
<strong id="how-title">How the shared account works</strong>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- ========== Optional bank UI + mini GOA shop (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-chevron" aria-hidden="true">›</span>
|
||||||
|
</button>
|
||||||
|
<div class="more-fold-body" id="more-fold-body" hidden>
|
||||||
|
<div class="more-card">
|
||||||
|
<h2>Own bank account?</h2>
|
||||||
|
<p>Register in the bank UI for your own balance (separate from the shared pool).</p>
|
||||||
|
<div class="more-qr">
|
||||||
|
<div class="qr-box">
|
||||||
|
<div id="qr-webui"></div>
|
||||||
|
<div class="qr-label">Bank UI · register / login</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="more-actions">
|
||||||
|
<a class="cta-sec" href="/webui/">Open bank UI →</a>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- ========== LIVE STATS (before performance) ========== -->
|
||||||
<section class="stats" id="stats" aria-labelledby="stats-title" hidden>
|
<section class="stats" id="stats" aria-labelledby="stats-title" hidden>
|
||||||
<h2 id="stats-title">GOA flow</h2>
|
<h2 id="stats-title">GOA flow</h2>
|
||||||
<div class="stats-grid">
|
<div class="stats-grid">
|
||||||
|
|
@ -660,143 +845,6 @@
|
||||||
<p class="stats-foot" id="st-perf-foot">Memory from /proc + cgroup inside podman container.</p>
|
<p class="stats-foot" id="st-perf-foot">Memory from /proc + cgroup inside podman container.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ========== STEP 1: install apps ========== -->
|
|
||||||
<section class="step-card" aria-labelledby="step1-title">
|
|
||||||
<h2 id="step1-title"><span class="step-num">1</span> Get the wallet</h2>
|
|
||||||
<div class="step-body">
|
|
||||||
<div class="app-links">
|
|
||||||
<a class="app-btn"
|
|
||||||
href="https://play.google.com/store/apps/details?id=net.taler.wallet"
|
|
||||||
target="_blank" rel="noopener noreferrer"
|
|
||||||
aria-label="Android Play Store">
|
|
||||||
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
|
|
||||||
Play Store
|
|
||||||
</a>
|
|
||||||
<a class="app-btn"
|
|
||||||
href="https://f-droid.org/en/packages/net.taler.wallet.fdroid/"
|
|
||||||
target="_blank" rel="noopener noreferrer"
|
|
||||||
aria-label="Android F-Droid">
|
|
||||||
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.2 2.4l-.9-1.6c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.9 1.6c.8-.3 1.7-.5 2.6-.5s1.8.2 2.6.5l.9-1.6c.1-.2.3-.3.5-.2.2.1.3.3.2.5l-.9 1.6c1.8.8 3.1 2.5 3.3 4.6H4.9c.2-2.1 1.5-3.8 3.3-4.6zM7 8.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm10 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM5 10.5h14c.6 0 1 .4 1 1v6.2c0 1.3-1 2.3-2.3 2.3h-.5v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-4.8v2.2c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-2.2h-.5C5.9 20 5 19 5 17.7v-6.2c0-.6.4-1 1-1z"/></svg>
|
|
||||||
F-Droid
|
|
||||||
</a>
|
|
||||||
<a class="app-btn ios"
|
|
||||||
href="https://apps.apple.com/app/taler-wallet/id6463440117"
|
|
||||||
target="_blank" rel="noopener noreferrer"
|
|
||||||
aria-label="iOS App Store">
|
|
||||||
<svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 12.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.7-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.5-.7 2.8-.7s1.7.7 2.8.7 1.9-1 2.6-2c.8-1.1 1.1-2.2 1.1-2.3-.1 0-2.2-.8-2.2-3.3zm-2-6.2c.6-.7 1-1.7.9-2.7-1 .1-2.1.6-2.8 1.4-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.8-1.3z"/></svg>
|
|
||||||
App Store
|
|
||||||
</a>
|
|
||||||
<a class="app-btn hub"
|
|
||||||
href="https://wallet.taler.net/"
|
|
||||||
target="_blank" rel="noopener noreferrer"
|
|
||||||
aria-label="Web browsers (experimental): Chrome, Firefox, Edge, Brave">
|
|
||||||
<span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Edge · Brave">
|
|
||||||
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Chrome">
|
|
||||||
<circle cx="12" cy="12" r="10" fill="#DEE1E6"/>
|
|
||||||
<path fill="#EA4335" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
|
|
||||||
<path fill="#FBBC04" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
|
|
||||||
<path fill="#34A853" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
|
|
||||||
<circle cx="12" cy="12" r="4" fill="#fff"/>
|
|
||||||
<circle cx="12" cy="12" r="3.1" fill="#4285F4"/>
|
|
||||||
</svg>
|
|
||||||
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Firefox">
|
|
||||||
<circle cx="12" cy="12.2" r="8.2" fill="#9059FF"/>
|
|
||||||
<path fill="#FF7139" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
|
|
||||||
<path fill="#FFD567" d="M12.1 9.4c1.6 0 2.9.9 3.5 2.2-.7-.4-1.5-.6-2.4-.6-2.2 0-4 1.6-4.2 3.7-.5-.8-.7-1.8-.6-2.8.4-1.5 1.8-2.5 3.7-2.5z"/>
|
|
||||||
<circle cx="12.2" cy="13.4" r="2.35" fill="#20123A"/>
|
|
||||||
</svg>
|
|
||||||
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Edge">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="edge-g-bank" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#0C59A4"/>
|
|
||||||
<stop offset="0.55" stop-color="#1B9DE2"/>
|
|
||||||
<stop offset="1" stop-color="#36C5F0"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<circle cx="12" cy="12" r="10" fill="url(#edge-g-bank)"/>
|
|
||||||
<path fill="#fff" d="M6.2 14.6c.6 3.1 3.3 5.4 6.6 5.4 3.7 0 6.7-2.7 7.1-6.2-1.4 1.7-3.6 2.7-6 2.7-1.5 0-2.9-.4-4-1.2.6.1 1.2.2 1.8.2 3.4 0 5.9-1.9 5.9-4.6 0-.7-.2-1.3-.5-1.9-1.4-2.5-4.3-3.6-7.2-2.7C7.1 7.2 5.3 9.6 5.3 12.3c0 .8.2 1.6.5 2.3h.4z"/>
|
|
||||||
<path fill="#9CE4FA" opacity="0.9" d="M12.8 8.1c1.9 0 3.5 1.1 3.5 2.8 0 1.9-1.8 3.2-4.4 3.2-1.4 0-2.6-.4-3.5-1 1.5 2.1 4.1 3.2 6.7 2.8 2.2-.3 3.9-1.9 4.4-4-1.1 1.1-2.7 1.7-4.4 1.7-1.6 0-2.9-.7-2.9-1.9 0-1.1 1-1.9 2.5-2.1.4-.1.7-.3.9-.5-.8-.6-1.7-.9-2.8-.9z"/>
|
|
||||||
</svg>
|
|
||||||
<svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Brave">
|
|
||||||
<path fill="#FB542B" d="M12 2.2 4.8 5.1v5.6c0 5.1 3.4 9.8 7.2 11.1 3.8-1.3 7.2-6 7.2-11.1V5.1L12 2.2z"/>
|
|
||||||
<path fill="#fff" d="M12 5.1 8.1 6.7l.7 1.5L7.2 10l1.5.9L7.6 13.2l2.2.4L12 18.2l2.2-4.6 2.2-.4-1.1-2.3 1.5-.9-1.6-1.8.7-1.5L12 5.1z"/>
|
|
||||||
<path fill="#FB542B" d="M12 7.2 10.3 8l.5 1.1h2.4l.5-1.1L12 7.2zm-1.6 3.1L9.2 11.6l.9.5.4-1.8h-.1zm3.2 0h-.1l.4 1.8.9-.5-1.2-1.3zM10.4 13l-.5 1.1L12 16.1l2.1-2-.5-1.1h-3.2z"/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
Web browsers (experimental)
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- ========== STEP 2: one-click community pool withdraw ========== -->
|
|
||||||
<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 · community-shared account · no registration</p>
|
|
||||||
<div class="step-body">
|
|
||||||
<div class="qr-box">
|
|
||||||
<div id="qr-withdraw-demo"></div>
|
|
||||||
<div class="qr-label">Scan or open in wallet</div>
|
|
||||||
</div>
|
|
||||||
<a class="cta teal" id="open-withdraw-demo" href="#">
|
|
||||||
Open in wallet →
|
|
||||||
</a>
|
|
||||||
<p class="meta" id="withdraw-demo-meta">Preparing community withdraw…</p>
|
|
||||||
<p class="meta" id="withdraw-demo-amount" hidden></p>
|
|
||||||
<button type="button" class="cta-sec" id="withdraw-demo-refresh" style="margin-top:0.5rem">
|
|
||||||
Get a fresh QR
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<aside class="how-note" aria-labelledby="how-title">
|
|
||||||
<strong id="how-title">How this works</strong>
|
|
||||||
<ol>
|
|
||||||
<li>A <strong>community-shared bank account</strong> (demo pool) already holds GOA.</li>
|
|
||||||
<li>Each “Open in wallet” / QR creates a <strong>one-shot withdraw</strong> from that pool — you do <em>not</em> open your own bank account.</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 if you want a private balance.</li>
|
|
||||||
</ol>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- ========== Optional bank UI + mini GOA shop teaser ========== -->
|
|
||||||
<div class="more-section">
|
|
||||||
<span class="more-label">Optional · bank UI & GOA shop</span>
|
|
||||||
<div class="more-card">
|
|
||||||
<h2>Own bank account?</h2>
|
|
||||||
<p>Register in the bank UI for your own balance.</p>
|
|
||||||
<div class="more-qr">
|
|
||||||
<div class="qr-box">
|
|
||||||
<div id="qr-webui"></div>
|
|
||||||
<div class="qr-label">Bank UI · register / login</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="more-actions">
|
|
||||||
<a class="cta-sec" href="/webui/">Open bank UI →</a>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
hacktivism.ch ·
|
hacktivism.ch ·
|
||||||
<a href="https://bank.hacktivism.ch/intro/">Bank</a> ·
|
<a href="https://bank.hacktivism.ch/intro/">Bank</a> ·
|
||||||
|
|
@ -878,7 +926,7 @@
|
||||||
if (amtEl) {
|
if (amtEl) {
|
||||||
if (amount) {
|
if (amount) {
|
||||||
amtEl.hidden = false;
|
amtEl.hidden = false;
|
||||||
amtEl.textContent = "Amount: " + amount + " · from community pool";
|
amtEl.textContent = "Amount: " + amount + " · from shared account";
|
||||||
} else {
|
} else {
|
||||||
amtEl.hidden = true;
|
amtEl.hidden = true;
|
||||||
}
|
}
|
||||||
|
|
@ -934,7 +982,31 @@
|
||||||
loadDemoWithdraw();
|
loadDemoWithdraw();
|
||||||
var refreshBtn = document.getElementById("withdraw-demo-refresh");
|
var refreshBtn = document.getElementById("withdraw-demo-refresh");
|
||||||
if (refreshBtn) refreshBtn.onclick = function () { loadDemoWithdraw(); };
|
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");
|
||||||
|
if (!fold || !btn || !body) return;
|
||||||
|
var webuiPainted = false;
|
||||||
|
function paintWebuiQr() {
|
||||||
|
if (webuiPainted) return;
|
||||||
makeQr(document.getElementById("qr-webui"), WEBUI);
|
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();
|
||||||
|
} else {
|
||||||
|
body.setAttribute("hidden", "");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
function fmtCest(unix, fallback) {
|
function fmtCest(unix, fallback) {
|
||||||
var base = "";
|
var base = "";
|
||||||
|
|
@ -988,6 +1060,7 @@
|
||||||
set("st-withdraw", fwd.amount || w.total_amount || "—");
|
set("st-withdraw", fwd.amount || w.total_amount || "—");
|
||||||
set("st-24h", h24.amount || "GOA:0");
|
set("st-24h", h24.amount || "GOA:0");
|
||||||
set("st-7d", h7.amount || "GOA:0");
|
set("st-7d", h7.amount || "GOA:0");
|
||||||
|
set("shared-balance", d.balance_explorer || "—");
|
||||||
|
|
||||||
var list = document.getElementById("st-recent");
|
var list = document.getElementById("st-recent");
|
||||||
if (list) {
|
if (list) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue