embroidery-viewer/src/routes/donate/+page.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';

  import Seo from '$lib/components/Seo.svelte';

  /** @type {import('./$types').PageProps} */
  let { data } = $props();

  const metadata = data.metadata;

  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>

<Seo {...metadata} />

<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&currency_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>