From 356d07365f2b47de26843cdd263e223b2ff2786e Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Sun, 24 May 2026 19:38:50 +0200
Subject: [PATCH] Update episode card design

---
 .../views/components/episode-cover.blade.php  | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/resources/views/components/episode-cover.blade.php b/resources/views/components/episode-cover.blade.php
index c97d625..6e57ff3 100644
--- a/resources/views/components/episode-cover.blade.php
+++ b/resources/views/components/episode-cover.blade.php
@@ -24,7 +24,7 @@
 <div class="group w-full p-1">
     <a
         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">
 
@@ -35,7 +35,7 @@
                     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]"
+                    class="aspect-[11/16] w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
                 >
             @elseif ($view === 'thumbnail')
                 @php
@@ -50,49 +50,56 @@
                     loading="lazy"
                     width="1000"
                     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
 
-            {{-- Overlay Gradient --}}
-            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent"></div>
+            {{-- Dark Overlay --}}
+            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
 
-            {{-- Top Row --}}
-            <div class="absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3">
+            {{-- Top Meta --}}
+            <div class="pointer-events-none absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3">
 
                 {{-- 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">
+                    <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>
                         {{ $problematic }}
                     </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">
+                <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() }}
                 </div>
             </div>
 
-            {{-- Bottom Stats --}}
-            <div class="absolute inset-x-0 bottom-0 z-20 p-3">
-                <div class="flex items-end justify-between gap-3">
+            {{-- Bottom Content --}}
+            <div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 p-4">
+
+                {{-- 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 --}}
-                    <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">
-                            <i class="fa-regular fa-eye text-neutral-400"></i>
+                            <i class="fa-regular fa-eye text-neutral-200 font-bold"></i>
                             {{ $episode->viewCountFormatted() }}
                         </span>
 
                         <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() }}
                         </span>
 
                         <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() }}
                         </span>
                     </div>
@@ -102,9 +109,9 @@
                         @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
+                                <i class="fa-solid fa-eye mr-1"></i> Watched
                                 @else
-                                <i class="fa-solid fa-check"></i>
+                                <i class="fa-solid fa-eye"></i>
                                 @endif
                             </div>
                         @else
@@ -116,13 +123,7 @@
 
                 </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>
     </a>
 </div>
\ No newline at end of file