46360b6827
- Tokens CSS con variables para ambos temas (dark/light) - 21 componentes reutilizables (buttons, cards, tables, modals, etc.) - 10 pantallas POS (login, catálogo, POS, inventario, clientes, facturación, contabilidad, dashboard, configuración, reportes) - Preview interactivo con selector de tema - Generado por el equipo de Hugo (Milo-UX, Iris-UI, Zara-Frontend)
313 lines
11 KiB
HTML
313 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-theme="industrial">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nexus Autoparts — Tabs (Contextuales)</title>
|
|
<link rel="stylesheet" href="../tokens/tokens.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: var(--font-body); background: var(--color-bg-base); color: var(--color-text-primary); padding: var(--space-8); transition: var(--transition-normal); }
|
|
.theme-switcher { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); margin: calc(-1 * var(--space-8)); margin-bottom: var(--space-8); }
|
|
.theme-switcher button { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); background: var(--color-bg-base); color: var(--color-text-primary); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); font-size: var(--text-body-sm); transition: var(--transition-fast); }
|
|
.theme-switcher button.active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
|
|
h1 { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary); margin-bottom: var(--space-2); color: var(--color-text-accent); }
|
|
.subtitle { color: var(--color-text-muted); font-size: var(--text-body); margin-bottom: var(--space-8); }
|
|
section { margin-bottom: var(--space-10); }
|
|
section h2 { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--heading-weight-secondary); color: var(--color-text-secondary); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
|
|
.label { font-size: var(--text-caption); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
|
|
|
|
/* ====== Tab Navigation ====== */
|
|
.tab-nav {
|
|
display: flex;
|
|
border-bottom: 2px solid var(--color-border);
|
|
gap: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tab-nav-item {
|
|
padding: var(--space-3) var(--space-5);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: var(--transition-fast);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab-nav-item:hover { color: var(--color-text-primary); }
|
|
|
|
.tab-nav-item.active {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.tab-nav-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
.tab-nav-item .tab-count {
|
|
margin-left: var(--space-2);
|
|
font-size: var(--text-caption);
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
padding: 1px 8px;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.tab-nav-item.active .tab-count {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
/* Tab Panel */
|
|
.tab-panel {
|
|
padding: var(--space-5);
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-top: none;
|
|
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
|
min-height: 120px;
|
|
}
|
|
|
|
[data-theme="industrial"] .tab-panel { border-radius: 0; }
|
|
|
|
.tab-panel-content {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ====== Vertical Tabs ====== */
|
|
.vertical-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
max-width: 600px;
|
|
}
|
|
|
|
[data-theme="industrial"] .vertical-tabs { border-radius: 0; }
|
|
|
|
.vertical-tab-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 180px;
|
|
background: var(--color-bg-elevated);
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
.vertical-tab-item {
|
|
padding: var(--space-3) var(--space-4);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: none;
|
|
border-left: 3px solid transparent;
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
text-align: left;
|
|
}
|
|
|
|
.vertical-tab-item:hover {
|
|
color: var(--color-text-primary);
|
|
background: var(--color-primary-muted);
|
|
}
|
|
|
|
.vertical-tab-item.active {
|
|
color: var(--color-primary);
|
|
border-left-color: var(--color-primary);
|
|
background: var(--color-primary-muted);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.vertical-tab-content {
|
|
flex: 1;
|
|
padding: var(--space-4);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ====== Card Tabs ====== */
|
|
.card-tabs {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
background: var(--color-bg-elevated);
|
|
padding: var(--space-1);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
[data-theme="industrial"] .card-tabs { border-radius: 0; }
|
|
|
|
.card-tab {
|
|
flex: 1;
|
|
padding: var(--space-3) var(--space-4);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-muted);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-theme="industrial"] .card-tab { border-radius: 0; }
|
|
|
|
.card-tab:hover { color: var(--color-text-primary); }
|
|
|
|
.card-tab.active {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Stat in tabs */
|
|
.tab-stat {
|
|
display: block;
|
|
font-size: var(--text-h4);
|
|
font-family: var(--font-heading);
|
|
font-weight: var(--heading-weight-primary);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.card-tab.active .tab-stat { color: var(--color-text-inverse); }
|
|
.card-tab:not(.active) .tab-stat { color: var(--color-text-primary); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="theme-switcher">
|
|
<button class="active" onclick="setTheme('industrial')">🔧 Industrial</button>
|
|
<button onclick="setTheme('modern')">⚡ Moderno</button>
|
|
</div>
|
|
|
|
<h1>Tabs (Contextuales)</h1>
|
|
<p class="subtitle">Tab navigation para inventario, contabilidad y configuración del POS</p>
|
|
|
|
<!-- Inventory Tabs -->
|
|
<section>
|
|
<h2>Tabs — Inventario</h2>
|
|
<div class="label">Navegación de inventario con contadores</div>
|
|
|
|
<div class="tab-nav">
|
|
<button class="tab-nav-item active">Todos <span class="tab-count">1,247</span></button>
|
|
<button class="tab-nav-item">En stock <span class="tab-count">980</span></button>
|
|
<button class="tab-nav-item">Bajo stock <span class="tab-count">45</span></button>
|
|
<button class="tab-nav-item">Agotados <span class="tab-count">15</span></button>
|
|
<button class="tab-nav-item">Por llegar <span class="tab-count">8</span></button>
|
|
<button class="tab-nav-item">Descontinuados <span class="tab-count">199</span></button>
|
|
</div>
|
|
<div class="tab-panel">
|
|
<div class="tab-panel-content">
|
|
Tabla de inventario con todos los productos. Incluye columnas: SKU, nombre, marca, stock, precio, ubicación.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Accounting Tabs -->
|
|
<section>
|
|
<h2>Tabs — Contabilidad</h2>
|
|
<div class="label">Módulos financieros del POS</div>
|
|
|
|
<div class="tab-nav">
|
|
<button class="tab-nav-item active">Ventas del día</button>
|
|
<button class="tab-nav-item">Compras</button>
|
|
<button class="tab-nav-item">Cuentas por Cobrar</button>
|
|
<button class="tab-nav-item">Cuentas por Pagar</button>
|
|
<button class="tab-nav-item">Corte de Caja</button>
|
|
<button class="tab-nav-item">Reportes</button>
|
|
</div>
|
|
<div class="tab-panel">
|
|
<div class="tab-panel-content">
|
|
Resumen de ventas del día actual. Total: $45,890.00 MXN · 23 transacciones · Ticket promedio: $1,995.22
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Product Detail Tabs -->
|
|
<section>
|
|
<h2>Tabs — Detalle de Producto</h2>
|
|
<div class="label">Información del producto organizada en tabs</div>
|
|
|
|
<div class="tab-nav">
|
|
<button class="tab-nav-item active">General</button>
|
|
<button class="tab-nav-item">Precios y costos</button>
|
|
<button class="tab-nav-item">Compatibilidad <span class="tab-count">24</span></button>
|
|
<button class="tab-nav-item">Proveedores</button>
|
|
<button class="tab-nav-item">Historial</button>
|
|
</div>
|
|
<div class="tab-panel">
|
|
<div class="tab-panel-content">
|
|
Información general del producto: nombre, SKU, OEM, categoría, marca, descripción, imagen.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Vertical Tabs -->
|
|
<section>
|
|
<h2>Tabs Verticales — Configuración</h2>
|
|
<div class="label">Navegación lateral para secciones de configuración</div>
|
|
|
|
<div class="vertical-tabs">
|
|
<div class="vertical-tab-nav">
|
|
<button class="vertical-tab-item active">General</button>
|
|
<button class="vertical-tab-item">Sucursales</button>
|
|
<button class="vertical-tab-item">Usuarios y roles</button>
|
|
<button class="vertical-tab-item">Impuestos</button>
|
|
<button class="vertical-tab-item">Impresoras</button>
|
|
<button class="vertical-tab-item">Notificaciones</button>
|
|
<button class="vertical-tab-item">Integraciones</button>
|
|
</div>
|
|
<div class="vertical-tab-content">
|
|
Configuración general del sistema: nombre del negocio, dirección, RFC, logo, moneda y zona horaria.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dashboard Card Tabs -->
|
|
<section>
|
|
<h2>Card Tabs — Dashboard</h2>
|
|
<div class="label">Tabs con estadísticas para el dashboard</div>
|
|
|
|
<div class="card-tabs" style="max-width: 600px;">
|
|
<button class="card-tab active">
|
|
Ventas hoy
|
|
<span class="tab-stat">$45,890</span>
|
|
</button>
|
|
<button class="card-tab">
|
|
Productos vendidos
|
|
<span class="tab-stat">127</span>
|
|
</button>
|
|
<button class="card-tab">
|
|
Ticket promedio
|
|
<span class="tab-stat">$1,995</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
document.querySelectorAll('.theme-switcher button').forEach(btn => {
|
|
btn.classList.toggle('active', btn.textContent.includes(theme === 'industrial' ? 'Industrial' : 'Moderno'));
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|