royrga/bachemap
1
0
Fork 0
forked from orson/bachemap
Code Pull Requests Activity

added leaderboard and goodies

Browse Source
This commit is contained in:
Orson 2025-03-08 15:29:24 -06:00
parent 3a903736e4
commit f3377eb722
11 changed files with 271 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

@ -119,7 +119,7 @@ def create_app(config=Config):
def registrame(referral_code):
inviter = mongo.db.users.find_one({"referral_code": referral_code})
if not inviter:
message = "Ooops, parece que nadie te invitó aquí"
message = "Ooops, parece que nadie te invitó aquí... Puedes saber más sobre esta decisión aquí https://baches.qro.mx/quienes#preguntas"
return render_template('error.html', message = message), 406
if request.method == 'POST':

46
static/styles.css
View File

@ -19,7 +19,7 @@ body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
/* height: 100%; */
width: 100%;
color: var(--text-color);
}
@ -55,12 +55,12 @@ main {
margin: 0;
padding: 0;
position: absolute;
top: 0;
top: 10vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
/* height: 100vh; */
width: 100vw;
z-index: 5;
}
@ -139,21 +139,29 @@ button {
position: relative;
overflow: hidden;
background-color: var(--accent-color);
border: none;
}
button::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: -100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
height: 150%;
width: 150%;
top: -25%;
left: -25%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 100%, transparent 10.01%);
transform: scale(0);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
button:hover {
background-color: rgba(255, 136, 0, 0.8);
}
button:hover::after {
left: 100%;
transform: scale(1);
opacity: 1;
}
#pinner-top {
@ -253,12 +261,15 @@ section#pinner-modal::-webkit-scrollbar-thumb {
.leaflet-marker-icon:hover {
transform: scale(1.2);
}
.eaflet-popup-content {
width: 100%;
}
.marker-cluster {
background-color: greenyellow !important;
background-color: rgb(249, 170, 61) !important;
border-radius: 100px;
box-shadow: 0 0 10px rgba(172, 255, 47, 0.7);
animation: pulse 2s infinite;
box-shadow: 0 0 10px rgba(85, 38, 5, 0.7);
/* Animation removed as it was causing visibility issues */
}
.fa, .far, .fas {
@ -291,17 +302,18 @@ section#pinner-modal::-webkit-scrollbar-thumb {
90% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-20px); }
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(0); }
90% { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
@keyframes pulse {
0% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
50% { box-shadow: 0 0 15px rgba(172, 255, 47, 0.9); }
100% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
}
/* Media queries for responsiveness */
@media (max-width: 768px) {
section#pinner-modal {

4
templates/add_pin.html
View File

@ -1,6 +1,6 @@
<form method="post" enctype="multipart/form-data" >
<progress id="progress" hidden="true"></progress>
{% if form %}
{{ form.hidden_tag() }}
<!--<p>
{{ form.description.label }}<br>
@ -24,6 +24,8 @@
<td style="background-color:transparent"><button style="background-color: red; color:white" id="cancel-add" type="button">Cancelar</button></td>
</tr>
</table>
{% endif %}
</form>
<script>
document.getElementById('submit').onclick=function(e){

53
templates/base.html
View File

@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bachemapa - Mapa interactivo de baches y otras cosas</title>
<link rel="stylesheet" href="{{ url_for('static', filename='pico.amber.css') }}">
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='pico.amber.css') }}"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
@ -46,34 +47,7 @@
<!-- Versión pública 0.1 -->
</head>
<body class="" style="color: black;">
<nav style="height: auto;">
<ul>
<a href="/">
<li style="display: flex; align-items: center;">
<img id="logo" src="{{ url_for('static', filename='images/bachemapalogo.png') }}" alt="Bachemapa Logo" style="height: 10vh; margin-right: 10px;">
<h3 style="margin-bottom: 0;"><span style="color: #4a8522;">Bache</span><span style="color: #fa8721;">mapa</span></h3>
</li>
</a>
</ul>
<ul>
<div id="login-placeholder">
</div>
</ul>
<ul>
{% if current_user.is_authenticated %}
<li><button id="pinner-top">Agregar</button></li>
<li><button><a href="/logout">Cerrar Sesión</a></button></li>
{% else %}
<li><button><a href="/thelogin">Iniciar Sesión</a></button></li>
{% endif %}
<li><button><a href="/quienes">Somos</a></button></li>
{% if current_user.is_authenticated %}
<li><button><a href="/dashboard">Perfil</a></button></li>
{% endif %}
</ul>
</nav>
{% include 'nav.html' %}
{% with messages = get_flashed_messages() %}
{% if messages %}
@ -84,15 +58,15 @@
</div>
{% endif %}
{% endwith %}
<main class="" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: absolute;">
<main class="container-fluid" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: absolute;">
{% block content %}
{% block content %}
{% endblock %}
<section id="pinner-modal" style="" hidden="true">
{% endblock %}
<section id="pinner-modal" style="" hidden="true">
{% if current_user.is_authenticated %}
{% include 'add_pin.html' %}
</section>
</section>
{% else %}
<div class="flashes">
<h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
@ -100,7 +74,7 @@
</section>
{% endif %}
</main>
</main>
</body>
<script>
@ -134,5 +108,12 @@ window.addEventListener('load', function() {
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const pinnerDesktop = document.getElementById("pinner-top-desktop");
if (pinnerDesktop) {
pinnerDesktop.addEventListener('click', toggleSlide);
}
});
</script>
</html>

44
templates/dashboard.html
View File

@ -7,11 +7,11 @@
overflow-y: scroll;
}
</style>
<div class="container-fluid" style="padding-top: 30px; max-width: 75vw; background-color: rgba(189, 216, 3, 0.9)">
<div class="container-fluid" style="padding-top: 30px; max-width: 75vw; background-color: rgba(189, 216, 3, 0.9); padding: 3rem;">
<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
<p>Aquí puedes ver los pines que has agregado y consultar tu enlace/QR de invitación. Cada vez que recargas esta página, tu enlace de invitacón cambia y el anterior se vuelve inválido.</p>
<div class="grid" style="padding-bottom: 2rem;">
<div id="qrgen" style="">
<div id="qrgen" style="padding-left: 5rem;">
</div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrgen"), {
@ -34,33 +34,39 @@
<table border="1" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>Agregado el</td>
<td><b>Agregado el</b></td>
<td>{{ pin.time }}</td>
</tr>
<tr>
<td>Photo</td>
<td><img style="max-height: 66px;" src="{{ pin.photo }}"></td>
</tr>
<tr>
<td>Latitude</td>
<td>{{ pin.lat }}</td>
</tr>
<tr>
<td>Longitude</td>
<td>{{ pin.lng }}</td>
</tr>
<tr>
<td>Tipo de mejora urbana</td>
<td><b>Tipo de Mejora Urbana:</b></td>
<td>{{ pin.typeofpin }}</td>
</tr>
<tr>
<td>Eliminar pin</td>
<td><b>Descripción</b></td>
<td>{{ pin.description }}</td>
</tr>
<tr>
<td><b>Dirección</b></td>
<td>{{ pin.address }}</td>
</tr>
<tr>
<td><b>Foto</b></td>
<td><img style="max-height: 66px;" src="{{ pin.photo }}"></td>
</tr>
<tr>
<td><b>Latitud:</b></td>
<td>{{ pin.lat }}</td>
</tr>
<tr>
<td><b>Longitud:</b></td>
<td>{{ pin.lng }}</td>
</tr>
<tr>
<td><b>Eliminar este Pin:</b></td>
<td><a href="/remove_pin/{{pin._id}}"><button type="submit" formmethod="get">Eliminar</button></a></td>
</tr>
</tbody>
</table>
{% endfor %}
{% endif %}

17
templates/faq.html Normal file
View File

@ -0,0 +1,17 @@
<article id="preguntas">
<h4>Preguntas Frecuentes</h4>
<h5>¿Qué es Bachemapa?</h5>
<p>Bachemapa es una plataforma dedicada a documentar y reportar problemas con el desarrollo urbano en Querétaro, México. Encuentra y aporta información actualizada sobre baches, deficiencias en infraestructura y más.</p>
<h5>¿Por qué no puedo registrarme?</h5>
<p>Para mantener la integridad de nuestra comunidad y asegurar un entorno de cooperación y compromiso, hemos optado por permitir el registro sólo mediante invitación. Esta modalidad nos ayuda a garantizar que cada nuevo integrante aporte valor a la experiencia colectiva, fomentando un ambiente seguro y centrado en el desarrollo urbano responsable.</p>
<h5>¿Cómo puedo obtener una invitación?</h5>
<p>Para obtener una invitación, sólo tienes que pedírsela a un amigo que ya esté registrado en Bachemapa. Cada usuario registrado tiene un enlace de invitación que puede compartir con sus amigos. Si no conoces a nadie que esté registrado, puedes preguntarle a tu amix de confianza, o acercarte a nosotrxs en nuestro <a href="https://t.me/bachemapa">grupo de Telegram</a>.</p>
<h5>¿Cómo puedo reportar un bache?</h5>
<p>Para reportar un bache, sólo tienes que seleccionar el lugar donde está (o aceptar la geolocalización al abrir la página), hacer clic en el botón "Agregar" en la parte superior de la página. Agrega una foto, selecciona el tipo de (des)mejora urbana y una descripción poéticamente responsable y listo. Tu reporte será visible en el mapa en cuanto lo envíes.</p>
<h5>¿Cómo puedo ver los reportes que he hecho?</h5>
<p>Para ver los reportes que has hecho, sólo tienes que hacer clic en el botón "Perfil" en la parte superior de la página. Ahí podrás ver todos los reportes que has hecho y elmininarlos, así como consultar tu enlace y tu código de invitación.</p>
<h5>¿Cómo puedo invitar a mis amigos a reportar baches?</h5>
<p>Para invitar a tus amigos a reportar baches, sólo tienes que compartir tu enlace de invitación con ellos o dejar que escaneen el código QR en tu Perfil (ese código es equivalente al enlace). El enlace expira rápido, en cuanto recargas el perfil, así que insta a tus amix a que se registren frente a tu cara, con tus bellos ojos de testigas.</p>
<h5>¿Cómo puedo subir en el ranking de Bachistas?</h5>
<p>Para subir en el ranking de Bachistas, sólo tienes que reportar más de tus baches favoritos y más seguido.</p>
</article>

28
templates/index.html
View File

@ -38,7 +38,16 @@
iconSize:[10,10],
iconAnchor:[5,5],
});
markerCluster.addLayer(L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon}).bindPopup("<b>{{ pin.description }}</b>{% if pin.address %}<br>{{pin.address}}{% endif %}<p>Fecha del reporte: {{pin.time}}</p><br><img src='{{ pin.photo }}'>"));
var marker = L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon});
var popupContent = "<div class='container' style='width:301px'><div style='display: grid; grid-template-columns: 1fr 1fr; gap: 10px;'><div><b>{{ pin.description }}</b>{% if pin.address %}<br>{{pin.address}}{% endif %}<p>Fecha del reporte: {{pin.time}}</p></div><div><img src='{{ pin.photo }}' style='width:100%'></div></div></div>";
marker.bindPopup(popupContent, {
autoPan: true,
autoPanPadding: [100, 100], // Large padding to position towards the area with more space
maxWidth: 300
});
markerCluster.addLayer(marker);
//markerCluster.addlayer(
//L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon}).addTo(map)
@ -75,8 +84,21 @@
var latlng = e.latlng;
document.getElementById('lat').value = latlng.lat;
document.getElementById('lng').value = latlng.lng;
map.flyTo(e.latlng, zoom=18);
user_marker.setLatLng(e.latlng).bindPopup('<button id="pinner-pop">Agregar bache-o-cosa</button>').openPopup();
// Calculate the vertical offset (25% of the map's height)
var offset = map.getSize().y * 0.25;
// Convert the clicked location to container point
var containerPoint = map.latLngToContainerPoint(latlng);
// Adjust the container point upward by the offset
var targetCenterPoint = L.point(containerPoint.x, containerPoint.y - offset);
// Convert the adjusted point back to geographical coordinates
var targetLatLng = map.containerPointToLatLng(targetCenterPoint);
// Fly to the adjusted center so the marker appears 25% lower from the center
map.flyTo(targetLatLng, 18, { duration: 0.7 });
map.once('moveend', function() {
user_marker.setLatLng(latlng).bindPopup('<button id="pinner-pop">Agregar bache-o-cosa</button>').openPopup();
});
user_radial.remove();
});
</script>

56
templates/leaderboard.html
View File

@ -1,10 +1,18 @@
{% extends 'secondbase.html' %}
{% block content %}
<div class="container grid" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
<h2>Aquí puedes consultar quiénes están contribuyendo. Por cuestiones de privacidad, los nombres están modificados, pero si sabes, sabes</h2>
</div>
<div class="container grid" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
<table>
<div class="container" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
<!-- Header -->
<div class="header-cta">
<h2 style="text-align: center; color: #172f01; margin-bottom: 1rem;">¡Hazte mapista y pon tu granito de fotoevidencia!</h2>
<p style="text-align: center; margin-bottom: 2rem;">Cada contribución cuenta. Mira lo que estamos logrando y sé parte del cambio.<br></p>
</div>
<!-- Grid container for side-by-side layout -->
<div class="grid">
<!-- Table column -->
<div>
<div style="display: flex; align-items: center; height: 300px;">
<table style="color: rgb(87, 90, 91); width: 100%;">
<thead>
<tr>
<th scope="col">Mapista</th>
@ -20,10 +28,17 @@
{% endfor %}
</tbody>
</table>
<div>
<h3>Porcentaje de usuarios activos</h3>
<div class="chart-container" style="position: relative; height:300px; width:300px; margin: 0 auto;">
</div>
</div>
<!-- Chart column -->
<div style="text-align: center;">
<h3>Porcentaje de usuarios activos</h3>
<div class="chart-container" style="display:block ruby; position: relative; height:300px; width:100%; margin: 0 auto;">
<canvas id="activeUsersChart"></canvas>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
@ -35,16 +50,20 @@
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Usuarios Activos', 'Usuarios Inactivos'],
// Append percentages directly to the legend labels
labels: [
'Usuarios Activos (' + activePercentage + '%)',
'Usuarios Inactivos (' + inactivePercentage + '%)'
],
datasets: [{
data: [activePercentage, inactivePercentage],
backgroundColor: [
'green',
'blue'
'rgba(100, 180, 10, 1)',
'rgba(87, 90, 91, 0.8)'
],
borderColor: [
'rgba(75, 192, 192, 1)',
'rgba(201, 203, 207, 1)'
'rgba(100, 180, 10, 1)',
'rgb(87, 90, 91)'
],
borderWidth: 1
}]
@ -53,11 +72,20 @@
responsive: true,
plugins: {
legend: {
position: 'top',
position: 'top'
},
title: {
display: true,
text: 'Distribución de Usuarios Activos'
},
tooltip: {
callbacks: {
label: function(context) {
var label = context.label || '';
var value = context.parsed;
return label + ': ' + value + '%';
}
}
}
}
}

61
templates/nav.html Normal file
View File

@ -0,0 +1,61 @@
<nav style="height: auto;">
<ul>
<a href="/">
<li style="display: flex; align-items: center;">
<img id="logo" src="{{ url_for('static', filename='images/bachemapalogo.png') }}" alt="Bachemapa Logo" style="height: 10vh; margin-right: 10px;">
<h3 style="margin-bottom: 0;"><span style="color: #4a8522;">Bache</span><span style="color: #fa8721;">mapa</span></h3>
</li>
</a>
</ul>
<ul>
<!-- Mobile menu toggle -->
<!-- Mobile menu toggle (only appears on screens less than 600px wide) -->
<details role="list" dir="rtl" class="mobile-menu">
<summary aria-haspopup="listbox" role="link" class="secondary">
<i class="fas fa-bars"></i>
</summary>
<ul role="listbox">
{% if current_user.is_authenticated %}
<li><a id="pinner-top" href="#" role="button">Agregar</a></li>
<li><a href="/logout" role="button" class="secondary">Cerrar Sesión</a></li>
<li><a href="/dashboard" role="button">Perfil</a></li>
{% else %}
<li><a href="/thelogin" role="button">Iniciar Sesión</a></li>
{% endif %}
<li><a href="/quienes" role="button" class="secondary">Somos</a></li>
<li><a href="/leaderboard" role="button">Bachistas ★</a></li>
<li><a href="/quienes#tengopreguntas" role="button" class="contrast"><i class="fas fa-question"></i></a></li>
</ul>
</details>
<!-- Desktop menu (only appears on screens 600px or wider) -->
<ul class="desktop-menu">
{% if current_user.is_authenticated %}
<li><a id="pinner-top-desktop" href="#" role="button">Agregar</a></li>
<li><a href="/logout" role="button" class="secondary">Cerrar Sesión</a></li>
<li><a href="/dashboard" role="button">Perfil</a></li>
{% else %}
<li><a href="/thelogin" role="button">Iniciar Sesión</a></li>
{% endif %}
<li><a href="/quienes" role="button" class="secondary">Somos</a></li>
<li><a href="/leaderboard" role="button">Bachistas ★</a></li>
<li><a href="/quienes#tengopreguntas" role="button" class="contrast"><i class="fas fa-question"></i></a></li>
</ul>
</ul>
<style>
@media (max-width: 715px) {
.desktop-menu {
display: none;
}
}
@media (min-width: 716px) {
.mobile-menu {
display: none;
}
}
</style>
</nav>

28
templates/quienes.html
View File

@ -1,17 +1,35 @@
{% extends 'secondbase.html' %}
{% block content %}
<article class="info" style="">
<h4>Somos civiles y voluntari@s</h4>
<div class="container" style="max-width: 80vw; max-height: 80vh; margin: 2rem auto; overflow-y: auto; padding: 1rem;">
<div class="info" style="margin-bottom: 2rem;">
<h2 style="text-align: center;">Somos civiles y voluntari@s</h4>
<p>Esta página es un servicio comunitario desarrollado por el hackspace Kernel Panic Room, con un (maravilloso) dominio patrocinado por el programa de RSE de <a href="https://qro.mx">Qro.mx</a>.</p>
<p>Nuestro objetivo es construir un puente entre la ciudadanía y las autoridades estatales y municipales para poder recabar, catalogar y visibilizar los problemas infraestructurales de nuestra entidad, con el fin de facilitar que se solucionen.</p>
<p>No perseguimos fines políticos, sólo estamos interesad@s en mejorar nuestro entorno y la calidad de vida que tenemos.</p>
<h2>Este mapa no hubiera sido posible si no hubieramos conocido a José Luis Ramos</h2>
<h3 style="text-align: center;">Este mapa no hubiera sido posible si no hubieramos conocido a José Luis Ramos</h2>
<p>José Luis falleció en Marzo del 2024. No sólo se nos fue una persona maravillosa, sino también el activista más activo que much@s de nosotr@s conocimos. Este mapa es un homenaje a su vida y a la lucha que encabezó siempre buscando hacer del mundo un lugar mejor para <b>tod@s</b>. Sí, incluso para quienes nunca lo entendieron a él o a su lucha.</p>
<p>Nos volveremos a ver, amigo José Luis, y rodaremos juntos de nuevo. Esperamos que te estés riendo desde las alturas de tu vuelo.</p>
<img src="{{url_for('static', filename='images/ramos.jpg')}}">
</article>
</div>
<div class="info" id="tengopreguntas">
<h4>Preguntas Frecuentes</h4>
<h5>¿Qué es Bachemapa?</h5>
<p>Bachemapa es una plataforma dedicada a documentar y reportar problemas con el desarrollo urbano en Querétaro, México. Encuentra y aporta información actualizada sobre baches, deficiencias en infraestructura y más.</p>
<h5>¿Por qué no puedo registrarme?</h5>
<p>Para mantener la integridad de nuestra comunidad y asegurar un entorno de cooperación y compromiso, hemos optado por permitir el registro sólo mediante invitación. Esta modalidad nos ayuda a garantizar que cada nuevo integrante aporte valor a la experiencia colectiva, fomentando un ambiente seguro y centrado en el desarrollo urbano responsable.</p>
<h5>¿Cómo puedo obtener una invitación?</h5>
<p>Para obtener una invitación, sólo tienes que pedírsela a un amigo que ya esté registrado en Bachemapa. Cada usuario registrado tiene un enlace de invitación que puede compartir con sus amigos. Si no conoces a nadie que esté registrado, puedes preguntarle a tu amix de confianza, o acercarte a nosotrxs en nuestro <a href="https://t.me/bachemapa">grupo de Telegram</a>.</p>
<h5>¿Cómo puedo reportar un bache?</h5>
<p>Para reportar un bache, sólo tienes que seleccionar el lugar donde está (o aceptar la geolocalización al abrir la página), hacer clic en el botón "Agregar" en la parte superior de la página. Agrega una foto, selecciona el tipo de (des)mejora urbana y una descripción poéticamente responsable y listo. Tu reporte será visible en el mapa en cuanto lo envíes.</p>
<h5>¿Cómo puedo ver los reportes que he hecho?</h5>
<p>Para ver los reportes que has hecho, sólo tienes que hacer clic en el botón "Perfil" en la parte superior de la página. Ahí podrás ver todos los reportes que has hecho y elmininarlos, así como consultar tu enlace y tu código de invitación.</p>
<h5>¿Cómo puedo invitar a mis amigos a reportar baches?</h5>
<p>Para invitar a tus amigos a reportar baches, sólo tienes que compartir tu enlace de invitación con ellos o dejar que escaneen el código QR en tu Perfil (ese código es equivalente al enlace). El enlace expira rápido, en cuanto recargas el perfil, así que insta a tus amix a que se registren frente a tu cara, con tus bellos ojos de testigas.</p>
<h5>¿Cómo puedo subir en el ranking de Bachistas?</h5>
<p>Para subir en el ranking de Bachistas, sólo tienes que reportar más de tus baches favoritos y más seguido.</p>
</div></div>
{% endblock %}

5
templates/secondbase.html
View File

@ -33,7 +33,8 @@
<!-- Versión pública 0.1 -->
</head>
<body style="color: black; height: 100%; margin: 0;">
<nav style="height: auto;">
{% include 'nav.html' %}
<!-- <nav style="height: auto;">
<ul>
<a href="/">
<li style="display: flex; align-items: center;">
@ -52,7 +53,7 @@
<li><button><a href="/dashboard">Perfil</a></button></li>
{% endif %}
</ul>
</nav>
</nav> -->
{% with messages = get_flashed_messages() %}
{% if messages %}
<div style="position:sticky; z-index: 9999;">