Update profile pages design
This commit is contained in:
@@ -1,19 +1,27 @@
|
||||
@auth
|
||||
<div
|
||||
class="overflow-hidden mt-5 relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
|
||||
<div class="flex flex-col p-2">
|
||||
<a class="block w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if(request()->routeIs('profile.settings')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"
|
||||
href="{{ route('profile.settings') }}"><i class="fa-solid fa-gear pr-4"></i>
|
||||
Settings</a>
|
||||
<div class="mt-5 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="flex flex-col p-1.5">
|
||||
|
||||
<a href="{{ route('profile.settings') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.settings'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-gear w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.settings')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
Settings
|
||||
</a>
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<button type="submit"
|
||||
class="block w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-right-from-bracket pr-4"></i>
|
||||
Logout</button>
|
||||
class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-red-50/60 dark:hover:bg-red-950/40 hover:text-red-600 dark:hover:text-red-400 border-l-[3px] border-transparent transition-all duration-150">
|
||||
<i class="fa-solid fa-right-from-bracket w-5 text-center text-base text-gray-400 dark:text-gray-500"></i>
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
@endauth
|
||||
@@ -0,0 +1,86 @@
|
||||
<div class="md:hidden mt-5 -mx-1">
|
||||
<nav class="flex gap-1 overflow-x-auto pb-2 scrollbar-hide">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.show'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-user text-[10px]"></i>
|
||||
{{ __('nav.profile') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.notifications'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-bell text-[10px]"></i>
|
||||
Notifications
|
||||
@php $unreadCount = auth()->user()->unreadNotifications()->count(); @endphp
|
||||
@if($unreadCount > 0)
|
||||
<span class="inline-flex items-center justify-center h-4 min-w-[16px] rounded-full bg-rose-500 px-1 text-[9px] font-bold text-white">
|
||||
{{ $unreadCount > 99 ? '99+' : $unreadCount }}
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.likes'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-heart text-[10px]"></i>
|
||||
{{ __('nav.likes') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('user.watched'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-eye text-[10px]"></i>
|
||||
{{ __('nav.watched') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.comments'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-comment text-[10px]"></i>
|
||||
{{ __('nav.comments') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.playlists'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-rectangle-list text-[10px]"></i>
|
||||
{{ __('nav.playlists') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.settings') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.settings'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-gear text-[10px]"></i>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -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>
|
||||
@@ -1,37 +1,96 @@
|
||||
<div class="flex flex-col">
|
||||
<div>
|
||||
{{-- Profile Card --}}
|
||||
@include('profile.partials.profile')
|
||||
|
||||
<div
|
||||
class="overflow-hidden mt-5 relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
|
||||
<div class="flex flex-col p-2">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.show')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-user pr-4"></i> {{ __('nav.profile') }}</a>
|
||||
{{-- Desktop Navigation (hidden on mobile) --}}
|
||||
<div class="hidden md:block">
|
||||
<nav
|
||||
class="mt-5 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="flex flex-col p-1.5">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.show'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-user w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.show')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.profile') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.notifications')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-bell pr-4"></i> Notifications</a>
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.notifications'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-bell w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.notifications')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>Notifications</span>
|
||||
@php $unreadCount = auth()->user()->unreadNotifications()->count(); @endphp
|
||||
@if($unreadCount > 0)
|
||||
<span class="ml-auto inline-flex items-center justify-center h-5 min-w-[20px] rounded-full bg-rose-600 px-1.5 text-[10px] font-bold text-white">
|
||||
{{ $unreadCount > 99 ? '99+' : $unreadCount }}
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.likes')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-heart pr-4"></i> {{ __('nav.likes') }}</a>
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.likes'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-heart w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.likes')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.likes') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('user.watched')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-eye pr-4"></i>
|
||||
{{ __('nav.watched') }}</a>
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('user.watched'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-eye w-5 text-center text-base
|
||||
@if(request()->routeIs('user.watched')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.watched') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.comments')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-comment pr-4"></i>
|
||||
{{ __('nav.comments') }}</a>
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.comments'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-comment w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.comments')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.comments') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.playlists')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-rectangle-list pr-4"></i>
|
||||
{{ __('nav.playlists') }}</a>
|
||||
</div>
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.playlists'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-rectangle-list w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.playlists')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.playlists') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{-- Actions --}}
|
||||
@include('profile.partials.actions')
|
||||
</div>
|
||||
|
||||
@include('profile.partials.actions')
|
||||
</div>
|
||||
{{-- Mobile Navigation (horizontal scroll tabs, visible only on mobile) --}}
|
||||
@include('profile.partials.mobile-nav')
|
||||
</div>
|
||||
@@ -1,112 +1,151 @@
|
||||
<div>
|
||||
<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
|
||||
@if(count($playlists) > 0)
|
||||
@foreach($playlists as $playlist)
|
||||
@php
|
||||
$count = $playlist->episodes->count();
|
||||
@endphp
|
||||
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white/60 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-950/60 sm:shrink-0 sm:grow sm:basis-0">
|
||||
@if($count > 0)
|
||||
<a href="{{ route('profile.playlist.show', $playlist->id) }}">
|
||||
@else
|
||||
<a href="#!">
|
||||
@endif
|
||||
@if($count > 0)
|
||||
@if(count($playlists) > 0)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
@foreach($playlists as $playlist)
|
||||
@php
|
||||
$pe = \App\Models\PlaylistEpisode::where('playlist_id', $playlist->id)->orderBy('position', 'desc')->first();
|
||||
$count = $playlist->episodes->count();
|
||||
@endphp
|
||||
<img class="rounded-t-lg aspect-video" src="{{ $pe->episode->gallery->first()->thumbnail_url }}" alt="Hollywood Sign on The Hill" />
|
||||
@else
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-20" alt="..." />
|
||||
@endif
|
||||
</a>
|
||||
<div class="p-6" x-data="{ editing: false, name: '{{ $playlist->name }}', isPrivate: {{ $playlist->is_private ? 'true' : 'false' }} }">
|
||||
<!-- Edit mode -->
|
||||
<template x-if="editing">
|
||||
<div>
|
||||
<form method="POST" action="{{ route('profile.playlist.update', $playlist->id) }}" class="space-y-3">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-600 dark:text-neutral-400">Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
x-model="name"
|
||||
maxlength="30"
|
||||
required
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-600 dark:text-neutral-400">Visibility:</label>
|
||||
<select
|
||||
name="is_private"
|
||||
x-model="isPrivate"
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
>
|
||||
<option value="0">Public</option>
|
||||
<option value="1">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button type="submit" class="cursor-pointer rounded-lg bg-rose-600 px-4 py-2 text-xs font-semibold text-white transition hover:bg-rose-700">
|
||||
Save
|
||||
</button>
|
||||
<button type="button" @click="editing = false; name = '{{ $playlist->name }}'; isPrivate = {{ $playlist->is_private ? 'true' : 'false' }}" class="cursor-pointer rounded-lg border border-neutral-300 px-4 py-2 text-xs font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Display mode -->
|
||||
<template x-if="!editing">
|
||||
<div>
|
||||
<h5 class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
|
||||
{{ $playlist->name }}
|
||||
</h5>
|
||||
<p class="mb-2 text-sm leading-tight text-neutral-800 dark:text-neutral-50">
|
||||
{{ $count }} Episodes - {{ $playlist->is_private == 1 ? 'Private' : 'Public' }}
|
||||
@if($count > 0)
|
||||
<a href="{{ route('hentai.index', ['title' => $playlist->episodes->first()->episode->slug, 'playlist' => $playlist->id]) }}" class="cursor-pointer float-right text-white bg-rose-700 hover:bg-rose-800 focus:ring-4 focus:outline-none focus:ring-rose-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-rose-600 dark:hover:bg-rose-700 dark:focus:ring-rose-800">{{ __('playlist.play') }}</a>
|
||||
@endif
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('profile.playlist.delete', $playlist->id) }}" class="inline-flex items-center cursor-pointer text-xs text-red-600" data-confirm-delete="true">Delete</a>
|
||||
<button @click="editing = true" class="inline-flex items-center cursor-pointer text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Edit</button>
|
||||
<div 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 overflow-hidden hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200 flex flex-col">
|
||||
{{-- Thumbnail --}}
|
||||
@if($count > 0)
|
||||
<a href="{{ route('profile.playlist.show', $playlist->id) }}" class="block overflow-hidden">
|
||||
@php
|
||||
$pe = \App\Models\PlaylistEpisode::where('playlist_id', $playlist->id)->orderBy('position', 'desc')->first();
|
||||
@endphp
|
||||
<img class="w-full aspect-video object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
src="{{ $pe->episode->gallery->first()->thumbnail_url }}"
|
||||
alt="{{ $playlist->name }}"
|
||||
loading="lazy" />
|
||||
</a>
|
||||
@else
|
||||
<div class="w-full aspect-video bg-gray-200 dark:bg-neutral-800 flex items-center justify-center">
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp"
|
||||
class="w-full aspect-video object-cover opacity-30 dark:opacity-15"
|
||||
alt="Empty playlist" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Content --}}
|
||||
<div class="p-4 flex-1 flex flex-col"
|
||||
x-data="{ editing: false, name: '{{ $playlist->name }}', isPrivate: {{ $playlist->is_private ? 'true' : 'false' }} }">
|
||||
|
||||
{{-- Edit mode --}}
|
||||
<template x-if="editing">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<form method="POST" action="{{ route('profile.playlist.update', $playlist->id) }}" class="flex-1 flex flex-col">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
<div class="space-y-3 flex-1">
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-500 dark:text-neutral-400">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
x-model="name"
|
||||
maxlength="30"
|
||||
required
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-500 dark:text-neutral-400">Visibility</label>
|
||||
<select
|
||||
name="is_private"
|
||||
x-model="isPrivate"
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
>
|
||||
<option value="0">Public</option>
|
||||
<option value="1">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
|
||||
<button type="submit" class="cursor-pointer rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-rose-700 flex-1">
|
||||
Save
|
||||
</button>
|
||||
<button type="button" @click="editing = false; name = '{{ $playlist->name }}'; isPrivate = {{ $playlist->is_private ? 'true' : 'false' }}" class="cursor-pointer rounded-lg border border-neutral-300 px-3 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800 flex-1">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- Display mode --}}
|
||||
<template x-if="!editing">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="flex-1">
|
||||
<h5 class="text-base font-semibold text-neutral-800 dark:text-neutral-50 truncate">
|
||||
{{ $playlist->name }}
|
||||
</h5>
|
||||
<div class="flex items-center gap-2 mt-1.5">
|
||||
<span class="inline-flex items-center gap-1 pl-2 pr-2 pt-1 pb-1 rounded-full bg-neutral-100 dark:bg-neutral-700 px-2 py-0.5 text-[11px] font-medium text-neutral-600 dark:text-neutral-300">
|
||||
<i class="fa-solid fa-film text-[9px]"></i>
|
||||
{{ $count }} {{ Str::plural('ep', $count) }}
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1 pl-2 pr-2 pt-1 pb-1 rounded-full text-[11px] font-medium
|
||||
{{ $playlist->is_private ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400' : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' }}">
|
||||
<i class="fa-solid fa-{{ $playlist->is_private ? 'lock' : 'globe' }} text-[9px]"></i>
|
||||
{{ $playlist->is_private ? 'Private' : 'Public' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('profile.playlist.delete', $playlist->id) }}"
|
||||
class="inline-flex items-center gap-1 text-[11px] text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
|
||||
data-confirm-delete="true">
|
||||
<i class="fa-solid fa-trash-can text-[10px]"></i>
|
||||
Delete
|
||||
</a>
|
||||
<button @click="editing = true"
|
||||
class="inline-flex items-center gap-1 text-[11px] text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
|
||||
<i class="fa-solid fa-pen-to-square text-[10px]"></i>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
@if($count > 0)
|
||||
<a href="{{ route('hentai.index', ['title' => $playlist->episodes->first()->episode->slug, 'playlist' => $playlist->id]) }}"
|
||||
class="inline-flex items-center gap-1 rounded-lg bg-rose-600 px-3 py-1.5 text-[11px] font-semibold text-white hover:bg-rose-700 transition-colors shadow-sm shadow-rose-600/20">
|
||||
<i class="fa-solid fa-play text-[9px]"></i>
|
||||
Play
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
{{-- Add New Playlist Card --}}
|
||||
<button
|
||||
data-te-toggle="modal"
|
||||
data-te-target="#modalCreatePlaylist"
|
||||
class="group rounded-xl border-2 border-dashed border-neutral-300 dark:border-neutral-700 bg-white/20 dark:bg-neutral-950/20 backdrop-blur hover:border-rose-400 dark:hover:border-rose-600 hover:bg-rose-50/50 dark:hover:bg-rose-950/20 transition-all duration-200 flex flex-col items-center justify-center p-8 min-h-[200px]">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 group-hover:scale-110 transition-transform duration-200 mb-3">
|
||||
<i class="fa-solid fa-plus text-xl"></i>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-neutral-600 dark:text-neutral-300">Create Playlist</p>
|
||||
<p class="text-xs text-neutral-400 dark:text-neutral-500 mt-1">Organize your favorites</p>
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
<!-- Add Another Playlist -->
|
||||
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white/60 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-950/60 sm:shrink-0 sm:grow sm:basis-0">
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-40" alt="..." />
|
||||
<div class="p-6">
|
||||
<p class="text-black dark:text-white">
|
||||
Create another Playlist
|
||||
</p>
|
||||
<a data-te-toggle="modal" data-te-target="#modalCreatePlaylist" data-te-ripple-init data-te-ripple-color="light" class="inline-flex items-center cursor-pointer px-4 py-2 mt-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
||||
Create
|
||||
</a>
|
||||
@else
|
||||
{{-- Empty State --}}
|
||||
<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-12 text-center">
|
||||
<div class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
|
||||
<i class="fa-solid fa-rectangle-list text-3xl text-gray-400 dark:text-gray-500"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">No playlists yet</h3>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400 mb-6">Create your first playlist to organize your favorite episodes.</p>
|
||||
<button
|
||||
data-te-toggle="modal"
|
||||
data-te-target="#modalCreatePlaylist"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-rose-700 transition-colors shadow-sm shadow-rose-600/20">
|
||||
<i class="fa-solid fa-plus text-xs"></i>
|
||||
Create your first playlist
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<!-- No Playlist Found -->
|
||||
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-20" alt="..." />
|
||||
<div class="p-6">
|
||||
<p class="text-black dark:text-white">
|
||||
No Playlist found!
|
||||
</p>
|
||||
<a data-te-toggle="modal" data-te-target="#modalCreatePlaylist" data-te-ripple-init data-te-ripple-color="light" class="inline-flex items-center cursor-pointer px-4 py-2 mt-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
||||
Create
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
Reference in New Issue
Block a user