merchant landing: wallet fold near top (app links only)
Move Get-the-wallet above the shop as a collapsible box like settlement QR; store links only, no Bank/Exchange CTAs inside.
This commit is contained in:
Hernâni Marques
parent
df474b741f
commit
5efd0de52b
1 changed files with 107 additions and 44 deletions
|
|
@ -364,6 +364,52 @@
|
||||||
display: block; margin-top: 0.2rem; font-size: 0.65rem; font-weight: 600;
|
display: block; margin-top: 0.2rem; font-size: 0.65rem; font-weight: 600;
|
||||||
color: var(--muted); line-height: 1.25; letter-spacing: 0.01em;
|
color: var(--muted); line-height: 1.25; letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Wallet: collapsed box, expand like settlement QR panel */
|
||||||
|
.wallet-fold {
|
||||||
|
margin: 0 0 1.15rem;
|
||||||
|
border: 1px solid rgba(167, 139, 250, 0.38);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(36, 28, 48, 0.72);
|
||||||
|
}
|
||||||
|
.wallet-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: #e9d5ff;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.wallet-fold-toggle:hover {
|
||||||
|
background: rgba(167, 139, 250, 0.12);
|
||||||
|
color: #faf5ff;
|
||||||
|
}
|
||||||
|
.wallet-fold-toggle-text { flex: 1; }
|
||||||
|
.wallet-fold-chevron {
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
color: var(--accent2);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.wallet-fold.open .wallet-fold-chevron { transform: rotate(90deg); }
|
||||||
|
.wallet-fold-body {
|
||||||
|
display: none;
|
||||||
|
padding: 0.15rem 0.9rem 1rem;
|
||||||
|
border-top: 1px solid rgba(167, 139, 250, 0.28);
|
||||||
|
}
|
||||||
|
.wallet-fold.open .wallet-fold-body { display: block; }
|
||||||
|
.wallet-fold-body .app-links { margin-top: 0.65rem; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -390,6 +436,52 @@
|
||||||
<a class="money-hint-cta" href="https://bank.hacktivism.ch/intro/">Get money at the bank →</a>
|
<a class="money-hint-cta" href="https://bank.hacktivism.ch/intro/">Get money at the bank →</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="wallet-fold" id="wallet-fold">
|
||||||
|
<button type="button" class="wallet-fold-toggle" id="wallet-fold-toggle"
|
||||||
|
aria-expanded="false" aria-controls="wallet-fold-body">
|
||||||
|
<span class="wallet-fold-toggle-text">Get the wallet · Android / iOS / browser</span>
|
||||||
|
<span class="wallet-fold-chevron" aria-hidden="true">›</span>
|
||||||
|
</button>
|
||||||
|
<div class="wallet-fold-body" id="wallet-fold-body" hidden>
|
||||||
|
<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="Browser platforms (experimental)">
|
||||||
|
<span class="hub-icons" aria-hidden="true">
|
||||||
|
<svg class="app-ico gold" viewBox="0 0 24 24" role="img" aria-label="Chrome">
|
||||||
|
<circle cx="12" cy="12" r="10" opacity="0.22"/>
|
||||||
|
<path d="M12 2a10 10 0 0 1 8.66 5H12V2z" opacity="0.95"/>
|
||||||
|
<path d="M20.66 7A10 10 0 0 1 12 22l5-8.66H12L20.66 7z" opacity="0.55"/>
|
||||||
|
<path d="M12 22A10 10 0 0 1 3.34 7H12l-5 8.66L12 22z" opacity="0.75"/>
|
||||||
|
<circle cx="12" cy="12" r="3.4"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="app-ico blue" viewBox="0 0 24 24" role="img" aria-label="Firefox">
|
||||||
|
<circle cx="12" cy="13" r="6.2" opacity="0.35"/>
|
||||||
|
<path d="M12 4.2c1.6 0 2.9.7 3.7 1.6.6-.9 1.6-1.4 2.7-1.3-.2 1.6-.9 2.8-1.9 3.6 1.4 1.3 2.3 3.1 2.3 5.1 0 4.1-3.4 7.3-7.8 7.3S3.2 17.3 3.2 13.2c0-2.3 1-4.3 2.7-5.6C5 6.5 4.4 5.1 4.5 3.5c1.1-.1 2.1.5 2.7 1.4C8.1 4.8 9.6 4.2 12 4.2z"/>
|
||||||
|
<path d="M9.2 11.2c.9-.6 1.8-.9 2.8-.9 1.2 0 2.3.4 3.1 1.1" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="app-ico gold" viewBox="0 0 24 24" role="img" aria-label="Safari">
|
||||||
|
<circle cx="12" cy="12" r="9.2" fill="none" stroke="currentColor" stroke-width="1.7"/>
|
||||||
|
<path d="M14.8 9.2 13 13l-3.8 1.8L11 11l3.8-1.8z"/>
|
||||||
|
<path d="M12 5.2v1.4M12 17.4v1.4M5.2 12h1.4M17.4 12h1.4" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.55"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Browser platforms (experimental)
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<aside class="shop-box" aria-labelledby="shop-title">
|
<aside class="shop-box" aria-labelledby="shop-title">
|
||||||
<h2 id="shop-title">GOA shop · samples</h2>
|
<h2 id="shop-title">GOA shop · samples</h2>
|
||||||
<p class="shop-lead">Tap an item → open payment link for the wallet</p>
|
<p class="shop-lead">Tap an item → open payment link for the wallet</p>
|
||||||
|
|
@ -553,50 +645,6 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="step-card">
|
|
||||||
<h2>Wallet</h2>
|
|
||||||
<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-.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" viewBox="0 0 24 24" role="img" aria-label="Chrome">
|
|
||||||
<circle cx="12" cy="12" r="10" opacity="0.22"/>
|
|
||||||
<path d="M12 2a10 10 0 0 1 8.66 5H12V2z" opacity="0.95"/>
|
|
||||||
<path d="M20.66 7A10 10 0 0 1 12 22l5-8.66H12L20.66 7z" opacity="0.55"/>
|
|
||||||
<path d="M12 22A10 10 0 0 1 3.34 7H12l-5 8.66L12 22z" opacity="0.75"/>
|
|
||||||
<circle cx="12" cy="12" r="3.4"/>
|
|
||||||
</svg>
|
|
||||||
<svg class="app-ico blue" viewBox="0 0 24 24" role="img" aria-label="Firefox">
|
|
||||||
<circle cx="12" cy="13" r="6.2" opacity="0.35"/>
|
|
||||||
<path d="M12 4.2c1.6 0 2.9.7 3.7 1.6.6-.9 1.6-1.4 2.7-1.3-.2 1.6-.9 2.8-1.9 3.6 1.4 1.3 2.3 3.1 2.3 5.1 0 4.1-3.4 7.3-7.8 7.3S3.2 17.3 3.2 13.2c0-2.3 1-4.3 2.7-5.6C5 6.5 4.4 5.1 4.5 3.5c1.1-.1 2.1.5 2.7 1.4C8.1 4.8 9.6 4.2 12 4.2z"/>
|
|
||||||
<path d="M9.2 11.2c.9-.6 1.8-.9 2.8-.9 1.2 0 2.3.4 3.1 1.1" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.5"/>
|
|
||||||
</svg>
|
|
||||||
<svg class="app-ico gold" viewBox="0 0 24 24" role="img" aria-label="Safari">
|
|
||||||
<circle cx="12" cy="12" r="9.2" fill="none" stroke="currentColor" stroke-width="1.7"/>
|
|
||||||
<path d="M14.8 9.2 13 13l-3.8 1.8L11 11l3.8-1.8z"/>
|
|
||||||
<path d="M12 5.2v1.4M12 17.4v1.4M5.2 12h1.4M17.4 12h1.4" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.55"/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
Browser platforms (experimental)
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<a class="cta-sec" href="https://bank.hacktivism.ch/intro/">Bank →</a>
|
|
||||||
<a class="cta-sec" href="https://exchange.hacktivism.ch/intro/">Exchange →</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="step-card">
|
<section class="step-card">
|
||||||
<h2>Merchant SPA</h2>
|
<h2>Merchant SPA</h2>
|
||||||
<p class="step-tagline"><code>taler.hacktivism.ch</code> · GOA + CHF</p>
|
<p class="step-tagline"><code>taler.hacktivism.ch</code> · GOA + CHF</p>
|
||||||
|
|
@ -792,6 +840,21 @@
|
||||||
load();
|
load();
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var fold = document.getElementById("wallet-fold");
|
||||||
|
var btn = document.getElementById("wallet-fold-toggle");
|
||||||
|
var body = document.getElementById("wallet-fold-body");
|
||||||
|
if (!fold || !btn || !body) return;
|
||||||
|
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");
|
||||||
|
else body.setAttribute("hidden", "");
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script src="/intro/shop-pay.js"></script>
|
<script src="/intro/shop-pay.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue