Skip to content

Commit

Permalink
Merge pull request #35 from Jeydin21/manga-beta
Browse files Browse the repository at this point in the history
Manga Update (Munchyroll V2)
  • Loading branch information
Jeydin21 authored Jun 27, 2024
2 parents 7f940fe + c91420d commit a60eb40
Show file tree
Hide file tree
Showing 65 changed files with 1,866 additions and 1,143 deletions.
2 changes: 1 addition & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ NEXT_PUBLIC_UMAMI_WEBSITE_ID=''

# NextJS Telemetry Option [OPTIONAL]
# Description: Set this to 1 to disable metrics. Leave blank otherwise
NEXT_TELEMETRY_DISABLED='1'
NEXT_TELEMETRY_DISABLED='1'
2 changes: 1 addition & 1 deletion components/GoogleAnalytics.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,4 @@ const GoogleAnalytics = () => {
);
};

export default GoogleAnalytics;
export default GoogleAnalytics;
138 changes: 49 additions & 89 deletions components/LandingPage.jsx
Original file line number Diff line number Diff line change
@@ -1,101 +1,61 @@
import { useState, useEffect } from "react";

import Link from "next/link";
import Image from "next/image";
import PrimaryButton from "./buttons/PrimaryButton";
import SearchInput from "./small-components/SearchInput";

function LandingPage() {
const [hour, setHour] = useState();

useEffect(() => {
const time = new Date();
setHour(time.getHours());
});

var backgroundClass;
var welcomeMessage;

// Define the time ranges for day and night
const dawn = "06"; // 6 AM
const noon = "12"; // 12 PM
const dusk = "16"; // 4 PM
const night = "20"; // 8 PM

if (hour >= dawn && hour < noon) {
backgroundClass = "from-[#CF9E57] to-[#19547B]";
welcomeMessage = "Good morning 🌅";
} else if (hour >= noon && hour < dusk) {
backgroundClass = "from-[#507b98] to-[#003973]";
welcomeMessage = "Good afternoon 🏙️";
} else if (hour >= dusk && hour < night) {
backgroundClass = "from-[#7b3737] to-[#2C3E50]";
welcomeMessage = "Good evening 🌇";
} else {
backgroundClass = "from-[#141E30] to-[#243B55]";
welcomeMessage = "Good night 🌃";
}

return (
<div
className={`min-h-screen justify-center relative flex items-center bg-gradient-to-t ${backgroundClass}`}
className={`min-h-screen justify-center relative flex items-center text-primary dark:text-secondary`}
>
<div className="custom-shape-divider-bottom-1682184498 max-md:hidden">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1200 120"
preserveAspectRatio="none"
>
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25"
className="shape-fill"
></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5"
className="shape-fill"
></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
className="shape-fill"
></path>
</svg>
</div>
<div className="px-10 max-w-screen-xl w-full mx-auto relative md:flex items-center space-y-10 justify-between ">
<div className=" text-secondary font-semibold">
<h1 className=" text-4xl font-bold">Munchyroll</h1>
<h1 className=" text-4xl font-medium text-secondary-light">
No ads. Just anime.
</h1>
<br></br>
<h1 className=" text-2xl font-medium text-secondary-light">
{welcomeMessage}
</h1>
<h1 className=" text-2xl font-medium text-secondary-light">
Share this with friends!
</h1>
<div className="max-md:mt-2 max-w-screen-xl w-full relative -mt-48 items-center flex justify-center align-center min-h-screen flex-col">
<div className="text-center space-y-4">
<h1 className="text-6xl font-bold">Munchyroll</h1>
<p className="text-primary dark:text-secondary text-base leading-6">
Munchyroll is an entertainment platform for people looking to<br />watch millions of movies, series, and animes for free.
</p>
</div>

<div className="lg:pb-36 md:pb-36">
<div>
<Image
src="/nilou.png"
width={160}
height={160}
alt="Nilou"
/>
</div>
<SearchInput isLandingPage={true} />
<div className="sm:w-[400px]">
<Link href="/home">
<PrimaryButton isLandingPage={true}>Home</PrimaryButton>
</Link>
</div>
<div className="space-y-8">
<div className="mx-auto max-w-5xl p-6 sm:p-8">
<div className="flex flex-col gap-6">
<div className="grid gap-6 md:grid-cols-2">
<Link title="Go to anime homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/anime">
<div className="grid gap-4">
<h4 className="text-xl text-primary dark:text-secondary">
Anime <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"></span>
</h4>
<p className="text-base opacity-75 text-primary dark:text-secondary">Explore new anime series!</p>
</div>
</Link>
<Link title="Go to manga homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/manga">
<div className="grid gap-4">
<h4 className="text-xl text-primary dark:text-secondary">
Manga <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"></span>
</h4>
<p className="text-base opacity-75 text-primary dark:text-secondary">Read the latest chapters!</p>
</div>
</Link>
{/* <Link title="Go to movies homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/movies">
<div className="grid gap-4">
<h4 className="text-xl text-primary dark:text-secondary">
Movies <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span>
</h4>
<p className="text-base opacity-75 text-primary dark:text-secondary">In development...</p>
</div>
</Link>
<Link title="Go to shows homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/shows">
<div className="grid gap-4">
<h4 className="text-xl text-primary dark:text-secondary">
Shows <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span>
</h4>
<p className="text-base opacity-75 text-primary dark:text-secondary">In development...</p>
</div>
</Link> */}
</div>
</div>
</div>
</div>

</div>



</div>
);
}
Expand Down
23 changes: 0 additions & 23 deletions components/Player/EpisodesList.jsx

This file was deleted.

104 changes: 0 additions & 104 deletions components/anime-details/AnimeDetails.jsx

This file was deleted.

79 changes: 79 additions & 0 deletions components/anime/AnimeCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import Link from "next/link";
import { FaCalendar, FaBook, FaStar, FaPlay } from 'react-icons/fa';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';
import Status from "../ui/Status";

function AnimeCard({ data }) {
const type = {
TV: "TV",
MOVIE: "Movie",
OVA: "OVA",
ONA: "ONA",
SPECIAL: "Special",
}

return (
<>
<Link href={"/anime/info/" + data.id}>
<div className="sm:p-3 ">
<div className="overflow-hidden relative rounded-lg aspect-[5/7]">
<div className="group absolute inset-0">
<div className="transition-all transform duration-300 group-hover:scale-105 group-hover:brightness-50">
<LazyLoadImage
effect="blur"
className="w-full h-full aspect-[5/7] object-cover rounded-lg"
src={data.image}
alt=""
/>
</div>
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<FaPlay className="text-4xl" />
</div>
</div>
</div>

<div>
<div className="mt-2 rounded-md flex items-center space-x-1 hover:bg-neutral-300 dark:hover:bg-neutral-800">
<Status status={data.status} />
<p title={data.title.english || data.title.romaji} className="transition-all dark:text-secondary text-primary font-bold line-clamp-1 text-sm rounded p-1">
{data.title.english || data.title.romaji}
</p>
</div>
{/* <p>Episode {data.episodeNumber}</p> */}
<div className="text-xs sm:text-sm flex space-x-2 mt-2 select-none">
<div className="dark:text-secondary text-primary flex items-center">
{data.releaseDate && (
<p>
<span title={`Released: ${data.releaseDate}`} className="dark:text-secondary text-primary flex items-center">
<FaCalendar />
<span className="ml-1">{data.releaseDate}</span>
</span>
</p>
)}
</div>
{data.totalEpisodes && data.totalEpisodes != 1 && (
<p>
<span title={`Episodes: ${data.totalEpisodes}`} className="dark:text-secondary text-primary flex items-center">
<FaBook />
<span className="ml-1">{data.totalEpisodes}</span>
</span>
</p>
)}
{data.rating && (
<p>
<span title={`Rating: ${data.rating}`} className="dark:text-secondary text-primary flex items-center">
<FaStar />
<span className="ml-1">{data.rating}</span>
</span>
</p>
)}
</div>
</div>
</div>
</Link>
</>
);
}

export default AnimeCard;
Loading

1 comment on commit a60eb40

@vercel
Copy link

@vercel vercel bot commented on a60eb40 Jun 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

munchyroll – ./

munchyroll-jeydin.vercel.app
munchyroll-git-master-jeydin.vercel.app
munchyroll.vercel.app
anime.j21.dev

Please sign in to comment.