ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

finished gallery section

Browse Source
This commit is contained in:
lenafx
2025-12-01 16:54:11 +01:00
parent cace0119c6
commit 7a7b8dc2f1
13 changed files with 1402 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
server.js
View File

@@ -73,39 +73,10 @@ function startCppScraper() {
});
}
function startCppScraper() {
const exePath = path.join(__dirname, 'src', 'metadata', 'anilist.exe');
const dllPath = path.join(__dirname, 'src', 'metadata', 'binaries');
if (!fs.existsSync(exePath)) {
console.error(`❌ C++ Error: Could not find executable at: ${exePath}`);
console.error(" Did you compile it? (g++ src/metadata/anilist.cpp -o src/metadata/anilist.exe ...)");
return;
}
const env = { ...process.env };
env.PATH = `${dllPath};${env.PATH}`;
console.log("⚡ Starting WaifuBoard Scraper Engine (C++)...");
const scraper = spawn(exePath, [], {
stdio: 'inherit',
cwd: __dirname,
env: env
});
scraper.on('error', (err) => {
console.error('❌ Failed to spawn C++ process:', err);
});
scraper.on('close', (code) => {
console.log(`✅ Scraper process finished with code ${code}`);
});
}
const start = async () => {
try {
initDatabase();
initDatabase("anilist");
initDatabase("favorites");
await loadExtensions();
await fastify.listen({ port: 3000, host: '0.0.0.0' });

88
src/gallery/gallery.controller.ts
View File

@@ -1,5 +1,6 @@
import {FastifyReply} from 'fastify';
import {FastifyReply, FastifyRequest} from 'fastify';
import * as galleryService from './gallery.service';
import {AddFavoriteBody, RemoveFavoriteParams} from '../types'
export async function search(req: any, reply: FastifyReply) {
try {
@@ -57,3 +58,88 @@ export async function getInfo(req: any, reply: FastifyReply) {
return reply.code(404).send({ error: "Gallery item not found" });
}
}
export async function getFavorites(req: FastifyRequest, reply: FastifyReply) {
try {
const favorites = await galleryService.getFavorites();
return { favorites };
} catch (err) {
const error = err as Error;
console.error("Get Favorites Error:", error.message);
return reply.code(500).send({ error: "Failed to retrieve favorites" });
}
}
export async function getFavoriteById(req: FastifyRequest, reply: FastifyReply) {
try {
const { id } = req.params as { id: string };
const favorite = await galleryService.getFavoriteById(id);
if (!favorite) {
return reply.code(404).send({ error: "Favorite not found" });
}
return { favorite };
} catch (err) {
const error = err as Error;
console.error("Get Favorite By ID Error:", error.message);
return reply.code(500).send({ error: "Failed to retrieve favorite" });
}
}
export async function addFavorite(req: FastifyRequest<{ Body: AddFavoriteBody }>, reply: FastifyReply) {
try {
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: id, title, image_url, thumbnail_url"
});
}
const result = await galleryService.addFavorite({
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: FastifyRequest<{ Params: RemoveFavoriteParams }>, reply: FastifyReply) {
try {
const { id } = req.params;
if (!id) {
return reply.code(400).send({ error: "Missing favorite ID" });
}
const result = await galleryService.removeFavorite(id);
if (result.success) {
return { success: true, message: "Favorite removed successfully" };
} else {
return reply.code(404).send({ error: "Favorite not found" });
}
} catch (err) {
const error = err as Error;
console.error("Remove Favorite Error:", error.message);
return reply.code(500).send({ error: "Failed to remove favorite" });
}
}

4
src/gallery/gallery.routes.ts
View File

@@ -5,6 +5,10 @@ async function galleryRoutes(fastify: FastifyInstance) {
fastify.get('/gallery/search', controller.search);
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;

95
src/gallery/gallery.service.ts
View File

@@ -1,5 +1,6 @@
import { getAllExtensions, getExtension } from '../shared/extensions';
import { GallerySearchResult, GalleryInfo } from '../types';
import { GallerySearchResult, GalleryInfo, Favorite, FavoriteResult } from '../types';
import { getDatabase } from '../shared/database';
export async function searchGallery(query: string, page: number = 1, perPage: number = 48): Promise<GallerySearchResult> {
const extensions = getAllExtensions();
@@ -7,7 +8,6 @@ export async function searchGallery(query: string, page: number = 1, perPage: nu
for (const [name, ext] of extensions) {
if (ext.type === 'image-board' && ext.search) {
const result = await searchInExtension(name, query, page, perPage);
console.log(result);
if (result.results.length > 0) {
return result;
}
@@ -56,7 +56,7 @@ export async function getGalleryInfo(id: string, providerName?: string): Promise
...info,
provider: name
};
} catch (e) {
} catch {
continue;
}
}
@@ -66,7 +66,6 @@ export async function getGalleryInfo(id: string, providerName?: string): Promise
}
export async function searchInExtension(providerName: string, query: string, page: number = 1, perPage: number = 48): Promise<GallerySearchResult> {
const ext = getExtension(providerName);
if (!ext || ext.type !== 'image-board' || !ext.search) {
@@ -102,3 +101,91 @@ export async function searchInExtension(providerName: string, query: string, pag
};
}
}
export async function getFavorites(): Promise<Favorite[]> {
const db = getDatabase("favorites");
return new Promise((resolve) => {
db.all('SELECT * FROM favorites', [], (err: Error | null, rows: Favorite[]) => {
if (err) {
console.error('Error getting favorites:', err.message);
resolve([]);
} else {
resolve(rows);
}
});
});
}
export async function getFavoriteById(id: string): Promise<Favorite | null> {
const db = getDatabase("favorites");
return new Promise((resolve) => {
db.get(
'SELECT * FROM favorites WHERE id = ?',
[id],
(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): Promise<FavoriteResult> {
const db = getDatabase("favorites");
return new Promise((resolve) => {
const stmt = `
INSERT INTO favorites (id, title, image_url, thumbnail_url, tags, headers, provider)
VALUES (?, ?, ?, ?, ?, ?, ?)
`;
db.run(
stmt,
[
fav.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): Promise<FavoriteResult> {
const db = getDatabase("favorites");
return new Promise((resolve) => {
const stmt = 'DELETE FROM favorites WHERE id = ?';
db.run(stmt, [id], function (err: Error | null) {
if (err) {
console.error('Error removing favorite:', err.message);
resolve({ success: false, error: err.message });
} else {
// @ts-ignore - this.changes existe en el contexto de db.run
resolve({ success: this.changes > 0 });
}
});
});
}

547
src/scripts/gallery/gallery.js
View File

@@ -1,251 +1,378 @@
document.addEventListener('DOMContentLoaded', () => {
const providerSelector = document.getElementById('provider-selector');
const searchInput = document.getElementById('gallery-search-input');
const resultsContainer = document.getElementById('gallery-results');
const loadMoreBtn = document.getElementById('load-more-btn');
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 currentPage = 1;
let currentProvider = '';
let currentQuery = '';
const perPage = 48;
let isLoading = false;
let favorites = new Set();
let favoritesMode = false;
let msnry = null;
let msnry = null;
// --- MASONRY INITIALIZATION ---
function initializeMasonry() {
if (typeof Masonry === 'undefined') {
setTimeout(initializeMasonry, 100);
return;
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 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');
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' });
favorites.delete(id);
} else {
const tagsArray = getTagsArray(item);
const serializedHeaders = item.headers ? JSON.stringify(item.headers) : "";
await fetch('/api/gallery/favorites', {
method: 'POST',
headers: { '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);
}
if (msnry) {
msnry.destroy();
}
msnry = new Masonry(resultsContainer, {
itemSelector: '.gallery-card',
columnWidth: '.gallery-card',
percentPosition: true,
gutter: 0,
transitionDuration: '0.4s'
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) {
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';
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);
}
initializeMasonry();
async function searchGallery(isLoadMore = false) {
if (isLoading) return;
// --- UTILS ---
const query = searchInput.value.trim();
const provider = providerSelector.value;
const page = isLoadMore ? currentPage + 1 : 1;
/**
* Crea un elemento de tarjeta de resultado de galería.
*/
function createGalleryCard(item) {
const card = document.createElement('a');
card.className = 'gallery-card grid-item';
favoritesMode = (provider === 'favorites');
const itemProvider = item.provider || currentProvider;
currentQuery = query;
currentProvider = provider;
// **********************************************
// CAMBIO: Nueva URL para la página de visualización
card.href = `/gallery/${itemProvider}/${item.id}`;
// **********************************************
const img = document.createElement('img');
img.className = 'gallery-card-img';
img.src = item.image;
img.alt = item.tags ? item.tags.join(', ') : 'Gallery Image';
img.loading = 'lazy';
img.onload = () => {
if (msnry) {
msnry.layout();
card.classList.add('is-loaded');
}
};
img.onerror = () => {
if (msnry) {
msnry.layout();
card.classList.add('is-loaded');
}
};
card.appendChild(img);
return card;
if (!isLoadMore) {
currentPage = 1;
showSkeletons(perPage);
} else {
showSkeletons(8, true);
}
/**
* Muestra las tarjetas de esqueleto. (Sin cambios)
*/
function showSkeletons(count, append = false) {
const skeletonMarkup = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;
isLoading = true;
if (!append) {
resultsContainer.innerHTML = '';
initializeMasonry();
}
try {
let data;
let newElements = [];
for (let i = 0; i < count; i++) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = skeletonMarkup.trim();
const skeletonEl = tempDiv.firstChild;
resultsContainer.appendChild(skeletonEl);
newElements.push(skeletonEl);
}
if (favoritesMode) {
const res = await fetch('/api/gallery/favorites');
data = await res.json();
if (msnry) {
msnry.appended(newElements);
msnry.layout();
}
loadMoreBtn.style.display = 'none';
}
// --- FETCH DATA --- (Sin cambios en loadExtensions y searchGallery)
async function loadExtensions() {
try {
const response = await fetch('/api/extensions/gallery');
const data = await response.json();
providerSelector.innerHTML = '';
if (data.extensions && data.extensions.length > 0) {
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Global Search';
providerSelector.appendChild(defaultOption);
data.extensions.forEach(ext => {
const option = document.createElement('option');
option.value = ext;
option.textContent = ext;
providerSelector.appendChild(option);
});
currentProvider = '';
} else {
providerSelector.innerHTML = '<option value="">No extensions found</option>';
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))
);
}
} catch (error) {
console.error('Error loading gallery extensions:', error);
providerSelector.innerHTML = '<option value="">Error loading extensions</option>';
}
}
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;
async function searchGallery(isLoadMore = false) {
const query = searchInput.value.trim();
const provider = providerSelector.value;
const page = isLoadMore ? currentPage + 1 : 1;
if (!isLoadMore && currentQuery === query && currentProvider === provider && currentPage === 1) {
return;
}
currentQuery = query;
currentProvider = provider;
if (!isLoadMore) {
currentPage = 1;
showSkeletons(perPage, 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 {
showSkeletons(8, true);
const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
data = await res.json();
}
try {
let url;
if (provider && provider !== '') {
url = `/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
} else {
url = `/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
}
const results = data.results || [];
const response = await fetch(url);
const data = await response.json();
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());
let newRealElements = [];
if (data.results && data.results.length > 0) {
data.results.forEach(item => {
newRealElements.push(createGalleryCard(item));
});
}
const newCards = results.map(item => createGalleryCard(item));
newCards.forEach(card => resultsContainer.appendChild(card));
if (msnry) msnry.appended(newCards);
const allSkeletons = Array.from(resultsContainer.querySelectorAll('.gallery-card.skeleton'));
let skeletonsToRemove = isLoadMore ? allSkeletons.slice(-8) : allSkeletons;
if (msnry) {
msnry.remove(skeletonsToRemove);
skeletonsToRemove.forEach(s => s.remove());
}
if (newRealElements.length > 0) {
newRealElements.forEach(el => resultsContainer.appendChild(el));
if (msnry) {
msnry.appended(newRealElements);
}
currentPage = isLoadMore ? currentPage + 1 : 1;
} else if (!isLoadMore) {
resultsContainer.innerHTML = '<p style="text-align:center; color: var(--text-secondary); padding: 2rem;">No results found for this search.</p>';
}
if (msnry) {
msnry.layout();
}
if (data.hasNextPage) {
loadMoreBtn.style.display = 'block';
} else {
loadMoreBtn.style.display = 'none';
}
} catch (error) {
console.error('Error during gallery search:', error);
if (!isLoadMore) {
resultsContainer.innerHTML = '<p style="text-align:center; color: red; padding: 2rem;">An error occurred while fetching results.</p>';
}
loadMoreBtn.style.display = 'none';
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();
// --- EVENT LISTENERS (Sin cambios) ---
providerSelector.innerHTML = '';
providerSelector.addEventListener('change', () => {
const global = document.createElement('option');
global.value = '';
global.textContent = 'Global Search';
providerSelector.appendChild(global);
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);
});
let searchTimeout;
searchInput.addEventListener('input', () => {
}, 500);
});
searchInput.addEventListener('keydown', e => {
if (e.key === 'Enter') {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
searchGallery(false);
}, 500);
});
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
clearTimeout(searchTimeout);
searchGallery(false);
}
});
searchGallery(false);
}
});
loadMoreBtn.addEventListener('click', () => {
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting && !isLoading && !favoritesMode) {
observer.unobserve(sentinel);
searchGallery(true);
});
}
}, { rootMargin: '1000px' });
loadFavorites().then(() => {
loadExtensions().then(() => {
searchGallery(false);
});
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
});
window.addEventListener('scroll', () => {
document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
});

377
src/scripts/gallery/image.js
View File

@@ -1,139 +1,302 @@
document.addEventListener('DOMContentLoaded', () => {
const itemContentContainer = document.getElementById('item-content');
const itemMainContentContainer = document.getElementById('item-main-content');
let currentItem = null;
// Función para parsear la URL y obtener :provider y :id
function getUrlParams() {
// La URL esperada es /gallery/providerName/itemId
const pathSegments = window.location.pathname.split('/').filter(segment => segment);
// Verifica si la estructura es /gallery/provider/id
if (pathSegments.length >= 3 && pathSegments[0] === 'gallery') {
return {
provider: pathSegments[1],
id: pathSegments.slice(2).join('/') // El ID puede contener barras, así que unimos el resto
};
}
return null;
function getProxiedItemUrl(url, headers = null) {
if (!url || !headers) {
return url;
}
async function fetchGalleryItem(provider, id) {
try {
// Llama al endpoint de la API con los parámetros obtenidos
const url = `/api/gallery/fetch/${id}?provider=${provider}`;
const response = await fetch(url);
let proxyUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || `Failed to fetch item from ${provider}.`);
}
const data = await response.json();
// Verifica los campos clave del nuevo formato de respuesta
if (!data.fullImage) {
throw new Error("Invalid item structure: Missing 'fullImage' URL.");
}
// Normalizar los datos para la plantilla (usando 'publishedBy' como título si 'title' no existe)
data.title = data.publishedBy || data.id;
renderItem(data);
} catch (error) {
console.error("Fetch Gallery Item Error:", error);
renderError(`The requested item could not be found or an error occurred. (${error.message})`);
const lowerCaseHeaders = {};
for (const key in headers) {
if (Object.prototype.hasOwnProperty.call(headers, key)) {
lowerCaseHeaders[key.toLowerCase()] = headers[key];
}
}
/**
* Renderiza el contenido del ítem de la galería.
* @param {Object} item - Objeto de respuesta de la API.
*/
function renderItem(item) {
const title = item.title;
document.getElementById('page-title').textContent = `WaifuBoard - ${title}`;
const referer = lowerCaseHeaders.referer;
if (referer) {
proxyUrl += `&referer=${encodeURIComponent(referer)}`;
}
// Limpiar el esqueleto
itemContentContainer.innerHTML = '';
const origin = lowerCaseHeaders.origin;
if (origin) {
proxyUrl += `&origin=${encodeURIComponent(origin)}`;
}
const imageUrl = item.fullImage || item.resizedImageUrl; // Usar fullImage para la más alta resolución
const userAgent = lowerCaseHeaders['user-agent'];
if (userAgent) {
proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
}
const itemHTML = `
<div class="image-col">
<img id="main-image" class="item-image" src="${imageUrl}" alt="${title}">
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' });
} 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: { '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(--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(--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(--accent);">${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(--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">Source: ${item.provider} / Published By: ${item.publishedBy || 'N/A'}</span>
<h1>${title}</h1>
<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" id="tag-list">
</div>
<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(--text-secondary);">No tags</span>'
}
</div>
</div>
<a href="${imageUrl}" download="${title.replace(/ /g, '_')}_${item.id.replace(/-/g, '_')}.jpg" class="download-btn">
<i class="fa-solid fa-download"></i> Download Full Image
</a>
</div>
`;
</div>
`;
itemContentContainer.innerHTML = itemHTML;
document.getElementById('fav-btn').addEventListener('click', toggleFavorite);
document.getElementById('copy-link-btn').addEventListener('click', copyLink);
// Renderizar Tags
const tagListContainer = document.getElementById('tag-list');
if (item.tags && item.tags.length > 0) {
item.tags.forEach(tag => {
const tagEl = document.createElement('a');
tagEl.className = 'tag-item';
tagEl.textContent = tag;
// Enlazar a una búsqueda en la galería por el tag y el provider
tagEl.href = `/art?provider=${item.provider}&q=${encodeURIComponent(tag)}`;
tagListContainer.appendChild(tagEl);
});
} else {
tagListContainer.innerHTML = '<p class="tag-item" style="background:none; color:var(--text-secondary);">No tags available.</p>';
}
loadSimilarImages(item);
}
// Habilitar fade-in de la imagen una vez que se carga
const mainImage = document.getElementById('main-image');
mainImage.onload = () => {
mainImage.classList.add('loaded');
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(--text-primary);">Image Not Available</h2>
<p style="color:var(--text-secondary);max-width:600px;margin:0 auto 2rem;">${msg}</p>
<a href="/gallery" style="padding:1rem 2.5rem;background:var(--accent);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)}`);
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
};
// Para imágenes que ya están en caché
if (mainImage.complete) {
mainImage.classList.add('loaded');
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!`;
}
}
function renderError(message) {
itemContentContainer.innerHTML = `
<div style="text-align:center; padding: 5rem 0; width: 100%;">
<i class="fa-solid fa-circle-exclamation" style="font-size: 3rem; color: #ff5c5c;"></i>
<h2 style="color: #ff5c5c; margin-top: 1rem;">Item Not Found</h2>
<p style="color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem;">${message}</p>
<a href="/art" class="btn-primary" style="margin-top: 2rem;">Go back to Gallery</a>
</div>
`;
} catch (err) {
renderError('This image is no longer in your favorites.');
}
}
// --- Inicialización ---
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.fullImage) throw new Error();
const item = {
id,
title: data.title || data.publishedBy || 'Beautiful Art',
fullImage: data.fullImage,
originalImage: data.fullImage,
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)}`);
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 && params.provider && params.id) {
fetchGalleryItem(params.provider, params.id);
if (!params) {
renderError('Invalid URL');
} else if (params.fromFavorites) {
loadFromFavorites(params.id);
} else {
renderError("Invalid URL format. Expected: /gallery/&lt;provider&gt;/&lt;id&gt;");
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';
}
// Estilo de Navbar (reutilizado)
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
window.addEventListener('scroll', () => {
document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
});

150
src/shared/database.js
View File

@@ -1,48 +1,166 @@
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const os = require("os");
const path = require("path");
const fs = require("fs");
const DB_PATH = path.join(__dirname, '..', 'metadata', 'anilist_anime.db');
let db = null;
const databases = new Map();
function initDatabase() {
db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
const DEFAULT_PATHS = {
anilist: path.join(__dirname, '..', 'metadata', 'anilist_anime.db'),
favorites: path.join(os.homedir(), "WaifuBoards", "favorites.db")
};
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 PRIMARY KEY,
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 ""
);
`;
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 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 (queries.length === 0) {
return resolve(false);
}
db.exec(queries.join(";"), (err) => {
if (err) reject(err);
else resolve(true);
});
});
});
}
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));
}
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:", err.message);
console.error(`Database Error (${name}):`, err.message);
} else {
console.log("Connected to local AniList database.");
console.log(`Connected to ${name} database at ${finalPath}`);
}
});
databases.set(name, db);
return db;
}
function getDatabase() {
if (!db) {
throw new Error("Database not initialized. Call initDatabase() first.");
function getDatabase(name = 'anilist') {
if (!databases.has(name)) {
return initDatabase(name, null, name === 'anilist');
}
return db;
return databases.get(name);
}
function queryOne(sql, params = []) {
function queryOne(sql, params = [], dbName = 'anilist') {
return new Promise((resolve, reject) => {
getDatabase().get(sql, params, (err, row) => {
getDatabase(dbName).get(sql, params, (err, row) => {
if (err) reject(err);
else resolve(row);
});
});
}
function queryAll(sql, params = []) {
function queryAll(sql, params = [], dbName = 'anilist') {
return new Promise((resolve, reject) => {
getDatabase().all(sql, params, (err, rows) => {
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
queryAll,
run,
closeDatabase
};

30
src/types.ts
View File

@@ -256,3 +256,33 @@ export interface GalleryInfoRequest extends FastifyRequest {
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;
}

5
src/views/views.routes.ts
View File

@@ -29,6 +29,11 @@ async function viewsRoutes(fastify: FastifyInstance) {
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.html'));
reply.type('text/html').send(stream);

254
views/css/gallery/gallery.css
View File

@@ -1,15 +1,8 @@
/* NOTA: Este archivo asume que home.css define variables como:
--bg-base, --bg-surface, --accent, --text-primary, --nav-height, etc.,
y estilos base para .navbar y .section.
*/
/* Placeholder para la altura del navbar fijo */
.gallery-hero-placeholder {
height: var(--nav-height);
width: 100%;
}
/* --- Controles de Búsqueda y Proveedor --- */
.gallery-controls {
display: flex;
gap: 1.5rem;
@@ -17,7 +10,6 @@
margin-bottom: 2rem;
padding-top: 1rem;
}
/* ... (Estilos de búsqueda y selector sin cambios relevantes) ... */
.provider-selector {
appearance: none;
@@ -50,46 +42,35 @@
font-size: 0.8rem;
}
/* --- Grid de la Galería (Masonry Setup) --- */
.gallery-results {
position: relative;
padding-bottom: 3rem;
margin: 0 -0.75rem;
}
/* El elemento individual (grid-item) - Definición del ancho de columna */
.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;
/* --- INICIO DE CORRECCIÓN (TRANSICIONES) --- */
/* Define la transición para los cambios de Masonry (top/left) y la aparición (opacity/transform) */
/* Estado inicial: Oculto y ligeramente desplazado */
opacity: 0;
transform: translateY(20px) scale(0.98);
/* --- FIN DE CORRECCIÓN --- */
border: 1px solid rgba(255,255,255,0.05);
}
/* Estado final: Visible y en su posición correcta */
.gallery-card.is-loaded {
opacity: 1;
transform: translateY(0) scale(1);
}
.gallery-card:hover {
transform: translateY(-5px);
/* Aseguramos que el hover se aplique solo si ya está cargada/visible */
transform: translateY(-8px);
z-index: 10;
}
.gallery-card-img {
@@ -97,43 +78,234 @@
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;
}
.gallery-card:hover .gallery-card-img { transform: scale(1.05); }
/* Estilos de respuesta (Responsiveness) */
@media (max-width: 1200px) {
.gallery-card {
width: calc(33.333% - 1.5rem);
}
.gallery-card { width: calc(33.333% - 1.5rem); }
}
/* ... (media queries restantes sin cambios) ... */
@media (max-width: 900px) {
.gallery-card {
width: calc(50% - 1.5rem);
}
.gallery-card { width: calc(50% - 1.5rem); }
}
@media (max-width: 600px) {
.gallery-card {
width: calc(100% - 1.5rem);
}
.gallery-card { width: calc(100% - 1.5rem); }
.fav-btn { width: 42px; height: 42px; font-size: 1.4rem; }
}
/* Estilos para el Skeleton Card */
.gallery-card.skeleton {
min-height: 250px;
aspect-ratio: 1/1.4;
display: flex;
align-items: center;
justify-content: center;
/* Los esqueletos también deben tener transición para cuando son eliminados/reemplazados */
}
/* --- Botón Cargar Más --- */
.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(--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(--accent);
}
.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(--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(--accent); }
.provider-selector:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,107,0.2); }
.provider-selector option {
background: #111;
color: white;
padding: 12px;
}
.search-gallery-wrapper {
flex: 1;
min-width: 200px;
max-width: none;
}
.search-input {
width: 100%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: var(--text-primary);
padding: 0.75rem 1.3rem;
border-radius: 99px;
font-size: 1rem;
transition: all 0.25s;
}
.search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255,107,107,0.2);
}
.fav-toggle-btn {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.08);
color: var(--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; }
}

293
views/css/gallery/image.css
View File

@@ -1,145 +1,270 @@
/* Placeholder para la altura del navbar fijo */
.gallery-hero-placeholder {
height: var(--nav-height);
width: 100%;
:root {
--accent: #8b5cf6;
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--radius-lg: 24px;
--radius-full: 9999px;
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
--glass-bg: rgba(20, 20, 23, 0.7);
--nav-height: 80px;
}
.item-content {
.gallery-hero-placeholder { height: var(--nav-height); width: 100%; }
.item-content-flex-wrapper {
display: flex;
gap: 3rem;
padding-top: 2rem;
padding: 2rem 0 4rem;
min-height: 80vh;
max-width: 1400px;
margin: 0 auto;
}
.image-col {
flex: 2;
max-width: 65%;
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
padding-bottom: 2rem;
}
.item-image {
max-width: 100%;
max-height: 85vh;
height: auto;
border-radius: var(--radius-md);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
border-radius: var(--radius-lg, 16px);
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
object-fit: contain;
opacity: 0; /* Inicialmente oculto para fade-in */
transition: opacity 0.5s ease;
transition: all 0.4s ease;
cursor: zoom-in;
}
.item-image.loaded {
opacity: 1;
.item-image:hover {
transform: scale(1.02);
box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}
.info-col {
flex: 1;
max-width: 35%;
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: 2rem;
min-width: 300px;
}
.info-header h1 {
font-size: 2.2rem;
margin: 0 0 0.5rem 0;
font-size: 2.4rem;
margin: 0 0 0.8rem 0;
line-height: 1.2;
word-break: break-word;
}
.info-header .provider-name {
.provider-name {
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: 1rem;
display: block;
opacity: 0.9;
}
.tags-section {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 1.5rem;
.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(--accent);
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;
font-size: 1.2rem;
color: var(--text-secondary);
font-weight: 500;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
gap: 0.6rem;
}
.tag-item {
background: rgba(139, 92, 246, 0.2);
background: rgba(139,92,246,0.2);
color: var(--accent);
padding: 0.4rem 0.8rem;
padding: 0.5rem 1rem;
border-radius: 99px;
font-size: 0.9rem;
font-size: 0.95rem;
text-decoration: none;
transition: background 0.2s;
transition: all 0.2s;
backdrop-filter: blur(4px);
}
.tag-item:hover {
background: rgba(139, 92, 246, 0.4);
background: rgba(139,92,246,0.4);
transform: translateY(-2px);
}
.download-btn {
padding: 1rem 2rem;
background: var(--accent);
color: var(--text-primary);
border: none;
border-radius: var(--radius-md);
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: background 0.2s, box-shadow 0.2s;
margin-top: 1rem; /* Espacio después de las etiquetas */
}
.download-btn:hover {
background: #7c4dff;
box-shadow: 0 5px 20px var(--accent-glow);
}
/* --- Skeleton Styles --- */
.item-skeleton {
display: flex;
gap: 3rem;
width: 100%;
}
.image-col-skeleton {
flex: 2;
max-width: 65%;
aspect-ratio: 16/9;
height: 500px;
border-radius: var(--radius-md);
background: var(--bg-surface);
}
.info-col .provider-skeleton { width: 30%; height: 18px; margin-bottom: 1rem; }
.info-col .title-skeleton { width: 90%; height: 36px; margin-bottom: 3rem; }
.info-col .tag-label-skeleton { width: 40%; height: 20px; margin-bottom: 1rem; }
.info-col .tags-skeleton { width: 80%; height: 50px; margin-bottom: 3rem; }
.info-col .download-skeleton { width: 100%; height: 50px; }
/* Media Queries */
@media (max-width: 900px) {
.item-content, .item-skeleton {
flex-direction: column;
.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(--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(--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;
}
.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;
}
.image-col, .info-col, .image-col-skeleton {
max-width: 100%;
}
.item-image {
max-height: 80vh; /* Ajustar en móviles */
.similar-card { height: 140px; }
}
@media (max-width: 500px) {
.similar-grid {
grid-template-columns: 1fr;
}
}

25
views/gallery-image.html
View File

@@ -13,7 +13,7 @@
<body>
<nav class="navbar" id="navbar">
<a href="/public" class="nav-brand">
<a href="/" class="nav-brand">
<div class="brand-icon">
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
</div>
@@ -23,34 +23,31 @@
<div class="nav-center">
<button class="nav-button" onclick="window.location.href='/'">Anime</button>
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
<button class="nav-button active" onclick="window.location.href='/art'">Gallery</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">My List</button>
<button class="nav-button">Marketplace</button>
</div>
<div class="search-wrapper" id="global-search-wrapper" style="width: 250px;">
<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>
</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-content" class="item-content">
<div class="item-skeleton">
<div class="image-col-skeleton skeleton"></div>
<div class="info-col">
<div class="provider-skeleton skeleton"></div>
<div class="title-skeleton skeleton"></div>
<div class="tag-label-skeleton skeleton"></div>
<div class="tags-skeleton skeleton"></div>
<div class="download-skeleton skeleton"></div>
</div>
</div>
<div id="item-main-content" class="item-content"></div>
<div id="similar-section" class="similar-section">
<p style="text-align:center;color:var(--text-secondary);opacity:0.7;padding:3rem 0;">Loading similar images...</p>
</div>
</section>
</main>

23
views/gallery.html
View File

@@ -30,10 +30,14 @@
<button class="nav-button">Marketplace</button>
</div>
<div class="search-wrapper" id="global-search-wrapper" style="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 class="search-wrapper" style="width: 350px;">
<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>
</nav>
@@ -42,16 +46,7 @@
<section class="section">
<div class="gallery-controls">
<div class="search-provider-wrapper">
<select id="provider-selector" class="provider-selector"></select>
<i class="fa-solid fa-chevron-down provider-icon"></i>
</div>
<div class="search-gallery-wrapper">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" id="gallery-search-input" class="search-input" placeholder="Search gallery images..." autocomplete="off">
</div>
<select id="provider-selector" class="provider-selector"></select>
</div>
<div class="gallery-results grid" id="gallery-results">