177 lines
4 KiB
Svelte
177 lines
4 KiB
Svelte
<script>
|
|
import { t } from '$lib/translations';
|
|
|
|
import bitcoin from '$lib/assets/bitcoin.svg';
|
|
import monero from '$lib/assets/monero.svg';
|
|
import paypal from '$lib/assets/paypal.svg';
|
|
|
|
const BTC_ADDRESS = 'bc1qpc4lpyr6stxrrg3u0k4clp4crlt6z4j6q845rq';
|
|
const XMR_ADDRESS =
|
|
'8A9iyTskiBh6f6GDUwnUJaYhAW13gNjDYaZYJBftX434D3XLrcGBko4a8kC4pLSfiuJAoSJ7e8rwP8W4StsVypftCp6FGwm';
|
|
|
|
let copyStatus = {
|
|
btc: '',
|
|
xmr: '',
|
|
};
|
|
|
|
/**
|
|
* @param {string} text
|
|
* @param {'btc' | 'xmr'} key
|
|
*/
|
|
async function copyToClipboard(text, key) {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
copyStatus[key] = 'donate.copied';
|
|
} catch (err) {
|
|
console.error('Copy failed:', err);
|
|
copyStatus[key] = 'donate.copy.failed';
|
|
}
|
|
|
|
setTimeout(() => (copyStatus[key] = ''), 2000);
|
|
}
|
|
</script>
|
|
|
|
<section aria-labelledby="donate-title" class="donate-container">
|
|
<header>
|
|
<h1 id="donate-title">{$t('donate.title')}</h1>
|
|
<p class="donate-subtitle">{$t('donate.subtitle')}</p>
|
|
<p>{@html $t('donate.description')}</p>
|
|
</header>
|
|
|
|
<h2 id="ways-title">{$t('donate.ways')}</h2>
|
|
<div class="donation-options" aria-labelledby="ways-title">
|
|
<article class="donation-method" aria-labelledby="btc-label">
|
|
<img src={bitcoin} alt="Bitcoin QR code" width="200" height="200" />
|
|
<h3 id="btc-label">Bitcoin</h3>
|
|
<p>{$t('donate.bitcoin.description')}</p>
|
|
<button
|
|
aria-label="Copy Bitcoin address"
|
|
on:click={() => copyToClipboard(BTC_ADDRESS, 'btc')}
|
|
>
|
|
{#if copyStatus.btc}
|
|
{$t(copyStatus.btc)}
|
|
{:else}
|
|
{$t('donate.copy')}
|
|
{/if}
|
|
</button>
|
|
</article>
|
|
|
|
<article class="donation-method" aria-labelledby="xmr-label">
|
|
<img src={monero} alt="Monero QR code" width="200" height="200" />
|
|
<h3 id="xmr-label">Monero</h3>
|
|
<p>{$t('donate.monero.description')}</p>
|
|
<button
|
|
aria-label="Copy Monero address"
|
|
on:click={() => copyToClipboard(XMR_ADDRESS, 'xmr')}
|
|
>
|
|
{#if copyStatus.xmr}
|
|
{$t(copyStatus.xmr)}
|
|
{:else}
|
|
{$t('donate.copy')}
|
|
{/if}
|
|
</button>
|
|
</article>
|
|
|
|
<article class="donation-method" aria-labelledby="paypal-label">
|
|
<img src={paypal} alt="PayPal" width="200" height="200" />
|
|
<h3 id="paypal-label">PayPal</h3>
|
|
<p>{$t('donate.paypal.description')}</p>
|
|
<a
|
|
class="donation-link"
|
|
href="https://www.paypal.com/donate/?business=leo@leomurca.xyz¤cy_code=USD"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="PayPal donation link"
|
|
>
|
|
{$t('donate.paypal.link')}
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.donate-container {
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.donate-subtitle {
|
|
font-weight: bold;
|
|
color: #06345f;
|
|
margin: 0;
|
|
}
|
|
|
|
.donation-options {
|
|
display: flex;
|
|
gap: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.donation-method {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 30rem;
|
|
}
|
|
|
|
.donation-method p {
|
|
margin-top: 0.5rem;
|
|
text-align: center;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
button,
|
|
.donation-link {
|
|
font-size: 14px;
|
|
background-color: #05345f;
|
|
font-weight: bold;
|
|
color: white;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
width: 200px;
|
|
height: 45px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 1rem;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
button:hover,
|
|
.donation-link:hover {
|
|
cursor: pointer;
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.donate-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.donation-options {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.donation-method {
|
|
width: 100%;
|
|
}
|
|
|
|
button,
|
|
.donation-link {
|
|
width: 100%;
|
|
height: 55px;
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
</style>
|