| 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> |
|