You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- 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
This commit is contained in:
root
@@ -5,86 +5,54 @@
|
||||
$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="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="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>
|
||||
<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>
|
||||
|
||||
<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 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>
|
||||
|
||||
Reference in New Issue
Block a user