diff --git a/Interfaz/AcercaDe.html b/Interfaz/AcercaDe.html
new file mode 100644
index 0000000..06d7405
Binary files /dev/null and b/Interfaz/AcercaDe.html differ
diff --git a/Interfaz/PaginaPrincipal.html b/Interfaz/PaginaPrincipal.html
new file mode 100644
index 0000000..920e1a1
--- /dev/null
+++ b/Interfaz/PaginaPrincipal.html
@@ -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>></span></div>
+ <div class="reporteVenta">Reporte de Venta <span>></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>
diff --git a/Interfaz/VentaBoletos.html b/Interfaz/VentaBoletos.html
new file mode 100644
index 0000000..9ac3ba3
--- /dev/null
+++ b/Interfaz/VentaBoletos.html
@@ -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>
diff --git a/Interfaz/VentaBoletos.js b/Interfaz/VentaBoletos.js
new file mode 100644
index 0000000..fbd43a1
--- /dev/null
+++ b/Interfaz/VentaBoletos.js
@@ -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();