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

feat: rebrand site to CineK

Browse Source
This commit is contained in:
ngthanhvu
2026-05-24 22:35:13 +07:00
parent f2479074df
commit 30502c9854
25 changed files with 693 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/AppHeader.vue
+32 -31
View File
@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup lang="ts">
import {
Bell,
Chrome,
@@ -183,22 +183,23 @@ watch(user, (currentUser) => {
<AppLogo />
<div class="hidden lg:flex lg:items-center lg:gap-7 lg:text-sm lg:font-semibold lg:text-slate-200">
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to" class="shrink-0 transition hover:text-emerald-200"
:class="isActive(item.to) ? 'text-emerald-200' : 'text-slate-200'">
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
class="shrink-0 transition hover:text-yellow-200"
:class="isActive(item.to) ? 'text-yellow-200' : 'text-slate-200'">
{{ item.label }}
</NuxtLink>
</div>
<form
class="ml-auto flex w-full max-w-xs items-center rounded-full border border-white/10 bg-white/8 px-4 py-2 shadow-2xl shadow-emerald-950/20 sm:max-w-sm"
class="ml-auto flex w-full max-w-xs items-center rounded-full border border-white/10 bg-white/8 px-4 py-2 shadow-2xl shadow-yellow-950/20 sm:max-w-sm"
@submit.prevent="submitSearch">
<Search class="mr-3 size-4 shrink-0 text-emerald-200" />
<Search class="mr-3 size-4 shrink-0 text-yellow-200" />
<input v-model="keyword" type="search" placeholder="Tìm phim Hàn Quốc..."
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"
@mouseenter="memberMenuOpen = true" @mouseleave="memberMenuOpen = false">
<button v-if="user" type="button"
class="grid size-9 cursor-pointer place-items-center rounded-full bg-white/10 text-white transition hover:bg-white/16"
aria-label="Thông báo">
@@ -206,12 +207,12 @@ watch(user, (currentUser) => {
</button>
<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-emerald-100"
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="user ? 'Tài khoản thành viên' : 'Đăng nhập thành viên'" @click="handleMemberClick">
<Loader2 v-if="authLoading" class="mx-1 size-4 animate-spin" />
<template v-else-if="user">
<img :src="memberAvatar" :alt="memberName"
class="size-7 rounded-full object-cover ring-2 ring-emerald-200/80">
class="size-7 rounded-full object-cover ring-2 ring-yellow-200/80">
</template>
<User v-else class="ml-1 size-4 fill-current" />
<span class="max-w-24 truncate">{{ user ? memberName : 'Thành viên' }}</span>
@@ -227,7 +228,7 @@ watch(user, (currentUser) => {
</NuxtLink>
<div class="my-2 border-t border-white/10" />
<button type="button"
class="flex h-12 w-full cursor-pointer items-center gap-3 px-5 text-left font-black text-emerald-300 transition hover:bg-white/8 hover:text-white"
class="flex h-12 w-full cursor-pointer items-center gap-3 px-5 text-left font-black text-yellow-300 transition hover:bg-white/8 hover:text-white"
@click="handleSignOut">
<LogOut class="size-4 shrink-0" />
Đăng xuất
@@ -258,17 +259,16 @@ watch(user, (currentUser) => {
</div>
<nav class="flex flex-col gap-1 p-4">
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
class="rounded-lg px-4 py-3 text-base font-semibold text-slate-200 transition hover:bg-white/8 hover:text-emerald-200"
:class="isActive(item.to) ? 'bg-white/8 text-emerald-200' : ''" @click="closeMobileMenu">
class="rounded-lg px-4 py-3 text-base font-semibold text-slate-200 transition hover:bg-white/8 hover:text-yellow-200"
:class="isActive(item.to) ? 'bg-white/8 text-yellow-200' : ''" @click="closeMobileMenu">
{{ item.label }}
</NuxtLink>
</nav>
<div class="border-t border-white/10 p-4">
<button type="button"
class="inline-flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-black text-slate-950 transition hover:bg-emerald-100"
class="inline-flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-100"
@click="handleMemberClick">
<img v-if="user" :src="memberAvatar" :alt="memberName"
class="size-7 rounded-full object-cover">
<img v-if="user" :src="memberAvatar" :alt="memberName" class="size-7 rounded-full object-cover">
<User v-else class="size-4 fill-current" />
<span>{{ user ? memberName : 'Đăng nhập thành viên' }}</span>
</button>
@@ -280,7 +280,7 @@ watch(user, (currentUser) => {
</NuxtLink>
<div class="border-t border-white/10" />
<button type="button"
class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-black text-emerald-300 transition hover:bg-white/8 hover:text-white"
class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-black text-yellow-300 transition hover:bg-white/8 hover:text-white"
@click="handleSignOut">
<LogOut class="size-4 shrink-0" />
Đăng xuất
@@ -302,7 +302,7 @@ watch(user, (currentUser) => {
<X class="size-5" />
</button>
<div class="auth-poster-panel hidden min-h-[32rem] items-end p-8 md:flex">
<div class="auth-poster-panel hidden min-h-128 items-end p-8 md:flex">
<div>
<AppLogo />
</div>
@@ -310,11 +310,12 @@ watch(user, (currentUser) => {
<div class="bg-slate-950 px-5 py-10 sm:px-10 md:px-16 md:py-16">
<div v-if="user">
<p class="text-sm font-bold text-emerald-300">Thành viên</p>
<p class="text-sm font-bold text-yellow-300">Thành viên</p>
<h2 class="mt-2 text-2xl font-black">Tài khoản của bạn</h2>
<p class="mt-6 rounded-md bg-white/8 px-4 py-3 text-sm font-semibold text-slate-100">{{ user.email }}</p>
<p class="mt-6 rounded-md bg-white/8 px-4 py-3 text-sm font-semibold text-slate-100">{{ user.email }}
</p>
<button type="button"
class="mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-emerald-300 text-sm font-black text-slate-950 transition hover:bg-white"
class="mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-yellow-300 text-sm font-black text-slate-950 transition hover:bg-white"
@click="handleSignOut">
<LogOut class="size-4" />
Đăng xuất
@@ -326,14 +327,14 @@ watch(user, (currentUser) => {
<p class="mt-5 text-sm text-slate-300">
<template v-if="authMode === 'login'">
Nếu bạn chưa có tài khoản,
<button type="button" class="font-black text-emerald-300 hover:text-white"
<button type="button" class="font-black text-yellow-300 hover:text-white"
@click="authMode = 'register'; authError = ''; authMessage = ''">
đăng ký ngay
</button>
</template>
<template v-else>
Nếu bạn đã có tài khoản,
<button type="button" class="font-black text-emerald-300 hover:text-white"
<button type="button" class="font-black text-yellow-300 hover:text-white"
@click="authMode = 'login'; authError = ''; authMessage = ''">
đăng nhập ngay
</button>
@@ -368,7 +369,7 @@ watch(user, (currentUser) => {
</div>
<button type="submit"
class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-emerald-300 text-sm font-black text-slate-950 transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-70"
class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-yellow-300 text-sm font-black text-slate-950 transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-70"
:disabled="submittingAuth">
<Loader2 v-if="submittingAuth" class="size-4 animate-spin" />
<User v-else class="size-4 fill-current" />
@@ -376,12 +377,12 @@ watch(user, (currentUser) => {
</button>
<button v-if="authMode === 'login'" type="button"
class="mt-7 block w-full text-center text-sm font-bold text-white hover:text-emerald-300"
class="mt-7 block w-full text-center text-sm font-bold text-white hover:text-yellow-300"
@click="handleResetPassword">
Quên mật khẩu?
</button>
<p v-if="authMessage" class="mt-4 rounded-md bg-emerald-400/12 px-3 py-2 text-sm text-emerald-100">
<p v-if="authMessage" class="mt-4 rounded-md bg-yellow-400/12 px-3 py-2 text-sm text-yellow-100">
{{ authMessage }}
</p>
<p v-if="authError" class="mt-4 rounded-md bg-red-500/12 px-3 py-2 text-sm text-red-100">
@@ -441,9 +442,9 @@ watch(user, (currentUser) => {
.auth-poster-panel {
background:
linear-gradient(180deg, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.92)),
linear-gradient(135deg, rgba(0, 220, 130, 0.12) 0 18%, transparent 18% 100%),
radial-gradient(circle at 22% 18%, rgba(0, 220, 130, 0.24), transparent 8rem),
linear-gradient(120deg, #061f17 0%, #0f172a 54%, #020617 100%);
linear-gradient(135deg, rgba(234, 179, 8, 0.14) 0 18%, transparent 18% 100%),
radial-gradient(circle at 22% 18%, rgba(250, 204, 21, 0.22), transparent 8rem),
linear-gradient(120deg, #422006 0%, #0f172a 54%, #020617 100%);
position: relative;
}
@@ -451,14 +452,14 @@ watch(user, (currentUser) => {
position: absolute;
inset: 0;
background-image:
linear-gradient(115deg, transparent 0 10%, rgba(0, 220, 130, 0.12) 10% 10.6%, transparent 10.6% 100%),
linear-gradient(115deg, transparent 0 10%, rgba(234, 179, 8, 0.16) 10% 10.6%, transparent 10.6% 100%),
repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.06) 0 7.5rem, transparent 7.5rem 8rem),
repeating-linear-gradient(15deg, rgba(0, 220, 130, 0.08) 0 10rem, transparent 10rem 10.6rem);
repeating-linear-gradient(15deg, rgba(250, 204, 21, 0.1) 0 10rem, transparent 10rem 10.6rem);
content: "";
opacity: 0.75;
}
.auth-poster-panel > div {
.auth-poster-panel>div {
position: relative;
z-index: 1;
}