aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--next.config.mjs8
-rw-r--r--package-lock.json100
-rw-r--r--package.json1
-rw-r--r--src/app/anime/video/loading.css346
-rw-r--r--src/app/anime/video/loading.jsx9
-rw-r--r--src/app/globals.css19
-rw-r--r--src/app/manga/[title]/[id]/info.module.css19
-rw-r--r--src/app/manga/[title]/[id]/page.jsx10
-rw-r--r--src/app/manga/[title]/title.module.css6
-rw-r--r--src/app/manga/manga.module.css36
-rw-r--r--src/app/page.jsx1
11 files changed, 175 insertions, 380 deletions
diff --git a/next.config.mjs b/next.config.mjs
index fc47e34..e1f50db 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -27,14 +27,6 @@ const nextConfig = {
protocol: "https",
hostname: "uploads.mangadex.org",
},
- {
- protocol: "https",
- hostname: "cros.shashstorm.in",
- },
- {
- protocol: "https",
- hostname: "image-proxy-manga.vercel.app",
- },
],
},
logging: {
diff --git a/package-lock.json b/package-lock.json
index 2acc5f5..a990722 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "dramalama-next",
"version": "0.1.0",
"dependencies": {
+ "@supabase/supabase-js": "^2.40.0",
"@vercel/analytics": "^1.2.2",
"@vercel/postgres": "^0.7.2",
"@vercel/speed-insights": "^1.0.10",
@@ -842,6 +843,73 @@
"integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
"dev": true
},
+ "node_modules/@supabase/functions-js": {
+ "version": "2.1.5",
+ "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.5.tgz",
+ "integrity": "sha512-BNzC5XhCzzCaggJ8s53DP+WeHHGT/NfTsx2wUSSGKR2/ikLFQTBCDzMvGz/PxYMqRko/LwncQtKXGOYp1PkPaw==",
+ "dependencies": {
+ "@supabase/node-fetch": "^2.6.14"
+ }
+ },
+ "node_modules/@supabase/gotrue-js": {
+ "version": "2.62.2",
+ "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.62.2.tgz",
+ "integrity": "sha512-AP6e6W9rQXFTEJ7sTTNYQrNf0LCcnt1hUW+RIgUK+Uh3jbWvcIST7wAlYyNZiMlS9+PYyymWQ+Ykz/rOYSO0+A==",
+ "dependencies": {
+ "@supabase/node-fetch": "^2.6.14"
+ }
+ },
+ "node_modules/@supabase/node-fetch": {
+ "version": "2.6.15",
+ "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+ "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+ "dependencies": {
+ "whatwg-url": "^5.0.0"
+ },
+ "engines": {
+ "node": "4.x || >=6.0.0"
+ }
+ },
+ "node_modules/@supabase/postgrest-js": {
+ "version": "1.9.2",
+ "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.9.2.tgz",
+ "integrity": "sha512-I6yHo8CC9cxhOo6DouDMy9uOfW7hjdsnCxZiaJuIVZm1dBGTFiQPgfMa9zXCamEWzNyWRjZvupAUuX+tqcl5Sw==",
+ "dependencies": {
+ "@supabase/node-fetch": "^2.6.14"
+ }
+ },
+ "node_modules/@supabase/realtime-js": {
+ "version": "2.9.3",
+ "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.9.3.tgz",
+ "integrity": "sha512-lAp50s2n3FhGJFq+wTSXLNIDPw5Y0Wxrgt44eM5nLSA3jZNUUP3Oq2Ccd1CbZdVntPCWLZvJaU//pAd2NE+QnQ==",
+ "dependencies": {
+ "@supabase/node-fetch": "^2.6.14",
+ "@types/phoenix": "^1.5.4",
+ "@types/ws": "^8.5.10",
+ "ws": "^8.14.2"
+ }
+ },
+ "node_modules/@supabase/storage-js": {
+ "version": "2.5.5",
+ "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.5.tgz",
+ "integrity": "sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w==",
+ "dependencies": {
+ "@supabase/node-fetch": "^2.6.14"
+ }
+ },
+ "node_modules/@supabase/supabase-js": {
+ "version": "2.40.0",
+ "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.40.0.tgz",
+ "integrity": "sha512-XF8OrsA13DYBL074sHH4M0NhXJCWhQ0R5JbVeVUytZ0coPMS9krRdzxl+0c4z4LLjqbm/Wdz0UYlTYM9MgnDag==",
+ "dependencies": {
+ "@supabase/functions-js": "2.1.5",
+ "@supabase/gotrue-js": "2.62.2",
+ "@supabase/node-fetch": "2.6.15",
+ "@supabase/postgrest-js": "1.9.2",
+ "@supabase/realtime-js": "2.9.3",
+ "@supabase/storage-js": "2.5.5"
+ }
+ },
"node_modules/@swc/helpers": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -874,6 +942,11 @@
"pg-types": "^2.2.0"
}
},
+ "node_modules/@types/phoenix": {
+ "version": "1.6.4",
+ "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.4.tgz",
+ "integrity": "sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA=="
+ },
"node_modules/@types/prop-types": {
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
@@ -894,6 +967,14 @@
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
},
+ "node_modules/@types/ws": {
+ "version": "8.5.10",
+ "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+ "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+ "dependencies": {
+ "@types/node": "*"
+ }
+ },
"node_modules/@typescript-eslint/parser": {
"version": "6.21.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
@@ -4684,6 +4765,11 @@
"node": ">=8.0"
}
},
+ "node_modules/tr46": {
+ "version": "0.0.3",
+ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+ },
"node_modules/ts-api-utils": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -4865,6 +4951,20 @@
"node": ">=6.14.2"
}
},
+ "node_modules/webidl-conversions": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+ },
+ "node_modules/whatwg-url": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+ "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+ "dependencies": {
+ "tr46": "~0.0.3",
+ "webidl-conversions": "^3.0.0"
+ }
+ },
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 1419650..bcece2d 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
+ "@supabase/supabase-js": "^2.40.0",
"@vercel/analytics": "^1.2.2",
"@vercel/postgres": "^0.7.2",
"@vercel/speed-insights": "^1.0.10",
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-02 16:27:08 +0000