change style of button
This commit is contained in:
I-Fun
@@ -4,169 +4,164 @@
|
||||
@section('page-subtitle', 'Customise your public rate card page')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto space-y-5">
|
||||
<div class="max-w-3xl mx-auto space-y-5">
|
||||
|
||||
@if(session('success'))
|
||||
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
|
||||
class="flex items-center justify-between gap-3 bg-green-50 border border-green-200 rounded-2xl px-4 py-3 text-sm text-green-700">
|
||||
<span>{{ session('success') }}</span>
|
||||
<button @click="show = false" class="text-green-500 hover:text-green-700 text-lg leading-none">✕</button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('rate-cards.profile.update') }}" method="POST" enctype="multipart/form-data"
|
||||
class="space-y-5">
|
||||
@csrf
|
||||
|
||||
{{-- Identity --}}
|
||||
<div class="cat-card overflow-hidden">
|
||||
<div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
|
||||
<span class="text-xl">👤</span>
|
||||
<h2 class="font-bold text-gray-700">Identity</h2>
|
||||
@if(session('success'))
|
||||
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
|
||||
class="flex items-center justify-between gap-3 bg-green-50 border border-green-200 rounded-2xl px-4 py-3 text-sm text-green-700">
|
||||
<span>{{ session('success') }}</span>
|
||||
<button @click="show = false" class="text-green-500 hover:text-green-700 text-lg leading-none">✕</button>
|
||||
</div>
|
||||
<div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Display Name <span class="text-pink-400">*</span></label>
|
||||
<input type="text" name="owner_name" required
|
||||
value="{{ old('owner_name', $profile->owner_name) }}"
|
||||
class="input-soft" placeholder="e.g. Sakura KOL">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Tagline</label>
|
||||
<input type="text" name="tagline"
|
||||
value="{{ old('tagline', $profile->tagline) }}"
|
||||
class="input-soft" placeholder="e.g. Lifestyle & Beauty Creator">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Email</label>
|
||||
<input type="email" name="email"
|
||||
value="{{ old('email', $profile->email) }}"
|
||||
class="input-soft" placeholder="hi@example.com">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">WhatsApp Number</label>
|
||||
<input type="text" name="whatsapp"
|
||||
value="{{ old('whatsapp', $profile->whatsapp) }}"
|
||||
class="input-soft" placeholder="+6012-345-6789">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Instagram Handle</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></span>
|
||||
<input type="text" name="ig_handle"
|
||||
value="{{ old('ig_handle', $profile->ig_handle) }}"
|
||||
class="input-soft pl-7" placeholder="@yourhandle">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">TikTok Handle</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></span>
|
||||
<input type="text" name="tiktok_handle"
|
||||
value="{{ old('tiktok_handle', $profile->tiktok_handle) }}"
|
||||
class="input-soft pl-7" placeholder="@yourhandle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">YouTube Handle / Channel</label>
|
||||
<input type="text" name="youtube_handle"
|
||||
value="{{ old('youtube_handle', $profile->youtube_handle) }}"
|
||||
class="input-soft" placeholder="@yourchannel">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Appearance --}}
|
||||
<div class="cat-card overflow-hidden">
|
||||
<div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
|
||||
<span class="text-xl">🎨</span>
|
||||
<h2 class="font-bold text-gray-700">Appearance</h2>
|
||||
</div>
|
||||
<div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Logo / Profile Image</label>
|
||||
@if($profile->logo_path)
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<img src="{{ route('files.serve-profile-logo') }}" alt="Logo"
|
||||
class="w-16 h-16 object-cover rounded-2xl border border-pink-100">
|
||||
<span class="text-xs text-gray-400">Current logo</span>
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" name="logo" accept="image/*"
|
||||
class="w-full text-sm text-gray-600
|
||||
file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0
|
||||
file:text-xs file:font-semibold file:bg-pink-50 file:text-pink-600
|
||||
hover:file:bg-pink-100 cursor-pointer">
|
||||
<p class="text-xs text-gray-400 mt-1">Max 2MB. PNG/JPG/WebP.</p>
|
||||
</div>
|
||||
<form action="{{ route('rate-cards.profile.update') }}" method="POST" enctype="multipart/form-data"
|
||||
class="space-y-5">
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Background Color</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="color" name="bg_color" value="{{ old('bg_color', $profile->bg_color) }}"
|
||||
class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
|
||||
oninput="document.getElementById('bg_text').value=this.value">
|
||||
<input type="text" id="bg_text" value="{{ old('bg_color', $profile->bg_color) }}"
|
||||
class="input-soft text-sm flex-1" readonly>
|
||||
{{-- Identity --}}
|
||||
<div class="cat-card overflow-hidden">
|
||||
<div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
|
||||
<span class="text-xl">👤</span>
|
||||
<h2 class="font-bold text-gray-700">Identity</h2>
|
||||
</div>
|
||||
<div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Display Name <span
|
||||
class="text-pink-400">*</span></label>
|
||||
<input type="text" name="owner_name" required value="{{ old('owner_name', $profile->owner_name) }}"
|
||||
class="input-soft" placeholder="e.g. Sakura KOL">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Accent Color</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="color" name="accent_color" value="{{ old('accent_color', $profile->accent_color) }}"
|
||||
class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
|
||||
oninput="document.getElementById('accent_text').value=this.value">
|
||||
<input type="text" id="accent_text" value="{{ old('accent_color', $profile->accent_color) }}"
|
||||
class="input-soft text-sm flex-1" readonly>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Tagline</label>
|
||||
<input type="text" name="tagline" value="{{ old('tagline', $profile->tagline) }}" class="input-soft"
|
||||
placeholder="e.g. Lifestyle & Beauty Creator">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Text Color</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="color" name="text_color" value="{{ old('text_color', $profile->text_color) }}"
|
||||
class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
|
||||
oninput="document.getElementById('text_text').value=this.value">
|
||||
<input type="text" id="text_text" value="{{ old('text_color', $profile->text_color) }}"
|
||||
class="input-soft text-sm flex-1" readonly>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Email</label>
|
||||
<input type="email" name="email" value="{{ old('email', $profile->email) }}" class="input-soft"
|
||||
placeholder="hi@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Custom Footer</label>
|
||||
<input type="text" name="custom_footer"
|
||||
value="{{ old('custom_footer', $profile->custom_footer) }}"
|
||||
class="input-soft"
|
||||
placeholder="e.g. Prices valid until Dec 2025 · DM for bundles">
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="flex items-start gap-3 cursor-pointer">
|
||||
<input type="checkbox" name="show_prices" value="1"
|
||||
class="w-4 h-4 accent-pink-400 mt-0.5 shrink-0"
|
||||
{{ old('show_prices', $profile->show_prices) ? 'checked' : '' }}>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-700">Show prices publicly</span>
|
||||
<p class="text-xs text-gray-400">Uncheck to show "On Request" instead of actual prices</p>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">WhatsApp Number</label>
|
||||
<input type="text" name="whatsapp" value="{{ old('whatsapp', $profile->whatsapp) }}"
|
||||
class="input-soft" placeholder="+6012-345-6789">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Instagram Handle</label>
|
||||
<div class="relative">
|
||||
<span
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></span>
|
||||
<input type="text" name="ig_handle" value="{{ old('ig_handle', $profile->ig_handle) }}"
|
||||
class="input-soft pl-7" placeholder="@yourhandle">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">TikTok Handle</label>
|
||||
<div class="relative">
|
||||
<span
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></span>
|
||||
<input type="text" name="tiktok_handle"
|
||||
value="{{ old('tiktok_handle', $profile->tiktok_handle) }}" class="input-soft pl-7"
|
||||
placeholder="@yourhandle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">YouTube Handle / Channel</label>
|
||||
<input type="text" name="youtube_handle"
|
||||
value="{{ old('youtube_handle', $profile->youtube_handle) }}" class="input-soft"
|
||||
placeholder="@yourchannel">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Actions --}}
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button type="submit" class="btn-sakura px-6 py-2.5">💾 Save Profile</button>
|
||||
<a href="{{ route('rate-cards.public') }}" target="_blank"
|
||||
class="text-xs px-4 py-2.5 rounded-full border border-pink-200 text-pink-500 hover:bg-pink-50">
|
||||
👁️ Preview Public Page
|
||||
</a>
|
||||
<a href="{{ route('rate-cards.pdf') }}"
|
||||
class="text-xs px-4 py-2.5 rounded-full border border-blue-200 text-blue-500 hover:bg-blue-50">
|
||||
📄 Download PDF
|
||||
</a>
|
||||
<a href="{{ route('rate-cards.index') }}"
|
||||
class="text-xs px-4 py-2.5 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50">
|
||||
← Back to Rate Cards
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
{{-- Appearance --}}
|
||||
<div class="cat-card overflow-hidden">
|
||||
<div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
|
||||
<span class="text-xl">🎨</span>
|
||||
<h2 class="font-bold text-gray-700">Appearance</h2>
|
||||
</div>
|
||||
<div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Logo / Profile Image</label>
|
||||
@if($profile->logo_path)
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<img src="{{ route('files.serve-profile-logo') }}" alt="Logo"
|
||||
class="w-16 h-16 object-cover rounded-2xl border border-pink-100">
|
||||
<span class="text-xs text-gray-400">Current logo</span>
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" name="logo" accept="image/*" class="w-full text-sm text-gray-600
|
||||
file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0
|
||||
file:text-xs file:font-semibold file:bg-pink-50 file:text-pink-600
|
||||
hover:file:bg-pink-100 cursor-pointer">
|
||||
<p class="text-xs text-gray-400 mt-1">Max 2MB. PNG/JPG/WebP.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Background Color</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="color" name="bg_color" value="{{ old('bg_color', $profile->bg_color) }}"
|
||||
class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
|
||||
oninput="document.getElementById('bg_text').value=this.value">
|
||||
<input type="text" id="bg_text" value="{{ old('bg_color', $profile->bg_color) }}"
|
||||
class="input-soft text-sm flex-1" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Accent Color</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="color" name="accent_color"
|
||||
value="{{ old('accent_color', $profile->accent_color) }}"
|
||||
class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
|
||||
oninput="document.getElementById('accent_text').value=this.value">
|
||||
<input type="text" id="accent_text" value="{{ old('accent_color', $profile->accent_color) }}"
|
||||
class="input-soft text-sm flex-1" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Text Color</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="color" name="text_color" value="{{ old('text_color', $profile->text_color) }}"
|
||||
class="h-10 w-16 rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white shrink-0"
|
||||
oninput="document.getElementById('text_text').value=this.value">
|
||||
<input type="text" id="text_text" value="{{ old('text_color', $profile->text_color) }}"
|
||||
class="input-soft text-sm flex-1" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-gray-600 mb-1">Custom Footer</label>
|
||||
<input type="text" name="custom_footer" value="{{ old('custom_footer', $profile->custom_footer) }}"
|
||||
class="input-soft" placeholder="e.g. Prices valid until Dec 2025 · DM for bundles">
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="flex items-start gap-3 cursor-pointer">
|
||||
<input type="checkbox" name="show_prices" value="1"
|
||||
class="w-4 h-4 accent-pink-400 mt-0.5 shrink-0" {{ old('show_prices', $profile->show_prices) ? 'checked' : '' }}>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-700">Show prices publicly</span>
|
||||
<p class="text-xs text-gray-400">Uncheck to show "On Request" instead of actual prices</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Actions --}}
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button type="submit" class="btn-sakura px-6 py-2.5">💾 Save Profile</button>
|
||||
<a href="{{ route('rate-cards.public') }}" target="_blank"
|
||||
class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-pink-200 text-pink-500 hover:bg-pink-50">
|
||||
👁️ Preview
|
||||
</a>
|
||||
<a href="{{ route('rate-cards.pdf') }}"
|
||||
class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-blue-200 text-blue-500 hover:bg-blue-50">
|
||||
📄 Download PDF
|
||||
</a>
|
||||
<a href="{{ route('rate-cards.index') }}"
|
||||
class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-50">
|
||||
← Back
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user