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

test: change styling

This commit is contained in:
nate 2026-03-25 23:13:19 +04:00
parent cfd7e8173a
commit 123ae4c251
1 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,10 +23,10 @@
.coin-radio:checked + label { border-color: rgb(59 130 246); }
</style>
<main class="max-w-2xl mx-auto px-6 py-8">
<main class="max-w-2xl mx-auto px-8 py-8">
<div class="mb-6">
<a href="/dashboard/settings" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">&larr; Back to settings</a>
<h2 class="text-lg font-semibold text-gray-200 mt-2">Upgrade Plan</h2>
<h1 class="text-xl font-semibold text-gray-100 mt-2">Upgrade Plan</h1>
</div>
<% if (!invoice) { %>
@ -149,40 +149,39 @@
<meta http-equiv="refresh" content="5">
<% } %>
<div class="card-static overflow-hidden max-w-md mx-auto">
<div class="card-static overflow-hidden max-w-lg mx-auto">
<!-- Header bar -->
<div class="px-5 py-3 border-b divider flex items-center justify-between">
<div class="px-6 py-4 border-b divider flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-gray-200"><%= invPlanLabel %></span>
<% if (inv.months) { %><span class="text-xs text-gray-500"><%= inv.months %>mo</span><% } %>
<% if (inv.months) { %><span class="text-sm text-gray-500"><%= inv.months %>mo</span><% } %>
</div>
<div class="text-sm font-medium text-gray-300">$<%= Number(inv.amount_usd).toFixed(2) %></div>
</div>
<% if (inv.status === 'pending' || inv.status === 'underpaid') { %>
<div class="px-5 pt-6 pb-5">
<div class="px-6 pt-7 pb-6">
<!-- QR + amount side by side on wider, stacked on narrow -->
<div class="flex flex-col items-center gap-5">
<!-- QR -->
<a href="<%= inv.pay_uri %>" class="inline-block">
<img src="<%= inv.qr_url %>" alt="QR Code" class="w-44 h-44 rounded-xl bg-white p-2" id="pay-qr">
<img src="<%= inv.qr_url %>" alt="QR Code" class="w-48 h-48 rounded-xl bg-white p-2" id="pay-qr">
</a>
<!-- Open in wallet -->
<a href="<%= inv.pay_uri %>" class="inline-flex items-center gap-2 text-xs text-gray-400 hover:text-gray-200 border border-border-subtle hover:border-border-strong rounded-lg px-4 py-2 transition-colors">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
<a href="<%= inv.pay_uri %>" class="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-gray-200 border border-border-subtle hover:border-border-strong rounded-lg px-4 py-2 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
Open in wallet
</a>
<!-- Amount -->
<div class="text-center">
<div class="text-xs text-gray-500 uppercase tracking-wider mb-1">Send exactly</div>
<div class="text-xs text-gray-500 uppercase tracking-wider mb-1.5">Send exactly</div>
<div class="flex items-center justify-center gap-2">
<span class="text-xl font-bold font-mono text-white"><%= received > 0 && remaining > 0 ? remaining.toFixed(8) : inv.amount_crypto %></span>
<span class="text-sm font-medium text-gray-400"><%= inv.coin_ticker %></span>
<span class="text-2xl font-bold font-mono text-white"><%= received > 0 && remaining > 0 ? remaining.toFixed(8) : inv.amount_crypto %></span>
<span class="text-base font-medium text-gray-400"><%= inv.coin_ticker %></span>
</div>
</div>
@ -192,7 +191,7 @@
<div class="w-full h-1.5 rounded-full bg-gray-800 overflow-hidden">
<div class="h-full rounded-full bg-green-500 transition-all" style="width: <%= pct %>%"></div>
</div>
<div class="flex justify-between mt-1.5 text-xs">
<div class="flex justify-between mt-2 text-sm">
<span class="text-green-400 font-mono"><%= received.toFixed(8) %> received</span>
<span class="text-gray-500 font-mono"><%= remaining.toFixed(8) %> left</span>
</div>
@ -201,22 +200,22 @@
<!-- Address -->
<div class="w-full">
<div class="flex items-center justify-between mb-1.5">
<span class="text-xs text-gray-500">Address</span>
<button onclick="copyAddr()" id="copy-btn" class="text-xs text-gray-500 hover:text-gray-300 transition-colors">Copy</button>
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-gray-500">Address</span>
<button onclick="copyAddr()" id="copy-btn" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">Copy</button>
</div>
<code class="block bg-surface-solid border border-border-subtle rounded-lg px-3 py-2.5 text-blue-400 text-[11px] font-mono select-all break-all leading-relaxed" id="pay-address"><%= inv.address %></code>
<code class="block bg-surface-solid border border-border-subtle rounded-lg px-4 py-3 text-blue-400 text-xs font-mono select-all break-all leading-relaxed" id="pay-address"><%= inv.address %></code>
</div>
</div>
</div>
<!-- Footer: status + timer -->
<div class="px-5 py-3 border-t divider flex items-center justify-between">
<div class="px-6 py-3.5 border-t divider flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full <%= inv.status === 'underpaid' ? 'bg-yellow-500' : 'bg-blue-500' %> animate-pulse"></span>
<span class="text-xs <%= inv.status === 'underpaid' ? 'text-yellow-400' : 'text-gray-400' %>"><%= inv.status === 'underpaid' ? 'Underpaid, send the rest' : 'Waiting for payment' %></span>
<span class="text-sm <%= inv.status === 'underpaid' ? 'text-yellow-400' : 'text-gray-400' %>"><%= inv.status === 'underpaid' ? 'Underpaid, send the rest' : 'Waiting for payment' %></span>
</div>
<span id="timer" class="text-xs text-gray-500 font-mono" data-left="<%= remainingSec %>"><%= mins %>:<%= String(secs).padStart(2, '0') %></span>
<span id="timer" class="text-sm text-gray-500 font-mono" data-left="<%= remainingSec %>"><%= mins %>:<%= String(secs).padStart(2, '0') %></span>
</div>
<% } else if (inv.status === 'confirming') { %>