add navbar

10 files changed, 164 insertions, 9 deletions

diff --git a/bin/nvm b/bin/nvm
index 81289b8..c4c0a10 100755
--- a/bin/nvm
+++ b/bin/nvm
@@ -41,6 +41,12 @@ class Departure:
 
         self.classes = str()
 
+        self.station_name = None
+        self.stop_name = None
+
+        self.stop_name = obj.get("stop", dict()).get("name", None)
+        self.station_name = obj.get("station", dict()).get("name", self.stop_name)
+
         if "," in self.direction:
             self.direction, self.suffix = self.direction.split(",", maxsplit=1)
         else:
@@ -117,13 +123,22 @@ async def show_departure_board(request):
 
     departures = list(map(Departure, departures))
 
+    station_name_freq = dict()
     now = datetime.now().timestamp()
     for departure in departures:
         departure.set_relative(now)
+        station_name_freq[departure.station_name] = (
+            station_name_freq.get(departure.station_name, 0) + 1
+        )
+
+    if station_name_freq:
+        station_name = max(station_name_freq.keys(), key=lambda k: station_name_freq[k])
+    else:
+        station_name = "NVM"
 
     departure_board = env.get_template("departure_list.html")
     return web.Response(
-        body=departure_board.render(title="Noot", departures=departures),
+        body=departure_board.render(title=station_name, departures=departures),
         headers=headers,
     )
 
@@ -137,7 +152,7 @@ async def redirect_to_departure_board(request):
             stops = await response.json()
     stops_page = env.get_template("stops.html")
     return web.Response(
-        body=stops_page.render(title="Noot", stops=stops),
+        body=stops_page.render(title=f"Suche nach „{stop_name}“", stops=stops),
         headers=headers,
     )
 
@@ -145,7 +160,7 @@ async def redirect_to_departure_board(request):
 async def show_landing_page(request):
     landing_page = env.get_template("landing_page.html")
     return web.Response(
-        body=landing_page.render(title="Noot"),
+        body=landing_page.render(title="NVM"),
         headers=headers,
     )
 
@@ -156,7 +171,7 @@ async def ajax_geolocation(request):
     lon = request_data["lon"]
     async with aiohttp.ClientSession() as session:
         async with session.get(
-            f"{db_rest_api}/stops/nearby?latitude={lat}&longitude={lon}&linesOfStops=true"
+            f"{db_rest_api}/stops/nearby?latitude={lat}&longitude={lon}"
         ) as response:
             departures = await response.json()
     return web.Response(
diff --git a/sass/app.scss b/sass/app.scss
index 4b01bf5..51fea67 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -14,6 +14,15 @@ html {
 	margin-right: auto;
 }
 
+.globalnote {
+	margin-top: 1em;
+	font-style: italic;
+	text-align: center;
+}
+
+.geolocation {
+	margin-bottom: 1em;
+}
 
 ul.stops {
 	position:relative;
@@ -42,7 +51,7 @@ ul.stops {
 		.name {
 			position: absolute;
 			bottom: 0;
-			left: 0;
+			left: 5px;
 			width: 70%;
 			overflow: hidden;
 			background-color: transparent;
@@ -50,6 +59,18 @@ ul.stops {
 			color: black;
 		}
 
+		.distance {
+			position: absolute;
+			top: 1px;
+			right: 5px;
+			width: 30%;
+			text-align: right;
+			height: 1.2em;
+			overflow: hidden;
+			opacity: 50%;
+		}
+
+
 		.note {
 			position: absolute;
 			top: 1px;
@@ -217,12 +238,106 @@ ul.departures {
 	}
 }
 
+.navbar-fixed {
+	position: relative;
+	z-index: 997;
+
+	nav {
+		position: fixed;
+		width: 100%;
+		box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
+		overflow: hidden;
+
+		a {
+			color: #ffffff;
+		}
+
+		.container {
+			position: relative;
+			height: 100%;
+		}
+
+		.main {
+			position: absolute;
+			display: inline-block;
+			padding-left: 0.5rem;
+		}
+
+		ul {
+			float: right;
+			margin: 0;
+			padding-left: 0;
+			list-style-type: none;
+
+			li {
+				float: left;
+				padding: 0;
+				list-style-type: none;
+				padding-left: .8em;
+				padding-right: .8em;
+			}
+		}
+	}
+}
+
+@font-face {
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Material Icons'),
+		local('MaterialIcons-Regular'),
+		url(/static/v0/font/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+	font-family: 'Material Icons';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+}
+
+
 @media only screen and (max-width: 600px) {
 	ul.departures > li,
 	ul.stops > li {
 		font-size: 85%;
 	}
+	.navbar-fixed {
+		height: 50px;
+	}
+	nav {
+		height: 50px;
+		line-height: 50px;
+		.main {
+			font-size: 120%;
+		}
+		.material-icons {
+			height: 50px;
+			line-height: 50px;
+		}
+	}
 }
 
 @media only screen and (min-width: 600px) {
+	.navbar-fixed {
+		height: 60px;
+	}
+	nav {
+		height: 60px;
+		line-height: 60px;
+		.main {
+			font-size: 140%;
+		}
+		.material-icons {
+			height: 60px;
+			line-height: 60px;
+		}
+	}
 }
diff --git a/static/v0/css/dark.min.css b/static/v0/css/dark.min.css
index abc810b..2822abb 100644
--- a/static/v0/css/dark.min.css
+++ b/static/v0/css/dark.min.css
@@ -1 +1 @@
-body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}}
+body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}.globalnote{margin-top:1em;font-style:italic;text-align:center}.geolocation{margin-bottom:1em}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}ul.stops>li .name{position:absolute;bottom:0;left:5px;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .distance{position:absolute;top:1px;right:5px;width:30%;text-align:right;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}.navbar-fixed{position:relative;z-index:997}.navbar-fixed nav{position:fixed;width:100%;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);overflow:hidden}.navbar-fixed nav a{color:#ffffff}.navbar-fixed nav .container{position:relative;height:100%}.navbar-fixed nav .main{position:absolute;display:inline-block;padding-left:0.5rem}.navbar-fixed nav ul{float:right;margin:0;padding-left:0;list-style-type:none}.navbar-fixed nav ul li{float:left;padding:0;list-style-type:none;padding-left:.8em;padding-right:.8em}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:local("Material Icons"),local("MaterialIcons-Regular"),url(/static/v0/font/MaterialIcons-Regular.ttf) format("truetype")}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}.navbar-fixed{height:50px}nav{height:50px;line-height:50px}nav .main{font-size:120%}nav .material-icons{height:50px;line-height:50px}}@media only screen and (min-width: 600px){.navbar-fixed{height:60px}nav{height:60px;line-height:60px}nav .main{font-size:140%}nav .material-icons{height:60px;line-height:60px}}
diff --git a/static/v0/css/light.min.css b/static/v0/css/light.min.css
index abc810b..2822abb 100644
--- a/static/v0/css/light.min.css
+++ b/static/v0/css/light.min.css
@@ -1 +1 @@
-body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}}
+body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}.globalnote{margin-top:1em;font-style:italic;text-align:center}.geolocation{margin-bottom:1em}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}ul.stops>li .name{position:absolute;bottom:0;left:5px;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .distance{position:absolute;top:1px;right:5px;width:30%;text-align:right;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}.navbar-fixed{position:relative;z-index:997}.navbar-fixed nav{position:fixed;width:100%;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);overflow:hidden}.navbar-fixed nav a{color:#ffffff}.navbar-fixed nav .container{position:relative;height:100%}.navbar-fixed nav .main{position:absolute;display:inline-block;padding-left:0.5rem}.navbar-fixed nav ul{float:right;margin:0;padding-left:0;list-style-type:none}.navbar-fixed nav ul li{float:left;padding:0;list-style-type:none;padding-left:.8em;padding-right:.8em}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:local("Material Icons"),local("MaterialIcons-Regular"),url(/static/v0/font/MaterialIcons-Regular.ttf) format("truetype")}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}.navbar-fixed{height:50px}nav{height:50px;line-height:50px}nav .main{font-size:120%}nav .material-icons{height:50px;line-height:50px}}@media only screen and (min-width: 600px){.navbar-fixed{height:60px}nav{height:60px;line-height:60px}nav .main{font-size:140%}nav .material-icons{height:60px;line-height:60px}}
diff --git a/static/v0/font/MaterialIcons-Regular.ttf b/static/v0/font/MaterialIcons-Regular.ttf
new file mode 100644
index 0000000..453b3e4
--- /dev/null
+++ b/static/v0/font/MaterialIcons-Regular.ttf
diff --git a/static/v0/js/geolocation.js b/static/v0/js/geolocation.js
index 4e868b0..acf672a 100644
--- a/static/v0/js/geolocation.js
+++ b/static/v0/js/geolocation.js
@@ -22,7 +22,7 @@ document.addEventListener("DOMContentLoaded", function() {
 			link.textContent = result.name;
 			link.href = "/board/" + result.id;
 
-			note.className = "note";
+			note.className = "distance";
 			if (result.distance >= 1000) {
 				note.textContent = result.distance.toFixed(1) + " km"
 			} else {
diff --git a/templates/departure_list.html b/templates/departure_list.html
index a82e7c3..dea886c 100644
--- a/templates/departure_list.html
+++ b/templates/departure_list.html
@@ -5,8 +5,14 @@
 	{% include 'header.html' %}
 </head>
 <body>
+
+{% include 'navbar.html' %}
+
 <div class="container">
 	<div class="content">
+		{% if not departures %}
+			<div class="globalnote">Keine Abfahrten innerhalb der nächsten zwei Stunden</div>
+		{% endif %}
 		<ul class="departures">
 			{% for departure in departures %}
 				<li class="{{ departure.classes }}" onclick="location.href='https://dbf.finalrewind.org/map/{{ departure.tripId }}/0';">
diff --git a/templates/landing_page.html b/templates/landing_page.html
index c89da47..c5a04fd 100644
--- a/templates/landing_page.html
+++ b/templates/landing_page.html
@@ -6,14 +6,15 @@
 	<script src="/static/v0/js/geolocation.js"></script>
 </head>
 <body>
+{% include 'navbar.html' %}
 <div class="container">
 	<div class="content">
 		<div class="geolocation">
 			<button id="geolocationsearch">Haltestellen in der Umgebung suchen</button>
 		</div>
 		<form action="/find/stop">
+			<label for="name">Haltestelle:</label>
 			<input id="name" name="name" required type="text">
-			<label for="name">Manuelle Eingabe</label>
 			<button class="btn waves-effect waves-light btn-flat" type="submit" name="action" value="departures">
 				Suchen
 			</button>
diff --git a/templates/navbar.html b/templates/navbar.html
new file mode 100644
index 0000000..0b2908e
--- /dev/null
+++ b/templates/navbar.html
@@ -0,0 +1,17 @@
+<div class="navbar-fixed">
+	<nav style="color: #ffffff; background-color: #00838f;">
+		<div class="container">
+			{% if nav_link %}
+				<a class="main" href="{{ nav_link }}">{{ title }}</a>
+			{% else %}
+				<span class="main">{{ title }}</span>
+			{% endif %}
+			<ul id="nav-mobile" style="float: right;">
+				<li class="waves-effect waves-light">
+					<a onClick="javascript:toggleTheme()"><i class="material-icons" aria-label="Farbschema invertieren">invert_colors</i></a>
+				</li>
+				<li><a href="/"><i class="material-icons" aria-label="Stationen in der Umgebung suchen">my_location</i></a></li>
+			</ul>
+		</div>
+	</nav>
+</div>
diff --git a/templates/stops.html b/templates/stops.html
index affac69..5c47014 100644
--- a/templates/stops.html
+++ b/templates/stops.html
@@ -5,6 +5,7 @@
 	{% include 'header.html' %}
 </head>
 <body>
+{% include 'navbar.html' %}
 <div class="container">
 	<div class="content">
 		<ul class="stops">