76 lines
2.7 KiB
HTML
76 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Comprobante de Venta</title>
|
|
<link rel="stylesheet" href="css/comprobante.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Comprobante de Venta</h1>
|
|
|
|
<div class="comprobante" id="comprobante-imprimible">
|
|
<div class="header">
|
|
<h2>Boletos para Concierto - Sala Principal</h2>
|
|
</div>
|
|
|
|
<div class="info-venta">
|
|
<div>
|
|
<div class="info-item">
|
|
<span class="info-label">Nº de Venta:</span>
|
|
<span id="id-venta"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Fecha:</span>
|
|
<span id="fecha-venta"></span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="info-item">
|
|
<span class="info-label">Cliente:</span>
|
|
<span id="cliente-venta"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Detalle de Boletos</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Ubicación</th>
|
|
<th>Precio</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="detalle-boletos">
|
|
<!-- El contenido de la tabla se generará dinámicamente con JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="total">
|
|
Total: $<span id="total-venta"></span>
|
|
</div>
|
|
|
|
<div class="qr-container">
|
|
<div id="qr-code"></div>
|
|
<p class="qr-info">Este QR contiene el número de venta para verificación</p>
|
|
</div>
|
|
|
|
<div class="mensaje">
|
|
<p>¡Gracias por su compra!</p>
|
|
<p>Este comprobante es su entrada oficial para el evento.</p>
|
|
<p>Por favor, preséntelo en la entrada del concierto.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="acciones">
|
|
<a href="index.html" class="btn">Volver a Ventas</a>
|
|
<button class="btn btn-print" onclick="imprimirComprobante()">Imprimir Comprobante</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
<script src="js/comprobante.js"></script>
|
|
</body>
|
|
</html> |