Merge pull request #14 from zephex-alt/master

UI changes to improved desktop experience

11 files changed, 121 insertions, 150 deletions

diff --git a/src/app/anime/anime.module.css b/src/app/anime/anime.module.css
index 56c6138..72c6fde 100644
--- a/src/app/anime/anime.module.css
+++ b/src/app/anime/anime.module.css
@@ -1,4 +1,3 @@
 .main {

 	margin: 50px auto;

-	max-width: 98%;

 }

diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index 55a038f..28dfacb 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -1,19 +1,19 @@
 import Image from "next/image";

 import Link from "next/link";

-import styles from "./recent.module.css";

+import styles from "../top-airing/trending.module.css";

 import { preFetchAnimeInfo } from "../videoLinkfetcher";

 

-export default async function Releases() {

-	const data = await fetchRecentEpisodes();

+export default async function Recent() {

+	const data = await test();

 	preFetchAnimeInfo(data);

 

 	return (

-		<div className={styles.RecentContainer}>

-			<div className={styles.RecentText}>

+		<div className={styles.TrendingContainer}>

+			<div className={styles.TrendingText}>

 				<p>Recent Releases</p>

 			</div>

 

-			<div className={styles.Recent}>

+			<div className={styles.trending}>

 				{data &&

 					data.results.map((item, index) => (

 						<Link

@@ -22,12 +22,12 @@ export default async function Releases() {
 							style={{ textDecoration: "none", color: "white" }}

 						>

 							<div

-								className={styles.RecentEntries}

+								className={styles.trendingEntries}

 								title={item.title}

 							>

 								<Image

 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

-									className={styles.RecentImage}

+									className={styles.trendingImage}

 									width={190}

 									height={270}

 									alt="Drama"

@@ -42,7 +42,7 @@ export default async function Releases() {
 	);

 }

 

-async function fetchRecentEpisodes() {

+async function test() {

 	const res = await fetch(

 		"https://consumet-jade.vercel.app/anime/gogoanime/recent-episodes",

 		{ next: { revalidate: 21600 } }

diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css
deleted file mode 100644
index 07f20d5..0000000
--- a/src/app/anime/recent/recent.module.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.RecentText {

-	display: flex;

-	align-items: center;

-}

-

-.RecentText p {

-	font-size: 28px;

-	margin: 0;

-	color: var(--soft-purple);

-}

-

-.RecentText span {

-	margin-top: 6px;

-}

-

-.Recent {

-	display: flex;

-	overflow-x: auto;

-}

-

-.RecentContainer:hover .RecentEntries {

-	opacity: 0.4;

-}

-

-.RecentContainer:hover:hover .RecentEntries:hover {

-	opacity: 1;

-	transform: scale(1.02);

-}

-

-.Recent::-webkit-scrollbar {

-	height: 5px;

-	width: 0px;

-}

-

-.Recent::-webkit-scrollbar-thumb {

-	background-color: #444444;

-	border-radius: 5px;

-}

-

-.RecentEntries {

-	margin: 4px;

-	background-color: #1f1f1fbb;

-	padding: 0.5rem;

-	border-radius: 0.5rem;

-	transition: opacity 400ms ease, transform 400ms ease;

-}

-

-.RecentEntries p {

-	text-align: center;

-	margin: 5px auto;

-	width: auto;

-	max-width: 180px;

-	overflow: hidden;

-	white-space: nowrap;

-	text-overflow: ellipsis;

-	transition: font-size 400ms ease;

-}

-

-.RecentEntries p::-webkit-scrollbar {

-	width: 2px;

-}

-

-.Recent p::-webkit-scrollbar-thumb {

-	background-color: #444444;

-	border-radius: 5px;

-}

-

-.RecentImage {

-	border-radius: 0.5rem;

-}

diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index 9b0d374..55e29d8 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -7,6 +7,7 @@
 .inputContainer {

 	display: flex;

 	align-items: center;

+	margin: 0 0.3rem 0 0.3rem;

 }

 

 .inputContainer button {

@@ -103,7 +104,7 @@
 

 @media screen and (max-width: 768px) {

 	.searchContainer {

-		width: 70%;

+		width: 100%;

 	}

 

 	.anime p {

diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx
index ab5d3af..ff329f6 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -6,6 +6,7 @@ import { preFetchAnimeInfo } from "../videoLinkfetcher";
 export default async function Trending() {

 	const data = await test();

 	preFetchAnimeInfo(data);

+	

 	return (

 		<div className={styles.TrendingContainer}>

 			<div className={styles.TrendingText}>

@@ -20,7 +21,10 @@ export default async function Trending() {
 							href={`/anime/${item.id}`}

 							style={{ textDecoration: "none", color: "white" }}

 						>

-							<div className={styles.trendingEntries} title={item.title}>

+							<div

+								className={styles.trendingEntries}

+								title={item.title}

+							>

 								<Image

 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									className={styles.trendingImage}

diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
index 7d08a2e..31f6b16 100644
--- a/src/app/anime/top-airing/trending.module.css
+++ b/src/app/anime/top-airing/trending.module.css
@@ -1,21 +1,17 @@
-.TrendingText {

-	display: flex;

-	align-items: center;

-}

-

 .TrendingText p {

-	font-size: 28px;

-	margin: 0px;

+	font-size: 36px;

+	margin: 0px 0px 0.5rem 0.5rem;

+	font-weight: 400;

 	color: var(--soft-purple);

-}

-

-.TrendingText span {

-	margin-top: 6px;

+	text-align: center;

 }

 

 .trending {

-	display: flex;

-	overflow-x: auto;

+	display: grid;

+	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

+	grid-gap: 0.5rem;

+	align-items: center;

+	margin-left: 0.5rem;

 }

 

 .TrendingContainer:hover .trendingEntries {

@@ -28,43 +24,50 @@
 }

 

 .trending::-webkit-scrollbar {

-	height: 5px;

-	width: 0px;

-}

-

-.trending::-webkit-scrollbar-thumb {

-	background-color: #444444;

-	border-radius: 5px;

+	height: 0px;

 }

 

 .trendingEntries {

-	margin: 4px;

 	transition: transform 400ms ease;

 	background-color: #1f1f1fbb;

 	padding: 0.5rem;

-	border-radius: 0.5rem;

+	border-radius: 0.4rem;

 	transition: opacity 400ms ease, transform 400ms ease;

+	display: flex;

+	flex-direction: column;

+	align-items: center;

+	justify-content: center;

 }

 

 .trendingEntries p {

 	text-align: center;

-	margin: 5px auto;

 	width: auto;

 	max-width: 180px;

+	margin: 0.5rem 0 0 0;

 	overflow: hidden;

 	white-space: nowrap;

 	text-overflow: ellipsis;

 }

 

-.trendingEntries p::-webkit-scrollbar {

-	width: 2px;

+.trendingEntries img {

+	border-radius: 0.4rem;

 }

 

-.trendingEntries p::-webkit-scrollbar-thumb {

-	background-color: #444444;

-	border-radius: 5px;

-}

+@media screen and (max-width: 768px) {

+	.TrendingText p {

+		text-align: start;

+		font-size: 26px;

+		margin-bottom: 1rem;

+	}

+

+	.trending {

+		display: flex;

+		overflow-x: auto;

+		overflow-y: hidden;

+		margin-top: -8px;

+	}

 

-.trendingImage {

-	border-radius: 0.5rem;

+	.trendingEntries img {

+		width: auto;

+	}

 }

diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx
index 1b93313..d09e0ff 100644
--- a/src/app/kdrama/components/popular.jsx
+++ b/src/app/kdrama/components/popular.jsx
@@ -13,17 +13,20 @@ export default async function PopularDramas() {
 

 			<div className={styles.AnimeContainer}>

 				{popular &&

-					popular.results.map((item, index) => (

+					popular.results.slice(0, 16).map((item, index) => (

 						<Link

 							href={`/kdrama/${encodeURIComponent(item.id)}`}

 							key={index}

 							style={{ textDecoration: "none" }}

 						>

-							<div className={styles.AnimeEntry} title={item.title}>

+							<div

+								className={styles.AnimeEntry}

+								title={item.title}

+							>

 								<Image

 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

-									width={190}

-									height={270}

+									width={200}

+									height={310}

 									alt="Drama Poster"

 								/>

 								<p>{item.title}</p>

diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx
index b53009e..fc142b1 100644
--- a/src/app/kdrama/components/recent.jsx
+++ b/src/app/kdrama/components/recent.jsx
@@ -8,17 +8,20 @@ export default async function RecentDramas() {
 	PreFetchAnimeInfo(popular);

 	return (

 		<div className={styles.Main}>

-			<p className={styles.popDramasText}>Recently Released</p>

+			<p className={styles.popDramasText}>Recent Releases</p>

 

 			<div className={styles.AnimeContainer}>

 				{popular &&

-					popular.results.map((item, index) => (

+					popular.results.slice(0, 16).map((item, index) => (

 						<Link

 							href={`/kdrama/${encodeURIComponent(item.id)}`}

 							key={index}

 							style={{ textDecoration: "none" }}

 						>

-							<div className={styles.AnimeEntry} title={item.title}>

+							<div

+								className={styles.AnimeEntry}

+								title={item.title}

+							>

 								<Image

 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									width={190}

diff --git a/src/app/kdrama/styles/kdrama.module.css b/src/app/kdrama/styles/kdrama.module.css
index f27060f..d683479 100644
--- a/src/app/kdrama/styles/kdrama.module.css
+++ b/src/app/kdrama/styles/kdrama.module.css
@@ -1,4 +1,3 @@
 .Main {

-	max-width: 98%;

 	margin: 80px auto;

 }

diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css
index 16c18a2..fce54c1 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -1,29 +1,20 @@
 .popDramasText {

 	color: var(--soft-purple);

-	font-size: 28px;

+	font-size: 36px;

 	margin-bottom: 10px;

-	font-weight: 500;

+	font-weight: 400;

+	text-align: center;

 }

 

 .AnimeContainer {

-	display: flex;

-	overflow-x: auto;

-	overflow-y: hidden;

-	margin-top: -8px;

+	display: grid;

+	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

+	grid-gap: 0.5rem;

+	align-items: center;

 }

 

 .AnimeContainer::-webkit-scrollbar {

-	height: 5px;

-}

-

-.AnimeContainer::-webkit-scrollbar-track {

-	background-color: #3333339d;

-	border-radius: 5px;

-}

-

-.AnimeContainer::-webkit-scrollbar-thumb {

-	background-color: rgb(68, 68, 68);

-	border-radius: 5px;

+	height: 0px;

 }

 

 .AnimeContainer:hover .AnimeEntry {

@@ -32,7 +23,7 @@
 

 .AnimeContainer:hover .AnimeEntry:hover {

 	opacity: 1;

-	transform: scale(1.02);

+	transform: scale(1.018);

 	background-color: #272727;

 }

 

@@ -40,26 +31,44 @@
 	display: flex;

 	flex-direction: column;

 	align-items: center;

-	margin: 4px;

 	background-color: #1f1f1fbb;

 	padding: 0.5rem;

 	transition: opacity 200ms ease, transform 200ms ease,

 		background-color 200ms ease;

 	cursor: grab;

-	border-radius: 1rem;

+	border-radius: 0.4rem;

 }

 

 .AnimeEntry img {

-	border-radius: 1rem;

+	border-radius: 0.4rem;

 }

 

 .AnimeEntry p {

 	text-align: center;

 	color: white;

 	width: auto;

-	max-width: 190px;

+	max-width: 180px;

 	overflow: hidden;

 	white-space: nowrap;

 	text-overflow: ellipsis;

 	margin: 0.5rem 0rem 0rem 0rem;

 }

+

+@media screen and (max-width: 768px) {

+	.popDramasText {

+		text-align: start;

+		font-size: 26px;

+		margin-bottom: 1rem;

+	}

+

+	.AnimeContainer {

+		display: flex;

+		overflow-x: auto;

+		overflow-y: hidden;

+		margin-top: -8px;

+	}

+

+	.AnimeEntry img {

+		width: auto;

+	}

+}

diff --git a/src/app/page.module.css b/src/app/page.module.css
index 41ce2e9..a38131c 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -15,18 +15,39 @@
 	align-items: center;
 	justify-content: space-between;
 	background-color: #121212;
-	font-family: "Lexend Deca", serif;
-	z-index: 2;
+	z-index: 999;
 }
 
 .left {
 	color: white;
-	font-size: 24px;
 }
 
 .left p {
 	margin: 0;
+	font-size: 1.5rem;
 	padding: 1rem;
+	color: transparent;
+	background: linear-gradient(
+		90deg,
+		rgba(0, 151, 255, 0.9976365546218487) 3%,
+		rgba(115, 154, 242, 1) 21%,
+		rgba(255, 159, 224, 1) 40%,
+		rgba(255, 194, 133, 1) 60%,
+		rgba(245, 243, 81, 1) 80%,
+		rgba(255, 179, 0, 1) 100%
+	);
+	background-size: 150% 50%;
+	background-clip: text;
+	animation: colorChange 3s linear infinite alternate-reverse;
+}
+
+@keyframes colorChange {
+	0% {
+		background-position: 0 50%;
+	}
+	100% {
+		background-position: 100% 50%;
+	}
 }
 
 .right a {
@@ -34,7 +55,7 @@
 	color: white;
 	margin: 0 0.4rem 0 0.5rem;
 	transition: opacity 400ms ease;
-	font-size: 16px;
+	font-size: 1rem;
 }
 
 .header:hover > .right a {
@@ -53,7 +74,7 @@
 	background-color: #121212;
 	color: white;
 	font-family: "Poppins", serif;
-	z-index: 2;
+	z-index: 999;
 }
 
 .footer p {
@@ -90,7 +111,6 @@
 	border-radius: 0.5rem;
 	transition: opacity 200ms ease, transform 200ms ease;
 	padding: 0.4rem 2rem;
-	font-family: "Lexend Deca", serif;
 	margin: 0.2rem 0.2rem 0 0.2rem;
 	border-color: rgb(80, 80, 80);
 	border-style: groove;
@@ -104,7 +124,7 @@
 .content:hover > .contentContainer div:hover {
 	opacity: 1;
 	cursor: pointer;
-	transform: scale(0.96) rotateX(15deg) rotateY(8deg);
+	transform: scale(0.96) rotateX(15deg) rotateY(-8deg);
 }
 
 @media screen and (max-width: 1024px) {