121 lines
5.3 KiB
HTML
121 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sistema de Venta de Boletos</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="css/index.css">
|
|
<style>
|
|
.app-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.app-icon {
|
|
height: 40px;
|
|
width: auto;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="app-title">
|
|
<img src="images/icono.png" alt="TicketFlow Logo" class="app-icon">
|
|
<h1>TicketFlow</h1>
|
|
</div>
|
|
|
|
<div id="mensajeAlerta" class="alert alert-warning d-none" role="alert"></div>
|
|
|
|
<div class="main-content">
|
|
<div class="sala">
|
|
<h2>Selección de Asientos - Sala Principal</h2>
|
|
<div class="escenario">ESCENARIO</div>
|
|
|
|
<div class="filas" id="mapaAsientos">
|
|
<!-- El mapa de asientos se cargará dinámicamente con JavaScript -->
|
|
</div>
|
|
|
|
<div class="leyenda">
|
|
<div class="leyenda-item">
|
|
<div class="leyenda-color" style="background-color: #28a745;"></div>
|
|
<span>Disponible</span>
|
|
</div>
|
|
<div class="leyenda-item">
|
|
<div class="leyenda-color" style="background-color: #007bff;"></div>
|
|
<span>Seleccionado</span>
|
|
</div>
|
|
<div class="leyenda-item">
|
|
<div class="leyenda-color" style="background-color: #dc3545;"></div>
|
|
<span>Vendido</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar">
|
|
<div class="concierto-detalles mb-4 p-3 bg-light border rounded">
|
|
<h3 class="mb-3"><i class="bi bi-music-note-beamed"></i> Detalles del Concierto</h3>
|
|
<ul class="list-unstyled">
|
|
<li class="mb-2"><i class="bi bi-person-circle"></i> <strong>Artista:</strong> Nombre del Artista</li>
|
|
<li class="mb-2"><i class="bi bi-calendar-event"></i> <strong>Fecha:</strong> 15 de abril, 2025</li>
|
|
<li class="mb-2"><i class="bi bi-clock"></i> <strong>Hora:</strong> 20:00 hrs</li>
|
|
<li class="mb-2"><i class="bi bi-geo-alt"></i> <strong>Lugar:</strong> Arena Principal</li>
|
|
<li class="mb-2"><i class="bi bi-hourglass-split"></i> <strong>Duración:</strong> 2 horas</li>
|
|
<li class="mb-2"><i class="bi bi-door-open"></i> <strong>Apertura:</strong> 18:30 hrs</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<form id="formularioVenta">
|
|
<h3><i class="bi bi-cart"></i> Datos de Venta</h3>
|
|
<div class="form-group mb-3">
|
|
<label for="nombre_cliente"><i class="bi bi-person"></i> Nombre del Cliente:</label>
|
|
<input type="text" id="nombre_cliente" name="nombre_cliente" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="resumen" id="resumen">
|
|
<h3><i class="bi bi-ticket-perforated"></i> Resumen de Selección</h3>
|
|
<p><i class="bi bi-seat"></i> Asientos seleccionados: <span id="asientosSeleccionados">Ninguno</span></p>
|
|
<p><i class="bi bi-cash"></i> Total: $<span id="totalVenta">0.00</span></p>
|
|
<button type="submit" id="btnVender" class="btn btn-primary"><i class="bi bi-check-circle"></i> Confirmar Venta</button>
|
|
</div>
|
|
|
|
<!-- Campo oculto para almacenar IDs de asientos seleccionados -->
|
|
<div id="asientosSeleccionadosInput"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<h2>Graficos</h2>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<canvas id="graficoVendidos"></canvas>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<canvas id="graficoLibres"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-6">
|
|
<label for="fechaInicio">Fecha de Inicio:</label>
|
|
<input type="date" id="fechaInicio" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="fechaFin">Fecha de Fin:</label>
|
|
<input type="date" id="fechaFin" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-2">
|
|
<div class="col-md-12">
|
|
<button id="btnFiltrar" class="btn btn-primary">Filtrar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/index.js"></script>
|
|
</body>
|
|
</html> |