Загрузка...
Модальное окно для смены тарифа с выбором оплаты. Показывает тариф, функции, способы оплаты, промокод. Для SaaS.
<div
class="relative shadow-[0_20px_60px_-15px_rgba(0,0,0,.6)] ring-1 ring-white/10 bg-neutral-900/95 rounded-2xl backdrop-blur">
<!-- Header -->
<div class="flex items-start justify-between p-6 sm:p-8 border-b border-white/10">
<div class="flex items-center gap-3">
<div
class="h-8 w-8 rounded-md grid place-items-center bg-white/5 ring-1 ring-white/10 text-white text-[10px] font-semibold tracking-tight">
NV</div>
<div class="">
<h2 class="text-2xl tracking-tight font-semibold text-white">Update billing plan</h2>
<p class="text-xs text-neutral-400">Nova Cloud • Workspace: Orion Research</p>
</div>
</div>
<button id="closeModal" class="shrink-0 p-2 rounded-lg text-neutral-400 hover:text-neutral-100 hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-white/20" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x w-5 h-5"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
<!-- Content -->
<div class="sm:px-8 sm:pb-8 pt-6 pr-6 pb-6 pl-6 space-y-8">
<!-- Plan summary -->
<div class="rounded-xl bg-neutral-800/60 ring-1 ring-white/10 p-4 sm:p-5 flex items-center justify-between">
<div class="min-w-0">
<div class="text-base font-medium text-white">Studio Pro</div>
<div class="text-sm text-neutral-400 truncate">Up to 10 seats · Priority support · Usage insights</div>
</div>
<div class="text-right">
<div class="text-xl font-semibold text-white tracking-tight">
$49<span class="text-sm text-neutral-400 font-normal">/month</span></div>
<div class="text-[11px] text-neutral-400">or $499/year</div>
</div>
</div>
<!-- What's included -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
<div
class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-orange-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="sparkles" class="lucide lucide-sparkles w-4 h-4">
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
class=""></path>
<path d="M20 2v4" class=""></path>
<path d="M22 4h-4" class=""></path>
<circle cx="4" cy="20" r="2" class=""></circle>
</svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-white">Advanced workflows</p>
<p class="text-xs text-neutral-400">Approvals, automation, and scheduled runs</p>
</div>
</div>
<div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
<div class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 w-4 h-4">
<path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
<path d="M18 17V9" class=""></path>
<path d="M13 17V5" class=""></path>
<path d="M8 17v-3" class=""></path>
</svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-white">Usage analytics</p>
<p class="text-xs text-neutral-400">Real-time dashboards and export</p>
</div>
</div>
<div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
<div
class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users"
class="lucide lucide-users w-4 h-4">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
<circle cx="9" cy="7" r="4" class=""></circle>
</svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-white">10 seats included</p>
<p class="text-xs text-neutral-400">Add teammates with granular roles</p>
</div>
</div>
<div class="flex items-start gap-3 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 p-3">
<div
class="shrink-0 h-8 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 grid place-items-center text-violet-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="headphones" class="lucide lucide-headphones w-4 h-4">
<path
d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"
class=""></path>
</svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-white">Priority support</p>
<p class="text-xs text-neutral-400">Live chat and 4-hour response SLA</p>
</div>
</div>
</div>
<p class="text-sm text-neutral-400">
Your plan will be upgraded immediately. A pro‑rated amount will be charged today and applied to your next billing
date.
</p>
<!-- Payment methods -->
<div class="border-t border-white/10 pt-6 space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<h3 class="text-sm font-medium text-white tracking-tight">Payment method</h3>
<span class="text-[11px] text-neutral-400">Secured by ArcPay</span>
</div>
<button id="manageBilling" class="text-xs text-neutral-300 hover:text-white px-2.5 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10">
Manage billing
</button>
</div>
<div class="space-y-3" id="paymentList" role="radiogroup" aria-label="Payment methods">
<!-- Aster Bank (Debit) -->
<label class="group flex items-center gap-4 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 hover:bg-neutral-800/40 transition-colors p-4 cursor-pointer">
<input type="radio" name="payment" value="aster_2841" class="sr-only peer">
<div class="flex items-center gap-4 flex-1">
<div class="w-12 h-8 rounded-md bg-neutral-800 ring-1 ring-white/15 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="contact" class="lucide lucide-contact w-4 h-4 text-neutral-200"><path d="M16 2v2" class=""></path><path d="M7 22v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2" class=""></path><path d="M8 2v2" class=""></path><circle cx="12" cy="11" r="3" class=""></circle><rect x="3" y="4" width="18" height="18" rx="2" class=""></rect></svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-white">Aster Bank • Debit ****2841</p>
<p class="text-xs text-neutral-400">Expiry: 06/28</p>
</div>
</div>
<span class="relative grid place-items-center">
<span class="w-5 h-5 rounded-full ring-1 ring-white/20 bg-neutral-900/60 peer-checked:ring-orange-500/60"></span>
<span class="absolute w-2.5 h-2.5 rounded-full bg-transparent peer-checked:bg-orange-500 transition-colors"></span>
</span>
</label>
<!-- OrionCard (Credit) -->
<label class="group flex items-center gap-4 rounded-xl ring-1 ring-white/10 bg-neutral-900/60 hover:bg-neutral-800/40 transition-colors p-4 cursor-pointer">
<input type="radio" name="payment" value="orion_6798" class="sr-only peer">
<div class="flex items-center gap-4 flex-1">
<div class="w-12 h-8 rounded-md ring-1 ring-white/15 bg-neutral-800 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="credit-card" class="lucide lucide-credit-card w-4 h-4 text-neutral-200"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-white">OrionCard • Credit ****6798</p>
<p class="text-xs text-neutral-400">Expiry: 09/27</p>
</div>
</div>
<span class="relative grid place-items-center">
<span class="w-5 h-5 rounded-full ring-1 ring-white/20 bg-neutral-900/60 peer-checked:ring-orange-500/60"></span>
<span class="absolute w-2.5 h-2.5 rounded-full bg-transparent peer-checked:bg-orange-500 transition-colors"></span>
</span>
</label>
</div>
<div class="flex items-center gap-3">
<button id="addPayment" class="flex-1 flex items-center justify-center gap-2 rounded-xl border border-dashed border-white/15 hover:border-white/25 bg-neutral-900/40 hover:bg-neutral-800/40 text-neutral-300 hover:text-white transition-colors py-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
<span class="text-sm font-medium">Add payment method</span>
</button>
<button id="applyCode" class="px-3.5 py-3 rounded-xl bg-white/5 hover:bg-white/10 text-neutral-200 text-sm font-medium ring-1 ring-white/10">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="ticket" class="lucide lucide-ticket w-4 h-4"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" class=""></path><path d="M13 5v2" class=""></path><path d="M13 17v2" class=""></path><path d="M13 11v2" class=""></path></svg>
<span>Apply code</span>
</div>
</button>
</div>
<div class="flex items-center gap-2 text-xs text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="shield-check" class="lucide lucide-shield-check w-4 h-4 text-emerald-400">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<span>Payments are encrypted. VAT may apply at checkout.</span>
</div>
</div>
<!-- Footer actions -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-2">
<p class="text-xs text-neutral-400">By upgrading, you agree to our <a href="#"
class="text-neutral-200 hover:text-white underline underline-offset-4">Terms</a> and <a href="#"
class="text-neutral-200 hover:text-white underline underline-offset-4">Privacy</a>.</p>
<div class="flex items-center justify-end gap-3">
<button class="px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-neutral-200 text-sm font-medium ring-1 ring-white/10">Cancel</button>
<button id="upgradeBtn" class="px-4 sm:px-5 py-2.5 rounded-xl bg-orange-600 hover:bg-orange-500 text-white text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed transition-colors" disabled="">
Confirm upgrade
</button>
</div>
</div>
</div>
</div>