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

feat: implement free/pro plan system with monitor and interval limits

Browse Source
This commit is contained in:
nate
2026-03-18 22:40:45 +04:00
parent 11e6c593ad
commit c89b63bd97
11 changed files with 119 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/settings.ejs
+31
View File
@@ -4,12 +4,43 @@
<%
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', lifetime: 'Lifetime' }[plan] || plan;
const planColor = { free: 'gray', pro: 'blue', lifetime: 'yellow' }[plan] || 'gray';
const limits = { free: { monitors: 5, interval: '30s' }, pro: { monitors: 500, interval: '2s' }, lifetime: { monitors: 500, interval: '2s' } }[plan] || { monitors: 5, interval: '30s' };
%>
<main class="max-w-3xl mx-auto px-8 py-10 space-y-8">
<h1 class="text-xl font-semibold text-white">Settings</h1>
<!-- Plan -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-sm font-semibold text-gray-300">Plan</h2>
<span class="text-xs font-medium px-2.5 py-1 rounded-full border border-<%= planColor %>-500/30 text-<%= planColor %>-400"><%= planLabel %></span>
</div>
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-lg font-semibold text-gray-200"><%= it.monitorCount %><span class="text-gray-600 text-sm font-normal">/<%= limits.monitors %></span></div>
<div class="text-xs text-gray-500">Monitors</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-200"><%= limits.interval %></div>
<div class="text-xs text-gray-500">Min Interval</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-200">2</div>
<div class="text-xs text-gray-500">Regions</div>
</div>
</div>
<% if (plan === 'free') { %>
<div class="mt-4 pt-4 border-t border-gray-800 text-xs text-gray-500">
Upgrade to Pro for 500 monitors and 2s intervals. <span class="text-gray-600">Coming soon.</span>
</div>
<% } %>
</section>
<!-- Account info -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<h2 class="text-sm font-semibold text-gray-300 mb-4">Account</h2>