LeireTedCas's picture
Update templates/videos.html
231c627
raw
history blame
4.76 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Quirohelp </title>
<style>
body {
background-color: #333; /* Fondo oscuro */
color: #fff; /* Texto blanco */
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
text-align: center;
}
.quiro {
background-color: blueviolet;
font-size: 3.5rem;
padding: 20px 0;
}
.login2 {
text-align: center;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
grid-gap: 10px;
align-items: center;
}
.element {
text-align: center;
max-height: 100%;
}
img {
max-width: 15%;
height: auto;
}
.text {
font-size: 36px; /* Tamaño de letra deseado */
}
.text2 {
font-size: 24px; /* Tamaño de letra deseado */
}
/* Estilos para pantallas pequeñas (por ejemplo, hasta 768px) */
@media screen and (max-width: 768px) {
.quiro {
font-size: 2.5rem; /* Reducir el tamaño de la fuente */
}
input[type="button"] {
width: 100%; /* Ajustar el ancho al 100% para ocupar todo el ancho disponible */
}
}
/* Estilos para pantallas medianas y grandes (más de 768px) */
@media screen and (min-width: 769px) {
.quiro {
font-size: 3.5rem; /* Restablecer el tamaño de la fuente original */
}
}
</style>
</head>
<body>
<div class="login22">
<!--<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;font-size: 3rem;background-color: blueviolet;"><img src="{{ user_image7 }}" alt="" style="max-width:5%;" onclick="location.href='/especialidad'"> Videos: </h2>
<hr/>-->
<h2 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 3rem; background-color: blueviolet; max-width: 100%; overflow: hidden; display: flex; align-items: center;">
<div class="container">
<div class="element">
<img src="{{ user_image7 }}" alt="Atrás" onclick="location.href='/especialidad'">
</div>
<div class="element">
<p class="text2">Volver</p>
</div>
<div class="element">
<p class="text">VIDEOS</p>
</div>
</div>
</h2>
</div>
<form action="{{url_for('videos_trauma')}}" method="post">
<br>
{% for titulo1, pdfs in titulos.items() %}
<div style="display: inline-block; border: 1.5px solid #ffffff; padding: 10px;">
<strong style="font-size: 2.5rem; font-family: Arial, Helvetica, sans-serif; margin: 0;">{{ titulo1 }} :</strong>
</div>
{% for titulo2, url in pdfs.items() %}
<div style="display: flex; align-items: center; margin-bottom: 10px; width: 100%;">
<!--<img src="{{ abrir }}" alt="Imagen" style="max-width: 40px; max-height: 40px; margin-right: 10px;">-->
<input type="button" value="" style="background-color: white; font-size: 2.5rem; width: 60px; height: 60px; margin-right: 10px; padding-left: 50px; background-image: url('{{ abrir }}'); background-repeat: no-repeat; background-size: 40px 40px; background-position: center;" onclick="location.href='{{ url }}'">
<strong style="font-size: 2rem; font-family: Arial, Helvetica, sans-serif;">{{ titulo2 }}</strong>
<!--<strong style="font-size: 2.5rem; font-family: Arial, Helvetica, sans-serif;">{{ titulo }}</strong>-->
</div>
<!--<input type="button" value="" style="background-color: white; font-size: 2.5rem; margin-bottom: 10px; padding-left: 50px; background-image: url('{{ abrir }}'); background-repeat: no-repeat; background-size: 40px 40px;background-position: center;" onclick="location.href='{{ url }}'">-->
<br>
<hr style="width: 100%; margin: 0;">
<!--<a href="{{url}}" style="font-size: 1.2rem;font-family: Arial, Helvetica, sans-serif;">{{titulo}}</a>-->
{% endfor %}
<!--<div style="font-size: 1.2rem; font-family: Arial, Helvetica, sans-serif;">
<a href="{{ url }}">{{ titulo2 }}</a>
</div>-->
<br>
{% endfor %}
</form>
</body>
</html>