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

merchant landing: wallet fold with gold penguin packages row

Browse source 
Blue › expand on Get the wallet; packages use a single gold penguin.
This commit is contained in:
Hernâni Marques 2026-07-10 20:47:00 +02:00
parent 5f3d309cef
commit 0ad46aa27f
No known key found for this signature in database
1 changed files with 125 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

135
configs/merchant-landing/index.html
View file

@ -301,6 +301,11 @@
.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-ico.branch-ico circle { fill: currentColor; stroke: none; }
.app-ico.branch-ico path {
fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.app-btn.hub .app-ico.branch-ico { color: #f0c86a; }
.app-btn:not(.ios):not(.hub) .app-ico { color: #c4b5fd; }
.app-btn.ios .app-ico { color: #f0c86a; }
.hub-icons { display: inline-flex; align-items: center; gap: 0.4rem; }
@ -421,8 +426,9 @@
.wallet-fold-chevron {
flex-shrink: 0;
transition: transform 0.15s ease;
color: var(--accent2);
font-size: 0.9rem;
color: #3ecfbf;
font-size: 1.1rem;
font-weight: 700;
}
.wallet-fold.open .wallet-fold-chevron { transform: rotate(90deg); }
.wallet-fold-body {
@ -432,6 +438,72 @@
}
.wallet-fold.open .wallet-fold-body { display: block; }
.wallet-fold-body .app-links { margin-top: 0.65rem; }
/* Expandable package / source rows (blue › like bank) */
button.app-btn.cli-toggle {
flex: 1 1 100%;
width: 100%;
justify-content: flex-start;
gap: 0.5rem;
font: inherit;
font-weight: 700;
font-size: 0.88rem;
cursor: pointer;
color: #e9d5ff;
border-color: rgba(167, 139, 250, 0.4);
background: rgba(0,0,0,0.28);
}
button.app-btn.cli-toggle .cli-chevron {
margin-left: auto;
flex-shrink: 0;
color: #3ecfbf;
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
transition: transform 0.15s ease;
}
button.app-btn.cli-toggle[aria-expanded="true"] .cli-chevron { transform: rotate(90deg); }
button.app-btn.cli-toggle[aria-expanded="true"] {
border-color: rgba(62, 207, 191, 0.5);
background: rgba(62, 207, 191, 0.08);
}
.cli-panel {
display: none;
width: 100%;
margin: 0.35rem 0 0.55rem;
text-align: left;
border: 1px solid rgba(167, 139, 250, 0.32);
border-radius: 12px;
background: rgba(0, 0, 0, 0.28);
padding: 0.75rem 0.85rem 0.9rem;
box-sizing: border-box;
}
.cli-panel.open { display: block; }
.cli-panel .cli-lead {
margin: 0 0 0.55rem;
color: var(--muted);
font-size: 0.84rem;
line-height: 1.4;
}
.cli-panel .cli-lead a { color: #c4b5fd; }
.cli-block {
margin: 0;
padding: 0.55rem 0.65rem;
border-radius: 10px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(167, 139, 250, 0.22);
color: #e8e0d0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.7rem;
line-height: 1.45;
overflow-x: auto;
white-space: pre;
user-select: all;
}
.cli-block .cmt { color: #8a9a90; }
.sym-gold path, .sym-gold circle { fill: #f0c86a; stroke: #f0c86a; }
.sym-gold path[data-ring], .sym-gold circle[data-ring] { fill: none; stroke: #f0c86a; }
.sym-blue path, .sym-blue circle { fill: #3ecfbf; stroke: #3ecfbf; }
.sym-blue path[data-ring], .sym-blue circle[data-ring] { fill: none; stroke: #3ecfbf; }
</style>
</head>
<body>
@ -505,6 +577,35 @@
</span>
Web browsers (experimental)
</a>
<button type="button" class="app-btn hub cli-toggle" id="pkg-fold-toggle"
aria-expanded="false" aria-controls="pkg-fold-body"
aria-label="Linux packages: Debian and Ubuntu (taler-wallet-cli)">
<svg class="app-ico browser-ico penguin-ico" viewBox="0 0 24 24" role="img" aria-label="Linux">
<ellipse cx="12" cy="14.2" rx="6.4" ry="7.2" fill="#f0c86a"/>
<ellipse cx="12" cy="15.2" rx="3.6" ry="4.8" fill="#1a1410" opacity="0.35"/>
<circle cx="12" cy="7" r="4.1" fill="#f0c86a"/>
<circle cx="10.35" cy="6.6" r="0.85" fill="#1a1410"/>
<circle cx="13.65" cy="6.6" r="0.85" fill="#1a1410"/>
<path fill="#e8a838" d="M11.15 8.1 12 9.55 12.85 8.1z"/>
<ellipse cx="9.4" cy="21" rx="2.1" ry="1.05" fill="#e8a838"/>
<ellipse cx="14.6" cy="21" rx="2.1" ry="1.05" fill="#e8a838"/>
<ellipse cx="6.6" cy="13.5" rx="1.4" ry="2.6" fill="#f0c86a" transform="rotate(-18 6.6 13.5)"/>
<ellipse cx="17.4" cy="13.5" rx="1.4" ry="2.6" fill="#f0c86a" transform="rotate(18 17.4 13.5)"/>
</svg>
Debian · Ubuntu packages
<span class="cli-chevron" aria-hidden="true">›</span>
</button>
<div class="cli-panel" id="pkg-fold-body" hidden>
<p class="cli-lead">
Official <strong>taler-wallet-cli</strong> from
<a href="https://deb.taler.net/" target="_blank" rel="noopener noreferrer">deb.taler.net</a>.
Full recipes also on the
<a href="https://bank.hacktivism.ch/intro/">bank landing</a>.
</p>
<pre class="cli-block"><span class="cmt"># Debian example</span>
sudo apt-get update
sudo apt-get install -y taler-wallet-cli</pre>
</div>
</div>
</div>
</div>
@ -872,14 +973,28 @@
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", "");
});
if (fold && btn && body) {
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", "");
});
}
function wireCli(btnId, bodyId) {
var b = document.getElementById(btnId);
var p = document.getElementById(bodyId);
if (!b || !p) return;
b.addEventListener("click", function () {
var open = !p.classList.contains("open");
p.classList.toggle("open", open);
b.setAttribute("aria-expanded", open ? "true" : "false");
if (open) p.removeAttribute("hidden");
else p.setAttribute("hidden", "");
});
}
wireCli("pkg-fold-toggle", "pkg-fold-body");
})();
</script>
<script src="/intro/shop-pay.js"></script>