Improved www.ttss.krakow.pl
view | history | commit | commitdiff
Jacek Kowalski
2016-12-07 e076bac2e183cff9d6f9a9aa1fc838b9db4dcfaf
commit | author | age
896879 1 <!DOCTYPE html>
JK 2 <html lang="en">
3     <head>
4         <title>TTSS Cracow</title>
5         <meta charset="utf-8">
6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
7         <meta name="viewport" content="width=device-width, initial-scale=1">
8         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9         <style type="text/css">
10             tr.active {
11                 color: gray;
12             }
13             .form-round-left {
14                 border-top-left-radius: 4px !important;
15                 border-bottom-left-radius: 4px !important;
16                 border-right: 0;
17             }
18             .navbar-text {
19                 margin-right: 15px;
20                 margin-left: 15px;
21             }
22             .input-group-btn:first-child {
23                 width: 50%;
24             }
e2b283 25             @keyframes blink {
JK 26                 50% { color: transparent; }
27             }
28             .status-boarding {
29                 animation: blink 1s linear infinite;
30             }
31             .status-delayed {
32                 font-weight: bold;
33             }
a03a80 34             .bg-active {
JK 35                 background-color: #eee;
36             }
e076ba 37             .bg-default {
JK 38                 border: 1px solid #eee;
39             }
40             .label.bg-success, .label.bg-warning, .label.bg-danger, .label.bg-active, .label.bg-default {
a03a80 41                 color: black;
JK 42                 font-weight: normal;
43                 font-size: inherit;
44             }
896879 45         </style>
JK 46     </head>
47     <body>
48         <nav class="navbar navbar-default">
49             <div class="container-fluid">
50                 <div class="navbar-header">
51                     <a class="navbar-brand" href="#">TTSS KRK</a>
52                 </div>
53                 <form class="navbar-form navbar-left">
54                     <div class="input-group">
55                         <span class="input-group-btn">
56                             <input type="text" class="form-control form-round-left" id="stop-name" placeholder="Stop name" />
57                         </span>
58                         <select class="form-control" id="stop-name-autocomplete">
59                         </select>
60                         <span class="input-group-btn">
61                             <button type="submit" class="btn btn-default">Go</button>
62                         </span>
63                     </div>
64                 </form>
65                 
66                 <button type="button" class="btn btn-default navbar-btn pull-right" id="refresh" disabled="disabled">
67                     <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
68                     Refresh
69                 </button>
70                 
71                 <p class="navbar-text pull-right" id="refresh-text">Initializing...</p>
72             </div>
73         </nav>
74         <div class="container-fluid">
75             <div id="alert" class="alert alert-danger alert-dismissible" style="display:none">
76                 <a href="#" class="close" id="alert-close" aria-label="close">&times;</a>
77                 <strong>Error occured!</strong> <span id="alert-text"></span>
78             </div>
79             
80             <div class="row">
81                 <div class="col-md-6">
82                     <h2 id="times-stop-name"></h2>
83                     
84                     <div id="times-alerts"></div>
85                     
86                     <table class="table table-striped table-condensed">
87                         <thead>
88                             <tr>
89                                 <th>Line</th>
90                                 <th>Direction</th>
91                                 <th>Time</th>
92                                 <th>Delay</th>
93                             </tr>
94                         </thead>
95                         <tbody id="times-table">
96                         </tbody>
97                     </table>
98                 </div>
99                 <div class="col-md-6">
100                     <h3>Lines</h3>
101                     
102                     <table class="table table-condensed">
103                         <thead>
104                             <tr>
105                                 <th>Line</th>
106                                 <th>Route</th>
107                                 <th>Carrier</th>
108                             </tr>
109                         </thead>
110                         <tbody id="times-lines">
111                             
112                         </tbody>
113                     </table>
114                     
115                     <!--
116                     <h3 id="route-line"></h3>
117                     
118                     <table class="table table-condensed">
119                         <thead>
120                             <tr>
121                                 <th>Stop</th>
122                             </tr>
123                         </thead>
124                         <tbody id="route-table">
125                             
126                         </tbody>
127                     </table>
128                     -->
525a8b 129                     
a03a80 130                     <p class="small">
JK 131                         Legend:
132                         <span class="label bg-active">Departed</span>
e076ba 133                         <span class="label bg-success">At stop</span>
JK 134                         <span class="label bg-default">En route</span>
135                         <span class="label bg-warning">Delayed 4′+</span>
136                         <span class="label bg-danger">Delayed 10′+</span>
a03a80 137                     </p>
JK 138                     
139                     <p class="small">Relative times (eg. 3 min) are real-time arrivals based on tram location data. Absolute times (eg. 8:01) are scheduled departures, shown when the tram cannot be located. "?" means unknown delay.</p>
140                     
141                     <p class="small">&copy; 2016 Jacek Kowalski - <a href="https://github.com/jacekkow/mpk-ttss">Source</a> - <a href="https://raw.githubusercontent.com/jacekkow/mpk-ttss/master/LICENSE">License</a></p>
896879 142                 </div>
JK 143             </div>
144         </div>
145         <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"  crossorigin="anonymous"></script>
c25e91 146         <script type="text/javascript" src="index.js"></script>
896879 147     </body>
JK 148 </html>