From f3377eb722ba1f68ebb944443727c955f321291d Mon Sep 17 00:00:00 2001
From: orson <st4t3@abysmal.mx>
Date: Sat, 8 Mar 2025 15:29:24 -0600
Subject: [PATCH] added leaderboard and goodies

---
 app.py                     |  2 +-
 static/styles.css          | 46 ++++++++++++--------
 templates/add_pin.html     |  4 +-
 templates/base.html        | 69 +++++++++++-------------------
 templates/dashboard.html   | 44 +++++++++++--------
 templates/faq.html         | 17 ++++++++
 templates/index.html       | 28 ++++++++++--
 templates/leaderboard.html | 88 +++++++++++++++++++++++++-------------
 templates/nav.html         | 61 ++++++++++++++++++++++++++
 templates/quienes.html     | 30 ++++++++++---
 templates/secondbase.html  |  5 ++-
 11 files changed, 271 insertions(+), 123 deletions(-)
 create mode 100644 templates/faq.html
 create mode 100644 templates/nav.html

diff --git a/app.py b/app.py
index 9d13ca1..5bfee3b 100644
--- a/app.py
+++ b/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':
diff --git a/static/styles.css b/static/styles.css
index d74be33..bc06055 100644
--- a/static/styles.css
+++ b/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%;
-    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 {
diff --git a/templates/add_pin.html b/templates/add_pin.html
index a4f581d..a8d4fa0 100644
--- a/templates/add_pin.html
+++ b/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){
diff --git a/templates/base.html b/templates/base.html
index 8a33964..1946c20 100644
--- a/templates/base.html
+++ b/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;">
-        <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,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 %}
-<section id="pinner-modal" style="" hidden="true">
-    {% if current_user.is_authenticated %}
-        {% include 'add_pin.html' %}
-</section>
-    {% else %}
-        <div class="flashes">
-            <h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
-        </div>
-    </section>
-    {% endif %}
+        {% endblock %}
+        <section id="pinner-modal" style="" hidden="true">
+            {% if current_user.is_authenticated %}
+                {% include 'add_pin.html' %}
+        </section>
+            {% else %}
+            <div class="flashes">
+                <h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
+            </div>
+        </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>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 29a0673..d0bce47 100644
--- a/templates/dashboard.html
+++ b/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><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 %}
diff --git a/templates/faq.html b/templates/faq.html
new file mode 100644
index 0000000..c8316b1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 6a86e4a..3745052 100644
--- a/templates/index.html
+++ b/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>
diff --git a/templates/leaderboard.html b/templates/leaderboard.html
index 67d3304..a503039 100644
--- a/templates/leaderboard.html
+++ b/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">
-<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>
-        <thead>
-            <tr>
-                <th scope="col">Mapista</th>
-                <th scope="col">Marcador</th>
-            </tr>
-        </thead>
-        <tbody>
-    {% for leader in leaders %}
-            <tr>
-                <td scope="row">{{leader.username}}</td>
-                <td scope="row">{{leader.count}}</td>
-            </tr>
-    {% endfor %}
-        </tbody>
-    </table>
-<div>
-<h3>Porcentaje de usuarios activos</h3>
-<div class="chart-container" style="position: relative; height:300px; width:300px; margin: 0 auto;">
-    <canvas id="activeUsersChart"></canvas>
+<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>
+                            <th scope="col">Marcador</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {% for leader in leaders %}
+                        <tr>
+                            <td scope="row">{{leader.username}}</td>
+                            <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',
-                        '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 + '%';
+                            }
+                        }
                     }
                 }
             }
diff --git a/templates/nav.html b/templates/nav.html
new file mode 100644
index 0000000..00c58bd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/quienes.html b/templates/quienes.html
index a2bbfd7..1d164d1 100644
--- a/templates/quienes.html
+++ b/templates/quienes.html
@@ -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>
-{% endblock %}
\ No newline at end of file
+    </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 %}
diff --git a/templates/secondbase.html b/templates/secondbase.html
index b1d241a..1c4897c 100644
--- a/templates/secondbase.html
+++ b/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;">