--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/templates/trip.html	Tue Jun 20 10:30:47 2017 +0300
@@ -0,0 +1,89 @@
+<html>
+<head>
+	<link rel="icon" type="image/png" href="/static/favicon.png" />
+	<link rel="stylesheet" type="text/css" href="/static/style.css" />
+	<meta charset='UTF-8' />
+	<style>
+	.sarake-pysäkki, .sarake-pysäkkiviite, .sarake-alue
+	{
+		text-align: left;
+	}
+	td, th, body
+	{
+		font-size: 24pt;
+	}/*
+	body
+	{
+		background: url('/static/tausta-bussi.png') no-repeat center center fixed;
+		background-size: cover;
+	}*/
+	</style>
+	<script>
+	function openTab(event, category)
+	{
+		var tabcontent = document.getElementsByClassName("tab");
+		for (var i = 0; i < tabcontent.length; i++)
+			tabcontent[i].style.display = "none";
+
+		var tablinks = document.getElementsByClassName("tab-button");
+		for (var i = 0; i < tablinks.length; i++)
+			tablinks[i].className = tablinks[i].className.replace(" active", "");
+
+		document.getElementById(category).style.display = "block";
+		event.currentTarget.className += " active";
+		window.scrollTo(0, 0);
+	} 
+	</script>
+	<title>{{route}} {{description}}</title>
+</head>
+<body>
+	<h1>
+	{% if night %}
+	&#127769;
+	{% endif %}
+	{{route}} {{description}}</h1>
+	<nav>
+	<div class="tab-bar">
+	<span></span>
+	<button class="tab-button active" onclick="openTab(event, 'tab-overview')">Reitti</button>
+	<button class="tab-button" onclick="openTab(event, 'tab-stops')">Pysäkit</button>
+	<span></span>
+	</div>
+	</nav>
+	<p style="text-align: center">Ajomatka: {{'%.1f' % length}}km</p>
+	<div id="tab-overview" class="tab">
+		<table class='aikataulu' cellspacing='0'>
+			<tr>
+				<th class='sarake-aika'>Aika</th>
+				<th class='sarake-alue'>Alue</th>
+			</tr>
+			{% for entry in concise_schedule %}
+			<tr>
+				<td class='sarake-aika'>{{entry['time']}}</td>
+				<td class='sarake-alue'>{{entry['region']}}</td>
+			</tr>
+			{% endfor %}
+		</table>
+	</div>
+	<div id="tab-stops" class="tab" style="display: none">
+		<table class='aikataulu' cellspacing='0'>
+			<tr>
+				<th class='sarake-aika'>Aika</th>
+				<th class='sarake-pysäkkiviite'>Pysäkki</th>
+				<th class='sarake-pysäkki'>Nimi</th>
+			</tr>
+			{% for halt in schedule %}
+			<tr>
+				<td class='sarake-aika'>{{halt['time']}}</td>
+				<td class='sarake-pysäkkiviite'>
+					<a href="/pysäkki/{{halt['reference']}}"><img src='/static/pysäkki.png' height='24' /> {{halt['reference']}}</a>
+				</td>
+				<td class='sarake-pysäkki'>
+					<a href="/pysäkki/{{halt['reference']}}">{{halt['name']}}</a>
+				</td>
+			</tr>
+			{% endfor %}
+		</table>
+	</div>
+</body>
+</html>