Mercurial > bus-service / file comparison
comparison: templates/trip.html
templates/trip.html
- changeset 25
- cb423946cf33
- parent 24
- e6bdb9c54096
- child 29
- 2c78e68d7363
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 🌙 | |
| 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 <p style="text-align: center">Ajomatka: {{'%.1f' % length}}km</p> | |
| 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> |
