diff --git a/css/estilos.css b/css/estilos.css
index 1a4fabe..1756232 100644
--- a/css/estilos.css
+++ b/css/estilos.css
@@ -1,76 +1,138 @@
-/* Contenedor del carrusel */
-.carousel-container {
- position: relative;
- width: 100%;
- overflow: hidden;
- padding: 20px;
- background: #f4f4f4;
+/* Reset básico */
+body {
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #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 */
-.contenedor-conciertos::-webkit-scrollbar {
- display: none;
-}
-
-/* Estilos para cada tarjeta de concierto */
+/* Tarjetas 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 */
-}
-
-/* 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 {
+ margin: 0 10px;
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;
- transition: background 0.3s;
+ cursor: pointer;
}
-.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;
}
diff --git a/img/.DS_Store b/img/.DS_Store
index 109e1db..7516a5d 100644
Binary files a/img/.DS_Store and b/img/.DS_Store differ
diff --git a/img/1741878690_67d2f5a2a9c30.jpg b/img/1741878690_67d2f5a2a9c30.jpg
new file mode 100644
index 0000000..6b9f3fd
Binary files /dev/null and b/img/1741878690_67d2f5a2a9c30.jpg differ
diff --git a/js/conciertos.js b/js/conciertos.js
index 96cd770..7f733ac 100644
--- a/js/conciertos.js
+++ b/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"
- });
-}
diff --git a/views/agregar_evento.html b/views/agregar_evento.html
index 9e7bb34..5f8e933 100644
--- a/views/agregar_evento.html
+++ b/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>
diff --git a/views/editar_evento.html b/views/editar_evento.html
index 649e267..255e4cb 100644
--- a/views/editar_evento.html
+++ b/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>
diff --git a/views/index.html b/views/index.html
index 8cb1127..8f97f4a 100644
--- a/views/index.html
+++ b/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>
- <a href="editar_evento.html" class="btn">Editar Evento</a>
+ <nav>
+ <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="carousel-container">
- <button class="scroll-btn left" onclick="scrollConciertos(-1)">❮</button>
- <div class="contenedor-conciertos" id="conciertos"></div>
- <button class="scroll-btn right" onclick="scrollConciertos(1)">❯</button>
+ <div class="contenedor-principal">
+ <button class="flecha-izquierda">❮</button>
+
+ <div class="contenedor-conciertos" id="conciertos">
+ <!-- Aquí se cargarán los conciertos dinámicamente -->
+ </div>
+
+ <button class="flecha-derecha">❯</button>
</div>
</body>
diff --git a/views/venta_boletos.html b/views/venta_boletos.html
index 91df5b1..fc5d8b2 100644
--- a/views/venta_boletos.html
+++ b/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>