97 lines
4.4 KiB
HTML
97 lines
4.4 KiB
HTML
@if (user() != undefined) {
|
|
<a
|
|
[routerLink]="[user().username ? user().username : user().id]"
|
|
[state]="{ user: user(), profile }"
|
|
class="block group"
|
|
>
|
|
<!-- Card du profil -->
|
|
<div
|
|
class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
|
|
>
|
|
<!-- Badge vérifié (position absolue en haut à droite) -->
|
|
@if (profile.estVerifier) {
|
|
<div class="absolute top-3 right-3 z-10 animate-pulse-slow">
|
|
<div class="bg-purple-500/20 backdrop-blur-md p-2 rounded-full">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="w-6 h-6 text-purple-500"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Partie supérieure avec avatar -->
|
|
<div class="p-6 text-center">
|
|
<!-- Avatar avec bordure gradient -->
|
|
<div class="relative inline-block mb-4">
|
|
<div class="w-32 h-32 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1">
|
|
@if (user().avatar) {
|
|
<img
|
|
class="w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-105"
|
|
src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{ user().avatar }}"
|
|
alt="{{ user().username }}"
|
|
loading="lazy"
|
|
/>
|
|
} @else {
|
|
<img
|
|
class="w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-105"
|
|
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
|
|
alt="{{ user().username }}"
|
|
loading="lazy"
|
|
/>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nom -->
|
|
@if (user().name) {
|
|
<h3
|
|
class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
|
|
>
|
|
{{ user().name }}
|
|
</h3>
|
|
} @else if (user().username) {
|
|
<h3
|
|
class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
|
|
>
|
|
{{ user().username }}
|
|
</h3>
|
|
} @else {
|
|
<h3 class="text-lg font-bold text-gray-500 dark:text-gray-400 mb-2">Non mentionné</h3>
|
|
}
|
|
|
|
<!-- Profession -->
|
|
<p class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">
|
|
{{ profile.profession || 'Profession non renseignée' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Partie inférieure avec infos -->
|
|
<div class="px-6 pb-6 space-y-3 border-t border-gray-100 dark:border-gray-700">
|
|
<div class="pt-3">
|
|
<button
|
|
class="block w-full select-none rounded-lg bg-pink-500 py-3.5 px-7 text-center align-middle font-sans text-sm font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
|
|
type="button"
|
|
data-ripple-light="true"
|
|
>
|
|
<small>En savoir plus</small>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indicateur de hover (bordure animée) -->
|
|
<div
|
|
class="absolute inset-0 border-2 border-transparent group-hover:border-indigo-500 rounded-xl transition-all duration-300 pointer-events-none"
|
|
></div>
|
|
</div>
|
|
</a>
|
|
}
|