55 lines
2.9 KiB
PHP
55 lines
2.9 KiB
PHP
<div class="grid grid-cols-1 lg:grid-cols-3">
|
|
<!-- Subscription Card -->
|
|
<section class="lg:col-span-3 rounded-2xl border border-white/10 shadow-black/20 overflow-hidden p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
|
<div class="p-6 border-b border-white/10">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Subscription Status</h3>
|
|
<p class="p-2 text-sm dark:text-gray-200 text-gray-800">
|
|
Your current membership status for unlimited 4k Downloads.
|
|
</p>
|
|
</div>
|
|
|
|
<span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium border
|
|
{{ $isActive ? 'bg-green-500/10 text-green-300 border-green-500/20' : 'bg-red-500/10 text-red-300 border-red-500/20' }}">
|
|
<span class="h-2 w-2 rounded-full {{ $isActive ? 'bg-green-400' : 'bg-red-400' }}"></span>
|
|
{{ $isActive ? 'Active' : 'Inactive' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subscription Access Key -->
|
|
<div class="lg:col-span-3 rounded-2xl border border-blue-400/20 bg-blue-500/[0.06] shadow-2xl shadow-blue-950/20 p-6 mt-4">
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Subscription Access Key</h3>
|
|
<p class="p-2 text-sm dark:text-gray-200 text-gray-800">
|
|
Paste your subscription key to apply the membership status.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="w-full lg:w-auto">
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<input
|
|
id="subscriptionKey"
|
|
type="text"
|
|
value="{{ $subscriptionKey }}"
|
|
wire:model="subscriptionKey"
|
|
class="w-full sm:w-[420px] rounded-xl border border-white/10 dark:bg-gray-950/80 px-4 py-3 font-mono text-sm text-blue-400 dark:text-blue-200 outline-none focus:border-blue-400/50"
|
|
>
|
|
|
|
<button
|
|
type="button"
|
|
wire:click="applyKey"
|
|
class="rounded-xl bg-rose-500 px-5 py-3 text-sm font-semibold text-white hover:bg-rose-400 transition shadow-lg shadow-rose-500/20"
|
|
>
|
|
Apply
|
|
</button>
|
|
</div>
|
|
@error('subscriptionKey') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|