diff options
| -rw-r--r-- | next.config.mjs | 2 | ||||
| -rw-r--r-- | public/bg-test.jpg | bin | 0 -> 319066 bytes | |||
| -rw-r--r-- | src/app/anime/[id]/page.jsx | 75 | ||||
| -rw-r--r-- | src/app/globals.css | 1 | ||||
| -rw-r--r-- | src/app/kdrama/[id]/page.jsx | 75 | ||||
| -rw-r--r-- | src/app/movies/[id]/page.jsx | 77 | ||||
| -rw-r--r-- | src/app/page.jsx | 67 | ||||
| -rw-r--r-- | utils/kdrama_urls.js | 4 |
8 files changed, 177 insertions, 124 deletions
diff --git a/next.config.mjs b/next.config.mjs index 6b50381..216839b 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -42,6 +42,8 @@ const nextConfig = { hostname: "ih1.redbubble.net",
},
{ hostname: "images.hdqwalls.com" },
+ { hostname: "cdn3.iconfinder.com" },
+ { hostname: "www.iconfinder.com" },
],
},
logging: {
diff --git a/public/bg-test.jpg b/public/bg-test.jpg Binary files differnew file mode 100644 index 0000000..c21c950 --- /dev/null +++ b/public/bg-test.jpg diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx index 0e62310..c060899 100644 --- a/src/app/anime/[id]/page.jsx +++ b/src/app/anime/[id]/page.jsx @@ -12,39 +12,50 @@ const AnimeInfoHomepage = async ({ params }) => { preFetchVideoLinks(data.episodes);
return (
- <section className="pt-12 lg:w-9/12 m-auto">
- <div className="flex items-center justify-center lg:justify-start md:justify-start">
- <Image
- isBlurred
- width={190}
- src={data.image.toString()}
- alt="Anime Title Poster"
- className="m-2"
- />
- <div className="mx-5">
- <h4 className={`text-2xl`}>
- <strong>{data.title}</strong>
- </h4>
- <div>
- {data.genres &&
- data.genres.map((item, index) => (
- <Chip
- key={index}
- color="warning"
- variant="faded"
- className="mr-1 mb-1"
- >
- <p className="text-xs">{item}</p>
- </Chip>
- ))}
+ <section
+ style={{
+ backgroundColor: "black",
+ backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
+ backgroundSize: "40px 40px",
+ }}
+ className="h-screen "
+ >
+ <section className="absolute inset-0 bg-gradient-to-b from-transparent to-black">
+ <section className="pt-12 lg:w-9/12 m-auto">
+ <div className="flex items-center justify-center lg:justify-start md:justify-start">
+ <Image
+ isBlurred
+ width={190}
+ src={data.image.toString()}
+ alt="Anime Title Poster"
+ className="m-2"
+ />
+ <div className="mx-5">
+ <h4 className={`text-2xl`}>
+ <strong>{data.title}</strong>
+ </h4>
+ <div>
+ {data.genres &&
+ data.genres.map((item, index) => (
+ <Chip
+ key={index}
+ color="warning"
+ variant="faded"
+ className="mr-1 mb-1"
+ >
+ <p className="text-xs">{item}</p>
+ </Chip>
+ ))}
+ </div>
+ </div>
</div>
- </div>
- </div>
- <DescriptionTabs data={data} />
- <EpisodesContainer data={data} />
- <br />
- <br />
- <br />
+ <DescriptionTabs data={data} />
+ <EpisodesContainer data={data} />
+ <br />
+ <br />
+ <br />
+ </section>
+ </section>
</section>
);
};
diff --git a/src/app/globals.css b/src/app/globals.css index c414701..a9aeb5b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -25,6 +25,7 @@ --nord-bg-darklight: #4C566A;
--light-sky: #CAF4FF;
+ --test: #1f1f1fd2;
}
body::-webkit-scrollbar {
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx index 90acded..ce8b6ba 100644 --- a/src/app/kdrama/[id]/page.jsx +++ b/src/app/kdrama/[id]/page.jsx @@ -11,39 +11,50 @@ export default async function DramaInfo({ params }) { PreFetchVideoLinks(data.episodes, data.id);
return (
- <section className="pt-12 lg:w-9/12 m-auto">
- <div className="flex items-center justify-center lg:justify-start md:justify-start">
- <Image
- isBlurred
- width={190}
- src={data.image.toString()}
- alt="Anime Title Poster"
- className="m-2"
- />
- <div className="mx-5">
- <h4 className={`text-2xl`}>
- <strong>{data.title}</strong>
- </h4>
- <div className="mt-1">
- {data.genres &&
- data.genres.map((item, index) => (
- <Chip
- key={index}
- color="warning"
- variant="faded"
- className="mr-1 mb-1"
- >
- <p className="text-xs">{item}</p>
- </Chip>
- ))}
+ <section
+ style={{
+ backgroundColor: "black",
+ backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
+ backgroundSize: "40px 40px",
+ }}
+ className="h-screen "
+ >
+ <section className="absolute inset-0 bg-gradient-to-b from-transparent to-black">
+ <section className="pt-12 lg:w-9/12 m-auto">
+ <div className="flex items-center justify-center lg:justify-start md:justify-start">
+ <Image
+ isBlurred
+ width={190}
+ src={data.image.toString()}
+ alt="Anime Title Poster"
+ className="m-2"
+ />
+ <div className="mx-5">
+ <h4 className={`text-2xl`}>
+ <strong>{data.title}</strong>
+ </h4>
+ <div className="mt-1">
+ {data.genres &&
+ data.genres.map((item, index) => (
+ <Chip
+ key={index}
+ color="warning"
+ variant="faded"
+ className="mr-1 mb-1"
+ >
+ <p className="text-xs">{item}</p>
+ </Chip>
+ ))}
+ </div>
+ </div>
</div>
- </div>
- </div>
- <DescriptionTabs data={data} />
- <EpisodesContainer data={data} />
- <br />
- <br />
- <br />
+ <DescriptionTabs data={data} />
+ <EpisodesContainer data={data} />
+ <br />
+ <br />
+ <br />
+ </section>
+ </section>
</section>
);
}
diff --git a/src/app/movies/[id]/page.jsx b/src/app/movies/[id]/page.jsx index 11389e7..e4e745a 100644 --- a/src/app/movies/[id]/page.jsx +++ b/src/app/movies/[id]/page.jsx @@ -11,42 +11,53 @@ const MovieInfoPage = async ({ params }) => { const data = await MovieInfoData(id); return ( - <main> - <section className="pt-12 m-auto w-full lg:w-9/12"> - <MovieVideoPlayer id={data.id} /> - <div className="flex items-center"> - <Image - isBlurred - shadow="lg" - src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`} - width={180} - height={300} - alt="Anime Title Poster" - className="m-2" - ></Image> - <div className="mx-5"> - <h4 className={`text-2xl`}> - <strong>{data.title}</strong> - </h4> - <div className="mt-1"> - {data.genres && - data.genres.map((item, index) => ( - <Chip - key={index} - color="warning" - variant="faded" - className="mr-1 mb-1" - > - <p className="text-xs">{item.name}</p> - </Chip> - ))} + <section + style={{ + backgroundColor: "black", + backgroundImage: `radial-gradient(gray 1px, transparent 1px)`, + backgroundSize: "40px 40px", + }} + className="h-screen " + > + <section className="absolute inset-0 bg-gradient-to-b from-transparent to-black"> + <section className="pt-12 m-auto w-full lg:w-9/12"> + <MovieVideoPlayer id={data.id} /> + <div className="flex items-center"> + <Image + isBlurred + shadow="lg" + src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`} + width={180} + height={300} + alt="Anime Title Poster" + className="m-2" + ></Image> + <div className="mx-5"> + <h4 className={`text-2xl`}> + <strong>{data.title}</strong> + </h4> + <div className="mt-1"> + {data.genres && + data.genres.map((item, index) => ( + <Chip + key={index} + color="warning" + variant="faded" + className="mr-1 mb-1" + > + <p className="text-xs"> + {item.name} + </p> + </Chip> + ))} + </div> </div> </div> - </div> - <DescriptionTabs data={data} /> - <Questions /> + <DescriptionTabs data={data} /> + <Questions /> + </section> </section> - </main> + </section> ); }; diff --git a/src/app/page.jsx b/src/app/page.jsx index 6a8e0aa..b6fdd75 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -4,48 +4,63 @@ import Image from "next/image"; export default async function Home() { const homePageCards = (title, message, url) => { return ( - <Link href={`/${title}`} className="my-1"> - <Card className="max-w-[400px] border-1 border-gray-500"> - <CardHeader className="flex gap-3"> - <Image - alt="nextui logo" - height={40} - width={40} - src={url} - className="rounded-md" - /> - <div className="flex flex-col"> - <p className="text-md">{title}</p> - <p className="text-small text-default-500"> - dramalama/{title} - </p> - </div> - </CardHeader> - <Divider className="bg-slate-400" /> - <CardBody> - <p>{message}</p> - </CardBody> - </Card> + // <Link href={`/${title}`} className="my-1"> + // <Card className="max-w-[400px] border-1 border-gray-500"> + // <CardHeader className="flex gap-3"> + // <Image + // alt="nextui logo" + // height={40} + // width={40} + // src={url} + // className="rounded-md" + // /> + // <div className="flex flex-col"> + // <p className="text-md">{title}</p> + // <p className="text-small text-default-500"> + // dramalama/{title} + // </p> + // </div> + // </CardHeader> + // <Divider className="bg-slate-400" /> + // <CardBody> + // <p>{message}</p> + // </CardBody> + // </Card> + // </Link> + <Link + href={`/${title}`} + className="flex mb-2 lg:mx-2 text-center transition ease-in delay-50 hover:scale-105 text-inherit bg-gray-200 dark:bg-[#1f1f1f] p-1 rounded-lg" + > + <section> + <Image + src={url} + height={100} + width={100} + alt="section image" + className="rounded-full overflow-visible" + ></Image> + <p className="uppercase font-xl">{title}</p> + </section> </Link> ); }; return ( - <section className="h-screen w-screen flex flex-col items-center justify-center "> + <section className="h-screen w-screen flex flex-col items-center justify-center lg:flex-row "> {homePageCards( "anime", "Gravity of anime constant state of falling into the depths of happiness and joy", - "https://i.ibb.co/bLJzm3T/Whats-App-Image-2024-05-23-at-22-05-59-09933e5f.jpg" + "https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_A_red-256.png" )} {homePageCards( "kdrama", "Infinity loop I'll watch just one k-drama, ok one more, ok wait...", - "https://ih1.redbubble.net/image.2656505524.2951/poster,504x498,f8f8f8-pad,600x600,f8f8f8.jpg" + "https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_K_red-512.png" )} {homePageCards( "movies", "Dive into a world of thrilling adventure and heart-pounding suspense", - "https://images.hdqwalls.com/download/poster-avengers-endgame-ni-1920x1080.jpg" + "https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_M_red-512.png" )} </section> ); diff --git a/utils/kdrama_urls.js b/utils/kdrama_urls.js index acea986..ccf57c4 100644 --- a/utils/kdrama_urls.js +++ b/utils/kdrama_urls.js @@ -1,5 +1,7 @@ const base_url_one = "https://dramacool-scraper.vercel.app"; const base_url_two = "https://consumet-jade.vercel.app/movies/dramacool"; +const base_url_three = + "https://api-consumet-org-ukw6.onrender.com/movies/dramacool"; const proxy_url = "https://sup-proxy.zephex0-f6c.workers.dev/api-json?url="; export const popular_dramas_url = `${proxy_url}${base_url_one}/popular`; @@ -13,5 +15,5 @@ export const drama_info_url = (id) => `${proxy_url}${base_url_two}/info?id=${id}`; export const videoURL = (episodeId, mediaId) => { - return `${proxy_url}${base_url_two}/watch?episodeId=${episodeId}&mediaId=${mediaId}`; + return `${proxy_url}${base_url_three}/watch?episodeId=${episodeId}&mediaId=${mediaId}`; }; |