fix: add terms/privacy checkbox to download modal, button disabled until checked

public/assets/js/main.js

@@ -244,11 +244,18 @@ function closeUserMenu(e) {
     }
 }
 
+function toggleDownloadBtn() {
+    const cb = document.getElementById('agreeTerms');
+    document.getElementById('downloadConfirmBtn').disabled = !cb.checked;
+}
+
 function showDownloadModal() {
+    const cb = document.getElementById('agreeTerms');
+    cb.checked = false;
+    document.getElementById('downloadConfirmBtn').disabled = true;
     document.getElementById('downloadModal').style.display = 'flex';
     document.getElementById('downloadProgressWrap').style.display = 'none';
     document.getElementById('downloadModalFooter').style.display = 'flex';
-    document.getElementById('downloadConfirmBtn').disabled = false;
     document.getElementById('downloadConfirmBtn').innerHTML = '<i class="fas fa-download"></i> Download APK';
     document.getElementById('downloadProgressBar').style.width = '0%';
     document.getElementById('downloadPercent').textContent = '0%';

views/layouts/main.php

@@ -193,6 +193,11 @@ if (!isset($user) || $user === null) {
                         <li><i class="fas fa-save" style="width:18px;text-align:center;margin-right:0.4rem;font-size:0.75rem"></i> Storage for offline data cache</li>
                     </ul>
                 </div>
+                <label class="checkbox-label" style="margin-bottom:0.75rem;font-size:0.82rem">
+                    <input type="checkbox" id="agreeTerms" onchange="toggleDownloadBtn()">
+                    I agree to the <a href="/terms" target="_blank" style="color:var(--accent);text-decoration:underline">Terms &amp; Conditions</a>
+                    and <a href="/privacy" target="_blank" style="color:var(--accent);text-decoration:underline">Privacy Policy</a>
+                </label>
                 <div id="downloadProgressWrap" style="display:none">
                     <div style="display:flex;justify-content:space-between;font-size:0.8rem;color:var(--text-muted);margin-bottom:0.3rem">
                         <span>Downloading...</span>
@@ -205,7 +210,7 @@ if (!isset($user) || $user === null) {
             </div>
             <div class="modal-footer" id="downloadModalFooter">
                 <button class="btn btn-secondary" onclick="closeDownloadModal()">Cancel</button>
-                <button class="btn btn-primary" id="downloadConfirmBtn" onclick="startDownload()">
+                <button class="btn btn-primary" id="downloadConfirmBtn" onclick="startDownload()" disabled>
                     <i class="fas fa-download"></i> Download APK
                 </button>
             </div>