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

style changes, fixed login flow and modals

Browse Source
This commit is contained in:
Orson 2025-03-07 15:55:11 -06:00
parent ffcbaff534
commit 3a903736e4
13 changed files with 502 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app.py
View File

@ -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",
"foreignField": "_id",
"as": "user_info"
}},
{"$unwind": "$user_info"},
{"$project": {"_id": 0, "username": "$user_info.username", "count": 1}}
])
#print(list(leaders))
cleaned_leaders=list()
print(cleaned_leaders)
for leader in list(leaders):
leader["username"] = leader["username"][0]+"***"+leader["username"][-1]
cleaned_leaders.append(leader)
if current_user.is_authenticated:
username = current_user.username
else:
username = None
]
return render_template('leaderboard.html', leaders=cleaned_leaders, username=username)
# Convert the aggregation result to a list
leaders_by_id = list(mongo.db.pins.aggregate(pipeline))
# Create a list to store the final results
cleaned_leaders = []
# Process each leader
for leader in leaders_by_id:
user_id = leader["_id"]
count = leader["count"]
# Find the corresponding user
try:
user = mongo.db.users.find_one({"_id": ObjectId(user_id)})
if user and "username" in user:
username = user["username"]
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
# 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

14
static/images/bachemapa.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 580 B

BIN
static/images/bachemapalogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
static/images/bg-trees.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
static/images/favico.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

433
static/styles.css
View File

@ -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 {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(202, 216, 3, 0.7);
font-size: 100%;
}
form p {
margin: 10px 0;
h1::after {
content: '';
display: block;
width: 50px;
height: 3px;
background-color: var(--accent-color);
margin: 8px auto;
border-radius: 2px;
}
/* Layout */
#map {
width: 100%;
height: 100vh;
margin: 0 0;
position: relative;
}
main {
margin:0;
padding:0;
margin: 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;
}
}

24
templates/base.html
View File

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

2
templates/dashboard.html
View File

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

4
templates/footer.html
View File

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

78
templates/leaderboard.html
View File

@ -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>
<thead>
<tr>
<th scope="col">Mapista</th>
<th scope="col">Marcador</th>
</tr>
</thead>
<tbody>
{% for leader in leaders %}
<th scope="row">{{leader.username}}</th>
<th scope="row">{{leader.count}}</th>
{% endfor %}
</tbody>
</table>
</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>
<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 %}

37
templates/login.html
View File

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

4
templates/quienes.html
View File

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

34
templates/secondbase.html
View File

@ -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;">
<nav style="height: auto; align-items:center">
<body style="color: black; height: 100%; margin: 0;">
<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>