V2, better design, more functionalities.
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
</div>
|
||||
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
|
||||
<div class="mb-4 font-medium text-sm text-green-600 dark:text-sitiweb-green">
|
||||
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@props(['status'])
|
||||
|
||||
@if ($status)
|
||||
<div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600 dark:text-green-400']) }}>
|
||||
<div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600 dark:text-sitiweb-green']) }}>
|
||||
{{ $status }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -11,12 +11,12 @@
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">{{ $education->startdatum }} – {{ $education->einddatum ?? 'heden' }}</p>
|
||||
<p class="mt-2 text-gray-700 dark:text-gray-300">{{ $education->beschrijving }}</p>
|
||||
|
||||
@if ($education->getFirstMediaUrl('afbeelding'))
|
||||
<img src="{{ $education->getFirstMediaUrl('afbeelding') }}" class="mt-4 w-32 h-auto rounded" />
|
||||
@if ($education->image())
|
||||
<img src="{{ $education->imageUrl() }}" class="mt-4 w-32 h-auto rounded" />
|
||||
@endif
|
||||
|
||||
<div class="mt-4 space-x-2">
|
||||
<a href="{{ route('educations.edit', $education) }}" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">Bewerk</a>
|
||||
<a href="{{ route('educations.edit', $education) }}" class="px-3 py-1 bg-green-400 text-white rounded hover:bg-blue-600">Bewerk</a>
|
||||
|
||||
<form action="{{ route('educations.destroy', $education) }}" method="POST" class="inline-block" onsubmit="return confirm('Weet je zeker dat je dit wilt verwijderen?')">
|
||||
@csrf
|
||||
|
||||
24
resources/views/frontend/_card.blade.php
Normal file
24
resources/views/frontend/_card.blade.php
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="p-4 bg-white dark:bg-gray-800 rounded shadow">
|
||||
<h3 class="text-lg font-bold text-gray-800 dark:text-white">{{ $skill->title }}</h3>
|
||||
|
||||
@if($skill->type === 'rating')
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Beoordeling: {{ $skill->rating }}/10</p>
|
||||
@endif
|
||||
|
||||
@if($skill->description)
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">{{ $skill->description }}</p>
|
||||
@endif
|
||||
|
||||
@if ($skill->getFirstMediaUrl('image'))
|
||||
<img src="{{ $skill->getFirstMediaUrl('image') }}" alt="{{ $skill->title }}" class="mt-2 max-w-full h-32 object-contain rounded">
|
||||
@endif
|
||||
|
||||
<div class="mt-4 flex justify-between">
|
||||
<a href="{{ route('skills.edit', $skill) }}" class="text-blue-600 hover:underline">Bewerken</a>
|
||||
<form action="{{ route('skills.destroy', $skill) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit wilt verwijderen?')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="text-red-600 hover:underline">Verwijderen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
115
resources/views/frontend/cta.blade.php
Normal file
115
resources/views/frontend/cta.blade.php
Normal file
@@ -0,0 +1,115 @@
|
||||
<!-- Call to Action -->
|
||||
<section
|
||||
class="text-center lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10 space-y-4">
|
||||
|
||||
<h2 class="text-2xl font-semibold">
|
||||
<i class="fa-solid fa-paper-plane mr-2 text-sitiweb-green"></i> Wat kan ik voor jou betekenen?
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-600 dark:text-gray-300 text-sm">
|
||||
📬 Ook beschikbaar voor freelance opdrachten of samenwerkingen. <br>
|
||||
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center gap-4 mt-4 flex-wrap">
|
||||
<button onclick="openContactModal()"
|
||||
class="px-5 py-2 bg-sitiweb-green text-white rounded-full text-sm font-medium hover:bg-green-700 transition">
|
||||
<i class="fa-solid fa-envelope mr-2"></i> Contact opnemen
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Modal -->
|
||||
<div id="contact-modal" class="fixed inset-0 z-50 hidden bg-black/50 flex items-center justify-center">
|
||||
<div class="bg-white dark:bg-zinc-900 rounded-lg shadow-lg max-w-md w-full p-6 space-y-4">
|
||||
<h3 class="text-xl font-semibold text-zinc-800 dark:text-white">Stuur een bericht</h3>
|
||||
<form id="contact-form" class="space-y-4">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Naam</label>
|
||||
<input type="text" id="name" name="name" required
|
||||
class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mail
|
||||
(optioneel)</label>
|
||||
<input type="email" id="email" name="email"
|
||||
class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Telefoonnummer
|
||||
(optioneel)</label>
|
||||
<input type="tel" id="phone" name="phone"
|
||||
class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Bericht</label>
|
||||
<textarea id="message" name="message" required rows="4"
|
||||
class="w-full mt-1 px-3 py-2 border border-zinc-300 rounded-md focus:outline-none focus:ring-2 focus:ring-sitiweb-green dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"></textarea>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" onclick="closeContactModal()"
|
||||
class="px-4 py-2 text-sm bg-zinc-200 text-zinc-800 rounded-md hover:bg-zinc-300 dark:bg-zinc-700 dark:text-white dark:hover:bg-zinc-600">
|
||||
Annuleren
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 text-sm bg-sitiweb-green text-white rounded-md hover:bg-green-700">
|
||||
Versturen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function openContactModal() {
|
||||
document.getElementById('contact-modal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeContactModal() {
|
||||
document.getElementById('contact-modal').classList.add('hidden');
|
||||
}
|
||||
|
||||
document.getElementById('contact-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const message = document.getElementById('message').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch('/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
|
||||
'content'),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name,
|
||||
message,
|
||||
email,
|
||||
phone
|
||||
}),
|
||||
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert('Bericht succesvol verzonden!');
|
||||
closeContactModal();
|
||||
this.reset();
|
||||
} else {
|
||||
alert('Er ging iets mis bij het verzenden.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fout:', error);
|
||||
alert('Netwerkfout bij verzenden.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -1,9 +1,19 @@
|
||||
@foreach ($education as $item)
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-2">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{{ $item->opleiding }}
|
||||
<span class="teitemxt-gray-500 dark:text-gray-400 font-normal">– {{ $item->instituut }}</span>
|
||||
</h3>
|
||||
<hr role="presentation" class="w-full border-t border-zinc-950/10 dark:border-white/10 my-8">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-4">
|
||||
@if ($item->image())
|
||||
<img src="{{ $item->imageUrl() }}" alt="{{ $item->title }}"
|
||||
class="w-12 h-12 rounded-md shadow-md object-contain bg-white dark:bg-gray-700 p-1">
|
||||
@endif
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
|
||||
|
||||
{{ $item->opleiding }}
|
||||
<span class="teitemxt-gray-500 dark:text-gray-400 font-normal">– {{ $item->instituut }}</span>
|
||||
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 italic">
|
||||
{{ \Carbon\Carbon::parse($item->startdatum)->translatedFormat('Y') }}
|
||||
|
||||
@@ -1,44 +1,39 @@
|
||||
<ul class="space-y-4">
|
||||
@foreach($personalia as $item)
|
||||
<li class="flex items-start gap-4">
|
||||
<i class="fa fa-{{ $item->icon }} text-blue-600 text-xl mt-1"></i>
|
||||
@foreach ($personalia as $item)
|
||||
<li class="flex items-start gap-4 hover:scale-105 transition hover:shadow-lg">
|
||||
<i class="fa fa-{{ $item->icon }} text-gray-800 dark:text-gray-400 text-xl mt-1"></i>
|
||||
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-700 dark:text-gray-200">{{ ucfirst($item->key) }}</p>
|
||||
|
||||
@if($item->hidden)
|
||||
@if ($item->hidden)
|
||||
@php
|
||||
// 1. Vervang <br>-tags door spaties
|
||||
$cleanValue = str_ireplace(['<br>', '<br/>', '<br />'], ' ', $item->value);
|
||||
// 1. Vervang <br>-tags door spaties
|
||||
$cleanValue = str_ireplace(['<br>', '<br/>', '<br />'], ' ', $item->value);
|
||||
|
||||
// 2. Verwijder alle andere HTML-tags
|
||||
$cleanValue = strip_tags($cleanValue);
|
||||
|
||||
// 3. Maskeren vanaf derde teken, spaties zichtbaar houden
|
||||
$masked = '';
|
||||
$chars = mb_str_split($cleanValue); // Split veilig per karakter
|
||||
|
||||
foreach ($chars as $i => $char) {
|
||||
if ($i < 2) {
|
||||
$masked .= $char;
|
||||
} elseif ($char === ' ') {
|
||||
$masked .= ' ';
|
||||
} else {
|
||||
$masked .= '*';
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<button
|
||||
class="text-gray-500 text-left dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-mono"
|
||||
onclick="revealValue({{ $item->id }}, this)"
|
||||
data-placeholder="{{ $masked }}"
|
||||
>
|
||||
{{ $masked }}
|
||||
</button>
|
||||
// 2. Verwijder alle andere HTML-tags
|
||||
$cleanValue = strip_tags($cleanValue);
|
||||
|
||||
// 3. Maskeren vanaf derde teken, spaties zichtbaar houden
|
||||
$masked = '';
|
||||
$chars = mb_str_split($cleanValue); // Split veilig per karakter
|
||||
|
||||
foreach ($chars as $i => $char) {
|
||||
if ($i < 2) {
|
||||
$masked .= $char;
|
||||
} elseif ($char === ' ') {
|
||||
$masked .= ' ';
|
||||
} else {
|
||||
$masked .= '*';
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<button
|
||||
class="text-gray-500 text-left dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-mono"
|
||||
onclick="revealValue({{ $item->id }}, this)" data-placeholder="{{ $masked }}">
|
||||
{{ $masked }}
|
||||
</button>
|
||||
@else
|
||||
<p class="text-gray-800 dark:text-white">{{ $item->value }}</p>
|
||||
@endif
|
||||
@@ -47,17 +42,17 @@
|
||||
@endforeach
|
||||
</ul>
|
||||
<script>
|
||||
function revealValue(id, el) {
|
||||
fetch(`/getPersonalia/${id}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
el.innerHTML = data.value; // Gebruik innerHTML om HTML-opmaak te ondersteunen
|
||||
el.classList.remove('hover:text-gray-800', 'dark:hover:text-white');
|
||||
el.classList.add('text-gray-800', 'dark:text-white');
|
||||
el.removeAttribute('onclick');
|
||||
})
|
||||
.catch(() => {
|
||||
el.textContent = '[mislukt ophalen]';
|
||||
});
|
||||
}
|
||||
function revealValue(id, el) {
|
||||
fetch(`/getPersonalia/${id}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
el.innerHTML = data.value; // Gebruik innerHTML om HTML-opmaak te ondersteunen
|
||||
el.classList.remove('hover:text-gray-800', 'dark:hover:text-white');
|
||||
el.classList.add('text-gray-800', 'dark:text-white');
|
||||
el.removeAttribute('onclick');
|
||||
})
|
||||
.catch(() => {
|
||||
el.textContent = '[mislukt ophalen]';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
@if (isset($skills['tag']))
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($skills['tag'] as $skill)
|
||||
<span
|
||||
class="inline-block hover:scale-105 transition hover:shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-sm px-3 py-1 rounded">
|
||||
|
||||
{{ $skill->title }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (isset($skills['rating']))
|
||||
|
||||
@foreach ($skills['rating'] as $skill)
|
||||
<hr role="presentation" class="w-full border-t border-zinc-950/10 dark:border-white/10 my-8">
|
||||
<div class="space-y-4 flex flex-col gap-4">
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
@if ($skill->image())
|
||||
<img src="{{ $skill->imageUrl() }}" alt="{{ $skill->title }}"
|
||||
class="w-12 h-12 rounded-md shadow-md object-contain bg-white dark:bg-gray-700 p-1 hover:scale-125 transition hover:shadow-lg">
|
||||
@endif
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{{ $skill->title }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{{-- Rating bar --}}
|
||||
<div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300 italic mb-1">
|
||||
Beoordeling: {{ $skill->rating }}/10
|
||||
</div>
|
||||
<div class="w-full h-3 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-sitiweb-green transition-all duration-300"
|
||||
style="width: {{ $skill->rating * 10 }}%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($skill->description)
|
||||
<div class="text-gray-800 dark:text-gray-100 prose dark:prose-invert max-w-prose text-sm">
|
||||
{!! nl2br(e($skill->description)) !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@endif
|
||||
|
||||
|
||||
@if (isset($skills['other']))
|
||||
<div class="flex flex-wrap gap-4 mt-8">
|
||||
@foreach ($skills['other'] as $skill)
|
||||
<div class="flex flex-col items-center w-16">
|
||||
|
||||
@if ($skill->getFirstMediaUrl('image'))
|
||||
<img src="{{ $skill->getFirstMediaUrl('image') }}" alt="{{ $skill->title }}"
|
||||
class="w-10 h-10 object-contain mb-1 hover:scale-125 transition hover:shadow-lg" >
|
||||
@endif
|
||||
<span class="text-xs text-center text-gray-700 dark:text-gray-300">{{ $skill->title }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
@foreach ($experience as $item)
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow space-y-2">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{{ $item->functie }} <span class="text-gray-500 dark:text-gray-400 font-normal">bij {{ $item->werkgever }}</span>
|
||||
</h3>
|
||||
<hr role="presentation" class="w-full border-t border-zinc-950/10 dark:border-white/10 my-8">
|
||||
<div class=" space-y-2">
|
||||
<div class="flex items-center gap-4">
|
||||
@if ($item->image())
|
||||
<img src="{{ $item->imageUrl() }}" alt="{{ $item->title }}"
|
||||
class="w-12 h-12 rounded-md shadow-md object-contain bg-white dark:bg-gray-700 p-1">
|
||||
@endif
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{{ $item->functie }} <span class="text-gray-500 dark:text-gray-400 font-normal">bij
|
||||
{{ $item->werkgever }}</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 italic">
|
||||
{{ \Carbon\Carbon::parse($item->startdatum)->translatedFormat('F Y') }}
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@stack('scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</p>
|
||||
|
||||
@if (session('status') === 'verification-link-sent')
|
||||
<p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
|
||||
<p class="mt-2 font-medium text-sm text-green-600 dark:text-sitiweb-green">
|
||||
{{ __('A new verification link has been sent to your email address.') }}
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@@ -1,24 +1,57 @@
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Type</label>
|
||||
<select id="type" name="type" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
|
||||
<option value="rating" @selected(old('type', $skill->type ?? 'rating') === 'rating')>Rating</option>
|
||||
<option value="tag" @selected(old('type', $skill->type ?? '') === 'tag')>Tag</option>
|
||||
<option value="other" @selected(old('type', $skill->type ?? '') === 'other')>Overig</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Titel</label>
|
||||
<input type="text" id="title" name="title" value="{{ old('title', $skill->title ?? '') }}" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="description-field">
|
||||
|
||||
<label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beschrijving</label>
|
||||
<textarea id="description" name="description" rows="4" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">{{ old('description', $skill->description ?? '') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beoordeling (1–10)</label>
|
||||
<input type="number" id="rating" name="rating" min="1" max="10" value="{{ old('rating', $skill->rating ?? 5) }}" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Afbeelding</label>
|
||||
<input type="file" id="image" name="image" class="mt-1 text-gray-800 dark:text-gray-100">
|
||||
@if (!empty($skill) && $skill->getFirstMediaUrl('image'))
|
||||
<img src="{{ $skill->getFirstMediaUrl('image') }}" class="mt-2 max-w-xs rounded">
|
||||
@endif
|
||||
</div>
|
||||
<div id="rating-field">
|
||||
<label for="rating" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beoordeling (1–10)</label>
|
||||
<input type="number" id="rating" name="rating" min="1" max="10" value="{{ old('rating', $skill->rating ?? 5) }}" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
|
||||
</div>
|
||||
|
||||
<div id="image-field">
|
||||
<label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Afbeelding</label>
|
||||
<input type="file" id="image" name="image" class="mt-1 text-gray-800 dark:text-gray-100">
|
||||
@if (!empty($skill) && $skill->getFirstMediaUrl('image'))
|
||||
<img src="{{ $skill->getFirstMediaUrl('image') }}" class="mt-2 max-w-xs rounded">
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@push('scripts')
|
||||
|
||||
<script>
|
||||
function toggleFields() {
|
||||
const type = document.getElementById('type').value;
|
||||
|
||||
// Rating alleen tonen bij type = rating
|
||||
document.getElementById('rating-field').style.display = (type === 'rating') ? 'block' : 'none';
|
||||
|
||||
// Image tonen bij rating en other
|
||||
document.getElementById('image-field').style.display = (type === 'rating' || type === 'other') ? 'block' : 'none';
|
||||
|
||||
// Beschrijving alleen tonen bij rating
|
||||
document.getElementById('description-field').style.display = (type === 'rating') ? 'block' : 'none';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.getElementById('type').addEventListener('change', toggleFields);
|
||||
toggleFields(); // initial
|
||||
});
|
||||
</script>
|
||||
|
||||
@endpush
|
||||
|
||||
@@ -1,27 +1,51 @@
|
||||
<x-app-layout>
|
||||
<div class="p-6">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Vaardigheden</h2>
|
||||
<a href="{{ route('skills.create') }}" class="mb-4 inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Nieuwe vaardigheid</a>
|
||||
<div class="p-6 space-y-10">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Vaardigheden</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach ($skills as $skill)
|
||||
<div class="p-4 bg-white dark:bg-gray-800 rounded shadow">
|
||||
<h3 class="text-lg font-bold text-gray-800 dark:text-white">{{ $skill->title }}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Beoordeling: {{ $skill->rating }}/10</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">{{ $skill->description }}</p>
|
||||
@if ($skill->getFirstMediaUrl('image'))
|
||||
<img src="{{ $skill->getFirstMediaUrl('image') }}" alt="{{ $skill->title }}" class="mt-2 max-w-full h-32 object-contain rounded">
|
||||
@endif
|
||||
<div class="mt-4 flex justify-between">
|
||||
<a href="{{ route('skills.edit', $skill) }}" class="text-blue-600 hover:underline">Bewerken</a>
|
||||
<form action="{{ route('skills.destroy', $skill) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit wilt verwijderen?')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="text-red-600 hover:underline">Verwijderen</button>
|
||||
</form>
|
||||
</div>
|
||||
<a href="{{ route('skills.create') }}" class="inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
||||
Nieuwe vaardigheid
|
||||
</a>
|
||||
|
||||
@php
|
||||
$groupedSkills = $skills->groupBy('type');
|
||||
@endphp
|
||||
|
||||
{{-- Rating --}}
|
||||
@if($groupedSkills->has('rating'))
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Ratings</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach ($groupedSkills['rating'] as $skill)
|
||||
@include('frontend._card', ['skill' => $skill])
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Tags --}}
|
||||
@if($groupedSkills->has('tag'))
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Tags</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach ($groupedSkills['tag'] as $skill)
|
||||
<span class="inline-block bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded">
|
||||
{{ $skill->title }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Overig --}}
|
||||
@if($groupedSkills->has('other'))
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Overige vaardigheden</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach ($groupedSkills['other'] as $skill)
|
||||
@include('frontend._card', ['skill' => $skill])
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,4 +1,6 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="werkgever" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Werkgever</label>
|
||||
@@ -32,6 +34,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<label for="beschrijving" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Beschrijving</label>
|
||||
<textarea id="beschrijving" name="beschrijving" rows="4" class="mt-1 w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">{{ old('beschrijving', $workExperience->beschrijving ?? '') }}</textarea>
|
||||
</div>
|
||||
@@ -39,8 +42,9 @@
|
||||
<div>
|
||||
<label for="afbeelding" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Afbeelding</label>
|
||||
<input type="file" id="afbeelding" name="afbeelding" class="mt-1 text-gray-800 dark:text-gray-100">
|
||||
@if (!empty($workExperience) && $workExperience->getFirstMediaUrl('afbeelding'))
|
||||
<img src="{{ $workExperience->getFirstMediaUrl('afbeelding') }}" class="mt-2 max-w-xs rounded">
|
||||
|
||||
@if (!empty($workExperience) && $workExperience->image())
|
||||
<img src="{{ $workExperience->imageUrl() }}" class="mt-2 max-w-xs rounded">
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
|
||||
@if (session('success'))
|
||||
<div class="mb-4 text-green-700 dark:text-green-400">{{ session('success') }}</div>
|
||||
<div class="mb-4 text-green-700 dark:text-sitiweb-green">{{ session('success') }}</div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-4">
|
||||
@@ -20,7 +20,7 @@
|
||||
<p class="mt-2 text-gray-700 dark:text-gray-200">{{ $experience->beschrijving }}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="{{ route('work-experiences.edit', $experience) }}" class="text-blue-500 hover:underline">Bewerken</a>
|
||||
<a href="{{ route('work-experiences.edit', $experience) }}" class="text-sitiweb-green hover:underline">Bewerken</a>
|
||||
<form method="POST" action="{{ route('work-experiences.destroy', $experience) }}">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
@@ -28,8 +28,8 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@if ($experience->getFirstMediaUrl('afbeelding'))
|
||||
<img src="{{ $experience->getFirstMediaUrl('afbeelding') }}" class="mt-4 max-w-xs rounded">
|
||||
@if ($experience->image())
|
||||
<img src="{{ $experience->imageUrl() }}" class="mt-4 max-w-xs rounded">
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
Reference in New Issue
Block a user