embroidery-viewer/src/lib/pages/Donate.svelte

<script>
  import { t } from "../../i18n"
  import bitcoin from "../../assets/bitcoin.svg"
  import monero from "../../assets/monero.svg"
  import paypal from "../../assets/paypal.svg"

  let bitcoinCopyStatus = '';
  let moneroCopyStatus= '';

  const onCopyMonero = async (text) => {
    try {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.setAttribute('readonly', '');
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      document.body.appendChild(textarea);

      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);

      moneroCopyStatus = 'donate.copied';
    } catch (err) {
      console.error('Copy failed:', err);
      moneroCopyStatus = 'donate.copy.failed';
    }

    setTimeout(() => moneroCopyStatus = '', 2000);
  };

  const onCopyBitcoin = async (text) => {
    try {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.setAttribute('readonly', '');
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      document.body.appendChild(textarea);

      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);

      bitcoinCopyStatus = 'donate.copied';
    } catch (err) {
      console.error('Copy failed:', err);
      bitcoinCopyStatus = 'donate.copy.failed';
    }

    setTimeout(() => bitcoinCopyStatus = '', 2000);
  };

</script>
<section aria-labelledby="donate-title">
  <h1 id="donate-title">{$t("donate.title")}</h1>
    <p class="donate-subtitle">{$t("donate.subtitle")}</p>
    <p>
      {@html $t("donate.description")}
    </p>
</section>
  <section id="ways" aria-labelledby="ways-title">
    <h2>{$t("donate.ways")}</h2>
      <div class="donation-options">
        <article class="donation-method" aria-labelledby="btc-label">
          <img src={bitcoin} width="200" height="200" alt="Bitcoin QR code" />
          <h3 id="btc-label">Bitcoin</h3>
          <p>{$t("donate.bitcoin.description")}</p>
          <button id="copy-btc" aria-label="Copy Bitcoin address" on:click={() => onCopyBitcoin("bc1qpc4lpyr6stxrrg3u0k4clp4crlt6z4j6q845rq")}>
            {#if bitcoinCopyStatus}
              {$t(bitcoinCopyStatus)}
            {: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 id="copy-monero" aria-label="Copy Monero address" on:click={() => onCopyMonero("8A9iyTskiBh6f6GDUwnUJaYhAW13gNjDYaZYJBftX434D3XLrcGBko4a8kC4pLSfiuJAoSJ7e8rwP8W4StsVypftCp6FGwm")}>
            {#if moneroCopyStatus}
              {$t(moneroCopyStatus)}
            {:else}
              {$t("donate.copy")}
            {/if}
          </button>
        </article>

        <article class="donation-method" aria-labelledby="bmc-label">
          <img src={paypal} alt="PayPal" width="200" height="200" />
          <h3 id="bmc-label">PayPal</h3>
          <p>{$t("donate.paypal.description")}</p>
          <a id="paypal-donation-link" aria-label="Paypal donation link" target="_blank" href="https://www.paypal.com/donate/?business=leo@leomurca.xyz&currency_code=USD">{$t("donate.paypal.link")}</a>
        </article>
      </div>
    </section>

<style>
  h1 {
    padding: 0;
    margin-bottom: 7px;
  }

  .donate-subtitle {
    font-weight: bold;
    color: #06345F;
    margin: 0;
  }

  .donation-options {
    display: flex;
    justify-content: space-between;
  }

  .donation-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 33.33%;
  }

  .donation-method p {
    margin-top: 0;
  }

  button {
    font-size: 14px;
    background-color: #05345f;
    font-weight: bold;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 10px;
    width: 200px;
    height: 45px;
  }

  button:hover {
    cursor: pointer;
    background-color: black;
    color: white;
  }

  #paypal-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;
  }

  #paypal-donation-link:hover {
    cursor: pointer;
    background-color: black;
    color: white;
  }

  @media (max-width: 768px) {

    button {
    font-size: 1em;
    width: 100%;
    height: 55px;
  }
    #paypal-donation-link {
      font-size: 1em;
      width: 100%;
      height: 55px;
      margin: 0;
      padding: 0;
  }
    .donation-options{
      display: flex;
      flex-direction: column;
      gap: 50px;
      justify-content: space-between;
    }
    .donation-method {
      width: 100%;
    }
  }
</style>