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

feat(tops): Taler Operations design previews (ng1–ng3)

Browse source 
Static previews on ports 9090–9092: DD 90 branding (Montserrat,
#0042B3, logo), FINMA sticky, no taler-ops-www build. ng1 landing,
ng2 step/amount sliders + tabs, ng3 classic mirror. Podman nginx,
bin/up.sh, Caddy snippet, /CHANGES notes for current site only.
This commit is contained in:
Hernâni Marques 2026-07-10 17:36:51 +02:00
parent 497bc1243d
commit f821dc0eb4
No known key found for this signature in database
16 changed files with 1593 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

42
configs/taler-ops-ng/ng1/CHANGES/index.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Notiz · tops.ng1</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: Montserrat, system-ui, sans-serif; max-width: 36rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; color: #111; }
h1 { font-size: 1.25rem; margin: 0 0 0.75rem; color: #0042b3; }
h2 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; color: #0042b3; }
ul { padding-left: 1.2rem; margin: 0.3rem 0; }
li { margin: 0.25rem 0; }
code { background: #f1f1f4; padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.9em; }
a { color: #4160ff; }
.meta { color: #586a88; font-size: 0.85rem; margin-bottom: 1.25rem; }
</style>
</head>
<body>
<p class="meta"><a href="/">← Start</a> · tops.ng1 · Port 9090</p>
<h1>Diese Seite</h1>
<h2>Inhalt &amp; Branding</h2>
<ul>
<li>Landing für Taler Operations (eCHF / Schweiz): Wallet, 3 Schritte, Händler, FAQ</li>
<li>Logo: <code>taler-full.svg</code> (GNU Taler)</li>
<li>Schrift: <strong>Montserrat</strong></li>
<li>Farben nach
<a href="https://docs.taler.net/design-documents/090-branding.html">DD&nbsp;90</a>
/ <a href="https://docs.taler.net/design-documents/066-wallet-color-scheme.html">DD&nbsp;66</a>
— Primary <code>#0042B3</code>, Secondary <code>#A4C9FF</code> / <code>#586A88</code>, Frame <code>#F1F1F4</code></li>
<li>FINMA-Hinweis sticky und dauerhaft sichtbar</li>
</ul>
<h2>Auslieferung (aktuell)</h2>
<ul>
<li>Static-HTML (kein Build von <code>taler-ops-www</code>)</li>
<li><code>nginx:1.27-alpine</code>, rootless Podman · <code>bin/up.sh</code> + <code>deploy/compose.yml</code></li>
<li>Caddy: <code>reverse_proxy</code> → <code>127.0.0.1:9090</code></li>
</ul>
</body>
</html>

BIN
configs/taler-ops-ng/ng1/assets/montserrat-latin.woff2 Normal file
View file

Binary file not shown.

88
configs/taler-ops-ng/ng1/assets/taler-full-white-text.svg Normal file
View file

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="670"
height="300"
viewBox="0 0 201 90"
version="1.1"
id="svg8"
sodipodi:docname="taler-logo-2021-inkscape.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1009"
id="namedview18"
showgrid="false"
inkscape:zoom="2.3522388"
inkscape:cx="95.803701"
inkscape:cy="148.33935"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="logo"
inkscape:document-rotation="0"
viewbox-width="201"
scale-x="0.3" />
<metadata
id="metadata20">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs18" />
<g
id="logo">
<g
id="circles"
style="fill:#0042b3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.327943">
<path
d="m 86.662153,1.1211936 c 15.589697,0 29.129227,9.4011664 35.961027,23.2018054 h -5.81736 C 110.4866,13.623304 99.349002,6.5180852 86.662153,6.5180852 c -19.690571,0 -35.652876,17.1120008 -35.652876,38.2205688 0,10.331797 3.825597,19.704678 10.03957,26.582945 -1.342357,1.120912 -2.771532,2.127905 -4.275488,3.006754 C 50.071485,66.553412 45.974857,56.15992 45.974857,44.738654 c 0,-24.089211 18.216325,-43.6174604 40.687296,-43.6174604 z M 122.51416,65.375898 c -6.86645,13.680134 -20.34561,22.980218 -35.852007,22.980218 -1.052702,0 -2.096093,-0.04291 -3.128683,-0.127026 3.052192,-1.561167 5.913582,-3.480387 8.538307,-5.707305 10.320963,-1.684389 19.185983,-8.113638 24.601813,-17.145887 z"
id="path2350" />
<path
d="m 64.212372,1.1211936 c 1.052607,0 2.095998,0.042919 3.128684,0.1270583 C 64.288864,2.8094199 61.427378,4.728606 58.802653,6.9555572 41.679542,9.7498571 28.559494,25.601563 28.559494,44.738654 c 0,14.264563 7.29059,26.702023 18.093843,33.268925 -1.593656,0.26719 -3.226966,0.406948 -4.890748,0.406948 -1.239545,0 -2.46151,-0.07952 -3.663522,-0.229364 C 29.191129,70.184015 23.525076,58.171633 23.525076,44.738654 23.525076,20.649443 41.7414,1.1211936 64.212372,1.1211936 Z M 69.62209,82.521785 C 79.943207,80.837396 88.808164,74.407841 94.224059,65.375422 h 5.840511 c -6.866354,13.680305 -20.345548,22.980694 -35.852198,22.980694 -1.052703,0 -2.095999,-0.04291 -3.128684,-0.127026 3.052002,-1.561371 5.913836,-3.480218 8.538402,-5.707305 z M 94.355885,24.322999 c -3.13939,-5.314721 -7.467551,-9.74275 -12.584511,-12.853269 1.593656,-0.26719 3.226904,-0.406948 4.890779,-0.406948 1.239451,0 2.461512,0.07952 3.663524,0.229364 4.016018,3.607242 7.373195,8.030111 9.849053,13.030853 z"
id="path2352" />
<path
d="m 41.762589,1.1211936 c 1.064296,0 2.118804,0.044379 3.162607,0.1302161 -3.046523,1.558961 -5.903162,3.4745139 -8.52358,5.6968133 C 19.254624,9.7205882 6.1097128,25.583465 6.1097128,44.738654 c 0,21.108568 15.9624012,38.22057 35.6528762,38.22057 12.599746,0 23.672446,-7.007056 30.013748,-17.583802 h 5.838515 C 70.748498,79.055727 57.26924,88.356116 41.762589,88.356116 c -22.470907,0 -40.6871998,-19.52825 -40.6871998,-43.617462 0,-24.089211 18.2162928,-43.6174604 40.6871998,-43.6174604 z M 71.905375,24.322999 c -1.31192,-2.220567 -2.830984,-4.287049 -4.528877,-6.166508 1.342452,-1.120945 2.771374,-2.128381 4.275139,-3.00723 2.372984,2.753011 4.418875,5.834636 6.072489,9.173738 z"
id="path2354" />
</g>
<g
id="letters" fill="#fff">
<path
d="m 76.135411,34.409066 h 9.161042 V 29.36588 H 61.857537 v 5.043186 h 9.161137 v 25.92317 h 5.116737 z"
id="path2346" />
<path
d="m 92.647571,52.856334 h 13.659009 l 2.93009,7.476072 h 5.36461 L 101.89122,29.144903 H 97.187186 L 84.477089,60.332406 h 5.199533 z m 11.802109,-4.822276 h -9.944771 l 4.951718,-12.386462 z"
id="path2362" />
<path
d="m 123.80641,29.366084 h -4.58038 v 30.966322 h 20.54728 v -4.910253 c -5.32227,0 -10.64463,0 -15.9669,0 z"
id="path2356" />
<path
d="m 166.4722,29.366084 h -21.37564 v 30.966322 h 21.58203 v -4.910253 h -16.54771 v -8.27275 h 14.48439 V 42.23925 h -14.48439 v -7.962811 h 16.34132 z"
id="path2360" />
<path
d="m 191.19035,39.474593 c 0,1.59947 -0.53646,2.87535 -1.61628,3.818883 -1.07281,0.95124 -2.52409,1.422837 -4.34678,1.422837 h -7.44851 V 34.276439 h 7.4073 c 1.9051,0 3.38376,0.435027 4.42939,1.312178 1.05226,0.870258 1.57488,2.167734 1.57488,3.885976 z m 6.06602,20.857813 -7.79911,-11.723191 c 1.01771,-0.294794 1.94631,-0.714813 2.78553,-1.260566 0.83885,-0.545619 1.56122,-1.209263 2.16629,-1.990627 0.60541,-0.781738 1.07981,-1.681096 1.42369,-2.698345 0.34378,-1.017553 0.51561,-2.175238 0.51561,-3.472883 0,-1.50409 -0.24743,-2.867948 -0.74267,-4.092048 -0.49515,-1.223794 -1.20344,-2.256186 -2.12499,-3.096734 -0.92173,-0.840446 -2.04957,-1.489252 -3.38375,-1.946452 -1.33447,-0.457267 -2.82692,-0.685476 -4.4774,-0.685476 h -12.87512 v 30.966322 h 5.03433 V 49.538522 h 6.37569 l 7.11829,10.793884 z"
id="path2358" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

88
configs/taler-ops-ng/ng1/assets/taler-full.svg Normal file
View file

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="670"
height="300"
viewBox="0 0 201 90"
version="1.1"
id="svg8"
sodipodi:docname="taler-logo-2021-inkscape.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1009"
id="namedview18"
showgrid="false"
inkscape:zoom="2.3522388"
inkscape:cx="95.803701"
inkscape:cy="148.33935"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="logo"
inkscape:document-rotation="0"
viewbox-width="201"
scale-x="0.3" />
<metadata
id="metadata20">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs18" />
<g
id="logo">
<g
id="circles"
style="fill:#0042b3;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.327943">
<path
d="m 86.662153,1.1211936 c 15.589697,0 29.129227,9.4011664 35.961027,23.2018054 h -5.81736 C 110.4866,13.623304 99.349002,6.5180852 86.662153,6.5180852 c -19.690571,0 -35.652876,17.1120008 -35.652876,38.2205688 0,10.331797 3.825597,19.704678 10.03957,26.582945 -1.342357,1.120912 -2.771532,2.127905 -4.275488,3.006754 C 50.071485,66.553412 45.974857,56.15992 45.974857,44.738654 c 0,-24.089211 18.216325,-43.6174604 40.687296,-43.6174604 z M 122.51416,65.375898 c -6.86645,13.680134 -20.34561,22.980218 -35.852007,22.980218 -1.052702,0 -2.096093,-0.04291 -3.128683,-0.127026 3.052192,-1.561167 5.913582,-3.480387 8.538307,-5.707305 10.320963,-1.684389 19.185983,-8.113638 24.601813,-17.145887 z"
id="path2350" />
<path
d="m 64.212372,1.1211936 c 1.052607,0 2.095998,0.042919 3.128684,0.1270583 C 64.288864,2.8094199 61.427378,4.728606 58.802653,6.9555572 41.679542,9.7498571 28.559494,25.601563 28.559494,44.738654 c 0,14.264563 7.29059,26.702023 18.093843,33.268925 -1.593656,0.26719 -3.226966,0.406948 -4.890748,0.406948 -1.239545,0 -2.46151,-0.07952 -3.663522,-0.229364 C 29.191129,70.184015 23.525076,58.171633 23.525076,44.738654 23.525076,20.649443 41.7414,1.1211936 64.212372,1.1211936 Z M 69.62209,82.521785 C 79.943207,80.837396 88.808164,74.407841 94.224059,65.375422 h 5.840511 c -6.866354,13.680305 -20.345548,22.980694 -35.852198,22.980694 -1.052703,0 -2.095999,-0.04291 -3.128684,-0.127026 3.052002,-1.561371 5.913836,-3.480218 8.538402,-5.707305 z M 94.355885,24.322999 c -3.13939,-5.314721 -7.467551,-9.74275 -12.584511,-12.853269 1.593656,-0.26719 3.226904,-0.406948 4.890779,-0.406948 1.239451,0 2.461512,0.07952 3.663524,0.229364 4.016018,3.607242 7.373195,8.030111 9.849053,13.030853 z"
id="path2352" />
<path
d="m 41.762589,1.1211936 c 1.064296,0 2.118804,0.044379 3.162607,0.1302161 -3.046523,1.558961 -5.903162,3.4745139 -8.52358,5.6968133 C 19.254624,9.7205882 6.1097128,25.583465 6.1097128,44.738654 c 0,21.108568 15.9624012,38.22057 35.6528762,38.22057 12.599746,0 23.672446,-7.007056 30.013748,-17.583802 h 5.838515 C 70.748498,79.055727 57.26924,88.356116 41.762589,88.356116 c -22.470907,0 -40.6871998,-19.52825 -40.6871998,-43.617462 0,-24.089211 18.2162928,-43.6174604 40.6871998,-43.6174604 z M 71.905375,24.322999 c -1.31192,-2.220567 -2.830984,-4.287049 -4.528877,-6.166508 1.342452,-1.120945 2.771374,-2.128381 4.275139,-3.00723 2.372984,2.753011 4.418875,5.834636 6.072489,9.173738 z"
id="path2354" />
</g>
<g
id="letters">
<path
d="m 76.135411,34.409066 h 9.161042 V 29.36588 H 61.857537 v 5.043186 h 9.161137 v 25.92317 h 5.116737 z"
id="path2346" />
<path
d="m 92.647571,52.856334 h 13.659009 l 2.93009,7.476072 h 5.36461 L 101.89122,29.144903 H 97.187186 L 84.477089,60.332406 h 5.199533 z m 11.802109,-4.822276 h -9.944771 l 4.951718,-12.386462 z"
id="path2362" />
<path
d="m 123.80641,29.366084 h -4.58038 v 30.966322 h 20.54728 v -4.910253 c -5.32227,0 -10.64463,0 -15.9669,0 z"
id="path2356" />
<path
d="m 166.4722,29.366084 h -21.37564 v 30.966322 h 21.58203 v -4.910253 h -16.54771 v -8.27275 h 14.48439 V 42.23925 h -14.48439 v -7.962811 h 16.34132 z"
id="path2360" />
<path
d="m 191.19035,39.474593 c 0,1.59947 -0.53646,2.87535 -1.61628,3.818883 -1.07281,0.95124 -2.52409,1.422837 -4.34678,1.422837 h -7.44851 V 34.276439 h 7.4073 c 1.9051,0 3.38376,0.435027 4.42939,1.312178 1.05226,0.870258 1.57488,2.167734 1.57488,3.885976 z m 6.06602,20.857813 -7.79911,-11.723191 c 1.01771,-0.294794 1.94631,-0.714813 2.78553,-1.260566 0.83885,-0.545619 1.56122,-1.209263 2.16629,-1.990627 0.60541,-0.781738 1.07981,-1.681096 1.42369,-2.698345 0.34378,-1.017553 0.51561,-2.175238 0.51561,-3.472883 0,-1.50409 -0.24743,-2.867948 -0.74267,-4.092048 -0.49515,-1.223794 -1.20344,-2.256186 -2.12499,-3.096734 -0.92173,-0.840446 -2.04957,-1.489252 -3.38375,-1.946452 -1.33447,-0.457267 -2.82692,-0.685476 -4.4774,-0.685476 h -12.87512 v 30.966322 h 5.03433 V 49.538522 h 6.37569 l 7.11829,10.793884 z"
id="path2358" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

264
configs/taler-ops-ng/ng1/index.html Normal file
View file

@ -0,0 +1,264 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Taler Operations AG · digital cash for Switzerland</title>
<meta name="description" content="Taler Operations runs the Taler payment system in Switzerland. Digital cash as private as cash." />
<!-- GNU Taler DD 90 / DD 66: Montserrat, #0042b3 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<style>
@font-face {
font-family: "Montserrat Local";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("assets/montserrat-latin.woff2") format("woff2");
}
:root {
/* DD 90 Branding Guidelines + taler-ops-www tailwind accent.pure */
--taler-primary: #0042b3;
--taler-primary-dark: #00318a;
--taler-secondary: #a4c9ff;
--taler-secondary-deep: #586a88;
--taler-soft: #b4c5ff;
--taler-frame: #f1f1f4;
--taler-link: #4160ff;
--white: #ffffff;
--ink: #0c0c0e;
--muted-bg: #f1f1f4;
--finma-bg: #0a1628;
--finma-fg: #e8f0ff;
--finma-line: #0042b3;
--font: "Montserrat", "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
margin: 0; font-family: var(--font); color: var(--ink);
background: var(--white); line-height: 1.55;
}
/* FINMA — always visible */
.finma {
position: sticky; top: 0; z-index: 2000;
background: var(--finma-bg); color: var(--finma-fg);
border-bottom: 4px solid var(--finma-line);
padding: 0.65rem 1rem 0.75rem;
font-size: clamp(0.74rem, 2.2vw, 0.86rem);
font-weight: 600; text-align: center;
}
.finma .mark {
display: inline-block; margin-right: 0.4rem;
padding: 0.12rem 0.45rem; background: var(--taler-primary); color: #fff;
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase; border-radius: 3px; vertical-align: middle;
}
.finma strong { color: var(--taler-secondary); }
.bar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 0.75rem; padding: 0.75rem 1.25rem;
background: var(--white); border-bottom: 1px solid #e6e8ef;
}
.bar .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); }
.bar .brand img { height: 40px; width: auto; display: block; }
.bar nav { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.8rem; font-weight: 700; }
.bar nav a { color: var(--taler-secondary-deep); text-decoration: none; letter-spacing: 0.02em; }
.bar nav a:hover { color: var(--taler-primary); }
.hero {
position: relative; overflow: hidden; color: var(--white);
background: linear-gradient(155deg, var(--taler-primary) 0%, var(--taler-primary-dark) 52%, #001a4a 100%);
padding: 3.25rem 1.25rem 4rem;
}
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
repeating-linear-gradient(-32deg, transparent 0 36px, rgba(255,255,255,0.06) 36px 72px);
}
.hero-inner { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; text-align: center; }
.pill {
display: inline-block; background: var(--white); color: var(--taler-primary);
font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em;
text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1rem;
}
.hero h1 {
margin: 0 0 0.85rem; font-weight: 800; line-height: 1.05;
font-size: clamp(2rem, 5.5vw, 3.1rem); letter-spacing: -0.02em;
}
.hero h1 em { font-style: normal; color: var(--taler-secondary); }
.hero .lead { font-size: 1.08rem; font-weight: 500; margin: 0 auto 1.5rem; max-width: 34rem; opacity: 0.96; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.cta {
display: inline-block; text-decoration: none; font-weight: 800;
letter-spacing: 0.03em; font-size: 0.9rem;
padding: 0.85rem 1.35rem; border-radius: 8px;
}
.cta.solid { background: var(--white); color: var(--taler-primary); box-shadow: 0 6px 0 #002a75; }
.cta.solid:active { transform: translateY(2px); box-shadow: 0 4px 0 #002a75; }
.cta.line { border: 2px solid #fff; color: #fff; }
.banner-mid {
background: var(--taler-frame); color: var(--taler-primary);
text-align: center; padding: 0.95rem 1rem;
font-weight: 800; font-size: 0.88rem; letter-spacing: 0.04em;
border-bottom: 1px solid #e0e2ea;
}
main { max-width: 48rem; margin: 0 auto; padding: 2.25rem 1.25rem 3rem; }
h2 {
font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em;
color: var(--taler-primary); margin: 2rem 0 0.75rem;
}
.stripe {
background: var(--muted-bg); border-left: 6px solid var(--taler-primary);
padding: 1.1rem 1.2rem; border-radius: 0 12px 12px 0; margin: 1rem 0;
}
.steps { display: grid; gap: 0.75rem; }
.step {
display: grid; grid-template-columns: 3rem 1fr; gap: 0.9rem; align-items: start;
padding: 1.05rem 1.1rem; border: 1px solid #e6e8ef; border-radius: 12px; background: #fff;
}
.step .n {
width: 3rem; height: 3rem; border-radius: 50%; background: var(--taler-primary); color: #fff;
font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center;
}
.step h3 { margin: 0 0 0.25rem; font-size: 1.02rem; font-weight: 700; }
.step p { margin: 0; color: #333; font-size: 0.95rem; }
.apps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
.apps a {
font-size: 0.8rem; font-weight: 700; text-decoration: none;
padding: 0.4rem 0.75rem; border-radius: 8px; background: var(--taler-primary); color: #fff;
}
.apps a.sec { background: var(--taler-secondary-deep); }
a { color: var(--taler-link); }
.faq details {
border: 1px solid #e6e8ef; border-radius: 10px; padding: 0.75rem 1rem; margin: 0.5rem 0;
background: #fafbfe;
}
.faq summary { font-weight: 700; cursor: pointer; color: var(--taler-primary); }
footer {
background: #0a1628; color: #a8b8d0; text-align: center;
padding: 1.75rem 1rem 2.5rem; font-size: 0.85rem;
}
footer a { color: var(--taler-secondary); }
</style>
</head>
<body>
<aside class="finma" role="note" aria-label="Legal notice FINMA">
<span class="mark">FINMA</span>
Taler Operations AG operates the Taler payment system in Switzerland.
<strong>Taler Operations is not supervised by the Swiss Financial Market Supervisory Authority (FINMA).</strong>
Escrowed customer assets are not subject to deposit insurance but held in a segregated bank account.
</aside>
<div class="bar">
<a class="brand" href="/" aria-label="Taler Operations home">
<img src="assets/taler-full.svg" width="136" height="61" alt="GNU Taler" />
</a>
<nav>
<a href="#start">Start</a>
<a href="#need">Need</a>
<a href="#faq">FAQ</a>
<a href="https://taler-ops.ch/en/users.html">Users</a>
<a href="https://taler-ops.ch/en/merchants.html">Merchants</a>
<a href="/CHANGES/">Hinweise</a>
</nav>
</div>
<header class="hero">
<div class="hero-inner">
<span class="pill">Switzerland · eCHF · privacy</span>
<h1>Taler — a digital payment system <em>as private as cash</em></h1>
<p class="lead">
The Taler Wallet is your digital purse. Withdraw electronic cash from your Swiss bank account,
then pay with QR code or NFC — standard bank transfer times apply.
</p>
<div class="cta-row">
<a class="cta solid" href="https://wallet.taler.net/">Get the wallet</a>
<a class="cta line" href="#start">3 steps →</a>
</div>
</div>
</header>
<div class="banner-mid">Pay as usual · stay private as cash</div>
<main>
<section id="need">
<h2>Prerequisites</h2>
<div class="stripe">
<ul style="margin:0;padding-left:1.15rem">
<li><strong>Swiss bank account</strong> with an IBAN starting with <code>CH</code></li>
<li><strong>Mobile phone number</strong> with <code>+41</code> to receive P2P payments</li>
</ul>
</div>
</section>
<section id="start">
<h2>3 steps to get started</h2>
<div class="steps">
<article class="step">
<span class="n">1</span>
<div>
<h3>Install the wallet</h3>
<p>Android, iOS, or browser extension from the official wallet portal.</p>
<div class="apps">
<a href="https://play.google.com/store/apps/details?id=net.taler.wallet" rel="noopener">Android</a>
<a class="sec" href="https://apps.apple.com/app/taler-wallet/id6463440117" rel="noopener">iOS</a>
<a class="sec" href="https://wallet.taler.net/" rel="noopener">All platforms</a>
</div>
</div>
</article>
<article class="step">
<span class="n">2</span>
<div>
<h3>Withdraw digital cash</h3>
<p>Tap “Withdraw CHF”, enter an amount, confirm the bank transfer. Processing follows Swiss bank transfer times.</p>
</div>
</article>
<article class="step">
<span class="n">3</span>
<div>
<h3>Pay</h3>
<p>Scan a merchant QR code or use NFC — confirm once. Only spend what you withdrew.</p>
</div>
</article>
</div>
</section>
<section>
<h2>Merchants &amp; map</h2>
<p>
Pay in person where eCHF with Taler is accepted.
Full merchant map and onboarding:
<a href="https://taler-ops.ch/en/index.html#target-map">taler-ops.ch map</a> ·
<a href="https://taler-ops.ch/en/merchants.html">become a merchant</a>.
</p>
</section>
<section id="faq" class="faq">
<h2>FAQ</h2>
<details>
<summary>Is this supervised by FINMA?</summary>
<p>No. Taler Operations AG is <strong>not supervised by FINMA</strong>. Escrow is in a segregated bank account and is <strong>not</strong> covered by deposit insurance. See the sticky notice above.</p>
</details>
<details>
<summary>How is this like a regular wallet?</summary>
<p>You can only spend money you previously withdrew. No credit; the exchange does not learn what you bought.</p>
</details>
<details>
<summary>Where is production?</summary>
<p>Live service: <a href="https://taler-ops.ch/">taler-ops.ch</a>.</p>
</details>
</section>
</main>
<footer>
Taler Operations AG · Biel/Bienne ·
<a href="https://taler-ops.ch/">taler-ops.ch</a> ·
<a href="/CHANGES/">Hinweise</a>
</footer>
</body>
</html>