added leaderboard and goodies

app.py

@@ -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':

static/styles.css

@@ -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%;
+    height: 150%;
-    width: 100%;
+    width: 150%;
-    top: 0;
+    top: -25%;
-    left: -100%;
+    left: -25%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+    background: radial-gradient(circle, rgba(255,255,255,0.3) 100%, transparent 10.01%);
-    transition: left 0.5s ease;
+    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);
+    box-shadow: 0 0 10px rgba(85, 38, 5, 0.7);
-    animation: pulse 2s infinite;
+    /* 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); }
+@keyframes pulse {
-    50% { transform: scale(1.05); }
+    0% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
-    100% { transform: scale(1); }
+    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 {

templates/add_pin.html

@@ -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){

templates/base.html

@@ -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;">
+    {% include 'nav.html' %}
-        <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>
     {% with messages = get_flashed_messages() %}
         {% if messages %}
         
@@ -84,23 +58,23 @@
         </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 %}
+        {% endblock %}
-<section id="pinner-modal" style="" hidden="true">
+        <section id="pinner-modal" style="" hidden="true">
-    {% if current_user.is_authenticated %}
+            {% if current_user.is_authenticated %}
-        {% include 'add_pin.html' %}
+                {% include 'add_pin.html' %}
-</section>
+        </section>
-    {% else %}
+            {% else %}
-        <div class="flashes">
+            <div class="flashes">
-            <h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
+                <h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
-        </div>
+            </div>
-    </section>
+        </section>
-    {% endif %}
+            {% 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>

templates/dashboard.html

@@ -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><b>Tipo de Mejora Urbana:</b></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>{{ 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 %}

templates/faq.html

@@ -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>

templates/index.html

@@ -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>

templates/leaderboard.html

@@ -1,29 +1,44 @@
 {% extends 'secondbase.html' %}
 {% block content %}
-<div class="container grid" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
+<div class="container" 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>
+    <!-- Header -->
-</div>
+    <div class="header-cta">
-<div class="container grid" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
+        <h2 style="text-align: center; color: #172f01; margin-bottom: 1rem;">¡Hazte mapista y pon tu granito de fotoevidencia!</h2>
-    <table>
+        <p style="text-align: center; margin-bottom: 2rem;">Cada contribución cuenta. Mira lo que estamos logrando y sé parte del cambio.<br></p>
-        <thead>
+    </div>
-            <tr>
+    
-                <th scope="col">Mapista</th>
+    <!-- Grid container for side-by-side layout -->
-                <th scope="col">Marcador</th>
+    <div class="grid">
-            </tr>
+        <!-- Table column -->
-        </thead>
+        <div>
-        <tbody>
+            <div style="display: flex; align-items: center; height: 300px;">
-    {% for leader in leaders %}
+                <table style="color: rgb(87, 90, 91); width: 100%;">
-            <tr>
+                    <thead>
-                <td scope="row">{{leader.username}}</td>
+                        <tr>
-                <td scope="row">{{leader.count}}</td>
+                            <th scope="col">Mapista</th>
-            </tr>
+                            <th scope="col">Marcador</th>
-    {% endfor %}
+                        </tr>
-        </tbody>
+                    </thead>
-    </table>
+                    <tbody>
-<div>
+                    {% for leader in leaders %}
-<h3>Porcentaje de usuarios activos</h3>
+                        <tr>
-<div class="chart-container" style="position: relative; height:300px; width:300px; margin: 0 auto;">
+                            <td scope="row">{{leader.username}}</td>
-    <canvas id="activeUsersChart"></canvas>
+                            <td scope="row">{{leader.count}}</td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+            </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',
+                        'rgba(100, 180, 10, 1)',
-                        'blue'
+                        'rgba(87, 90, 91, 0.8)'
                     ],
                     borderColor: [
-                        'rgba(75, 192, 192, 1)',
+                        'rgba(100, 180, 10, 1)',
-                        'rgba(201, 203, 207, 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 + '%';
+                            }
+                        }
                     }
                 }
             }

templates/nav.html

@@ -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>

templates/quienes.html

@@ -1,17 +1,35 @@
 {% extends 'secondbase.html' %}
 {% block content %}
-
+<div class="container" style="max-width: 80vw; max-height: 80vh; margin: 2rem auto; overflow-y: auto; padding: 1rem;">
-    <article class="info" style="">
+    <div class="info" style="margin-bottom: 2rem;">
-        <h4>Somos civiles y voluntari@s</h4>
+        <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>
-{% endblock %}
+    
+    <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 %}

templates/secondbase.html

@@ -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;">