You've already forked Atomcms-edit
root
c53a5a8a2c
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
59 lines
2.9 KiB
PHP
Executable File
59 lines
2.9 KiB
PHP
Executable File
@props(['user'])
|
|
|
|
@php
|
|
$staffColor = $user->permission?->staff_color ?? '#eeb425';
|
|
$rankName = $user->permission?->rank_name ?? 'Staff';
|
|
@endphp
|
|
|
|
<div class="relative rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"
|
|
style="background-color: var(--color-surface, #ffffff); border: 2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);">
|
|
<div class="relative w-full p-4">
|
|
<div class="absolute top-3 right-3 z-20 flex flex-col items-center gap-2">
|
|
<div class="rounded-md overflow-hidden flex justify-center items-center"
|
|
style="width: 40px; height: 40px; border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
|
|
<img src="{{ asset('assets/images/country/default.png') }}" alt="Flag" class="object-cover w-full h-full" />
|
|
</div>
|
|
<div class="px-2 py-1 rounded-full flex items-center justify-center"
|
|
style="background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
|
|
@if($user->online)
|
|
<span class="w-3 h-3 rounded-full bg-green-500 animate-pulse inline-block"></span>
|
|
@else
|
|
<span class="w-3 h-3 rounded-full bg-gray-400 inline-block"></span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex-shrink-0">
|
|
<div class="relative"
|
|
style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid {{ $staffColor }};">
|
|
<img src="{{ setting('avatar_imager') }}{{ $user->look }}&headonly=0&direction=3&size=n&gesture=nrm"
|
|
alt="{{ $user->username }}"
|
|
class="object-cover object-top absolute inset-0"
|
|
style="margin-top: -16px; margin-left: 5px;" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<a href="{{ route('profile.show', $user->username) }}"
|
|
class="text-lg font-bold truncate transition hover:opacity-80"
|
|
style="color: var(--color-text, #1f2937);">{{ $user->username }}</a>
|
|
@if($user->permission?->job_description)
|
|
<span class="px-2 py-0.5 text-xs font-medium rounded-full whitespace-nowrap"
|
|
style="background-color: color-mix(in srgb, {{ $staffColor }} 20%, transparent); color: {{ $staffColor }};">{{ $user->permission->job_description }}</span>
|
|
@endif
|
|
</div>
|
|
<div class="flex gap-2 flex-wrap">
|
|
@if($user->permission?->badge)
|
|
<div class="rounded-md overflow-hidden flex justify-center items-center"
|
|
style="width: 50px; height: 50px; border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
|
|
<img src="{{ asset(setting('badges_path') . $user->permission->badge . '.gif') }}" alt="Staff Badge" class="object-cover" />
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|