UI changes, Logic change and complete re-write for anime page

5 files changed, 283 insertions, 0 deletions

diff --git a/src/app/anime/styles/anime.module.css b/src/app/anime/styles/anime.module.css
new file mode 100644
index 0000000..e5d402a
--- /dev/null
+++ b/src/app/anime/styles/anime.module.css
@@ -0,0 +1,4 @@
+.Main {
+	max-width: 99%;
+	margin: 65px auto;
+}
\ No newline at end of file
diff --git a/src/app/anime/styles/buttons.module.css b/src/app/anime/styles/buttons.module.css
new file mode 100644
index 0000000..d092a7f
--- /dev/null
+++ b/src/app/anime/styles/buttons.module.css
@@ -0,0 +1,87 @@
+.animeButtonContainer {
+	margin-top: 1rem;
+}
+
+.dramaButton {
+	background-color: #1f1f1fd2;
+	outline: none;
+	border: none;
+	color: white;
+	font-family: "Atkinson Hyperlegible", serif;
+	width: 50px;
+	padding: 0.5rem;
+	margin: 0 0.2rem 0.2rem 0;
+	border-radius: 0.5rem;
+	cursor: pointer;
+	transition: background-color 200ms ease, scale 200ms ease;
+}
+
+.dramaButton:hover {
+	background-color: #121212;
+	scale: 0.95;
+}
+
+.dramaButton:focus {
+	background-color: var(--soft-purple);
+	scale: 0.95;
+}
+
+.Main {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	text-align: center;
+}
+
+.SelectClass {
+	text-align: center;
+	outline: none;
+	border: none;
+	padding: 0.4rem;
+	font-family: "Lexend Deca", serif;
+	background-color: #1f1f1fd2;
+	color: white;
+	border-radius: 0.5rem;
+}
+
+.SelectClass::-webkit-scrollbar {
+	width: 0;
+}
+
+/* Video Player */
+
+.videoPopUp {
+	height: 100dvh;
+	width: 100dvw;
+	background-color: #141414ee;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	z-index: 1;
+	overflow-y: auto;
+}
+
+.closeButton {
+	font-family: "Lexend Deca", serif;
+	font-size: 16px;
+	background-color: var(--pastel-red);
+	padding: 0.5rem 1.5rem;
+	border: 0;
+	outline: 0;
+	border-radius: 0.5rem;
+	cursor: pointer;
+	margin: 5px;
+}
+
+.video {
+	width: 60vw;
+}
+
+.VideoPlayer {
+	width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/anime/styles/info.module.css b/src/app/anime/styles/info.module.css
new file mode 100644
index 0000000..4e65bdd
--- /dev/null
+++ b/src/app/anime/styles/info.module.css
@@ -0,0 +1,55 @@
+.main {
+	width: 50%;
+	margin: 60px auto;
+	color: white;
+}
+
+.AnimeHeroSection {
+	display: flex;
+	align-items: center;
+}
+
+.AnimeHeroSection img {
+	padding: 0.5rem 0.7rem 0rem 0;
+}
+
+.animeDescription {
+	max-height: 100px;
+	overflow: auto;
+}
+
+.animeDescription::-webkit-scrollbar {
+	width: 4px;
+}
+
+.animeDescription::-webkit-scrollbar-thumb {
+	background-color: gray;
+	border-radius: 1rem;
+}
+
+.AnimeHeroSection p {
+	margin: 0;
+}
+
+.animeTitle {
+	font-size: 28px;
+	color: var(--neon-green);
+}
+
+@media screen and (max-width: 1024px) {
+	.main {
+		width: 100%;
+	}
+
+	.AnimeHeroSection {
+		font-size: 14px;
+	}
+
+	.animeTitle {
+		font-size: 24px;
+	}
+
+	.AnimeHeroSection img {
+		padding: 0.4rem 0.4rem 0 0;
+	}
+}
\ No newline at end of file
diff --git a/src/app/anime/styles/pop_recent_top.module.css b/src/app/anime/styles/pop_recent_top.module.css
new file mode 100644
index 0000000..0bfe682
--- /dev/null
+++ b/src/app/anime/styles/pop_recent_top.module.css
@@ -0,0 +1,60 @@
+.AnimeHeaderText {
+	color: white;
+	margin: 0.4rem 0 0 0;
+}
+
+.AnimeContainer {
+	margin: 0.2rem 0 0 0;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	grid-gap: 0.7rem;
+}
+
+.AnimeEntry {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	text-align: center;
+	padding: 0.8rem;
+	border-radius: 0.5rem;
+	background-color: #1f1f1f;
+}
+
+.AnimeEntry img {
+	border-radius: 0.5rem;
+}
+
+.AnimeEntry p {
+	margin: 0.2rem 0 -0.4rem 0;
+	max-width: 160px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.EpisodeText {
+	color: var(--neon-yellow);
+	font-size: small;
+	padding-top: 0.2rem;
+}
+.AnimeContainer::-webkit-scrollbar {
+	height: 0.2rem;
+}
+
+.AnimeContainer::-webkit-scrollbar-track {
+	background-color: var(--soft-purple);
+}
+
+.AnimeContainer::-webkit-scrollbar-thumb {
+	background-color: var(--neon-yellow);
+	border-radius: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+	.AnimeContainer {
+		display: flex;
+		overflow: auto;
+		align-items: center;
+	}
+}
\ No newline at end of file
diff --git a/src/app/anime/styles/search.module.css b/src/app/anime/styles/search.module.css
new file mode 100644
index 0000000..7c7957f
--- /dev/null
+++ b/src/app/anime/styles/search.module.css
@@ -0,0 +1,77 @@
+.SearchBarContainer {
+	padding: 1rem 0 0.8rem 0;
+	width: 40%;
+}
+
+.SearchInputContainer {
+	display: flex;
+	align-items: center;
+	background-color: #121212;
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+}
+
+.SearchInputContainer input {
+	background-color: transparent;
+	border: none;
+	outline: none;
+	color: white;
+	margin-left: 0.5rem;
+	font-size: 18px;
+	font-family: "Atkinson Hyperlegible", serif;
+	width: 100%;
+}
+
+/* Search Results */
+
+.SearchResultsContainer {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+	grid-gap: 0.7rem;
+}
+
+.AnimeEntry {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background-color: #252525be;
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+}
+
+.AnimeEntry p {
+	font-size: 18px;
+}
+
+.AnimeEntry img {
+	border-radius: 0.5rem;
+}
+
+.SearchResultsContainer::-webkit-scrollbar {
+	height: 0.2rem;
+}
+
+.SearchResultsContainer::-webkit-scrollbar-track {
+	background-color: var(--softer-purple);
+}
+
+.SearchResultsContainer::-webkit-scrollbar-thumb {
+	background-color: var(--light-green);
+	border-radius: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+	.SearchBarContainer {
+		width: 100%;
+	}
+
+	.SearchResultsContainer {
+		display: flex;
+		align-items: center;
+		overflow: auto;
+	}
+
+	.AnimeEntry p {
+		width: 50vw;
+	}
+}
\ No newline at end of file