fernando.escobar
/
ProyectoTicketFei
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modifiqué archivos CSS, JS, HTML y agregué imágenes

This commit is contained in:
Alain Vasquez Ramirez 2025-02-27 15:42:15 -06:00
parent 186e564fb9
commit 58bb1526e8
11 changed files with 328 additions and 151 deletions

2
controladores/login.php
View File

@ -6,7 +6,7 @@
$password = $_POST['password'];
// Prepara la consulta
$consulta = "SELECT id, nombre, apellidoPaterno, apellidoMaterno, usuario FROM usuarios WHERE usuario = ? AND password = ?";
$consulta = "SELECT id, nombre, apellidoPaterno, apellidoMaterno, usuario FROM usuarios WHERE usuario = ? AND contraseña = ?";
$consultaPreparada = $conexionBD->prepare($consulta);
$consultaPreparada->bind_param("ss", $usuario, $password);

50
css/conciertos.css
View File

@ -124,7 +124,7 @@ nav {
.btn-comprar {
width: 100%;
background: #AAAA91;
background: #5CB85C;
color: #12122B;
font-weight: bold;
padding: 12px;
@ -136,5 +136,51 @@ nav {
}
.btn-comprar:hover {
background: #848478;
background: #4CAF50;
}
/* Contenedor del menú */
.menu-container {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
/* Botón de los tres puntos */
.menu-btn {
background: #12122B;
border: none;
font-size: 20px;
color: white;
cursor: pointer;
padding: 5px 10px;
border-radius: 30%;
}
.menu {
display: none;
position: absolute;
top: 30px;
right: 0;
background: #383845;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 20;
}
/* Opciones del menú */
.menu button {
display: block;
width: 100%;
padding: 10px;
border: none;
background: #383845;
cursor: pointer;
text-align: left;
border-radius: 5px;
}
.menu button:hover {
background: #3e3e48;
}

157
css/formulario.css
View File

@ -1,50 +1,129 @@
/* Estilo del formulario */
.form-container {
width: 400px;
background-color: #383845;
body {
background-color: #12122B;
color: #E3E3E3;
font-family: Arial, sans-serif;
padding: 20px;
border-radius: 12px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.form-container h2 {
/* Navbar */
.navbar-brand {
font-size: 1.8rem;
font-weight: bold;
color: #E3E3E3;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 25px;
}
.nav-links a {
color: #E3E3E3;
text-decoration: none;
font-size: 1.1rem;
font-weight: 500;
transition: color 0.3s;
padding-bottom: 5px;
}
.nav-links a:hover {
color: #AAAA91;
border-bottom: 3px solid #AAAA91;
}
/* Contenedor */
.container {
max-width: 600px;
margin: 50px auto;
padding: 30px;
background-color: #1E1E30;
border-radius: 12px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}
/* Formularios */
.mb-3 {
margin-bottom: 15px;
}
label {
font-weight: bold;
color: #C4C4C4;
}
input {
width: 100%;
padding: 10px;
background-color: #282828;
color: #E3E3E3;
border: 1px solid #444;
border-radius: 6px;
margin-top: 5px;
}
input:focus {
background-color: #333;
border-color: #AAAA91;
outline: none;
}
/* Botones */
.btn {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: bold;
border-radius: 8px;
transition: background 0.3s;
margin-top: 10px;
cursor: pointer;
}
.next-btn {
background: #5CB85C;
color: #12122B;
}
.next-btn:hover {
background: #4CAF50;
}
.prev-btn {
background: #444;
color: white;
}
.prev-btn:hover {
background: #666;
}
.submit-btn {
background: #5CB85C;
color: white;
}
.submit-btn:hover {
background: #4CAF50;
}
.btn next-btn {
background: #5CB85C;
}
/* Zonas */
fieldset {
border: 2px solid #444;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.form-container label {
display: block;
text-align: left;
color: #C4C4C4;
margin-bottom: 5px;
font-size: 14px;
}
.form-container input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border-radius: 6px;
border: none;
background-color: #282828;
color: #E3E3E3;
}
.form-container button {
width: 100%;
background: #AAAA91;
color: #12122B;
legend {
font-weight: bold;
padding: 12px;
border-radius: 8px;
transition: background 0.3s;
color: #E3E3E3;
font-size: 18px;
}
.form-container button:hover {
background: #848478;
/* Ocultar pasos */
.d-none {
display: none;
}

8
css/login.css
View File

@ -1,5 +1,5 @@
body {
background-color: #212529;
background-color: #12122B;
min-height: 100vh;
display: flex;
align-items: center;
@ -40,7 +40,7 @@ h2 {
.card {
background-color: #2d3238;
background-color: #1E1E30;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@ -76,7 +76,7 @@ h2 {
#btnIniciarSesion {
padding: 10px;
border-radius: 5px;
background-color: #007bff;
background-color: #5CB85C;
border: none;
color: white;
font-size: 16px;
@ -85,5 +85,5 @@ h2 {
}
#btnIniciarSesion:hover {
background-color: #0056b3;
background-color: #4CAF50;
}

11
css/ventanaPrincipal.css
View File

@ -2,17 +2,16 @@ body {
background-color: #aab2b2;
}
/* Estilos para la barra de búsqueda */
.form-control {
border-radius: 5px;
}
.btn-outline-light {
border-color: white;
border-color: 5CB85C;
}
.btn-outline-light:hover {
background-color: white;
background-color: 4CAF50;
color: black;
}
@ -26,12 +25,12 @@ h2 {
}
.btn-primary {
background-color: #007bff;
border-color: #0056b3;
background-color: #5CB85C;
border-color: #5CB85C;
}
.btn-primary:hover {
background-color: #0056b3;
background-color: #4CAF50;
}
.btn-danger {

BIN
img/concierto_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

(image error) Size: 32 KiB

BIN
img/concierto_5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

(image error) Size: 112 KiB

21
js/conciertos.js
View File

@ -39,7 +39,14 @@ async function cargarConciertos(filtro = "") {
}
tarjeta.innerHTML = `
<img src="img/concierto_${concierto.id}.jpg" alt="Concierto">
<div class="menu-container">
<button class="menu-btn">⋮</button>
<div class="menu">
<button class="edit">Editar</button>
<button class="delete">Eliminar</button>
</div>
</div>
<img src="img/concierto_${concierto.id}.jpg" alt="Concierto" class="card-img">
<div class="card-body">
<h3 class="card-title">${concierto.nombre_concierto}</h3>
<p class="card-text">🎤 ${concierto.artista}</p>
@ -72,3 +79,15 @@ buscadorBoton.addEventListener('click', (event) => {
const termino = buscadorInput.value.trim();
cargarConciertos(termino);
});
document.addEventListener("click", (e) => {
if (e.target.classList.contains("menu-btn")) {
e.stopPropagation();
let menu = e.target.nextElementSibling;
menu.style.display = menu.style.display === "block" ? "none" : "block";
} else {
document.querySelectorAll(".menu").forEach(menu => {
menu.style.display = "none";
});
}
});

121
js/crearConciertos.js
View File

@ -1,86 +1,51 @@
const formulario = document.getElementById("formulario");
const mensajeDiv = document.getElementById("mensaje");
const buscadorBoton = document.getElementById("buscadorBoton");
const buscadorInput = document.getElementById("buscadorColaborador");
const cerrarSesion = document.getElementById("cerrarSesion");
document.addEventListener("DOMContentLoaded", () => {
const formulario = document.getElementById("formulario");
const mensajeDiv = document.getElementById("mensaje");
let capacidadTotal = 0;
// Función para cambiar de paso en el formulario
function siguientePaso (paso) {
paso = Number(paso); // Asegurar que sea número
const pasos = document.querySelectorAll("[id^='paso']");
// Ocultar todos los pasos
pasos.forEach(p => p.classList.add("d-none"));
function siguientePaso(paso) {
document.querySelectorAll("[id^='paso']").forEach(p => p.classList.add("d-none"));
document.getElementById(`paso${paso}`).classList.remove("d-none");
document.getElementById(`paso${paso}`).classList.remove("d-none");
}
formulario.addEventListener("submit", async (event) => {
event.preventDefault();
const capacidadTotal = parseInt(document.getElementById("capacidad_total").value, 10);
if (isNaN(capacidadTotal) || capacidadTotal <= 0) {
mensajeDiv.innerHTML = '<div class="alert alert-danger">Error: La capacidad total debe ser un número mayor a 0.</div>';
return;
if (paso === 3) {
capacidadTotal = parseInt(document.getElementById("capacidad_total").value) || 0;
document.getElementById("capacidad_disponible").textContent = capacidadTotal;
}
}
const datosConcierto = {
nombre_concierto: document.getElementById("nombre_concierto").value.trim(),
artista: document.getElementById("artista").value.trim(),
fecha: document.getElementById("fecha").value,
calle: document.getElementById("calle").value.trim(),
colonia: document.getElementById("colonia").value.trim(),
numero_direccion: document.getElementById("numero_direccion").value.trim(),
codigo_postal: document.getElementById("codigo_postal").value.trim(),
estado: document.getElementById("estado").value.trim(),
capacidad_total: capacidadTotal,
zonas: [
{ nombre_zona: "General", capacidad: parseInt(document.getElementById("capacidad_general").value, 10) || 0, precio: parseFloat(document.getElementById("precio_general").value) || 0 },
{ nombre_zona: "Plata", capacidad: parseInt(document.getElementById("capacidad_plata").value, 10) || 0, precio: parseFloat(document.getElementById("precio_plata").value) || 0 },
{ nombre_zona: "Oro", capacidad: parseInt(document.getElementById("capacidad_oro").value, 10) || 0, precio: parseFloat(document.getElementById("precio_oro").value) || 0 },
{ nombre_zona: "VIP", capacidad: parseInt(document.getElementById("capacidad_vip").value, 10) || 0, precio: parseFloat(document.getElementById("precio_vip").value) || 0 }
]
};
const sumaCapacidades = datosConcierto.zonas.reduce((total, zona) => total + zona.capacidad, 0);
if (sumaCapacidades > capacidadTotal) {
mensajeDiv.innerHTML = '<div class="alert alert-danger">La suma de las capacidades de las zonas no puede superar la capacidad total.</div>';
return;
} else if (sumaCapacidades < capacidadTotal){
mensajeDiv.innerHTML = '<div class="alert alert-danger">La suma de las capacidades de las zonas no puede ser menor a la capacidad total.</div>';
return;
}
try {
const respuesta = await fetch("controladores/insertar_concierto.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(datosConcierto)
function actualizarCapacidad() {
let asignado = 0;
["capacidad_general", "capacidad_plata", "capacidad_oro", "capacidad_vip"].forEach(id => {
asignado += parseInt(document.getElementById(id).value) || 0;
});
if (!respuesta.ok) {
throw new Error(`HTTP Error: ${respuesta.status}`);
}
const data = await respuesta.json();
if (data.insercionCorrecta) {
formulario.reset();
siguientePaso(1);
mensajeDiv.innerHTML = '<div class="alert alert-success">Concierto registrado correctamente.</div>';
} else {
mensajeDiv.innerHTML = `<div class="alert alert-danger">Error: ${data.error || "No se pudo registrar el concierto."}</div>`;
}
} catch (error) {
mensajeDiv.innerHTML = `<div class="alert alert-danger">Error en la solicitud: ${error.message}</div>`;
console.error("Error:", error);
const restante = capacidadTotal - asignado;
document.getElementById("capacidad_disponible").textContent = restante < 0 ? "Excede la capacidad total" : restante;
}
});
// Cerrar sesión
cerrarSesion.addEventListener("click", () => {
window.location.href = "logout.php";
});
formulario.addEventListener("submit", async (event) => {
event.preventDefault();
if (parseInt(document.getElementById("capacidad_disponible").textContent) < 0) {
mensajeDiv.innerHTML = '<div class="alert alert-danger">Error: La suma de capacidades de zonas no puede exceder la capacidad total.</div>';
return;
}
const datosConcierto = {
nombre_concierto: document.getElementById("nombre_concierto").value.trim(),
artista: document.getElementById("artista").value.trim(),
fecha: document.getElementById("fecha").value,
calle: document.getElementById("calle").value.trim(),
colonia: document.getElementById("colonia").value.trim(),
numero_direccion: document.getElementById("numero_direccion").value.trim(),
codigo_postal: document.getElementById("codigo_postal").value.trim(),
estado: document.getElementById("estado").value.trim(),
capacidad_total: capacidadTotal
};
mensajeDiv.innerHTML = '<div class="alert alert-success">Concierto registrado correctamente.</div>';
});
window.siguientePaso = siguientePaso;
window.actualizarCapacidad = actualizarCapacidad;
});

7
ventaBoletos.html
View File

@ -9,7 +9,7 @@
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="ventanaPrincipal.html">TicketFei</a>
@ -35,15 +35,12 @@
</ul>
<button class="btn btn-danger" id="cerrarSesion">Cerrar Sesión</button>
<<<<<<< HEAD
=======
>>>>>>> 056a4b8214543ea4e6d30d1f1d2f465db727ceae
</div>
</div>
</nav>
<!-- Contenedor Principal -->
<div class="container mt-5">

102
ventanaInsertarConcierto.html
View File

@ -4,8 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrar Concierto</title>
<!-- CSS de diseño -->
<link rel="stylesheet" href="css/conciertos.css">
<link rel="stylesheet" href="css/formulario.css">
</head>
@ -13,7 +11,7 @@
<!-- Navbar -->
<nav>
<a class="navbar-brand" href="#">TicketFei</a>
<a href="ventanaInsertarConcierto.html" class="navbar-brand">TicketFei</a>
<div class="nav-links">
<a href="ventanaInsertarConcierto.html">Crear Conciertos</a>
<a href="ventanaConciertos.html">Ver Conciertos</a>
@ -21,25 +19,99 @@
</div>
</nav>
<!-- Contenedor del formulario -->
<div class="form-container">
<h2>Registrar Concierto</h2>
<!-- Contenedor -->
<div class="container">
<h2 class="text-center">Registrar Concierto</h2>
<form id="formulario">
<label for="nombre_concierto">Nombre del Concierto:</label>
<input type="text" id="nombre_concierto" required>
<label for="artista">Artista:</label>
<input type="text" id="artista" required>
<!-- Paso 1: Datos generales -->
<div id="paso1">
<div class="mb-3">
<label for="nombre_concierto">Nombre del Concierto:</label>
<input type="text" id="nombre_concierto" required>
</div>
<div class="mb-3">
<label for="artista">Artista:</label>
<input type="text" id="artista" required>
</div>
<div class="mb-3">
<label for="fecha">Fecha del Concierto:</label>
<input type="date" id="fecha" required>
</div>
<button type="button" class="btn next-btn" onclick="siguientePaso(2)">Siguiente</button>
</div>
<label for="fecha">Fecha del Concierto:</label>
<input type="date" id="fecha" required>
<!-- Paso 2: Dirección -->
<div id="paso2" class="d-none">
<div class="mb-3">
<label for="calle">Calle:</label>
<input type="text" id="calle" required>
</div>
<div class="mb-3">
<label for="colonia">Colonia:</label>
<input type="text" id="colonia" required>
</div>
<div class="mb-3">
<label for="numero_direccion">Número exterior:</label>
<input type="text" id="numero_direccion" required>
</div>
<div class="mb-3">
<label for="codigo_postal">Código Postal:</label>
<input type="text" id="codigo_postal" required>
</div>
<div class="mb-3">
<label for="estado">Estado:</label>
<input type="text" id="estado" required>
</div>
<div class="mb-3">
<label for="capacidad_total">Capacidad Total:</label>
<input type="number" id="capacidad_total" required>
</div>
<button type="button" class="btn prev-btn" onclick="siguientePaso(1)">Anterior</button>
<button type="button" class="btn next-btn" onclick="siguientePaso(3)">Siguiente</button>
</div>
<button type="submit">Registrar</button>
<!-- Paso 3: Zonas -->
<div id="paso3" class="d-none">
<fieldset>
<legend>Zonas</legend>
<div class="mb-3">
<label>Zona General - Capacidad:</label>
<input type="number" id="capacidad_general" required oninput="actualizarCapacidad()">
<label>Precio:</label>
<input type="number" step="0.01" id="precio_general" required>
</div>
<div class="mb-3">
<label>Zona Plata - Capacidad:</label>
<input type="number" id="capacidad_plata" required oninput="actualizarCapacidad()">
<label>Precio:</label>
<input type="number" step="0.01" id="precio_plata" required>
</div>
<div class="mb-3">
<label>Zona Oro - Capacidad:</label>
<input type="number" id="capacidad_oro" required oninput="actualizarCapacidad()">
<label>Precio:</label>
<input type="number" step="0.01" id="precio_oro" required>
</div>
<div class="mb-3">
<label>Zona VIP - Capacidad:</label>
<input type="number" id="capacidad_vip" required oninput="actualizarCapacidad()">
<label>Precio:</label>
<input type="number" step="0.01" id="precio_vip" required>
</div>
</fieldset>
<button type="button" class="btn prev-btn" onclick="siguientePaso(2)">Anterior</button>
<button type="submit" class="btn submit-btn">Crear Concierto</button>
</div>
</form>
<div id="mensaje" class="mt-3 text-center"></div>
</div>
<!-- JavaScript -->
<script src="js/crearConciertos.js"></script>
</body>
</html>