diff options
Diffstat (limited to 'src/app/anime')
21 files changed, 400 insertions, 756 deletions
diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx index d338417..f8cbe0c 100644 --- a/src/app/anime/[id]/page.jsx +++ b/src/app/anime/[id]/page.jsx @@ -1,80 +1,49 @@ -import Image from "next/image";
+import { Chip, Image } from "@nextui-org/react";
import { anime_info } from "../data-fetch/request";
-import styles from "../styles/info.module.css";
-import EpisodesButtons from "../components/episode_buttons";
+import DescriptionTabs from "../components/infoTabs";
-import { preFetchVideoLinks } from "../components/cacher";
+import EpisodesContainer from "../components/vidButtonContainer";
const AnimeInfoHomepage = async ({ params }) => {
const id = params.id;
const data = await anime_info(id);
- const sliceLength = Math.min(data.episodes.length, 49);
- preFetchVideoLinks(data.episodes.slice(0, sliceLength));
-
return (
- <main className={styles.main}>
- <div>
- {data && (
- <section className={styles.AnimeInfo}>
- <div className={styles.AnimeHeroSection}>
- <Image
- src={data.image}
- width={180}
- height={280}
- alt="Anime Poster"
- priority
- />
- <div>
- <p className={styles.animeTitle} style={{color: "white"}}>
- {data.title || "Not Found"}
- </p>
- <p className={styles.animeDescription}>
- <strong>Description: </strong>
- {data.description || "Not Found"}
- </p>
- <hr style={{ borderColor: "gray" }} />
- <span>
- <strong style={{ marginRight: 5 }}>
- Genres:
- </strong>
- {data.genres &&
- data.genres.map((item, index) => (
- <span
- key={index}
- style={{ color: "#a3a3a3" }}
- >
- {item}
- {index !==
- data.genres.length - 1 &&
- ", "}
- </span>
- ))}
- </span>
- <p>
- <strong>Episodes:</strong>{" "}
- {data.totalEpisodes || "Not Found"}
- </p>
- <p>
- <strong>Release year:</strong>{" "}
- {data.releaseDate || "Not Found"}
- </p>
- <p>
- <strong>Status:</strong>{" "}
- {data.status || "Not Found"}
- </p>
- <p>
- <strong>Type:</strong>{" "}
- {data.type || "Not Found"}
- </p>
- </div>
- </div>
- </section>
- )}
+ <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>
- <EpisodesButtons data={data} />
- </main>
+ <DescriptionTabs data={data} />
+ <EpisodesContainer data={data} />
+ <br />
+ <br />
+ <br />
+ </section>
);
};
diff --git a/src/app/anime/components/cacher.js b/src/app/anime/components/cacher.js index d3008fa..164dafd 100644 --- a/src/app/anime/components/cacher.js +++ b/src/app/anime/components/cacher.js @@ -1,11 +1,11 @@ "use server"; -import { info_url, watch_url } from "../../../../utils/anime_urls"; +import { anime_info } from "../data-fetch/request"; export async function preFetchAnimeInfo(data) { try { const fetchPromises = data.results.map(async (element) => { - await fetch(info_url(element.id), { next: { revalidate: 21600 } }); + await anime_info(element.id); }); await Promise.all(fetchPromises); diff --git a/src/app/anime/components/episode_buttons.jsx b/src/app/anime/components/episode_buttons.jsx index 013dee1..71f338f 100644 --- a/src/app/anime/components/episode_buttons.jsx +++ b/src/app/anime/components/episode_buttons.jsx @@ -202,4 +202,4 @@ function store_to_local(name, image, episode, id) { } } -export default EpisodesButtons;
\ No newline at end of file +export default EpisodesButtons; diff --git a/src/app/anime/components/infoTabs.jsx b/src/app/anime/components/infoTabs.jsx new file mode 100644 index 0000000..68a1da1 --- /dev/null +++ b/src/app/anime/components/infoTabs.jsx @@ -0,0 +1,46 @@ +"use client"; + +import { Tabs, Tab, Card, CardBody } from "@nextui-org/react"; + +import { lexend, atkinson } from "../../../../config/fonts"; + +export default function DescriptionTabs({ data: data }) { + return ( + <div className="flex w-full flex-col"> + <Tabs aria-label="Options" className={lexend.className}> + <Tab key="description" title="Description"> + <Card> + <CardBody className={atkinson.className}> + {data.description || "No description found"} + </CardBody> + </Card> + </Tab> + <Tab key="episodes" title="Details"> + <Card> + <CardBody className={atkinson.className}> + <h4> + <strong>Episodes</strong>:{" "} + <span>{data.totalEpisodes}</span> + </h4> + <h4> + <strong>Type</strong>: <span>{data.type}</span> + </h4> + <h4> + <strong>SUB/DUB</strong>:{" "} + <span>{data.subOrDub.toUpperCase()}</span> + </h4> + <h4> + <strong>Status</strong>:{" "} + <span>{data.status}</span> + </h4> + <h4> + <strong>Release Year</strong>:{" "} + <span>{data.releaseDate}</span> + </h4> + </CardBody> + </Card> + </Tab> + </Tabs> + </div> + ); +} diff --git a/src/app/anime/components/popularAnimes.jsx b/src/app/anime/components/popularAnimes.jsx deleted file mode 100644 index e62f70f..0000000 --- a/src/app/anime/components/popularAnimes.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import Link from "next/link"; -import Image from "next/image"; -import { Lexend_Deca } from "next/font/google"; - -import styles from "../styles/pop_recent_top.module.css"; -import { popular } from "../data-fetch/request"; -import { preFetchAnimeInfo } from "./cacher"; - -const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" }); - -const PopularAnimes = async () => { - const data = await popular(); - - preFetchAnimeInfo(data); - - return ( - <main className={styles.Main}> - <section> - <h2 className={styles.AnimeHeaderText}>Popular Animes</h2> - <div className={styles.AnimeContainer}> - {data && - data.results.map((item, index) => ( - <Link - key={index} - href={`/anime/${item.id}`} - shallow - style={{ - color: "white", - textDecoration: "none", - }} - className={lexend.className} - title={item.title} - > - <section className={styles.AnimeEntry}> - <Image - src={item.image} - width={180} - height={300} - alt="Anime Poster Image" - /> - <p className={styles.AnimeTitle}> - {item.title} - </p> - </section> - </Link> - ))} - </div> - </section> - </main> - ); -}; - -export default PopularAnimes; diff --git a/src/app/anime/components/recentEpisodes.jsx b/src/app/anime/components/recentEpisodes.jsx deleted file mode 100644 index 9e7899f..0000000 --- a/src/app/anime/components/recentEpisodes.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import Link from "next/link"; -import Image from "next/image"; -import { Lexend_Deca } from "next/font/google"; - -import styles from "../styles/pop_recent_top.module.css"; -import { recent } from "../data-fetch/request"; -import { preFetchAnimeInfo } from "./cacher"; - -const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" }); - -const RecentAnimes = async () => { - const data = await recent(); - - preFetchAnimeInfo(data); - - return ( - <main className={styles.Main}> - <section> - <h2 className={styles.AnimeHeaderText}>Recent Releases</h2> - <div className={styles.AnimeContainer}> - {data && - data.results.map((item, index) => ( - <Link - key={index} - href={`/anime/${item.id}`} - shallow - style={{ - color: "white", - textDecoration: "none", - }} - className={lexend.className} - title={item.title} - > - <section className={styles.AnimeEntry}> - <Image - src={item.image} - width={180} - height={300} - alt="Anime Poster Image" - /> - <p className={styles.AnimeTitle}> - {item.title} - </p> - <p className={styles.AnimeReleasedEpisode}>{item.episodeNumber}</p> - </section> - </Link> - ))} - </div> - </section> - </main> - ); -}; - -export default RecentAnimes; diff --git a/src/app/anime/components/saveToLocalStorage.js b/src/app/anime/components/saveToLocalStorage.js new file mode 100644 index 0000000..313b157 --- /dev/null +++ b/src/app/anime/components/saveToLocalStorage.js @@ -0,0 +1,29 @@ +"use client"; + +import { storeLocal } from "./storeHistory"; + +export default function store_to_local(name, image, episode, id) { + const currentDate = new Date(); + + try { + let newData = { + name: name, + image: image, + episode: episode, + id: id, + type: "anime", + date: `${currentDate.getDate()}-${String( + currentDate.getMonth() + 1 + ).padStart(2, "0")}`, + time: `${currentDate.getHours()}:${String( + currentDate.getMinutes() + ).padStart(2, "0")}`, + }; + storeLocal(newData); + } catch (error) { + console.error( + "Some error occurred during the process of saving your watch history to local storage. Please try again or contact us on GitHub if this issue persists.", + error.message + ); + } +} diff --git a/src/app/anime/components/search.jsx b/src/app/anime/components/search.jsx index 0a780f8..0fe883b 100644 --- a/src/app/anime/components/search.jsx +++ b/src/app/anime/components/search.jsx @@ -2,37 +2,37 @@ import { FaSearch } from "react-icons/fa"; import { useState } from "react"; -import Link from "next/link"; +import { Input, Link, Button, Progress } from "@nextui-org/react"; -import styles from "../styles/search.module.css"; import SearchResults from "./search_results"; -const SearcBar = () => { +const SearchBar = () => { const [title, setTitle] = useState(""); const [searchResults, setSearchResults] = useState(null); const [loading, setLoading] = useState(false); const handleSearchInput = async (title) => { setSearchResults(null); - setLoading(true); + setLoading( + <Progress + size="sm" + isIndeterminate + aria-label="Loading..." + className="w-full mt-2 lg:w-1/2" + /> + ); setSearchResults(await SearchResults(title)); setLoading(false); }; return ( <main> - <section className={styles.SearchBarContainer}> - <div className={styles.SearchInputContainer}> - <FaSearch color="white" size={22} /> - <input - placeholder="Enter anime title" - name="Anime Title" + <section> + <div className="flex w-full md:flex-nowrap gap-2 lg:w-1/2"> + <Input type="text" - onChange={(event) => { - if (event.target.value.trim() != "") { - setTitle(event.target.value); - } - }} + label="Search for anime" + placeholder="Enter anime title here" autoComplete="off" onKeyDown={async (event) => { if ( @@ -43,22 +43,23 @@ const SearcBar = () => { await handleSearchInput(title); } }} - ></input> - <Link shallow href={"/anime/continueWatching"}> - <button className={styles.animeHistoryButton}> - History - </button> + onChange={(event) => { + if (event.target.value.trim() != "") { + setTitle(event.target.value); + } + }} + startContent={<FaSearch />} + /> + + <Link href={"/anime/continueWatching"}> + <Button color="primary">History</Button> </Link> </div> + {loading} </section> - {loading && ( - <p className={styles.SearchLoading}> - Please wait while we crunch up all the data..... - </p> - )} - {searchResults} + <div className="mt-2">{searchResults}</div> </main> ); }; -export default SearcBar; +export default SearchBar; diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx index 051124d..3097a96 100644 --- a/src/app/anime/components/search_results.jsx +++ b/src/app/anime/components/search_results.jsx @@ -1,12 +1,9 @@ -import { Lexend_Deca } from "next/font/google"; -import Link from "next/link"; -import Image from "next/image"; - -import styles from "../styles/search.module.css"; import { search_results } from "../data-fetch/request"; import { preFetchAnimeInfo } from "./cacher"; +import styles from "../../page.module.css"; -const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" }); +import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react"; +import NextImage from "next/image"; const SearchResults = async (title) => { const data = await search_results(title); @@ -14,25 +11,39 @@ const SearchResults = async (title) => { preFetchAnimeInfo(data); return ( - <section className={styles.SearchResultsContainer}> + <section + className={`flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`} + > {data && data.results.map((item, index) => ( <Link - shallow - href={`/anime/${item.id}`} key={index} - className={lexend.className} - style={{ color: "white", textDecoration: "none" }} + href={`/anime/${item.id}`} + aria-label="anime redirection links" + className="flex flex-col items-center mx-1 " > - <div className={styles.AnimeEntry}> - <Image - src={item.image} - width={180} - height={300} - alt="Anime Poster" - /> - <p>{item.title}</p> - </div> + <Card className="overflow-hidden" isPressable> + <CardBody> + <Image + as={NextImage} + isBlurred + alt="Anime Poster" + src={item.image} + width={190} + height={120} + shadow="lg" + className="h-64" + priority + /> + </CardBody> + <CardHeader> + <h4 + className={`antialiased text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `} + > + {item.title} + </h4> + </CardHeader> + </Card> </Link> ))} </section> diff --git a/src/app/anime/components/topAiring.jsx b/src/app/anime/components/topAiring.jsx deleted file mode 100644 index 22e8c3b..0000000 --- a/src/app/anime/components/topAiring.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import Link from "next/link"; -import Image from "next/image"; -import { Lexend_Deca } from "next/font/google"; - -import styles from "../styles/pop_recent_top.module.css"; -import { top_airing } from "../data-fetch/request"; -import { preFetchAnimeInfo } from "./cacher"; - -const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" }); - -const TopAiringAnimes = async () => { - const data = await top_airing(); - - preFetchAnimeInfo(data); - - return ( - <main className={styles.Main}> - <section> - <h2 className={styles.AnimeHeaderText}>Top Airing Animes</h2> - <div className={styles.AnimeContainer}> - {data && - data.results.map((item, index) => ( - <Link - key={index} - href={`/anime/${item.id}`} - shallow - style={{ - color: "white", - textDecoration: "none", - }} - className={lexend.className} - title={item.title} - > - <section className={styles.AnimeEntry}> - <Image - src={item.image} - width={180} - height={300} - alt="Anime Poster Image" - /> - <p className={styles.AnimeTitle}> - {item.title} - </p> - <p className={styles.AnimeReleasedEpisode}> - {item.episodeNumber} - </p> - </section> - </Link> - ))} - </div> - </section> - </main> - ); -}; - -export default TopAiringAnimes; diff --git a/src/app/anime/components/vidButtonContainer.jsx b/src/app/anime/components/vidButtonContainer.jsx new file mode 100644 index 0000000..6b872d8 --- /dev/null +++ b/src/app/anime/components/vidButtonContainer.jsx @@ -0,0 +1,133 @@ +"use client"; + +import { MediaPlayer, MediaProvider } from "@vidstack/react"; +import "@vidstack/react/player/styles/default/theme.css"; +import "@vidstack/react/player/styles/default/layouts/video.css"; +import { + defaultLayoutIcons, + DefaultVideoLayout, +} from "@vidstack/react/player/layouts/default"; +import { Select, SelectItem, Button, Skeleton } from "@nextui-org/react"; +import { useState, useEffect } from "react"; + +import { lexend } from "../../../../config/fonts"; +import { video_url } from "../data-fetch/request"; +import store_to_local from "./saveToLocalStorage"; + +const EpisodesContainer = ({ data: data }) => { + const [videoLink, setVideoLink] = useState(""); + const [buttonGroups, setButtonGroups] = useState(<></>); + const [videoLoading, setVideoLoading] = useState(<></>); + + useEffect(() => { + setButtonGroups(createButtonGroups(0, 50)); + }, []); + + const groups = createGroups(data.episodes, 50); + + function createButtonGroups(start, end) { + setButtonGroups(<></>); + return ( + <div className={`${lexend.className} text-center`}> + {data.episodes && + data.episodes.slice(start, end).map((item, index) => ( + <Button + radius="sm" + color="default" + key={index} + className="mr-2 mt-2" + size="sm" + onClick={async () => { + await changeVideoLink(item.id); + store_to_local( + data.title, + data.image, + item.number, + data.id + ); + }} + > + {item.number} + </Button> + ))} + </div> + ); + } + + function handleSelectChange(item) { + // console.log(item[item.length - 1].number); + const start_index = item[0].number; + const end_index = item[item.length - 1].number; + setButtonGroups(createButtonGroups(start_index - 1, end_index)); + } + + async function changeVideoLink(id) { + setVideoLink(""); + setVideoLoading( + <div className="w-full flex items-center gap-3"> + <div className="w-full flex flex-col gap-2"> + <Skeleton className="h-44 rounded-lg lg:h-96" /> + </div> + </div> + ); + const videoURL = await video_url(id); + setVideoLoading(<></>); + setVideoLink(videoURL.sources[videoURL.sources.length - 2].url); + } + + return ( + <main> + {videoLoading} + {videoLink && ( + <div> + <MediaPlayer + title={data.title} + src={videoLink} + aspectRatio="16/9" + load="eager" + playsInline + volume={0.8} + autoPlay + > + <MediaProvider /> + <DefaultVideoLayout icons={defaultLayoutIcons} /> + </MediaPlayer> + </div> + )} + {data.episodes && ( + <div className="flex w-full flex-wrap md:flex-nowrap gap-4 my-2"> + <Select + label="Select Episode Group" + className={`${lexend.className} max-w-xs`} + > + {groups && + groups.map((item, index) => ( + <SelectItem + key={index} + textValue={`${item[0].number} - ${ + item[item.length - 1].number + }`} + onClick={() => handleSelectChange(item)} + className={lexend.className} + > + {item[0].number} -{" "} + {item[item.length - 1].number} + </SelectItem> + ))} + </Select> + </div> + )} + {buttonGroups} + </main> + ); +}; + +function createGroups(array, size) { + const groups = []; + for (let i = 0; i < array.length; i += size) { + groups.push(array.slice(i, i + size)); + } + return groups; +} + +export default EpisodesContainer; diff --git a/src/app/anime/continueWatching/page.jsx b/src/app/anime/continueWatching/page.jsx index eb28a2f..69d06de 100644 --- a/src/app/anime/continueWatching/page.jsx +++ b/src/app/anime/continueWatching/page.jsx @@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react"; import Image from "next/image"; -import styles from "../styles/cw.module.css"; import Link from "next/link"; const ContinueWatching = () => { diff --git a/src/app/anime/loading.jsx b/src/app/anime/loading.jsx deleted file mode 100644 index 00ce39c..0000000 --- a/src/app/anime/loading.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import styles from "./styles/loading.module.css"; - -const Loading = async () => { - return ( - <main className={styles.LoadingContainer}> - <strong>Loading...</strong> - </main> - ); -}; - -export default Loading; diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx index 7143740..a2d5777 100644 --- a/src/app/anime/page.jsx +++ b/src/app/anime/page.jsx @@ -1,18 +1,101 @@ -import styles from "./styles/anime.module.css";
-import PopularAnimes from "./components/popularAnimes";
-import RecentAnimes from "./components/recentEpisodes";
-import TopAiringAnimes from "./components/topAiring";
-import SearcBar from "./components/search";
+import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
+import NextImage from "next/image";
+import styles from "../page.module.css";
+
+import { top_airing, recent, popular } from "./data-fetch/request";
+import SearchBar from "./components/search";
+import { preFetchAnimeInfo } from "./components/cacher";
+
const AnimeHomepage = async () => {
+ const popular_data = await popular();
+ const recent_data = await recent();
+ const airing_data = await top_airing();
+
+ const dataToBeLoaded = [popular_data, recent_data, airing_data];
+
+ for (let item of dataToBeLoaded) {
+ preFetchAnimeInfo(item);
+ }
+
+ const header = (title) => (
+ <>
+ <p className={`antialiased font-bold text-sky-400 text-2xl my-1`}>
+ {title}
+ </p>
+ </>
+ );
+
+ const format = (data) => (
+ <>
+ {data &&
+ data.results.map((item, index) => (
+ <Link
+ key={index}
+ href={`/anime/${item.id}`}
+ aria-label="anime redirection links"
+ className="flex flex-col items-center mx-1 "
+ >
+ <Card className="overflow-visible " isPressable>
+ <CardBody>
+ <Image
+ as={NextImage}
+ isBlurred
+ alt="Anime Poster"
+ src={item.image}
+ width={270}
+ height={160}
+ className="h-60 overflow-hidden"
+ shadow="lg"
+ priority
+ />
+ </CardBody>
+ <CardHeader>
+ <h4
+ className={`antialiased text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}
+ >
+ {item.title}
+ </h4>
+ </CardHeader>
+ </Card>
+ </Link>
+ ))}
+ </>
+ );
+
return (
- <main className={styles.Main}>
- <SearcBar />
- <TopAiringAnimes />
+ <section className="pt-12">
+ <div className="mx-2">
+ <SearchBar />
+ </div>
+
+ <div className="mx-2">
+ {header("Popular Animes")}
+ <div
+ className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}
+ >
+ {format(popular_data)}
+ </div>
+ </div>
+
+ <div className="mx-2">
+ {header("Recent Animes")}
+ <div
+ className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}
+ >
+ {format(recent_data)}
+ </div>
+ </div>
+ <div className="mx-2">
+ {header("Top Airing Animes")}
+ <div
+ className={`flex overflow-x-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}
+ >
+ {format(airing_data)}
+ </div>
+ </div>
<br />
- <RecentAnimes />
<br />
- <PopularAnimes />
- </main>
+ </section>
);
};
diff --git a/src/app/anime/styles/anime.module.css b/src/app/anime/styles/anime.module.css deleted file mode 100644 index e5d402a..0000000 --- a/src/app/anime/styles/anime.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.Main { - max-width: 99%; - margin: 65px auto; -}
\ No newline at end of file diff --git a/src/app/anime/styles/buttons.module.css b/src/app/anime/styles/buttons.module.css deleted file mode 100644 index d0b8e78..0000000 --- a/src/app/anime/styles/buttons.module.css +++ /dev/null @@ -1,98 +0,0 @@ -.animeButtonContainer { - margin-top: 1rem; -} - -.dramaButton { - background-color: #1f1f1fd2; - outline: none; - border: none; - color: white; - font-family: "Atkinson Hyperlegible", serif; - width: 50px; - padding: 0.5rem; - margin: 0 0.2rem 0.2rem 0; - border-radius: 0.5rem; - cursor: pointer; - transition: background-color 200ms ease, scale 200ms ease; -} - -.dramaButton:hover { - background-color: #121212; - scale: 0.95; -} - -.dramaButton:focus { - background-color: var(--soft-purple); - scale: 0.95; -} - -.Main { - display: flex; - align-items: center; - flex-direction: column; - text-align: center; -} - -.SelectClass { - text-align: center; - outline: none; - border: none; - padding: 0.4rem; - font-family: "Lexend Deca", serif; - background-color: #1f1f1fd2; - color: white; - border-radius: 0.5rem; -} - -.SelectClass::-webkit-scrollbar { - width: 0; -} - -/* Video Player */ - -.videoPopUp { - height: 100dvh; - width: 100dvw; - background-color: #141414ee; - 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; -} - -.closeButton { - font-family: "Lexend Deca", serif; - font-size: 16px; - background-color: var(--pastel-red); - padding: 0.5rem 1.5rem; - border: 0; - outline: 0; - border-radius: 0.5rem; - cursor: pointer; - margin: 5px; -} - -.video { - width: 60vw; -} - -.VideoPlayer { - width: 100%; -} - -@media screen and (max-width: 1024px) { - - .dramaButton { - font-size: 14px; - } - - .video { - width: 100%; - } -}
\ No newline at end of file diff --git a/src/app/anime/styles/cw.module.css b/src/app/anime/styles/cw.module.css deleted file mode 100644 index cb579c7..0000000 --- a/src/app/anime/styles/cw.module.css +++ /dev/null @@ -1,59 +0,0 @@ -.main { - width: 99%; - margin: 60px auto; -} - -.mainText { - color: white; - font-size: 24px; - margin: 0.2rem 0 0.2rem 0; -} - -.animeContainer { - font-size: 18px; - margin: 0px; -} - -.animeEntry { - display: flex; - align-items: center; - justify-content: space-between; - padding: 5px; - margin-bottom: 0.5rem; - border-radius: 0.4rem; - background-color: #1f1f1f; -} - -.animeEntry img { - border-radius: 0.4rem; - margin-left: 0.2rem; -} - -.titleContainer { - color: white; - margin-left: 0.2rem; -} - -.titleContainer h3 { - margin: 0px; -} - -.EpisodeCount { - color: var(--soft-purple); - margin: 0px; -} - -.date { - color: var(--neon-yellow); - margin: 0px; -} - -@media screen and (max-width: 768px) { - .animeContainer { - font-size: 14px; - } - - .animeEntry img { - width: 35%; - } -}
\ No newline at end of file diff --git a/src/app/anime/styles/info.module.css b/src/app/anime/styles/info.module.css deleted file mode 100644 index afdc08f..0000000 --- a/src/app/anime/styles/info.module.css +++ /dev/null @@ -1,69 +0,0 @@ -.main { - width: 50%; - margin: 60px auto; - color: white; -} - -.AnimeHeroSection { - display: flex; - align-items: center; -} - -.AnimeHeroSection strong { - color: #38bdf8; -} - -.AnimeHeroSection img { - /* width: auto; - height: auto; */ - padding: 0.5rem 0.7rem 0.5rem 0.7rem; -} - -.animeDescription { - max-height: 100px; - overflow: auto; -} - -.animeDescription::-webkit-scrollbar { - width: 0px; -} - -.AnimeHeroSection p { - margin: 0; - color: #a3a3a3; -} - -.animeTitle { - font-size: 26px; - text-transform: uppercase; -} - -@media screen and (max-width: 1024px) { - .main { - width: 100%; - } - - .AnimeHeroSection { - font-size: 14px; - } - - .animeTitle { - font-size: 24px; - } - - .AnimeHeroSection img { - padding: 0.4rem 0.4rem 0.4rem 0.4rem; - } -} - -@media screen and (max-width: 425px) { - .AnimeHeroSection { - display: flex; - align-items: center; - flex-direction: column; - } - - .animeTitle { - text-align: center; - } -}
\ No newline at end of file diff --git a/src/app/anime/styles/loading.module.css b/src/app/anime/styles/loading.module.css deleted file mode 100644 index f0d0606..0000000 --- a/src/app/anime/styles/loading.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.LoadingContainer { - height: 100vh; - width: 100vw; - display: flex; - align-items: center; - justify-content: center; -} - -.LoadingContainer strong { - color: white; - font-size: 20px; -}
\ No newline at end of file diff --git a/src/app/anime/styles/pop_recent_top.module.css b/src/app/anime/styles/pop_recent_top.module.css deleted file mode 100644 index 253f60f..0000000 --- a/src/app/anime/styles/pop_recent_top.module.css +++ /dev/null @@ -1,95 +0,0 @@ -.AnimeHeaderText { - color: white; - margin: 0.4rem 0 0 0; - text-transform: uppercase; - font-size: 30px; -} - -.AnimeContainer { - margin: 0.2rem 0 0 0; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); - grid-gap: 0.5rem; -} - -/* .AnimeEntry { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; - padding: 0.8rem; - border-radius: 0.4rem; - background-color: #1a1a1a; - transition: opacity 200ms ease; -} */ - -.AnimeEntry { - position: relative; - display: inline-block; - overflow: hidden; - border-radius: 0.5rem; - transition: opacity 200ms ease; - -} - -.AnimeContainer:hover .AnimeEntry { - opacity: 0.5; -} - -.AnimeContainer:hover .AnimeEntry:hover { - opacity: 1; -} - -.AnimeEntry img { - display: block; - transition: transform 200ms ease; -} - -.AnimeEntry img:hover { - transform: translateY(-5px) scale(1.04); -} - - -.AnimeTitle { - position: absolute; - bottom: 0; - /* Adjust the value as needed */ - left: 50%; - transform: translateX(-50%); - margin: 0; - color: white; - padding: 5px; - text-align: center; - background-color: #121212ab; - backdrop-filter: blur(10px); - text-transform: uppercase; - width: 100%; - max-width: 170px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.AnimeReleasedEpisode { - position: absolute; - top: 0; - margin: 0.2rem; - padding: 0.5rem; - background-color: #121212b2; - border-radius: 0.4rem; - backdrop-filter: blur(10px); -} - -.AnimeContainer::-webkit-scrollbar { - height: 0rem; -} - - -@media screen and (max-width: 768px) { - .AnimeContainer { - display: flex; - overflow: auto; - align-items: center; - } -}
\ No newline at end of file diff --git a/src/app/anime/styles/search.module.css b/src/app/anime/styles/search.module.css deleted file mode 100644 index abed86c..0000000 --- a/src/app/anime/styles/search.module.css +++ /dev/null @@ -1,116 +0,0 @@ -.SearchBarContainer { - padding: 1rem 0 0.8rem 0; - display: flex; - align-items: center; - width: 100%; -} - -.SearchInputContainer { - display: flex; - align-items: center; - background-color: #1f1f1f; - padding: 0.4rem; - border-radius: 0.5rem; - width: 40%; -} - -.animeHistoryButton { - font-family: "Lexend Deca", serif; - outline: none; - border: none; - background-color: #121212; - color: white; - margin: 0 0.1rem 0 0.2rem; - padding: 0.6rem; - cursor: pointer; - border-radius: 0.5rem; -} - -.SearchInputContainer input { - background-color: transparent; - border: none; - outline: none; - color: white; - margin-left: 0.5rem; - font-size: 20px; - font-family: "Atkinson Hyperlegible", serif; - width: 100%; -} - -.SearchLoading { - color: white; - text-align: center; -} - -/* Search Results */ - -.SearchResultsContainer { - display: flex; - align-items: center; - overflow-x: auto; - padding-bottom: 0.5rem; -} - -.AnimeEntry { - position: relative; - display: inline-block; - overflow: hidden; - border-radius: 0.5rem; - transition: opacity 200ms ease; - margin: 0.4rem; -} - -.SearchResultsContainer:hover .AnimeEntry { - opacity: 0.5; -} - -.SearchResultsContainer:hover .AnimeEntry:hover { - opacity: 1; -} - -.AnimeEntry p { - position: absolute; - bottom: 0; - /* Adjust the value as needed */ - left: 50%; - transform: translateX(-50%); - margin: 0; - color: white; - padding: 5px; - text-align: center; - background-color: #121212ab; - backdrop-filter: blur(10px); - text-transform: uppercase; - width: 100%; - max-width: 170px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.AnimeEntry img { - display: block; - transition: transform 200ms ease; -} - -.AnimeEntry img:hover { - transform: translateY(-5px) scale(1.04); -} - - -.SearchResultsContainer::-webkit-scrollbar { - height: 0.5rem; -} - -.SearchResultsContainer::-webkit-scrollbar-thumb { - background: rgb(83, 83, 83); - border-radius: 1rem; -} - -@media screen and (max-width: 768px) { - .SearchInputContainer { - width: 100%; - } - - -}
\ No newline at end of file |