Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Oliver
2026-06-09 17:45:56 -03:00
parent eefd5b199f
commit 53a4f1eb2a
2 changed files with 92 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+46
View File
@@ -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>