shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixing category card

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-30 23:56:26 +05:30
parent cf0e5ca536
commit 18e36d8b63
5 changed files with 105 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/categorycard/CategoryCard.css
View File

@@ -8,20 +8,78 @@
bottom: 0;
background: linear-gradient(
to top,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(18, 18, 18, 1) 0%,
rgba(18, 18, 18, 0.7) 20%,
rgba(18, 18, 18, 0) 60%,
rgba(18, 18, 18, 0.2) 100%
);
z-index: 50;
transition: all 0.3s ease-in-out;
}
.group:hover .overlay {
background: linear-gradient(
to top,
rgba(18, 18, 18, 0.95) 0%,
rgba(18, 18, 18, 0.8) 50%,
rgba(18, 18, 18, 0.6) 100%
);
}
.dot {
width: 5px;
height: 5px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
width: 3px;
height: 3px;
display: inline-block;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
margin: 0 4px;
position: relative;
top: -1px;
}
/* Modern Card Styles */
.category-card-container {
transition: transform 0.3s ease-in-out;
}
.category-card-container:hover {
transform: translateY(-4px);
}
.category-badge {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.02em;
transition: all 0.3s ease;
}
.category-badge:hover {
background: rgba(255, 255, 255, 0.15);
}
.item-title {
font-weight: 500;
letter-spacing: 0.01em;
transition: all 0.2s ease;
}
.item-title:hover {
color: #ffffff;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}
.play-icon {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
transition: all 0.3s ease;
}
.group:hover .play-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

40
src/components/categorycard/CategoryCard.jsx
View File

@@ -87,8 +87,8 @@ const CategoryCard = React.memo(
};
return (
<div className={`w-full ${className}`}>
<div className="flex items-center justify-between">
<h1 className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] capitalize">
<div className="flex items-center justify-between mb-6">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide">
{label}
</h1>
{showViewMore && (
@@ -96,10 +96,10 @@ const CategoryCard = React.memo(
to={`/${path}`}
className="flex w-fit items-baseline h-fit rounded-3xl gap-x-1 group"
>
<p className="text-white text-[12px] font-semibold h-fit leading-0 group-hover:text-[#ffbade] transition-all ease-out">
<p className="text-gray-300 text-[12px] font-medium h-fit leading-0 group-hover:text-white transition-all ease-out">
View more
</p>
<FaChevronRight className="text-white text-[10px] group-hover:text-[#ffbade] transition-all ease-out" />
<FaChevronRight className="text-gray-300 text-[10px] group-hover:text-white transition-all ease-out" />
</Link>
)}
</div>
@@ -115,7 +115,7 @@ const CategoryCard = React.memo(
{itemsToRender.firstRow.map((item, index) => (
<div
key={index}
className="flex flex-col transition-transform duration-300 ease-in-out"
className="flex flex-col transition-transform duration-300 ease-in-out category-card-container"
style={{ height: "fit-content" }}
ref={(el) => (cardRefs.current[index] = el)}
>
@@ -136,7 +136,7 @@ const CategoryCard = React.memo(
{hoveredItem === item.id + index && showPlay && (
<FontAwesomeIcon
icon={faPlay}
className="text-[40px] text-white absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[10000]"
className="text-[40px] text-white absolute top-1/2 left-1/2 play-icon z-[10000]"
/>
)}
@@ -150,36 +150,36 @@ const CategoryCard = React.memo(
</div>
{(item.tvInfo?.rating === "18+" ||
item?.adultContent === true) && (
<div className="text-white px-2 rounded-md bg-[#FF5700] absolute top-2 left-2 flex items-center justify-center text-[14px] font-bold">
<div className="text-white px-2 py-1 rounded-md bg-black/50 backdrop-blur-sm border border-white/10 absolute top-2 left-2 flex items-center justify-center text-[12px] font-medium">
18+
</div>
)}
<div className="absolute left-2 bottom-3 flex items-center justify-center w-fit space-x-1 z-[100] max-[270px]:flex-col max-[270px]:gap-y-[3px]">
<div className="absolute left-2 bottom-3 flex items-center justify-center w-fit space-x-2 z-[100] max-[270px]:flex-col max-[270px]:gap-y-[3px]">
{item.tvInfo?.sub && (
<div className="flex space-x-1 justify-center items-center bg-[#B0E3AF] rounded-[2px] px-[4px] text-black py-[2px]">
<div className="category-badge flex space-x-1 justify-center items-center">
<FontAwesomeIcon
icon={faClosedCaptioning}
className="text-[12px]"
className="text-[12px] text-white/90"
/>
<p className="text-[12px] font-bold">
<p className="text-[12px] text-white/90">
{item.tvInfo.sub}
</p>
</div>
)}
{item.tvInfo?.dub && (
<div className="flex space-x-1 justify-center items-center bg-[#B9E7FF] rounded-[2px] px-[8px] text-black py-[2px]">
<div className="category-badge flex space-x-1 justify-center items-center">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[12px]"
className="text-[12px] text-white/90"
/>
<p className="text-[12px] font-bold">
<p className="text-[12px] text-white/90">
{item.tvInfo.dub}
</p>
</div>
)}
{item.tvInfo?.eps && (
<div className="flex space-x-1 justify-center items-center bg-[#a9a6b16f] rounded-[2px] px-[8px] text-white py-[2px]">
<p className="text-[12px] font-extrabold">
<div className="category-badge flex space-x-1 justify-center items-center">
<p className="text-[12px] text-white/90">
{item.tvInfo.eps}
</p>
</div>
@@ -200,21 +200,21 @@ const CategoryCard = React.memo(
</div>
<Link
to={`/${item.id}`}
className="text-white font-semibold mt-1 item-title hover:text-[#FFBADE] hover:cursor-pointer line-clamp-1"
className="text-gray-100 font-medium mt-2 item-title hover:text-white hover:cursor-pointer line-clamp-1"
>
{language === "EN" ? item.title : item.japanese_title}
</Link>
{item.description && (
<div className="line-clamp-3 text-[13px] font-extralight text-[#b1b0b0] max-[1200px]:hidden">
<div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-1 max-[1200px]:hidden">
{item.description}
</div>
)}
<div className="flex items-center gap-x-2 w-full mt-2 overflow-hidden">
<div className="text-gray-400 text-[14px] text-nowrap overflow-hidden text-ellipsis">
<div className="text-gray-500 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
{item.tvInfo.showType.split(" ").shift()}
</div>
<div className="dot"></div>
<div className="text-gray-400 text-[14px] text-nowrap overflow-hidden text-ellipsis">
<div className="text-gray-500 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
{item.tvInfo?.duration === "m" ||
item.tvInfo?.duration === "?" ||
item.duration === "m" ||

9
src/components/player/PlayerIcons.jsx
View File

@@ -73,12 +73,9 @@ const fullScreenOnIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2
const fullScreenOffIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"width="24" height="24" style="margin-bottom: 5px; vertical-align: middle;"><path d="M109.2,134.9l-8.4,50.1c-0.4,2.7-2.4,3.3-4.4,1.4L82,172l-27.9,27.9l-14.2-14.2l27.9-27.9l-14.4-14.4c-1.9-1.9-1.3-3.9,1.4-4.4l50.1-8.4c1.8-0.5,3.6,0.6,4.1,2.4C109.4,133.7,109.4,134.3,109.2,134.9L109.2,134.9z M172.1,82.1L200,54.2L185.8,40l-27.9,27.9l-14.4-14.4c-1.9-1.9-3.9-1.3-4.4,1.4l-8.4,50.1c-0.5,1.8,0.6,3.6,2.4,4.1c0.5,0.2,1.2,0.2,1.7,0l50.1-8.4c2.7-0.4,3.3-2.4,1.4-4.4L172.1,82.1z"/></svg>`;
const logo = `<p style="display: flex; gap: 7px; align-items: center; background-color:#1F2020; padding:5px;padding-inline:7px; border-radius:5px">
<b style="color: #ffbade;">Powered by</b>
<span style="font-size: 14px;">
Zen<span style="color: #ffbade;">!</span>me
</span>
</p>
`;
<b style="color: white;">Powered by</b>
<img src="/logo.png" alt="Zenime Logo" style="height: 20px; object-fit: contain;" />
</p>`;
export {
backward10Icon,

3
src/components/sidecard/Sidecard.jsx
View File

@@ -29,6 +29,9 @@ function Sidecard({ data, label, className }) {
return (
<div className={`flex flex-col ${className}`}>
{label && (
<h2 className="font-medium text-lg text-neutral-200 mb-4">{label}</h2>
)}
<div className="flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded">
{data &&
data.map((item, index) => (

14
src/pages/search/Search.jsx
View File

@@ -1,5 +1,4 @@
import CategoryCard from '@/src/components/categorycard/CategoryCard';
import Genre from '@/src/components/genres/Genre';
import CategoryCardLoader from '@/src/components/Loader/CategoryCard.loader';
import SidecardLoader from '@/src/components/Loader/Sidecard.loader';
import PageSlider from '@/src/components/pageslider/PageSlider';
@@ -20,7 +19,7 @@ function Search() {
const [error, setError] = useState(null);
useEffect(() => {
const fetchSearch = async () => {
const fetchSearch = async () => {
setLoading(true);
try {
const data = await getSearch(keyword,page);
@@ -62,8 +61,15 @@ function Search() {
<SidecardLoader />
) : (
<>
{homeInfo?.most_popular && <Sidecard data={homeInfo.most_popular} className="mt-0" label="Most Popular" />}
{homeInfo?.genres && <Genre data={homeInfo.genres} />}
{homeInfo?.most_popular && (
<div className="bg-[#141414] rounded-lg p-6">
<h2 className="text-xl font-semibold mb-4 text-white">Most Popular</h2>
<Sidecard
data={homeInfo.most_popular}
className="!mt-0"
/>
</div>
)}
</>
)}
</div>