108 lines
6.5 KiB
PHP
108 lines
6.5 KiB
PHP
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
|
|
<div class="text-center mb-8">
|
|
<div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="ri-user-settings-line text-3xl text-white"></i>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Welcome to Your Profile</h1>
|
|
<p class="text-gray-600 dark:text-gray-400">Let's set up your social profile to get started</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('socialbase.profile.setup.store') }}" class="space-y-6">
|
|
@csrf
|
|
|
|
<!-- Display Name -->
|
|
<div>
|
|
<label for="display_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Display Name <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" id="display_name" name="display_name"
|
|
value="{{ old('display_name', $user->name) }}"
|
|
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
|
|
placeholder="How others will see your name"
|
|
required>
|
|
@error('display_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">This is how your name will appear on your profile and comments</p>
|
|
</div>
|
|
|
|
<!-- Bio -->
|
|
<div>
|
|
<label for="bio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
About You
|
|
</label>
|
|
<textarea id="bio" name="bio" rows="3"
|
|
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
|
|
placeholder="Tell others about yourself (optional)">{{ old('bio') }}</textarea>
|
|
@error('bio') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<!-- Privacy Settings -->
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Privacy Settings</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="is_public" name="is_public" value="1"
|
|
{{ old('is_public', true) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<label for="is_public" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
|
|
<strong>Make profile public</strong>
|
|
<span class="block text-gray-500 dark:text-gray-400 text-xs">Anyone can view your profile and activity</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="show_email" name="show_email" value="1"
|
|
{{ old('show_email', false) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<label for="show_email" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
|
|
<strong>Show email address</strong>
|
|
<span class="block text-gray-500 dark:text-gray-400 text-xs">Display your email on your profile</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="allow_comments" name="allow_comments" value="1"
|
|
{{ old('allow_comments', true) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<label for="allow_comments" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
|
|
<strong>Allow profile comments</strong>
|
|
<span class="block text-gray-500 dark:text-gray-400 text-xs">Let others leave comments on your profile</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="show_joined_date" name="show_joined_date" value="1"
|
|
{{ old('show_joined_date', true) ? 'checked' : '' }}
|
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
|
<label for="show_joined_date" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
|
|
<strong>Show joined date</strong>
|
|
<span class="block text-gray-500 dark:text-gray-400 text-xs">Display when you joined on your profile</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notice -->
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<div class="flex">
|
|
<i class="ri-information-line text-blue-500 text-lg mr-3 mt-0.5"></i>
|
|
<div>
|
|
<h4 class="text-sm font-medium text-blue-900 dark:text-blue-100">Privacy First</h4>
|
|
<p class="text-sm text-blue-700 dark:text-blue-200 mt-1">
|
|
You need to set up your profile before using social features. You can change these settings anytime later.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex justify-end space-x-3 pt-6">
|
|
<button type="submit"
|
|
class="bg-blue-500 text-white px-8 py-3 rounded-lg hover:bg-blue-600 transition-colors font-medium">
|
|
Complete Setup
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> |