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

Update episode card design

Browse Source
This commit is contained in:
w33b
2026-05-24 19:38:50 +02:00
parent 3574d20fae
commit 356d07365f
1 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
resources/views/components/episode-cover.blade.php
View File

@@ -24,7 +24,7 @@
<div class="group w-full p-1"> <div class="group w-full p-1">
<a <a
href="{{ route('hentai.index', ['title' => $episode->slug]) }}" href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
class="block overflow-hidden rounded-2xl border dark:border-neutral-800 border-neutral-300 dark:bg-neutral-900 transition-all duration-300 hover:-translate-y-1 dark:hover:border-neutral-700 hover:border-neutral-400 hover:shadow-2xl hover:shadow-black/30" class="block overflow-hidden rounded-2xl border border-neutral-200 bg-white transition-all duration-300 hover:-translate-y-1 hover:border-neutral-400 hover:shadow-xl dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700"
> >
<div class="relative overflow-hidden"> <div class="relative overflow-hidden">
@@ -35,7 +35,7 @@
alt="{{ $episode->title }} - {{ $episode->episode }}" alt="{{ $episode->title }} - {{ $episode->episode }}"
loading="lazy" loading="lazy"
width="400" width="400"
class="aspect-[11/16] w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]" class="aspect-[11/16] w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
> >
@elseif ($view === 'thumbnail') @elseif ($view === 'thumbnail')
@php @php
@@ -50,49 +50,56 @@
loading="lazy" loading="lazy"
width="1000" width="1000"
data-gallery='@json($galleryImages)' data-gallery='@json($galleryImages)'
class="preview-gallery aspect-video w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]" class="preview-gallery aspect-video w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
> >
@endif @endif
{{-- Overlay Gradient --}} {{-- Dark Overlay --}}
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent"></div> <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
{{-- Top Row --}} {{-- Top Meta --}}
<div class="absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3"> <div class="pointer-events-none absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3">
{{-- Problematic Tags --}} {{-- Problematic Tags --}}
@if (!empty($problematic)) @if (!empty($problematic))
<div class="rounded-xl border border-red-500/30 bg-red-900/70 px-2.5 py-1 text-xs font-semibold text-white"> <div class="rounded-full bg-red-700/40 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-white ring-1 ring-red-700/70">
<i class="fa-solid fa-triangle-exclamation mr-1"></i> <i class="fa-solid fa-triangle-exclamation mr-1"></i>
{{ $problematic }} {{ $problematic }}
</div> </div>
@endif @endif
{{-- Resolution --}} {{-- Resolution --}}
<div class="ml-auto rounded-xl bg-black/70 px-2.5 py-1 text-xs font-semibold tracking-wide text-neutral-100 ring-1 ring-white/10"> <div class="ml-auto rounded-full bg-black/70 px-2 py-1 text-[11px] font-semibold tracking-wide text-white ring-1 ring-white/10">
{{ $episode->getResolution() }} {{ $episode->getResolution() }}
</div> </div>
</div> </div>
{{-- Bottom Stats --}} {{-- Bottom Content --}}
<div class="absolute inset-x-0 bottom-0 z-20 p-3"> <div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 p-4">
<div class="flex items-end justify-between gap-3">
{{-- Title --}}
<h3 class=" text-sm font-semibold leading-snug text-white md:text-base">
{{ $title }}
</h3>
{{-- Bottom Row --}}
<div class="mt-3 flex items-center justify-between gap-3">
{{-- Stats --}} {{-- Stats --}}
<div class="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1 text-sm font-bold text-neutral-200"> <div class="flex flex-wrap items-center gap-3 text-sm font-bold text-neutral-200">
<span class="flex items-center gap-1"> <span class="flex items-center gap-1">
<i class="fa-regular fa-eye text-neutral-400"></i> <i class="fa-regular fa-eye text-neutral-200 font-bold"></i>
{{ $episode->viewCountFormatted() }} {{ $episode->viewCountFormatted() }}
</span> </span>
<span class="flex items-center gap-1"> <span class="flex items-center gap-1">
<i class="fa-regular fa-heart text-neutral-400"></i> <i class="fa-regular fa-heart text-neutral-200 font-bold"></i>
{{ $episode->likeCount() }} {{ $episode->likeCount() }}
</span> </span>
<span class="flex items-center gap-1"> <span class="flex items-center gap-1">
<i class="fa-regular fa-comment text-neutral-400"></i> <i class="fa-regular fa-comment text-neutral-200 font-bold"></i>
{{ $episode->commentCount() }} {{ $episode->commentCount() }}
</span> </span>
</div> </div>
@@ -102,9 +109,9 @@
@if ($isWatched) @if ($isWatched)
<div class="shrink-0 rounded-full bg-emerald-800/40 px-2.5 py-1 text-xs font-semibold text-emerald-300 ring-1 ring-emerald-500/30"> <div class="shrink-0 rounded-full bg-emerald-800/40 px-2.5 py-1 text-xs font-semibold text-emerald-300 ring-1 ring-emerald-500/30">
@if ($view === 'thumbnail') @if ($view === 'thumbnail')
<i class="fa-solid fa-check mr-1"></i> Watched <i class="fa-solid fa-eye mr-1"></i> Watched
@else @else
<i class="fa-solid fa-check"></i> <i class="fa-solid fa-eye"></i>
@endif @endif
</div> </div>
@else @else
@@ -116,13 +123,7 @@
</div> </div>
</div> </div>
</div>
{{-- Content --}}
<div class="relative isolate border-t dark:border-neutral-800 dark:bg-neutral-900 bg-white border-neutral-100 p-4">
<h3 class="text-sm font-semibold leading-relaxed dark:text-neutral-100 text-neutral-900 transition-colors duration-200 dark:group-hover:text-white">
{{ $title }}
</h3>
</div> </div>
</a> </a>
</div> </div>