1 <html> |
|
2 <head> |
|
3 <link rel="icon" type="image/png" href="/static/favicon.png" /> |
|
4 <link rel="stylesheet" type="text/css" href="/static/style.css" /> |
|
5 <meta charset='UTF-8' /> |
|
6 <style> |
|
7 .sarake-pysäkki, .sarake-pysäkkiviite, .sarake-alue |
|
8 { |
|
9 text-align: left; |
|
10 } |
|
11 td, th, body |
|
12 { |
|
13 font-size: 24pt; |
|
14 }/* |
|
15 body |
|
16 { |
|
17 background: url('/static/tausta-bussi.png') no-repeat center center fixed; |
|
18 background-size: cover; |
|
19 }*/ |
|
20 </style> |
|
21 <script> |
|
22 function openTab(event, category) |
|
23 { |
|
24 var tabcontent = document.getElementsByClassName("tab"); |
|
25 for (var i = 0; i < tabcontent.length; i++) |
|
26 tabcontent[i].style.display = "none"; |
|
27 |
|
28 var tablinks = document.getElementsByClassName("tab-button"); |
|
29 for (var i = 0; i < tablinks.length; i++) |
|
30 tablinks[i].className = tablinks[i].className.replace(" active", ""); |
|
31 |
|
32 document.getElementById(category).style.display = "block"; |
|
33 event.currentTarget.className += " active"; |
|
34 window.scrollTo(0, 0); |
|
35 } |
|
36 </script> |
|
37 <title>{{route}} {{description}}</title> |
|
38 </head> |
|
39 <body> |
|
40 <h1> |
|
41 {% if night %} |
|
42 🌙 |
|
43 {% endif %} |
|
44 {{route}} {{description}}</h1> |
|
45 <nav> |
|
46 <div class="tab-bar"> |
|
47 <span></span> |
|
48 <button class="tab-button active" onclick="openTab(event, 'tab-overview')">Reitti</button> |
|
49 <button class="tab-button" onclick="openTab(event, 'tab-stops')">Pysäkit</button> |
|
50 <span></span> |
|
51 </div> |
|
52 </nav> |
|
53 <center>Ajomatka: {{'%.1f' % length}}km</center> |
|
54 <div id="tab-overview" class="tab"> |
|
55 <table class='aikataulu' cellspacing='0'> |
|
56 <tr> |
|
57 <th class='sarake-aika'>Aika</th> |
|
58 <th class='sarake-alue'>Alue</th> |
|
59 </tr> |
|
60 {% for entry in concise_schedule %} |
|
61 <tr> |
|
62 <td class='sarake-aika'>{{entry['time']}}</td> |
|
63 <td class='sarake-alue'>{{entry['region']}}</td> |
|
64 </tr> |
|
65 {% endfor %} |
|
66 </table> |
|
67 </div> |
|
68 <div id="tab-stops" class="tab" style="display: none"> |
|
69 <table class='aikataulu' cellspacing='0'> |
|
70 <tr> |
|
71 <th class='sarake-aika'>Aika</th> |
|
72 <th class='sarake-pysäkkiviite'>Pysäkki</th> |
|
73 <th class='sarake-pysäkki'>Nimi</th> |
|
74 </tr> |
|
75 {% for halt in schedule %} |
|
76 <tr> |
|
77 <td class='sarake-aika'>{{halt['time']}}</td> |
|
78 <td class='sarake-pysäkkiviite'> |
|
79 <a href="/pysäkki/{{halt['reference']}}"><img src='/static/pysäkki.png' height='24' /> {{halt['reference']}}</a> |
|
80 </td> |
|
81 <td class='sarake-pysäkki'> |
|
82 <a href="/pysäkki/{{halt['reference']}}">{{halt['name']}}</a> |
|
83 </td> |
|
84 </tr> |
|
85 {% endfor %} |
|
86 </table> |
|
87 </div> |
|
88 </body> |
|
89 </html> |
|