Add donation section

src/lib/translations/en-US/donate.json

@@ -0,0 +1,13 @@
+{
+  "title": "💖 Donate",
+  "subtitle": "Help support Embroidery Viewer and its development!",
+  "description": "⭐️ <strong>Embroidery Viewer</strong> is free to use. If you find this tool helpful, please consider making a donation to keep it running and fund future improvements.",
+  "ways": "💸 Ways to Donate",
+  "bitcoin.description": "Scan or copy the address",
+  "copy": "Copy Address",
+  "copied": "Copied to Clipboard!",
+  "copy.failed": "Copy Failed!",
+  "monero.description": "Private and secure donation option.",
+  "paypal.description": "Want to show support in a friendly way?",
+  "paypal.link": "Open Donation link"
+}

src/lib/translations/index.js

@@ -41,6 +41,12 @@ const config = {
       routes: ['/about'],
       loader: async () => (await import('./en-US/about.json')).default,
     },
+    {
+      locale: SUPPORTED_LOCALES.EN_US,
+      key: 'donate',
+      routes: ['/donate'],
+      loader: async () => (await import('./en-US/donate.json')).default,
+    },
     {
       locale: SUPPORTED_LOCALES.PT_BR,
       key: 'header',
@@ -63,6 +69,12 @@ const config = {
       routes: ['/about'],
       loader: async () => (await import('./pt-BR/about.json')).default,
     },
+    {
+      locale: SUPPORTED_LOCALES.PT_BR,
+      key: 'donate',
+      routes: ['/donate'],
+      loader: async () => (await import('./pt-BR/donate.json')).default,
+    },
   ],
 };
 

src/lib/translations/pt-BR/donate.json

@@ -0,0 +1,13 @@
+{
+  "title": "💖 Doe",
+  "subtitle": "Ajude a apoiar o Embroidery Viewer e seu desenvolvimento!",
+  "description": "⭐️ O <strong>Embroidery Viewer</strong> é gratuito. Se você achar esta ferramenta útil, considere fazer uma doação para mantê-la funcionando e financiar melhorias futuras.",
+  "ways": "💸 Formas de doar",
+  "bitcoin.description": "Escaneie ou copie o endereço",
+  "copy": "Copiar Endereço",
+  "copied": "Copiado para a área de transferência!",
+  "copy.failed": "Falha na Cópia!",
+  "monero.description": "Opção de doação privada e segura.",
+  "paypal.description": "Quer demonstrar apoio de uma forma amigável?",
+  "paypal.link": "Abrir Link de Doação"
+}

src/routes/donate/+page.svelte

@@ -1 +1,177 @@
-<h1>Donate</h1>
+<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&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>