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

added gallery section

Browse Source
This commit is contained in:
lenafx
2025-11-30 21:18:19 +01:00
parent 658e4e09c4
commit ca2ed4187e
17 changed files with 1072 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/books.html
View File

@@ -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>

139
views/css/gallery/gallery.css Normal file
View File

@@ -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;
}

145
views/css/gallery/image.css Normal file
View File

@@ -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 */
}
}

60
views/gallery-image.html Normal file
View File

@@ -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>

77
views/gallery.html Normal file
View File

@@ -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>

2
views/index.html
View File

@@ -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>