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

controladores/login.php

@@ -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);

css/conciertos.css

@@ -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;
 }

css/formulario.css

@@ -1,50 +1,129 @@
-/* Estilo del formulario */
+body {
-.form-container {
+    background-color: #12122B;
-    width: 400px;
+    color: #E3E3E3;
-    background-color: #383845;
+    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 {
+legend {
-    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;
     font-weight: bold;
-    padding: 12px;
+    color: #E3E3E3;
-    border-radius: 8px;
+    font-size: 18px;
-    transition: background 0.3s;
 }
 
-.form-container button:hover {
+/* Ocultar pasos */
-    background: #848478;
+.d-none {
+    display: none;
 }

css/login.css

@@ -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;
 }

css/ventanaPrincipal.css

@@ -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;
+    background-color: #5CB85C;
-    border-color: #0056b3;
+    border-color: #5CB85C;
 }
 
 .btn-primary:hover {
-    background-color: #0056b3;
+    background-color: #4CAF50;
 }
 
 .btn-danger {

js/conciertos.js

@@ -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";
+        });
+    }
+});

js/crearConciertos.js

@@ -1,86 +1,51 @@
-const formulario = document.getElementById("formulario");
+document.addEventListener("DOMContentLoaded", () => {
-const mensajeDiv = document.getElementById("mensaje");
+    const formulario = document.getElementById("formulario");
-const buscadorBoton = document.getElementById("buscadorBoton");
+    const mensajeDiv = document.getElementById("mensaje");
-const buscadorInput = document.getElementById("buscadorColaborador");
+    let capacidadTotal = 0;
-const cerrarSesion = document.getElementById("cerrarSesion");
 
-// Función para cambiar de paso en el formulario
+    function siguientePaso(paso) {
-function siguientePaso (paso) {
+        document.querySelectorAll("[id^='paso']").forEach(p => p.classList.add("d-none"));
-    paso = Number(paso); // Asegurar que sea número
+        document.getElementById(`paso${paso}`).classList.remove("d-none");
-    const pasos = document.querySelectorAll("[id^='paso']");
-    
-    // Ocultar todos los pasos
-    pasos.forEach(p => p.classList.add("d-none"));
 
-
+        if (paso === 3) {
-    document.getElementById(`paso${paso}`).classList.remove("d-none");
+            capacidadTotal = parseInt(document.getElementById("capacidad_total").value) || 0;
-}
+            document.getElementById("capacidad_disponible").textContent = capacidadTotal;
-
+        }
-
-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;
     }
 
-    const datosConcierto = {
+    function actualizarCapacidad() {
-        nombre_concierto: document.getElementById("nombre_concierto").value.trim(),
+        let asignado = 0;
-        artista: document.getElementById("artista").value.trim(),
+        ["capacidad_general", "capacidad_plata", "capacidad_oro", "capacidad_vip"].forEach(id => {
-        fecha: document.getElementById("fecha").value,
+            asignado += parseInt(document.getElementById(id).value) || 0;
-        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)
         });
 
-        if (!respuesta.ok) {
+        const restante = capacidadTotal - asignado;
-            throw new Error(`HTTP Error: ${respuesta.status}`);
+        document.getElementById("capacidad_disponible").textContent = restante < 0 ? "Excede la capacidad total" : restante;
-        }
-
-        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);
     }
-});
 
-// Cerrar sesión
+    formulario.addEventListener("submit", async (event) => {
-cerrarSesion.addEventListener("click", () => {
+        event.preventDefault();
-    window.location.href = "logout.php";
+
-});
+        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;
+});

ventaBoletos.html

@@ -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">
         
         

ventanaInsertarConcierto.html

@@ -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 -->
+    <!-- Contenedor -->
-    <div class="form-container">
+    <div class="container">
-        <h2>Registrar Concierto</h2>
+        <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>
+            <!-- Paso 1: Datos generales -->
-            <input type="text" id="artista" required>
+            <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>
+            <!-- Paso 2: Dirección -->
-            <input type="date" id="fecha" required>
+            <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>