ngthanhvu/kr-phim
1
0
Fork 0
mirror of https://github.com/ngthanhvu/kr-phim.git synced 2026-08-10 14:27:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: update background color and adjust layout for consistency across pages

Browse Source
This commit is contained in:
ngthanhvu
2026-07-23 05:21:36 -04:00
parent c79955f2a3
commit dd42fe4f29
5 changed files with 67 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+1 -3
View File
@@ -17,9 +17,7 @@ html {
body {
min-width: 320px;
background:
radial-gradient(circle at 15% 0%, rgba(234, 179, 8, 0.22), transparent 34rem),
linear-gradient(135deg, #201a05 0%, #17130a 46%, #020617 100%);
background-color: #0f111a;
color: #f8fbff;
}
app/components/AppHeader.vue
+1 -2
View File
@@ -109,8 +109,7 @@ watch(() => route.path, () => {
class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
</form>
<div class="group/member relative hidden shrink-0 items-center gap-2.5 md:flex"
@mouseenter="memberMenuOpen = true" @mouseleave="memberMenuOpen = false">
<div class="group/member relative hidden shrink-0 items-center gap-2.5 md:flex">
<button type="button"
class="inline-flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-white px-2.5 pl-1 text-xs font-black text-slate-950 shadow-xl shadow-black/20 transition hover:bg-yellow-100"
aria-label="Tài khoản thành viên" @click="handleMemberClick">
app/pages/index.vue
+5 -3
View File
@@ -352,7 +352,7 @@ useHead({
<span class="bg-[rgba(1,180,228,0.1)] text-white px-1.5 py-0.5">{{ hero.rating.toFixed(1) }}</span>
</div>
<span v-if="hero.quality"
class="inline-flex items-center justify-center rounded-sm text-[#141414] font-black leading-none tracking-normal h-[22px] px-2 text-[11px]"
class="inline-flex items-center justify-center rounded-sm text-[#141414] font-black leading-none tracking-normal h-5.5 px-2 text-[11px]"
style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%)">
{{ hero.quality }}
</span>
@@ -378,7 +378,8 @@ useHead({
</div>
<!-- Action buttons (desktop only) -->
<div class="hidden md:flex justify-center md:justify-start items-center gap-4 pointer-events-auto relative z-40">
<div
class="hidden md:flex justify-center md:justify-start items-center gap-4 pointer-events-auto relative z-40">
<!-- Watch Now button -->
<NuxtLink :to="movieLink(hero)"
class="w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-[#0f1115] rounded-full flex items-center justify-center transition-transform hover:scale-105 shadow-[0_0_15px_rgba(254,207,89,0.5)] shrink-0 pointer-events-auto"
@@ -401,7 +402,8 @@ useHead({
<NuxtLink :to="movieLink(hero)"
class="group/link w-16 md:w-20 h-full flex items-center justify-center transition-colors text-white hover:text-[#FECF59]"
aria-label="Thông tin phim">
<Info class="size-6 md:size-7 text-white fill-none stroke-current group-hover/link:text-[#FECF59] transition-all" />
<Info
class="size-6 md:size-7 text-white fill-none stroke-current group-hover/link:text-[#FECF59] transition-all" />
</NuxtLink>
</div>
</div>
app/pages/phim/[slug].vue
+51 -36
View File
@@ -181,13 +181,13 @@ useHead(() => ({
</script>
<template>
<main class="min-h-screen bg-[#0f111a] text-white">
<div class="min-h-screen bg-[#0f111a] text-white">
<AppHeader />
<!-- Loading -->
<div v-if="pending" class="mx-auto max-w-[1400px] px-4 pt-36 sm:px-6 lg:px-8 xl:px-10">
<div v-if="pending" class="mx-auto max-w-350 px-4 pt-36 sm:px-6 lg:px-8 xl:px-10">
<div class="grid gap-6 lg:grid-cols-[22rem_minmax(0,1fr)]">
<div class="h-[28rem] animate-pulse rounded-xl bg-white/10" />
<div class="h-112 animate-pulse rounded-xl bg-white/10" />
<div class="space-y-4">
<div class="h-10 w-3/4 animate-pulse rounded bg-white/10" />
<div class="h-6 w-1/2 animate-pulse rounded bg-white/10" />
@@ -207,7 +207,7 @@ useHead(() => ({
<!-- Movie Detail -->
<template v-else>
<!-- Hero Backdrop -->
<section class="relative h-[210px] md:h-[600px] lg:h-[70vh] xl:max-h-[800px] overflow-hidden bg-[#0f111a]">
<section class="relative h-52.5 md:h-150 lg:h-[70vh] xl:max-h-200 overflow-hidden bg-[#0f111a]">
<img :src="movie.poster || movie.thumb" :alt="movie.name"
class="absolute inset-0 h-full w-full object-cover object-center scale-105 opacity-70 md:opacity-80">
<div class="absolute inset-0 hidden md:block"
@@ -223,11 +223,12 @@ useHead(() => ({
</section>
<!-- Content overlaps hero -->
<div class="max-w-[1400px] mx-auto px-4 -mt-24 md:-mt-48 lg:-mt-64 relative z-10 mb-20">
<div class="max-w-350 mx-auto px-4 -mt-24 md:-mt-48 lg:-mt-64 relative z-10 mb-20">
<div class="flex flex-col md:flex-row gap-6 md:gap-10 items-start">
<!-- Poster Column -->
<div class="shrink-0 w-40 md:w-56 lg:w-64 max-w-[280px] mx-auto md:mx-0 flex flex-col gap-8">
<div class="relative rounded-xl overflow-hidden shadow-2xl shadow-[#0f111a]/50 ring-1 ring-white/10 bg-[#16161e] w-full aspect-[2/3]">
<div class="shrink-0 w-40 md:w-56 lg:w-64 max-w-70 mx-auto md:mx-0 flex flex-col gap-8">
<div
class="relative rounded-xl overflow-hidden shadow-2xl shadow-[#0f111a]/50 ring-1 ring-white/10 bg-[#16161e] w-full aspect-2/3">
<img :src="movie.poster || movie.thumb" :alt="movie.name"
class="w-full h-full object-cover relative z-10">
</div>
@@ -259,14 +260,16 @@ useHead(() => ({
<!-- Badges -->
<div class="hidden md:flex flex-wrap items-center gap-2 text-white/90 mb-4 text-[10px] md:text-xs">
<span v-if="movie.quality"
class="inline-flex items-center justify-center rounded-[4px] font-black leading-none tracking-normal h-[22px] px-2 text-[11px]"
class="inline-flex items-center justify-center rounded-sm font-black leading-none tracking-normal h-5.5 px-2 text-[11px]"
style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
{{ movie.quality }}
</span>
<span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
<span v-if="movie.lang"
class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
{{ movie.lang }}
</span>
<span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
<span v-if="getEpisodeDisplay()"
class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
{{ getEpisodeDisplay() }}
</span>
<span v-if="movie.rating"
@@ -289,8 +292,8 @@ useHead(() => ({
<div class="w-px h-8 bg-white/10 mx-1" />
<button type="button"
class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3"
:class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
:disabled="actionBusy" @click="toggleFavorite">
:class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'" :disabled="actionBusy"
@click="toggleFavorite">
<Heart class="size-5" :class="isFavoriteMovie ? 'fill-current' : ''" />
<span class="text-[11px]">{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}</span>
</button>
@@ -315,8 +318,8 @@ useHead(() => ({
<div class="flex md:hidden gap-5 justify-center pt-2 mb-4">
<button type="button"
class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95"
:class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
:disabled="actionBusy" @click="toggleFavorite">
:class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'" :disabled="actionBusy"
@click="toggleFavorite">
<Heart class="size-6" :class="isFavoriteMovie ? 'fill-current' : ''" />
<span class="text-[11px]">Yêu thích</span>
</button>
@@ -346,7 +349,8 @@ useHead(() => ({
</div>
<div class="flex items-start gap-2">
<span class="text-slate-500 shrink-0 w-20">Loại:</span>
<span class="text-slate-200">{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
<span class="text-slate-200">{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ?
'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
</div>
<div class="flex items-start gap-2">
<span class="text-slate-500 shrink-0 w-20">Năm:</span>
@@ -377,14 +381,16 @@ useHead(() => ({
<div v-if="movieInfoOpen" class="space-y-2 text-sm text-slate-300">
<div class="flex flex-wrap gap-2 text-[10px] mb-3">
<span v-if="movie.quality"
class="inline-flex items-center justify-center rounded-[4px] font-black h-[22px] px-2 text-[11px]"
class="inline-flex items-center justify-center rounded-sm font-black h-5.5 px-2 text-[11px]"
style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
{{ movie.quality }}
</span>
<span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
<span v-if="movie.lang"
class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
{{ movie.lang }}
</span>
<span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
<span v-if="getEpisodeDisplay()"
class="px-2 py-0.75 rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
{{ getEpisodeDisplay() }}
</span>
<span v-if="movie.rating"
@@ -394,11 +400,17 @@ useHead(() => ({
</span>
</div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Trạng thái:</span><span>{{ getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Loại:</span><span>{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Năm:</span><span>{{ movie.year || 'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Thể loại:</span><span>{{ movie.categories?.join(', ') || 'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Quốc gia:</span><span>{{ movie.countries?.join(', ') || 'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Trạng thái:</span><span>{{
getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Loại:</span><span>{{ movie.type ===
'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
</div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Năm:</span><span>{{ movie.year ||
'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Thể loại:</span><span>{{
movie.categories?.join(', ') || 'Đang cập nhật' }}</span></div>
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Quốc gia:</span><span>{{
movie.countries?.join(', ') || 'Đang cập nhật' }}</span></div>
<div v-if="movie.content" class="pt-3 border-t border-white/10">
<h3 class="text-[14px] font-semibold text-white mb-2">Nội dung phim</h3>
@@ -421,14 +433,16 @@ useHead(() => ({
:class="activeTab === 'episodes' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
@click="activeTab = 'episodes'">
Tập phim
<span v-if="activeTab === 'episodes'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
<span v-if="activeTab === 'episodes'"
class="absolute bottom-0 left-0 w-full h-0.5 bg-[#F5C518] rounded-t-md" />
</button>
<button type="button"
class="pb-3 text-[13px] md:text-[15px] font-semibold transition-colors relative whitespace-nowrap"
:class="activeTab === 'actors' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
@click="activeTab = 'actors'">
Diễn viên
<span v-if="activeTab === 'actors'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
<span v-if="activeTab === 'actors'"
class="absolute bottom-0 left-0 w-full h-0.5 bg-[#F5C518] rounded-t-md" />
</button>
</div>
@@ -444,10 +458,9 @@ useHead(() => ({
class="group flex items-center gap-1.5 text-[13px] transition-colors rounded-md px-3.5 py-2 border font-medium"
:class="selectedServer === index
? 'border-white/30 text-white bg-white/5'
: 'border-transparent text-white/60 hover:text-white'"
@click="selectedServer = index">
: 'border-transparent text-white/60 hover:text-white'" @click="selectedServer = index">
<span>{{ serverLabel(server, index) }}</span>
<span class="w-[20px] h-[20px] rounded-full font-bold text-[10px]"
<span class="w-5 h-5 rounded-full font-bold text-[10px]"
:class="selectedServer === index ? 'bg-white text-black' : 'bg-white/20 text-white'">
{{ server.episodes?.length || 0 }}
</span>
@@ -460,12 +473,13 @@ useHead(() => ({
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
:to="episodeLink(index)"
class="group flex items-center justify-center gap-1.5 rounded-lg transition-all py-2.5 px-2 text-[13px] bg-[#191b24] text-white/90 hover:text-[#FFD166] hover:bg-[#1f2130] shadow-sm">
<Play class="size-3 fill-current opacity-0 group-hover:opacity-100 transition-opacity" />
<Play class="size-3 fill-current" />
{{ formatEpisodeName(episode.name, index) }}
</NuxtLink>
</div>
<p v-else class="mt-2 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
<p v-else
class="mt-2 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
Chưa có tập xem từ server này.
</p>
</div>
@@ -483,12 +497,14 @@ useHead(() => ({
</div>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-white">{{ actor.name }}</p>
<p v-if="actor.originalName" class="mt-0.5 truncate text-xs text-yellow-200/70">{{ actor.originalName }}</p>
<p v-if="actor.originalName" class="mt-0.5 truncate text-xs text-yellow-200/70">{{
actor.originalName }}</p>
<p v-if="actor.role" class="mt-0.5 truncate text-xs text-slate-400">{{ actor.role }}</p>
</div>
</div>
</div>
<p v-else class="mt-4 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
<p v-else
class="mt-4 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
Chưa có thông tin diễn viên.
</p>
</div>
@@ -502,14 +518,13 @@ useHead(() => ({
<MessageCircle class="size-5 text-yellow-300" />
<h2 class="text-xl font-bold text-white">Bình luận</h2>
</div>
<div class="flex flex-col items-center justify-center py-10 text-center border border-white/10 rounded-xl bg-[#191b24]">
<div
class="flex flex-col items-center justify-center py-10 text-center border border-white/10 rounded-xl bg-[#191b24]">
<MessageCircle class="size-10 text-slate-500 mb-3" />
<p class="text-sm text-slate-400">Tính năng bình luận đang được phát triển.</p>
</div>
</div>
</div>
</template>
<AppFooter />
</main>
</div>
</template>
app/pages/xem/[slug].vue
+8 -9
View File
@@ -431,7 +431,7 @@ useHead(() => ({
<AppHeader />
<!-- Loading -->
<section v-if="pending && !movie" class="mx-auto max-w-[1400px] px-4 pt-20 sm:px-6 lg:px-8 xl:px-10">
<section v-if="pending && !movie" class="mx-auto max-w-350 px-4 pt-20 sm:px-6 lg:px-8 xl:px-10">
<div class="-mx-4 mb-6 overflow-hidden sm:mx-0 sm:rounded-xl">
<div class="aspect-video w-full animate-pulse rounded-none sm:rounded-t-xl bg-white/10" />
<div class="flex h-14 items-center justify-between border-t border-white/5 bg-black px-4 sm:px-6">
@@ -456,7 +456,7 @@ useHead(() => ({
<!-- Watch Page -->
<template v-else>
<section class="mx-auto max-w-[1400px] px-4 pt-16 sm:px-6 lg:px-8 xl:px-10">
<section class="mx-auto max-w-350 px-4 pt-16 sm:px-6 lg:px-8 xl:px-10">
<!-- Player -->
<div class="-mx-4 mb-6 overflow-hidden sm:mx-0 sm:rounded-xl">
<div ref="playerViewportRef" class="relative aspect-video bg-slate-950">
@@ -628,13 +628,13 @@ useHead(() => ({
<!-- Movie Info Card -->
<div class="mb-6 flex items-start gap-6 lg:gap-8">
<div
class="hidden shrink-0 aspect-[2/3] w-32 rounded-xl overflow-hidden shadow-2xl sm:block md:w-40 lg:w-[150px]">
class="hidden shrink-0 aspect-2/3 w-32 rounded-xl overflow-hidden shadow-2xl sm:block md:w-40 lg:w-37.5">
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="w-full h-full object-cover">
</div>
<div class="flex-1 flex flex-col gap-4 pt-1 w-full text-center sm:text-left">
<div>
<h1 class="text-2xl md:text-[28px] font-bold text-white mb-2 leading-tight">{{ movie.name }}</h1>
<h2 class="text-[#eab308] text-sm md:text-[15px] font-medium opacity-90">{{ movie.originName }}</h2>
<h2 class="text-cinek-500 text-sm md:text-[15px] font-medium opacity-90">{{ movie.originName }}</h2>
</div>
<!-- Badges -->
@@ -646,7 +646,7 @@ useHead(() => ({
movie.rating.toFixed(1) }}</span>
</span>
<span v-if="movie.quality"
class="inline-flex items-center justify-center rounded-[4px] font-black h-[22px] px-2 text-[11px]"
class="inline-flex items-center justify-center rounded-sm font-black h-5.5 px-2 text-[11px]"
style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">{{
movie.quality }}</span>
<span v-if="movie.year"
@@ -666,9 +666,10 @@ useHead(() => ({
<!-- Episode Progress -->
<div v-if="episodeProgress.total"
class="inline-flex self-center sm:self-start items-center gap-1.5 px-3 py-1.5 rounded-full mt-2 border bg-[#eab308]/10 border-[#eab308]/20 text-[#eab308]">
class="inline-flex self-center sm:self-start items-center gap-1.5 px-3 py-1.5 rounded-full mt-2 border bg-cinek-500/10 border-cinek-500/20 text-cinek-500">
<Loader2 class="size-3.5 animate-spin" />
<span class="text-xs font-medium">Đã chiếu: {{ episodeProgress.available }} / {{ episodeProgress.total }} tập</span>
<span class="text-xs font-medium">Đã chiếu: {{ episodeProgress.available }} / {{ episodeProgress.total
}} tập</span>
</div>
<!-- Description -->
@@ -784,8 +785,6 @@ useHead(() => ({
</div>
</section>
</template>
<AppFooter />
</main>
</template>