templates/ajovuoro.html

changeset 25
cb423946cf33
parent 24
e6bdb9c54096
child 26
69cc75506d4f
equal deleted inserted replaced
24:e6bdb9c54096 25:cb423946cf33
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 &#127769;
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>

mercurial