Merge pull request #54 from TimUx/copilot/add-buy-me-a-coffee-button

Add Buy Me a Coffee button to donation page

Author: TimUx

.env.example

@@ -49,6 +49,8 @@ DONATION_POOL_ID='abc123?sr=example'
 DONATION_CAMPAIGN_NAME=Spendenaktion Lichtershow
 DONATION_SUBTITLE=Unterstütze unsere Lichtershow!
 DONATION_TEXT=Deine Spende hilft uns, die Lichtershow auch im nächsten Jahr zu ermöglichen.
+# Buy Me a Coffee Username (optional, wenn gesetzt erscheint ein Button)
+BUYMEACOFFEE_USERNAME=
 
 # ==========================================
 # SOCIAL MEDIA (optional, leer lassen wenn nicht genutzt)

README.md

@@ -53,7 +53,7 @@ Serverseitige (Python/Flask) Steuer-Seite für den Falcon Player (FPP). Der Cont
 
 **Spendenseite:**
 
-<img src="screenshot_donation.png" width="400">
+<img src="https://github.com/user-attachments/assets/41e940e6-b523-4b7b-8964-f5f28738f555" width="400">
 
 **Hauptseite außerhalb des Showzeitraums (Buttons deaktiviert):**
 
@@ -99,6 +99,7 @@ DONATION_POOL_ID='abc?123$=pool'
 DONATION_CAMPAIGN_NAME=Winter Lights
 DONATION_SUBTITLE=Unterstütze die Lichtershow
 DONATION_TEXT=
+BUYMEACOFFEE_USERNAME=example
 
 # Social Media Links
 SOCIAL_FACEBOOK=https://facebook.com/example
@@ -144,6 +145,7 @@ Eine ausfüllbare Vorlage liegt als `.env.example` bei.
 - `DONATION_CAMPAIGN_NAME`: Optionaler Name der Spendenaktion.
 - `DONATION_SUBTITLE`: Unterzeile speziell für die Spendenseite.
 - `DONATION_TEXT`: Freier Beschreibungstext auf der Spendenseite. Leer lassen, wenn kein Text angezeigt werden soll.
+- `BUYMEACOFFEE_USERNAME`: Benutzername von buymeacoffee.com. Wenn gesetzt, erscheint ein zusätzlicher Button mit einem Hinweis, dass die Spende direkt dem Betreiber zugutekommt.
 
 #### Social Media
 - `SOCIAL_FACEBOOK`: URL zur Facebook-Seite.

config.js

@@ -7,6 +7,7 @@ window.FPP_CONFIG = {
   donationCampaignName: 'FPP Weihnachtsaktion',
   donationSubtitle: 'Unterstütze die Lichtershow',
   donationText: 'Vielen Dank für deine Unterstützung!',
+  buyMeACoffeeUsername: 'example',
   previewMode: true,
   accessCode: '1234',
   socialFacebook: 'https://facebook.com/example',

config.template.js

@@ -7,6 +7,7 @@ window.FPP_CONFIG = {
   donationCampaignName: '${DONATION_CAMPAIGN_NAME:-}',
   donationSubtitle: '${DONATION_SUBTITLE:-Unterstütze die Lichtershow}',
   donationText: '${DONATION_TEXT-}',
+  buyMeACoffeeUsername: '${BUYMEACOFFEE_USERNAME:-}',
   previewMode: ${PREVIEW_MODE:-false},
   accessCode: '${ACCESS_CODE:-}',
   socialFacebook: '${SOCIAL_FACEBOOK:-}',

docker-entrypoint.sh

@@ -33,6 +33,7 @@ set -e
 : "${DONATION_CAMPAIGN_NAME:=}"
 : "${DONATION_SUBTITLE:=Unterstütze die Lichtershow}"
 : "${DONATION_TEXT:=}"
+: "${BUYMEACOFFEE_USERNAME:=}"
 
 # Social media
 : "${SOCIAL_FACEBOOK:=}"
@@ -62,6 +63,7 @@ config = {
     "donationText": "Vielen Dank für deine Unterstützung!"
     if donation_text_env is None
     else donation_text_env,
+    "buyMeACoffeeUsername": os.getenv("BUYMEACOFFEE_USERNAME", ""),
     "previewMode": os.getenv("PREVIEW_MODE", "false").lower()
     in ["true", "1", "yes", "on"],
     "accessCode": os.getenv("ACCESS_CODE", ""),

donation.html

@@ -87,8 +87,40 @@ <h3 class="social-footer-title">Unsere Kanäle:</h3>
       link.appendChild(icon);
       link.appendChild(label);
       donationLinks.appendChild(link);
-    } else {
-      donationLinks.innerHTML = '<p>Kein PayPal-Pool konfiguriert.</p>';
+    }
+
+    // Buy Me a Coffee Button
+    const bmcUsername = (config.buyMeACoffeeUsername || '').trim();
+    // Validate username: only alphanumeric characters, underscores and hyphens allowed
+    const isValidBmcUsername = bmcUsername && /^[a-zA-Z0-9_-]+$/.test(bmcUsername);
+    if (isValidBmcUsername) {
+      const bmcLink = document.createElement('a');
+      bmcLink.className = 'donation-link bmc-link';
+      bmcLink.href = `https://buymeacoffee.com/${encodeURIComponent(bmcUsername)}`;
+      bmcLink.target = '_blank';
+      bmcLink.rel = 'noopener noreferrer';
+
+      const bmcIcon = document.createElement('span');
+      bmcIcon.className = 'bmc-icon';
+      bmcIcon.setAttribute('aria-hidden', 'true');
+
+      const bmcLabel = document.createElement('span');
+      bmcLabel.className = 'donation-label';
+      bmcLabel.textContent = 'Buy me a Coffee';
+
+      bmcLink.appendChild(bmcIcon);
+      bmcLink.appendChild(bmcLabel);
+      donationLinks.appendChild(bmcLink);
+
+      // Add hint text for Buy Me a Coffee
+      const bmcHint = document.createElement('p');
+      bmcHint.className = 'bmc-hint note';
+      bmcHint.textContent = 'Hinweis: Spenden über „Buy me a Coffee" kommen mir persönlich und direkt zugute – sie werden nicht an andere Vereine oder Organisationen weitergeleitet.';
+      donationLinks.parentNode.insertBefore(bmcHint, donationLinks.nextSibling);
+    }
+
+    if (!poolId && !isValidBmcUsername) {
+      donationLinks.innerHTML = '<p>Keine Spendenmöglichkeit konfiguriert.</p>';
     }
 
     backHome.addEventListener('click', () => {

styles.css

@@ -552,7 +552,9 @@ button.action:disabled {
 
 .donation-links {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
   margin-top: 6px;
 }
 
@@ -576,6 +578,36 @@ button.action:disabled {
   min-width: min(360px, 100%);
 }
 
+.donation-link.bmc-link {
+  background: #ffdd00;
+  color: #000;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.donation-link.bmc-link:hover,
+.donation-link.bmc-link:focus {
+  background: #ffe44d;
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+.bmc-icon {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 884 1279'%3E%3Cpath fill='%23000' d='M791.1 297.4c0-47.7-35.4-186.8-247.3-186.8l-41.6-60.3c-11.8-16.9-30.7-27.2-51.3-27.2h-159c-22.9 0-43.6 12.6-54.6 32.7L210.6 114c-209 16.4-209 162.3-209 183.4s7 156.6 189.8 188.9l46.2 460.6c9.5 89.8 83.8 160 174 160H632c90.2 0 164.5-70.2 174-160l32-318.4c86.7-53.8 119.9-131.9 119.9-179 0-51.4-33.2-100.6-79.9-121.3-7-25.8-25.1-48.6-86.9-30.8zm-51.3 255.4-34.4 351c-4.8 45.7-42.6 81.2-88.4 81.2H411.6c-45.8 0-83.6-35.5-88.4-81.2l-45-448.7h363.2c48.1 0 87.4-38.4 89.4-86.2 33.8 22.9 55.8 61.9 57.8 102.7-22 31.9-48.8 81.2-48.8 81.2zM539.7 134.9l25.5 37.1H340.5l19.2-37.1h180zm124.9 274.7H203.9l-5-46.1c57.2-1.9 132.1-24.4 205.7-47.6 77.7-24.5 152.4-48 210.5-48h88.8l-5 46.1c-4.8 45.8-42.6 95.6-34.3 95.6z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.bmc-hint {
+  text-align: center;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.75);
+  margin-top: 8px;
+  padding: 10px 16px;
+  background: rgba(255, 221, 0, 0.08);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 221, 0, 0.15);
+}
+
 .donation-label {
   display: inline-block;
   line-height: 1.2;