ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: plans

This commit is contained in:
nate 2026-03-22 06:04:06 +04:00
parent d5510aae14
commit b014cbf98a
1 changed files with 31 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
apps/web/src/views/checkout.ejs
View File

@ -11,13 +11,9 @@
<style> <style>
/* Show pro options when pro is selected */ /* Show pro options when pro is selected */
#plan-pro:checked ~ #pro-options { display: block; } #plan-pro:checked ~ #pro-options { display: block; }
/* Show months for pro (not lifetime) */ /* Highlight selected plan type */
#plan-pro: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-pro:checked ~ .plan-labels label[for="plan-pro"] { 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); } #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 */ /* Highlight selected coin */
.coin-radio:checked + label { border-color: rgb(59 130 246); } .coin-radio:checked + label { border-color: rgb(59 130 246); }
</style> </style>
@ -32,9 +28,12 @@
<!-- ─── Step 1: Plan & coin selection (form, works without JS) ─── --> <!-- ─── Step 1: Plan & coin selection (form, works without JS) ─── -->
<form action="/dashboard/checkout" method="POST" class="space-y-6"> <form action="/dashboard/checkout" method="POST" class="space-y-6">
<!-- Hidden radios for plan type (CSS uses :checked) --> <!-- Single hidden field submitted to server -->
<input type="radio" name="planType" value="pro" id="plan-pro" class="hidden" checked> <input type="hidden" name="plan" id="plan-value" value="pro">
<input type="radio" name="planType" value="lifetime" id="plan-lifetime" class="hidden">
<!-- Plan type selector (not submitted, drives UI) -->
<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-2 gap-4"> <div class="plan-labels grid grid-cols-2 gap-4">
<label for="plan-pro" <label for="plan-pro"
@ -52,31 +51,26 @@
</label> </label>
</div> </div>
<!-- Pro tier selection (visible only when pro selected) --> <!-- Pro tier + months (visible only when pro selected, via CSS) -->
<div id="pro-options" class="hidden space-y-4"> <div id="pro-options" class="hidden space-y-4">
<!-- Tier selector -->
<div> <div>
<label class="block text-sm text-gray-400 mb-2">Tier</label> <label class="block text-sm text-gray-400 mb-2">Tier</label>
<div class="grid grid-cols-3 gap-2"> <div id="tier-selector" class="grid grid-cols-3 gap-2">
<input type="radio" name="plan" value="pro" id="tier-1x" class="hidden tier-radio" checked> <button type="button" class="tier-btn text-center bg-surface border-2 border-blue-500/50 rounded-lg py-2.5 transition-colors" data-plan="pro">
<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-sm font-semibold text-gray-200">1x</div>
<div class="text-xs text-gray-500">200 monitors · 10s · $12/mo</div> <div class="text-xs text-gray-500">200 monitors · 10s · $12/mo</div>
</label> </button>
<input type="radio" name="plan" value="pro2x" id="tier-2x" class="hidden tier-radio"> <button type="button" class="tier-btn text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors" data-plan="pro2x">
<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-sm font-semibold text-gray-200">2x</div>
<div class="text-xs text-gray-500">400 monitors · 5s · $24/mo</div> <div class="text-xs text-gray-500">400 monitors · 5s · $24/mo</div>
</label> </button>
<input type="radio" name="plan" value="pro4x" id="tier-4x" class="hidden tier-radio"> <button type="button" class="tier-btn text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors" data-plan="pro4x">
<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-sm font-semibold text-gray-200">4x</div>
<div class="text-xs text-gray-500">800 monitors · 2s · $48/mo</div> <div class="text-xs text-gray-500">800 monitors · 2s · $48/mo</div>
</label> </button>
</div> </div>
</div> </div>
<!-- Months -->
<div> <div>
<label class="block text-sm text-gray-400 mb-2">How many months?</label> <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"> <select id="months-select" name="months" class="input-base px-4 py-2.5 text-gray-100">
@ -87,9 +81,6 @@
</div> </div>
</div> </div>
<!-- Hidden plan field for lifetime (JS sets this) -->
<input type="hidden" name="plan" id="plan-value" value="pro">
<!-- Coin selection --> <!-- Coin selection -->
<div> <div>
<label class="block text-sm text-gray-400 mb-2">Pay with</label> <label class="block text-sm text-gray-400 mb-2">Pay with</label>
@ -229,24 +220,28 @@
<script> <script>
const multipliers = { pro: 1, pro2x: 2, pro4x: 4 }; const multipliers = { pro: 1, pro2x: 2, pro4x: 4 };
const planValue = document.getElementById('plan-value'); const planValue = document.getElementById('plan-value');
let selectedTier = 'pro';
// Plan type toggle (pro vs lifetime) // Plan type toggle (pro vs lifetime)
document.querySelectorAll('input[name="planType"]').forEach(radio => { document.querySelectorAll('input[name="_planType"]').forEach(radio => {
radio.addEventListener('change', () => { radio.addEventListener('change', () => {
if (radio.value === 'lifetime') { planValue.value = radio.value === 'lifetime' ? 'lifetime' : selectedTier;
planValue.value = 'lifetime';
} else {
const tier = document.querySelector('.tier-radio:checked');
planValue.value = tier ? tier.value : 'pro';
}
}); });
}); });
// Tier toggle (1x/2x/4x) // Tier buttons
document.querySelectorAll('.tier-radio').forEach(radio => { document.querySelectorAll('.tier-btn').forEach(btn => {
radio.addEventListener('change', () => { btn.addEventListener('click', () => {
planValue.value = radio.value; selectedTier = btn.dataset.plan;
updateMonthPricing(radio.value); planValue.value = selectedTier;
// Update active style
document.querySelectorAll('.tier-btn').forEach(b => {
b.classList.remove('border-blue-500/50');
b.classList.add('border-border-subtle');
});
btn.classList.remove('border-border-subtle');
btn.classList.add('border-blue-500/50');
updateMonthPricing(selectedTier);
}); });
}); });