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

feat(stripe): add /mo recurring subscription for developer growth support (v17)

Browse Source
This commit is contained in:
Mediusa
2026-09-12 10:17:01 -07:00
parent 263d22ce04
commit d9b8b80eee
3 changed files with 202 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+152 -1
View File
@@ -3269,7 +3269,158 @@ body {
font-size: 0.92rem; font-size: 0.92rem;
line-height: 1.6; line-height: 1.6;
color: var(--text-muted); 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 { .support-tiers-grid {
index.html
+37 -8
View File
@@ -54,7 +54,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar"> <meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet --> <!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=16"> <link rel="stylesheet" href="css/styles.css?v=17">
</head> </head>
<body> <body>
@@ -104,7 +104,7 @@
<span class="nav-text-desktop">National Directory (1,439)</span> <span class="nav-text-desktop">National Directory (1,439)</span>
<span class="nav-text-mobile">Directory</span> <span class="nav-text-mobile">Directory</span>
</button> </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"> <span class="mode-icon support-heart-icon">
<svg class="flock-svg flock-svg-sm" viewBox="0 0 24 24" fill="currentColor" stroke="none"> <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"/> <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> <span>Dashboard Fullscreen</span>
</button> </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> <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> <span>Help Support Developer</span>
</button> </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. 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> </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"> <div class="support-tiers-grid">
<!-- $10 Tier --> <!-- $10 Tier -->
<a href="https://buy.stripe.com/5kQ14ne6j0uG8gPeVveME0p" target="_blank" rel="noopener noreferrer" class="support-tier-card"> <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> <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 --> <!-- Data & Application Logic with Cache Busting -->
<script src="data/portals.js?v=16"></script> <script src="data/portals.js?v=17"></script>
<script src="js/icons.js?v=16"></script> <script src="js/icons.js?v=17"></script>
<script src="js/auth.js?v=16"></script> <script src="js/auth.js?v=17"></script>
<script src="js/radar.js?v=16"></script> <script src="js/radar.js?v=17"></script>
<script src="js/app.js?v=16"></script> <script src="js/app.js?v=17"></script>
<!-- Service Worker Instant Cache Invalidation --> <!-- Service Worker Instant Cache Invalidation -->
<script> <script>
sw.js
+13 -13
View File
@@ -1,20 +1,20 @@
// Service Worker for FlockRadar Offline Driving & Live Updates // Service Worker for FlockRadar Offline Driving & Live Updates
const CACHE_NAME = 'flockradar-v16'; const CACHE_NAME = 'flockradar-v17';
const ASSETS_TO_CACHE = [ const ASSETS_TO_CACHE = [
'./', './',
'./index.html', './index.html',
'./css/styles.css?v=16', './css/styles.css?v=17',
'./js/icons.js?v=16', './js/icons.js?v=17',
'./js/app.js?v=16', './js/app.js?v=17',
'./js/auth.js?v=16', './js/auth.js?v=17',
'./js/radar.js?v=16', './js/radar.js?v=17',
'./data/portals.js?v=16', './data/portals.js?v=17',
'./favicon.svg?v=16', './favicon.svg?v=17',
'./favicon.ico?v=16', './favicon.ico?v=17',
'./apple-touch-icon.png?v=16', './apple-touch-icon.png?v=17',
'./icon-192.png?v=16', './icon-192.png?v=17',
'./icon-512.png?v=16', './icon-512.png?v=17',
'./og-image.png?v=16', './og-image.png?v=17',
'./assets/img/logo.svg', './assets/img/logo.svg',
'./assets/img/flock_pole_cam_palmdale.jpg', './assets/img/flock_pole_cam_palmdale.jpg',
'./manifest.json' './manifest.json'