UI enhancement

10 files changed, 101 insertions, 22 deletions

diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
index 9c297d2..c1b4615 100644
--- a/src/app/anime/[id]/buttons.jsx
+++ b/src/app/anime/[id]/buttons.jsx
@@ -1,7 +1,7 @@
 "use client";

 

 import styles from "./info.module.css";

-import { useState } from "react";

+import { useState, useEffect } from "react";

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

 import { MediaPlayer, MediaProvider } from "@vidstack/react";

 import "@vidstack/react/player/styles/default/theme.css";

@@ -15,6 +15,13 @@ import { storeLocal } from "../history/storeData";
 export default function Button({ data2: info }) {

 	const currentDate = new Date();

 	const [videoLink, setVideoLink] = useState(null);

+	const [buttonGroups, setButtonGroups] = useState(null);

+

+	useEffect(() => {

+		create_button_group(0, 50);

+	}, []);

+

+	const groups = createGroups(info.episodes, 50);

 

 	async function video(id) {

 		const link = await fetch_video_link(id);

@@ -25,6 +32,14 @@ export default function Button({ data2: info }) {
 		}

 	}

 

+	function createGroups(array, size) {

+		const groups = [];

+		for (let i = 0; i < array.length; i += size) {

+			groups.push(array.slice(i, i + size));

+		}

+		return groups;

+	}

+

 	function store_to_local(name, image, episode, id) {

 		let newData = {

 			name: name,

@@ -42,13 +57,11 @@ export default function Button({ data2: info }) {
 		storeLocal(newData);

 	}

 

-	return (

-		<main>

-			<h2 className={styles.buttonHeader}>Episodes: </h2>

+	function create_button_group(start, end) {

+		setButtonGroups(

 			<div className={styles.buttonContainer}>

-				{info &&

-					info.episodes &&

-					info.episodes.map((item, index) => (

+				{info.episodes &&

+					info.episodes.slice(start, end).map((item, index) => (

 						<button

 							className={styles.dramaButton}

 							key={index}

@@ -68,7 +81,38 @@ export default function Button({ data2: info }) {
 						</button>

 					))}

 			</div>

+		);

+	}

 

+	function handleSelectChange(event) {

+		const selectedIndex = event.target.selectedIndex;

+		const selectedGroup = groups[selectedIndex];

+		if (selectedGroup) {

+			create_button_group(

+				selectedGroup[0].number - 1,

+				selectedGroup[selectedGroup.length - 1].number

+			);

+		}

+	}

+

+	return (

+		<main>

+			<h2 className={styles.buttonHeader}>Episodes: </h2>

+			{info.episodes && (

+				<select

+					onChange={(event) => handleSelectChange(event)}

+					className={styles.SelectClass}

+				>

+					{groups &&

+						groups.map((item, index) => (

+							<option key={index}>

+								{item[0].number} -{" "}

+								{item[item.length - 1].number}

+							</option>

+						))}

+				</select>

+			)}

+			{buttonGroups}

 			{videoLink && (

 				<div

 					className={styles.videoPopUp}

diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index e6d0af1..fd14d32 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -37,6 +37,25 @@
 	color: rgba(255, 255, 255, 0.637);

 }

 

+.SelectClass {

+	background-color: #272727;

+	color: white;

+	font-family: "Lexend Deca", serif;

+	border: none;

+	outline: none;

+	padding: 0.5rem;

+	border-radius: 0.5rem;

+	text-align: center;

+}

+

+.SelectClass::-webkit-scrollbar {

+	width: 0;

+}

+

+.SelectClass option:checked {

+	background-color: rgb(0, 160, 223);

+}

+

 .buttonContainer {

 	margin: 0px;

 	height: 200px;

@@ -72,7 +91,7 @@
 .dramaButton {

 	padding: 10px;

 	font-family: "Lexend Deca", serif;

-	margin: 5px 5px 5px 5px;

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

 	width: 55px;

 	border-radius: 5px;

 	text-align: center;

@@ -161,4 +180,8 @@
 	.video {

 		width: 100%;

 	}

+

+	.buttonContainer {

+		text-align: center;

+	}

 }

diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index 28dfacb..21d5fb4 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -28,8 +28,8 @@ export default async function Recent() {
 								<Image

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

 									className={styles.trendingImage}

-									width={190}

-									height={270}

+									width={210}

+									height={310}

 									alt="Drama"

 									priority

 								/>

diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index 55e29d8..185f6d5 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -56,9 +56,10 @@
 	display: flex;

 	overflow-x: auto;

 	margin-bottom: 1rem;

+	margin-left: 0.5rem;

 }

 

-.animeEntry .anime {

+.animeEntry:hover .anime {

 	opacity: 0.5;

 }

 

diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx
index ff329f6..a0fc302 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -28,8 +28,8 @@ export default async function Trending() {
 								<Image

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

 									className={styles.trendingImage}

-									width={190}

-									height={270}

+									width={210}

+									height={310}

 									alt="Drama"

 									priority

 								/>

diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
index 31f6b16..2abaf4b 100644
--- a/src/app/anime/top-airing/trending.module.css
+++ b/src/app/anime/top-airing/trending.module.css
@@ -42,7 +42,7 @@
 .trendingEntries p {

 	text-align: center;

 	width: auto;

-	max-width: 180px;

+	max-width: 190px;

 	margin: 0.5rem 0 0 0;

 	overflow: hidden;

 	white-space: nowrap;

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

 			<div className={styles.AnimeContainer}>

 				{popular &&

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

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

 						<Link

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

 							key={index}

diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx
index fc142b1..d28f348 100644
--- a/src/app/kdrama/components/recent.jsx
+++ b/src/app/kdrama/components/recent.jsx
@@ -12,7 +12,7 @@ export default async function RecentDramas() {
 

 			<div className={styles.AnimeContainer}>

 				{popular &&

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

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

 						<Link

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

 							key={index}

diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css
index 80f70b9..e8076f3 100644
--- a/src/app/kdrama/styles/search.module.css
+++ b/src/app/kdrama/styles/search.module.css
@@ -1,5 +1,5 @@
 .SearchContainer {

-	margin: 20px 0px -20px 0px;

+	margin: -1rem 0 -2rem 0;

 }

 

 .LoadingText {

@@ -14,7 +14,8 @@
 	display: flex;

 	align-items: center;

 	max-width: 30%;

-	border-radius: 10px;

+	border-radius: 0.8rem;

+	margin: 0 0.2rem 0 0.2rem;

 }

 

 .SearchContainer input {

diff --git a/src/app/page.module.css b/src/app/page.module.css
index a38131c..80a2d67 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -33,8 +33,8 @@
 		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%
+		rgba(245, 242, 81, 0.884) 80%,
+		rgba(255, 179, 0, 0.842) 100%
 	);
 	background-size: 150% 50%;
 	background-clip: text;
@@ -46,7 +46,7 @@
 		background-position: 0 50%;
 	}
 	100% {
-		background-position: 100% 50%;
+		background-position: 100% 100%;
 	}
 }
 
@@ -124,11 +124,21 @@
 .content:hover > .contentContainer div:hover {
 	opacity: 1;
 	cursor: pointer;
-	transform: scale(0.96) rotateX(15deg) rotateY(-8deg);
+	transform: scale(0.95) rotateX(12deg) rotateY(-8deg);
 }
 
 @media screen and (max-width: 1024px) {
 	.contentContainer {
 		display: block;
 	}
+
+	.content:hover > .contentContainer div {
+		opacity: 0.5;
+	}
+
+	.content:hover > .contentContainer div:hover {
+		opacity: 1;
+		cursor: pointer;
+		transform: scale(0.95);
+	}
 }