w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update profile pages design

Browse Source
This commit is contained in:
w33b
2026-07-25 13:54:21 +02:00
parent 2b1a967065
commit 5af1c3c447
17 changed files with 1031 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/profile/partials/profile.blade.php
+67 -14
View File
@@ -1,15 +1,68 @@
<div
class="overflow-hidden relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl flex items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
<img class="absolute -left-6 w-24 h-24 rounded-full shadow-lg" src="{{ $user->getAvatar() }}">
<div class="flex flex-col py-5 pl-24">
<strong class="text-slate-900 text-xl font-bold dark:text-slate-200">
{{ $user->name }}
@if ($user->hasRole(\App\Enums\UserRole::SUPPORTER))
<a data-te-toggle="tooltip" title="Badge of appreciation for the horny people supporting us! :3"><i
class="fa-solid fa-hand-holding-heart text-rose-600 animate-pulse"></i></a>
@endif
</strong>
<span class="text-slate-500 text-sm font-medium dark:text-slate-400">Joined
{{ $user->created_at->format('Y-m') }}</span>
<div class="overflow-hidden rounded-xl bg-white/40 shadow-lg ring-1 ring-black/5 dark:bg-neutral-950/40 backdrop-blur dark:ring-white/10">
<div class="relative">
{{-- Profile Banner Gradient --}}
<div class="h-20 bg-gradient-to-br from-rose-500 via-rose-600 to-pink-600 dark:from-rose-700 dark:via-rose-800 dark:to-pink-800"></div>
{{-- Avatar overlapping the banner --}}
<div class="flex justify-center -mt-10">
<div class="relative">
<img class="h-20 w-20 rounded-full border-4 border-white dark:border-neutral-900 shadow-lg object-cover bg-white dark:bg-neutral-800"
src="{{ auth()->user()->getAvatar() }}"
alt="{{ auth()->user()->name }}">
@if(auth()->user()->hasRole(\App\Enums\UserRole::SUPPORTER))
<span class="absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-rose-600 text-white shadow-md ring-2 ring-white dark:ring-neutral-900"
data-te-toggle="tooltip"
title="Badge of appreciation for the horny people supporting us! :3">
<i class="fa-solid fa-heart text-[11px]"></i>
</span>
@endif
</div>
</div>
{{-- User Info --}}
<div class="px-4 pb-4 pt-2 text-center">
<h2 class="text-base font-bold text-gray-900 dark:text-gray-100 truncate">
{{ auth()->user()->name }}
</h2>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
Joined {{ auth()->user()->created_at->format('F Y') }}
</p>
</div>
{{-- Quick Stats Row --}}
<div class="grid grid-cols-4 border-t border-gray-200/60 dark:border-neutral-800/60">
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
{{ number_format(auth()->user()->watched->count()) }}
</div>
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
Views
</div>
</div>
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
{{ number_format(auth()->user()->commentCount()) }}
</div>
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
Cmts
</div>
</div>
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
{{ number_format(auth()->user()->likes()) }}
</div>
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
Likes
</div>
</div>
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
{{ number_format(auth()->user()->playlists->count()) }}
</div>
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
Lists
</div>
</div>
</div>
</div>
</div>
</div>