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

test: improve css

Browse Source
This commit is contained in:
nate
2026-03-19 12:08:06 +04:00
parent 437b493567
commit c1392a7dd9
13 changed files with 282 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/settings.ejs
+29 -25
View File
@@ -6,7 +6,6 @@
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' };
%>
@@ -15,10 +14,16 @@
<h1 class="text-xl font-semibold text-white">Settings</h1>
<!-- Plan -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<section class="card-static 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>
<% 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') { %>
<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">Pro</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>
<% } %>
</div>
<div class="grid grid-cols-3 gap-4 text-center">
<div>
@@ -35,11 +40,11 @@
</div>
</div>
<% if (plan === 'free') { %>
<div class="mt-4 pt-4 border-t border-gray-800">
<a href="/dashboard/checkout" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors">Upgrade to Pro</a>
<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' && it.account.plan_expires_at) { %>
<div class="mt-4 pt-4 border-t border-gray-800 text-xs text-gray-500">
<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>
</div>
@@ -48,7 +53,7 @@
<!-- Invoices -->
<% if (it.invoices && it.invoices.length > 0) { %>
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<section class="card-static p-6">
<h2 class="text-sm font-semibold text-gray-300 mb-4">Invoices</h2>
<div class="space-y-2">
<% it.invoices.forEach(function(inv) {
@@ -57,7 +62,7 @@
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`;
%>
<div class="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg border border-gray-700/50">
<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">
<span class="w-2 h-2 rounded-full bg-<%= statusColor %>-500 <%= inv.status !== 'paid' ? 'animate-pulse' : '' %>"></span>
<div>
@@ -80,18 +85,18 @@
<% } %>
<!-- Account info -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<section class="card-static p-6">
<h2 class="text-sm font-semibold text-gray-300 mb-4">Account</h2>
<div class="space-y-3">
<% if (!it.isSubKey) { %>
<div>
<label class="block text-xs text-gray-500 mb-1">Login Key</label>
<div class="flex gap-2">
<code id="login-key-display" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-blue-400 text-sm font-mono select-all"><%= it.loginKey %></code>
<button onclick="copyLoginKey()" class="px-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg text-gray-400 hover:text-white text-xs transition-colors">Copy</button>
<code id="login-key-display" class="flex-1 bg-surface-solid border border-border-subtle rounded-lg px-4 py-2.5 text-blue-400 text-sm font-mono select-all"><%= it.loginKey %></code>
<button onclick="copyLoginKey()" class="btn-secondary px-3 text-xs">Copy</button>
<form action="/account/reset-key" method="POST" class="inline" onsubmit="return confirm('Rotate your login key? Your current key stops working immediately.')">
<input type="hidden" name="_form" value="1">
<button type="submit" class="px-3 bg-gray-800 hover:bg-gray-700 border border-red-900/50 hover:border-red-700/50 text-red-400 rounded-lg text-xs transition-colors h-full py-2.5">Rotate</button>
<button type="submit" class="px-3 py-2.5 rounded-lg border border-red-900/30 text-red-400 hover:bg-red-900/20 hover:border-red-800/40 text-xs transition-colors">Rotate</button>
</form>
</div>
</div>
@@ -104,7 +109,7 @@
</section>
<% if (it.isSubKey) { %>
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<section class="card-static p-6">
<p class="text-sm font-semibold text-gray-200 mb-1">Signed in with a sub-key</p>
<p class="text-xs text-gray-500 leading-relaxed">Sub-keys can manage monitors but can't access account credentials. Sign in with your main account key to manage your login key, recovery email, and sub-keys.</p>
</section>
@@ -112,18 +117,17 @@
<!-- Email (hidden for sub-key sessions) -->
<% if (!it.isSubKey) { %>
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<section class="card-static p-6">
<h2 class="text-sm font-semibold text-gray-300 mb-1">Recovery Email</h2>
<p class="text-xs text-gray-600 mb-4">Used for account recovery only. Stored as a one-way hash — we can't read it.</p>
<form action="/account/email" method="POST">
<input type="hidden" name="_form" value="1">
<div class="flex gap-2">
<input id="email-input" name="email" type="email" placeholder="<%= hasEmail ? '●●●●●●●● (set)' : 'you@example.com' %>"
class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<button type="submit" id="email-btn"
class="px-4 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-medium transition-colors">Save</button>
class="flex-1 input-base px-4 py-2.5 text-gray-100 placeholder-gray-600 text-sm">
<button type="submit" id="email-btn" class="btn-primary px-4 text-sm">Save</button>
<% if (hasEmail) { %>
<button type="submit" name="email" value="" class="px-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg text-gray-500 hover:text-red-400 text-xs transition-colors">Remove</button>
<button type="submit" name="email" value="" class="btn-secondary px-3 text-xs text-gray-500 hover:!text-red-400">Remove</button>
<% } %>
</div>
</form>
@@ -135,7 +139,7 @@
<!-- Sub-keys (hidden for sub-key sessions) -->
<% if (!it.isSubKey) { %>
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<section class="card-static p-6">
<div class="flex items-center justify-between mb-4">
<div>
<h2 class="text-sm font-semibold text-gray-300">Sub-Keys</h2>
@@ -144,13 +148,13 @@
</div>
<!-- Create key form -->
<form action="/account/keys" method="POST" class="mb-4 p-4 bg-gray-800/50 rounded-lg border border-gray-700">
<form action="/account/keys" method="POST" class="mb-4 p-4 rounded-lg bg-surface border border-border-subtle">
<input type="hidden" name="_form" value="1">
<label class="block text-xs text-gray-500 mb-1.5">New Sub-Key</label>
<div class="flex gap-2">
<input name="label" type="text" placeholder="e.g. ci-pipeline, mobile-app" required
class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<button type="submit" class="px-4 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-medium transition-colors">Create</button>
class="flex-1 input-base px-3 py-2 text-gray-100 placeholder-gray-600 text-sm">
<button type="submit" class="btn-primary px-4 text-sm">Create</button>
</div>
</form>
@@ -160,7 +164,7 @@
<p class="text-xs text-gray-600 italic">No sub-keys yet.</p>
<% } else { %>
<% it.apiKeys.forEach(function(k) { %>
<div class="p-3 bg-gray-800/50 rounded-lg border border-gray-700/50">
<div class="p-3 rounded-lg bg-surface border border-border-subtle hover:border-border-strong transition-colors">
<div class="flex items-center justify-between mb-2">
<p class="text-sm text-gray-200"><%= k.label %></p>
<form action="/account/keys/<%= k.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Revoke this key? Any apps using it will stop working.')">
@@ -169,8 +173,8 @@
</form>
</div>
<div class="flex gap-2">
<code class="flex-1 bg-gray-900 border border-gray-800 rounded-lg px-3 py-2 text-blue-400 text-xs font-mono select-all"><%= k.key %></code>
<button onclick="copyKey(this, '<%= k.key %>')" class="px-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg text-gray-400 hover:text-white text-xs transition-colors">Copy</button>
<code class="flex-1 bg-surface-solid border border-border-subtle rounded-lg px-3 py-2 text-blue-400 text-xs font-mono select-all"><%= k.key %></code>
<button onclick="copyKey(this, '<%= k.key %>')" class="btn-secondary px-3 text-xs">Copy</button>
</div>
<p class="text-xs text-gray-600 mt-1.5">created <%= new Date(k.created_at).toLocaleDateString() %> <%~ k.last_used_at ? '· last used ' + it.timeAgoSSR(k.last_used_at) : '· never used' %></p>
</div>