Improve donate page interactions

Author: halx99

assets/js/donate.js

@@ -215,7 +215,7 @@ function initEventHandlers() {
     }
     const is_custom = selected.id === 'custom';
     const amount_str = is_custom ? document.querySelector('.amount-input').value : selected.value;
-    const is_monthly = is_custom ? document.querySelector('input[name="custom-cycle"]:checked').value === 'monthly' : true;
+    const is_monthly = is_custom ? document.getElementById('custom-montly').checked : true;
     const is_corporate = document.getElementById("btn-corporate-tiers").classList.contains("active");
     const channel = document.getElementById("channel-options").value;
 
@@ -328,7 +328,7 @@ function initEventHandlers() {
   // Auto select Custom card when interacting with its inputs
   const customRadio = document.getElementById("custom");
   const customInputs = document.querySelectorAll(
-    ".amount-input, input[name='custom-cycle']"
+    ".amount-input, input[id='custom-montly']"
   );
 
   customInputs.forEach(el => {

donate/index.html

@@ -267,23 +267,19 @@ <h3 class="tier-title">Platinum</h3>
           <input id="custom" class="sponsor-radio" type="radio" name="sponsor">
           <div class="sponsor-card">
             <h3>Custom</h3>
-            <div class="amount-wrapper">
-              <input id="amount-input" class="amount-input" inputmode="decimal"
-                placeholder="Enter amount (USD)" min="1"
-                step="1" required>
-              <div id="amount-prefix" class="currency-symbol">$</div>
-              <div id="amount-suffix" class="currency-symbol">USD</div>
-            </div>
-
-            <!-- Payment cycle selector -->
-            <div class="cycle-wrapper">
-              <label class="cycle-option">
-                <input type="radio" name="custom-cycle" value="monthly" checked>
-                Monthly
-              </label>
-              <label class="cycle-option">
-                <input type="radio" name="custom-cycle" value="onetime">
-                One-time
+            <div class="d-flex align-items-center gap-3 mb-2">
+              <div class="amount-wrapper">
+                <input id="amount-input" class="amount-input"
+                  inputmode="decimal"
+                  placeholder="Enter amount (USD)" min="1"
+                  step="1" required>
+                <div id="amount-prefix" class="currency-symbol">$</div>
+                <div id="amount-suffix" class="currency-symbol">USD</div>
+              </div>
+              <!-- Monthly checkbox -->
+              <label class="checkbox-label mb-0">
+                <input type="checkbox" id="custom-montly" checked>
+                <span class="checkbox"></span>Monthly
               </label>
             </div>
           </div>
@@ -522,9 +518,12 @@ <h2 class="accordion-header" id="faqHeading3">
               <div class="accordion-body">
                 At present, Axmol Engine does not operate its own nonprofit
                 entity.
-                Instead, we rely on the <strong><a href="https://opencollective.com/opensource">Open Source Collective</a>
+                Instead, we rely on the <strong><a
+                    href="https://opencollective.com/opensource">Open Source
+                    Collective</a>
                   (OSC)</strong>, a
-                U.S.-registered 501(c)(6) nonprofit fiscal host dedicated to supporting
+                U.S.-registered 501(c)(6) nonprofit fiscal host dedicated to
+                supporting
                 open source
                 projects.<br><br>
                 By sponsoring Axmol through OSC, Corporate contributors benefit