aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--next.config.mjs2
-rw-r--r--public/bg-test.jpgbin0 -> 319066 bytes
-rw-r--r--src/app/anime/[id]/page.jsx75
-rw-r--r--src/app/globals.css1
-rw-r--r--src/app/kdrama/[id]/page.jsx75
-rw-r--r--src/app/movies/[id]/page.jsx77
-rw-r--r--src/app/page.jsx67
-rw-r--r--utils/kdrama_urls.js4
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
new file mode 100644
index 0000000..c21c950
--- /dev/null
+++ b/public/bg-test.jpg
Binary files differ
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}`;
};