update: plans
This commit is contained in:
@@ -9,13 +9,15 @@
|
||||
%>
|
||||
|
||||
<style>
|
||||
/* Show months section when pro or pro4x is selected */
|
||||
/* Show pro options when pro is selected */
|
||||
#plan-pro:checked ~ #pro-options { display: block; }
|
||||
/* Show months for pro (not lifetime) */
|
||||
#plan-pro:checked ~ #months-section { display: block; }
|
||||
#plan-pro4x:checked ~ #months-section { display: block; }
|
||||
/* Highlight selected plan */
|
||||
#plan-pro:checked ~ .plan-labels label[for="plan-pro"] { border-color: rgb(59 130 246 / 0.5); }
|
||||
#plan-pro4x:checked ~ .plan-labels label[for="plan-pro4x"] { border-color: rgb(59 130 246 / 0.5); }
|
||||
#plan-lifetime:checked ~ .plan-labels label[for="plan-lifetime"] { border-color: rgb(234 179 8 / 0.5); }
|
||||
/* Highlight selected tier */
|
||||
.tier-radio:checked + label { border-color: rgb(59 130 246 / 0.5); }
|
||||
/* Highlight selected coin */
|
||||
.coin-radio:checked + label { border-color: rgb(59 130 246); }
|
||||
</style>
|
||||
@@ -30,43 +32,64 @@
|
||||
<!-- ─── Step 1: Plan & coin selection (form, works without JS) ─── -->
|
||||
<form action="/dashboard/checkout" method="POST" class="space-y-6">
|
||||
|
||||
<!-- Hidden radios for plan (CSS uses :checked) -->
|
||||
<input type="radio" name="plan" value="pro" id="plan-pro" class="hidden peer/pro" checked>
|
||||
<input type="radio" name="plan" value="pro4x" id="plan-pro4x" class="hidden peer/pro4x">
|
||||
<input type="radio" name="plan" value="lifetime" id="plan-lifetime" class="hidden peer/lifetime">
|
||||
<!-- Hidden radios for plan type (CSS uses :checked) -->
|
||||
<input type="radio" name="planType" value="pro" id="plan-pro" class="hidden" checked>
|
||||
<input type="radio" name="planType" value="lifetime" id="plan-lifetime" class="hidden">
|
||||
|
||||
<div class="plan-labels grid grid-cols-3 gap-4">
|
||||
<div class="plan-labels grid grid-cols-2 gap-4">
|
||||
<label for="plan-pro"
|
||||
class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-xl p-5 transition-colors">
|
||||
<div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-1">Pro</div>
|
||||
<div class="text-2xl font-bold text-gray-100">$12<span class="text-sm font-normal text-gray-500">/mo</span></div>
|
||||
<div class="text-xs text-gray-500 mt-2">200 monitors, 2s intervals</div>
|
||||
</label>
|
||||
<label for="plan-pro4x"
|
||||
class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-xl p-5 transition-colors">
|
||||
<div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-1">Pro 4x</div>
|
||||
<div class="text-2xl font-bold text-gray-100">$48<span class="text-sm font-normal text-gray-500">/mo</span></div>
|
||||
<div class="text-xs text-gray-500 mt-2">800 monitors, 2s intervals</div>
|
||||
<div class="text-2xl font-bold text-gray-100">From $12<span class="text-sm font-normal text-gray-500">/mo</span></div>
|
||||
<div class="text-xs text-gray-500 mt-2">200–800 monitors, 2s intervals</div>
|
||||
</label>
|
||||
<label for="plan-lifetime"
|
||||
class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-yellow-500/40 rounded-xl p-5 transition-colors relative">
|
||||
<span class="absolute top-3 right-3 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-yellow-500/15 text-yellow-500 border border-yellow-500/20">Launch Deal</span>
|
||||
<div class="text-xs text-yellow-500/70 uppercase tracking-wider font-mono mb-1">Lifetime</div>
|
||||
<div class="text-2xl font-bold text-gray-100">$140</div>
|
||||
<div class="text-xs text-gray-500 mt-2">One-time, forever</div>
|
||||
<div class="text-xs text-gray-500 mt-2">One-time, 200 monitors forever</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Months (visible only when pro/pro4x selected, via CSS) -->
|
||||
<div id="months-section" class="hidden">
|
||||
<label class="block text-sm text-gray-400 mb-2">How many months?</label>
|
||||
<select id="months-select" name="months" class="input-base px-4 py-2.5 text-gray-100">
|
||||
<% for (let i = 1; i <= 12; i++) { %>
|
||||
<option value="<%= i %>" data-pro="$<%= i * 12 %>" data-pro4x="$<%= i * 48 %>"><%= i %> month<%= i > 1 ? 's' : '' %> — $<%= i * 12 %></option>
|
||||
<% } %>
|
||||
</select>
|
||||
<!-- Pro tier selection (visible only when pro selected) -->
|
||||
<div id="pro-options" class="hidden space-y-4">
|
||||
<!-- Tier selector -->
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-2">Tier</label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<input type="radio" name="plan" value="pro" id="tier-1x" class="hidden tier-radio" checked>
|
||||
<label for="tier-1x" class="cursor-pointer text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors">
|
||||
<div class="text-sm font-semibold text-gray-200">1x</div>
|
||||
<div class="text-xs text-gray-500">200 monitors · $12/mo</div>
|
||||
</label>
|
||||
<input type="radio" name="plan" value="pro2x" id="tier-2x" class="hidden tier-radio">
|
||||
<label for="tier-2x" class="cursor-pointer text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors">
|
||||
<div class="text-sm font-semibold text-gray-200">2x</div>
|
||||
<div class="text-xs text-gray-500">400 monitors · $24/mo</div>
|
||||
</label>
|
||||
<input type="radio" name="plan" value="pro4x" id="tier-4x" class="hidden tier-radio">
|
||||
<label for="tier-4x" class="cursor-pointer text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors">
|
||||
<div class="text-sm font-semibold text-gray-200">4x</div>
|
||||
<div class="text-xs text-gray-500">800 monitors · $48/mo</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Months -->
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-2">How many months?</label>
|
||||
<select id="months-select" name="months" class="input-base px-4 py-2.5 text-gray-100">
|
||||
<% for (let i = 1; i <= 12; i++) { %>
|
||||
<option value="<%= i %>" data-base="<%= i * 12 %>"><%= i %> month<%= i > 1 ? 's' : '' %> — $<%= i * 12 %></option>
|
||||
<% } %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden plan field for lifetime (JS sets this) -->
|
||||
<input type="hidden" name="plan" id="plan-value" value="pro">
|
||||
|
||||
<!-- Coin selection -->
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-2">Pay with</label>
|
||||
@@ -204,18 +227,38 @@
|
||||
|
||||
|
||||
<script>
|
||||
// Update month pricing when switching between pro and pro4x
|
||||
document.querySelectorAll('input[name="plan"]').forEach(radio => {
|
||||
const multipliers = { pro: 1, pro2x: 2, pro4x: 4 };
|
||||
const planValue = document.getElementById('plan-value');
|
||||
|
||||
// Plan type toggle (pro vs lifetime)
|
||||
document.querySelectorAll('input[name="planType"]').forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
const sel = document.getElementById('months-select');
|
||||
if (!sel) return;
|
||||
const plan = radio.value;
|
||||
for (const opt of sel.options) {
|
||||
const price = opt.dataset[plan] || opt.dataset.pro;
|
||||
if (price) opt.textContent = opt.value + ' month' + (opt.value > 1 ? 's' : '') + ' — ' + price;
|
||||
if (radio.value === 'lifetime') {
|
||||
planValue.value = 'lifetime';
|
||||
} else {
|
||||
const tier = document.querySelector('.tier-radio:checked');
|
||||
planValue.value = tier ? tier.value : 'pro';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Tier toggle (1x/2x/4x)
|
||||
document.querySelectorAll('.tier-radio').forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
planValue.value = radio.value;
|
||||
updateMonthPricing(radio.value);
|
||||
});
|
||||
});
|
||||
|
||||
function updateMonthPricing(plan) {
|
||||
const sel = document.getElementById('months-select');
|
||||
if (!sel) return;
|
||||
const mult = multipliers[plan] || 1;
|
||||
for (const opt of sel.options) {
|
||||
const base = parseInt(opt.dataset.base);
|
||||
opt.textContent = opt.value + ' month' + (opt.value > 1 ? 's' : '') + ' — $' + (base * mult);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<%~ include('./partials/foot') %>
|
||||
|
||||
@@ -5,8 +5,14 @@
|
||||
const hasEmail = !!it.account.email_hash;
|
||||
const createdDate = new Date(it.account.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
const plan = it.account.plan || 'free';
|
||||
const planLabel = { free: 'Free', pro: 'Pro', pro4x: 'Pro 4x', lifetime: 'Lifetime' }[plan] || plan;
|
||||
const limits = { free: { monitors: 10, interval: '30s', regions: 1 }, pro: { monitors: 200, interval: '2s', regions: 'All' }, pro4x: { monitors: 800, interval: '2s', regions: 'All' }, lifetime: { monitors: 200, interval: '2s', regions: 'All' } }[plan] || { monitors: 10, interval: '30s', regions: 1 };
|
||||
const planLabel = { free: 'Free', pro: 'Pro', pro2x: 'Pro 2x', pro4x: 'Pro 4x', lifetime: 'Lifetime' }[plan] || plan;
|
||||
const limits = {
|
||||
free: { monitors: 10, interval: '30s', regions: 1 },
|
||||
pro: { monitors: 200, interval: '2s', regions: 'All' },
|
||||
pro2x: { monitors: 400, interval: '2s', regions: 'All' },
|
||||
pro4x: { monitors: 800, interval: '2s', regions: 'All' },
|
||||
lifetime: { monitors: 200, interval: '2s', regions: 'All' },
|
||||
}[plan] || { monitors: 10, interval: '30s', regions: 1 };
|
||||
%>
|
||||
|
||||
<main class="max-w-3xl mx-auto px-8 py-10 space-y-8">
|
||||
@@ -19,7 +25,7 @@
|
||||
<h2 class="text-sm font-semibold text-gray-300">Plan</h2>
|
||||
<% if (plan === 'free') { %>
|
||||
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-gray-800/50 border border-border-subtle text-gray-400">Free</span>
|
||||
<% } else if (plan === 'pro' || plan === 'pro4x') { %>
|
||||
<% } else if (plan === 'pro' || plan === 'pro2x' || plan === 'pro4x') { %>
|
||||
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-gradient-to-r from-blue-600/20 to-blue-500/10 border border-blue-500/30 text-blue-400"><%= planLabel %></span>
|
||||
<% } else if (plan === 'lifetime') { %>
|
||||
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-gradient-to-r from-yellow-600/20 to-yellow-500/10 border border-yellow-500/30 text-yellow-400">Lifetime</span>
|
||||
@@ -43,7 +49,7 @@
|
||||
<div class="mt-4 pt-4 border-t divider">
|
||||
<a href="/dashboard/checkout" class="btn-primary inline-flex items-center gap-2 px-4 py-2 text-sm">Upgrade to Pro</a>
|
||||
</div>
|
||||
<% } else if ((plan === 'pro' || plan === 'pro4x') && it.account.plan_expires_at) { %>
|
||||
<% } else if ((plan === 'pro' || plan === 'pro2x' || plan === 'pro4x') && it.account.plan_expires_at) { %>
|
||||
<div class="mt-4 pt-4 border-t divider text-xs text-gray-500">
|
||||
Pro plan expires <%= new Date(it.account.plan_expires_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) %>.
|
||||
<a href="/dashboard/checkout" class="text-blue-400 hover:text-blue-300 ml-1">Extend or upgrade to Lifetime</a>
|
||||
@@ -160,7 +166,8 @@
|
||||
const statusColors = { paid: 'green', confirming: 'blue', pending: 'yellow', underpaid: 'orange' };
|
||||
const statusColor = statusColors[inv.status] || 'gray';
|
||||
const date = new Date(inv.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
const planLabel = inv.plan === 'lifetime' ? 'Lifetime' : `Pro × ${inv.months}mo`;
|
||||
const invPlanNames = { pro: 'Pro', pro2x: 'Pro 2x', pro4x: 'Pro 4x', lifetime: 'Lifetime' };
|
||||
const planLabel = inv.plan === 'lifetime' ? 'Lifetime' : `${invPlanNames[inv.plan] || 'Pro'} × ${inv.months}mo`;
|
||||
%>
|
||||
<div class="flex items-center justify-between p-3 rounded-lg bg-surface border border-border-subtle hover:border-border-strong transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
|
||||
Reference in New Issue
Block a user