merchant landing: platform SVGs and experimental browser row
Wallet install icons (Android gold / iOS teal) plus browser platform marks; dual-currency hero stays short.
This commit is contained in:
parent
feec1ea526
commit
9a252b8339
1 changed files with 44 additions and 7 deletions
|
|
@ -183,7 +183,7 @@
|
||||||
margin-bottom: 0.85rem;
|
margin-bottom: 0.85rem;
|
||||||
}
|
}
|
||||||
.app-btn {
|
.app-btn {
|
||||||
display: inline-flex; align-items: center; justify-content: center;
|
display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
|
||||||
min-width: 9rem; text-decoration: none; font-weight: 700; font-size: 0.88rem;
|
min-width: 9rem; text-decoration: none; font-weight: 700; font-size: 0.88rem;
|
||||||
padding: 0.55rem 0.85rem; border-radius: 10px;
|
padding: 0.55rem 0.85rem; border-radius: 10px;
|
||||||
border: 1px solid rgba(167, 139, 250, 0.45); background: rgba(0,0,0,0.28); color: #e9d5ff;
|
border: 1px solid rgba(167, 139, 250, 0.45); background: rgba(0,0,0,0.28); color: #e9d5ff;
|
||||||
|
|
@ -191,8 +191,24 @@
|
||||||
.app-btn.ios { border-color: rgba(94, 234, 212, 0.4); color: #b8f5ec; }
|
.app-btn.ios { border-color: rgba(94, 234, 212, 0.4); color: #b8f5ec; }
|
||||||
.app-btn.hub {
|
.app-btn.hub {
|
||||||
flex: 1 1 100%; border-color: rgba(184, 168, 201, 0.35); color: var(--muted);
|
flex: 1 1 100%; border-color: rgba(184, 168, 201, 0.35); color: var(--muted);
|
||||||
font-weight: 600; font-size: 0.82rem;
|
font-weight: 600; font-size: 0.82rem; gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
.app-ico { width: 1.15rem; height: 1.15rem; flex-shrink: 0; display: block; }
|
||||||
|
.app-ico path, .app-ico circle, .app-ico rect { fill: currentColor; }
|
||||||
|
.app-ico.stroke-ico path, .app-ico.stroke-ico circle, .app-ico.stroke-ico rect {
|
||||||
|
fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
.app-btn:not(.ios):not(.hub) .app-ico { color: #c4b5fd; }
|
||||||
|
.app-btn.ios .app-ico { color: #5eead4; }
|
||||||
|
.hub-icons { display: inline-flex; align-items: center; gap: 0.35rem; }
|
||||||
|
.hub-icons .app-ico { width: 1.05rem; height: 1.05rem; }
|
||||||
|
.hub-icons .app-ico.gold { color: #e9d5ff; }
|
||||||
|
.hub-icons .app-ico.blue { color: #93c5fd; }
|
||||||
|
.step-tagline .app-ico {
|
||||||
|
width: 1rem; height: 1rem; display: inline-block; vertical-align: -0.15em; margin: 0 0.1em;
|
||||||
|
}
|
||||||
|
.step-tagline .app-ico.android { color: #c4b5fd; }
|
||||||
|
.step-tagline .app-ico.ios { color: #5eead4; }
|
||||||
.meta { font-size: 0.78rem; color: var(--muted); word-break: break-all; text-align: center; margin: 0.4rem 0 0.75rem; }
|
.meta { font-size: 0.78rem; color: var(--muted); word-break: break-all; text-align: center; margin: 0.4rem 0 0.75rem; }
|
||||||
.links { display: flex; flex-direction: column; gap: 0.55rem; }
|
.links { display: flex; flex-direction: column; gap: 0.55rem; }
|
||||||
.cta {
|
.cta {
|
||||||
|
|
@ -305,12 +321,33 @@
|
||||||
|
|
||||||
<section class="step-card">
|
<section class="step-card">
|
||||||
<h2>Wallet</h2>
|
<h2>Wallet</h2>
|
||||||
<p class="step-tagline">Android or iOS · GOA via bank/exchange one-step withdraw</p>
|
<p class="step-tagline">
|
||||||
|
<svg class="app-ico android" 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>
|
||||||
|
/
|
||||||
|
<svg class="app-ico ios" 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>
|
||||||
|
· GOA via bank/exchange one-step
|
||||||
|
</p>
|
||||||
<div class="app-links">
|
<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">Android · Play Store</a>
|
<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">
|
||||||
<a class="app-btn" href="https://f-droid.org/en/packages/net.taler.wallet.fdroid/" target="_blank" rel="noopener noreferrer">Android · F-Droid</a>
|
<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>
|
||||||
<a class="app-btn ios" href="https://apps.apple.com/app/taler-wallet/id6463440117" target="_blank" rel="noopener noreferrer">iOS · App Store</a>
|
Play Store
|
||||||
<a class="app-btn hub" href="https://wallet.taler.net/" target="_blank" rel="noopener noreferrer">All platforms · wallet.taler.net</a>
|
</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-.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="Browser platforms (experimental)">
|
||||||
|
<span class="hub-icons" aria-hidden="true">
|
||||||
|
<svg class="app-ico gold stroke-ico" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 8h18M8 18v2M16 18v2M10 20h4"/></svg>
|
||||||
|
<svg class="app-ico blue" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.2"/><path d="M12 3v5.5M12 15.5V21M3 12h5.5M15.5 12H21" opacity="0.85"/></svg>
|
||||||
|
<svg class="app-ico gold" viewBox="0 0 24 24"><path d="M12 3l7.5 4.2v9.6L12 21l-7.5-4.2V7.2L12 3z"/><path d="M12 8.2l3.8 2.1v4.3L12 16.7l-3.8-2.1v-4.3L12 8.2z" opacity="0.55"/></svg>
|
||||||
|
</span>
|
||||||
|
Browser platforms (experimental)
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<a class="cta-sec" href="https://bank.hacktivism.ch/intro/">Bank →</a>
|
<a class="cta-sec" href="https://bank.hacktivism.ch/intro/">Bank →</a>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue