From 9322ac33fc71c7fe629237274b34885d5bb43419 Mon Sep 17 00:00:00 2001 From: Tejas Panchal Date: Sun, 27 Jul 2025 12:49:52 +0530 Subject: [PATCH] Fixed Carousal --- README.md | 39 +++---- src/App.css | 2 - src/App.jsx | 4 +- src/components/banner/Banner.css | 114 +++++++++---------- src/components/banner/Banner.jsx | 82 +++++++------ src/components/splashscreen/SplashScreen.css | 26 +++-- src/components/spotlight/Spotlight.css | 105 ++++++++++++----- src/components/spotlight/Spotlight.jsx | 21 ++-- 8 files changed, 218 insertions(+), 175 deletions(-) diff --git a/README.md b/README.md index 1d2b28f..f1989f2 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,22 @@

- - AnimeHi + + JustAnime
-

Zenime - Ad free anime streaming platform

+

JustAnime - Ad free anime streaming platform

- - Github Stars + + Github Stars - Github Issues - - Github Forks + Github Issues + + Github Forks

- Zenime is an open-source anime streaming service that uses custom API, built using ReactJS with javascript and Tailwind CSS. It lets you easily find any anime with intuitive search & suggestion feature and stream without any ads. + JustAnime is an open-source anime streaming service that uses ANIME API, built using ReactJS with javascript and Tailwind CSS. It lets you easily find any anime with intuitive search & suggestion feature and stream without any ads.

@@ -47,21 +47,21 @@ ## Previews
- Home Page + Home Page
View more screenshots
AnimeInfo Page - AnimeInfo Page + AnimeInfo Page
Searchbar - Searchbar + Searchbar
Character & Voice Actors - Character & Voice Actors + Character & Voice Actors
Watch Page - Watch Page + Watch Page
@@ -73,8 +73,8 @@ ### 2. Run the following code to clone the repository and install all required dependencies ```bash -git clone https://github.com/itzzzme/zenime.git -cd zenime +git clone https://github.com/tejaspanchall/JustAnime.git +cd JustAnime npm install # or yarn ``` @@ -89,13 +89,13 @@ npm start # or npm run dev (to run develepment server) ### Vercel -Host your own instance of Zenime on vercel +Host your own instance of JustAnime on vercel [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/itzzzme/zenime) ### Render -Host your own instance of Zenime on Render. +Host your own instance of JustAnime on Render. [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/itzzzme/zenime) @@ -114,6 +114,3 @@ If you discover any issues or have suggestions for improvement, please open an i ### Support If you like the project feel free to drop a star ✨. Your appreciation means a lot. - -

Made by itzzzme -🫰

diff --git a/src/App.css b/src/App.css index d608b5b..364fed3 100644 --- a/src/App.css +++ b/src/App.css @@ -14,8 +14,6 @@ body, display: flex; flex-direction: column; min-height: 100vh; - max-width: 2048px; - margin-inline: auto; } .content { width: 100%; diff --git a/src/App.jsx b/src/App.jsx index 65102a4..d359003 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -29,8 +29,8 @@ function App() { return ( -
-
+
+
{!isSplashScreen && } } /> diff --git a/src/components/banner/Banner.css b/src/components/banner/Banner.css index 599a1b4..f507cc8 100644 --- a/src/components/banner/Banner.css +++ b/src/components/banner/Banner.css @@ -12,28 +12,28 @@ bottom:0; background: radial-gradient( circle at 130% center, - rgba(32, 31, 49, 0) 50%, - rgba(32, 31, 49, 0.5) 60%, - rgba(32, 31, 49, 1) 80%, - rgba(32, 31, 49, 1) 100% + rgba(10, 10, 10, 0) 50%, + rgba(10, 10, 10, 0.5) 60%, + rgba(10, 10, 10, 1) 80%, + rgba(10, 10, 10, 1) 100% ), linear-gradient( to top, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to left, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( - to bottom, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + to bottom,m + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ); z-index: 1; @@ -42,28 +42,28 @@ .spotlight-overlay { background: radial-gradient( circle at 130% center, - rgba(32, 31, 49, 0) 50%, - rgba(32, 31, 49, 0.5) 60%, - rgba(32, 31, 49, 1) 80%, - rgba(32, 31, 49, 1) 100% + rgba(10, 10, 10, 0) 50%, + rgba(10, 10, 10, 0.5) 60%, + rgba(10, 10, 10, 1) 80%, + rgba(10, 10, 10, 1) 100% ), linear-gradient( to top, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to left, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to bottom, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 50%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 50%, + rgba(10, 10, 10, 0) 100% ); } } @@ -71,28 +71,28 @@ .spotlight-overlay { background: radial-gradient( circle at 100% center, - rgba(32, 31, 49, 0) 50%, - rgba(32, 31, 49, 0.5) 60%, - rgba(32, 31, 49, 1) 95%, - rgba(32, 31, 49, 1) 100% + rgba(10, 10, 10, 0) 50%, + rgba(10, 10, 10, 0.5) 60%, + rgba(10, 10, 10, 1) 95%, + rgba(10, 10, 10, 1) 100% ), linear-gradient( to top, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to left, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to bottom, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 70%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 70%, + rgba(10, 10, 10, 0) 100% ); } } @@ -100,34 +100,34 @@ .spotlight-overlay { background: radial-gradient( circle at 60% center, - rgba(32, 31, 49, 0) 50%, - rgba(32, 31, 49, 0.5) 85%, - rgba(32, 31, 49, 1) 95%, - rgba(32, 31, 49, 1) 100% + rgba(10, 10, 10, 0) 50%, + rgba(10, 10, 10, 0.5) 85%, + rgba(10, 10, 10, 1) 95%, + rgba(10, 10, 10, 1) 100% ), linear-gradient( to top, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 70%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 70%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to left, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 20%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 20%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to bottom, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 70%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 70%, + rgba(10, 10, 10, 0) 100% ), linear-gradient( to right, - rgba(32, 31, 49, 1) 0%, - rgba(32, 31, 49, 0) 15%, - rgba(32, 31, 49, 0) 100% + rgba(10, 10, 10, 1) 0%, + rgba(10, 10, 10, 0) 15%, + rgba(10, 10, 10, 0) 100% ); } -} +} \ No newline at end of file diff --git a/src/components/banner/Banner.jsx b/src/components/banner/Banner.jsx index b9e4e1d..b174130 100644 --- a/src/components/banner/Banner.jsx +++ b/src/components/banner/Banner.jsx @@ -6,7 +6,6 @@ import { faCalendar, faClock, } from "@fortawesome/free-solid-svg-icons"; -import { FaChevronRight } from "react-icons/fa"; import { Link } from "react-router-dom"; import { useLanguage } from "@/src/context/LanguageContext"; import "./Banner.css"; @@ -14,30 +13,30 @@ import "./Banner.css"; function Banner({ item, index }) { const { language } = useLanguage(); return ( -
+
{item.title}
-
-

+

+

#{index + 1} Spotlight

-

+

{language === "EN" ? item.title : item.japanese_title}

-
+
{item.tvInfo && ( <> {item.tvInfo.showType && (
-

+

{item.tvInfo.showType}

@@ -47,9 +46,9 @@ function Banner({ item, index }) {
-

+

{item.tvInfo.duration}

@@ -59,9 +58,9 @@ function Banner({ item, index }) {
-

+

{item.tvInfo.releaseDate}

@@ -69,30 +68,30 @@ function Banner({ item, index }) {
{item.tvInfo.quality && ( -
+
{item.tvInfo.quality}
)}
{item.tvInfo.episodeInfo?.sub && ( -
+
-

+

{item.tvInfo.episodeInfo.sub}

)} {item.tvInfo.episodeInfo?.dub && ( -
+
-

+

{item.tvInfo.episodeInfo.dub}

@@ -102,35 +101,30 @@ function Banner({ item, index }) { )}
-

+

{item.description}

-
- - -

- Detail -

- - -
+
+
+ + + Watch Now + + + Details +
); } -export default Banner; +export default Banner; \ No newline at end of file diff --git a/src/components/splashscreen/SplashScreen.css b/src/components/splashscreen/SplashScreen.css index 26bf168..7040ad2 100644 --- a/src/components/splashscreen/SplashScreen.css +++ b/src/components/splashscreen/SplashScreen.css @@ -98,18 +98,23 @@ body { /* Enter button */ .enter-button { - background: white; + background: rgba(255, 255, 255, 0.9); color: black; - padding: 12px 24px; + padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 500; margin: 8px 0 60px; - transition: background-color 0.2s; + transition: all 0.2s ease; + backdrop-filter: blur(8px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); } .enter-button:hover { - background: #ffbade; + background: white; + transform: translateY(-1px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); } /* FAQ Section */ @@ -133,10 +138,11 @@ body { } .faq-item { - background: #141414; + background: rgba(255, 255, 255, 0.03); border-radius: 12px; overflow: hidden; - border: 1px solid #1a1a1a; + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(8px); } .faq-question { @@ -155,18 +161,18 @@ body { } .faq-question:hover { - background: #1a1a1a; + background: rgba(255, 255, 255, 0.05); } .faq-toggle { font-size: 16px; - color: white; - opacity: 0.8; - transition: transform 0.2s ease; + color: rgba(255, 255, 255, 0.7); + transition: all 0.2s ease; } .faq-toggle.rotate { transform: rotate(180deg); + color: white; } .faq-answer { diff --git a/src/components/spotlight/Spotlight.css b/src/components/spotlight/Spotlight.css index 01d867e..639a04d 100644 --- a/src/components/spotlight/Spotlight.css +++ b/src/components/spotlight/Spotlight.css @@ -13,56 +13,99 @@ } .button-prev, .button-next { - width: 40px; - height: 40px; - color: white; - background-color: #383747; - border-radius: 7px; - display: flex; - justify-content: center; - align-items: center; + width: 32px; + height: 32px; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(8px); + border-radius: 6px; cursor: pointer; - transition: all 0.3s ease-out; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; } + .button-prev:hover, .button-next:hover { - background-color: #ffbade; - color: #383747; + background-color: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-1px); +} + +.button-prev::after, +.button-next::after { + content: ''; + width: 7px; + height: 7px; + border: 1.5px solid rgba(255, 255, 255, 0.8); + border-left: 0; + border-bottom: 0; } .button-prev::after { - font-family: "Font Awesome 5 Free"; - content: "\f053"; - font-weight: 900; - font-size: 14px; + transform: rotate(-135deg); + margin-left: 3px; } .button-next::after { - font-family: "Font Awesome 5 Free"; - content: "\f054"; - font-weight: 900; - font-size: 14px; + transform: rotate(45deg); + margin-right: 3px; } .swiper-horizontal > .swiper-pagination-bullets { - display: none; + bottom: 20px !important; + left: 50% !important; + transform: translateX(-50%) !important; + width: auto !important; + display: flex !important; + gap: 8px; + align-items: center; + justify-content: center; } + +.swiper-pagination-bullet { + width: 8px !important; + height: 8px !important; + border-radius: 50% !important; + background-color: rgba(255, 255, 255, 0.5) !important; + opacity: 1 !important; +} + .swiper-pagination-bullet-active { - background-color: rgb(239, 213, 22) !important; + background-color: #ffbade !important; + width: 24px !important; + border-radius: 12px !important; } + +.swiper-pagination { + bottom: 15px !important; +} + +.swiper-pagination-bullet { + background: white !important; + opacity: 0.5; +} + +.swiper-pagination-bullet-active { + opacity: 1; +} + @media only screen and (max-width: 575px) { .swiper-horizontal > .swiper-pagination-bullets { - /* bottom: var(--swiper-pagination-bottom, 8px); */ - bottom: 0; - right: 10px !important ; - left: auto !important; - width: 20px !important; - bottom: 5px !important; + bottom: 10px !important; + left: 50% !important; + transform: translateX(-50%) !important; + width: auto !important; display: flex !important; - gap: 18px; + gap: 6px; align-items: center; justify-content: center; - height: 80%; - flex-direction: column; + flex-direction: row !important; + height: auto !important; } -} + .button-prev, + .button-next { + display: none; + } +} \ No newline at end of file diff --git a/src/components/spotlight/Spotlight.jsx b/src/components/spotlight/Spotlight.jsx index 94e2e7a..54e5a1a 100644 --- a/src/components/spotlight/Spotlight.jsx +++ b/src/components/spotlight/Spotlight.jsx @@ -1,18 +1,19 @@ import { Swiper, SwiperSlide } from "swiper/react"; -import { Navigation, Autoplay } from "swiper/modules"; +import { Navigation, Autoplay, Pagination } from "swiper/modules"; import "swiper/css"; import "swiper/css/autoplay"; import "swiper/css/navigation"; +import "swiper/css/pagination"; import "./Spotlight.css"; import Banner from "../banner/Banner"; const Spotlight = ({ spotlights }) => { return ( <> -
-
-
+
+
+
{spotlights && spotlights.length > 0 ? ( <> @@ -25,14 +26,18 @@ const Spotlight = ({ spotlights }) => { nextEl: ".button-next", prevEl: ".button-prev", }} + pagination={{ + clickable: true, + dynamicBullets: false, + }} autoplay={{ delay: 3000, disableOnInteraction: false, }} - modules={[Navigation, Autoplay]} - className="h-[600px] max-[1390px]:h-full" + modules={[Navigation, Autoplay, Pagination]} + className="h-[450px] max-[1390px]:h-full" style={{ - "--swiper-pagination-bullet-inactive-color": "#ffffff", + "--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)", "--swiper-pagination-bullet-inactive-opacity": "1", }} > @@ -51,4 +56,4 @@ const Spotlight = ({ spotlights }) => { ); }; -export default Spotlight; +export default Spotlight; \ No newline at end of file