add coupon badge on pricing cards: first-month price shown dynamically for friends499/creator950/friends1750

add.html

@@ -175,6 +175,26 @@
             padding: 3px 18px;
             border-radius: 20px;
         }
+        .pricing-badge-coupon {
+            display: none;
+            font-size: 12px;
+            font-weight: 700;
+            color: #f59e0b;
+            background: rgba(245, 158, 11, 0.1);
+            border: 1px solid rgba(245, 158, 11, 0.25);
+            border-radius: 6px;
+            padding: 3px 10px;
+            margin-top: 8px;
+            margin-bottom: 4px;
+            line-height: 1.4;
+            letter-spacing: 0.02em;
+        }
+        .pricing-badge-coupon.visible { display: inline-block; }
+        .pricing-badge-coupon.free {
+            color: #22c55e;
+            background: rgba(34, 197, 94, 0.1);
+            border-color: rgba(34, 197, 94, 0.25);
+        }
         .pricing-plan-name {
             font-size: 13px;
             font-weight: 700;
@@ -364,6 +384,7 @@
                     <span class="pricing-currency">$</span>4<span class="pricing-decimal">.99</span>
                 </div>
                 <div class="pricing-period" id="period-trainee">/ month</div>
+                <div class="pricing-badge-coupon" id="badge-trainee">First Month <span class="badge-price">—</span></div>
                 <div class="pricing-yearly-bonus" id="bonus-trainee">✨ +$4.99 OpenRouter credits</div>
                 <p class="pricing-plan-desc">For getting started with your first agent.</p>
                 <div class="pricing-plan-quota">1GB RAM &middot; 10GB HDD</div>
@@ -404,6 +425,7 @@
                     <span class="pricing-currency">$</span>9<span class="pricing-decimal">.50</span>
                 </div>
                 <div class="pricing-period" id="period-junior">/ month</div>
+                <div class="pricing-badge-coupon" id="badge-junior">First Month <span class="badge-price">—</span></div>
                 <div class="pricing-yearly-bonus" id="bonus-junior">✨ +$9.50 OpenRouter credits</div>
                 <p class="pricing-plan-desc">The sweet spot for most users.</p>
                 <div class="pricing-plan-quota">2GB RAM &middot; 20GB HDD</div>
@@ -455,6 +477,7 @@
                     <span class="pricing-currency">$</span>17<span class="pricing-decimal">.50</span>
                 </div>
                 <div class="pricing-period" id="period-senior">/ month</div>
+                <div class="pricing-badge-coupon" id="badge-senior">First Month <span class="badge-price">—</span></div>
                 <div class="pricing-yearly-bonus" id="bonus-senior">✨ +$17.50 OpenRouter credits</div>
                 <p class="pricing-plan-desc">For power users and teams.</p>
                 <div class="pricing-plan-quota">4GB RAM &middot; 40GB HDD</div>
@@ -604,6 +627,29 @@
             console.error('Order webhook failed:', err);
         }
     }
+
+    /* ── Coupon Badges ──────────────────────────────────────── */
+    const COUPONS = { friends499: 499, creator950: 950, friends1750: 1750 };
+    const PLAN_PRICES = { trainee: 499, junior: 950, senior: 1750 };
+    function centsToDollar(c) { return '$' + (c / 100).toFixed(2); }
+    function updateCouponBadges() {
+        var code = document.getElementById('pricing-coupon').value.trim().toLowerCase();
+        var discount = COUPONS[code];
+        ['trainee','junior','senior'].forEach(function(plan) {
+            var badge = document.getElementById('badge-' + plan);
+            if (discount !== undefined) {
+                var firstMonth = Math.max(0, PLAN_PRICES[plan] - discount);
+                badge.querySelector('.badge-price').textContent = centsToDollar(firstMonth);
+                badge.classList.add('visible');
+                if (firstMonth === 0) badge.classList.add('free');
+                else badge.classList.remove('free');
+            } else {
+                badge.classList.remove('visible', 'free');
+                badge.querySelector('.badge-price').textContent = '—';
+            }
+        });
+    }
+    document.getElementById('pricing-coupon').addEventListener('input', updateCouponBadges);
 </script>
 
 </body>

index.html

@@ -835,6 +835,26 @@
             padding: 3px 18px;
             border-radius: 20px;
         }
+        .pricing-badge-coupon {
+            display: none;
+            font-size: 12px;
+            font-weight: 700;
+            color: #f59e0b;
+            background: rgba(245, 158, 11, 0.1);
+            border: 1px solid rgba(245, 158, 11, 0.25);
+            border-radius: 6px;
+            padding: 3px 10px;
+            margin-top: 8px;
+            margin-bottom: 4px;
+            line-height: 1.4;
+            letter-spacing: 0.02em;
+        }
+        .pricing-badge-coupon.visible { display: inline-block; }
+        .pricing-badge-coupon.free {
+            color: #22c55e;
+            background: rgba(34, 197, 94, 0.1);
+            border-color: rgba(34, 197, 94, 0.25);
+        }
         .pricing-plan-name {
             font-size: 13px;
             font-weight: 700;
@@ -1864,6 +1884,7 @@
                         <span class="pricing-currency">$</span>4<span class="pricing-decimal">.99</span>
                     </div>
                     <div class="pricing-period" id="period-trainee">/ month</div>
+                    <div class="pricing-badge-coupon" id="badge-trainee">First Month <span class="badge-price">—</span></div>
                     <div class="pricing-yearly-bonus" id="bonus-trainee">✨ +$4.99 OpenRouter credits</div>
                     <p class="pricing-plan-desc">For getting started with your first agent.</p>
                     <div class="pricing-plan-quota">1GB RAM &middot; 10GB HDD</div>
@@ -1904,6 +1925,7 @@
                         <span class="pricing-currency">$</span>9<span class="pricing-decimal">.50</span>
                     </div>
                     <div class="pricing-period" id="period-junior">/ month</div>
+                    <div class="pricing-badge-coupon" id="badge-junior">First Month <span class="badge-price">—</span></div>
                     <div class="pricing-yearly-bonus" id="bonus-junior">✨ +$9.50 OpenRouter credits</div>
                     <p class="pricing-plan-desc">The sweet spot for most users.</p>
                     <div class="pricing-plan-quota">2GB RAM &middot; 20GB HDD</div>
@@ -1955,6 +1977,7 @@
                         <span class="pricing-currency">$</span>17<span class="pricing-decimal">.50</span>
                     </div>
                     <div class="pricing-period" id="period-senior">/ month</div>
+                    <div class="pricing-badge-coupon" id="badge-senior">First Month <span class="badge-price">—</span></div>
                     <div class="pricing-yearly-bonus" id="bonus-senior">✨ +$17.50 OpenRouter credits</div>
                     <p class="pricing-plan-desc">For power users and teams.</p>
                     <div class="pricing-plan-quota">4GB RAM &middot; 40GB HDD</div>
@@ -2676,6 +2699,29 @@
             });
         })();
 
+        /* ── Coupon Badges ──────────────────────────────────── */
+        const COUPONS = { friends499: 499, creator950: 950, friends1750: 1750 };
+        const PLAN_PRICES = { trainee: 499, junior: 950, senior: 1750 };
+        function centsToDollar(c) { return '$' + (c / 100).toFixed(2); }
+        function updateCouponBadges() {
+            var code = document.getElementById('pricing-coupon').value.trim().toLowerCase();
+            var discount = COUPONS[code];
+            ['trainee','junior','senior'].forEach(function(plan) {
+                var badge = document.getElementById('badge-' + plan);
+                if (discount !== undefined) {
+                    var firstMonth = Math.max(0, PLAN_PRICES[plan] - discount);
+                    badge.querySelector('.badge-price').textContent = centsToDollar(firstMonth);
+                    badge.classList.add('visible');
+                    if (firstMonth === 0) badge.classList.add('free');
+                    else badge.classList.remove('free');
+                } else {
+                    badge.classList.remove('visible', 'free');
+                    badge.querySelector('.badge-price').textContent = '—';
+                }
+            });
+        }
+        document.getElementById('pricing-coupon').addEventListener('input', updateCouponBadges);
+
         </script>
 
 <div class="pricing-toast" id="pricing-toast"></div>