aboutsummaryrefslogtreecommitdiff
path: root/src/app/anime
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/anime')
-rw-r--r--src/app/anime/[id]/loading.css346
-rw-r--r--src/app/anime/[id]/loading.jsx8
-rw-r--r--src/app/anime/[id]/loading.module.css12
-rw-r--r--src/app/anime/recent/page.jsx9
-rw-r--r--src/app/anime/recent/recent.module.css15
-rw-r--r--src/app/anime/top-airing/page.jsx10
-rw-r--r--src/app/anime/top-airing/trending.css0
-rw-r--r--src/app/anime/top-airing/trending.module.css15
8 files changed, 63 insertions, 352 deletions
diff --git a/src/app/anime/[id]/loading.css b/src/app/anime/[id]/loading.css
deleted file mode 100644
index aa3a519..0000000
--- a/src/app/anime/[id]/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/[id]/loading.jsx b/src/app/anime/[id]/loading.jsx
index dfa397c..b5670da 100644
--- a/src/app/anime/[id]/loading.jsx
+++ b/src/app/anime/[id]/loading.jsx
@@ -1,9 +1,11 @@
-import "./loading.css";
+import styles from "./loading.module.css";
export default function Loading() {
return (
- <div className="loadingContainer">
- <p className="text-flicker-in-glow">Loading</p>
+ <div className={styles.loadingContainer}>
+ <p className={styles.loadingText}>
+ Please wait while we load all the data for you.
+ </p>
</div>
);
}
diff --git a/src/app/anime/[id]/loading.module.css b/src/app/anime/[id]/loading.module.css
new file mode 100644
index 0000000..c95784d
--- /dev/null
+++ b/src/app/anime/[id]/loading.module.css
@@ -0,0 +1,12 @@
+.loadingContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 90dvh;
+}
+
+.loadingText {
+ color: white;
+ font-family: "Lato";
+ font-size: 24px;
+} \ No newline at end of file
diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index 779f0d4..ddfbc3f 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -1,13 +1,20 @@
import "./recent.css";
import Image from "next/image";
import Link from "next/link";
+import styles from "./recent.module.css";
+import { MdRecentActors } from "react-icons/md";
export default async function Releases() {
const data = await test();
return (
<div className="trendingContainer">
- <p className="trendingText">Recent Releases</p>
+ <div className={styles.RecentText}>
+ <p>Recent Releases</p>
+ <span>
+ <MdRecentActors size={26} color="aqua" />
+ </span>
+ </div>
<div className="trending">
{data &&
diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css
new file mode 100644
index 0000000..5756ccb
--- /dev/null
+++ b/src/app/anime/recent/recent.module.css
@@ -0,0 +1,15 @@
+.RecentText {
+ color: #FFB996;
+ display: flex;
+ align-items: center;
+}
+
+.RecentText p {
+ font-size: 26px;
+ margin: 5px;
+ font-family: "Quicksand";
+}
+
+.RecentText span {
+ margin-top: 6px;
+} \ 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 5536870..3d26d88 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -1,13 +1,19 @@
-import "./trending.css";
+import styles from "./trending.module.css";
import Image from "next/image";
import Link from "next/link";
+import { HiTrendingUp } from "react-icons/hi";
export default async function Trending() {
const data = await test();
return (
<div className="trendingContainer">
- <p className="trendingText">Trending</p>
+ <div className={styles.TrendingText}>
+ <p>Trending</p>
+ <span>
+ <HiTrendingUp size={26} color="aqua" />
+ </span>
+ </div>
<div className="trending">
{data &&
diff --git a/src/app/anime/top-airing/trending.css b/src/app/anime/top-airing/trending.css
deleted file mode 100644
index e69de29..0000000
--- a/src/app/anime/top-airing/trending.css
+++ /dev/null
diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
new file mode 100644
index 0000000..d03bab3
--- /dev/null
+++ b/src/app/anime/top-airing/trending.module.css
@@ -0,0 +1,15 @@
+.TrendingText {
+ color: #FFB996;
+ display: flex;
+ align-items: center;
+}
+
+.TrendingText p {
+ font-size: 26px;
+ margin: 5px;
+ font-family: "Quicksand";
+}
+
+.TrendingText span {
+ margin-top: 6px;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-28 06:02:49 +0000