diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/info/loading.css | 340 | ||||
| -rw-r--r-- | src/app/info/loading.jsx | 9 | ||||
| -rw-r--r-- | src/app/search/api/fetchInfo.js | 9 | ||||
| -rw-r--r-- | src/app/video/loading.css | 340 | ||||
| -rw-r--r-- | src/app/video/loading.jsx | 9 |
5 files changed, 707 insertions, 0 deletions
diff --git a/src/app/info/loading.css b/src/app/info/loading.css new file mode 100644 index 0000000..f73beca --- /dev/null +++ b/src/app/info/loading.css @@ -0,0 +1,340 @@ +.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); + } +}
\ No newline at end of file diff --git a/src/app/info/loading.jsx b/src/app/info/loading.jsx new file mode 100644 index 0000000..dfa397c --- /dev/null +++ b/src/app/info/loading.jsx @@ -0,0 +1,9 @@ +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/search/api/fetchInfo.js b/src/app/search/api/fetchInfo.js new file mode 100644 index 0000000..6ac0e69 --- /dev/null +++ b/src/app/search/api/fetchInfo.js @@ -0,0 +1,9 @@ +"use server"; + +export default async function testFunction(title) { + const res = await fetch( + "https://dramalama-api.vercel.app/anime/gogoanime/" + title + ); + const data = await res.json(); + return data; +} diff --git a/src/app/video/loading.css b/src/app/video/loading.css new file mode 100644 index 0000000..f73beca --- /dev/null +++ b/src/app/video/loading.css @@ -0,0 +1,340 @@ +.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); + } +}
\ No newline at end of file diff --git a/src/app/video/loading.jsx b/src/app/video/loading.jsx new file mode 100644 index 0000000..dfa397c --- /dev/null +++ b/src/app/video/loading.jsx @@ -0,0 +1,9 @@ +import "./loading.css"; + +export default function Loading() { + return ( + <div className="loadingContainer"> + <p className="text-flicker-in-glow">Loading</p> + </div> + ); +} |