From e5935c15af0375240fa7c711dc99101fa48048be Mon Sep 17 00:00:00 2001 From: real-zephex Date: Wed, 10 Apr 2024 01:19:20 +0530 Subject: UI changes --- src/app/anime/[id]/[...animeId]/page.jsx | 92 --------------------- src/app/anime/[id]/[...animeId]/video.module.css | 70 ---------------- src/app/anime/[id]/buttons.jsx | 88 ++++++++++++++++++++ src/app/anime/[id]/info.module.css | 63 ++++++++++++-- src/app/anime/[id]/loading.jsx | 6 +- src/app/anime/[id]/loading.module.css | 24 ++++-- src/app/anime/[id]/page.jsx | 23 ++---- src/app/anime/anime.module.css | 6 +- src/app/anime/page.jsx | 2 +- src/app/anime/recent/page.jsx | 2 +- src/app/anime/recent/recent.module.css | 30 +++++-- src/app/anime/search/components/fetchedInfo.js | 8 +- src/app/anime/search/page.jsx | 13 ++- src/app/anime/search/search.css | 82 ------------------- src/app/anime/search/search.module.css | 93 +++++++++++++++++++++ src/app/anime/top-airing/page.jsx | 2 +- src/app/anime/top-airing/trending.module.css | 31 ++++--- src/app/anime/videoLinkfetcher.js | 32 ++++++++ src/app/components/footer/footer.module.css | 25 ------ src/app/components/footer/page.jsx | 36 ++------ src/app/components/header/header.jsx | 37 ++++----- src/app/components/header/header.module.css | 34 -------- src/app/manga/[title]/[id]/[read]/page.jsx | 1 + src/app/manga/[title]/[id]/info.module.css | 32 ++++++-- src/app/manga/[title]/[id]/page.jsx | 1 + src/app/manga/[title]/page.jsx | 5 +- src/app/manga/[title]/title.module.css | 4 +- src/app/manga/cacher.js | 2 +- src/app/manga/manga.module.css | 15 +++- src/app/manga/page.jsx | 8 +- src/app/page.jsx | 38 ++++++--- src/app/page.module.css | 100 +++++++++++++++++++++-- 32 files changed, 545 insertions(+), 460 deletions(-) delete mode 100644 src/app/anime/[id]/[...animeId]/page.jsx delete mode 100644 src/app/anime/[id]/[...animeId]/video.module.css create mode 100644 src/app/anime/[id]/buttons.jsx delete mode 100644 src/app/anime/search/search.css create mode 100644 src/app/anime/search/search.module.css create mode 100644 src/app/anime/videoLinkfetcher.js delete mode 100644 src/app/components/footer/footer.module.css delete mode 100644 src/app/components/header/header.module.css (limited to 'src') 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 ( -
-
-

- {last_two} - {remainingWords} -

-
- - - - -
- {animedata && - animedata.episodes.map((item, index) => ( - //

Hello World

- - - - ))} -
-
-
-
- ); -} - -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 ( +
+

Episodes:

+
+ {info && + info.episodes && + info.episodes.map((item, index) => ( + + ))} +
+ + {videoLink && ( + + )} +
+ ); +} 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 ( -
-

Hold tight...Arriving!!

+
+
); } 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 (
@@ -50,21 +51,7 @@ export default async function AnimeInfo({ params }) {

-

Episodes:

-
- {info && - info.episodes && - info.episodes.map((item, index) => ( - - - - ))} -
+
); 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 ( -
+
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 ( -
+

Recent Releases

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 ( -
+
{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" }} > -
+

{item.title}

Drama Poster -
-
- +
+
+ { if (event.target.value.trim() !== "") { @@ -44,14 +44,13 @@ export default function Input() { }} onKeyDown={(event) => handleKeyPress(event)} placeholder="Enter anime title" + className={styles.SearchInput} >
{loading && ( -

+

Please wait while we crunch all the data for you

)} diff --git a/src/app/anime/search/search.css b/src/app/anime/search/search.css deleted file mode 100644 index 0a89a68..0000000 --- a/src/app/anime/search/search.css +++ /dev/null @@ -1,82 +0,0 @@ -.waitWhileLoading { - font-size: 18px; - font-family: "Kanit"; - text-align: center; - color: white; -} - -.searchContainer input { - border: none; - border-radius: 5px; - color: white; - outline: none; - background: none; - width: 100%; - font-family: "Lato"; - font-size: 16px; -} - -.searchContainer { - display: flex; - align-items: center; - margin: 20px 0px 20px 0px; - background-color: #2c2c2c; - padding: 8px; - border-radius: 5px; - width: 30%; -} - -.searchIcon { - color: white; - margin-right: 5px; -} - -.animeEntry { - display: flex; - overflow-x: auto; -} - -.animeEntry::-webkit-scrollbar { - height: 5px; -} - -.animeEntry::-webkit-scrollbar-track { - background-color: #636363; - border-radius: 5px; -} - -.animeEntry::-webkit-scrollbar-thumb { - background-color: rgba(196, 196, 196, 0.692); - border-radius: 5px; - -} - -.anime { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px; - border-style: dotted; - border-color: #636363; - margin: 10px 10px 0px 0px; - border-radius: 10px; - border-width: 4px; -} - -.anime p { - color: white; - width: 25dvh; - font-family: "Lato"; - font-size: 18px; -} - -.animeImage { - border-radius: 10px; - margin-left: 20px; -} - -@media screen and (max-width: 768px) { - .searchContainer { - width: 70%; - } -} \ No newline at end of file diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css new file mode 100644 index 0000000..28fae6e --- /dev/null +++ b/src/app/anime/search/search.module.css @@ -0,0 +1,93 @@ +.waitWhileLoading { + font-size: 18px; + font-family: "Kanit"; + text-align: center; + color: white; +} + +.searchContainer input { + border: none; + border-radius: 5px; + color: white; + outline: none; + background: none; + width: 100%; + font-family: "Lato"; + font-size: 16px; +} + +.searchContainer { + display: flex; + align-items: center; + margin: 20px 0px 20px 0px; + background-color: #2c2c2c; + padding: 8px; + border-radius: 5px; + width: 30%; +} + +.searchIcon { + color: white; + margin-right: 5px; +} + +.animeEntry { + display: flex; + overflow-x: auto; +} + +.animeEntry:hover .anime { + opacity: 0.5; +} + +.animeEntry:hover .anime:hover { + opacity: 1; +} + +.animeEntry::-webkit-scrollbar { + height: 5px; +} + +.animeEntry::-webkit-scrollbar-track { + background-color: #636363; + border-radius: 5px; +} + +.animeEntry::-webkit-scrollbar-thumb { + background-color: rgba(196, 196, 196, 0.692); + border-radius: 5px; + +} + +.anime { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-style: dotted; + border-color: #636363; + margin: 10px 10px 0px 0px; + border-radius: 10px; + border-width: 4px; + transition: opacity 400ms ease-in; + background-color: #353535a6; + +} + +.anime p { + color: white; + width: 20dvw; + font-family: "Atkinson"; + font-size: 18px; +} + +.animeImage { + border-radius: 10px; + margin-left: 20px; +} + +@media screen and (max-width: 768px) { + .searchContainer { + width: 70%; + } +} \ No newline at end of file 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 ( -
+

Trending

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 ( -
-
- - Status - - - Github - +
+
+

Made with :3 by zephex

- - -
+ ); } 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 ( -
-
- -

- Dramalama -

- -
- -

anime

- - -

manga

+
+
+
+ +

Dramalama

- -

kdrama

+
+
+ Anime + + Kdrama + Manga
-
+ ); } 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 />

{index + 1}

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 }) {
+

Characters

{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 }) { />

- {item.title["romaji"]},{" "} - {item.title["english"]},{" "} - {item.title["native"]} + {item.title["english"] || + item.title["romaji"]}

{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 (

- + Manga SVG
); 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 (
-
- Logo -

- Hey there, welcome to Dramalama. We are excited to have you - on board. -

+
+
+
+ +

Manga

+

Your one stop for all your manga needs

+ +
+
+ +

Anime

+

Your one stop for all your anime needs

+ +
+
+ +

Kdrama - Maintainence

+

Your one stop for all your kdrama needs

+ +
+
); 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 -- cgit v1.2.3