89 lines
2.7 KiB
HTML
89 lines
2.7 KiB
HTML
{% extends 'template.html' %}
|
|
|
|
{% block css %}
|
|
<link rel="stylesheet" href="{{url_for('static', filename='a_home/home.css')}}">
|
|
{% endblock css %}
|
|
|
|
{% block navbar %}
|
|
{% include 'z_comps/navbar.html' %}
|
|
{% endblock navbar %}
|
|
|
|
{% block body %}
|
|
|
|
<style>
|
|
@media screen and (orientation: landscape) {
|
|
.carousel img {
|
|
height: 80vh;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.carousel-caption.centered {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none; /* clics pasan a la imagen debajo */
|
|
}
|
|
|
|
.carousel-caption.centered .caption-content {
|
|
padding: 1rem 2rem;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
text-align: center;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.3);
|
|
pointer-events: auto; /* permite clics aquí */
|
|
width: max-content;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.carousel-caption.centered .caption-content h2 {
|
|
font-size: clamp(1.5rem, 5vw, 3rem);
|
|
margin: 0;
|
|
text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
|
|
}
|
|
</style>
|
|
|
|
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
{% for s in data %}
|
|
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ loop.index0 }}"
|
|
class="{% if loop.first %}active{% endif %}" aria-current="{{ 'true' if loop.first else 'false' }}"
|
|
aria-label="Slide {{ loop.index }}"></button>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="carousel-inner">
|
|
|
|
{% for s in data %}
|
|
<div class="carousel-item {% if loop.first %}active{% endif %}">
|
|
{% if s[1].endswith('.mp4') %}
|
|
<video class="d-block w-100" autoplay muted loop playsinline>
|
|
<source src="{{ url_for('static', filename='uploads/' + s[1]) }}" type="video/mp4">
|
|
Tu navegador no soporta el video.
|
|
</video>
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='uploads/' + s[1]) }}" class="d-block w-100" alt="...">
|
|
{% endif %}
|
|
<div class="carousel-caption centered">
|
|
<div class="caption-content" style="background-color: {{ s[2] }}; color: {{ s[3] }};">
|
|
<h2>{{ s[4] }}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
|
|
{% endblock body %}
|
|
|