aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.github/workflows/nextjs.yaml26
-rw-r--r--src/app/anime/[id]/info.css65
-rw-r--r--src/app/anime/[id]/page.jsx24
-rw-r--r--src/app/manga/[title]/[id]/[read]/currentReading.jsx27
-rw-r--r--src/app/manga/[title]/[id]/[read]/page.jsx2
-rw-r--r--src/app/manga/[title]/[id]/[read]/read.module.css7
-rw-r--r--src/app/manga/[title]/[id]/buttons.jsx15
-rw-r--r--src/app/manga/[title]/[id]/info.module.css2
-rw-r--r--src/app/manga/[title]/[id]/page.jsx1
9 files changed, 155 insertions, 14 deletions
diff --git a/.github/workflows/nextjs.yaml b/.github/workflows/nextjs.yaml
new file mode 100644
index 0000000..488bcc8
--- /dev/null
+++ b/.github/workflows/nextjs.yaml
@@ -0,0 +1,26 @@
+name: Build and Deploy Next.js
+
+on:
+ push:
+ branches:
+ - main
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v2
+
+ - name: Install dependencies
+ run: npm install
+
+ - name: Build
+ run: npm run build
+
+ - name: Deploy
+ uses: JamesIves/[email protected]
+ with:
+ branch: gh-pages
+ folder: .next
+ token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/app/anime/[id]/info.css b/src/app/anime/[id]/info.css
index 2b070d0..08194d0 100644
--- a/src/app/anime/[id]/info.css
+++ b/src/app/anime/[id]/info.css
@@ -19,7 +19,8 @@
.titleContainer p {
color: var(--neon-green);
width: 60%;
- font-family: "Kanit";
+ font-family: "Quicksand";
+ font-weight: 900;
font-size: 24px;
}
@@ -29,7 +30,7 @@
.animeDescription {
color: #ffffff81;
- font-family: "Lato";
+ font-family: "Atkinson Hyperlegible";
font-size: 16px;
max-height: 120px;
margin: 20px auto;
@@ -44,20 +45,36 @@
overflow-y: auto;
}
+.buttonContainer button:focus {
+ opacity: 0.7;
+ transition: transform 0.2s linear;
+ background-color: var(--pastel-red);
+ transform: scale(0.9);
+}
+
+.buttonContainer::-webkit-scrollbar {
+ width: 5px;
+}
+
+.buttonContainer::-webkit-scrollbar-thumb {
+ background-color: var(--soft-purple);
+ border-radius: 5px;
+}
+
.dramaButton {
padding: 8px;
- font-family: "Atkinson Hyperlegible";
- font-size: 18px;
+ font-family: "Quicksand";
+ font-size: 16px;
margin: 5px;
- width: 50px;
+ width: 130px;
border-radius: 5px;
border: none;
- background-color: var(--light-green);
+ background-color: #f8f6e3dc;
cursor: pointer;
}
.dramaButton:hover {
- background-color: var(--soft-purple);
+ background-color: #97E7E1;
}
.infoPageContainer {
@@ -71,6 +88,29 @@
color: white;
}
+.animeDetails {
+ text-align: center;
+ color: white;
+ font-family: "Quicksand";
+}
+
+.genreEntries {
+ margin: 3px;
+ padding: 4px;
+ border-radius: 5px;
+ color: var(--neon-green);
+ background-color: #303030;
+ cursor: pointer;
+}
+
+.animeType span {
+ color: var(--light-green);
+}
+
+.animeRelease span {
+ color: var(--soft-purple)
+}
+
@media (prefers-color-scheme: light) {
.animeDescription {
color: black;
@@ -80,4 +120,15 @@
color: black;
}
+}
+
+@media screen and (max-width: 768px) {
+ .dramaButton {
+ font-size: 14px;
+ width: 100px;
+ }
+
+ .animeDetails {
+ font-size: 14px;
+ }
} \ No newline at end of file
diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index 3e2b1f0..751acef 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -16,8 +16,8 @@ export default async function AnimeInfo({ params }) {
<p>{info.title}</p>
<Image
src={info.image}
- width={140}
- height={190}
+ width={150}
+ height={200}
alt="Drama"
/>
</div>
@@ -25,11 +25,31 @@ export default async function AnimeInfo({ params }) {
</div>
)}
+ <div className="animeDetails">
+ <span>Genres: </span>
+ {info.genres &&
+ info.genres.map((item, index) => (
+ <span className="genreEntries" key={index}>
+ {item}
+ </span>
+ ))}
+ <p className="animeType">
+ Type: <span>{info.type}</span>
+ </p>
+ <p className="animeRelease">
+ Release year:{" "}
+ <span>
+ {info.releaseDate}, {info.status}
+ </span>
+ </p>
+ </div>
+
<div className="buttonContainer">
{info &&
info.episodes.map((item, index) => (
<Link href={`/anime/watch/${item.id}`} key={index}>
<button className="dramaButton">
+ <span>Episode </span>
{item.number}
</button>
</Link>
diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
new file mode 100644
index 0000000..c368f75
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
@@ -0,0 +1,27 @@
+"use client";
+import { useState, useEffect } from "react";
+import styles from "./read.module.css";
+
+export default function CurrentReading() {
+ const [chapter, setChapter] = useState(null);
+ const [volume, setVolume] = useState(null);
+
+ useEffect(() => {
+ setChapter(localStorage.getItem("chapter") || "");
+ setVolume(localStorage.getItem("volume") || "");
+ });
+
+ return CR(chapter, volume);
+}
+
+function CR(chapter, volume) {
+ return (
+ <div className={styles.CurrentReadingContainer}>
+ {chapter && volume && (
+ <p>
+ Vol {volume} Chapter {chapter}
+ </p>
+ )}
+ </div>
+ );
+}
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 7369ba0..e584ee2 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,6 +1,7 @@
import styles from "./read.module.css";
import Image from "next/image";
import DownloadManga from "./download";
+import CurrentReading from "./currentReading";
export default async function Read({ params }) {
const chapterId = params.read;
@@ -23,6 +24,7 @@ export default async function Read({ params }) {
return (
<div className={styles.Main}>
+ <CurrentReading />
<div className={styles.ImageContainer}>
<DownloadManga chapterId={chapterId} />
{images &&
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index d240d80..a95dcfe 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -49,6 +49,13 @@
background-color: var(--pastel-red);
}
+.CurrentReadingContainer {
+ text-align: center;
+ color: white;
+ font-family: "Quicksand";
+ font-size: 18px;
+}
+
@media screen and (max-width: 768px) {
.ImageContainer img {
width: 95%;
diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx
index eec62b9..19da1d3 100644
--- a/src/app/manga/[title]/[id]/buttons.jsx
+++ b/src/app/manga/[title]/[id]/buttons.jsx
@@ -1,7 +1,9 @@
+"use client";
+
import styles from "./info.module.css";
import Link from "next/link";
-export default async function Buttons({ content: data }) {
+export default function Buttons({ content: data }) {
return (
<div className={styles.ChapterContainer}>
{data.chapters &&
@@ -12,10 +14,10 @@ export default async function Buttons({ content: data }) {
key={index}
href={{
pathname: `/manga/info/read/${item.id}`,
- query: {
- name: item.title,
- },
}}
+ onClick={() =>
+ test(item.chapterNumber, item.volumeNumber)
+ }
>
<button key={index}>
<div>
@@ -30,3 +32,8 @@ export default async function Buttons({ content: data }) {
</div>
);
}
+
+function test(chapter, volume) {
+ localStorage.setItem("chapter", chapter);
+ localStorage.setItem("volume", volume);
+}
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 6108766..5bb13fe 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -133,7 +133,7 @@
}
.ChapterContainer button:focus {
- opacity: 0.6;
+ opacity: 0.7;
transition: transform 0.2s linear;
background-color: var(--pastel-red);
transform: scale(0.9);
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 3038b3f..dc4c682 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -3,6 +3,7 @@ import Image from "next/image";
import Buttons from "./buttons";
import { redirect } from "next/navigation";
import { FaStar } from "react-icons/fa";
+import CurrentReading from "./[read]/currentReading";
export default async function MangaInfo({ params }) {
const id = params.id;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-24 04:46:22 +0000