From 26e741657fee08ac1f7942ba635f7db173babca4 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Mon, 5 Jan 2026 08:49:48 +0800
Subject: [PATCH] Add Buy Me a Coffee support section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added Buy Me a Coffee badges and links to READMEs, welcome modal, and app footer to allow users to support the project development.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 README.md                                    |  8 ++++++++
 README.zh-TW.md                              |  8 ++++++++
 src/components/App/App.tsx                   | 10 ++++++++++
 src/components/WelcomeModal/WelcomeModal.tsx | 18 ++++++++++++++++++
 4 files changed, 44 insertions(+)

diff --git a/README.md b/README.md
index ed6aea1..21afc8f 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,14 @@
 
 A professional pedigree (family tree) drawing tool for genetic counselors and bioinformatics professionals.
 
+## ☕ Support this project
+
+If you find this pedigree drawing tool helpful for research, teaching, or clinical work, consider supporting its development.
+
+<a href="https://buymeacoffee.com/gbanyan" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+
+👉 Buy me a coffee: https://buymeacoffee.com/gbanyan
+
 ## Online Demo
 
 https://gbanyan.github.io/pedigree-draw/
diff --git a/README.zh-TW.md b/README.zh-TW.md
index 9bb8af4..8816633 100644
--- a/README.zh-TW.md
+++ b/README.zh-TW.md
@@ -4,6 +4,14 @@
 
 專為遺傳諮詢師和生物資訊專業人員設計的 Pedigree（家族樹）繪圖工具。
 
+## ☕ 支持這個專案
+
+如果您覺得這個家譜繪圖工具對您的研究、教學或臨床工作有幫助，歡迎支持它的開發。
+
+<a href="https://buymeacoffee.com/gbanyan" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+
+👉 請我喝杯咖啡：https://buymeacoffee.com/gbanyan
+
 ## 線上 Demo
 
 https://gbanyan.github.io/pedigree-draw/
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 9347269..b0371f5 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -122,6 +122,16 @@ export function App() {
       <footer className={styles.footer}>
         <span>Pedigree Draw - For genetic counselors and bioinformatics professionals</span>
         <span>NSGC Standard Symbols</span>
+        <span>
+          <a
+            href="https://buymeacoffee.com/gbanyan"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: '#FFDD00', textDecoration: 'none', fontWeight: '500' }}
+          >
+            ☕ Support this project
+          </a>
+        </span>
       </footer>
 
       {showWelcome && <WelcomeModal onClose={handleCloseWelcome} />}
diff --git a/src/components/WelcomeModal/WelcomeModal.tsx b/src/components/WelcomeModal/WelcomeModal.tsx
index 5ad5a92..10ad379 100644
--- a/src/components/WelcomeModal/WelcomeModal.tsx
+++ b/src/components/WelcomeModal/WelcomeModal.tsx
@@ -30,6 +30,8 @@ export function WelcomeModal({ onClose }: WelcomeModalProps) {
     ],
     privacyTitle: '隱私政策',
     privacyContent: '本網站不搜集任何使用者資料，也不儲存任何資料。所有操作僅在您的瀏覽器中進行，關閉頁面後資料即消失。',
+    supportTitle: '☕ 支持這個專案',
+    supportContent: '如果您覺得這個工具對您的研究、教學或臨床工作有幫助，歡迎支持它的開發。',
     buttonText: '我了解，開始使用',
   } : {
     title: 'Welcome to Pedigree Draw',
@@ -41,6 +43,8 @@ export function WelcomeModal({ onClose }: WelcomeModalProps) {
     ],
     privacyTitle: 'Privacy Policy',
     privacyContent: 'This website does not collect any user data or store any information. All operations are performed locally in your browser. Data will be lost when you close the page.',
+    supportTitle: '☕ Support This Project',
+    supportContent: 'If you find this tool helpful for research, teaching, or clinical work, consider supporting its development.',
     buttonText: 'I Understand, Let\'s Start',
   };
 
@@ -66,6 +70,20 @@ export function WelcomeModal({ onClose }: WelcomeModalProps) {
           <p className={styles.paragraph}>{content.privacyContent}</p>
         </section>
 
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>{content.supportTitle}</h2>
+          <p className={styles.paragraph}>{content.supportContent}</p>
+          <div style={{ textAlign: 'center', marginTop: '12px' }}>
+            <a href="https://buymeacoffee.com/gbanyan" target="_blank" rel="noopener noreferrer">
+              <img
+                src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+                alt="Buy Me A Coffee"
+                style={{ height: '50px', width: 'auto', borderRadius: '8px' }}
+              />
+            </a>
+          </div>
+        </section>
+
         <button className={styles.button} onClick={handleClose}>
           {content.buttonText}
         </button>