ccd3962458
Bloqueantes POS: modal-pago, ticket-termico, banner-cliente, fkeys-footer, columnas-costo-margen Componentes nuevos: calculadora-cambio, panel-deslizante, badge-cfdi, arbol-colapsable, tarjeta-metrica, grafica-barras, selector-periodo, etiqueta-codigo-barras Estados: estado-vacio, banner-offline, modal-confirmacion Páginas actualizadas: facturación, contabilidad, dashboard, configuración, reportes
339 lines
14 KiB
HTML
339 lines
14 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 — F-Keys Footer</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);
|
|
padding-bottom: 120px;
|
|
transition: var(--transition-normal);
|
|
}
|
|
.theme-switcher {
|
|
position: sticky; top: 0; z-index: calc(var(--z-modal) + 10);
|
|
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);
|
|
}
|
|
|
|
/* ====== F-Keys Footer Bar ====== */
|
|
.fkeys-footer {
|
|
position: fixed; bottom: 0; left: 0; right: 0;
|
|
background: var(--color-surface-2);
|
|
border-top: 2px solid var(--color-primary);
|
|
padding: var(--space-2) var(--space-4);
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: var(--space-1);
|
|
z-index: var(--z-sticky);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.fkey {
|
|
display: flex; align-items: center; gap: var(--space-1);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: transparent; border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer; transition: var(--transition-fast);
|
|
white-space: nowrap; flex-shrink: 0;
|
|
}
|
|
.fkey:hover {
|
|
background: var(--color-primary-muted);
|
|
border-color: var(--color-primary);
|
|
}
|
|
.fkey:active {
|
|
background: var(--color-primary);
|
|
transform: scale(0.96);
|
|
}
|
|
.fkey:active .fkey-label { color: var(--color-text-inverse); }
|
|
.fkey:active .fkey-key { background: rgba(0,0,0,0.2); color: var(--color-text-inverse); border-color: transparent; }
|
|
|
|
.fkey-key {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
min-width: 28px; height: 22px;
|
|
padding: 0 var(--space-2);
|
|
background: var(--color-bg-base);
|
|
border: 1px solid var(--color-border-strong);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-mono); font-size: 11px;
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-accent);
|
|
line-height: 1;
|
|
}
|
|
.fkey-label {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Separator */
|
|
.fkey-sep {
|
|
width: 1px; height: 24px;
|
|
background: var(--color-border);
|
|
margin: 0 var(--space-1);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Highlight key (F3 = Cobrar) */
|
|
.fkey.highlight {
|
|
background: var(--color-primary-muted);
|
|
border-color: var(--color-primary);
|
|
}
|
|
.fkey.highlight .fkey-key {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
border-color: var(--color-primary);
|
|
}
|
|
.fkey.highlight .fkey-label {
|
|
color: var(--color-text-accent);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
/* ====== Inline Preview (non-fixed) ====== */
|
|
.fkeys-inline {
|
|
position: relative;
|
|
background: var(--color-surface-2);
|
|
border: 2px solid var(--color-primary);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-2) var(--space-4);
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: var(--space-1);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ====== Responsive: Stack on mobile ====== */
|
|
@media (max-width: 768px) {
|
|
.fkeys-footer, .fkeys-inline {
|
|
flex-wrap: wrap; gap: var(--space-1);
|
|
padding: var(--space-2);
|
|
}
|
|
.fkey {
|
|
padding: var(--space-1) var(--space-2);
|
|
}
|
|
.fkey-label { font-size: 10px; }
|
|
.fkey-key { min-width: 24px; height: 20px; font-size: 10px; }
|
|
.fkey-sep { display: none; }
|
|
}
|
|
|
|
/* ====== Compact variant ====== */
|
|
.fkeys-compact .fkey {
|
|
padding: var(--space-1) var(--space-2);
|
|
border: none; background: transparent;
|
|
}
|
|
.fkeys-compact .fkey:hover {
|
|
background: var(--color-primary-muted);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.fkeys-compact .fkey-key {
|
|
min-width: 22px; height: 18px; font-size: 10px;
|
|
padding: 0 4px;
|
|
}
|
|
.fkeys-compact .fkey-label { font-size: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Theme Switcher -->
|
|
<div class="theme-switcher">
|
|
<button class="active" onclick="setTheme('industrial')">A — Industrial Robusto</button>
|
|
<button onclick="setTheme('modern')">B — Técnico Moderno</button>
|
|
</div>
|
|
|
|
<h1>F-Keys Footer</h1>
|
|
<p class="subtitle">Barra fija inferior con atajos de teclado del POS: F1-F6, +/-, *, Esc.</p>
|
|
|
|
<!-- ============================================== -->
|
|
<!-- SECTION: Standard Footer -->
|
|
<!-- ============================================== -->
|
|
<section>
|
|
<h2>Barra Estándar (Fixed Bottom)</h2>
|
|
<p class="label-text">Preview inline — la barra real se muestra fija abajo de la página</p>
|
|
|
|
<div class="fkeys-inline">
|
|
<div class="fkey" title="Buscar producto">
|
|
<span class="fkey-key">F1</span>
|
|
<span class="fkey-label">Buscar</span>
|
|
</div>
|
|
<div class="fkey" title="Seleccionar cliente">
|
|
<span class="fkey-key">F2</span>
|
|
<span class="fkey-label">Cliente</span>
|
|
</div>
|
|
<div class="fkey highlight" title="Cobrar venta">
|
|
<span class="fkey-key">F3</span>
|
|
<span class="fkey-label">Cobrar</span>
|
|
</div>
|
|
<div class="fkey" title="Generar cotización">
|
|
<span class="fkey-key">F4</span>
|
|
<span class="fkey-label">Cotización</span>
|
|
</div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey" title="Última venta">
|
|
<span class="fkey-key">F5</span>
|
|
<span class="fkey-label">Últ.Venta</span>
|
|
</div>
|
|
<div class="fkey" title="Abrir cajón de dinero">
|
|
<span class="fkey-key">F6</span>
|
|
<span class="fkey-label">Cajón</span>
|
|
</div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey" title="Aumentar / Disminuir cantidad">
|
|
<span class="fkey-key">+/-</span>
|
|
<span class="fkey-label">Cantidad</span>
|
|
</div>
|
|
<div class="fkey" title="Aplicar descuento">
|
|
<span class="fkey-key">*</span>
|
|
<span class="fkey-label">Descuento</span>
|
|
</div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey" title="Cancelar / Limpiar venta">
|
|
<span class="fkey-key">Esc</span>
|
|
<span class="fkey-label">Cancelar</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================== -->
|
|
<!-- SECTION: Compact Variant -->
|
|
<!-- ============================================== -->
|
|
<section>
|
|
<h2>Variante Compacta</h2>
|
|
<p class="label-text">Para pantallas chicas o cuando se necesita más espacio</p>
|
|
|
|
<div class="fkeys-inline fkeys-compact">
|
|
<div class="fkey"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
|
<div class="fkey"><span class="fkey-key">F2</span><span class="fkey-label">Cliente</span></div>
|
|
<div class="fkey highlight"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
|
<div class="fkey"><span class="fkey-key">F4</span><span class="fkey-label">Cotización</span></div>
|
|
<div class="fkey"><span class="fkey-key">F5</span><span class="fkey-label">Últ.Venta</span></div>
|
|
<div class="fkey"><span class="fkey-key">F6</span><span class="fkey-label">Cajón</span></div>
|
|
<div class="fkey"><span class="fkey-key">+/-</span><span class="fkey-label">Cant</span></div>
|
|
<div class="fkey"><span class="fkey-key">*</span><span class="fkey-label">Desc</span></div>
|
|
<div class="fkey"><span class="fkey-key">Esc</span><span class="fkey-label">Salir</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================== -->
|
|
<!-- SECTION: Extended keys -->
|
|
<!-- ============================================== -->
|
|
<section>
|
|
<h2>Variante Extendida (Admin)</h2>
|
|
<p class="label-text">Teclas adicionales para rol Admin/Owner</p>
|
|
|
|
<div class="fkeys-inline">
|
|
<div class="fkey"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
|
<div class="fkey"><span class="fkey-key">F2</span><span class="fkey-label">Cliente</span></div>
|
|
<div class="fkey highlight"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
|
<div class="fkey"><span class="fkey-key">F4</span><span class="fkey-label">Cotización</span></div>
|
|
<div class="fkey"><span class="fkey-key">F5</span><span class="fkey-label">Últ.Venta</span></div>
|
|
<div class="fkey"><span class="fkey-key">F6</span><span class="fkey-label">Cajón</span></div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey"><span class="fkey-key">F7</span><span class="fkey-label">Corte</span></div>
|
|
<div class="fkey"><span class="fkey-key">F8</span><span class="fkey-label">Devolución</span></div>
|
|
<div class="fkey"><span class="fkey-key">F9</span><span class="fkey-label">Inventario</span></div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey"><span class="fkey-key">+/-</span><span class="fkey-label">Cant</span></div>
|
|
<div class="fkey"><span class="fkey-key">*</span><span class="fkey-label">Desc</span></div>
|
|
<div class="fkey"><span class="fkey-key">Esc</span><span class="fkey-label">Cancelar</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================== -->
|
|
<!-- SECTION: Individual Key States -->
|
|
<!-- ============================================== -->
|
|
<section>
|
|
<h2>Estados de Tecla</h2>
|
|
<p class="label-text">Normal, hover, active, highlight, disabled</p>
|
|
|
|
<div style="display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center;">
|
|
<div>
|
|
<p class="label-text">Normal</p>
|
|
<div class="fkey"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
|
</div>
|
|
<div>
|
|
<p class="label-text">Highlight (primary action)</p>
|
|
<div class="fkey highlight"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
|
</div>
|
|
<div>
|
|
<p class="label-text">Disabled</p>
|
|
<div class="fkey" style="opacity: 0.4; pointer-events: none;">
|
|
<span class="fkey-key">F8</span><span class="fkey-label">Devolución</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ====== FIXED FOOTER (actual position) ====== -->
|
|
<div class="fkeys-footer">
|
|
<div class="fkey" title="Buscar producto"><span class="fkey-key">F1</span><span class="fkey-label">Buscar</span></div>
|
|
<div class="fkey" title="Seleccionar cliente"><span class="fkey-key">F2</span><span class="fkey-label">Cliente</span></div>
|
|
<div class="fkey highlight" title="Cobrar venta"><span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span></div>
|
|
<div class="fkey" title="Cotización"><span class="fkey-key">F4</span><span class="fkey-label">Cotización</span></div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey" title="Última venta"><span class="fkey-key">F5</span><span class="fkey-label">Últ.Venta</span></div>
|
|
<div class="fkey" title="Abrir cajón"><span class="fkey-key">F6</span><span class="fkey-label">Cajón</span></div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey" title="Cantidad"><span class="fkey-key">+/-</span><span class="fkey-label">Cantidad</span></div>
|
|
<div class="fkey" title="Descuento"><span class="fkey-key">*</span><span class="fkey-label">Descuento</span></div>
|
|
<div class="fkey-sep"></div>
|
|
<div class="fkey" title="Cancelar"><span class="fkey-key">Esc</span><span class="fkey-label">Cancelar</span></div>
|
|
</div>
|
|
|
|
<script>
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
document.querySelectorAll('.theme-switcher button').forEach(b => b.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
}
|
|
|
|
// Keyboard shortcuts demo
|
|
document.addEventListener('keydown', (e) => {
|
|
const keyMap = {
|
|
'F1': 'Buscar producto',
|
|
'F2': 'Seleccionar cliente',
|
|
'F3': 'Cobrar venta',
|
|
'F4': 'Generar cotización',
|
|
'F5': 'Última venta',
|
|
'F6': 'Abrir cajón',
|
|
'Escape': 'Cancelar'
|
|
};
|
|
if (keyMap[e.key]) {
|
|
e.preventDefault();
|
|
console.log('Atajo:', keyMap[e.key]);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|