better profile page

models/user.py

@@ -1,4 +1,5 @@
 class User:
+    id = 0
     name = ""
     event_preferences = []
     event_blacklist = []
@@ -6,12 +7,36 @@ class User:
     group_size = 0
     min_age = 0
     max_age = 0
+    travel_history = [] # (Name, coordinates)
+    co2_savings = []
     
     def __init__(self, **kwargs):
+        self.id = kwargs.pop("id")
         self.name = kwargs.pop("name")
         self.home_coordinates = kwargs.pop("home_coordinates")
         self.event_preferences = kwargs.pop("event_preferences")
-        self.event_blacklist = kwargs.pop("name")
+        self.event_blacklist = kwargs.pop("event_blacklist")
         self.group_size = kwargs.pop("group_size")
         self.min_age = kwargs.pop("min_age")
         self.max_age = kwargs.pop("max_age")
+
+
+    @property
+    def number_of_trips(self):
+        return len(self.travel_history)
+    
+    @property
+    def total_co2_savings(self):
+        return sum(self.co2_savings)
+
+    
+class Users:
+    _users = []
+
+    def add_user(self, **kwargs):
+        self._users.append(User(**kwargs))
+
+    def get_by_id(self, id):
+        for u in self._users:
+            if u.id == id:
+                return u

server.py

@@ -1,37 +1,40 @@
-from flask import Flask, render_template, request, jsonify, make_response, request
+from flask import Flask, render_template, request, request, session
 import random
-import time
 
-from flask.templating import render_template_string
+from apis.interactive_maps import SwissMap
+from models.user import Users
+
+USERBASE = Users()
+USERBASE.add_user(id=239842123, name="Remy", event_preferences=["hiking","skiing"], event_blacklist = [], home_coordinates=[0,0], group_size=1, min_age=20, max_age=20)
+MAP = SwissMap()
 
 app = Flask(__name__)
-
-heading = "Lorem ipsum dolor sit amet."
-
-content = """
-Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
-Repellat inventore assumenda laboriosam, 
-obcaecati saepe pariatur atque est? Quam, molestias nisi.
-"""
-
-db = list()  # The mock database
-
-posts = 500  # num posts to generate
-
-quantity = 20  # num posts to return per request
+app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'
 
 
 @app.route("/")
 def index():
-    """ Route to render the HTML """
+    session["user_id"] = 239842123 # a perfectly safe login, hem hem
     context = {
         "title" : f"Event title {id}",
         "image_name" : "fallback.jpg",
         "star_rating" : random.randint(1,4),
         "reviews" : random.randint(10,30),
-        "user" : "Remy"
+        "user" : USERBASE.get_by_id(session["user_id"]).name
     }
-    return render_template("base.html", context=context)
+    return render_template("event_overview.html", context=context)
+
+
+
+@app.route("/profile")
+def profile():
+    uid = session["user_id"]
+    user = USERBASE.get_by_id(uid)
+
+    context = {
+        "map_path" : MAP.travel_history_map(user.id, user.travel_history)
+    }
+    return render_template("user_detail.html", conbtext=context, user=user)
 
 
 
@@ -48,4 +51,5 @@ def get_event():
     return render_template("event_card.html", context=context)
 
 
+
 app.run(port=8000, debug=True)

static/custom-bootstrap-override.css

@@ -1,9 +1,69 @@
 .bg-primary .btn-primary .btn-primary:hover{
-    border-color: red;
-    background-color: red !important;
+    border-color: #D50505;
+    background-color: #D50505 !important;
 
 }
-
+.navbar-custom {
+    background-color: #D50505;
+}
 * {
     border-radius: 0 !important;
+}
+.content {
+    margin-top: 5rem;
+}
+/*
+*
+* ==========================================
+* CUSTOM UTIL CLASSES
+* ==========================================
+*
+*/
+
+.video-background-holder {
+    position: relative;
+    background-color: black;
+    height: 20vh;
+    width: 100%;
+    overflow: hidden;
+  }
+  
+  .video-background-holder video {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: 0;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -moz-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%) translateY(-50%);
+  }
+  
+  .video-background-content {
+    position: relative;
+    z-index: 2;
+  }
+  
+  .video-background-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: black;
+    opacity: 0.5;
+    z-index: 1;
+  }
+  
+
+.ml4 .letters {
+    position: absolute;
+    margin: auto;
+    left: 6.7em;
+    top: 0.75em;
+    opacity: 0; 
 }

static/sbb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#fff" d="M0 0h192.756v192.756H0V0z"/><path fill="#b74243" d="M2.834 106.246h59.203V86.511H2.834v19.735z"/><path fill="#fff" d="M48.324 89.803l5.489 4.93-6.577.001v-4.933h-3.289l-.001 4.933-6.576-.001 5.49-4.93h-3.848l-6.577 6.576 6.579 6.578h3.848l-5.492-4.936h6.576l.001 4.934h3.289v-4.934h6.577l-5.491 4.936h3.847l6.58-6.578-6.578-6.576h-3.847z"/><path d="M71.231 99.432c0 1.691 1.067 2.393 2.971 2.393 1.064 0 2.86-.293 2.86-1.947 0-1.426-1.576-1.682-4.146-2.262-2.511-.564-4.103-1.454-4.103-4.045 0-2.827 2.486-4.268 5.177-4.268 2.883 0 5.078 1.183 5.363 4.342h-2.545c-.234-1.603-1.388-2.08-2.84-2.08-1.371 0-2.443.619-2.443 1.779 0 1.199.904 1.564 3.865 2.112 1.775.329 4.456 1.032 4.456 4.167 0 2.463-2.082 4.465-5.604 4.465-3.057 0-5.512-1.416-5.656-4.656h2.645zM81.939 89.801h6.048c2.421 0 4.336 1.023 4.336 3.559 0 1.503-.915 2.296-2.114 2.875 1.684.484 2.624 2.203 2.624 3.604 0 2.256-1.724 3.779-4.289 3.779H81.94V89.801h-.001zm2.637 11.662h2.914c1.376 0 2.552-.584 2.552-1.967 0-1.508-1.013-2.08-2.368-2.08h-3.098v4.047zm0-6.091h2.971c1.147 0 2.149-.523 2.149-1.774 0-1.418-1.232-1.71-2.4-1.71h-2.72v3.484zM95.187 89.801h6.048c2.42 0 4.336 1.023 4.336 3.559 0 1.503-.914 2.296-2.113 2.875 1.682.484 2.623 2.203 2.623 3.604 0 2.256-1.725 3.779-4.291 3.779h-6.603V89.801zm2.637 11.662h2.912c1.377 0 2.551-.584 2.551-1.967 0-1.508-1.012-2.08-2.365-2.08h-3.098v4.047zm0-6.091h2.969c1.146 0 2.15-.523 2.15-1.774 0-1.418-1.232-1.71-2.4-1.71h-2.719v3.484zM125.191 99.221c-.363 3.047-2.736 4.889-5.9 4.889-3.994 0-6.627-3.471-6.627-7.457 0-4.103 2.279-7.428 6.627-7.428 2.906 0 5.238 1.651 5.715 4.75h-2.688c-.244-1.319-1.338-2.437-3.027-2.437-2.73 0-3.795 2.378-3.795 5.006 0 2.43 1.289 5.234 3.854 5.234 1.641 0 2.771-.908 3.094-2.557h2.747zM127.184 89.795h9.605v2.289h-6.887v3.455h5.903v2.221h-5.903v5.851h-2.718V89.795zM138.846 89.795h9.607v2.289h-6.889v3.455h5.905v2.221h-5.905v5.851h-2.718V89.795zM155.719 89.795h9.605v2.289h-6.886v3.455h5.902v2.221h-5.902v5.851h-2.719V89.795zM167.438 89.795h9.607v2.289h-6.891v3.455h5.905v2.221h-5.905v5.851h-2.716V89.795zM181.307 99.432c0 1.691 1.068 2.393 2.971 2.393 1.064 0 2.859-.293 2.859-1.947 0-1.426-1.576-1.682-4.145-2.262-2.512-.564-4.104-1.454-4.104-4.045 0-2.827 2.486-4.268 5.178-4.268 2.885 0 5.078 1.183 5.363 4.342h-2.545c-.234-1.603-1.389-2.08-2.84-2.08-1.371 0-2.443.619-2.443 1.779 0 1.199.902 1.564 3.865 2.112 1.775.329 4.455 1.032 4.455 4.167 0 2.463-2.082 4.465-5.605 4.465-3.057 0-5.512-1.416-5.654-4.656h2.645z"/></g></svg>

templates/base.html

@@ -16,17 +16,11 @@
 
     <script src="static/index.js"></script>
 </head>
+
 <body>
 {% include "sidebar.html" %}
-<div class="container-fluid">
-    <h1 class="display-3">Physical doodling</h1>
-    <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 row-cols-xxl-4 p-1">
-        <h1 class="display-3">Welcome {{ context.user }}</h1>
-
-        <div class="col">
-            <div class="list">
-        </div>     
-    </div>
+<div class="container-fluid content">
+    {% block content %}{% endblock %}
 </div>
 </body>
 </html>

templates/event_card.html

@@ -4,7 +4,7 @@
     <!-- </div> -->
     <div class="sep"></div>
     <div class="card-body">
-      <h5 class="card-title">{{ context.title }}</h5>
+      <h5 class="card-title ">{{ context.title }}</h5>
       <ul class="list-group list-group-flush">
         <li class="list-group-item"><i class="far fa-clock"></i> Total duration: {{context.duration }}</li>
         <li class="list-group-item"><i class="far fa-map"></i> {{ context.location }}</li>

templates/event_overview.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% block content %}
+
+<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 row-cols-xxl-4 p-1">
+    <div class="col">
+        <!-- Background video -->
+          
+        <div class="card mb-2 shadow">
+            <div class="video-background-holder ratio ratio-3x1">
+                <div class="video-background-overlay"></div>
+                <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
+                      <source src="/static/background.mp4" type="video/mp4">
+                  </video>
+                <div class="video-background-content container h-100">
+                  <div class="d-flex h-100 text-center align-items-center">
+                    <div class="w-100 text-white">
+                      <h1 class="display-4">Welcome {{ context.user }}.</h1>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            <div class="card-body">
+                <h5 class="card-title">The weather today is:</h5>
+            </div>
+        </div>
+        <div class="list"></div>
+    </div>     
+</div>
+
+{% endblock %}

templates/sidebar.html

@@ -1,8 +1,82 @@
-<nav class="navbar navbar-dark fixed-top bg-secondary">
+<nav class="navbar navbar-dark navbar-custom fixed-top">
     <div class="container-fluid">
         <a class="navbar-brand" href="/">
-            <img src="/static/SBB-Logo.png" alt="SBB" width="50px">
-            <span class="font-monospace fw-bold">Click & Hike</span>
+            <img src="/static/sbb.png" alt="SBB" width="30px">
+            <span class="font-monospace fw-bold">Click & 
+                <span class="ml4">
+                <span class="letters letters-1">Hike</span>
+                <span class="letters letters-2">Bike</span>
+                <span class="letters letters-3">Culture</span>
+                <span class="letters letters-4">Jodel</span>
+                </span>
+            </span>
+              
+              <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
+              <script>
+                var ml4 = {};
+                ml4.opacityIn = [0,1];
+                ml4.scaleIn = [0.2, 1];
+                ml4.scaleOut = 2.5;
+                ml4.durationIn = 900;
+                ml4.durationOut = 800;
+                ml4.delay = 600;
+                
+                anime.timeline({loop: true})
+                    .add({
+                    targets: '.ml4 .letters-1',
+                    opacity: ml4.opacityIn,
+                    scale: ml4.scaleIn,
+                    duration: ml4.durationIn
+                    }).add({
+                    targets: '.ml4 .letters-1',
+                    opacity: 0,
+                    scale: ml4.scaleOut,
+                    duration: ml4.durationOut,
+                    easing: "easeInExpo",
+                    delay: ml4.delay
+                    }).add({
+                    targets: '.ml4 .letters-2',
+                    opacity: ml4.opacityIn,
+                    scale: ml4.scaleIn,
+                    duration: ml4.durationIn
+                    }).add({
+                    targets: '.ml4 .letters-2',
+                    opacity: 0,
+                    scale: ml4.scaleOut,
+                    duration: ml4.durationOut,
+                    easing: "easeInExpo",
+                    delay: ml4.delay
+                    }).add({
+                    targets: '.ml4 .letters-3',
+                    opacity: ml4.opacityIn,
+                    scale: ml4.scaleIn,
+                    duration: ml4.durationIn
+                    }).add({
+                    targets: '.ml4 .letters-3',
+                    opacity: 0,
+                    scale: ml4.scaleOut,
+                    duration: ml4.durationOut,
+                    easing: "easeInExpo",
+                    delay: ml4.delay
+                    }).add({
+                    targets: '.ml4 .letters-4',
+                    opacity: ml4.opacityIn,
+                    scale: ml4.scaleIn,
+                    duration: ml4.durationIn
+                    }).add({
+                    targets: '.ml4 .letters-4',
+                    opacity: 0,
+                    scale: ml4.scaleOut,
+                    duration: ml4.durationOut,
+                    easing: "easeInExpo",
+                    delay: ml4.delay
+                    }).add({
+                    targets: '.ml4',
+                    opacity: 0,
+                    duration: 0,
+                    delay: 0
+                    });
+            </script>
         </a>
         
 

templates/user_detail.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% block content %}
+
+<div class="card mb-4 shadow">
+    <div class="card-body">
+      <h5 class="card-title">{{ user.name }} - Profile overview</h5>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">id: {{user.id }}</li>
+        <li class="list-group-item">total trips: {{ user.number_of_trips }}</li>
+        <li class="list-group-item">total CO2 saved: {{user.co2_economies }}</li>
+      </ul>
+    </div>
+</div>
+<div class="card mb-4 shadow">
+    <div class="card-body">
+        <h5 class="card-title">Previous destinations</h5>
+        <iframe src="/static/{{ context.map_path }}"></iframe>
+    </div>
+</div>
+<div class="card mb-4 shadow">
+    <div class="card-body">
+      <h5 class="card-title">Travel overview</h5>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">id: {{user.id }}</li>
+        <li class="list-group-item">total trips: {{ user.trips }}</li>
+        <li class="list-group-item">total CO2 saved: {{user.total_co2_savings }}</li>
+      </ul>
+    </div>
+</div>
+{% endblock %}