init commit
This commit is contained in:
David Melendez
220
resources/views/profile/edit.blade.php
Normal file
220
resources/views/profile/edit.blade.php
Normal file
@@ -0,0 +1,220 @@
|
||||
{{--
|
||||
Edit Profile - Professional Bootstrap Design
|
||||
Professional Profile Edit Page
|
||||
|
||||
@author David Valera Melendez <david@valera-melendez.de>
|
||||
@created 2025-08-09
|
||||
@location Made in Germany 🇩🇪
|
||||
--}}
|
||||
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Edit Profile - Professional Resume Builder')
|
||||
@section('page_class', 'profile-edit-page')
|
||||
|
||||
@section('content')
|
||||
<div class="profile-edit-container">
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h1 class="page-title">Edit Profile</h1>
|
||||
<p class="page-subtitle">Update your personal information and preferences</p>
|
||||
</div>
|
||||
<a href="{{ route('profile.show') }}" class="btn secondary-cta">
|
||||
<i class="bi bi-arrow-left"></i>
|
||||
Back to Profile
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Edit Profile Form -->
|
||||
<section class="profile-edit-form">
|
||||
<form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Personal Information Card -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card form-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-person"></i>
|
||||
Personal Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<!-- Full Name -->
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<input type="text"
|
||||
class="form-control @error('name') is-invalid @enderror"
|
||||
id="name"
|
||||
name="name"
|
||||
value="{{ old('name', $user->name) }}"
|
||||
placeholder="Full Name"
|
||||
required>
|
||||
<label for="name">Full Name *</label>
|
||||
@error('name')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-floating">
|
||||
<input type="email"
|
||||
class="form-control @error('email') is-invalid @enderror"
|
||||
id="email"
|
||||
name="email"
|
||||
value="{{ old('email', $user->email) }}"
|
||||
placeholder="Email Address"
|
||||
required>
|
||||
<label for="email">Email Address *</label>
|
||||
@error('email')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-floating">
|
||||
<input type="tel"
|
||||
class="form-control @error('phone') is-invalid @enderror"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value="{{ old('phone', $user->phone) }}"
|
||||
placeholder="Phone Number">
|
||||
<label for="phone">Phone Number</label>
|
||||
@error('phone')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bio -->
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<textarea class="form-control @error('bio') is-invalid @enderror"
|
||||
id="bio"
|
||||
name="bio"
|
||||
style="height: 120px"
|
||||
placeholder="Tell us about yourself">{{ old('bio', $user->bio) }}</textarea>
|
||||
<label for="bio">About Me</label>
|
||||
@error('bio')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="form-text">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
Optional: Brief description about yourself (max 1000 characters)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile Picture Card -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card form-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-camera"></i>
|
||||
Profile Picture
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="profile-avatar-edit">
|
||||
@if($user->avatar)
|
||||
<img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" class="current-avatar" id="avatarPreview">
|
||||
@else
|
||||
<div class="avatar-placeholder" id="avatarPreview">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="avatar-upload mt-3">
|
||||
<input type="file"
|
||||
class="form-control @error('avatar') is-invalid @enderror"
|
||||
id="avatar"
|
||||
name="avatar"
|
||||
accept="image/*"
|
||||
style="display: none;">
|
||||
<button type="button" class="btn primary-cta" onclick="document.getElementById('avatar').click()">
|
||||
<i class="bi bi-cloud-upload"></i>
|
||||
Choose Photo
|
||||
</button>
|
||||
@error('avatar')
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@enderror
|
||||
<div class="form-text mt-2">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
JPG, PNG or GIF (max 2MB)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Save Changes Card -->
|
||||
<div class="card form-card mt-4">
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn primary-cta">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
Save Changes
|
||||
</button>
|
||||
<a href="{{ route('profile.show') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle"></i>
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Avatar preview functionality
|
||||
const avatarInput = document.getElementById('avatar');
|
||||
const avatarPreview = document.getElementById('avatarPreview');
|
||||
|
||||
if (avatarInput && avatarPreview) {
|
||||
avatarInput.addEventListener('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
avatarPreview.innerHTML = '<img src="' + e.target.result + '" alt="Avatar Preview" class="current-avatar">';
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Form validation feedback
|
||||
const form = document.querySelector('form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
// Add loading state
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Saving...';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
421
resources/views/profile/settings.blade.php
Normal file
421
resources/views/profile/settings.blade.php
Normal file
@@ -0,0 +1,421 @@
|
||||
{{--
|
||||
Account Settings - Professional Bootstrap Design
|
||||
Professional Account Management Page
|
||||
|
||||
@author David Valera Melendez <david@valera-melendez.de>
|
||||
@created 2025-08-09
|
||||
@location Made in Germany 🇩🇪
|
||||
--}}
|
||||
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Account Settings - Professional Resume Builder')
|
||||
@section('page_class', 'account-settings-page')
|
||||
|
||||
@section('content')
|
||||
<div class="account-settings-container">
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h1 class="page-title">Account Settings</h1>
|
||||
<p class="page-subtitle">Manage your account preferences and security settings</p>
|
||||
</div>
|
||||
<a href="{{ route('profile.show') }}" class="btn secondary-cta">
|
||||
<i class="bi bi-arrow-left"></i>
|
||||
Back to Profile
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Settings Navigation Tabs -->
|
||||
<section class="settings-nav">
|
||||
<div class="card nav-card">
|
||||
<div class="card-body">
|
||||
<nav class="settings-tabs">
|
||||
<button class="tab-btn active" data-tab="security">
|
||||
<i class="bi bi-shield-lock"></i>
|
||||
Security
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="preferences">
|
||||
<i class="bi bi-gear"></i>
|
||||
Preferences
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="notifications">
|
||||
<i class="bi bi-bell"></i>
|
||||
Notifications
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="privacy">
|
||||
<i class="bi bi-eye-slash"></i>
|
||||
Privacy
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Settings Content -->
|
||||
<section class="settings-content">
|
||||
<!-- Security Settings Tab -->
|
||||
<div class="tab-content active" id="security-tab">
|
||||
<div class="row g-4">
|
||||
<!-- Change Password Card -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-key"></i>
|
||||
Change Password
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ route('account.password.update') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<!-- Current Password -->
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password"
|
||||
class="form-control @error('current_password') is-invalid @enderror"
|
||||
id="current_password"
|
||||
name="current_password"
|
||||
placeholder="Current Password"
|
||||
required>
|
||||
<label for="current_password">Current Password</label>
|
||||
@error('current_password')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- New Password -->
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password"
|
||||
class="form-control @error('password') is-invalid @enderror"
|
||||
id="password"
|
||||
name="password"
|
||||
placeholder="New Password"
|
||||
required>
|
||||
<label for="password">New Password</label>
|
||||
@error('password')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div class="form-floating mb-3">
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="password_confirmation"
|
||||
name="password_confirmation"
|
||||
placeholder="Confirm New Password"
|
||||
required>
|
||||
<label for="password_confirmation">Confirm New Password</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn primary-cta">
|
||||
<i class="bi bi-shield-check"></i>
|
||||
Update Password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Security Card -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-shield-check"></i>
|
||||
Account Security
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="security-status">
|
||||
<div class="status-item">
|
||||
<div class="status-indicator verified">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Email Verified</span>
|
||||
<span class="status-description">Your email is verified and secure</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-item">
|
||||
<div class="status-indicator">
|
||||
<i class="bi bi-clock"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Last Password Change</span>
|
||||
<span class="status-description">{{ $user->updated_at->diffForHumans() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-item">
|
||||
<div class="status-indicator active">
|
||||
<i class="bi bi-circle-fill"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Account Status</span>
|
||||
<span class="status-description">Active and in good standing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preferences Tab -->
|
||||
<div class="tab-content" id="preferences-tab">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-palette"></i>
|
||||
Display Preferences
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ route('account.preferences.update') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="row g-3">
|
||||
<!-- Theme Preference -->
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Theme</label>
|
||||
<select class="form-select" name="theme">
|
||||
<option value="light" selected>Light Theme</option>
|
||||
<option value="dark">Dark Theme</option>
|
||||
<option value="auto">Auto (System)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Language Preference -->
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Language</label>
|
||||
<select class="form-select" name="language">
|
||||
<option value="en" selected>English</option>
|
||||
<option value="es">Español</option>
|
||||
<option value="de">Deutsch</option>
|
||||
<option value="fr">Français</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Timezone -->
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Timezone</label>
|
||||
<select class="form-select" name="timezone">
|
||||
<option value="Europe/Berlin" selected>Europe/Berlin (GMT+1)</option>
|
||||
<option value="America/New_York">America/New_York (GMT-5)</option>
|
||||
<option value="America/Los_Angeles">America/Los_Angeles (GMT-8)</option>
|
||||
<option value="Asia/Tokyo">Asia/Tokyo (GMT+9)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Date Format -->
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Date Format</label>
|
||||
<select class="form-select" name="date_format">
|
||||
<option value="d/m/Y" selected>DD/MM/YYYY</option>
|
||||
<option value="m/d/Y">MM/DD/YYYY</option>
|
||||
<option value="Y-m-d">YYYY-MM-DD</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="submit" class="btn primary-cta">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
Save Preferences
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications Tab -->
|
||||
<div class="tab-content" id="notifications-tab">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-bell"></i>
|
||||
Notification Settings
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ route('account.preferences.update') }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="notification-settings">
|
||||
<!-- Email Notifications -->
|
||||
<div class="notification-group">
|
||||
<h6 class="notification-group-title">Email Notifications</h6>
|
||||
<div class="notification-item">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="email_resume_updates" name="email_resume_updates" checked>
|
||||
<label class="form-check-label" for="email_resume_updates">
|
||||
Resume Updates
|
||||
</label>
|
||||
</div>
|
||||
<small class="text-muted">Get notified when your resume is updated or completed</small>
|
||||
</div>
|
||||
|
||||
<div class="notification-item">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="email_tips" name="email_tips" checked>
|
||||
<label class="form-check-label" for="email_tips">
|
||||
Tips & Suggestions
|
||||
</label>
|
||||
</div>
|
||||
<small class="text-muted">Receive helpful tips for improving your resume</small>
|
||||
</div>
|
||||
|
||||
<div class="notification-item">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="email_security" name="email_security" checked>
|
||||
<label class="form-check-label" for="email_security">
|
||||
Security Alerts
|
||||
</label>
|
||||
</div>
|
||||
<small class="text-muted">Important security notifications about your account</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="submit" class="btn primary-cta">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
Save Notification Settings
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Tab -->
|
||||
<div class="tab-content" id="privacy-tab">
|
||||
<div class="row g-4">
|
||||
<!-- Privacy Settings -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-shield-lock"></i>
|
||||
Privacy Settings
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="privacy-settings">
|
||||
<div class="privacy-item">
|
||||
<div class="privacy-header">
|
||||
<h6>Profile Visibility</h6>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="profile_public" name="profile_public">
|
||||
<label class="form-check-label" for="profile_public"></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="privacy-description">Make your profile visible to other users</p>
|
||||
</div>
|
||||
|
||||
<div class="privacy-item">
|
||||
<div class="privacy-header">
|
||||
<h6>Resume Sharing</h6>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="resume_sharing" name="resume_sharing" checked>
|
||||
<label class="form-check-label" for="resume_sharing"></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="privacy-description">Allow sharing of your resumes via public links</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card settings-card danger-zone">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
Danger Zone
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="danger-description">
|
||||
These actions are permanent and cannot be undone.
|
||||
</p>
|
||||
|
||||
<form method="POST" action="{{ route('profile.destroy') }}" onsubmit="return confirm('Are you sure you want to delete your account? This action cannot be undone.')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger">
|
||||
<i class="bi bi-trash"></i>
|
||||
Delete Account
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Tab functionality
|
||||
const tabBtns = document.querySelectorAll('.tab-btn');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
tabBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const tabId = this.dataset.tab + '-tab';
|
||||
|
||||
// Remove active class from all tabs and contents
|
||||
tabBtns.forEach(b => b.classList.remove('active'));
|
||||
tabContents.forEach(c => c.classList.remove('active'));
|
||||
|
||||
// Add active class to clicked tab and corresponding content
|
||||
this.classList.add('active');
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Password strength indicator
|
||||
const passwordInput = document.getElementById('password');
|
||||
if (passwordInput) {
|
||||
passwordInput.addEventListener('input', function() {
|
||||
// Add password strength validation here if needed
|
||||
});
|
||||
}
|
||||
|
||||
// Form submission loading states
|
||||
const forms = document.querySelectorAll('form');
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = true;
|
||||
const originalText = submitBtn.innerHTML;
|
||||
submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Saving...';
|
||||
|
||||
// Re-enable after 3 seconds to prevent permanent disable on validation errors
|
||||
setTimeout(() => {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerHTML = originalText;
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
233
resources/views/profile/show.blade.php
Normal file
233
resources/views/profile/show.blade.php
Normal file
@@ -0,0 +1,233 @@
|
||||
{{--
|
||||
User Profile - Professional Bootstrap Design
|
||||
Professional Profile Management Page
|
||||
|
||||
@author David Valera Melendez <david@valera-melendez.de>
|
||||
@created 2025-08-09
|
||||
@location Made in Germany 🇩🇪
|
||||
--}}
|
||||
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'My Profile - Professional Resume Builder')
|
||||
@section('page_class', 'profile-page')
|
||||
|
||||
@section('content')
|
||||
<div class="profile-container">
|
||||
<!-- Profile Header Section -->
|
||||
<section class="profile-header">
|
||||
<div class="card profile-header-card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="profile-avatar-container">
|
||||
@if($user->avatar)
|
||||
<img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" class="profile-avatar">
|
||||
@else
|
||||
<div class="profile-avatar-placeholder">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="avatar-edit-badge">
|
||||
<a href="{{ route('profile.edit') }}" class="btn-edit-avatar" title="Edit Avatar">
|
||||
<i class="bi bi-camera"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h1 class="profile-name">{{ $user->name }}</h1>
|
||||
<p class="profile-email">{{ $user->email }}</p>
|
||||
@if($user->phone)
|
||||
<p class="profile-phone">
|
||||
<i class="bi bi-telephone"></i>
|
||||
{{ $user->phone }}
|
||||
</p>
|
||||
@endif
|
||||
<div class="profile-actions">
|
||||
<a href="{{ route('profile.edit') }}" class="btn primary-cta">
|
||||
<i class="bi bi-pencil-square"></i>
|
||||
Edit Profile
|
||||
</a>
|
||||
<a href="{{ route('account.settings') }}" class="btn secondary-cta">
|
||||
<i class="bi bi-gear"></i>
|
||||
Account Settings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Profile Information Section -->
|
||||
<section class="profile-info">
|
||||
<div class="row g-4">
|
||||
<!-- Personal Information Card -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card info-card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-person"></i>
|
||||
Personal Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<label class="info-label">Full Name</label>
|
||||
<span class="info-value">{{ $user->name }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label class="info-label">Email Address</label>
|
||||
<span class="info-value">{{ $user->email }}</span>
|
||||
</div>
|
||||
@if($user->phone)
|
||||
<div class="info-item">
|
||||
<label class="info-label">Phone Number</label>
|
||||
<span class="info-value">{{ $user->phone }}</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="info-item">
|
||||
<label class="info-label">Member Since</label>
|
||||
<span class="info-value">{{ $user->created_at->format('F j, Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Status Card -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card info-card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-shield-check"></i>
|
||||
Account Status
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="status-list">
|
||||
<div class="status-item">
|
||||
<div class="status-indicator verified">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Email Verified</span>
|
||||
<span class="status-description">Your email address is verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-indicator active">
|
||||
<i class="bi bi-circle-fill"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Account Active</span>
|
||||
<span class="status-description">Your account is in good standing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-indicator">
|
||||
<i class="bi bi-clock"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Last Login</span>
|
||||
<span class="status-description">{{ $user->updated_at->diffForHumans() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Biography Section -->
|
||||
@if($user->bio)
|
||||
<section class="profile-bio">
|
||||
<div class="card bio-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-journal-text"></i>
|
||||
About Me
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="bio-text">{{ $user->bio }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<!-- Recent Activity Section -->
|
||||
<section class="profile-activity">
|
||||
<div class="card activity-card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-activity"></i>
|
||||
Recent Activity
|
||||
</h5>
|
||||
<a href="{{ route('resume-builder.index') }}" class="btn btn-outline-primary btn-sm">
|
||||
View All Resumes
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if($user->resumes && $user->resumes->count() > 0)
|
||||
<div class="activity-list">
|
||||
@foreach($user->resumes->take(5) as $resume)
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon">
|
||||
<i class="bi bi-file-earmark-text"></i>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<span class="activity-title">{{ $resume->title ?? 'Untitled Resume' }}</span>
|
||||
<span class="activity-description">
|
||||
Updated {{ $resume->updated_at->diffForHumans() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="activity-actions">
|
||||
<a href="{{ route('resume-builder.edit', $resume) }}" class="btn btn-sm btn-outline-primary">
|
||||
Edit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="bi bi-file-earmark-plus"></i>
|
||||
</div>
|
||||
<h6 class="empty-title">No Resumes Yet</h6>
|
||||
<p class="empty-description">Start building your professional resume today</p>
|
||||
<a href="{{ route('resume-builder.create') }}" class="btn primary-cta">
|
||||
<i class="bi bi-plus-circle"></i>
|
||||
Create Your First Resume
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add smooth animations
|
||||
const cards = document.querySelectorAll('.card');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-fade-in');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
cards.forEach(card => {
|
||||
observer.observe(card);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in New Issue
Block a user