You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
This commit is contained in:
root
@@ -6,204 +6,205 @@
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 flex flex-col gap-y-3 md:col-span-9">
|
||||
<x-content.content-card icon="cog-icon" classes="border">
|
||||
<x-slot:title>
|
||||
{{ __('Preferences') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="flex items-center gap-3 p-3" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div>
|
||||
<h1 class="text-white font-bold text-lg">{{ __('Preferences') }}</h1>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Manage your preferences') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Manage your preferences') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('settings.preferences.update') }}" method="POST" class="flex flex-col gap-y-6">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('settings.preferences.update') }}" method="POST" class="flex flex-col gap-y-6">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
{{-- Radio Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Radio Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Auto-play radio') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Automatically start playing radio when you visit the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_auto_play" value="0">
|
||||
<input type="checkbox" name="radio_auto_play" value="1" {{ old('radio_auto_play', $preferences['radio_auto_play'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Radio Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Radio Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Auto-play radio') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Automatically start playing radio when you visit the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_auto_play" value="0">
|
||||
<input type="checkbox" name="radio_auto_play" value="1" {{ old('radio_auto_play', $preferences['radio_auto_play'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Show radio shouts') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Show live shouts panel on the radio player') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_shouts" value="0">
|
||||
<input type="checkbox" name="radio_shouts" value="1" {{ old('radio_shouts', $preferences['radio_shouts'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Show radio shouts') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show live shouts panel on the radio player') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_shouts" value="0">
|
||||
<input type="checkbox" name="radio_shouts" value="1" {{ old('radio_shouts', $preferences['radio_shouts'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Radio notifications') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Show notifications when a new song plays') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_notifications" value="0">
|
||||
<input type="checkbox" name="radio_notifications" value="1" {{ old('radio_notifications', $preferences['radio_notifications'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Radio notifications') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Show notifications when a new song plays') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="radio_notifications" value="0">
|
||||
<input type="checkbox" name="radio_notifications" value="1" {{ old('radio_notifications', $preferences['radio_notifications'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
{{-- Social Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Social Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Friend requests') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Allow other users to send you friend requests') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="friend_requests" value="0">
|
||||
<input type="checkbox" name="friend_requests" value="1" {{ old('friend_requests', $preferences['friend_requests'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Social Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Social Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Friend requests') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to send you friend requests') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="friend_requests" value="0">
|
||||
<input type="checkbox" name="friend_requests" value="1" {{ old('friend_requests', $preferences['friend_requests'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Room invites') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Allow other users to invite you to rooms') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="room_invites" value="0">
|
||||
<input type="checkbox" name="room_invites" value="1" {{ old('room_invites', $preferences['room_invites'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Room invites') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Allow other users to invite you to rooms') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="room_invites" value="0">
|
||||
<input type="checkbox" name="room_invites" value="1" {{ old('room_invites', $preferences['room_invites'] ?? true) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
{{-- Client Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Client Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Open client in new window') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('When enabled, the game client will open in a new browser tab instead of navigating away from the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="client_open_mode" value="same">
|
||||
<input type="checkbox" name="client_open_mode" value="new_window" {{ old('client_open_mode', $preferences['client_open_mode'] ?? 'same') === 'new_window' ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
{{-- Client Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Client Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Open client in new window') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('When enabled, the game client will open in a new browser tab instead of navigating away from the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="client_open_mode" value="same">
|
||||
<input type="checkbox" name="client_open_mode" value="new_window" {{ old('client_open_mode', $preferences['client_open_mode'] ?? 'same') === 'new_window' ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Client volume') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Default volume for the game client') }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">0</span>
|
||||
<input type="range" name="client_volume" min="0" max="100" value="{{ old('client_volume', $preferences['client_volume'] ?? 50) }}"
|
||||
class="w-24 h-2 rounded-full cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">100</span>
|
||||
<span class="text-sm font-semibold min-w-[2rem] text-center" id="volume-display" style="color: var(--color-text);">{{ old('client_volume', $preferences['client_volume'] ?? 50) }}%</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Client volume') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Default volume for the game client') }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">0</span>
|
||||
<input type="range" name="client_volume" min="0" max="100" value="{{ old('client_volume', $preferences['client_volume'] ?? 50) }}"
|
||||
class="w-24 h-2 rounded-full cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
<span class="text-sm" style="color: var(--color-text-muted);">100</span>
|
||||
<span class="text-sm font-semibold min-w-[2rem] text-center" id="volume-display" style="color: var(--color-text);">{{ old('client_volume', $preferences['client_volume'] ?? 50) }}%</span>
|
||||
</div>
|
||||
</label>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{-- Layout Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Layout Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Compact mode') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Use a more compact layout with tighter spacing') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="compact_mode" value="0">
|
||||
<input type="checkbox" name="compact_mode" value="1" {{ old('compact_mode', $preferences['compact_mode'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
<label class="flex items-center justify-between p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Default page') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Page to show after logging in') }}</p>
|
||||
</div>
|
||||
<select name="default_page"
|
||||
class="rounded-lg border px-3 py-2 text-sm focus:outline-none"
|
||||
style="background-color: var(--color-background); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<option value="me" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'me' ? 'selected' : '' }}>{{ __('Me page') }}</option>
|
||||
<option value="hotel" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'hotel' ? 'selected' : '' }}>{{ __('Hotel') }}</option>
|
||||
<option value="community" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'community' ? 'selected' : '' }}>{{ __('Community') }}</option>
|
||||
<option value="shop" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'shop' ? 'selected' : '' }}>{{ __('Shop') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Layout Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Layout Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Compact mode') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Use a more compact layout with tighter spacing') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="compact_mode" value="0">
|
||||
<input type="checkbox" name="compact_mode" value="1" {{ old('compact_mode', $preferences['compact_mode'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
<label class="flex items-center justify-between p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Default page') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Page to show after logging in') }}</p>
|
||||
</div>
|
||||
<select name="default_page"
|
||||
class="border-2 rounded-lg px-3 py-1.5 text-sm font-semibold cursor-pointer" style="background-color: var(--color-background); color: var(--color-text); border-color: var(--input-border-color, var(--color-text-muted));">
|
||||
<option value="me" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'me' ? 'selected' : '' }}>{{ __('Me page') }}</option>
|
||||
<option value="hotel" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'hotel' ? 'selected' : '' }}>{{ __('Hotel') }}</option>
|
||||
<option value="community" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'community' ? 'selected' : '' }}>{{ __('Community') }}</option>
|
||||
<option value="shop" {{ old('default_page', $preferences['default_page'] ?? 'me') === 'shop' ? 'selected' : '' }}>{{ __('Shop') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Privacy Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Privacy Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Hide online status') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Hide your online status from other users on the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="hide_online" value="0">
|
||||
<input type="checkbox" name="hide_online" value="1" {{ old('hide_online', $preferences['hide_online'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
<hr style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
|
||||
{{-- Privacy Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Privacy Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Hide online status') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Hide your online status from other users on the site') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="hide_online" value="0">
|
||||
<input type="checkbox" name="hide_online" value="1" {{ old('hide_online', $preferences['hide_online'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Notification Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Notification Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded-lg" style="background-color: color-mix(in srgb, var(--color-text-muted) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div>
|
||||
<span class="font-semibold text-sm" style="color: var(--color-text);">{{ __('Email notifications') }}</span>
|
||||
<p class="text-xs" style="color: var(--color-text-muted);">{{ __('Receive email notifications for important updates') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="email_notifications" value="0">
|
||||
<input type="checkbox" name="email_notifications" value="1" {{ old('email_notifications', $preferences['email_notifications'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-color: var(--color-text-muted);">
|
||||
|
||||
{{-- Notification Settings --}}
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4" style="color: var(--color-text);">{{ __('Notification Settings') }}</h3>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-center justify-between cursor-pointer p-3 rounded" style="background-color: var(--color-surface);">
|
||||
<div>
|
||||
<span class="font-semibold" style="color: var(--color-text);">{{ __('Email notifications') }}</span>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">{{ __('Receive email notifications for important updates') }}</p>
|
||||
</div>
|
||||
<input type="hidden" name="email_notifications" value="0">
|
||||
<input type="checkbox" name="email_notifications" value="1" {{ old('email_notifications', $preferences['email_notifications'] ?? false) ? 'checked' : '' }}
|
||||
class="w-5 h-5 rounded cursor-pointer" style="accent-color: var(--color-primary);">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<x-form.primary-button classes="lg:w-1/4">
|
||||
{{ __('Save preferences') }}
|
||||
</x-form.primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
<div class="flex w-full justify-start md:justify-end">
|
||||
<button type="submit" class="rounded-lg px-4 py-2 font-semibold transition-all duration-200 hover:opacity-90" style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Save preferences') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('javascript')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var volumeInput = document.querySelector('input[name="client_volume"]');
|
||||
var volumeDisplay = document.getElementById('volume-display');
|
||||
if (volumeInput && volumeDisplay) {
|
||||
volumeInput.addEventListener('input', function() {
|
||||
volumeDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var volumeInput = document.querySelector('input[name="client_volume"]');
|
||||
var volumeDisplay = document.getElementById('volume-display');
|
||||
if (volumeInput && volumeDisplay) {
|
||||
volumeInput.addEventListener('input', function() {
|
||||
volumeDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user