templates/trip.html

<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['id']}}"><img src='/static/pysäkki.png' height='24' /> {{halt['code']}}</a>
				</td>
				<td class='sarake-pysäkki'>
					<a href="/pysäkki/{{halt['id']}}">{{halt['name']}}</a>
				</td>
			</tr>
			{% endfor %}
		</table>
	</div>
</body>
</html>