Merge pull request #6 from zephex-alt/master

Fixes and Improvements - 2

33 files changed, 165 insertions, 144 deletions

diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
index 660569e..5c99027 100644
--- a/src/app/anime/[id]/buttons.jsx
+++ b/src/app/anime/[id]/buttons.jsx
@@ -88,10 +88,10 @@ export default function Button({ data2: info }) {
 							className={styles.VideoPlayer}

 							playsInline

 							id="videoPlayer"

-							volume={0.2}

-							onQualityChange={(event) =>

-								console.log("changed qualities", event)

-							}

+							volume={0.8}

+							// onQualityChange={(event) =>

+							// 	console.log("changed qualities", event)

+							// }

 						>

 							<MediaProvider />

 							<PlyrLayout icons={plyrLayoutIcons} />

diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index ca6018a..c7ab66b 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -55,7 +55,6 @@
 

 .buttonContainer button {

 	transition: transform 200ms ease-in-out;

-

 }

 

 .buttonContainer button:focus {

@@ -65,11 +64,11 @@
 	transform: scale(0.9);

 }

 

-.buttonContainer::-webkit-scrollbar{

+.buttonContainer::-webkit-scrollbar {

 	width: 5px;

 }

 

-.buttonContainer::-webkit-scrollbar-thumb{

+.buttonContainer::-webkit-scrollbar-thumb {

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

 	border-radius: 1rem;

 }

@@ -92,7 +91,7 @@
 

 .dramaButton:hover {

 	background-color: #1f1f1f;

-	transition: background-color 200ms ease-in

+	transition: background-color 200ms ease-in;

 }

 

 .infoPageContainer p {

@@ -110,7 +109,6 @@
 	border-radius: 5px;

 	color: var(--neon-green);

 	background-color: #303030;

-	cursor: pointer;

 	font-family: "Atkinson Hyperlegible", serif;

 }

 

@@ -119,7 +117,7 @@
 }

 

 .animeRelease span {

-	color: var(--soft-purple)

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

 }

 

 .videoPopUp {

@@ -138,7 +136,6 @@
 	overflow-y: auto;

 }

 

-

 .closeButton {

 	font-family: "Poppins", serif;

 	font-size: 16px;

@@ -153,6 +150,7 @@
 

 .video {

 	width: 60vw;

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

 }

 

 .VideoPlayer {

@@ -160,7 +158,6 @@
 }

 

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

-

 	.titleContainer p {

 		font-size: 28px;

 	}

@@ -172,4 +169,4 @@
 	.video {

 		width: 100%;

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/anime/[id]/loading.module.css b/src/app/anime/[id]/loading.module.css
index 2bcedaa..a9feceb 100644
--- a/src/app/anime/[id]/loading.module.css
+++ b/src/app/anime/[id]/loading.module.css
@@ -11,12 +11,12 @@
 	height: 50px;

 	border-radius: 50%;

 	border: 8px solid;

-	border-color: #F4F4F4 #0000;

+	border-color: #f4f4f4 #0000;

 	animation: s1 1s infinite;

 }

 

 @keyframes s1 {

 	to {

-		transform: rotate(.5turn)

+		transform: rotate(0.5turn);

 	}

-}
\ No newline at end of file
+}

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

 	margin: 50px auto;

 	max-width: 98%;

-}
\ No newline at end of file
+}

diff --git a/src/app/anime/history/continueWatching/cw.module.css b/src/app/anime/history/continueWatching/cw.module.css
index e473513..ce70c30 100644
--- a/src/app/anime/history/continueWatching/cw.module.css
+++ b/src/app/anime/history/continueWatching/cw.module.css
@@ -58,4 +58,4 @@
 	.animeEntry img {

 		width: 35%;

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/anime/history/continueWatching/page.jsx b/src/app/anime/history/continueWatching/page.jsx
index d9bc6d1..4b18adf 100644
--- a/src/app/anime/history/continueWatching/page.jsx
+++ b/src/app/anime/history/continueWatching/page.jsx
@@ -43,7 +43,7 @@ const ContinueWatching = () => {
 										</p>

 										<p className={styles.date}>

 											Last watched on: {item.date} at{" "}

-											{item.time}

+											{item.time} hours

 										</p>

 									</div>

 									<Image

diff --git a/src/app/anime/history/storeData.js b/src/app/anime/history/storeData.js
index b748d3b..4008095 100644
--- a/src/app/anime/history/storeData.js
+++ b/src/app/anime/history/storeData.js
@@ -1,6 +1,7 @@
 "use client";

 

 export function storeLocal(watchData) {

+	const currentDate = new Date();

 	const jsonData = localStorage.getItem("data");

 	const dataObject = jsonData ? JSON.parse(jsonData) : {};

 

@@ -12,7 +13,15 @@ export function storeLocal(watchData) {
 	dataObject.watchHis.forEach((element) => {

 		if (element.name === watchData.name) {

 			let episode = watchData.episode;

+			let date = `${currentDate.getDate()}-${String(

+				currentDate.getMonth() + 1

+			).padStart(2, "0")}`;

+			let time = `${currentDate.getHours()}:${String(

+				currentDate.getMinutes()

+			).padStart(2, "0")}`;

 			element.episode = episode;

+			element.date = date;

+			element.time = time;

 			found = true;

 		}

 	});

diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index ba0ace5..55a038f 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -21,12 +21,15 @@ export default async function Releases() {
 							href={`/anime/${item.id}`}

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

 						>

-							<div className={styles.RecentEntries}>

+							<div

+								className={styles.RecentEntries}

+								title={item.title}

+							>

 								<Image

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

 									className={styles.RecentImage}

-									width={150}

-									height={280}

+									width={190}

+									height={270}

 									alt="Drama"

 									priority

 								/>

diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css
index 47929ed..c7877da 100644
--- a/src/app/anime/recent/recent.module.css
+++ b/src/app/anime/recent/recent.module.css
@@ -5,10 +5,9 @@
 

 .RecentText p {

 	font-size: 28px;

-	margin: 5px;

+	margin: 0;

 	color: var(--soft-purple);

-	font-family: "Poppins";

-	font-weight: 500;

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

 }

 

 .RecentText span {

@@ -20,11 +19,6 @@
 	overflow-x: auto;

 }

 

-.Recent img {

-	width: auto;

-	height: 280px;

-}

-

 .RecentContainer:hover .RecentEntries {

 	opacity: 0.4;

 }

@@ -48,16 +42,16 @@
 	margin: 4px;

 	background-color: #1f1f1fbb;

 	padding: 0.5rem;

-	border-radius: 1rem;

+	border-radius: 0.5rem;

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

-

 }

 

 .RecentEntries p {

 	text-align: center;

 	margin: 5px auto;

-	width: 140px;

-	font-family: "Atkinson Hyperlegible";

+	width: auto;

+	max-width: 180px;

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

 	overflow: hidden;

 	white-space: nowrap;

 	text-overflow: ellipsis;

@@ -74,6 +68,5 @@
 }

 

 .RecentImage {

-	border-radius: 1rem;

-	aspect-ratio: auto;

-}
\ No newline at end of file
+	border-radius: 0.5rem;

+}

diff --git a/src/app/anime/search/components/fetchedInfo.js b/src/app/anime/search/components/fetchedInfo.js
index d88797b..359e745 100644
--- a/src/app/anime/search/components/fetchedInfo.js
+++ b/src/app/anime/search/components/fetchedInfo.js
@@ -32,7 +32,6 @@ export default async function fetchedInfo(data) {
 						<p

 							style={{

 								color: "white",

-								fontFamily: "Kanit",

 								fontSize: 18,

 							}}

 						>

diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index d1b4c53..7f0ef67 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -1,6 +1,6 @@
 .waitWhileLoading {

 	font-size: 18px;

-	font-family: "Atkinson Hyperlegible";

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

 	text-align: center;

 	color: white;

 }

@@ -18,7 +18,7 @@
 	outline: none;

 	border: none;

 	color: white;

-	font-family: "Atkinson Hyperlegible";

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

 }

 

 .inputContainer button a {

@@ -33,7 +33,7 @@
 	outline: none;

 	background: none;

 	width: 100%;

-	font-family: "Atkinson Hyperlegible", serif;

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

 	font-size: 16px;

 }

 

@@ -55,6 +55,7 @@
 .animeEntry {

 	display: flex;

 	overflow-x: auto;

+	margin-bottom: 1rem;

 }

 

 .animeEntry .anime {

@@ -78,7 +79,6 @@
 .animeEntry::-webkit-scrollbar-thumb {

 	background-color: rgba(196, 196, 196, 0.692);

 	border-radius: 5px;

-

 }

 

 .anime {

@@ -86,17 +86,16 @@
 	justify-content: space-between;

 	align-items: center;

 	padding: 5px;

-	margin: 10px 10px 0px 0px;

+	margin: 0 10px 0 0;

 	border-radius: 0.5rem;

 	transition: opacity 200ms ease-in, background-color 200ms linear;

 	background-color: #242424d0;

-

 }

 

 .anime p {

 	color: white;

 	width: 20dvw;

-	font-family: "Atkinson Hyperlegible", serif;

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

 	font-size: 18px;

 }

 

@@ -112,4 +111,4 @@
 	.anime p {

 		width: 50dvw;

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx
index c5aadd9..ab5d3af 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -20,12 +20,12 @@ export default async function Trending() {
 							href={`/anime/${item.id}`}

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

 						>

-							<div className={styles.trendingEntries}>

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

 								<Image

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

 									className={styles.trendingImage}

-									width={150}

-									height={280}

+									width={190}

+									height={270}

 									alt="Drama"

 									priority

 								/>

diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
index 1ce9b45..913697c 100644
--- a/src/app/anime/top-airing/trending.module.css
+++ b/src/app/anime/top-airing/trending.module.css
@@ -5,10 +5,9 @@
 

 .TrendingText p {

 	font-size: 28px;

-	margin: 5px;

+	margin: 0px;

 	color: var(--soft-purple);

-	font-family: "Poppins";

-	font-weight: 500;

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

 }

 

 .TrendingText span {

@@ -20,11 +19,6 @@
 	overflow-x: auto;

 }

 

-.trending img {

-	width: auto;

-	height: 280px;

-}

-

 .TrendingContainer:hover .trendingEntries {

 	opacity: 0.5;

 }

@@ -49,15 +43,16 @@
 	transition: transform 400ms ease;

 	background-color: #1f1f1fbb;

 	padding: 0.5rem;

-	border-radius: 1rem;

+	border-radius: 0.5rem;

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

 }

 

 .trendingEntries p {

 	text-align: center;

 	margin: 5px auto;

-	width: 140px;

-	font-family: "Atkinson Hyperlegible";

+	width: auto;

+	max-width: 180px;

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

 	overflow: hidden;

 	white-space: nowrap;

 	text-overflow: ellipsis;

@@ -73,6 +68,5 @@
 }

 

 .trendingImage {

-	border-radius: 1rem;

-	aspect-ratio: auto;

-}
\ No newline at end of file
+	border-radius: 0.5rem;

+}

diff --git a/src/app/globals.css b/src/app/globals.css
index a30325c..db28734 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,15 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lexend+Deca&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

+@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lexend+Deca&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

 

 :root {

-	--neon-green: #45FFCA;

-	--neon-yellow: #FEFFAC;

-	--light-green: #DCFFB7;

-	--pastel-red: #FF6868;

-	--soft-purple: #BEADFA;

-	--softer-purple: #D0BFFF;

+	--neon-green: #45ffca;

+	--neon-yellow: #feffac;

+	--light-green: #dcffb7;

+	--pastel-red: #ff6868;

+	--soft-purple: #beadfa;

+	--softer-purple: #d0bfff;

 }

 

-

 body {

 	margin: 0;

 	padding: 0;

@@ -18,4 +17,4 @@ body {
 

 body::-webkit-scrollbar {

 	width: 0;

-}
\ No newline at end of file
+}

diff --git a/src/app/globals.module.css b/src/app/globals.module.css
index 73483ea..d6a5c52 100644
--- a/src/app/globals.module.css
+++ b/src/app/globals.module.css
@@ -15,4 +15,4 @@
 	font-family: "Lato";

 	border: 0;

 	outline: 0;

-}
\ No newline at end of file
+}

diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx
index 335b45a..1b93313 100644
--- a/src/app/kdrama/components/popular.jsx
+++ b/src/app/kdrama/components/popular.jsx
@@ -19,11 +19,11 @@ export default async function PopularDramas() {
 							key={index}

 							style={{ textDecoration: "none" }}

 						>

-							<div className={styles.AnimeEntry}>

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

 								<Image

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

-									width={150}

-									height={230}

+									width={190}

+									height={270}

 									alt="Drama Poster"

 								/>

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

diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx
index e4cdb69..b53009e 100644
--- a/src/app/kdrama/components/recent.jsx
+++ b/src/app/kdrama/components/recent.jsx
@@ -18,11 +18,11 @@ export default async function RecentDramas() {
 							key={index}

 							style={{ textDecoration: "none" }}

 						>

-							<div className={styles.AnimeEntry}>

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

 								<Image

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

-									width={160}

-									height={240}

+									width={190}

+									height={270}

 									alt="Drama Poster"

 								/>

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

diff --git a/src/app/kdrama/components/search.jsx b/src/app/kdrama/components/search.jsx
index dc641e1..f44e4bb 100644
--- a/src/app/kdrama/components/search.jsx
+++ b/src/app/kdrama/components/search.jsx
@@ -52,8 +52,8 @@ export default function DramaSearch() {
 								<p>{item.title}</p>

 								<Image

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

-									width={120}

-									height={190}

+									width={140}

+									height={210}

 									alt="Drama Poster"

 								/>

 							</div>

diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index d046ce4..edac191 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -98,7 +98,7 @@
 

 .EpisodeButtons button:hover {

 	background-color: #1f1f1f;

-	transition: background-color 0.2s linear

+	transition: background-color 0.2s linear;

 }

 

 .VideoContainer {

@@ -135,5 +135,4 @@
 		font-size: 14px;

 		width: 80px;

 	}

-

-}
\ No newline at end of file
+}

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

 	max-width: 98%;

 	margin: 80px auto;

-}
\ No newline at end of file
+}

diff --git a/src/app/kdrama/styles/loading.module.css b/src/app/kdrama/styles/loading.module.css
index 011240e..825c247 100644
--- a/src/app/kdrama/styles/loading.module.css
+++ b/src/app/kdrama/styles/loading.module.css
@@ -10,12 +10,12 @@
 	height: 50px;

 	border-radius: 50%;

 	border: 8px solid;

-	border-color: #F4F4F4 #0000;

+	border-color: #f4f4f4 #0000;

 	animation: s1 1s infinite;

 }

 

 @keyframes s1 {

 	to {

-		transform: rotate(.5turn)

+		transform: rotate(0.5turn);

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css
index 2975659..4fc8f18 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -44,14 +44,13 @@
 	margin: 4px;

 	background-color: #1f1f1fbb;

 	padding: 0.5rem;

-	transition: opacity 200ms ease, transform 200ms ease, background-color 200ms ease;

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

+		background-color 200ms ease;

 	cursor: grab;

 	border-radius: 1rem;

 }

 

 .AnimeEntry img {

-	width: auto;

-	height: 280px;

 	border-radius: 1rem;

 }

 

@@ -59,9 +58,10 @@
 	text-align: center;

 	color: white;

 	font-family: "Lexend Deca", serif;

-	width: 140px;

+	width: auto;

+	max-width: 190px;

 	overflow: hidden;

 	white-space: nowrap;

 	text-overflow: ellipsis;

 	margin: 0.5rem 0rem 0rem 0rem;

-}
\ No newline at end of file
+}

diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css
index de17169..5b9c965 100644
--- a/src/app/kdrama/styles/search.module.css
+++ b/src/app/kdrama/styles/search.module.css
@@ -79,8 +79,6 @@
 }

 

 .SearchEntry img {

-	width: auto;

-	height: auto;

 	border-radius: 0.5rem;

 }

 

@@ -88,4 +86,4 @@
 	.Search {

 		max-width: 100%;

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 01080bf..a2b2555 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,6 +1,5 @@
 import styles from "./read.module.css";

 import Image from "next/image";

-import DownloadManga from "./download";

 

 export default async function Read({ params }) {

 	const chapterId = params.read;

@@ -20,14 +19,12 @@ export default async function Read({ params }) {
 	let images = [];

 	for (var i = 0; i < results.chapter.data.length; i++) {

 		var imgUrl = image_base_url + "/" + results.chapter.data[i];

-		// console.log(imgUrl);

 		images.push(imgUrl);

 	}

 

 	return (

 		<div className={styles.Main}>

 			<div className={styles.ImageContainer}>

-				<DownloadManga chapterId={chapterId} />

 				<p>Total pages: {images.length}</p>

 				{images &&

 					images.map((item, index) => (

diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index d2adf5c..2c7f964 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -1,5 +1,5 @@
 .Main {

-	margin: 80px auto;

+	margin: 65px auto;

 }

 

 .Image {

@@ -58,4 +58,4 @@
 	.Image {

 		width: 100%;

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx
index a6c8d75..6c419bf 100644
--- a/src/app/manga/[title]/[id]/buttons.jsx
+++ b/src/app/manga/[title]/[id]/buttons.jsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { storeLocal } from "../../history/storeData";

 

 export default function Buttons({ content: data }) {

+	let hasValidLinks = false;

 	function store_to_local(title, chapter, volume, image, id, id2) {

 		let data = {

 			title: title,

@@ -22,6 +23,7 @@ export default function Buttons({ content: data }) {
 			{data.chapters &&

 				data.chapters.map((item, index) => {

 					if (item.pages !== 0) {

+						hasValidLinks = true;

 						return (

 							<Link

 								key={index}

@@ -49,6 +51,9 @@ export default function Buttons({ content: data }) {
 						);

 					}

 				})}

+			{!hasValidLinks && (

+				<p className={styles.linksNotFound}>Links not found</p>

+			)}

 		</div>

 	);

 }

diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index bc22f49..1df4583 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -1,5 +1,5 @@
 .MangaInfoContainer {

-	margin: 68px auto;

+	margin: 60px auto;

 }

 

 .MangaHero {

@@ -15,7 +15,6 @@
 	padding: 5px;

 	background-color: #2c2c2c9c;

 	backdrop-filter: blur(5px);

-

 }

 

 .TitleContainer p {

@@ -114,7 +113,7 @@
 }

 

 .Character::-webkit-scrollbar-thumb {

-	background-color: #31363F;

+	background-color: #31363f;

 	border-radius: 5px;

 }

 

@@ -167,7 +166,7 @@
 }

 

 .ChapterContainer::-webkit-scrollbar-thumb {

-	background-color: #31363F;

+	background-color: #31363f;

 	border-radius: 5px;

 }

 

@@ -193,7 +192,7 @@
 

 .ChapterContainer button:hover {

 	background-color: #1f1f1f;

-	transition: background-color 50ms ease-in

+	transition: background-color 50ms ease-in;

 }

 

 .ChapterContainer button:focus {

@@ -203,6 +202,16 @@
 	transform: scale(0.9);

 }

 

+.linksNotFound {

+	font-family: "Atkinson Hyperlegible", serif;

+	color: white;

+	font-size: 18px;

+	display: flex;

+	justify-content: center;

+	align-items: center;

+	height: 85%;

+}

+

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

 	.MangaInfoContainer {

 		max-width: 100%;

@@ -214,11 +223,9 @@
 

 	.ChapterContainer button {

 		width: 120px;

-

 	}

 

 	.ChapterContainer button p {

 		font-size: 14px;

 	}

-

-}
\ No newline at end of file
+}

diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index 737fd92..bbfc99b 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -55,16 +55,15 @@
 .MangaStatus {

 	color: var(--soft-purple);

 	font-family: "Poppins", serif;

-

 }

 

 .MangaVolume {

-	color: #FFACAC;

+	color: #ffacac;

 	font-family: "Poppins", serif;

 }

 

 .MangaChapters {

-	color: #FFEBB4;

+	color: #ffebb4;

 	font-family: "Poppins", serif;

 }

 

@@ -72,4 +71,4 @@
 	.Main {

 		max-width: 100%;

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/manga/history/continueWatching/cw.module.css b/src/app/manga/history/continueWatching/cw.module.css
index 7d7c199..29d0dc9 100644
--- a/src/app/manga/history/continueWatching/cw.module.css
+++ b/src/app/manga/history/continueWatching/cw.module.css
@@ -74,4 +74,4 @@
 	.animeEntry img {

 		width: 35%;

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/manga/loading.module.css b/src/app/manga/loading.module.css
index 18b1cf0..d52e913 100644
--- a/src/app/manga/loading.module.css
+++ b/src/app/manga/loading.module.css
@@ -11,12 +11,12 @@
 	height: 50px;

 	border-radius: 50%;

 	border: 8px solid;

-	border-color: #F4F4F4 #0000;

+	border-color: #f4f4f4 #0000;

 	animation: s1 1s infinite;

 }

 

 @keyframes s1 {

 	to {

-		transform: rotate(.5turn)

+		transform: rotate(0.5turn);

 	}

-}
\ No newline at end of file
+}

diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css
index 3dc253b..3763d7d 100644
--- a/src/app/manga/manga.module.css
+++ b/src/app/manga/manga.module.css
@@ -38,7 +38,6 @@
 	cursor: pointer;
 }
 
-
 .SearchBar input {
 	background: none;
 	outline: none;
@@ -70,4 +69,4 @@
 	.SearchBar {
 		width: 60dvw;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 00cf807..d154ccd 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -6,24 +6,33 @@ export default function Home() {
 		<main className={styles.newbg}>
 			<div className={styles.content}>
 				<div className={styles.contentContainer}>
-					<div className={styles.manga}>
-						<Link href={"/manga"}>
-							<h2>Manga</h2>
-							<p>Your one stop for all your manga needs</p>
-						</Link>
-					</div>
-					<div className={styles.anime}>
-						<Link href={"/anime"}>
+					<Link
+						href={"/anime"}
+						title="Click here to get redirected to the anime webpage"
+					>
+						<div className={styles.anime}>
 							<h2>Anime</h2>
 							<p>Your one stop for all your anime needs</p>
-						</Link>
-					</div>
-					<div className={styles.kdrama}>
-						<Link href={"/kdrama"}>
+						</div>
+					</Link>
+					<Link
+						href={"/manga"}
+						title="Click here to get redirected to the manga webpage"
+					>
+						<div className={styles.manga}>
+							<h2>Manga</h2>
+							<p>Your one stop for all your manga needs</p>
+						</div>
+					</Link>
+					<Link
+						href={"/kdrama"}
+						title="Click here to get redirected to the kdrama webpage"
+					>
+						<div className={styles.kdrama}>
 							<h2>Kdrama</h2>
 							<p>Your one stop for all your kdrama needs</p>
-						</Link>
-					</div>
+						</div>
+					</Link>
 				</div>
 			</div>
 		</main>
diff --git a/src/app/page.module.css b/src/app/page.module.css
index f92b5d4..41ce2e9 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,6 +1,10 @@
 .newbg {
 	background: rgb(37, 37, 37);
-	background: radial-gradient(circle, rgb(41, 41, 41) 2%, rgb(12, 12, 12) 30%);
+	background: radial-gradient(
+		circle,
+		rgb(41, 41, 41) 2%,
+		rgb(12, 12, 12) 30%
+	);
 }
 
 .header {
@@ -33,11 +37,11 @@
 	font-size: 16px;
 }
 
-.header:hover>.right a {
+.header:hover > .right a {
 	opacity: 0.5;
 }
 
-.header:hover>.right a:hover {
+.header:hover > .right a:hover {
 	opacity: 1;
 	cursor: pointer;
 }
@@ -68,7 +72,9 @@
 }
 
 .contentContainer {
-	display: block;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .contentContainer a {
@@ -81,19 +87,28 @@
 .kdrama {
 	background-color: #121212e0;
 	color: white;
-	margin-top: 5px;
-	border-radius: 5px;
-	transition: opacity 400ms ease, transform 200ms ease;
+	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;
+	border-width: 0.1rem;
 }
 
-.content:hover>.contentContainer div {
+.content:hover > .contentContainer div {
 	opacity: 0.5;
 }
 
-.content:hover>.contentContainer div:hover {
+.content:hover > .contentContainer div:hover {
 	opacity: 1;
 	cursor: pointer;
-	transform: scale(0.96)
-}
\ No newline at end of file
+	transform: scale(0.96) rotateX(15deg) rotateY(8deg);
+}
+
+@media screen and (max-width: 1024px) {
+	.contentContainer {
+		display: block;
+	}
+}