style changes, fixed login flow and modals

app.py

@@ -244,31 +244,55 @@ def create_app(config=Config):
     
     @app.route('/leaderboard')
     def leaderboard():
-        leaders = mongo.db.pins.aggregate([
+        pipeline = [
             {"$group": {"_id": "$added_by", "count": {"$sum": 1}}},
             {"$sort": {"count": -1}},
             {"$limit": 10},
-            {"$lookup": {
+        ]
-                "from": "users",
+        
-                "localField": "_id",
+        # Convert the aggregation result to a list
-                "foreignField": "_id",
+        leaders_by_id = list(mongo.db.pins.aggregate(pipeline))
-                "as": "user_info"
+        
-            }},
+        # Create a list to store the final results
-            {"$unwind": "$user_info"},
+        cleaned_leaders = []
-            {"$project": {"_id": 0, "username": "$user_info.username", "count": 1}}
+        
-        ])
+        # Process each leader
-        #print(list(leaders))
+        for leader in leaders_by_id:
-        cleaned_leaders=list()
+            user_id = leader["_id"]
-        print(cleaned_leaders)
+            count = leader["count"]
-        for leader in list(leaders):
+            
-            leader["username"] = leader["username"][0]+"***"+leader["username"][-1]
+            # Find the corresponding user
-            cleaned_leaders.append(leader)
+            try:
-        if current_user.is_authenticated:
+                user = mongo.db.users.find_one({"_id": ObjectId(user_id)})
-            username = current_user.username
+                if user and "username" in user:
-        else:
+                    username = user["username"]
-            username = None
+                    if len(username) >= 2:
+                        cleaned_username = username[0] + "***" + username[-1]
+                    else:
+                        cleaned_username = username
+                    cleaned_leaders.append({"username": cleaned_username, "count": count})
+            except Exception as e:
+                print(f"Error processing user_id {user_id}: {e}")
+                continue
+                
+        print('THIS IS THE LEADERBOARD', cleaned_leaders)
+        # Get stats using aggregation pipeline
+        # Count total users
+        total_users_result = list(mongo.db.users.aggregate([
+            {"$count": "total"}
+        ]))
+        total_users = total_users_result[0]["total"] if total_users_result else 0
 
-        return render_template('leaderboard.html', leaders=cleaned_leaders, username=username)
+        # Count unique users who have added pins
+        active_users_result = list(mongo.db.pins.aggregate([
+            {"$group": {"_id": None, "active_users": {"$addToSet": "$added_by"}}},
+            {"$project": {"active_count": {"$size": "$active_users"}}}
+        ]))
+        active_users = active_users_result[0]["active_count"] if active_users_result else 0
+
+        # Calculate percentage (handle case where total_users might be 0)
+        active_percentage = round((active_users / total_users) * 100, 1) if total_users > 0 else 0
+        return render_template('leaderboard.html', leaders=cleaned_leaders, percentage = active_percentage)
         
     
     return app

static/images/bachemapa.svg

@@ -0,0 +1,14 @@
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Map pin -->
+  <circle cx="100" cy="40" r="12" fill="#4A90E2"/>
+  <path d="M50,55 Q60,45 70,55 Q80,65 90,55" stroke="#888" stroke-width="3" fill="none" stroke-linecap="round"/>
+  <path d="M100,45 L105,60 L95,60 Z" fill="#fff"/>
+
+  <!-- Pothole shape -->
+  <ellipse cx="100" cy="90" rx="40" ry="10" fill="#bbb" stroke="#777" stroke-width="2" />
+
+  <!-- Typography -->
+  <text x="100" y="130" font-family="Montserrat, sans-serif" font-size="16" fill="#333" text-anchor="middle">
+    Bachemapa
+  </text>
+</svg>

static/styles.css

@@ -1,175 +1,322 @@
+:root {
+    /* Color palette */
+    --primary-color: rgba(202, 216, 3, 0.9);
+    --secondary-color: green;
+    --accent-color: rgb(255, 136, 0);
+    --background-color: rgb(205, 243, 148);
+    --text-color: #333;
+    --shadow-color: rgba(0, 0, 0, 0.2);
+    
+    /* Spacing */
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+}
+
+/* Base styles */
 body, html {
-    font-family: Arial, sans-serif;
+    font-family: 'Segoe UI', Arial, sans-serif;
     margin: 0;
-    padding: 0px;
+    padding: 0;
     overflow: hidden;
     height: 100%;
     width: 100%;
+    color: var(--text-color);
+}
+
+::selection {
+    background-color: var(--accent-color);
+    color: white;
 }
 
 h1 {
     text-align: center;
+    position: relative;
 }
 
-section#pinner-modal form {
+h1::after {
-    max-width: 400px;
+    content: '';
-    margin: 0 auto;
+    display: block;
-    padding: 20px;
+    width: 50px;
-    border: 1px solid #ccc;
+    height: 3px;
-    border-radius: 5px;
+    background-color: var(--accent-color);
-    background-color: rgba(202, 216, 3, 0.7);
+    margin: 8px auto;
-    font-size: 100%;
+    border-radius: 2px;
-}
-
-form p {
-    margin: 10px 0;
 }
 
+/* Layout */
 #map {
     width: 100%;
     height: 100vh;
-    margin: 0 0;
     position: relative;
 }
 
 main {
-    margin:0;
+    margin: 0;
-    padding:0;
+    padding: 0;
     position: absolute;
     top: 0;
     left: 0;
-}
-
-.info {
-    padding: 1rem;
-    padding-bottom: 6rem;
-}
-
-div#qrgen img {
-    padding-left: 0;
-    padding-right: 0;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-}
-
-section#pinner-modal {
-    position: absolute;
-    top: 7vh;
-    left: 0rem;
-    color: white;
-    padding: 1rem;
-    text-align: left;
-    transition: bottom 0.5s ease;
-    box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.2);
-    z-index: 999;
-    display: flex;
-    flex-shrink: 1;
-}
-
-section.pinner-modal.active {
-    bottom: 0;
-    background-color: rgba(202, 216, 3, 0.7);
-}
-
-section.pinner-modal form {
-    background-color: rgba(202, 216, 3, 0.7);
-}
-
-nav {
-    position:absolute;
-    top:0;
-    left: 0;
-    right: 0;
-    background-color: rgba(202, 216, 3, 0.7);
-    padding: 5px;
-    z-index: 1000;
-    font-size: 100%;
-    overflow: hidden;
-    padding-right: 0.1rem;
-}
-
-nav ul {
-    flex-wrap: wrap;
-}
-
-nav ul li {
-    padding-top: 0;
-    padding-bottom: 0;
-    flex:1 1 auto;
-}
-
-.leaflet-marker-icon {
-    background-color: transparent !important;
-    border: rgba(0, 0, 0, 0);
-    padding: 0;
-    margin: 0;
-}
-
-.marker-cluster {
-    background-color: greenyellow !important;
-    border-radius: 100px;
-}
-.fa, .far, .fas {
-    color:black;
-    text-shadow: -1px 0 rgb(255, 136, 0), 0 1px rgb(255, 136, 0), 1px 0 rgb(255, 136, 0), 0 -1px rgb(255, 136, 0);
-    margin-left: -10px;
-    margin-top: -10px;
-    font-size: 1.5rem;
-    filter:drop-shadow(0 0 0.2rem orange);
-}
- 
-path-derping {
-    fill:orangered;
-    stroke: orangered;
-    stroke-width:1px;
-    stroke-dasharray: 2,2;
-    stroke-linejoin: round;
-}
-
-.flashes {
-    position: relative;
-    display: flex;
-    z-index: 1001;
-    border-radius: 20px;
-    background-color: rgba(202, 216, 3, 0.7);
-    top: 8%;
-    padding: 1rem;
-    border: black;
-    border-width: 1px;
-    -webkit-animation: cssAnimation 7s forwards; 
-    animation: cssAnimation 7s forwards;
-}
-@keyframes cssAnimation {
-    0%   {opacity: 1;}
-    90%  {opacity: 1;}
-    100% {opacity: 0;}
-}
-@-webkit-keyframes cssAnimation {
-    0%   {opacity: 1;}
-    90%  {opacity: 1;}
-    100% {opacity: 0;}
-}
-
-#pinner-top {
-    background-color: green;
-}
-
-input#submit {
-    background-color: green;
-}
-
-button a {
-    color: black;
-}
-
-main {
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    z-index: 5;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    max-height: 10vh;
+    text-align: left;
+    align-content: left;
+    font-size: 0.8rem;
+    background-color:rgba(202, 216, 3, 0.7);
+    width: 100%; 
+    border-top: 1px solid greenyellow; 
+    padding-left: 15%; 
+    padding-right:15%;
+    z-index: 15;
+}
+
+article {
+    position: fixed;
+    top: 12%; /* Space for nav */
+    bottom: 10%; /* Space for footer */
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    z-index: 10;
+    max-height: calc(100vh - 90px); /* Adjust based on nav and footer heights */
+    overflow-y: auto;
+    width: 80%;
+    display: block;
+    flex-direction: column;
+    justify-content: center;
+}
+.info {
+    padding: var(--spacing-md);
+    padding-bottom: 6rem;
+    background-color: rgba(255, 255, 255, 0.85);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+/* Navigation */
+nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding-left: 10vw;
+    padding-right:10vw;
+    background-color: rgba(189, 216, 3, 0.24);
+    /* padding: var(--spacing-sm); */
+    z-index: 1000;
+    font-size: 100%;
+    overflow: hidden;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    backdrop-filter: blur(5px);
+}
+
+nav ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
+    padding: 0 var(--spacing-sm);
+}
+
+nav ul li {
+    padding: 0;
+    flex: 1 1 auto;
+    list-style: none;
+}
+
+/* Buttons */
+button {
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    background-color: var(--accent-color);
+}
+
+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;
+}
+
+button:hover::after {
+    left: 100%;
+}
+
+#pinner-top {
+    background-color: var(--secondary-color);
+    color: white;
+    border-radius: 4px;
+}
+
+button a {
+    color: white;
+    text-decoration: none;
+}
+
+/* Form elements */
+input, select, textarea {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 8px;
+    transition: border 0.3s ease;
+    width: 100%;
+}
+
+input:focus, select:focus, textarea:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(255, 136, 0, 0.2);
+}
+
+input#submit {
+    background-color: var(--secondary-color);
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    padding: 10px;
+}
+
+input#submit:hover {
+    background-color: #008800;
+    transform: translateY(-2px);
 }
 
 #lng, #lat {
     font-size: 0.8rem;
     background-color: grey;
+    color: white;
+    border-radius: 3px;
+    padding: 4px 8px;
+}
+
+/* Modal */
+section#pinner-modal {
+    position: absolute;
+    top: 10vh;
+    left:10%;
+    color: var(--text-color);
+    padding: var(--spacing-md);
+    text-align: left;
+    animation: fadeIn 0.5s forwards;
+    box-shadow: 0 4px 20px var(--shadow-color);
+    z-index: 999;
+    display: flex;
+    flex-shrink: 1;
+    border-radius: 8px;
+    max-height: 80vh;
+    overflow-y: auto;
+    background-color: rgba(189, 216, 3, 0.24);
+    backdrop-filter: blur(5px);
+}
+
+section#pinner-modal form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: var(--spacing-md);
+    border-radius: 8px;
+    background-color: var(--primary-color);
+    font-size: 100%;
+}
+
+section#pinner-modal::-webkit-scrollbar {
+    width: 8px;
+}
+
+section#pinner-modal::-webkit-scrollbar-thumb {
+    background-color: var(--accent-color);
+    border-radius: 10px;
+}
+
+/* Map elements */
+.leaflet-marker-icon {
+    background-color: transparent !important;
+    border: none;
+    padding: 0;
+    margin: 0;
+    transition: transform 0.3s ease;
+}
+
+.leaflet-marker-icon:hover {
+    transform: scale(1.2);
+}
+
+.marker-cluster {
+    background-color: greenyellow !important;
+    border-radius: 100px;
+    box-shadow: 0 0 10px rgba(172, 255, 47, 0.7);
+    animation: pulse 2s infinite;
+}
+
+.fa, .far, .fas {
+    color: black;
+    text-shadow: -1px 0 var(--accent-color), 0 1px var(--accent-color), 
+                             1px 0 var(--accent-color), 0 -1px var(--accent-color);
+    margin-left: -10px;
+    margin-top: -10px;
+    font-size: 1.5rem;
+    filter: drop-shadow(0 0 0.2rem var(--accent-color));
+}
+
+/* Notifications */
+.flashes {
+    position: relative;
+    display: flex;
+    z-index: 1001;
+    border-radius: 20px;
+    background-color: rgba(189, 216, 3, 0.6);
+    top: 8%;
+    padding: var(--spacing-md);
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 15px var(--shadow-color);
+    animation: fadeOut 15s forwards;
+}
+
+/* Animations */
+@keyframes fadeOut {
+    0%   { opacity: 1; transform: translateY(0); }
+    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); }
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+    section#pinner-modal {
+        width: 90%;
+        left: 5%;
+        right: 5%;
+    }
+    img#logo {
+        max-height: 5vh;
+    }
+    nav {
+        height: 10vh;
+    }
+    
+    nav ul {
+        justify-content: center;
+    }
 }

templates/base.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html data-theme="light" lang="es" style="background-color: rgb(205, 243, 148); color: black;">
 <head>
+    <!-- BASE !-->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bachemapa - Mapa interactivo de baches y otras cosas</title>
@@ -47,13 +48,26 @@
 <body class="" style="color: black;">
     <nav style="height: auto;">
         <ul>
-            <a href="/"><li><h3 style="margin-bottom: 0;">Bachemapa</h3></li></a>
+            <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>   
@@ -78,12 +92,14 @@
 <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>
-    {% endif %}
     </section>
+    {% endif %}
+
 </main>
 
 </body>

templates/dashboard.html

@@ -7,7 +7,7 @@
     overflow-y: scroll;
   }
 </style>
-<div style="padding-top: 30px;">
+<div class="container-fluid" style="padding-top: 30px; max-width: 75vw; background-color: rgba(189, 216, 3, 0.9)">
 <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;">

templates/footer.html

@@ -1 +1,3 @@
-<footer style="position: fixed;bottom: 0px;text-align: center;align-content: center; background-color:rgba(202, 216, 3, 0.7); width: 100%; border-top: 1px; border-color: greenyellow">Desarrollado por Kernel Panic Room, dominio patrocinado por el programa RSE de <a href="https://qro.mx">Qro.mx</a>. Si tienes dudas, comentarios, recomendaciones o quieres reportar un error, únete a nuestro canal de Telegram <a href="https://t.me/bachemapa">aquí</a></footer>
+<footer>
+    <p>Desarrollado por Kernel Panic Room, dominio patrocinado por el programa RSE de <a href="https://qro.mx">Qro.mx</a>. Si tienes dudas, comentarios, recomendaciones o quieres reportar un error, únete a nuestro canal de Telegram <a href="https://t.me/bachemapa">aquí</a></p>
+</footer>

templates/leaderboard.html

@@ -1,19 +1,69 @@
 {% 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>
-<table>
+</div>
-    <thead>
+<div class="container grid" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
-        <tr>
+    <table>
-            <th scope="col">Mapista</th>
+        <thead>
-            <th scope="col">Marcador</th>
+            <tr>
-        </tr>
+                <th scope="col">Mapista</th>
-    </thead>
+                <th scope="col">Marcador</th>
-    <tbody>
+            </tr>
-{% for leader in leaders %}
+        </thead>
-    <th scope="row">{{leader.username}}</th>
+        <tbody>
-    <th scope="row">{{leader.count}}</th>
+    {% for leader in leaders %}
-{% endfor %}
+            <tr>
-    </tbody>
+                <td scope="row">{{leader.username}}</td>
-</table>
+                <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>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const ctx = document.getElementById('activeUsersChart').getContext('2d');
+        const activePercentage = {{ percentage }};
+        const inactivePercentage = 100 - activePercentage;
+        
+        new Chart(ctx, {
+            type: 'pie',
+            data: {
+                labels: ['Usuarios Activos', 'Usuarios Inactivos'],
+                datasets: [{
+                    data: [activePercentage, inactivePercentage],
+                    backgroundColor: [
+                        'green',
+                        'blue'
+                    ],
+                    borderColor: [
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(201, 203, 207, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                    },
+                    title: {
+                        display: true,
+                        text: 'Distribución de Usuarios Activos'
+                    }
+                }
+            }
+        });
+    });
+</script>
+</div>
+</div>
 {% endblock %}

templates/login.html

@@ -1,19 +1,52 @@
-
 {% extends 'secondbase.html' %}
 {% block content %}
+<div class="container" style="display: flex; justify-content: center; align-items: center; min-width: 40vw; flex-direction: column;">
+
 <style>
     form {
+        max-width: 80vw;
         padding: 40px;
     }
+    
+    .flash-message {
+        position: fixed;
+        top: 20vh;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #f44336;
+        color: white;
+        padding: 15px;
+        border-radius: 4px;
+        z-index: 100;
+        text-align: center;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        max-width: 80%;
+    }
 </style>
+
+{% if messages %}
+<div id="flash-message" class="flash-message">
+    {{ messages }}
+</div>
+<script>
+    setTimeout(function() {
+        var flashMessage = document.getElementById('flash-message');
+        if (flashMessage) {
+            flashMessage.style.display = 'none';
+        }
+    }, 3000);
+</script>
+{% endif %}
+
 <form method="post" enctype="multipart/form-data" style="background-color: rgb(205, 243, 148);">
     {{ form.csrf_token }}
     {{ form.hidden_tag() }}
-        {{ form.username.label }}<br>
+        {{ form.username.label }}
         {{ form.username() }}
         {{ form.pwd.label }}
         {{ form.pwd() }}        
 
     <p>{{ form.submit() }}</p>
 </form>
+</div>
 {% endblock %}

templates/quienes.html

@@ -1,7 +1,7 @@
 {% extends 'secondbase.html' %}
 {% block content %}
 
-    <div class="info" style="">
+    <article class="info" style="">
         <h4>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>
@@ -13,5 +13,5 @@
         <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')}}">
-    </div>
+    </article>
 {% endblock %}

templates/secondbase.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html data-theme="light" lang="es" style="background-color: rgb(205, 243, 148); color: black; overflow-y:scroll">
+<html data-theme="light" lang="es" style="background-color: rgb(205, 243, 148); color: black; height: 100%;">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>Mapa interactivo de baches y otras cosas</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='pico.amber.css') }}">
-
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favico.ico') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 
     <meta name="description" content="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.">
@@ -32,18 +32,24 @@
     <link rel="canonical" href="https://baches.qro.mx">
     <!-- Versión pública 0.1 -->
 </head>
-<body style="color: black;">
+<body style="color: black; height: 100%; margin: 0;">
-    <nav style="height: auto; align-items:center">
+    <nav style="height: auto;">
         <ul>
-            <a href="/"><li><h3 style="margin-bottom: 0;">Bachemapa</h3></li></a>
+            <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>
-            <li><button id="pinner-top"><a href="/">Al mapa</a></button></li>
+            
+            <li><button id="pinner-top" ><a href="/">Al mapa</a></button></li>
             <li><button><a href="/quienes">Somos</a></button></li>
             {% if current_user.is_authenticated %}
-            <li><button style="background-color: rgb(241, 165, 0);"><a href="/logout">Salir</a></button></li>
+            <li><button><a href="/dashboard">Perfil</a></button></li>   
             {% endif %}
         </ul>
     </nav>
@@ -58,7 +64,7 @@
         </div>
         {% endif %}
     {% endwith %}
-    <main class="container-fluid" style="display:block; margin-top:100px;">
+    <main class="container-fluid" style="display:block; margin-top:100px; height: calc(100vh - 100px); overflow-y: auto;">
 
         {% block content %}
 
@@ -67,5 +73,17 @@
     </main>
 </body>
 {% include 'footer.html' %}
+<style>
 
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-image: url("{{ url_for('static', filename='images/bg-trees.jpg') }}");
+    background-size: cover;
+}
+</style>
 </html>