Compare commits
2 Commits
v2.0.0-rc.
...
df5f4d0563
| Author | SHA1 | Date | |
|---|---|---|---|
| df5f4d0563 | |||
| 194c0d80e7 |
16
.gitignore
vendored
16
.gitignore
vendored
@@ -1,11 +1,5 @@
|
|||||||
desktop/node_modules
|
node_modules
|
||||||
desktop/electron
|
electron
|
||||||
desktop/dist
|
dist
|
||||||
desktop/.env
|
.env
|
||||||
desktop/build
|
build
|
||||||
|
|
||||||
docker/node_modules
|
|
||||||
docker/electron
|
|
||||||
docker/dist
|
|
||||||
docker/.env
|
|
||||||
docker/build
|
|
||||||
|
|||||||
5
desktop/.gitignore
vendored
5
desktop/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
node_modules
|
|
||||||
electron
|
|
||||||
dist
|
|
||||||
.env
|
|
||||||
build
|
|
||||||
121
desktop/main.js
121
desktop/main.js
@@ -1,121 +0,0 @@
|
|||||||
const { app, BrowserWindow, ipcMain } = require('electron');
|
|
||||||
const { fork } = require('child_process');
|
|
||||||
const path = require('path');
|
|
||||||
const log = require('electron-log');
|
|
||||||
|
|
||||||
log.transports.file.level = 'info';
|
|
||||||
log.format = '[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}] {text}';
|
|
||||||
|
|
||||||
let win;
|
|
||||||
let backend;
|
|
||||||
const net = require('net');
|
|
||||||
|
|
||||||
function waitForServer(port, host = '127.0.0.1', timeout = 10000) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const start = Date.now();
|
|
||||||
|
|
||||||
const check = () => {
|
|
||||||
const socket = new net.Socket();
|
|
||||||
|
|
||||||
socket
|
|
||||||
.once('connect', () => {
|
|
||||||
socket.destroy();
|
|
||||||
resolve();
|
|
||||||
})
|
|
||||||
.once('error', () => {
|
|
||||||
socket.destroy();
|
|
||||||
if (Date.now() - start > timeout) {
|
|
||||||
reject(new Error('Backend timeout'));
|
|
||||||
} else {
|
|
||||||
setTimeout(check, 200);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.connect(port, host);
|
|
||||||
};
|
|
||||||
|
|
||||||
check();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function startBackend() {
|
|
||||||
backend = fork(path.join(__dirname, 'server.js'), [], {
|
|
||||||
stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
|
|
||||||
env: {
|
|
||||||
...process.env,
|
|
||||||
IS_PACKAGED: app.isPackaged ? 'true' : 'false'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
log.info('Starting backend process...');
|
|
||||||
|
|
||||||
backend.stdout.on('data', (data) => {
|
|
||||||
log.info(`[Backend]: ${data.toString().trim()}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
backend.stderr.on('data', (data) => {
|
|
||||||
log.error(`[Backend ERROR]: ${data.toString().trim()}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
backend.on('exit', (code) => {
|
|
||||||
log.warn(`Backend process exited with code: ${code}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createWindow() {
|
|
||||||
win = new BrowserWindow({
|
|
||||||
width: 1200,
|
|
||||||
height: 800,
|
|
||||||
frame: false,
|
|
||||||
titleBarStyle: "hidden",
|
|
||||||
webPreferences: {
|
|
||||||
preload: path.join(__dirname, "preload.js"),
|
|
||||||
nodeIntegration: false,
|
|
||||||
contextIsolation: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
win.setMenu(null);
|
|
||||||
|
|
||||||
win.loadURL('http://localhost:54322');
|
|
||||||
|
|
||||||
win.on('closed', () => {
|
|
||||||
win = null;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ipcMain.on("win:minimize", () => win.minimize());
|
|
||||||
ipcMain.on("win:maximize", () => {
|
|
||||||
if (win.isMaximized()) {
|
|
||||||
win.unmaximize();
|
|
||||||
} else {
|
|
||||||
win.maximize();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
ipcMain.on("win:close", () => win.close());
|
|
||||||
|
|
||||||
process.on('uncaughtException', (err) => {
|
|
||||||
log.error('Critical unhandled error in Main:', err);
|
|
||||||
});
|
|
||||||
|
|
||||||
app.whenReady().then(async () => {
|
|
||||||
log.info('--- Application Started ---');
|
|
||||||
console.log("Logs location:", log.transports.file.getFile().path);
|
|
||||||
startBackend();
|
|
||||||
await waitForServer(54322);
|
|
||||||
createWindow();
|
|
||||||
|
|
||||||
app.on('activate', () => {
|
|
||||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
app.on('window-all-closed', () => {
|
|
||||||
log.info('Closing all windows...');
|
|
||||||
if (backend) {
|
|
||||||
backend.kill();
|
|
||||||
log.info('Backend process terminated.');
|
|
||||||
}
|
|
||||||
if (process.platform !== 'darwin') {
|
|
||||||
app.quit();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,186 +0,0 @@
|
|||||||
import {queryAll, queryOne, run} from '../../shared/database';
|
|
||||||
import bcrypt from 'bcryptjs';
|
|
||||||
|
|
||||||
const USER_DB_NAME = 'userdata';
|
|
||||||
const SALT_ROUNDS = 10;
|
|
||||||
|
|
||||||
interface User {
|
|
||||||
id: number;
|
|
||||||
username: string;
|
|
||||||
profile_picture_url: string | null;
|
|
||||||
has_password: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function userExists(id: number): Promise<boolean> {
|
|
||||||
const sql = 'SELECT 1 FROM User WHERE id = ?';
|
|
||||||
const row = await queryOne(sql, [id], USER_DB_NAME);
|
|
||||||
return !!row;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createUser(username: string, profilePictureUrl?: string, password?: string): Promise<{ lastID: number }> {
|
|
||||||
let passwordHash = null;
|
|
||||||
|
|
||||||
if (password && password.trim()) {
|
|
||||||
passwordHash = await bcrypt.hash(password.trim(), SALT_ROUNDS);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sql = `
|
|
||||||
INSERT INTO User (username, profile_picture_url, password_hash)
|
|
||||||
VALUES (?, ?, ?)
|
|
||||||
`;
|
|
||||||
const params = [username, profilePictureUrl || null, passwordHash];
|
|
||||||
|
|
||||||
const result = await run(sql, params, USER_DB_NAME);
|
|
||||||
|
|
||||||
return { lastID: result.lastID };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateUser(userId: number, updates: any): Promise<any> {
|
|
||||||
const fields: string[] = [];
|
|
||||||
const values: (string | number | null)[] = [];
|
|
||||||
|
|
||||||
if (updates.username !== undefined) {
|
|
||||||
fields.push('username = ?');
|
|
||||||
values.push(updates.username);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (updates.profilePictureUrl !== undefined) {
|
|
||||||
fields.push('profile_picture_url = ?');
|
|
||||||
values.push(updates.profilePictureUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (updates.password !== undefined) {
|
|
||||||
if (updates.password === null || updates.password === '') {
|
|
||||||
// Eliminar contraseña
|
|
||||||
fields.push('password_hash = ?');
|
|
||||||
values.push(null);
|
|
||||||
} else {
|
|
||||||
// Actualizar contraseña
|
|
||||||
const hash = await bcrypt.hash(updates.password.trim(), SALT_ROUNDS);
|
|
||||||
fields.push('password_hash = ?');
|
|
||||||
values.push(hash);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fields.length === 0) {
|
|
||||||
return { changes: 0, lastID: userId };
|
|
||||||
}
|
|
||||||
|
|
||||||
const setClause = fields.join(', ');
|
|
||||||
const sql = `UPDATE User SET ${setClause} WHERE id = ?`;
|
|
||||||
values.push(userId);
|
|
||||||
|
|
||||||
return await run(sql, values, USER_DB_NAME);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteUser(userId: number): Promise<any> {
|
|
||||||
await run(
|
|
||||||
`DELETE FROM ListEntry WHERE user_id = ?`,
|
|
||||||
[userId],
|
|
||||||
USER_DB_NAME
|
|
||||||
);
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`DELETE FROM UserIntegration WHERE user_id = ?`,
|
|
||||||
[userId],
|
|
||||||
USER_DB_NAME
|
|
||||||
);
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`DELETE FROM favorites WHERE user_id = ?`,
|
|
||||||
[userId],
|
|
||||||
'favorites'
|
|
||||||
);
|
|
||||||
|
|
||||||
const result = await run(
|
|
||||||
`DELETE FROM User WHERE id = ?`,
|
|
||||||
[userId],
|
|
||||||
USER_DB_NAME
|
|
||||||
);
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAllUsers(): Promise<User[]> {
|
|
||||||
const sql = `
|
|
||||||
SELECT
|
|
||||||
id,
|
|
||||||
username,
|
|
||||||
profile_picture_url,
|
|
||||||
CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
|
|
||||||
FROM User
|
|
||||||
ORDER BY id
|
|
||||||
`;
|
|
||||||
|
|
||||||
const users = await queryAll(sql, [], USER_DB_NAME);
|
|
||||||
|
|
||||||
return users.map((user: any) => ({
|
|
||||||
id: user.id,
|
|
||||||
username: user.username,
|
|
||||||
profile_picture_url: user.profile_picture_url || null,
|
|
||||||
has_password: !!user.has_password
|
|
||||||
})) as User[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUserById(id: number): Promise<User | null> {
|
|
||||||
const sql = `
|
|
||||||
SELECT
|
|
||||||
id,
|
|
||||||
username,
|
|
||||||
profile_picture_url,
|
|
||||||
CASE WHEN password_hash IS NOT NULL THEN 1 ELSE 0 END as has_password
|
|
||||||
FROM User
|
|
||||||
WHERE id = ?
|
|
||||||
`;
|
|
||||||
|
|
||||||
const user = await queryOne(sql, [id], USER_DB_NAME);
|
|
||||||
|
|
||||||
if (!user) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: user.id,
|
|
||||||
username: user.username,
|
|
||||||
profile_picture_url: user.profile_picture_url || null,
|
|
||||||
has_password: !!user.has_password
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function verifyPassword(userId: number, password: string): Promise<boolean> {
|
|
||||||
const sql = 'SELECT password_hash FROM User WHERE id = ?';
|
|
||||||
const user = await queryOne(sql, [userId], USER_DB_NAME);
|
|
||||||
|
|
||||||
if (!user || !user.password_hash) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return await bcrypt.compare(password, user.password_hash);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAniListIntegration(userId: number) {
|
|
||||||
const sql = `
|
|
||||||
SELECT anilist_user_id, expires_at
|
|
||||||
FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = ?
|
|
||||||
`;
|
|
||||||
|
|
||||||
const row = await queryOne(sql, [userId, "AniList"], USER_DB_NAME);
|
|
||||||
|
|
||||||
if (!row) {
|
|
||||||
return { connected: false };
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
connected: true,
|
|
||||||
anilistUserId: row.anilist_user_id,
|
|
||||||
expiresAt: row.expires_at
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function removeAniListIntegration(userId: number) {
|
|
||||||
const sql = `
|
|
||||||
DELETE FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = ?
|
|
||||||
`;
|
|
||||||
|
|
||||||
return run(sql, [userId, "AniList"], USER_DB_NAME);
|
|
||||||
}
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
const Gitea_OWNER = "ItsSkaiya";
|
|
||||||
const Gitea_REPO = "WaifuBoard";
|
|
||||||
const CURRENT_VERSION = "v2.0.0-rc.1";
|
|
||||||
const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000;
|
|
||||||
|
|
||||||
let currentVersionDisplay;
|
|
||||||
let latestVersionDisplay;
|
|
||||||
let updateToast;
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
currentVersionDisplay = document.getElementById("currentVersionDisplay");
|
|
||||||
latestVersionDisplay = document.getElementById("latestVersionDisplay");
|
|
||||||
updateToast = document.getElementById("updateToast");
|
|
||||||
|
|
||||||
if (currentVersionDisplay) {
|
|
||||||
currentVersionDisplay.textContent = CURRENT_VERSION;
|
|
||||||
}
|
|
||||||
|
|
||||||
checkForUpdates();
|
|
||||||
|
|
||||||
setInterval(checkForUpdates, UPDATE_CHECK_INTERVAL);
|
|
||||||
});
|
|
||||||
|
|
||||||
function showToast(latestVersion) {
|
|
||||||
if (latestVersionDisplay && updateToast) {
|
|
||||||
latestVersionDisplay.textContent = latestVersion;
|
|
||||||
updateToast.classList.add("update-available");
|
|
||||||
updateToast.classList.remove("hidden");
|
|
||||||
} else {
|
|
||||||
console.error(
|
|
||||||
"Error: Cannot display toast because one or more DOM elements were not found.",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideToast() {
|
|
||||||
if (updateToast) {
|
|
||||||
updateToast.classList.add("hidden");
|
|
||||||
updateToast.classList.remove("update-available");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isVersionOutdated(versionA, versionB) {
|
|
||||||
const vA = versionA.replace(/^v/, "").split(".").map(Number);
|
|
||||||
const vB = versionB.replace(/^v/, "").split(".").map(Number);
|
|
||||||
|
|
||||||
for (let i = 0; i < Math.max(vA.length, vB.length); i++) {
|
|
||||||
const numA = vA[i] || 0;
|
|
||||||
const numB = vB[i] || 0;
|
|
||||||
|
|
||||||
if (numA < numB) return true;
|
|
||||||
if (numA > numB) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function checkForUpdates() {
|
|
||||||
console.log(`Checking for updates for ${Gitea_OWNER}/${Gitea_REPO}...`);
|
|
||||||
|
|
||||||
const apiUrl = `https://git.waifuboard.app/api/v1/repos/${Gitea_OWNER}/${Gitea_REPO}/releases/latest`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(apiUrl, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
Accept: "application/json",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
if (response.status === 404) {
|
|
||||||
console.info("No releases found for this repository.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw new Error(
|
|
||||||
`Gitea API error: ${response.status} ${response.statusText}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
const latestVersion = data.tag_name;
|
|
||||||
|
|
||||||
if (!latestVersion) {
|
|
||||||
console.warn("Release found but no tag_name present");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Latest Gitea Release: ${latestVersion}`);
|
|
||||||
|
|
||||||
if (isVersionOutdated(CURRENT_VERSION, latestVersion)) {
|
|
||||||
console.warn("Update available!");
|
|
||||||
showToast(latestVersion);
|
|
||||||
} else {
|
|
||||||
console.info("Package is up to date.");
|
|
||||||
hideToast();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch Gitea release:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
const path = require("path");
|
|
||||||
const fs = require("fs");
|
|
||||||
const { chromium } = require("playwright-core");
|
|
||||||
|
|
||||||
let browser;
|
|
||||||
let context;
|
|
||||||
const BLOCK_LIST = [
|
|
||||||
"google-analytics", "doubleclick", "facebook", "twitter",
|
|
||||||
"adsystem", "analytics", "tracker", "pixel", "quantserve", "newrelic"
|
|
||||||
];
|
|
||||||
|
|
||||||
function isPackaged() {
|
|
||||||
return process.env.IS_PACKAGED === "true";
|
|
||||||
}
|
|
||||||
|
|
||||||
function getChromiumPath() {
|
|
||||||
if (isPackaged()) {
|
|
||||||
return path.join(
|
|
||||||
process.resourcesPath,
|
|
||||||
"playwright",
|
|
||||||
"chromium",
|
|
||||||
"chrome-headless-shell-win64",
|
|
||||||
"chrome-headless-shell.exe"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return chromium.executablePath();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function initHeadless() {
|
|
||||||
if (browser) return;
|
|
||||||
|
|
||||||
const exePath = getChromiumPath();
|
|
||||||
|
|
||||||
if (!fs.existsSync(exePath)) {
|
|
||||||
throw new Error("Chromium not found: " + exePath);
|
|
||||||
}
|
|
||||||
|
|
||||||
browser = await chromium.launch({
|
|
||||||
headless: true,
|
|
||||||
executablePath: exePath,
|
|
||||||
args: [
|
|
||||||
"--no-sandbox",
|
|
||||||
"--disable-setuid-sandbox",
|
|
||||||
"--disable-dev-shm-usage",
|
|
||||||
"--disable-gpu",
|
|
||||||
"--disable-extensions",
|
|
||||||
"--disable-background-networking",
|
|
||||||
"--disable-sync",
|
|
||||||
"--disable-translate",
|
|
||||||
"--mute-audio",
|
|
||||||
"--no-first-run",
|
|
||||||
"--no-zygote",
|
|
||||||
]
|
|
||||||
});
|
|
||||||
context = await browser.newContext({
|
|
||||||
userAgent:
|
|
||||||
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/122.0.0.0 Safari/537.36"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function turboScroll(page) {
|
|
||||||
await page.evaluate(() => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
let last = 0;
|
|
||||||
let same = 0;
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
const h = document.body.scrollHeight;
|
|
||||||
window.scrollTo(0, h);
|
|
||||||
if (h === last) {
|
|
||||||
same++;
|
|
||||||
if (same >= 5) {
|
|
||||||
clearInterval(timer);
|
|
||||||
resolve();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
same = 0;
|
|
||||||
last = h;
|
|
||||||
}
|
|
||||||
}, 20);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function scrape(url, handler, options = {}) {
|
|
||||||
const {
|
|
||||||
waitUntil = "domcontentloaded",
|
|
||||||
waitSelector = null,
|
|
||||||
timeout = 10000,
|
|
||||||
scrollToBottom = false,
|
|
||||||
renderWaitTime = 0,
|
|
||||||
loadImages = true
|
|
||||||
} = options;
|
|
||||||
if (!browser) await initHeadless();
|
|
||||||
const page = await context.newPage();
|
|
||||||
let collectedRequests = [];
|
|
||||||
await page.route("**/*", (route) => {
|
|
||||||
const req = route.request();
|
|
||||||
const rUrl = req.url().toLowerCase();
|
|
||||||
const type = req.resourceType();
|
|
||||||
|
|
||||||
collectedRequests.push({
|
|
||||||
url: req.url(),
|
|
||||||
method: req.method(),
|
|
||||||
resourceType: type
|
|
||||||
});
|
|
||||||
|
|
||||||
if (type === "font" || type === "media" || type === "manifest")
|
|
||||||
return route.abort();
|
|
||||||
|
|
||||||
if (BLOCK_LIST.some(k => rUrl.includes(k)))
|
|
||||||
return route.abort();
|
|
||||||
|
|
||||||
if (!loadImages && (
|
|
||||||
type === "image" || rUrl.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
|
|
||||||
)) return route.abort();
|
|
||||||
route.continue();
|
|
||||||
});
|
|
||||||
await page.goto(url, { waitUntil, timeout });
|
|
||||||
if (waitSelector) {
|
|
||||||
try {
|
|
||||||
await page.waitForSelector(waitSelector, { timeout });
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
if (scrollToBottom) {
|
|
||||||
await turboScroll(page);
|
|
||||||
}
|
|
||||||
if (renderWaitTime > 0) {
|
|
||||||
await new Promise(r => setTimeout(r, renderWaitTime));
|
|
||||||
}
|
|
||||||
const result = await handler(page);
|
|
||||||
await page.close();
|
|
||||||
|
|
||||||
return { result, requests: collectedRequests };
|
|
||||||
}
|
|
||||||
|
|
||||||
async function closeScraper() {
|
|
||||||
if (context) await context.close();
|
|
||||||
if (browser) await browser.close();
|
|
||||||
context = null;
|
|
||||||
browser = null;
|
|
||||||
}
|
|
||||||
module.exports = {
|
|
||||||
initHeadless,
|
|
||||||
scrape,
|
|
||||||
closeScraper
|
|
||||||
};
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
node_modules
|
|
||||||
electron
|
|
||||||
dist
|
|
||||||
.env
|
|
||||||
build
|
|
||||||
.gitignore
|
|
||||||
Dockerfile
|
|
||||||
.dockerignore
|
|
||||||
5
docker/.gitignore
vendored
5
docker/.gitignore
vendored
@@ -1,5 +0,0 @@
|
|||||||
node_modules
|
|
||||||
electron
|
|
||||||
dist
|
|
||||||
.env
|
|
||||||
build
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
FROM mcr.microsoft.com/playwright:v1.50.0-jammy
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
COPY package*.json ./
|
|
||||||
|
|
||||||
RUN npm ci
|
|
||||||
|
|
||||||
RUN npx playwright install --with-deps chromium
|
|
||||||
|
|
||||||
COPY . .
|
|
||||||
|
|
||||||
EXPOSE 54322
|
|
||||||
|
|
||||||
CMD ["npm", "run", "start"]
|
|
||||||
3975
docker/package-lock.json
generated
3975
docker/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,34 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "waifu-board",
|
|
||||||
"version": "2.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "main.js",
|
|
||||||
"scripts": {
|
|
||||||
"build": "tsc",
|
|
||||||
"start": "tsc && node server.js"
|
|
||||||
},
|
|
||||||
"keywords": [],
|
|
||||||
"author": "",
|
|
||||||
"license": "ISC",
|
|
||||||
"type": "commonjs",
|
|
||||||
"dependencies": {
|
|
||||||
"@fastify/static": "^8.3.0",
|
|
||||||
"bcrypt": "^6.0.0",
|
|
||||||
"bindings": "^1.5.0",
|
|
||||||
"cheerio": "^1.1.2",
|
|
||||||
"dotenv": "^17.2.3",
|
|
||||||
"fastify": "^5.6.2",
|
|
||||||
"jsonwebtoken": "^9.0.3",
|
|
||||||
"node-addon-api": "^8.5.0",
|
|
||||||
"playwright-chromium": "^1.57.0",
|
|
||||||
"sqlite3": "^5.1.7"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/bcrypt": "^6.0.0",
|
|
||||||
"@types/jsonwebtoken": "^9.0.10",
|
|
||||||
"@types/node": "^24.0.0",
|
|
||||||
"node-gyp": "^12.1.0",
|
|
||||||
"ts-node": "^10.9.0",
|
|
||||||
"typescript": "^5.3.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
const { contextBridge, ipcRenderer } = require("electron");
|
|
||||||
|
|
||||||
contextBridge.exposeInMainWorld("electronAPI", {
|
|
||||||
isElectron: true,
|
|
||||||
win: {
|
|
||||||
minimize: () => ipcRenderer.send("win:minimize"),
|
|
||||||
maximize: () => ipcRenderer.send("win:maximize"),
|
|
||||||
close: () => ipcRenderer.send("win:close")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200" viewBox="0 0 800 1200"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="M214.535 564.095h11.97v73.02h-6.97q-1.61 0-2.7-.53-1.08-.53-2.09-1.79l-38.13-48.69q.3 3.34.3 6.17v44.84h-11.97v-73.02h7.12q.86 0 1.49.07.63.08 1.11.31.48.22.94.65.45.43 1.01 1.14l38.28 48.88q-.15-1.77-.26-3.48-.1-1.72-.1-3.18zm49.19 20.4q5.76 0 10.48 1.87t8.08 5.3 5.18 8.38q1.81 4.95 1.81 11.06 0 6.16-1.81 11.11-1.82 4.95-5.18 8.44-3.36 3.48-8.08 5.35t-10.48 1.87q-5.81 0-10.55-1.87-4.75-1.87-8.11-5.35-3.36-3.49-5.2-8.44t-1.84-11.11q0-6.11 1.84-11.06t5.2-8.38 8.11-5.3q4.74-1.87 10.55-1.87m0 43.78q6.46 0 9.57-4.34t3.11-12.73q0-8.38-3.11-12.77-3.11-4.4-9.57-4.4-6.56 0-9.72 4.42t-3.16 12.75q0 8.34 3.16 12.7 3.16 4.37 9.72 4.37m52.37 9.65q-6.77 0-10.38-3.81-3.61-3.82-3.61-10.53v-28.94h-5.3q-1.01 0-1.72-.66-.71-.65-.71-1.97v-4.95l8.34-1.36 2.62-14.14q.26-1.01.96-1.56.71-.56 1.82-.56h6.46v16.31h13.84v8.89h-13.84v28.08q0 2.42 1.19 3.78 1.19 1.37 3.26 1.37 1.16 0 1.94-.28.79-.28 1.37-.58t1.03-.58q.46-.28.91-.28.56 0 .91.28t.76.83l3.73 6.06q-2.72 2.27-6.26 3.44-3.53 1.16-7.32 1.16m92.87-63.03h-32.42v21.62h27.37v10.86h-27.37v29.74h-13.64v-73.02h46.06zm32.07 9.6q5.75 0 10.47 1.87 4.73 1.87 8.08 5.3 3.36 3.43 5.18 8.38t1.82 11.06q0 6.16-1.82 11.11t-5.18 8.44q-3.35 3.48-8.08 5.35-4.72 1.87-10.47 1.87-5.81 0-10.56-1.87t-8.1-5.35q-3.36-3.49-5.21-8.44-1.84-4.95-1.84-11.11 0-6.11 1.84-11.06 1.85-4.95 5.21-8.38 3.35-3.43 8.1-5.3t10.56-1.87m0 43.78q6.46 0 9.57-4.34 3.1-4.34 3.1-12.73 0-8.38-3.1-12.77-3.11-4.4-9.57-4.4-6.57 0-9.73 4.42-3.15 4.42-3.15 12.75 0 8.34 3.15 12.7 3.16 4.37 9.73 4.37m67.26-42.97h12.48v51.81h-7.63q-2.47 0-3.13-2.27l-.86-4.14q-3.18 3.23-7.02 5.22-3.84 2-9.04 2-4.24 0-7.5-1.44-3.25-1.44-5.48-4.07-2.22-2.62-3.36-6.23-1.13-3.61-1.13-7.96v-32.92h12.47v32.92q0 4.75 2.2 7.35t6.59 2.6q3.23 0 6.06-1.44t5.35-3.96zm35.6 2.27.86 4.09q1.57-1.57 3.31-2.9 1.74-1.34 3.69-2.28 1.94-.93 4.16-1.46 2.23-.53 4.85-.53 4.24 0 7.53 1.44 3.28 1.44 5.48 4.04 2.19 2.6 3.33 6.21 1.13 3.61 1.13 7.95v32.98h-12.47v-32.98q0-4.74-2.17-7.34-2.17-2.61-6.62-2.61-3.23 0-6.06 1.47-2.82 1.46-5.35 3.99v37.47h-12.47v-51.81h7.62q2.43 0 3.18 2.27m78.68 34.19v-23.23q-2.12-2.58-4.62-3.64t-5.38-1.06q-2.82 0-5.1 1.06-2.27 1.06-3.88 3.21-1.62 2.14-2.48 5.45t-.86 7.8q0 4.55.73 7.71.74 3.15 2.1 5.15 1.36 1.99 3.33 2.88 1.97.88 4.4.88 3.89 0 6.61-1.62 2.73-1.61 5.15-4.59m0-59.69h12.48v75.04h-7.63q-2.47 0-3.13-2.27l-1.06-5q-3.13 3.58-7.2 5.81-4.06 2.22-9.46 2.22-4.25 0-7.78-1.77-3.54-1.77-6.09-5.13-2.55-3.35-3.94-8.3-1.38-4.95-1.38-11.32 0-5.75 1.56-10.7 1.57-4.95 4.5-8.59 2.92-3.63 7.01-5.68 4.1-2.04 9.2-2.04 4.34 0 7.42 1.36t5.5 3.69z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
@@ -1,87 +0,0 @@
|
|||||||
const fastify = require("fastify")({
|
|
||||||
logger: { level: "error" },
|
|
||||||
});
|
|
||||||
|
|
||||||
const path = require("path");
|
|
||||||
const jwt = require("jsonwebtoken");
|
|
||||||
const { initHeadless } = require("./electron/shared/headless");
|
|
||||||
const { initDatabase } = require("./electron/shared/database");
|
|
||||||
const { loadExtensions } = require("./electron/shared/extensions");
|
|
||||||
const dotenv = require("dotenv");
|
|
||||||
const envPath = process.resourcesPath
|
|
||||||
? path.join(process.resourcesPath, ".env")
|
|
||||||
: path.join(__dirname, ".env");
|
|
||||||
|
|
||||||
// Attempt to load it and log the result to be sure
|
|
||||||
dotenv.config({ path: envPath });
|
|
||||||
|
|
||||||
const viewsRoutes = require("./electron/views/views.routes");
|
|
||||||
const animeRoutes = require("./electron/api/anime/anime.routes");
|
|
||||||
const booksRoutes = require("./electron/api/books/books.routes");
|
|
||||||
const proxyRoutes = require("./electron/api/proxy/proxy.routes");
|
|
||||||
const extensionsRoutes = require("./electron/api/extensions/extensions.routes");
|
|
||||||
const galleryRoutes = require("./electron/api/gallery/gallery.routes");
|
|
||||||
const userRoutes = require("./electron/api/user/user.routes");
|
|
||||||
const listRoutes = require("./electron/api/list/list.routes");
|
|
||||||
const anilistRoute = require("./electron/api/anilist/anilist");
|
|
||||||
|
|
||||||
fastify.addHook("preHandler", async (request) => {
|
|
||||||
const auth = request.headers.authorization;
|
|
||||||
if (!auth) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const token = auth.replace("Bearer ", "");
|
|
||||||
request.user = jwt.verify(token, process.env.JWT_SECRET);
|
|
||||||
} catch (e) {
|
|
||||||
return reply.code(401).send({ error: "Invalid token" });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "public"),
|
|
||||||
prefix: "/public/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "views"),
|
|
||||||
prefix: "/views/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(require("@fastify/static"), {
|
|
||||||
root: path.join(__dirname, "src", "scripts"),
|
|
||||||
prefix: "/src/scripts/",
|
|
||||||
decorateReply: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.register(viewsRoutes);
|
|
||||||
fastify.register(animeRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(booksRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(proxyRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(extensionsRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(galleryRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(userRoutes, { prefix: "/api" });
|
|
||||||
fastify.register(anilistRoute, { prefix: "/api" });
|
|
||||||
fastify.register(listRoutes, { prefix: "/api" });
|
|
||||||
|
|
||||||
const start = async () => {
|
|
||||||
try {
|
|
||||||
initDatabase("anilist");
|
|
||||||
initDatabase("favorites");
|
|
||||||
initDatabase("cache");
|
|
||||||
initDatabase("userdata");
|
|
||||||
|
|
||||||
await loadExtensions();
|
|
||||||
|
|
||||||
await fastify.listen({ port: 54322, host: "0.0.0.0" });
|
|
||||||
console.log(`Server is now running!`);
|
|
||||||
|
|
||||||
await initHeadless();
|
|
||||||
} catch (err) {
|
|
||||||
fastify.log.error(err);
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
start();
|
|
||||||
@@ -1,564 +0,0 @@
|
|||||||
import { queryOne } from '../../shared/database';
|
|
||||||
|
|
||||||
const USER_DB = 'userdata';
|
|
||||||
|
|
||||||
// Configuración de reintentos
|
|
||||||
const RETRY_CONFIG = {
|
|
||||||
maxRetries: 3,
|
|
||||||
initialDelay: 1000,
|
|
||||||
maxDelay: 5000,
|
|
||||||
backoffMultiplier: 2
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper para hacer requests con reintentos y manejo de errores
|
|
||||||
async function fetchWithRetry(
|
|
||||||
url: string,
|
|
||||||
options: RequestInit,
|
|
||||||
retries = RETRY_CONFIG.maxRetries
|
|
||||||
): Promise<Response> {
|
|
||||||
let lastError: Error | null = null;
|
|
||||||
let delay = RETRY_CONFIG.initialDelay;
|
|
||||||
|
|
||||||
for (let attempt = 0; attempt <= retries; attempt++) {
|
|
||||||
try {
|
|
||||||
const controller = new AbortController();
|
|
||||||
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10s timeout
|
|
||||||
|
|
||||||
const response = await fetch(url, {
|
|
||||||
...options,
|
|
||||||
signal: controller.signal
|
|
||||||
});
|
|
||||||
|
|
||||||
clearTimeout(timeoutId);
|
|
||||||
|
|
||||||
// Si es rate limit (429), esperamos más tiempo
|
|
||||||
if (response.status === 429) {
|
|
||||||
const retryAfter = response.headers.get('Retry-After');
|
|
||||||
const waitTime = retryAfter ? parseInt(retryAfter) * 1000 : delay;
|
|
||||||
|
|
||||||
if (attempt < retries) {
|
|
||||||
console.warn(`Rate limited. Esperando ${waitTime}ms antes de reintentar...`);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, waitTime));
|
|
||||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si es un error de servidor (5xx), reintentamos
|
|
||||||
if (response.status >= 500 && attempt < retries) {
|
|
||||||
console.warn(`Error del servidor (${response.status}). Reintentando en ${delay}ms...`);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, delay));
|
|
||||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
} catch (error) {
|
|
||||||
lastError = error as Error;
|
|
||||||
|
|
||||||
if (attempt < retries && (
|
|
||||||
error instanceof Error && (
|
|
||||||
error.name === 'AbortError' ||
|
|
||||||
error.message.includes('fetch') ||
|
|
||||||
error.message.includes('network')
|
|
||||||
)
|
|
||||||
)) {
|
|
||||||
console.warn(`Error de conexión (intento ${attempt + 1}/${retries + 1}). Reintentando en ${delay}ms...`);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, delay));
|
|
||||||
delay = Math.min(delay * RETRY_CONFIG.backoffMultiplier, RETRY_CONFIG.maxDelay);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
throw lastError || new Error('Request failed after all retries');
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUserAniList(appUserId: number) {
|
|
||||||
try {
|
|
||||||
const sql = `
|
|
||||||
SELECT access_token, anilist_user_id
|
|
||||||
FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = 'AniList';
|
|
||||||
`;
|
|
||||||
|
|
||||||
const integration = await queryOne(sql, [appUserId], USER_DB) as any;
|
|
||||||
if (!integration) return [];
|
|
||||||
|
|
||||||
const { access_token, anilist_user_id } = integration;
|
|
||||||
if (!access_token || !anilist_user_id) return [];
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query ($userId: Int) {
|
|
||||||
anime: MediaListCollection(userId: $userId, type: ANIME) {
|
|
||||||
lists {
|
|
||||||
entries {
|
|
||||||
media {
|
|
||||||
id
|
|
||||||
title { romaji english userPreferred }
|
|
||||||
coverImage { extraLarge }
|
|
||||||
episodes
|
|
||||||
nextAiringEpisode { episode }
|
|
||||||
}
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
repeat
|
|
||||||
notes
|
|
||||||
private
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
manga: MediaListCollection(userId: $userId, type: MANGA) {
|
|
||||||
lists {
|
|
||||||
entries {
|
|
||||||
media {
|
|
||||||
id
|
|
||||||
type
|
|
||||||
format
|
|
||||||
title { romaji english userPreferred }
|
|
||||||
coverImage { extraLarge }
|
|
||||||
chapters
|
|
||||||
volumes
|
|
||||||
}
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
repeat
|
|
||||||
notes
|
|
||||||
private
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${access_token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query,
|
|
||||||
variables: { userId: anilist_user_id }
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) throw new Error(`AniList API error: ${res.status}`);
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
if (json?.errors?.length) throw new Error(json.errors[0].message);
|
|
||||||
|
|
||||||
const fromFuzzy = (d: any) => {
|
|
||||||
if (!d?.year) return null;
|
|
||||||
const m = String(d.month || 1).padStart(2, '0');
|
|
||||||
const day = String(d.day || 1).padStart(2, '0');
|
|
||||||
return `${d.year}-${m}-${day}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalize = (lists: any[], type: 'ANIME' | 'MANGA') => {
|
|
||||||
const result: any[] = [];
|
|
||||||
|
|
||||||
for (const list of lists || []) {
|
|
||||||
for (const entry of list.entries || []) {
|
|
||||||
const media = entry.media;
|
|
||||||
|
|
||||||
const totalEpisodes =
|
|
||||||
media?.episodes ||
|
|
||||||
(media?.nextAiringEpisode?.episode
|
|
||||||
? media.nextAiringEpisode.episode - 1
|
|
||||||
: 0);
|
|
||||||
|
|
||||||
const totalChapters =
|
|
||||||
media?.chapters ||
|
|
||||||
(media?.volumes ? media.volumes * 10 : 0);
|
|
||||||
|
|
||||||
const resolvedType =
|
|
||||||
type === 'MANGA' &&
|
|
||||||
(media?.format === 'LIGHT_NOVEL' || media?.format === 'NOVEL')
|
|
||||||
? 'NOVEL'
|
|
||||||
: type;
|
|
||||||
|
|
||||||
|
|
||||||
result.push({
|
|
||||||
user_id: appUserId,
|
|
||||||
|
|
||||||
entry_id: media.id,
|
|
||||||
source: 'anilist',
|
|
||||||
|
|
||||||
// ✅ AHORA TU FRONT RECIBE NOVEL
|
|
||||||
entry_type: resolvedType,
|
|
||||||
|
|
||||||
status: entry.status,
|
|
||||||
progress: entry.progress || 0,
|
|
||||||
score: entry.score || null,
|
|
||||||
start_date: fromFuzzy(entry.startedAt),
|
|
||||||
end_date: fromFuzzy(entry.completedAt),
|
|
||||||
repeat_count: entry.repeat || 0,
|
|
||||||
notes: entry.notes || null,
|
|
||||||
is_private: entry.private ? 1 : 0,
|
|
||||||
|
|
||||||
title: media?.title?.userPreferred
|
|
||||||
|| media?.title?.english
|
|
||||||
|| media?.title?.romaji
|
|
||||||
|| 'Unknown Title',
|
|
||||||
|
|
||||||
poster: media?.coverImage?.extraLarge
|
|
||||||
|| 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
|
|
||||||
total_episodes: resolvedType === 'ANIME' ? totalEpisodes : undefined,
|
|
||||||
total_chapters: resolvedType !== 'ANIME' ? totalChapters : undefined,
|
|
||||||
|
|
||||||
updated_at: new Date().toISOString()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
return [
|
|
||||||
...normalize(json?.data?.anime?.lists, 'ANIME'),
|
|
||||||
...normalize(json?.data?.manga?.lists, 'MANGA')
|
|
||||||
];
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching AniList data:', error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateAniListEntry(token: string, params: {
|
|
||||||
mediaId: number | string;
|
|
||||||
status?: string | null;
|
|
||||||
progress?: number | null;
|
|
||||||
score?: number | null;
|
|
||||||
start_date?: string | null; // YYYY-MM-DD
|
|
||||||
end_date?: string | null; // YYYY-MM-DD
|
|
||||||
repeat_count?: number | null;
|
|
||||||
notes?: string | null;
|
|
||||||
is_private?: boolean | number | null;
|
|
||||||
}) {
|
|
||||||
try {
|
|
||||||
if (!token) throw new Error('AniList token is required');
|
|
||||||
|
|
||||||
const mutation = `
|
|
||||||
mutation (
|
|
||||||
$mediaId: Int,
|
|
||||||
$status: MediaListStatus,
|
|
||||||
$progress: Int,
|
|
||||||
$score: Float,
|
|
||||||
$startedAt: FuzzyDateInput,
|
|
||||||
$completedAt: FuzzyDateInput,
|
|
||||||
$repeat: Int,
|
|
||||||
$notes: String,
|
|
||||||
$private: Boolean
|
|
||||||
) {
|
|
||||||
SaveMediaListEntry (
|
|
||||||
mediaId: $mediaId,
|
|
||||||
status: $status,
|
|
||||||
progress: $progress,
|
|
||||||
score: $score,
|
|
||||||
startedAt: $startedAt,
|
|
||||||
completedAt: $completedAt,
|
|
||||||
repeat: $repeat,
|
|
||||||
notes: $notes,
|
|
||||||
private: $private
|
|
||||||
) {
|
|
||||||
id
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
repeat
|
|
||||||
notes
|
|
||||||
private
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const toFuzzyDate = (dateStr?: string | null) => {
|
|
||||||
if (!dateStr) return null;
|
|
||||||
const [year, month, day] = dateStr.split('-').map(Number);
|
|
||||||
return { year, month, day };
|
|
||||||
};
|
|
||||||
|
|
||||||
const variables: any = {
|
|
||||||
mediaId: Number(params.mediaId),
|
|
||||||
status: params.status ?? undefined,
|
|
||||||
progress: params.progress ?? undefined,
|
|
||||||
score: params.score ?? undefined,
|
|
||||||
startedAt: toFuzzyDate(params.start_date),
|
|
||||||
completedAt: toFuzzyDate(params.end_date),
|
|
||||||
repeat: params.repeat_count ?? undefined,
|
|
||||||
notes: params.notes ?? undefined,
|
|
||||||
private: typeof params.is_private === 'boolean'
|
|
||||||
? params.is_private
|
|
||||||
: params.is_private === 1
|
|
||||||
};
|
|
||||||
|
|
||||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ query: mutation, variables }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const errorText = await res.text();
|
|
||||||
throw new Error(`AniList update failed: ${res.status} - ${errorText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
|
|
||||||
if (json?.errors?.length) {
|
|
||||||
throw new Error(`AniList GraphQL error: ${json.errors[0].message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return json.data?.SaveMediaListEntry || null;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error updating AniList entry:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteAniListEntry(token: string, mediaId: number) {
|
|
||||||
if (!token) throw new Error("AniList token required");
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1️⃣ OBTENER VIEWER
|
|
||||||
const viewerQuery = `query { Viewer { id name } }`;
|
|
||||||
|
|
||||||
const vRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ query: viewerQuery }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const vJson = await vRes.json();
|
|
||||||
const userId = vJson?.data?.Viewer?.id;
|
|
||||||
|
|
||||||
if (!userId) throw new Error("Invalid AniList token");
|
|
||||||
|
|
||||||
// 2️⃣ DETECTAR TIPO REAL DEL MEDIA
|
|
||||||
const mediaQuery = `
|
|
||||||
query ($id: Int) {
|
|
||||||
Media(id: $id) {
|
|
||||||
id
|
|
||||||
type
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const mTypeRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: mediaQuery,
|
|
||||||
variables: { id: mediaId }
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const mTypeJson = await mTypeRes.json();
|
|
||||||
const mediaType = mTypeJson?.data?.Media?.type;
|
|
||||||
|
|
||||||
if (!mediaType) {
|
|
||||||
throw new Error("Media not found in AniList");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3️⃣ BUSCAR ENTRY CON TIPO REAL
|
|
||||||
const listQuery = `
|
|
||||||
query ($userId: Int, $mediaId: Int, $type: MediaType) {
|
|
||||||
MediaList(userId: $userId, mediaId: $mediaId, type: $type) {
|
|
||||||
id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const qRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: listQuery,
|
|
||||||
variables: {
|
|
||||||
userId,
|
|
||||||
mediaId,
|
|
||||||
type: mediaType
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const qJson = await qRes.json();
|
|
||||||
const listEntryId = qJson?.data?.MediaList?.id;
|
|
||||||
|
|
||||||
if (!listEntryId) {
|
|
||||||
throw new Error("Entry not found in user's AniList");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4️⃣ BORRAR
|
|
||||||
const mutation = `
|
|
||||||
mutation ($id: Int) {
|
|
||||||
DeleteMediaListEntry(id: $id) {
|
|
||||||
deleted
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const delRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: mutation,
|
|
||||||
variables: { id: listEntryId }
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
const delJson = await delRes.json();
|
|
||||||
|
|
||||||
if (delJson?.errors?.length) {
|
|
||||||
throw new Error(delJson.errors[0].message);
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("AniList DELETE failed:", err);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export async function getSingleAniListEntry(
|
|
||||||
token: string,
|
|
||||||
mediaId: number,
|
|
||||||
type: 'ANIME' | 'MANGA'
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
if (!token) {
|
|
||||||
throw new Error('AniList token is required');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 1️⃣ Obtener userId desde el token
|
|
||||||
const viewerRes = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: `query { Viewer { id } }`
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const viewerJson = await viewerRes.json();
|
|
||||||
const userId = viewerJson?.data?.Viewer?.id;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
throw new Error('Failed to get AniList userId');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2️⃣ Query correcta con userId
|
|
||||||
const query = `
|
|
||||||
query ($mediaId: Int, $type: MediaType, $userId: Int) {
|
|
||||||
MediaList(mediaId: $mediaId, type: $type, userId: $userId) {
|
|
||||||
id
|
|
||||||
status
|
|
||||||
progress
|
|
||||||
score
|
|
||||||
repeat
|
|
||||||
private
|
|
||||||
notes
|
|
||||||
startedAt { year month day }
|
|
||||||
completedAt { year month day }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const res = await fetchWithRetry('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query,
|
|
||||||
variables: { mediaId, type, userId }
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res.status === 404) {
|
|
||||||
return null; // ✅ No existe entry todavía → es totalmente válido
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const errorText = await res.text();
|
|
||||||
throw new Error(`AniList fetch failed: ${res.status} - ${errorText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
|
|
||||||
if (json?.errors?.length) {
|
|
||||||
if (json.errors[0].status === 404) return null;
|
|
||||||
throw new Error(`GraphQL error: ${json.errors[0].message}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const entry = json?.data?.MediaList;
|
|
||||||
if (!entry) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
entry_id: mediaId,
|
|
||||||
source: 'anilist',
|
|
||||||
entry_type: type,
|
|
||||||
status: entry.status,
|
|
||||||
progress: entry.progress || 0,
|
|
||||||
score: entry.score ?? null,
|
|
||||||
|
|
||||||
start_date: entry.startedAt?.year
|
|
||||||
? `${entry.startedAt.year}-${String(entry.startedAt.month).padStart(2, '0')}-${String(entry.startedAt.day).padStart(2, '0')}`
|
|
||||||
: null,
|
|
||||||
|
|
||||||
end_date: entry.completedAt?.year
|
|
||||||
? `${entry.completedAt.year}-${String(entry.completedAt.month).padStart(2, '0')}-${String(entry.completedAt.day).padStart(2, '0')}`
|
|
||||||
: null,
|
|
||||||
|
|
||||||
repeat_count: entry.repeat || 0,
|
|
||||||
notes: entry.notes || null,
|
|
||||||
is_private: entry.private ? 1 : 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching single AniList entry:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import { FastifyInstance } from "fastify";
|
|
||||||
import { run } from "../../shared/database";
|
|
||||||
|
|
||||||
async function anilist(fastify: FastifyInstance) {
|
|
||||||
fastify.get("/anilist", async (request, reply) => {
|
|
||||||
try {
|
|
||||||
const { code, state } = request.query as { code?: string; state?: string };
|
|
||||||
|
|
||||||
if (!code) return reply.status(400).send("No code");
|
|
||||||
if (!state) return reply.status(400).send("No user state");
|
|
||||||
|
|
||||||
const userId = Number(state);
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.status(400).send("Invalid user id");
|
|
||||||
}
|
|
||||||
|
|
||||||
const tokenRes = await fetch("https://anilist.co/api/v2/oauth/token", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
grant_type: "authorization_code",
|
|
||||||
client_id: process.env.ANILIST_CLIENT_ID,
|
|
||||||
client_secret: process.env.ANILIST_CLIENT_SECRET,
|
|
||||||
redirect_uri: "http://localhost:54322/api/anilist",
|
|
||||||
code
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const tokenData = await tokenRes.json();
|
|
||||||
|
|
||||||
if (!tokenData.access_token) {
|
|
||||||
console.error("AniList token error:", tokenData);
|
|
||||||
return reply.status(500).send("Failed to get AniList token");
|
|
||||||
}
|
|
||||||
|
|
||||||
const userRes = await fetch("https://graphql.anilist.co", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: `${tokenData.token_type} ${tokenData.access_token}`
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query: `query { Viewer { id } }`
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const userData = await userRes.json();
|
|
||||||
const anilistUserId = userData?.data?.Viewer?.id;
|
|
||||||
|
|
||||||
if (!anilistUserId) {
|
|
||||||
console.error("AniList Viewer error:", userData);
|
|
||||||
return reply.status(500).send("Failed to fetch AniList user");
|
|
||||||
}
|
|
||||||
|
|
||||||
const expiresAt = new Date(
|
|
||||||
Date.now() + tokenData.expires_in * 1000
|
|
||||||
).toISOString();
|
|
||||||
|
|
||||||
await run(
|
|
||||||
`
|
|
||||||
INSERT INTO UserIntegration
|
|
||||||
(user_id, platform, access_token, refresh_token, token_type, anilist_user_id, expires_at)
|
|
||||||
VALUES (?, ?, ?, ?, ?, ?, ?)
|
|
||||||
ON CONFLICT(user_id) DO UPDATE SET
|
|
||||||
access_token = excluded.access_token,
|
|
||||||
refresh_token = excluded.refresh_token,
|
|
||||||
token_type = excluded.token_type,
|
|
||||||
anilist_user_id = excluded.anilist_user_id,
|
|
||||||
expires_at = excluded.expires_at
|
|
||||||
`,
|
|
||||||
[
|
|
||||||
userId,
|
|
||||||
"AniList",
|
|
||||||
tokenData.access_token,
|
|
||||||
tokenData.refresh_token,
|
|
||||||
tokenData.token_type,
|
|
||||||
anilistUserId,
|
|
||||||
expiresAt
|
|
||||||
],
|
|
||||||
"userdata"
|
|
||||||
);
|
|
||||||
|
|
||||||
return reply.redirect("http://localhost:54322/?anilist=success");
|
|
||||||
} catch (e) {
|
|
||||||
console.error("AniList error:", e);
|
|
||||||
return reply.redirect("http://localhost:54322/?anilist=error");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default anilist;
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
|
||||||
import * as animeService from './anime.service';
|
|
||||||
import {getExtension} from '../../shared/extensions';
|
|
||||||
import {Anime, AnimeRequest, SearchRequest, WatchStreamRequest} from '../types';
|
|
||||||
|
|
||||||
export async function getAnime(req: AnimeRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params;
|
|
||||||
const source = req.query.source;
|
|
||||||
|
|
||||||
let anime: Anime | { error: string };
|
|
||||||
if (source === 'anilist') {
|
|
||||||
anime = await animeService.getAnimeById(id);
|
|
||||||
} else {
|
|
||||||
const ext = getExtension(source);
|
|
||||||
anime = await animeService.getAnimeInfoExtension(ext, id)
|
|
||||||
}
|
|
||||||
|
|
||||||
return anime;
|
|
||||||
} catch (err) {
|
|
||||||
return { error: "Database error" };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAnimeEpisodes(req: AnimeRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params;
|
|
||||||
const source = req.query.source || 'anilist';
|
|
||||||
const ext = getExtension(source);
|
|
||||||
|
|
||||||
return await animeService.searchEpisodesInExtension(
|
|
||||||
ext,
|
|
||||||
source,
|
|
||||||
id
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
return { error: "Database error" };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getTrending(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const results = await animeService.getTrendingAnime();
|
|
||||||
return { results };
|
|
||||||
} catch (err) {
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getTopAiring(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const results = await animeService.getTopAiringAnime();
|
|
||||||
return { results };
|
|
||||||
} catch (err) {
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function search(req: SearchRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const query = req.query.q;
|
|
||||||
const results = await animeService.searchAnimeLocal(query);
|
|
||||||
|
|
||||||
if (results.length > 0) {
|
|
||||||
return { results: results };
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchInExtension(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const extensionName = req.params.extension;
|
|
||||||
const query = req.query.q;
|
|
||||||
|
|
||||||
const ext = getExtension(extensionName);
|
|
||||||
if (!ext) return { results: [] };
|
|
||||||
|
|
||||||
const results = await animeService.searchAnimeInExtension(ext, extensionName, query);
|
|
||||||
return { results };
|
|
||||||
} catch {
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getWatchStream(req: WatchStreamRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { animeId, episode, server, category, ext, source } = req.query;
|
|
||||||
|
|
||||||
const extension = getExtension(ext);
|
|
||||||
if (!extension) return { error: "Extension not found" };
|
|
||||||
|
|
||||||
return await animeService.getStreamData(
|
|
||||||
extension,
|
|
||||||
episode,
|
|
||||||
animeId,
|
|
||||||
source,
|
|
||||||
server,
|
|
||||||
category
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
const error = err as Error;
|
|
||||||
return { error: error.message };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './anime.controller';
|
|
||||||
|
|
||||||
async function animeRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/anime/:id', controller.getAnime);
|
|
||||||
fastify.get('/anime/:id/:episodes', controller.getAnimeEpisodes);
|
|
||||||
fastify.get('/trending', controller.getTrending);
|
|
||||||
fastify.get('/top-airing', controller.getTopAiring);
|
|
||||||
fastify.get('/search', controller.search);
|
|
||||||
fastify.get('/search/:extension', controller.searchInExtension);
|
|
||||||
fastify.get('/watch/stream', controller.getWatchStream);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default animeRoutes;
|
|
||||||
@@ -1,450 +0,0 @@
|
|||||||
import { getCache, setCache, getCachedExtension, cacheExtension, getExtensionTitle } from '../../shared/queries';
|
|
||||||
import { queryAll, queryOne } from '../../shared/database';
|
|
||||||
import {Anime, Episode, Extension, StreamData} from '../types';
|
|
||||||
|
|
||||||
const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
|
|
||||||
const TTL = 60 * 60 * 6;
|
|
||||||
|
|
||||||
const ANILIST_URL = "https://graphql.anilist.co";
|
|
||||||
|
|
||||||
const MEDIA_FIELDS = `
|
|
||||||
id
|
|
||||||
idMal
|
|
||||||
title { romaji english native userPreferred }
|
|
||||||
type
|
|
||||||
format
|
|
||||||
status
|
|
||||||
description
|
|
||||||
startDate { year month day }
|
|
||||||
endDate { year month day }
|
|
||||||
season
|
|
||||||
seasonYear
|
|
||||||
episodes
|
|
||||||
duration
|
|
||||||
chapters
|
|
||||||
volumes
|
|
||||||
countryOfOrigin
|
|
||||||
isLicensed
|
|
||||||
source
|
|
||||||
hashtag
|
|
||||||
trailer { id site thumbnail }
|
|
||||||
updatedAt
|
|
||||||
coverImage { extraLarge large medium color }
|
|
||||||
bannerImage
|
|
||||||
genres
|
|
||||||
synonyms
|
|
||||||
averageScore
|
|
||||||
popularity
|
|
||||||
isLocked
|
|
||||||
trending
|
|
||||||
favourites
|
|
||||||
isAdult
|
|
||||||
siteUrl
|
|
||||||
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult }
|
|
||||||
relations {
|
|
||||||
edges {
|
|
||||||
relationType
|
|
||||||
node {
|
|
||||||
id
|
|
||||||
title { romaji }
|
|
||||||
type
|
|
||||||
format
|
|
||||||
status
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
studios {
|
|
||||||
edges {
|
|
||||||
isMain
|
|
||||||
node { id name isAnimationStudio }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
nextAiringEpisode { airingAt timeUntilAiring episode }
|
|
||||||
externalLinks { id url site type language color icon notes }
|
|
||||||
rankings { id rank type format year season allTime context }
|
|
||||||
stats {
|
|
||||||
scoreDistribution { score amount }
|
|
||||||
statusDistribution { status amount }
|
|
||||||
}
|
|
||||||
recommendations(perPage: 7, sort: RATING_DESC) {
|
|
||||||
nodes {
|
|
||||||
mediaRecommendation {
|
|
||||||
id
|
|
||||||
title { romaji }
|
|
||||||
coverImage { medium }
|
|
||||||
format
|
|
||||||
type
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
async function fetchAniList(query: string, variables: any) {
|
|
||||||
const res = await fetch(ANILIST_URL, {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ query, variables })
|
|
||||||
});
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
return json?.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAnimeById(id: string | number): Promise<Anime | { error: string }> {
|
|
||||||
const row = await queryOne("SELECT full_data FROM anime WHERE id = ?", [id]);
|
|
||||||
|
|
||||||
if (row) return JSON.parse(row.full_data);
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query ($id: Int) {
|
|
||||||
Media(id: $id, type: ANIME) { ${MEDIA_FIELDS} }
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const data = await fetchAniList(query, { id: Number(id) });
|
|
||||||
if (!data?.Media) return { error: "Anime not found" };
|
|
||||||
|
|
||||||
await queryOne(
|
|
||||||
"INSERT INTO anime (id, title, updatedAt, full_data) VALUES (?, ?, ?, ?)",
|
|
||||||
[
|
|
||||||
data.Media.id,
|
|
||||||
data.Media.title?.english || data.Media.title?.romaji,
|
|
||||||
data.Media.updatedAt || 0,
|
|
||||||
JSON.stringify(data.Media)
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
return data.Media;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getTrendingAnime(): Promise<Anime[]> {
|
|
||||||
const rows = await queryAll(
|
|
||||||
"SELECT full_data, updated_at FROM trending ORDER BY rank ASC LIMIT 10"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (rows.length) {
|
|
||||||
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
|
|
||||||
if (!expired) {
|
|
||||||
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query {
|
|
||||||
Page(page: 1, perPage: 10) {
|
|
||||||
media(type: ANIME, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const data = await fetchAniList(query, {});
|
|
||||||
const list = data?.Page?.media || [];
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
|
||||||
|
|
||||||
await queryOne("DELETE FROM trending");
|
|
||||||
let rank = 1;
|
|
||||||
|
|
||||||
for (const anime of list) {
|
|
||||||
await queryOne(
|
|
||||||
"INSERT INTO trending (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
|
||||||
[rank++, anime.id, JSON.stringify(anime), now]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getTopAiringAnime(): Promise<Anime[]> {
|
|
||||||
const rows = await queryAll(
|
|
||||||
"SELECT full_data, updated_at FROM top_airing ORDER BY rank ASC LIMIT 10"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (rows.length) {
|
|
||||||
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
|
|
||||||
if (!expired) {
|
|
||||||
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query {
|
|
||||||
Page(page: 1, perPage: 10) {
|
|
||||||
media(type: ANIME, status: RELEASING, sort: SCORE_DESC) { ${MEDIA_FIELDS} }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const data = await fetchAniList(query, {});
|
|
||||||
const list = data?.Page?.media || [];
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
|
||||||
|
|
||||||
await queryOne("DELETE FROM top_airing");
|
|
||||||
let rank = 1;
|
|
||||||
|
|
||||||
for (const anime of list) {
|
|
||||||
await queryOne(
|
|
||||||
"INSERT INTO top_airing (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
|
||||||
[rank++, anime.id, JSON.stringify(anime), now]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchAnimeLocal(query: string): Promise<Anime[]> {
|
|
||||||
if (!query || query.length < 2) return [];
|
|
||||||
|
|
||||||
const sql = `SELECT full_data FROM anime WHERE full_data LIKE ? LIMIT 50`;
|
|
||||||
const rows = await queryAll(sql, [`%${query}%`]);
|
|
||||||
|
|
||||||
const localResults: Anime[] = rows
|
|
||||||
.map((r: { full_data: string }) => JSON.parse(r.full_data))
|
|
||||||
.filter((anime: { title: { english: any; romaji: any; native: any; }; synonyms: any; }) => {
|
|
||||||
const q = query.toLowerCase();
|
|
||||||
const titles = [
|
|
||||||
anime.title?.english,
|
|
||||||
anime.title?.romaji,
|
|
||||||
anime.title?.native,
|
|
||||||
...(anime.synonyms || [])
|
|
||||||
]
|
|
||||||
.filter(Boolean)
|
|
||||||
.map(t => t!.toLowerCase());
|
|
||||||
|
|
||||||
return titles.some(t => t.includes(q));
|
|
||||||
})
|
|
||||||
.slice(0, 10);
|
|
||||||
|
|
||||||
if (localResults.length >= 5) {
|
|
||||||
return localResults;
|
|
||||||
}
|
|
||||||
|
|
||||||
const gql = `
|
|
||||||
query ($search: String) {
|
|
||||||
Page(page: 1, perPage: 10) {
|
|
||||||
media(type: ANIME, search: $search) { ${MEDIA_FIELDS} }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const data = await fetchAniList(gql, { search: query });
|
|
||||||
const remoteResults: Anime[] = data?.Page?.media || [];
|
|
||||||
|
|
||||||
for (const anime of remoteResults) {
|
|
||||||
await queryOne(
|
|
||||||
"INSERT OR IGNORE INTO anime (id, title, updatedAt, full_data) VALUES (?, ?, ?, ?)",
|
|
||||||
[
|
|
||||||
anime.id,
|
|
||||||
anime.title?.english || anime.title?.romaji,
|
|
||||||
anime.updatedAt || 0,
|
|
||||||
JSON.stringify(anime)
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const merged = [...localResults];
|
|
||||||
|
|
||||||
for (const anime of remoteResults) {
|
|
||||||
if (!merged.find(a => a.id === anime.id)) {
|
|
||||||
merged.push(anime);
|
|
||||||
}
|
|
||||||
if (merged.length >= 10) break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return merged;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAnimeInfoExtension(ext: Extension | null, id: string): Promise<Anime | { error: string }> {
|
|
||||||
if (!ext) return { error: "not found" };
|
|
||||||
|
|
||||||
const extName = ext.constructor.name;
|
|
||||||
|
|
||||||
const cached = await getCachedExtension(extName, id);
|
|
||||||
if (cached) {
|
|
||||||
try {
|
|
||||||
console.log(`[${extName}] Metadata cache hit for ID: ${id}`);
|
|
||||||
return JSON.parse(cached.metadata) as Anime;
|
|
||||||
} catch {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((ext.type === 'anime-board') && ext.getMetadata) {
|
|
||||||
try {
|
|
||||||
const match = await ext.getMetadata(id);
|
|
||||||
|
|
||||||
if (match) {
|
|
||||||
const normalized: any = {
|
|
||||||
title: match.title ?? "Unknown",
|
|
||||||
summary: match.summary ?? "No summary available",
|
|
||||||
episodes: Number(match.episodes) || 0,
|
|
||||||
characters: Array.isArray(match.characters) ? match.characters : [],
|
|
||||||
season: match.season ?? null,
|
|
||||||
status: match.status ?? "Unknown",
|
|
||||||
studio: match.studio ?? "Unknown",
|
|
||||||
score: Number(match.score) || 0,
|
|
||||||
year: match.year ?? null,
|
|
||||||
genres: Array.isArray(match.genres) ? match.genres : [],
|
|
||||||
image: match.image ?? ""
|
|
||||||
};
|
|
||||||
|
|
||||||
await cacheExtension(extName, id, normalized.title, normalized);
|
|
||||||
return normalized;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Extension getMetadata failed:`, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { error: "not found" };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchAnimeInExtension(ext: Extension | null, name: string, query: string) {
|
|
||||||
if (!ext) return [];
|
|
||||||
|
|
||||||
if (ext.type === 'anime-board' && ext.search) {
|
|
||||||
try {
|
|
||||||
console.log(`[${name}] Searching for anime: ${query}`);
|
|
||||||
const matches = await ext.search({
|
|
||||||
query: query,
|
|
||||||
media: {
|
|
||||||
romajiTitle: query,
|
|
||||||
englishTitle: query,
|
|
||||||
startDate: { year: 0, month: 0, day: 0 }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (matches && matches.length > 0) {
|
|
||||||
return matches.map(m => ({
|
|
||||||
id: m.id,
|
|
||||||
extensionName: name,
|
|
||||||
title: { romaji: m.title, english: m.title, native: null },
|
|
||||||
coverImage: { large: m.image || '' },
|
|
||||||
averageScore: m.rating || m.score || null,
|
|
||||||
format: 'ANIME',
|
|
||||||
seasonYear: null,
|
|
||||||
isExtensionResult: true,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Extension search failed for ${name}:`, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchEpisodesInExtension(ext: Extension | null, name: string, query: string): Promise<Episode[]> {
|
|
||||||
if (!ext) return [];
|
|
||||||
|
|
||||||
const cacheKey = `anime:episodes:${name}:${query}`;
|
|
||||||
const cached = await getCache(cacheKey);
|
|
||||||
|
|
||||||
if (cached) {
|
|
||||||
const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
|
|
||||||
|
|
||||||
if (!isExpired) {
|
|
||||||
console.log(`[${name}] Episodes cache hit for: ${query}`);
|
|
||||||
try {
|
|
||||||
return JSON.parse(cached.result) as Episode[];
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`[${name}] Error parsing cached episodes:`, e);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log(`[${name}] Episodes cache expired for: ${query}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ext.type === "anime-board" && ext.search && typeof ext.findEpisodes === "function") {
|
|
||||||
try {
|
|
||||||
const title = await getExtensionTitle(name, query);
|
|
||||||
let mediaId: string;
|
|
||||||
|
|
||||||
if (!title) {
|
|
||||||
const matches = await ext.search({
|
|
||||||
query,
|
|
||||||
media: {
|
|
||||||
romajiTitle: query,
|
|
||||||
englishTitle: query,
|
|
||||||
startDate: { year: 0, month: 0, day: 0 }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!matches || matches.length === 0) return [];
|
|
||||||
|
|
||||||
const res = matches[0];
|
|
||||||
if (!res?.id) return [];
|
|
||||||
|
|
||||||
mediaId = res.id;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
mediaId = query;
|
|
||||||
}
|
|
||||||
|
|
||||||
const chapterList = await ext.findEpisodes(mediaId);
|
|
||||||
|
|
||||||
if (!Array.isArray(chapterList)) return [];
|
|
||||||
|
|
||||||
const result: Episode[] = chapterList.map(ep => ({
|
|
||||||
id: ep.id,
|
|
||||||
number: ep.number,
|
|
||||||
url: ep.url,
|
|
||||||
title: ep.title
|
|
||||||
}));
|
|
||||||
|
|
||||||
await setCache(cacheKey, result, CACHE_TTL_MS);
|
|
||||||
|
|
||||||
return result;
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Extension search failed for ${name}:`, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getStreamData(extension: Extension, episode: string, id: string, source: string, server?: string, category?: string): Promise<StreamData> {
|
|
||||||
const providerName = extension.constructor.name;
|
|
||||||
|
|
||||||
const cacheKey = `anime:stream:${providerName}:${id}:${episode}:${server || 'default'}:${category || 'sub'}`;
|
|
||||||
|
|
||||||
const cached = await getCache(cacheKey);
|
|
||||||
|
|
||||||
if (cached) {
|
|
||||||
const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
|
|
||||||
|
|
||||||
if (!isExpired) {
|
|
||||||
console.log(`[${providerName}] Stream data cache hit for episode ${episode}`);
|
|
||||||
try {
|
|
||||||
return JSON.parse(cached.result) as StreamData;
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`[${providerName}] Error parsing cached stream data:`, e);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log(`[${providerName}] Stream data cache expired for episode ${episode}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!extension.findEpisodes || !extension.findEpisodeServer) {
|
|
||||||
throw new Error("Extension doesn't support required methods");
|
|
||||||
}
|
|
||||||
let episodes;
|
|
||||||
|
|
||||||
if (source === "anilist"){
|
|
||||||
const anime: any = await getAnimeById(id)
|
|
||||||
episodes = await searchEpisodesInExtension(extension, extension.constructor.name, anime.title.romaji);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
episodes = await extension.findEpisodes(id);
|
|
||||||
}
|
|
||||||
const targetEp = episodes.find(e => e.number === parseInt(episode));
|
|
||||||
|
|
||||||
if (!targetEp) {
|
|
||||||
throw new Error("Episode not found");
|
|
||||||
}
|
|
||||||
|
|
||||||
const serverName = server || "default";
|
|
||||||
const streamData = await extension.findEpisodeServer(targetEp, serverName);
|
|
||||||
|
|
||||||
await setCache(cacheKey, streamData, CACHE_TTL_MS);
|
|
||||||
return streamData;
|
|
||||||
}
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
|
||||||
import * as booksService from './books.service';
|
|
||||||
import {getExtension} from '../../shared/extensions';
|
|
||||||
import {BookRequest, ChapterRequest, SearchRequest} from '../types';
|
|
||||||
|
|
||||||
export async function getBook(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params;
|
|
||||||
const source = req.query.source;
|
|
||||||
|
|
||||||
let book;
|
|
||||||
if (source === 'anilist') {
|
|
||||||
book = await booksService.getBookById(id);
|
|
||||||
} else {
|
|
||||||
const ext = getExtension(source);
|
|
||||||
const result = await booksService.getBookInfoExtension(ext, id);
|
|
||||||
book = result || null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return book;
|
|
||||||
} catch (err) {
|
|
||||||
return { error: (err as Error).message };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export async function getTrending(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const results = await booksService.getTrendingBooks();
|
|
||||||
return { results };
|
|
||||||
} catch (err) {
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getPopular(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const results = await booksService.getPopularBooks();
|
|
||||||
return { results };
|
|
||||||
} catch (err) {
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchBooks(req: SearchRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const query = req.query.q;
|
|
||||||
|
|
||||||
const dbResults = await booksService.searchBooksLocal(query);
|
|
||||||
if (dbResults.length > 0) {
|
|
||||||
return { results: dbResults };
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`[Books] Local DB miss for "${query}", fetching live...`);
|
|
||||||
const anilistResults = await booksService.searchBooksAniList(query);
|
|
||||||
if (anilistResults.length > 0) {
|
|
||||||
return { results: anilistResults };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { results: [] };
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
const error = e as Error;
|
|
||||||
console.error("Search Error:", error.message);
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchBooksInExtension(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const extensionName = req.params.extension;
|
|
||||||
const query = req.query.q;
|
|
||||||
|
|
||||||
const ext = getExtension(extensionName);
|
|
||||||
if (!ext) return { results: [] };
|
|
||||||
|
|
||||||
const results = await booksService.searchBooksInExtension(ext, extensionName, query);
|
|
||||||
return { results };
|
|
||||||
} catch (e) {
|
|
||||||
const error = e as Error;
|
|
||||||
console.error("Search Error:", error.message);
|
|
||||||
return { results: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getChapters(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params;
|
|
||||||
const source = req.query.source || 'anilist';
|
|
||||||
|
|
||||||
const isExternal = source !== 'anilist';
|
|
||||||
return await booksService.getChaptersForBook(id, isExternal);
|
|
||||||
} catch {
|
|
||||||
return { chapters: [] };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export async function getChapterContent(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { bookId, chapter, provider } = req.params;
|
|
||||||
const source = req.query.source || 'anilist';
|
|
||||||
|
|
||||||
const content = await booksService.getChapterContent(
|
|
||||||
bookId,
|
|
||||||
chapter,
|
|
||||||
provider,
|
|
||||||
source
|
|
||||||
);
|
|
||||||
|
|
||||||
return reply.send(content);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("getChapterContent error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Error loading chapter" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './books.controller';
|
|
||||||
|
|
||||||
async function booksRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/book/:id', controller.getBook);
|
|
||||||
fastify.get('/books/trending', controller.getTrending);
|
|
||||||
fastify.get('/books/popular', controller.getPopular);
|
|
||||||
fastify.get('/search/books', controller.searchBooks);
|
|
||||||
fastify.get('/search/books/:extension', controller.searchBooksInExtension);
|
|
||||||
fastify.get('/book/:id/chapters', controller.getChapters);
|
|
||||||
fastify.get('/book/:bookId/:chapter/:provider', controller.getChapterContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default booksRoutes;
|
|
||||||
@@ -1,572 +0,0 @@
|
|||||||
import { getCachedExtension, cacheExtension, getCache, setCache, getExtensionTitle } from '../../shared/queries';
|
|
||||||
import { queryOne, queryAll, run } from '../../shared/database';
|
|
||||||
import { getAllExtensions, getBookExtensionsMap } from '../../shared/extensions';
|
|
||||||
import { Book, Extension, ChapterWithProvider, ChapterContent } from '../types';
|
|
||||||
|
|
||||||
const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
|
|
||||||
const TTL = 60 * 60 * 6;
|
|
||||||
const ANILIST_URL = "https://graphql.anilist.co";
|
|
||||||
|
|
||||||
async function fetchAniList(query: string, variables: any) {
|
|
||||||
const res = await fetch(ANILIST_URL, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"Accept": "application/json"
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ query, variables })
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error(`AniList error ${res.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
return json?.data;
|
|
||||||
}
|
|
||||||
const MEDIA_FIELDS = `
|
|
||||||
id
|
|
||||||
title {
|
|
||||||
romaji
|
|
||||||
english
|
|
||||||
native
|
|
||||||
userPreferred
|
|
||||||
}
|
|
||||||
type
|
|
||||||
format
|
|
||||||
status
|
|
||||||
description
|
|
||||||
startDate { year month day }
|
|
||||||
endDate { year month day }
|
|
||||||
season
|
|
||||||
seasonYear
|
|
||||||
episodes
|
|
||||||
chapters
|
|
||||||
volumes
|
|
||||||
duration
|
|
||||||
genres
|
|
||||||
synonyms
|
|
||||||
averageScore
|
|
||||||
popularity
|
|
||||||
favourites
|
|
||||||
isAdult
|
|
||||||
siteUrl
|
|
||||||
coverImage {
|
|
||||||
extraLarge
|
|
||||||
large
|
|
||||||
medium
|
|
||||||
color
|
|
||||||
}
|
|
||||||
bannerImage
|
|
||||||
updatedAt
|
|
||||||
`;
|
|
||||||
|
|
||||||
export async function getBookById(id: string | number): Promise<Book | { error: string }> {
|
|
||||||
const row = await queryOne(
|
|
||||||
"SELECT full_data FROM books WHERE id = ?",
|
|
||||||
[id]
|
|
||||||
);
|
|
||||||
|
|
||||||
if (row) {
|
|
||||||
return JSON.parse(row.full_data);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log(`[Book] Local miss for ID ${id}, fetching live...`);
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query ($id: Int) {
|
|
||||||
Media(id: $id, type: MANGA) {
|
|
||||||
id idMal title { romaji english native userPreferred } type format status description
|
|
||||||
startDate { year month day } endDate { year month day } season seasonYear seasonInt
|
|
||||||
episodes duration chapters volumes countryOfOrigin isLicensed source hashtag
|
|
||||||
trailer { id site thumbnail } updatedAt coverImage { extraLarge large medium color }
|
|
||||||
bannerImage genres synonyms averageScore meanScore popularity isLocked trending favourites
|
|
||||||
tags { id name description category rank isGeneralSpoiler isMediaSpoiler isAdult userId }
|
|
||||||
relations { edges { relationType node { id title { romaji } } } }
|
|
||||||
characters(page: 1, perPage: 10) { nodes { id name { full } } }
|
|
||||||
studios { nodes { id name isAnimationStudio } }
|
|
||||||
isAdult nextAiringEpisode { airingAt timeUntilAiring episode }
|
|
||||||
externalLinks { url site }
|
|
||||||
rankings { id rank type format year season allTime context }
|
|
||||||
}
|
|
||||||
}`;
|
|
||||||
|
|
||||||
const response = await fetch('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
query,
|
|
||||||
variables: { id: parseInt(id.toString()) }
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (data?.data?.Media) {
|
|
||||||
const media = data.data.Media;
|
|
||||||
|
|
||||||
const insertSql = `
|
|
||||||
INSERT INTO books (id, title, updatedAt, full_data)
|
|
||||||
VALUES (?, ?, ?, ?)
|
|
||||||
ON CONFLICT(id) DO UPDATE SET
|
|
||||||
title = EXCLUDED.title,
|
|
||||||
updatedAt = EXCLUDED.updatedAt,
|
|
||||||
full_data = EXCLUDED.full_data;
|
|
||||||
`;
|
|
||||||
|
|
||||||
await run(insertSql, [
|
|
||||||
media.id,
|
|
||||||
media.title?.userPreferred || media.title?.romaji || media.title?.english || null,
|
|
||||||
media.updatedAt || Math.floor(Date.now() / 1000),
|
|
||||||
JSON.stringify(media)
|
|
||||||
]);
|
|
||||||
|
|
||||||
return media;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Fetch error:", e);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { error: "Book not found" };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getTrendingBooks(): Promise<Book[]> {
|
|
||||||
const rows = await queryAll(
|
|
||||||
"SELECT full_data, updated_at FROM trending_books ORDER BY rank ASC LIMIT 10"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (rows.length) {
|
|
||||||
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
|
|
||||||
if (!expired) {
|
|
||||||
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query {
|
|
||||||
Page(page: 1, perPage: 10) {
|
|
||||||
media(type: MANGA, sort: TRENDING_DESC) { ${MEDIA_FIELDS} }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const data = await fetchAniList(query, {});
|
|
||||||
const list = data?.Page?.media || [];
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
|
||||||
|
|
||||||
await queryOne("DELETE FROM trending_books");
|
|
||||||
|
|
||||||
let rank = 1;
|
|
||||||
for (const book of list) {
|
|
||||||
await queryOne(
|
|
||||||
"INSERT INTO trending_books (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
|
||||||
[rank++, book.id, JSON.stringify(book), now]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export async function getPopularBooks(): Promise<Book[]> {
|
|
||||||
const rows = await queryAll(
|
|
||||||
"SELECT full_data, updated_at FROM popular_books ORDER BY rank ASC LIMIT 10"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (rows.length) {
|
|
||||||
const expired = (Date.now() / 1000 - rows[0].updated_at) > TTL;
|
|
||||||
if (!expired) {
|
|
||||||
return rows.map((r: { full_data: string }) => JSON.parse(r.full_data));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query {
|
|
||||||
Page(page: 1, perPage: 10) {
|
|
||||||
media(type: MANGA, sort: POPULARITY_DESC) { ${MEDIA_FIELDS} }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const data = await fetchAniList(query, {});
|
|
||||||
const list = data?.Page?.media || [];
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
|
||||||
|
|
||||||
await queryOne("DELETE FROM popular_books");
|
|
||||||
|
|
||||||
let rank = 1;
|
|
||||||
for (const book of list) {
|
|
||||||
await queryOne(
|
|
||||||
"INSERT INTO popular_books (rank, id, full_data, updated_at) VALUES (?, ?, ?, ?)",
|
|
||||||
[rank++, book.id, JSON.stringify(book), now]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export async function searchBooksLocal(query: string): Promise<Book[]> {
|
|
||||||
if (!query || query.length < 2) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const sql = `SELECT full_data FROM books WHERE full_data LIKE ? LIMIT 50`;
|
|
||||||
const rows = await queryAll(sql, [`%${query}%`]);
|
|
||||||
|
|
||||||
const results: Book[] = rows.map((row: { full_data: string; }) => JSON.parse(row.full_data));
|
|
||||||
|
|
||||||
const clean = results.filter(book => {
|
|
||||||
const searchTerms = [
|
|
||||||
book.title.english,
|
|
||||||
book.title.romaji,
|
|
||||||
book.title.native,
|
|
||||||
...(book.synonyms || [])
|
|
||||||
].filter(Boolean).map(t => t!.toLowerCase());
|
|
||||||
|
|
||||||
return searchTerms.some(term => term.includes(query.toLowerCase()));
|
|
||||||
});
|
|
||||||
|
|
||||||
return clean.slice(0, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchBooksAniList(query: string): Promise<Book[]> {
|
|
||||||
const gql = `
|
|
||||||
query ($search: String) {
|
|
||||||
Page(page: 1, perPage: 5) {
|
|
||||||
media(search: $search, type: MANGA, isAdult: false) {
|
|
||||||
id title { romaji english native }
|
|
||||||
coverImage { extraLarge large }
|
|
||||||
bannerImage description averageScore format
|
|
||||||
seasonYear startDate { year }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}`;
|
|
||||||
|
|
||||||
const response = await fetch('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
||||||
body: JSON.stringify({ query: gql, variables: { search: query } })
|
|
||||||
});
|
|
||||||
|
|
||||||
const liveData = await response.json();
|
|
||||||
|
|
||||||
if (liveData.data && liveData.data.Page.media.length > 0) {
|
|
||||||
return liveData.data.Page.media;
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getBookInfoExtension(ext: Extension | null, id: string): Promise<any[]> {
|
|
||||||
if (!ext) return [];
|
|
||||||
|
|
||||||
const extName = ext.constructor.name;
|
|
||||||
|
|
||||||
const cached = await getCachedExtension(extName, id);
|
|
||||||
if (cached) {
|
|
||||||
try {
|
|
||||||
return JSON.parse(cached.metadata);
|
|
||||||
} catch {}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ext.type === 'book-board' && ext.getMetadata) {
|
|
||||||
try {
|
|
||||||
const info = await ext.getMetadata(id);
|
|
||||||
|
|
||||||
if (info) {
|
|
||||||
const normalized = {
|
|
||||||
id: info.id ?? id,
|
|
||||||
title: info.title ?? "",
|
|
||||||
format: info.format ?? "",
|
|
||||||
score: typeof info.score === "number" ? info.score : null,
|
|
||||||
genres: Array.isArray(info.genres) ? info.genres : [],
|
|
||||||
status: info.status ?? "",
|
|
||||||
published: info.published ?? "",
|
|
||||||
summary: info.summary ?? "",
|
|
||||||
chapters: Number.isFinite(info.chapters) ? info.chapters : 1,
|
|
||||||
image: typeof info.image === "string" ? info.image : ""
|
|
||||||
};
|
|
||||||
|
|
||||||
await cacheExtension(extName, id, normalized.title, normalized);
|
|
||||||
return [normalized];
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Extension getInfo failed:`, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchBooksInExtension(ext: Extension | null, name: string, query: string): Promise<Book[]> {
|
|
||||||
if (!ext) return [];
|
|
||||||
|
|
||||||
if ((ext.type === 'book-board') && ext.search) {
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log(`[${name}] Searching for book: ${query}`);
|
|
||||||
|
|
||||||
const matches = await ext.search({
|
|
||||||
query: query,
|
|
||||||
media: {
|
|
||||||
romajiTitle: query,
|
|
||||||
englishTitle: query,
|
|
||||||
startDate: { year: 0, month: 0, day: 0 }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (matches?.length) {
|
|
||||||
return matches.map(m => ({
|
|
||||||
id: m.id,
|
|
||||||
extensionName: name,
|
|
||||||
title: { romaji: m.title, english: m.title, native: null },
|
|
||||||
coverImage: { large: m.image || '' },
|
|
||||||
averageScore: m.rating || m.score || null,
|
|
||||||
format: m.format,
|
|
||||||
seasonYear: null,
|
|
||||||
isExtensionResult: true
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Extension search failed for ${name}:`, e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchBookMetadata(id: string): Promise<Book | null> {
|
|
||||||
try {
|
|
||||||
const query = `query ($id: Int) {
|
|
||||||
Media(id: $id, type: MANGA) {
|
|
||||||
title { romaji english }
|
|
||||||
startDate { year month day }
|
|
||||||
}
|
|
||||||
}`;
|
|
||||||
|
|
||||||
const res = await fetch('https://graphql.anilist.co', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ query, variables: { id: parseInt(id) } })
|
|
||||||
});
|
|
||||||
|
|
||||||
const d = await res.json();
|
|
||||||
return d.data?.Media || null;
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Failed to fetch book metadata:", e);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function searchChaptersInExtension(ext: Extension, name: string, searchTitle: string, search: boolean, origin: string): Promise<ChapterWithProvider[]> {
|
|
||||||
const cacheKey = `chapters:${name}:${origin}:${search ? "search" : "id"}:${searchTitle}`;
|
|
||||||
const cached = await getCache(cacheKey);
|
|
||||||
|
|
||||||
if (cached) {
|
|
||||||
const isExpired = Date.now() - cached.created_at > CACHE_TTL_MS;
|
|
||||||
|
|
||||||
if (!isExpired) {
|
|
||||||
console.log(`[${name}] Chapters cache hit for: ${searchTitle}`);
|
|
||||||
try {
|
|
||||||
return JSON.parse(cached.result) as ChapterWithProvider[];
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`[${name}] Error parsing cached chapters:`, e);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log(`[${name}] Chapters cache expired for: ${searchTitle}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log(`[${name}] Searching chapters for: ${searchTitle}`);
|
|
||||||
|
|
||||||
let mediaId: string;
|
|
||||||
if (search) {
|
|
||||||
const matches = await ext.search!({
|
|
||||||
query: searchTitle,
|
|
||||||
media: {
|
|
||||||
romajiTitle: searchTitle,
|
|
||||||
englishTitle: searchTitle,
|
|
||||||
startDate: { year: 0, month: 0, day: 0 }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const best = matches?.[0];
|
|
||||||
|
|
||||||
if (!best) { return [] }
|
|
||||||
|
|
||||||
mediaId = best.id;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
const match = await ext.getMetadata(searchTitle);
|
|
||||||
mediaId = match.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
const chaps = await ext.findChapters!(mediaId);
|
|
||||||
|
|
||||||
if (!chaps?.length){
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`[${name}] Found ${chaps.length} chapters.`);
|
|
||||||
const result: ChapterWithProvider[] = chaps.map((ch) => ({
|
|
||||||
id: ch.id,
|
|
||||||
number: parseFloat(ch.number.toString()),
|
|
||||||
title: ch.title,
|
|
||||||
date: ch.releaseDate,
|
|
||||||
provider: name,
|
|
||||||
index: ch.index
|
|
||||||
}));
|
|
||||||
|
|
||||||
await setCache(cacheKey, result, CACHE_TTL_MS);
|
|
||||||
return result;
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
const error = e as Error;
|
|
||||||
console.error(`Failed to fetch chapters from ${name}:`, error.message);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getChaptersForBook(id: string, ext: Boolean, onlyProvider?: string): Promise<{ chapters: ChapterWithProvider[] }> {
|
|
||||||
let bookData: Book | null = null;
|
|
||||||
let searchTitle: string = "";
|
|
||||||
|
|
||||||
if (!ext) {
|
|
||||||
const result = await getBookById(id);
|
|
||||||
if (!result || "error" in result) return { chapters: [] }
|
|
||||||
bookData = result;
|
|
||||||
const titles = [bookData.title.english, bookData.title.romaji].filter(Boolean) as string[];
|
|
||||||
searchTitle = titles[0];
|
|
||||||
}
|
|
||||||
const bookExtensions = getBookExtensionsMap();
|
|
||||||
|
|
||||||
let extension;
|
|
||||||
if (!searchTitle) {
|
|
||||||
for (const [name, ext] of bookExtensions) {
|
|
||||||
const title = await getExtensionTitle(name, id)
|
|
||||||
if (title){
|
|
||||||
searchTitle = title;
|
|
||||||
extension = name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const allChapters: any[] = [];
|
|
||||||
let exts = "anilist";
|
|
||||||
if (ext) exts = "ext";
|
|
||||||
|
|
||||||
for (const [name, ext] of bookExtensions) {
|
|
||||||
if (onlyProvider && name !== onlyProvider) continue;
|
|
||||||
if (name == extension) {
|
|
||||||
const chapters = await searchChaptersInExtension(ext, name, id, false, exts);
|
|
||||||
allChapters.push(...chapters);
|
|
||||||
} else {
|
|
||||||
const chapters = await searchChaptersInExtension(ext, name, searchTitle, true, exts);
|
|
||||||
allChapters.push(...chapters);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
chapters: allChapters.sort((a, b) => Number(a.number) - Number(b.number))
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getChapterContent(bookId: string, chapterIndex: string, providerName: string, source: string): Promise<ChapterContent> {
|
|
||||||
const extensions = getAllExtensions();
|
|
||||||
const ext = extensions.get(providerName);
|
|
||||||
|
|
||||||
if (!ext) {
|
|
||||||
throw new Error("Provider not found");
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentCacheKey = `content:${providerName}:${source}:${bookId}:${chapterIndex}`;
|
|
||||||
const cachedContent = await getCache(contentCacheKey);
|
|
||||||
|
|
||||||
if (cachedContent) {
|
|
||||||
const isExpired = Date.now() - cachedContent.created_at > CACHE_TTL_MS;
|
|
||||||
|
|
||||||
if (!isExpired) {
|
|
||||||
console.log(`[${providerName}] Content cache hit for Book ID ${bookId}, Index ${chapterIndex}`);
|
|
||||||
try {
|
|
||||||
return JSON.parse(cachedContent.result) as ChapterContent;
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`[${providerName}] Error parsing cached content:`, e);
|
|
||||||
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log(`[${providerName}] Content cache expired for Book ID ${bookId}, Index ${chapterIndex}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const isExternal = source !== 'anilist';
|
|
||||||
const chapterList = await getChaptersForBook(bookId, isExternal, providerName);
|
|
||||||
|
|
||||||
if (!chapterList?.chapters || chapterList.chapters.length === 0) {
|
|
||||||
throw new Error("Chapters not found");
|
|
||||||
}
|
|
||||||
|
|
||||||
const providerChapters = chapterList.chapters.filter(c => c.provider === providerName);
|
|
||||||
const index = parseInt(chapterIndex, 10);
|
|
||||||
|
|
||||||
if (Number.isNaN(index)) {
|
|
||||||
throw new Error("Invalid chapter index");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!providerChapters[index]) {
|
|
||||||
throw new Error("Chapter index out of range");
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectedChapter = providerChapters[index];
|
|
||||||
|
|
||||||
const chapterId = selectedChapter.id;
|
|
||||||
const chapterTitle = selectedChapter.title || null;
|
|
||||||
const chapterNumber = typeof selectedChapter.number === 'number' ? selectedChapter.number : index;
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (!ext.findChapterPages) {
|
|
||||||
throw new Error("Extension doesn't support findChapterPages");
|
|
||||||
}
|
|
||||||
|
|
||||||
let contentResult: ChapterContent;
|
|
||||||
|
|
||||||
if (ext.mediaType === "manga") {
|
|
||||||
const pages = await ext.findChapterPages(chapterId);
|
|
||||||
contentResult = {
|
|
||||||
type: "manga",
|
|
||||||
chapterId,
|
|
||||||
title: chapterTitle,
|
|
||||||
number: chapterNumber,
|
|
||||||
provider: providerName,
|
|
||||||
pages
|
|
||||||
};
|
|
||||||
} else if (ext.mediaType === "ln") {
|
|
||||||
const content = await ext.findChapterPages(chapterId);
|
|
||||||
contentResult = {
|
|
||||||
type: "ln",
|
|
||||||
chapterId,
|
|
||||||
title: chapterTitle,
|
|
||||||
number: chapterNumber,
|
|
||||||
provider: providerName,
|
|
||||||
content
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
throw new Error("Unknown mediaType");
|
|
||||||
}
|
|
||||||
|
|
||||||
await setCache(contentCacheKey, contentResult, CACHE_TTL_MS);
|
|
||||||
|
|
||||||
return contentResult;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
const error = err as Error;
|
|
||||||
console.error(`[Chapter] Error loading from ${providerName}:`, error.message);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
|
||||||
import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap, saveExtensionFile, deleteExtensionFile } from '../../shared/extensions';
|
|
||||||
import { ExtensionNameRequest } from '../types';
|
|
||||||
|
|
||||||
export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
return { extensions: getExtensionsList() };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAnimeExtensions(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const animeExtensions = getAnimeExtensionsMap();
|
|
||||||
return { extensions: Array.from(animeExtensions.keys()) };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getBookExtensions(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const bookExtensions = getBookExtensionsMap();
|
|
||||||
return { extensions: Array.from(bookExtensions.keys()) };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getGalleryExtensions(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const galleryExtensions = getGalleryExtensionsMap();
|
|
||||||
return { extensions: Array.from(galleryExtensions.keys()) };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getExtensionSettings(req: ExtensionNameRequest, reply: FastifyReply) {
|
|
||||||
const { name } = req.params;
|
|
||||||
const ext = getExtension(name);
|
|
||||||
|
|
||||||
if (!ext) {
|
|
||||||
return { error: "Extension not found" };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!ext.getSettings) {
|
|
||||||
return { episodeServers: ["default"], supportsDub: false };
|
|
||||||
}
|
|
||||||
|
|
||||||
return ext.getSettings();
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function installExtension(req: any, reply: FastifyReply) {
|
|
||||||
const { fileName } = req.body;
|
|
||||||
|
|
||||||
if (!fileName || !fileName.endsWith('.js')) {
|
|
||||||
return reply.code(400).send({ error: "Invalid extension fileName provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
const downloadUrl = `https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions/raw/branch/main/${fileName}`
|
|
||||||
|
|
||||||
await saveExtensionFile(fileName, downloadUrl);
|
|
||||||
|
|
||||||
req.server.log.info(`Extension installed: ${fileName}`);
|
|
||||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} installed successfully.` });
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
req.server.log.error(`Failed to install extension ${fileName}:`, error);
|
|
||||||
return reply.code(500).send({ success: false, error: `Failed to install extension ${fileName}.` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function uninstallExtension(req: any, reply: FastifyReply) {
|
|
||||||
const { fileName } = req.body;
|
|
||||||
|
|
||||||
if (!fileName || !fileName.endsWith('.js')) {
|
|
||||||
return reply.code(400).send({ error: "Invalid extension fileName provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
await deleteExtensionFile(fileName);
|
|
||||||
|
|
||||||
req.server.log.info(`Extension uninstalled: ${fileName}`);
|
|
||||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} uninstalled successfully.` });
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
if (error.code === 'ENOENT') {
|
|
||||||
return reply.code(200).send({ success: true, message: `Extension ${fileName} already uninstalled (file not found).` });
|
|
||||||
}
|
|
||||||
|
|
||||||
req.server.log.error(`Failed to uninstall extension ${fileName}:`, error);
|
|
||||||
return reply.code(500).send({ success: false, error: `Failed to uninstall extension ${fileName}.` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './extensions.controller';
|
|
||||||
|
|
||||||
async function extensionsRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/extensions', controller.getExtensions);
|
|
||||||
fastify.get('/extensions/anime', controller.getAnimeExtensions);
|
|
||||||
fastify.get('/extensions/book', controller.getBookExtensions);
|
|
||||||
fastify.get('/extensions/gallery', controller.getGalleryExtensions);
|
|
||||||
fastify.get('/extensions/:name/settings', controller.getExtensionSettings);
|
|
||||||
fastify.post('/extensions/install', controller.installExtension);
|
|
||||||
fastify.post('/extensions/uninstall', controller.uninstallExtension);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default extensionsRoutes;
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
|
||||||
import * as galleryService from './gallery.service';
|
|
||||||
|
|
||||||
export async function searchInExtension(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const provider = req.query.provider;
|
|
||||||
const query = req.query.q || '';
|
|
||||||
const page = parseInt(req.query.page as string) || 1;
|
|
||||||
const perPage = parseInt(req.query.perPage as string) || 48;
|
|
||||||
|
|
||||||
if (!provider) {
|
|
||||||
return reply.code(400).send({ error: "Missing provider" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return await galleryService.searchInExtension(provider, query, page, perPage);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Gallery SearchInExtension Error:", (err as Error).message);
|
|
||||||
|
|
||||||
return {
|
|
||||||
results: [],
|
|
||||||
total: 0,
|
|
||||||
page: 1,
|
|
||||||
hasNextPage: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getInfo(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params;
|
|
||||||
const provider = req.query.provider;
|
|
||||||
|
|
||||||
return await galleryService.getGalleryInfo(id, provider);
|
|
||||||
} catch (err) {
|
|
||||||
const error = err as Error;
|
|
||||||
console.error("Gallery Info Error:", error.message);
|
|
||||||
return reply.code(404).send({ error: "Gallery item not found" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getFavorites(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
|
|
||||||
const favorites = await galleryService.getFavorites(req.user.id);
|
|
||||||
return { favorites };
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get Favorites Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve favorites" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getFavoriteById(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
|
|
||||||
const favorite = await galleryService.getFavoriteById(id, req.user.id);
|
|
||||||
|
|
||||||
if (!favorite) {
|
|
||||||
return reply.code(404).send({ error: "Favorite not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return { favorite };
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get Favorite By ID Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve favorite" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function addFavorite(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
|
|
||||||
const { id, title, image_url, thumbnail_url, tags, provider, headers } = req.body;
|
|
||||||
|
|
||||||
if (!id || !title || !image_url || !thumbnail_url) {
|
|
||||||
return reply.code(400).send({
|
|
||||||
error: "Missing required fields"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await galleryService.addFavorite({
|
|
||||||
id,
|
|
||||||
user_id: req.user.id,
|
|
||||||
title,
|
|
||||||
image_url,
|
|
||||||
thumbnail_url,
|
|
||||||
tags: tags || '',
|
|
||||||
provider: provider || "",
|
|
||||||
headers: headers || ""
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
return reply.code(201).send(result);
|
|
||||||
} else {
|
|
||||||
return reply.code(409).send(result);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Add Favorite Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to add favorite" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function removeFavorite(req: any, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
if (!req.user) return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
|
|
||||||
const { id } = req.params;
|
|
||||||
|
|
||||||
const result = await galleryService.removeFavorite(id, req.user.id);
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
return { success: true, message: "Favorite removed successfully" };
|
|
||||||
} else {
|
|
||||||
return reply.code(404).send({ error: "Favorite not found" });
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Remove Favorite Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to remove favorite" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './gallery.controller';
|
|
||||||
|
|
||||||
async function galleryRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/gallery/fetch/:id', controller.getInfo);
|
|
||||||
fastify.get('/gallery/search/provider', controller.searchInExtension);
|
|
||||||
fastify.get('/gallery/favorites', controller.getFavorites);
|
|
||||||
fastify.get('/gallery/favorites/:id', controller.getFavoriteById);
|
|
||||||
fastify.post('/gallery/favorites', controller.addFavorite);
|
|
||||||
fastify.delete('/gallery/favorites/:id', controller.removeFavorite);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default galleryRoutes;
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
import { getAllExtensions, getExtension } from '../../shared/extensions';
|
|
||||||
import { GallerySearchResult, GalleryInfo, Favorite, FavoriteResult } from '../types';
|
|
||||||
import { getDatabase } from '../../shared/database';
|
|
||||||
|
|
||||||
export async function getGalleryInfo(id: string, providerName?: string): Promise<any> {
|
|
||||||
const extensions = getAllExtensions();
|
|
||||||
|
|
||||||
if (providerName) {
|
|
||||||
const ext = extensions.get(providerName);
|
|
||||||
if (ext && ext.type === 'image-board' && ext.getInfo) {
|
|
||||||
try {
|
|
||||||
console.log(`[Gallery] Getting info from ${providerName} for: ${id}`);
|
|
||||||
const info = await ext.getInfo(id);
|
|
||||||
return {
|
|
||||||
id: info.id ?? id,
|
|
||||||
provider: providerName,
|
|
||||||
image: info.image,
|
|
||||||
tags: info.tags,
|
|
||||||
title: info.title,
|
|
||||||
headers: info.headers
|
|
||||||
};
|
|
||||||
} catch (e) {
|
|
||||||
const error = e as Error;
|
|
||||||
console.error(`[Gallery] Failed to get info from ${providerName}:`, error.message);
|
|
||||||
throw new Error(`Failed to get gallery info from ${providerName}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
throw new Error("Provider not found or doesn't support getInfo");
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const [name, ext] of extensions) {
|
|
||||||
if (ext.type === 'gallery' && ext.getInfo) {
|
|
||||||
try {
|
|
||||||
console.log(`[Gallery] Trying to get info from ${name} for: ${id}`);
|
|
||||||
const info = await ext.getInfo(id);
|
|
||||||
return {
|
|
||||||
...info,
|
|
||||||
provider: name
|
|
||||||
};
|
|
||||||
} catch {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error("Gallery item not found in any extension");
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchInExtension(providerName: string, query: string, page: number = 1, perPage: number = 48): Promise<any> {
|
|
||||||
const ext = getExtension(providerName);
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log(`[Gallery] Searching ONLY in ${providerName} for: ${query}`);
|
|
||||||
const results = await ext.search(query, page, perPage);
|
|
||||||
|
|
||||||
const normalizedResults = (results?.results ?? []).map((r: any) => ({
|
|
||||||
id: r.id,
|
|
||||||
image: r.image,
|
|
||||||
tags: r.tags,
|
|
||||||
title: r.title,
|
|
||||||
headers: r.headers,
|
|
||||||
provider: providerName
|
|
||||||
}));
|
|
||||||
|
|
||||||
return {
|
|
||||||
page: results.page ?? page,
|
|
||||||
hasNextPage: !!results.hasNextPage,
|
|
||||||
results: normalizedResults
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
const error = e as Error;
|
|
||||||
console.error(`[Gallery] Search failed in ${providerName}:`, error.message);
|
|
||||||
|
|
||||||
return {
|
|
||||||
total: 0,
|
|
||||||
next: 0,
|
|
||||||
previous: 0,
|
|
||||||
pages: 0,
|
|
||||||
page,
|
|
||||||
hasNextPage: false,
|
|
||||||
results: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getFavorites(userId: number): Promise<Favorite[]> {
|
|
||||||
const db = getDatabase("favorites");
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
db.all(
|
|
||||||
'SELECT * FROM favorites WHERE user_id = ?',
|
|
||||||
[userId],
|
|
||||||
(err: Error | null, rows: Favorite[]) => {
|
|
||||||
if (err) {
|
|
||||||
console.error('Error getting favorites:', err.message);
|
|
||||||
resolve([]);
|
|
||||||
} else {
|
|
||||||
resolve(rows);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getFavoriteById(id: string, userId: number): Promise<Favorite | null> {
|
|
||||||
const db = getDatabase("favorites");
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
db.get(
|
|
||||||
'SELECT * FROM favorites WHERE id = ? AND user_id = ?',
|
|
||||||
[id, userId],
|
|
||||||
(err: Error | null, row: Favorite | undefined) => {
|
|
||||||
if (err) {
|
|
||||||
console.error('Error getting favorite by id:', err.message);
|
|
||||||
resolve(null);
|
|
||||||
} else {
|
|
||||||
resolve(row || null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function addFavorite(fav: Favorite & { user_id: number }): Promise<FavoriteResult> {
|
|
||||||
const db = getDatabase("favorites");
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const stmt = `
|
|
||||||
INSERT INTO favorites (id, user_id, title, image_url, thumbnail_url, tags, headers, provider)
|
|
||||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
|
|
||||||
`;
|
|
||||||
|
|
||||||
db.run(
|
|
||||||
stmt,
|
|
||||||
[
|
|
||||||
fav.id,
|
|
||||||
fav.user_id,
|
|
||||||
fav.title,
|
|
||||||
fav.image_url,
|
|
||||||
fav.thumbnail_url,
|
|
||||||
fav.tags || "",
|
|
||||||
fav.headers || "",
|
|
||||||
fav.provider || ""
|
|
||||||
],
|
|
||||||
function (err: any) {
|
|
||||||
if (err) {
|
|
||||||
if (err.code && err.code.includes('SQLITE_CONSTRAINT')) {
|
|
||||||
resolve({ success: false, error: 'Item is already a favorite.' });
|
|
||||||
} else {
|
|
||||||
console.error('Error adding favorite:', err.message);
|
|
||||||
resolve({ success: false, error: err.message });
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
resolve({ success: true, id: fav.id });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function removeFavorite(id: string, userId: number): Promise<FavoriteResult> {
|
|
||||||
const db = getDatabase("favorites");
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const stmt = 'DELETE FROM favorites WHERE id = ? AND user_id = ?';
|
|
||||||
|
|
||||||
db.run(stmt, [id, userId], function (err: Error | null) {
|
|
||||||
if (err) {
|
|
||||||
console.error('Error removing favorite:', err.message);
|
|
||||||
resolve({ success: false, error: err.message });
|
|
||||||
} else {
|
|
||||||
// @ts-ignore
|
|
||||||
resolve({ success: this.changes > 0 });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,166 +0,0 @@
|
|||||||
import {FastifyReply, FastifyRequest} from 'fastify';
|
|
||||||
import * as listService from './list.service';
|
|
||||||
|
|
||||||
interface UserRequest extends FastifyRequest {
|
|
||||||
user?: { id: number };
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EntryParams {
|
|
||||||
entryId: string;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SingleEntryQuery {
|
|
||||||
source: string;
|
|
||||||
entry_type: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getList(req: UserRequest, reply: FastifyReply) {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const results = await listService.getUserList(userId);
|
|
||||||
return { results };
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve list" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getSingleEntry(req: UserRequest, reply: FastifyReply) {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
const { entryId } = req.params as EntryParams;
|
|
||||||
const { source, entry_type } = req.query as SingleEntryQuery;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!entryId || !source || !entry_type) {
|
|
||||||
return reply.code(400).send({ error: "Missing required identifier: entryId, source, or entry_type." });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
const entry = await listService.getSingleListEntry(
|
|
||||||
userId,
|
|
||||||
entryId,
|
|
||||||
source,
|
|
||||||
entry_type
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!entry) {
|
|
||||||
|
|
||||||
return reply.code(404).send({ found: false, message: "Entry not found in user list." });
|
|
||||||
}
|
|
||||||
|
|
||||||
return { found: true, entry: entry };
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve list entry" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function upsertEntry(req: UserRequest, reply: FastifyReply) {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
const body = req.body as any;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!body.entry_id || !body.source || !body.status || !body.entry_type) {
|
|
||||||
return reply.code(400).send({
|
|
||||||
error: "Missing required fields (entry_id, source, status, entry_type)."
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const entryData = {
|
|
||||||
user_id: userId,
|
|
||||||
entry_id: body.entry_id,
|
|
||||||
external_id: body.external_id,
|
|
||||||
source: body.source,
|
|
||||||
entry_type: body.entry_type,
|
|
||||||
status: body.status,
|
|
||||||
progress: body.progress || 0,
|
|
||||||
score: body.score || null,
|
|
||||||
start_date: body.start_date || null,
|
|
||||||
end_date: body.end_date || null,
|
|
||||||
repeat_count: body.repeat_count ?? 0,
|
|
||||||
notes: body.notes || null,
|
|
||||||
is_private: body.is_private ?? 0
|
|
||||||
};
|
|
||||||
|
|
||||||
const result = await listService.upsertListEntry(entryData);
|
|
||||||
|
|
||||||
return { success: true, changes: result.changes };
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return reply.code(500).send({ error: "Failed to save list entry" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteEntry(req: UserRequest, reply: FastifyReply) {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
const { entryId } = req.params as EntryParams;
|
|
||||||
const { source } = req.query as { source?: string }; // ✅ VIENE DEL FRONT
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!entryId || !source) {
|
|
||||||
return reply.code(400).send({ error: "Missing entryId or source." });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await listService.deleteListEntry(
|
|
||||||
userId,
|
|
||||||
entryId,
|
|
||||||
source
|
|
||||||
);
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
return { success: true, external: result.external };
|
|
||||||
} else {
|
|
||||||
return reply.code(404).send({
|
|
||||||
error: "Entry not found or unauthorized to delete."
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return reply.code(500).send({ error: "Failed to delete list entry" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getListByFilter(req: UserRequest, reply: FastifyReply) {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
const { status, entry_type } = req.query as any;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!status && !entry_type) {
|
|
||||||
return reply.code(400).send({
|
|
||||||
error: "At least one filter is required (status or entry_type)."
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const results = await listService.getUserListByFilter(
|
|
||||||
userId,
|
|
||||||
status,
|
|
||||||
entry_type
|
|
||||||
);
|
|
||||||
|
|
||||||
return { results };
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve filtered list" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './list.controller';
|
|
||||||
|
|
||||||
async function listRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/list', controller.getList);
|
|
||||||
fastify.get('/list/entry/:entryId', controller.getSingleEntry);
|
|
||||||
fastify.post('/list/entry', controller.upsertEntry);
|
|
||||||
fastify.delete('/list/entry/:entryId', controller.deleteEntry);
|
|
||||||
fastify.get('/list/filter', controller.getListByFilter);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default listRoutes;
|
|
||||||
@@ -1,584 +0,0 @@
|
|||||||
import {queryAll, run, queryOne} from '../../shared/database';
|
|
||||||
import {getExtension} from '../../shared/extensions';
|
|
||||||
import * as animeService from '../anime/anime.service';
|
|
||||||
import * as booksService from '../books/books.service';
|
|
||||||
import * as aniListService from '../anilist/anilist.service';
|
|
||||||
|
|
||||||
interface ListEntryData {
|
|
||||||
entry_type: any;
|
|
||||||
user_id: number;
|
|
||||||
entry_id: number;
|
|
||||||
|
|
||||||
source: string;
|
|
||||||
|
|
||||||
status: string;
|
|
||||||
|
|
||||||
progress: number;
|
|
||||||
score: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const USER_DB = 'userdata';
|
|
||||||
|
|
||||||
export async function upsertListEntry(entry: any) {
|
|
||||||
const {
|
|
||||||
user_id,
|
|
||||||
entry_id,
|
|
||||||
source,
|
|
||||||
entry_type,
|
|
||||||
status,
|
|
||||||
progress,
|
|
||||||
score,
|
|
||||||
start_date,
|
|
||||||
end_date,
|
|
||||||
repeat_count,
|
|
||||||
notes,
|
|
||||||
is_private
|
|
||||||
} = entry;
|
|
||||||
|
|
||||||
let prev: any = null;
|
|
||||||
|
|
||||||
try {
|
|
||||||
prev = await getSingleListEntry(user_id, entry_id, source, entry_type);
|
|
||||||
} catch {
|
|
||||||
prev = null;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const isNew = !prev;
|
|
||||||
if (!isNew && prev?.progress != null && progress < prev.progress) {
|
|
||||||
return { changes: 0, ignored: true };
|
|
||||||
}
|
|
||||||
|
|
||||||
const today = new Date().toISOString().slice(0, 10);
|
|
||||||
|
|
||||||
if (prev?.start_date && !entry.start_date) {
|
|
||||||
entry.start_date = prev.start_date;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!prev?.start_date && progress === 1) {
|
|
||||||
entry.start_date = today;
|
|
||||||
}
|
|
||||||
|
|
||||||
const total =
|
|
||||||
prev?.total_episodes ??
|
|
||||||
prev?.total_chapters ??
|
|
||||||
null;
|
|
||||||
|
|
||||||
if (total && progress >= total) {
|
|
||||||
entry.status = 'COMPLETED';
|
|
||||||
entry.end_date = today;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (source === 'anilist') {
|
|
||||||
const token = await getActiveAccessToken(user_id);
|
|
||||||
|
|
||||||
if (token) {
|
|
||||||
try {
|
|
||||||
const result = await aniListService.updateAniListEntry(token, {
|
|
||||||
mediaId: entry.entry_id,
|
|
||||||
status: entry.status,
|
|
||||||
progress: entry.progress,
|
|
||||||
score: entry.score,
|
|
||||||
start_date: entry.start_date,
|
|
||||||
end_date: entry.end_date,
|
|
||||||
repeat_count: entry.repeat_count,
|
|
||||||
notes: entry.notes,
|
|
||||||
is_private: entry.is_private
|
|
||||||
});
|
|
||||||
|
|
||||||
return { changes: 0, external: true, anilistResult: result };
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error actualizando AniList:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const sql = `
|
|
||||||
INSERT INTO ListEntry
|
|
||||||
(
|
|
||||||
user_id, entry_id, source, entry_type, status,
|
|
||||||
progress, score,
|
|
||||||
start_date, end_date, repeat_count, notes, is_private,
|
|
||||||
updated_at
|
|
||||||
)
|
|
||||||
VALUES
|
|
||||||
(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
|
|
||||||
ON CONFLICT(user_id, entry_id) DO UPDATE SET
|
|
||||||
source = EXCLUDED.source,
|
|
||||||
entry_type = EXCLUDED.entry_type,
|
|
||||||
status = EXCLUDED.status,
|
|
||||||
progress = EXCLUDED.progress,
|
|
||||||
score = EXCLUDED.score,
|
|
||||||
start_date = EXCLUDED.start_date,
|
|
||||||
end_date = EXCLUDED.end_date,
|
|
||||||
repeat_count = EXCLUDED.repeat_count,
|
|
||||||
notes = EXCLUDED.notes,
|
|
||||||
is_private = EXCLUDED.is_private,
|
|
||||||
updated_at = CURRENT_TIMESTAMP;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const params = [
|
|
||||||
entry.user_id,
|
|
||||||
entry.entry_id,
|
|
||||||
entry.source,
|
|
||||||
entry.entry_type,
|
|
||||||
entry.status,
|
|
||||||
entry.progress,
|
|
||||||
entry.score ?? null,
|
|
||||||
entry.start_date || null,
|
|
||||||
entry.end_date || null,
|
|
||||||
entry.repeat_count ?? 0,
|
|
||||||
entry.notes || null,
|
|
||||||
entry.is_private ?? 0
|
|
||||||
];
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await run(sql, params, USER_DB);
|
|
||||||
return { changes: result.changes, lastID: result.lastID, external: false };
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error al guardar la entrada de lista:", error);
|
|
||||||
throw new Error("Error en la base de datos al guardar la entrada.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUserList(userId: number): Promise<any> {
|
|
||||||
const sql = `
|
|
||||||
SELECT * FROM ListEntry
|
|
||||||
WHERE user_id = ?
|
|
||||||
ORDER BY updated_at DESC;
|
|
||||||
`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const dbList = await queryAll(sql, [userId], USER_DB) as ListEntryData[];
|
|
||||||
const connected = await isConnected(userId);
|
|
||||||
|
|
||||||
let finalList: any[] = [...dbList];
|
|
||||||
|
|
||||||
if (connected) {
|
|
||||||
const anilistEntries = await aniListService.getUserAniList(userId);
|
|
||||||
const localWithoutAnilist = dbList.filter(
|
|
||||||
entry => entry.source !== 'anilist'
|
|
||||||
);
|
|
||||||
|
|
||||||
finalList = [...anilistEntries, ...localWithoutAnilist];
|
|
||||||
}
|
|
||||||
|
|
||||||
const enrichedListPromises = finalList.map(async (entry) => {
|
|
||||||
if (entry.source === 'anilist' && connected) {
|
|
||||||
let finalTitle = entry.title;
|
|
||||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
|
||||||
finalTitle =
|
|
||||||
finalTitle.userPreferred ||
|
|
||||||
finalTitle.english ||
|
|
||||||
finalTitle.romaji ||
|
|
||||||
'Unknown Title';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...entry,
|
|
||||||
title: finalTitle,
|
|
||||||
poster: entry.poster || 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
let contentDetails: any | null = null;
|
|
||||||
const id = entry.entry_id;
|
|
||||||
const type = entry.entry_type;
|
|
||||||
const ext = getExtension(entry.source);
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (type === 'ANIME') {
|
|
||||||
if(entry.source === 'anilist') {
|
|
||||||
const anime: any = await animeService.getAnimeById(id);
|
|
||||||
contentDetails = {
|
|
||||||
title: anime?.title.english || 'Unknown Anime Title',
|
|
||||||
poster: anime?.coverImage?.extraLarge || '',
|
|
||||||
total_episodes: anime?.episodes || 0,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
const anime: any = await animeService.getAnimeInfoExtension(ext, id.toString());
|
|
||||||
|
|
||||||
contentDetails = {
|
|
||||||
title: anime?.title || 'Unknown Anime Title',
|
|
||||||
poster: anime?.image || 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
total_episodes: anime?.episodes || 0,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
} else if (type === 'MANGA' || type === 'NOVEL') {
|
|
||||||
if(entry.source === 'anilist') {
|
|
||||||
const book: any = await booksService.getBookById(id);
|
|
||||||
|
|
||||||
contentDetails = {
|
|
||||||
title: book?.title.english || 'Unknown Book Title',
|
|
||||||
poster: book?.coverImage?.extraLarge || 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
total_chapters: book?.chapters || book?.volumes * 10 || 0,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
const book: any = await booksService.getBookInfoExtension(ext, id.toString());
|
|
||||||
|
|
||||||
contentDetails = {
|
|
||||||
title: book?.title || 'Unknown Book Title',
|
|
||||||
poster: book?.image || '',
|
|
||||||
total_chapters: book?.chapters || book?.volumes * 10 || 0,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch {
|
|
||||||
contentDetails = {
|
|
||||||
title: 'Error Loading Details',
|
|
||||||
poster: 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
let finalTitle = contentDetails?.title || 'Unknown Title';
|
|
||||||
let finalPoster = contentDetails?.poster || 'https://placehold.co/400x600?text=No+Cover';
|
|
||||||
|
|
||||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
|
||||||
finalTitle =
|
|
||||||
finalTitle.userPreferred ||
|
|
||||||
finalTitle.english ||
|
|
||||||
finalTitle.romaji ||
|
|
||||||
'Unknown Title';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...entry,
|
|
||||||
title: finalTitle,
|
|
||||||
poster: finalPoster,
|
|
||||||
total_episodes: contentDetails?.total_episodes,
|
|
||||||
total_chapters: contentDetails?.total_chapters,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return await Promise.all(enrichedListPromises);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error al obtener la lista del usuario:", error);
|
|
||||||
throw new Error("Error getting list.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteListEntry(
|
|
||||||
userId: number,
|
|
||||||
entryId: string | number,
|
|
||||||
source: string
|
|
||||||
) {
|
|
||||||
|
|
||||||
if (source === 'anilist') {
|
|
||||||
const token = await getActiveAccessToken(userId);
|
|
||||||
|
|
||||||
if (token) {
|
|
||||||
try {
|
|
||||||
await aniListService.deleteAniListEntry(
|
|
||||||
token,
|
|
||||||
Number(entryId),
|
|
||||||
);
|
|
||||||
|
|
||||||
return { success: true, external: true };
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error borrando en AniList:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const sql = `
|
|
||||||
DELETE FROM ListEntry
|
|
||||||
WHERE user_id = ? AND entry_id = ?;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const result = await run(sql, [userId, entryId], USER_DB);
|
|
||||||
return { success: result.changes > 0, changes: result.changes, external: false };
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getSingleListEntry(
|
|
||||||
userId: number,
|
|
||||||
entryId: string | number,
|
|
||||||
source: string,
|
|
||||||
entryType: string
|
|
||||||
): Promise<any> {
|
|
||||||
|
|
||||||
const localSql = `
|
|
||||||
SELECT * FROM ListEntry
|
|
||||||
WHERE user_id = ? AND entry_id = ? AND source = ? AND entry_type = ?;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const localResult = await queryAll(
|
|
||||||
localSql,
|
|
||||||
[userId, entryId, source, entryType],
|
|
||||||
USER_DB
|
|
||||||
) as any[];
|
|
||||||
|
|
||||||
if (localResult.length > 0) {
|
|
||||||
const entry = localResult[0];
|
|
||||||
|
|
||||||
const contentDetails: any =
|
|
||||||
entryType === 'ANIME'
|
|
||||||
? await animeService.getAnimeById(entryId).catch(() => null)
|
|
||||||
: await booksService.getBookById(entryId).catch(() => null);
|
|
||||||
|
|
||||||
let finalTitle = contentDetails?.title || 'Unknown';
|
|
||||||
let finalPoster = contentDetails?.coverImage?.extraLarge ||
|
|
||||||
contentDetails?.image ||
|
|
||||||
'https://placehold.co/400x600?text=No+Cover';
|
|
||||||
|
|
||||||
if (typeof finalTitle === 'object') {
|
|
||||||
finalTitle =
|
|
||||||
finalTitle.userPreferred ||
|
|
||||||
finalTitle.english ||
|
|
||||||
finalTitle.romaji ||
|
|
||||||
'Unknown';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...entry,
|
|
||||||
title: finalTitle,
|
|
||||||
poster: finalPoster,
|
|
||||||
total_episodes: contentDetails?.episodes,
|
|
||||||
total_chapters: contentDetails?.chapters,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (source === 'anilist') {
|
|
||||||
|
|
||||||
const connected = await isConnected(userId);
|
|
||||||
if (!connected) return null;
|
|
||||||
|
|
||||||
const sql = `
|
|
||||||
SELECT access_token
|
|
||||||
FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = 'AniList';
|
|
||||||
`;
|
|
||||||
|
|
||||||
const integration = await queryOne(sql, [userId], USER_DB) as any;
|
|
||||||
if (!integration?.access_token) return null;
|
|
||||||
if (entryType === 'NOVEL') {entryType = 'MANGA'}
|
|
||||||
|
|
||||||
const aniEntry = await aniListService.getSingleAniListEntry(
|
|
||||||
integration.access_token,
|
|
||||||
Number(entryId),
|
|
||||||
entryType as any
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!aniEntry) return null;
|
|
||||||
|
|
||||||
const contentDetails: any =
|
|
||||||
entryType === 'ANIME'
|
|
||||||
? await animeService.getAnimeById(entryId).catch(() => null)
|
|
||||||
: await booksService.getBookById(entryId).catch(() => null);
|
|
||||||
|
|
||||||
let finalTitle = contentDetails?.title || 'Unknown';
|
|
||||||
let finalPoster = contentDetails?.coverImage?.extraLarge ||
|
|
||||||
contentDetails?.image ||
|
|
||||||
'https://placehold.co/400x600?text=No+Cover';
|
|
||||||
|
|
||||||
if (typeof finalTitle === 'object') {
|
|
||||||
finalTitle =
|
|
||||||
finalTitle.userPreferred ||
|
|
||||||
finalTitle.english ||
|
|
||||||
finalTitle.romaji ||
|
|
||||||
'Unknown';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
user_id: userId,
|
|
||||||
...aniEntry,
|
|
||||||
title: finalTitle,
|
|
||||||
poster: finalPoster,
|
|
||||||
total_episodes: contentDetails?.episodes,
|
|
||||||
total_chapters: contentDetails?.chapters,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getActiveAccessToken(userId: number): Promise<string | null> {
|
|
||||||
const sql = `
|
|
||||||
SELECT access_token, expires_at
|
|
||||||
FROM UserIntegration
|
|
||||||
WHERE user_id = ? AND platform = 'AniList';
|
|
||||||
`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const integration = await queryOne(sql, [userId], USER_DB) as any | null;
|
|
||||||
|
|
||||||
if (!integration) {
|
|
||||||
return null;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const expiryDate = new Date(integration.expires_at);
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
const fiveMinutes = 5 * 60 * 1000;
|
|
||||||
|
|
||||||
if (expiryDate.getTime() < (now.getTime() + fiveMinutes)) {
|
|
||||||
|
|
||||||
console.log(`AniList token for user ${userId} expired or near expiry.`);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return integration.access_token;
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error al verificar la integración de AniList:", error);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function isConnected(userId: number): Promise<boolean> {
|
|
||||||
const token = await getActiveAccessToken(userId);
|
|
||||||
return !!token;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUserListByFilter(
|
|
||||||
userId: number,
|
|
||||||
status?: string,
|
|
||||||
entryType?: string
|
|
||||||
): Promise<any> {
|
|
||||||
|
|
||||||
let sql = `
|
|
||||||
SELECT * FROM ListEntry
|
|
||||||
WHERE user_id = ?
|
|
||||||
ORDER BY updated_at DESC;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const params: any[] = [userId];
|
|
||||||
|
|
||||||
try {
|
|
||||||
const dbList = await queryAll(sql, params, USER_DB) as ListEntryData[];
|
|
||||||
const connected = await isConnected(userId);
|
|
||||||
|
|
||||||
const statusMap: any = {
|
|
||||||
watching: 'CURRENT',
|
|
||||||
reading: 'CURRENT',
|
|
||||||
completed: 'COMPLETED',
|
|
||||||
paused: 'PAUSED',
|
|
||||||
dropped: 'DROPPED',
|
|
||||||
planning: 'PLANNING'
|
|
||||||
};
|
|
||||||
|
|
||||||
const mappedStatus = status ? statusMap[status.toLowerCase()] : null;
|
|
||||||
|
|
||||||
let finalList: any[] = [];
|
|
||||||
|
|
||||||
const filteredLocal = dbList.filter((entry) => {
|
|
||||||
if (mappedStatus && entry.status !== mappedStatus) return false;
|
|
||||||
|
|
||||||
if (entryType) {
|
|
||||||
if (entryType === 'MANGA') {
|
|
||||||
|
|
||||||
if (!['MANGA', 'NOVEL'].includes(entry.entry_type)) return false;
|
|
||||||
} else {
|
|
||||||
if (entry.entry_type !== entryType) return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
let filteredAniList: any[] = [];
|
|
||||||
|
|
||||||
if (connected) {
|
|
||||||
const anilistEntries = await aniListService.getUserAniList(userId);
|
|
||||||
|
|
||||||
filteredAniList = anilistEntries.filter((entry: any) => {
|
|
||||||
if (mappedStatus && entry.status !== mappedStatus) return false;
|
|
||||||
|
|
||||||
if (entryType) {
|
|
||||||
if (entryType === 'MANGA') {
|
|
||||||
if (!['MANGA', 'NOVEL'].includes(entry.entry_type)) return false;
|
|
||||||
} else {
|
|
||||||
if (entry.entry_type !== entryType) return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
finalList = [...filteredAniList, ...filteredLocal];
|
|
||||||
|
|
||||||
const enrichedListPromises = finalList.map(async (entry) => {
|
|
||||||
|
|
||||||
if (entry.source === 'anilist') {
|
|
||||||
let finalTitle = entry.title;
|
|
||||||
|
|
||||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
|
||||||
finalTitle =
|
|
||||||
finalTitle.userPreferred ||
|
|
||||||
finalTitle.english ||
|
|
||||||
finalTitle.romaji ||
|
|
||||||
'Unknown Title';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...entry,
|
|
||||||
title: finalTitle,
|
|
||||||
poster: entry.poster || 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
let contentDetails: any | null = null;
|
|
||||||
const id = entry.entry_id;
|
|
||||||
const type = entry.entry_type;
|
|
||||||
const ext = getExtension(entry.source);
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (type === 'ANIME') {
|
|
||||||
const anime: any = await animeService.getAnimeInfoExtension(ext, id.toString());
|
|
||||||
|
|
||||||
contentDetails = {
|
|
||||||
title: anime?.title || 'Unknown Anime Title',
|
|
||||||
poster: anime?.image || '',
|
|
||||||
total_episodes: anime?.episodes || 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
} else if (type === 'MANGA' || type === 'NOVEL') {
|
|
||||||
const book: any = await booksService.getBookInfoExtension(ext, id.toString());
|
|
||||||
|
|
||||||
contentDetails = {
|
|
||||||
title: book?.title || 'Unknown Book Title',
|
|
||||||
poster: book?.image || '',
|
|
||||||
total_chapters: book?.chapters || book?.volumes * 10 || 0,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch {
|
|
||||||
contentDetails = {
|
|
||||||
title: 'Error Loading Details',
|
|
||||||
poster: 'https://placehold.co/400x600?text=No+Cover',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
let finalTitle = contentDetails?.title || 'Unknown Title';
|
|
||||||
let finalPoster = contentDetails?.poster || 'https://placehold.co/400x600?text=No+Cover';
|
|
||||||
|
|
||||||
if (typeof finalTitle === 'object' && finalTitle !== null) {
|
|
||||||
finalTitle =
|
|
||||||
finalTitle.userPreferred ||
|
|
||||||
finalTitle.english ||
|
|
||||||
finalTitle.romaji ||
|
|
||||||
'Unknown Title';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...entry,
|
|
||||||
title: finalTitle,
|
|
||||||
poster: finalPoster,
|
|
||||||
total_episodes: contentDetails?.total_episodes,
|
|
||||||
total_chapters: contentDetails?.total_chapters,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return await Promise.all(enrichedListPromises);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error al filtrar la lista del usuario:", error);
|
|
||||||
throw new Error("Error en la base de datos al obtener la lista filtrada.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
import {FastifyReply} from 'fastify';
|
|
||||||
import {processM3U8Content, proxyRequest, streamToReadable} from './proxy.service';
|
|
||||||
import {ProxyRequest} from '../types';
|
|
||||||
|
|
||||||
export async function handleProxy(req: ProxyRequest, reply: FastifyReply) {
|
|
||||||
const { url, referer, origin, userAgent } = req.query;
|
|
||||||
|
|
||||||
if (!url) {
|
|
||||||
return reply.code(400).send({ error: "No URL provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { response, contentType, isM3U8, contentLength } = await proxyRequest(url, {
|
|
||||||
referer,
|
|
||||||
origin,
|
|
||||||
userAgent
|
|
||||||
});
|
|
||||||
|
|
||||||
reply.header('Access-Control-Allow-Origin', '*');
|
|
||||||
reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
|
||||||
reply.header('Access-Control-Allow-Headers', 'Content-Type, Range');
|
|
||||||
reply.header('Access-Control-Expose-Headers', 'Content-Length, Content-Range, Accept-Ranges');
|
|
||||||
|
|
||||||
if (contentType) {
|
|
||||||
reply.header('Content-Type', contentType);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (contentLength) {
|
|
||||||
reply.header('Content-Length', contentLength);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (contentType?.startsWith('image/') || contentType?.startsWith('video/')) {
|
|
||||||
reply.header('Cache-Control', 'public, max-age=31536000, immutable');
|
|
||||||
}
|
|
||||||
|
|
||||||
reply.header('Accept-Ranges', 'bytes');
|
|
||||||
|
|
||||||
if (isM3U8) {
|
|
||||||
const text = await response.text();
|
|
||||||
const baseUrl = new URL(response.url);
|
|
||||||
|
|
||||||
const processedContent = processM3U8Content(text, baseUrl, {
|
|
||||||
referer,
|
|
||||||
origin,
|
|
||||||
userAgent
|
|
||||||
});
|
|
||||||
|
|
||||||
return reply.send(processedContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.send(streamToReadable(response.body!));
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
req.server.log.error(err);
|
|
||||||
|
|
||||||
if (!reply.sent) {
|
|
||||||
return reply.code(500).send({ error: "Internal Server Error" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import { handleProxy } from './proxy.controller';
|
|
||||||
|
|
||||||
async function proxyRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/proxy', handleProxy);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default proxyRoutes;
|
|
||||||
@@ -1,138 +0,0 @@
|
|||||||
import { Readable } from 'stream';
|
|
||||||
|
|
||||||
interface ProxyHeaders {
|
|
||||||
referer?: string;
|
|
||||||
origin?: string;
|
|
||||||
userAgent?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProxyResponse {
|
|
||||||
response: Response;
|
|
||||||
contentType: string | null;
|
|
||||||
isM3U8: boolean;
|
|
||||||
contentLength: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function proxyRequest(url: string, { referer, origin, userAgent }: ProxyHeaders): Promise<ProxyResponse> {
|
|
||||||
const headers: Record<string, string> = {
|
|
||||||
'User-Agent': userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
|
|
||||||
'Accept': '*/*',
|
|
||||||
'Accept-Language': 'en-US,en;q=0.9',
|
|
||||||
'Accept-Encoding': 'identity',
|
|
||||||
|
|
||||||
'Connection': 'keep-alive'
|
|
||||||
};
|
|
||||||
|
|
||||||
if (referer) headers['Referer'] = referer;
|
|
||||||
if (origin) headers['Origin'] = origin;
|
|
||||||
|
|
||||||
let lastError: Error | null = null;
|
|
||||||
const maxRetries = 2;
|
|
||||||
|
|
||||||
for (let attempt = 0; attempt < maxRetries; attempt++) {
|
|
||||||
try {
|
|
||||||
|
|
||||||
const controller = new AbortController();
|
|
||||||
const timeoutId = setTimeout(() => controller.abort(), 60000);
|
|
||||||
|
|
||||||
const response = await fetch(url, {
|
|
||||||
headers,
|
|
||||||
redirect: 'follow',
|
|
||||||
signal: controller.signal
|
|
||||||
});
|
|
||||||
|
|
||||||
clearTimeout(timeoutId);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
|
|
||||||
if (response.status === 404 || response.status === 403) {
|
|
||||||
throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (attempt < maxRetries - 1) {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new Error(`Proxy Error: ${response.status} ${response.statusText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentType = response.headers.get('content-type');
|
|
||||||
const contentLength = response.headers.get('content-length');
|
|
||||||
const isM3U8 = (contentType && contentType.includes('mpegurl')) || url.includes('.m3u8');
|
|
||||||
|
|
||||||
return {
|
|
||||||
response,
|
|
||||||
contentType,
|
|
||||||
isM3U8,
|
|
||||||
contentLength
|
|
||||||
};
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
lastError = error as Error;
|
|
||||||
|
|
||||||
if (attempt === maxRetries - 1) {
|
|
||||||
throw lastError;
|
|
||||||
}
|
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
throw lastError || new Error('Unknown error in proxyRequest');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function processM3U8Content(text: string, baseUrl: URL, { referer, origin, userAgent }: ProxyHeaders): string {
|
|
||||||
return text.replace(/^(?!#)(?!\s*$).+/gm, (line) => {
|
|
||||||
line = line.trim();
|
|
||||||
let absoluteUrl: string;
|
|
||||||
|
|
||||||
try {
|
|
||||||
absoluteUrl = new URL(line, baseUrl).href;
|
|
||||||
} catch (e) {
|
|
||||||
return line;
|
|
||||||
}
|
|
||||||
|
|
||||||
const proxyParams = new URLSearchParams();
|
|
||||||
proxyParams.set('url', absoluteUrl);
|
|
||||||
if (referer) proxyParams.set('referer', referer);
|
|
||||||
if (origin) proxyParams.set('origin', origin);
|
|
||||||
if (userAgent) proxyParams.set('userAgent', userAgent);
|
|
||||||
|
|
||||||
return `/api/proxy?${proxyParams.toString()}`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function streamToReadable(webStream: ReadableStream): Readable {
|
|
||||||
const reader = webStream.getReader();
|
|
||||||
let readTimeout: NodeJS.Timeout;
|
|
||||||
|
|
||||||
return new Readable({
|
|
||||||
async read() {
|
|
||||||
try {
|
|
||||||
|
|
||||||
const timeoutPromise = new Promise((_, reject) => {
|
|
||||||
readTimeout = setTimeout(() => reject(new Error('Stream read timeout')), 10000);
|
|
||||||
});
|
|
||||||
|
|
||||||
const readPromise = reader.read();
|
|
||||||
const { done, value } = await Promise.race([readPromise, timeoutPromise]) as any;
|
|
||||||
|
|
||||||
clearTimeout(readTimeout);
|
|
||||||
|
|
||||||
if (done) {
|
|
||||||
this.push(null);
|
|
||||||
} else {
|
|
||||||
this.push(Buffer.from(value));
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
clearTimeout(readTimeout);
|
|
||||||
this.destroy(error as Error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy(error, callback) {
|
|
||||||
clearTimeout(readTimeout);
|
|
||||||
reader.cancel().then(() => callback(error)).catch(callback);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,294 +0,0 @@
|
|||||||
import { FastifyRequest, FastifyReply } from 'fastify';
|
|
||||||
|
|
||||||
export interface AnimeTitle {
|
|
||||||
romaji: string;
|
|
||||||
english: string | null;
|
|
||||||
native: string | null;
|
|
||||||
userPreferred?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CoverImage {
|
|
||||||
extraLarge?: string;
|
|
||||||
large: string;
|
|
||||||
medium?: string;
|
|
||||||
color?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface StartDate {
|
|
||||||
year: number;
|
|
||||||
month: number;
|
|
||||||
day: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Anime {
|
|
||||||
updatedAt: any;
|
|
||||||
id: number | string;
|
|
||||||
title: AnimeTitle;
|
|
||||||
coverImage: CoverImage;
|
|
||||||
bannerImage?: string;
|
|
||||||
description?: string;
|
|
||||||
averageScore: number | null;
|
|
||||||
format: string;
|
|
||||||
seasonYear: number | null;
|
|
||||||
startDate?: StartDate;
|
|
||||||
synonyms?: string[];
|
|
||||||
extensionName?: string;
|
|
||||||
isExtensionResult?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Book {
|
|
||||||
id: number | string;
|
|
||||||
title: AnimeTitle;
|
|
||||||
coverImage: CoverImage;
|
|
||||||
bannerImage?: string;
|
|
||||||
description?: string;
|
|
||||||
averageScore: number | null;
|
|
||||||
format: string;
|
|
||||||
seasonYear: number | null;
|
|
||||||
startDate?: StartDate;
|
|
||||||
synonyms?: string[];
|
|
||||||
extensionName?: string;
|
|
||||||
isExtensionResult?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ExtensionSearchOptions {
|
|
||||||
query: string;
|
|
||||||
dub?: boolean;
|
|
||||||
media?: {
|
|
||||||
romajiTitle: string;
|
|
||||||
englishTitle: string;
|
|
||||||
startDate: StartDate;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ExtensionSearchResult {
|
|
||||||
format: string;
|
|
||||||
headers: any;
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
image?: string;
|
|
||||||
rating?: number;
|
|
||||||
score?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Episode {
|
|
||||||
url: string;
|
|
||||||
id: string;
|
|
||||||
number: number;
|
|
||||||
title?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Chapter {
|
|
||||||
index: number;
|
|
||||||
id: string;
|
|
||||||
number: string | number;
|
|
||||||
title?: string;
|
|
||||||
releaseDate?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ChapterWithProvider extends Chapter {
|
|
||||||
provider: string;
|
|
||||||
date?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Extension {
|
|
||||||
getMetadata: any;
|
|
||||||
type: 'anime-board' | 'book-board' | 'manga-board';
|
|
||||||
mediaType?: 'manga' | 'ln';
|
|
||||||
search?: (options: ExtensionSearchOptions) => Promise<ExtensionSearchResult[]>;
|
|
||||||
findEpisodes?: (id: string) => Promise<Episode[]>;
|
|
||||||
findEpisodeServer?: (episode: Episode, server: string) => Promise<any>;
|
|
||||||
findChapters?: (id: string) => Promise<Chapter[]>;
|
|
||||||
findChapterPages?: (chapterId: string) => Promise<any>;
|
|
||||||
getSettings?: () => ExtensionSettings;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ExtensionSettings {
|
|
||||||
episodeServers: string[];
|
|
||||||
supportsDub: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface StreamData {
|
|
||||||
url?: string;
|
|
||||||
sources?: any[];
|
|
||||||
subtitles?: any[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface MangaChapterContent {
|
|
||||||
type: 'manga';
|
|
||||||
chapterId: string;
|
|
||||||
title: string | null;
|
|
||||||
number: number;
|
|
||||||
provider: string;
|
|
||||||
pages: any[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface LightNovelChapterContent {
|
|
||||||
type: 'ln';
|
|
||||||
chapterId: string;
|
|
||||||
title: string | null;
|
|
||||||
number: number;
|
|
||||||
provider: string;
|
|
||||||
content: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ChapterContent = MangaChapterContent | LightNovelChapterContent;
|
|
||||||
|
|
||||||
export interface AnimeParams {
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AnimeQuery {
|
|
||||||
source?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SearchQuery {
|
|
||||||
q: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ExtensionNameParams {
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface WatchStreamQuery {
|
|
||||||
source: string;
|
|
||||||
animeId: string;
|
|
||||||
episode: string;
|
|
||||||
server?: string;
|
|
||||||
category?: string;
|
|
||||||
ext: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BookParams {
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BookQuery {
|
|
||||||
ext?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ChapterParams {
|
|
||||||
bookId: string;
|
|
||||||
chapter: string;
|
|
||||||
provider: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ProxyQuery {
|
|
||||||
url: string;
|
|
||||||
referer?: string;
|
|
||||||
origin?: string;
|
|
||||||
userAgent?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type AnimeRequest = FastifyRequest<{
|
|
||||||
Params: AnimeParams;
|
|
||||||
Querystring: AnimeQuery;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export type SearchRequest = FastifyRequest<{
|
|
||||||
Querystring: SearchQuery;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export type ExtensionNameRequest = FastifyRequest<{
|
|
||||||
Params: ExtensionNameParams;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export type WatchStreamRequest = FastifyRequest<{
|
|
||||||
Querystring: WatchStreamQuery;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export type BookRequest = FastifyRequest<{
|
|
||||||
Params: BookParams;
|
|
||||||
Querystring: BookQuery;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export type ChapterRequest = FastifyRequest<{
|
|
||||||
Params: ChapterParams;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export type ProxyRequest = FastifyRequest<{
|
|
||||||
Querystring: ProxyQuery;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export interface GalleryItemPreview {
|
|
||||||
id: string;
|
|
||||||
image: string;
|
|
||||||
tags: string[];
|
|
||||||
type: 'preview';
|
|
||||||
provider?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface GallerySearchResult {
|
|
||||||
total: number;
|
|
||||||
next: number;
|
|
||||||
previous: number;
|
|
||||||
pages: number;
|
|
||||||
page: number;
|
|
||||||
hasNextPage: boolean;
|
|
||||||
results: GalleryItemPreview[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface GalleryInfo {
|
|
||||||
id: string;
|
|
||||||
fullImage: string;
|
|
||||||
resizedImageUrl: string;
|
|
||||||
tags: string[];
|
|
||||||
createdAt: string | null;
|
|
||||||
publishedBy: string;
|
|
||||||
rating: string;
|
|
||||||
comments: any[];
|
|
||||||
provider?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface GalleryExtension {
|
|
||||||
type: 'gallery';
|
|
||||||
search: (query: string, page: number, perPage: number) => Promise<GallerySearchResult>;
|
|
||||||
getInfo: (id: string) => Promise<Omit<GalleryInfo, 'provider'>>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface GallerySearchRequest extends FastifyRequest {
|
|
||||||
query: {
|
|
||||||
q?: string;
|
|
||||||
page?: string;
|
|
||||||
perPage?: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface GalleryInfoRequest extends FastifyRequest {
|
|
||||||
params: {
|
|
||||||
id: string;
|
|
||||||
};
|
|
||||||
query: {
|
|
||||||
provider?: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AddFavoriteBody {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
image_url: string;
|
|
||||||
thumbnail_url: string;
|
|
||||||
tags?: string;
|
|
||||||
provider: string;
|
|
||||||
headers: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RemoveFavoriteParams {
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Favorite {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
image_url: string;
|
|
||||||
thumbnail_url: string;
|
|
||||||
tags: string;
|
|
||||||
provider: string;
|
|
||||||
headers: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FavoriteResult {
|
|
||||||
success: boolean;
|
|
||||||
error?: string;
|
|
||||||
id?: string;
|
|
||||||
}
|
|
||||||
@@ -1,269 +0,0 @@
|
|||||||
import { FastifyReply, FastifyRequest } from 'fastify';
|
|
||||||
import * as userService from './user.service';
|
|
||||||
import {queryOne} from '../../shared/database';
|
|
||||||
import jwt from "jsonwebtoken";
|
|
||||||
|
|
||||||
interface UserIdParams { id: string; }
|
|
||||||
interface CreateUserBody {
|
|
||||||
username: string;
|
|
||||||
profilePictureUrl?: string;
|
|
||||||
password?: string;
|
|
||||||
}
|
|
||||||
interface UpdateUserBody {
|
|
||||||
username?: string;
|
|
||||||
profilePictureUrl?: string | null;
|
|
||||||
password?: string | null;
|
|
||||||
}
|
|
||||||
interface LoginBody {
|
|
||||||
userId: number;
|
|
||||||
password?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DBRunResult { changes: number; lastID: number; }
|
|
||||||
|
|
||||||
export async function getMe(req: any, reply: any) {
|
|
||||||
const userId = req.user?.id;
|
|
||||||
|
|
||||||
if (!userId) {
|
|
||||||
return reply.code(401).send({ error: "Unauthorized" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await queryOne(
|
|
||||||
`SELECT username, profile_picture_url FROM User WHERE id = ?`,
|
|
||||||
[userId],
|
|
||||||
'userdata'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.send({
|
|
||||||
username: user.username,
|
|
||||||
avatar: user.profile_picture_url
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function login(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
const { userId, password } = req.body as LoginBody;
|
|
||||||
|
|
||||||
if (!userId || typeof userId !== "number" || userId <= 0) {
|
|
||||||
return reply.code(400).send({ error: "Invalid userId provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await userService.getUserById(userId);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found in local database" });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si el usuario tiene contraseña, debe proporcionarla
|
|
||||||
if (user.has_password) {
|
|
||||||
if (!password) {
|
|
||||||
return reply.code(401).send({
|
|
||||||
error: "Password required",
|
|
||||||
requiresPassword: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const isValid = await userService.verifyPassword(userId, password);
|
|
||||||
|
|
||||||
if (!isValid) {
|
|
||||||
return reply.code(401).send({ error: "Incorrect password" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const token = jwt.sign(
|
|
||||||
{ id: userId },
|
|
||||||
process.env.JWT_SECRET!,
|
|
||||||
{ expiresIn: "7d" }
|
|
||||||
);
|
|
||||||
|
|
||||||
return reply.code(200).send({
|
|
||||||
success: true,
|
|
||||||
token
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAllUsers(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const users: any = await userService.getAllUsers();
|
|
||||||
return { users };
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get All Users Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve user list" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { username, profilePictureUrl, password } = req.body as CreateUserBody;
|
|
||||||
|
|
||||||
if (!username) {
|
|
||||||
return reply.code(400).send({ error: "Missing required field: username" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const result: any = await userService.createUser(username, profilePictureUrl, password);
|
|
||||||
|
|
||||||
return reply.code(201).send({
|
|
||||||
success: true,
|
|
||||||
userId: result.lastID,
|
|
||||||
username
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
if ((err as Error).message.includes('SQLITE_CONSTRAINT')) {
|
|
||||||
return reply.code(409).send({ error: "Username already exists." });
|
|
||||||
}
|
|
||||||
console.error("Create User Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to create user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as UserIdParams;
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
const user: any = await userService.getUserById(userId);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return { user };
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get User Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to retrieve user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as UserIdParams;
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
const updates = req.body as UpdateUserBody;
|
|
||||||
|
|
||||||
if (Object.keys(updates).length === 0) {
|
|
||||||
return reply.code(400).send({ error: "No update fields provided" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const result: DBRunResult = await userService.updateUser(userId, updates);
|
|
||||||
|
|
||||||
if (result && result.changes > 0) {
|
|
||||||
return { success: true, message: "User updated successfully" };
|
|
||||||
} else {
|
|
||||||
return reply.code(404).send({ error: "User not found or nothing to update" });
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
if ((err as Error).message.includes('SQLITE_CONSTRAINT')) {
|
|
||||||
return reply.code(409).send({ error: "Username already exists or is invalid." });
|
|
||||||
}
|
|
||||||
console.error("Update User Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to update user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteUser(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await userService.deleteUser(userId);
|
|
||||||
|
|
||||||
if (result && result.changes > 0) {
|
|
||||||
return { success: true, message: "User deleted successfully" };
|
|
||||||
} else {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Delete User Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to delete user" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getIntegrationStatus(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const integration = await userService.getAniListIntegration(userId);
|
|
||||||
|
|
||||||
return reply.code(200).send(integration);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Get Integration Status Error:", (err as Error).message);
|
|
||||||
return reply.code(500).send({ error: "Failed to check integration status" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function disconnectAniList(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await userService.removeAniListIntegration(userId);
|
|
||||||
|
|
||||||
if (result.changes === 0) {
|
|
||||||
return reply.code(404).send({ error: "AniList integration not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
return reply.send({ success: true });
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Disconnect AniList Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to disconnect AniList" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function changePassword(req: FastifyRequest, reply: FastifyReply) {
|
|
||||||
try {
|
|
||||||
const { id } = req.params as { id: string };
|
|
||||||
const { currentPassword, newPassword } = req.body as {
|
|
||||||
currentPassword?: string;
|
|
||||||
newPassword: string | null;
|
|
||||||
};
|
|
||||||
const userId = parseInt(id, 10);
|
|
||||||
|
|
||||||
if (!userId || isNaN(userId)) {
|
|
||||||
return reply.code(400).send({ error: "Invalid user id" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const user = await userService.getUserById(userId);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return reply.code(404).send({ error: "User not found" });
|
|
||||||
}
|
|
||||||
|
|
||||||
// Si el usuario tiene contraseña actual, debe proporcionar la contraseña actual
|
|
||||||
if (user.has_password && currentPassword) {
|
|
||||||
const isValid = await userService.verifyPassword(userId, currentPassword);
|
|
||||||
|
|
||||||
if (!isValid) {
|
|
||||||
return reply.code(401).send({ error: "Current password is incorrect" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Actualizar la contraseña (null para eliminarla, string para establecerla)
|
|
||||||
await userService.updateUser(userId, { password: newPassword });
|
|
||||||
|
|
||||||
return reply.send({
|
|
||||||
success: true,
|
|
||||||
message: newPassword ? "Password updated successfully" : "Password removed successfully"
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Change Password Error:", err);
|
|
||||||
return reply.code(500).send({ error: "Failed to change password" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import { FastifyInstance } from 'fastify';
|
|
||||||
import * as controller from './user.controller';
|
|
||||||
|
|
||||||
async function userRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/me',controller.getMe);
|
|
||||||
fastify.post("/login", controller.login);
|
|
||||||
fastify.get('/users', controller.getAllUsers);
|
|
||||||
fastify.post('/users', { bodyLimit: 1024 * 1024 * 50 }, controller.createUser);
|
|
||||||
fastify.get('/users/:id', controller.getUser);
|
|
||||||
fastify.put('/users/:id', { bodyLimit: 1024 * 1024 * 50 }, controller.updateUser);
|
|
||||||
fastify.delete('/users/:id', controller.deleteUser);
|
|
||||||
fastify.get('/users/:id/integration', controller.getIntegrationStatus);
|
|
||||||
fastify.delete('/users/:id/integration', controller.disconnectAniList);
|
|
||||||
fastify.put('/users/:id/password', controller.changePassword);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default userRoutes;
|
|
||||||
@@ -1,301 +0,0 @@
|
|||||||
let animeData = null;
|
|
||||||
let extensionName = null;
|
|
||||||
let animeId = null;
|
|
||||||
|
|
||||||
const episodePagination = Object.create(PaginationManager);
|
|
||||||
episodePagination.init(12, renderEpisodes);
|
|
||||||
|
|
||||||
YouTubePlayerUtils.init('player');
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
loadAnime();
|
|
||||||
setupDescriptionModal();
|
|
||||||
setupEpisodeSearch();
|
|
||||||
});
|
|
||||||
|
|
||||||
async function loadAnime() {
|
|
||||||
try {
|
|
||||||
|
|
||||||
const urlData = URLUtils.parseEntityPath('anime');
|
|
||||||
if (!urlData) {
|
|
||||||
showError("Invalid URL");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
extensionName = urlData.extensionName;
|
|
||||||
animeId = urlData.entityId;
|
|
||||||
|
|
||||||
const fetchUrl = extensionName
|
|
||||||
? `/api/anime/${animeId}?source=${extensionName}`
|
|
||||||
: `/api/anime/${animeId}?source=anilist`;
|
|
||||||
|
|
||||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
showError("Anime Not Found");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
animeData = data;
|
|
||||||
|
|
||||||
const metadata = MediaMetadataUtils.formatAnimeData(data, !!extensionName);
|
|
||||||
|
|
||||||
updatePageTitle(metadata.title);
|
|
||||||
updateMetadata(metadata);
|
|
||||||
updateDescription(data.description || data.summary);
|
|
||||||
updateCharacters(metadata.characters);
|
|
||||||
updateExtensionPill();
|
|
||||||
|
|
||||||
setupWatchButton();
|
|
||||||
|
|
||||||
const hasTrailer = YouTubePlayerUtils.playTrailer(
|
|
||||||
metadata.trailer,
|
|
||||||
'player',
|
|
||||||
metadata.banner
|
|
||||||
);
|
|
||||||
|
|
||||||
setupEpisodes(metadata.episodes);
|
|
||||||
|
|
||||||
await setupAddToListButton();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading anime:', err);
|
|
||||||
showError("Error loading anime");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePageTitle(title) {
|
|
||||||
document.title = `${title} | WaifuBoard`;
|
|
||||||
document.getElementById('title').innerText = title;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateMetadata(metadata) {
|
|
||||||
|
|
||||||
if (metadata.poster) {
|
|
||||||
document.getElementById('poster').src = metadata.poster;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('score').innerText = `${metadata.score}% Score`;
|
|
||||||
|
|
||||||
document.getElementById('year').innerText = metadata.year;
|
|
||||||
|
|
||||||
document.getElementById('genres').innerText = metadata.genres;
|
|
||||||
|
|
||||||
document.getElementById('format').innerText = metadata.format;
|
|
||||||
|
|
||||||
document.getElementById('status').innerText = metadata.status;
|
|
||||||
|
|
||||||
document.getElementById('season').innerText = metadata.season;
|
|
||||||
|
|
||||||
document.getElementById('studio').innerText = metadata.studio;
|
|
||||||
|
|
||||||
document.getElementById('episodes').innerText = metadata.episodes;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateDescription(rawDescription) {
|
|
||||||
const desc = MediaMetadataUtils.truncateDescription(rawDescription, 4);
|
|
||||||
|
|
||||||
document.getElementById('description-preview').innerHTML = desc.short;
|
|
||||||
document.getElementById('full-description').innerHTML = desc.full;
|
|
||||||
|
|
||||||
const readMoreBtn = document.getElementById('read-more-btn');
|
|
||||||
if (desc.isTruncated) {
|
|
||||||
readMoreBtn.style.display = 'inline-flex';
|
|
||||||
} else {
|
|
||||||
readMoreBtn.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCharacters(characters) {
|
|
||||||
const container = document.getElementById('char-list');
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (characters.length > 0) {
|
|
||||||
characters.forEach(char => {
|
|
||||||
container.innerHTML += `
|
|
||||||
<div class="character-item">
|
|
||||||
<div class="char-dot"></div> ${char.name}
|
|
||||||
</div>`;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
container.innerHTML = `
|
|
||||||
<div class="character-item" style="color: #666;">
|
|
||||||
No character data available
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateExtensionPill() {
|
|
||||||
const pill = document.getElementById('extension-pill');
|
|
||||||
if (!pill) return;
|
|
||||||
|
|
||||||
if (extensionName) {
|
|
||||||
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
|
|
||||||
pill.style.display = 'inline-flex';
|
|
||||||
} else {
|
|
||||||
pill.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupWatchButton() {
|
|
||||||
const watchBtn = document.getElementById('watch-btn');
|
|
||||||
if (watchBtn) {
|
|
||||||
watchBtn.onclick = () => {
|
|
||||||
const url = URLUtils.buildWatchUrl(animeId, 1, extensionName);
|
|
||||||
window.location.href = url;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setupAddToListButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if (!btn || !animeData) return;
|
|
||||||
|
|
||||||
ListModalManager.currentData = animeData;
|
|
||||||
const entryType = ListModalManager.getEntryType(animeData);
|
|
||||||
|
|
||||||
await ListModalManager.checkIfInList(animeId, extensionName || 'anilist', entryType);
|
|
||||||
|
|
||||||
const tempBtn = document.querySelector('.hero-buttons .btn-blur');
|
|
||||||
if (tempBtn) {
|
|
||||||
ListModalManager.updateButton('.hero-buttons .btn-blur');
|
|
||||||
} else {
|
|
||||||
|
|
||||||
updateCustomAddButton();
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.onclick = () => ListModalManager.open(animeData, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCustomAddButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
if (ListModalManager.isInList) {
|
|
||||||
btn.innerHTML = `
|
|
||||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
|
||||||
</svg>
|
|
||||||
In Your List
|
|
||||||
`;
|
|
||||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
|
||||||
btn.style.color = '#22c55e';
|
|
||||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
|
||||||
} else {
|
|
||||||
btn.innerHTML = '+ Add to List';
|
|
||||||
btn.style.background = null;
|
|
||||||
btn.style.color = null;
|
|
||||||
btn.style.borderColor = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEpisodes(totalEpisodes) {
|
|
||||||
|
|
||||||
const limitedTotal = Math.min(Math.max(totalEpisodes, 1), 5000);
|
|
||||||
|
|
||||||
episodePagination.setTotalItems(limitedTotal);
|
|
||||||
renderEpisodes();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderEpisodes() {
|
|
||||||
const grid = document.getElementById('episodes-grid');
|
|
||||||
if (!grid) return;
|
|
||||||
|
|
||||||
grid.innerHTML = '';
|
|
||||||
|
|
||||||
const range = episodePagination.getPageRange();
|
|
||||||
const start = range.start + 1;
|
|
||||||
|
|
||||||
const end = range.end;
|
|
||||||
|
|
||||||
for (let i = start; i <= end; i++) {
|
|
||||||
createEpisodeButton(i, grid);
|
|
||||||
}
|
|
||||||
|
|
||||||
episodePagination.renderControls(
|
|
||||||
'pagination-controls',
|
|
||||||
'page-info',
|
|
||||||
'prev-page',
|
|
||||||
'next-page'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createEpisodeButton(num, container) {
|
|
||||||
const btn = document.createElement('div');
|
|
||||||
btn.className = 'episode-btn';
|
|
||||||
btn.innerText = `Ep ${num}`;
|
|
||||||
btn.onclick = () => {
|
|
||||||
const url = URLUtils.buildWatchUrl(animeId, num, extensionName);
|
|
||||||
window.location.href = url;
|
|
||||||
};
|
|
||||||
container.appendChild(btn);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupDescriptionModal() {
|
|
||||||
const modal = document.getElementById('desc-modal');
|
|
||||||
if (!modal) return;
|
|
||||||
|
|
||||||
modal.addEventListener('click', (e) => {
|
|
||||||
if (e.target.id === 'desc-modal') {
|
|
||||||
closeDescriptionModal();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function openDescriptionModal() {
|
|
||||||
document.getElementById('desc-modal').classList.add('active');
|
|
||||||
document.body.style.overflow = 'hidden';
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDescriptionModal() {
|
|
||||||
document.getElementById('desc-modal').classList.remove('active');
|
|
||||||
document.body.style.overflow = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEpisodeSearch() {
|
|
||||||
const searchInput = document.getElementById('ep-search');
|
|
||||||
if (!searchInput) return;
|
|
||||||
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const val = parseInt(e.target.value);
|
|
||||||
const grid = document.getElementById('episodes-grid');
|
|
||||||
const totalEpisodes = episodePagination.totalItems;
|
|
||||||
|
|
||||||
if (val > 0 && val <= totalEpisodes) {
|
|
||||||
grid.innerHTML = '';
|
|
||||||
createEpisodeButton(val, grid);
|
|
||||||
document.getElementById('pagination-controls').style.display = 'none';
|
|
||||||
} else if (!e.target.value) {
|
|
||||||
renderEpisodes();
|
|
||||||
} else {
|
|
||||||
grid.innerHTML = '<div style="color:#666; width:100%; text-align:center;">Episode not found</div>';
|
|
||||||
document.getElementById('pagination-controls').style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showError(message) {
|
|
||||||
document.getElementById('title').innerText = message;
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveToList() {
|
|
||||||
if (!animeId) return;
|
|
||||||
ListModalManager.save(animeId, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteFromList() {
|
|
||||||
if (!animeId) return;
|
|
||||||
ListModalManager.delete(animeId, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeAddToListModal() {
|
|
||||||
ListModalManager.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
window.openDescriptionModal = openDescriptionModal;
|
|
||||||
window.closeDescriptionModal = closeDescriptionModal;
|
|
||||||
window.changePage = (delta) => {
|
|
||||||
if (delta > 0) episodePagination.nextPage();
|
|
||||||
else episodePagination.prevPage();
|
|
||||||
};
|
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
let trendingAnimes = [];
|
|
||||||
let currentHeroIndex = 0;
|
|
||||||
let player;
|
|
||||||
let heroInterval;
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
SearchManager.init('#search-input', '#search-results', 'anime');
|
|
||||||
ContinueWatchingManager.load('my-status', 'watching', 'ANIME');
|
|
||||||
fetchContent();
|
|
||||||
setInterval(() => fetchContent(true), 60000);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (!e.target.closest('.search-wrapper')) {
|
|
||||||
const searchResults = document.getElementById('search-results');
|
|
||||||
const searchInput = document.getElementById('search-input');
|
|
||||||
searchResults.classList.remove('active');
|
|
||||||
searchInput.style.borderRadius = '99px';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function scrollCarousel(id, direction) {
|
|
||||||
const container = document.getElementById(id);
|
|
||||||
if(container) {
|
|
||||||
const scrollAmount = container.clientWidth * 0.75;
|
|
||||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var tag = document.createElement('script');
|
|
||||||
tag.src = "https://www.youtube.com/iframe_api";
|
|
||||||
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
||||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
||||||
|
|
||||||
function onYouTubeIframeAPIReady() {
|
|
||||||
player = new YT.Player('player', {
|
|
||||||
height: '100%',
|
|
||||||
width: '100%',
|
|
||||||
playerVars: {
|
|
||||||
'autoplay': 1,
|
|
||||||
'controls': 0,
|
|
||||||
'mute': 1,
|
|
||||||
'loop': 1,
|
|
||||||
'showinfo': 0,
|
|
||||||
'modestbranding': 1
|
|
||||||
},
|
|
||||||
events: {
|
|
||||||
'onReady': (e) => {
|
|
||||||
e.target.mute();
|
|
||||||
if(trendingAnimes.length) updateHeroVideo(trendingAnimes[currentHeroIndex]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchContent(isUpdate = false) {
|
|
||||||
try {
|
|
||||||
const trendingRes = await fetch('/api/trending');
|
|
||||||
const trendingData = await trendingRes.json();
|
|
||||||
|
|
||||||
if (trendingData.results && trendingData.results.length > 0) {
|
|
||||||
trendingAnimes = trendingData.results;
|
|
||||||
if (!isUpdate) {
|
|
||||||
updateHeroUI(trendingAnimes[0]);
|
|
||||||
startHeroCycle();
|
|
||||||
}
|
|
||||||
renderList('trending', trendingAnimes);
|
|
||||||
} else if (!isUpdate) {
|
|
||||||
setTimeout(() => fetchContent(false), 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
const topRes = await fetch('/api/top-airing');
|
|
||||||
const topData = await topRes.json();
|
|
||||||
if (topData.results && topData.results.length > 0) {
|
|
||||||
renderList('top-airing', topData.results);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Fetch Error:", e);
|
|
||||||
if(!isUpdate) setTimeout(() => fetchContent(false), 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startHeroCycle() {
|
|
||||||
if(heroInterval) clearInterval(heroInterval);
|
|
||||||
heroInterval = setInterval(() => {
|
|
||||||
if(trendingAnimes.length > 0) {
|
|
||||||
currentHeroIndex = (currentHeroIndex + 1) % trendingAnimes.length;
|
|
||||||
updateHeroUI(trendingAnimes[currentHeroIndex]);
|
|
||||||
}
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function updateHeroUI(anime) {
|
|
||||||
if(!anime) return;
|
|
||||||
|
|
||||||
const title = anime.title.english || anime.title.romaji || "Unknown Title";
|
|
||||||
const score = anime.averageScore ? anime.averageScore + '% Match' : 'N/A';
|
|
||||||
const year = anime.seasonYear || '';
|
|
||||||
const type = anime.format || 'TV';
|
|
||||||
const desc = anime.description || 'No description available.';
|
|
||||||
const poster = anime.coverImage ? anime.coverImage.extraLarge : '';
|
|
||||||
const banner = anime.bannerImage || poster;
|
|
||||||
|
|
||||||
document.getElementById('hero-title').innerText = title;
|
|
||||||
document.getElementById('hero-desc').innerHTML = desc;
|
|
||||||
document.getElementById('hero-score').innerText = score;
|
|
||||||
document.getElementById('hero-year').innerText = year;
|
|
||||||
document.getElementById('hero-type').innerText = type;
|
|
||||||
document.getElementById('hero-poster').src = poster;
|
|
||||||
|
|
||||||
const watchBtn = document.getElementById('watch-btn');
|
|
||||||
if(watchBtn) watchBtn.onclick = () => window.location.href = `/anime/${anime.id}`;
|
|
||||||
|
|
||||||
const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
|
|
||||||
if(addToListBtn) {
|
|
||||||
ListModalManager.currentData = anime;
|
|
||||||
const entryType = ListModalManager.getEntryType(anime);
|
|
||||||
|
|
||||||
await ListModalManager.checkIfInList(anime.id, 'anilist', entryType);
|
|
||||||
ListModalManager.updateButton();
|
|
||||||
|
|
||||||
addToListBtn.onclick = () => ListModalManager.open(anime, 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
const bgImg = document.getElementById('hero-bg-media');
|
|
||||||
if(bgImg && bgImg.src !== banner) bgImg.src = banner;
|
|
||||||
|
|
||||||
updateHeroVideo(anime);
|
|
||||||
|
|
||||||
document.getElementById('hero-loading-ui').style.display = 'none';
|
|
||||||
document.getElementById('hero-real-ui').style.display = 'block';
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateHeroVideo(anime) {
|
|
||||||
if (!player || !player.loadVideoById) return;
|
|
||||||
const videoContainer = document.getElementById('player');
|
|
||||||
if (anime.trailer && anime.trailer.site === 'youtube' && anime.trailer.id) {
|
|
||||||
if(player.getVideoData && player.getVideoData().video_id !== anime.trailer.id) {
|
|
||||||
player.loadVideoById(anime.trailer.id);
|
|
||||||
player.mute();
|
|
||||||
}
|
|
||||||
videoContainer.style.opacity = "1";
|
|
||||||
} else {
|
|
||||||
videoContainer.style.opacity = "0";
|
|
||||||
player.stopVideo();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderList(id, list) {
|
|
||||||
const container = document.getElementById(id);
|
|
||||||
const firstId = list.length > 0 ? list[0].id : null;
|
|
||||||
const currentFirstId = container.firstElementChild?.dataset?.id;
|
|
||||||
if (currentFirstId && parseInt(currentFirstId) === firstId && container.children.length === list.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.innerHTML = '';
|
|
||||||
list.forEach(anime => {
|
|
||||||
const title = anime.title.english || anime.title.romaji || "Unknown Title";
|
|
||||||
const cover = anime.coverImage ? anime.coverImage.large : '';
|
|
||||||
const ep = anime.nextAiringEpisode ? 'Ep ' + anime.nextAiringEpisode.episode : (anime.episodes ? anime.episodes + ' Eps' : 'TV');
|
|
||||||
const score = anime.averageScore || '--';
|
|
||||||
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'card';
|
|
||||||
el.dataset.id = anime.id;
|
|
||||||
|
|
||||||
el.onclick = () => window.location.href = `/anime/${anime.id}`;
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
|
||||||
<div class="card-content">
|
|
||||||
<h3>${title}</h3>
|
|
||||||
<p>${score}% • ${ep}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveToList() {
|
|
||||||
const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
|
||||||
if (!animeId) return;
|
|
||||||
ListModalManager.save(animeId, 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteFromList() {
|
|
||||||
const animeId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
|
||||||
if (!animeId) return;
|
|
||||||
ListModalManager.delete(animeId, 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeAddToListModal() {
|
|
||||||
ListModalManager.close();
|
|
||||||
}
|
|
||||||
@@ -1,431 +0,0 @@
|
|||||||
const pathParts = window.location.pathname.split('/');
|
|
||||||
const animeId = pathParts[2];
|
|
||||||
const currentEpisode = parseInt(pathParts[3]);
|
|
||||||
|
|
||||||
let audioMode = 'sub';
|
|
||||||
let currentExtension = '';
|
|
||||||
let plyrInstance;
|
|
||||||
let hlsInstance;
|
|
||||||
let totalEpisodes = 0;
|
|
||||||
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
|
||||||
const firstKey = params.keys().next().value;
|
|
||||||
let extName;
|
|
||||||
if (firstKey) extName = firstKey;
|
|
||||||
|
|
||||||
const href = extName
|
|
||||||
? `/anime/${extName}/${animeId}`
|
|
||||||
: `/anime/${animeId}`;
|
|
||||||
|
|
||||||
document.getElementById('back-link').href = href;
|
|
||||||
document.getElementById('episode-label').innerText = `Episode ${currentEpisode}`;
|
|
||||||
|
|
||||||
async function loadMetadata() {
|
|
||||||
try {
|
|
||||||
const extQuery = extName ? `?source=${extName}` : "?source=anilist";
|
|
||||||
const res = await fetch(`/api/anime/${animeId}${extQuery}`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
console.error("Error from API:", data.error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isAnilistFormat = data.title && (data.title.romaji || data.title.english);
|
|
||||||
|
|
||||||
let title = '';
|
|
||||||
let description = '';
|
|
||||||
let coverImage = '';
|
|
||||||
let averageScore = '';
|
|
||||||
let format = '';
|
|
||||||
let seasonYear = '';
|
|
||||||
let season = '';
|
|
||||||
let episodesCount = 0;
|
|
||||||
let characters = [];
|
|
||||||
|
|
||||||
if (isAnilistFormat) {
|
|
||||||
|
|
||||||
title = data.title.romaji || data.title.english || data.title.native || 'Anime Title';
|
|
||||||
description = data.description || 'No description available.';
|
|
||||||
coverImage = data.coverImage?.large || data.coverImage?.medium || '';
|
|
||||||
averageScore = data.averageScore ? `${data.averageScore}%` : '--';
|
|
||||||
format = data.format || '--';
|
|
||||||
season = data.season ? data.season.charAt(0) + data.season.slice(1).toLowerCase() : '';
|
|
||||||
seasonYear = data.seasonYear || '';
|
|
||||||
} else {
|
|
||||||
title = data.title || 'Anime Title';
|
|
||||||
description = data.summary || 'No description available.';
|
|
||||||
coverImage = data.image || '';
|
|
||||||
averageScore = data.score ? `${Math.round(data.score * 10)}%` : '--';
|
|
||||||
format = '--';
|
|
||||||
season = data.season || '';
|
|
||||||
seasonYear = data.year || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('anime-title-details').innerText = title;
|
|
||||||
document.getElementById('anime-title-details2').innerText = title;
|
|
||||||
document.title = `Watching ${title} - Ep ${currentEpisode}`;
|
|
||||||
|
|
||||||
fetch("/api/rpc", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {"Content-Type": "application/json"},
|
|
||||||
body: JSON.stringify({
|
|
||||||
details: title,
|
|
||||||
state: `Episode ${currentEpisode}`,
|
|
||||||
mode: "watching"
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const tempDiv = document.createElement('div');
|
|
||||||
tempDiv.innerHTML = description;
|
|
||||||
document.getElementById('detail-description').innerText = tempDiv.textContent || tempDiv.innerText || 'No description available.';
|
|
||||||
|
|
||||||
document.getElementById('detail-format').innerText = format;
|
|
||||||
document.getElementById('detail-score').innerText = averageScore;
|
|
||||||
document.getElementById('detail-season').innerText = season && seasonYear ? `${season} ${seasonYear}` : (season || seasonYear || '--');
|
|
||||||
document.getElementById('detail-cover-image').src = coverImage || '/default-cover.jpg';
|
|
||||||
|
|
||||||
if (extName) {
|
|
||||||
await loadExtensionEpisodes();
|
|
||||||
} else {
|
|
||||||
if (data.nextAiringEpisode?.episode) {
|
|
||||||
totalEpisodes = data.nextAiringEpisode.episode - 1;
|
|
||||||
} else if (data.episodes) {
|
|
||||||
totalEpisodes = data.episodes;
|
|
||||||
} else {
|
|
||||||
totalEpisodes = 12;
|
|
||||||
}
|
|
||||||
const simpleEpisodes = [];
|
|
||||||
for (let i = 1; i <= totalEpisodes; i++) {
|
|
||||||
simpleEpisodes.push({
|
|
||||||
number: i,
|
|
||||||
title: null,
|
|
||||||
thumbnail: null,
|
|
||||||
isDub: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
populateEpisodeCarousel(simpleEpisodes);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentEpisode >= totalEpisodes && totalEpisodes > 0) {
|
|
||||||
document.getElementById('next-btn').disabled = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading metadata:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadExtensionEpisodes() {
|
|
||||||
try {
|
|
||||||
const extQuery = extName ? `?source=${extName}` : "?source=anilist";
|
|
||||||
const res = await fetch(`/api/anime/${animeId}/episodes${extQuery}`);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
totalEpisodes = Array.isArray(data) ? data.length : 0;
|
|
||||||
|
|
||||||
if (Array.isArray(data) && data.length > 0) {
|
|
||||||
populateEpisodeCarousel(data);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
const fallback = [];
|
|
||||||
for (let i = 1; i <= totalEpisodes; i++) {
|
|
||||||
fallback.push({ number: i, title: null, thumbnail: null });
|
|
||||||
}
|
|
||||||
populateEpisodeCarousel(fallback);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Error cargando episodios por extensión:", e);
|
|
||||||
totalEpisodes = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function populateEpisodeCarousel(episodesData) {
|
|
||||||
const carousel = document.getElementById('episode-carousel');
|
|
||||||
carousel.innerHTML = '';
|
|
||||||
|
|
||||||
episodesData.forEach((ep, index) => {
|
|
||||||
const epNumber = ep.number || ep.episodeNumber || ep.id || (index + 1);
|
|
||||||
if (!epNumber) return;
|
|
||||||
|
|
||||||
const extParam = extName ? `?${extName}` : "";
|
|
||||||
const hasThumbnail = ep.thumbnail && ep.thumbnail.trim() !== '';
|
|
||||||
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = `/watch/${animeId}/${epNumber}${extParam}`;
|
|
||||||
link.classList.add('carousel-item');
|
|
||||||
link.dataset.episode = epNumber;
|
|
||||||
|
|
||||||
if (!hasThumbnail) link.classList.add('no-thumbnail');
|
|
||||||
if (parseInt(epNumber) === currentEpisode) link.classList.add('active-ep-carousel');
|
|
||||||
|
|
||||||
const imgContainer = document.createElement('div');
|
|
||||||
imgContainer.classList.add('carousel-item-img-container');
|
|
||||||
|
|
||||||
if (hasThumbnail) {
|
|
||||||
const img = document.createElement('img');
|
|
||||||
img.classList.add('carousel-item-img');
|
|
||||||
img.src = ep.thumbnail;
|
|
||||||
img.alt = `Episode ${epNumber} Thumbnail`;
|
|
||||||
imgContainer.appendChild(img);
|
|
||||||
}
|
|
||||||
|
|
||||||
link.appendChild(imgContainer);
|
|
||||||
|
|
||||||
const info = document.createElement('div');
|
|
||||||
info.classList.add('carousel-item-info');
|
|
||||||
|
|
||||||
const title = document.createElement('p');
|
|
||||||
title.innerText = `Ep ${epNumber}: ${ep.title || 'Untitled'}`;
|
|
||||||
|
|
||||||
info.appendChild(title);
|
|
||||||
link.appendChild(info);
|
|
||||||
carousel.appendChild(link);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadExtensions() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/extensions/anime');
|
|
||||||
const data = await res.json();
|
|
||||||
const select = document.getElementById('extension-select');
|
|
||||||
|
|
||||||
if (data.extensions && data.extensions.length > 0) {
|
|
||||||
select.innerHTML = '';
|
|
||||||
data.extensions.forEach(ext => {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = opt.innerText = ext;
|
|
||||||
select.appendChild(opt);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (typeof extName === 'string' && data.extensions.includes(extName)) {
|
|
||||||
select.value = extName;
|
|
||||||
} else {
|
|
||||||
select.selectedIndex = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentExtension = select.value;
|
|
||||||
onExtensionChange();
|
|
||||||
} else {
|
|
||||||
select.innerHTML = '<option>No Extensions</option>';
|
|
||||||
select.disabled = true;
|
|
||||||
setLoading("No anime extensions found.");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Extension Error:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onExtensionChange() {
|
|
||||||
const select = document.getElementById('extension-select');
|
|
||||||
currentExtension = select.value;
|
|
||||||
setLoading("Fetching extension settings...");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/extensions/${currentExtension}/settings`);
|
|
||||||
const settings = await res.json();
|
|
||||||
|
|
||||||
const toggle = document.getElementById('sd-toggle');
|
|
||||||
if (settings.supportsDub) {
|
|
||||||
toggle.style.display = 'flex';
|
|
||||||
setAudioMode('sub');
|
|
||||||
} else {
|
|
||||||
toggle.style.display = 'none';
|
|
||||||
setAudioMode('sub');
|
|
||||||
}
|
|
||||||
|
|
||||||
const serverSelect = document.getElementById('server-select');
|
|
||||||
serverSelect.innerHTML = '';
|
|
||||||
if (settings.episodeServers && settings.episodeServers.length > 0) {
|
|
||||||
settings.episodeServers.forEach(srv => {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = srv;
|
|
||||||
opt.innerText = srv;
|
|
||||||
serverSelect.appendChild(opt);
|
|
||||||
});
|
|
||||||
serverSelect.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
serverSelect.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
loadStream();
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
setLoading("Failed to load extension settings.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleAudioMode() {
|
|
||||||
const newMode = audioMode === 'sub' ? 'dub' : 'sub';
|
|
||||||
setAudioMode(newMode);
|
|
||||||
loadStream();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setAudioMode(mode) {
|
|
||||||
audioMode = mode;
|
|
||||||
const toggle = document.getElementById('sd-toggle');
|
|
||||||
const subOpt = document.getElementById('opt-sub');
|
|
||||||
const dubOpt = document.getElementById('opt-dub');
|
|
||||||
|
|
||||||
toggle.setAttribute('data-state', mode);
|
|
||||||
subOpt.classList.toggle('active', mode === 'sub');
|
|
||||||
dubOpt.classList.toggle('active', mode === 'dub');
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadStream() {
|
|
||||||
if (!currentExtension) return;
|
|
||||||
|
|
||||||
const serverSelect = document.getElementById('server-select');
|
|
||||||
const server = serverSelect.value || "default";
|
|
||||||
|
|
||||||
setLoading(`Loading stream (${audioMode})...`);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let sourc = "&source=anilist";
|
|
||||||
if (extName){
|
|
||||||
sourc = `&source=${extName}`;
|
|
||||||
}
|
|
||||||
const url = `/api/watch/stream?animeId=${animeId}&episode=${currentEpisode}&server=${server}&category=${audioMode}&ext=${currentExtension}${sourc}`;
|
|
||||||
const res = await fetch(url);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
setLoading(`Error: ${data.error}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!data.videoSources || data.videoSources.length === 0) {
|
|
||||||
setLoading("No video sources found.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const source = data.videoSources.find(s => s.type === 'm3u8') || data.videoSources[0];
|
|
||||||
const headers = data.headers || {};
|
|
||||||
|
|
||||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(source.url)}`;
|
|
||||||
if (headers['Referer']) proxyUrl += `&referer=${encodeURIComponent(headers['Referer'])}`;
|
|
||||||
if (headers['Origin']) proxyUrl += `&origin=${encodeURIComponent(headers['Origin'])}`;
|
|
||||||
if (headers['User-Agent']) proxyUrl += `&userAgent=${encodeURIComponent(headers['User-Agent'])}`;
|
|
||||||
|
|
||||||
playVideo(proxyUrl, data.videoSources[0].subtitles || data.subtitles);
|
|
||||||
document.getElementById('loading-overlay').style.display = 'none';
|
|
||||||
} catch (error) {
|
|
||||||
setLoading("Stream error. Check console.");
|
|
||||||
console.error(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function playVideo(url, subtitles = []) {
|
|
||||||
const video = document.getElementById('player');
|
|
||||||
|
|
||||||
if (Hls.isSupported()) {
|
|
||||||
if (hlsInstance) hlsInstance.destroy();
|
|
||||||
hlsInstance = new Hls({ xhrSetup: (xhr) => xhr.withCredentials = false });
|
|
||||||
hlsInstance.loadSource(url);
|
|
||||||
hlsInstance.attachMedia(video);
|
|
||||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
||||||
video.src = url;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (plyrInstance) plyrInstance.destroy();
|
|
||||||
|
|
||||||
while (video.textTracks.length > 0) {
|
|
||||||
video.removeChild(video.textTracks[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
subtitles.forEach(sub => {
|
|
||||||
if (!sub.url) return;
|
|
||||||
const track = document.createElement('track');
|
|
||||||
track.kind = 'captions';
|
|
||||||
track.label = sub.language || 'Unknown';
|
|
||||||
track.srclang = (sub.language || '').slice(0, 2).toLowerCase();
|
|
||||||
track.src = sub.url;
|
|
||||||
if (sub.default || sub.language?.toLowerCase().includes('english')) track.default = true;
|
|
||||||
video.appendChild(track);
|
|
||||||
});
|
|
||||||
|
|
||||||
plyrInstance = new Plyr(video, {
|
|
||||||
captions: { active: true, update: true, language: 'en' },
|
|
||||||
controls: ['play-large', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
|
||||||
settings: ['captions', 'quality', 'speed']
|
|
||||||
});
|
|
||||||
|
|
||||||
let alreadyTriggered = false;
|
|
||||||
|
|
||||||
video.addEventListener('timeupdate', () => {
|
|
||||||
if (!video.duration) return;
|
|
||||||
|
|
||||||
const percent = (video.currentTime / video.duration) * 100;
|
|
||||||
|
|
||||||
if (percent >= 80 && !alreadyTriggered) {
|
|
||||||
alreadyTriggered = true;
|
|
||||||
sendProgress();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
video.play().catch(() => console.log("Autoplay blocked"));
|
|
||||||
}
|
|
||||||
|
|
||||||
function setLoading(message) {
|
|
||||||
const overlay = document.getElementById('loading-overlay');
|
|
||||||
const text = document.getElementById('loading-text');
|
|
||||||
overlay.style.display = 'flex';
|
|
||||||
text.innerText = message;
|
|
||||||
}
|
|
||||||
|
|
||||||
const extParam = extName ? `?${extName}` : "";
|
|
||||||
|
|
||||||
document.getElementById('prev-btn').onclick = () => {
|
|
||||||
if (currentEpisode > 1) {
|
|
||||||
window.location.href = `/watch/${animeId}/${currentEpisode - 1}${extParam}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById('next-btn').onclick = () => {
|
|
||||||
if (currentEpisode < totalEpisodes || totalEpisodes === 0) {
|
|
||||||
window.location.href = `/watch/${animeId}/${currentEpisode + 1}${extParam}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (currentEpisode <= 1) {
|
|
||||||
document.getElementById('prev-btn').disabled = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
async function sendProgress() {
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
if (!token) return;
|
|
||||||
|
|
||||||
const source = extName
|
|
||||||
? extName
|
|
||||||
: "anilist";
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
entry_id: animeId,
|
|
||||||
source: source,
|
|
||||||
entry_type: "ANIME",
|
|
||||||
status: 'CURRENT',
|
|
||||||
progress: source === 'anilist'
|
|
||||||
? Math.floor(currentEpisode)
|
|
||||||
: currentEpisode
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
await fetch('/api/list/entry', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': `Bearer ${token}`
|
|
||||||
},
|
|
||||||
body: JSON.stringify(body)
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error updating progress:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
loadMetadata();
|
|
||||||
loadExtensions();
|
|
||||||
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
;(() => {
|
|
||||||
const token = localStorage.getItem("token")
|
|
||||||
|
|
||||||
if (!token && window.location.pathname !== "/") {
|
|
||||||
window.location.href = "/"
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
async function loadMeUI() {
|
|
||||||
const token = localStorage.getItem("token")
|
|
||||||
if (!token) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch("/api/me", {
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!res.ok) return
|
|
||||||
|
|
||||||
const user = await res.json()
|
|
||||||
|
|
||||||
const navUser = document.getElementById("nav-user")
|
|
||||||
const navUsername = document.getElementById("nav-username")
|
|
||||||
const navAvatar = document.getElementById("nav-avatar")
|
|
||||||
const dropdownAvatar = document.getElementById("dropdown-avatar")
|
|
||||||
|
|
||||||
if (!navUser || !navUsername || !navAvatar) return
|
|
||||||
|
|
||||||
navUser.style.display = "flex"
|
|
||||||
navUsername.textContent = user.username
|
|
||||||
|
|
||||||
const avatarUrl = user.avatar || "/public/assets/avatar.png"
|
|
||||||
navAvatar.src = avatarUrl
|
|
||||||
if (dropdownAvatar) {
|
|
||||||
dropdownAvatar.src = avatarUrl
|
|
||||||
}
|
|
||||||
|
|
||||||
setupDropdown()
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Failed to load user UI:", e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupDropdown() {
|
|
||||||
const userAvatarBtn = document.querySelector(".user-avatar-btn")
|
|
||||||
const navDropdown = document.getElementById("nav-dropdown")
|
|
||||||
const navLogout = document.getElementById("nav-logout")
|
|
||||||
|
|
||||||
if (!userAvatarBtn || !navDropdown || !navLogout) return
|
|
||||||
|
|
||||||
userAvatarBtn.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
navDropdown.classList.toggle("active")
|
|
||||||
})
|
|
||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
|
||||||
if (!navDropdown.contains(e.target)) {
|
|
||||||
navDropdown.classList.remove("active")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
navDropdown.addEventListener("click", (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
})
|
|
||||||
|
|
||||||
navLogout.addEventListener("click", () => {
|
|
||||||
localStorage.removeItem("token")
|
|
||||||
window.location.href = "/"
|
|
||||||
})
|
|
||||||
|
|
||||||
const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item")
|
|
||||||
dropdownLinks.forEach((link) => {
|
|
||||||
link.addEventListener("click", () => {
|
|
||||||
navDropdown.classList.remove("active")
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
loadMeUI()
|
|
||||||
@@ -1,342 +0,0 @@
|
|||||||
let bookData = null;
|
|
||||||
let extensionName = null;
|
|
||||||
let bookId = null;
|
|
||||||
let bookSlug = null;
|
|
||||||
|
|
||||||
let allChapters = [];
|
|
||||||
let filteredChapters = [];
|
|
||||||
|
|
||||||
const chapterPagination = Object.create(PaginationManager);
|
|
||||||
chapterPagination.init(12, () => renderChapterTable());
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
init();
|
|
||||||
setupModalClickOutside();
|
|
||||||
});
|
|
||||||
|
|
||||||
async function init() {
|
|
||||||
try {
|
|
||||||
|
|
||||||
const urlData = URLUtils.parseEntityPath('book');
|
|
||||||
if (!urlData) {
|
|
||||||
showError("Book Not Found");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
extensionName = urlData.extensionName;
|
|
||||||
bookId = urlData.entityId;
|
|
||||||
bookSlug = urlData.slug;
|
|
||||||
|
|
||||||
await loadBookMetadata();
|
|
||||||
|
|
||||||
await loadChapters();
|
|
||||||
|
|
||||||
await setupAddToListButton();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Metadata Error:", err);
|
|
||||||
showError("Error loading book");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadBookMetadata() {
|
|
||||||
const source = extensionName || 'anilist';
|
|
||||||
const fetchUrl = `/api/book/${bookId}?source=${source}`;
|
|
||||||
|
|
||||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.error || !data) {
|
|
||||||
showError("Book Not Found");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const raw = Array.isArray(data) ? data[0] : data;
|
|
||||||
bookData = raw;
|
|
||||||
|
|
||||||
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
|
|
||||||
|
|
||||||
updatePageTitle(metadata.title);
|
|
||||||
updateMetadata(metadata);
|
|
||||||
updateExtensionPill();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePageTitle(title) {
|
|
||||||
document.title = `${title} | WaifuBoard Books`;
|
|
||||||
const titleEl = document.getElementById('title');
|
|
||||||
if (titleEl) titleEl.innerText = title;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateMetadata(metadata) {
|
|
||||||
|
|
||||||
const descEl = document.getElementById('description');
|
|
||||||
if (descEl) descEl.innerHTML = metadata.description;
|
|
||||||
|
|
||||||
const scoreEl = document.getElementById('score');
|
|
||||||
if (scoreEl) {
|
|
||||||
scoreEl.innerText = extensionName
|
|
||||||
? `${metadata.score}`
|
|
||||||
: `${metadata.score}% Score`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const pubEl = document.getElementById('published-date');
|
|
||||||
if (pubEl) pubEl.innerText = metadata.year;
|
|
||||||
|
|
||||||
const statusEl = document.getElementById('status');
|
|
||||||
if (statusEl) statusEl.innerText = metadata.status;
|
|
||||||
|
|
||||||
const formatEl = document.getElementById('format');
|
|
||||||
if (formatEl) formatEl.innerText = metadata.format;
|
|
||||||
|
|
||||||
const chaptersEl = document.getElementById('chapters');
|
|
||||||
if (chaptersEl) chaptersEl.innerText = metadata.chapters;
|
|
||||||
|
|
||||||
const genresEl = document.getElementById('genres');
|
|
||||||
if (genresEl) genresEl.innerText = metadata.genres;
|
|
||||||
|
|
||||||
const posterEl = document.getElementById('poster');
|
|
||||||
if (posterEl) posterEl.src = metadata.poster;
|
|
||||||
|
|
||||||
const heroBgEl = document.getElementById('hero-bg');
|
|
||||||
if (heroBgEl) heroBgEl.src = metadata.banner;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateExtensionPill() {
|
|
||||||
const pill = document.getElementById('extension-pill');
|
|
||||||
if (!pill) return;
|
|
||||||
|
|
||||||
if (extensionName) {
|
|
||||||
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
|
|
||||||
pill.style.display = 'inline-flex';
|
|
||||||
} else {
|
|
||||||
pill.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setupAddToListButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if (!btn || !bookData) return;
|
|
||||||
|
|
||||||
ListModalManager.currentData = bookData;
|
|
||||||
const entryType = ListModalManager.getEntryType(bookData);
|
|
||||||
const idForCheck = extensionName ? bookSlug : bookId;
|
|
||||||
|
|
||||||
await ListModalManager.checkIfInList(
|
|
||||||
idForCheck,
|
|
||||||
extensionName || 'anilist',
|
|
||||||
entryType
|
|
||||||
);
|
|
||||||
|
|
||||||
updateCustomAddButton();
|
|
||||||
|
|
||||||
btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCustomAddButton() {
|
|
||||||
const btn = document.getElementById('add-to-list-btn');
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
if (ListModalManager.isInList) {
|
|
||||||
btn.innerHTML = `
|
|
||||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
|
||||||
</svg>
|
|
||||||
In Your Library
|
|
||||||
`;
|
|
||||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
|
||||||
btn.style.color = '#22c55e';
|
|
||||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
|
||||||
} else {
|
|
||||||
btn.innerHTML = '+ Add to Library';
|
|
||||||
btn.style.background = null;
|
|
||||||
btn.style.color = null;
|
|
||||||
btn.style.borderColor = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadChapters() {
|
|
||||||
const tbody = document.getElementById('chapters-body');
|
|
||||||
if (!tbody) return;
|
|
||||||
|
|
||||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Searching extensions for chapters...</td></tr>';
|
|
||||||
|
|
||||||
try {
|
|
||||||
const source = extensionName || 'anilist';
|
|
||||||
const fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
|
|
||||||
|
|
||||||
const res = await fetch(fetchUrl, { headers: AuthUtils.getSimpleAuthHeaders() });
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
allChapters = data.chapters || [];
|
|
||||||
filteredChapters = [...allChapters];
|
|
||||||
|
|
||||||
applyChapterFilter();
|
|
||||||
|
|
||||||
const totalEl = document.getElementById('total-chapters');
|
|
||||||
|
|
||||||
if (allChapters.length === 0) {
|
|
||||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found on loaded extensions.</td></tr>';
|
|
||||||
if (totalEl) totalEl.innerText = "0 Found";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
|
|
||||||
|
|
||||||
setupProviderFilter();
|
|
||||||
|
|
||||||
setupReadButton();
|
|
||||||
|
|
||||||
chapterPagination.setTotalItems(filteredChapters.length);
|
|
||||||
renderChapterTable();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color: #ef4444;">Error loading chapters.</td></tr>';
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyChapterFilter() {
|
|
||||||
const chapterParam = URLUtils.getQueryParam('chapter');
|
|
||||||
if (!chapterParam) return;
|
|
||||||
|
|
||||||
const chapterNumber = parseFloat(chapterParam);
|
|
||||||
if (isNaN(chapterNumber)) return;
|
|
||||||
|
|
||||||
filteredChapters = allChapters.filter(
|
|
||||||
ch => parseFloat(ch.number) === chapterNumber
|
|
||||||
);
|
|
||||||
|
|
||||||
chapterPagination.reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupProviderFilter() {
|
|
||||||
const select = document.getElementById('provider-filter');
|
|
||||||
if (!select) return;
|
|
||||||
|
|
||||||
const providers = [...new Set(allChapters.map(ch => ch.provider))];
|
|
||||||
|
|
||||||
if (providers.length === 0) return;
|
|
||||||
|
|
||||||
select.style.display = 'inline-block';
|
|
||||||
select.innerHTML = '<option value="all">All Providers</option>';
|
|
||||||
|
|
||||||
providers.forEach(prov => {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = prov;
|
|
||||||
opt.innerText = prov;
|
|
||||||
select.appendChild(opt);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (extensionName) {
|
|
||||||
const extensionProvider = providers.find(
|
|
||||||
p => p.toLowerCase() === extensionName.toLowerCase()
|
|
||||||
);
|
|
||||||
|
|
||||||
if (extensionProvider) {
|
|
||||||
select.value = extensionProvider;
|
|
||||||
filteredChapters = allChapters.filter(ch => ch.provider === extensionProvider);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select.onchange = (e) => {
|
|
||||||
const selected = e.target.value;
|
|
||||||
if (selected === 'all') {
|
|
||||||
filteredChapters = [...allChapters];
|
|
||||||
} else {
|
|
||||||
filteredChapters = allChapters.filter(ch => ch.provider === selected);
|
|
||||||
}
|
|
||||||
|
|
||||||
chapterPagination.reset();
|
|
||||||
chapterPagination.setTotalItems(filteredChapters.length);
|
|
||||||
renderChapterTable();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupReadButton() {
|
|
||||||
const readBtn = document.getElementById('read-start-btn');
|
|
||||||
if (!readBtn || filteredChapters.length === 0) return;
|
|
||||||
|
|
||||||
const firstChapter = filteredChapters[0];
|
|
||||||
readBtn.onclick = () => openReader(0, firstChapter.provider);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderChapterTable() {
|
|
||||||
const tbody = document.getElementById('chapters-body');
|
|
||||||
if (!tbody) return;
|
|
||||||
|
|
||||||
tbody.innerHTML = '';
|
|
||||||
|
|
||||||
if (filteredChapters.length === 0) {
|
|
||||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
|
|
||||||
chapterPagination.renderControls(
|
|
||||||
'pagination',
|
|
||||||
'page-info',
|
|
||||||
'prev-page',
|
|
||||||
'next-page'
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const pageItems = chapterPagination.getCurrentPageItems(filteredChapters);
|
|
||||||
|
|
||||||
pageItems.forEach((ch) => {
|
|
||||||
const row = document.createElement('tr');
|
|
||||||
row.innerHTML = `
|
|
||||||
<td>${ch.number}</td>
|
|
||||||
<td>${ch.title || 'Chapter ' + ch.number}</td>
|
|
||||||
<td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
|
|
||||||
<td>
|
|
||||||
<button class="read-btn-small" onclick="openReader('${ch.index}', '${ch.provider}')">
|
|
||||||
Read
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
`;
|
|
||||||
tbody.appendChild(row);
|
|
||||||
});
|
|
||||||
|
|
||||||
chapterPagination.renderControls(
|
|
||||||
'pagination',
|
|
||||||
'page-info',
|
|
||||||
'prev-page',
|
|
||||||
'next-page'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function openReader(chapterId, provider) {
|
|
||||||
window.location.href = URLUtils.buildReadUrl(bookId, chapterId, provider, extensionName);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupModalClickOutside() {
|
|
||||||
const modal = document.getElementById('add-list-modal');
|
|
||||||
if (!modal) return;
|
|
||||||
|
|
||||||
modal.addEventListener('click', (e) => {
|
|
||||||
if (e.target.id === 'add-list-modal') {
|
|
||||||
ListModalManager.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showError(message) {
|
|
||||||
const titleEl = document.getElementById('title');
|
|
||||||
if (titleEl) titleEl.innerText = message;
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveToList() {
|
|
||||||
const idToSave = extensionName ? bookSlug : bookId;
|
|
||||||
ListModalManager.save(idToSave, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteFromList() {
|
|
||||||
const idToDelete = extensionName ? bookSlug : bookId;
|
|
||||||
ListModalManager.delete(idToDelete, extensionName || 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeAddToListModal() {
|
|
||||||
ListModalManager.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
window.openReader = openReader;
|
|
||||||
window.saveToList = saveToList;
|
|
||||||
window.deleteFromList = deleteFromList;
|
|
||||||
window.closeAddToListModal = closeAddToListModal;
|
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
let trendingBooks = [];
|
|
||||||
let currentHeroIndex = 0;
|
|
||||||
let heroInterval;
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
SearchManager.init('#search-input', '#search-results', 'book');
|
|
||||||
ContinueWatchingManager.load('my-status-books', 'reading', 'MANGA');
|
|
||||||
init();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
const nav = document.getElementById('navbar');
|
|
||||||
if (window.scrollY > 50) nav.classList.add('scrolled');
|
|
||||||
else nav.classList.remove('scrolled');
|
|
||||||
});
|
|
||||||
|
|
||||||
function scrollCarousel(id, direction) {
|
|
||||||
const container = document.getElementById(id);
|
|
||||||
if(container) {
|
|
||||||
const scrollAmount = container.clientWidth * 0.75;
|
|
||||||
container.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function init() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/books/trending');
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.results && data.results.length > 0) {
|
|
||||||
trendingBooks = data.results;
|
|
||||||
updateHeroUI(trendingBooks[0]);
|
|
||||||
renderList('trending', trendingBooks);
|
|
||||||
startHeroCycle();
|
|
||||||
}
|
|
||||||
|
|
||||||
const resPop = await fetch('/api/books/popular');
|
|
||||||
const dataPop = await resPop.json();
|
|
||||||
if (dataPop.results) renderList('popular', dataPop.results);
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Books Error:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startHeroCycle() {
|
|
||||||
if(heroInterval) clearInterval(heroInterval);
|
|
||||||
heroInterval = setInterval(() => {
|
|
||||||
if(trendingBooks.length > 0) {
|
|
||||||
currentHeroIndex = (currentHeroIndex + 1) % trendingBooks.length;
|
|
||||||
updateHeroUI(trendingBooks[currentHeroIndex]);
|
|
||||||
}
|
|
||||||
}, 8000);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function updateHeroUI(book) {
|
|
||||||
if(!book) return;
|
|
||||||
|
|
||||||
const title = book.title.english || book.title.romaji;
|
|
||||||
const desc = book.description || "No description available.";
|
|
||||||
const poster = (book.coverImage && (book.coverImage.extraLarge || book.coverImage.large)) || '';
|
|
||||||
const banner = book.bannerImage || poster;
|
|
||||||
|
|
||||||
document.getElementById('hero-title').innerText = title;
|
|
||||||
document.getElementById('hero-desc').innerHTML = desc;
|
|
||||||
document.getElementById('hero-score').innerText = (book.averageScore || '?') + '% Score';
|
|
||||||
document.getElementById('hero-year').innerText = (book.startDate && book.startDate.year) ? book.startDate.year : '????';
|
|
||||||
document.getElementById('hero-type').innerText = book.format || 'MANGA';
|
|
||||||
|
|
||||||
const heroPoster = document.getElementById('hero-poster');
|
|
||||||
if(heroPoster) heroPoster.src = poster;
|
|
||||||
|
|
||||||
const bg = document.getElementById('hero-bg-media');
|
|
||||||
if(bg) bg.src = banner;
|
|
||||||
|
|
||||||
const readBtn = document.getElementById('read-btn');
|
|
||||||
if (readBtn) {
|
|
||||||
readBtn.onclick = () => window.location.href = `/book/${book.id}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const addToListBtn = document.querySelector('.hero-buttons .btn-blur');
|
|
||||||
if(addToListBtn) {
|
|
||||||
ListModalManager.currentData = book;
|
|
||||||
const entryType = ListModalManager.getEntryType(book);
|
|
||||||
|
|
||||||
await ListModalManager.checkIfInList(book.id, 'anilist', entryType);
|
|
||||||
ListModalManager.updateButton();
|
|
||||||
|
|
||||||
addToListBtn.onclick = () => ListModalManager.open(book, 'anilist');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderList(id, list) {
|
|
||||||
const container = document.getElementById(id);
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
list.forEach(book => {
|
|
||||||
const title = book.title.english || book.title.romaji;
|
|
||||||
const cover = book.coverImage ? book.coverImage.large : '';
|
|
||||||
const score = book.averageScore || '--';
|
|
||||||
const type = book.format || 'Book';
|
|
||||||
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'card';
|
|
||||||
|
|
||||||
el.onclick = () => {
|
|
||||||
window.location.href = `/book/${book.id}`;
|
|
||||||
};
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="card-img-wrap"><img src="${cover}" loading="lazy"></div>
|
|
||||||
<div class="card-content">
|
|
||||||
<h3>${title}</h3>
|
|
||||||
<p>${score}% • ${type}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
container.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveToList() {
|
|
||||||
const bookId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
|
||||||
if (!bookId) return;
|
|
||||||
ListModalManager.save(bookId, 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteFromList() {
|
|
||||||
const bookId = ListModalManager.currentData ? ListModalManager.currentData.id : null;
|
|
||||||
if (!bookId) return;
|
|
||||||
ListModalManager.delete(bookId, 'anilist');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeAddToListModal() {
|
|
||||||
ListModalManager.close();
|
|
||||||
}
|
|
||||||
@@ -1,695 +0,0 @@
|
|||||||
const reader = document.getElementById('reader');
|
|
||||||
const panel = document.getElementById('settings-panel');
|
|
||||||
const overlay = document.getElementById('overlay');
|
|
||||||
const settingsBtn = document.getElementById('settings-btn');
|
|
||||||
const closePanel = document.getElementById('close-panel');
|
|
||||||
const chapterLabel = document.getElementById('chapter-label');
|
|
||||||
const prevBtn = document.getElementById('prev-chapter');
|
|
||||||
const nextBtn = document.getElementById('next-chapter');
|
|
||||||
|
|
||||||
const lnSettings = document.getElementById('ln-settings');
|
|
||||||
const mangaSettings = document.getElementById('manga-settings');
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
ln: {
|
|
||||||
fontSize: 18,
|
|
||||||
lineHeight: 1.8,
|
|
||||||
maxWidth: 750,
|
|
||||||
fontFamily: '"Georgia", serif',
|
|
||||||
textColor: '#e5e7eb',
|
|
||||||
bg: '#14141b',
|
|
||||||
textAlign: 'justify'
|
|
||||||
},
|
|
||||||
manga: {
|
|
||||||
direction: 'rtl',
|
|
||||||
mode: 'auto',
|
|
||||||
spacing: 16,
|
|
||||||
imageFit: 'screen',
|
|
||||||
preloadCount: 3
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let currentType = null;
|
|
||||||
let currentPages = [];
|
|
||||||
let observer = null;
|
|
||||||
|
|
||||||
const parts = window.location.pathname.split('/');
|
|
||||||
|
|
||||||
const bookId = parts[4];
|
|
||||||
let chapter = parts[3];
|
|
||||||
let provider = parts[2];
|
|
||||||
|
|
||||||
function loadConfig() {
|
|
||||||
try {
|
|
||||||
const saved = localStorage.getItem('readerConfig');
|
|
||||||
if (saved) {
|
|
||||||
const parsed = JSON.parse(saved);
|
|
||||||
Object.assign(config.ln, parsed.ln || {});
|
|
||||||
Object.assign(config.manga, parsed.manga || {});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error loading config:', e);
|
|
||||||
}
|
|
||||||
updateUIFromConfig();
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveConfig() {
|
|
||||||
try {
|
|
||||||
localStorage.setItem('readerConfig', JSON.stringify(config));
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error saving config:', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUIFromConfig() {
|
|
||||||
document.getElementById('font-size').value = config.ln.fontSize;
|
|
||||||
document.getElementById('font-size-value').textContent = config.ln.fontSize + 'px';
|
|
||||||
|
|
||||||
document.getElementById('line-height').value = config.ln.lineHeight;
|
|
||||||
document.getElementById('line-height-value').textContent = config.ln.lineHeight;
|
|
||||||
|
|
||||||
document.getElementById('max-width').value = config.ln.maxWidth;
|
|
||||||
document.getElementById('max-width-value').textContent = config.ln.maxWidth + 'px';
|
|
||||||
|
|
||||||
document.getElementById('font-family').value = config.ln.fontFamily;
|
|
||||||
document.getElementById('text-color').value = config.ln.textColor;
|
|
||||||
document.getElementById('bg-color').value = config.ln.bg;
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
|
||||||
btn.classList.toggle('active', btn.dataset.align === config.ln.textAlign);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('display-mode').value = config.manga.mode;
|
|
||||||
document.getElementById('image-fit').value = config.manga.imageFit;
|
|
||||||
document.getElementById('page-spacing').value = config.manga.spacing;
|
|
||||||
document.getElementById('page-spacing-value').textContent = config.manga.spacing + 'px';
|
|
||||||
document.getElementById('preload-count').value = config.manga.preloadCount;
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
|
||||||
btn.classList.toggle('active', btn.dataset.direction === config.manga.direction);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyStyles() {
|
|
||||||
if (currentType === 'ln') {
|
|
||||||
document.documentElement.style.setProperty('--ln-font-size', config.ln.fontSize + 'px');
|
|
||||||
document.documentElement.style.setProperty('--ln-line-height', config.ln.lineHeight);
|
|
||||||
document.documentElement.style.setProperty('--ln-max-width', config.ln.maxWidth + 'px');
|
|
||||||
document.documentElement.style.setProperty('--ln-font-family', config.ln.fontFamily);
|
|
||||||
document.documentElement.style.setProperty('--ln-text-color', config.ln.textColor);
|
|
||||||
document.documentElement.style.setProperty('--color-bg-base', config.ln.bg);
|
|
||||||
document.documentElement.style.setProperty('--ln-text-align', config.ln.textAlign);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentType === 'manga') {
|
|
||||||
document.documentElement.style.setProperty('--page-spacing', config.manga.spacing + 'px');
|
|
||||||
document.documentElement.style.setProperty('--page-max-width', 900 + 'px');
|
|
||||||
document.documentElement.style.setProperty('--manga-max-width', 1400 + 'px');
|
|
||||||
|
|
||||||
const viewportHeight = window.innerHeight - 64 - 32;
|
|
||||||
document.documentElement.style.setProperty('--viewport-height', viewportHeight + 'px');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSettingsVisibility() {
|
|
||||||
lnSettings.classList.toggle('hidden', currentType !== 'ln');
|
|
||||||
mangaSettings.classList.toggle('hidden', currentType !== 'manga');
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadChapter() {
|
|
||||||
reader.innerHTML = `
|
|
||||||
<div class="loading-container">
|
|
||||||
<div class="loading-spinner"></div>
|
|
||||||
<span>Loading chapter...</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
let source = urlParams.get('source');
|
|
||||||
if (!source) {
|
|
||||||
source = 'anilist';
|
|
||||||
}
|
|
||||||
const newEndpoint = `/api/book/${bookId}/${chapter}/${provider}?source=${source}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(newEndpoint);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (data.title) {
|
|
||||||
chapterLabel.textContent = data.title;
|
|
||||||
document.title = data.title;
|
|
||||||
} else {
|
|
||||||
chapterLabel.textContent = `Chapter ${chapter}`;
|
|
||||||
document.title = `Chapter ${chapter}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
setupProgressTracking(data, source);
|
|
||||||
|
|
||||||
const res2 = await fetch(`/api/book/${bookId}?source=${source}`);
|
|
||||||
const data2 = await res2.json();
|
|
||||||
|
|
||||||
fetch("/api/rpc", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {"Content-Type": "application/json"},
|
|
||||||
body: JSON.stringify({
|
|
||||||
details: data2.title.romaji ?? data2.title,
|
|
||||||
state: `Chapter ${data.title}`,
|
|
||||||
mode: "reading"
|
|
||||||
})
|
|
||||||
});
|
|
||||||
if (data.error) {
|
|
||||||
reader.innerHTML = `
|
|
||||||
<div class="loading-container">
|
|
||||||
<span style="color: #ef4444;">Error: ${data.error}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentType = data.type;
|
|
||||||
updateSettingsVisibility();
|
|
||||||
applyStyles();
|
|
||||||
reader.innerHTML = '';
|
|
||||||
|
|
||||||
if (data.type === 'manga') {
|
|
||||||
currentPages = data.pages || [];
|
|
||||||
loadManga(currentPages);
|
|
||||||
} else if (data.type === 'ln') {
|
|
||||||
loadLN(data.content);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
reader.innerHTML = `
|
|
||||||
<div class="loading-container">
|
|
||||||
<span style="color: #ef4444;">Error loading chapter: ${error.message}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadManga(pages) {
|
|
||||||
if (!pages || pages.length === 0) {
|
|
||||||
reader.innerHTML = '<div class="loading-container"><span>No pages found</span></div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const container = document.createElement('div');
|
|
||||||
container.className = 'manga-container';
|
|
||||||
|
|
||||||
let isLongStrip = false;
|
|
||||||
|
|
||||||
if (config.manga.mode === 'longstrip') {
|
|
||||||
isLongStrip = true;
|
|
||||||
} else if (config.manga.mode === 'auto' && detectLongStrip(pages)) {
|
|
||||||
isLongStrip = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const useDouble = config.manga.mode === 'double' ||
|
|
||||||
(config.manga.mode === 'auto' && !isLongStrip && shouldUseDoublePage(pages));
|
|
||||||
|
|
||||||
if (useDouble) {
|
|
||||||
loadDoublePage(container, pages);
|
|
||||||
} else {
|
|
||||||
loadSinglePage(container, pages);
|
|
||||||
}
|
|
||||||
|
|
||||||
reader.appendChild(container);
|
|
||||||
setupLazyLoading();
|
|
||||||
enableMangaPageNavigation();
|
|
||||||
}
|
|
||||||
|
|
||||||
function shouldUseDoublePage(pages) {
|
|
||||||
if (pages.length <= 5) return false;
|
|
||||||
|
|
||||||
const widePages = pages.filter(p => {
|
|
||||||
if (!p.height || !p.width) return false;
|
|
||||||
const ratio = p.width / p.height;
|
|
||||||
return ratio > 1.3;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (widePages.length > pages.length * 0.3) return false;
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadSinglePage(container, pages) {
|
|
||||||
pages.forEach((page, index) => {
|
|
||||||
const img = createImageElement(page, index);
|
|
||||||
container.appendChild(img);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadDoublePage(container, pages) {
|
|
||||||
let i = 0;
|
|
||||||
while (i < pages.length) {
|
|
||||||
const currentPage = pages[i];
|
|
||||||
const nextPage = pages[i + 1];
|
|
||||||
|
|
||||||
const isWide = currentPage.width && currentPage.height &&
|
|
||||||
(currentPage.width / currentPage.height) > 1.1;
|
|
||||||
|
|
||||||
if (isWide) {
|
|
||||||
const img = createImageElement(currentPage, i);
|
|
||||||
container.appendChild(img);
|
|
||||||
i++;
|
|
||||||
} else {
|
|
||||||
const doubleContainer = document.createElement('div');
|
|
||||||
doubleContainer.className = 'double-container';
|
|
||||||
|
|
||||||
const leftPage = createImageElement(currentPage, i);
|
|
||||||
|
|
||||||
if (nextPage) {
|
|
||||||
const nextIsWide = nextPage.width && nextPage.height &&
|
|
||||||
(nextPage.width / nextPage.height) > 1.3;
|
|
||||||
|
|
||||||
if (nextIsWide) {
|
|
||||||
const singleImg = createImageElement(currentPage, i);
|
|
||||||
container.appendChild(singleImg);
|
|
||||||
i++;
|
|
||||||
} else {
|
|
||||||
const rightPage = createImageElement(nextPage, i + 1);
|
|
||||||
|
|
||||||
if (config.manga.direction === 'rtl') {
|
|
||||||
doubleContainer.appendChild(rightPage);
|
|
||||||
doubleContainer.appendChild(leftPage);
|
|
||||||
} else {
|
|
||||||
doubleContainer.appendChild(leftPage);
|
|
||||||
doubleContainer.appendChild(rightPage);
|
|
||||||
}
|
|
||||||
|
|
||||||
container.appendChild(doubleContainer);
|
|
||||||
i += 2;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const singleImg = createImageElement(currentPage, i);
|
|
||||||
container.appendChild(singleImg);
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createImageElement(page, index) {
|
|
||||||
const img = document.createElement('img');
|
|
||||||
img.className = 'page-img';
|
|
||||||
img.dataset.index = index;
|
|
||||||
|
|
||||||
const url = buildProxyUrl(page.url, page.headers);
|
|
||||||
const placeholder = "/public/assets/placeholder.svg";
|
|
||||||
|
|
||||||
img.onerror = () => {
|
|
||||||
if (img.src !== placeholder) {
|
|
||||||
img.src = placeholder;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (config.manga.mode === 'longstrip' && index > 0) {
|
|
||||||
img.classList.add('longstrip-fit');
|
|
||||||
} else {
|
|
||||||
if (config.manga.imageFit === 'width') img.classList.add('fit-width');
|
|
||||||
else if (config.manga.imageFit === 'height') img.classList.add('fit-height');
|
|
||||||
else if (config.manga.imageFit === 'screen') img.classList.add('fit-screen');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index < config.manga.preloadCount) {
|
|
||||||
img.src = url;
|
|
||||||
} else {
|
|
||||||
img.dataset.src = url;
|
|
||||||
img.loading = 'lazy';
|
|
||||||
}
|
|
||||||
|
|
||||||
img.alt = `Page ${index + 1}`;
|
|
||||||
|
|
||||||
return img;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildProxyUrl(url, headers = {}) {
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
url
|
|
||||||
});
|
|
||||||
|
|
||||||
if (headers.referer) params.append('referer', headers.referer);
|
|
||||||
if (headers['user-agent']) params.append('ua', headers['user-agent']);
|
|
||||||
if (headers.cookie) params.append('cookie', headers.cookie);
|
|
||||||
|
|
||||||
return `/api/proxy?${params.toString()}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function detectLongStrip(pages) {
|
|
||||||
if (!pages || pages.length === 0) return false;
|
|
||||||
|
|
||||||
const relevant = pages.slice(1);
|
|
||||||
const tall = relevant.filter(p => p.height && p.width && (p.height / p.width) > 2);
|
|
||||||
return tall.length >= 2 || (tall.length / relevant.length) > 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupLazyLoading() {
|
|
||||||
if (observer) observer.disconnect();
|
|
||||||
|
|
||||||
observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const img = entry.target;
|
|
||||||
if (img.dataset.src) {
|
|
||||||
img.src = img.dataset.src;
|
|
||||||
delete img.dataset.src;
|
|
||||||
observer.unobserve(img);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, {
|
|
||||||
rootMargin: '200px'
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLN(html) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'ln-content';
|
|
||||||
div.innerHTML = html;
|
|
||||||
reader.appendChild(div);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('font-size').addEventListener('input', (e) => {
|
|
||||||
config.ln.fontSize = parseInt(e.target.value);
|
|
||||||
document.getElementById('font-size-value').textContent = e.target.value + 'px';
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('line-height').addEventListener('input', (e) => {
|
|
||||||
config.ln.lineHeight = parseFloat(e.target.value);
|
|
||||||
document.getElementById('line-height-value').textContent = e.target.value;
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('max-width').addEventListener('input', (e) => {
|
|
||||||
config.ln.maxWidth = parseInt(e.target.value);
|
|
||||||
document.getElementById('max-width-value').textContent = e.target.value + 'px';
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('font-family').addEventListener('change', (e) => {
|
|
||||||
config.ln.fontFamily = e.target.value;
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('text-color').addEventListener('change', (e) => {
|
|
||||||
config.ln.textColor = e.target.value;
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('bg-color').addEventListener('change', (e) => {
|
|
||||||
config.ln.bg = e.target.value;
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-align]').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
config.ln.textAlign = btn.dataset.align;
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-preset]').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
const preset = btn.dataset.preset;
|
|
||||||
|
|
||||||
const presets = {
|
|
||||||
dark: { bg: '#14141b', textColor: '#e5e7eb' },
|
|
||||||
sepia: { bg: '#f4ecd8', textColor: '#5c472d' },
|
|
||||||
light: { bg: '#fafafa', textColor: '#1f2937' },
|
|
||||||
amoled: { bg: '#000000', textColor: '#ffffff' }
|
|
||||||
};
|
|
||||||
|
|
||||||
if (presets[preset]) {
|
|
||||||
Object.assign(config.ln, presets[preset]);
|
|
||||||
document.getElementById('bg-color').value = config.ln.bg;
|
|
||||||
document.getElementById('text-color').value = config.ln.textColor;
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('display-mode').addEventListener('change', (e) => {
|
|
||||||
config.manga.mode = e.target.value;
|
|
||||||
saveConfig();
|
|
||||||
loadChapter();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('image-fit').addEventListener('change', (e) => {
|
|
||||||
config.manga.imageFit = e.target.value;
|
|
||||||
saveConfig();
|
|
||||||
loadChapter();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('page-spacing').addEventListener('input', (e) => {
|
|
||||||
config.manga.spacing = parseInt(e.target.value);
|
|
||||||
document.getElementById('page-spacing-value').textContent = e.target.value + 'px';
|
|
||||||
applyStyles();
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('preload-count').addEventListener('change', (e) => {
|
|
||||||
config.manga.preloadCount = parseInt(e.target.value);
|
|
||||||
saveConfig();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
document.querySelectorAll('[data-direction]').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
config.manga.direction = btn.dataset.direction;
|
|
||||||
saveConfig();
|
|
||||||
loadChapter();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
prevBtn.addEventListener('click', () => {
|
|
||||||
const current = parseInt(chapter);
|
|
||||||
if (current <= 0) return;
|
|
||||||
|
|
||||||
const newChapter = String(current - 1);
|
|
||||||
updateURL(newChapter);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
loadChapter();
|
|
||||||
});
|
|
||||||
|
|
||||||
nextBtn.addEventListener('click', () => {
|
|
||||||
const newChapter = String(parseInt(chapter) + 1);
|
|
||||||
updateURL(newChapter);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
loadChapter();
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateURL(newChapter) {
|
|
||||||
chapter = newChapter;
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
let source = urlParams.get('source');
|
|
||||||
|
|
||||||
let src;
|
|
||||||
if (source === 'anilist') {
|
|
||||||
src= "?source=anilist"
|
|
||||||
} else {
|
|
||||||
src= `?source=${source}`
|
|
||||||
}
|
|
||||||
const newUrl = `/read/${provider}/${chapter}/${bookId}${src}`;
|
|
||||||
window.history.pushState({}, '', newUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('back-btn').addEventListener('click', () => {
|
|
||||||
const parts = window.location.pathname.split('/');
|
|
||||||
const mangaId = parts[4];
|
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
let source = urlParams.get('source');
|
|
||||||
|
|
||||||
if (source === 'anilist') {
|
|
||||||
window.location.href = `/book/${mangaId}`;
|
|
||||||
} else {
|
|
||||||
window.location.href = `/book/${source}/${mangaId}`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
settingsBtn.addEventListener('click', () => {
|
|
||||||
panel.classList.add('open');
|
|
||||||
overlay.classList.add('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
closePanel.addEventListener('click', closeSettings);
|
|
||||||
overlay.addEventListener('click', closeSettings);
|
|
||||||
|
|
||||||
function closeSettings() {
|
|
||||||
panel.classList.remove('open');
|
|
||||||
overlay.classList.remove('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && panel.classList.contains('open')) {
|
|
||||||
closeSettings();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function enableMangaPageNavigation() {
|
|
||||||
if (currentType !== 'manga') return;
|
|
||||||
const logicalPages = [];
|
|
||||||
|
|
||||||
document.querySelectorAll('.manga-container > *').forEach(el => {
|
|
||||||
if (el.classList.contains('double-container')) {
|
|
||||||
logicalPages.push(el);
|
|
||||||
} else if (el.tagName === 'IMG') {
|
|
||||||
logicalPages.push(el);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (logicalPages.length === 0) return;
|
|
||||||
|
|
||||||
function scrollToLogical(index) {
|
|
||||||
if (index < 0 || index >= logicalPages.length) return;
|
|
||||||
|
|
||||||
const topBar = document.querySelector('.top-bar');
|
|
||||||
const offset = topBar ? -topBar.offsetHeight : 0;
|
|
||||||
|
|
||||||
const y = logicalPages[index].getBoundingClientRect().top
|
|
||||||
+ window.pageYOffset
|
|
||||||
+ offset;
|
|
||||||
|
|
||||||
window.scrollTo({
|
|
||||||
top: y,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCurrentLogicalIndex() {
|
|
||||||
let closest = 0;
|
|
||||||
let minDist = Infinity;
|
|
||||||
|
|
||||||
logicalPages.forEach((el, i) => {
|
|
||||||
const rect = el.getBoundingClientRect();
|
|
||||||
const dist = Math.abs(rect.top);
|
|
||||||
if (dist < minDist) {
|
|
||||||
minDist = dist;
|
|
||||||
closest = i;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return closest;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rtl = () => config.manga.direction === 'rtl';
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (currentType !== 'manga') return;
|
|
||||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
|
|
||||||
|
|
||||||
const index = getCurrentLogicalIndex();
|
|
||||||
|
|
||||||
if (e.key === 'ArrowLeft') {
|
|
||||||
scrollToLogical(rtl() ? index + 1 : index - 1);
|
|
||||||
}
|
|
||||||
if (e.key === 'ArrowRight') {
|
|
||||||
scrollToLogical(rtl() ? index - 1 : index + 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
reader.addEventListener('click', (e) => {
|
|
||||||
if (currentType !== 'manga') return;
|
|
||||||
|
|
||||||
const bounds = reader.getBoundingClientRect();
|
|
||||||
const x = e.clientX - bounds.left;
|
|
||||||
const half = bounds.width / 2;
|
|
||||||
|
|
||||||
const index = getCurrentLogicalIndex();
|
|
||||||
|
|
||||||
if (x < half) {
|
|
||||||
scrollToLogical(rtl() ? index + 1 : index - 1);
|
|
||||||
} else {
|
|
||||||
scrollToLogical(rtl() ? index - 1 : index + 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let resizeTimer;
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
clearTimeout(resizeTimer);
|
|
||||||
resizeTimer = setTimeout(() => {
|
|
||||||
applyStyles();
|
|
||||||
}, 250);
|
|
||||||
});
|
|
||||||
|
|
||||||
let progressSaved = false;
|
|
||||||
|
|
||||||
function setupProgressTracking(data, source) {
|
|
||||||
progressSaved = false;
|
|
||||||
|
|
||||||
async function sendProgress(chapterNumber) {
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
if (!token) return;
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
entry_id: bookId,
|
|
||||||
source: source,
|
|
||||||
entry_type: data.type === 'manga' ? 'MANGA' : 'NOVEL',
|
|
||||||
status: 'CURRENT',
|
|
||||||
progress: source === 'anilist'
|
|
||||||
? Math.floor(chapterNumber)
|
|
||||||
|
|
||||||
: chapterNumber
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
await fetch('/api/list/entry', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': `Bearer ${token}`
|
|
||||||
},
|
|
||||||
body: JSON.stringify(body)
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error updating progress:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkProgress() {
|
|
||||||
const scrollTop = window.scrollY;
|
|
||||||
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
||||||
const percent = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
|
|
||||||
|
|
||||||
if (percent >= 0.8 && !progressSaved) {
|
|
||||||
progressSaved = true;
|
|
||||||
|
|
||||||
const chapterNumber = (typeof data.number !== 'undefined' && data.number !== null)
|
|
||||||
? data.number
|
|
||||||
: Number(chapter);
|
|
||||||
|
|
||||||
sendProgress(chapterNumber);
|
|
||||||
|
|
||||||
window.removeEventListener('scroll', checkProgress);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.removeEventListener('scroll', checkProgress);
|
|
||||||
window.addEventListener('scroll', checkProgress);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!bookId || !chapter || !provider) {
|
|
||||||
reader.innerHTML = `
|
|
||||||
<div class="loading-container">
|
|
||||||
<span style="color: #ef4444;">Missing required parameters (bookId, chapter, provider)</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
loadConfig();
|
|
||||||
loadChapter();
|
|
||||||
}
|
|
||||||
@@ -1,391 +0,0 @@
|
|||||||
const providerSelector = document.getElementById('provider-selector');
|
|
||||||
const searchInput = document.getElementById('main-search-input');
|
|
||||||
const resultsContainer = document.getElementById('gallery-results');
|
|
||||||
|
|
||||||
let currentPage = 1;
|
|
||||||
let currentProvider = '';
|
|
||||||
let currentQuery = '';
|
|
||||||
const perPage = 48;
|
|
||||||
let isLoading = false;
|
|
||||||
let favorites = new Set();
|
|
||||||
let favoritesMode = false;
|
|
||||||
|
|
||||||
let msnry = null;
|
|
||||||
|
|
||||||
const sentinel = document.createElement('div');
|
|
||||||
sentinel.id = 'infinite-scroll-sentinel';
|
|
||||||
sentinel.style.height = '1px';
|
|
||||||
sentinel.style.marginBottom = '300px';
|
|
||||||
sentinel.style.display = 'none';
|
|
||||||
resultsContainer.parentNode.appendChild(sentinel);
|
|
||||||
|
|
||||||
function getAuthHeaders(extra = {}) {
|
|
||||||
const token = localStorage.getItem("token");
|
|
||||||
return token
|
|
||||||
? { ...extra, Authorization: `Bearer ${token}` }
|
|
||||||
: extra;
|
|
||||||
}
|
|
||||||
|
|
||||||
function initializeMasonry() {
|
|
||||||
if (typeof Masonry === 'undefined') {
|
|
||||||
setTimeout(initializeMasonry, 100);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (msnry) msnry.destroy();
|
|
||||||
msnry = new Masonry(resultsContainer, {
|
|
||||||
itemSelector: '.gallery-card',
|
|
||||||
columnWidth: '.gallery-card',
|
|
||||||
percentPosition: true,
|
|
||||||
gutter: 0,
|
|
||||||
transitionDuration: '0.4s'
|
|
||||||
});
|
|
||||||
msnry.layout();
|
|
||||||
}
|
|
||||||
initializeMasonry();
|
|
||||||
|
|
||||||
function getTagsArray(item) {
|
|
||||||
if (Array.isArray(item.tags)) return item.tags;
|
|
||||||
if (typeof item.tags === 'string') {
|
|
||||||
return item.tags
|
|
||||||
.split(',')
|
|
||||||
.map(t => t.trim())
|
|
||||||
.filter(t => t.length > 0);
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function getProxiedImageUrl(item) {
|
|
||||||
const imageUrl = item.image || item.image_url;
|
|
||||||
|
|
||||||
if (!imageUrl || !item.headers) {
|
|
||||||
return imageUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(imageUrl)}`;
|
|
||||||
|
|
||||||
const headers = item.headers;
|
|
||||||
const lowerCaseHeaders = {};
|
|
||||||
for (const key in headers) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(headers, key)) {
|
|
||||||
lowerCaseHeaders[key.toLowerCase()] = headers[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const referer = lowerCaseHeaders.referer;
|
|
||||||
if (referer) {
|
|
||||||
proxyUrl += `&referer=${encodeURIComponent(referer)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const origin = lowerCaseHeaders.origin;
|
|
||||||
if (origin) {
|
|
||||||
proxyUrl += `&origin=${encodeURIComponent(origin)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const userAgent = lowerCaseHeaders['user-agent'];
|
|
||||||
if (userAgent) {
|
|
||||||
proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return proxyUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadFavorites() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/gallery/favorites', {
|
|
||||||
headers: getAuthHeaders()
|
|
||||||
});
|
|
||||||
if (!res.ok) return;
|
|
||||||
const data = await res.json();
|
|
||||||
favorites.clear();
|
|
||||||
(data.favorites || []).forEach(fav => favorites.add(fav.id));
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading favorites:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function toggleFavorite(item) {
|
|
||||||
const id = item.id;
|
|
||||||
const isFav = favorites.has(id);
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (isFav) {
|
|
||||||
await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: getAuthHeaders()
|
|
||||||
});
|
|
||||||
favorites.delete(id);
|
|
||||||
} else {
|
|
||||||
const tagsArray = getTagsArray(item);
|
|
||||||
|
|
||||||
const serializedHeaders = item.headers ? JSON.stringify(item.headers) : "";
|
|
||||||
|
|
||||||
await fetch('/api/gallery/favorites', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: getAuthHeaders({
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
}),
|
|
||||||
body: JSON.stringify({
|
|
||||||
id: item.id,
|
|
||||||
title: item.title || tagsArray.join(', ') || 'Untitled',
|
|
||||||
image_url: item.image || item.image_url,
|
|
||||||
thumbnail_url: item.image || item.image_url,
|
|
||||||
tags: tagsArray.join(','),
|
|
||||||
provider: item.provider || "",
|
|
||||||
headers: serializedHeaders
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
favorites.add(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelectorAll(`.gallery-card[data-id="${CSS.escape(id)}"] .fav-btn`).forEach(btn => {
|
|
||||||
btn.classList.toggle('favorited', !isFav);
|
|
||||||
btn.innerHTML = !isFav
|
|
||||||
? '<i class="fas fa-heart"></i>'
|
|
||||||
: '<i class="far fa-heart"></i>';
|
|
||||||
});
|
|
||||||
|
|
||||||
if (providerSelector.value === 'favorites' && isFav) {
|
|
||||||
setTimeout(() => searchGallery(false), 300);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error toggling favorite:', err);
|
|
||||||
alert('Error updating favorite');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createGalleryCard(item, isLoadMore = false) {
|
|
||||||
const card = document.createElement('a');
|
|
||||||
card.className = 'gallery-card grid-item';
|
|
||||||
card.href = `/gallery/${item.provider || currentProvider || 'unknown'}/${encodeURIComponent(item.id)}`;
|
|
||||||
card.dataset.id = item.id;
|
|
||||||
|
|
||||||
const img = document.createElement('img');
|
|
||||||
img.className = 'gallery-card-img';
|
|
||||||
|
|
||||||
img.src = getProxiedImageUrl(item);
|
|
||||||
img.alt = getTagsArray(item).join(', ') || 'Image';
|
|
||||||
if (isLoadMore) {
|
|
||||||
img.loading = 'lazy';
|
|
||||||
}
|
|
||||||
|
|
||||||
const favBtn = document.createElement('button');
|
|
||||||
favBtn.className = 'fav-btn';
|
|
||||||
const isFav = favorites.has(item.id);
|
|
||||||
favBtn.classList.toggle('favorited', isFav);
|
|
||||||
favBtn.innerHTML = isFav ? '<i class="fas fa-heart"></i>' : '<i class="far fa-heart"></i>';
|
|
||||||
favBtn.onclick = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
toggleFavorite(item);
|
|
||||||
};
|
|
||||||
|
|
||||||
card.appendChild(favBtn);
|
|
||||||
card.appendChild(img);
|
|
||||||
|
|
||||||
if (currentProvider !== 'favorites') {
|
|
||||||
const badge = document.createElement('div');
|
|
||||||
badge.className = 'provider-badge';
|
|
||||||
badge.textContent = item.provider || 'Global';
|
|
||||||
card.appendChild(badge);
|
|
||||||
} else {
|
|
||||||
const badge = document.createElement('div');
|
|
||||||
badge.className = 'provider-badge';
|
|
||||||
badge.textContent = 'Favorites';
|
|
||||||
badge.style.background = 'rgba(255,107,107,0.7)';
|
|
||||||
card.appendChild(badge);
|
|
||||||
}
|
|
||||||
|
|
||||||
img.onload = img.onerror = () => {
|
|
||||||
card.classList.add('is-loaded');
|
|
||||||
if (msnry) msnry.layout();
|
|
||||||
};
|
|
||||||
|
|
||||||
return card;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSkeletons(count, append = false) {
|
|
||||||
const skeleton = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;
|
|
||||||
if (!append) {
|
|
||||||
resultsContainer.innerHTML = '';
|
|
||||||
initializeMasonry();
|
|
||||||
}
|
|
||||||
const elements = [];
|
|
||||||
for (let i = 0; i < count; i++) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.innerHTML = skeleton;
|
|
||||||
const el = div.firstChild;
|
|
||||||
resultsContainer.appendChild(el);
|
|
||||||
elements.push(el);
|
|
||||||
}
|
|
||||||
if (msnry) {
|
|
||||||
msnry.appended(elements);
|
|
||||||
msnry.layout();
|
|
||||||
}
|
|
||||||
sentinel.style.display = 'none';
|
|
||||||
observer.unobserve(sentinel);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function searchGallery(isLoadMore = false) {
|
|
||||||
if (isLoading) return;
|
|
||||||
|
|
||||||
const query = searchInput.value.trim();
|
|
||||||
const provider = providerSelector.value;
|
|
||||||
const page = isLoadMore ? currentPage + 1 : 1;
|
|
||||||
|
|
||||||
favoritesMode = (provider === 'favorites');
|
|
||||||
|
|
||||||
currentQuery = query;
|
|
||||||
currentProvider = provider;
|
|
||||||
|
|
||||||
if (!isLoadMore) {
|
|
||||||
currentPage = 1;
|
|
||||||
showSkeletons(perPage);
|
|
||||||
} else {
|
|
||||||
showSkeletons(8, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
isLoading = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
let data;
|
|
||||||
|
|
||||||
if (favoritesMode) {
|
|
||||||
const res = await fetch('/api/gallery/favorites', {
|
|
||||||
headers: getAuthHeaders()
|
|
||||||
});
|
|
||||||
data = await res.json();
|
|
||||||
|
|
||||||
let favoritesResults = data.favorites || [];
|
|
||||||
if (query) {
|
|
||||||
const lowerQuery = query.toLowerCase();
|
|
||||||
favoritesResults = favoritesResults.filter(fav =>
|
|
||||||
(fav.title && fav.title.toLowerCase().includes(lowerQuery)) ||
|
|
||||||
(fav.tags && fav.tags.toLowerCase().includes(lowerQuery))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
data.results = favoritesResults.map(fav => ({
|
|
||||||
id: fav.id,
|
|
||||||
image: fav.image_url,
|
|
||||||
image_url: fav.image_url,
|
|
||||||
provider: fav.provider,
|
|
||||||
tags: fav.tags
|
|
||||||
}));
|
|
||||||
data.hasNextPage = false;
|
|
||||||
|
|
||||||
} else if (provider && provider !== '') {
|
|
||||||
const res = await fetch(`/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
|
|
||||||
data = await res.json();
|
|
||||||
} else {
|
|
||||||
const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
|
|
||||||
data = await res.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const results = data.results || [];
|
|
||||||
|
|
||||||
const skeletons = resultsContainer.querySelectorAll('.gallery-card.skeleton');
|
|
||||||
const toRemove = isLoadMore ? Array.from(skeletons).slice(-8) : skeletons;
|
|
||||||
if (msnry) msnry.remove(toRemove);
|
|
||||||
toRemove.forEach(el => el.remove());
|
|
||||||
|
|
||||||
const newCards = results.map((item, index) => createGalleryCard(item, isLoadMore));
|
|
||||||
newCards.forEach(card => resultsContainer.appendChild(card));
|
|
||||||
if (msnry) msnry.appended(newCards);
|
|
||||||
|
|
||||||
if (results.length === 0 && !isLoadMore) {
|
|
||||||
const msg = favoritesMode
|
|
||||||
? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
|
|
||||||
: 'No results found';
|
|
||||||
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (msnry) msnry.layout();
|
|
||||||
|
|
||||||
if (!favoritesMode && data.hasNextPage) {
|
|
||||||
sentinel.style.display = 'block';
|
|
||||||
observer.observe(sentinel);
|
|
||||||
} else {
|
|
||||||
sentinel.style.display = 'none';
|
|
||||||
observer.unobserve(sentinel);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoadMore) currentPage++;
|
|
||||||
else currentPage = 1;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error:', err);
|
|
||||||
if (!isLoadMore) {
|
|
||||||
resultsContainer.innerHTML = '<p style="text-align:center;color:red;padding:4rem;">Error loading gallery</p>';
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
isLoading = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadExtensions() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/extensions/gallery');
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
providerSelector.innerHTML = '';
|
|
||||||
|
|
||||||
const favoritesOption = document.createElement('option');
|
|
||||||
favoritesOption.value = 'favorites';
|
|
||||||
favoritesOption.textContent = 'Favorites';
|
|
||||||
providerSelector.appendChild(favoritesOption);
|
|
||||||
|
|
||||||
(data.extensions || []).forEach(ext => {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = ext;
|
|
||||||
opt.textContent = ext.charAt(0).toUpperCase() + ext.slice(1);
|
|
||||||
providerSelector.appendChild(opt);
|
|
||||||
});
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading extensions:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
providerSelector.addEventListener('change', () => {
|
|
||||||
if (providerSelector.value === 'favorites') {
|
|
||||||
searchInput.placeholder = "Search in favorites...";
|
|
||||||
} else {
|
|
||||||
searchInput.placeholder = "Search in gallery...";
|
|
||||||
}
|
|
||||||
searchGallery(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
let searchTimeout;
|
|
||||||
|
|
||||||
searchInput.addEventListener('input', () => {
|
|
||||||
clearTimeout(searchTimeout);
|
|
||||||
searchTimeout = setTimeout(() => {
|
|
||||||
searchGallery(false);
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
searchInput.addEventListener('keydown', e => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
clearTimeout(searchTimeout);
|
|
||||||
searchGallery(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(entries => {
|
|
||||||
if (entries[0].isIntersecting && !isLoading && !favoritesMode) {
|
|
||||||
observer.unobserve(sentinel);
|
|
||||||
searchGallery(true);
|
|
||||||
}
|
|
||||||
}, { rootMargin: '1000px' });
|
|
||||||
|
|
||||||
loadFavorites().then(() => {
|
|
||||||
loadExtensions().then(() => {
|
|
||||||
searchGallery(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
|
|
||||||
});
|
|
||||||
@@ -1,320 +0,0 @@
|
|||||||
const itemMainContentContainer = document.getElementById('item-main-content');
|
|
||||||
let currentItem = null;
|
|
||||||
|
|
||||||
function getAuthHeaders(extra = {}) {
|
|
||||||
const token = localStorage.getItem("token");
|
|
||||||
return token
|
|
||||||
? { ...extra, Authorization: `Bearer ${token}` }
|
|
||||||
: extra;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getProxiedItemUrl(url, headers = null) {
|
|
||||||
if (!url || !headers) {
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
|
|
||||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
|
|
||||||
|
|
||||||
const lowerCaseHeaders = {};
|
|
||||||
for (const key in headers) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(headers, key)) {
|
|
||||||
lowerCaseHeaders[key.toLowerCase()] = headers[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const referer = lowerCaseHeaders.referer;
|
|
||||||
if (referer) {
|
|
||||||
proxyUrl += `&referer=${encodeURIComponent(referer)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const origin = lowerCaseHeaders.origin;
|
|
||||||
if (origin) {
|
|
||||||
proxyUrl += `&origin=${encodeURIComponent(origin)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const userAgent = lowerCaseHeaders['user-agent'];
|
|
||||||
if (userAgent) {
|
|
||||||
proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return proxyUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getUrlParams() {
|
|
||||||
const path = window.location.pathname.split('/').filter(s => s);
|
|
||||||
if (path.length < 3 || path[0] !== 'gallery') return null;
|
|
||||||
|
|
||||||
if (path[1] === 'favorites' && path[2]) {
|
|
||||||
return { fromFavorites: true, id: path[2] };
|
|
||||||
} else {
|
|
||||||
return { provider: path[1], id: path.slice(2).join('/') };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function toggleFavorite() {
|
|
||||||
if (!currentItem?.id) return;
|
|
||||||
|
|
||||||
const btn = document.getElementById('fav-btn');
|
|
||||||
const wasFavorited = btn.classList.contains('favorited');
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (wasFavorited) {
|
|
||||||
await fetch(`/api/gallery/favorites/${encodeURIComponent(currentItem.id)}`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: getAuthHeaders()
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
const serializedHeaders = currentItem.headers ? JSON.stringify(currentItem.headers) : "";
|
|
||||||
const tagsString = Array.isArray(currentItem.tags) ? currentItem.tags.join(',') : (currentItem.tags || '');
|
|
||||||
|
|
||||||
await fetch('/api/gallery/favorites', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: getAuthHeaders({
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
}),
|
|
||||||
body: JSON.stringify({
|
|
||||||
id: currentItem.id,
|
|
||||||
title: currentItem.title || 'Waifu',
|
|
||||||
image_url: currentItem.originalImage,
|
|
||||||
thumbnail_url: currentItem.originalImage,
|
|
||||||
tags: tagsString,
|
|
||||||
provider: currentItem.provider || "",
|
|
||||||
headers: serializedHeaders
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.classList.toggle('favorited', !wasFavorited);
|
|
||||||
btn.innerHTML = !wasFavorited
|
|
||||||
? `<i class="fas fa-heart"></i> Saved!`
|
|
||||||
: `<i class="far fa-heart"></i> Save Image`;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error toggling favorite:', err);
|
|
||||||
alert('Error updating favorites');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyLink() {
|
|
||||||
navigator.clipboard.writeText(window.location.href);
|
|
||||||
const btn = document.getElementById('copy-link-btn');
|
|
||||||
const old = btn.innerHTML;
|
|
||||||
btn.innerHTML = `<i class="fas fa-check"></i> Copied!`;
|
|
||||||
setTimeout(() => btn.innerHTML = old, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadSimilarImages(item) {
|
|
||||||
if (!item.tags || item.tags.length === 0) {
|
|
||||||
document.getElementById('similar-section').innerHTML = '<p style="text-align:center;color:var(--color-text-secondary);padding:3rem 0;">No tags available to search for similar images.</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const firstTag = item.tags[0];
|
|
||||||
const container = document.getElementById('similar-section');
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(firstTag)}&perPage=20`);
|
|
||||||
if (!res.ok) throw new Error();
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
const results = (data.results || [])
|
|
||||||
.filter(r => r.id !== item.id)
|
|
||||||
.slice(0, 15);
|
|
||||||
|
|
||||||
if (results.length === 0) {
|
|
||||||
container.innerHTML = '<p style="text-align:center;color:var(--color-text-secondary);padding:3rem 0;">No similar images found.</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.innerHTML = `
|
|
||||||
<h3 style="text-align:center;margin:2rem 0 1.5rem;font-size:1.7rem;">
|
|
||||||
More images tagged with "<span style="color:var(--color-primary);">${firstTag}</span>"
|
|
||||||
</h3>
|
|
||||||
<div class="similar-grid">
|
|
||||||
${results.map(img => {
|
|
||||||
const imageUrl = img.image || img.image_url || img.thumbnail_url;
|
|
||||||
const proxiedUrl = getProxiedItemUrl(imageUrl, img.headers);
|
|
||||||
|
|
||||||
return `
|
|
||||||
<a href="/gallery/${img.provider || 'unknown'}/${encodeURIComponent(img.id)}" class="similar-card">
|
|
||||||
<img src="${proxiedUrl}" alt="Similar" loading="lazy">
|
|
||||||
<div class="similar-overlay">${img.provider || 'Global'}</div>
|
|
||||||
</a>
|
|
||||||
`;
|
|
||||||
}).join('')}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
container.innerHTML = '<p style="text-align:center;color:var(--color-text-secondary);opacity:0.6;padding:3rem 0;">Could not load similar images.</p>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderItem(item) {
|
|
||||||
const proxiedFullImage = getProxiedItemUrl(item.fullImage, item.headers);
|
|
||||||
|
|
||||||
let sourceText;
|
|
||||||
if (item.fromFavorites) {
|
|
||||||
sourceText = item.headers && item.provider && item.provider !== 'Favorites'
|
|
||||||
? `Source: ${item.provider}`
|
|
||||||
: 'Favorites';
|
|
||||||
} else {
|
|
||||||
sourceText = `Source: ${item.provider}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const originalProviderText = (item.fromFavorites && item.provider && item.provider !== 'Favorites')
|
|
||||||
? ` (Original: ${item.provider})`
|
|
||||||
: '';
|
|
||||||
|
|
||||||
itemMainContentContainer.innerHTML = `
|
|
||||||
<div class="item-content-flex-wrapper">
|
|
||||||
<div class="image-col">
|
|
||||||
<img class="item-image loaded" src="${proxiedFullImage}" alt="${item.title}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-col">
|
|
||||||
<div class="info-header">
|
|
||||||
<span class="provider-name">
|
|
||||||
${sourceText}${originalProviderText}
|
|
||||||
</span>
|
|
||||||
<h1>${item.title}</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="actions-row">
|
|
||||||
<button id="fav-btn" class="action-btn fav-action">
|
|
||||||
<i class="far fa-heart"></i> Save Image
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button id="copy-link-btn" class="action-btn copy-link-btn">
|
|
||||||
<i class="fas fa-link"></i> Copy Link
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tags-section">
|
|
||||||
<h3>Tags</h3>
|
|
||||||
<div class="tag-list">
|
|
||||||
${item.tags.length > 0
|
|
||||||
? item.tags.map(tag => `
|
|
||||||
<a class="tag-item">${tag}</a>
|
|
||||||
`).join('')
|
|
||||||
: '<span style="opacity:0.6;color:var(--color-text-secondary);">No tags</span>'
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.getElementById('fav-btn').addEventListener('click', toggleFavorite);
|
|
||||||
document.getElementById('copy-link-btn').addEventListener('click', copyLink);
|
|
||||||
|
|
||||||
loadSimilarImages(item);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderError(msg) {
|
|
||||||
itemMainContentContainer.innerHTML = `
|
|
||||||
<div style="text-align:center;padding:8rem 1rem;">
|
|
||||||
<i class="fa-solid fa-heart-crack" style="font-size:5rem;color:#ff6b6b;opacity:0.7;"></i>
|
|
||||||
<h2 style="margin:2rem 0;color:var(--color-text-primary);">Image Not Available</h2>
|
|
||||||
<p style="color:var(--color-text-secondary);max-width:600px;margin:0 auto 2rem;">${msg}</p>
|
|
||||||
<a href="/gallery" style="padding:1rem 2.5rem;background:var(--color-primary);color:white;border-radius:99px;text-decoration:none;font-weight:600;">
|
|
||||||
Back to Gallery
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.getElementById('similar-section').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadFromFavorites(id) {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, {
|
|
||||||
headers: getAuthHeaders()
|
|
||||||
});
|
|
||||||
if (!res.ok) throw new Error('Not found');
|
|
||||||
|
|
||||||
const { favorite: fav } = await res.json();
|
|
||||||
|
|
||||||
const item = {
|
|
||||||
id: fav.id,
|
|
||||||
title: fav.title || 'No title',
|
|
||||||
fullImage: fav.image_url,
|
|
||||||
originalImage: fav.image_url,
|
|
||||||
tags: typeof fav.tags === 'string' ? fav.tags.split(',').map(t => t.trim()).filter(Boolean) : (fav.tags || []),
|
|
||||||
provider: 'Favorites',
|
|
||||||
fromFavorites: true,
|
|
||||||
headers: fav.headers
|
|
||||||
};
|
|
||||||
|
|
||||||
currentItem = item;
|
|
||||||
renderItem(item);
|
|
||||||
document.getElementById('page-title').textContent = `WaifuBoard - ${item.title}`;
|
|
||||||
|
|
||||||
document.getElementById('fav-btn')?.classList.add('favorited');
|
|
||||||
const btn = document.getElementById('fav-btn');
|
|
||||||
if (btn) {
|
|
||||||
btn.innerHTML = `<i class="fa-solid fa-heart"></i> Saved!`;
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
renderError('This image is no longer in your favorites.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadFromProvider(provider, id) {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/gallery/fetch/${id}?provider=${provider}`);
|
|
||||||
if (!res.ok) throw new Error();
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
if (!data.image) throw new Error();
|
|
||||||
|
|
||||||
const item = {
|
|
||||||
id,
|
|
||||||
title: data.title || 'Beautiful Art',
|
|
||||||
fullImage: data.image,
|
|
||||||
originalImage: data.image,
|
|
||||||
tags: data.tags || [],
|
|
||||||
provider,
|
|
||||||
headers: data.headers
|
|
||||||
};
|
|
||||||
|
|
||||||
currentItem = item;
|
|
||||||
renderItem(item);
|
|
||||||
document.getElementById('page-title').textContent = `WaifuBoard - ${item.title}`;
|
|
||||||
|
|
||||||
const favRes = await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, {
|
|
||||||
headers: getAuthHeaders()
|
|
||||||
});
|
|
||||||
if (favRes.ok) {
|
|
||||||
document.getElementById('fav-btn')?.classList.add('favorited');
|
|
||||||
const btn = document.getElementById('fav-btn');
|
|
||||||
if (btn) {
|
|
||||||
btn.innerHTML = `<i class="fa-solid fa-heart"></i> Saved!`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
renderError('Image not found.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (itemMainContentContainer) {
|
|
||||||
const params = getUrlParams();
|
|
||||||
if (!params) {
|
|
||||||
renderError('Invalid URL');
|
|
||||||
} else if (params.fromFavorites) {
|
|
||||||
loadFromFavorites(params.id);
|
|
||||||
} else {
|
|
||||||
loadFromProvider(params.provider, params.id);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
document.getElementById('item-content').innerHTML = `<p style="text-align:center;padding:5rem;color:red;">Error: HTML container 'item-main-content' not found. Please update gallery-image.html.</p>`;
|
|
||||||
document.getElementById('similar-section').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
|
|
||||||
});
|
|
||||||
@@ -1,368 +0,0 @@
|
|||||||
const API_BASE = '/api';
|
|
||||||
let currentList = [];
|
|
||||||
let filteredList = [];
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
|
||||||
await loadList();
|
|
||||||
setupEventListeners();
|
|
||||||
});
|
|
||||||
|
|
||||||
function getEntryLink(item) {
|
|
||||||
const isAnime = item.entry_type?.toUpperCase() === 'ANIME';
|
|
||||||
const baseRoute = isAnime ? '/anime' : '/book';
|
|
||||||
const source = item.source || 'anilist';
|
|
||||||
|
|
||||||
if (source === 'anilist') {
|
|
||||||
return `${baseRoute}/${item.entry_id}`;
|
|
||||||
} else {
|
|
||||||
return `${baseRoute}/${source}/${item.entry_id}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function populateSourceFilter() {
|
|
||||||
const select = document.getElementById('source-filter');
|
|
||||||
if (!select) return;
|
|
||||||
|
|
||||||
select.innerHTML = `
|
|
||||||
<option value="all">All Sources</option>
|
|
||||||
<option value="anilist">AniList</option>
|
|
||||||
`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE}/extensions`);
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
const extensions = data.extensions || [];
|
|
||||||
|
|
||||||
extensions.forEach(extName => {
|
|
||||||
if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') {
|
|
||||||
const option = document.createElement('option');
|
|
||||||
option.value = extName;
|
|
||||||
option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1);
|
|
||||||
select.appendChild(option);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading extensions:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateLocalList(entryData, action) {
|
|
||||||
const entryId = entryData.entry_id;
|
|
||||||
const source = entryData.source;
|
|
||||||
|
|
||||||
const findIndex = (list) => list.findIndex(e =>
|
|
||||||
e.entry_id === entryId && e.source === source
|
|
||||||
);
|
|
||||||
|
|
||||||
const currentIndex = findIndex(currentList);
|
|
||||||
if (currentIndex !== -1) {
|
|
||||||
if (action === 'update') {
|
|
||||||
|
|
||||||
currentList[currentIndex] = { ...currentList[currentIndex], ...entryData };
|
|
||||||
} else if (action === 'delete') {
|
|
||||||
currentList.splice(currentIndex, 1);
|
|
||||||
}
|
|
||||||
} else if (action === 'update') {
|
|
||||||
|
|
||||||
currentList.push(entryData);
|
|
||||||
}
|
|
||||||
|
|
||||||
filteredList = [...currentList];
|
|
||||||
|
|
||||||
updateStats();
|
|
||||||
applyFilters();
|
|
||||||
window.ListModalManager.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupEventListeners() {
|
|
||||||
|
|
||||||
document.querySelectorAll('.view-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
|
|
||||||
btn.classList.add('active');
|
|
||||||
const view = btn.dataset.view;
|
|
||||||
const container = document.getElementById('list-container');
|
|
||||||
if (view === 'list') {
|
|
||||||
container.classList.add('list-view');
|
|
||||||
} else {
|
|
||||||
container.classList.remove('list-view');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('status-filter').addEventListener('change', applyFilters);
|
|
||||||
document.getElementById('source-filter').addEventListener('change', applyFilters);
|
|
||||||
document.getElementById('type-filter').addEventListener('change', applyFilters);
|
|
||||||
document.getElementById('sort-filter').addEventListener('change', applyFilters);
|
|
||||||
|
|
||||||
document.querySelector('.search-input').addEventListener('input', (e) => {
|
|
||||||
const query = e.target.value.toLowerCase();
|
|
||||||
if (query) {
|
|
||||||
filteredList = currentList.filter(item =>
|
|
||||||
item.title?.toLowerCase().includes(query)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
filteredList = [...currentList];
|
|
||||||
}
|
|
||||||
applyFilters();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('modal-save-btn')?.addEventListener('click', async () => {
|
|
||||||
|
|
||||||
const entryToSave = window.ListModalManager.currentEntry || window.ListModalManager.currentData;
|
|
||||||
|
|
||||||
if (!entryToSave) return;
|
|
||||||
|
|
||||||
const success = await window.ListModalManager.save(entryToSave.entry_id, entryToSave.source);
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
|
|
||||||
const updatedEntry = window.ListModalManager.currentEntry;
|
|
||||||
updatedEntry.updated_at = new Date().toISOString();
|
|
||||||
|
|
||||||
updateLocalList(updatedEntry, 'update');
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('modal-delete-btn')?.addEventListener('click', async () => {
|
|
||||||
const entryToDelete = window.ListModalManager.currentEntry || window.ListModalManager.currentData;
|
|
||||||
|
|
||||||
if (!entryToDelete) return;
|
|
||||||
|
|
||||||
const success = await window.ListModalManager.delete(entryToDelete.entry_id, entryToDelete.source);
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
updateLocalList(entryToDelete, 'delete');
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('add-list-modal')?.addEventListener('click', (e) => {
|
|
||||||
if (e.target.id === 'add-list-modal') {
|
|
||||||
window.ListModalManager.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadList() {
|
|
||||||
const loadingState = document.getElementById('loading-state');
|
|
||||||
const emptyState = document.getElementById('empty-state');
|
|
||||||
const container = document.getElementById('list-container');
|
|
||||||
|
|
||||||
await populateSourceFilter();
|
|
||||||
|
|
||||||
try {
|
|
||||||
loadingState.style.display = 'flex';
|
|
||||||
emptyState.style.display = 'none';
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
const response = await fetch(`${API_BASE}/list`, {
|
|
||||||
headers: window.AuthUtils.getSimpleAuthHeaders()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Failed to load list');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
currentList = data.results || [];
|
|
||||||
filteredList = [...currentList];
|
|
||||||
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
|
|
||||||
if (currentList.length === 0) {
|
|
||||||
emptyState.style.display = 'flex';
|
|
||||||
} else {
|
|
||||||
updateStats();
|
|
||||||
applyFilters();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading list:', error);
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
if (window.NotificationUtils) {
|
|
||||||
window.NotificationUtils.error('Failed to load your list. Please try again.');
|
|
||||||
} else {
|
|
||||||
alert('Failed to load your list. Please try again.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateStats() {
|
|
||||||
|
|
||||||
const total = currentList.length;
|
|
||||||
const watching = currentList.filter(item => item.status === 'WATCHING').length;
|
|
||||||
const completed = currentList.filter(item => item.status === 'COMPLETED').length;
|
|
||||||
const planning = currentList.filter(item => item.status === 'PLANNING').length;
|
|
||||||
|
|
||||||
document.getElementById('total-count').textContent = total;
|
|
||||||
document.getElementById('watching-count').textContent = watching;
|
|
||||||
document.getElementById('completed-count').textContent = completed;
|
|
||||||
document.getElementById('planned-count').textContent = planning;
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyFilters() {
|
|
||||||
const statusFilter = document.getElementById('status-filter').value;
|
|
||||||
const sourceFilter = document.getElementById('source-filter').value;
|
|
||||||
const typeFilter = document.getElementById('type-filter').value;
|
|
||||||
const sortFilter = document.getElementById('sort-filter').value;
|
|
||||||
|
|
||||||
let filtered = [...filteredList];
|
|
||||||
|
|
||||||
if (statusFilter !== 'all') {
|
|
||||||
filtered = filtered.filter(item => item.status === statusFilter);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sourceFilter !== 'all') {
|
|
||||||
filtered = filtered.filter(item => item.source === sourceFilter);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeFilter !== 'all') {
|
|
||||||
filtered = filtered.filter(item => item.entry_type === typeFilter);
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (sortFilter) {
|
|
||||||
case 'title':
|
|
||||||
filtered.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
|
||||||
break;
|
|
||||||
case 'score':
|
|
||||||
filtered.sort((a, b) => (b.score || 0) - (a.score || 0));
|
|
||||||
break;
|
|
||||||
case 'progress':
|
|
||||||
filtered.sort((a, b) => (b.progress || 0) - (a.progress || 0));
|
|
||||||
break;
|
|
||||||
case 'updated':
|
|
||||||
default:
|
|
||||||
|
|
||||||
filtered.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderList(filtered);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderList(items) {
|
|
||||||
const container = document.getElementById('list-container');
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (items.length === 0) {
|
|
||||||
|
|
||||||
if (currentList.length === 0) {
|
|
||||||
document.getElementById('empty-state').style.display = 'flex';
|
|
||||||
} else {
|
|
||||||
|
|
||||||
container.innerHTML = '<div class="empty-state"><p>No entries match your filters</p></div>';
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('empty-state').style.display = 'none';
|
|
||||||
|
|
||||||
items.forEach(item => {
|
|
||||||
const element = createListItem(item);
|
|
||||||
container.appendChild(element);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createListItem(item) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'list-item';
|
|
||||||
|
|
||||||
const itemLink = getEntryLink(item);
|
|
||||||
|
|
||||||
const posterUrl = item.poster || '/public/assets/placeholder.png';
|
|
||||||
const progress = item.progress || 0;
|
|
||||||
|
|
||||||
const totalUnits = item.entry_type === 'ANIME' ?
|
|
||||||
item.total_episodes || 0 :
|
|
||||||
item.total_chapters || 0;
|
|
||||||
|
|
||||||
const progressPercent = totalUnits > 0 ? (progress / totalUnits) * 100 : 0;
|
|
||||||
const score = item.score ? item.score.toFixed(1) : null;
|
|
||||||
const repeatCount = item.repeat_count || 0;
|
|
||||||
|
|
||||||
const entryType = (item.entry_type).toUpperCase();
|
|
||||||
let unitLabel = 'units';
|
|
||||||
if (entryType === 'ANIME') {
|
|
||||||
unitLabel = 'episodes';
|
|
||||||
} else if (entryType === 'MANGA') {
|
|
||||||
unitLabel = 'chapters';
|
|
||||||
} else if (entryType === 'NOVEL') {
|
|
||||||
unitLabel = 'chapters/volumes';
|
|
||||||
}
|
|
||||||
|
|
||||||
const statusLabels = {
|
|
||||||
'CURRENT': entryType === 'ANIME' ? 'Watching' : 'Reading',
|
|
||||||
'COMPLETED': 'Completed',
|
|
||||||
'PLANNING': 'Planning',
|
|
||||||
'PAUSED': 'Paused',
|
|
||||||
'DROPPED': 'Dropped',
|
|
||||||
'REPEATING': entryType === 'ANIME' ? 'Rewatching' : 'Rereading'
|
|
||||||
};
|
|
||||||
|
|
||||||
const extraInfo = [];
|
|
||||||
if (repeatCount > 0) {
|
|
||||||
extraInfo.push(`<span class="meta-pill repeat-pill">🔁 ${repeatCount}</span>`);
|
|
||||||
}
|
|
||||||
if (item.is_private) {
|
|
||||||
extraInfo.push('<span class="meta-pill private-pill">🔒 Private</span>');
|
|
||||||
}
|
|
||||||
|
|
||||||
const entryDataString = JSON.stringify(item).replace(/'/g, ''');
|
|
||||||
|
|
||||||
div.innerHTML = `
|
|
||||||
<a href="${itemLink}" class="item-poster-link">
|
|
||||||
<img src="${posterUrl}" alt="${item.title || 'Entry'}" class="item-poster" onerror="this.src='/public/assets/placeholder.png'">
|
|
||||||
</a>
|
|
||||||
<div class="item-content">
|
|
||||||
<div>
|
|
||||||
<a href="${itemLink}" style="text-decoration:none; color:inherit;">
|
|
||||||
<h3 class="item-title">${item.title || 'Unknown Title'}</h3>
|
|
||||||
</a>
|
|
||||||
<div class="item-meta">
|
|
||||||
<span class="meta-pill status-pill">${statusLabels[item.status] || item.status}</span>
|
|
||||||
<span class="meta-pill type-pill">${entryType}</span>
|
|
||||||
<span class="meta-pill source-pill">${item.source.toUpperCase()}</span>
|
|
||||||
${extraInfo.join('')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="progress-bar-container">
|
|
||||||
<div class="progress-bar" style="width: ${progressPercent}%"></div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-text">
|
|
||||||
<span>${progress}${totalUnits > 0 ? ` / ${totalUnits}` : ''} ${unitLabel}</span> ${score ? `<span class="score-badge">⭐ ${score}</span>` : ''}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="edit-icon-btn" data-entry='${entryDataString}'>
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
|
||||||
<path d="M15.232 5.232l3.536 3.536m-2.036-5.808a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L15.232 5.232z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const editBtn = div.querySelector('.edit-icon-btn');
|
|
||||||
editBtn.addEventListener('click', (e) => {
|
|
||||||
try {
|
|
||||||
const entryData = JSON.parse(e.currentTarget.dataset.entry);
|
|
||||||
|
|
||||||
window.ListModalManager.isInList = true;
|
|
||||||
window.ListModalManager.currentEntry = entryData;
|
|
||||||
window.ListModalManager.currentData = entryData;
|
|
||||||
|
|
||||||
window.ListModalManager.open(entryData, entryData.source);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error parsing entry data for modal:', error);
|
|
||||||
if (window.NotificationUtils) {
|
|
||||||
window.NotificationUtils.error('Could not open modal. Check HTML form IDs.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return div;
|
|
||||||
}
|
|
||||||
@@ -1,422 +0,0 @@
|
|||||||
const GITEA_INSTANCE = 'https://git.waifuboard.app';
|
|
||||||
const REPO_OWNER = 'ItsSkaiya';
|
|
||||||
const REPO_NAME = 'WaifuBoard-Extensions';
|
|
||||||
let DETECTED_BRANCH = 'main';
|
|
||||||
const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
|
|
||||||
|
|
||||||
const INSTALLED_EXTENSIONS_API = '/api/extensions';
|
|
||||||
|
|
||||||
const extensionsGrid = document.getElementById('extensions-grid');
|
|
||||||
const filterSelect = document.getElementById('extension-filter');
|
|
||||||
|
|
||||||
let allExtensionsData = [];
|
|
||||||
|
|
||||||
const customModal = document.getElementById('customModal');
|
|
||||||
const modalTitle = document.getElementById('modalTitle');
|
|
||||||
const modalMessage = document.getElementById('modalMessage');
|
|
||||||
|
|
||||||
function getRawUrl(filename) {
|
|
||||||
|
|
||||||
const targetUrl = `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
|
|
||||||
|
|
||||||
const encodedUrl = encodeURIComponent(targetUrl);
|
|
||||||
|
|
||||||
return `/api/proxy?url=${encodedUrl}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateExtensionState(fileName, installed) {
|
|
||||||
const ext = allExtensionsData.find(e => e.fileName === fileName);
|
|
||||||
if (!ext) return;
|
|
||||||
|
|
||||||
ext.isInstalled = installed;
|
|
||||||
ext.isLocal = installed && ext.isLocal;
|
|
||||||
|
|
||||||
filterAndRenderExtensions(filterSelect?.value || 'All');
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatExtensionName(fileName) {
|
|
||||||
return fileName.replace('.js', '')
|
|
||||||
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
||||||
.replace(/^[a-z]/, (char) => char.toUpperCase());
|
|
||||||
}
|
|
||||||
|
|
||||||
function getIconUrl(extensionDetails) {
|
|
||||||
return extensionDetails;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getExtensionDetails(url) {
|
|
||||||
try {
|
|
||||||
const res = await fetch(url);
|
|
||||||
if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
|
|
||||||
const text = await res.text();
|
|
||||||
|
|
||||||
const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
|
|
||||||
const match = text.match(regex);
|
|
||||||
let finalHostname = null;
|
|
||||||
if (match && match[2]) {
|
|
||||||
let rawUrl = match[2].trim();
|
|
||||||
if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
|
|
||||||
try {
|
|
||||||
const urlObj = new URL(rawUrl);
|
|
||||||
finalHostname = urlObj.hostname;
|
|
||||||
} catch(e) {
|
|
||||||
console.warn(`Could not parse baseUrl: ${rawUrl}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const classMatch = text.match(/class\s+(\w+)/);
|
|
||||||
const name = classMatch ? classMatch[1] : null;
|
|
||||||
|
|
||||||
let type = 'Image';
|
|
||||||
if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
|
|
||||||
else if (text.includes('type = "anime-board"') || text.includes("type = 'anime-board'")) type = 'Anime';
|
|
||||||
|
|
||||||
return { baseUrl: finalHostname, name, type };
|
|
||||||
} catch (e) {
|
|
||||||
return { baseUrl: null, name: null, type: 'Unknown' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showCustomModal(title, message, isConfirm = false) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
|
|
||||||
modalTitle.textContent = title;
|
|
||||||
modalMessage.textContent = message;
|
|
||||||
|
|
||||||
const currentConfirmButton = document.getElementById('modalConfirmButton');
|
|
||||||
const currentCloseButton = document.getElementById('modalCloseButton');
|
|
||||||
|
|
||||||
const newConfirmButton = currentConfirmButton.cloneNode(true);
|
|
||||||
currentConfirmButton.parentNode.replaceChild(newConfirmButton, currentConfirmButton);
|
|
||||||
|
|
||||||
const newCloseButton = currentCloseButton.cloneNode(true);
|
|
||||||
currentCloseButton.parentNode.replaceChild(newCloseButton, currentCloseButton);
|
|
||||||
|
|
||||||
if (isConfirm) {
|
|
||||||
|
|
||||||
newConfirmButton.classList.remove('hidden');
|
|
||||||
newConfirmButton.textContent = 'Confirm';
|
|
||||||
newCloseButton.textContent = 'Cancel';
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newConfirmButton.classList.add('hidden');
|
|
||||||
newCloseButton.textContent = 'Close';
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeModal = (confirmed) => {
|
|
||||||
customModal.classList.add('hidden');
|
|
||||||
resolve(confirmed);
|
|
||||||
};
|
|
||||||
|
|
||||||
newConfirmButton.onclick = () => closeModal(true);
|
|
||||||
newCloseButton.onclick = () => closeModal(false);
|
|
||||||
|
|
||||||
customModal.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderExtensionCard(extension, isInstalled, isLocalOnly = false) {
|
|
||||||
|
|
||||||
const extensionName = formatExtensionName(extension.fileName || extension.name);
|
|
||||||
const extensionType = extension.type || 'Unknown';
|
|
||||||
|
|
||||||
let iconUrl;
|
|
||||||
|
|
||||||
if (extension.baseUrl && extension.baseUrl !== 'Local Install') {
|
|
||||||
|
|
||||||
iconUrl = `https://www.google.com/s2/favicons?domain=${extension.baseUrl}&sz=128`;
|
|
||||||
} else {
|
|
||||||
|
|
||||||
const displayName = extensionName.replace(/\s/g, '+');
|
|
||||||
iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const card = document.createElement('div');
|
|
||||||
card.className = `extension-card grid-item extension-type-${extensionType.toLowerCase()}`;
|
|
||||||
card.dataset.path = extension.fileName || extension.name;
|
|
||||||
card.dataset.type = extensionType;
|
|
||||||
|
|
||||||
let buttonHtml;
|
|
||||||
let badgeHtml = '';
|
|
||||||
|
|
||||||
if (isInstalled) {
|
|
||||||
|
|
||||||
if (isLocalOnly) {
|
|
||||||
badgeHtml = '<span class="extension-status-badge badge-local">Local</span>';
|
|
||||||
} else {
|
|
||||||
badgeHtml = '<span class="extension-status-badge badge-installed">Installed</span>';
|
|
||||||
}
|
|
||||||
buttonHtml = `
|
|
||||||
<button class="extension-action-button btn-uninstall" data-action="uninstall">Uninstall</button>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
|
|
||||||
buttonHtml = `
|
|
||||||
<button class="extension-action-button btn-install" data-action="install">Install</button>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
card.innerHTML = `
|
|
||||||
<img class="extension-icon" src="${iconUrl}" alt="${extensionName} Icon" onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name=E&background=1f2937&color=fff&length=1'">
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<h3 class="extension-name" title="${extensionName}">${extensionName}</h3>
|
|
||||||
${badgeHtml}
|
|
||||||
</div>
|
|
||||||
${buttonHtml}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const installButton = card.querySelector('[data-action="install"]');
|
|
||||||
const uninstallButton = card.querySelector('[data-action="uninstall"]');
|
|
||||||
|
|
||||||
if (installButton) {
|
|
||||||
installButton.addEventListener('click', async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/extensions/install', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ fileName: extension.fileName }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
updateExtensionState(extension.fileName, true);
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Successful',
|
|
||||||
`${extensionName} has been successfully installed.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Failed',
|
|
||||||
`Installation failed: ${result.error || 'Unknown error.'}`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Installation Failed',
|
|
||||||
`Network error during installation.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (uninstallButton) {
|
|
||||||
uninstallButton.addEventListener('click', async () => {
|
|
||||||
|
|
||||||
const confirmed = await showCustomModal(
|
|
||||||
'Confirm Uninstallation',
|
|
||||||
`Are you sure you want to uninstall ${extensionName}?`,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!confirmed) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/extensions/uninstall', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ fileName: extension.fileName }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
updateExtensionState(extension.fileName, false);
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Successful',
|
|
||||||
`${extensionName} has been successfully uninstalled.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Failed',
|
|
||||||
`Uninstallation failed: ${result.error || 'Unknown error.'}`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
await showCustomModal(
|
|
||||||
'Uninstallation Failed',
|
|
||||||
`Network error during uninstallation.`,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
extensionsGrid.appendChild(card);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getInstalledExtensions() {
|
|
||||||
console.log(`Fetching installed extensions from: ${INSTALLED_EXTENSIONS_API}`);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(INSTALLED_EXTENSIONS_API);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
console.error(`Error fetching installed extensions. Status: ${response.status}`);
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!data.extensions || !Array.isArray(data.extensions)) {
|
|
||||||
console.error("Invalid response format from /api/extensions: 'extensions' array missing or incorrect.");
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
|
|
||||||
const installedFileNames = data.extensions
|
|
||||||
.map(name => `${name.toLowerCase()}.js`);
|
|
||||||
|
|
||||||
return new Set(installedFileNames);
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Network or JSON parsing error during fetch of installed extensions:', error);
|
|
||||||
return new Set();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterAndRenderExtensions(filterType) {
|
|
||||||
extensionsGrid.innerHTML = '';
|
|
||||||
|
|
||||||
if (!allExtensionsData || allExtensionsData.length === 0) {
|
|
||||||
console.log('No extension data to filter.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredExtensions = allExtensionsData.filter(ext =>
|
|
||||||
filterType === 'All' || ext.type === filterType || (ext.isLocal && filterType === 'Local')
|
|
||||||
);
|
|
||||||
|
|
||||||
filteredExtensions.forEach(ext => {
|
|
||||||
renderExtensionCard(ext, ext.isInstalled, ext.isLocal);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (filteredExtensions.length === 0) {
|
|
||||||
extensionsGrid.innerHTML = `<p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary);">No extensions found for the selected filter (${filterType}).</p>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadMarketplace() {
|
|
||||||
extensionsGrid.innerHTML = '';
|
|
||||||
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
extensionsGrid.innerHTML += `
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon skeleton" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button skeleton" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
const [availableExtensionsRaw, installedExtensionsSet] = await Promise.all([
|
|
||||||
fetch(API_URL_BASE).then(res => {
|
|
||||||
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
|
|
||||||
return res.json();
|
|
||||||
}),
|
|
||||||
getInstalledExtensions()
|
|
||||||
]);
|
|
||||||
|
|
||||||
const availableExtensionsJs = availableExtensionsRaw.filter(ext => ext.type === 'file' && ext.name.endsWith('.js'));
|
|
||||||
const detailPromises = [];
|
|
||||||
|
|
||||||
const marketplaceFileNames = new Set(availableExtensionsJs.map(ext => ext.name.toLowerCase()));
|
|
||||||
|
|
||||||
for (const ext of availableExtensionsJs) {
|
|
||||||
|
|
||||||
const downloadUrl = getRawUrl(ext.name);
|
|
||||||
|
|
||||||
const detailsPromise = getExtensionDetails(downloadUrl).then(details => ({
|
|
||||||
...ext,
|
|
||||||
...details,
|
|
||||||
fileName: ext.name,
|
|
||||||
|
|
||||||
isInstalled: installedExtensionsSet.has(ext.name.toLowerCase()),
|
|
||||||
isLocal: false,
|
|
||||||
}));
|
|
||||||
detailPromises.push(detailsPromise);
|
|
||||||
}
|
|
||||||
|
|
||||||
const extensionsWithDetails = await Promise.all(detailPromises);
|
|
||||||
|
|
||||||
installedExtensionsSet.forEach(installedName => {
|
|
||||||
|
|
||||||
if (!marketplaceFileNames.has(installedName)) {
|
|
||||||
|
|
||||||
const localExt = {
|
|
||||||
name: formatExtensionName(installedName),
|
|
||||||
fileName: installedName,
|
|
||||||
type: 'Local',
|
|
||||||
isInstalled: true,
|
|
||||||
isLocal: true,
|
|
||||||
baseUrl: 'Local Install',
|
|
||||||
};
|
|
||||||
extensionsWithDetails.push(localExt);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
extensionsWithDetails.sort((a, b) => {
|
|
||||||
if (a.isInstalled !== b.isInstalled) {
|
|
||||||
return b.isInstalled - a.isInstalled;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const nameA = a.name || '';
|
|
||||||
const nameB = b.name || '';
|
|
||||||
|
|
||||||
return nameA.localeCompare(nameB);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
allExtensionsData = extensionsWithDetails;
|
|
||||||
|
|
||||||
if (filterSelect) {
|
|
||||||
filterSelect.addEventListener('change', (event) => {
|
|
||||||
filterAndRenderExtensions(event.target.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
filterAndRenderExtensions('All');
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading the marketplace:', error);
|
|
||||||
extensionsGrid.innerHTML = `
|
|
||||||
<div style="grid-column: 1 / -1; color: #dc2626; text-align: center; padding: 2rem; background: rgba(220,38,38,0.1); border-radius: 12px; margin-top: 1rem;">
|
|
||||||
🚨 Error loading extensions.
|
|
||||||
<p>Could not connect to the extension repository or local endpoint. Detail: ${error.message}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
allExtensionsData = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customModal.addEventListener('click', (e) => {
|
|
||||||
if (e.target === customModal || e.target.tagName === 'BUTTON') {
|
|
||||||
customModal.classList.add('hidden');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', loadMarketplace);
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
|
||||||
const navbar = document.getElementById('navbar');
|
|
||||||
if (window.scrollY > 0) {
|
|
||||||
navbar.classList.add('scrolled');
|
|
||||||
} else {
|
|
||||||
navbar.classList.remove('scrolled');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
fetch("/api/rpc", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {"Content-Type": "application/json"},
|
|
||||||
body: JSON.stringify({
|
|
||||||
details: "Browsing",
|
|
||||||
state: `In App`,
|
|
||||||
mode: "idle"
|
|
||||||
})
|
|
||||||
});
|
|
||||||
@@ -1,360 +0,0 @@
|
|||||||
const ANILIST_API = 'https://graphql.anilist.co';
|
|
||||||
const CACHE_NAME = 'waifuboard-schedule-v1';
|
|
||||||
const CACHE_DURATION = 5 * 60 * 1000;
|
|
||||||
|
|
||||||
const state = {
|
|
||||||
currentDate: new Date(),
|
|
||||||
viewType: 'MONTH',
|
|
||||||
mode: 'SUB',
|
|
||||||
loading: false,
|
|
||||||
abortController: null,
|
|
||||||
refreshInterval: null
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
renderHeader();
|
|
||||||
fetchSchedule();
|
|
||||||
|
|
||||||
state.refreshInterval = setInterval(() => {
|
|
||||||
console.log("Auto-refreshing schedule...");
|
|
||||||
fetchSchedule(true);
|
|
||||||
}, CACHE_DURATION);
|
|
||||||
});
|
|
||||||
|
|
||||||
async function getCache(key) {
|
|
||||||
try {
|
|
||||||
const cache = await caches.open(CACHE_NAME);
|
|
||||||
|
|
||||||
const response = await cache.match(`/schedule-cache/${key}`);
|
|
||||||
|
|
||||||
if (!response) return null;
|
|
||||||
|
|
||||||
const cached = await response.json();
|
|
||||||
const age = Date.now() - cached.timestamp;
|
|
||||||
|
|
||||||
if (age < CACHE_DURATION) {
|
|
||||||
console.log(`[Cache Hit] Loaded ${key} (Age: ${Math.round(age / 1000)}s)`);
|
|
||||||
return cached.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`[Cache Stale] ${key} expired.`);
|
|
||||||
|
|
||||||
cache.delete(`/schedule-cache/${key}`);
|
|
||||||
return null;
|
|
||||||
} catch (e) {
|
|
||||||
console.error("Cache read failed", e);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setCache(key, data) {
|
|
||||||
try {
|
|
||||||
const cache = await caches.open(CACHE_NAME);
|
|
||||||
const payload = JSON.stringify({
|
|
||||||
timestamp: Date.now(),
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
|
|
||||||
const response = new Response(payload, {
|
|
||||||
headers: { 'Content-Type': 'application/json' }
|
|
||||||
});
|
|
||||||
await cache.put(`/schedule-cache/${key}`, response);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Cache write failed", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCacheKey() {
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
return `M_${state.currentDate.getFullYear()}_${state.currentDate.getMonth()}`;
|
|
||||||
} else {
|
|
||||||
const start = getWeekStart(state.currentDate);
|
|
||||||
return `W_${start.toISOString().split('T')[0]}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function navigate(delta) {
|
|
||||||
if (state.abortController) state.abortController.abort();
|
|
||||||
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
state.currentDate.setMonth(state.currentDate.getMonth() + delta);
|
|
||||||
} else {
|
|
||||||
state.currentDate.setDate(state.currentDate.getDate() + (delta * 7));
|
|
||||||
}
|
|
||||||
|
|
||||||
renderHeader();
|
|
||||||
fetchSchedule();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setViewType(type) {
|
|
||||||
if (state.viewType === type) return;
|
|
||||||
state.viewType = type;
|
|
||||||
|
|
||||||
document.getElementById('btnViewMonth').classList.toggle('active', type === 'MONTH');
|
|
||||||
document.getElementById('btnViewWeek').classList.toggle('active', type === 'WEEK');
|
|
||||||
|
|
||||||
if (state.abortController) state.abortController.abort();
|
|
||||||
|
|
||||||
renderHeader();
|
|
||||||
fetchSchedule();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setMode(mode) {
|
|
||||||
if (state.mode === mode) return;
|
|
||||||
state.mode = mode;
|
|
||||||
document.getElementById('btnSub').classList.toggle('active', mode === 'SUB');
|
|
||||||
document.getElementById('btnDub').classList.toggle('active', mode === 'DUB');
|
|
||||||
|
|
||||||
fetchSchedule();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderHeader() {
|
|
||||||
const options = { month: 'long', year: 'numeric' };
|
|
||||||
let title = state.currentDate.toLocaleDateString('en-US', options);
|
|
||||||
|
|
||||||
if (state.viewType === 'WEEK') {
|
|
||||||
const start = getWeekStart(state.currentDate);
|
|
||||||
const end = new Date(start);
|
|
||||||
end.setDate(end.getDate() + 6);
|
|
||||||
|
|
||||||
const startStr = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
|
||||||
const endStr = end.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
|
||||||
title = `Week of ${startStr} - ${endStr}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('monthTitle').textContent = title;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getWeekStart(date) {
|
|
||||||
const d = new Date(date);
|
|
||||||
const day = d.getDay();
|
|
||||||
const diff = d.getDate() - day + (day === 0 ? -6 : 1);
|
|
||||||
return new Date(d.setDate(diff));
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchSchedule(forceRefresh = false) {
|
|
||||||
const key = getCacheKey();
|
|
||||||
|
|
||||||
if (!forceRefresh) {
|
|
||||||
const cachedData = await getCache(key);
|
|
||||||
if (cachedData) {
|
|
||||||
renderGrid(cachedData);
|
|
||||||
updateAmbient(cachedData);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.abortController) state.abortController.abort();
|
|
||||||
state.abortController = new AbortController();
|
|
||||||
const signal = state.abortController.signal;
|
|
||||||
|
|
||||||
if (!forceRefresh) setLoading(true);
|
|
||||||
|
|
||||||
let startTs, endTs;
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
const year = state.currentDate.getFullYear();
|
|
||||||
const month = state.currentDate.getMonth();
|
|
||||||
startTs = Math.floor(new Date(year, month, 1).getTime() / 1000);
|
|
||||||
endTs = Math.floor(new Date(year, month + 1, 0, 23, 59, 59).getTime() / 1000);
|
|
||||||
} else {
|
|
||||||
const start = getWeekStart(state.currentDate);
|
|
||||||
start.setHours(0, 0, 0, 0);
|
|
||||||
const end = new Date(start);
|
|
||||||
end.setDate(end.getDate() + 7);
|
|
||||||
startTs = Math.floor(start.getTime() / 1000);
|
|
||||||
endTs = Math.floor(end.getTime() / 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
const query = `
|
|
||||||
query ($start: Int, $end: Int, $page: Int) {
|
|
||||||
Page(page: $page, perPage: 50) {
|
|
||||||
pageInfo { hasNextPage }
|
|
||||||
airingSchedules(airingAt_greater: $start, airingAt_lesser: $end, sort: TIME) {
|
|
||||||
airingAt
|
|
||||||
episode
|
|
||||||
media {
|
|
||||||
id
|
|
||||||
title { userPreferred english }
|
|
||||||
coverImage { large }
|
|
||||||
bannerImage
|
|
||||||
isAdult
|
|
||||||
countryOfOrigin
|
|
||||||
popularity
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
let allData = [];
|
|
||||||
let page = 1;
|
|
||||||
let hasNext = true;
|
|
||||||
let retries = 0;
|
|
||||||
|
|
||||||
try {
|
|
||||||
while (hasNext && page <= 6) {
|
|
||||||
if (signal.aborted) throw new DOMException("Aborted", "AbortError");
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(ANILIST_API, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
query,
|
|
||||||
variables: { start: startTs, end: endTs, page }
|
|
||||||
}),
|
|
||||||
signal: signal
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res.status === 429) {
|
|
||||||
if (retries > 2) throw new Error("Rate Limited");
|
|
||||||
console.warn("429 Hit. Waiting...");
|
|
||||||
await delay(4000);
|
|
||||||
retries++;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = await res.json();
|
|
||||||
if (json.errors) throw new Error("API Error");
|
|
||||||
|
|
||||||
const data = json.data.Page;
|
|
||||||
allData = [...allData, ...data.airingSchedules];
|
|
||||||
hasNext = data.pageInfo.hasNextPage;
|
|
||||||
page++;
|
|
||||||
|
|
||||||
await delay(600);
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
if (e.name === 'AbortError') throw e;
|
|
||||||
console.error(e);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!signal.aborted) {
|
|
||||||
|
|
||||||
await setCache(key, allData);
|
|
||||||
renderGrid(allData);
|
|
||||||
updateAmbient(allData);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
if (e.name !== 'AbortError') console.error("Fetch failed:", e);
|
|
||||||
} finally {
|
|
||||||
if (!signal.aborted) {
|
|
||||||
setLoading(false);
|
|
||||||
state.abortController = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderGrid(data) {
|
|
||||||
const grid = document.getElementById('daysGrid');
|
|
||||||
grid.innerHTML = '';
|
|
||||||
|
|
||||||
let items = data.filter(i => !i.media.isAdult && i.media.countryOfOrigin === 'JP');
|
|
||||||
if (state.mode === 'DUB') {
|
|
||||||
items = items.filter(i => i.media.popularity > 20000);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.viewType === 'MONTH') {
|
|
||||||
const year = state.currentDate.getFullYear();
|
|
||||||
const month = state.currentDate.getMonth();
|
|
||||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
||||||
let firstDayIndex = new Date(year, month, 1).getDay() - 1;
|
|
||||||
if (firstDayIndex === -1) firstDayIndex = 6;
|
|
||||||
|
|
||||||
for (let i = 0; i < firstDayIndex; i++) {
|
|
||||||
const empty = document.createElement('div');
|
|
||||||
empty.className = 'day-cell empty';
|
|
||||||
grid.appendChild(empty);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let day = 1; day <= daysInMonth; day++) {
|
|
||||||
const dateObj = new Date(year, month, day);
|
|
||||||
renderDayCell(dateObj, items, grid);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const start = getWeekStart(state.currentDate);
|
|
||||||
for (let i = 0; i < 7; i++) {
|
|
||||||
const dateObj = new Date(start);
|
|
||||||
dateObj.setDate(start.getDate() + i);
|
|
||||||
renderDayCell(dateObj, items, grid);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderDayCell(dateObj, items, grid) {
|
|
||||||
const cell = document.createElement('div');
|
|
||||||
cell.className = 'day-cell';
|
|
||||||
|
|
||||||
if (state.viewType === 'WEEK') cell.style.minHeight = '300px';
|
|
||||||
|
|
||||||
const day = dateObj.getDate();
|
|
||||||
const month = dateObj.getMonth();
|
|
||||||
const year = dateObj.getFullYear();
|
|
||||||
|
|
||||||
const now = new Date();
|
|
||||||
if (day === now.getDate() && month === now.getMonth() && year === now.getFullYear()) {
|
|
||||||
cell.classList.add('today');
|
|
||||||
}
|
|
||||||
|
|
||||||
const dayEvents = items.filter(i => {
|
|
||||||
const eventDate = new Date(i.airingAt * 1000);
|
|
||||||
return eventDate.getDate() === day && eventDate.getMonth() === month && eventDate.getFullYear() === year;
|
|
||||||
});
|
|
||||||
|
|
||||||
dayEvents.sort((a, b) => b.media.popularity - a.media.popularity);
|
|
||||||
|
|
||||||
if (dayEvents.length > 0) {
|
|
||||||
const top = dayEvents[0].media;
|
|
||||||
const bg = document.createElement('div');
|
|
||||||
bg.className = 'cell-backdrop';
|
|
||||||
bg.style.backgroundImage = `url('${top.coverImage.large}')`;
|
|
||||||
cell.appendChild(bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
const header = document.createElement('div');
|
|
||||||
header.className = 'day-header';
|
|
||||||
header.innerHTML = `
|
|
||||||
<span class="day-number">${day}</span>
|
|
||||||
<span class="today-label">Today</span>
|
|
||||||
`;
|
|
||||||
cell.appendChild(header);
|
|
||||||
|
|
||||||
const list = document.createElement('div');
|
|
||||||
list.className = 'events-list';
|
|
||||||
|
|
||||||
dayEvents.forEach(evt => {
|
|
||||||
const title = evt.media.title.english || evt.media.title.userPreferred;
|
|
||||||
const link = `/anime/${evt.media.id}`;
|
|
||||||
|
|
||||||
const chip = document.createElement('a');
|
|
||||||
chip.className = 'anime-chip';
|
|
||||||
chip.href = link;
|
|
||||||
chip.innerHTML = `
|
|
||||||
<span class="chip-title">${title}</span>
|
|
||||||
<span class="chip-ep">Ep ${evt.episode}</span>
|
|
||||||
`;
|
|
||||||
list.appendChild(chip);
|
|
||||||
});
|
|
||||||
|
|
||||||
cell.appendChild(list);
|
|
||||||
grid.appendChild(cell);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setLoading(bool) {
|
|
||||||
state.loading = bool;
|
|
||||||
const loader = document.getElementById('loader');
|
|
||||||
if (bool) loader.classList.add('active');
|
|
||||||
else loader.classList.remove('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
|
|
||||||
|
|
||||||
function updateAmbient(data) {
|
|
||||||
if (!data || !data.length) return;
|
|
||||||
const top = data.reduce((prev, curr) => (prev.media.popularity > curr.media.popularity) ? prev : curr);
|
|
||||||
const img = top.media.bannerImage || top.media.coverImage.large;
|
|
||||||
if (img) document.getElementById('ambientBg').style.backgroundImage = `url('${img}')`;
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
if (window.electronAPI?.isElectron) {
|
|
||||||
document.documentElement.classList.add("electron");
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
document.documentElement.style.visibility = "visible";
|
|
||||||
if (!window.electronAPI?.isElectron) return;
|
|
||||||
document.body.classList.add("electron");
|
|
||||||
|
|
||||||
const titlebar = document.getElementById("titlebar");
|
|
||||||
if (!titlebar) return;
|
|
||||||
|
|
||||||
titlebar.style.display = "flex";
|
|
||||||
|
|
||||||
titlebar.querySelector(".min").onclick = () => window.electronAPI.win.minimize();
|
|
||||||
titlebar.querySelector(".max").onclick = () => window.electronAPI.win.maximize();
|
|
||||||
titlebar.querySelector(".close").onclick = () => window.electronAPI.win.close();
|
|
||||||
});
|
|
||||||
@@ -1,977 +0,0 @@
|
|||||||
const API_BASE = '/api';
|
|
||||||
|
|
||||||
let users = [];
|
|
||||||
let selectedFile = null;
|
|
||||||
let currentUserId = null;
|
|
||||||
|
|
||||||
const usersGrid = document.getElementById('usersGrid');
|
|
||||||
const btnAddUser = document.getElementById('btnAddUser');
|
|
||||||
|
|
||||||
const modalCreateUser = document.getElementById('modalCreateUser');
|
|
||||||
const closeCreateModal = document.getElementById('closeCreateModal');
|
|
||||||
const cancelCreate = document.getElementById('cancelCreate');
|
|
||||||
const createUserForm = document.getElementById('createUserForm');
|
|
||||||
|
|
||||||
const modalUserActions = document.getElementById('modalUserActions');
|
|
||||||
const closeActionsModal = document.getElementById('closeActionsModal');
|
|
||||||
const actionsModalTitle = document.getElementById('actionsModalTitle');
|
|
||||||
|
|
||||||
const modalEditUser = document.getElementById('modalEditUser');
|
|
||||||
const closeEditModal = document.getElementById('closeEditModal');
|
|
||||||
const cancelEdit = document.getElementById('cancelEdit');
|
|
||||||
const editUserForm = document.getElementById('editUserForm');
|
|
||||||
|
|
||||||
const modalAniList = document.getElementById('modalAniList');
|
|
||||||
const closeAniListModal = document.getElementById('closeAniListModal');
|
|
||||||
const aniListContent = document.getElementById('aniListContent');
|
|
||||||
|
|
||||||
const toastContainer = document.getElementById('userToastContainer');
|
|
||||||
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
|
||||||
const anilistStatus = params.get("anilist");
|
|
||||||
|
|
||||||
if (anilistStatus === "success") {
|
|
||||||
showUserToast("✅ AniList connected successfully!");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (anilistStatus === "error") {
|
|
||||||
showUserToast("❌ Failed to connect AniList");
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
loadUsers();
|
|
||||||
attachEventListeners();
|
|
||||||
});
|
|
||||||
|
|
||||||
function showUserToast(message, type = 'info') {
|
|
||||||
if (!toastContainer) return;
|
|
||||||
|
|
||||||
const toast = document.createElement('div');
|
|
||||||
toast.className = `wb-toast ${type}`;
|
|
||||||
toast.textContent = message;
|
|
||||||
|
|
||||||
toastContainer.prepend(toast);
|
|
||||||
|
|
||||||
setTimeout(() => toast.classList.add('show'), 10);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
toast.classList.remove('show');
|
|
||||||
toast.addEventListener('transitionend', () => toast.remove());
|
|
||||||
}, 4000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function attachEventListeners() {
|
|
||||||
if (btnAddUser) btnAddUser.addEventListener('click', openCreateModal);
|
|
||||||
|
|
||||||
if (closeCreateModal) closeCreateModal.addEventListener('click', closeModal);
|
|
||||||
if (cancelCreate) cancelCreate.addEventListener('click', closeModal);
|
|
||||||
if (closeAniListModal) closeAniListModal.addEventListener('click', closeModal);
|
|
||||||
if (closeActionsModal) closeActionsModal.addEventListener('click', closeModal);
|
|
||||||
if (closeEditModal) closeEditModal.addEventListener('click', closeModal);
|
|
||||||
if (cancelEdit) cancelEdit.addEventListener('click', closeModal);
|
|
||||||
|
|
||||||
if (createUserForm) createUserForm.addEventListener('submit', handleCreateUser);
|
|
||||||
if (editUserForm) editUserForm.addEventListener('submit', handleEditUser);
|
|
||||||
|
|
||||||
document.querySelectorAll('.modal-overlay').forEach(overlay => {
|
|
||||||
overlay.addEventListener('click', (e) => {
|
|
||||||
if (e.target.classList.contains('modal-overlay')) closeModal();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initAvatarUpload(uploadAreaId, fileInputId, previewId) {
|
|
||||||
const uploadArea = document.getElementById(uploadAreaId);
|
|
||||||
const fileInput = document.getElementById(fileInputId);
|
|
||||||
const preview = document.getElementById(previewId);
|
|
||||||
|
|
||||||
if (!uploadArea || !fileInput) return;
|
|
||||||
|
|
||||||
uploadArea.addEventListener('click', () => fileInput.click());
|
|
||||||
|
|
||||||
fileInput.addEventListener('change', (e) => {
|
|
||||||
const file = e.target.files[0];
|
|
||||||
if (file) handleFileSelect(file, previewId);
|
|
||||||
});
|
|
||||||
|
|
||||||
uploadArea.addEventListener('dragover', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
uploadArea.classList.add('dragover');
|
|
||||||
});
|
|
||||||
|
|
||||||
uploadArea.addEventListener('dragleave', () => {
|
|
||||||
uploadArea.classList.remove('dragover');
|
|
||||||
});
|
|
||||||
|
|
||||||
uploadArea.addEventListener('drop', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
uploadArea.classList.remove('dragover');
|
|
||||||
const file = e.dataTransfer.files[0];
|
|
||||||
if (file && file.type.startsWith('image/')) {
|
|
||||||
handleFileSelect(file, previewId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFileSelect(file, previewId) {
|
|
||||||
if (!file.type.startsWith('image/')) {
|
|
||||||
showUserToast('Please select an image file', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (file.size > 5 * 1024 * 1024) {
|
|
||||||
showUserToast('Image size must be less than 5MB', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedFile = file;
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const preview = document.getElementById(previewId);
|
|
||||||
if (preview) preview.innerHTML = `<img src="${e.target.result}" alt="Avatar preview">`;
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
|
|
||||||
function fileToBase64(file) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = () => resolve(reader.result);
|
|
||||||
reader.onerror = (err) => reject(err);
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function togglePasswordVisibility(inputId, buttonElement) {
|
|
||||||
const input = document.getElementById(inputId);
|
|
||||||
if (!input) return;
|
|
||||||
|
|
||||||
if (input.type === 'password') {
|
|
||||||
input.type = 'text';
|
|
||||||
buttonElement.innerHTML = `
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
|
|
||||||
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
||||||
</svg>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
input.type = 'password';
|
|
||||||
buttonElement.innerHTML = `
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
</svg>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadUsers() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/users`);
|
|
||||||
if (!res.ok) throw new Error('Failed to fetch users');
|
|
||||||
const data = await res.json();
|
|
||||||
users = data.users || [];
|
|
||||||
renderUsers();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading users:', err);
|
|
||||||
showEmptyState();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderUsers() {
|
|
||||||
if (!usersGrid) return;
|
|
||||||
|
|
||||||
if (users.length === 0) {
|
|
||||||
showEmptyState();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
usersGrid.innerHTML = '';
|
|
||||||
users.forEach(user => {
|
|
||||||
const userCard = createUserCard(user);
|
|
||||||
usersGrid.appendChild(userCard);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createUserCard(user) {
|
|
||||||
const card = document.createElement('div');
|
|
||||||
card.className = 'user-card';
|
|
||||||
|
|
||||||
if (user.has_password) {
|
|
||||||
card.classList.add('has-password');
|
|
||||||
}
|
|
||||||
|
|
||||||
card.addEventListener('click', (e) => {
|
|
||||||
if (!e.target.closest('.user-config-btn')) {
|
|
||||||
loginUser(user.id, user.has_password);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const avatarContent = user.profile_picture_url
|
|
||||||
? `<img src="${user.profile_picture_url}" alt="${user.username}">`
|
|
||||||
: `<div class="user-avatar-placeholder">
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
||||||
<circle cx="12" cy="7" r="4"></circle>
|
|
||||||
</svg>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
card.innerHTML = `
|
|
||||||
<div class="user-avatar">${avatarContent}</div>
|
|
||||||
<div class="user-info">
|
|
||||||
<div class="user-name">${user.username}</div>
|
|
||||||
</div>
|
|
||||||
<button class="user-config-btn" title="Manage User" data-user-id="${user.id}">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1.51-1V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const configBtn = card.querySelector('.user-config-btn');
|
|
||||||
configBtn.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
openUserActionsModal(user.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
return card;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showEmptyState() {
|
|
||||||
if (!usersGrid) return;
|
|
||||||
usersGrid.innerHTML = `
|
|
||||||
<div class="empty-state" style="grid-column: 1/-1;">
|
|
||||||
<svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
||||||
<circle cx="9" cy="7" r="4"></circle>
|
|
||||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
||||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
||||||
</svg>
|
|
||||||
<h2 class="empty-title">No Users Yet</h2>
|
|
||||||
<p class="empty-text">Create your first profile to get started</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function openCreateModal() {
|
|
||||||
modalCreateUser.innerHTML = `
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>Create New User</h2>
|
|
||||||
<button class="modal-close" onclick="closeModal()">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form id="createUserFormDynamic">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username">Username</label>
|
|
||||||
<input type="text" id="username" name="username" required maxlength="20" placeholder="Enter your name">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="createPassword">
|
|
||||||
Password <span class="optional-label">(Optional)</span>
|
|
||||||
</label>
|
|
||||||
<div class="password-toggle-wrapper">
|
|
||||||
<input type="password" id="createPassword" name="password" placeholder="Leave empty for no password">
|
|
||||||
<button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility('createPassword', this)">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Profile Picture</label>
|
|
||||||
<div class="avatar-upload-area" id="avatarUploadArea">
|
|
||||||
<div class="avatar-preview" id="avatarPreview">
|
|
||||||
<svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
||||||
<circle cx="12" cy="7" r="4"></circle>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p class="avatar-upload-text">Click to upload or drag and drop</p>
|
|
||||||
<p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
|
|
||||||
</div>
|
|
||||||
<input type="file" id="avatarInput" accept="image/*">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button type="button" class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
||||||
<button type="submit" class="btn-primary">Create User</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modalCreateUser.classList.add('active');
|
|
||||||
|
|
||||||
initAvatarUpload('avatarUploadArea', 'avatarInput', 'avatarPreview');
|
|
||||||
|
|
||||||
document.getElementById('createUserFormDynamic').addEventListener('submit', handleCreateUser);
|
|
||||||
document.getElementById('username').focus();
|
|
||||||
|
|
||||||
selectedFile = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeModal() {
|
|
||||||
modalCreateUser.classList.remove('active');
|
|
||||||
modalAniList.classList.remove('active');
|
|
||||||
modalUserActions.classList.remove('active');
|
|
||||||
modalEditUser.classList.remove('active');
|
|
||||||
selectedFile = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleCreateUser(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const username = document.getElementById('username').value.trim();
|
|
||||||
const password = document.getElementById('createPassword').value.trim();
|
|
||||||
|
|
||||||
if (!username) {
|
|
||||||
showUserToast('Please enter a username', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const submitBtn = e.target.querySelector('button[type="submit"]');
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.textContent = 'Creating...';
|
|
||||||
|
|
||||||
try {
|
|
||||||
let profilePictureUrl = null;
|
|
||||||
if (selectedFile) profilePictureUrl = await fileToBase64(selectedFile);
|
|
||||||
|
|
||||||
const body = { username };
|
|
||||||
if (profilePictureUrl) body.profilePictureUrl = profilePictureUrl;
|
|
||||||
if (password) body.password = password;
|
|
||||||
|
|
||||||
const res = await fetch(`${API_BASE}/users`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(body)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const error = await res.json();
|
|
||||||
throw new Error(error.error || 'Error creating user');
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
await loadUsers();
|
|
||||||
showUserToast(`User ${username} created successfully!`, 'success');
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showUserToast(err.message || 'Error creating user', 'error');
|
|
||||||
} finally {
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
submitBtn.textContent = 'Create User';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function openUserActionsModal(userId) {
|
|
||||||
currentUserId = userId;
|
|
||||||
const user = users.find(u => u.id === userId);
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
modalAniList.classList.remove('active');
|
|
||||||
modalEditUser.classList.remove('active');
|
|
||||||
|
|
||||||
actionsModalTitle.textContent = `Manage ${user.username}`;
|
|
||||||
|
|
||||||
const content = document.getElementById('actionsModalContent');
|
|
||||||
if (!content) return;
|
|
||||||
|
|
||||||
content.innerHTML = `
|
|
||||||
<div class="manage-actions-modal">
|
|
||||||
<button class="btn-action edit" onclick="openEditModal(${user.id})">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
|
|
||||||
</svg>
|
|
||||||
Edit Profile
|
|
||||||
</button>
|
|
||||||
<button class="btn-action password" onclick="openPasswordModal(${user.id})">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
||||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
||||||
</svg>
|
|
||||||
${user.has_password ? 'Change Password' : 'Add Password'}
|
|
||||||
</button>
|
|
||||||
<button class="btn-action anilist" onclick="openAniListModal(${user.id})">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
|
||||||
</svg>
|
|
||||||
AniList Integration
|
|
||||||
</button>
|
|
||||||
<button class="btn-action delete" onclick="handleDeleteConfirmation(${user.id})">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
|
|
||||||
<line x1="18" y1="9" x2="12" y2="15"></line>
|
|
||||||
<line x1="12" y1="9" x2="18" y2="15"></line>
|
|
||||||
</svg>
|
|
||||||
Delete Profile
|
|
||||||
</button>
|
|
||||||
<button class="btn-action cancel" onclick="closeModal()">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modalUserActions.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
window.openEditModal = function(userId) {
|
|
||||||
currentUserId = userId;
|
|
||||||
modalUserActions.classList.remove('active');
|
|
||||||
const user = users.find(u => u.id === userId);
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
modalEditUser.innerHTML = `
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>Edit Profile</h2>
|
|
||||||
<button class="modal-close" onclick="closeModal()">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form id="editUserFormDynamic">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="editUsername">Username</label>
|
|
||||||
<input type="text" id="editUsername" name="username" required maxlength="20" value="${user.username}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Profile Picture</label>
|
|
||||||
<div class="avatar-upload-area" id="editAvatarUploadArea">
|
|
||||||
<div class="avatar-preview" id="editAvatarPreview">
|
|
||||||
${user.profile_picture_url
|
|
||||||
? `<img src="${user.profile_picture_url}" alt="Avatar">`
|
|
||||||
: `<svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
||||||
<circle cx="12" cy="7" r="4"></circle>
|
|
||||||
</svg>`
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<p class="avatar-upload-text">Click to upload or drag and drop</p>
|
|
||||||
<p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
|
|
||||||
</div>
|
|
||||||
<input type="file" id="editAvatarInput" accept="image/*">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button type="button" class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
||||||
<button type="submit" class="btn-primary">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modalEditUser.classList.add('active');
|
|
||||||
|
|
||||||
initAvatarUpload('editAvatarUploadArea', 'editAvatarInput', 'editAvatarPreview');
|
|
||||||
|
|
||||||
selectedFile = null;
|
|
||||||
|
|
||||||
document.getElementById('editUserFormDynamic').addEventListener('submit', handleEditUser);
|
|
||||||
};
|
|
||||||
|
|
||||||
async function handleEditUser(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const user = users.find(u => u.id === currentUserId);
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
const username = document.getElementById('editUsername').value.trim();
|
|
||||||
if (!username) {
|
|
||||||
showUserToast('Please enter a username', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const submitBtn = e.target.querySelector('.btn-primary');
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.textContent = 'Saving...';
|
|
||||||
|
|
||||||
try {
|
|
||||||
let profilePictureUrl;
|
|
||||||
if (selectedFile) profilePictureUrl = await fileToBase64(selectedFile);
|
|
||||||
|
|
||||||
const updates = { username };
|
|
||||||
if (profilePictureUrl !== undefined) updates.profilePictureUrl = profilePictureUrl;
|
|
||||||
|
|
||||||
const res = await fetch(`${API_BASE}/users/${currentUserId}`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(updates)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const error = await res.json();
|
|
||||||
throw new Error(error.error || 'Error updating user');
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
await loadUsers();
|
|
||||||
showUserToast('Profile updated successfully!', 'success');
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showUserToast(err.message || 'Error updating user', 'error');
|
|
||||||
} finally {
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
submitBtn.textContent = 'Save Changes';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.openPasswordModal = function(userId) {
|
|
||||||
currentUserId = userId;
|
|
||||||
modalUserActions.classList.remove('active');
|
|
||||||
const user = users.find(u => u.id === userId);
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
modalAniList.innerHTML = `
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>${user.has_password ? 'Change Password' : 'Add Password'}</h2>
|
|
||||||
<button class="modal-close" onclick="closeModal()">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="password-modal-content">
|
|
||||||
${user.has_password ? `
|
|
||||||
<div class="password-info">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<circle cx="12" cy="12" r="10"></circle>
|
|
||||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
|
||||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
|
||||||
</svg>
|
|
||||||
<span>This profile is currently password protected</span>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
|
|
||||||
<form id="passwordForm">
|
|
||||||
${user.has_password ? `
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="currentPassword">Current Password</label>
|
|
||||||
<div class="password-toggle-wrapper">
|
|
||||||
<input type="password" id="currentPassword" required placeholder="Enter current password">
|
|
||||||
<button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility('currentPassword', this)">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
` : ''}
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="newPassword">New Password ${user.has_password ? '' : '<span class="optional-label">(Optional)</span>'}</label>
|
|
||||||
<div class="password-toggle-wrapper">
|
|
||||||
<input type="password" id="newPassword" ${user.has_password ? '' : ''} placeholder="Enter new password">
|
|
||||||
<button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility('newPassword', this)">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button type="button" class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
||||||
${user.has_password ? `
|
|
||||||
<button type="button" class="btn-disconnect" onclick="handleRemovePassword()">
|
|
||||||
Remove Password
|
|
||||||
</button>
|
|
||||||
` : ''}
|
|
||||||
<button type="submit" class="btn-primary">
|
|
||||||
${user.has_password ? 'Update' : 'Set'} Password
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modalAniList.classList.add('active');
|
|
||||||
|
|
||||||
document.getElementById('passwordForm').addEventListener('submit', handlePasswordSubmit);
|
|
||||||
};
|
|
||||||
|
|
||||||
async function handlePasswordSubmit(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const user = users.find(u => u.id === currentUserId);
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
const currentPassword = user.has_password ? document.getElementById('currentPassword').value : null;
|
|
||||||
const newPassword = document.getElementById('newPassword').value;
|
|
||||||
|
|
||||||
if (!newPassword && !user.has_password) {
|
|
||||||
showUserToast('Please enter a password', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const submitBtn = e.target.querySelector('button[type="submit"]');
|
|
||||||
submitBtn.disabled = true;
|
|
||||||
submitBtn.textContent = 'Updating...';
|
|
||||||
|
|
||||||
try {
|
|
||||||
const body = { newPassword: newPassword || null };
|
|
||||||
if (currentPassword) body.currentPassword = currentPassword;
|
|
||||||
|
|
||||||
const res = await fetch(`${API_BASE}/users/${currentUserId}/password`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(body)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const error = await res.json();
|
|
||||||
throw new Error(error.error || 'Error updating password');
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
await loadUsers();
|
|
||||||
showUserToast('Password updated successfully!', 'success');
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showUserToast(err.message || 'Error updating password', 'error');
|
|
||||||
} finally {
|
|
||||||
submitBtn.disabled = false;
|
|
||||||
submitBtn.textContent = user.has_password ? 'Update Password' : 'Set Password';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.handleRemovePassword = async function() {
|
|
||||||
if (!confirm('Are you sure you want to remove the password protection from this profile?')) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const currentPassword = document.getElementById('currentPassword').value;
|
|
||||||
|
|
||||||
if (!currentPassword) {
|
|
||||||
showUserToast('Please enter your current password', 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const res = await fetch(`${API_BASE}/users/${currentUserId}/password`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ currentPassword, newPassword: null })
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const error = await res.json();
|
|
||||||
throw new Error(error.error || 'Error removing password');
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
await loadUsers();
|
|
||||||
showUserToast('Password removed successfully!', 'success');
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showUserToast(err.message || 'Error removing password', 'error');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.handleDeleteConfirmation = function(userId) {
|
|
||||||
const user = users.find(u => u.id === userId);
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
|
|
||||||
showConfirmationModal(
|
|
||||||
'Confirm Deletion',
|
|
||||||
`Are you absolutely sure you want to delete profile ${user.username}? This action cannot be undone.`,
|
|
||||||
`handleConfirmedDeleteUser(${userId})`
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
window.handleConfirmedDeleteUser = async function(userId) {
|
|
||||||
closeModal();
|
|
||||||
showUserToast('Deleting user...', 'info');
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/users/${userId}`, { method: 'DELETE' });
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const error = await res.json();
|
|
||||||
throw new Error(error.error || 'Error deleting user');
|
|
||||||
}
|
|
||||||
|
|
||||||
await loadUsers();
|
|
||||||
showUserToast('User deleted successfully!', 'success');
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showUserToast('Error deleting user', 'error');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function showConfirmationModal(title, message, confirmAction) {
|
|
||||||
closeModal();
|
|
||||||
|
|
||||||
modalAniList.innerHTML = `
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content" style="max-width: 400px;">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>${title}</h2>
|
|
||||||
<button class="modal-close" onclick="closeModal()">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: center; padding: 1rem;">
|
|
||||||
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" style="opacity: 0.8; margin: 0 auto 1rem; display: block;">
|
|
||||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
|
|
||||||
<line x1="12" y1="9" x2="12" y2="13"></line>
|
|
||||||
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
||||||
</svg>
|
|
||||||
<p style="color: var(--color-text-secondary); margin-bottom: 2rem; font-size: 1rem;">
|
|
||||||
${message}
|
|
||||||
</p>
|
|
||||||
<div style="display: flex; gap: 1rem;">
|
|
||||||
<button class="btn-secondary" style="flex: 1;" onclick="closeModal()">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button class="btn-disconnect" style="flex: 1; background: #ef4444; color: white;" onclick="window.${confirmAction}">
|
|
||||||
Confirm Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modalAniList.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
function openAniListModal(userId) {
|
|
||||||
currentUserId = userId;
|
|
||||||
|
|
||||||
modalUserActions.classList.remove('active');
|
|
||||||
modalEditUser.classList.remove('active');
|
|
||||||
|
|
||||||
aniListContent.innerHTML = `<div style="text-align: center; padding: 2rem;">Loading integration status...</div>`;
|
|
||||||
|
|
||||||
modalAniList.innerHTML = `
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>AniList Integration</h2>
|
|
||||||
<button class="modal-close" onclick="closeModal()">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="aniListContent">
|
|
||||||
<div style="text-align: center; padding: 2rem;">Loading integration status...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modalAniList.classList.add('active');
|
|
||||||
|
|
||||||
getIntegrationStatus(userId).then(integration => {
|
|
||||||
const content = document.getElementById('aniListContent');
|
|
||||||
|
|
||||||
content.innerHTML = `
|
|
||||||
<div class="anilist-status">
|
|
||||||
${integration.connected ? `
|
|
||||||
<div class="anilist-connected">
|
|
||||||
<div class="anilist-icon">
|
|
||||||
<img src="https://anilist.co/img/icons/icon.svg" alt="AniList" style="width:40px; height:40px;">
|
|
||||||
</div>
|
|
||||||
<div class="anilist-info">
|
|
||||||
<h3>Connected to AniList</h3>
|
|
||||||
<p>User ID: ${integration.anilistUserId}</p>
|
|
||||||
<p style="font-size: 0.75rem;">Expires: ${new Date(integration.expiresAt).toLocaleDateString()}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="btn-disconnect" onclick="handleDisconnectAniList()">
|
|
||||||
Disconnect AniList
|
|
||||||
</button>
|
|
||||||
` : `
|
|
||||||
<div style="text-align: center; padding: 1rem;">
|
|
||||||
<h3 style="margin-bottom: 0.5rem;">Connect with AniList</h3>
|
|
||||||
<p style="color: var(--color-text-secondary); margin-bottom: 1.5rem;">
|
|
||||||
Sync your anime list by logging in with AniList.
|
|
||||||
</p>
|
|
||||||
<div style="display:flex; justify-content:center;">
|
|
||||||
<button class="btn-connect" onclick="redirectToAniListLogin()">
|
|
||||||
Login with AniList
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p style="font-size:0.85rem; margin-top:1rem; color:var(--color-text-secondary)">
|
|
||||||
You will be redirected and then returned here.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}).catch(err => {
|
|
||||||
console.error(err);
|
|
||||||
const content = document.getElementById('aniListContent');
|
|
||||||
content.innerHTML = `<div style="text-align:center;padding:1rem;color:var(--color-text-secondary)">Error loading integration status.</div>`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function redirectToAniListLogin() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/login`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ userId: currentUserId })
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) throw new Error('Login failed before AniList redirect');
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
localStorage.setItem('token', data.token);
|
|
||||||
|
|
||||||
const clientId = 32898;
|
|
||||||
const redirectUri = encodeURIComponent(window.location.origin + '/api/anilist');
|
|
||||||
const state = encodeURIComponent(currentUserId);
|
|
||||||
|
|
||||||
window.location.href =
|
|
||||||
`https://anilist.co/api/v2/oauth/authorize` +
|
|
||||||
`?client_id=${clientId}` +
|
|
||||||
`&response_type=code` +
|
|
||||||
`&redirect_uri=${redirectUri}` +
|
|
||||||
`&state=${state}`;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showUserToast('Error starting AniList login', 'error');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getIntegrationStatus(userId) {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/users/${userId}/integration`);
|
|
||||||
if (!res.ok) {
|
|
||||||
return { connected: false };
|
|
||||||
}
|
|
||||||
return await res.json();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('getIntegrationStatus error', err);
|
|
||||||
return { connected: false };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.handleDisconnectAniList = async function() {
|
|
||||||
if (!confirm('Are you sure you want to disconnect AniList?')) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${API_BASE}/users/${currentUserId}/integration`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const error = await res.json();
|
|
||||||
throw new Error(error.error || 'Error disconnecting AniList');
|
|
||||||
}
|
|
||||||
|
|
||||||
showUserToast('AniList disconnected successfully', 'success');
|
|
||||||
openAniListModal(currentUserId);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showUserToast('Error disconnecting AniList', 'error');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function loginUser(userId, hasPassword) {
|
|
||||||
if (hasPassword) {
|
|
||||||
// Mostrar modal de contraseña
|
|
||||||
modalAniList.innerHTML = `
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content" style="max-width: 400px;">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>Enter Password</h2>
|
|
||||||
<button class="modal-close" onclick="closeModal()">
|
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form id="loginPasswordForm">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="loginPassword">Password</label>
|
|
||||||
<div class="password-toggle-wrapper">
|
|
||||||
<input type="password" id="loginPassword" required placeholder="Enter your password" autofocus>
|
|
||||||
<button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility('loginPassword', this)">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
||||||
<circle cx="12" cy="12" r="3"></circle>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button type="button" class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
||||||
<button type="submit" class="btn-primary">Login</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
modalAniList.classList.add('active');
|
|
||||||
|
|
||||||
document.getElementById('loginPasswordForm').addEventListener('submit', async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const password = document.getElementById('loginPassword').value;
|
|
||||||
await performLogin(userId, password);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
await performLogin(userId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function performLogin(userId, password = null) {
|
|
||||||
try {
|
|
||||||
const body = { userId };
|
|
||||||
if (password) body.password = password;
|
|
||||||
|
|
||||||
const res = await fetch(`${API_BASE}/login`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(body)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
const err = await res.json().catch(() => ({}));
|
|
||||||
throw new Error(err.error || 'Login failed');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
localStorage.setItem('token', data.token);
|
|
||||||
|
|
||||||
window.location.href = '/anime';
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Login error', err);
|
|
||||||
showUserToast(err.message || 'Login failed', 'error');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.openAniListModal = openAniListModal;
|
|
||||||
window.redirectToAniListLogin = redirectToAniListLogin;
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
const AuthUtils = {
|
|
||||||
getToken() {
|
|
||||||
return localStorage.getItem('token');
|
|
||||||
},
|
|
||||||
|
|
||||||
getAuthHeaders() {
|
|
||||||
const token = this.getToken();
|
|
||||||
return {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Authorization': `Bearer ${token}`
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
getSimpleAuthHeaders() {
|
|
||||||
const token = this.getToken();
|
|
||||||
return {
|
|
||||||
'Authorization': `Bearer ${token}`
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
isAuthenticated() {
|
|
||||||
return !!this.getToken();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.AuthUtils = AuthUtils;
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
const ContinueWatchingManager = {
|
|
||||||
API_BASE: '/api',
|
|
||||||
|
|
||||||
async load(containerId, status = 'watching', entryType = 'ANIME') {
|
|
||||||
if (!AuthUtils.isAuthenticated()) return;
|
|
||||||
|
|
||||||
const container = document.getElementById(containerId);
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${this.API_BASE}/list/filter?status=${status}&entry_type=${entryType}`, {
|
|
||||||
headers: AuthUtils.getAuthHeaders()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) return;
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
const list = data.results || [];
|
|
||||||
|
|
||||||
this.render(containerId, list, entryType);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`Continue ${entryType === 'ANIME' ? 'Watching' : 'Reading'} Error:`, err);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
render(containerId, list, entryType = 'ANIME') {
|
|
||||||
const container = document.getElementById(containerId);
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (list.length === 0) {
|
|
||||||
const label = entryType === 'ANIME' ? 'watching anime' : 'reading manga';
|
|
||||||
container.innerHTML = `<div style="padding:1rem; color:#888">No ${label}</div>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
list.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
|
|
||||||
|
|
||||||
list.forEach(item => {
|
|
||||||
const card = this.createCard(item, entryType);
|
|
||||||
container.appendChild(card);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
createCard(item, entryType) {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'card';
|
|
||||||
|
|
||||||
const nextProgress = (item.progress || 0) + 1;
|
|
||||||
let url;
|
|
||||||
|
|
||||||
if (entryType === 'ANIME') {
|
|
||||||
url = item.source === 'anilist'
|
|
||||||
? `/watch/${item.entry_id}/${nextProgress}`
|
|
||||||
: `/watch/${item.entry_id}/${nextProgress}?${item.source}`;
|
|
||||||
} else {
|
|
||||||
|
|
||||||
url = item.source === 'anilist'
|
|
||||||
? `/book/${item.entry_id}?chapter=${nextProgress}`
|
|
||||||
: `/read/${item.source}/${nextProgress}/${item.entry_id}?source=${item.source}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
el.onclick = () => window.location.href = url;
|
|
||||||
|
|
||||||
const progressText = item.total_episodes || item.total_chapters
|
|
||||||
? `${item.progress || 0}/${item.total_episodes || item.total_chapters}`
|
|
||||||
: `${item.progress || 0}`;
|
|
||||||
|
|
||||||
const unitLabel = entryType === 'ANIME' ? 'Ep' : 'Ch';
|
|
||||||
|
|
||||||
el.innerHTML = `
|
|
||||||
<div class="card-img-wrap">
|
|
||||||
<img src="${item.poster}" loading="lazy" alt="${item.title}">
|
|
||||||
</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<h3>${item.title}</h3>
|
|
||||||
<p>${unitLabel} ${progressText} - ${item.source}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.ContinueWatchingManager = ContinueWatchingManager;
|
|
||||||
@@ -1,226 +0,0 @@
|
|||||||
const ListModalManager = {
|
|
||||||
API_BASE: '/api',
|
|
||||||
currentData: null,
|
|
||||||
isInList: false,
|
|
||||||
currentEntry: null,
|
|
||||||
|
|
||||||
STATUS_MAP: {
|
|
||||||
CURRENT: 'CURRENT',
|
|
||||||
COMPLETED: 'COMPLETED',
|
|
||||||
PLANNING: 'PLANNING',
|
|
||||||
PAUSED: 'PAUSED',
|
|
||||||
DROPPED: 'DROPPED',
|
|
||||||
REPEATING: 'REPEATING'
|
|
||||||
},
|
|
||||||
|
|
||||||
getEntryType(data) {
|
|
||||||
if (!data) return 'ANIME';
|
|
||||||
if (data.entry_type) return data.entry_type.toUpperCase();
|
|
||||||
return 'ANIME';
|
|
||||||
},
|
|
||||||
|
|
||||||
async checkIfInList(entryId, source = 'anilist', entryType) {
|
|
||||||
if (!AuthUtils.isAuthenticated()) return false;
|
|
||||||
|
|
||||||
const url = `${this.API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
headers: AuthUtils.getSimpleAuthHeaders()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
this.isInList = data.found && !!data.entry;
|
|
||||||
this.currentEntry = data.entry || null;
|
|
||||||
} else {
|
|
||||||
this.isInList = false;
|
|
||||||
this.currentEntry = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.isInList;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error checking list entry:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateButton(buttonSelector = '.hero-buttons .btn-blur') {
|
|
||||||
const btn = document.querySelector(buttonSelector);
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
if (this.isInList) {
|
|
||||||
btn.innerHTML = `
|
|
||||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
|
||||||
</svg>
|
|
||||||
In Your ${this.currentData?.format ? 'Library' : 'List'}
|
|
||||||
`;
|
|
||||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
|
||||||
btn.style.color = '#22c55e';
|
|
||||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
|
||||||
} else {
|
|
||||||
btn.innerHTML = `+ Add to ${this.currentData?.format ? 'Library' : 'List'}`;
|
|
||||||
btn.style.background = null;
|
|
||||||
btn.style.color = null;
|
|
||||||
btn.style.borderColor = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
open(data, source = 'anilist') {
|
|
||||||
if (!AuthUtils.isAuthenticated()) {
|
|
||||||
NotificationUtils.error('Please log in to manage your list.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.currentData = data;
|
|
||||||
const entryType = this.getEntryType(data);
|
|
||||||
const totalUnits = data.episodes || data.chapters || data.volumes || 999;
|
|
||||||
|
|
||||||
const modalTitle = document.getElementById('modal-title');
|
|
||||||
const deleteBtn = document.getElementById('modal-delete-btn');
|
|
||||||
const progressLabel = document.querySelector('label[for="entry-progress"]') ||
|
|
||||||
document.getElementById('progress-label');
|
|
||||||
|
|
||||||
if (this.isInList && this.currentEntry) {
|
|
||||||
document.getElementById('entry-status').value = this.currentEntry.status || 'PLANNING';
|
|
||||||
document.getElementById('entry-progress').value = this.currentEntry.progress || 0;
|
|
||||||
document.getElementById('entry-score').value = this.currentEntry.score || '';
|
|
||||||
document.getElementById('entry-start-date').value = this.currentEntry.start_date?.split('T')[0] || '';
|
|
||||||
document.getElementById('entry-end-date').value = this.currentEntry.end_date?.split('T')[0] || '';
|
|
||||||
document.getElementById('entry-repeat-count').value = this.currentEntry.repeat_count || 0;
|
|
||||||
document.getElementById('entry-notes').value = this.currentEntry.notes || '';
|
|
||||||
document.getElementById('entry-is-private').checked = this.currentEntry.is_private === true || this.currentEntry.is_private === 1;
|
|
||||||
|
|
||||||
modalTitle.textContent = `Edit ${entryType === 'ANIME' ? 'List' : 'Library'} Entry`;
|
|
||||||
deleteBtn.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
document.getElementById('entry-status').value = 'PLANNING';
|
|
||||||
document.getElementById('entry-progress').value = 0;
|
|
||||||
document.getElementById('entry-score').value = '';
|
|
||||||
document.getElementById('entry-start-date').value = '';
|
|
||||||
document.getElementById('entry-end-date').value = '';
|
|
||||||
document.getElementById('entry-repeat-count').value = 0;
|
|
||||||
document.getElementById('entry-notes').value = '';
|
|
||||||
document.getElementById('entry-is-private').checked = false;
|
|
||||||
|
|
||||||
modalTitle.textContent = `Add to ${entryType === 'ANIME' ? 'List' : 'Library'}`;
|
|
||||||
deleteBtn.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
const statusSelect = document.getElementById('entry-status');
|
|
||||||
|
|
||||||
[...statusSelect.options].forEach(opt => {
|
|
||||||
if (opt.value === 'CURRENT') {
|
|
||||||
opt.textContent = entryType === 'ANIME' ? 'Watching' : 'Reading';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
if (progressLabel) {
|
|
||||||
if (entryType === 'ANIME') {
|
|
||||||
progressLabel.textContent = 'Episodes Watched';
|
|
||||||
} else if (entryType === 'MANGA') {
|
|
||||||
progressLabel.textContent = 'Chapters Read';
|
|
||||||
} else {
|
|
||||||
progressLabel.textContent = 'Volumes/Parts Read';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('entry-progress').max = totalUnits;
|
|
||||||
document.getElementById('add-list-modal').classList.add('active');
|
|
||||||
},
|
|
||||||
|
|
||||||
close() {
|
|
||||||
document.getElementById('add-list-modal').classList.remove('active');
|
|
||||||
},
|
|
||||||
|
|
||||||
async save(entryId, source = 'anilist') {
|
|
||||||
const uiStatus = document.getElementById('entry-status').value;
|
|
||||||
const status = this.STATUS_MAP[uiStatus] || uiStatus;
|
|
||||||
const progress = parseInt(document.getElementById('entry-progress').value) || 0;
|
|
||||||
const scoreValue = document.getElementById('entry-score').value;
|
|
||||||
const score = scoreValue ? parseFloat(scoreValue) : null;
|
|
||||||
const start_date = document.getElementById('entry-start-date').value || null;
|
|
||||||
const end_date = document.getElementById('entry-end-date').value || null;
|
|
||||||
const repeat_count = parseInt(document.getElementById('entry-repeat-count').value) || 0;
|
|
||||||
const notes = document.getElementById('entry-notes').value || null;
|
|
||||||
const is_private = document.getElementById('entry-is-private').checked;
|
|
||||||
|
|
||||||
const entryType = this.getEntryType(this.currentData);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${this.API_BASE}/list/entry`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: AuthUtils.getAuthHeaders(),
|
|
||||||
body: JSON.stringify({
|
|
||||||
entry_id: entryId,
|
|
||||||
source,
|
|
||||||
entry_type: entryType,
|
|
||||||
status,
|
|
||||||
progress,
|
|
||||||
score,
|
|
||||||
start_date,
|
|
||||||
end_date,
|
|
||||||
repeat_count,
|
|
||||||
notes,
|
|
||||||
is_private
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error('Failed to save entry');
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
this.isInList = true;
|
|
||||||
this.currentEntry = data.entry;
|
|
||||||
this.updateButton();
|
|
||||||
this.close();
|
|
||||||
NotificationUtils.success(this.isInList ? 'Updated successfully!' : 'Added to your list!');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error saving to list:', error);
|
|
||||||
NotificationUtils.error('Failed to save. Please try again.');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async delete(entryId, source = 'anilist') {
|
|
||||||
if (!confirm(`Remove this ${this.getEntryType(this.currentData).toLowerCase()} from your list?`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const entryType = this.getEntryType(this.currentData);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(
|
|
||||||
`${this.API_BASE}/list/entry/${entryId}?source=${source}&entry_type=${entryType}`,
|
|
||||||
{
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: AuthUtils.getSimpleAuthHeaders()
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!response.ok) throw new Error('Failed to delete entry');
|
|
||||||
|
|
||||||
this.isInList = false;
|
|
||||||
this.currentEntry = null;
|
|
||||||
this.updateButton();
|
|
||||||
this.close();
|
|
||||||
NotificationUtils.success('Removed from your list');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error deleting from list:', error);
|
|
||||||
NotificationUtils.error('Failed to remove. Please try again.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const modal = document.getElementById('add-list-modal');
|
|
||||||
if (modal) {
|
|
||||||
modal.addEventListener('click', (e) => {
|
|
||||||
if (e.target.id === 'add-list-modal') {
|
|
||||||
ListModalManager.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.ListModalManager = ListModalManager;
|
|
||||||
@@ -1,192 +0,0 @@
|
|||||||
const MediaMetadataUtils = {
|
|
||||||
|
|
||||||
getTitle(data) {
|
|
||||||
if (!data) return "Unknown Title";
|
|
||||||
|
|
||||||
if (data.title) {
|
|
||||||
if (typeof data.title === 'string') return data.title;
|
|
||||||
return data.title.english || data.title.romaji || data.title.native || "Unknown Title";
|
|
||||||
}
|
|
||||||
|
|
||||||
return data.name || "Unknown Title";
|
|
||||||
},
|
|
||||||
|
|
||||||
getDescription(data) {
|
|
||||||
const rawDesc = data.description || data.summary || "No description available.";
|
|
||||||
|
|
||||||
const tmp = document.createElement("DIV");
|
|
||||||
tmp.innerHTML = rawDesc;
|
|
||||||
return tmp.textContent || tmp.innerText || rawDesc;
|
|
||||||
},
|
|
||||||
|
|
||||||
getPosterUrl(data, isExtension = false) {
|
|
||||||
if (isExtension) {
|
|
||||||
return data.image || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.coverImage) {
|
|
||||||
return data.coverImage.extraLarge || data.coverImage.large || data.coverImage.medium || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
return data.image || '';
|
|
||||||
},
|
|
||||||
|
|
||||||
getBannerUrl(data, isExtension = false) {
|
|
||||||
if (isExtension) {
|
|
||||||
return data.image || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
return data.bannerImage || this.getPosterUrl(data, isExtension);
|
|
||||||
},
|
|
||||||
|
|
||||||
getScore(data, isExtension = false) {
|
|
||||||
if (isExtension) {
|
|
||||||
return data.score ? Math.round(data.score * 10) : '?';
|
|
||||||
}
|
|
||||||
|
|
||||||
return data.averageScore || '?';
|
|
||||||
},
|
|
||||||
|
|
||||||
getYear(data, isExtension = false) {
|
|
||||||
if (isExtension) {
|
|
||||||
return data.year || data.published || '????';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.seasonYear) return data.seasonYear;
|
|
||||||
if (data.startDate?.year) return data.startDate.year;
|
|
||||||
|
|
||||||
return '????';
|
|
||||||
},
|
|
||||||
|
|
||||||
getGenres(data, maxGenres = 3) {
|
|
||||||
if (!data.genres || !Array.isArray(data.genres)) return '';
|
|
||||||
return data.genres.slice(0, maxGenres).join(' • ');
|
|
||||||
},
|
|
||||||
|
|
||||||
getSeason(data, isExtension = false) {
|
|
||||||
if (isExtension) {
|
|
||||||
return data.season || 'Unknown';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.season && data.seasonYear) {
|
|
||||||
return `${data.season} ${data.seasonYear}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.startDate?.year && data.startDate?.month) {
|
|
||||||
const months = ['', 'Winter', 'Winter', 'Spring', 'Spring', 'Spring',
|
|
||||||
'Summer', 'Summer', 'Summer', 'Fall', 'Fall', 'Fall', 'Winter'];
|
|
||||||
const season = months[data.startDate.month] || '';
|
|
||||||
return season ? `${season} ${data.startDate.year}` : `${data.startDate.year}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'Unknown';
|
|
||||||
},
|
|
||||||
|
|
||||||
getStudio(data, isExtension = false) {
|
|
||||||
if (isExtension) {
|
|
||||||
return data.studio || "Unknown";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.studios?.nodes?.[0]?.name) {
|
|
||||||
return data.studios.nodes[0].name;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.studios?.edges?.[0]?.node?.name) {
|
|
||||||
return data.studios.edges[0].node.name;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'Unknown Studio';
|
|
||||||
},
|
|
||||||
|
|
||||||
getCharacters(data, isExtension = false, maxChars = 5) {
|
|
||||||
let characters = [];
|
|
||||||
|
|
||||||
if (isExtension) {
|
|
||||||
characters = data.characters || [];
|
|
||||||
} else {
|
|
||||||
if (data.characters?.nodes?.length > 0) {
|
|
||||||
characters = data.characters.nodes;
|
|
||||||
} else if (data.characters?.edges?.length > 0) {
|
|
||||||
characters = data.characters.edges
|
|
||||||
.filter(edge => edge?.node?.name?.full)
|
|
||||||
.map(edge => edge.node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return characters.slice(0, maxChars).map(char => ({
|
|
||||||
name: char?.name?.full || char?.name || "Unknown",
|
|
||||||
image: char?.image?.large || char?.image?.medium || null
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
|
|
||||||
getTotalEpisodes(data, isExtension = false) {
|
|
||||||
if (isExtension) {
|
|
||||||
return data.episodes || 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.nextAiringEpisode?.episode) {
|
|
||||||
return data.nextAiringEpisode.episode - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return data.episodes || 12;
|
|
||||||
},
|
|
||||||
|
|
||||||
truncateDescription(text, maxSentences = 4) {
|
|
||||||
const tmp = document.createElement("DIV");
|
|
||||||
tmp.innerHTML = text;
|
|
||||||
const cleanText = tmp.textContent || tmp.innerText || "";
|
|
||||||
|
|
||||||
const sentences = cleanText.match(/[^\.!\?]+[\.!\?]+/g) || [cleanText];
|
|
||||||
|
|
||||||
if (sentences.length > maxSentences) {
|
|
||||||
return {
|
|
||||||
short: sentences.slice(0, maxSentences).join(' ') + '...',
|
|
||||||
full: text,
|
|
||||||
isTruncated: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
short: text,
|
|
||||||
full: text,
|
|
||||||
isTruncated: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
formatBookData(data, isExtension = false) {
|
|
||||||
return {
|
|
||||||
title: this.getTitle(data),
|
|
||||||
description: this.getDescription(data),
|
|
||||||
score: this.getScore(data, isExtension),
|
|
||||||
year: this.getYear(data, isExtension),
|
|
||||||
status: data.status || 'Unknown',
|
|
||||||
format: data.format || (isExtension ? 'LN' : 'MANGA'),
|
|
||||||
chapters: data.chapters || '?',
|
|
||||||
volumes: data.volumes || '?',
|
|
||||||
poster: this.getPosterUrl(data, isExtension),
|
|
||||||
banner: this.getBannerUrl(data, isExtension),
|
|
||||||
genres: this.getGenres(data)
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
formatAnimeData(data, isExtension = false) {
|
|
||||||
return {
|
|
||||||
title: this.getTitle(data),
|
|
||||||
description: this.getDescription(data),
|
|
||||||
score: this.getScore(data, isExtension),
|
|
||||||
year: this.getYear(data, isExtension),
|
|
||||||
season: this.getSeason(data, isExtension),
|
|
||||||
status: data.status || 'Unknown',
|
|
||||||
format: data.format || 'TV',
|
|
||||||
episodes: this.getTotalEpisodes(data, isExtension),
|
|
||||||
poster: this.getPosterUrl(data, isExtension),
|
|
||||||
banner: this.getBannerUrl(data, isExtension),
|
|
||||||
genres: this.getGenres(data),
|
|
||||||
studio: this.getStudio(data, isExtension),
|
|
||||||
characters: this.getCharacters(data, isExtension),
|
|
||||||
trailer: data.trailer || null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.MediaMetadataUtils = MediaMetadataUtils;
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
const NotificationUtils = {
|
|
||||||
show(message, type = 'info') {
|
|
||||||
const notification = document.createElement('div');
|
|
||||||
notification.style.cssText = `
|
|
||||||
position: fixed;
|
|
||||||
top: 100px;
|
|
||||||
right: 20px;
|
|
||||||
background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
|
|
||||||
color: white;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
||||||
z-index: 9999;
|
|
||||||
font-weight: 600;
|
|
||||||
animation: slideInRight 0.3s ease;
|
|
||||||
`;
|
|
||||||
notification.textContent = message;
|
|
||||||
document.body.appendChild(notification);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
notification.style.animation = 'slideOutRight 0.3s ease';
|
|
||||||
setTimeout(() => notification.remove(), 300);
|
|
||||||
}, 3000);
|
|
||||||
},
|
|
||||||
|
|
||||||
success(message) {
|
|
||||||
this.show(message, 'success');
|
|
||||||
},
|
|
||||||
|
|
||||||
error(message) {
|
|
||||||
this.show(message, 'error');
|
|
||||||
},
|
|
||||||
|
|
||||||
info(message) {
|
|
||||||
this.show(message, 'info');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = `
|
|
||||||
@keyframes slideInRight {
|
|
||||||
from { transform: translateX(400px); opacity: 0; }
|
|
||||||
to { transform: translateX(0); opacity: 1; }
|
|
||||||
}
|
|
||||||
@keyframes slideOutRight {
|
|
||||||
from { transform: translateX(0); opacity: 1; }
|
|
||||||
to { transform: translateX(400px); opacity: 0; }
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
|
|
||||||
window.NotificationUtils = NotificationUtils;
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
const PaginationManager = {
|
|
||||||
currentPage: 1,
|
|
||||||
itemsPerPage: 12,
|
|
||||||
totalItems: 0,
|
|
||||||
onPageChange: null,
|
|
||||||
|
|
||||||
init(itemsPerPage = 12, onPageChange = null) {
|
|
||||||
this.itemsPerPage = itemsPerPage;
|
|
||||||
this.onPageChange = onPageChange;
|
|
||||||
this.currentPage = 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
setTotalItems(total) {
|
|
||||||
this.totalItems = total;
|
|
||||||
},
|
|
||||||
|
|
||||||
getTotalPages() {
|
|
||||||
return Math.ceil(this.totalItems / this.itemsPerPage);
|
|
||||||
},
|
|
||||||
|
|
||||||
getCurrentPageItems(items) {
|
|
||||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
|
||||||
const end = start + this.itemsPerPage;
|
|
||||||
return items.slice(start, end);
|
|
||||||
},
|
|
||||||
|
|
||||||
getPageRange() {
|
|
||||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
|
||||||
const end = Math.min(start + this.itemsPerPage, this.totalItems);
|
|
||||||
return { start, end };
|
|
||||||
},
|
|
||||||
|
|
||||||
nextPage() {
|
|
||||||
if (this.currentPage < this.getTotalPages()) {
|
|
||||||
this.currentPage++;
|
|
||||||
if (this.onPageChange) this.onPageChange();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
prevPage() {
|
|
||||||
if (this.currentPage > 1) {
|
|
||||||
this.currentPage--;
|
|
||||||
if (this.onPageChange) this.onPageChange();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
goToPage(page) {
|
|
||||||
const totalPages = this.getTotalPages();
|
|
||||||
if (page >= 1 && page <= totalPages) {
|
|
||||||
this.currentPage = page;
|
|
||||||
if (this.onPageChange) this.onPageChange();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
reset() {
|
|
||||||
this.currentPage = 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
renderControls(containerId, pageInfoId, prevBtnId, nextBtnId) {
|
|
||||||
const container = document.getElementById(containerId);
|
|
||||||
const pageInfo = document.getElementById(pageInfoId);
|
|
||||||
const prevBtn = document.getElementById(prevBtnId);
|
|
||||||
const nextBtn = document.getElementById(nextBtnId);
|
|
||||||
|
|
||||||
if (!container || !pageInfo || !prevBtn || !nextBtn) return;
|
|
||||||
|
|
||||||
const totalPages = this.getTotalPages();
|
|
||||||
|
|
||||||
if (totalPages <= 1) {
|
|
||||||
container.style.display = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
container.style.display = 'flex';
|
|
||||||
pageInfo.innerText = `Page ${this.currentPage} of ${totalPages}`;
|
|
||||||
|
|
||||||
prevBtn.disabled = this.currentPage === 1;
|
|
||||||
nextBtn.disabled = this.currentPage >= totalPages;
|
|
||||||
|
|
||||||
prevBtn.onclick = () => this.prevPage();
|
|
||||||
nextBtn.onclick = () => this.nextPage();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.PaginationManager = PaginationManager;
|
|
||||||
@@ -1,176 +0,0 @@
|
|||||||
const SearchManager = {
|
|
||||||
availableExtensions: [],
|
|
||||||
searchTimeout: null,
|
|
||||||
|
|
||||||
init(inputSelector, resultsSelector, type = 'anime') {
|
|
||||||
const searchInput = document.querySelector(inputSelector);
|
|
||||||
const searchResults = document.querySelector(resultsSelector);
|
|
||||||
|
|
||||||
if (!searchInput || !searchResults) {
|
|
||||||
console.error('Search elements not found');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadExtensions(type);
|
|
||||||
|
|
||||||
searchInput.addEventListener('input', (e) => {
|
|
||||||
const query = e.target.value;
|
|
||||||
clearTimeout(this.searchTimeout);
|
|
||||||
|
|
||||||
if (query.length < 2) {
|
|
||||||
searchResults.classList.remove('active');
|
|
||||||
searchResults.innerHTML = '';
|
|
||||||
searchInput.style.borderRadius = '99px';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.searchTimeout = setTimeout(() => {
|
|
||||||
this.search(query, type, searchResults);
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (!e.target.closest('.search-wrapper')) {
|
|
||||||
searchResults.classList.remove('active');
|
|
||||||
searchInput.style.borderRadius = '99px';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async loadExtensions(type) {
|
|
||||||
try {
|
|
||||||
const endpoint = type === 'book' ? '/api/extensions/book' : '/api/extensions/anime';
|
|
||||||
const res = await fetch(endpoint);
|
|
||||||
const data = await res.json();
|
|
||||||
this.availableExtensions = data.extensions || [];
|
|
||||||
console.log(`${type} extensions loaded:`, this.availableExtensions);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error loading extensions:', err);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async search(query, type, resultsContainer) {
|
|
||||||
try {
|
|
||||||
let apiUrl, extensionName = null, finalQuery = query;
|
|
||||||
|
|
||||||
const parts = query.split(':');
|
|
||||||
if (parts.length >= 2) {
|
|
||||||
const potentialExtension = parts[0].trim().toLowerCase();
|
|
||||||
const foundExtension = this.availableExtensions.find(
|
|
||||||
ext => ext.toLowerCase() === potentialExtension
|
|
||||||
);
|
|
||||||
|
|
||||||
if (foundExtension) {
|
|
||||||
extensionName = foundExtension;
|
|
||||||
finalQuery = parts.slice(1).join(':').trim();
|
|
||||||
|
|
||||||
if (finalQuery.length === 0) {
|
|
||||||
this.renderResults([], resultsContainer, type);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (extensionName) {
|
|
||||||
const endpoint = type === 'book' ? 'books' : '';
|
|
||||||
apiUrl = `/api/search/${endpoint ? endpoint + '/' : ''}${extensionName}?q=${encodeURIComponent(finalQuery)}`;
|
|
||||||
} else {
|
|
||||||
const endpoint = type === 'book' ? '/api/search/books' : '/api/search';
|
|
||||||
apiUrl = `${endpoint}?q=${encodeURIComponent(query)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const res = await fetch(apiUrl);
|
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
const results = (data.results || []).map(item => ({
|
|
||||||
...item,
|
|
||||||
isExtensionResult: !!extensionName,
|
|
||||||
extensionName
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.renderResults(results, resultsContainer, type);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Search Error:", err);
|
|
||||||
this.renderResults([], resultsContainer, type);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderResults(results, container, type) {
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (!results || results.length === 0) {
|
|
||||||
container.innerHTML = '<div style="padding:1rem; color:#888; text-align:center">No results found</div>';
|
|
||||||
} else {
|
|
||||||
results.forEach(item => {
|
|
||||||
const resultElement = this.createResultElement(item, type);
|
|
||||||
container.appendChild(resultElement);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
container.classList.add('active');
|
|
||||||
const searchInput = container.previousElementSibling || document.querySelector('.search-input');
|
|
||||||
if (searchInput) {
|
|
||||||
searchInput.style.borderRadius = '12px 12px 0 0';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
createResultElement(item, type) {
|
|
||||||
const element = document.createElement('a');
|
|
||||||
element.className = 'search-item';
|
|
||||||
|
|
||||||
if (type === 'book') {
|
|
||||||
const title = item.title?.english || item.title?.romaji || "Unknown";
|
|
||||||
const img = item.coverImage?.medium || item.coverImage?.large || '';
|
|
||||||
const rating = Number.isInteger(item.averageScore) ? `${item.averageScore}%` : item.averageScore || 'N/A';
|
|
||||||
const year = item.seasonYear || item.startDate?.year || '????';
|
|
||||||
const format = item.format || 'MANGA';
|
|
||||||
|
|
||||||
element.href = item.isExtensionResult
|
|
||||||
? `/book/${item.extensionName}/${item.id}`
|
|
||||||
: `/book/${item.id}`;
|
|
||||||
|
|
||||||
element.innerHTML = `
|
|
||||||
<img src="${img}" class="search-poster" alt="${title}">
|
|
||||||
<div class="search-info">
|
|
||||||
<div class="search-title">${title}</div>
|
|
||||||
<div class="search-meta">
|
|
||||||
<span class="rating-pill">${rating}</span>
|
|
||||||
<span>• ${year}</span>
|
|
||||||
<span>• ${format}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
} else {
|
|
||||||
|
|
||||||
const title = item.title?.english || item.title?.romaji || "Unknown Title";
|
|
||||||
const img = item.coverImage?.medium || item.coverImage?.large || '';
|
|
||||||
const rating = item.averageScore ? `${item.averageScore}%` : 'N/A';
|
|
||||||
const year = item.seasonYear || '';
|
|
||||||
const format = item.format || 'TV';
|
|
||||||
|
|
||||||
element.href = item.isExtensionResult
|
|
||||||
? `/anime/${item.extensionName}/${item.id}`
|
|
||||||
: `/anime/${item.id}`;
|
|
||||||
|
|
||||||
element.innerHTML = `
|
|
||||||
<img src="${img}" class="search-poster" alt="${title}">
|
|
||||||
<div class="search-info">
|
|
||||||
<div class="search-title">${title}</div>
|
|
||||||
<div class="search-meta">
|
|
||||||
<span class="rating-pill">${rating}</span>
|
|
||||||
<span>• ${year}</span>
|
|
||||||
<span>• ${format}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return element;
|
|
||||||
},
|
|
||||||
|
|
||||||
getTitle(item) {
|
|
||||||
return item.title?.english || item.title?.romaji || "Unknown Title";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.SearchManager = SearchManager;
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
const URLUtils = {
|
|
||||||
|
|
||||||
parseEntityPath(basePath = 'anime') {
|
|
||||||
const path = window.location.pathname;
|
|
||||||
const parts = path.split("/").filter(Boolean);
|
|
||||||
|
|
||||||
if (parts[0] !== basePath) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parts.length === 3) {
|
|
||||||
|
|
||||||
return {
|
|
||||||
extensionName: parts[1],
|
|
||||||
entityId: parts[2],
|
|
||||||
slug: parts[2]
|
|
||||||
};
|
|
||||||
} else if (parts.length === 2) {
|
|
||||||
|
|
||||||
return {
|
|
||||||
extensionName: null,
|
|
||||||
entityId: parts[1],
|
|
||||||
slug: null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
|
|
||||||
buildWatchUrl(animeId, episode, extensionName = null) {
|
|
||||||
const base = `/watch/${animeId}/${episode}`;
|
|
||||||
return extensionName ? `${base}?${extensionName}` : base;
|
|
||||||
},
|
|
||||||
|
|
||||||
buildReadUrl(bookId, chapterId, provider, extensionName = null) {
|
|
||||||
const c = encodeURIComponent(chapterId);
|
|
||||||
const p = encodeURIComponent(provider);
|
|
||||||
const extension = extensionName ? `?source=${extensionName}` : "?source=anilist";
|
|
||||||
return `/read/${p}/${c}/${bookId}${extension}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
getQueryParams() {
|
|
||||||
return new URLSearchParams(window.location.search);
|
|
||||||
},
|
|
||||||
|
|
||||||
getQueryParam(key) {
|
|
||||||
return this.getQueryParams().get(key);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.URLUtils = URLUtils;
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
const YouTubePlayerUtils = {
|
|
||||||
player: null,
|
|
||||||
isAPIReady: false,
|
|
||||||
pendingVideoId: null,
|
|
||||||
|
|
||||||
init(containerId = 'player') {
|
|
||||||
if (this.isAPIReady) return;
|
|
||||||
|
|
||||||
const tag = document.createElement('script');
|
|
||||||
tag.src = "https://www.youtube.com/iframe_api";
|
|
||||||
const firstScriptTag = document.getElementsByTagName('script')[0];
|
|
||||||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
||||||
|
|
||||||
window.onYouTubeIframeAPIReady = () => {
|
|
||||||
this.isAPIReady = true;
|
|
||||||
this.createPlayer(containerId);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
createPlayer(containerId, videoId = null) {
|
|
||||||
if (!this.isAPIReady) {
|
|
||||||
this.pendingVideoId = videoId;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
height: '100%',
|
|
||||||
width: '100%',
|
|
||||||
playerVars: {
|
|
||||||
autoplay: 1,
|
|
||||||
controls: 0,
|
|
||||||
mute: 1,
|
|
||||||
loop: 1,
|
|
||||||
showinfo: 0,
|
|
||||||
modestbranding: 1,
|
|
||||||
disablekb: 1
|
|
||||||
},
|
|
||||||
events: {
|
|
||||||
onReady: (event) => {
|
|
||||||
event.target.mute();
|
|
||||||
if (this.pendingVideoId) {
|
|
||||||
this.loadVideo(this.pendingVideoId);
|
|
||||||
this.pendingVideoId = null;
|
|
||||||
} else {
|
|
||||||
event.target.playVideo();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (videoId) {
|
|
||||||
config.videoId = videoId;
|
|
||||||
config.playerVars.playlist = videoId;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.player = new YT.Player(containerId, config);
|
|
||||||
},
|
|
||||||
|
|
||||||
loadVideo(videoId) {
|
|
||||||
if (!this.player || !this.player.loadVideoById) {
|
|
||||||
this.pendingVideoId = videoId;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.player.loadVideoById(videoId);
|
|
||||||
this.player.mute();
|
|
||||||
},
|
|
||||||
|
|
||||||
playTrailer(trailerData, containerId = 'player', fallbackImage = null) {
|
|
||||||
if (!trailerData || trailerData.site !== 'youtube' || !trailerData.id) {
|
|
||||||
|
|
||||||
if (fallbackImage) {
|
|
||||||
this.showFallbackImage(containerId, fallbackImage);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.isAPIReady) {
|
|
||||||
this.init(containerId);
|
|
||||||
this.pendingVideoId = trailerData.id;
|
|
||||||
} else if (this.player) {
|
|
||||||
this.loadVideo(trailerData.id);
|
|
||||||
} else {
|
|
||||||
this.createPlayer(containerId, trailerData.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
|
|
||||||
showFallbackImage(containerId, imageUrl) {
|
|
||||||
const container = document.querySelector(`#${containerId}`)?.parentElement;
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
container.innerHTML = `<img src="${imageUrl}" style="width:100%; height:100%; object-fit:cover;">`;
|
|
||||||
},
|
|
||||||
|
|
||||||
stop() {
|
|
||||||
if (this.player && this.player.stopVideo) {
|
|
||||||
this.player.stopVideo();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
if (this.player && this.player.destroy) {
|
|
||||||
this.player.destroy();
|
|
||||||
this.player = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.YouTubePlayerUtils = YouTubePlayerUtils;
|
|
||||||
@@ -1,125 +0,0 @@
|
|||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
const os = require("os");
|
|
||||||
const path = require("path");
|
|
||||||
const fs = require("fs");
|
|
||||||
const {ensureUserDataDB, ensureAnilistSchema, ensureExtensionsTable, ensureCacheTable, ensureFavoritesDB} = require('./schemas');
|
|
||||||
|
|
||||||
const databases = new Map();
|
|
||||||
|
|
||||||
const DEFAULT_PATHS = {
|
|
||||||
anilist: path.join(os.homedir(), "WaifuBoards", 'anilist_anime.db'),
|
|
||||||
favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db"),
|
|
||||||
cache: path.join(os.homedir(), "WaifuBoards", "cache.db"),
|
|
||||||
userdata: path.join(os.homedir(), "WaifuBoards", "user_data.db")
|
|
||||||
};
|
|
||||||
|
|
||||||
function initDatabase(name = 'anilist', dbPath = null, readOnly = false) {
|
|
||||||
if (databases.has(name)) {
|
|
||||||
return databases.get(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
const finalPath = dbPath || DEFAULT_PATHS[name] || DEFAULT_PATHS.anilist;
|
|
||||||
|
|
||||||
if (name === "favorites") {
|
|
||||||
ensureFavoritesDB(finalPath)
|
|
||||||
.catch(err => console.error("Error creando favorites:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === "cache") {
|
|
||||||
const dir = path.dirname(finalPath);
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === "userdata") {
|
|
||||||
ensureUserDataDB(finalPath)
|
|
||||||
.catch(err => console.error("Error creando userdata:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
const mode = readOnly ? sqlite3.OPEN_READONLY : (sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE);
|
|
||||||
|
|
||||||
const db = new sqlite3.Database(finalPath, mode, (err) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(`Database Error (${name}):`, err.message);
|
|
||||||
} else {
|
|
||||||
console.log(`Connected to ${name} database at ${finalPath}`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
databases.set(name, db);
|
|
||||||
|
|
||||||
if (name === "anilist") {
|
|
||||||
ensureAnilistSchema(db)
|
|
||||||
.then(() => ensureExtensionsTable(db))
|
|
||||||
.catch(err => console.error("Error creating anilist schema:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name === "cache") {
|
|
||||||
ensureCacheTable(db)
|
|
||||||
.catch(err => console.error("Error creating cache table:", err));
|
|
||||||
}
|
|
||||||
|
|
||||||
return db;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDatabase(name = 'anilist') {
|
|
||||||
if (!databases.has(name)) {
|
|
||||||
const readOnly = (name === 'anilist');
|
|
||||||
return initDatabase(name, null, readOnly);
|
|
||||||
}
|
|
||||||
return databases.get(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
function queryOne(sql, params = [], dbName = 'anilist') {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getDatabase(dbName).get(sql, params, (err, row) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(row);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function queryAll(sql, params = [], dbName = 'anilist') {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getDatabase(dbName).all(sql, params, (err, rows) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(rows || []);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function run(sql, params = [], dbName = 'anilist') {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
getDatabase(dbName).run(sql, params, function(err) {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve({ changes: this.changes, lastID: this.lastID });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDatabase(name = null) {
|
|
||||||
if (name) {
|
|
||||||
const db = databases.get(name);
|
|
||||||
if (db) {
|
|
||||||
db.close();
|
|
||||||
databases.delete(name);
|
|
||||||
console.log(`Closed ${name} database`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (const [dbName, db] of databases) {
|
|
||||||
db.close();
|
|
||||||
console.log(`Closed ${dbName} database`);
|
|
||||||
}
|
|
||||||
databases.clear();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
initDatabase,
|
|
||||||
getDatabase,
|
|
||||||
queryOne,
|
|
||||||
queryAll,
|
|
||||||
run,
|
|
||||||
closeDatabase
|
|
||||||
};
|
|
||||||
@@ -1,209 +0,0 @@
|
|||||||
const fs = require('fs');
|
|
||||||
const path = require('path');
|
|
||||||
const os = require('os');
|
|
||||||
const cheerio = require("cheerio");
|
|
||||||
const { queryAll, run } = require('./database');
|
|
||||||
const { scrape } = require("./headless");
|
|
||||||
|
|
||||||
const extensions = new Map();
|
|
||||||
|
|
||||||
async function loadExtensions() {
|
|
||||||
const homeDir = os.homedir();
|
|
||||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
|
||||||
|
|
||||||
if (!fs.existsSync(extensionsDir)) {
|
|
||||||
console.log("📁 Extensions directory not found, creating...");
|
|
||||||
fs.mkdirSync(extensionsDir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const files = await fs.promises.readdir(extensionsDir);
|
|
||||||
|
|
||||||
for (const file of files) {
|
|
||||||
if (file.endsWith('.js')) {
|
|
||||||
await loadExtension(file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`✅ Loaded ${extensions.size} extensions`);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const loaded = Array.from(extensions.keys());
|
|
||||||
const rows = await queryAll("SELECT DISTINCT ext_name FROM extension");
|
|
||||||
|
|
||||||
for (const row of rows) {
|
|
||||||
if (!loaded.includes(row.ext_name)) {
|
|
||||||
console.log(`🧹 Cleaning cached metadata for removed extension: ${row.ext_name}`);
|
|
||||||
await run("DELETE FROM extension WHERE ext_name = ?", [row.ext_name]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error("❌ Error cleaning extension cache:", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("❌ Extension Scan Error:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
async function loadExtension(fileName) {
|
|
||||||
const homeDir = os.homedir();
|
|
||||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
|
||||||
const filePath = path.join(extensionsDir, fileName);
|
|
||||||
|
|
||||||
if (!fs.existsSync(filePath)) {
|
|
||||||
console.warn(`⚠️ Extension not found: ${fileName}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
delete require.cache[require.resolve(filePath)];
|
|
||||||
|
|
||||||
const ExtensionClass = require(filePath);
|
|
||||||
|
|
||||||
const instance = typeof ExtensionClass === 'function'
|
|
||||||
? new ExtensionClass()
|
|
||||||
: (ExtensionClass.default ? new ExtensionClass.default() : null);
|
|
||||||
|
|
||||||
if (!instance) {
|
|
||||||
console.warn(`⚠️ Invalid extension: ${fileName}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!["anime-board", "book-board", "image-board"].includes(instance.type)) {
|
|
||||||
console.warn(`⚠️ Invalid extension (${instance.type}): ${fileName}`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const name = instance.constructor.name;
|
|
||||||
instance.scrape = scrape;
|
|
||||||
instance.cheerio = cheerio;
|
|
||||||
extensions.set(name, instance);
|
|
||||||
|
|
||||||
console.log(`📦 Installed & loaded: ${name}`);
|
|
||||||
return name;
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.warn(`⚠️ Error loading ${fileName}: ${err.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const https = require('https');
|
|
||||||
|
|
||||||
async function saveExtensionFile(fileName, downloadUrl) {
|
|
||||||
const homeDir = os.homedir();
|
|
||||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
|
||||||
const filePath = path.join(extensionsDir, fileName);
|
|
||||||
const fullUrl = downloadUrl;
|
|
||||||
|
|
||||||
if (!fs.existsSync(extensionsDir)) {
|
|
||||||
fs.mkdirSync(extensionsDir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const file = fs.createWriteStream(filePath);
|
|
||||||
|
|
||||||
https.get(fullUrl, async (response) => {
|
|
||||||
if (response.statusCode !== 200) {
|
|
||||||
return reject(new Error(`Download failed: ${response.statusCode}`));
|
|
||||||
}
|
|
||||||
|
|
||||||
response.pipe(file);
|
|
||||||
|
|
||||||
file.on('finish', async () => {
|
|
||||||
file.close(async () => {
|
|
||||||
try {
|
|
||||||
await loadExtension(fileName);
|
|
||||||
resolve();
|
|
||||||
} catch (err) {
|
|
||||||
if (fs.existsSync(filePath)) {
|
|
||||||
await fs.promises.unlink(filePath);
|
|
||||||
}
|
|
||||||
reject(new Error(`Load failed, file rolled back: ${err.message}`));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}).on('error', async (err) => {
|
|
||||||
if (fs.existsSync(filePath)) {
|
|
||||||
await fs.promises.unlink(filePath);
|
|
||||||
}
|
|
||||||
reject(err);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteExtensionFile(fileName) {
|
|
||||||
const homeDir = os.homedir();
|
|
||||||
const extensionsDir = path.join(homeDir, 'WaifuBoards', 'extensions');
|
|
||||||
const filePath = path.join(extensionsDir, fileName);
|
|
||||||
|
|
||||||
const extName = fileName.replace(".js", "");
|
|
||||||
|
|
||||||
for (const key of extensions.keys()) {
|
|
||||||
if (key.toLowerCase() === extName) {
|
|
||||||
extensions.delete(key);
|
|
||||||
console.log(`🗑️ Removed from memory: ${key}`);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fs.existsSync(filePath)) {
|
|
||||||
await fs.promises.unlink(filePath);
|
|
||||||
console.log(`🗑️ Deleted file: ${fileName}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getExtension(name) {
|
|
||||||
return extensions.get(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAllExtensions() {
|
|
||||||
return extensions;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getExtensionsList() {
|
|
||||||
return Array.from(extensions.keys());
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAnimeExtensionsMap() {
|
|
||||||
const animeExts = new Map();
|
|
||||||
for (const [name, ext] of extensions) {
|
|
||||||
if (ext.type === 'anime-board') {
|
|
||||||
animeExts.set(name, ext);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return animeExts;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBookExtensionsMap() {
|
|
||||||
const bookExts = new Map();
|
|
||||||
for (const [name, ext] of extensions) {
|
|
||||||
if (ext.type === 'book-board' || ext.type === 'manga-board') {
|
|
||||||
bookExts.set(name, ext);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return bookExts;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getGalleryExtensionsMap() {
|
|
||||||
const galleryExts = new Map();
|
|
||||||
for (const [name, ext] of extensions) {
|
|
||||||
if (ext.type === 'image-board') {
|
|
||||||
galleryExts.set(name, ext);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return galleryExts;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
loadExtensions,
|
|
||||||
getExtension,
|
|
||||||
getAllExtensions,
|
|
||||||
getExtensionsList,
|
|
||||||
getAnimeExtensionsMap,
|
|
||||||
getBookExtensionsMap,
|
|
||||||
getGalleryExtensionsMap,
|
|
||||||
saveExtensionFile,
|
|
||||||
deleteExtensionFile
|
|
||||||
};
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
const { queryOne, run } = require('./database');
|
|
||||||
|
|
||||||
async function getCachedExtension(extName, id) {
|
|
||||||
return queryOne(
|
|
||||||
"SELECT metadata FROM extension WHERE ext_name = ? AND id = ?",
|
|
||||||
[extName, id]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function cacheExtension(extName, id, title, metadata) {
|
|
||||||
return run(
|
|
||||||
`
|
|
||||||
INSERT INTO extension (ext_name, id, title, metadata, updated_at)
|
|
||||||
VALUES (?, ?, ?, ?, ?)
|
|
||||||
ON CONFLICT(ext_name, id)
|
|
||||||
DO UPDATE SET
|
|
||||||
title = excluded.title,
|
|
||||||
metadata = excluded.metadata,
|
|
||||||
updated_at = ?
|
|
||||||
`,
|
|
||||||
[extName, id, title, JSON.stringify(metadata), Date.now(), Date.now()]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getExtensionTitle(extName, id) {
|
|
||||||
const sql = "SELECT title FROM extension WHERE ext_name = ? AND id = ?";
|
|
||||||
const row = await queryOne(sql, [extName, id], 'anilist');
|
|
||||||
return row ? row.title : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteExtension(extName) {
|
|
||||||
return run(
|
|
||||||
"DELETE FROM extension WHERE ext_name = ?",
|
|
||||||
[extName]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getCache(key) {
|
|
||||||
return queryOne("SELECT result, created_at, ttl_ms FROM cache WHERE key = ?", [key], "cache");
|
|
||||||
}
|
|
||||||
|
|
||||||
async function setCache(key, result, ttl_ms) {
|
|
||||||
return run(
|
|
||||||
`
|
|
||||||
INSERT INTO cache (key, result, created_at, ttl_ms)
|
|
||||||
VALUES (?, ?, ?, ?)
|
|
||||||
ON CONFLICT(key)
|
|
||||||
DO UPDATE SET result = excluded.result, created_at = excluded.created_at, ttl_ms = excluded.ttl_ms
|
|
||||||
`,
|
|
||||||
[key, JSON.stringify(result), Date.now(), ttl_ms],
|
|
||||||
"cache"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
getCachedExtension,
|
|
||||||
cacheExtension,
|
|
||||||
getExtensionTitle,
|
|
||||||
deleteExtension,
|
|
||||||
getCache,
|
|
||||||
setCache
|
|
||||||
};
|
|
||||||
@@ -1,234 +0,0 @@
|
|||||||
const sqlite3 = require('sqlite3').verbose();
|
|
||||||
const path = require("path");
|
|
||||||
const fs = require("fs");
|
|
||||||
|
|
||||||
async function ensureUserDataDB(dbPath) {
|
|
||||||
const dir = path.dirname(dbPath);
|
|
||||||
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
const db = new sqlite3.Database(
|
|
||||||
dbPath,
|
|
||||||
sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE
|
|
||||||
);
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const schema = `
|
|
||||||
CREATE TABLE IF NOT EXISTS User (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
username TEXT NOT NULL UNIQUE,
|
|
||||||
profile_picture_url TEXT,
|
|
||||||
email TEXT UNIQUE,
|
|
||||||
password_hash TEXT,
|
|
||||||
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS UserIntegration (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
user_id INTEGER NOT NULL UNIQUE,
|
|
||||||
platform TEXT NOT NULL DEFAULT 'AniList',
|
|
||||||
access_token TEXT NOT NULL,
|
|
||||||
refresh_token TEXT NOT NULL,
|
|
||||||
token_type TEXT NOT NULL,
|
|
||||||
anilist_user_id INTEGER NOT NULL,
|
|
||||||
expires_at DATETIME NOT NULL,
|
|
||||||
FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS ListEntry (
|
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
entry_id INTEGER NOT NULL,
|
|
||||||
source TEXT NOT NULL,
|
|
||||||
entry_type TEXT NOT NULL,
|
|
||||||
status TEXT NOT NULL,
|
|
||||||
progress INTEGER NOT NULL DEFAULT 0,
|
|
||||||
score INTEGER,
|
|
||||||
|
|
||||||
start_date DATE,
|
|
||||||
end_date DATE,
|
|
||||||
repeat_count INTEGER NOT NULL DEFAULT 0,
|
|
||||||
notes TEXT,
|
|
||||||
is_private BOOLEAN NOT NULL DEFAULT 0,
|
|
||||||
updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
UNIQUE (user_id, entry_id),
|
|
||||||
FOREIGN KEY (user_id) REFERENCES User(id) ON DELETE CASCADE
|
|
||||||
);
|
|
||||||
`;
|
|
||||||
|
|
||||||
db.exec(schema, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureAnilistSchema(db) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const schema = `
|
|
||||||
CREATE TABLE IF NOT EXISTS anime (
|
|
||||||
id INTEGER PRIMARY KEY,
|
|
||||||
title TEXT,
|
|
||||||
updatedAt INTEGER,
|
|
||||||
cache_created_at INTEGER DEFAULT 0,
|
|
||||||
cache_ttl_ms INTEGER DEFAULT 0,
|
|
||||||
full_data JSON
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS trending (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS top_airing (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS books (
|
|
||||||
id INTEGER PRIMARY KEY,
|
|
||||||
title TEXT,
|
|
||||||
updatedAt INTEGER,
|
|
||||||
full_data JSON
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS trending_books (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS popular_books (
|
|
||||||
rank INTEGER PRIMARY KEY,
|
|
||||||
id INTEGER,
|
|
||||||
full_data JSON,
|
|
||||||
updated_at INTEGER NOT NULL DEFAULT 0
|
|
||||||
);
|
|
||||||
`;
|
|
||||||
|
|
||||||
db.exec(schema, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureExtensionsTable(db) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.exec(`
|
|
||||||
CREATE TABLE IF NOT EXISTS extension (
|
|
||||||
ext_name TEXT NOT NULL,
|
|
||||||
id TEXT NOT NULL,
|
|
||||||
title TEXT NOT NULL,
|
|
||||||
metadata TEXT NOT NULL,
|
|
||||||
updated_at INTEGER NOT NULL,
|
|
||||||
PRIMARY KEY(ext_name, id)
|
|
||||||
);
|
|
||||||
`, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ensureCacheTable(db) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
db.exec(`
|
|
||||||
CREATE TABLE IF NOT EXISTS cache (
|
|
||||||
key TEXT PRIMARY KEY,
|
|
||||||
result TEXT NOT NULL,
|
|
||||||
created_at INTEGER NOT NULL,
|
|
||||||
ttl_ms INTEGER NOT NULL
|
|
||||||
);
|
|
||||||
`, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function ensureFavoritesDB(dbPath) {
|
|
||||||
const dir = path.dirname(dbPath);
|
|
||||||
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir, { recursive: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
const exists = fs.existsSync(dbPath);
|
|
||||||
|
|
||||||
const db = new sqlite3.Database(
|
|
||||||
dbPath,
|
|
||||||
sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE
|
|
||||||
);
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (!exists) {
|
|
||||||
const schema = `
|
|
||||||
CREATE TABLE IF NOT EXISTS favorites (
|
|
||||||
id TEXT NOT NULL,
|
|
||||||
user_id INTEGER NOT NULL,
|
|
||||||
title TEXT NOT NULL,
|
|
||||||
image_url TEXT NOT NULL,
|
|
||||||
thumbnail_url TEXT NOT NULL DEFAULT "",
|
|
||||||
tags TEXT NOT NULL DEFAULT "",
|
|
||||||
headers TEXT NOT NULL DEFAULT "",
|
|
||||||
provider TEXT NOT NULL DEFAULT "",
|
|
||||||
PRIMARY KEY (id, user_id)
|
|
||||||
);
|
|
||||||
`;
|
|
||||||
|
|
||||||
db.exec(schema, (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
db.all(`PRAGMA table_info(favorites)`, (err, cols) => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
|
|
||||||
const hasHeaders = cols.some(c => c.name === "headers");
|
|
||||||
const hasProvider = cols.some(c => c.name === "provider");
|
|
||||||
const hasUserId = cols.some(c => c.name === "user_id");
|
|
||||||
|
|
||||||
const queries = [];
|
|
||||||
|
|
||||||
if (!hasHeaders) {
|
|
||||||
queries.push(`ALTER TABLE favorites ADD COLUMN headers TEXT NOT NULL DEFAULT ""`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!hasProvider) {
|
|
||||||
queries.push(`ALTER TABLE favorites ADD COLUMN provider TEXT NOT NULL DEFAULT ""`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!hasUserId) {
|
|
||||||
queries.push(`ALTER TABLE favorites ADD COLUMN user_id INTEGER NOT NULL DEFAULT 1`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (queries.length === 0) {
|
|
||||||
return resolve(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
db.exec(queries.join(";"), (err) => {
|
|
||||||
if (err) reject(err);
|
|
||||||
else resolve(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
ensureUserDataDB,
|
|
||||||
ensureAnilistSchema,
|
|
||||||
ensureExtensionsTable,
|
|
||||||
ensureCacheTable,
|
|
||||||
ensureFavoritesDB
|
|
||||||
};
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
|
|
||||||
async function viewsRoutes(fastify: FastifyInstance) {
|
|
||||||
fastify.get('/', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'users.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/anime', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'animes.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/my-list', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'list.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/books', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'books.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/schedule', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'schedule.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'gallery.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/marketplace', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'marketplace.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/gallery/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/gallery/favorites/*', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery', 'image.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/anime/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/anime/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'anime.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/watch/:id/:episode', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'anime', 'watch.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/book/:id', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/book/:extension/*', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'book.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
|
|
||||||
fastify.get('/read/:provider/:chapter/*', (req: FastifyRequest, reply: FastifyReply) => {
|
|
||||||
const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'books', 'read.html'));
|
|
||||||
reply.type('text/html').send(stream);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default viewsRoutes;
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2023",
|
|
||||||
"module": "CommonJS",
|
|
||||||
"allowJs": true,
|
|
||||||
"checkJs": false,
|
|
||||||
"strict": true,
|
|
||||||
"outDir": "electron",
|
|
||||||
"rootDir": "src",
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"skipLibCheck": true
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.ts"],
|
|
||||||
"exclude": ["node_modules"]
|
|
||||||
}
|
|
||||||
@@ -1,365 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
href="/public/assets/waifuboards.ico"
|
|
||||||
type="image/x-icon"
|
|
||||||
/>
|
|
||||||
<title>WaifuBoard</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
|
||||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
|
|
||||||
<link rel="stylesheet" href="/views/css/components/hero.css" />
|
|
||||||
<link rel="stylesheet" href="/views/css/anime/anime.css" />
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/views/css/components/updateNotifier.css"
|
|
||||||
/>
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar">
|
|
||||||
<div class="title-left">
|
|
||||||
<img
|
|
||||||
class="app-icon"
|
|
||||||
src="/public/assets/waifuboards.ico"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="desc-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
|
||||||
<h2 class="modal-title">Synopsis</h2>
|
|
||||||
<div class="modal-text" id="full-description"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="add-list-modal">
|
|
||||||
<div class="modal-content modal-list">
|
|
||||||
<button class="modal-close" onclick="closeAddToListModal()">
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="modal-fields-grid">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Status</label>
|
|
||||||
<select id="entry-status" class="form-input">
|
|
||||||
<option value="WATCHING">Watching</option>
|
|
||||||
<option value="COMPLETED">Completed</option>
|
|
||||||
<option value="PLANNING">Planning</option>
|
|
||||||
<option value="PAUSED">Paused</option>
|
|
||||||
<option value="DROPPED">Dropped</option>
|
|
||||||
<option value="REPEATING">Rewatching</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Episodes Watched</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="entry-progress"
|
|
||||||
class="form-input"
|
|
||||||
min="0"
|
|
||||||
placeholder="0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Your Score (0-10)</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="entry-score"
|
|
||||||
class="form-input"
|
|
||||||
min="0"
|
|
||||||
max="10"
|
|
||||||
step="0.1"
|
|
||||||
placeholder="Optional"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<div class="date-group">
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-start-date"
|
|
||||||
>Start Date</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
id="entry-start-date"
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-end-date">End Date</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
id="entry-end-date"
|
|
||||||
class="form-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-repeat-count"
|
|
||||||
>Rewatch Count</label
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="entry-repeat-count"
|
|
||||||
class="form-input"
|
|
||||||
min="0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group notes-group">
|
|
||||||
<label for="entry-notes">Notes</label>
|
|
||||||
<textarea
|
|
||||||
id="entry-notes"
|
|
||||||
class="form-input notes-textarea"
|
|
||||||
rows="4"
|
|
||||||
placeholder="Personal notes..."
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="entry-is-private"
|
|
||||||
class="form-checkbox"
|
|
||||||
/>
|
|
||||||
<label for="entry-is-private"
|
|
||||||
>Mark as Private</label
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button
|
|
||||||
class="btn-danger"
|
|
||||||
id="modal-delete-btn"
|
|
||||||
onclick="deleteFromList()"
|
|
||||||
>
|
|
||||||
Remove
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-secondary"
|
|
||||||
onclick="closeAddToListModal()"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button class="btn-primary" onclick="saveToList()">
|
|
||||||
Save Changes
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/anime" class="back-btn">
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2.5"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path d="M15 19l-7-7 7-7" />
|
|
||||||
</svg>
|
|
||||||
Back to Home
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="hero-wrapper">
|
|
||||||
<div class="video-background">
|
|
||||||
<div id="player"></div>
|
|
||||||
</div>
|
|
||||||
<div class="hero-overlay"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-container">
|
|
||||||
<aside class="sidebar">
|
|
||||||
<div class="poster-card">
|
|
||||||
<img id="poster" src="" alt="" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-grid">
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Format</h4>
|
|
||||||
<span id="format">--</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Episodes</h4>
|
|
||||||
<span id="episodes">--</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Status</h4>
|
|
||||||
<span id="status">--</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Season</h4>
|
|
||||||
<span id="season">--</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Studio</h4>
|
|
||||||
<span id="studio">--</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-grid">
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Main Characters</h4>
|
|
||||||
<div class="character-list" id="char-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main class="main-content">
|
|
||||||
<div class="anime-header">
|
|
||||||
<h1 class="anime-title" id="title">Loading...</h1>
|
|
||||||
|
|
||||||
<div class="meta-row">
|
|
||||||
<div
|
|
||||||
class="pill extension-pill"
|
|
||||||
id="extension-pill"
|
|
||||||
style="display: none; background: #8b5cf6"
|
|
||||||
></div>
|
|
||||||
<div class="pill score" id="score">--% Score</div>
|
|
||||||
<div class="pill" id="year">----</div>
|
|
||||||
<div class="pill" id="genres">Action</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-row">
|
|
||||||
<button class="btn-watch" id="watch-btn">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path d="M8 5v14l11-7z" />
|
|
||||||
</svg>
|
|
||||||
Start Watching
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn-secondary"
|
|
||||||
id="add-to-list-btn"
|
|
||||||
onclick="openAddToListModal()"
|
|
||||||
>
|
|
||||||
+ Add to List
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="description-box">
|
|
||||||
<div id="description-preview"></div>
|
|
||||||
<button
|
|
||||||
id="read-more-btn"
|
|
||||||
class="read-more-btn"
|
|
||||||
style="display: none"
|
|
||||||
onclick="openModal()"
|
|
||||||
>
|
|
||||||
Read More
|
|
||||||
<svg
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path d="M19 9l-7 7-7-7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="episodes-section">
|
|
||||||
<div class="episodes-header-row">
|
|
||||||
<div
|
|
||||||
class="section-title"
|
|
||||||
style="margin: 0; border: none; padding: 0"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
style="
|
|
||||||
font-size: 1.8rem;
|
|
||||||
border-left: 4px solid #8b5cf6;
|
|
||||||
padding-left: 1rem;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
Episodes
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div class="episode-search-wrapper">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="ep-search"
|
|
||||||
class="episode-search-input"
|
|
||||||
placeholder="Jump to Ep #"
|
|
||||||
min="1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="episodes-grid" id="episodes-grid"></div>
|
|
||||||
|
|
||||||
<div class="pagination-controls" id="pagination-controls">
|
|
||||||
<button
|
|
||||||
class="page-btn"
|
|
||||||
id="prev-page"
|
|
||||||
onclick="changePage(-1)"
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</button>
|
|
||||||
<span class="page-info" id="page-info"
|
|
||||||
>Page 1 of 1</span
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="page-btn"
|
|
||||||
id="next-page"
|
|
||||||
onclick="changePage(1)"
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/anime/anime.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,265 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WaifuBoard</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body >
|
|
||||||
<div id="titlebar"><div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button active">Anime</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="11" cy="11" r="8"/>
|
|
||||||
<path d="M21 21l-4.35-4.35"/>
|
|
||||||
</svg>
|
|
||||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
|
||||||
<div class="search-results" id="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="hero-wrapper">
|
|
||||||
<div class="hero-background">
|
|
||||||
<img id="hero-bg-media" alt="">
|
|
||||||
<div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="hero-vignette"></div>
|
|
||||||
|
|
||||||
<div class="hero-content">
|
|
||||||
<div class="hero-poster-card">
|
|
||||||
<div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
|
|
||||||
<img id="hero-poster" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
|
|
||||||
</div>
|
|
||||||
<div class="hero-text">
|
|
||||||
<div id="hero-loading-ui">
|
|
||||||
<div class="skeleton title-skeleton"></div>
|
|
||||||
<div class="skeleton text-skeleton" style="width: 40%"></div>
|
|
||||||
<div class="skeleton text-skeleton" style="width: 100%; height: 4em;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero-real-ui" style="display: none;">
|
|
||||||
<h1 class="hero-title" id="hero-title"></h1>
|
|
||||||
<div class="hero-meta">
|
|
||||||
<span class="score-badge" id="hero-score"></span>
|
|
||||||
<span id="hero-year"></span>
|
|
||||||
<span id="hero-type"></span>
|
|
||||||
</div>
|
|
||||||
<p class="hero-desc" id="hero-desc"></p>
|
|
||||||
<div class="hero-buttons">
|
|
||||||
<button class="btn-primary" id="watch-btn">Watch Now</button>
|
|
||||||
<button class="btn-blur">+ Add to List</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="add-list-modal">
|
|
||||||
<div class="modal-content modal-list">
|
|
||||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
|
||||||
<h2 class="modal-title" id="modal-title">Add to List</h2>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="modal-fields-grid">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Status</label>
|
|
||||||
<select id="entry-status" class="form-input">
|
|
||||||
<option value="WATCHING">Watching/Reading</option>
|
|
||||||
<option value="COMPLETED">Completed</option>
|
|
||||||
<option value="PLANNING">Planning</option>
|
|
||||||
<option value="PAUSED">Paused</option>
|
|
||||||
<option value="DROPPED">Dropped</option>
|
|
||||||
<option value="REPEATING">Rewatching</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Episodes Watched</label>
|
|
||||||
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Your Score (0-10)</label>
|
|
||||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<div class="date-group">
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-start-date">Start Date</label>
|
|
||||||
<input type="date" id="entry-start-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-end-date">End Date</label>
|
|
||||||
<input type="date" id="entry-end-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-repeat-count">Rewatch Count</label>
|
|
||||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group notes-group">
|
|
||||||
<label for="entry-notes">Notes</label>
|
|
||||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
|
||||||
<label for="entry-is-private">Mark as Private</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
|
||||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
|
||||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<main>
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="section-title">Continue watching</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
|
|
||||||
<div class="carousel" id="my-status">
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
</div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
|
||||||
<div class="carousel" id="trending">
|
|
||||||
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
</div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
|
||||||
<div class="carousel" id="top-airing">
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
|
||||||
</div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
|
||||||
<script src="/src/scripts/anime/animes.js"></script>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WaifuBoard Watch</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/anime/watch.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
|
||||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<header class="top-bar">
|
|
||||||
<a href="#" id="back-link" class="back-btn">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
|
||||||
<path d="M15 19l-7-7 7-7"/>
|
|
||||||
</svg>
|
|
||||||
<span>Back to Series</span>
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="ui-scale-wrapper">
|
|
||||||
<main class="watch-container">
|
|
||||||
|
|
||||||
<section class="anime-details">
|
|
||||||
<div class="details-container">
|
|
||||||
<div class="details-cover">
|
|
||||||
<img id="detail-cover-image" src="" alt="Anime Cover" class="cover-image">
|
|
||||||
</div>
|
|
||||||
<div class="details-content">
|
|
||||||
<h1 id="anime-title-details">Loading...</h1>
|
|
||||||
<div class="details-meta">
|
|
||||||
<span id="detail-format" class="meta-badge">--</span>
|
|
||||||
<span id="detail-season" class="meta-badge">--</span>
|
|
||||||
<span id="detail-score" class="meta-badge meta-score">--</span>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<p id="detail-description" class="details-description">Loading description...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="player-section">
|
|
||||||
|
|
||||||
<div class="player-toolbar">
|
|
||||||
<div class="control-group">
|
|
||||||
<div class="sd-toggle" id="sd-toggle" data-state="sub" onclick="toggleAudioMode()">
|
|
||||||
<div class="sd-bg"></div>
|
|
||||||
<div class="sd-option active" id="opt-sub">Sub</div>
|
|
||||||
<div class="sd-option" id="opt-dub">Dub</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<select id="server-select" class="source-select" onchange="loadStream()" style="display:none;">
|
|
||||||
<option value="">Server...</option>
|
|
||||||
</select>
|
|
||||||
<select id="extension-select" class="source-select" onchange="onExtensionChange()">
|
|
||||||
<option value="" disabled selected>Source...</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="video-container">
|
|
||||||
<video id="player" controls crossorigin playsinline></video>
|
|
||||||
<div id="loading-overlay" class="loading-overlay">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<p id="loading-text">Select a source...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="episode-controls">
|
|
||||||
<div class="episode-info">
|
|
||||||
<h1 id="anime-title-details2">Loading...</h1>
|
|
||||||
<p id="episode-label">Episode --</p>
|
|
||||||
</div>
|
|
||||||
<div class="navigation-buttons">
|
|
||||||
<button class="nav-btn prev-btn" id="prev-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 19l-7-7 7-7"/></svg><span>Previous</span></button>
|
|
||||||
<button class="nav-btn next-btn" id="next-btn"><span>Next</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5l7 7-7 7"/></svg></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="episode-carousel-compact">
|
|
||||||
<div class="carousel-header">
|
|
||||||
<h2>Episodes</h2>
|
|
||||||
<div class="carousel-nav">
|
|
||||||
<button class="carousel-arrow-mini" id="ep-prev-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></button>
|
|
||||||
<button class="carousel-arrow-mini" id="ep-next-mini"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="episode-carousel" class="episode-carousel-compact-list">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../../src/scripts/anime/player.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const carousel = document.getElementById('episode-carousel');
|
|
||||||
if (!carousel) return;
|
|
||||||
|
|
||||||
const prevBtn = document.getElementById('ep-prev-mini');
|
|
||||||
const nextBtn = document.getElementById('ep-next-mini');
|
|
||||||
|
|
||||||
const scrollAmount = 150;
|
|
||||||
|
|
||||||
prevBtn?.addEventListener('click', () => {
|
|
||||||
carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
|
|
||||||
});
|
|
||||||
|
|
||||||
nextBtn?.addEventListener('click', () => {
|
|
||||||
carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
|
|
||||||
});
|
|
||||||
|
|
||||||
const updateArrows = () => {
|
|
||||||
if (!prevBtn || !nextBtn) return;
|
|
||||||
|
|
||||||
prevBtn.style.opacity = carousel.scrollLeft <= 10 ? '0.3' : '1';
|
|
||||||
prevBtn.style.pointerEvents = carousel.scrollLeft <= 10 ? 'none' : 'auto';
|
|
||||||
|
|
||||||
const atEnd = carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10;
|
|
||||||
nextBtn.style.opacity = atEnd ? '0.3' : '1';
|
|
||||||
nextBtn.style.pointerEvents = atEnd ? 'none' : 'auto';
|
|
||||||
};
|
|
||||||
|
|
||||||
carousel.addEventListener('scroll', updateArrows);
|
|
||||||
window.addEventListener('resize', updateArrows);
|
|
||||||
|
|
||||||
const observer = new MutationObserver((mutations, obs) => {
|
|
||||||
updateArrows();
|
|
||||||
obs.disconnect();
|
|
||||||
|
|
||||||
});
|
|
||||||
observer.observe(carousel, { childList: true });
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const expandBtn = document.getElementById('expand-characters-btn');
|
|
||||||
const characterList = document.getElementById('characters-list');
|
|
||||||
const btnText = expandBtn?.querySelector('span');
|
|
||||||
|
|
||||||
if (!expandBtn || !characterList) return;
|
|
||||||
|
|
||||||
expandBtn.addEventListener('click', () => {
|
|
||||||
const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
|
|
||||||
|
|
||||||
if (isExpanded) {
|
|
||||||
|
|
||||||
characterList.classList.remove('expanded');
|
|
||||||
expandBtn.setAttribute('data-expanded', 'false');
|
|
||||||
if (btnText) btnText.innerText = 'Show All';
|
|
||||||
} else {
|
|
||||||
|
|
||||||
characterList.classList.add('expanded');
|
|
||||||
expandBtn.setAttribute('data-expanded', 'true');
|
|
||||||
if (btnText) btnText.innerText = 'Show Less';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,218 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<base href="/">
|
|
||||||
<title>WaifuBoard Book</title>
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/books/book.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="add-list-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
|
||||||
<h2 class="modal-title" id="modal-title">Add to Library</h2>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="modal-fields-grid">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-status">Status</label>
|
|
||||||
<select id="entry-status" class="form-input">
|
|
||||||
<option value="CURRENT">Reading</option>
|
|
||||||
<option value="COMPLETED">Completed</option>
|
|
||||||
<option value="PLANNING">Plan to Read</option>
|
|
||||||
<option value="PAUSED">Paused</option>
|
|
||||||
<option value="DROPPED">Dropped</option>
|
|
||||||
<option value="REPEATING">Rereading</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-progress" id="progress-label">Chapters Read</label>
|
|
||||||
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-score">Score (0-10)</label>
|
|
||||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width date-group">
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-start-date">Start Date</label>
|
|
||||||
<input type="date" id="entry-start-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-end-date">End Date</label>
|
|
||||||
<input type="date" id="entry-end-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-repeat-count">Re-read Count</label>
|
|
||||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group notes-group">
|
|
||||||
<label for="entry-notes">Notes</label>
|
|
||||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
|
||||||
<label for="entry-is-private">Mark as Private</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
|
||||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
|
||||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a href="/books" class="back-btn">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
|
||||||
Back to Books
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="hero-wrapper">
|
|
||||||
<div class="hero-background">
|
|
||||||
<img id="hero-bg" src="" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="hero-overlay"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-container">
|
|
||||||
|
|
||||||
|
|
||||||
<aside class="sidebar">
|
|
||||||
<div class="poster-card">
|
|
||||||
<img id="poster" src="" alt="">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-grid">
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Format</h4>
|
|
||||||
<span id="format">--</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Chapters</h4>
|
|
||||||
<span id="chapters">--</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Status</h4>
|
|
||||||
<span id="status">--</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<h4>Published</h4>
|
|
||||||
|
|
||||||
<span id="published-date">--</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
|
|
||||||
<main class="main-content">
|
|
||||||
<div class="book-header">
|
|
||||||
<h1 class="book-title" id="title">Loading...</h1>
|
|
||||||
|
|
||||||
<div class="meta-row">
|
|
||||||
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
|
|
||||||
<div class="pill score" id="score">--% Score</div>
|
|
||||||
<div class="pill" id="genres">Action</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-row">
|
|
||||||
<button class="btn-primary" id="read-start-btn">
|
|
||||||
Start Reading
|
|
||||||
</button>
|
|
||||||
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to Library</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chapters-section">
|
|
||||||
<div class="section-title">
|
|
||||||
<h2>Chapters</h2>
|
|
||||||
<div class="chapter-controls">
|
|
||||||
|
|
||||||
<select id="provider-filter" class="filter-select" style="display: none; margin-left: 15px;">
|
|
||||||
<option value="all">All Providers</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chapters-table-wrapper">
|
|
||||||
<table class="chapters-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>#</th>
|
|
||||||
<th>Title</th>
|
|
||||||
|
|
||||||
<th>Provider</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="chapters-body">
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="pagination-controls" id="pagination" style="display:none;">
|
|
||||||
<button class="page-btn" id="prev-page">Previous</button>
|
|
||||||
<span class="page-info" id="page-info">Page 1</span>
|
|
||||||
<button class="page-btn" id="next-page">Next</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/url-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/pagination-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/books/book.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,234 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WaifuBoard Books</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
|
||||||
<button class="nav-button active">Books</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
|
||||||
<input type="text" class="search-input" id="search-input" placeholder="Search books..." autocomplete="off">
|
|
||||||
<div class="search-results" id="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="hero-wrapper">
|
|
||||||
<div class="hero-background">
|
|
||||||
<img id="hero-bg-media" src="" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="hero-vignette"></div>
|
|
||||||
|
|
||||||
<div class="hero-content">
|
|
||||||
<div class="hero-poster-card">
|
|
||||||
<img id="hero-poster" src="" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="hero-text">
|
|
||||||
<h1 class="hero-title" id="hero-title">Loading...</h1>
|
|
||||||
<div class="hero-meta">
|
|
||||||
<span class="score-badge" id="hero-score"></span>
|
|
||||||
<span id="hero-year"></span>
|
|
||||||
<span id="hero-type"></span>
|
|
||||||
</div>
|
|
||||||
<p class="hero-desc" id="hero-desc"></p>
|
|
||||||
<div class="hero-buttons">
|
|
||||||
<button class="btn-primary" id="read-btn">Read Now</button>
|
|
||||||
<button class="btn-blur">+ Add to Library</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="add-list-modal">
|
|
||||||
<div class="modal-content modal-list">
|
|
||||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
|
||||||
<h2 class="modal-title" id="modal-title">Add to Library</h2>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="modal-fields-grid">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-status">Status</label>
|
|
||||||
<select id="entry-status" class="form-input">
|
|
||||||
<option value="CURRENT">Reading</option>
|
|
||||||
<option value="COMPLETED">Completed</option>
|
|
||||||
<option value="PLANNING">Plan to Read</option>
|
|
||||||
<option value="PAUSED">Paused</option>
|
|
||||||
<option value="DROPPED">Dropped</option>
|
|
||||||
<option value="REPEATING">Rereading</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-progress" id="progress-label">Chapters Read</label>
|
|
||||||
<input type="number" id="entry-progress" class="form-input" min="0" max="0" placeholder="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-score">Score (0-10)</label>
|
|
||||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width date-group">
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-start-date">Start Date</label>
|
|
||||||
<input type="date" id="entry-start-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-end-date">End Date</label>
|
|
||||||
<input type="date" id="entry-end-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-repeat-count">Re-read Count</label>
|
|
||||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group notes-group">
|
|
||||||
<label for="entry-notes">Notes</label>
|
|
||||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
|
||||||
<label for="entry-is-private">Mark as Private</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
|
|
||||||
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
|
|
||||||
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<main>
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="section-title">Continue Reading</div>
|
|
||||||
</div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status-books', -1)">‹</button>
|
|
||||||
<div class="carousel" id="my-status-books"></div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status-books', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">Trending Books</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
|
||||||
<div class="carousel" id="trending"></div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="section-header"><div class="section-title">All Time Popular</div></div>
|
|
||||||
<div class="carousel-wrapper">
|
|
||||||
<button class="scroll-btn left" onclick="scrollCarousel('popular', -1)">‹</button>
|
|
||||||
<div class="carousel" id="popular"></div>
|
|
||||||
<button class="scroll-btn right" onclick="scrollCarousel('popular', 1)">›</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/search-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
|
||||||
<script src="/src/scripts/books/books.js"></script>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,208 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Reader</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/books/reader.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<header class="top-bar">
|
|
||||||
<button id="back-btn" class="glass-btn">
|
|
||||||
← Back
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="chapter-info">
|
|
||||||
<button id="prev-chapter" class="nav-arrow">‹</button>
|
|
||||||
<span id="chapter-label">Loading...</span>
|
|
||||||
<button id="next-chapter" class="nav-arrow">›</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="settings-btn" class="glass-btn">
|
|
||||||
⚙ Settings
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<aside id="settings-panel" class="settings-panel">
|
|
||||||
<div class="panel-header">
|
|
||||||
<h3>Reader Settings</h3>
|
|
||||||
<button id="close-panel" class="close-btn">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel-content">
|
|
||||||
|
|
||||||
<div id="ln-settings" class="hidden">
|
|
||||||
|
|
||||||
<div class="settings-section">
|
|
||||||
<h4>Typography</h4>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>
|
|
||||||
Font Size
|
|
||||||
<span id="font-size-value">18px</span>
|
|
||||||
</label>
|
|
||||||
<input type="range" id="font-size" min="12" max="40" value="18" step="1">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>
|
|
||||||
Line Height
|
|
||||||
<span id="line-height-value">1.8</span>
|
|
||||||
</label>
|
|
||||||
<input type="range" id="line-height" min="1.2" max="3" step="0.1" value="1.8">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>
|
|
||||||
Content Width
|
|
||||||
<span id="max-width-value">750px</span>
|
|
||||||
</label>
|
|
||||||
<input type="range" id="max-width" min="500" max="1200" value="750" step="50">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Font Family</label>
|
|
||||||
<select id="font-family">
|
|
||||||
<option value='"Georgia", serif'>Georgia (Serif)</option>
|
|
||||||
<option value='"Charter", serif'>Charter (Serif)</option>
|
|
||||||
<option value='"Merriweather", serif'>Merriweather</option>
|
|
||||||
<option value='"Inter", system-ui, sans-serif'>Inter (Sans)</option>
|
|
||||||
<option value='system-ui, sans-serif'>System UI</option>
|
|
||||||
<option value='"JetBrains Mono", monospace'>JetBrains Mono</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Text Alignment</label>
|
|
||||||
<div class="toggle-group">
|
|
||||||
<button class="toggle-btn" data-align="left">Left</button>
|
|
||||||
<button class="toggle-btn active" data-align="justify">Justify</button>
|
|
||||||
<button class="toggle-btn" data-align="center">Center</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="settings-section">
|
|
||||||
<h4>Color Theme</h4>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Text Color</label>
|
|
||||||
<input type="color" id="text-color" value="#e5e7eb">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Background Color</label>
|
|
||||||
<input type="color" id="bg-color" value="#14141b">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presets">
|
|
||||||
<button data-preset="dark">Dark</button>
|
|
||||||
<button data-preset="sepia">Sepia</button>
|
|
||||||
<button data-preset="light">Light</button>
|
|
||||||
<button data-preset="amoled">AMOLED</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="manga-settings" class="hidden">
|
|
||||||
|
|
||||||
<div class="settings-section">
|
|
||||||
<h4>Display</h4>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Layout Mode</label>
|
|
||||||
<select id="display-mode">
|
|
||||||
<option value="auto">Auto Detect</option>
|
|
||||||
<option value="single">Single Page</option>
|
|
||||||
<option value="double">Double Page</option>
|
|
||||||
<option value="longstrip">Long Strip</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Reading Direction</label>
|
|
||||||
<div class="toggle-group">
|
|
||||||
<button class="toggle-btn" data-direction="ltr">← LTR</button>
|
|
||||||
<button class="toggle-btn active" data-direction="rtl">RTL →</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Image Fit</label>
|
|
||||||
<select id="image-fit">
|
|
||||||
<option value="width">Fit Width</option>
|
|
||||||
<option value="height">Fit Height</option>
|
|
||||||
<option value="screen" selected>Fit Screen</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="settings-section">
|
|
||||||
<h4>Appearance</h4>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>
|
|
||||||
Page Spacing
|
|
||||||
<span id="page-spacing-value">16px</span>
|
|
||||||
</label>
|
|
||||||
<input type="range" id="page-spacing" min="0" max="60" value="16" step="4">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="settings-section">
|
|
||||||
<h4>Performance</h4>
|
|
||||||
|
|
||||||
<div class="control">
|
|
||||||
<label>Preload Pages</label>
|
|
||||||
<input type="number" id="preload-count" min="0" max="10" value="3">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div id="overlay" class="overlay"></div>
|
|
||||||
|
|
||||||
<main id="reader">
|
|
||||||
<div class="loading-container">
|
|
||||||
<div class="loading-spinner"></div>
|
|
||||||
<span>Loading chapter...</span>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/books/reader.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,475 +0,0 @@
|
|||||||
.video-background {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(1.35);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: -350px auto 0 auto;
|
|
||||||
padding: 0 3rem 4rem 3rem;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 280px 1fr;
|
|
||||||
gap: 3rem;
|
|
||||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-card {
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 2/3;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-grid {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item h4 {
|
|
||||||
margin: 0 0 0.25rem 0;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.info-item span {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.character-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
.character-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.char-dot {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-title {
|
|
||||||
font-size: 4rem;
|
|
||||||
font-weight: 900;
|
|
||||||
line-height: 1;
|
|
||||||
margin: 0 0 1.5rem 0;
|
|
||||||
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill {
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.pill.score {
|
|
||||||
background: rgba(34, 197, 94, 0.2);
|
|
||||||
color: #4ade80;
|
|
||||||
border-color: rgba(34, 197, 94, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-watch {
|
|
||||||
padding: 1rem 3rem;
|
|
||||||
background: var(--color-text-primary);
|
|
||||||
color: var(--color-bg-base);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
transition:
|
|
||||||
transform 0.2s,
|
|
||||||
box-shadow 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-watch:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
color: white;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.description-box {
|
|
||||||
margin-top: 3rem;
|
|
||||||
font-size: 1.15rem;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #e4e4e7;
|
|
||||||
max-width: 900px;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.episodes-section {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
.section-title::before {
|
|
||||||
content: "";
|
|
||||||
width: 4px;
|
|
||||||
height: 28px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episodes-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-btn {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 1.25rem 1rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-btn:hover {
|
|
||||||
background: var(--color-bg-elevated-hover);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(60px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.content-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
margin-top: -100px;
|
|
||||||
padding: 0 1.5rem 4rem 1.5rem;
|
|
||||||
}
|
|
||||||
.poster-card {
|
|
||||||
width: 220px;
|
|
||||||
margin: 0 auto;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.main-content {
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.anime-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.meta-row {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.sidebar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #8b5cf6;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
.read-more-btn:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episodes-header-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.episodes-header-row h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
border-left: 4px solid #8b5cf6;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
.episode-search-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.episode-search-input {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 99px;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
color: white;
|
|
||||||
width: 140px;
|
|
||||||
text-align: center;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: 0.2s;
|
|
||||||
-moz-appearance: textfield;
|
|
||||||
}
|
|
||||||
.episode-search-input:focus {
|
|
||||||
border-color: #8b5cf6;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-search-input::-webkit-outer-spin-button,
|
|
||||||
.episode-search-input::-webkit-inner-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.page-btn {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.page-btn:hover:not(:disabled) {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
border-color: #8b5cf6;
|
|
||||||
}
|
|
||||||
.page-btn:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.page-info {
|
|
||||||
color: #a1a1aa;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.content-container,
|
|
||||||
.section,
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100vw;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: -50px;
|
|
||||||
padding: 1rem 1.25rem 4rem 1.25rem;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-card {
|
|
||||||
width: 180px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-grid {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
order: 2;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-row {
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill {
|
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-row {
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-watch,
|
|
||||||
.btn-secondary {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description-box {
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding: 1.25rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episodes-section {
|
|
||||||
margin-top: 3rem;
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episodes-header-row {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-search-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-search-input {
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episodes-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-btn {
|
|
||||||
padding: 0.8rem 0.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-controls {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,763 +0,0 @@
|
|||||||
.top-bar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: var(--spacing-lg) var(--spacing-xl);
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
rgba(0, 0, 0, 0.8) 0%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
z-index: 1000;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
pointer-events: auto;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-sm);
|
|
||||||
padding: 0.7rem 1.5rem;
|
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
transition: all var(--transition-smooth);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.12);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: var(--shadow-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.watch-container {
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: var(--spacing-2xl) auto;
|
|
||||||
padding: 0 var(--spacing-xl);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-xl);
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-section {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-md);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: var(--spacing-md);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sd-toggle {
|
|
||||||
display: flex;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: var(--border-subtle);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
padding: 4px;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sd-option {
|
|
||||||
padding: 0.6rem 1.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
z-index: 2;
|
|
||||||
transition: color var(--transition-base);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sd-option.active {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sd-bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
left: 4px;
|
|
||||||
bottom: 4px;
|
|
||||||
width: calc(50% - 4px);
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
transition: transform var(--transition-smooth);
|
|
||||||
box-shadow: 0 4px 12px var(--color-primary-glow);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sd-toggle[data-state="dub"] .sd-bg {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-select {
|
|
||||||
appearance: none;
|
|
||||||
background-color: var(--color-bg-elevated);
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 1.2rem center;
|
|
||||||
border: var(--border-subtle);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 0.7rem 2.8rem 0.7rem 1.2rem;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 160px;
|
|
||||||
transition: all var(--transition-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-select:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
background-color: var(--color-bg-card);
|
|
||||||
}
|
|
||||||
.source-select:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-container {
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
width: 100%;
|
|
||||||
background: var(--color-bg-base);
|
|
||||||
border-radius: var(--radius-xl);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow:
|
|
||||||
var(--shadow-lg),
|
|
||||||
0 0 0 1px var(--glass-border);
|
|
||||||
position: relative;
|
|
||||||
transition: box-shadow var(--transition-smooth);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-container:hover {
|
|
||||||
box-shadow:
|
|
||||||
var(--shadow-lg),
|
|
||||||
0 0 0 1px var(--color-primary),
|
|
||||||
var(--shadow-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
#player {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: var(--color-bg-base);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 20;
|
|
||||||
gap: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-top-color: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay p {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: var(--spacing-lg);
|
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: var(--spacing-lg);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-info h1 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin: 0 0 var(--spacing-xs);
|
|
||||||
}
|
|
||||||
.episode-info p {
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-sm);
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: var(--border-subtle);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all var(--transition-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn:hover:not(:disabled) {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: var(--shadow-glow);
|
|
||||||
}
|
|
||||||
.nav-btn:disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-carousel-compact {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1600px;
|
|
||||||
margin-top: var(--spacing-lg);
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-header {
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
padding: 0 var(--spacing-xl);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-header h2 {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
border-left: 4px solid var(--color-primary);
|
|
||||||
padding-left: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-nav {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--spacing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-arrow-mini {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: var(--border-subtle);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all var(--transition-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-arrow-mini:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-arrow-mini[style*="opacity: 0.3"] {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
border-color: var(--border-subtle);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-carousel-compact-list {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--spacing-md);
|
|
||||||
padding: var(--spacing-sm) var(--spacing-xl);
|
|
||||||
overflow-x: auto;
|
|
||||||
scroll-snap-type: x mandatory;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
scrollbar-width: none;
|
|
||||||
mask-image: linear-gradient(
|
|
||||||
to right,
|
|
||||||
transparent,
|
|
||||||
black var(--spacing-md),
|
|
||||||
black calc(100% - var(--spacing-md)),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-carousel-compact-list::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item {
|
|
||||||
flex: 0 0 200px;
|
|
||||||
height: 112px;
|
|
||||||
|
|
||||||
background: var(--color-bg-card);
|
|
||||||
border: 2px solid var(--border-subtle);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
transition: all var(--transition-base);
|
|
||||||
text-decoration: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
scroll-snap-align: start;
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: var(--shadow-md), var(--shadow-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item.active-ep-carousel {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
background: rgba(139, 92, 246, 0.15);
|
|
||||||
box-shadow:
|
|
||||||
0 0 0 2px var(--color-primary),
|
|
||||||
var(--shadow-md);
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item.active-ep-carousel::after {
|
|
||||||
content: "WATCHING";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 2px 8px;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
font-weight: 800;
|
|
||||||
border-bottom-left-radius: var(--radius-sm);
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item-img-container {
|
|
||||||
height: 70px;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: transform var(--transition-smooth);
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item:hover .carousel-item-img {
|
|
||||||
transform: scale(1.1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item-info {
|
|
||||||
flex: 1;
|
|
||||||
padding: var(--spacing-xs) var(--spacing-sm);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item-info p {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
letter-spacing: 0;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item-info p::before {
|
|
||||||
content: attr(data-episode-number);
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-weight: 800;
|
|
||||||
margin-right: var(--spacing-xs);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item.no-thumbnail {
|
|
||||||
flex: 0 0 160px;
|
|
||||||
height: 90px;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 2px solid var(--border-subtle);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item.no-thumbnail .carousel-item-info {
|
|
||||||
padding: var(--spacing-sm);
|
|
||||||
background: transparent;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item.no-thumbnail .carousel-item-info p {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item.no-thumbnail:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.12);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-item.no-thumbnail.active-ep-carousel .carousel-item-info p {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-details,
|
|
||||||
.anime-extra-content {
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: var(--spacing-2xl) auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: var(--spacing-xl);
|
|
||||||
background: var(--glass-bg);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: var(--spacing-xl);
|
|
||||||
box-shadow: var(--shadow-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-cover {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: var(--spacing-md);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-cover h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 0 var(--spacing-md) 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-image {
|
|
||||||
width: 220px;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-content h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-badge {
|
|
||||||
background: rgba(139, 92, 246, 0.12);
|
|
||||||
color: var(--color-primary);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-badge.meta-score {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.details-description {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: var(--spacing-xl);
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-header h2 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border-left: 5px solid var(--color-primary);
|
|
||||||
padding-left: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-xs);
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1rem;
|
|
||||||
padding: var(--spacing-xs);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-btn:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.1);
|
|
||||||
}
|
|
||||||
.expand-btn svg {
|
|
||||||
transition: transform var(--transition-smooth);
|
|
||||||
}
|
|
||||||
.expand-btn[data-expanded="true"] svg {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-carousel {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: var(--spacing-lg);
|
|
||||||
align-content: flex-start;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
height: 208px;
|
|
||||||
transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
padding: 0 var(--spacing-sm);
|
|
||||||
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-carousel::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-carousel.expanded {
|
|
||||||
height: auto;
|
|
||||||
max-height: 3200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
-ms-overflow-style: auto;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-carousel.expanded::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-carousel.expanded::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(139, 92, 246, 0.4);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-carousel.expanded::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plyr--video {
|
|
||||||
border-radius: var(--radius-xl);
|
|
||||||
}
|
|
||||||
.plyr__controls {
|
|
||||||
background: linear-gradient(
|
|
||||||
to top,
|
|
||||||
rgba(0, 0, 0, 0.9) 0%,
|
|
||||||
rgba(0, 0, 0, 0.5) 50%,
|
|
||||||
transparent 100%
|
|
||||||
) !important;
|
|
||||||
padding: 1rem 1.5rem 1.5rem !important;
|
|
||||||
}
|
|
||||||
.plyr--full-ui input[type="range"] {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
.plyr__control:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.12) !important;
|
|
||||||
}
|
|
||||||
.plyr__menu__container {
|
|
||||||
background: var(--glass-bg) !important;
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
border: 1px solid var(--glass-border);
|
|
||||||
box-shadow: var(--shadow-lg) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.carousel-nav {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.watch-container {
|
|
||||||
padding-top: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-cover {
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.details-cover h1 {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.watch-container {
|
|
||||||
padding: 5rem 1rem 2rem 1rem;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-toolbar {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-group {
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-select {
|
|
||||||
width: 100%;
|
|
||||||
background-position: right 1.5rem center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-info {
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.episode-info h1 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-buttons {
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn {
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0.8rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-container {
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 1.5rem;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-cover {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
|
||||||
width: 100%;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.details-cover {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-cover h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-image {
|
|
||||||
width: 140px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-content h1 {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-carousel {
|
|
||||||
justify-content: center;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.character-card {
|
|
||||||
width: calc(50% - 0.75rem);
|
|
||||||
flex: 0 0 calc(50% - 0.75rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,547 +0,0 @@
|
|||||||
.back-btn {
|
|
||||||
position: fixed;
|
|
||||||
top: 2rem;
|
|
||||||
left: 2rem;
|
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
background: var(--color-glass-bg);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: var(--border-subtle);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.back-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
transform: translateX(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 60vh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.hero-background {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
.hero-background img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
opacity: 0.4;
|
|
||||||
filter: blur(8px);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.hero-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1;
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
transparent 0%,
|
|
||||||
var(--color-bg-base) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: -350px auto 0 auto;
|
|
||||||
padding: 0 3rem 4rem 3rem;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 260px 1fr;
|
|
||||||
gap: 3rem;
|
|
||||||
align-items: flex-start;
|
|
||||||
animation: slideUp 0.8s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.5rem;
|
|
||||||
position: sticky;
|
|
||||||
top: calc(var(--nav-height) + 2rem);
|
|
||||||
align-self: flex-start;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-card {
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 2/3;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
background: #1a1a1a;
|
|
||||||
}
|
|
||||||
.poster-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-grid {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: var(--border-subtle);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 1.25rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.info-item h4 {
|
|
||||||
margin: 0 0 0.25rem 0;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.info-item span {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-top: 4rem;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-header {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.book-title {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.pill {
|
|
||||||
padding: 0.4rem 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 99px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border: var(--border-subtle);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
.pill.score {
|
|
||||||
background: rgba(34, 197, 94, 0.2);
|
|
||||||
color: #4ade80;
|
|
||||||
border-color: rgba(34, 197, 94, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#description {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#year {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
padding: 0.8rem 2rem;
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
border: none;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-weight: 800;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 0.8rem 2rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 99px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-blur {
|
|
||||||
padding: 0.8rem 2rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 99px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
.btn-blur:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-section {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding-bottom: 0.8rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.section-title h2 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 0;
|
|
||||||
border-left: 4px solid var(--color-primary);
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table-wrapper {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.chapters-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.chapters-table th {
|
|
||||||
padding: 0.8rem 1.2rem;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.chapters-table td {
|
|
||||||
padding: 1rem 1.2rem;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.chapters-table tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
.chapters-table tr:hover {
|
|
||||||
background: var(--color-bg-elevated-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
background-color: var(--color-bg-elevated);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 1rem center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
background-color: var(--color-bg-elevated-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select option {
|
|
||||||
background-color: var(--color-bg-elevated);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-btn-small {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.4rem 0.9rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
.read-btn-small:hover {
|
|
||||||
background: #7c3aed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.page-btn {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.page-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.page-btn:hover:not(:disabled) {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(40px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.hero-wrapper {
|
|
||||||
height: 40vh;
|
|
||||||
}
|
|
||||||
.content-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
margin-top: -80px;
|
|
||||||
padding: 0 1.5rem 4rem 1.5rem;
|
|
||||||
}
|
|
||||||
.poster-card {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
padding-top: 0;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.book-title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
.meta-row {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.action-row {
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.btn-primary,
|
|
||||||
.btn-blur {
|
|
||||||
flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.chapters-table th:nth-child(3),
|
|
||||||
.chapters-table td:nth-child(3) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.chapters-table th:nth-child(4),
|
|
||||||
.chapters-table td:nth-child(4) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hero-wrapper {
|
|
||||||
height: 35vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: -60px;
|
|
||||||
padding: 0 1rem 3rem 1rem;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: flex !important;
|
|
||||||
position: static;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poster-card {
|
|
||||||
display: block !important;
|
|
||||||
width: 160px;
|
|
||||||
margin: 0 auto;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-grid {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
order: 2;
|
|
||||||
padding-top: 0;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-title {
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-row {
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill {
|
|
||||||
padding: 0.3rem 0.8rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-row {
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary,
|
|
||||||
.btn-blur {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table-wrapper {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table tbody,
|
|
||||||
.chapters-table tr,
|
|
||||||
.chapters-table td {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table tr {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
padding: 1rem;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table td {
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table td:nth-child(1) {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table td:nth-child(2) {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table td:last-child {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
order: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table td:last-child,
|
|
||||||
.chapters-table td:nth-child(4) {
|
|
||||||
display: block !important;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding-top: 0.75rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-btn-small {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.8rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border: none;
|
|
||||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table td:nth-child(3) {
|
|
||||||
display: block !important;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapters-table td:nth-child(3)::before {
|
|
||||||
content: "Provider: ";
|
|
||||||
font-weight: 700;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-btn-small {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.7rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,615 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg-surface: #14141b;
|
|
||||||
--bg-elevated: #1c1c26;
|
|
||||||
--bg-hover: #252530;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 64px;
|
|
||||||
background: rgba(10, 10, 15, 0.85);
|
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 0.625rem 1.25rem;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reader {
|
|
||||||
margin-top: 64px;
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
min-height: calc(100vh - 64px);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manga-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--manga-max-width, 1200px);
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--page-spacing, 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--page-max-width, 900px);
|
|
||||||
height: auto;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
transition:
|
|
||||||
transform 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img:hover {
|
|
||||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img.zoomed {
|
|
||||||
position: fixed;
|
|
||||||
top: 64px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
max-width: 100vw;
|
|
||||||
max-height: calc(100vh - 64px);
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
margin: auto;
|
|
||||||
z-index: 999;
|
|
||||||
cursor: zoom-out;
|
|
||||||
border-radius: 0;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 64px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.95);
|
|
||||||
z-index: 998;
|
|
||||||
cursor: zoom-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--page-spacing, 16px);
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--manga-max-width, 1400px);
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img {
|
|
||||||
width: 48%;
|
|
||||||
max-width: 700px;
|
|
||||||
height: auto;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
object-fit: contain;
|
|
||||||
cursor: pointer;
|
|
||||||
transition:
|
|
||||||
transform 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img:hover {
|
|
||||||
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content {
|
|
||||||
max-width: var(--ln-max-width, 750px);
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 3rem 2.5rem;
|
|
||||||
line-height: var(--ln-line-height, 1.8);
|
|
||||||
font-size: var(--ln-font-size, 18px);
|
|
||||||
font-family: var(--ln-font-family, "Georgia", serif);
|
|
||||||
color: var(--ln-text-color, #e5e7eb);
|
|
||||||
text-align: var(--ln-text-align, left);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content p {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content h1,
|
|
||||||
.ln-content h2,
|
|
||||||
.ln-content h3 {
|
|
||||||
margin-top: 2em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 400px;
|
|
||||||
padding: 0;
|
|
||||||
z-index: 1001;
|
|
||||||
transform: translateX(100%);
|
|
||||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border-left: 1px solid var(--border-subtle);
|
|
||||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel.open {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1.5rem;
|
|
||||||
z-index: 10;
|
|
||||||
background: #0a0a0f;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-content {
|
|
||||||
flex: 1;
|
|
||||||
padding: 1.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-section {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-section:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-section h4 {
|
|
||||||
margin: 0 0 1.25rem 0;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control label {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.625rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control label span {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: "JetBrains Mono", monospace;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
outline: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 8px;
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-webkit-slider-thumb:hover {
|
|
||||||
transform: scale(1.15);
|
|
||||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-moz-range-thumb {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
select,
|
|
||||||
input[type="color"],
|
|
||||||
input[type="number"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.625rem 0.875rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
select:hover,
|
|
||||||
input[type="color"]:hover,
|
|
||||||
input[type="number"]:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
select:focus,
|
|
||||||
input[type="color"]:focus,
|
|
||||||
input[type="number"]:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 0 3px var(--color-primary-glow);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color"] {
|
|
||||||
height: 44px;
|
|
||||||
padding: 0.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presets {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presets button {
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
padding: 1rem;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presets button:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 15px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
flex: 1;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
box-shadow: 0 2px 10px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
z-index: 1000;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay.active {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-spinner {
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: 3px solid var(--bg-elevated);
|
|
||||||
border-top-color: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
gap: 1rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar-track {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--bg-elevated);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-panel::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.settings-panel {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-btn {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-info {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ln-content {
|
|
||||||
padding: 2rem 1.5rem;
|
|
||||||
font-size: var(--ln-font-size, 16px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-width {
|
|
||||||
width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-height {
|
|
||||||
height: var(--viewport-height, 85vh) !important;
|
|
||||||
width: auto !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-screen {
|
|
||||||
max-height: var(--viewport-height, 85vh) !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
width: auto !important;
|
|
||||||
height: auto !important;
|
|
||||||
object-fit: contain !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img.longstrip-fit {
|
|
||||||
width: 50%;
|
|
||||||
max-width: 50%;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
#reader {
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
|
|
||||||
padding-top: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manga-container {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
gap: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-img.longstrip-fit {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container {
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 0 !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.double-container img {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fit-height,
|
|
||||||
.fit-screen {
|
|
||||||
width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
max-height: none !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
object-fit: contain !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,335 +0,0 @@
|
|||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.9);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
z-index: 2000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: var(--color-bg-amoled);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
max-width: 900px;
|
|
||||||
width: 95%;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
animation: modalSlideUp 0.3s ease;
|
|
||||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
|
|
||||||
max-height: 90vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes modalSlideUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
transition: 0.2s;
|
|
||||||
z-index: 2001;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close:hover {
|
|
||||||
background: var(--color-danger);
|
|
||||||
border-color: var(--color-danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
padding: 1.5rem 2rem 0.5rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0 2rem;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-fields-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 1.5rem 2rem;
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.notes-group {
|
|
||||||
grid-column: 1 / span 2;
|
|
||||||
}
|
|
||||||
.form-group.checkbox-group {
|
|
||||||
grid-column: 3 / 4;
|
|
||||||
align-self: flex-end;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
background: var(--color-bg-field);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 0.8rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 10px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-input-pair {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
background: var(--color-bg-base);
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.2s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox:checked {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-checkbox:checked::after {
|
|
||||||
content: "✓";
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: white;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 0;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
background: var(--color-bg-amoled);
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary,
|
|
||||||
.btn-danger {
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition:
|
|
||||||
transform 0.2s,
|
|
||||||
background 0.2s;
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: var(--color-danger);
|
|
||||||
color: white;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
display: none;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.modal-overlay.active {
|
|
||||||
display: flex;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.modal-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100vh;
|
|
||||||
border-radius: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
padding-right: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
top: 0.8rem;
|
|
||||||
right: 0.8rem;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-fields-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.2rem;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group,
|
|
||||||
.form-group.notes-group,
|
|
||||||
.form-group.checkbox-group,
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-group {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-textarea {
|
|
||||||
min-height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.8rem;
|
|
||||||
padding: 1rem;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary,
|
|
||||||
.btn-danger {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
.btn-secondary {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
.btn-danger {
|
|
||||||
order: 3;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
background: rgba(239, 68, 68, 0.2);
|
|
||||||
color: #f87171;
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,218 +0,0 @@
|
|||||||
.hero-wrapper {
|
|
||||||
position: relative;
|
|
||||||
height: 85vh;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-background {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero-bg-media {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
opacity: 0.6;
|
|
||||||
transform: scale(1.1);
|
|
||||||
transition: opacity 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-vignette {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
circle at center,
|
|
||||||
transparent 0%,
|
|
||||||
var(--color-bg-base) 120%
|
|
||||||
),
|
|
||||||
linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
height: 100%;
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 3rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
padding-bottom: 6rem;
|
|
||||||
gap: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-poster-card {
|
|
||||||
width: 260px;
|
|
||||||
height: 380px;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: #1a1a1a;
|
|
||||||
}
|
|
||||||
.hero-poster-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-text {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 800px;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
animation: fadeInUp 0.8s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 4rem;
|
|
||||||
font-weight: 900;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-desc {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #e4e4e7;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
max-width: 650px;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
circle at center,
|
|
||||||
transparent 0%,
|
|
||||||
var(--color-bg-base) 120%
|
|
||||||
),
|
|
||||||
linear-gradient(
|
|
||||||
to top,
|
|
||||||
var(--color-bg-base) 10%,
|
|
||||||
rgba(9, 9, 11, 0.8) 25%,
|
|
||||||
transparent 60%
|
|
||||||
);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-badge {
|
|
||||||
color: #22c55e;
|
|
||||||
background: rgba(34, 197, 94, 0.1);
|
|
||||||
padding: 0.2rem 0.8rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hero-wrapper {
|
|
||||||
height: auto;
|
|
||||||
min-height: 85vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
padding: 6rem 1.5rem 3rem 1.5rem;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-poster-card {
|
|
||||||
width: 150px;
|
|
||||||
height: 225px;
|
|
||||||
|
|
||||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-text {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
|
|
||||||
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-meta {
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.8rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-desc {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-buttons .btn-primary,
|
|
||||||
.hero-buttons .btn-blur {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-overlay {
|
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
circle at center,
|
|
||||||
transparent 0%,
|
|
||||||
var(--color-bg-base) 140%
|
|
||||||
),
|
|
||||||
linear-gradient(
|
|
||||||
to top,
|
|
||||||
var(--color-bg-base) 15%,
|
|
||||||
rgba(0, 0, 0, 0.8) 40%,
|
|
||||||
rgba(0, 0, 0, 0.6) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,526 +0,0 @@
|
|||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: var(--nav-height);
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 3rem;
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
rgba(9, 9, 11, 0.9) 0%,
|
|
||||||
rgba(9, 9, 11, 0) 100%
|
|
||||||
);
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar.scrolled {
|
|
||||||
background: rgba(9, 9, 11, 0.85);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-brand {
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.8rem;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
min-width: 200px;
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-icon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-icon img {
|
|
||||||
width: 70%;
|
|
||||||
height: 70%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
padding: 0.4rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
padding: 0.6rem 1.5rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.nav-button.active {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 300px;
|
|
||||||
z-index: 2000;
|
|
||||||
}
|
|
||||||
.search-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 0.7rem 1rem 0.7rem 2.5rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
color: white;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
.search-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 12px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
pointer-events: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 0.7rem 1rem 0.7rem 2.5rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
color: white;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:focus {
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
|
||||||
border-radius: 12px 12px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 12px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
pointer-events: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: rgba(15, 15, 18, 0.95);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 12px 12px;
|
|
||||||
padding: 0.5rem;
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.25rem;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-user {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-btn {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-btn:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-avatar {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid var(--color-primary);
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: 0 0 0 0 var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-btn:hover #nav-avatar {
|
|
||||||
box-shadow: 0 0 0 4px var(--color-primary-glow);
|
|
||||||
border-color: #a78bfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.online-indicator {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 2px;
|
|
||||||
right: 2px;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
background: #22c55e;
|
|
||||||
border: 2px solid var(--color-bg-base);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 12px);
|
|
||||||
right: 0;
|
|
||||||
background: rgba(18, 18, 21, 0.98);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 0;
|
|
||||||
min-width: 260px;
|
|
||||||
display: none;
|
|
||||||
flex-direction: column;
|
|
||||||
box-shadow:
|
|
||||||
0 20px 40px rgba(0, 0, 0, 0.6),
|
|
||||||
0 0 0 1px rgba(139, 92, 246, 0.1);
|
|
||||||
z-index: 9999;
|
|
||||||
overflow: hidden;
|
|
||||||
animation: dropdownSlide 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dropdownSlide {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dropdown.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
background: rgba(139, 92, 246, 0.08);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 12px;
|
|
||||||
object-fit: cover;
|
|
||||||
border: 2px solid var(--color-primary);
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-user-info {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-username {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-status {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #22c55e;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-status::before {
|
|
||||||
content: "";
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
background: #22c55e;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-divider {
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(255, 255, 255, 0.06);
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
color: white;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item:hover svg {
|
|
||||||
color: var(--color-primary);
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-item {
|
|
||||||
color: #ef4444;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-item svg {
|
|
||||||
color: #ef4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-item:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.15);
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-item:hover svg {
|
|
||||||
color: #f87171;
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-poster {
|
|
||||||
width: 40px;
|
|
||||||
height: 56px;
|
|
||||||
border-radius: 4px;
|
|
||||||
object-fit: cover;
|
|
||||||
background: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-info {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-title {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rating-pill {
|
|
||||||
color: #4ade80;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
.search-results::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.navbar {
|
|
||||||
padding: 0 1rem;
|
|
||||||
height: 60px;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
z-index: 1002;
|
|
||||||
background: rgba(9, 9, 11, 0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-brand {
|
|
||||||
min-width: auto;
|
|
||||||
font-size: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
padding: 0.5rem 1rem 0.5rem 2.2rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-avatar {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center {
|
|
||||||
position: absolute;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
background: rgba(9, 9, 11, 0.98);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
|
|
||||||
overflow-x: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
z-index: 1001;
|
|
||||||
|
|
||||||
border-radius: 0;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-center::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 0.4rem 1rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results {
|
|
||||||
position: fixed;
|
|
||||||
top: 110px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100vw;
|
|
||||||
border-radius: 0;
|
|
||||||
max-height: calc(100vh - 120px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dropdown {
|
|
||||||
position: fixed;
|
|
||||||
top: 70px;
|
|
||||||
right: 1rem;
|
|
||||||
left: 1rem;
|
|
||||||
width: auto;
|
|
||||||
min-width: auto;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,195 +0,0 @@
|
|||||||
:root {
|
|
||||||
--titlebar-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
background: #09090b;
|
|
||||||
visibility: hidden;
|
|
||||||
scrollbar-gutter: stable;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron {
|
|
||||||
margin: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .navbar,
|
|
||||||
html.electron .top-bar,
|
|
||||||
html.electron .panel-header {
|
|
||||||
top: var(--titlebar-height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .panel-content {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .calendar-wrapper{
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron .back-btn {
|
|
||||||
top: 55px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#back-link {
|
|
||||||
margin-top: 55px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar {
|
|
||||||
display: none;
|
|
||||||
height: var(--titlebar-height);
|
|
||||||
background: rgba(9, 9, 11, 0.95);
|
|
||||||
color: white;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 12px;
|
|
||||||
-webkit-app-region: drag;
|
|
||||||
user-select: none;
|
|
||||||
font-family: "Inter", system-ui, sans-serif;
|
|
||||||
border-bottom: 1px solid rgba(139, 92, 246, 0.2);
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
z-index: 999999;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center !important;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar .app-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: rgba(139, 92, 246, 0.15);
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titlebar .app-icon img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-title {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
letter-spacing: -0.2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
gap: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right button {
|
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
width: 46px;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right button svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right button:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right button:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right .min:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right .max:hover {
|
|
||||||
background: rgba(34, 197, 94, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right .close:hover {
|
|
||||||
background: #e81123;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-right button:hover svg {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar {
|
|
||||||
width: 12px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar-track {
|
|
||||||
background: #09090b;
|
|
||||||
margin-top: var(--titlebar-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(139, 92, 246, 0.3);
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 2px solid #09090b;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box img {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 50%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box span {
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
#updateToast {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
right: 30px;
|
|
||||||
z-index: 5000;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(100px);
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
padding: 0.8rem 1.25rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
max-width: 300px;
|
|
||||||
|
|
||||||
background: rgba(18, 18, 21, 0.8);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
|
|
||||||
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#updateToast.hidden {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(100px);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#updateToast.update-available {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#updateToast p {
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#latestVersionDisplay {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
padding: 0.2rem 0.6rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: var(--color-bg-base);
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
box-shadow: 0 0 12px var(--color-primary-glow);
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#downloadButton {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
box-shadow: 0 4px 10px var(--color-primary-glow);
|
|
||||||
transition: transform 0.2s, background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#downloadButton:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
background: #7c4dff;
|
|
||||||
box-shadow: 0 6px 15px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
@@ -1,293 +0,0 @@
|
|||||||
.gallery-hero-placeholder {
|
|
||||||
height: var(--nav-height);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5rem;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-selector {
|
|
||||||
appearance: none;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255,255,255,0.05);
|
|
||||||
border: 1px solid rgba(255,255,255,0.1);
|
|
||||||
padding-right: 2.5rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-selector:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 15px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
pointer-events: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-results {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
margin: 0 -0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-card {
|
|
||||||
width: calc(25% - 1.5rem);
|
|
||||||
margin: 0.75rem;
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px) scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-card.is-loaded {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0) scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-card-img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
transition: transform 0.4s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-card:hover .gallery-card-img {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 38px;
|
|
||||||
height: 38px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
transition: all 0.25s ease;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-btn:hover {
|
|
||||||
background: rgba(0,0,0,0.85);
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-btn.favorited {
|
|
||||||
color: #ff6b6b;
|
|
||||||
background: rgba(255, 107, 107, 0.25);
|
|
||||||
box-shadow: 0 0 12px rgba(255, 107, 107, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-badge {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 8px;
|
|
||||||
left: 8px;
|
|
||||||
background: rgba(0,0,0,0.7);
|
|
||||||
color: white;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
padding: 5px 9px;
|
|
||||||
border-radius: 6px;
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.gallery-card { width: calc(33.333% - 1.5rem); }
|
|
||||||
}
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.gallery-card { width: calc(50% - 1.5rem); }
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.gallery-card { width: calc(100% - 1.5rem); }
|
|
||||||
.fav-btn { width: 42px; height: 42px; font-size: 1.4rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-card.skeleton {
|
|
||||||
min-height: 250px;
|
|
||||||
aspect-ratio: 1/1.4;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem 0 4rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-and-fav {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-toggle-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
background: rgba(255,255,255,0.07);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border: 1px solid rgba(255,255,255,0.15);
|
|
||||||
padding: 0.7rem 1rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.25s ease;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-toggle-btn:hover {
|
|
||||||
background: rgba(255,255,255,0.12);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-toggle-btn.active {
|
|
||||||
background: rgba(255,107,107,0.2);
|
|
||||||
border-color: #ff6b6b;
|
|
||||||
color: #ff6b6b;
|
|
||||||
box-shadow: 0 0 15px rgba(255,107,107,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-toggle-btn.active i {
|
|
||||||
color: #ff6b6b;
|
|
||||||
animation: beat 1.4s ease infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-toggle-btn i {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
transition: color 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes beat {
|
|
||||||
0%, 100% { transform: scale(1); }
|
|
||||||
50% { transform: scale(1.15); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
.fav-text { display: none; }
|
|
||||||
.fav-toggle-btn { padding: 0.7rem 0.9rem; }
|
|
||||||
.provider-and-fav { gap: 8px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5rem; /* Reduced gap since there are fewer items */
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
|
|
||||||
/* Center the provider selector since it's the only one */
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-selector {
|
|
||||||
appearance: none;
|
|
||||||
width: auto; /* Allow it to shrink */
|
|
||||||
max-width: 250px; /* Adjusted for better fit */
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border: 1px solid rgba(255,255,255,0.15);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 0.75rem 2.8rem 0.75rem 1rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 170px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888888' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 12px center;
|
|
||||||
transition: all 0.25s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-selector:hover { background-color: rgba(255,255,255,0.12); border-color: var(--color-primary); }
|
|
||||||
.provider-selector:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,107,107,0.2); }
|
|
||||||
|
|
||||||
.provider-selector option {
|
|
||||||
background: #111;
|
|
||||||
color: white;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-gallery-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 300px;
|
|
||||||
z-index: 2000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-toggle-btn {
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border: 1px solid rgba(255,255,255,0.15);
|
|
||||||
padding: 0.75rem 1.1rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-toggle-btn:hover { background: rgba(255,255,255,0.15); border-color: #ff6b6b; }
|
|
||||||
.fav-toggle-btn.active {
|
|
||||||
background: rgba(255,107,107,0.25);
|
|
||||||
border-color: #ff6b6b;
|
|
||||||
color: #ff6b6b;
|
|
||||||
box-shadow: 0 0 15px rgba(255,107,107,0.4);
|
|
||||||
}
|
|
||||||
.fav-toggle-btn.active i { color: #ff6b6b; animation: heartbeat 1.5s ease infinite; }
|
|
||||||
@keyframes heartbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.gallery-controls {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
.provider-selector { max-width: none; width: 48%; }
|
|
||||||
.search-gallery-wrapper { order: -1; width: 100%; }
|
|
||||||
.fav-toggle-btn { width: 48%; justify-content: center; }
|
|
||||||
.fav-text { display: none; }
|
|
||||||
}
|
|
||||||
@@ -1,260 +0,0 @@
|
|||||||
.gallery-hero-placeholder { height: var(--nav-height); width: 100%; }
|
|
||||||
|
|
||||||
.item-content-flex-wrapper {
|
|
||||||
display: flex;
|
|
||||||
gap: 3rem;
|
|
||||||
padding: 2rem 0 4rem;
|
|
||||||
min-height: 80vh;
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-col {
|
|
||||||
flex: 2;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-image {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 85vh;
|
|
||||||
border-radius: var(--radius-lg, 16px);
|
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
|
|
||||||
object-fit: contain;
|
|
||||||
transition: all 0.4s ease;
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-image:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: 0 30px 70px rgba(0,0,0,0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-col {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-header h1 {
|
|
||||||
font-size: 2.4rem;
|
|
||||||
margin: 0 0 0.8rem 0;
|
|
||||||
line-height: 1.2;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-name {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 1rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-action {
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border: 2px solid rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-action:hover { background: rgba(255,255,255,0.15); }
|
|
||||||
.fav-action.favorited {
|
|
||||||
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
|
||||||
border-color: #ff6b6b;
|
|
||||||
color: white;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fav-action i { font-size: 1.4rem; }
|
|
||||||
.fav-action.favorited i { animation: heartbeat 1.4s ease infinite; }
|
|
||||||
|
|
||||||
@keyframes heartbeat {
|
|
||||||
0%,100% { transform: scale(1); }
|
|
||||||
50% { transform: scale(1.25); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0% { box-shadow: 0 0 0 0 rgba(255,107,107,0.4); }
|
|
||||||
70% { box-shadow: 0 0 0 12px rgba(255,107,107,0); }
|
|
||||||
100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn:hover {
|
|
||||||
background: #7c4dff;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 30px rgba(139,92,246,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-link-btn {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border: 2px solid rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-link-btn:hover { background: rgba(255,255,255,0.18); }
|
|
||||||
|
|
||||||
.tags-section h3 {
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-item {
|
|
||||||
background: rgba(139,92,246,0.2);
|
|
||||||
color: var(--color-primary);
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 99px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.2s;
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-item:hover {
|
|
||||||
background: rgba(139,92,246,0.4);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.item-content-flex-wrapper { flex-direction: column; align-items: center; gap: 2rem; }
|
|
||||||
.info-col { width: 100%; max-width: 600px; }
|
|
||||||
.item-image { max-height: 70vh; }
|
|
||||||
.actions-row { flex-direction: row; }
|
|
||||||
.action-btn { flex: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.actions-row { flex-direction: column; }
|
|
||||||
.action-btn { padding: 0.9rem; font-size: 1rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-section {
|
|
||||||
margin-top: 4rem;
|
|
||||||
padding: 2rem 0;
|
|
||||||
border-top: 1px solid rgba(255,255,255,0.1);
|
|
||||||
max-width: 1400px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-section h3 {
|
|
||||||
margin: 0 0 1.5rem 0;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-card {
|
|
||||||
height: 180px;
|
|
||||||
border-radius: var(--radius-lg, 16px);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-card:hover {
|
|
||||||
transform: scale(1.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-card:hover img {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-card::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(transparent 60%, rgba(0,0,0,0.7));
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.similar-overlay {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 1rem;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 500;
|
|
||||||
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
position: fixed;
|
|
||||||
top: 5rem; left: 2rem; z-index: 100;
|
|
||||||
display: flex; align-items: center; gap: 0.5rem;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
background: var(--color-glass-bg); backdrop-filter: blur(12px);
|
|
||||||
border: var(--glass-border); border-radius: var(--radius-full);
|
|
||||||
color: white; text-decoration: none; font-weight: 600;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
body.electron .back-btn {
|
|
||||||
top: 115px !important;
|
|
||||||
}
|
|
||||||
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.similar-grid {
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
.similar-card { height: 140px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.similar-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,393 +0,0 @@
|
|||||||
:root {
|
|
||||||
--color-bg-base: #09090b;
|
|
||||||
--color-bg-elevated: #121215;
|
|
||||||
--color-bg-elevated-hover: #1e1e22;
|
|
||||||
--color-bg-card: #121214;
|
|
||||||
--color-primary: #8b5cf6;
|
|
||||||
--color-primary-hover: #7c3aed;
|
|
||||||
--color-primary-glow: rgba(139, 92, 246, 0.4);
|
|
||||||
--color-danger: #ef4444;
|
|
||||||
--color-success: #22c55e;
|
|
||||||
--color-bg-amoled: #0a0a0a;
|
|
||||||
--color-bg-field: #0e0e0f;
|
|
||||||
--color-glass-bg: rgba(20, 20, 23, 0.7);
|
|
||||||
|
|
||||||
--color-text-primary: #ffffff;
|
|
||||||
--color-text-secondary: #a1a1aa;
|
|
||||||
--color-text-muted: #71717a;
|
|
||||||
|
|
||||||
--border-subtle: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
--border-medium: 1px solid rgba(255, 255, 255, 0.12);
|
|
||||||
--glass-bg: rgba(18, 18, 20, 0.8);
|
|
||||||
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
|
|
||||||
--spacing-xs: 0.5rem;
|
|
||||||
--spacing-sm: 0.75rem;
|
|
||||||
--spacing-md: 1rem;
|
|
||||||
--spacing-lg: 1.5rem;
|
|
||||||
--spacing-xl: 2rem;
|
|
||||||
--spacing-2xl: 3rem;
|
|
||||||
|
|
||||||
--radius-sm: 0.5rem;
|
|
||||||
--radius-md: 0.75rem;
|
|
||||||
--radius-lg: 1.5rem;
|
|
||||||
--radius-xl: 1.5rem;
|
|
||||||
--radius-full: 9999px;
|
|
||||||
|
|
||||||
--nav-height: 80px;
|
|
||||||
|
|
||||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
||||||
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
|
|
||||||
--shadow-glow: 0 8px 32px var(--color-primary-glow);
|
|
||||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
--transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
|
|
||||||
--plyr-color-main: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: var(--color-bg-base);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-family: "Inter", system-ui, sans-serif;
|
|
||||||
overflow-x: hidden;
|
|
||||||
line-height: 1.6;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
max-width: 1700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem 3rem;
|
|
||||||
}
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-blur {
|
|
||||||
padding: 1rem 2.5rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-blur:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
min-width: 220px;
|
|
||||||
width: 220px;
|
|
||||||
flex: 0 0 220px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
}
|
|
||||||
.card-img-wrap {
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 2 / 3;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
background: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-wrap img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: transform 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover .card-img-wrap img {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.card-content p {
|
|
||||||
margin: 4px 0 0 0;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton {
|
|
||||||
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 1.5s infinite;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.text-skeleton {
|
|
||||||
height: 1em;
|
|
||||||
width: 70%;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.title-skeleton {
|
|
||||||
height: 3em;
|
|
||||||
width: 80%;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.poster-skeleton {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% {
|
|
||||||
background-position: 200% 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: -200% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.carousel {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.25rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 1rem 0;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.carousel::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-wrapper:hover .scroll-btn {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(20, 20, 23, 0.9);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
z-index: 20;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
}
|
|
||||||
.scroll-btn.left {
|
|
||||||
left: -25px;
|
|
||||||
}
|
|
||||||
.scroll-btn.right {
|
|
||||||
right: -25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
position: fixed;
|
|
||||||
top: 2rem;
|
|
||||||
left: 2rem;
|
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
transform: translateX(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
color: white;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
Here is the CSS you need to add to the very bottom of your file.
|
|
||||||
|
|
||||||
I have targeted the specific classes you provided (.card, .section, .back-btn) to make them touch-friendly, and I added a specific section to fix the "Who's exploring?" screen from your screenshot.
|
|
||||||
1. First: The HTML Tag (Crucial)
|
|
||||||
|
|
||||||
Ensure this is in your HTML <head> or the CSS below will not work:
|
|
||||||
HTML
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
2. The CSS Update
|
|
||||||
|
|
||||||
Copy and paste this entire block to the bottom of your CSS file:
|
|
||||||
CSS
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
:root {
|
|
||||||
--nav-height: 60px;
|
|
||||||
--spacing-2xl: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 1.25rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
top: 1rem;
|
|
||||||
left: 1rem;
|
|
||||||
padding: 0.6rem 1.2rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-btn {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel {
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
|
|
||||||
padding-right: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
min-width: 160px;
|
|
||||||
width: 160px;
|
|
||||||
flex: 0 0 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content h3 {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-selection-container,
|
|
||||||
main {
|
|
||||||
width: 90% !important;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-top: 20vh;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem !important;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-card img,
|
|
||||||
.user-avatar {
|
|
||||||
width: 140px !important;
|
|
||||||
height: 140px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-blur,
|
|
||||||
.add-user-btn {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,507 +0,0 @@
|
|||||||
.container {
|
|
||||||
max-width: 1600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-section {
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 900;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
background: linear-gradient(135deg, var(--color-primary), #a78bfa);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
transition:
|
|
||||||
transform 0.3s,
|
|
||||||
box-shadow 0.3s;
|
|
||||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 15px 35px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-section {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group label {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
background: var(--color-bg-base);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 0.7rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a1a1aa'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 0.7rem center;
|
|
||||||
background-size: 1.2em;
|
|
||||||
padding-right: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 10px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn {
|
|
||||||
background: var(--color-bg-base);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
padding: 0.7rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-state {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 5rem 0;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 4px solid rgba(139, 92, 246, 0.1);
|
|
||||||
border-top-color: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 5rem 0;
|
|
||||||
gap: 1.5rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state svg {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
background: var(--color-bg-elevated-hover);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 15px 30px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .list-item {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
padding-right: 1rem;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .list-item:hover {
|
|
||||||
transform: none;
|
|
||||||
box-shadow: 0 4px 20px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-poster-link {
|
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-poster {
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 2/3;
|
|
||||||
object-fit: cover;
|
|
||||||
background: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .item-poster {
|
|
||||||
width: 120px;
|
|
||||||
height: 180px;
|
|
||||||
aspect-ratio: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
padding: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .item-content {
|
|
||||||
padding: 1rem 0;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.list-grid.list-view .item-content > div:first-child {
|
|
||||||
flex-basis: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .item-title {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
white-space: normal;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-meta {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.3rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-pill {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
padding: 0.15rem 0.4rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-pill {
|
|
||||||
background: rgba(34, 197, 94, 0.2);
|
|
||||||
color: var(--color-success);
|
|
||||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-pill {
|
|
||||||
background: rgba(139, 92, 246, 0.15);
|
|
||||||
color: var(--color-primary);
|
|
||||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-pill {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.repeat-pill {
|
|
||||||
background: rgba(59, 130, 246, 0.15);
|
|
||||||
color: #3b82f6;
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
.private-pill {
|
|
||||||
background: rgba(251, 191, 36, 0.15);
|
|
||||||
color: #facc15;
|
|
||||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar-container {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: 999px;
|
|
||||||
height: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, var(--color-primary), #a78bfa);
|
|
||||||
border-radius: 999px;
|
|
||||||
transition: width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-text {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #facc15;
|
|
||||||
background: rgba(250, 204, 21, 0.1);
|
|
||||||
padding: 0.1rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-icon-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
z-index: 50;
|
|
||||||
background: rgba(18, 18, 21, 0.9);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
color: white;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition:
|
|
||||||
opacity 0.3s,
|
|
||||||
transform 0.2s,
|
|
||||||
background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover .edit-icon-btn {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-icon-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid.list-view .edit-icon-btn {
|
|
||||||
position: relative;
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
opacity: 1;
|
|
||||||
transform: none;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
.list-grid.list-view .list-item:hover .edit-icon-btn {
|
|
||||||
opacity: 1;
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.container {
|
|
||||||
padding: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-section {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
padding: 1rem;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 1rem;
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-section {
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 1rem;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle {
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-meta {
|
|
||||||
gap: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-pill {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
padding: 0.1rem 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-icon-btn {
|
|
||||||
opacity: 1;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,403 +0,0 @@
|
|||||||
.hero-spacer {
|
|
||||||
height: var(--nav-height);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marketplace-subtitle {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-label {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
padding: 0.6rem 2rem 0.6rem 1.25rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--color-bg-elevated-hover);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
appearance: none;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 0.75rem center;
|
|
||||||
background-size: 1em;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 8px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.marketplace-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
||||||
gap: 1rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-card {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
transition: all 0.2s;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
||||||
min-height: 140px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-card:hover {
|
|
||||||
background: var(--color-bg-elevated-hover);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content-wrapper {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 8px;
|
|
||||||
object-fit: contain;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
border: 2px solid var(--color-primary);
|
|
||||||
background-color: var(--color-bg-base);
|
|
||||||
flex-shrink: 0;
|
|
||||||
box-shadow: 0 0 10px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-name {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-status-badge {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0.15rem 0.5rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
display: inline-block;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-installed {
|
|
||||||
background: rgba(34, 197, 94, 0.2);
|
|
||||||
color: #4ade80;
|
|
||||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-local {
|
|
||||||
background: rgba(251, 191, 36, 0.2);
|
|
||||||
color: #fcd34d;
|
|
||||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-action-button {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition:
|
|
||||||
background 0.2s,
|
|
||||||
transform 0.2s,
|
|
||||||
box-shadow 0.2s;
|
|
||||||
margin-top: auto;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-install {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.btn-install:hover {
|
|
||||||
background: #a78bfa;
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-uninstall {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-uninstall:hover {
|
|
||||||
background: #ef4444;
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: 0 0 15px rgba(220, 38, 38, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-card.skeleton {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
box-shadow: none;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
.extension-card.skeleton:hover {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
box-shadow: none;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
.skeleton-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.skeleton-text.title-skeleton {
|
|
||||||
height: 1.1em;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
.skeleton-text.text-skeleton {
|
|
||||||
height: 0.7em;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.skeleton-button {
|
|
||||||
width: 100%;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 999px;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.85);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 5000;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay:not(.hidden) {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: var(--bg-surface);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
padding: 2.5rem;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
width: 90%;
|
|
||||||
max-width: 450px;
|
|
||||||
box-shadow:
|
|
||||||
0 15px 50px rgba(0, 0, 0, 0.8),
|
|
||||||
0 0 20px var(--color-primary-glow);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
transform: translateY(-50px);
|
|
||||||
transition:
|
|
||||||
transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
||||||
opacity 0.3s ease-in-out;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay:not(.hidden) .modal-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modalTitle {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin-top: 0;
|
|
||||||
color: var(--color-primary);
|
|
||||||
border-bottom: 2px solid rgba(255, 255, 255, 0.05);
|
|
||||||
padding-bottom: 0.75rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modalMessage {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-button {
|
|
||||||
padding: 0.6rem 1.5rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition:
|
|
||||||
background 0.2s,
|
|
||||||
transform 0.2s;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-button.btn-install {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.modal-button.btn-install:hover {
|
|
||||||
background: #a78bfa;
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-button.btn-uninstall {
|
|
||||||
background: #dc2626;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.modal-button.btn-uninstall:hover {
|
|
||||||
background: #ef4444;
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.section-header {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls {
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-controls::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 0.6rem 2.2rem 0.6rem 1rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marketplace-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-card {
|
|
||||||
padding: 0.75rem;
|
|
||||||
min-height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-icon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-name {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-status-badge {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-card:hover {
|
|
||||||
transform: none;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.extension-action-button {
|
|
||||||
padding: 0.5rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
width: 95%;
|
|
||||||
max-width: none;
|
|
||||||
padding: 1.5rem;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
transform: translateY(100%);
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay:not(.hidden) .modal-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
#modalTitle {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modalMessage {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-button {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.8rem;
|
|
||||||
justify-content: center;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,457 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg-glass: rgba(18, 18, 21, 0.8);
|
|
||||||
--bg-cell: #0c0c0e;
|
|
||||||
--color-primary-glow: rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
background-color: var(--color-bg-base);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.electron body {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ambient-bg {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
z-index: -1;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
opacity: 0.06;
|
|
||||||
filter: blur(120px) saturate(1.2);
|
|
||||||
transition: background-image 1s ease-in-out;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 3rem;
|
|
||||||
max-width: 1920px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-controls {
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-selector {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
background: linear-gradient(to right, #fff, #a1a1aa);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
min-width: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-btn {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
border-radius: 12px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls-right {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggles {
|
|
||||||
display: flex;
|
|
||||||
background: #0f0f12;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 99px;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-item {
|
|
||||||
padding: 10px 24px;
|
|
||||||
border-radius: 99px;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-item.active {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 2px 10px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-board {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekdays-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekday-header {
|
|
||||||
padding: 16px;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
border-right: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekday-header:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.days-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
width: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
grid-auto-rows: minmax(180px, 1fr);
|
|
||||||
background: var(--color-bg-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell {
|
|
||||||
position: relative;
|
|
||||||
background: var(--bg-cell);
|
|
||||||
border-right: 1px solid var(--border-subtle);
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 12px;
|
|
||||||
transition: background 0.2s;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell:nth-child(7n) {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell.empty {
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell:hover {
|
|
||||||
background: #16161a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell.today {
|
|
||||||
background: rgba(139, 92, 246, 0.03);
|
|
||||||
box-shadow: inset 0 0 0 1px var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-number {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell.today .day-number {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.today-label {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--color-primary);
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell.today .today-label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-list {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
overflow-y: auto;
|
|
||||||
z-index: 2;
|
|
||||||
padding-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-list::-webkit-scrollbar {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-list::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-chip {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #d4d4d8;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-chip::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 3px;
|
|
||||||
background: var(--color-primary);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-chip:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
||||||
padding-left: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-chip:hover::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chip-title {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chip-ep {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell-backdrop {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.4s ease;
|
|
||||||
filter: grayscale(100%) brightness(0.25);
|
|
||||||
z-index: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell:hover .cell-backdrop {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
background: #18181b;
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-radius: 99px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
transform: translateY(100px);
|
|
||||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader.active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-top-color: var(--color-primary);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
body {
|
|
||||||
height: auto;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-wrapper {
|
|
||||||
padding: 1rem;
|
|
||||||
height: auto;
|
|
||||||
overflow: visible;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-controls {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-selector {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
min-width: auto;
|
|
||||||
text-align: center;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls-right {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-board {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekdays-grid {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.days-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
background: transparent;
|
|
||||||
height: auto;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell.empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell {
|
|
||||||
border: 1px solid var(--border-subtle);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
min-height: auto;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-cell:nth-child(7n) {
|
|
||||||
border-right: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-header {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-number {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.anime-chip {
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell-backdrop {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,864 +0,0 @@
|
|||||||
.page-wrapper {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-gradient {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
ellipse at top,
|
|
||||||
rgba(139, 92, 246, 0.15) 0%,
|
|
||||||
transparent 60%
|
|
||||||
),
|
|
||||||
radial-gradient(
|
|
||||||
ellipse at bottom right,
|
|
||||||
rgba(59, 130, 246, 0.1) 0%,
|
|
||||||
transparent 50%
|
|
||||||
);
|
|
||||||
z-index: 0;
|
|
||||||
animation: gradientShift 10s ease infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradientShift {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
max-width: 1400px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-section {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
animation: fadeInDown 0.6s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-subtitle {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, 260px);
|
|
||||||
gap: 2rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
animation: fadeInUp 0.8s ease;
|
|
||||||
justify-content: center;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card {
|
|
||||||
position: relative;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover {
|
|
||||||
transform: translateY(-12px) scale(1.02);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card.has-password::after {
|
|
||||||
content: "🔒";
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
padding: 0.4rem 0.7rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
z-index: 10;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(135deg, #1e1e22 0%, #2a2a2f 100%);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
rgba(139, 92, 246, 0.1) 0%,
|
|
||||||
rgba(59, 130, 246, 0.05) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-placeholder svg {
|
|
||||||
width: 50%;
|
|
||||||
height: 50%;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
background: linear-gradient(
|
|
||||||
to top,
|
|
||||||
rgba(0, 0, 0, 0.95) 0%,
|
|
||||||
rgba(0, 0, 0, 0.7) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
transform: translateY(100%);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover .user-info {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-status {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
transition:
|
|
||||||
opacity 0.3s,
|
|
||||||
background 0.2s;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover .user-config-btn {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn:hover {
|
|
||||||
background: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add-user {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto 2rem;
|
|
||||||
padding: 1.2rem 2rem;
|
|
||||||
background: rgba(139, 92, 246, 0.1);
|
|
||||||
border: 2px dashed var(--color-primary);
|
|
||||||
border-radius: 999px;
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add-user:hover {
|
|
||||||
background: rgba(139, 92, 246, 0.2);
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 10px 30px var(--color-primary-glow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
animation: fadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: 2rem;
|
|
||||||
max-width: 500px;
|
|
||||||
width: 90%;
|
|
||||||
max-height: 90vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
animation: scaleIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-large {
|
|
||||||
max-width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h2 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"],
|
|
||||||
.form-group input[type="password"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: white;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"]:focus,
|
|
||||||
.form-group input[type="password"]:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
box-shadow: 0 0 15px var(--color-primary-glow);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 1rem;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-toggle-btn:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.optional-label {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--color-text-muted);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-area {
|
|
||||||
border: 2px dashed rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-area:hover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
background: rgba(139, 92, 246, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-area.dragover {
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
background: rgba(139, 92, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
margin: 0 auto 1rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview-placeholder {
|
|
||||||
width: 60%;
|
|
||||||
height: 60%;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-text {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-upload-hint {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary {
|
|
||||||
flex: 1;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--color-primary);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: #7c3aed;
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-modal-content {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-info {
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 1rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
color: #3b82f6;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.password-info svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-top: 0.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manage-actions-modal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manage-actions-modal .btn-action {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 700;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.edit {
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
color: #3b82f6;
|
|
||||||
border-color: rgba(59, 130, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.edit:hover {
|
|
||||||
background: rgba(59, 130, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.password {
|
|
||||||
background: rgba(245, 158, 11, 0.1);
|
|
||||||
color: #f59e0b;
|
|
||||||
border-color: rgba(245, 158, 11, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.password:hover {
|
|
||||||
background: rgba(245, 158, 11, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.delete {
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
color: #ef4444;
|
|
||||||
border-color: rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.delete:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.anilist {
|
|
||||||
background: rgba(2, 169, 255, 0.1);
|
|
||||||
color: #02a9ff;
|
|
||||||
border-color: rgba(2, 169, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.anilist:hover {
|
|
||||||
background: rgba(2, 169, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.cancel {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-action.cancel:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-status {
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-connected {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-icon {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
background: linear-gradient(135deg, #02a9ff 0%, #0170d9 100%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 900;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-info h3 {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anilist-info p {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-disconnect {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
||||||
color: #ef4444;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-disconnect:hover {
|
|
||||||
background: rgba(239, 68, 68, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-connect {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
background: linear-gradient(135deg, #02a9ff 0%, #0170d9 100%);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-connect:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: 0 10px 30px rgba(2, 169, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
animation: fadeInUp 0.8s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-icon {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin: 0 auto 1.5rem;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-text {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userToastContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
z-index: 2000;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
font-weight: 600;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
transition: all 0.5s ease-out;
|
|
||||||
pointer-events: all;
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.show {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.success {
|
|
||||||
background: #22c55e;
|
|
||||||
border: 1px solid rgba(34, 197, 94, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.error {
|
|
||||||
background: #ef4444;
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-toast.info {
|
|
||||||
background: #3b82f6;
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scaleIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.9);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton {
|
|
||||||
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 1.5s infinite;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% {
|
|
||||||
background-position: 200% 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: -200% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.page-wrapper {
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
align-items: flex-start;
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-section {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 800;
|
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-config-btn svg {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add-user {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1.25rem;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 380px) {
|
|
||||||
.users-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card {
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: none) {
|
|
||||||
.user-info {
|
|
||||||
transform: translateY(0);
|
|
||||||
background: linear-gradient(
|
|
||||||
to top,
|
|
||||||
rgba(0, 0, 0, 0.95) 0%,
|
|
||||||
rgba(0, 0, 0, 0.6) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:hover {
|
|
||||||
transform: none;
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-card:active {
|
|
||||||
transform: scale(0.97);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.modal {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
border-radius: 20px 20px 0 0;
|
|
||||||
max-height: 85vh;
|
|
||||||
padding: 1.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"],
|
|
||||||
.form-group input[type="password"] {
|
|
||||||
padding: 1.2rem;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
.btn-secondary {
|
|
||||||
padding: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WaifuBoard - Gallery</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
|
||||||
|
|
||||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button active">Gallery</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper">
|
|
||||||
<input type="text" id="main-search-input" class="search-input" placeholder="Search in gallery..." autocomplete="off">
|
|
||||||
<div class="search-results">
|
|
||||||
<button id="favorites-toggle-nav" class="fav-toggle-btn" title="Mostrar favoritos" style="margin: 10px; width: auto; font-size: 0.85rem;">
|
|
||||||
<i class="far fa-heart"></i>
|
|
||||||
<span class="fav-text">Favorites Mode</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="gallery-main">
|
|
||||||
<div class="gallery-hero-placeholder"></div>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="gallery-controls">
|
|
||||||
<select id="provider-selector" class="provider-selector"></select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gallery-results grid" id="gallery-results">
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="load-more-container">
|
|
||||||
<button id="load-more-btn" class="btn-primary" style="display:none;">Load More</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/gallery/gallery.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title id="page-title">WaifuBoard - Gallery Item</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/gallery/image.css">
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button">Anime</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button active" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper" id="global-search-wrapper" style="visibility: hidden;width: 250px;">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
|
||||||
<input type="text" class="search-input" placeholder="Search site..." autocomplete="off">
|
|
||||||
<div class="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<a href="/gallery" class="back-btn">
|
|
||||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
|
|
||||||
Back to Gallery
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<main class="gallery-item-main">
|
|
||||||
<div class="gallery-hero-placeholder"></div>
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div id="item-main-content" class="item-content"></div>
|
|
||||||
|
|
||||||
<div id="similar-section" class="similar-section">
|
|
||||||
<p style="text-align:center;color:var(--color-text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/gallery/image.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,278 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<title>My Lists - WaifuBoard</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/list.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button active">My List</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper" style="visibility: hidden;">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="11" cy="11" r="8"/>
|
|
||||||
<path d="M21 21l-4.35-4.35"/>
|
|
||||||
</svg>
|
|
||||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
|
||||||
<div class="search-results" id="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="header-section">
|
|
||||||
<h1 class="page-title">My List</h1>
|
|
||||||
<div class="stats-row">
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-value" id="total-count">0</span>
|
|
||||||
<span class="stat-label">Total Entries</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-value" id="watching-count">0</span>
|
|
||||||
<span class="stat-label">Watching</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-value" id="completed-count">0</span>
|
|
||||||
<span class="stat-label">Completed</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-value" id="planned-count">0</span>
|
|
||||||
<span class="stat-label">Planning</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filters-section">
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Status</label>
|
|
||||||
<select id="status-filter" class="filter-select">
|
|
||||||
<option value="all">All Status</option>
|
|
||||||
<option value="CURRENT">Watching</option>
|
|
||||||
<option value="COMPLETED">Completed</option>
|
|
||||||
<option value="PLANNING">Planning</option>
|
|
||||||
<option value="PAUSED">Paused</option>
|
|
||||||
<option value="DROPPED">Dropped</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Source</label>
|
|
||||||
<select id="source-filter" class="filter-select">
|
|
||||||
<option value="all">All Sources</option>
|
|
||||||
<option value="anilist">AniList</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Type</label>
|
|
||||||
<select id="type-filter" class="filter-select">
|
|
||||||
<option value="all">All Types</option>
|
|
||||||
<option value="ANIME">Anime</option>
|
|
||||||
<option value="MANGA">Manga</option>
|
|
||||||
<option value="NOVEL">Novel</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>Sort By</label>
|
|
||||||
<select id="sort-filter" class="filter-select">
|
|
||||||
<option value="updated">Last Updated</option>
|
|
||||||
<option value="title">Title (A-Z)</option>
|
|
||||||
<option value="score">Score (High-Low)</option>
|
|
||||||
<option value="progress">Progress</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-group">
|
|
||||||
<label>View</label>
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button class="view-btn active" data-view="grid">
|
|
||||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
|
||||||
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
|
||||||
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
|
||||||
<rect x="14" y="14" width="7" height="7" rx="1"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button class="view-btn" data-view="list">
|
|
||||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<rect x="3" y="5" width="18" height="2" rx="1"/>
|
|
||||||
<rect x="3" y="11" width="18" height="2" rx="1"/>
|
|
||||||
<rect x="3" y="17" width="18" height="2" rx="1"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="loading-state" class="loading-state">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<p>Loading your list...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="empty-state" class="empty-state" style="display: none;">
|
|
||||||
<svg width="120" height="120" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
|
||||||
</svg>
|
|
||||||
<h2>Your list is empty</h2>
|
|
||||||
<p>Start adding anime to track your progress</p>
|
|
||||||
<button class="btn-primary" onclick="window.location.href='/anime'">Browse Content</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="list-container" class="list-grid"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-overlay" id="add-list-modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<button class="modal-close" onclick="window.ListModalManager.close()">✕</button>
|
|
||||||
<h2 class="modal-title" id="modal-title">Edit List Entry</h2>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="modal-fields-grid">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Status</label>
|
|
||||||
<select id="entry-status" class="form-input">
|
|
||||||
<option value="CURRENT">Current</option>
|
|
||||||
<option value="COMPLETED">Completed</option>
|
|
||||||
<option value="PLANNING">Planning</option>
|
|
||||||
<option value="PAUSED">Paused</option>
|
|
||||||
<option value="DROPPED">Dropped</option>
|
|
||||||
<option value="REPEATING">Rewatching/Rereading</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-progress" id="progress-label">Progress</label>
|
|
||||||
<input type="number" id="entry-progress" class="form-input" min="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Score (0-10)</label>
|
|
||||||
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<div class="date-group">
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-start-date">Start Date</label>
|
|
||||||
<input type="date" id="entry-start-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
<div class="date-input-pair">
|
|
||||||
<label for="entry-end-date">End Date</label>
|
|
||||||
<input type="date" id="entry-end-date" class="form-input">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="entry-repeat-count">Repeat Count</label>
|
|
||||||
<input type="number" id="entry-repeat-count" class="form-input" min="0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group notes-group">
|
|
||||||
<label for="entry-notes">Notes</label>
|
|
||||||
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
|
||||||
<label for="entry-is-private">Mark as Private</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button class="btn-secondary" onclick="window.ListModalManager.close()">Cancel</button>
|
|
||||||
|
|
||||||
<button class="btn-danger" id="modal-delete-btn" style="display:none;">Delete</button>
|
|
||||||
|
|
||||||
<button class="btn-primary" id="modal-save-btn">Save Changes</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/notification-utils.js"></script>
|
|
||||||
<script src="/src/scripts/utils/list-modal-manager.js"></script>
|
|
||||||
<script src="/src/scripts/list.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,164 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WaifuBoard - Marketplace</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/marketplace.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
|
||||||
<button class="nav-button active">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper" style="visibility: hidden;">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="11" cy="11" r="8"/>
|
|
||||||
<path d="M21 21l-4.35-4.35"/>
|
|
||||||
</svg>
|
|
||||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
|
||||||
<div class="search-results" id="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="hero-spacer"></div>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="section">
|
|
||||||
|
|
||||||
<header class="section-header">
|
|
||||||
<p class="marketplace-subtitle">Explore, install, and manage all available data source extensions for WaifuBoard.</p>
|
|
||||||
<div class="filter-controls">
|
|
||||||
<label for="extension-filter" class="filter-label">Filter by Type:</label>
|
|
||||||
<select id="extension-filter" class="filter-select">
|
|
||||||
<option value="All">All Extensions</option>
|
|
||||||
<option value="Image">Image Boards</option>
|
|
||||||
<option value="Anime">Anime Boards</option>
|
|
||||||
<option value="Book">Book Boards</option>
|
|
||||||
<option value="Local">Local Only</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="marketplace-grid" id="extensions-grid">
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="extension-card skeleton grid-item">
|
|
||||||
<div class="skeleton-icon" style="width: 50px; height: 50px;"></div>
|
|
||||||
<div class="card-content-wrapper">
|
|
||||||
<div class="skeleton-text title-skeleton" style="width: 80%; height: 1.1em;"></div>
|
|
||||||
<div class="skeleton-text text-skeleton" style="width: 50%; height: 0.7em; margin-top: 0.25rem;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-button" style="width: 100%; height: 32px; margin-top: 0.5rem;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div id="customModal" class="modal-overlay hidden">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h3 id="modalTitle"></h3>
|
|
||||||
<p id="modalMessage"></p>
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button id="modalConfirmButton" class="modal-button btn-uninstall hidden">Confirm</button>
|
|
||||||
<button id="modalCloseButton" class="modal-button btn-install">OK</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/marketplace.js"></script>
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>WaifuBoard - Schedule</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/schedule/schedule.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar"> <div class="title-left">
|
|
||||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ambient-bg" id="ambientBg"></div>
|
|
||||||
|
|
||||||
<nav class="navbar" id="navbar">
|
|
||||||
<a href="#" class="nav-brand">
|
|
||||||
<div class="brand-icon">
|
|
||||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
|
||||||
</div>
|
|
||||||
WaifuBoard
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
|
||||||
<button class="nav-button active">Schedule</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
|
||||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="search-wrapper" style="visibility: hidden;">
|
|
||||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<circle cx="11" cy="11" r="8"/>
|
|
||||||
<path d="M21 21l-4.35-4.35"/>
|
|
||||||
</svg>
|
|
||||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
|
||||||
<div class="search-results" id="search-results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-user" id="nav-user" style="display:none;">
|
|
||||||
<div class="user-avatar-btn">
|
|
||||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
|
||||||
<div class="online-indicator"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-dropdown" id="nav-dropdown">
|
|
||||||
<div class="dropdown-header">
|
|
||||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
|
||||||
<div class="dropdown-user-info">
|
|
||||||
<div class="dropdown-username" id="nav-username"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/my-list" class="dropdown-item">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
|
||||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
|
||||||
<polyline points="7 3 7 8 15 8"/>
|
|
||||||
</svg>
|
|
||||||
<span>My List</span>
|
|
||||||
</a>
|
|
||||||
<button class="dropdown-item logout-item" id="nav-logout">
|
|
||||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
||||||
<polyline points="16 17 21 12 16 7"/>
|
|
||||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
||||||
</svg>
|
|
||||||
<span>Logout</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="calendar-wrapper">
|
|
||||||
<div class="calendar-controls">
|
|
||||||
<div class="month-selector">
|
|
||||||
<button class="icon-btn" onclick="navigate(-1)">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
|
||||||
</button>
|
|
||||||
<div class="month-title" id="monthTitle">Loading...</div>
|
|
||||||
<button class="icon-btn" onclick="navigate(1)">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="controls-right">
|
|
||||||
|
|
||||||
<div class="view-toggles">
|
|
||||||
<button class="toggle-item active" id="btnViewMonth" onclick="setViewType('MONTH')">Month</button>
|
|
||||||
<button class="toggle-item" id="btnViewWeek" onclick="setViewType('WEEK')">Week</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="view-toggles">
|
|
||||||
<button class="toggle-item active" id="btnSub" onclick="setMode('SUB')">Sub</button>
|
|
||||||
<button class="toggle-item" id="btnDub" onclick="setMode('DUB')">Dub</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="calendar-board">
|
|
||||||
<div class="weekdays-grid">
|
|
||||||
<div class="weekday-header">Mon</div>
|
|
||||||
<div class="weekday-header">Tue</div>
|
|
||||||
<div class="weekday-header">Wed</div>
|
|
||||||
<div class="weekday-header">Thu</div>
|
|
||||||
<div class="weekday-header">Fri</div>
|
|
||||||
<div class="weekday-header">Sat</div>
|
|
||||||
<div class="weekday-header">Sun</div>
|
|
||||||
</div>
|
|
||||||
<div class="days-grid" id="daysGrid">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="loader" id="loader">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<span id="loadingText">Syncing Schedule...</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/schedule/schedule.js"></script>
|
|
||||||
<script src="/src/scripts/rpc-inapp.js"></script>
|
|
||||||
<script src="/src/scripts/auth-guard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,280 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>WaifuBoard - Users</title>
|
|
||||||
<link rel="stylesheet" href="/views/css/globals.css" />
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="/views/css/components/updateNotifier.css"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="/views/css/components/titlebar.css" />
|
|
||||||
<link rel="stylesheet" href="/views/css/users.css" />
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
href="/public/assets/waifuboards.ico"
|
|
||||||
type="image/x-icon"
|
|
||||||
/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<script src="/src/scripts/titlebar.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="titlebar">
|
|
||||||
<div class="title-left">
|
|
||||||
<img
|
|
||||||
class="app-icon"
|
|
||||||
src="/public/assets/waifuboards.ico"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<span class="app-title">WaifuBoard</span>
|
|
||||||
</div>
|
|
||||||
<div class="title-right">
|
|
||||||
<button class="min">—</button>
|
|
||||||
<button class="max">🗖</button>
|
|
||||||
<button class="close">✕</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-wrapper">
|
|
||||||
<div class="background-gradient"></div>
|
|
||||||
|
|
||||||
<div class="content-container">
|
|
||||||
<div class="header-section">
|
|
||||||
<h1 class="page-title">Who's exploring?</h1>
|
|
||||||
<p class="page-subtitle">Select your profile to continue</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="users-grid" id="usersGrid"></div>
|
|
||||||
|
|
||||||
<button class="btn-add-user" id="btnAddUser">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
>
|
|
||||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
||||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Add User
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal" id="modalCreateUser">
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>Create New User</h2>
|
|
||||||
<button class="modal-close" id="closeCreateModal">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
>
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form id="createUserForm">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username">Username</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="username"
|
|
||||||
name="username"
|
|
||||||
required
|
|
||||||
maxlength="20"
|
|
||||||
placeholder="Enter your name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Profile Picture</label>
|
|
||||||
<div class="avatar-upload-area" id="avatarUploadArea">
|
|
||||||
<div class="avatar-preview" id="avatarPreview">
|
|
||||||
<svg
|
|
||||||
class="avatar-preview-placeholder"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
|
|
||||||
></path>
|
|
||||||
<circle cx="12" cy="7" r="4"></circle>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p class="avatar-upload-text">
|
|
||||||
Click to upload or drag and drop
|
|
||||||
</p>
|
|
||||||
<p class="avatar-upload-hint">
|
|
||||||
PNG, JPG, GIF... up to 50 MB
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<input type="file" id="avatarInput" accept="image/*" />
|
|
||||||
</div>
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-secondary"
|
|
||||||
id="cancelCreate"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" class="btn-primary">
|
|
||||||
Create User
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal" id="modalUserActions">
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content" style="max-width: 400px">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2 id="actionsModalTitle">Manage Profile</h2>
|
|
||||||
<button class="modal-close" id="closeActionsModal">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
>
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="actionsModalContent"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal" id="modalEditUser">
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>Edit Profile</h2>
|
|
||||||
<button class="modal-close" id="closeEditModal">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
>
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<form id="editUserForm">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="editUsername">Username</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="editUsername"
|
|
||||||
name="username"
|
|
||||||
required
|
|
||||||
maxlength="20"
|
|
||||||
placeholder="Enter your new name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Profile Picture</label>
|
|
||||||
<div
|
|
||||||
class="avatar-upload-area"
|
|
||||||
id="editAvatarUploadArea"
|
|
||||||
>
|
|
||||||
<div class="avatar-preview" id="editAvatarPreview">
|
|
||||||
<svg
|
|
||||||
class="avatar-preview-placeholder"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
|
|
||||||
></path>
|
|
||||||
<circle cx="12" cy="7" r="4"></circle>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p class="avatar-upload-text">
|
|
||||||
Click to upload or drag and drop
|
|
||||||
</p>
|
|
||||||
<p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="editAvatarInput"
|
|
||||||
accept="image/*"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-secondary"
|
|
||||||
id="cancelEdit"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" class="btn-primary">
|
|
||||||
Save Changes
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal" id="modalAniList">
|
|
||||||
<div class="modal-overlay"></div>
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>AniList Integration</h2>
|
|
||||||
<button class="modal-close" id="closeAniListModal">
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
>
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="aniListContent"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="userToastContainer"></div>
|
|
||||||
<div id="updateToast" class="hidden">
|
|
||||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
|
||||||
<a
|
|
||||||
id="downloadButton"
|
|
||||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
Click To Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
localStorage.removeItem("token");
|
|
||||||
</script>
|
|
||||||
<script src="/src/scripts/updateNotifier.js"></script>
|
|
||||||
<script src="/src/scripts/users.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
42
desktop/package-lock.json → package-lock.json
generated
42
desktop/package-lock.json → package-lock.json
generated
@@ -11,11 +11,10 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fastify/static": "^8.3.0",
|
"@fastify/static": "^8.3.0",
|
||||||
"@ryuziii/discord-rpc": "^1.0.1-rc.1",
|
"@ryuziii/discord-rpc": "^1.0.1-rc.1",
|
||||||
"bcryptjs": "^3.0.3",
|
"bcrypt": "^6.0.0",
|
||||||
"bindings": "^1.5.0",
|
"bindings": "^1.5.0",
|
||||||
"cheerio": "^1.1.2",
|
"cheerio": "^1.1.2",
|
||||||
"dotenv": "^17.2.3",
|
"dotenv": "^17.2.3",
|
||||||
"electron-log": "^5.4.3",
|
|
||||||
"fastify": "^5.6.2",
|
"fastify": "^5.6.2",
|
||||||
"jsonwebtoken": "^9.0.3",
|
"jsonwebtoken": "^9.0.3",
|
||||||
"node-addon-api": "^8.5.0",
|
"node-addon-api": "^8.5.0",
|
||||||
@@ -1973,13 +1972,18 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/bcryptjs": {
|
"node_modules/bcrypt": {
|
||||||
"version": "3.0.3",
|
"version": "6.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-6.0.0.tgz",
|
||||||
"integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
|
"integrity": "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==",
|
||||||
"license": "BSD-3-Clause",
|
"hasInstallScript": true,
|
||||||
"bin": {
|
"license": "MIT",
|
||||||
"bcrypt": "bin/bcrypt"
|
"dependencies": {
|
||||||
|
"node-addon-api": "^8.3.0",
|
||||||
|
"node-gyp-build": "^4.8.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/bindings": {
|
"node_modules/bindings": {
|
||||||
@@ -3398,15 +3402,6 @@
|
|||||||
"node": ">= 10.0.0"
|
"node": ">= 10.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/electron-log": {
|
|
||||||
"version": "5.4.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/electron-log/-/electron-log-5.4.3.tgz",
|
|
||||||
"integrity": "sha512-sOUsM3LjZdugatazSQ/XTyNcw8dfvH1SYhXWiJyfYodAAKOZdHs0txPiLDXFzOZbhXgAgshQkshH2ccq0feyLQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 14"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/electron-publish": {
|
"node_modules/electron-publish": {
|
||||||
"version": "26.0.11",
|
"version": "26.0.11",
|
||||||
"resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-26.0.11.tgz",
|
"resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-26.0.11.tgz",
|
||||||
@@ -5370,6 +5365,17 @@
|
|||||||
"node": "^20.17.0 || >=22.9.0"
|
"node": "^20.17.0 || >=22.9.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/node-gyp-build": {
|
||||||
|
"version": "4.8.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
|
||||||
|
"integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"node-gyp-build": "bin.js",
|
||||||
|
"node-gyp-build-optional": "optional.js",
|
||||||
|
"node-gyp-build-test": "build-test.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/node-gyp/node_modules/chownr": {
|
"node_modules/node-gyp/node_modules/chownr": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
|
||||||
@@ -4,8 +4,10 @@
|
|||||||
"description": "",
|
"description": "",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "tsc && electron .",
|
"build": "tsc",
|
||||||
"dist": "tsc && electron-builder"
|
"start": "tsc && node server.js",
|
||||||
|
"electron": "tsc && electron .",
|
||||||
|
"dist": "npm run build && electron-builder"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
@@ -14,11 +16,10 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fastify/static": "^8.3.0",
|
"@fastify/static": "^8.3.0",
|
||||||
"@ryuziii/discord-rpc": "^1.0.1-rc.1",
|
"@ryuziii/discord-rpc": "^1.0.1-rc.1",
|
||||||
"bcryptjs": "^3.0.3",
|
"bcrypt": "^6.0.0",
|
||||||
"bindings": "^1.5.0",
|
"bindings": "^1.5.0",
|
||||||
"cheerio": "^1.1.2",
|
"cheerio": "^1.1.2",
|
||||||
"dotenv": "^17.2.3",
|
"dotenv": "^17.2.3",
|
||||||
"electron-log": "^5.4.3",
|
|
||||||
"fastify": "^5.6.2",
|
"fastify": "^5.6.2",
|
||||||
"jsonwebtoken": "^9.0.3",
|
"jsonwebtoken": "^9.0.3",
|
||||||
"node-addon-api": "^8.5.0",
|
"node-addon-api": "^8.5.0",
|
||||||
@@ -49,11 +50,7 @@
|
|||||||
"public/assets/*"
|
"public/assets/*"
|
||||||
],
|
],
|
||||||
"extraResources": [
|
"extraResources": [
|
||||||
{
|
"./.env"
|
||||||
"from": "C:\\Users\\synta\\AppData\\Local\\ms-playwright\\chromium_headless_shell-1200",
|
|
||||||
"to": "playwright/chromium"
|
|
||||||
},
|
|
||||||
".env"
|
|
||||||
],
|
],
|
||||||
"win": {
|
"win": {
|
||||||
"target": "portable",
|
"target": "portable",
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user