Modifiqué el estilo del carrusel de conciertos

css/estilos.css

@@ -1,76 +1,138 @@
-/* Contenedor del carrusel */
+/* Reset básico */
-.carousel-container {
+body {
-    position: relative;
+    font-family: 'Arial', sans-serif;
-    width: 100%;
+    margin: 0;
-    overflow: hidden;
+    padding: 0;
-    padding: 20px;
+    background-color: #f4f4f4;
-    background: #f4f4f4;
 }
 
-/* Contenedor de conciertos con desplazamiento horizontal */
+/* Estilos del encabezado */
+header {
+    background-color: #4d4d4d;
+    color: white;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+header h1 {
+    margin: 0;
+    font-size: 24px;
+}
+
+nav a {
+    color: white;
+    text-decoration: none;
+    margin-right: 20px;
+    font-weight: bold;
+}
+
+nav a:hover {
+    text-decoration: underline;
+}
+
+/* Carrusel de conciertos */
+.contenedor-principal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 90%;
+    margin: 20px auto;
+    background-color: #eeeeee;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+/* Botones de desplazamiento */
+.flecha-izquierda, .flecha-derecha {
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    padding: 10px;
+    font-size: 20px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.flecha-izquierda { left: 10px; }
+.flecha-derecha { right: 10px; }
+
+.flecha-izquierda:hover, .flecha-derecha:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+/* Contenedor de conciertos */
 .contenedor-conciertos {
     display: flex;
     overflow-x: auto;
-    scroll-behavior: smooth;
-    gap: 15px;
-    padding: 10px;
     white-space: nowrap;
+    scroll-behavior: smooth;
+    padding: 10px;
+    width: 80%;
 }
 
-/* Ocultar scrollbar */
+/* Tarjetas de concierto */
-.contenedor-conciertos::-webkit-scrollbar {
-    display: none;
-}
-
-/* Estilos para cada tarjeta de concierto */
 .concierto {
     background: white;
-    padding: 15px;
     border-radius: 10px;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
     text-align: center;
     width: 250px;
-    flex-shrink: 0; /* Evita que se reduzcan de tamaño */
+    margin: 0 10px;
-}
-
-/* Botones de desplazamiento */
-.scroll-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    cursor: pointer;
-    font-size: 20px;
-    border-radius: 50%;
-}
-
-.scroll-btn:hover {
-    background-color: rgba(0, 0, 0, 0.8);
-}
-
-.scroll-btn.left {
-    left: 10px;
-}
-
-.scroll-btn.right {
-    right: 10px;
-}
-
-.btn-volver {
     display: inline-block;
+    padding: 15px;
+}
+
+.concierto img {
+    width: 100%;
+    height: 150px;
+    border-radius: 10px;
+    object-fit: cover;
+}
+
+.concierto h2 {
+    font-size: 18px;
+    margin: 10px 0;
+}
+
+.concierto p {
+    font-size: 14px;
+    color: #666;
+}
+
+/* Botón comprar */
+.concierto button {
     background-color: #008cba;
     color: white;
     padding: 10px 15px;
     text-decoration: none;
+    border: none;
     border-radius: 5px;
     font-weight: bold;
-    margin-bottom: 15px;
+    cursor: pointer;
-    transition: background 0.3s;
 }
 
-.btn-volver:hover {
+.concierto button:hover {
+    background-color: #005f7f;
+}
+
+/* Botón Volver */
+.boton-volver {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 15px;
+    background-color: #008cba;
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: 5px;
+    transition: background 0.3s ease;
+}
+
+.boton-volver:hover {
     background-color: #005f7f;
 }

js/conciertos.js

@@ -3,18 +3,23 @@ document.addEventListener("DOMContentLoaded", function() {
     .then(response => response.json())
     .then(data => {
         let div = document.getElementById("conciertos");
-        div.innerHTML = ""; // Limpiar contenido
+        div.innerHTML = ""; // Limpiar contenido previo
+
+        if (data.length === 0) {
+            div.innerHTML = "<p>No hay conciertos disponibles.</p>";
+            return;
+        }
 
         data.forEach(concierto => {
             let evento = document.createElement("div");
             evento.classList.add("concierto");
             evento.innerHTML = `
-                <img src="${concierto.imagen}" alt="${concierto.nombre}">
+                <img src="../img/${concierto.imagen}" alt="${concierto.nombre}" onerror="this.src='../img/default.jpg';">
                 <h2>${concierto.nombre}</h2>
                 <p><strong>Artista:</strong> ${concierto.artista}</p>
                 <p><strong>Ubicación:</strong> ${concierto.direccion}</p>
                 <p><strong>Fecha:</strong> ${concierto.fecha} - ${concierto.hora}</p>
-                <button class="btn-comprar" onclick="comprarBoletos(${concierto.id})">COMPRAR</button>
+                <button onclick="comprarBoletos(${concierto.id})">COMPRAR</button>
             `;
             div.appendChild(evento);
         });
@@ -22,16 +27,7 @@ document.addEventListener("DOMContentLoaded", function() {
     .catch(error => console.error("Error cargando conciertos:", error));
 });
 
+// Función para redirigir a la compra de boletos
 function comprarBoletos(conciertoId) {
     window.location.href = `venta_boletos.html?concierto_id=${conciertoId}`;
 }
-
-// Función para desplazar los conciertos
-function scrollConciertos(direction) {
-    const container = document.getElementById("conciertos");
-    const scrollAmount = 300; // Ajusta el valor para controlar la velocidad de desplazamiento
-    container.scrollBy({
-        left: direction * scrollAmount,
-        behavior: "smooth"
-    });
-}

views/agregar_evento.html

@@ -8,8 +8,6 @@
 </head>
 <body>
 
-    <a href="index.html" class="btn-volver">← Volver</a>
-
     <h1>Agregar Nuevo Evento</h1>
 
     <form id="formConcierto" action="../php/insertar_concierto.php" method="POST" enctype="multipart/form-data">
@@ -57,6 +55,9 @@
     <div id="mensaje"></div>
 
     <script src="../js/agregar_evento.js"></script>
+   
+    <a href="../views/index.html" class="boton-volver">Volver</a>
+
 
 </body>
 </html>

views/editar_evento.html

@@ -49,6 +49,8 @@
     <div id="mensaje"></div>
 
     <script src="../js/editar_evento.js"></script>
+    <a href="../views/index.html" class="boton-volver">Volver</a>
+
 
 </body>
 </html>

views/index.html

@@ -9,18 +9,22 @@
 </head>
 <body>
 
-    <!-- Banner superior -->
     <header>
         <h1>BoleTC</h1>
-        <a href="agregar_evento.html" class="btn">Agregar Evento</a>
+        <nav>
-        <a href="editar_evento.html" class="btn">Editar Evento</a>
+            <a href="agregar_evento.html">Agregar Evento</a>
+            <a href="editar_evento.html">Editar Evento</a>
+        </nav>
     </header>
 
-    <!-- Contenedor principal con botones de desplazamiento -->
+    <div class="contenedor-principal">
-    <div class="carousel-container">
+        <button class="flecha-izquierda">&#10094;</button>
-        <button class="scroll-btn left" onclick="scrollConciertos(-1)">&#10094;</button>
+
-        <div class="contenedor-conciertos" id="conciertos"></div>
+        <div class="contenedor-conciertos" id="conciertos">
-        <button class="scroll-btn right" onclick="scrollConciertos(1)">&#10095;</button>
+            <!-- Aquí se cargarán los conciertos dinámicamente -->
+        </div>
+
+        <button class="flecha-derecha">&#10095;</button>
     </div>
 
 </body>

views/venta_boletos.html

@@ -30,6 +30,8 @@
         </div>
 
         <button id="confirmarCompra">Confirmar Compra</button>
+        <a href="../views/index.html" class="boton-volver">Volver</a>
+
     </div>
 
 </body>