0x42dcd51e…043f·#25,775,463·view on Etherscan
f;color:var(--ink);line-height:1.5}main{max-width:560px;margin:0 auto;padding:64px 20px 96px}header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--ink)}.wordmark{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.3px}.cross{width:20px;height:20px;background:var(--red);display:inline-block;position:relative;flex:none}.cross:after{content:"";position:absolute;inset:0;background:linear-gradient(#fff,#fff) center/11px 3.5px no-repeat,linear-gradient(#fff,#fff) center/3.5px 11px no-repeat}.cross.small{width:14px;height:14px}.cross.small:after{background:linear-gradient(#fff,#fff) center/8px 2.5px no-repeat,linear-gradient(#fff,#fff) center/2.5px 8px no-repeat}.wallet-area{display:flex;align-items:center;gap:14px}.pill{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px;border:1px solid var(--ink);padding:3px 10px}.btn{font:inherit;font-weight:600;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:7px 14px;border-radius:0;cursor:pointer}.btn:hover:not(:disabled){background:var(--ink);color:#fff}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-red{background:var(--red);border-color:var(--red);color:#fff}.btn-red:hover:not(:disabled){background:#c00;border-color:#c00;color:#fff}.btn-ghost{border-color:var(--line)}.btn-big{width:100%;padding:14px;font-size:17px}.linklike{font:inherit;border:none;background:none;padding:0;color:var(--red);cursor:pointer;text-decoration:underline}.connect-panel{position:fixed;inset:0;background:#ffffffeb;display:flex;align-items:center;justify-content:center;z-index:20}.connect-box{background:#fff;border:1px solid var(--ink);padding:32px;width:min(400px,calc(100vw - 40px));text-align:center}.connect-box h2{margin:0 0 20px}.connect-options{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.connect-box>.linklike{margin-top:16px}.injected-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}.injected-list .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.injected-list .btn img{width:18px;height:18px}.injected-list .hint{margin:4px 0 0}.wc-uri-area{margin-top:20px}.wc-uri-area canvas{border:1px solid var(--ink)}.wc-uri-row{display:flex;gap:8px;margin-top:8px}.wc-uri-row input{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:7px;border:1px solid var(--line);border-radius:0;min-width:0}.waiting{color:var(--red);font-weight:600;font-size:13px}.banner{background:var(--red);color:#fff;padding:10px 20px;text-align:center;font-weight:600;font-size:14px}.banner .linklike{color:#fff;margin-left:8px}h1{font-size:44px;line-height:1.05;letter-spacing:-1.5px;margin:0 0 20px}.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;font-size:14px;color:var(--muted)}.stats strong{color:var(--red);font-variant-numeric:tabular-nums}.deposit{border:1px solid var(--ink);padding:24px;margin:32px 0}.deposit label{font-weight:600}.row{display:flex;align-items:baseline}.between{justify-content:space-between}.input-row{display:flex;gap:8px;margin:10px 0 8px}.input-row input{flex:1;font:inherit;font-size:24px;font-weight:600;padding:10px 12px;border:1px solid var(--ink);border-radius:0;min-width:0;font-variant-numeric:tabular-nums}.input-row input:focus{outline:2px solid var(--red);outline-offset:-1px}.hint{color:var(--muted);font-size:13px}#save-status{margin:10px 0 0}.log{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.log li{padding:5px 0;border-bottom:1px solid var(--line);word-break:break-all}.log a{color:var(--red)}.log .ok{color:#0a0}.log .err{color:var(--red)}footer{border-top:1px solid var(--ink);padding:16px 20px;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}.hidden{display:none!important}
</style>
</head>
<body>
<header>
<span class="wordmark"><span class="cross" aria-hidden="true"></span>svZCHF</span>
<div class="wallet-area">
<span id="wallet-pill" class="pill hidden"></span>
<button id="btn-disconnect" class="linklike hidden">disconnect</button>
<button id="btn-connect" class="btn">Connect wallet</button>
</div>
</header>
<!-- wallet connect chooser / latrine pairing panel -->
<section id="connect-panel" class="connect-panel hidden">
<div class="connect-box">
<h2>Connect</h2>
<div class="connect-options">
<button id="btn-connect-wc" class="btn">WalletConnect</button>
</div>
<div id="injected-list" class="injected-list"></div>
<div id="wc-uri-area" class="wc-uri-area hidden">
<canvas id="wc-qr" width="176" height="176"></canvas>
<p class="hint">Scan with any WalletConnect wallet, or copy the URI:</p>
<div class="wc-uri-row">
<input id="wc-uri" readonly onclick="this.select()" />
<button id="btn-copy-uri" class="btn btn-ghost">Copy</button>
</div>
<p class="waiting">Waiting for approval…</p>
</div>
<button id="btn-connect-cancel" class="linklike">cancel</button>
</div>
</section>
<div id="wrong-chain" class="banner hidden">
Wrong chain — the vault is on Ethereum mainnet.
<button id="btn-switch-chain" class="linklike">switch</button>
</div>
<main>
<h1>Save in Swiss francs.</h1>
<p class="stats" id="stats-line">
Share price <strong id="stat-price">—</strong> · Rate
<strong id="stat-rate">—</strong>
</p>
<section class="deposit">
<div class="row between">
<label for="dep-amount">Amount (ZCHF)</label>
<span class="hint" id="user-balance">Connect a wallet</span>
</div>
<div class="input-row">
<input id="dep-amount" type="number" min="0" step="any" placeholder="1000.00" />
<button id="dep-max" class="btn btn-ghost">MAX</button>
</div>
<p class="hint" id="dep-preview">You receive ≈ — svZCHF</p>
<button id="btn-save" class="btn btn-red btn-big" disabled>Approve & Deposit</button>
<p class="hint" id="save-status"></p>
</section>
<section class="deposit">
<div class="row between">
<label for="red-amount">Withdraw (svZCHF)</label>
<span class="hint" id="user-shares">—</span>
</div>
<div class="input-row">
<input id="red-amount" type="number" min="0" step="any" placeholder="1000.00" />
<button id="red-max" class="btn btn-ghost">MAX</button>
</div>
<p class="hint" id="red-preview">You get back ≈ — ZCHF</p>
<button id="btn-redeem" class="btn btn-big" disabled>Withdraw</button>
<p class="hint" id="redeem-status"></p>
</section>
<ul id="log" class="log hidden"></ul>
</main>
<footer>
<span class="cross small" aria-hidden="true"></span>
<span>Public good. Not affiliated with Frankencoin.</span>
</footer>
</body>
</html>