From a6c3531821aa10d80cc93d1809cbc45943c2c830 Mon Sep 17 00:00:00 2001
From: zephex-alt <166333351+zephex-alt@users.noreply.github.com>
Date: Sat, 4 May 2024 18:18:30 +0000
Subject: UI changes to improved desktop experience

---
 src/app/anime/anime.module.css               |  1 -
 src/app/anime/recent/page.jsx                | 18 +++----
 src/app/anime/recent/recent.module.css       | 70 ----------------------------
 src/app/anime/search/search.module.css       |  3 +-
 src/app/anime/top-airing/page.jsx            |  6 ++-
 src/app/anime/top-airing/trending.module.css | 65 ++++++++++++++------------
 src/app/kdrama/components/popular.jsx        | 11 +++--
 src/app/kdrama/components/recent.jsx         |  9 ++--
 src/app/kdrama/styles/kdrama.module.css      |  1 -
 src/app/kdrama/styles/popular.module.css     | 53 ++++++++++++---------
 src/app/page.module.css                      | 34 +++++++++++---
 11 files changed, 121 insertions(+), 150 deletions(-)
 delete mode 100644 src/app/anime/recent/recent.module.css

(limited to 'src')

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