Solo items y usuarios
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,469 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Infinity — Panel Admin</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="admin.css?v=4">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- FONDO MESH -->
|
||||
<div class="mesh-bg" aria-hidden="true">
|
||||
<div class="mesh-blob mesh-blob-1"></div>
|
||||
<div class="mesh-blob mesh-blob-2"></div>
|
||||
<div class="mesh-blob mesh-blob-3"></div>
|
||||
</div>
|
||||
|
||||
<!-- LOGIN VIEW -->
|
||||
<main class="login-view" id="loginView">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<a href="../" class="logo">
|
||||
<span class="logo-symbol">∞</span>
|
||||
<span class="logo-text">Infinity</span>
|
||||
</a>
|
||||
<span class="login-badge">Panel administrativo</span>
|
||||
</div>
|
||||
|
||||
<h1 class="login-title">Bienvenido <em>de nuevo</em></h1>
|
||||
<p class="login-subtitle">Ingresa tus credenciales para continuar</p>
|
||||
|
||||
<form class="login-form" id="loginForm" autocomplete="on">
|
||||
<div class="form-group">
|
||||
<label for="usuario">Usuario</label>
|
||||
<input type="text" id="usuario" name="usuario" placeholder="admin" required autocomplete="username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="contraseña">Contraseña</label>
|
||||
<input type="password" id="contraseña" name="contraseña" placeholder="••••••••" required autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-error" id="formError" role="alert"></div>
|
||||
<button type="submit" class="btn btn-primary btn-full">Ingresar</button>
|
||||
</form>
|
||||
|
||||
<a href="../" class="back-link">← Volver al catálogo</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ADMIN APP (post-login) -->
|
||||
<div class="admin-app" id="adminApp" style="display:none">
|
||||
|
||||
<!-- SALUDO SUPERIOR -->
|
||||
<header class="admin-greeting">
|
||||
<h1 class="greeting-title">Hola, <em id="adminName">Admin</em> 👋</h1>
|
||||
<p class="greeting-subtitle">Bienvenido al panel de Infinity.</p>
|
||||
</header>
|
||||
|
||||
<!-- TOPBAR PILL (sticky) -->
|
||||
<nav class="admin-topbar" aria-label="Navegación del panel">
|
||||
<div class="topbar-container">
|
||||
<button type="button" class="nav-item active" data-view="dashboard">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-label">Dashboard</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" data-view="productos">
|
||||
<span class="nav-icon">📦</span>
|
||||
<span class="nav-label">Productos</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" data-view="agotados">
|
||||
<span class="nav-icon">🚫</span>
|
||||
<span class="nav-label">Agotados</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" data-view="categorias">
|
||||
<span class="nav-icon">🗂️</span>
|
||||
<span class="nav-label">Categorías</span>
|
||||
</button>
|
||||
<button type="button" class="nav-item" data-view="usuarios">
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-label">Usuarios</span>
|
||||
</button>
|
||||
<span class="topbar-divider" aria-hidden="true"></span>
|
||||
<button type="button" class="nav-item nav-item-logout" id="btnLogout">
|
||||
<span class="nav-icon">↪</span>
|
||||
<span class="nav-label">Cerrar sesión</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- CONTENIDO PRINCIPAL -->
|
||||
<main class="admin-main">
|
||||
|
||||
<!-- DASHBOARD VIEW -->
|
||||
<section class="view active" data-view="dashboard">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📦</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value" id="statProductos">—</div>
|
||||
<div class="stat-label">Productos</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">🗂️</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value" id="statCategorias">—</div>
|
||||
<div class="stat-label">Categorías</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCTOS VIEW -->
|
||||
<section class="view" data-view="productos">
|
||||
<header class="view-header">
|
||||
<h1 class="view-title">Productos</h1>
|
||||
<p class="view-subtitle">Sube fotos masivamente. La descripción y el precio se asignarán después.</p>
|
||||
</header>
|
||||
|
||||
<div class="view-content-card">
|
||||
<form id="formUploadProductos" class="upload-form" autocomplete="off">
|
||||
<div class="form-group">
|
||||
<label for="uploadCategoria">Categoría destino</label>
|
||||
<select id="uploadCategoria" required>
|
||||
<option value="">— Selecciona una categoría —</option>
|
||||
</select>
|
||||
<span class="form-hint">Todas las fotos subidas se guardarán en esta carpeta.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Zona de subida</label>
|
||||
<div class="dropzone" id="dropzone">
|
||||
<input type="file" id="inputFotos" accept="image/*" multiple hidden>
|
||||
<div class="dropzone-inner">
|
||||
<div class="dropzone-icon">📤</div>
|
||||
<p class="dropzone-title">Arrastra fotos aquí o haz clic para seleccionar</p>
|
||||
<p class="dropzone-hint">JPG, PNG, WEBP, GIF · Máx 20MB por archivo · 50 archivos por subida</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-preview-section" id="previewSection" style="display:none">
|
||||
<div class="upload-preview-header">
|
||||
<span class="upload-counter">
|
||||
<strong id="previewCount">0</strong>/50 fotos
|
||||
</span>
|
||||
<button type="button" class="btn btn-ghost btn-sm" id="btnLimpiarPreview">Limpiar todo</button>
|
||||
</div>
|
||||
<div class="upload-preview-grid" id="previewGrid"></div>
|
||||
</div>
|
||||
|
||||
<div class="upload-summary" id="uploadSummary" style="display:none"></div>
|
||||
|
||||
<div class="form-error" id="uploadError" role="alert"></div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" id="btnSubirProductos" disabled>
|
||||
<span class="btn-text">Subir fotos</span>
|
||||
<span class="btn-spinner" style="display:none">⏳</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Sub-sección: Lista de productos disponibles -->
|
||||
<div class="view-subsection">
|
||||
<div class="subsection-header">
|
||||
<h2 class="subsection-title">📋 Productos disponibles</h2>
|
||||
<span class="productos-counter" id="productosDisponiblesCount">0</span>
|
||||
</div>
|
||||
<div class="view-content-card">
|
||||
<div class="productos-search">
|
||||
<span class="productos-search-icon" aria-hidden="true">🔍</span>
|
||||
<input type="text" id="productosSearch" placeholder="Buscar por referencia..." autocomplete="off" spellcheck="false">
|
||||
<button type="button" class="productos-search-clear" id="productosSearchClear" style="display:none" aria-label="Limpiar búsqueda">✕</button>
|
||||
</div>
|
||||
<div class="productos-grid" id="productosListGrid">
|
||||
<!-- Renderizado por JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AGOTADOS VIEW -->
|
||||
<section class="view" data-view="agotados">
|
||||
<header class="view-header">
|
||||
<h1 class="view-title">Agotados</h1>
|
||||
<p class="view-subtitle">Productos que ya no están disponibles. Puedes reactivarlos o eliminarlos definitivamente.</p>
|
||||
</header>
|
||||
|
||||
<div class="view-content-card">
|
||||
<div class="agotados-grid" id="agotadosGrid">
|
||||
<!-- Renderizado por JS -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CATEGORÍAS VIEW -->
|
||||
<section class="view" data-view="categorias">
|
||||
<header class="view-header view-header-with-action">
|
||||
<div>
|
||||
<h1 class="view-title">Categorías</h1>
|
||||
<p class="view-subtitle">Crea, edita o elimina las categorías del catálogo.</p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" id="btnCrearCategoria">
|
||||
<span>＋</span> Crear categoría
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="view-content-card">
|
||||
<div class="categorias-grid" id="categoriasGrid">
|
||||
<!-- Renderizado por JS -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- USUARIOS VIEW (visible si tiene permiso 'usuarios') -->
|
||||
<section class="view" data-view="usuarios">
|
||||
<header class="view-header">
|
||||
<h1 class="view-title">Usuarios</h1>
|
||||
<p class="view-subtitle">Gestiona los usuarios del panel.</p>
|
||||
</header>
|
||||
|
||||
<!-- Sub-sección: Mi contraseña (solo admin) -->
|
||||
<div class="view-subsection" id="miPasswordSubsection">
|
||||
<h2 class="subsection-title">🔑 Mi contraseña</h2>
|
||||
<div class="view-content-card">
|
||||
<form id="formMiPassword" class="password-form" autocomplete="on">
|
||||
<div class="form-group">
|
||||
<label for="miPassActual">Contraseña actual</label>
|
||||
<input type="password" id="miPassActual" required autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="miPassNueva">Nueva contraseña</label>
|
||||
<input type="password" id="miPassNueva" required minlength="6" autocomplete="new-password">
|
||||
<span class="form-hint">Mínimo 6 caracteres</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="miPassConfirmar">Confirmar nueva contraseña</label>
|
||||
<input type="password" id="miPassConfirmar" required minlength="6" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-error" id="miPassError" role="alert"></div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Guardar cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sub-sección: Gestión de usuarios (admin o permiso 'usuarios') -->
|
||||
<div class="view-subsection" id="gestionUsuariosSubsection">
|
||||
<div class="subsection-header">
|
||||
<h2 class="subsection-title">👥 Gestión de usuarios</h2>
|
||||
<button type="button" class="btn btn-primary" id="btnCrearUsuario">
|
||||
<span>＋</span> Crear usuario
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-content-card">
|
||||
<div class="users-table-wrap">
|
||||
<table class="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Usuario</th>
|
||||
<th>Rol</th>
|
||||
<th class="users-actions-col">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="usersListBody">
|
||||
<!-- Renderizado por JS -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Crear usuario -->
|
||||
<div class="modal" id="modalCrearUsuario" style="display:none">
|
||||
<div class="modal-backdrop" data-close-modal="modalCrearUsuario"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Crear usuario</h3>
|
||||
<button class="modal-close" data-close-modal="modalCrearUsuario" type="button" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
<form id="formCrearUsuario" class="modal-form">
|
||||
<div class="form-group">
|
||||
<label for="nuevoUsuario">Usuario</label>
|
||||
<input type="text" id="nuevoUsuario" required autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nuevoPassword">Contraseña</label>
|
||||
<input type="password" id="nuevoPassword" required minlength="6" autocomplete="new-password">
|
||||
<span class="form-hint">Mínimo 6 caracteres</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nuevoRol">Rol</label>
|
||||
<select id="nuevoRol" required>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="admin">Administrador</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="permisosGroupCrear">
|
||||
<label>Permisos de visibilidad</label>
|
||||
<div class="permissions-grid" id="permisosCrear"></div>
|
||||
<span class="form-hint">Marca las pestañas que este usuario podrá ver.</span>
|
||||
</div>
|
||||
<div class="permission-note" id="permisosNoteCrear" style="display:none">
|
||||
<span>👑</span>
|
||||
<span>Los administradores tienen todos los permisos automáticamente.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-error" id="crearUsuarioError" role="alert"></div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-ghost" data-close-modal="modalCrearUsuario">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary">Crear</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Editar usuario -->
|
||||
<div class="modal" id="modalEditarUsuario" style="display:none">
|
||||
<div class="modal-backdrop" data-close-modal="modalEditarUsuario"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Editar usuario</h3>
|
||||
<button class="modal-close" data-close-modal="modalEditarUsuario" type="button" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
<form id="formEditarUsuario" class="modal-form">
|
||||
<div class="form-group">
|
||||
<label>Usuario</label>
|
||||
<input type="text" id="editarUsuarioNombre" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editarPassword">Nueva contraseña</label>
|
||||
<input type="password" id="editarPassword" minlength="6" autocomplete="new-password">
|
||||
<span class="form-hint">Déjala vacía para no cambiar</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editarRol">Rol</label>
|
||||
<select id="editarRol" required>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="admin">Administrador</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="permisosGroupEditar">
|
||||
<label>Permisos de visibilidad</label>
|
||||
<div class="permissions-grid" id="permisosEditar"></div>
|
||||
<span class="form-hint">Marca las pestañas que este usuario podrá ver.</span>
|
||||
</div>
|
||||
<div class="permission-note" id="permisosNoteEditar" style="display:none">
|
||||
<span>👑</span>
|
||||
<span>Los administradores tienen todos los permisos automáticamente.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-error" id="editarUsuarioError" role="alert"></div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-ghost" data-close-modal="modalEditarUsuario">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary">Guardar cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Confirmar eliminar -->
|
||||
<div class="modal modal-sm" id="modalConfirmarEliminar" style="display:none">
|
||||
<div class="modal-backdrop" data-close-modal="modalConfirmarEliminar"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>¿Eliminar usuario?</h3>
|
||||
<button class="modal-close" data-close-modal="modalConfirmarEliminar" type="button" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>¿Estás seguro de que quieres eliminar al usuario <strong id="eliminarUsuarioNombre"></strong>?</p>
|
||||
<p class="modal-warning">Esta acción no se puede deshacer.</p>
|
||||
<div class="form-error" id="eliminarUsuarioError" role="alert"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-ghost" data-close-modal="modalConfirmarEliminar">Cancelar</button>
|
||||
<button type="button" class="btn btn-danger" id="btnConfirmarEliminar">Sí, eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Crear/Editar categoría -->
|
||||
<div class="modal" id="modalCategoria" style="display:none">
|
||||
<div class="modal-backdrop" data-close-modal="modalCategoria"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="modalCategoriaTitulo">Crear categoría</h3>
|
||||
<button class="modal-close" data-close-modal="modalCategoria" type="button" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
<form id="formCategoria" class="modal-form">
|
||||
<div class="form-group">
|
||||
<label for="catNombre">Nombre</label>
|
||||
<input type="text" id="catNombre" required maxlength="40" autocomplete="off">
|
||||
<span class="form-hint" id="catIdHint"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Icono</label>
|
||||
<div class="icon-picker" id="iconPicker"></div>
|
||||
<input type="hidden" id="catIcono" value="📦">
|
||||
</div>
|
||||
<div class="form-error" id="categoriaError" role="alert"></div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-ghost" data-close-modal="modalCategoria">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary" id="btnGuardarCategoria">Crear</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Confirmar eliminar categoría -->
|
||||
<div class="modal modal-sm" id="modalEliminarCategoria" style="display:none">
|
||||
<div class="modal-backdrop" data-close-modal="modalEliminarCategoria"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>¿Eliminar categoría?</h3>
|
||||
<button class="modal-close" data-close-modal="modalEliminarCategoria" type="button" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Vas a eliminar la categoría <strong id="eliminarCatNombre"></strong>.</p>
|
||||
<div id="eliminarCatItemsMsg" class="alert-warning" style="display:none">
|
||||
<span>⚠️</span>
|
||||
<div>
|
||||
<strong>Esta categoría tiene <span id="eliminarCatCount">0</span> item(s).</strong>
|
||||
<p>Si continúas, los items se moverán a <strong>"Sin categoría"</strong> (no se borrarán).</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="modal-warning">Esta acción no se puede deshacer.</p>
|
||||
<div class="form-error" id="eliminarCatError" role="alert"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-ghost" data-close-modal="modalEliminarCategoria">Cancelar</button>
|
||||
<button type="button" class="btn btn-danger" id="btnConfirmarEliminarCategoria">Sí, eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Confirmar eliminar producto definitivamente -->
|
||||
<div class="modal modal-sm" id="modalEliminarProductoDef" style="display:none">
|
||||
<div class="modal-backdrop" data-close-modal="modalEliminarProductoDef"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>¿Eliminar producto definitivamente?</h3>
|
||||
<button class="modal-close" data-close-modal="modalEliminarProductoDef" type="button" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Vas a eliminar el producto <strong id="eliminarProdRef"></strong> de forma permanente.</p>
|
||||
<p>Su imagen y todos sus datos se borrarán. <strong>No se puede deshacer.</strong></p>
|
||||
<div class="form-error" id="eliminarProdError" role="alert"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-ghost" data-close-modal="modalEliminarProductoDef">Cancelar</button>
|
||||
<button type="button" class="btn btn-danger" id="btnConfirmarEliminarProdDef">Sí, eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="admin.js?v=4"></script>
|
||||
</body>
|
||||
</html>
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
/* ════════════════════════════════
|
||||
INFINITY — APP.JS
|
||||
Carga datos desde el backend (/api/*)
|
||||
════════════════════════════════ */
|
||||
|
||||
// ════════════════════════════════
|
||||
// ESTADO
|
||||
// ════════════════════════════════
|
||||
let categorias = [];
|
||||
let productos = [];
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str ?? '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
let catActiva = 'todos';
|
||||
let busqueda = '';
|
||||
let cargando = true;
|
||||
|
||||
// ════════════════════════════════
|
||||
// CARGA DE DATOS
|
||||
// ════════════════════════════════
|
||||
async function cargarDatos() {
|
||||
try {
|
||||
const [resCats, resProds] = await Promise.all([
|
||||
fetch('/api/categorias'),
|
||||
fetch('/api/productos')
|
||||
]);
|
||||
|
||||
if (!resCats.ok) throw new Error('No se pudieron cargar las categorías');
|
||||
if (!resProds.ok) throw new Error('No se pudieron cargar los productos');
|
||||
|
||||
categorias = await resCats.json();
|
||||
productos = await resProds.json();
|
||||
|
||||
cargando = false;
|
||||
renderTags();
|
||||
renderProductos();
|
||||
} catch (err) {
|
||||
console.error('Error cargando datos:', err);
|
||||
cargando = false;
|
||||
const grid = document.getElementById('productos');
|
||||
const cont = document.getElementById('contador');
|
||||
cont.textContent = '';
|
||||
grid.innerHTML = `
|
||||
<div class="error-state">
|
||||
<p>😕 No pudimos cargar el catálogo</p>
|
||||
<p class="error-detalle">${err.message}</p>
|
||||
<button class="btn btn-primary" onclick="location.reload()">Reintentar</button>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// ════════════════════════════════
|
||||
// RENDER CATEGORÍAS
|
||||
// ════════════════════════════════
|
||||
// RENDER TAGS FILTROS
|
||||
// ════════════════════════════════
|
||||
function renderTags() {
|
||||
const cont = document.getElementById('filtrosTags');
|
||||
// Filtrar la categoría del sistema "sin-categoria" de los tags
|
||||
const visibles = categorias.filter(c => c.id !== 'sin-categoria');
|
||||
cont.innerHTML =
|
||||
`<button class="tag active" data-cat="todos">Todos</button>` +
|
||||
visibles.map(cat => `<button class="tag" data-cat="${cat.id}"><span class="tag-icon">${cat.icono || '📦'}</span> ${cat.nombre}</button>`).join('');
|
||||
|
||||
cont.querySelectorAll('.tag').forEach(tag => {
|
||||
tag.addEventListener('click', () => {
|
||||
catActiva = tag.dataset.cat;
|
||||
cont.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
|
||||
tag.classList.add('active');
|
||||
renderProductos();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function sincronizarTag(cat) {
|
||||
document.querySelectorAll('.tag').forEach(t => {
|
||||
t.classList.toggle('active', t.dataset.cat === cat);
|
||||
});
|
||||
}
|
||||
|
||||
// ════════════════════════════════
|
||||
// RENDER PRODUCTOS
|
||||
// ════════════════════════════════
|
||||
function renderProductos() {
|
||||
const grid = document.getElementById('productos');
|
||||
const empty = document.getElementById('emptyState');
|
||||
const contador = document.getElementById('contador');
|
||||
|
||||
// Filtrar productos sin categoría (sin-categoria) y productos AGOTADOS
|
||||
// (imagen movida a la carpeta "agotados/") — no se muestran en el catálogo público.
|
||||
let filtrados = productos.filter(p =>
|
||||
p.cat &&
|
||||
p.cat !== 'sin-categoria' &&
|
||||
(!p.img || !p.img.startsWith('agotados/'))
|
||||
);
|
||||
|
||||
if (catActiva !== 'todos') {
|
||||
filtrados = filtrados.filter(p => p.cat === catActiva);
|
||||
}
|
||||
|
||||
if (busqueda.trim()) {
|
||||
const q = busqueda.toLowerCase();
|
||||
filtrados = filtrados.filter(p =>
|
||||
(p.nombre || '').toLowerCase().includes(q) ||
|
||||
(p.desc || '').toLowerCase().includes(q) ||
|
||||
(p.cat || '').toLowerCase().includes(q) ||
|
||||
(p.ref || '').toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
|
||||
contador.textContent = filtrados.length === 1
|
||||
? 'Mostrando 1 producto'
|
||||
: `Mostrando ${filtrados.length} productos`;
|
||||
|
||||
if (filtrados.length === 0) {
|
||||
grid.innerHTML = '';
|
||||
empty.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
empty.style.display = 'none';
|
||||
|
||||
grid.innerHTML = filtrados.map((p, i) => {
|
||||
const cat = categorias.find(c => c.id === p.cat);
|
||||
// Fallbacks: si no hay nombre, usar la referencia; si no hay descripción, ocultar
|
||||
const nombre = p.nombre || p.ref || 'Sin nombre';
|
||||
const desc = p.desc || '';
|
||||
const precio = (p.precio !== undefined && p.precio !== null && p.precio !== '')
|
||||
? `$${Number(p.precio).toLocaleString('es-CO')}`
|
||||
: '—';
|
||||
// La ruta en el JSON es relativa a /Imagenes/ (ej: "bolsos/AF100.webp")
|
||||
const imgSrc = p.img && p.img.startsWith('/') ? p.img : `/Imagenes/${p.img}`;
|
||||
return `
|
||||
<article class="producto-card" style="animation-delay: ${i * 0.04}s">
|
||||
<div class="producto-img">
|
||||
<span class="producto-cat">${cat ? cat.nombre : p.cat}</span>
|
||||
<img src="${escapeHtml(imgSrc)}" alt="${escapeHtml(nombre)}" loading="lazy"
|
||||
onerror="this.remove(); this.parentElement.classList.add('img-fallback');">
|
||||
<span class="producto-fallback">${cat ? cat.icono : '📦'}</span>
|
||||
</div>
|
||||
<div class="producto-info">
|
||||
<h3 class="producto-nombre">${escapeHtml(nombre)}</h3>
|
||||
${desc ? `<p class="producto-desc">${escapeHtml(desc)}</p>` : ''}
|
||||
<div class="producto-precio">${precio}</div>
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// ════════════════════════════════
|
||||
// BUSCADOR
|
||||
// ════════════════════════════════
|
||||
function setupSearch() {
|
||||
const input = document.getElementById('searchInput');
|
||||
const clear = document.getElementById('searchClear');
|
||||
|
||||
input.addEventListener('input', e => {
|
||||
busqueda = e.target.value;
|
||||
clear.style.display = busqueda ? 'flex' : 'none';
|
||||
renderProductos();
|
||||
});
|
||||
|
||||
clear.addEventListener('click', () => {
|
||||
input.value = '';
|
||||
busqueda = '';
|
||||
clear.style.display = 'none';
|
||||
renderProductos();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
document.getElementById('btnLimpiar').addEventListener('click', () => {
|
||||
input.value = '';
|
||||
busqueda = '';
|
||||
catActiva = 'todos';
|
||||
sincronizarTag('todos');
|
||||
clear.style.display = 'none';
|
||||
renderProductos();
|
||||
});
|
||||
}
|
||||
|
||||
// ════════════════════════════════
|
||||
// NAVBAR MOBILE
|
||||
// ════════════════════════════════
|
||||
function setupNav() {
|
||||
const toggle = document.getElementById('navToggle');
|
||||
const links = document.getElementById('navLinks');
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
links.classList.toggle('open');
|
||||
});
|
||||
|
||||
links.querySelectorAll('a').forEach(a => {
|
||||
a.addEventListener('click', () => links.classList.remove('open'));
|
||||
});
|
||||
}
|
||||
|
||||
// ════════════════════════════════
|
||||
// INIT
|
||||
// ════════════════════════════════
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setupSearch();
|
||||
setupNav();
|
||||
cargarDatos();
|
||||
});
|
||||
@@ -0,0 +1,867 @@
|
||||
/* ════════════════════════════════
|
||||
INFINITY — SOFT AURORA DESIGN
|
||||
Mesh gradient + glassmorphism + friendly modern
|
||||
════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
--bg: #fafaff;
|
||||
--bg-soft: #f5f3ff;
|
||||
--white: #ffffff;
|
||||
--ink: #1a1a2e;
|
||||
--ink-soft: #4a4a68;
|
||||
--ink-mute: #8b8ba7;
|
||||
--line: rgba(139, 92, 246, 0.4);
|
||||
--line-strong: rgba(139, 92, 246, 0.6);
|
||||
|
||||
--violet: #a78bfa;
|
||||
--violet-deep: #8b5cf6;
|
||||
--pink: #f0abfc;
|
||||
--pink-deep: #e879f9;
|
||||
--cyan: #67e8f9;
|
||||
--cyan-deep: #22d3ee;
|
||||
|
||||
--grad-primary: linear-gradient(135deg, #a78bfa 0%, #f0abfc 50%, #67e8f9 100%);
|
||||
--grad-soft: linear-gradient(135deg, rgba(167,139,250,0.12) 0%, rgba(240,171,252,0.12) 50%, rgba(103,232,249,0.12) 100%);
|
||||
--grad-text: linear-gradient(135deg, #8b5cf6 0%, #e879f9 50%, #22d3ee 100%);
|
||||
|
||||
--shadow-sm: 0 4px 14px rgba(167, 139, 250, 0.16);
|
||||
--shadow-md: 0 10px 40px rgba(167, 139, 250, 0.22);
|
||||
--shadow-lg: 0 20px 60px rgba(167, 139, 250, 0.28);
|
||||
|
||||
--radius-sm: 12px;
|
||||
--radius-md: 20px;
|
||||
--radius-lg: 28px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
img { display: block; max-width: 100%; }
|
||||
|
||||
button { font-family: inherit; }
|
||||
|
||||
a { color: inherit; }
|
||||
|
||||
/* ════════════════════════════════
|
||||
MESH GRADIENT BACKGROUND
|
||||
════════════════════════════════ */
|
||||
.mesh-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mesh-blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(90px);
|
||||
opacity: 0.55;
|
||||
will-change: transform;
|
||||
animation: float 22s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mesh-blob-1 {
|
||||
width: 520px; height: 520px;
|
||||
background: var(--violet);
|
||||
top: -120px; left: -120px;
|
||||
}
|
||||
|
||||
.mesh-blob-2 {
|
||||
width: 420px; height: 420px;
|
||||
background: var(--pink);
|
||||
top: 30%; right: -120px;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
.mesh-blob-3 {
|
||||
width: 480px; height: 480px;
|
||||
background: var(--cyan);
|
||||
bottom: -140px; left: 25%;
|
||||
animation-delay: -14s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(60px, -50px) scale(1.1); }
|
||||
66% { transform: translate(-40px, 40px) scale(0.92); }
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
NAVBAR
|
||||
════════════════════════════════ */
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 18px;
|
||||
z-index: 100;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1.5px solid var(--line-strong);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 10px 12px 10px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 6px 24px rgba(167, 139, 250, 0.18);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.logo-symbol {
|
||||
font-size: 1.7rem;
|
||||
line-height: 1;
|
||||
background: var(--grad-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--ink-soft);
|
||||
font-weight: 500;
|
||||
font-size: 0.92rem;
|
||||
transition: color var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; right: 0; bottom: -6px;
|
||||
height: 2px;
|
||||
background: var(--grad-primary);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--violet-deep);
|
||||
}
|
||||
|
||||
.nav-links a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.nav-toggle:hover {
|
||||
background: var(--bg-soft);
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: var(--ink);
|
||||
border-radius: 2px;
|
||||
transition: transform var(--transition), opacity var(--transition);
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
HERO
|
||||
════════════════════════════════ */
|
||||
.hero {
|
||||
min-height: 78vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 20px 60px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 820px;
|
||||
animation: fadeInUp 0.8s ease-out both;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 18px;
|
||||
background: var(--white);
|
||||
border: 1px solid rgba(167, 139, 250, 0.3);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--violet-deep);
|
||||
margin-bottom: 24px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 7vw, 5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.035em;
|
||||
margin-bottom: 24px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.hero-title em {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: var(--violet-deep);
|
||||
}
|
||||
|
||||
.hero-gradient-text {
|
||||
background: var(--grad-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: clamp(1rem, 1.8vw, 1.2rem);
|
||||
color: var(--ink-soft);
|
||||
max-width: 580px;
|
||||
margin: 0 auto 36px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
BUTTONS
|
||||
════════════════════════════════ */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 30px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--grad-primary);
|
||||
color: var(--white);
|
||||
box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: var(--white);
|
||||
color: var(--ink);
|
||||
border: 1.5px solid var(--line-strong);
|
||||
box-shadow: 0 2px 8px rgba(167, 139, 250, 0.08);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--bg-soft);
|
||||
border-color: var(--violet);
|
||||
color: var(--violet-deep);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(167, 139, 250, 0.18);
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
SECTIONS / TYPOGRAPHY
|
||||
════════════════════════════════ */
|
||||
section {
|
||||
padding: 60px 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.025em;
|
||||
margin-bottom: 12px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.section-title em {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
background: var(--grad-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
color: var(--ink-soft);
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
CATEGORÍAS
|
||||
════════════════════════════════ */
|
||||
.categorias-section {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.categorias-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cat-card {
|
||||
background: var(--white);
|
||||
border: 1.5px solid var(--line-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
|
||||
box-shadow: var(--shadow-sm);
|
||||
animation: fadeInUp 0.6s ease-out backwards;
|
||||
}
|
||||
|
||||
.cat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--violet);
|
||||
}
|
||||
|
||||
.cat-icon {
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cat-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
SEARCH
|
||||
════════════════════════════════ */
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 24px;
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 6px 6px 6px 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1.5px solid var(--line-strong);
|
||||
transition: box-shadow var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.search-wrap:focus-within {
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--violet);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--ink-mute);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
padding: 12px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--ink-mute);
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
background: var(--bg-soft);
|
||||
border: none;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
color: var(--ink-soft);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-clear:hover {
|
||||
background: var(--violet);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
FILTROS TAGS
|
||||
════════════════════════════════ */
|
||||
.filtros-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 8px 18px;
|
||||
background: var(--white);
|
||||
border: 1.5px solid var(--line-strong);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 500;
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
box-shadow: 0 2px 6px rgba(167, 139, 250, 0.06);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.tag-icon {
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
border-color: var(--violet);
|
||||
color: var(--violet-deep);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tag.active {
|
||||
background: var(--grad-primary);
|
||||
color: var(--white);
|
||||
border-color: transparent;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
CONTADOR + PRODUCTOS
|
||||
════════════════════════════════ */
|
||||
.contador {
|
||||
text-align: center;
|
||||
color: var(--ink-mute);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.productos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.producto-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
|
||||
cursor: pointer;
|
||||
animation: fadeInUp 0.6s ease-out backwards;
|
||||
border: 1.5px solid var(--line-strong);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.producto-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--violet);
|
||||
}
|
||||
|
||||
.producto-img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background: var(--grad-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.producto-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow);
|
||||
}
|
||||
|
||||
.producto-card:hover .producto-img img {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.producto-cat {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
padding: 5px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
color: var(--violet-deep);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.producto-info {
|
||||
padding: 18px 20px 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.producto-nombre {
|
||||
font-size: 1.02rem;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.producto-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--ink-mute);
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.producto-precio {
|
||||
margin-top: 6px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 800;
|
||||
background: var(--grad-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
EMPTY STATE
|
||||
════════════════════════════════ */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.error-detalle {
|
||||
color: var(--ink-mute);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
FALLBACK DE IMAGEN
|
||||
Se muestra cuando la imagen
|
||||
del producto aún no existe
|
||||
════════════════════════════════ */
|
||||
.producto-fallback {
|
||||
display: none;
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
|
||||
animation: floatFallback 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.producto-img.img-fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--grad-soft);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.producto-img.img-fallback::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 50%),
|
||||
radial-gradient(circle at 70% 70%, rgba(255,255,255,0.4), transparent 50%);
|
||||
}
|
||||
|
||||
.producto-img.img-fallback .producto-fallback {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes floatFallback {
|
||||
0%, 100% { transform: translateY(0) scale(1); }
|
||||
50% { transform: translateY(-8px) scale(1.05); }
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
FOOTER
|
||||
════════════════════════════════ */
|
||||
.footer {
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border-top: 1px solid var(--line);
|
||||
padding: 50px 20px 30px;
|
||||
margin-top: 80px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: 40px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-brand .logo {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.92rem;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
font-size: 0.92rem;
|
||||
transition: color var(--transition);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--violet-deep);
|
||||
}
|
||||
|
||||
.footer-copy p {
|
||||
color: var(--ink-mute);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
ANIMATIONS
|
||||
════════════════════════════════ */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
.mesh-blob { animation: none; }
|
||||
}
|
||||
|
||||
/* ════════════════════════════════
|
||||
RESPONSIVE
|
||||
════════════════════════════════ */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
background: var(--white);
|
||||
padding: 22px;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
gap: 18px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.nav-links.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.productos-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-container {
|
||||
padding: 10px 10px 10px 20px;
|
||||
}
|
||||
|
||||
.productos-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.producto-info {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.producto-nombre {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.producto-desc {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.producto-precio {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.cat-card {
|
||||
padding: 22px 14px;
|
||||
}
|
||||
|
||||
.cat-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#fafaff">
|
||||
<title>Infinity — Catálogo</title>
|
||||
<meta name="description" content="Catálogo de belleza, bolsos, canecas, termos y accesorios. Descubre tu estilo sin límites.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="estilos.css?v=4">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- FONDO MESH GRADIENT ANIMADO -->
|
||||
<div class="mesh-bg" aria-hidden="true">
|
||||
<div class="mesh-blob mesh-blob-1"></div>
|
||||
<div class="mesh-blob mesh-blob-2"></div>
|
||||
<div class="mesh-blob mesh-blob-3"></div>
|
||||
</div>
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="#inicio" class="logo">
|
||||
<span class="logo-symbol">∞</span>
|
||||
<span class="logo-text">Infinity</span>
|
||||
</a>
|
||||
<div class="nav-links" id="navLinks">
|
||||
<a href="#inicio">Inicio</a>
|
||||
<a href="#catalogo">Catálogo</a>
|
||||
<a href="administrativo/">Admin</a>
|
||||
</div>
|
||||
<button class="nav-toggle" id="navToggle" aria-label="Abrir menú">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero" id="inicio">
|
||||
<div class="hero-content">
|
||||
<span class="hero-badge">✨ Nueva colección disponible</span>
|
||||
<h1 class="hero-title">
|
||||
Descubre tu <em>estilo</em><br>
|
||||
<span class="hero-gradient-text">sin límites</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Belleza, accesorios, bolsos y mucho más. Productos curados para acompañarte en tu día a día.
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#catalogo" class="btn btn-primary">Ver catálogo</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCTOS -->
|
||||
<section class="productos-section" id="catalogo">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Nuestro <em>catálogo</em></h2>
|
||||
<p class="section-subtitle">Todos los productos en un solo lugar</p>
|
||||
</div>
|
||||
|
||||
<div class="search-wrap">
|
||||
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="Buscar productos, categorías..." autocomplete="off">
|
||||
<button class="search-clear" id="searchClear" aria-label="Limpiar búsqueda">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="filtros-tags" id="filtrosTags"></div>
|
||||
|
||||
<div id="contador" class="contador"></div>
|
||||
<div id="productos" class="productos-grid"></div>
|
||||
<div id="emptyState" class="empty-state" style="display:none">
|
||||
<p>😕 No encontramos productos</p>
|
||||
<button class="btn btn-ghost" id="btnLimpiar">Limpiar búsqueda</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<div class="logo">
|
||||
<span class="logo-symbol">∞</span>
|
||||
<span class="logo-text">Infinity</span>
|
||||
</div>
|
||||
<p>Productos para tu estilo de vida, sin límites.</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="#inicio">Inicio</a>
|
||||
<a href="#catalogo">Catálogo</a>
|
||||
<a href="administrativo/">Admin</a>
|
||||
</div>
|
||||
<div class="footer-copy">
|
||||
<p>© 2026 Infinity.</p>
|
||||
<p>Catálogo web.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="app.js?v=4"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user