fixes: minor css fixes, added loading indicators, added error pages etc etc

8 files changed, 74 insertions, 372 deletions

diff --git a/src/app/anime/video/loading.css b/src/app/anime/video/loading.css
deleted file mode 100644
index aa3a519..0000000
--- a/src/app/anime/video/loading.css
+++ /dev/null
@@ -1,346 +0,0 @@
-.loadingContainer {
-	color: white;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 80dvh;
-}
-
-
-.text-flicker-in-glow {
-	-webkit-animation: text-flicker-in-glow 4s linear both;
-	animation: text-flicker-in-glow 4s linear both;
-	font-size: 36px;
-	font-family: "Kanit";
-}
-
-/* ----------------------------------------------
- * Generated by Animista on 2024-3-21 9:58:16
- * Licensed under FreeBSD License.
- * See http://animista.net/license for more info. 
- * w: http://animista.net, t: @cssanimista
- * ---------------------------------------------- */
-
-/**
- * ----------------------------------------
- * animation text-flicker-in-glow
- * ----------------------------------------
- */
-
-@-webkit-keyframes text-flicker-in-glow {
-	0% {
-		opacity: 0;
-	}
-
-	10% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	10.1% {
-		opacity: 1;
-		text-shadow: none;
-	}
-
-	10.2% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
-	}
-
-	20.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.5% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	50% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	100% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-}
-
-@keyframes text-flicker-in-glow {
-	0% {
-		opacity: 0;
-	}
-
-	10% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	10.1% {
-		opacity: 1;
-		text-shadow: none;
-	}
-
-	10.2% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
-	}
-
-	20.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.5% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	50% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	100% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-}
-
-@media (prefers-color-scheme: light) {
-	.loadingContainer {
-		color: black;
-	}
-}
\ No newline at end of file
diff --git a/src/app/anime/video/loading.jsx b/src/app/anime/video/loading.jsx
deleted file mode 100644
index dfa397c..0000000
--- a/src/app/anime/video/loading.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import "./loading.css";
-
-export default function Loading() {
-	return (
-		<div className="loadingContainer">
-			<p className="text-flicker-in-glow">Loading</p>
-		</div>
-	);
-}
diff --git a/src/app/globals.css b/src/app/globals.css
index a76fc50..c0273da 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,6 +48,25 @@ body::-webkit-scrollbar {
 	margin-left: 10px;
 }
 
+.ErrorContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	height: 90dvh;
+	color: white;
+	font-family: "Kanit";
+	font-size: 20px;
+}
+
+.ErrorContainer button {
+	border-radius: 5px;
+	padding: 3px;
+	font-family: "Lato";
+	border: 0;
+	outline: 0;
+}
+
 @media (prefers-color-scheme: dark) {
 	body {
 		background-color: black;
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 638cfd1..686374a 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -20,7 +20,6 @@
 	justify-content: space-between;
 	align-items: center;
 	margin-top: 10px;
-	/* background-color: #3a3a3ac2; */
 }
 
 .TitleContainer p {
@@ -30,6 +29,7 @@
 
 .TitleContainer img {
 	border-radius: 10px;
+	margin-left: 5px;
 }
 
 .MangaDescription {
@@ -89,7 +89,7 @@
 
 /* Chapters Buttons */
 .ChapterContainer {
-	width: 95%;
+	width: 100%;
 	margin: 20px auto;
 	text-align: center;
 	height: 400px;
@@ -119,10 +119,9 @@
 	border: none;
 	outline: none;
 	font-family: "Lato";
-	background-color: #41C9E2;
+	background-color: #777777e3;
 	cursor: pointer;
 	transition: transform 0.2s linear;
-
 }
 
 .ChapterContainer button:hover {
@@ -132,5 +131,17 @@
 .ChapterContainer button:focus {
 	opacity: 0.6;
 	transition: transform 0.2s linear;
+	background-color: var(--pastel-red);
 	transform: scale(0.9);
+}
+
+@media screen and (max-width: 768px) {
+	.MangaInfoContainer {
+		max-width: 100%;
+	}
+
+	.TitleContainer p {
+		font-size: 28px;
+	}
+
 }
\ No newline at end of file
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 1b9b631..4166568 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -1,11 +1,16 @@
 import styles from "./info.module.css";
 import Image from "next/image";
 import Buttons from "./buttons";
+import { redirect } from "next/navigation";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;
 	const data = await getMangaInfo(id);
 
+	if (data.message) {
+		redirect("/404");
+	}
+
 	return (
 		<div className={styles.MangaInfoContainer}>
 			{data && (
@@ -63,7 +68,10 @@ export default async function MangaInfo({ params }) {
 									<span
 										key={index}
 										className={styles.MangaGenre}
-										style={{ color: data.color, margin: 5 }}
+										style={{
+											color: data.color,
+											margin: 5,
+										}}
 									>
 										{item}
 									</span>
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index eef08ba..1369856 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -58,4 +58,10 @@
 
 .MangaChapters {
 	color: #FFEBB4
+}
+
+@media screen and (max-width: 768px) {
+	.Main {
+		max-width: 100%;
+	}
 }
\ No newline at end of file
diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css
index 7e4a5ba..87c9563 100644
--- a/src/app/manga/manga.module.css
+++ b/src/app/manga/manga.module.css
@@ -76,18 +76,6 @@
 	}
 }
 
-@media screen and (max-width: 768px) {
-
-	.HorizontalImageContainer img {
-		width: 95%;
-		height: auto;
-	}
-
-	.VerticalImageContainer img {
-		width: 46.5%;
-		height: 300px;
-	}
-}
 
 .SearchBar {
 	display: flex;
@@ -110,6 +98,30 @@
 	font-size: 16px;
 }
 
+.LoadingContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 90dvh;
+	color: white;
+	font-family: "Kanit";
+	font-size: 18px;
+}
+
+@media screen and (max-width: 768px) {
+
+	.HorizontalImageContainer img {
+		width: 95%;
+		height: auto;
+	}
+
+	.VerticalImageContainer img {
+		width: 46.5%;
+		height: 300px;
+	}
+}
+
+
 @media screen and (max-width: 425px) {
 
 	.Hero {
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 31391ad..d77c55e 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -11,6 +11,7 @@ export default function Home() {
 					width={300}
 					height={300}
 					alt="Logo"
+					priority
 				></Image>
 				<p>
 					Welcome to dramalama. An online service where you can watch