Add donation options and improve look of site

pagesource/donate.md

@@ -13,8 +13,57 @@ You can help the development of Profanity and show your appreciation by donating
 
 There are several ways to do so:
 
-1. Become a sponsor on [GitHub Sponsors](https://github.com/jubalh)
-2. Write an email to jubalh@iodoru.org to ask for bank details
-3. Send Bitcoin to: bc1qx265eat7hfasqkqmk9qf38delydnrnuvzhzy0x
+<ul class="donation-grid" style="display: flex; flex-wrap: wrap; gap: 15px; font-family: sans-serif; font-size: 14px !important; max-width: 680px; margin-top: 15px; margin-bottom: 15px; padding: 0; list-style: none; box-sizing: border-box;">
+
+    <!-- GitHub Sponsors Card -->
+    <li style="border: 1px solid #e1e4e8; border-radius: 8px; padding: 15px; margin: 0; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 280px; max-width: 320px; box-sizing: border-box; list-style: none; font-size: 14px !important;">
+        <span style="display: block;">
+            <span style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;">
+                <strong style="font-size: 1.05em; color: #24292e;">GitHub Sponsors</strong>
+            </span>
+            <p style="margin: 0 0 15px 0; color: #586069; font-size: 0.85em; line-height: 1.4; padding: 0;">The default way on GitHub. Tiers start at just $1/month.</p>
+        </span>
+        <a href="https://github.com/sponsors/jubalh" target="_blank" style="display: block; text-align: center; background-color: #c93422; color: white; padding: 8px 15px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 0.85em; transition: background-color 0.2s;">Sponsor on GitHub</a>
+    </li>
+
+    <!-- Monero Card -->
+    <li style="border: 1px solid #e1e4e8; border-radius: 8px; padding: 15px; margin: 0; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 280px; max-width: 320px; box-sizing: border-box; list-style: none; font-size: 14px !important;">
+        <span style="display: block;">
+            <span style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;">
+                <strong style="font-size: 1.05em; color: #24292e;">Monero (XMR)</strong>
+            </span>
+            <p style="margin: 0 0 10px 0; color: #586069; font-size: 0.85em; line-height: 1.4; padding: 0;">Send support with financial privacy. Scan or copy address below:</p>
+            <code style="display: block; background-color: #f6f8fa; padding: 6px; border-radius: 4px; font-size: 0.7em; border: 1px solid #e1e4e8; word-break: break-all; color: #032f62; line-height: 1.3; margin-bottom: 10px;">85Mz3CXUrom2LJSJRBqcbWj5rg7PfkkVrUzAW5MyGzZiTFxbXjkGckAiLFfze6bjAuLTmPoZ4VNgXZVKHhPWgeWg2nWeU69</code>
+        </span>
+        <span style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
+            <img src="https://api.qrserver.com/v1/create-qr-code/?size=80x100&amp;data=monero:85Mz3CXUrom2LJSJRBqcbWj5rg7PfkkVrUzAW5MyGzZiTFxbXjkGckAiLFfze6bjAuLTmPoZ4VNgXZVKHhPWgeWg2nWeU69" alt="Monero QR Code" style="width: 80px; height: 80px; border: 1px solid #e1e4e8; border-radius: 4px; padding: 2px; background: white;" />
+        </span>
+    </li>
+
+    <!-- Bitcoin Card -->
+    <li style="border: 1px solid #e1e4e8; border-radius: 8px; padding: 15px; margin: 0; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 280px; max-width: 320px; box-sizing: border-box; list-style: none; font-size: 14px !important;">
+        <span style="display: block;">
+            <span style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;">
+                <strong style="font-size: 1.05em; color: #24292e;">Bitcoin (BTC)</strong>
+            </span>
+            <p style="margin: 0 0 10px 0; color: #586069; font-size: 0.85em; line-height: 1.4; padding: 0;">Send a one-time Bitcoin donation. Scan or copy address below:</p>
+            <code style="display: block; background-color: #f6f8fa; padding: 6px; border-radius: 4px; font-size: 0.7em; border: 1px solid #e1e4e8; word-break: break-all; color: #032f62; line-height: 1.3; margin-bottom: 10px;">bc1qx265eat7hfasqkqmk9qf38delydnrnuvzhzy0x</code>
+        </span>
+        <span style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
+            <img src="https://api.qrserver.com/v1/create-qr-code/?size=80x100&amp;data=bitcoin:bc1qx265eat7hfasqkqmk9qf38delydnrnuvzhzy0x" alt="Bitcoin QR Code" style="width: 80px; height: 80px; border: 1px solid #e1e4e8; border-radius: 4px; padding: 2px; background: white;" />
+        </span>
+    </li>
+
+    <!-- SEPA Card -->
+    <li style="border: 1px solid #e1e4e8; border-radius: 8px; padding: 15px; margin: 0; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 280px; max-width: 320px; box-sizing: border-box; list-style: none; font-size: 14px !important;">
+        <span style="display: block;">
+            <span style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;">
+                <strong style="font-size: 1.05em; color: #24292e;">SEPA and Revolut</strong>
+            </span>
+            <p style="margin: 0 0 15px 0; color: #586069; font-size: 0.85em; line-height: 1.4; padding: 0;">If you prefer traditional bank accounts, email us to securely receive our IBAN/BIC or Revolut transfer details.</p>
+        </span>
+        <a href="mailto:jubalh@iodoru.org" style="display: block; text-align: center; background-color: #c93422; color: white; padding: 8px 15px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 0.85em; transition: background-color 0.2s;">Email for IBAN</a>
+    </li>
+</ul>
 
 ${section_end}