add coupon badge on pricing cards: first-month price shown dynamically for friends499/creator950/friends1750
This commit is contained in:
Oliver
@@ -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 · 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 · 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 · 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>
|
||||
|
||||
+46
@@ -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 · 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 · 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 · 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>
|
||||
|
||||
Reference in New Issue
Block a user