Distribuidores Grupo Vadillo

<!DOCTYPE html>

<head>

<title>Portal de Distribuidores Grupo Vadillo</title>

<!– Incluye Tailwind CSS para estilos –>

<!– Configuración de color y fuente personalizada con Tailwind –>

// Define la paleta de colores corporativa solicitada

tailwind.config = {

theme: {

extend: {

colors: {

‘vadillo-blue’: ‘#1a2b47’, // Azul Marino

‘vadillo-orange’: ‘#ff5a00’, // Naranja

‘vadillo-yellow’: ‘#ffc107’, // Amarillo

‘vadillo-green’: ‘#28a745’, // Verde

‘vadillo-gray’: ‘#f8f9fa’, // Gris Claro (para fondos limpios)

fontFamily: {

sans: [‘Inter’, ‘sans-serif’],

}

</script>

<style>

/* Estilos base y transiciones */

body {

font-family: ‘Inter’, sans-serif;

background-color: #f8f9fa;

}

.sidebar {

/* Fija la barra lateral y asegura el 100% de la altura de la ventana */

height: 100vh;

position: sticky;

top: 0;

overflow-y: auto;

}

.main-content {

min-height: 100vh; /* Asegura que el contenido principal ocupe toda la altura */

}

</style>

</head>

<!– Contenedor principal de la aplicación –>

<!– 1. PÁGINA DE LOGIN (Inicialmente visible) –>

<!– Logo Placeholder (GV en el color naranja corporativo) –>

<h1 class=»text-3xl font-bold text-vadillo-blue mt-2″>Grupo Vadillo</h1>

<p class=»text-lg text-vadillo-orange»>Portal de Distribuidores</p>

</div>

Iniciar Sesión

</button>

</div>

<p>Acceso Restringido. Use ‘A1’ o ‘Multiseñal’ como usuario de prueba.</p>

</div>

<!– 2. DASHBOARD (Oculto hasta el login) –>

<!– Barra de Navegación Lateral (Sidebar: Azul Marino) –>

<h2 class=»text-xl font-bold»>Distribuidor: <span id=»distributor-role» class=»text-vadillo-orange»></span></h2>

</div>

<!– Elementos de navegación –>

Inicio

</a>

Listas de Precios

</a>

Recursos de Marketing

</a>

Existencias

</a>

Cerrar Sesión

</button>

</nav>

</aside>

<!– Área de Contenido Principal –>

<!– Header Superior –>

<h1 class=»text-2xl font-semibold text-gray-700″>Bienvenido a su Portal, <span id=»user-name» class=»text-vadillo-orange font-bold»>Distribuidor</span></h1>

</header>

<!– Contenedor Dinámico de Secciones –>

<!– SECCIÓN INICIO (Dashboard con KPIs y Personalización) –>

<h2 class=»text-xl font-bold text-vadillo-blue border-b pb-2 mb-4″>Dashboard Principal</h2>

<!– Indicadores Clave de Desempeño (KPIs) –>

<p class=»text-sm opacity-80″>Ventas del Mes (Proyección)</p>

</div>

<p class=»text-sm opacity-80″>Nivel de Inventario</p>

</div>

<p class=»text-sm opacity-80″>Clasificación / Nivel</p>

</div>

<!– Notificaciones y Avisos (Personalizado por Rol) –>

<h3 class=»font-bold text-vadillo-blue»>Aviso Importante</h3>

<p class=»text-gray-700″ id=»notification-message»>El nuevo catálogo de verano ya está disponible en la sección de Recursos de Marketing.</p>

</div>

<!– Sección de Acceso Rápido –>

<h3 class=»text-lg font-semibold text-gray-600 mb-3 border-t pt-4″>Accesos Rápidos</h3>

<button onclick=»changeSection(‘precios’)» class=»p-4 bg-gray-100 hover:bg-gray-200 rounded-lg text-center shadow-md transition duration-150 border-b-2 border-vadillo-orange»>Ver Listas de Precios</button>

<button onclick=»changeSection(‘existencias’)» class=»p-4 bg-gray-100 hover:bg-gray-200 rounded-lg text-center shadow-md transition duration-150 border-b-2 border-vadillo-orange»>Consultar Existencias</button>

<button onclick=»changeSection(‘marketing’)» class=»p-4 bg-gray-100 hover:bg-gray-200 rounded-lg text-center shadow-md transition duration-150 border-b-2 border-vadillo-orange»>Buscar Recursos</button>

</div>

</section>

<!– SECCIÓN LISTAS DE PRECIOS (Listado de PDFs Diferenciado) –>

<h2 class=»text-xl font-bold text-vadillo-blue border-b pb-2 mb-4″>Listas de Precios (Archivos PDF)</h2>

<!– Este contenido será inyectado por JS según el rol con enlaces a PDFs –>

<p class=»text-gray-600 font-semibold»>Cargando lista de precios…</p>

</div>

</section>

<!– SECCIÓN RECURSOS DE MARKETING (Buscador por Código) –>

<h2 class=»text-xl font-bold text-vadillo-blue border-b pb-2 mb-4″>Recursos de Marketing (Ficha, Videos, Trípticos)</h2>

<!– Buscador –>

<h3 class=»text-lg font-semibold text-vadillo-blue mb-3″>Buscador de Recursos por Código de Producto</h3>

Buscar

</button>

</div>

<!– Área de Resultados –>

Busque un código (Ej: GV-101 o GV-205) para ver la ficha técnica, videos y trípticos disponibles.

</div>

<!– Contenido Adicional Solo para ‘A1’ (Ejemplo de personalización) –>

<h3 class=»font-bold text-vadillo-green»>Recursos Exclusivos Nivel A1</h3>

<p class=»text-sm text-gray-700″>Guía de Marketing Digital Avanzada y acceso a webinars trimestrales.</p>

</div>

</section>

<!– SECCIÓN EXISTENCIAS (Buscador por Código) –>

<h2 class=»text-xl font-bold text-vadillo-blue border-b pb-2 mb-4″>Consulta de Existencias en Almacén</h2>

<!– Buscador –>

<h3 class=»text-lg font-semibold text-vadillo-blue mb-3″>Buscador de Existencias por Código de Producto</h3>

Consultar

</button>

</div>

<!– Área de Resultados –>

Ingrese un código de producto (Ej: GV-101, GV-205, GV-310) para ver la existencia actual.

</div>

</section>

</div>

</main>

</div>

// — LÓGICA DE LA APLICACIÓN Y AUTENTICACIÓN SIMULADA —

const loginPage = document.getElementById(‘login-page’);

const dashboardPage = document.getElementById(‘dashboard-page’);

const loginButton = document.getElementById(‘login-button’);

const logoutButton = document.getElementById(‘logout-button’);

const usernameInput = document.getElementById(‘username-input’);

const loginMessage = document.getElementById(‘login-message’);

const distributorRoleDisplay = document.getElementById(‘distributor-role’);

const kpiRole = document.getElementById(‘kpi-role’);

const userNameDisplay = document.getElementById(‘user-name’);

const notificationMessage = document.getElementById(‘notification-message’);

const marketingA1Content = document.getElementById(‘marketing-a1-content’);

const priceContentArea = document.getElementById(‘price-content’);

const navItems = document.querySelectorAll(‘.nav-item’);

const contentSections = document.querySelectorAll(‘.content-section’);

let currentRole = null;

// Función para simular el inicio de sesión

loginButton.addEventListener(‘click’, () => {

const username = usernameInput.value.trim().toUpperCase(); // Convertir a mayúsculas para manejo de roles

// const password = document.getElementById(‘password-input’).value.trim(); // Contraseña ignorada en esta simulación

loginMessage.classList.add(‘hidden’); // Ocultar mensajes previos

// Lógica de autenticación simulada con roles

if (username === ‘A1’ || username === ‘MULTISEÑAL’) {

currentRole = username;

document.getElementById(‘password-input’).value = »;

showDashboard(currentRole);

} else {

// Simulación de error

loginMessage.textContent = ‘Usuario o contraseña incorrectos. Intente de nuevo.’;

loginMessage.classList.remove(‘hidden’);

}

});

// Función para cerrar sesión

logoutButton.addEventListener(‘click’, () => {

currentRole = null;

loginPage.classList.remove(‘hidden’);

dashboardPage.classList.add(‘hidden’);

usernameInput.value = »; // Limpiar campo de usuario al cerrar sesión

loginMessage.classList.add(‘hidden’);

});

// Función para mostrar el dashboard y personalizar el contenido

function showDashboard(role) {

loginPage.classList.add(‘hidden’);

dashboardPage.classList.remove(‘hidden’);

// 1. Actualizar roles visibles en el Dashboard

distributorRoleDisplay.textContent = role;

kpiRole.textContent = role;

userNameDisplay.textContent = ‘Distribuidor ‘ + role;

// 2. Personalizar contenido específico por rol

customizeContent(role);

// 3. Mostrar la sección de inicio por defecto

changeSection(‘inicio’);

}

// Función para personalizar listas de precios y notificaciones

function customizeContent(role) {

let priceHtml = »;

const isA1 = role === ‘A1’;

// Lista de PDFs general (visibles para todos)

const generalPdfs = [

{ name: ‘Catálogo General de Productos (Oct 2025)’, link: ‘#’ },

{ name: ‘Tarifas Estándar Vigentes’, link: ‘#’ },

];

// Lista de PDFs exclusivos para A1

const a1ExclusivePdfs = [

{ name: ‘Lista de Precios Mayoristas A1 Exclusiva’, link: ‘#’ },

{ name: ‘Condiciones de Crédito Preferencial A1’, link: ‘#’ },

];

priceHtml += ‘<div class=»space-y-4″>’;

// Mostrar PDFs generales

priceHtml += ‘<h3 class=»text-lg font-semibold text-gray-700 mb-2″>Documentos Generales</h3>’;

generalPdfs.forEach(pdf => {

priceHtml += `<div class=»flex items-center justify-between p-3 border-b hover:bg-vadillo-gray rounded-lg transition duration-150″>

Ver/Descargar PDF

</a>

</div>`;

});

// Mostrar PDFs exclusivos si es A1 (Diferenciación de contenido)

if (isA1) {

priceHtml += ‘<h3 class=»text-lg font-semibold text-vadillo-green mt-6 mb-2 border-t pt-4″>Documentos Exclusivos Nivel A1</h3>’;

a1ExclusivePdfs.forEach(pdf => {

priceHtml += `<div class=»flex items-center justify-between p-3 bg-vadillo-green/10 border-b border-vadillo-green rounded-lg transition duration-150″>

Ver/Descargar PDF

</a>

</div>`;

});

marketingA1Content.classList.remove(‘hidden’);

notificationMessage.textContent = ‘¡Bienvenido! Su nivel A1 le otorga acceso prioritario a todas las novedades y descuentos máximos.’;

} else {

// Si es Multiseñal o cualquier otro (no A1)

marketingA1Content.classList.add(‘hidden’);

notificationMessage.textContent = ‘Recuerde revisar periódicamente las existencias para planificar sus pedidos. ¡Tenemos nuevas guías de venta!’;

}

priceHtml += ‘</div>’;

priceContentArea.innerHTML = priceHtml;

}

// — LÓGICA DE BUSCADORES (Simulación de Datos) —

// Data simulada para Recursos de Marketing

const marketingData = {

‘GV-101’: {

name: ‘Señal V-16 Conectada’,

ficha: { name: ‘Ficha Técnica V-16 (PDF)’, link: ‘#’ },

videos: [

{ name: ‘Video 1: Funcionamiento y Conectividad’, link: ‘#’ },

{ name: ‘Video 2: Instalación Rápida’, link: ‘#’ },

tripticos: [{ name: ‘Tríptico Promocional V-16’, link: ‘#’ }],

‘GV-205’: {

name: ‘Baliza LED Autónoma’,

ficha: { name: ‘Ficha Técnica Baliza LED (PDF)’, link: ‘#’ },

videos: [{ name: ‘Video: Usos y Durabilidad’, link: ‘#’ }],

tripticos: [{ name: ‘Folleto Multiseñal Baliza’, link: ‘#’ }],

};

// Función de búsqueda para Recursos de Marketing

function searchMarketingResources() {

const code = document.getElementById(‘marketing-product-code’).value.trim().toUpperCase();

const resultsArea = document.getElementById(‘marketing-results’);

resultsArea.innerHTML = »; // Limpiar resultados previos

const data = marketingData[code];

if (!code) {

resultsArea.innerHTML = `<div class=»p-4 bg-vadillo-yellow/20 text-vadillo-blue rounded-lg font-semibold»>Por favor, ingrese un código de producto válido.</div>`;

return;

}

if (data) {

let html = `<h3 class=»text-xl font-bold text-vadillo-orange mb-4″>Recursos Disponibles para: ${data.name} (${code})</h3>`;

// Ficha Técnica

if (data.ficha) {

html += `<div class=»bg-vadillo-gray p-4 rounded-lg mb-4 shadow-sm border border-gray-200″>

<h4 class=»font-bold text-vadillo-blue»>Ficha Técnica</h4>

<p class=»text-sm»>${data.ficha.name}</p>

Descargar

</a>

</div>

</div>`;

}

// Videos

if (data.videos.length > 0) {

html += `<div class=»bg-vadillo-gray p-4 rounded-lg mb-4 shadow-sm border border-gray-200″>

<h4 class=»font-bold text-vadillo-blue»>Videos de Producto</h4>

${data.videos.map(v => `<li class=»flex items-center»><svg class=»w-4 h-4 mr-2 text-vadillo-orange» fill=»currentColor» viewBox=»0 0 20 20″ xmlns=»http://www.w3.org/2000/svg»><path d=»M2 6a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM10 12a1 1 0 00-1 1v1h2v-1a1 1 0 00-1-1z»></path></svg><a href=»${v.link}» target=»_blank» class=»text-vadillo-orange hover:underline»>${v.name}</a></li>`).join(»)}

</ul>

</div>`;

}

// Trípticos

if (data.tripticos.length > 0) {

html += `<div class=»bg-vadillo-gray p-4 rounded-lg shadow-sm border border-gray-200″>

<h4 class=»font-bold text-vadillo-blue»>Trípticos/Dosier</h4>

${data.tripticos.map(t => `<li class=»flex items-center»><svg class=»w-4 h-4 mr-2 text-vadillo-blue» fill=»currentColor» viewBox=»0 0 20 20″ xmlns=»http://www.w3.org/2000/svg»><path fill-rule=»evenodd» d=»M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7zm0 3a1 1 0 100 2h6a1 1 0 100-2H7z» clip-rule=»evenodd»></path></svg><a href=»${t.link}» target=»_blank» class=»text-vadillo-orange hover:underline»>${t.name}</a></li>`).join(»)}

</ul>

</div>`;

}

resultsArea.innerHTML = html;

} else {

resultsArea.innerHTML = `<div class=»p-4 bg-red-100 text-red-700 rounded-lg»>No se encontraron recursos para el código de producto «${code}». Pruebe con GV-101 o GV-205.</div>`;

}

// Data simulada para Existencias

const stockData = {

‘GV-101’: { existence: 4520, status: ‘Alto’ },

‘GV-205’: { existence: 870, status: ‘Medio’ },

‘GV-310’: { existence: 120, status: ‘Bajo’ },

‘GV-400’: { existence: 0, status: ‘Agotado’ },

};

// Función de búsqueda para Existencias

function searchStock() {

const code = document.getElementById(‘stock-product-code’).value.trim().toUpperCase();

const resultsArea = document.getElementById(‘stock-results’);

resultsArea.innerHTML = »; // Limpiar resultados previos

const data = stockData[code];

if (!code) {

resultsArea.innerHTML = `<div class=»p-4 bg-vadillo-yellow/20 text-vadillo-blue rounded-lg font-semibold»>Por favor, ingrese un código de producto válido.</div>`;

return;

}

if (data) {

let statusColor = ‘text-vadillo-green’;

let borderColor = ‘border-vadillo-green’;

if (data.status === ‘Medio’) { statusColor = ‘text-vadillo-yellow’; borderColor = ‘border-vadillo-yellow’; }

if (data.status === ‘Bajo’ || data.status === ‘Agotado’) { statusColor = ‘text-red-600’; borderColor = ‘border-red-600’; }

let html = `

<h3 class=»text-xl font-bold text-vadillo-blue mb-4″>Existencia para Producto: ${code}</h3>

<p class=»text-sm text-gray-500″>Unidades Disponibles en Almacén:</p>

<p class=»text-5xl font-extrabold ${statusColor}»>${data.existence.toLocaleString(‘es-ES’)}</p>

</div>

<p class=»text-sm text-gray-500 font-semibold»>Nivel de Stock:</p>

<p class=»text-2xl font-bold ${statusColor}»>${data.status}</p>

</div>

<p class=»text-xs text-gray-400 mt-4 border-t pt-2″>La información de existencias es en tiempo real y está sujeta a pedidos pendientes.</p>

</div>

resultsArea.innerHTML = html;

} else {

resultsArea.innerHTML = `<div class=»p-4 bg-red-100 text-red-700 rounded-lg»>No se encontró información de existencia para el código de producto «${code}». Pruebe con GV-101, GV-205 o GV-310.</div>`;

}

// Función para cambiar de sección en el Dashboard

function changeSection(sectionId) {

// Ocultar todas las secciones

contentSections.forEach(section => {

section.classList.add(‘hidden’);

section.classList.remove(‘active-section’);

});

// Mostrar la sección solicitada

const activeSection = document.getElementById(sectionId);

if (activeSection) {

activeSection.classList.remove(‘hidden’);

activeSection.classList.add(‘active-section’);

}

// Marcar el elemento de navegación como activo

navItems.forEach(item => {

item.classList.remove(‘bg-vadillo-orange/50’);

if (item.getAttribute(‘data-section’) === sectionId) {

item.classList.add(‘bg-vadillo-orange/50’);

}

});

}

// Inicializar el reloj en el header y listeners de búsqueda

document.addEventListener(‘DOMContentLoaded’, () => {

// Agregar listeners de navegación

navItems.forEach(item => {

item.addEventListener(‘click’, (e) => {

e.preventDefault();

changeSection(e.currentTarget.getAttribute(‘data-section’));

});

// Agregar listeners de búsqueda

document.getElementById(‘search-marketing-button’)?.addEventListener(‘click’, searchMarketingResources);

document.getElementById(‘search-stock-button’)?.addEventListener(‘click’, searchStock);

updateTime();

// Mostrar la página de login al inicio

loginPage.classList.remove(‘hidden’);

dashboardPage.classList.add(‘hidden’);

});

// Reloj en el header

Index