From d9b8b80eee365a8133369714f0518ae866f1ce70 Mon Sep 17 00:00:00 2001
From: Brian Smith <dronesmiths2@gmail.com>
Date: Sat, 12 Sep 2026 10:17:01 -0700
Subject: [PATCH] feat(stripe): add /mo recurring subscription for developer
 growth support (v17)

---
 css/styles.css | 153 ++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html     |  45 ++++++++++++---
 sw.js          |  26 ++++-----
 3 files changed, 202 insertions(+), 22 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 285f62a..0e2f5ab 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3269,7 +3269,158 @@ body {
   font-size: 0.92rem;
   line-height: 1.6;
   color: var(--text-muted);
-  margin-bottom: 24px;
+  margin-bottom: 20px;
+}
+
+/* Monthly Subscription Banner */
+.monthly-sub-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.15), rgba(15, 23, 42, 0.9));
+  border: 1.5px solid rgba(16, 185, 129, 0.45);
+  border-radius: 18px;
+  padding: 22px 24px;
+  text-decoration: none;
+  color: inherit;
+  margin-bottom: 22px;
+  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.15), 0 0 20px rgba(6, 182, 212, 0.1);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.monthly-sub-banner:hover {
+  transform: translateY(-3px);
+  border-color: #10b981;
+  box-shadow: 0 14px 36px rgba(16, 185, 129, 0.25), 0 0 25px rgba(6, 182, 212, 0.2);
+}
+
+.monthly-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(16, 185, 129, 0.2);
+  border: 1px solid #10b981;
+  color: #34d399;
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 3px 10px;
+  border-radius: 9999px;
+  margin-bottom: 8px;
+}
+
+.pulse-sub-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 8px #10b981;
+  animation: pulseGps 1.8s infinite;
+}
+
+.monthly-title {
+  font-family: var(--font-heading);
+  font-size: 1.35rem;
+  font-weight: 800;
+  color: #ffffff;
+  margin-bottom: 6px;
+}
+
+.monthly-desc {
+  font-size: 0.82rem;
+  color: #94a3b8;
+  line-height: 1.5;
+  max-width: 460px;
+}
+
+.monthly-sub-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.monthly-price-wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.monthly-price {
+  font-family: var(--font-heading);
+  font-size: 2.3rem;
+  font-weight: 800;
+  color: #ffffff;
+  line-height: 1;
+}
+
+.monthly-cadence {
+  font-size: 0.85rem;
+  color: #6ee7b7;
+  font-weight: 700;
+}
+
+.btn-subscribe-monthly {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 0.9rem;
+  padding: 11px 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.monthly-sub-banner:hover .btn-subscribe-monthly {
+  background: linear-gradient(135deg, #34d399, #10b981);
+  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.6);
+  transform: scale(1.02);
+}
+
+.support-divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 18px 0 20px;
+  color: #64748b;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.support-divider::before,
+.support-divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.support-divider span {
+  padding: 0 14px;
+}
+
+@media (max-width: 680px) {
+  .monthly-sub-banner {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+  .monthly-sub-right {
+    align-items: stretch;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 .support-tiers-grid {
diff --git a/index.html b/index.html
index 3dc069b..d5c82dc 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,7 @@
   <meta name="apple-mobile-web-app-title" content="FlockRadar">
   
   <!-- Main Stylesheet -->
-  <link rel="stylesheet" href="css/styles.css?v=16">
+  <link rel="stylesheet" href="css/styles.css?v=17">
 </head>
 <body>
 
@@ -104,7 +104,7 @@
             <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)">
+          <button id="nav-support-btn" class="nav-mode-btn nav-support-btn" role="tab" aria-selected="false" title="Help support developer ($10/mo, $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"/>
@@ -315,7 +315,7 @@
         <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)">
+      <button id="btn-drawer-support" class="btn-hud-action btn-support-highlight" title="Help support developer ($10/mo, $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>
@@ -1185,6 +1185,35 @@
         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>
 
+      <!-- Recurring Monthly Growth Sustainer Banner Card -->
+      <a href="https://buy.stripe.com/dRmeVdbYbcdoeFd9BbeME0t" target="_blank" rel="noopener noreferrer" class="monthly-sub-banner">
+        <div class="monthly-sub-left">
+          <div class="monthly-badge">
+            <span class="pulse-sub-dot"></span>
+            <span>Recurring Monthly Support</span>
+          </div>
+          <div class="monthly-title">Monthly Growth Sustainer</div>
+          <div class="monthly-desc">
+            Ongoing monthly support to power server infrastructure, continuous municipal portal scraping, and app development. Cancel anytime with 1 click.
+          </div>
+        </div>
+        <div class="monthly-sub-right">
+          <div class="monthly-price-wrap">
+            <span class="monthly-price">$10</span>
+            <span class="monthly-cadence">/ month</span>
+          </div>
+          <div class="btn-subscribe-monthly">
+            <svg class="flock-svg flock-svg-xs" 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>Subscribe $10/mo</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>
+        </div>
+      </a>
+
+      <div class="support-divider">
+        <span>OR CHOOSE A ONE-TIME CONTRIBUTION</span>
+      </div>
+
       <div class="support-tiers-grid">
         <!-- $10 Tier -->
         <a href="https://buy.stripe.com/5kQ14ne6j0uG8gPeVveME0p" target="_blank" rel="noopener noreferrer" class="support-tier-card">
@@ -1261,11 +1290,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=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>
+  <script src="data/portals.js?v=17"></script>
+  <script src="js/icons.js?v=17"></script>
+  <script src="js/auth.js?v=17"></script>
+  <script src="js/radar.js?v=17"></script>
+  <script src="js/app.js?v=17"></script>
 
   <!-- Service Worker Instant Cache Invalidation -->
   <script>
diff --git a/sw.js b/sw.js
index 2fd7512..1c1d004 100644
--- a/sw.js
+++ b/sw.js
@@ -1,20 +1,20 @@
 // Service Worker for FlockRadar Offline Driving & Live Updates
-const CACHE_NAME = 'flockradar-v16';
+const CACHE_NAME = 'flockradar-v17';
 const ASSETS_TO_CACHE = [
   './',
   './index.html',
-  './css/styles.css?v=16',
-  './js/icons.js?v=16',
-  './js/app.js?v=16',
-  './js/auth.js?v=16',
-  './js/radar.js?v=16',
-  './data/portals.js?v=16',
-  './favicon.svg?v=16',
-  './favicon.ico?v=16',
-  './apple-touch-icon.png?v=16',
-  './icon-192.png?v=16',
-  './icon-512.png?v=16',
-  './og-image.png?v=16',
+  './css/styles.css?v=17',
+  './js/icons.js?v=17',
+  './js/app.js?v=17',
+  './js/auth.js?v=17',
+  './js/radar.js?v=17',
+  './data/portals.js?v=17',
+  './favicon.svg?v=17',
+  './favicon.ico?v=17',
+  './apple-touch-icon.png?v=17',
+  './icon-192.png?v=17',
+  './icon-512.png?v=17',
+  './og-image.png?v=17',
   './assets/img/logo.svg',
   './assets/img/flock_pole_cam_palmdale.jpg',
   './manifest.json'