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/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;
+}