Arreglé el diseño de la interfaz y corregí la carga de conciertos

controladores/conciertos.php

@@ -1,70 +1,51 @@
 <?php
-    include 'conexion.php';
+include 'conexion.php';
 
-    $consulta = "SELECT c.id_concierto, c.nombre_concierto, c.artista, c.fecha, c.calle, c.colonia, c.numero_direccion, c.codigo_postal, c.estado, c.capacidad_total, 
-                        z.nombre_zona, z.capacidad AS capacidad_zona, z.precio 
-                 FROM conciertos c 
-                 LEFT JOIN zonas z ON c.id_concierto = z.id_concierto
-                 ORDER BY c.id_concierto, 
-                          FIELD(z.nombre_zona, 'General', 'Plata', 'Oro', 'VIP')";
-    
-    $resultado = $conexionBD->query($consulta);
+header('Content-Type: application/json'); // Asegurar que el contenido es JSON
+error_reporting(E_ALL);
+ini_set('display_errors', 1);
 
-    if ($resultado->num_rows > 0) {
-        $conciertos = [];
+$consulta = "SELECT c.id_concierto, c.nombre_concierto, c.artista, c.fecha, c.calle, c.colonia, c.numero_direccion, c.codigo_postal, c.estado, c.capacidad_total, 
+                    z.nombre_zona, z.capacidad AS capacidad_zona, z.precio 
+             FROM conciertos c 
+             LEFT JOIN zonas z ON c.id_concierto = z.id_concierto
+             ORDER BY c.id_concierto, 
+                      FIELD(z.nombre_zona, 'General', 'Plata', 'Oro', 'VIP')";
 
-        while ($fila = $resultado->fetch_assoc()) {
-            $id_concierto = $fila['id_concierto'];
-            if (!isset($conciertos[$id_concierto])) {
-                $conciertos[$id_concierto] = [
-                    'nombre_concierto' => $fila['nombre_concierto'],
-                    'artista' => $fila['artista'],
-                    'fecha' => $fila['fecha'],
-                    'direccion' => $fila['calle'] . ', ' . $fila['colonia'] . ', ' . $fila['numero_direccion'] . ', CP: ' . $fila['codigo_postal'] . ', ' . $fila['estado'],
-                    'capacidad_total' => $fila['capacidad_total'],
-                    'zonas' => []
-                ];
-            }
-            
-            if (!empty($fila['nombre_zona'])) {
-                $conciertos[$id_concierto]['zonas'][] = [
-                    'nombre_zona' => $fila['nombre_zona'],
-                    'capacidad' => $fila['capacidad_zona'],
-                    'precio' => $fila['precio']
-                ];
-            }
-        }
-        
-        echo "<div class='contenedor-conciertos'>";
-        foreach ($conciertos as $id => $concierto) {
-            echo "<div class='tarjeta-concierto'>";
-            echo "<h2>" . htmlspecialchars($concierto['nombre_concierto']) . "</h2>";
-            echo "<p><strong>Artista:</strong> " . htmlspecialchars($concierto['artista']) . "</p>";
-            echo "<p><strong>Fecha:</strong> " . htmlspecialchars($concierto['fecha']) . "</p>";
-            echo "<p><strong>Dirección:</strong> " . htmlspecialchars($concierto['direccion']) . "</p>";
-            echo "<p><strong>Capacidad Total:</strong> " . htmlspecialchars($concierto['capacidad_total']) . "</p>";
-            
-            echo "<h3>Zonas Disponibles</h3>";
-            if (!empty($concierto['zonas'])) {
-                echo "<ul>";
-                foreach ($concierto['zonas'] as $zona) {
-                    echo "<li><strong>" . htmlspecialchars($zona['nombre_zona']) . "</strong>: ";
-                    echo "Capacidad: " . htmlspecialchars($zona['capacidad']) . " | ";
-                    echo "Precio: $" . htmlspecialchars(number_format($zona['precio'], 2)) . "</li>";
-                }
-                echo "</ul>";
-            } else {
-                echo "<p>No hay zonas registradas.</p>";
-            }
-            
-            echo "<button class='comprar-boleto' onclick=\"window.location.href='ventaBoletos.html?id=" . htmlspecialchars($id) . "'\">Comprar Boletos</button>";
-            echo "</div>";
-            
-        }
-        echo "</div>";
-    } else {
-        echo "<div class='mensajeError'>No hay conciertos disponibles</div>";
+$resultado = $conexionBD->query($consulta);
+
+if (!$resultado) {
+    echo json_encode(["error" => "Error en la consulta SQL: " . $conexionBD->error]);
+    exit;
+}
+
+$conciertos = [];
+
+while ($fila = $resultado->fetch_assoc()) {
+    $id_concierto = $fila['id_concierto'];
+    if (!isset($conciertos[$id_concierto])) {
+        $conciertos[$id_concierto] = [
+            'id' => $id_concierto,
+            'nombre_concierto' => $fila['nombre_concierto'],
+            'artista' => $fila['artista'],
+            'fecha' => $fila['fecha'],
+            'direccion' => $fila['calle'] . ', ' . $fila['colonia'] . ', ' . $fila['numero_direccion'] . ', CP: ' . $fila['codigo_postal'] . ', ' . $fila['estado'],
+            'capacidad_total' => $fila['capacidad_total'],
+            'zonas' => []
+        ];
     }
 
-    $conexionBD->close();
+    if (!empty($fila['nombre_zona'])) {
+        $conciertos[$id_concierto]['zonas'][] = [
+            'nombre_zona' => $fila['nombre_zona'],
+            'capacidad' => $fila['capacidad_zona'],
+            'precio' => $fila['precio']
+        ];
+    }
+}
+
+// Convertir el array a JSON y enviarlo
+echo json_encode(array_values($conciertos), JSON_PRETTY_PRINT);
+
+$conexionBD->close();
 ?>

controladores/conexion.php

@@ -1,4 +1,7 @@
 <?php
+  error_reporting(E_ALL);
+  ini_set('display_errors', 1);
+
   // Valores para la conexión
   $direccion = "localhost:3306";
   $nombreBD = "TicketFei";
@@ -10,6 +13,6 @@
 
   // Verificar si hay un error en la conexión
   if ($conexionBD->connect_error) {
-    die("Error en la conexión: " . $conexionBD->connect_error);
+    die(json_encode(["error" => "Error en la conexión: " . $conexionBD->connect_error]));
   }
 ?>

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 contraseña = ?";
+    $consulta = "SELECT id, nombre, apellidoPaterno, apellidoMaterno, usuario FROM usuarios WHERE usuario = ? AND password = ?";
 
     $consultaPreparada = $conexionBD->prepare($consulta);
     $consultaPreparada->bind_param("ss", $usuario, $password);

css/botonRegreso.css

@@ -0,0 +1,19 @@
+#btnRegresar {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background-color: #6c757d;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background 0.3s, transform 0.2s;
+}
+
+#btnRegresar:hover {
+    background-color: #5a6268;
+    transform: scale(1.05);
+}

css/conciertos.css

@@ -0,0 +1,140 @@
+body {
+    background-color: #12122B;
+    font-family: 'Poppins', sans-serif;
+    color: #E3E3E3;
+    margin: 0;
+    padding: 0;
+}
+
+nav {
+    background-color: #12122B;
+    padding: 1rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.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;
+}
+
+.search-container {
+    display: flex;
+    background: #383845;
+    padding: 10px;
+    border-radius: 6px;
+    align-items: center;
+}
+
+.search-container input {
+    border: none;
+    background: transparent;
+    color: #E3E3E3;
+    outline: none;
+    padding: 8px;
+    flex-grow: 1;
+}
+
+.search-container button {
+    background: #AAAA91;
+    border: none;
+    padding: 8px 12px;
+    color: #12122B;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 6px;
+}
+
+.search-container button:hover {
+    background: #848478;
+}
+
+#listaConciertos {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 24px;
+    padding: 40px;
+    max-width: 1300px;
+    margin: auto;
+}
+
+.concierto-card {
+    background-color: #383845;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.concierto-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
+}
+
+.concierto-card img {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+}
+
+.card-body {
+    padding: 16px;
+    flex-grow: 1;
+}
+
+.card-title {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #E3E3E3;
+}
+
+.card-text {
+    font-size: 1rem;
+    color: #C4C4C4;
+}
+
+.btn-comprar {
+    width: 100%;
+    background: #AAAA91;
+    color: #12122B;
+    font-weight: bold;
+    padding: 12px;
+    border-radius: 8px;
+    transition: background 0.3s;
+    text-align: center;
+    display: block;
+    margin-top: auto;
+}
+
+.btn-comprar:hover {
+    background: #848478;
+}

css/formulario.css

@@ -0,0 +1,50 @@
+/* Estilo del formulario */
+.form-container {
+    width: 400px;
+    background-color: #383845;
+    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 {
+    color: #E3E3E3;
+    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;
+    font-weight: bold;
+    padding: 12px;
+    border-radius: 8px;
+    transition: background 0.3s;
+}
+
+.form-container button:hover {
+    background: #848478;
+}

js/botonRegreso.js

@@ -0,0 +1,9 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const btnRegresar = document.getElementById("btnRegresar");
+
+    if (btnRegresar) {
+        btnRegresar.addEventListener("click", () => {
+            window.history.back(); // Regresa a la página anterior
+        });
+    }
+});

js/conciertos.js

@@ -1,99 +1,74 @@
-const listaConciertos = document.querySelector('.listaConciertos');
-const formulario = document.getElementById('formulario');
-const mensajeDiv = document.getElementById('mensaje');
-const cerrarsesion = document.getElementById('cerrarSesion');
-// Función para cargar conciertos
-async function cargarConciertos() {
+document.addEventListener("DOMContentLoaded", () => {
+    cargarConciertos();
+});
+
+const listaConciertos = document.getElementById("listaConciertos");
+const buscadorBoton = document.getElementById("buscadorBoton");
+const buscadorInput = document.getElementById("buscadorColaborador");
+
+async function cargarConciertos(filtro = "") {
     try {
         const respuesta = await fetch('controladores/conciertos.php');
-        if (!respuesta.ok) {
-            throw new Error('Error al cargar conciertos');
+        if (!respuesta.ok) throw new Error("Error al cargar conciertos");
+
+        const conciertos = await respuesta.json();
+        listaConciertos.innerHTML = "";
+
+        const conciertosFiltrados = filtro
+            ? conciertos.filter(c => c.nombre_concierto.toLowerCase().includes(filtro.toLowerCase()))
+            : conciertos;
+
+        if (conciertosFiltrados.length === 0) {
+            listaConciertos.innerHTML = `<p class="text-red-500 text-center">No se encontraron conciertos.</p>`;
+            return;
         }
-        const datos = await respuesta.text();
-        listaConciertos.innerHTML = datos;
-        //obtenerInfo();
+
+        let tarjetas = [];
+
+        conciertosFiltrados.forEach((concierto) => {
+            const tarjeta = document.createElement("div");
+            tarjeta.classList.add("concierto-card");
+
+            let zonasHTML = "";
+            if (concierto.zonas.length > 0) {
+                zonasHTML = `<ul class="text-sm text-gray-300 mt-2">`;
+                concierto.zonas.forEach(zona => {
+                    zonasHTML += `<li>🔹 ${zona.nombre_zona}: <b>${zona.capacidad} asientos</b> - $${zona.precio}</li>`;
+                });
+                zonasHTML += `</ul>`;
+            }
+
+            tarjeta.innerHTML = `
+                <img src="img/concierto_${concierto.id}.jpg" alt="Concierto">
+                <div class="card-body">
+                    <h3 class="card-title">${concierto.nombre_concierto}</h3>
+                    <p class="card-text">🎤 ${concierto.artista}</p>
+                    <p class="card-text">📅 ${concierto.fecha}</p>
+                    <p class="card-text">📍 ${concierto.direccion || 'No definida'}</p>
+                    <p class="card-text">🎟 ${concierto.capacidad_total} Asistentes</p>
+                    ${zonasHTML}
+                </div>
+                <button class="btn-comprar">Comprar Boletos</button>
+            `;
+
+            listaConciertos.appendChild(tarjeta);
+            tarjetas.push(tarjeta);
+        });
+
+        gsap.fromTo(
+            tarjetas,
+            { opacity: 0, scale: 0.9 },
+            { opacity: 1, scale: 1, duration: 0.6, stagger: 0.2, ease: "power3.out" }
+        );
 
     } catch (error) {
-        console.error('Error:', error);
-        mensajeDiv.textContent = 'No se pudieron cargar los conciertos';
-        mensajeDiv.style.color = 'red';
+        console.error(error);
+        listaConciertos.innerHTML = `<p class="text-red-500">No se pudieron cargar los conciertos.</p>`;
     }
 }
 
-// Cargar conciertos al iniciar
-cargarConciertos();
-// Evento de búsqueda
 buscadorBoton.addEventListener('click', (event) => {
     event.preventDefault();
     const termino = buscadorInput.value.trim();
-    if (termino) {
-        buscarConciertos(termino);
-    } else {
-        cargarConciertos(); 
-    }
-});
-
-
-// Insertar 
-formulario.addEventListener('submit', async (event) => {
-    event.preventDefault(); 
-
-    const nombre = document.getElementById("nombre_concierto").value;
-    const artista = document.getElementById("artista").value;
-    const fecha = document.getElementById("fecha").value;
-    const calle = document.getElementById("calle").value;
-    const colonia = document.getElementById("colonia").value;
-    const numero_direccion = document.getElementById("numero_direccion").value;
-    const codigo_postal = document.getElementById("codigo_postal").value;
-    const estado = document.getElementById("estado").value;
-    const capacidad_total = parseInt(document.getElementById("capacidad_total").value, 10);
-
-    // Obtener y validar capacidades de zonas
-    const 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 = zonas.reduce((total, zona) => total + zona.capacidad, 0);
-
-    // Validar que la suma de las capacidades de zonas no supere la capacidad total
-    if (sumaCapacidades > capacidad_total) {
-        mensajeDiv.innerHTML = `<div class="alert alert-danger">Error: La suma de las capacidades de las zonas (${sumaCapacidades}) no puede superar la capacidad total (${capacidad_total}).</div>`;
-        return;
-    }
-
-    const datosConcierto = {
-        nombre_concierto: nombre,
-        artista: artista,
-        fecha: fecha,
-        calle: calle,
-        colonia: colonia,
-        numero_direccion: numero_direccion,
-        codigo_postal: codigo_postal,
-        estado: estado,
-        capacidad_total: capacidad_total,
-        zonas: zonas
-    };
-
-    fetch("controladores/insertar_concierto.php", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(datosConcierto)
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.insercionCorrecta) {
-            mensajeDiv.innerHTML = `<div class="alert alert-success">Concierto registrado correctamente.</div>`;
-            formulario.reset(); 
-            cargarConciertos();
-        } else {
-            mensajeDiv.innerHTML = `<div class="alert alert-danger">Error: ${data.error}</div>`;
-        }
-    })
-    .catch(error => {
-        mensajeDiv.innerHTML = `<div class="alert alert-danger">Error en la solicitud.</div>`;
-        console.error("Error:", error);
-    });
+    cargarConciertos(termino);
 });

js/crearConciertos.js

@@ -0,0 +1,86 @@
+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");
+
+// 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"));
+
+
+    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;
+    }
+
+    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)
+        });
+
+        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);
+    }
+});
+
+// Cerrar sesión
+cerrarSesion.addEventListener("click", () => {
+    window.location.href = "logout.php";
+});

js/login.js

@@ -12,7 +12,7 @@ formulario.addEventListener('submit', async (event) => {
     data.append('password', password);
 
     try {
-        // Petición al servidor
+        
         const respuestaPeticion = await fetch('controladores/login.php', {
             method: 'POST',
             body: data

ventaBoletos.html

@@ -35,6 +35,10 @@
                     
                 </ul>
                 <button class="btn btn-danger" id="cerrarSesion">Cerrar Sesión</button>
+<<<<<<< HEAD
+                
+=======
+>>>>>>> 056a4b8214543ea4e6d30d1f1d2f465db727ceae
             </div>
         </div>
     </nav>

ventanaConciertos.html

@@ -4,57 +4,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Registro de Conciertos</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="css/ventanaPrincipal.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <link rel="stylesheet" href="css/conciertos.css">
 </head>
 <body>
-    
-    <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="ventanaInsertarConcierto.html">TicketFei</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item">
-                        <a class="nav-link active" href="ventanaInsertarConcierto.html">Conciertos</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" href="ventanaConciertos.html">Conciertos</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">Reporte Ventas</a>
-                    </li>
-                    <li class="nav-item">
-                        <form class="d-flex">
-                            <input class="form-control me-2" type="search" id="buscadorColaborador" placeholder="Buscar concierto" aria-label="Buscar">
-                            <button class="btn btn-outline-light" type="submit" id="buscadorBoton">
-                                <i class="bi bi-search"></i>
-                            </button>
-                        </form>
-                    </li>
-                    
-                </ul>
-                <button class="btn btn-danger" id="cerrarSesion">Cerrar Sesión</button>
-            </div>
+
+    <nav>
+        <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>
+            <a href="#">Reporte Ventas</a>
+        </div>
+        <div class="search-container">
+            <input type="search" id="buscadorColaborador" placeholder="Buscar...">
+            <button id="buscadorBoton">Buscar</button>
         </div>
     </nav>
 
-    <!-- Contenedor Principal -->
-    <div class="container mt-5">
-            <!-- Tarjetas de Conciertos -->
-            <div class="col-md-7">
-                <div class="card shadow-sm p-4">
-                    <h2 class="text-center" id="tituloListaConciertos">Lista de Conciertos</h2>
-                    <div class="listaConciertos"></div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <div id="listaConciertos"></div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script src="js/conciertos.js"></script>
+
 </body>
 </html>

ventanaInsertarConcierto.html

@@ -3,131 +3,43 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Registro de Conciertos</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="css/ventanaPrincipal.css">
+    <title>Registrar Concierto</title>
+
+    <!-- CSS de diseño -->
+    <link rel="stylesheet" href="css/conciertos.css">
+    <link rel="stylesheet" href="css/formulario.css">
 </head>
 <body>
-    
+
     <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="ventanaInsertarConcierto.html">TicketFei</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item">
-                        <a class="nav-link active" href="ventanaInsertarConcierto.html">Crear conciertos</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" href="ventanaConciertos.html">Ver conciertos</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">Reporte Ventas</a>
-                    </li>
-                    <li class="nav-item">
-                        <form class="d-flex">
-                            <input class="form-control me-2" type="search" id="buscadorColaborador" placeholder="Buscar concierto" aria-label="Buscar">
-                            <button class="btn btn-outline-light" type="submit" id="buscadorBoton">
-                                <i class="bi bi-search"></i>
-                            </button>
-                        </form>
-                    </li>
-                    
-                </ul>
-                <button class="btn btn-danger" id="cerrarSesion">Cerrar Sesión</button>
-            </div>
+    <nav>
+        <a class="navbar-brand" href="#">TicketFei</a>
+        <div class="nav-links">
+            <a href="ventanaInsertarConcierto.html">Crear Conciertos</a>
+            <a href="ventanaConciertos.html">Ver Conciertos</a>
+            <a href="#">Reporte Ventas</a>
         </div>
     </nav>
 
-    <!-- Contenedor Principal -->
-    <div class="container mt-5">
-        <div class="row">
-            <!-- Formulario de Registro de Conciertos -->
-            <div class="col-md-5">
-                <div class="card shadow-sm p-4">
-                    <h2 class="text-center">Registrar Concierto</h2>
-                    <form id="formulario" method="POST" action="controladores/insertar_concierto.php">
-                        <div class="mb-3">
-                            <label for="nombre_concierto" class="form-label">Nombre del Concierto:</label>
-                            <input type="text" class="form-control" id="nombre_concierto" name="nombre_concierto" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="artista" class="form-label">Artista:</label>
-                            <input type="text" class="form-control" id="artista" name="artista" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="fecha" class="form-label">Fecha del Concierto:</label>
-                            <input type="date" class="form-control" id="fecha" name="fecha" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="calle" class="form-label">Calle:</label>
-                            <input type="text" class="form-control" id="calle" name="calle" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="colonia" class="form-label">Colonia:</label>
-                            <input type="text" class="form-control" id="colonia" name="colonia" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="numero_direccion" class="form-label">Número exterior:</label>
-                            <input type="text" class="form-control" id="numero_direccion" name="numero_direccion" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="codigo_postal" class="form-label">Código Postal:</label>
-                            <input type="text" class="form-control" id="codigo_postal" name="codigo_postal" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="estado" class="form-label">Estado:</label>
-                            <input type="text" class="form-control" id="estado" name="estado" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="capacidad_total" class="form-label">Capacidad Total:</label>
-                            <input type="number" class="form-control" id="capacidad_total" name="capacidad_total" required>
-                        </div>
+    <!-- Contenedor del formulario -->
+    <div class="form-container">
+        <h2>Registrar Concierto</h2>
+        <form id="formulario">
+            <label for="nombre_concierto">Nombre del Concierto:</label>
+            <input type="text" id="nombre_concierto" required>
 
-                        <!-- Sección de Zonas -->
-                        <fieldset class="border p-3 mb-3">
-                            <legend class="w-auto">Zonas</legend>
-                            <div class="mb-3">
-                                <label class="form-label">Zona General - Capacidad:</label>
-                                <input type="number" class="form-control" id="capacidad_general" name="capacidad_general" required>
-                                <label class="form-label">Precio:</label>
-                                <input type="number" step="0.01" class="form-control" id="precio_general" name="precio_general" required>
-                            </div>
-                            <div class="mb-3">
-                                <label class="form-label">Zona Plata - Capacidad:</label>
-                                <input type="number" class="form-control" id="capacidad_plata" name="capacidad_plata" required>
-                                <label class="form-label">Precio:</label>
-                                <input type="number" step="0.01" class="form-control" id="precio_plata" name="precio_plata" required>
-                            </div>
-                            <div class="mb-3">
-                                <label class="form-label">Zona Oro - Capacidad:</label>
-                                <input type="number" class="form-control" id="capacidad_oro" name="capacidad_oro" required>
-                                <label class="form-label">Precio:</label>
-                                <input type="number" step="0.01" class="form-control" id="precio_oro" name="precio_oro" required>
-                            </div>
-                            <div class="mb-3">
-                                <label class="form-label">Zona VIP - Capacidad:</label>
-                                <input type="number" class="form-control" id="capacidad_vip" name="capacidad_vip" required>
-                                <label class="form-label">Precio:</label>
-                                <input type="number" step="0.01" class="form-control" id="precio_vip" name="precio_vip" required>
-                            </div>
-                        </fieldset>
+            <label for="artista">Artista:</label>
+            <input type="text" id="artista" required>
 
-                        <div class="d-grid gap-2">
-                            <input type="submit" value="Registrar concierto">
-                        </div>
-                    </form>
-                    <div id="mensaje" class="mt-3 text-center"></div>
-                </div>
-            </div>
+            <label for="fecha">Fecha del Concierto:</label>
+            <input type="date" id="fecha" required>
 
-        </div>
+            <button type="submit">Registrar</button>
+        </form>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="js/conciertos.js"></script>
+    <!-- JavaScript -->
+    <script src="js/crearConciertos.js"></script>
+
 </body>
 </html>