You've already forked Atomcms-edit
root
91 lines
3.5 KiB
PHP
Executable File
91 lines
3.5 KiB
PHP
Executable File
@props(['user'])
|
|
|
|
@php
|
|
$staffColor = $user->permission?->staff_color ?? '#eeb425';
|
|
$rankName = $user->permission?->rank_name ?? 'Staff';
|
|
@endphp
|
|
|
|
<style>
|
|
@keyframes sparkle {
|
|
0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
|
|
50% { opacity: 1; transform: scale(1) rotate(180deg); }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% center; }
|
|
100% { background-position: 200% center; }
|
|
}
|
|
.sparkle-effect {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
animation: sparkle 2s infinite;
|
|
}
|
|
.shimmer-text {
|
|
background: linear-gradient(90deg, {{ $staffColor }}, white, {{ $staffColor }});
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmer 3s linear infinite;
|
|
}
|
|
</style>
|
|
|
|
<div class="group relative bg-white dark:bg-gray-800 rounded-2xl overflow-hidden border-2 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl cursor-pointer"
|
|
style="border-color: {{ $staffColor }}40; box-shadow: 0 4px 15px {{ $staffColor }}10;">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-white via-gray-50 to-gray-100 dark:from-gray-800 dark:via-gray-800 dark:to-gray-900 opacity-50"></div>
|
|
|
|
@php
|
|
$sparklePositions = [
|
|
['top' => '10%', 'left' => '15%', 'delay' => '0s'],
|
|
['top' => '20%', 'right' => '10%', 'delay' => '0.5s'],
|
|
['top' => '60%', 'left' => '5%', 'delay' => '1s'],
|
|
['top' => '70%', 'right' => '15%', 'delay' => '1.5s'],
|
|
];
|
|
@endphp
|
|
|
|
@foreach($sparklePositions as $pos)
|
|
<div class="sparkle-effect"
|
|
style="{{ $pos['top'] }}; {{ $pos['left'] ?? '' }}; {{ $pos['right'] ?? '' }}; animation-delay: {{ $pos['delay'] }}; box-shadow: 0 0 6px {{ $staffColor }};">
|
|
</div>
|
|
@endforeach
|
|
|
|
<div class="relative p-5 flex flex-col items-center text-center">
|
|
<div class="relative mb-3">
|
|
<div class="w-22 h-22 rounded-full overflow-hidden border-4 transition-all duration-300 group-hover:scale-110 group-hover:rotate-3"
|
|
style="border-color: {{ $staffColor }}; box-shadow: 0 0 15px {{ $staffColor }}50, inset 0 0 15px {{ $staffColor }}20;">
|
|
<img style="image-rendering: pixelated;"
|
|
src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=3&head_direction=3&gesture=sml&action=wlk%2Cwav&size=l&img_format=gif&size=n"
|
|
alt="{{ $user->username }}"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
@if($user->online)
|
|
<div class="absolute bottom-0 right-0 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800 bg-green-500 animate-pulse"
|
|
style="box-shadow: 0 0 8px #22c55e;"></div>
|
|
@endif
|
|
</div>
|
|
|
|
<a href="{{ route('profile.show', $user->username) }}" class="block group/link">
|
|
<h3 class="text-lg font-extrabold truncate transition-all duration-300 group-hover/link:scale-105 shimmer-text">
|
|
{{ $user->username }}
|
|
</h3>
|
|
</a>
|
|
|
|
<div class="mt-1.5 px-3 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide"
|
|
style="background-color: {{ $staffColor }}15; color: {{ $staffColor }}; border: 1px solid {{ $staffColor }}30;">
|
|
{{ $rankName }}
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3 line-clamp-2 min-h-[2.5rem] px-2">
|
|
{{ $user->motto ?: __('No motto set') }}
|
|
</p>
|
|
|
|
<div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 w-full flex items-center justify-center gap-2 text-xs">
|
|
<span class="flex items-center gap-1.5 font-medium {{ $user->online ? 'text-green-500' : 'text-gray-400' }}">
|
|
<span class="w-2 h-2 rounded-full {{ $user->online ? 'bg-green-500 animate-pulse' : 'bg-gray-400' }}"></span>
|
|
{{ $user->online ? __('Online') : __('Offline') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|