From 3acac648ad6f7c220a48ff9f92f42e814c2097ab Mon Sep 17 00:00:00 2001 From: real-zephex Date: Tue, 26 Mar 2024 13:21:55 +0530 Subject: restructured files --- src/app/anime/[id]/[animeId]/page.jsx | 56 ++++ src/app/anime/[id]/[animeId]/video.css | 30 +++ src/app/anime/[id]/info.css | 83 ++++++ src/app/anime/[id]/loading.css | 346 +++++++++++++++++++++++++ src/app/anime/[id]/loading.jsx | 9 + src/app/anime/[id]/page.jsx | 50 ++++ src/app/anime/page.jsx | 6 +- src/app/anime/recent/page.jsx | 45 ++++ src/app/anime/recent/recent.css | 66 +++++ src/app/anime/search/components/fetchInfo.js | 14 + src/app/anime/search/components/fetchedInfo.js | 44 ++++ src/app/anime/search/page.jsx | 67 +++++ src/app/anime/search/search.css | 80 ++++++ src/app/anime/top-airing/page.jsx | 45 ++++ src/app/anime/top-airing/trending.css | 0 src/app/anime/video/loading.css | 346 +++++++++++++++++++++++++ src/app/anime/video/loading.jsx | 9 + src/app/components/footer/footer.module.css | 15 ++ src/app/components/footer/page.jsx | 43 +++ src/app/components/header/header.jsx | 30 +++ src/app/footer/footer.module.css | 15 -- src/app/footer/page.jsx | 22 -- src/app/header/header.jsx | 30 --- src/app/info/[id]/page.jsx | 50 ---- src/app/info/info.css | 83 ------ src/app/info/loading.css | 346 ------------------------- src/app/info/loading.jsx | 9 - src/app/info/page.jsx | 11 - src/app/layout.jsx | 2 +- src/app/manga/page.jsx | 1 - src/app/page.jsx | 2 +- src/app/recent/page.jsx | 45 ---- src/app/recent/recent.css | 66 ----- src/app/search/components/fetchInfo.js | 14 - src/app/search/components/fetchedInfo.js | 44 ---- src/app/search/page.jsx | 67 ----- src/app/search/search.css | 80 ------ src/app/top-airing/page.jsx | 45 ---- src/app/top-airing/trending.css | 0 src/app/video/[animeId]/page.jsx | 56 ---- src/app/video/loading.css | 346 ------------------------- src/app/video/loading.jsx | 9 - src/app/video/video.css | 30 --- 43 files changed, 1383 insertions(+), 1374 deletions(-) create mode 100644 src/app/anime/[id]/[animeId]/page.jsx create mode 100644 src/app/anime/[id]/[animeId]/video.css create mode 100644 src/app/anime/[id]/info.css create mode 100644 src/app/anime/[id]/loading.css create mode 100644 src/app/anime/[id]/loading.jsx create mode 100644 src/app/anime/[id]/page.jsx create mode 100644 src/app/anime/recent/page.jsx create mode 100644 src/app/anime/recent/recent.css create mode 100644 src/app/anime/search/components/fetchInfo.js create mode 100644 src/app/anime/search/components/fetchedInfo.js create mode 100644 src/app/anime/search/page.jsx create mode 100644 src/app/anime/search/search.css create mode 100644 src/app/anime/top-airing/page.jsx create mode 100644 src/app/anime/top-airing/trending.css create mode 100644 src/app/anime/video/loading.css create mode 100644 src/app/anime/video/loading.jsx create mode 100644 src/app/components/footer/footer.module.css create mode 100644 src/app/components/footer/page.jsx create mode 100644 src/app/components/header/header.jsx delete mode 100644 src/app/footer/footer.module.css delete mode 100644 src/app/footer/page.jsx delete mode 100644 src/app/header/header.jsx delete mode 100644 src/app/info/[id]/page.jsx delete mode 100644 src/app/info/info.css delete mode 100644 src/app/info/loading.css delete mode 100644 src/app/info/loading.jsx delete mode 100644 src/app/info/page.jsx delete mode 100644 src/app/recent/page.jsx delete mode 100644 src/app/recent/recent.css delete mode 100644 src/app/search/components/fetchInfo.js delete mode 100644 src/app/search/components/fetchedInfo.js delete mode 100644 src/app/search/page.jsx delete mode 100644 src/app/search/search.css delete mode 100644 src/app/top-airing/page.jsx delete mode 100644 src/app/top-airing/trending.css delete mode 100644 src/app/video/[animeId]/page.jsx delete mode 100644 src/app/video/loading.css delete mode 100644 src/app/video/loading.jsx delete mode 100644 src/app/video/video.css (limited to 'src') diff --git a/src/app/anime/[id]/[animeId]/page.jsx b/src/app/anime/[id]/[animeId]/page.jsx new file mode 100644 index 0000000..d59b0a0 --- /dev/null +++ b/src/app/anime/[id]/[animeId]/page.jsx @@ -0,0 +1,56 @@ +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 "./video.css"; +import { redirect } from "next/navigation"; + +export default async function Video({ params }) { + const id = params.animeId; + + // 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); + + if (data.message) { + redirect("/404"); + } + + const link = data.sources[4].url; + + return ( +
+
+

+ {last_two} - {remainingWords} +

+ + + + +
+
+ ); +} + +async function getVideoLink(id) { + const res = await fetch( + "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id, + { next: { revalidate: 3600 } } // Video links are revalidated after an hour + ); + const data = res.json(); + return data; +} diff --git a/src/app/anime/[id]/[animeId]/video.css b/src/app/anime/[id]/[animeId]/video.css new file mode 100644 index 0000000..5ccb58f --- /dev/null +++ b/src/app/anime/[id]/[animeId]/video.css @@ -0,0 +1,30 @@ +.video2 { + display: flex; + flex-direction: column; + align-items: center; + margin: 0px auto; + width: 50%; +} + +.testPlayer { + border-radius: 10px; +} + +.video2 p { + color: white; + font-family: "Lato"; + font-size: 20px; + text-align: center; +} + +@media (prefers-color-scheme: light) { + .video2 p { + color: black; + } +} + +@media screen and (max-width: 768px) { + .video2 { + width: 100%; + } +} \ No newline at end of file diff --git a/src/app/anime/[id]/info.css b/src/app/anime/[id]/info.css new file mode 100644 index 0000000..2b070d0 --- /dev/null +++ b/src/app/anime/[id]/info.css @@ -0,0 +1,83 @@ +.dramaInfoContainer { + display: flex; + flex-direction: column; +} + +.dramaInfo { + display: flex; + flex-direction: column; + width: 95%; + margin: 0px auto; +} + +.titleContainer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.titleContainer p { + color: var(--neon-green); + width: 60%; + font-family: "Kanit"; + font-size: 24px; +} + +.titleContainer img { + border-radius: 10px; +} + +.animeDescription { + color: #ffffff81; + font-family: "Lato"; + font-size: 16px; + max-height: 120px; + margin: 20px auto; + text-align: center; + overflow-y: auto; +} + +.buttonContainer { + margin: 5px auto; + text-align: center; + max-height: 200px; + overflow-y: auto; +} + +.dramaButton { + padding: 8px; + font-family: "Atkinson Hyperlegible"; + font-size: 18px; + margin: 5px; + width: 50px; + border-radius: 5px; + border: none; + background-color: var(--light-green); + cursor: pointer; +} + +.dramaButton:hover { + background-color: var(--soft-purple); +} + +.infoPageContainer { + display: flex; + height: 100dvh; + justify-content: center; + align-items: center; +} + +.infoPageContainer p { + color: white; +} + +@media (prefers-color-scheme: light) { + .animeDescription { + color: black; + } + + .infoPageContainer p { + color: black; + } + +} \ No newline at end of file diff --git a/src/app/anime/[id]/loading.css b/src/app/anime/[id]/loading.css new file mode 100644 index 0000000..aa3a519 --- /dev/null +++ b/src/app/anime/[id]/loading.css @@ -0,0 +1,346 @@ +.loadingContainer { + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 80dvh; +} + + +.text-flicker-in-glow { + -webkit-animation: text-flicker-in-glow 4s linear both; + animation: text-flicker-in-glow 4s linear both; + font-size: 36px; + font-family: "Kanit"; +} + +/* ---------------------------------------------- + * Generated by Animista on 2024-3-21 9:58:16 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation text-flicker-in-glow + * ---------------------------------------- + */ + +@-webkit-keyframes text-flicker-in-glow { + 0% { + opacity: 0; + } + + 10% { + opacity: 0; + text-shadow: none; + } + + 10.1% { + opacity: 1; + text-shadow: none; + } + + 10.2% { + opacity: 0; + text-shadow: none; + } + + 20% { + opacity: 0; + text-shadow: none; + } + + 20.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); + } + + 20.6% { + opacity: 0; + text-shadow: none; + } + + 30% { + opacity: 0; + text-shadow: none; + } + + 30.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.5% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.6% { + opacity: 0; + text-shadow: none; + } + + 45% { + opacity: 0; + text-shadow: none; + } + + 45.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 50% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55.1% { + opacity: 0; + text-shadow: none; + } + + 57% { + opacity: 0; + text-shadow: none; + } + + 57.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60.1% { + opacity: 0; + text-shadow: none; + } + + 65% { + opacity: 0; + text-shadow: none; + } + + 65.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75.1% { + opacity: 0; + text-shadow: none; + } + + 77% { + opacity: 0; + text-shadow: none; + } + + 77.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85.1% { + opacity: 0; + text-shadow: none; + } + + 86% { + opacity: 0; + text-shadow: none; + } + + 86.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 100% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } +} + +@keyframes text-flicker-in-glow { + 0% { + opacity: 0; + } + + 10% { + opacity: 0; + text-shadow: none; + } + + 10.1% { + opacity: 1; + text-shadow: none; + } + + 10.2% { + opacity: 0; + text-shadow: none; + } + + 20% { + opacity: 0; + text-shadow: none; + } + + 20.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); + } + + 20.6% { + opacity: 0; + text-shadow: none; + } + + 30% { + opacity: 0; + text-shadow: none; + } + + 30.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.5% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.6% { + opacity: 0; + text-shadow: none; + } + + 45% { + opacity: 0; + text-shadow: none; + } + + 45.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 50% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55.1% { + opacity: 0; + text-shadow: none; + } + + 57% { + opacity: 0; + text-shadow: none; + } + + 57.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60.1% { + opacity: 0; + text-shadow: none; + } + + 65% { + opacity: 0; + text-shadow: none; + } + + 65.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75.1% { + opacity: 0; + text-shadow: none; + } + + 77% { + opacity: 0; + text-shadow: none; + } + + 77.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85.1% { + opacity: 0; + text-shadow: none; + } + + 86% { + opacity: 0; + text-shadow: none; + } + + 86.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 100% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } +} + +@media (prefers-color-scheme: light) { + .loadingContainer { + color: black; + } +} \ No newline at end of file diff --git a/src/app/anime/[id]/loading.jsx b/src/app/anime/[id]/loading.jsx new file mode 100644 index 0000000..dfa397c --- /dev/null +++ b/src/app/anime/[id]/loading.jsx @@ -0,0 +1,9 @@ +import "./loading.css"; + +export default function Loading() { + return ( +
+

Loading

+
+ ); +} diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx new file mode 100644 index 0000000..3e2b1f0 --- /dev/null +++ b/src/app/anime/[id]/page.jsx @@ -0,0 +1,50 @@ +import "./info.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function AnimeInfo({ params }) { + let animeID = params.id; + + const info = await getAnimeInfo(animeID); + + return ( +
+
+ {info && ( +
+
+

{info.title}

+ Drama +
+

{info.description}

+
+ )} + +
+ {info && + info.episodes.map((item, index) => ( + + + + ))} +
+
+
+ ); +} + +async function getAnimeInfo(anime_id) { + const res = await fetch( + "https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id, + { next: { revalidate: 1800 } } + ); + const data = res.json(); + return data; +} diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx index 759619d..625dd83 100644 --- a/src/app/anime/page.jsx +++ b/src/app/anime/page.jsx @@ -1,7 +1,7 @@ import "./anime.css"; -import Trending from "../top-airing/page"; -import Releases from "../recent/page"; -import Input from "../search/page"; +import Trending from "./top-airing/page"; +import Releases from "./recent/page"; +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 new file mode 100644 index 0000000..779f0d4 --- /dev/null +++ b/src/app/anime/recent/page.jsx @@ -0,0 +1,45 @@ +import "./recent.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function Releases() { + const data = await test(); + + return ( +
+

Recent Releases

+ +
+ {data && + data.results.map((item, index) => ( + +
+ Drama +

{item.title}

+
+ + ))} +
+
+ ); +} + +async function test() { + const res = await fetch( + "https://consumet-api-di2e.onrender.com/anime/gogoanime/recent-episodes", + { cache: "force-cache" } + ); + const data = res.json(); + return data; +} diff --git a/src/app/anime/recent/recent.css b/src/app/anime/recent/recent.css new file mode 100644 index 0000000..7d17143 --- /dev/null +++ b/src/app/anime/recent/recent.css @@ -0,0 +1,66 @@ +.trendingContainer { + display: flex; + flex-direction: column; +} + +.trendingText { + color: #FEFFAC; + font-family: "Open Sans"; + font-size: 26px; + margin: 10px; +} + +.trending { + width: 98%; + display: flex; + flex-direction: row; + overflow-x: auto; + margin: 0px auto; +} + +/* Customize scrollbar here */ +.trending::-webkit-scrollbar { + height: 5px; +} + +.trendingEntries { + margin: 10px 10px 5px 5px; + text-align: center; + cursor: pointer; + transition: transform 0.2s ease; + +} + +.trendingEntries:hover { + transform: scale(1.03); +} + +.trendingEntries img { + border-radius: 10px; + width: 150px; + height: 210px; +} + +.trendingEntries p { + color: white; + max-height: 60px; + max-width: 150px; + overflow-y: auto; + font-family: "Lato"; + margin: 10px auto; + font-size: 16px; +} + +.trendingEntries p::-webkit-scrollbar { + width: 5px; +} + +@media (prefers-color-scheme: light) { + .trendingText { + color: black; + } + + .trendingEntries p { + color: black; + } +} \ No newline at end of file diff --git a/src/app/anime/search/components/fetchInfo.js b/src/app/anime/search/components/fetchInfo.js new file mode 100644 index 0000000..07b203d --- /dev/null +++ b/src/app/anime/search/components/fetchInfo.js @@ -0,0 +1,14 @@ +"use server"; + +export default async function Results(id) { + return await testFunction(id); +} + +async function testFunction(title) { + const res = await fetch( + "https://consumet-api-di2e.onrender.com/anime/gogoanime/" + title, + { cache: "force-cache" } + ); + const data = await res.json(); + return data; +} diff --git a/src/app/anime/search/components/fetchedInfo.js b/src/app/anime/search/components/fetchedInfo.js new file mode 100644 index 0000000..17c9673 --- /dev/null +++ b/src/app/anime/search/components/fetchedInfo.js @@ -0,0 +1,44 @@ +import "../search.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) => ( + +
+

{item.title}

+ Drama Poster +
+ + )) + ) : ( +
+

+ No results found +

+
+ ) + ) : null} +
+ ); +} diff --git a/src/app/anime/search/page.jsx b/src/app/anime/search/page.jsx new file mode 100644 index 0000000..75f09bd --- /dev/null +++ b/src/app/anime/search/page.jsx @@ -0,0 +1,67 @@ +"use client"; + +import "./search.css"; +import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library +import { useState } from "react"; +import Results from "./components/fetchInfo"; +import fetchedInfo from "./components/fetchedInfo"; + +export default function Input() { + const [searchedAnime, setSearchedAnime] = useState(null); + const [loading, setLoading] = useState(null); + const [info, setInfo] = useState(null); + + const handleKeyPress = async (event) => { + if ( + (event.code === "Enter" || + event.key === "Enter" || + event.code === 13) && + searchedAnime !== "" + ) { + setLoading(true); + setInfo(await fetchedInfo(await Results(searchedAnime))); + setLoading(false); + } else if ( + (event.code === "Enter" || + event.key === "Enter" || + event.code === 13) && + searchedAnime === "" + ) { + alert("Input cannot be empty"); + } + }; + + return ( +
+
+
+ + { + if (event.target.value.trim() !== "") { + setSearchedAnime(event.target.value); + } + }} + onKeyDown={(event) => handleKeyPress(event)} + placeholder="Enter anime title" + > +
+
+ + {loading && ( +

+ Please wait while we crunch all the data for you +

+ )} + + {info} +
+ ); +} diff --git a/src/app/anime/search/search.css b/src/app/anime/search/search.css new file mode 100644 index 0000000..8afb508 --- /dev/null +++ b/src/app/anime/search/search.css @@ -0,0 +1,80 @@ +.inputContainer { + display: flex; + margin: 30px auto; +} + +.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: 0px auto; + background-color: #2c2c2c; + padding: 8px; + border-radius: 5px; + width: 20%; +} + +.searchIcon { + color: white; + margin-right: 5px; +} + +.animeEntry { + display: flex; + overflow-x: auto; +} + +.animeEntry::-webkit-scrollbar { + height: 7px; +} + +.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; + 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/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx new file mode 100644 index 0000000..5536870 --- /dev/null +++ b/src/app/anime/top-airing/page.jsx @@ -0,0 +1,45 @@ +import "./trending.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function Trending() { + const data = await test(); + + return ( +
+

Trending

+ +
+ {data && + data.results.map((item, index) => ( + +
+ Drama +

{item.title}

+
+ + ))} +
+
+ ); +} + +async function test() { + const res = await fetch( + "https://consumet-api-di2e.onrender.com/anime/gogoanime/top-airing", + { cache: "force-cache" } + ); + const data = res.json(); + return data; +} diff --git a/src/app/anime/top-airing/trending.css b/src/app/anime/top-airing/trending.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/anime/video/loading.css b/src/app/anime/video/loading.css new file mode 100644 index 0000000..aa3a519 --- /dev/null +++ b/src/app/anime/video/loading.css @@ -0,0 +1,346 @@ +.loadingContainer { + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 80dvh; +} + + +.text-flicker-in-glow { + -webkit-animation: text-flicker-in-glow 4s linear both; + animation: text-flicker-in-glow 4s linear both; + font-size: 36px; + font-family: "Kanit"; +} + +/* ---------------------------------------------- + * Generated by Animista on 2024-3-21 9:58:16 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation text-flicker-in-glow + * ---------------------------------------- + */ + +@-webkit-keyframes text-flicker-in-glow { + 0% { + opacity: 0; + } + + 10% { + opacity: 0; + text-shadow: none; + } + + 10.1% { + opacity: 1; + text-shadow: none; + } + + 10.2% { + opacity: 0; + text-shadow: none; + } + + 20% { + opacity: 0; + text-shadow: none; + } + + 20.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); + } + + 20.6% { + opacity: 0; + text-shadow: none; + } + + 30% { + opacity: 0; + text-shadow: none; + } + + 30.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.5% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.6% { + opacity: 0; + text-shadow: none; + } + + 45% { + opacity: 0; + text-shadow: none; + } + + 45.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 50% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55.1% { + opacity: 0; + text-shadow: none; + } + + 57% { + opacity: 0; + text-shadow: none; + } + + 57.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60.1% { + opacity: 0; + text-shadow: none; + } + + 65% { + opacity: 0; + text-shadow: none; + } + + 65.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75.1% { + opacity: 0; + text-shadow: none; + } + + 77% { + opacity: 0; + text-shadow: none; + } + + 77.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85.1% { + opacity: 0; + text-shadow: none; + } + + 86% { + opacity: 0; + text-shadow: none; + } + + 86.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 100% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } +} + +@keyframes text-flicker-in-glow { + 0% { + opacity: 0; + } + + 10% { + opacity: 0; + text-shadow: none; + } + + 10.1% { + opacity: 1; + text-shadow: none; + } + + 10.2% { + opacity: 0; + text-shadow: none; + } + + 20% { + opacity: 0; + text-shadow: none; + } + + 20.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); + } + + 20.6% { + opacity: 0; + text-shadow: none; + } + + 30% { + opacity: 0; + text-shadow: none; + } + + 30.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.5% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 30.6% { + opacity: 0; + text-shadow: none; + } + + 45% { + opacity: 0; + text-shadow: none; + } + + 45.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 50% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); + } + + 55.1% { + opacity: 0; + text-shadow: none; + } + + 57% { + opacity: 0; + text-shadow: none; + } + + 57.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); + } + + 60.1% { + opacity: 0; + text-shadow: none; + } + + 65% { + opacity: 0; + text-shadow: none; + } + + 65.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 75.1% { + opacity: 0; + text-shadow: none; + } + + 77% { + opacity: 0; + text-shadow: none; + } + + 77.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 85.1% { + opacity: 0; + text-shadow: none; + } + + 86% { + opacity: 0; + text-shadow: none; + } + + 86.1% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } + + 100% { + opacity: 1; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); + } +} + +@media (prefers-color-scheme: light) { + .loadingContainer { + color: black; + } +} \ No newline at end of file diff --git a/src/app/anime/video/loading.jsx b/src/app/anime/video/loading.jsx new file mode 100644 index 0000000..dfa397c --- /dev/null +++ b/src/app/anime/video/loading.jsx @@ -0,0 +1,9 @@ +import "./loading.css"; + +export default function Loading() { + return ( +
+

Loading

+
+ ); +} diff --git a/src/app/components/footer/footer.module.css b/src/app/components/footer/footer.module.css new file mode 100644 index 0000000..8547873 --- /dev/null +++ b/src/app/components/footer/footer.module.css @@ -0,0 +1,15 @@ +.footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: #161616; + color: white; + text-align: center; +} + +.footer p a { + padding: 10px; + text-decoration: none; + color: #696880; +} \ No newline at end of file diff --git a/src/app/components/footer/page.jsx b/src/app/components/footer/page.jsx new file mode 100644 index 0000000..f3c9fc7 --- /dev/null +++ b/src/app/components/footer/page.jsx @@ -0,0 +1,43 @@ +import styles from "./footer.module.css"; + +export default async function Footer() { + return ( +
+

+ + Status + + + Github + + + Koyeb + + + Vercel + + + Netlify + +

+
+ ); +} diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx new file mode 100644 index 0000000..22798b4 --- /dev/null +++ b/src/app/components/header/header.jsx @@ -0,0 +1,30 @@ +import Link from "next/link"; + +export default function Header() { + return ( +
+
+ +

+ Dramalama +

+ +
+ +

Anime

+ + +

Manga

+ + +

Kdrama

+ +
+
+
+
+ ); +} diff --git a/src/app/footer/footer.module.css b/src/app/footer/footer.module.css deleted file mode 100644 index 8547873..0000000 --- a/src/app/footer/footer.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.footer { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - background-color: #161616; - color: white; - text-align: center; -} - -.footer p a { - padding: 10px; - text-decoration: none; - color: #696880; -} \ No newline at end of file diff --git a/src/app/footer/page.jsx b/src/app/footer/page.jsx deleted file mode 100644 index 34d6101..0000000 --- a/src/app/footer/page.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import styles from "./footer.module.css"; - -export default async function Footer() { - return ( -
-

- - Status - - - Github - -

-
- ); -} diff --git a/src/app/header/header.jsx b/src/app/header/header.jsx deleted file mode 100644 index 22798b4..0000000 --- a/src/app/header/header.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import Link from "next/link"; - -export default function Header() { - return ( -
-
- -

- Dramalama -

- -
- -

Anime

- - -

Manga

- - -

Kdrama

- -
-
-
-
- ); -} diff --git a/src/app/info/[id]/page.jsx b/src/app/info/[id]/page.jsx deleted file mode 100644 index dda7a49..0000000 --- a/src/app/info/[id]/page.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import "../info.css"; -import Image from "next/image"; -import Link from "next/link"; - -export default async function AnimeInfo({ params }) { - let animeID = params.id; - - const info = await getAnimeInfo(animeID); - - return ( -
-
- {info && ( -
-
-

{info.title}

- Drama -
-

{info.description}

-
- )} - -
- {info && - info.episodes.map((item, index) => ( - - - - ))} -
-
-
- ); -} - -async function getAnimeInfo(anime_id) { - const res = await fetch( - "https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id, - { next: { revalidate: 1800 } } - ); - const data = res.json(); - return data; -} diff --git a/src/app/info/info.css b/src/app/info/info.css deleted file mode 100644 index 2b070d0..0000000 --- a/src/app/info/info.css +++ /dev/null @@ -1,83 +0,0 @@ -.dramaInfoContainer { - display: flex; - flex-direction: column; -} - -.dramaInfo { - display: flex; - flex-direction: column; - width: 95%; - margin: 0px auto; -} - -.titleContainer { - display: flex; - justify-content: space-between; - align-items: center; -} - -.titleContainer p { - color: var(--neon-green); - width: 60%; - font-family: "Kanit"; - font-size: 24px; -} - -.titleContainer img { - border-radius: 10px; -} - -.animeDescription { - color: #ffffff81; - font-family: "Lato"; - font-size: 16px; - max-height: 120px; - margin: 20px auto; - text-align: center; - overflow-y: auto; -} - -.buttonContainer { - margin: 5px auto; - text-align: center; - max-height: 200px; - overflow-y: auto; -} - -.dramaButton { - padding: 8px; - font-family: "Atkinson Hyperlegible"; - font-size: 18px; - margin: 5px; - width: 50px; - border-radius: 5px; - border: none; - background-color: var(--light-green); - cursor: pointer; -} - -.dramaButton:hover { - background-color: var(--soft-purple); -} - -.infoPageContainer { - display: flex; - height: 100dvh; - justify-content: center; - align-items: center; -} - -.infoPageContainer p { - color: white; -} - -@media (prefers-color-scheme: light) { - .animeDescription { - color: black; - } - - .infoPageContainer p { - color: black; - } - -} \ No newline at end of file diff --git a/src/app/info/loading.css b/src/app/info/loading.css deleted file mode 100644 index aa3a519..0000000 --- a/src/app/info/loading.css +++ /dev/null @@ -1,346 +0,0 @@ -.loadingContainer { - color: white; - display: flex; - justify-content: center; - align-items: center; - height: 80dvh; -} - - -.text-flicker-in-glow { - -webkit-animation: text-flicker-in-glow 4s linear both; - animation: text-flicker-in-glow 4s linear both; - font-size: 36px; - font-family: "Kanit"; -} - -/* ---------------------------------------------- - * Generated by Animista on 2024-3-21 9:58:16 - * Licensed under FreeBSD License. - * See http://animista.net/license for more info. - * w: http://animista.net, t: @cssanimista - * ---------------------------------------------- */ - -/** - * ---------------------------------------- - * animation text-flicker-in-glow - * ---------------------------------------- - */ - -@-webkit-keyframes text-flicker-in-glow { - 0% { - opacity: 0; - } - - 10% { - opacity: 0; - text-shadow: none; - } - - 10.1% { - opacity: 1; - text-shadow: none; - } - - 10.2% { - opacity: 0; - text-shadow: none; - } - - 20% { - opacity: 0; - text-shadow: none; - } - - 20.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); - } - - 20.6% { - opacity: 0; - text-shadow: none; - } - - 30% { - opacity: 0; - text-shadow: none; - } - - 30.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.5% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.6% { - opacity: 0; - text-shadow: none; - } - - 45% { - opacity: 0; - text-shadow: none; - } - - 45.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 50% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55.1% { - opacity: 0; - text-shadow: none; - } - - 57% { - opacity: 0; - text-shadow: none; - } - - 57.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60.1% { - opacity: 0; - text-shadow: none; - } - - 65% { - opacity: 0; - text-shadow: none; - } - - 65.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75.1% { - opacity: 0; - text-shadow: none; - } - - 77% { - opacity: 0; - text-shadow: none; - } - - 77.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85.1% { - opacity: 0; - text-shadow: none; - } - - 86% { - opacity: 0; - text-shadow: none; - } - - 86.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 100% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } -} - -@keyframes text-flicker-in-glow { - 0% { - opacity: 0; - } - - 10% { - opacity: 0; - text-shadow: none; - } - - 10.1% { - opacity: 1; - text-shadow: none; - } - - 10.2% { - opacity: 0; - text-shadow: none; - } - - 20% { - opacity: 0; - text-shadow: none; - } - - 20.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); - } - - 20.6% { - opacity: 0; - text-shadow: none; - } - - 30% { - opacity: 0; - text-shadow: none; - } - - 30.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.5% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.6% { - opacity: 0; - text-shadow: none; - } - - 45% { - opacity: 0; - text-shadow: none; - } - - 45.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 50% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55.1% { - opacity: 0; - text-shadow: none; - } - - 57% { - opacity: 0; - text-shadow: none; - } - - 57.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60.1% { - opacity: 0; - text-shadow: none; - } - - 65% { - opacity: 0; - text-shadow: none; - } - - 65.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75.1% { - opacity: 0; - text-shadow: none; - } - - 77% { - opacity: 0; - text-shadow: none; - } - - 77.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85.1% { - opacity: 0; - text-shadow: none; - } - - 86% { - opacity: 0; - text-shadow: none; - } - - 86.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 100% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } -} - -@media (prefers-color-scheme: light) { - .loadingContainer { - color: black; - } -} \ No newline at end of file diff --git a/src/app/info/loading.jsx b/src/app/info/loading.jsx deleted file mode 100644 index dfa397c..0000000 --- a/src/app/info/loading.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import "./loading.css"; - -export default function Loading() { - return ( -
-

Loading

-
- ); -} diff --git a/src/app/info/page.jsx b/src/app/info/page.jsx deleted file mode 100644 index 9004ade..0000000 --- a/src/app/info/page.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import "./info.css"; - -export default function Info() { - return ( -
-

- This is the anime info page. This page will display information about the queried anime when anime id is passed along the url. -

-
- ); -} diff --git a/src/app/layout.jsx b/src/app/layout.jsx index 3fe6724..26d573d 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -1,6 +1,6 @@ import { Inter } from "next/font/google"; import "./globals.css"; -import Header from "./header/header"; +import Header from "./components/header/header"; import { SpeedInsights } from "@vercel/speed-insights/next"; import { Analytics } from "@vercel/analytics/react"; diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx index 762ae7f..7f1f9cb 100644 --- a/src/app/manga/page.jsx +++ b/src/app/manga/page.jsx @@ -19,7 +19,6 @@ export default async function Manga() { width={480} height={260} alt="Haikyu" - unoptimized />
diff --git a/src/app/page.jsx b/src/app/page.jsx index f9c0e51..31391ad 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,6 +1,6 @@ import Image from "next/image"; import styles from "./page.module.css"; -import Footer from "./footer/page"; +import Footer from "./components/footer/page"; export default function Home() { return ( diff --git a/src/app/recent/page.jsx b/src/app/recent/page.jsx deleted file mode 100644 index 7081e46..0000000 --- a/src/app/recent/page.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import "./recent.css"; -import Image from "next/image"; -import Link from "next/link"; - -export default async function Releases() { - const data = await test(); - - return ( -
-

Recent Releases

- -
- {data && - data.results.map((item, index) => ( - -
- Drama -

{item.title}

-
- - ))} -
-
- ); -} - -async function test() { - const res = await fetch( - "https://consumet-api-di2e.onrender.com/anime/gogoanime/recent-episodes", - { cache: "force-cache" } - ); - const data = res.json(); - return data; -} diff --git a/src/app/recent/recent.css b/src/app/recent/recent.css deleted file mode 100644 index 7d17143..0000000 --- a/src/app/recent/recent.css +++ /dev/null @@ -1,66 +0,0 @@ -.trendingContainer { - display: flex; - flex-direction: column; -} - -.trendingText { - color: #FEFFAC; - font-family: "Open Sans"; - font-size: 26px; - margin: 10px; -} - -.trending { - width: 98%; - display: flex; - flex-direction: row; - overflow-x: auto; - margin: 0px auto; -} - -/* Customize scrollbar here */ -.trending::-webkit-scrollbar { - height: 5px; -} - -.trendingEntries { - margin: 10px 10px 5px 5px; - text-align: center; - cursor: pointer; - transition: transform 0.2s ease; - -} - -.trendingEntries:hover { - transform: scale(1.03); -} - -.trendingEntries img { - border-radius: 10px; - width: 150px; - height: 210px; -} - -.trendingEntries p { - color: white; - max-height: 60px; - max-width: 150px; - overflow-y: auto; - font-family: "Lato"; - margin: 10px auto; - font-size: 16px; -} - -.trendingEntries p::-webkit-scrollbar { - width: 5px; -} - -@media (prefers-color-scheme: light) { - .trendingText { - color: black; - } - - .trendingEntries p { - color: black; - } -} \ No newline at end of file diff --git a/src/app/search/components/fetchInfo.js b/src/app/search/components/fetchInfo.js deleted file mode 100644 index 07b203d..0000000 --- a/src/app/search/components/fetchInfo.js +++ /dev/null @@ -1,14 +0,0 @@ -"use server"; - -export default async function Results(id) { - return await testFunction(id); -} - -async function testFunction(title) { - const res = await fetch( - "https://consumet-api-di2e.onrender.com/anime/gogoanime/" + title, - { cache: "force-cache" } - ); - const data = await res.json(); - return data; -} diff --git a/src/app/search/components/fetchedInfo.js b/src/app/search/components/fetchedInfo.js deleted file mode 100644 index aa03437..0000000 --- a/src/app/search/components/fetchedInfo.js +++ /dev/null @@ -1,44 +0,0 @@ -import "../search.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) => ( - -
-

{item.title}

- Drama Poster -
- - )) - ) : ( -
-

- No results found -

-
- ) - ) : null} -
- ); -} diff --git a/src/app/search/page.jsx b/src/app/search/page.jsx deleted file mode 100644 index 75f09bd..0000000 --- a/src/app/search/page.jsx +++ /dev/null @@ -1,67 +0,0 @@ -"use client"; - -import "./search.css"; -import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library -import { useState } from "react"; -import Results from "./components/fetchInfo"; -import fetchedInfo from "./components/fetchedInfo"; - -export default function Input() { - const [searchedAnime, setSearchedAnime] = useState(null); - const [loading, setLoading] = useState(null); - const [info, setInfo] = useState(null); - - const handleKeyPress = async (event) => { - if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && - searchedAnime !== "" - ) { - setLoading(true); - setInfo(await fetchedInfo(await Results(searchedAnime))); - setLoading(false); - } else if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && - searchedAnime === "" - ) { - alert("Input cannot be empty"); - } - }; - - return ( -
-
-
- - { - if (event.target.value.trim() !== "") { - setSearchedAnime(event.target.value); - } - }} - onKeyDown={(event) => handleKeyPress(event)} - placeholder="Enter anime title" - > -
-
- - {loading && ( -

- Please wait while we crunch all the data for you -

- )} - - {info} -
- ); -} diff --git a/src/app/search/search.css b/src/app/search/search.css deleted file mode 100644 index 8afb508..0000000 --- a/src/app/search/search.css +++ /dev/null @@ -1,80 +0,0 @@ -.inputContainer { - display: flex; - margin: 30px auto; -} - -.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: 0px auto; - background-color: #2c2c2c; - padding: 8px; - border-radius: 5px; - width: 20%; -} - -.searchIcon { - color: white; - margin-right: 5px; -} - -.animeEntry { - display: flex; - overflow-x: auto; -} - -.animeEntry::-webkit-scrollbar { - height: 7px; -} - -.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; - 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/top-airing/page.jsx b/src/app/top-airing/page.jsx deleted file mode 100644 index e68010f..0000000 --- a/src/app/top-airing/page.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import "./trending.css"; -import Image from "next/image"; -import Link from "next/link"; - -export default async function Trending() { - const data = await test(); - - return ( -
-

Trending

- -
- {data && - data.results.map((item, index) => ( - -
- Drama -

{item.title}

-
- - ))} -
-
- ); -} - -async function test() { - const res = await fetch( - "https://consumet-api-di2e.onrender.com/anime/gogoanime/top-airing", - { cache: "force-cache" } - ); - const data = res.json(); - return data; -} diff --git a/src/app/top-airing/trending.css b/src/app/top-airing/trending.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/video/[animeId]/page.jsx b/src/app/video/[animeId]/page.jsx deleted file mode 100644 index c0339f7..0000000 --- a/src/app/video/[animeId]/page.jsx +++ /dev/null @@ -1,56 +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 "../video.css"; -import { redirect } from "next/navigation"; - -export default async function Video({ params }) { - const id = params.animeId; - - // 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); - - if (data.message) { - redirect("/404"); - } - - const link = data.sources[4].url; - - return ( -
-
-

- {last_two} - {remainingWords} -

- - - - -
-
- ); -} - -async function getVideoLink(id) { - const res = await fetch( - "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id, - { next: { revalidate: 3600 } } // Video links are revalidated after an hour - ); - const data = res.json(); - return data; -} diff --git a/src/app/video/loading.css b/src/app/video/loading.css deleted file mode 100644 index aa3a519..0000000 --- a/src/app/video/loading.css +++ /dev/null @@ -1,346 +0,0 @@ -.loadingContainer { - color: white; - display: flex; - justify-content: center; - align-items: center; - height: 80dvh; -} - - -.text-flicker-in-glow { - -webkit-animation: text-flicker-in-glow 4s linear both; - animation: text-flicker-in-glow 4s linear both; - font-size: 36px; - font-family: "Kanit"; -} - -/* ---------------------------------------------- - * Generated by Animista on 2024-3-21 9:58:16 - * Licensed under FreeBSD License. - * See http://animista.net/license for more info. - * w: http://animista.net, t: @cssanimista - * ---------------------------------------------- */ - -/** - * ---------------------------------------- - * animation text-flicker-in-glow - * ---------------------------------------- - */ - -@-webkit-keyframes text-flicker-in-glow { - 0% { - opacity: 0; - } - - 10% { - opacity: 0; - text-shadow: none; - } - - 10.1% { - opacity: 1; - text-shadow: none; - } - - 10.2% { - opacity: 0; - text-shadow: none; - } - - 20% { - opacity: 0; - text-shadow: none; - } - - 20.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); - } - - 20.6% { - opacity: 0; - text-shadow: none; - } - - 30% { - opacity: 0; - text-shadow: none; - } - - 30.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.5% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.6% { - opacity: 0; - text-shadow: none; - } - - 45% { - opacity: 0; - text-shadow: none; - } - - 45.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 50% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55.1% { - opacity: 0; - text-shadow: none; - } - - 57% { - opacity: 0; - text-shadow: none; - } - - 57.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60.1% { - opacity: 0; - text-shadow: none; - } - - 65% { - opacity: 0; - text-shadow: none; - } - - 65.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75.1% { - opacity: 0; - text-shadow: none; - } - - 77% { - opacity: 0; - text-shadow: none; - } - - 77.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85.1% { - opacity: 0; - text-shadow: none; - } - - 86% { - opacity: 0; - text-shadow: none; - } - - 86.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 100% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } -} - -@keyframes text-flicker-in-glow { - 0% { - opacity: 0; - } - - 10% { - opacity: 0; - text-shadow: none; - } - - 10.1% { - opacity: 1; - text-shadow: none; - } - - 10.2% { - opacity: 0; - text-shadow: none; - } - - 20% { - opacity: 0; - text-shadow: none; - } - - 20.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); - } - - 20.6% { - opacity: 0; - text-shadow: none; - } - - 30% { - opacity: 0; - text-shadow: none; - } - - 30.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.5% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.6% { - opacity: 0; - text-shadow: none; - } - - 45% { - opacity: 0; - text-shadow: none; - } - - 45.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 50% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55.1% { - opacity: 0; - text-shadow: none; - } - - 57% { - opacity: 0; - text-shadow: none; - } - - 57.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60.1% { - opacity: 0; - text-shadow: none; - } - - 65% { - opacity: 0; - text-shadow: none; - } - - 65.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75.1% { - opacity: 0; - text-shadow: none; - } - - 77% { - opacity: 0; - text-shadow: none; - } - - 77.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85.1% { - opacity: 0; - text-shadow: none; - } - - 86% { - opacity: 0; - text-shadow: none; - } - - 86.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 100% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } -} - -@media (prefers-color-scheme: light) { - .loadingContainer { - color: black; - } -} \ No newline at end of file diff --git a/src/app/video/loading.jsx b/src/app/video/loading.jsx deleted file mode 100644 index dfa397c..0000000 --- a/src/app/video/loading.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import "./loading.css"; - -export default function Loading() { - return ( -
-

Loading

-
- ); -} diff --git a/src/app/video/video.css b/src/app/video/video.css deleted file mode 100644 index 5ccb58f..0000000 --- a/src/app/video/video.css +++ /dev/null @@ -1,30 +0,0 @@ -.video2 { - display: flex; - flex-direction: column; - align-items: center; - margin: 0px auto; - width: 50%; -} - -.testPlayer { - border-radius: 10px; -} - -.video2 p { - color: white; - font-family: "Lato"; - font-size: 20px; - text-align: center; -} - -@media (prefers-color-scheme: light) { - .video2 p { - color: black; - } -} - -@media screen and (max-width: 768px) { - .video2 { - width: 100%; - } -} \ No newline at end of file -- cgit v1.2.3