feat: add WeChat and Alipay support section with QR code toggle functionality

README.md

@@ -283,6 +283,8 @@ If you find this project helpful, consider supporting its development:
 
 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/pixelpawsai)
 
+WeChat & Alipay: [Click to view QR codes](static/images/combined-qr.jpg)
+
 ## 💬 Community
 
 Join our Discord community for support, discussions, and updates:

static/css/components/support-modal.css

@@ -117,9 +117,49 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+/* QR Code section styles */
+.qrcode-toggle {
+    width: 100%;
+    margin-top: var(--space-2);
+    justify-content: center;
+    position: relative;
+}
+
+.qrcode-toggle .toggle-icon {
+    margin-left: 8px;
+    transition: transform 0.3s ease;
+}
+
+.qrcode-toggle.active .toggle-icon {
+    transform: rotate(180deg);
+}
+
+.qrcode-container {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease, opacity 0.3s ease;
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.qrcode-container.show {
+    max-height: 500px;
+    opacity: 1;
+    margin-top: var(--space-3);
+}
+
+.qrcode-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--border-radius-sm);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--lora-border);
+}
+
 .support-footer {
     text-align: center;
-    margin-top: var(--space-1);
     font-style: italic;
     color: var(--text-color);
 }

static/js/components/Header.js

@@ -78,5 +78,33 @@ export class HeaderManager {
           // Handle support panel logic
         });
       }
+
+      // Handle QR code toggle
+      const qrToggle = document.getElementById('toggleQRCode');
+      const qrContainer = document.getElementById('qrCodeContainer');
+      
+      if (qrToggle && qrContainer) {
+          qrToggle.addEventListener('click', function() {
+              qrContainer.classList.toggle('show');
+              qrToggle.classList.toggle('active');
+              
+              const toggleText = qrToggle.querySelector('.toggle-text');
+              if (qrContainer.classList.contains('show')) {
+                  toggleText.textContent = 'Hide QR Codes';
+                  // Add small delay to ensure DOM is updated before scrolling
+                  setTimeout(() => {
+                      const supportModal = document.querySelector('.support-modal');
+                      if (supportModal) {
+                          supportModal.scrollTo({
+                              top: supportModal.scrollHeight,
+                              behavior: 'smooth'
+                          });
+                      }
+                  }, 250);
+              } else {
+                  toggleText.textContent = 'Show QR Codes';
+              }
+          });
+      }
     }
 }

templates/components/modals.html

@@ -229,6 +229,20 @@
                     <span>Support on Ko-fi</span>
                 </a>
             </div>
+
+            <!-- New section for Chinese payment methods -->
+            <div class="support-section">
+                <h3><i class="fas fa-qrcode"></i> WeChat & Alipay Support</h3>
+                <p>For users in China, you can support via WeChat Pay or Alipay:</p>
+                <button class="secondary-btn qrcode-toggle" id="toggleQRCode">
+                    <i class="fas fa-qrcode"></i>
+                    <span class="toggle-text">Show QR Codes</span>
+                    <i class="fas fa-chevron-down toggle-icon"></i>
+                </button>
+                <div class="qrcode-container" id="qrCodeContainer">
+                    <img src="/loras_static/images/combined-qr.jpg" alt="WeChat Pay & Alipay QR Codes" class="qrcode-image">
+                </div>
+            </div>
             
             <div class="support-footer">
                 <p>Thank you for using LoRA Manager! ❤️</p>