Modifiqué el estilo del carrusel de conciertos
This commit is contained in:
parent
2de036f406
commit
cc71079a85
164
css/estilos.css
164
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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
After 
(image error) Size: 107 KiB |
|
|
@ -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"
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@
|
|||
</div>
|
||||
|
||||
<button id="confirmarCompra">Confirmar Compra</button>
|
||||
<a href="../views/index.html" class="boton-volver">Volver</a>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue