added gallery section

2025-11-30 21:18:19 +01:00
parent 658e4e09c4
commit ca2ed4187e
17 changed files with 1072 additions and 6 deletions
--- a/server.js
+++ b/server.js
@@ -11,6 +11,7 @@ const animeRoutes = require('./src/anime/anime.routes');
 const booksRoutes = require('./src/books/books.routes');
 const proxyRoutes = require('./src/shared/proxy/proxy.routes');
 const extensionsRoutes = require('./src/extensions/extensions.routes');
+const galleryRoutes = require('./src/gallery/gallery.routes');

 fastify.register(require('@fastify/static'), {
    root: path.join(__dirname, 'public'),
@@ -35,6 +36,7 @@ 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' });

 function startCppScraper() {
    const exePath = path.join(
--- a/src/extensions/extensions.controller.ts
+++ b/src/extensions/extensions.controller.ts
@@ -1,5 +1,5 @@
 import { FastifyReply, FastifyRequest } from 'fastify';
-import { getExtension, getExtensionsList, getAllExtensions, getBookExtensionsMap, getAnimeExtensionsMap } from '../shared/extensions';
+import { getExtension, getExtensionsList, getGalleryExtensionsMap, getBookExtensionsMap, getAnimeExtensionsMap } from '../shared/extensions';
 import { ExtensionNameRequest } from '../types';

 export async function getExtensions(req: FastifyRequest, reply: FastifyReply) {
@@ -16,6 +16,11 @@ export async function getBookExtensions(req: FastifyRequest, reply: FastifyReply
    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);
--- a/src/extensions/extensions.routes.ts
+++ b/src/extensions/extensions.routes.ts
@@ -5,6 +5,7 @@ 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);
 }

--- a/src/gallery/gallery.controller.ts
+++ b/src/gallery/gallery.controller.ts
@@ -0,0 +1,59 @@
+import {FastifyReply} from 'fastify';
+import * as galleryService from './gallery.service';
+
+export async function search(req: any, reply: FastifyReply) {
+    try {
+        const query = req.query.q || '';
+        const page = parseInt(req.query.page as string) || 1;
+        const perPage = parseInt(req.query.perPage as string) || 48;
+
+        return await galleryService.searchGallery(query, page, perPage);
+    } catch (err) {
+        const error = err as Error;
+        console.error("Gallery Search Error:", error.message);
+        return {
+            results: [],
+            total: 0,
+            page: 1,
+            hasNextPage: false
+        };
+    }
+}
+
+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" });
+    }
+}
--- a/src/gallery/gallery.routes.ts
+++ b/src/gallery/gallery.routes.ts
@@ -0,0 +1,10 @@
+import { FastifyInstance } from 'fastify';
+import * as controller from './gallery.controller';
+
+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);
+}
+
+export default galleryRoutes;
--- a/src/gallery/gallery.service.ts
+++ b/src/gallery/gallery.service.ts
@@ -0,0 +1,104 @@
+import { getAllExtensions, getExtension } from '../shared/extensions';
+import { GallerySearchResult, GalleryInfo } from '../types';
+
+export async function searchGallery(query: string, page: number = 1, perPage: number = 48): Promise<GallerySearchResult> {
+    const extensions = getAllExtensions();
+
+    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;
+            }
+        }
+    }
+
+    return {
+        total: 0,
+        next: 0,
+        previous: 0,
+        pages: 0,
+        page,
+        hasNextPage: false,
+        results: []
+    };
+}
+
+export async function getGalleryInfo(id: string, providerName?: string): Promise<GalleryInfo> {
+    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 {
+                    ...info,
+                    provider: providerName
+                };
+            } 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 (e) {
+                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<GallerySearchResult> {
+
+    const ext = getExtension(providerName);
+
+    if (!ext || ext.type !== 'image-board' || !ext.search) {
+        throw new Error(`La extensión "${providerName}" no existe o no soporta búsqueda.`);
+    }
+
+    try {
+        console.log(`[Gallery] Searching ONLY in ${providerName} for: ${query}`);
+        const results = await ext.search(query, page, perPage);
+
+        const enrichedResults = (results?.results ?? []).map((r: any) => ({
+            ...r,
+            provider: providerName
+        }));
+
+        return {
+            ...results,
+            results: enrichedResults
+        };
+
+    } 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: []
+        };
+    }
+}
--- a/src/scripts/gallery/gallery.js
+++ b/src/scripts/gallery/gallery.js
@@ -0,0 +1,251 @@
+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');
+
+    let currentPage = 1;
+    let currentProvider = '';
+    let currentQuery = '';
+    const perPage = 48;
+
+    let msnry = null;
+
+    // --- MASONRY INITIALIZATION ---
+    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();
+
+    // --- UTILS ---
+
+    /**
+     * Crea un elemento de tarjeta de resultado de galería.
+     */
+    function createGalleryCard(item) {
+        const card = document.createElement('a');
+        card.className = 'gallery-card grid-item';
+
+        const itemProvider = item.provider || currentProvider;
+
+        // **********************************************
+        // 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;
+    }
+
+    /**
+     * 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>`;
+
+        if (!append) {
+            resultsContainer.innerHTML = '';
+            initializeMasonry();
+        }
+
+        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 (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>';
+            }
+        } catch (error) {
+            console.error('Error loading gallery extensions:', error);
+            providerSelector.innerHTML = '<option value="">Error loading extensions</option>';
+        }
+    }
+
+
+    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 {
+            showSkeletons(8, true);
+        }
+
+        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 response = await fetch(url);
+            const data = await response.json();
+
+            let newRealElements = [];
+            if (data.results && data.results.length > 0) {
+                data.results.forEach(item => {
+                    newRealElements.push(createGalleryCard(item));
+                });
+            }
+
+            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';
+        }
+    }
+
+
+    // --- EVENT LISTENERS (Sin cambios) ---
+
+    providerSelector.addEventListener('change', () => {
+        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);
+        }
+    });
+
+    loadMoreBtn.addEventListener('click', () => {
+        searchGallery(true);
+    });
+
+    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');
+        }
+    });
+
+});
--- a/src/scripts/gallery/image.js
+++ b/src/scripts/gallery/image.js
@@ -0,0 +1,139 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const itemContentContainer = document.getElementById('item-content');
+
+    // 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;
+    }
+
+    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);
+
+            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})`);
+        }
+    }
+
+    /**
+     * 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}`;
+
+        // Limpiar el esqueleto
+        itemContentContainer.innerHTML = '';
+
+        const imageUrl = item.fullImage || item.resizedImageUrl; // Usar fullImage para la más alta resolución
+
+        const itemHTML = `
+            <div class="image-col">
+                <img id="main-image" class="item-image" src="${imageUrl}" alt="${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>
+                </div>
+
+                <div class="tags-section">
+                    <h3>Tags</h3>
+                    <div class="tag-list" id="tag-list">
+                        </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>
+        `;
+
+        itemContentContainer.innerHTML = itemHTML;
+
+        // 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>';
+        }
+
+        // Habilitar fade-in de la imagen una vez que se carga
+        const mainImage = document.getElementById('main-image');
+        mainImage.onload = () => {
+            mainImage.classList.add('loaded');
+        };
+        // Para imágenes que ya están en caché
+        if (mainImage.complete) {
+            mainImage.classList.add('loaded');
+        }
+    }
+
+    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>
+        `;
+    }
+
+    // --- Inicialización ---
+    const params = getUrlParams();
+    if (params && params.provider && params.id) {
+        fetchGalleryItem(params.provider, params.id);
+    } else {
+        renderError("Invalid URL format. Expected: /gallery/&lt;provider&gt;/&lt;id&gt;");
+    }
+
+    // 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');
+        }
+    });
+});
--- a/src/shared/extensions.js
+++ b/src/shared/extensions.js
@@ -28,7 +28,7 @@ async function loadExtensions() {
                        ? new ExtensionClass()
                        : (ExtensionClass.default ? new ExtensionClass.default() : null);

-                    if (instance && (instance.type === "anime-board" || instance.type === "book-board")) {
+                    if (instance && (instance.type === "anime-board" || instance.type === "book-board" || instance.type === "image-board")) {
                        const name = instance.constructor.name;
                        extensions.set(name, instance);
                        console.log(`📦 Loaded Extension: ${name}`);
@@ -77,11 +77,22 @@ function getBookExtensionsMap() {
    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
+    getBookExtensionsMap,
+    getGalleryExtensionsMap
 };
--- a/src/types.ts
+++ b/src/types.ts
@@ -203,3 +203,56 @@ export type ChapterRequest = FastifyRequest<{
 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;
+    };
+}
--- a/src/views/views.routes.ts
+++ b/src/views/views.routes.ts
@@ -14,6 +14,11 @@ async function viewsRoutes(fastify: FastifyInstance) {
        reply.type('text/html').send(stream);
    });

+    fastify.get('/gallery', (req: FastifyRequest, reply: FastifyReply) => {
+        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'gallery.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);
@@ -43,6 +48,11 @@ async function viewsRoutes(fastify: FastifyInstance) {
        const stream = fs.createReadStream(path.join(__dirname, '..', '..', 'views', 'read.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);
+    });
 }

 export default viewsRoutes;
--- a/views/books.html
+++ b/views/books.html
@@ -21,7 +21,7 @@
    <div class="nav-center">
        <button class="nav-button" onclick="window.location.href='/'">Anime</button>
        <button class="nav-button active">Books</button>
-        <button class="nav-button">Gallery</button>
+        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
        <button class="nav-button">Schedule</button>
        <button class="nav-button">My List</button>
        <button class="nav-button">Marketplace</button>
--- a/views/css/gallery/gallery.css
+++ b/views/css/gallery/gallery.css
@@ -0,0 +1,139 @@
+/* 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;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-top: 1rem;
+}
+/* ... (Estilos de búsqueda y selector sin cambios relevantes) ... */
+
+.provider-selector {
+    appearance: none;
+    width: 100%;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    padding: 0.7rem 1rem;
+    padding-right: 2.5rem;
+    border-radius: 99px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.provider-selector:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 15px var(--accent-glow);
+}
+
+.provider-icon {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--text-secondary);
+    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);
+
+    /* --- 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 */
+}
+
+.gallery-card-img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    display: block;
+}
+.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);
+    }
+}
+/* ... (media queries restantes sin cambios) ... */
+
+@media (max-width: 900px) {
+    .gallery-card {
+        width: calc(50% - 1.5rem);
+    }
+}
+
+@media (max-width: 600px) {
+    .gallery-card {
+        width: calc(100% - 1.5rem);
+    }
+}
+
+
+/* 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;
+}
--- a/views/css/gallery/image.css
+++ b/views/css/gallery/image.css
@@ -0,0 +1,145 @@
+/* Placeholder para la altura del navbar fijo */
+.gallery-hero-placeholder {
+    height: var(--nav-height);
+    width: 100%;
+}
+
+.item-content {
+    display: flex;
+    gap: 3rem;
+    padding-top: 2rem;
+    min-height: 80vh;
+}
+
+.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);
+    object-fit: contain;
+    opacity: 0; /* Inicialmente oculto para fade-in */
+    transition: opacity 0.5s ease;
+}
+
+.item-image.loaded {
+    opacity: 1;
+}
+
+.info-col {
+    flex: 1;
+    max-width: 35%;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.info-header h1 {
+    font-size: 2.2rem;
+    margin: 0 0 0.5rem 0;
+}
+
+.info-header .provider-name {
+    color: var(--text-secondary);
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    display: block;
+}
+
+.tags-section {
+    border-top: 1px solid rgba(255,255,255,0.1);
+    padding-top: 1.5rem;
+}
+
+.tags-section h3 {
+    margin: 0 0 1rem 0;
+    font-size: 1.2rem;
+    color: var(--text-secondary);
+}
+
+.tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.tag-item {
+    background: rgba(139, 92, 246, 0.2);
+    color: var(--accent);
+    padding: 0.4rem 0.8rem;
+    border-radius: 99px;
+    font-size: 0.9rem;
+    text-decoration: none;
+    transition: background 0.2s;
+}
+
+.tag-item:hover {
+    background: rgba(139, 92, 246, 0.4);
+}
+
+.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;
+    }
+    .image-col, .info-col, .image-col-skeleton {
+        max-width: 100%;
+    }
+    .item-image {
+        max-height: 80vh; /* Ajustar en móviles */
+    }
+}
--- a/views/gallery-image.html
+++ b/views/gallery-image.html
@@ -0,0 +1,60 @@
+<!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/anime/home.css">
+  <link rel="stylesheet" href="/views/css/gallery/gallery.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">
+</head>
+<body>
+
+<nav class="navbar" id="navbar">
+  <a href="/public" 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</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">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;">
+    <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>
+
+<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>
+  </section>
+</main>
+
+<script src="/src/scripts/gallery/image.js"></script>
+</body>
+</html>
--- a/views/gallery.html
+++ b/views/gallery.html
@@ -0,0 +1,77 @@
+<!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/anime/home.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="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>
+</head>
+<body>
+
+<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</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">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;">
+        <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>
+
+<main class="gallery-main">
+    <div class="gallery-hero-placeholder"></div>
+
+    <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>
+
+        </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>
+
+<script src="../src/scripts/gallery/gallery.js"></script>
+</body>
+</html>
--- a/views/index.html
+++ b/views/index.html
@@ -20,7 +20,7 @@
    <div class="nav-center">
        <button class="nav-button active" onclick="window.location.href='/'">Anime</button>
        <button class="nav-button" onclick="window.location.href='/books'">Books</button>
-        <button class="nav-button" onclick="window.location.href='/art'">Gallery</button>
+        <button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
        <button class="nav-button">Schedule</button>
        <button class="nav-button">My List</button>
        <button class="nav-button">Marketplace</button>