feat(support): add Stripe developer support tab & modal with , , , and custom tiers (v16)

js/radar.js

@@ -154,11 +154,15 @@
     // Modals
     loginModal: document.getElementById('login-modal'),
     reportModal: document.getElementById('report-modal'),
+    supportModal: document.getElementById('support-modal'),
     loginForm: document.getElementById('login-form'),
     reportForm: document.getElementById('report-form'),
     loginCloseBtn: document.getElementById('login-close-btn'),
     reportCloseBtn: document.getElementById('report-close-btn'),
+    supportCloseBtn: document.getElementById('support-close-btn'),
     loginGuestBtn: document.getElementById('login-guest-btn'),
+    navSupportBtn: document.getElementById('nav-support-btn'),
+    btnDrawerSupport: document.getElementById('btn-drawer-support'),
 
     // Hardware Proof & Verification Modals
     cameraDetailModal: document.getElementById('camera-detail-modal'),
@@ -228,6 +232,7 @@
     setupHud();
     bindEvents();
     updateProfileDisplay();
+    checkSupporterReturn();
 
     // Auto-detect real location immediately (Palmdale / GPS)
     attemptAutoLocate();
@@ -1412,22 +1417,58 @@
   // --- USER PROFILE & LOGIN MODAL ---
   function updateProfileDisplay() {
     const user = window.FlockAuth ? window.FlockAuth.getUser() : null;
+    const isSupporter = localStorage.getItem('flock_is_supporter') === 'true';
+    const supporterBadge = isSupporter ? `<span class="verified-supporter-badge" title="Verified Supporter">⭐ Supporter</span>` : '';
+
     if (user && user.isLoggedIn) {
       const carSvg = window.FlockIcons ? FlockIcons.car('flock-svg-sm') : '';
       el.userProfilePill.innerHTML = `
         <span class="avatar-dot">${carSvg}</span>
         <span>${escapeHtml(user.username)}</span>
         <span class="points-badge">${user.points} pts</span>
+        ${supporterBadge}
       `;
     } else {
       const userSvg = `<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
       el.userProfilePill.innerHTML = `
         <span class="avatar-dot">${userSvg}</span>
         <span>Driver Login</span>
+        ${supporterBadge}
       `;
     }
   }
 
+  function checkSupporterReturn() {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('support') === 'success') {
+      localStorage.setItem('flock_is_supporter', 'true');
+      updateProfileDisplay();
+      setTimeout(() => {
+        playRadarChime();
+        speakVoiceAlert('Thank you so much for supporting FlockRadar development!');
+        showToast('🎉 Thank you for your contribution! You are now a Verified Supporter.');
+      }, 500);
+      window.history.replaceState({}, document.title, window.location.pathname);
+    }
+  }
+
+  // --- DEVELOPER SUPPORT MODAL ---
+  function openSupportModal() {
+    if (typeof el.supportModal.showModal === 'function') {
+      el.supportModal.showModal();
+    } else {
+      el.supportModal.setAttribute('open', '');
+    }
+  }
+
+  function closeSupportModal() {
+    if (typeof el.supportModal.close === 'function') {
+      el.supportModal.close();
+    } else {
+      el.supportModal.removeAttribute('open');
+    }
+  }
+
   function openLoginModal() {
     const user = window.FlockAuth ? window.FlockAuth.getUser() : null;
     if (user && user.isLoggedIn) {
@@ -2263,6 +2304,22 @@
     // Modal Close buttons
     el.loginCloseBtn.addEventListener('click', closeLoginModal);
     el.reportCloseBtn.addEventListener('click', closeReportModal);
+    if (el.supportCloseBtn) el.supportCloseBtn.addEventListener('click', closeSupportModal);
+
+    // Developer Support Modal Triggers
+    if (el.navSupportBtn) {
+      el.navSupportBtn.addEventListener('click', openSupportModal);
+    }
+    if (el.btnDrawerSupport) {
+      el.btnDrawerSupport.addEventListener('click', () => {
+        openSupportModal();
+      });
+    }
+    if (el.supportModal) {
+      el.supportModal.addEventListener('click', e => {
+        if (e.target === el.supportModal) closeSupportModal();
+      });
+    }
 
     // Global listener for camera & portal inspection: NEVER switches views away from radar!
     window.inspectPortal = function(slug) {