Skip to content

Commit ecbd132

Browse files
HhhpraiseHhhpraise
committed
Revamp QR code payment modal for mobile optimization
Redesigned the QR code payment modal for improved mobile usability, including simplified payment options, clearer instructions, and touch-friendly UI. Enhanced script.js to auto-detect device/browser, use deep links for Alipay/WeChat, and streamline modal logic. Updated style.css with responsive and accessibility-focused styles for mobile and touch devices. Updated wechat-qr.png image.
1 parent 15a3fc3 commit ecbd132

4 files changed

Lines changed: 348 additions & 362 deletions

File tree

‎images/donate/wechat-qr.png‎

-34.5 KB
Loading

‎index.html‎

Lines changed: 75 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -790,104 +790,91 @@ <h3><i class="fas fa-shield-alt"></i> Privacy Policy</h3>
790790
<div class="modal hidden" id="qrModal">
791791
<div class="modal-content">
792792
<div class="modal-header">
793-
<h3><i class="fas fa-qrcode"></i> Support via QR Code</h3>
793+
<h3><i class="fas fa-qrcode"></i> Support Developer</h3>
794794
<button class="modal-close" id="closeQR">&times;</button>
795795
</div>
796796
<div class="modal-body">
797-
<!-- Mobile App Detection -->
798-
<div class="app-detection hidden" id="appDetection">
799-
<div class="detection-content">
800-
<i class="fas fa-mobile-alt"></i>
801-
<div>
802-
<h4>Opening Payment App...</h4>
803-
<p id="detectionMessage">Attempting to open payment app...</p>
804-
<button class="btn-outline" id="showQRCodeAnyway">Show QR Code Instead</button>
805-
</div>
806-
</div>
797+
<div class="payment-options">
798+
<button class="payment-option active" data-payment="alipay">
799+
<i class="fab fa-alipay"></i>
800+
<span>Alipay (Payment)</span>
801+
</button>
802+
<button class="payment-option" data-payment="wechat">
803+
<i class="fab fa-weixin"></i>
804+
<span>WeChat (Add Contact)</span>
805+
</button>
807806
</div>
808807

809-
<!-- QR Code Display -->
810-
<div class="qr-display" id="qrDisplay">
811-
<div class="payment-options">
812-
<div class="payment-option active" data-payment="alipay">
813-
<i class="fab fa-alipay"></i>
814-
<span>Alipay</span>
815-
</div>
816-
<div class="payment-option" data-payment="wechat">
817-
<i class="fab fa-weixin"></i>
818-
<span>WeChat</span>
819-
</div>
820-
</div>
821-
822-
<div class="qr-content">
823-
<!-- Alipay QR -->
824-
<div class="qr-section active" id="alipaySection">
825-
<div class="qr-image-container">
826-
<img src="images/donate/alipay-qr.png" alt="Alipay QR Code" class="qr-image">
827-
<div class="qr-overlay">
828-
<i class="fas fa-expand-alt"></i>
829-
<span>Click to enlarge</span>
830-
</div>
831-
</div>
832-
<div class="qr-instructions">
833-
<h5><i class="fab fa-alipay"></i> Alipay Instructions</h5>
834-
<ol>
835-
<li>Open <strong>Alipay app</strong> on your phone</li>
836-
<li>Tap <strong>"Scan"</strong> (扫一扫)</li>
837-
<li>Point camera at this QR code</li>
838-
<li>Enter amount (any amount is appreciated!)</li>
839-
<li>Add message: <code>Support Citation Fetcher</code></li>
840-
<li>Complete payment</li>
841-
</ol>
842-
<div class="qr-mobile-action">
843-
<button class="btn-primary" id="openAlipay">
844-
<i class="fab fa-alipay"></i> Open Alipay App
845-
</button>
846-
</div>
847-
</div>
848-
</div>
849-
850-
<!-- WeChat QR -->
851-
<div class="qr-section" id="wechatSection">
852-
<div class="qr-image-container">
853-
<img src="images/donate/wechat-qr.png" alt="WeChat QR Code" class="qr-image">
854-
<div class="qr-overlay">
855-
<i class="fas fa-expand-alt"></i>
856-
<span>Click to enlarge</span>
857-
</div>
808+
<div class="qr-content">
809+
<!-- Alipay QR -->
810+
<div class="qr-section active" id="alipaySection">
811+
<div class="qr-image-container">
812+
<img src="images/donate/alipay-qr.png" alt="Alipay QR Code for payment" class="qr-image">
813+
<div class="qr-overlay">
814+
<i class="fas fa-expand-alt"></i>
815+
<span>Click to enlarge</span>
816+
</div>
817+
</div>
818+
<div class="qr-instructions">
819+
<h5><i class="fab fa-alipay"></i> Alipay Payment</h5>
820+
<ol>
821+
<li><strong>Option A:</strong> Click "Open Alipay" button below</li>
822+
<li><strong>Option B:</strong> Open Alipay app → Scan → Point at QR code</li>
823+
<li>Enter any amount (every bit helps!)</li>
824+
<li>Add note: <code>Support Citation Fetcher</code></li>
825+
</ol>
826+
<div class="qr-mobile-action">
827+
<button class="btn-primary" id="openAlipay">
828+
<i class="fab fa-alipay"></i> Open Alipay App
829+
</button>
858830
</div>
859-
<div class="qr-instructions">
860-
<h5><i class="fab fa-weixin"></i> WeChat Instructions</h5>
861-
<ol>
862-
<li>Open <strong>WeChat app</strong> on your phone</li>
863-
<li>Go to <strong>"Me" → "Wallet" → "Money"</strong></li>
864-
<li>Tap <strong>"Scan"</strong> (扫一扫)</li>
865-
<li>Scan this QR code with camera</li>
866-
<li>Enter any amount you'd like to send</li>
867-
<li>Add note: <code>Support developer</code></li>
868-
</ol>
869-
<div class="qr-mobile-action">
870-
<button class="btn-primary" id="openWeChat">
871-
<i class="fab fa-weixin"></i> Open WeChat App
872-
</button>
873-
</div>
831+
<p class="mobile-note">
832+
<i class="fas fa-mobile-alt"></i>
833+
On mobile? The app will open automatically
834+
</p>
835+
</div>
836+
</div>
837+
838+
<!-- WeChat QR -->
839+
<div class="qr-section" id="wechatSection">
840+
<div class="qr-image-container">
841+
<img src="images/donate/wechat-qr.png" alt="WeChat QR Code to add developer" class="qr-image">
842+
<div class="qr-overlay">
843+
<i class="fas fa-expand-alt"></i>
844+
<span>Click to enlarge</span>
845+
</div>
846+
</div>
847+
<div class="qr-instructions">
848+
<h5><i class="fab fa-weixin"></i> WeChat Contact</h5>
849+
<ol>
850+
<li><strong>Option A:</strong> Click "Open WeChat" button below</li>
851+
<li><strong>Option B:</strong> Open WeChat app → Scan → Point at QR code</li>
852+
<li>Add me as contact</li>
853+
<li>Send message: <code>Support developer</code></li>
854+
<li>I'll provide payment options</li>
855+
</ol>
856+
<div class="qr-mobile-action">
857+
<button class="btn-primary" id="openWeChat">
858+
<i class="fab fa-weixin"></i> Open WeChat App
859+
</button>
874860
</div>
861+
<p class="mobile-note">
862+
<i class="fas fa-mobile-alt"></i>
863+
On mobile? The app will open automatically
864+
</p>
875865
</div>
876866
</div>
867+
</div>
877868

878-
<div class="qr-footer">
879-
<div class="support-note">
880-
<i class="fas fa-heart"></i>
881-
<span>Your support helps improve Citation Fetcher for everyone!</span>
882-
</div>
883-
<div class="qr-actions">
884-
<button class="btn-outline" id="saveQR">
885-
<i class="fas fa-download"></i> Save QR Code
886-
</button>
887-
<button class="btn-outline" id="copyPaymentLink">
888-
<i class="fas fa-copy"></i> Copy Payment Link
889-
</button>
890-
</div>
869+
<div class="qr-footer">
870+
<div class="support-note">
871+
<i class="fas fa-heart"></i>
872+
<span>Your support helps improve Citation Fetcher for everyone!</span>
873+
</div>
874+
<div class="qr-actions">
875+
<button class="btn-outline" id="saveQR">
876+
<i class="fas fa-download"></i> Save QR Code
877+
</button>
891878
</div>
892879
</div>
893880
</div>

0 commit comments

Comments
 (0)