diff --git a/README.md b/README.md index aec98bdb..47f34919 100644 --- a/README.md +++ b/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](https://raw.githubusercontent.com/willmiao/ComfyUI-Lora-Manager/main/static/images/combined-qr.webp) + ## 💬 Community Join our Discord community for support, discussions, and updates: diff --git a/static/css/components/support-modal.css b/static/css/components/support-modal.css index c9f75992..b16e3cbd 100644 --- a/static/css/components/support-modal.css +++ b/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); } diff --git a/static/images/combined-qr.webp b/static/images/combined-qr.webp new file mode 100644 index 00000000..f68eb2dc Binary files /dev/null and b/static/images/combined-qr.webp differ diff --git a/static/js/components/Header.js b/static/js/components/Header.js index edba15e5..c6bb5e20 100644 --- a/static/js/components/Header.js +++ b/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'; + } + }); + } } } diff --git a/templates/components/modals.html b/templates/components/modals.html index e3f1946e..0e3c4ee1 100644 --- a/templates/components/modals.html +++ b/templates/components/modals.html @@ -229,6 +229,20 @@ Support on Ko-fi + + +
+

WeChat & Alipay Support

+

For users in China, you can support via WeChat Pay or Alipay:

+ +
+ WeChat Pay & Alipay QR Codes +
+