iconos custom, pagina de quienes, cambios generales al estilo

.gitignore

@@ -21,6 +21,7 @@ parts/
 sdist/
 var/
 wheels/
+uploads/*
 share/python-wheels/
 *.egg-info/
 .installed.cfg

app.py

@@ -45,7 +45,8 @@ def create_app():
         description = StringField('Description', validators=[DataRequired()])
         photo = FileField('Evidencia fotogénica', validators=[DataRequired()])
         timedate = DateTimeField(default=datetime.now())
-        typeofpin = SelectField('Tipo de cosa', choices=['bache', 'coladera', 'obra sin terminar', 'escombro', 'robo-asalto'])
+        typeofpin = SelectField('Tipo de cosa', choices=['bache', 'coladera', 'obra sin terminar', 'escombro', 'robo-asalto', 'biciestacionamiento', 'mala iluminación'])
+        
         submit = SubmitField('Agregar')
 
     class LoginForm(FlaskForm):
@@ -111,6 +112,10 @@ def create_app():
                 #else:
                 #    flash('Invalid file type. Only images are allowed.')
             #return render_template('index.html', form=form)
+    @app.route('/quienes')
+    def quienes():
+        return render_template('quienes.html')
+
     @app.route('/uploads/<name>')
     def download_file(name):
         return send_from_directory(app.config["UPLOAD_FOLDER"], name)
@@ -154,14 +159,14 @@ def create_app():
                 login_user(user)
                 return redirect(url_for('dashboard'))
             else:
-                return render_template('login.html', messages = 'Ooops, no hay tal usuario')
+                return render_template('login.html', messages = 'Ooops, no hay tal usuario', form=form2)
         return render_template('login.html',form=form2)
     
     @app.route('/logout')
     @login_required
     def logout():
         logout_user()
-        flash('You have successfully logged yourself out.')
+        flash('Cerraste sesión exitosamente')
         return redirect('/')
     
     @app.route('/desheredame/<user_id>')

requirements.txt

@@ -2,12 +2,15 @@ blinker==1.8.1
 click==8.1.7
 dnspython==2.6.1
 Flask==3.0.3
+Flask-Login==0.6.3
 Flask-PyMongo==2.3.0
 Flask-WTF==1.2.1
 itsdangerous==2.2.0
 Jinja2==3.1.3
 leaflet==0.0.3
 MarkupSafe==2.1.5
-pymongo==4.7.1
+pymongo==4.8.0
+python-dateutil==2.9.0.post0
+six==1.16.0
 Werkzeug==3.0.2
 WTForms==3.1.2

static/style.css

@@ -1,5 +1,57 @@
-body {padding: 0;margin: 0;}html, body, #map {height: 100%;width: 100vw;}
+@font-face {
-div.leaflet-popup-content {
+  font-family: 'icomoon';
-    width: 400px;
+  src:  url('fonts/icomoon.eot?z8tny2');
+  src:  url('fonts/icomoon.eot?z8tny2#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?z8tny2') format('truetype'),
+    url('fonts/icomoon.woff?z8tny2') format('woff'),
+    url('fonts/icomoon.svg?z8tny2#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
 }
 
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-lightbulb:before {
+  content: "\e900";
+}
+.icon-construction:before {
+  content: "\e901";
+}
+.icon-home3:before {
+  content: "\e902";
+}
+.icon-download:before {
+  content: "\e960";
+}
+.icon-hour-glass:before {
+  content: "\e979";
+}
+.icon-fire:before {
+  content: "\e9a9";
+}
+.icon-bin:before {
+  content: "\e9ac";
+}
+.icon-target:before {
+  content: "\e9b3";
+}
+.icon-sun:before {
+  content: "\e9d4";
+}
+.icon-contrast:before {
+  content: "\e9d5";
+}

static/styles.css

@@ -1,20 +1,22 @@
-body {
+body, html {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0px;
     overflow: hidden;
+    height: 100%;
 }
 
 h1 {
     text-align: center;
 }
 
-form {
+div#pinner-modal form {
     max-width: 400px;
     margin: 0 auto;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
+    background-color: rgb(205, 243, 148, 0.7);
 }
 
 form p {
@@ -25,6 +27,7 @@ form p {
     width: 100%;
     height: 100vh;
     margin: 0 0;
+    position: relative;
 }
 
 main {
@@ -54,4 +57,32 @@ div.pinner-modal {
 
 div.pinner-modal.active {
     bottom: 0;
+    background-color: rgb(205, 243, 148, 0.7);
+}
+
+div.pinner-modal form {
+    background-color: rgb(205, 243, 148, 0.7);
+}
+
+nav {
+    position:absolute;
+    top:0;
+    left: 0;
+    right: 0;
+    background-color: rgba(205, 243, 148, 0.7);
+    padding: 5px;
+    z-index: 1000;
+    color:azure;
+}
+
+
+.leaflet-marker-icon {
+    background-color: transparent !important;
+    border: rgba(0, 0, 0, 0);
+}
+
+.fa, .far, .fas {
+    color:rgb(0, 0, 0);
+    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);
+    font-size: larger;
 }

templates/base.html

@@ -11,6 +11,8 @@
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
     <!--<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>-->
 
 
@@ -19,20 +21,26 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 
 </head>
-<body style="background-color: rgb(205, 243, 148); color: black;">
+<body style="background-color: rgb(205, 243, 148, 0.5); color: black;">
-    <nav style="z-index: 5; height: 7vh;">
+    <nav style="height: 7vh;">
         <ul>
-            <li><h2>El Bachemapa</h2>
+            <a href="/"><li><h2>El Bachemapa</h2></li></a>
         </ul>
         
         
         <ul>
+            
             <li><button id="pinner-top">Agregar</button></li>
-            <li><a href="/quienes">Quienes somos</a></li>
+            <li><button><a href="/quienes">Quienes somos</a></button></li>
+            {% if current_user.is_authenticated %}
+            <li><button><a href="/dashboard">Perfil</a></button></li>   
+            <li><button><a href="/logout">Cerrar sesión</a></button></li>
+            {% endif %}
         </ul>
     </nav>
     {% with messages = get_flashed_messages() %}
         {% if messages %}
+        
         <ul class="flashes">
             {% for message in messages %}
                 <li>{{message}}</li>
@@ -49,7 +57,7 @@
     {% if current_user.is_authenticated %}
         {% include 'add_pin.html' %}
     {% else %}
-        <div >
+        <div style="z-index: 9000; background-color: rgb(205, 243, 148, 0.7); position: relative; top: inherit; left: 100%;">
             <h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
         </div>
     {% endif %}

templates/dashboard.html

@@ -1,7 +1,12 @@
 {% extends 'secondbase.html' %}
 {% block content %}
-
+<style>
-<h3>Hola {{current_user.username}}</h3>
+  main {
+    overflow-y: scroll;
+  }
+</style>
+<div style="padding-top: 30px; padding-left: 15px;">
+<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
 <p>Tu link de invitación es:</p>
 <p>https://baches.qro.mx/registrame/{{current_user.referral_code}}</p>
 
@@ -9,24 +14,16 @@
     {% for pin in pins %}
 
     <table border="1" cellpadding="5" cellspacing="0">
-        <thead>
+
-          <tr>
-            <th>Field</th>
-            <th>Value</th>
-          </tr>
-        </thead>
         <tbody>
+
           <tr>
-            <td>_id</td>
+            <td>Agregado el</td>
-            <td>{{ pin._id }}</td>
-          </tr>
-          <tr>
-            <td>Time</td>
             <td>{{ pin.time }}</td>
           </tr>
           <tr>
             <td>Photo</td>
-            <td>{{ pin.photo }}</td>
+            <td><img style="max-height: 66px;" src="{{ pin.photo }}"></td>
           </tr>
           <tr>
             <td>Latitude</td>
@@ -37,17 +34,13 @@
             <td>{{ pin.lng }}</td>
           </tr>
           <tr>
-            <td>Type of Pin</td>
+            <td>Tipo de mejora urbana</td>
             <td>{{ pin.typeofpin }}</td>
           </tr>
-          <tr>
-            <td>Added By</td>
-            <td>{{ pin.added_by }}</td>
-          </tr>
         </tbody>
       </table>
 
     {% endfor %}
 {% endif %}
-
+</div>
 {% endblock %}

templates/index.html

@@ -4,16 +4,33 @@
         <div id="map" style="height: 100%; border-style: groove; border-radius: 22px; border-width: 4px; position: absolute;"></div>
         <script>
             //setView([51.505, -0.09], 13);
-            var map = new L.map('map', center=([20.57, -100.38], zoom=13));
+            var map = new L.map('map', {zoomControl: false}, center=([20.57, -100.38], zoom=13));
             var user_marker = new L.marker([20.57, -100.38]);
-            var user_radial = new L.circle(L.circle(user_marker.latlng))
+            var user_radial = new L.circle(L.circle(user_marker.latlng));
             //L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
+            //types of markers
+            var iconTypes = {
+                'bache': '<i class="fas fa-exclamation-triangle"></i>',
+                'coladera': '<i class="fas fa-ring"></i>',
+                'obra sin terminar': '<i class="far fa-wrench"></i>',
+                'escombro': '<i class="far fa-trash-alt"></i>',
+                'robo-asalto': '<i class="far fa-skull"></i>',
+                'biciestacionamiento': '<i class="far fa-home"></i>',
+                'mala iluminación': '<i class="far fa-lightbulb"></i>'
+            };
 
             {% for pin in pins %}
-            var marker = L.marker([{{ pin.lat }}, {{ pin.lng }}]).addTo(map)
+            
+            var icon = L.divIcon({
+                className: '{{pin.typeofpin}}',
+                html: iconTypes['{{pin.typeofpin}}'],
+                iconSize:[10,10],
+                iconAnchor:[10,10],
+            });
+            L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon}).addTo(map)
                 .bindPopup("<b>{{ pin.description }}</b><p>Fecha del reporte: {{pin.time}}</p><br><img src='{{ pin.photo }}'>");
-            //{% endfor %}
+            {% endfor %}
 
             //var live_location = map.locate()
             //if (navigator.geolocation) {

templates/login.html

@@ -1,6 +1,13 @@
+
 {% extends 'secondbase.html' %}
 {% block content %}
+<style>
+    form {
+        padding: 40px;
+    }
+</style>
 <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() }}

templates/quienes.html

@@ -0,0 +1,19 @@
+{% extends 'secondbase.html' %}
+
+{% block content %}
+    <div style="padding: 50px; overflow-y: scroll;">
+        <h2>Somos civiles y voluntari@s</h2>
+        <h4>Estamos cansad@s de lidiar con dos cosas principales</h4>
+        <p>La mala administración de recursos públicos.</p>
+        <p>Los "influencers" de tres pesos que se dedican a atacar a quienes tratan de cambiar las cosas para bien.</p>
+        <h3>Este proyecto es de gente libre para gente libre</h3>
+        <p>Si ves este mapa y te molesta que alguien se atreva a profanar el nombre de [inserte su partido político favorito aquí], entonces deja de trabajar para quienes no tienen ni un ápice de escrúpulos.</p>
+        <p>Si quieres participar en este proyecto aportando datos valiosos, consigue que alguien te de una invitación, porque si nadie te invita, no estás invitad@.</p>
+        <br>
+        <h2>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 <3 </p>
+
+            <img src="{{url_for('static', filename='images/ramos.jpg')}}">
+    </div>
+{% endblock %}

templates/register.html

@@ -3,6 +3,7 @@
 {% block content %}
 
 <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() }}

templates/secondbase.html

@@ -16,22 +16,24 @@
 <body style="background-color: rgb(205, 243, 148); color: black;overflow-y: scroll;">
     <nav style="z-index: 5; height: 7vh;">
         <ul>
-            <li><h2>El Bachemapa</h2>
+            <a href="/"><li><h2>El Bachemapa</h2></li></a>
         </ul>
         
         
         <ul>
             <li><button id="pinner-top">Agregar</button></li>
-            <li><a href="/quienes">Quienes somos</a></li>
+            <li><button><a href="/quienes">Quienes somos</a></button></li>
         </ul>
     </nav>
     {% with messages = get_flashed_messages() %}
         {% if messages %}
-        <ul class="flashes">
+        <div style="position:absolute; z-index: 9999;">
-            {% for message in messages %}
+            <ul class="flashes">
-                <li>{{message}}</li>
+                {% for message in messages %}
-            {% endfor %}
+                    <li>{{message}}</li>
-        </ul>
+                {% endfor %}
+            </ul>
+        </div>
         {% endif %}
     {% endwith %}
     <main class="" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: absolute;">