V2, better design, more functionalities.

This commit is contained in:
Roberto Guagliardo
2025-07-09 01:22:29 +02:00
parent b324c030f4
commit 2c5d7102ab
87 changed files with 2273 additions and 178 deletions

View File

@@ -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>