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)
490 lines
18 KiB
HTML
490 lines
18 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 — Cards</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-text {
|
|
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-3);
|
|
}
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
/* ====== Card Base ====== */
|
|
.card {
|
|
background: var(--color-bg-elevated);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: var(--transition-normal);
|
|
}
|
|
.card:hover {
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
[data-theme="industrial"] .card {
|
|
border-radius: 0;
|
|
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
|
|
}
|
|
|
|
.card-body { padding: var(--space-5); }
|
|
.card-footer {
|
|
padding: var(--space-3) var(--space-5);
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
|
|
/* ====== Product Card ====== */
|
|
.product-card .product-image {
|
|
width: 100%; height: 180px;
|
|
background: var(--color-surface-2);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 48px; color: var(--color-text-muted);
|
|
}
|
|
.product-card .product-info { padding: var(--space-4) var(--space-5); }
|
|
.product-card .product-category {
|
|
font-size: var(--text-caption); text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider); color: var(--color-primary);
|
|
font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1);
|
|
}
|
|
.product-card .product-name {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h5); font-weight: var(--heading-weight-secondary);
|
|
margin-bottom: var(--space-2); line-height: var(--leading-h5);
|
|
}
|
|
.product-card .product-sku {
|
|
font-family: var(--font-mono); font-size: var(--text-caption);
|
|
color: var(--color-text-muted); margin-bottom: var(--space-3);
|
|
}
|
|
.product-card .product-compat {
|
|
display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3);
|
|
}
|
|
.product-card .product-compat .compat-tag {
|
|
font-size: 11px; padding: 2px var(--space-2);
|
|
background: var(--color-primary-muted); color: var(--color-primary);
|
|
border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold);
|
|
}
|
|
.product-card .product-pricing {
|
|
display: flex; align-items: baseline; gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-5);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
.product-card .product-price {
|
|
font-family: var(--font-mono); font-size: var(--text-h4);
|
|
font-weight: var(--font-weight-bold); color: var(--color-text-accent);
|
|
}
|
|
.product-card .product-price-old {
|
|
font-family: var(--font-mono); font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted); text-decoration: line-through;
|
|
}
|
|
.product-card .product-stock {
|
|
margin-left: auto; font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
.stock-ok { color: var(--color-success); }
|
|
.stock-low { color: var(--color-warning); }
|
|
.stock-out { color: var(--color-error); }
|
|
.product-card .product-actions {
|
|
padding: var(--space-3) var(--space-5);
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex; gap: var(--space-2);
|
|
}
|
|
.product-card .product-actions .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ====== Client Card ====== */
|
|
.client-card .client-header {
|
|
display: flex; align-items: center; gap: var(--space-4);
|
|
padding: var(--space-5);
|
|
}
|
|
.client-card .client-avatar {
|
|
width: 52px; height: 52px;
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
border-radius: var(--radius-full);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: var(--font-heading); font-size: var(--text-h5);
|
|
font-weight: var(--heading-weight-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
[data-theme="industrial"] .client-card .client-avatar {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.client-card .client-name {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-h5); font-weight: var(--heading-weight-secondary);
|
|
}
|
|
.client-card .client-type {
|
|
font-size: var(--text-caption); color: var(--color-text-muted);
|
|
text-transform: uppercase; letter-spacing: var(--tracking-wider);
|
|
}
|
|
.client-card .client-stats {
|
|
display: grid; grid-template-columns: repeat(3, 1fr);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
.client-card .client-stat {
|
|
padding: var(--space-3); text-align: center;
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
.client-card .client-stat:last-child { border-right: none; }
|
|
.client-card .stat-value {
|
|
font-family: var(--font-mono); font-size: var(--text-body-lg);
|
|
font-weight: var(--font-weight-bold); color: var(--color-text-accent);
|
|
}
|
|
.client-card .stat-label {
|
|
font-size: var(--text-caption); color: var(--color-text-muted);
|
|
}
|
|
.client-card .client-actions {
|
|
padding: var(--space-3) var(--space-5);
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex; gap: var(--space-2); justify-content: flex-end;
|
|
}
|
|
|
|
/* ====== Summary / Dashboard Card ====== */
|
|
.summary-card .card-body {
|
|
display: flex; align-items: center; gap: var(--space-4);
|
|
}
|
|
.summary-card .summary-icon {
|
|
width: 56px; height: 56px;
|
|
background: var(--color-primary-muted);
|
|
color: var(--color-primary);
|
|
border-radius: var(--radius-md);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 28px; flex-shrink: 0;
|
|
}
|
|
[data-theme="modern"] .summary-card .summary-icon {
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
.summary-card .summary-content { flex: 1; }
|
|
.summary-card .summary-label {
|
|
font-size: var(--text-body-sm); color: var(--color-text-muted);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.summary-card .summary-value {
|
|
font-family: var(--font-heading); font-size: var(--text-h3);
|
|
font-weight: var(--heading-weight-primary);
|
|
line-height: 1;
|
|
}
|
|
.summary-card .summary-change {
|
|
font-size: var(--text-caption); margin-top: var(--space-1);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
.summary-card .summary-change.positive { color: var(--color-success); }
|
|
.summary-card .summary-change.negative { color: var(--color-error); }
|
|
|
|
/* ====== Buttons inside cards ====== */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-4);
|
|
font-family: var(--font-body); font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
border: 2px solid transparent; border-radius: var(--radius-md);
|
|
cursor: pointer; transition: var(--transition-fast);
|
|
text-decoration: none; white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--btn-primary-bg); color: var(--btn-primary-text);
|
|
}
|
|
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
|
|
.btn-secondary {
|
|
background: var(--btn-secondary-bg); color: var(--btn-secondary-text);
|
|
border-color: var(--btn-secondary-border);
|
|
}
|
|
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
|
|
.btn-ghost {
|
|
background: var(--btn-ghost-bg); color: var(--btn-ghost-text);
|
|
border-color: var(--btn-ghost-border);
|
|
}
|
|
.btn-ghost:hover { background: var(--color-surface-2); }
|
|
|
|
[data-theme="industrial"] .btn-primary {
|
|
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
|
|
border-radius: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="theme-switcher">
|
|
<button class="active" onclick="setTheme('industrial')">Industrial Robusto</button>
|
|
<button onclick="setTheme('modern')">Tecnico Moderno</button>
|
|
</div>
|
|
|
|
<h1>Cards</h1>
|
|
<p class="subtitle">Tarjetas para producto, cliente y resumen/dashboard del sistema POS.</p>
|
|
|
|
<!-- Product Cards -->
|
|
<section>
|
|
<h2>Product Card</h2>
|
|
<p class="label-text">Tarjeta de producto para catalogo e inventario</p>
|
|
<div class="card-grid">
|
|
<!-- Product 1 - In Stock -->
|
|
<div class="card product-card">
|
|
<div class="product-image">⚙</div>
|
|
<div class="product-info">
|
|
<div class="product-category">Frenos</div>
|
|
<div class="product-name">Balatas Ceramicas Brembo</div>
|
|
<div class="product-sku">SKU: BRM-BLT-P68064N</div>
|
|
<div class="product-compat">
|
|
<span class="compat-tag">Nissan Sentra 2019-2024</span>
|
|
<span class="compat-tag">Nissan Versa 2020-2024</span>
|
|
<span class="compat-tag">+3 mas</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-pricing">
|
|
<span class="product-price">$892.00</span>
|
|
<span class="product-price-old">$1,050.00</span>
|
|
<span class="product-stock stock-ok">24 en stock</span>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-primary">✚ Agregar</button>
|
|
<button class="btn btn-ghost">Ver detalle</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 2 - Low Stock -->
|
|
<div class="card product-card">
|
|
<div class="product-image">🛠</div>
|
|
<div class="product-info">
|
|
<div class="product-category">Motor</div>
|
|
<div class="product-name">Aceite Sintetico Mobil 1 5W-30</div>
|
|
<div class="product-sku">SKU: MOB-OIL-5W30-1L</div>
|
|
<div class="product-compat">
|
|
<span class="compat-tag">Universal</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-pricing">
|
|
<span class="product-price">$345.00</span>
|
|
<span class="product-stock stock-low">3 en stock</span>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-primary">✚ Agregar</button>
|
|
<button class="btn btn-ghost">Ver detalle</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product 3 - Out of Stock -->
|
|
<div class="card product-card">
|
|
<div class="product-image" style="opacity: 0.4;">🔧</div>
|
|
<div class="product-info">
|
|
<div class="product-category">Suspension</div>
|
|
<div class="product-name">Amortiguador Monroe Sensatrac</div>
|
|
<div class="product-sku">SKU: MNR-AMT-72321</div>
|
|
<div class="product-compat">
|
|
<span class="compat-tag">Chevrolet Aveo 2012-2018</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-pricing">
|
|
<span class="product-price">$1,650.00</span>
|
|
<span class="product-stock stock-out">Sin stock</span>
|
|
</div>
|
|
<div class="product-actions">
|
|
<button class="btn btn-secondary" disabled>Sin stock</button>
|
|
<button class="btn btn-ghost">Ver detalle</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Client Cards -->
|
|
<section>
|
|
<h2>Client Card</h2>
|
|
<p class="label-text">Tarjeta de cliente con informacion y estadisticas</p>
|
|
<div class="card-grid">
|
|
<!-- Client 1 - Taller -->
|
|
<div class="card client-card">
|
|
<div class="client-header">
|
|
<div class="client-avatar">TM</div>
|
|
<div>
|
|
<div class="client-name">Taller Mecanico El Rapido</div>
|
|
<div class="client-type">Taller · Mayoreo</div>
|
|
</div>
|
|
</div>
|
|
<div class="client-stats">
|
|
<div class="client-stat">
|
|
<div class="stat-value">$45.2K</div>
|
|
<div class="stat-label">Compras</div>
|
|
</div>
|
|
<div class="client-stat">
|
|
<div class="stat-value">127</div>
|
|
<div class="stat-label">Ordenes</div>
|
|
</div>
|
|
<div class="client-stat">
|
|
<div class="stat-value">$2.1K</div>
|
|
<div class="stat-label">Saldo</div>
|
|
</div>
|
|
</div>
|
|
<div class="client-actions">
|
|
<button class="btn btn-ghost">Historial</button>
|
|
<button class="btn btn-secondary">Nueva venta</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client 2 - Refaccionaria -->
|
|
<div class="card client-card">
|
|
<div class="client-header">
|
|
<div class="client-avatar">RA</div>
|
|
<div>
|
|
<div class="client-name">Refacciones Alvarez</div>
|
|
<div class="client-type">Refaccionaria · Credito</div>
|
|
</div>
|
|
</div>
|
|
<div class="client-stats">
|
|
<div class="client-stat">
|
|
<div class="stat-value">$128K</div>
|
|
<div class="stat-label">Compras</div>
|
|
</div>
|
|
<div class="client-stat">
|
|
<div class="stat-value">342</div>
|
|
<div class="stat-label">Ordenes</div>
|
|
</div>
|
|
<div class="client-stat">
|
|
<div class="stat-value">$8.5K</div>
|
|
<div class="stat-label">Saldo</div>
|
|
</div>
|
|
</div>
|
|
<div class="client-actions">
|
|
<button class="btn btn-ghost">Historial</button>
|
|
<button class="btn btn-secondary">Nueva venta</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client 3 - Publico General -->
|
|
<div class="card client-card">
|
|
<div class="client-header">
|
|
<div class="client-avatar">JL</div>
|
|
<div>
|
|
<div class="client-name">Jose Luis Martinez</div>
|
|
<div class="client-type">Publico General</div>
|
|
</div>
|
|
</div>
|
|
<div class="client-stats">
|
|
<div class="client-stat">
|
|
<div class="stat-value">$3.4K</div>
|
|
<div class="stat-label">Compras</div>
|
|
</div>
|
|
<div class="client-stat">
|
|
<div class="stat-value">8</div>
|
|
<div class="stat-label">Ordenes</div>
|
|
</div>
|
|
<div class="client-stat">
|
|
<div class="stat-value">$0</div>
|
|
<div class="stat-label">Saldo</div>
|
|
</div>
|
|
</div>
|
|
<div class="client-actions">
|
|
<button class="btn btn-ghost">Historial</button>
|
|
<button class="btn btn-secondary">Nueva venta</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Summary / Dashboard Cards -->
|
|
<section>
|
|
<h2>Summary / Dashboard Card</h2>
|
|
<p class="label-text">Tarjetas de resumen para dashboard del dueno</p>
|
|
<div class="card-grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));">
|
|
<div class="card summary-card">
|
|
<div class="card-body">
|
|
<div class="summary-icon">💰</div>
|
|
<div class="summary-content">
|
|
<div class="summary-label">Ventas del dia</div>
|
|
<div class="summary-value">$24,580</div>
|
|
<div class="summary-change positive">+12.3% vs ayer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card summary-card">
|
|
<div class="card-body">
|
|
<div class="summary-icon">📦</div>
|
|
<div class="summary-content">
|
|
<div class="summary-label">Productos vendidos</div>
|
|
<div class="summary-value">147</div>
|
|
<div class="summary-change positive">+8 vs ayer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card summary-card">
|
|
<div class="card-body">
|
|
<div class="summary-icon">👤</div>
|
|
<div class="summary-content">
|
|
<div class="summary-label">Clientes atendidos</div>
|
|
<div class="summary-value">32</div>
|
|
<div class="summary-change negative">-5 vs ayer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card summary-card">
|
|
<div class="card-body">
|
|
<div class="summary-icon">⚠</div>
|
|
<div class="summary-content">
|
|
<div class="summary-label">Productos stock bajo</div>
|
|
<div class="summary-value">18</div>
|
|
<div class="summary-change negative">+3 nuevos</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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.toLowerCase().includes(theme === 'industrial' ? 'industrial' : 'tecnico'));
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|