maria.ruiz
/
TicketMerc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Subir archivos a "Interfaz"

This commit is contained in:
maria.ruiz 2025-03-03 01:11:28 +00:00
parent e5781b03b3
commit a563cdcd85
4 changed files with 121 additions and 0 deletions

BIN
Interfaz/AcercaDe.html Normal file
View File

Binary file not shown.

38
Interfaz/PaginaPrincipal.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticket Merc</title>
<link rel="stylesheet" href="estilos/inicio.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="background-color: #f9f7f4;">
<br>
<div class="">
<ul class="nav nav-pills mb-3 nav justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Inicio</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Acerca de</button>
</li>
</ul>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div class="container">
<div class="title">TICKET <br> MERC</div>
<div class="button-container">
<div class="ventaBoletos" onclick="window.location.href='VentaBoletos.html'">Venta de Boletos <span>&gt;</span></div>
<div class="reporteVenta">Reporte de Venta <span>&gt;</span></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

33
Interfaz/VentaBoletos.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selección de Asientos</title>
<link rel="stylesheet" href="estilos/ventaboletos.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="background-color: #f9f7f4;">
<br>
<div class="inicio-container">
<ul class="nav nav-pills mb-3 nav justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Inicio</button>
</li>
</ul>
</div>
<div class="conjunto">
<h2>Marzo</h2>
<div class="dias" class="btn-group" role="group">
<button class="btn btn-primary" onclick="seleccionarDia(22)">22</button>
<button class="btn btn-primary" class="selected" onclick="seleccionarDia(23)">23</button>
<button class="btn btn-primary" onclick="seleccionarDia(24)">24</button>
</div>
<div class="grid" id="asientos"></div>
<button class="boton-vender" onclick="venderAsientos()">Vender</button>
</div>
<script src="scripts/VentaBoletos.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

50
Interfaz/VentaBoletos.js Normal file
View File

@ -0,0 +1,50 @@
const filas = 10;
const columnas = 12;
let diaSeleccionado = 23;
const asientosVendidos = { 22: new Set(), 23: new Set(), 24: new Set() };
let asientosSeleccionados = new Set();
function seleccionarDia(dia) {
diaSeleccionado = dia;
asientosSeleccionados.clear();
document.querySelectorAll('.dias button').forEach(btn => btn.classList.remove('selected'));
event.target.classList.add('selected');
renderizarAsientos();
}
function toggleAsiento(asiento) {
if (asientosVendidos[diaSeleccionado].has(asiento)) return;
if (asientosSeleccionados.has(asiento)) {
asientosSeleccionados.delete(asiento);
} else {
asientosSeleccionados.add(asiento);
}
renderizarAsientos();
}
function venderAsientos() {
asientosSeleccionados.forEach(asiento => asientosVendidos[diaSeleccionado].add(asiento));
asientosSeleccionados.clear();
renderizarAsientos();
}
function renderizarAsientos() {
const contenedor = document.getElementById('asientos');
contenedor.innerHTML = '';
for (let i = 0; i < filas * columnas; i++) {
const asiento = `${Math.floor(i / columnas) + 1}${String.fromCharCode(65 + (i % columnas))}`;
const boton = document.createElement('button');
boton.className = 'asiento';
if (asientosVendidos[diaSeleccionado].has(asiento)) {
boton.classList.add('vendido');
} else if (asientosSeleccionados.has(asiento)) {
boton.style.backgroundColor = 'orange';
}
boton.textContent = asiento;
boton.onclick = () => toggleAsiento(asiento);
contenedor.appendChild(boton);
}
}
renderizarAsientos();