Skip to content

Commit 6a40727

Browse files
author
Oleksandr Tk
committed
feat: overhaul crypto payment interface with copy buttons and direct wallet deep links
1 parent 8b0461f commit 6a40727

2 files changed

Lines changed: 185 additions & 28 deletions

File tree

‎docs/static/src/script.js‎

Lines changed: 134 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -428,6 +428,7 @@ const CRYPTO_MODAL_HTML = `
428428
</button>
429429
</div>
430430
431+
<!-- USDT TRC20 -->
431432
<div id="crypto-usdt-trc20" class="crypto-panel">
432433
<div class="crypto-qr-card">
433434
<div class="crypto-qr-card-label" style="color: #26A17B;">
@@ -439,10 +440,21 @@ const CRYPTO_MODAL_HTML = `
439440
<img src="static/assets/crypto/USDT%20(TRC20).webp" alt="USDT TRC20 QR">
440441
</div>
441442
</div>
442-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp</p>
443-
<a href="tron:TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp" class="btn btn-primary crypto-open-btn">Open Wallet</a>
443+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, 'TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp')">TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp</p>
444+
<div class="crypto-actions">
445+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, 'TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp')">
446+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
447+
Copy Address
448+
</button>
449+
<div class="crypto-wallet-links">
450+
<a href="https://link.trustwallet.com/send?asset=c195_tTR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t&address=TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Trust Wallet</a>
451+
<a href="tronlinkoutside://pull.activity?param=%7B%22action%22%3A%22transfer%22%2C%22protocol%22%3A%22TronLink%22%2C%22version%22%3A%221.0%22%2C%22toAddress%22%3A%22TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp%22%2C%22contract%22%3A%22TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t%22%7D" class="btn btn-secondary crypto-btn">TronLink</a>
452+
</div>
453+
</div>
454+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
444455
</div>
445456
457+
<!-- USDT BEP20 -->
446458
<div id="crypto-usdt-bep20" class="crypto-panel" style="display: none;">
447459
<div class="crypto-qr-card">
448460
<div class="crypto-qr-card-label" style="color: #26A17B;">
@@ -454,10 +466,21 @@ const CRYPTO_MODAL_HTML = `
454466
<img src="static/assets/crypto/USDT%20(BEP20%20%3A%20BNB%20Smart%20Chain).webp" alt="USDT BEP20 QR">
455467
</div>
456468
</div>
457-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4</p>
458-
<a href="ethereum:0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" class="btn btn-primary crypto-open-btn">Open Wallet</a>
469+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, '0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4')">0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4</p>
470+
<div class="crypto-actions">
471+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, '0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4')">
472+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
473+
Copy Address
474+
</button>
475+
<div class="crypto-wallet-links">
476+
<a href="https://link.trustwallet.com/send?asset=c20000714_t0x55d398326f99059fF775485246999027B3197955&address=0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Trust Wallet</a>
477+
<a href="https://metamask.app.link/send/0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">MetaMask</a>
478+
</div>
479+
</div>
480+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
459481
</div>
460482
483+
<!-- USDT TON -->
461484
<div id="crypto-usdt-ton" class="crypto-panel" style="display: none;">
462485
<div class="crypto-qr-card">
463486
<div class="crypto-qr-card-label" style="color: #26A17B;">
@@ -469,10 +492,20 @@ const CRYPTO_MODAL_HTML = `
469492
<img src="static/assets/crypto/USDT%20(TON).webp" alt="USDT TON QR">
470493
</div>
471494
</div>
472-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">UQDalQWmfsFTIEAT_t-urAoCCw_KzxBsRwcnfTZZfPCak2Ge</p>
473-
<a href="ton://transfer/UQDalQWmfsFTIEAT_t-urAoCCw_KzxBsRwcnfTZZfPCak2Ge" class="btn btn-primary crypto-open-btn">Open Wallet</a>
495+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, 'UQDalQWmfsFTIEAT_t-urAoCCw_KzxBsRwcnfTZZfPCak2Ge')">UQDalQWmfsFTIEAT_t-urAoCCw_KzxBsRwcnfTZZfPCak2Ge</p>
496+
<div class="crypto-actions">
497+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, 'UQDalQWmfsFTIEAT_t-urAoCCw_KzxBsRwcnfTZZfPCak2Ge')">
498+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
499+
Copy Address
500+
</button>
501+
<div class="crypto-wallet-links">
502+
<a href="https://app.tonkeeper.com/transfer/UQDalQWmfsFTIEAT_t-urAoCCw_KzxBsRwcnfTZZfPCak2Ge" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Tonkeeper</a>
503+
</div>
504+
</div>
505+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
474506
</div>
475507
508+
<!-- BTC -->
476509
<div id="crypto-btc" class="crypto-panel" style="display: none;">
477510
<div class="crypto-qr-card">
478511
<div class="crypto-qr-card-label" style="color: #F7931A;">
@@ -484,10 +517,20 @@ const CRYPTO_MODAL_HTML = `
484517
<img src="static/assets/crypto/Bitcoin%20(BTC).webp" alt="BTC QR">
485518
</div>
486519
</div>
487-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">bc1q4myt8cj8a67twf6038mmaaes6xxst502lxe7kk</p>
488-
<a href="bitcoin:bc1q4myt8cj8a67twf6038mmaaes6xxst502lxe7kk" class="btn btn-primary crypto-open-btn">Open Wallet</a>
520+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, 'bc1q4myt8cj8a67twf6038mmaaes6xxst502lxe7kk')">bc1q4myt8cj8a67twf6038mmaaes6xxst502lxe7kk</p>
521+
<div class="crypto-actions">
522+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, 'bc1q4myt8cj8a67twf6038mmaaes6xxst502lxe7kk')">
523+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
524+
Copy Address
525+
</button>
526+
<div class="crypto-wallet-links">
527+
<a href="https://link.trustwallet.com/send?asset=c0&address=bc1q4myt8cj8a67twf6038mmaaes6xxst502lxe7kk" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Trust Wallet</a>
528+
</div>
529+
</div>
530+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
489531
</div>
490532
533+
<!-- SOL -->
491534
<div id="crypto-sol" class="crypto-panel" style="display: none;">
492535
<div class="crypto-qr-card">
493536
<div class="crypto-qr-card-label" style="color: #9945FF;">
@@ -499,10 +542,21 @@ const CRYPTO_MODAL_HTML = `
499542
<img src="static/assets/crypto/Solana%20(SOL).webp" alt="SOL QR">
500543
</div>
501544
</div>
502-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">4cg4Exxajew3xr5oyDFuz6EseD8Eq7oN8Fibvrka7A5</p>
503-
<a href="solana:4cg4Exxajew3xr5oyDFuz6EseD8Eq7oN8Fibvrka7A5" class="btn btn-primary crypto-open-btn">Open Wallet</a>
545+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, '4cg4Exxajew3xr5oyDFuz6EseD8Eq7oN8Fibvrka7A5')">4cg4Exxajew3xr5oyDFuz6EseD8Eq7oN8Fibvrka7A5</p>
546+
<div class="crypto-actions">
547+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, '4cg4Exxajew3xr5oyDFuz6EseD8Eq7oN8Fibvrka7A5')">
548+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
549+
Copy Address
550+
</button>
551+
<div class="crypto-wallet-links">
552+
<a href="https://link.trustwallet.com/send?asset=c501&address=4cg4Exxajew3xr5oyDFuz6EseD8Eq7oN8Fibvrka7A5" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Trust Wallet</a>
553+
<a href="https://phantom.app/ul/v1/transfer?recipient=4cg4Exxajew3xr5oyDFuz6EseD8Eq7oN8Fibvrka7A5" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Phantom</a>
554+
</div>
555+
</div>
556+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
504557
</div>
505558
559+
<!-- ETH -->
506560
<div id="crypto-eth" class="crypto-panel" style="display: none;">
507561
<div class="crypto-qr-card">
508562
<div class="crypto-qr-card-label" style="color: #627EEA;">
@@ -514,10 +568,21 @@ const CRYPTO_MODAL_HTML = `
514568
<img src="static/assets/crypto/Ethereum%20(ETH%20%3A%20ERC20).webp" alt="ETH QR">
515569
</div>
516570
</div>
517-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4</p>
518-
<a href="ethereum:0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" class="btn btn-primary crypto-open-btn">Open Wallet</a>
571+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, '0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4')">0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4</p>
572+
<div class="crypto-actions">
573+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, '0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4')">
574+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
575+
Copy Address
576+
</button>
577+
<div class="crypto-wallet-links">
578+
<a href="https://link.trustwallet.com/send?asset=c60&address=0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Trust Wallet</a>
579+
<a href="https://metamask.app.link/send/0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">MetaMask</a>
580+
</div>
581+
</div>
582+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
519583
</div>
520584
585+
<!-- BNB -->
521586
<div id="crypto-bnb" class="crypto-panel" style="display: none;">
522587
<div class="crypto-qr-card">
523588
<div class="crypto-qr-card-label" style="color: #F3BA2F;">
@@ -529,10 +594,21 @@ const CRYPTO_MODAL_HTML = `
529594
<img src="static/assets/crypto/BNB%20(BEP20).webp" alt="BNB QR">
530595
</div>
531596
</div>
532-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4</p>
533-
<a href="ethereum:0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" class="btn btn-primary crypto-open-btn">Open Wallet</a>
597+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, '0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4')">0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4</p>
598+
<div class="crypto-actions">
599+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, '0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4')">
600+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
601+
Copy Address
602+
</button>
603+
<div class="crypto-wallet-links">
604+
<a href="https://link.trustwallet.com/send?asset=c20000714&address=0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Trust Wallet</a>
605+
<a href="https://metamask.app.link/send/0x04b972bD6deF9d97bEe305CC22FED8f04D9BcAC4" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">MetaMask</a>
606+
</div>
607+
</div>
608+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
534609
</div>
535610
611+
<!-- TRX -->
536612
<div id="crypto-trx" class="crypto-panel" style="display: none;">
537613
<div class="crypto-qr-card">
538614
<div class="crypto-qr-card-label" style="color: #EF0027;">
@@ -544,10 +620,21 @@ const CRYPTO_MODAL_HTML = `
544620
<img src="static/assets/crypto/TRON%20(TRX).webp" alt="TRX QR">
545621
</div>
546622
</div>
547-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp</p>
548-
<a href="tron:TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp" class="btn btn-primary crypto-open-btn">Open Wallet</a>
623+
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this, 'TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp')">TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp</p>
624+
<div class="crypto-actions">
625+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, 'TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp')">
626+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
627+
Copy Address
628+
</button>
629+
<div class="crypto-wallet-links">
630+
<a href="https://link.trustwallet.com/send?asset=c195&address=TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Trust Wallet</a>
631+
<a href="tronlinkoutside://pull.activity?param=%7B%22action%22%3A%22transfer%22%2C%22protocol%22%3A%22TronLink%22%2C%22version%22%3A%221.0%22%2C%22toAddress%22%3A%22TAQBrzZuAvJ5Zga7touVzNGXXJykEVp7sp%22%2C%22amount%22%3A0%7D" class="btn btn-secondary crypto-btn">TronLink</a>
632+
</div>
633+
</div>
634+
<p class="crypto-hint">For wallets without direct link support (Binance, ZenGo, etc.): copy the address or scan the QR code in your app.</p>
549635
</div>
550636
637+
<!-- Binance Pay -->
551638
<div id="crypto-binance-pay" class="crypto-panel" style="display: none;">
552639
<div class="crypto-qr-card">
553640
<div class="crypto-qr-card-label" style="color: #F0B90B;">
@@ -560,28 +647,49 @@ const CRYPTO_MODAL_HTML = `
560647
</div>
561648
<div class="crypto-pay-id">Alex8695</div>
562649
</div>
563-
<p class="crypto-address" title="Click to copy address" onclick="copyCryptoText(this)">Binance Pay Nickname/ID: <strong>Alex8695</strong></p>
564-
<a href="https://www.binance.com/en/support/faq/3771bb743ee54151a2d255641d902b67" target="_blank" rel="noopener" class="btn btn-primary crypto-open-btn">How to pay? (FAQ)</a>
650+
<p class="crypto-address" title="Click to copy Binance ID" onclick="copyCryptoText(this, 'Alex8695')">Binance Pay Nickname/ID: <strong>Alex8695</strong></p>
651+
<div class="crypto-actions">
652+
<button type="button" class="btn btn-primary crypto-btn" onclick="copyCryptoText(this, 'Alex8695')">
653+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
654+
Copy Binance Pay ID
655+
</button>
656+
<div class="crypto-wallet-links">
657+
<a href="https://app.binance.com/uni-qr/UbtLZX3K" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">Open in Binance App</a>
658+
<a href="https://www.binance.com/en/support/faq/3771bb743ee54151a2d255641d902b67" target="_blank" rel="noopener" class="btn btn-secondary crypto-btn">FAQ Guide</a>
659+
</div>
660+
</div>
661+
<p class="crypto-hint">Tap "Open in Binance App" or scan QR code in Binance App (Pay to: <strong>Alex8695</strong>)</p>
565662
</div>
566663
</div>
567664
</div>
568665
`;
569666

570-
window.copyCryptoText = function(el) {
667+
window.copyCryptoText = function(el, explicitVal) {
571668
if (el.dataset.copying) return;
572669
el.dataset.copying = "true";
573-
let text = el.innerText.trim();
574-
if (text.includes(':')) text = text.split(':').pop().trim();
670+
let text = explicitVal || el.innerText.trim();
671+
if (text.includes(':') && !explicitVal) text = text.split(':').pop().trim();
672+
575673
navigator.clipboard.writeText(text).then(() => {
576674
const origHtml = el.innerHTML;
577-
const origColor = el.style.color;
578-
el.style.color = '#26A17B';
579-
el.innerHTML = '<strong>Copied to clipboard!</strong>';
675+
const isButton = el.tagName === 'BUTTON';
676+
const isId = explicitVal === 'Alex8695';
677+
if (isButton) {
678+
el.classList.add('copied');
679+
el.innerHTML = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> ${isId ? 'ID Copied!' : 'Address Copied!'}`;
680+
} else {
681+
const origColor = el.style.color;
682+
el.style.color = '#26A17B';
683+
el.innerHTML = '<strong>Copied to clipboard!</strong>';
684+
setTimeout(() => {
685+
el.style.color = origColor;
686+
}, 1200);
687+
}
580688
setTimeout(() => {
581-
el.style.color = origColor;
582689
el.innerHTML = origHtml;
690+
if (isButton) el.classList.remove('copied');
583691
delete el.dataset.copying;
584-
}, 1200);
692+
}, 1500);
585693
}).catch(err => {
586694
console.error('Copy failed', err);
587695
delete el.dataset.copying;

‎docs/static/src/style.css‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1468,11 +1468,60 @@ footer a:hover { color: var(--text); }
14681468
border-color: var(--line-strong);
14691469
}
14701470

1471-
.crypto-open-btn {
1471+
.crypto-actions {
14721472
display: flex;
1473-
width: 100%;
1473+
flex-direction: column;
1474+
gap: 8px;
1475+
margin-top: 4px;
1476+
}
1477+
1478+
.crypto-btn {
1479+
display: inline-flex;
1480+
align-items: center;
14741481
justify-content: center;
1482+
gap: 6px;
1483+
width: 100%;
1484+
padding: 10px 16px;
1485+
font-size: 0.88rem;
1486+
font-weight: 600;
14751487
border-radius: var(--radius-sm);
1488+
cursor: pointer;
1489+
text-decoration: none;
1490+
transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
1491+
}
1492+
1493+
.crypto-btn:active {
1494+
transform: scale(0.98);
1495+
}
1496+
1497+
.crypto-btn.copied {
1498+
background: #26A17B !important;
1499+
color: #fff !important;
1500+
border-color: transparent !important;
1501+
box-shadow: 0 4px 14px rgba(38, 161, 123, 0.35) !important;
1502+
}
1503+
1504+
.crypto-wallet-links {
1505+
display: flex;
1506+
flex-wrap: wrap;
1507+
gap: 8px;
1508+
justify-content: center;
1509+
}
1510+
1511+
.crypto-wallet-links .crypto-btn {
1512+
flex: 1 1 calc(50% - 4px);
1513+
min-width: 120px;
1514+
font-size: 0.82rem;
1515+
padding: 8px 12px;
1516+
}
1517+
1518+
.crypto-hint {
1519+
font-size: 0.76rem;
1520+
color: var(--text-muted);
1521+
margin-top: 14px;
1522+
margin-bottom: 0;
1523+
line-height: 1.45;
1524+
text-align: center;
14761525
}
14771526

14781527

0 commit comments

Comments
 (0)