Update profile pages design
This commit is contained in:
@@ -1,9 +1,123 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
|
||||
<div class="grid md:grid-flow-col gap-4 w-5/6 flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
@include('profile.partials.info')
|
||||
<x-profile-layout>
|
||||
<div class="space-y-6">
|
||||
{{-- Welcome Banner --}}
|
||||
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-rose-600 via-rose-700 to-pink-700 p-6 sm:p-8 text-white shadow-xl shadow-rose-600/20">
|
||||
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-50"></div>
|
||||
<div class="relative z-10">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold">Welcome back, {{ $user->name }}!</h1>
|
||||
<p class="mt-2 text-rose-100 text-sm sm:text-base max-w-4xl">
|
||||
Here's an overview of your activity on hstream.moe. Dive back into your favorites or discover something new.
|
||||
</p>
|
||||
</div>
|
||||
{{-- Decorative circles --}}
|
||||
<div class="absolute -top-10 -right-10 h-40 w-40 rounded-full bg-white/5 blur-2xl"></div>
|
||||
<div class="absolute -bottom-10 -left-10 h-32 w-32 rounded-full bg-white/5 blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
{{-- Quick Links Grid --}}
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-3 sm:gap-4">
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="group rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-4 sm:p-5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-rose-100 dark:bg-rose-900/40 text-rose-600 dark:text-rose-400 group-hover:scale-110 transition-transform duration-200">
|
||||
<i class="fa-solid fa-heart text-lg"></i>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Liked Episodes</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($user->likes()) }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Episodes you've liked</p>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="group rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-4 sm:p-5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-sky-100 dark:bg-sky-900/40 text-sky-600 dark:text-sky-400 group-hover:scale-110 transition-transform duration-200">
|
||||
<i class="fa-solid fa-eye text-lg"></i>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Watch History</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($user->watched->count()) }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Episodes watched</p>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="group rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-4 sm:p-5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-100 dark:bg-violet-900/40 text-violet-600 dark:text-violet-400 group-hover:scale-110 transition-transform duration-200">
|
||||
<i class="fa-solid fa-rectangle-list text-lg"></i>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Your Playlists</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($user->playlists->count()) }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Custom collections</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Recent Activity Section --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-5 sm:p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-5 flex items-center gap-2">
|
||||
<i class="fa-solid fa-clock-rotate-left text-rose-500"></i>
|
||||
Recent Activity
|
||||
</h3>
|
||||
|
||||
@php
|
||||
$recentWatched = $user->watched()->with('episode')->latest()->take(4)->get();
|
||||
$recentComments = $user->comments()->latest()->take(2)->get();
|
||||
@endphp
|
||||
|
||||
@if($recentWatched->isEmpty() && $recentComments->isEmpty())
|
||||
<div class="text-center py-10">
|
||||
<div class="inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
|
||||
<i class="fa-solid fa-ghost text-2xl text-gray-400 dark:text-gray-500"></i>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm">No activity yet. Start watching something!</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-4">
|
||||
{{-- Recently Watched --}}
|
||||
@if($recentWatched->isNotEmpty())
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-500 mb-3">Recently Watched</p>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
@foreach($recentWatched as $watched)
|
||||
<a href="{{ route('hentai.index', ['title' => $watched->episode->slug]) }}"
|
||||
class="group relative overflow-hidden rounded-lg bg-gray-100 dark:bg-neutral-800 aspect-video block">
|
||||
<img src="{{ $watched->episode->gallery->first()->thumbnail_url ?? '/images/default-avatar.webp' }}"
|
||||
alt="{{ $watched->episode->title }}"
|
||||
class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
loading="lazy">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<p class="absolute bottom-2 left-2 right-2 text-xs text-white font-medium truncate">
|
||||
{{ $watched->episode->title }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Recent Comments --}}
|
||||
@if($recentComments->isNotEmpty())
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-500 mb-3">Recent Comments</p>
|
||||
<div class="space-y-2">
|
||||
@foreach($recentComments as $comment)
|
||||
<a href="{{ route('hentai.index', ['title' => $comment->commentable->slug ?? '#']) }}#comment-{{ $comment->id }}"
|
||||
class="block rounded-lg bg-gray-50/70 dark:bg-neutral-900/50 p-3 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors">
|
||||
<div class="text-sm text-gray-700 dark:text-gray-200 line-clamp-2">
|
||||
{!! $comment->presenter()->markdownBody() !!}
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-400/80 mt-1.5">
|
||||
{{ $comment->presenter()->relativeCreatedAt() }}
|
||||
</p>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
Reference in New Issue
Block a user