Mediusa/FlockRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mediusa
2026-09-12 10:14:41 -07:00
parent adeaab05b5
commit 263d22ce04
4 changed files with 432 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+111 -6
View File
@@ -54,7 +54,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=15">
<link rel="stylesheet" href="css/styles.css?v=16">
</head>
<body>
@@ -104,6 +104,15 @@
<span class="nav-text-desktop">National Directory (1,439)</span>
<span class="nav-text-mobile">Directory</span>
</button>
<button id="nav-support-btn" class="nav-mode-btn nav-support-btn" role="tab" aria-selected="false" title="Help support FlockRadar development ($10, $20, $50)">
<span class="mode-icon support-heart-icon">
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</span>
<span class="nav-text-desktop">Help Support Developer</span>
<span class="nav-text-mobile">Support</span>
</button>
</div>
</div>
@@ -306,6 +315,11 @@
<span>Dashboard Fullscreen</span>
</button>
<button id="btn-drawer-support" class="btn-hud-action btn-support-highlight" title="Help support FlockRadar development ($10, $20, $50)">
<svg class="flock-svg" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<span>Help Support Developer</span>
</button>
<button id="btn-test-camera" class="btn-hud-action" title="Drop a test camera 400ft ahead of your current location to test proximity alerts">
<svg class="flock-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
<span>Place Camera 400ft Ahead</span>
@@ -1146,6 +1160,97 @@
</div>
</dialog>
<!-- ========================================================================
MODAL 6: DEVELOPER SUPPORT & STRIPE INTEGRATION (<dialog>)
======================================================================== -->
<dialog id="support-modal" class="agency-dialog support-dialog" aria-labelledby="support-modal-title">
<div class="modal-header support-modal-header">
<div class="modal-header-titles">
<div class="support-dev-pill">
<span class="support-heart-icon">
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</span>
<span>Independent Developer Support</span>
</div>
<h2 id="support-modal-title" class="modal-agency-name">Help Support This Developer</h2>
<div class="modal-agency-meta">Fuel real-time camera tracking, nationwide scrapers, and independent ALPR transparency</div>
</div>
<button id="support-close-btn" class="close-modal-btn" aria-label="Close modal">
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="modal-body support-modal-body">
<p class="support-intro-text">
FlockRadar is 100% independently coded, researched, and maintained. Your direct support pays for continuous municipal portal scraping, real-time audio radar servers, GPS algorithms, and hardware photo hosting.
</p>
<div class="support-tiers-grid">
<!-- $10 Tier -->
<a href="https://buy.stripe.com/5kQ14ne6j0uG8gPeVveME0p" target="_blank" rel="noopener noreferrer" class="support-tier-card">
<div class="tier-badge-label">Radar Coffee</div>
<div class="tier-amount">$10</div>
<div class="tier-desc">Covers daily portal scrapers and keeps server infrastructure running smoothly.</div>
<div class="btn-support-tier">
<span>Support $10</span>
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</a>
<!-- $20 Tier (Popular) -->
<a href="https://buy.stripe.com/bJeaEX2nB5P02Wv5kVeME0q" target="_blank" rel="noopener noreferrer" class="support-tier-card tier-featured">
<div class="tier-popular-ribbon">Most Popular</div>
<div class="tier-badge-label">Active Contributor</div>
<div class="tier-amount">$20</div>
<div class="tier-desc">Directly funds real-time audio radar alerts, walking/driving GPS tracking, and mobile updates.</div>
<div class="btn-support-tier btn-featured">
<span>Support $20</span>
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</a>
<!-- $50 Tier -->
<a href="https://buy.stripe.com/aFabJ12nB1yK8gPeVveME0r" target="_blank" rel="noopener noreferrer" class="support-tier-card">
<div class="tier-badge-label">Champion Sponsor</div>
<div class="tier-amount">$50</div>
<div class="tier-desc">Sponsors nationwide ALPR expansion, verified camera hardware proof storage, and full-time coding.</div>
<div class="btn-support-tier">
<span>Support $50</span>
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</a>
<!-- Custom Amount -->
<a href="https://buy.stripe.com/bJe9AT1jxfpA2Wv28JeME0s" target="_blank" rel="noopener noreferrer" class="support-tier-card tier-custom">
<div class="tier-badge-label">Custom Amount</div>
<div class="tier-amount">Any $</div>
<div class="tier-desc">Choose your own custom contribution amount to support development ($5 min).</div>
<div class="btn-support-tier btn-custom">
<span>Choose Amount</span>
<svg class="flock-svg flock-svg-xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</a>
</div>
<div class="support-security-footer">
<div class="security-badges-row">
<div class="sec-item">
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<span>Secured by <strong>Stripe</strong></span>
</div>
<div class="sec-item">
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
<span>Apple Pay & Google Pay Supported</span>
</div>
<div class="sec-item">
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 14 14"/></svg>
<span>Instant 1-Click Contribution</span>
</div>
</div>
</div>
</div>
</dialog>
<!-- Hidden Native Camera / File Input for Mobile Evidence Snapping -->
<input type="file" id="camera-photo-file-input" accept="image/*" capture="environment" style="display: none;">
@@ -1156,11 +1261,11 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Data & Application Logic with Cache Busting -->
<script src="data/portals.js?v=15"></script>
<script src="js/icons.js?v=15"></script>
<script src="js/auth.js?v=15"></script>
<script src="js/radar.js?v=15"></script>
<script src="js/app.js?v=15"></script>
<script src="data/portals.js?v=16"></script>
<script src="js/icons.js?v=16"></script>
<script src="js/auth.js?v=16"></script>
<script src="js/radar.js?v=16"></script>
<script src="js/app.js?v=16"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>