diff options
33 files changed, 474 insertions, 382 deletions
diff --git a/package-lock.json b/package-lock.json index d3c42fd..0709dc7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,8 @@ "react-player": "^2.15.1", "react-router-dom": "^6.22.3", "say": "^0.16.0", - "sharp": "^0.33.3" + "sharp": "^0.33.3", + "sleep-promise": "^9.1.0" }, "devDependencies": { "@types/node": "20.11.28", @@ -4380,6 +4381,11 @@ "node": ">=8" } }, + "node_modules/sleep-promise": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/sleep-promise/-/sleep-promise-9.1.0.tgz", + "integrity": "sha512-UHYzVpz9Xn8b+jikYSD6bqvf754xL2uBUzDFwiU6NcdZeifPr6UfgU43xpkPu67VMS88+TI2PSI7Eohgqf2fKA==" + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", diff --git a/package.json b/package.json index ea846c0..33f10e5 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "react-player": "^2.15.1", "react-router-dom": "^6.22.3", "say": "^0.16.0", - "sharp": "^0.33.3" + "sharp": "^0.33.3", + "sleep-promise": "^9.1.0" }, "devDependencies": { "@types/node": "20.11.28", diff --git a/src/app/anime/[id]/[...animeId]/page.jsx b/src/app/anime/[id]/[...animeId]/page.jsx deleted file mode 100644 index f5505e5..0000000 --- a/src/app/anime/[id]/[...animeId]/page.jsx +++ /dev/null @@ -1,92 +0,0 @@ -import { MediaPlayer, MediaProvider } from "@vidstack/react"; -import "@vidstack/react/player/styles/base.css"; -import "@vidstack/react/player/styles/plyr/theme.css"; -import { - PlyrLayout, - plyrLayoutIcons, -} from "@vidstack/react/player/layouts/plyr"; -import styles from "./video.module.css"; -import { redirect } from "next/navigation"; -import Link from "next/link"; - -export const runtime = 'edge'; - -export default async function Video({ params }) { - let link; - const id = params.animeId[0]; - const series = params.animeId[1]; - - // Getting the episode number and the anime name. Kindly ignore! - const words = id.split("-"); - const last_two = words.slice(-2).join(" "); - const remainingWords = words.slice(0, -2).join(" "); - - const data = await getVideoLink(id); - const animedata = await getAnimeInfo(series); - - if (data.message) { - redirect("/404"); - } - - try { - link = data.sources[4].url; - } catch (error) { - try { - link = data.sources[3].url; - } catch (error) { - console.log("Episode not found."); - redirect("/404"); - } - } - - return ( - <div className={styles.VideoMain}> - <div className={styles.VideoContainer}> - <p style={{ textAlign: "center", color: "white" }}> - {last_two} - {remainingWords} - </p> - <div className={styles.Video}> - <MediaPlayer - title={words} - src={link} - aspectRatio="16/9" - load="eager" - className={styles.VideoPlayer} - > - <MediaProvider /> - <PlyrLayout icons={plyrLayoutIcons} /> - </MediaPlayer> - <div className={styles.EpisodesButtons}> - {animedata && - animedata.episodes.map((item, index) => ( - // <p key={index}>Hello World</p> - <Link - href={`/anime/watch/${item.id}/${series}`} - key={index} - > - <button>{item.number}</button> - </Link> - ))} - </div> - </div> - </div> - </div> - ); -} - -async function getVideoLink(id) { - const res = await fetch( - "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id - ); - const data = res.json(); - return data; -} - -async function getAnimeInfo(anime_id) { - const res = await fetch( - "https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id, - { next: { revalidate: 7200 } } - ); - const data = await res.json(); - return data; -} diff --git a/src/app/anime/[id]/[...animeId]/video.module.css b/src/app/anime/[id]/[...animeId]/video.module.css deleted file mode 100644 index 0214e60..0000000 --- a/src/app/anime/[id]/[...animeId]/video.module.css +++ /dev/null @@ -1,70 +0,0 @@ -.Video { - display: flex; - justify-content: center; - align-items: center; -} - -.VideoPlayer { - border-radius: 10px; - width: 70%; - height: auto; -} - -.EpisodesButtons { - display: flex; - flex-direction: column; - margin-left: 10px; - height: 500px; - overflow-y: auto; - width: 100px; - scrollbar-width: thin; -} - -.EpisodesButtons button { - width: 70px; - margin: 5px; - outline: none; - border: none; - padding: 5px; - font-family: "Quicksand"; - font-size: 14px; - border-radius: 5px; - cursor: pointer; - color: white; - background-color: #3d3d3d; - transition: background-color 0.2s linear; -} - -.EpisodesButtons button:hover { - background-color: #1f1f1f; - transition: background-color 0.2s linear -} - -@media screen and (max-width: 768px) { - - .VideoMain { - max-width: 99%; - } - - .Video { - display: block; - } - - .VideoPlayer { - width: 100%; - } - - .EpisodesButtons { - display: flex; - flex-direction: row; - height: auto; - width: auto; - margin-top: 10px; - margin-left: 0px; - overflow-y: auto; - } - - .EpisodesButtons button { - width: 50px; - } -}
\ No newline at end of file diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx new file mode 100644 index 0000000..eac1884 --- /dev/null +++ b/src/app/anime/[id]/buttons.jsx @@ -0,0 +1,88 @@ +"use client"; + +import styles from "./info.module.css"; +import { useState } from "react"; +import { fetch_video_link } from "../videoLinkfetcher"; +import { MediaPlayer, MediaProvider } from "@vidstack/react"; +import "@vidstack/react/player/styles/base.css"; +import "@vidstack/react/player/styles/plyr/theme.css"; +import { + PlyrLayout, + plyrLayoutIcons, +} from "@vidstack/react/player/layouts/plyr"; + +export default function Button({ data2: info }) { + const [videoLink, setVideoLink] = useState(null); + + async function video(id) { + const link = await fetch_video_link(id); + if (link === undefined) { + alert("Sorry, but not links were found"); + } else { + setVideoLink(link); + console.log(videoLink); + } + } + + return ( + <main> + <h2 className={styles.buttonHeader}>Episodes: </h2> + <div className={styles.buttonContainer}> + {info && + info.episodes && + info.episodes.map((item, index) => ( + <button + className={styles.dramaButton} + key={index} + onClick={(event) => { + event.target.style.backgroundColor = + "var(--soft-purple)"; + video(item.id); + }} + > + {item.number} + </button> + ))} + </div> + + {videoLink && ( + <div + className={styles.videoPopUp} + id="popup" + onKeyDown={(event) => { + if (event.code === "Escape") { + setVideoLink(""); + } + }} + > + <div className={styles.video}> + <MediaPlayer + title="dramaPlayer" + src={videoLink} + aspectRatio="16/9" + load="eager" + className={styles.VideoPlayer} + playsInline + id="videoPlayer" + volume={0.2} + onQualityChange={(event) => + console.log("changed qualities", event) + } + > + <MediaProvider /> + <PlyrLayout icons={plyrLayoutIcons} /> + </MediaPlayer> + <button + className={styles.closeButton} + onClick={() => { + setVideoLink(""); + }} + > + Close + </button> + </div> + </div> + )} + </main> + ); +} diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css index e8bfc54..6299405 100644 --- a/src/app/anime/[id]/info.module.css +++ b/src/app/anime/[id]/info.module.css @@ -52,10 +52,15 @@ color: #ffffff81 } +.buttonContainer button { + transition: transform 200ms ease-in-out; + +} + .buttonContainer button:focus { opacity: 0.7; - transition: transform 0.2s linear; - background-color: var(--pastel-red); + transition: transform 200ms ease-in; + background-color: var(--soft-purple); transform: scale(0.9); } @@ -68,7 +73,7 @@ padding: 10px; font-family: "Quicksand"; font-size: 14px; - margin: 5px; + margin: 5px 5px 5px 5px; width: 55px; border-radius: 5px; text-align: center; @@ -76,13 +81,13 @@ outline: none; color: white; background-color: #3d3d3d; - transition: background-color 0.2s linear; + transition: background-color 200ms ease-in-out; cursor: pointer; } .dramaButton:hover { background-color: #1f1f1f; - transition: background-color 0.2s linear + transition: background-color 200ms ease-in } .infoPageContainer p { @@ -111,9 +116,57 @@ color: var(--soft-purple) } +.videoPopUp { + height: 100dvh; + width: 100dvw; + background-color: #1f1f1fd3; + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 1; + overflow-y: auto; +} + +.video { + display: flex; + flex-direction: column; +} + +.closeButton { + font-family: "Poppins", serif; + font-size: 16px; + background-color: var(--pastel-red); + padding: 4px 10px; + border: 0; + outline: 0; + border-radius: 0.5rem; + cursor: pointer; + margin: 5px; + width: auto; +} + +.VideoPlayer { + width: 60dvw; + +} + + @media screen and (max-width: 768px) { + .titleContainer p { + font-size: 28px; + } + .animeDetails { font-size: 14px; } + + .VideoPlayer { + width: 100%; + } }
\ No newline at end of file diff --git a/src/app/anime/[id]/loading.jsx b/src/app/anime/[id]/loading.jsx index 71ff978..24e8c83 100644 --- a/src/app/anime/[id]/loading.jsx +++ b/src/app/anime/[id]/loading.jsx @@ -1,9 +1,9 @@ import styles from "./loading.module.css"; -export default function Loading() { +export default async function Loading() { return ( - <div className={styles.loadingContainer}> - <p className={styles.loadingText}>Hold tight...Arriving!!</p> + <div className={styles.Main}> + <div className={styles.LoadingContainer}></div> </div> ); } diff --git a/src/app/anime/[id]/loading.module.css b/src/app/anime/[id]/loading.module.css index 63604d5..14dfcf3 100644 --- a/src/app/anime/[id]/loading.module.css +++ b/src/app/anime/[id]/loading.module.css @@ -1,12 +1,22 @@ -.loadingContainer { +.Main { + height: 100vh; + width: 100vw; display: flex; - align-items: center; justify-content: center; - height: 100dvh; + align-items: center; +} + +.LoadingContainer { + width: 50px; + height: 50px; + border-radius: 50%; + border: 8px solid; + border-color: #F4F4F4 #0000; + animation: s1 1s infinite; } -.loadingText { - color: white; - font-family: "Lato"; - font-size: 20px; +@keyframes s1 { + to { + transform: rotate(.5turn) + } }
\ No newline at end of file diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx index 598c8a7..14fb36a 100644 --- a/src/app/anime/[id]/page.jsx +++ b/src/app/anime/[id]/page.jsx @@ -1,14 +1,15 @@ import styles from "./info.module.css"; import Image from "next/image"; -import Link from "next/link"; - -export const runtime = 'edge'; +import Button from "./buttons"; +import { preFetchAnimeLinks } from "../videoLinkfetcher"; export default async function AnimeInfo({ params }) { let animeID = params.id; const info = await getAnimeInfo(animeID); + preFetchAnimeLinks(info); + return ( <div className={styles.dramaInfoContainer}> <div className={styles.dramaInfo}> @@ -50,21 +51,7 @@ export default async function AnimeInfo({ params }) { </p> </div> - <h2 className={styles.buttonHeader}>Episodes: </h2> - <div className={styles.buttonContainer}> - {info && - info.episodes && - info.episodes.map((item, index) => ( - <Link - href={`/anime/watch/${item.id}/${animeID}`} - key={index} - > - <button className={styles.dramaButton}> - {item.number} - </button> - </Link> - ))} - </div> + <Button data2={info} /> </div> </div> ); diff --git a/src/app/anime/anime.module.css b/src/app/anime/anime.module.css index 15695be..63f2993 100644 --- a/src/app/anime/anime.module.css +++ b/src/app/anime/anime.module.css @@ -1,4 +1,4 @@ -.Main { - max-width: 95%; - margin: 100px auto; +.main { + margin: 80px auto; + max-width: 98%; }
\ No newline at end of file diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx index 3f893d1..7480ae2 100644 --- a/src/app/anime/page.jsx +++ b/src/app/anime/page.jsx @@ -5,7 +5,7 @@ import Input from "./search/page"; export default async function Anime() { return ( - <div className={styles.Main}> + <div className={styles.main}> <Input /> <Trending /> <Releases /> diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx index 2bf4e86..b197899 100644 --- a/src/app/anime/recent/page.jsx +++ b/src/app/anime/recent/page.jsx @@ -6,7 +6,7 @@ export default async function Releases() { const data = await fetchRecentEpisodes(); return ( - <div className="trendingContainer"> + <div className={styles.RecentContainer}> <div className={styles.RecentText}> <p>Recent Releases</p> </div> diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css index f9d5161..24774bd 100644 --- a/src/app/anime/recent/recent.module.css +++ b/src/app/anime/recent/recent.module.css @@ -8,6 +8,7 @@ margin: 5px; color: var(--soft-purple); font-family: "Poppins"; + font-weight: 500; } .RecentText span { @@ -17,11 +18,20 @@ .Recent { display: flex; overflow-x: auto; - margin: 5px; +} + +.RecentContainer:hover .RecentEntries { + opacity: 0.5; +} + +.RecentContainer:hover:hover .RecentEntries:hover { + opacity: 1; + transform: scale(1.02); } .Recent::-webkit-scrollbar { height: 5px; + width: 0px; } .Recent::-webkit-scrollbar-thumb { @@ -30,13 +40,12 @@ } .RecentEntries { - margin: 7px; - transition: transform 0.1s linear; -} + margin: 4px; + background-color: #353535a6; + padding: 0.5rem; + border-radius: 1rem; + transition: opacity 400ms ease, transform 400ms ease; -.RecentEntries:hover { - transition: transform 0.1s linear; - transform: scale(0.97); } .RecentEntries p { @@ -44,10 +53,13 @@ margin: 5px auto; width: 140px; font-family: "Atkinson Hyperlegible"; + height: 80px; + overflow-y: auto; + transition: font-size 400ms ease; } .RecentEntries p::-webkit-scrollbar { - width: 5px; + width: 2px; } .Recent p::-webkit-scrollbar-thumb { @@ -56,6 +68,6 @@ } .RecentImage { - border-radius: 5px; + border-radius: 1rem; aspect-ratio: auto; }
\ No newline at end of file diff --git a/src/app/anime/search/components/fetchedInfo.js b/src/app/anime/search/components/fetchedInfo.js index 17c9673..9a1d187 100644 --- a/src/app/anime/search/components/fetchedInfo.js +++ b/src/app/anime/search/components/fetchedInfo.js @@ -1,10 +1,10 @@ -import "../search.css"; +import styles from "../search.module.css"; import Link from "next/link"; import Image from "next/image"; export default async function fetchedInfo(data) { return ( - <div className="animeEntry"> + <div className={styles.animeEntry}> {data ? ( data.results && data.results.length > 0 ? ( data.results.map((item, index) => ( @@ -13,11 +13,11 @@ export default async function fetchedInfo(data) { href={`/anime/${item.id}`} style={{ textDecoration: "none" }} > - <div className="anime"> + <div className={styles.anime}> <p>{item.title}</p> <Image src={item.image} - className="animeImage" + className={styles.animeImage} width={120} height={160} alt="Drama Poster" diff --git a/src/app/anime/search/page.jsx b/src/app/anime/search/page.jsx index 3d63484..ce037cb 100644 --- a/src/app/anime/search/page.jsx +++ b/src/app/anime/search/page.jsx @@ -1,6 +1,6 @@ "use client"; -import "./search.css"; +import styles from "./search.module.css"; import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library import { useState } from "react"; import Results from "./components/fetchInfo"; @@ -33,9 +33,9 @@ export default function Input() { return ( <div> - <div className="inputContainer"> - <div className="searchContainer"> - <FaSearch className="searchIcon" /> + <div className={styles.inputContainer}> + <div className={styles.searchContainer}> + <FaSearch className={styles.searchIcon} /> <input onChange={(event) => { if (event.target.value.trim() !== "") { @@ -44,14 +44,13 @@ export default function Input() { }} onKeyDown={(event) => handleKeyPress(event)} placeholder="Enter anime title" + className={styles.SearchInput} ></input> </div> </div> {loading && ( - <p className="waitWhileLoading" - - > + <p className={styles.waitWhileLoading}> Please wait while we crunch all the data for you </p> )} diff --git a/src/app/anime/search/search.css b/src/app/anime/search/search.module.css index 0a89a68..28fae6e 100644 --- a/src/app/anime/search/search.css +++ b/src/app/anime/search/search.module.css @@ -36,6 +36,14 @@ overflow-x: auto; } +.animeEntry:hover .anime { + opacity: 0.5; +} + +.animeEntry:hover .anime:hover { + opacity: 1; +} + .animeEntry::-webkit-scrollbar { height: 5px; } @@ -61,12 +69,15 @@ margin: 10px 10px 0px 0px; border-radius: 10px; border-width: 4px; + transition: opacity 400ms ease-in; + background-color: #353535a6; + } .anime p { color: white; - width: 25dvh; - font-family: "Lato"; + width: 20dvw; + font-family: "Atkinson"; font-size: 18px; } diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx index 898b766..e385629 100644 --- a/src/app/anime/top-airing/page.jsx +++ b/src/app/anime/top-airing/page.jsx @@ -6,7 +6,7 @@ export default async function Trending() { const data = await test(); return ( - <div className="trendingContainer"> + <div className={styles.TrendingContainer}> <div className={styles.TrendingText}> <p>Trending</p> </div> diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css index c3c55c5..33d00d3 100644 --- a/src/app/anime/top-airing/trending.module.css +++ b/src/app/anime/top-airing/trending.module.css @@ -8,6 +8,7 @@ margin: 5px; color: var(--soft-purple); font-family: "Poppins"; + font-weight: 500; } .TrendingText span { @@ -17,11 +18,20 @@ .trending { display: flex; overflow-x: auto; - margin: 5px; +} + +.TrendingContainer:hover .trendingEntries { + opacity: 0.5; +} + +.TrendingContainer:hover .trendingEntries:hover { + opacity: 1; + transform: scale(1.02); } .trending::-webkit-scrollbar { height: 5px; + width: 0px; } .trending::-webkit-scrollbar-thumb { @@ -30,13 +40,12 @@ } .trendingEntries { - margin: 7px; - transition: transform 0.2s linear; -} - -.trendingEntries:hover { - transition: transform 0.2s linear; - transform: scale(0.97); + margin: 4px; + transition: transform 400ms ease; + background-color: #353535a6; + padding: 0.5rem; + border-radius: 1rem; + transition: opacity 400ms ease, transform 400ms ease; } .trendingEntries p { @@ -44,10 +53,12 @@ margin: 5px auto; width: 140px; font-family: "Atkinson Hyperlegible"; + height: 80px; + overflow-y: auto; } .trendingEntries p::-webkit-scrollbar { - width: 5px; + width: 2px; } .trendingEntries p::-webkit-scrollbar-thumb { @@ -56,6 +67,6 @@ } .trendingImage { - border-radius: 5px; + border-radius: 1rem; aspect-ratio: auto; }
\ No newline at end of file diff --git a/src/app/anime/videoLinkfetcher.js b/src/app/anime/videoLinkfetcher.js new file mode 100644 index 0000000..3963bd3 --- /dev/null +++ b/src/app/anime/videoLinkfetcher.js @@ -0,0 +1,32 @@ +"use server"; +export async function fetch_video_link(id) { + try { + const res = await fetch( + `https://consumet-jade.vercel.app/anime/gogoanime/watch/${id}`, + { cache: "force-cache" } + ); + const data = await res.json(); + let vidLink = data.sources[data.sources.length - 2].url; + return vidLink; + } catch (error) { + console.log("Mehh Error", error); + } +} + +export async function preFetchAnimeLinks(data, n = 40) { + const limit = Math.min(n, data.episodes.length); + + try { + const fetchPromises = []; + for (let i = 0; i < limit; i++) { + const element = data.episodes[i]; + const link = `https://consumet-jade.vercel.app/anime/gogoanime/watch/${element.id}`; + fetchPromises.push(fetch(link, { cache: "force-cache" })); + } + + await Promise.all(fetchPromises); + console.log("Video links pre-fetched successfully!"); + } catch (error) { + console.error("Error occurred while pre-fetching video links:", error); + } +} diff --git a/src/app/components/footer/footer.module.css b/src/app/components/footer/footer.module.css deleted file mode 100644 index 8c70b62..0000000 --- a/src/app/components/footer/footer.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.footer { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - background-color: #121212; - display: flex; - padding: 10px; - justify-content: space-between; - align-items: center; -} - -.FooterLeftContainer a { - color: #696880; - margin: 10px; -} - -.FooterRightContainer { - margin-right: 10px; -} - -.FooterRightContainer a { - margin: 10px; - text-decoration: none; -}
\ No newline at end of file diff --git a/src/app/components/footer/page.jsx b/src/app/components/footer/page.jsx index ea763a6..08a7c73 100644 --- a/src/app/components/footer/page.jsx +++ b/src/app/components/footer/page.jsx @@ -1,37 +1,11 @@ -import styles from "./footer.module.css"; +import styles from "../../page.module.css"; export default async function Footer() { return ( - <div className={styles.footer}> - <div className={styles.FooterLeftContainer}> - <a - href="https://stats.uptimerobot.com/Fxp7SE5Ll3" - target="_new" - > - Status - </a> - <a - href="https://github.com/real-zephex/Dramalama" - target="_new" - > - Github - </a> + <main className={styles.main}> + <div className={styles.footer}> + <p>Made with :3 by zephex</p> </div> - - <div className={styles.FooterRightContainer}> - <a - style={{ color: "#EBCB8B" }} - href="https://dramalama.vercel.app" - > - Vercel - </a> - <a - style={{ color: " #A3BE8C" }} - href="https://dramalama.netlify.app" - > - Netlify - </a> - </div> - </div> + </main> ); } diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx index bd8c389..1aab71d 100644 --- a/src/app/components/header/header.jsx +++ b/src/app/components/header/header.jsx @@ -1,31 +1,26 @@ import Link from "next/link"; - -import styles from "./header.module.css"; +import styles from "../../page.module.css"; export default function Header() { return ( - <div className={styles.headMain}> - <div className={styles.headNav}> - <Link - href="/" - style={{ color: "black", textDecoration: "none" }} - > - <p style={{ fontSize: "26px", color: "var(--pastel-red)" }}> - Dramalama - </p> - </Link> - <div className={styles.rightNav}> - <Link href="/anime"> - <p>anime</p> - </Link> - <Link href="/manga"> - <p>manga</p> + <main className={styles.main}> + <div className={styles.header}> + <div className={styles.left}> + <Link + href={"/"} + style={{ textDecoration: "none", color: "white" }} + > + <p>Dramalama</p> </Link> - <Link href="/kdrama"> - <p>kdrama</p> + </div> + <div className={styles.right}> + <Link href="/anime">Anime</Link> + <Link href="/kdrama" style={{ pointerEvents: "none" }}> + Kdrama </Link> + <Link href="/manga">Manga</Link> </div> </div> - </div> + </main> ); } diff --git a/src/app/components/header/header.module.css b/src/app/components/header/header.module.css deleted file mode 100644 index da92d47..0000000 --- a/src/app/components/header/header.module.css +++ /dev/null @@ -1,34 +0,0 @@ -.headMain { - position: fixed; - top: 0; - width: 100%; - background-color: #121212; -} - -.headNav { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - max-width: 95%; - margin: -10px auto; - font-family: "Poppins"; -} - -.rightNav { - display: flex; - cursor: pointer; - overflow-x: auto; -} - -.rightNav a { - text-decoration: underline; - font-family: "Atkinson Hyperlegible"; - color: var(--light-green); - font-size: 18px; -} - -.rightNav p { - margin-right: 10px; - margin-left: 10px; -}
\ No newline at end of file diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx index faa5999..a13dbbb 100644 --- a/src/app/manga/[title]/[id]/[read]/page.jsx +++ b/src/app/manga/[title]/[id]/[read]/page.jsx @@ -42,6 +42,7 @@ export default async function Read({ params }) { width={800} height={1000} priority + quality={100} unoptimized /> <p>{index + 1}</p> diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css index b827249..a699557 100644 --- a/src/app/manga/[title]/[id]/info.module.css +++ b/src/app/manga/[title]/[id]/info.module.css @@ -1,5 +1,5 @@ .MangaInfoContainer { - margin: 70px auto; + margin: 68px auto; } .MangaHero { @@ -45,6 +45,10 @@ margin-top: -10px; } +.MangaReleaseYear { + margin-top: 10px; +} + .GenreContainer { margin-top: 5px; display: flex; @@ -55,6 +59,10 @@ color: var(--neon-green); } +.GenreContainer { + margin-top: 10px; +} + .genres { display: flex; align-items: center; @@ -71,7 +79,7 @@ .MangaRatings { display: flex; - margin: 5px 0px 10px 0px; + margin-top: 10px; /* justify-content: center; */ } @@ -81,10 +89,21 @@ color: var(--light-green); } +.CharactersContainer { + max-width: 98%; + margin: 20px auto; +} + +.CharactersContainer h2 { + color: gray; + font-family: "Poppins", serif; +} + .Character { display: flex; flex-direction: row; overflow-x: auto; + margin-top: -10px; } .Character::-webkit-scrollbar { @@ -132,7 +151,7 @@ } .ChapterContainer { - width: 50%; + width: 50dvw; text-align: center; height: 300px; overflow-y: auto; @@ -140,6 +159,7 @@ .ChapterContainer::-webkit-scrollbar { width: 5px; + height: 0px; } .ChapterContainer::-webkit-scrollbar-thumb { @@ -148,7 +168,7 @@ } .ChapterContainer button { - width: 130px; + width: 8dvw; height: auto; padding: 10px; margin: 5px; @@ -159,7 +179,7 @@ color: white; background-color: #3d3d3d; cursor: pointer; - transition: background-color 0.2s linear; + transition: background-color 100ms ease-in-out; } .ChapterContainer button p { @@ -169,7 +189,7 @@ .ChapterContainer button:hover { background-color: #1f1f1f; - transition: background-color 0.2s linear + transition: background-color 50ms ease-in } .ChapterContainer button:focus { diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx index c8eb389..13715b9 100644 --- a/src/app/manga/[title]/[id]/page.jsx +++ b/src/app/manga/[title]/[id]/page.jsx @@ -96,6 +96,7 @@ export default async function MangaInfo({ params }) { </div> <div className={styles.CharactersContainer}> + <h2>Characters</h2> <div className={styles.Character}> {data.characters && data.characters.map((item, index) => ( diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx index 2db1634..bd69c6a 100644 --- a/src/app/manga/[title]/page.jsx +++ b/src/app/manga/[title]/page.jsx @@ -38,9 +38,8 @@ export default async function MangaInfo({ params }) { /> <div className={styles.MangaInfo}> <p className={styles.MangaTitle}> - {item.title["romaji"]},{" "} - {item.title["english"]},{" "} - {item.title["native"]} + {item.title["english"] || + item.title["romaji"]} </p> <p className={styles.MangaDescription}> {desc.includes && diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css index 97a4dba..c832d85 100644 --- a/src/app/manga/[title]/title.module.css +++ b/src/app/manga/[title]/title.module.css @@ -11,7 +11,7 @@ .SearchedFor { color: white; text-align: center; - font-family: "Kanit"; + font-family: "Poppins"; font-size: 26px; } @@ -64,4 +64,4 @@ .Main { max-width: 100%; } -} +}
\ No newline at end of file diff --git a/src/app/manga/cacher.js b/src/app/manga/cacher.js index ef8ef2e..916caca 100644 --- a/src/app/manga/cacher.js +++ b/src/app/manga/cacher.js @@ -4,7 +4,7 @@ export default async function PreFetchChaterLinks(data) { try { const fetchPromises = data.map(async (element) => { - const link = `https://consumet-api-di2e.onrender.com/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`; + const link = `https://consumet-jade.vercel.app/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`; await fetch(link, { cache: "force-cache" }); }); diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css index dab15a3..e88b6ea 100644 --- a/src/app/manga/manga.module.css +++ b/src/app/manga/manga.module.css @@ -4,14 +4,19 @@ align-items: center; justify-content: center; height: 100dvh; + width: 100dvw; +} + +.MangaSVG { + height: auto; + width: auto; } .SearchBar { display: flex; align-items: center; - border-radius: 10px; background: #1f1f1f; - margin-top: -10px; + margin-top: 10px; border-style: dotted; border-color: rgb(63, 63, 63); border-width: 2px; @@ -27,4 +32,10 @@ color: white; font-family: "Kanit"; font-size: 16px; +} + +@media screen and (max-width: 768px) { + .MangaSVG { + width: 100%; + } }
\ No newline at end of file diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx index 3757f90..8f4db8c 100644 --- a/src/app/manga/page.jsx +++ b/src/app/manga/page.jsx @@ -5,7 +5,13 @@ import SearchBar from "./searchBar"; export default async function Manga() { return ( <div className={styles.Main}> - <Image src="/manga.svg" width={480} height={240} className={styles.MangaSVG} /> + <Image + src="/manga.svg" + width={480} + height={200} + className={styles.MangaSVG} + alt="Manga SVG" + /> <SearchBar /> </div> ); diff --git a/src/app/page.jsx b/src/app/page.jsx index 0f9c123..e6230e2 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,21 +1,33 @@ -import Image from "next/image"; import styles from "./page.module.css"; +import Link from "next/link"; export default function Home() { return ( <main className={styles.main}> - <div className={styles.welcomeContainer}> - <Image - src="/logo.png" - width={300} - height={300} - alt="Logo" - priority - ></Image> - <p> - Hey there, welcome to Dramalama. We are excited to have you - on board. - </p> + <div className={styles.content}> + <div className={styles.contentContainer}> + <div className={styles.manga}> + <Link href={"/manga"}> + <h2>Manga</h2> + <p>Your one stop for all your manga needs</p> + </Link> + </div> + <div className={styles.anime}> + <Link href={"/anime"}> + <h2>Anime</h2> + <p>Your one stop for all your anime needs</p> + </Link> + </div> + <div className={styles.kdrama}> + <Link + href={"/kdrama"} + style={{ pointerEvents: "none" }} + > + <h2>Kdrama - Maintainence</h2> + <p>Your one stop for all your kdrama needs</p> + </Link> + </div> + </div> </div> </main> ); diff --git a/src/app/page.module.css b/src/app/page.module.css index f73f9fe..30f97e9 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -1,15 +1,99 @@ -.welcomeContainer { +.header { + position: fixed; + top: 0; + width: 100%; display: flex; - flex-direction: column; - justify-content: center; align-items: center; - height: 100dvh; - margin: 0px auto; + justify-content: space-between; + background-color: #121212; + font-family: "Poppins", serif; + z-index: 2; +} + +.left { + color: white; + font-size: 24px; +} + +.left p { + margin: 0; + padding: 1rem; +} + +.right a { + text-decoration: none; + color: white; + margin: 0 0.4rem 0 0.5rem; + transition: opacity 400ms ease; + font-size: 16px; +} + +.header:hover>.right a { + opacity: 0.5; +} + +.header:hover>.right a:hover { + opacity: 1; + cursor: pointer; +} + +.footer { + bottom: 0; + width: 100%; + position: fixed; + background-color: #121212; + color: white; + font-family: "Poppins", serif; + z-index: 2; +} + +.footer p { text-align: center; + font-size: 14px; + margin: 0; + padding: 0.6rem; } -.welcomeContainer p { - font-family: "Poppins"; - font-size: 20px; +.content { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.contentContainer { + display: block; +} + +.contentContainer a { + text-decoration: none; color: white; +} + +.manga, +.anime, +.kdrama { + background-color: #121212e0; + color: white; + margin-top: 5px; + border-radius: 5px; + transition: opacity 400ms ease; + padding: 0.4rem 2rem; + font-family: "Poppins", serif; +} + +.content:hover>.contentContainer div { + opacity: 0.5; +} + +.content:hover>.contentContainer div:hover { + opacity: 0.9; + cursor: pointer; +} + +.dotted-background { + height: 100vh; + width: 100vw; + z-index: -1; + position: absolute; }
\ No newline at end of file |