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
545 lines
20 KiB
HTML
545 lines
20 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 — Ticket Térmico</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: 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);
|
|
}
|
|
|
|
/* ====== Ticket Sizes ====== */
|
|
.tickets-row {
|
|
display: flex; gap: var(--space-8); flex-wrap: wrap;
|
|
justify-content: center; align-items: flex-start;
|
|
}
|
|
.ticket-wrapper {
|
|
text-align: center;
|
|
}
|
|
.ticket-label {
|
|
font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-accent); margin-bottom: var(--space-3);
|
|
text-transform: uppercase; letter-spacing: var(--tracking-wide);
|
|
}
|
|
|
|
/* ====== Ticket Base ====== */
|
|
.ticket {
|
|
background: #ffffff; color: #000000;
|
|
font-family: 'Courier New', 'Consolas', monospace;
|
|
font-size: 11px; line-height: 1.4;
|
|
padding: 12px; text-align: left;
|
|
border: 1px dashed #ccc;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
.ticket-58 { width: 219px; /* 58mm ≈ 219px at 96dpi */ }
|
|
.ticket-80 { width: 302px; /* 80mm ≈ 302px at 96dpi */ }
|
|
|
|
.ticket .store-name {
|
|
font-size: 14px; font-weight: bold; text-align: center;
|
|
margin-bottom: 2px;
|
|
}
|
|
.ticket .store-tagline {
|
|
font-size: 9px; text-align: center; color: #555;
|
|
margin-bottom: 4px;
|
|
}
|
|
.ticket .store-info {
|
|
font-size: 9px; text-align: center; color: #333;
|
|
margin-bottom: 6px; line-height: 1.3;
|
|
}
|
|
|
|
.ticket .divider {
|
|
border: none; border-top: 1px dashed #999;
|
|
margin: 6px 0;
|
|
}
|
|
.ticket .divider-double {
|
|
border: none; border-top: 2px solid #333;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.ticket .ticket-row {
|
|
display: flex; justify-content: space-between;
|
|
}
|
|
.ticket .ticket-row .left { text-align: left; }
|
|
.ticket .ticket-row .right { text-align: right; }
|
|
|
|
.ticket .folio-line {
|
|
font-size: 10px; font-weight: bold;
|
|
display: flex; justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ticket .item-line {
|
|
margin-bottom: 3px;
|
|
}
|
|
.ticket .item-name {
|
|
font-size: 10px; font-weight: bold;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.ticket .item-detail {
|
|
display: flex; justify-content: space-between;
|
|
font-size: 10px; color: #333;
|
|
}
|
|
.ticket .item-sku {
|
|
font-size: 8px; color: #777;
|
|
}
|
|
|
|
.ticket .total-section { margin-top: 4px; }
|
|
.ticket .total-line {
|
|
display: flex; justify-content: space-between;
|
|
font-size: 11px;
|
|
}
|
|
.ticket .total-line.grand {
|
|
font-size: 14px; font-weight: bold;
|
|
margin-top: 2px; padding-top: 2px;
|
|
border-top: 1px solid #333;
|
|
}
|
|
|
|
.ticket .payment-section {
|
|
margin-top: 4px; font-size: 10px;
|
|
}
|
|
|
|
.ticket .footer-section {
|
|
text-align: center; margin-top: 8px;
|
|
font-size: 9px; color: #555;
|
|
}
|
|
.ticket .footer-section .thanks {
|
|
font-size: 11px; font-weight: bold; color: #000;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.ticket .barcode {
|
|
text-align: center; margin-top: 6px;
|
|
font-size: 24px; letter-spacing: 2px;
|
|
font-family: 'Libre Barcode 39', monospace;
|
|
}
|
|
.ticket .barcode-text {
|
|
font-size: 8px; text-align: center; color: #666;
|
|
}
|
|
|
|
/* ====== 80mm extras ====== */
|
|
.ticket-80 .item-line-wide {
|
|
display: grid; grid-template-columns: auto 1fr auto auto;
|
|
gap: 8px; align-items: baseline;
|
|
font-size: 10px; margin-bottom: 3px;
|
|
}
|
|
.ticket-80 .item-line-wide .qty {
|
|
font-weight: bold; min-width: 24px; text-align: right;
|
|
}
|
|
.ticket-80 .item-line-wide .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.ticket-80 .item-line-wide .price { text-align: right; min-width: 55px; }
|
|
.ticket-80 .item-line-wide .subtotal { text-align: right; font-weight: bold; min-width: 60px; }
|
|
|
|
/* ====== Print Styles ====== */
|
|
@media print {
|
|
body { background: #fff; padding: 0; }
|
|
.theme-switcher, h1, .subtitle, section > h2,
|
|
.label-text, .ticket-wrapper .ticket-label,
|
|
.print-btn { display: none !important; }
|
|
.tickets-row { justify-content: flex-start; }
|
|
.ticket {
|
|
border: none; box-shadow: none; padding: 4px;
|
|
page-break-inside: avoid;
|
|
}
|
|
}
|
|
|
|
/* ====== Print Button ====== */
|
|
.print-btn {
|
|
display: inline-flex; align-items: center; gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-6);
|
|
background: var(--btn-primary-bg); color: var(--btn-primary-text);
|
|
font-family: var(--font-body); font-size: var(--text-body);
|
|
font-weight: var(--font-weight-semibold);
|
|
border: none; border-radius: var(--radius-md);
|
|
cursor: pointer; transition: var(--transition-fast);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.print-btn:hover { background: var(--btn-primary-bg-hover); }
|
|
</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>Ticket Térmico</h1>
|
|
<p class="subtitle">Layout de impresión para rollos de 58mm y 80mm. Fuente monoespaciada, CSS @media print.</p>
|
|
|
|
<button class="print-btn" onclick="window.print()">🖨 Imprimir Preview</button>
|
|
|
|
<!-- ============================================== -->
|
|
<!-- SECTION: 58mm vs 80mm Side by Side -->
|
|
<!-- ============================================== -->
|
|
<section>
|
|
<h2>Comparativa: 58mm vs 80mm</h2>
|
|
<p class="label-text">Ambos formatos con los mismos datos de venta</p>
|
|
|
|
<div class="tickets-row">
|
|
<!-- ===== 58mm Ticket ===== -->
|
|
<div class="ticket-wrapper">
|
|
<div class="ticket-label">58mm (Mini Printer)</div>
|
|
<div class="ticket ticket-58">
|
|
<div class="store-name">NEXUS AUTOPARTS</div>
|
|
<div class="store-tagline">Tu conexión con las refacciones</div>
|
|
<div class="store-info">
|
|
Av. Insurgentes Sur 1234<br>
|
|
Col. Del Valle, CDMX 03100<br>
|
|
Tel: (55) 1234-5678<br>
|
|
RFC: NAU210315XX1
|
|
</div>
|
|
|
|
<hr class="divider-double">
|
|
|
|
<div class="folio-line">
|
|
<span>VENTA: V-0847</span>
|
|
<span>01/04/2026</span>
|
|
</div>
|
|
<div class="ticket-row" style="font-size: 9px; color: #555; margin-bottom: 4px;">
|
|
<span>Cajero: Carlos M.</span>
|
|
<span>14:32</span>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- Items -->
|
|
<div class="item-line">
|
|
<div class="item-name">Balatas cer. del. Brembo</div>
|
|
<div class="item-sku">SKU: BRM-P68034</div>
|
|
<div class="item-detail">
|
|
<span>2 x $1,250.00</span>
|
|
<span>$2,500.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-line">
|
|
<div class="item-name">Filtro aceite Wix WL7200</div>
|
|
<div class="item-sku">SKU: WIX-7200</div>
|
|
<div class="item-detail">
|
|
<span>1 x $185.00</span>
|
|
<span>$185.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-line">
|
|
<div class="item-name">Amort. trasero Monroe OESpec</div>
|
|
<div class="item-sku">SKU: MON-72364</div>
|
|
<div class="item-detail">
|
|
<span>2 x $1,071.25</span>
|
|
<span>$2,142.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider-double">
|
|
|
|
<!-- Totals -->
|
|
<div class="total-section">
|
|
<div class="total-line">
|
|
<span>Subtotal:</span><span>$4,161.64</span>
|
|
</div>
|
|
<div class="total-line">
|
|
<span>IVA 16%:</span><span>$665.86</span>
|
|
</div>
|
|
<div class="total-line grand">
|
|
<span>TOTAL:</span><span>$4,827.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- Payment -->
|
|
<div class="payment-section">
|
|
<div class="ticket-row">
|
|
<span>Forma pago:</span><span>Efectivo</span>
|
|
</div>
|
|
<div class="ticket-row">
|
|
<span>Recibido:</span><span>$5,000.00</span>
|
|
</div>
|
|
<div class="ticket-row" style="font-weight: bold;">
|
|
<span>Cambio:</span><span>$172.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<div class="footer-section">
|
|
<div class="thanks">¡Gracias por su compra!</div>
|
|
<div>Garantía sujeta a condiciones</div>
|
|
<div>del fabricante. Conserve su ticket.</div>
|
|
<div style="margin-top: 4px;">www.nexusautoparts.com</div>
|
|
</div>
|
|
|
|
<div class="barcode">||||| |||| |||||</div>
|
|
<div class="barcode-text">V-2026-0847</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== 80mm Ticket ===== -->
|
|
<div class="ticket-wrapper">
|
|
<div class="ticket-label">80mm (Standard POS)</div>
|
|
<div class="ticket ticket-80">
|
|
<div class="store-name">NEXUS AUTOPARTS</div>
|
|
<div class="store-tagline">Tu conexión con las refacciones</div>
|
|
<div class="store-info">
|
|
Av. Insurgentes Sur 1234, Col. Del Valle<br>
|
|
Ciudad de México, CP 03100 | Tel: (55) 1234-5678<br>
|
|
RFC: NAU210315XX1
|
|
</div>
|
|
|
|
<hr class="divider-double">
|
|
|
|
<div class="folio-line">
|
|
<span>VENTA: V-2026-0847</span>
|
|
<span>01/Abr/2026 14:32</span>
|
|
</div>
|
|
<div class="ticket-row" style="font-size: 9px; color: #555; margin-bottom: 4px;">
|
|
<span>Cajero: Carlos Martínez</span>
|
|
<span>Sucursal: Matriz</span>
|
|
</div>
|
|
<div class="ticket-row" style="font-size: 9px; color: #555; margin-bottom: 2px;">
|
|
<span>Cliente: Taller Automotriz García</span>
|
|
<span>RFC: TAU150301XX1</span>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- Column Headers -->
|
|
<div class="item-line-wide" style="font-weight: bold; font-size: 9px; color: #555; text-transform: uppercase;">
|
|
<span class="qty">Cant</span>
|
|
<span class="name">Descripción</span>
|
|
<span class="price">P. Unit</span>
|
|
<span class="subtotal">Importe</span>
|
|
</div>
|
|
<hr class="divider" style="margin: 2px 0;">
|
|
|
|
<!-- Items -->
|
|
<div class="item-line-wide">
|
|
<span class="qty">2</span>
|
|
<span class="name">Balatas cerám. del. Brembo P68034</span>
|
|
<span class="price">$1,250.00</span>
|
|
<span class="subtotal">$2,500.00</span>
|
|
</div>
|
|
<div class="item-line-wide">
|
|
<span class="qty">1</span>
|
|
<span class="name">Filtro aceite Wix WL7200</span>
|
|
<span class="price">$185.00</span>
|
|
<span class="subtotal">$185.00</span>
|
|
</div>
|
|
<div class="item-line-wide">
|
|
<span class="qty">2</span>
|
|
<span class="name">Amortiguador tras. Monroe OESpec 72364</span>
|
|
<span class="price">$1,071.25</span>
|
|
<span class="subtotal">$2,142.50</span>
|
|
</div>
|
|
|
|
<hr class="divider-double">
|
|
|
|
<!-- Totals -->
|
|
<div class="total-section">
|
|
<div class="total-line">
|
|
<span>Subtotal (3 artículos, 5 piezas):</span><span>$4,161.64</span>
|
|
</div>
|
|
<div class="total-line">
|
|
<span>IVA 16%:</span><span>$665.86</span>
|
|
</div>
|
|
<div class="total-line" style="font-size: 10px; color: #777;">
|
|
<span>Descuento:</span><span>$0.00</span>
|
|
</div>
|
|
<div class="total-line grand">
|
|
<span>TOTAL:</span><span>$4,827.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- Payment -->
|
|
<div class="payment-section">
|
|
<div class="ticket-row">
|
|
<span>Forma de pago:</span><span>01 — Efectivo</span>
|
|
</div>
|
|
<div class="ticket-row">
|
|
<span>Monto recibido:</span><span>$5,000.00</span>
|
|
</div>
|
|
<div class="ticket-row" style="font-weight: bold;">
|
|
<span>Cambio:</span><span>$172.50</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<!-- CFDI -->
|
|
<div style="font-size: 9px; color: #555; text-align: center; margin: 4px 0;">
|
|
CFDI Timbrado: UUID a1b2c3d4-e5f6-7890-abcd-ef1234567890<br>
|
|
Uso CFDI: G03 — Gastos en general<br>
|
|
Régimen: 601 — General de Ley
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
|
|
<div class="footer-section">
|
|
<div class="thanks">¡Gracias por su compra!</div>
|
|
<div>Garantía sujeta a condiciones del fabricante.</div>
|
|
<div>Conserve su ticket como comprobante.</div>
|
|
<div>Cambios y devoluciones: 15 días con ticket.</div>
|
|
<div style="margin-top: 4px;">www.nexusautoparts.com</div>
|
|
</div>
|
|
|
|
<div class="barcode">||||| |||| ||||| ||| ||||</div>
|
|
<div class="barcode-text">V-2026-0847</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================== -->
|
|
<!-- SECTION: Ticket Variants -->
|
|
<!-- ============================================== -->
|
|
<section>
|
|
<h2>Variantes de Ticket</h2>
|
|
<p class="label-text">Cotización y Corte de Caja</p>
|
|
|
|
<div class="tickets-row">
|
|
<!-- Cotización -->
|
|
<div class="ticket-wrapper">
|
|
<div class="ticket-label">Cotización (80mm)</div>
|
|
<div class="ticket ticket-80">
|
|
<div class="store-name">NEXUS AUTOPARTS</div>
|
|
<div class="store-info">Av. Insurgentes Sur 1234 | Tel: (55) 1234-5678</div>
|
|
<hr class="divider-double">
|
|
<div style="text-align: center; font-weight: bold; font-size: 13px; margin: 4px 0;">
|
|
*** COTIZACIÓN ***
|
|
</div>
|
|
<div class="folio-line">
|
|
<span>COT-2026-0312</span>
|
|
<span>01/Abr/2026</span>
|
|
</div>
|
|
<div style="font-size: 9px; color: #555; margin-bottom: 4px;">
|
|
Cliente: Taller Automotriz García | Vigencia: 7 días
|
|
</div>
|
|
<hr class="divider">
|
|
<div class="item-line-wide" style="font-weight: bold; font-size: 9px;">
|
|
<span class="qty">Cant</span><span class="name">Descripción</span>
|
|
<span class="price">P. Unit</span><span class="subtotal">Importe</span>
|
|
</div>
|
|
<hr class="divider" style="margin: 2px 0;">
|
|
<div class="item-line-wide">
|
|
<span class="qty">2</span><span class="name">Balatas cerám. del. Brembo</span>
|
|
<span class="price">$1,250.00</span><span class="subtotal">$2,500.00</span>
|
|
</div>
|
|
<div class="item-line-wide">
|
|
<span class="qty">1</span><span class="name">Filtro aceite Wix WL7200</span>
|
|
<span class="price">$185.00</span><span class="subtotal">$185.00</span>
|
|
</div>
|
|
<hr class="divider-double">
|
|
<div class="total-line grand">
|
|
<span>TOTAL:</span><span>$2,685.00</span>
|
|
</div>
|
|
<div style="font-size: 9px; color: #555; text-align: center; margin-top: 6px;">
|
|
Precios sujetos a cambio sin previo aviso.<br>
|
|
Esta cotización NO es un comprobante fiscal.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Corte de Caja -->
|
|
<div class="ticket-wrapper">
|
|
<div class="ticket-label">Corte de Caja (80mm)</div>
|
|
<div class="ticket ticket-80">
|
|
<div class="store-name">NEXUS AUTOPARTS</div>
|
|
<div class="store-info">Sucursal: Matriz | Caja: 01</div>
|
|
<hr class="divider-double">
|
|
<div style="text-align: center; font-weight: bold; font-size: 13px; margin: 4px 0;">
|
|
*** CORTE DE CAJA ***
|
|
</div>
|
|
<div class="folio-line">
|
|
<span>Cajero: Carlos M.</span>
|
|
<span>01/Abr/2026</span>
|
|
</div>
|
|
<div style="font-size: 9px; color: #555; margin-bottom: 4px;">
|
|
Apertura: 08:00 | Cierre: 20:00
|
|
</div>
|
|
<hr class="divider">
|
|
<div style="font-weight: bold; font-size: 10px; margin-bottom: 4px;">RESUMEN DE VENTAS</div>
|
|
<div class="ticket-row"><span>Ventas realizadas:</span><span>47</span></div>
|
|
<div class="ticket-row"><span>Artículos vendidos:</span><span>128</span></div>
|
|
<div class="ticket-row"><span>Cancelaciones:</span><span>2</span></div>
|
|
<div class="ticket-row"><span>Devoluciones:</span><span>1</span></div>
|
|
<hr class="divider">
|
|
<div style="font-weight: bold; font-size: 10px; margin-bottom: 4px;">FORMAS DE PAGO</div>
|
|
<div class="ticket-row"><span>Efectivo:</span><span>$35,420.00</span></div>
|
|
<div class="ticket-row"><span>Tarjeta crédito:</span><span>$12,850.00</span></div>
|
|
<div class="ticket-row"><span>Tarjeta débito:</span><span>$8,200.00</span></div>
|
|
<div class="ticket-row"><span>Transferencia:</span><span>$5,670.00</span></div>
|
|
<hr class="divider-double">
|
|
<div class="total-line grand"><span>TOTAL:</span><span>$62,140.00</span></div>
|
|
<hr class="divider">
|
|
<div style="font-weight: bold; font-size: 10px; margin-bottom: 4px;">EFECTIVO EN CAJA</div>
|
|
<div class="ticket-row"><span>Fondo apertura:</span><span>$3,000.00</span></div>
|
|
<div class="ticket-row"><span>+ Cobros efectivo:</span><span>$35,420.00</span></div>
|
|
<div class="ticket-row"><span>- Retiros:</span><span>$15,000.00</span></div>
|
|
<div class="ticket-row" style="font-weight: bold;"><span>Debe haber:</span><span>$23,420.00</span></div>
|
|
<div class="ticket-row"><span>Conteo físico:</span><span>$23,380.00</span></div>
|
|
<div class="ticket-row" style="color: #c00; font-weight: bold;"><span>Diferencia:</span><span>-$40.00</span></div>
|
|
<hr class="divider">
|
|
<div class="footer-section">
|
|
<div style="margin-top: 20px; font-size: 9px;">
|
|
Firma cajero: _______________<br><br>
|
|
Firma supervisor: _______________
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|