Add Buy Me a Coffee button to donation page

[Copilot]

• Understand the existing donation page structure and configuration system
• Create a new feature branch feature/buymeacoffee-button
• Add buyMeACoffeeUsername configuration variable to config files (config.js, config.template.js, docker-entrypoint.sh)
• Add .env.example documentation for the new variable
• Modify donation.html to display "Buy Me a Coffee" button with official logo when username is configured
• Add username validation (alphanumeric, underscores, hyphens) and URL encoding for security
• Add a hint text explaining that BMC donations go directly to the owner (not to other organizations)
• Add CSS styles for the new yellow button with official BMC cup icon
• Update README.md documentation (parameter overview, example .env, and screenshot)
• Test the changes by viewing the donation page
• Take a screenshot of the UI changes
• Run code review and address feedback
• Run CodeQL security scan (no alerts)

Original prompt

ICh möchte auf der Spenden Seite gerne die Möglichkeit geben, neben der Paypal Spenden Möglichkeit, auch noch ein "Buy me a Coffee" Button zu implementieren.

Über eine Variable soll der Username von https://buymeacoffee.com angegeben werden.
Sollte diese Variable befüllt sein, sollen ein entsprechender Button mit buymeacoffee Icon erscheinen.

Außerdem sollte ein kleiner Hinweistext auftauchen, in dem Kurz dargestellt wird, dass dies mir direkt zu gute kommt und nicht weiter an andere Vereine oder Organisationen gereicht wird.

Um diese neue Funktion zu implementieren, erstelle einen neuen Branch

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[TimUx]

@copilot kannst du mir einen Screenshot der donations Seite erstellen, in welchem simuliert wird, dass sowohl paypal als auch Buymeacoffee definiert ist

[Copilot]

@copilot kannst du mir einen Screenshot der donations Seite erstellen, in welchem simuliert wird, dass sowohl paypal als auch Buymeacoffee definiert ist

Hier ist der Screenshot der Spendenseite mit beiden Optionen (PayPal und Buy Me a Coffee) konfiguriert:

Die Konfiguration verwendet:

• donationPoolId: 'abc123' (PayPal)
• buyMeACoffeeUsername: 'example' (Buy Me a Coffee)

[TimUx]

@copilot Bitte siche dir das offizielle "Buy me a Coffee" Logo / Icon im Internet und füge es im Button ein.

Beim Hinweis sollte noch klarer hervorkommen, dass (nur) die "Buy me a Coffee" Spende an mich direkt geht.

[Copilot]

@copilot Bitte siche dir das offizielle "Buy me a Coffee" Logo / Icon im Internet und füge es im Button ein.

Beim Hinweis sollte noch klarer hervorkommen, dass (nur) die "Buy me a Coffee" Spende an ...

Umgesetzt in c2bcd6d:

• Offizielles Buy Me a Coffee Logo (Kaffeetasse) als SVG-Icon im Button
• Hinweistext angepasst: Jetzt klar ersichtlich, dass nur „Buy me a Coffee"-Spenden direkt an dich gehen

[TimUx]

@copilot In der README wird im Kapitel "Konfiguration per .env" alle Variablen aufgeführt. Hier fehlt die neue Buy me Variable

[Copilot]

@copilot In der README wird im Kapitel "Konfiguration per .env" alle Variablen aufgeführt. Hier fehlt die neue Buy me Variable

Ergänzt in 30a2c67 – BUYMEACOFFEE_USERNAME=example ist jetzt im Beispiel .env unter "Donation Settings" aufgeführt.

[TimUx]

@copilot Kannst du in der Readme noch den Screenshot der aktuellen Donations page einfügen und den aktuellen ersetzten?

[Copilot]

@copilot Kannst du in der Readme noch den Screenshot der aktuellen Donations page einfügen und den aktuellen ersetzten?

Erledigt in f214755 – Der Screenshot in der README zeigt jetzt die aktuelle Spendenseite mit beiden Buttons (PayPal + Buy Me a Coffee mit offiziellem Logo).