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

lots of UI fixes, working camera section, improved menu for mobile

Browse Source
This commit is contained in:
Orson 2025-03-15 19:11:32 -06:00
parent 1e51771917
commit 0e67748aac
13 changed files with 618 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app.py
View File

@ -95,7 +95,12 @@ def create_app(config=Config):
'typeofpin': request.form['typeofpin'],
'added_by': current_user.id,
'description': request.form['description'],
'address': str(geolocator.reverse(str(request.form['lat'])+ ", "+request.form['lng']))
'address': str(geolocator.reverse(str(request.form['lat'])+ ", "+request.form['lng'])),
'reviewed': True,
'fixed': False,
'last_mod': datetime.now(),
'votes': -1,
'removal_reason': None,
}
print(geolocator.reverse(str(request.form['lat'])+ ", "+request.form['lng']))
mongo.db.pins.insert_one(pin)
@ -227,7 +232,8 @@ def create_app(config=Config):
{"$set": {
"typeofpin": typeofpin,
"description": description,
"address": address
"address": address,
"last_mod": datetime.now()
}}
)
flash('Pin actualizado exitosamente')

151
static/styles.css
View File

@ -22,8 +22,10 @@ body, html {
/* height: 100%; */
width: 100%;
color: var(--text-color);
height: 100%;
}
::selection {
background-color: var(--accent-color);
color: white;
@ -64,20 +66,7 @@ main {
width: 100vw;
z-index: 5;
}
nav li [role=button],
nav li [type=button],
nav li button {
background-color: rgba(255, 136, 0, 0.8);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
li a {
background-color: rgba(255, 136, 0, 0.8);
}
footer {
position: fixed;
@ -139,7 +128,6 @@ nav {
/* padding: var(--spacing-sm); */
z-index: 1000;
font-size: 100%;
overflow: hidden;
box-shadow: 0 2px 10px var(--shadow-color);
backdrop-filter: blur(5px);
}
@ -156,6 +144,72 @@ nav ul li {
flex: 1 1 auto;
list-style: none;
}
nav li [role=button],
nav li [type=button],
nav li button {
background-color: rgba(36, 82, 1, 0.9);
backdrop-filter: blur(2px) contrast(1.2);
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.5);
border-width: .2rem;
padding: 0.1rem 1rem;
/* border-radius: 4px; */
cursor: pointer;
transition: all 0.3s ease;
}
li a {
background-color: rgba(255, 136, 0, 0.8);
}
.mobile-menu ul li {
display: block;
text-align: center;
padding: 0.2rem 0;
border-radius: 100rem;
width: auto;
/* backdrop-filter: hue-rotate(180deg); */
/* background-color: rgba(255, 255, 255, 0.7); */
color: rgba(172, 255, 47, 0.9);
padding: 0;
}
.mobile-menu ul li a:hover {
backdrop-filter: blur(2px) saturate(150%) brightness(1.5) hue-rotate(180deg);
animation: pulse 1s normal ease-in-out;
/* box-shadow: 0 0 -2px rgba(192, 157, 117, 0.8); */
transition: all 0.2s ease-in-out;
/* transform: scale(1.2); */
color: black;
color: rgba(255, 136, 0, 1);
z-index: 1800;
/* padding: 0; */
}
/* .mobile-menu ul li a i:hover {
} */
/* .mobile-menu ul li a i {
} */
.mobile-menu ul li a {
display: block;
text-align: center;
padding: 0.5rem 0;
border-radius: 2rem;
backdrop-filter: invert(100%);
}
.mobile-menu ul li a i{
margin-left:0px;
padding: .1rem;
}
.desktop-menu {
display: block;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
}
.desktop-menu li a {
display: flex;
@ -164,9 +218,9 @@ nav ul li {
}
.desktop-menu li a:hover {
background-color: rgb(74, 133, 34);
background-color: rgb(45, 60, 35);
animation: pulse 1.5s infinite ease-in-out;
box-shadow: 0 0 -10px rgba(172, 255, 47, 0.7);
box-shadow: 0 0 -3px rgba(255, 167, 14, 0.7);
transition: all 0.2s ease;
transform: scale(1.02);
}
@ -202,11 +256,11 @@ button:hover::after {
opacity: 1;
}
#pinner-top {
background-color: var(--secondary-color);
/* #pinner-top {
background-color: rgba(0, 0, 0, 0.2);
color: white;
border-radius: 4px;
}
} */
button a {
color: white;
@ -302,18 +356,33 @@ section#pinner-modal::-webkit-scrollbar-thumb {
.eaflet-popup-content {
width: 100%;
}
.fa, .far, .fas {
font-size: 1.5rem;
/* filter: drop-shadow(0 0 0.2rem var(--accent-color)); */
}
.control-button {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
/* right: 20%; */
width: 15vw;
height: 15vw;
/* transform: translateX(-50%); */
padding: 15px 30px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50px;
border: none;
font-size: 18px;
background-color: rgba(60, 245, 9, 0.8);
border-radius: 100%;
border: 4px solid rgba(255, 255, 255, 0.5);
/* font-size: 4rem; */
font-weight: bolder;
z-index: 100;
color: black;
color: white;
animation: pulsePing 1s ease-in-out 0s 1 normal none;
display: flex;
justify-content: center;
align-items: center;
}
.control-button .fas.fa-camera {
font-size: 3rem; /* Increased size specifically for camera icon */
}
.marker-cluster {
background-color: rgb(249, 170, 61) !important;
@ -322,15 +391,7 @@ section#pinner-modal::-webkit-scrollbar-thumb {
/* Animation removed as it was causing visibility issues */
}
.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 {
@ -371,6 +432,23 @@ ul.flashes li {
50% { box-shadow: 0 0 15px rgba(172, 255, 47, 0.9); }
100% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
}
@keyframes pulsePing {
0% {
transform: scale(1);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
/* Media queries for responsiveness */
@media (max-width: 768px) {
section#pinner-modal {
@ -383,6 +461,7 @@ ul.flashes li {
}
nav {
height: 10vh;
overflow: visible;
}
nav ul {

379
static/stylesbs.css Normal file
View File

@ -0,0 +1,379 @@
: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: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
color: var(--text-color);
}
::selection {
background-color: var(--accent-color);
color: white;
}
h1 {
text-align: center;
position: relative;
}
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;
position: static !important;
}
main {
margin: 0;
padding: 0;
position: absolute;
top: 10vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
z-index: 5;
}
/* Custom button styling */
.custom-btn {
background-color: rgba(255, 136, 0, 0.8);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.custom-btn:hover {
background-color: rgb(74, 133, 34);
animation: pulse 1.5s infinite ease-in-out;
box-shadow: 0 0 10px rgba(172, 255, 47, 0.7);
transition: all 0.2s ease;
transform: scale(1.02);
}
.custom-link {
background-color: rgba(255, 136, 0, 0.8);
color: white;
text-decoration: none;
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: all 0.3s ease;
}
.custom-link:hover {
background-color: rgb(74, 133, 34);
color: white;
text-decoration: none;
}
footer {
position: fixed;
bottom: 0;
max-height: 10vh;
text-align: 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;
}
/* Table styling */
.custom-table thead th {
background-color: rgba(202, 216, 3, 0.7);
color: black;
}
.custom-table tbody td {
background-color: rgba(202, 216, 3, 0.7);
color: black;
}
article {
position: fixed;
top: 12%;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 10;
max-height: calc(100vh - 90px);
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 */
.custom-navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-left: 10vw;
background-color: rgba(189, 216, 3, 0.24);
z-index: 1000;
font-size: 100%;
overflow: hidden;
box-shadow: 0 2px 10px var(--shadow-color);
backdrop-filter: blur(5px);
}
.custom-navbar .navbar-nav {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
padding: 0 var(--spacing-sm);
}
.custom-navbar .nav-item {
padding: 0;
flex: 1 1 auto;
list-style: none;
}
/* Form elements */
.custom-form-control {
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px;
transition: border 0.3s ease;
width: 100%;
}
.custom-form-control:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(255, 136, 0, 0.2);
}
.submit-btn {
background-color: var(--secondary-color);
color: white;
font-weight: bold;
cursor: pointer;
padding: 10px;
}
.submit-btn:hover {
background-color: #008800;
transform: translateY(-2px);
}
.coordinate-display {
font-size: 0.8rem;
background-color: grey;
color: white;
border-radius: 3px;
padding: 4px 8px;
}
/* Modal */
.custom-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);
}
.custom-modal form {
max-width: 400px;
margin: 0 auto;
padding: var(--spacing-md);
border-radius: 8px;
background-color: var(--primary-color);
font-size: 100%;
}
.custom-modal::-webkit-scrollbar {
width: 8px;
}
.custom-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);
}
.leaflet-popup-content {
width: 100%;
}
.control-button {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
padding: 15px 30px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50px;
border: none;
font-size: 18px;
z-index: 100;
color: black;
}
.marker-cluster {
background-color: rgb(249, 170, 61) !important;
border-radius: 100px;
box-shadow: 0 0 10px rgba(85, 38, 5, 0.7);
}
.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 */
.alert-custom {
position: absolute;
display: flex;
width: max-content;
z-index: 1001;
border-radius: 20px;
background-color: rgba(189, 216, 3, 0.6);
top: 12vh;
left: 10vw;
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;
}
.alert-custom li {
list-style: none;
padding: 0;
margin: 0;
font-size: 1.2rem;
color: black;
}
/* Carousel styles */
.carousel-control {
z-index: 2;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.5);
}
.carousel-items {
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.carousel-items::-webkit-scrollbar {
display: none;
}
/* 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% { 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) {
.custom-modal {
width: 90%;
left: 5%;
right: 5%;
}
img#logo {
max-height: 5vh;
}
.custom-navbar {
height: 10vh;
}
.custom-navbar .navbar-nav {
justify-content: center;
}
}

31
templates/base.html
View File

@ -23,10 +23,35 @@
<link href="{{ url_for('static', filename='MarkerCluster.Default.css')}}">
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
<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.">
<!-- Primary Meta Tags -->
<meta name="description" content="Bachemapa: plataforma colaborativa para documentar y visualizar el estado de la infraestructura urbana en Querétaro, México. Información actualizada sobre mantenimiento vial e infraestructura pública.">
<meta name="keywords" content="Querétaro, infraestructura urbana, mantenimiento vial, desarrollo urbano, mapeo colaborativo, documentación urbana, participación ciudadana, urbanización, planificación urbana, vialidades, reporte de baches">
<!-- Palabras clave para SEO -->
<meta name="keywords" content="Querétaro, problemas urbanos, baches, infraestructura, desarrollo urbano, reporte de baches, comunidad, ciudadanía, urbanización, planificación, deficiencias urbanas">
<!-- Schema.org markup for Google -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Bachemapa",
"description": "Plataforma para documentar y visualizar el estado de la infraestructura urbana en Querétaro",
"url": "https://baches.qro.mx",
"applicationCategory": "MapApplication",
"operatingSystem": "All",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "MXN"
}
}
</script>
<!-- Robots meta tag -->
<meta name="robots" content="index, follow">
<!-- Language and geo tags -->
<meta name="language" content="es">
<meta name="geo.region" content="MX-QUE">
<meta name="geo.placename" content="Querétaro">
<!-- Autor de la página -->
<meta name="author" content="Kernel Panic Room">

20
templates/camera.html
View File

@ -51,10 +51,10 @@
</div>
<div style="position: absolute; bottom: 0; width: 100%; display: flex; flex-direction: column; padding: 10px; box-sizing: border-box;">
<button id="capture-btn" class="control-button" style="margin: 10px;">Tomar foto</button>
<button id="capture-btn" class="control-button" style="margin: 10px; right:20%"><i class="fa fas fa-camera"></i></button>
<div style="display: flex; justify-content: space-between; width: 100%; box-sizing: border-box;">
<button id="retake-btn" class="control-button" style="display: none; margin: 10px 5px 10px 10px; flex: 1; left:20%; background-color: rgba(180,0,0,0.6);">Nueva foto</button>
<button id="send-btn" class="control-button" style="display: none; margin: 10px 10px 10px 5px; flex: 1;">Enviar foto</button>
<button id="retake-btn" class="control-button" style="display: none; margin: 10px 5px 10px 10px; flex: 1; left:20%; background-color: rgba(231, 9, 9, 0.671);color:white; left:20%"><i class="fas fa-redo"></i></button>
<button id="send-btn" class="control-button" style="display: none; margin: 10px 10px 10px 5px; flex: 1; background-color: rgba(49, 182, 28, 0.6);color:white; right: 20%;"><i class="fas fa-paper-plane"></i></button>
</div>
</div>
@ -66,9 +66,9 @@
<!-- Fallback file input for unsupported browsers -->
<div id="file-fallback">
<label for="photo">Take/Choose a Photo:</label>
<label for="photo">Toma o selecciona una foto:</label>
<input type="file" name="photo" id="photo" accept="image/*" capture="environment" required>
<button type="submit">Upload</button>
<button type="submit">Subir</button>
</div>
</form>
@ -148,7 +148,13 @@
canvas.toBlob(function(blob) {
const formData = new FormData(form);
formData.delete('photo'); // Remove any file input value
formData.append('photo', blob, 'camera-capture.jpg');
// Generate a filename with timestamp and random element
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const randomId = Math.floor(Math.random() * 10000);
const filename = `photo-${timestamp}-${randomId}.jpg`;
// Add the photo blob with the dynamic filename
formData.append('photo', blob, filename);
// Submit form data via fetch
fetch(form.action, {
@ -157,7 +163,7 @@
}).then(response => {
if (response.redirected) {
window.location.href = response.url;
} else (response.ok) {
} else if(response.ok) {
console.log('Success:', response);
window.location.href = '{{ url_for('dashboard') }}';
}

86
templates/dashboard.html
View File

@ -1,4 +1,4 @@
{% extends 'secondbase.html' %}
{% extends 'base.html' %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
@ -31,45 +31,22 @@
{% if pins %}
{% for pin in pins %}
<table border="1" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><b>Agregado el</b></td>
<td>{{ pin.time }}</td>
</tr>
<tr>
<td><b>Tipo de Mejora Urbana:</b></td>
<td>{{ pin.typeofpin }}</td>
</tr>
<tr>
<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>Acciones:</b></td>
<td>
<a href="/remove_pin/{{pin._id}}"><button type="button">Eliminar</button></a>
<button type="button" onclick="openEditModal('{{pin._id}}')">Editar</button>
</td>
</tr>
</tbody>
</table>
<div class="pin-card" style="margin-bottom: 2rem; background-color: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-wrap: wrap;">
<div class="pin-image" style="flex: 0 0 250px; padding: 15px; display: flex; align-items: center; justify-content: center;">
<img style="max-width: 100%; max-height: 200px; object-fit: cover; border-radius: 4px;" src="{{ pin.photo }}" alt="Foto de mejora urbana">
</div>
<div class="pin-data" style="flex: 1; padding: 15px;">
<h4 style="margin-top: 0; color: #333;">{{ pin.typeofpin }}</h4>
<p><strong>Agregado el:</strong> {{ pin.time }}</p>
<p><strong>Descripción:</strong> {{ pin.description }}</p>
<p><strong>Dirección:</strong> {{ pin.address }}</p>
<p><small>Coordenadas: {{ pin.lat }}, {{ pin.lng }}</small></p>
<div class="pin-actions" style="margin-top: 15px;">
<button type="button" onclick="openEditModal('{{pin._id}}')" style="background-color: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 4px; margin-right: 8px; cursor: pointer;">Editar</button>
<a href="/remove_pin/{{pin._id}}"><button type="button" style="background-color: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer;">Eliminar</button></a>
</div>
</div>
</div>
<!-- Modal para editar pin -->
<div id="editModal{{pin._id}}" class="modal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);">
@ -79,7 +56,9 @@
<form action="/edit_pin/{{pin._id}}" method="post">
<div style="margin-bottom:15px;">
<label for="typeofpin{{pin._id}}"><b>Tipo de Mejora Urbana:</b></label>
<input type="text" id="typeofpin{{pin._id}}" name="typeofpin" value="{{pin.typeofpin}}" style="width:100%; padding:8px;">
<select id="typeofpin{{pin._id}}" name="typeofpin" style="width:100%; padding:8px;">
</select>
</div>
<div style="margin-bottom:15px;">
<label for="description{{pin._id}}"><b>Descripción:</b></label>
@ -95,6 +74,18 @@
</div>
<script type="text/javascript">
var iconTypes2 = {
'bache': '⚠️',
'coladera': '⭕',
'obra sin terminar': '🔧',
'escombro': '🗑️',
'robo-asalto': '💀',
'biciestacionamiento': '🏁',
'mala iluminación': '💡',
'bici blanca': '🚲',
'zapato blanco': '👟',
};
function openEditModal(id) {
document.getElementById('editModal'+id).style.display = 'block';
}
@ -102,9 +93,20 @@
function closeEditModal(id) {
document.getElementById('editModal'+id).style.display = 'none';
}
</script></div>
</script>
{% endfor %}
{% endif %}
</div>
<script>
window.onload = function() {
const typeofpins = document.getElementsByName('typeofpin');
for (let i = 0; i < typeofpins.length; i++) {
for (const iconType in iconTypes2) {
const capitalizedIconType = iconType.charAt(0).toUpperCase() + iconType.slice(1);
typeofpins[i].innerHTML += '<option value="'+iconType+'">'+iconTypes2[iconType]+' '+capitalizedIconType+'</option>';
}
}
}
</script>
{% endblock %}

2
templates/error.html
View File

@ -1,4 +1,4 @@
{% extends 'secondbase.html' %}
{% extends 'base.html' %}
{% block content %}
<section>
{% if message %}

2
templates/index.html
View File

@ -106,7 +106,7 @@
{% if current_user.is_authenticated %}
<div style="position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 999;">
<button class="control-button"><a href="/camera" class="btn btn-primary">Tomar foto</a></button>
<button class="control-button" onclick="window.location.href='/camera'"><i class="fas fa-camera"></i></button>
</div>
{% endif %}
{% endblock %}

2
templates/leaderboard.html
View File

@ -1,4 +1,4 @@
{% extends 'secondbase.html' %}
{% extends 'base.html' %}
{% block content %}
<div class="container" style="background-color: rgba(255,255,255,0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(15px); padding:2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<!-- Header -->

2
templates/login.html
View File

@ -1,4 +1,4 @@
{% extends 'secondbase.html' %}
{% extends 'base.html' %}
{% block content %}
<div class="container" style="display: flex; justify-content: center; align-items: center; min-width: 40vw; flex-direction: column;">

39
templates/nav.html
View File

@ -1,4 +1,4 @@
<nav style="height: auto;">
<nav style="height: auto; align-items: center;">
<ul>
<a href="/">
<li style="display: flex; align-items: center;">
@ -11,21 +11,22 @@
<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>
<details role="list" dir="rtl" class="mobile-menu" style="margin:0; margin-right:5rem; position: relative;">
<summary aria-haspopup="listbox" role="link" class="secondary" style="transition: transform 0.3s ease;">
<i style="color:white" 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>
<ul role="listbox" style="position: absolute; right: 0; top: 100%; transition: transform 0.3s ease; transform: translateX(0);">
{% if current_user.is_authenticated %}
<li><a id="pinner-top" href="#" role="button"><i class="fas fa-plus"></i></a></li>
<li><a href="/dashboard" role="button"><i class="fas fa-user"></i></a></li>
<li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
<li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></a></li>
<li><a href="/logout" role="button" class="secondary"><i class="fas fa-sign-out-alt"></i></a></li>
{% else %}
<li><a href="/thelogin" role="button">Iniciar Sesión</a></li>
<li><a href="/thelogin" role="button"><i class="fas fa-sign-in-alt"></i></a></li>
<li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
<li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></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 style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
</ul>
</details>
@ -40,12 +41,11 @@
{% endif %}
<li><a href="/quienes" role="button" class="secondary">Somos</a></li>
<li><a href="/leaderboard" role="button">Bachistas ★</a></li>
<li><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
</ul>
</ul>
<style>
@media (max-width: 715px) {
@media (max-width: 810px) {
.desktop-menu {
display: none;
}
@ -54,7 +54,7 @@
}
}
@media (min-width: 716px) {
@media (min-width: 811px) {
.mobile-menu {
display: none;
}
@ -62,7 +62,14 @@
display: block;
}
}
body {
background-image: url("{{ url_for('static', filename='images/bg-trees.jpg') }}");
background-size: cover;
}
</style>
</nav>
<!-- FAQ button is absolutely positioned -->
<li style="display: block; position: absolute; right: 2rem;bottom:2rem; z-index:1200"><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>

2
templates/quienes.html
View File

@ -1,4 +1,4 @@
{% extends 'secondbase.html' %}
{% extends 'base.html' %}
{% block content %}
<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;">

2
templates/register.html
View File

@ -1,4 +1,4 @@
{% extends 'secondbase.html' %}
{% extends 'base.html' %}
{% block content %}
<h1>Registro de nuevo usuario</h1>