src/i18n/translations.js

@@ -25,6 +25,17 @@ export default {
       "home.cta.title": "🚀 Try It Now",
       "home.cta.cta": "🧵 Open Viewer",
       "home.cta.cta.description": "the fastest <strong>Free Online Embroidery File Viewer</strong>.",
+      "donate.title": "💖 Donate",
+      "donate.subtitle": "Help support Embroidery Viewer and its development!",
+      "donate.description": "⭐️ <strong>Embroidery Viewer</strong> is free to use, with no ads. If you find this tool helpful, please consider making a donation to keep it running and fund future improvements.",
+      "donate.ways": "💸 Ways to Donate",
+      "donate.bitcoin.description": "Scan or copy the address",
+      "donate.copy": "Copy Address",
+      "donate.copied": "Copied to Clipboard!",
+      "donate.copy.failed": "Copy Failed!",
+      "donate.monero.description": "Private and secure donation option.",
+      "donate.paypal.description": "Want to show support in a friendly way?",
+      "donate.paypal.link": "Open Donation link",
       "main.languageSwitch": "🇧🇷",
       "main.fileSize": "Max file size is <strong>{{fileSize}}kb</strong>.",
       "main.supportedFormats": "Accepted formats: <strong>{{supportedFormats}}</strong>.",
@@ -63,6 +74,17 @@ export default {
       "home.cta.title": "🚀 Experimente agora",
       "home.cta.cta": "🧵 Abrir visualizador",
       "home.cta.cta.description": "o <strong>visualizador de arquivos de bordado online gratuito</strong> mais rápido.",
+      "donate.title": "💖 Doe",
+      "donate.subtitle": "Ajude a apoiar o Embroidery Viewer e seu desenvolvimento!",
+      "donate.description": "⭐️ O <strong>Embroidery Viewer</strong> é gratuito e sem anúncios. Se você achar esta ferramenta útil, considere fazer uma doação para mantê-la funcionando e financiar melhorias futuras.",
+      "donate.ways": "💸 Formas de doar",
+      "donate.bitcoin.description": "Escaneie ou copie o endereço",
+      "donate.copy": "Copiar Endereço",
+      "donate.copied": "Copiado para a área de transferência!",
+      "donate.copy.failed": "Falha na Cópia!",
+      "donate.monero.description": "Opção de doação privada e segura.",
+      "donate.paypal.description": "Quer demonstrar apoio de uma forma amigável?",
+      "donate.paypal.link": "Abrir Link de Doação",
       "main.title": "Carregar arquivos",
       "main.languageSwitch": "🇺🇸",
       "main.fileSize": "O tamanho máximo do arquivo é <strong>{{fileSize}}kb</strong>.",

src/lib/pages/Donate.svelte

@@ -1,2 +1,193 @@
-<h1>Donate</h1>
+
-<p>Welcome to the donate page.</p>
+<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-radius: 0;
+    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-radius: 0;
+    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>

src/lib/pages/Home.svelte

@@ -48,12 +48,12 @@
 <style>
     .home-container {
         margin: 0 auto;
-        max-width: 70%;
+        width: 70%;
     }
 
     @media (max-width: 768px) {
         .home-container {
-            max-width: 100%;
+            width: 100%;
         }
      }
 </style>