From 839779b82e2fb243af35e0ed65c7ff2b9bf86e05 Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Sat, 23 May 2026 14:43:35 +0200
Subject: [PATCH] Update cover/thumbnail design

---
 .../views/components/episode-cover.blade.php  | 151 ++++++++++--------
 1 file changed, 86 insertions(+), 65 deletions(-)

diff --git a/resources/views/components/episode-cover.blade.php b/resources/views/components/episode-cover.blade.php
index 6066211..d860975 100644
--- a/resources/views/components/episode-cover.blade.php
+++ b/resources/views/components/episode-cover.blade.php
@@ -5,15 +5,15 @@
 ])
 
 @php
-    $title = $displayjapanese ? 
-        "$episode->title_jpn ($episode->title) - $episode->episode" :
-        "$episode->title - $episode->episode";
+    $title = $displayjapanese
+        ? "{$episode->title_jpn} ({$episode->title}) - {$episode->episode}"
+        : "{$episode->title} - {$episode->episode}";
 
-    $isWatched = auth()->check() && $episode->userWatched(auth()->id());
+    $isLoggedIn = auth()->check();
 
-    $badgeColor = $isWatched
-        ? 'bg-green-600/80'
-        : 'bg-rose-700/70';
+    $isWatched = $isLoggedIn
+        ? $episode->userWatched(auth()->id())
+        : false;
 
     $problematic = cache()->rememberForever(
         "episodeProblematic{$episode->id}",
@@ -21,80 +21,101 @@
     );
 @endphp
 
-<div
-    class="group relative w-full p-1 md:p-2 transition-all duration-300 ease-out md:hover:-translate-y-1 md:hover:scale-[1.03]">
-
+<div class="group w-full p-1">
     <a
         href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
-        class="block overflow-hidden rounded-2xl dark:bg-neutral-950 bg-white shadow-lg">
+        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"
+    >
+        <div class="relative overflow-hidden">
 
-        
-        <div class="relative">
-            {{-- Switch between Cover and Thumbnail --}}
+            {{-- Thumbnail / Cover --}}
             @if ($view === 'poster')
-            <img
-                src="{{ $episode->cover_url }}"
-                alt="{{ $episode->title }} - {{ $episode->episode }}"
-                loading="lazy"
-                width="400"
-                class="aspect-[11/16] w-full object-cover object-center"
-            >
+                <img
+                    src="{{ $episode->cover_url }}"
+                    alt="{{ $episode->title }} - {{ $episode->episode }}"
+                    loading="lazy"
+                    width="400"
+                    class="aspect-[11/16] w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]"
+                >
             @elseif ($view === 'thumbnail')
-            <img
-                src="{{ $episode->gallery->first()?->thumbnail_url }}"
-                alt="{{ $episode->title }} - {{ $episode->episode }}"
-                loading="lazy"
-                width="1000"
-                class="aspect-video w-full object-cover object-center "
-            >
+                <img
+                    src="{{ $episode->gallery->first()?->thumbnail_url }}"
+                    alt="{{ $episode->title }} - {{ $episode->episode }}"
+                    loading="lazy"
+                    width="1000"
+                    class="w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]"
+                >
             @endif
 
-            {{-- Resolution Badge --}}
-            <div class="absolute top-0 right-0 z-20">
-                <span class="{{ $badgeColor }} rounded-bl-xl px-3 py-1.5 text-sm font-semibold text-white">
-                    {{ $episode->getResolution() }}
-                </span>
-            </div>
+            {{-- Overlay Gradient --}}
+            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent"></div>
 
-            {{-- Stats --}}
-            <div class="absolute bottom-0 left-0 z-20">
-                <div class="{{ $badgeColor }} flex items-center gap-3 rounded-tr-xl px-3 py-1 text-sm font-semibold text-white">
+            {{-- Top Row --}}
+            <div class="absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3">
 
-                    <span class="flex items-center gap-1">
-                        <i class="fa-regular fa-eye"></i>
-                        {{ $episode->viewCountFormatted() }}
-                    </span>
-
-                    <span class="flex items-center gap-1">
-                        <i class="fa-regular fa-heart"></i>
-                        {{ $episode->likeCount() }}
-                    </span>
-
-                    <span class="flex items-center gap-1">
-                        <i class="fa-regular fa-comment"></i>
-                        {{ $episode->commentCount() }}
-                    </span>
-                </div>
-            </div>
-
-            {{-- Problematic Tags --}}
-            @if (!empty($problematic))
-                <div class="absolute top-0 left-0 z-20">
-                    <span class="rounded-br-xl bg-red-700/80 px-3 py-1.5 text-sm font-semibold text-white backdrop-blur">
-                        <i class="fa-solid fa-triangle-exclamation"></i>
+                {{-- Problematic Tags --}}
+                @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">
+                        <i class="fa-solid fa-triangle-exclamation mr-1"></i>
                         {{ $problematic }}
-                    </span>
+                    </div>
+                @endif
+
+                {{-- 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">
+                    {{ $episode->getResolution() }}
                 </div>
-            @endif
+            </div>
 
+            {{-- Bottom Stats --}}
+            <div class="absolute inset-x-0 bottom-0 z-20 p-3">
+                <div class="flex items-end justify-between gap-3">
 
+                    {{-- Stats --}}
+                    <div class="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1 text-sm font-bold text-neutral-200">
+
+                        <span class="flex items-center gap-1">
+                            <i class="fa-regular fa-eye text-neutral-400"></i>
+                            {{ $episode->viewCountFormatted() }}
+                        </span>
+
+                        <span class="flex items-center gap-1">
+                            <i class="fa-regular fa-heart text-neutral-400"></i>
+                            {{ $episode->likeCount() }}
+                        </span>
+
+                        <span class="flex items-center gap-1">
+                            <i class="fa-regular fa-comment text-neutral-400"></i>
+                            {{ $episode->commentCount() }}
+                        </span>
+                    </div>
+
+                    {{-- Watched Status (logged in users only) --}}
+                    @auth
+                        @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">
+                                @if ($view === 'thumbnail')
+                                <i class="fa-solid fa-check mr-1"></i> Watched
+                                @else
+                                <i class="fa-solid fa-check"></i>
+                                @endif
+                            </div>
+                        @else
+                            <div class="shrink-0 rounded-full bg-rose-800/40 px-2.5 py-1 text-xs font-semibold text-rose-300 ring-1 ring-rose-500/30">
+                                <i class="fa-solid fa-eye-slash"></i>
+                            </div>
+                        @endif
+                    @endauth
+
+                </div>
+            </div>
         </div>
 
-        {{-- Title --}}
-        <div class="p-3 text-center">
-            <p class="text-sm font-bold text-black dark:text-white">
+        {{-- 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 transition-colors duration-200 dark:group-hover:text-white">
                 {{ $title }}
-            </p>
+            </h3>
         </div>
     </a>
 </div>
\ No newline at end of file