Improved www.ttss.krakow.pl
blame | history | patch | commit | commitdiff | ignore whitespace
Jacek Kowalski
2019-01-29 6cb525a2a255aafebc162f80968a2054a0a9798b 
 index.html


@@ -1,86 +1,57 @@


<!DOCTYPE html>


<html lang="en">


<html lang="pl">


   <head>


      <title>TTSS Cracow</title>


      <title>TTSS Kraków - Odjazdy tramwajów na żywo</title>


      <meta charset="utf-8">


      <meta http-equiv="X-UA-Compatible" content="IE=edge">


      <meta name="viewport" content="width=device-width, initial-scale=1">


      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


      <style type="text/css">


         tr.active {


            color: gray;


         }


         .form-round-left {


            border-top-left-radius: 4px !important;


            border-bottom-left-radius: 4px !important;


            border-right: 0;


         }


         .navbar-text {


            margin-right: 15px;


            margin-left: 15px;


         }


         .input-group-btn:first-child {


            width: 50%;


         }


         @keyframes blink {


            50% { color: transparent; }


         }


         .status-boarding {


            animation: blink 1s linear infinite;


         }


         .status-delayed {


            font-weight: bold;


         }


         .bg-active {


            background-color: #eee;


         }


         .bg-default {


            border: 1px solid #eee;


         }


         .label.bg-success, .label.bg-warning, .label.bg-danger, .label.bg-active, .label.bg-default {


            color: black;


            font-weight: normal;


            font-size: inherit;


         }


      </style>


      <link rel="stylesheet" type="text/css" href="index.css">


      <style type="text/css" id="vehicle-data-style"></style>


   </head>


   <body>


      <nav class="navbar navbar-default">


         <div class="container-fluid">


            <div class="navbar-header">


               <a class="navbar-brand" href="#">TTSS KRK</a>


            </div>


            <ul class="nav navbar-nav">


               <li class="navbar-header">


                  <a class="navbar-brand" href="" data-translate="page_name">TTSS Kraków</a>


               </li>


               <li>


                  <form class="navbar-form navbar-left">


                     <select class="form-control" id="lang-select">


                        <option value="pl">PL</option>


                        <option value="en">EN</option>


                     </select>


                  </form>


               </li>


               <li>


                  <a href="/map.html" data-translate="map">Mapa</a>


               </li>


            </ul>


				


				


            <form class="navbar-form navbar-left">


               <div class="input-group">


                  <span class="input-group-btn">


                     <input type="text" class="form-control form-round-left" id="stop-name" placeholder="Stop name" />


                     <input type="text" class="form-control form-round-left" id="stop-name" placeholder="Nazwa przystanku" autofocus="autofocus" />


                  </span>


                  <select class="form-control" id="stop-name-autocomplete">


                  </select>


                  <span class="input-group-btn">


                     <button type="submit" class="btn btn-default">Go</button>


                     <button type="submit" class="btn btn-default" data-translate="go_button">Dalej</button>


                  </span>


               </div>


            </form>


            


            <button type="button" class="btn btn-default navbar-btn pull-right" id="refresh" disabled="disabled">


               <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>


               Refresh


            </button>


				


            <p class="navbar-text pull-right" id="refresh-text">Initializing...</p>


            <button type="button" class="btn btn-default navbar-btn pull-right" id="refresh" disabled="disabled" data-translate="refresh_button">&#x27f3; Odśwież</button>


            <p class="navbar-text pull-right" id="refresh-text">Ładowanie...</p>


         </div>


      </nav>


		


      <div class="container-fluid">


         <div id="progress" class="progress" style="display: none;">


            <div id="progress-bar" class="progress-bar progress-bar-striped active" style="width: 100%">


               <span id="progress-text" class="sr-only">Refreshing data...</span>


            </div>


         </div>


			


         <div id="alert" class="alert alert-danger alert-dismissible" style="display:none">


            <a href="#" class="close" id="alert-close" aria-label="close">&times;</a>


            <strong>Error occured!</strong> <span id="alert-text"></span>


            <strong data-translate="error_title">Wystąpił błąd!</strong> <span id="alert-text"></span>


         </div>


         


         <div class="row">


@@ -92,10 +63,14 @@


               <table class="table table-striped table-condensed">


                  <thead>


                     <tr>


                        <th>Line</th>


                        <th>Direction</th>


                        <th>Time</th>


                        <th>Delay</th>


                        <th data-translate="header_line">Linia</th>


                        <th>


                           <span data-translate="header_direction">Kierunek</span>


                           <a id="vehicle-data" data-translate="header_vehicle">Pojazd</span>


                        </th>


                        <th data-translate="header_vehicle" class="vehicleData">Pojazd</th>


                        <th data-translate="header_time">Czas</th>


                        <th data-translate="header_delay">Opóźn.</th>


                     </tr>


                  </thead>


                  <tbody id="times-table">


@@ -103,52 +78,64 @@


               </table>


            </div>


            <div class="col-md-6">


               <h3>Lines</h3>


               <!--


               <h3 data-translate="header_lines">Linie</h3>


               


               <table class="table table-condensed">


                  <thead>


                     <tr>


                        <th>Line</th>


                        <th>Route</th>


                        <th>Carrier</th>


                        <th data-translate="header_line">Linia</th>


                        <th data-translate="header_route">Trasa</th>


                        <th data-translate="header_carrier">Przewoźnik</th>


                     </tr>


                  </thead>


                  <tbody id="times-lines">


							


                  </tbody>


               </table>


					


               <!--


               <h3 id="route-line"></h3>


					


               <table class="table table-condensed">


                  <thead>


                     <tr>


                        <th>Stop</th>


                     </tr>


                  </thead>


                  <tbody id="route-table">


							


                  </tbody>


               </table>


               -->


               


               <p data-translate="help_click_for_schedule">Kliknij na wpis w tabeli odjazdów by zobaczyć rozkład jazdy danego tramwaju.</p>


					


               <h3 id="route-line"></h3>


					


               <p id="route-vehicle"></p>


					


               <table class="table table-condensed">


                  <thead>


                     <tr>


                        <th data-translate="header_time">Czas</th>


                        <th data-translate="header_stop">Przystanek</th>


                     </tr>


                  </thead>


                  <tbody id="route-table">


                  </tbody>


               </table>


					


               <p class="small">


                  Legend:


                  <span class="label bg-active">Departed</span>


                  <span class="label bg-success">At stop</span>


                  <span class="label bg-default">En route</span>


                  <span class="label bg-warning">Delayed 4′+</span>


                  <span class="label bg-danger">Delayed 10′+</span>


                  <span data-translate="help_legend">Legenda:</span>


                  <span class="label bg-active" data-translate="status_departed">Odjechał</span>


                  <span class="label bg-success" data-translate="status_stopped">Na przystanku</span>


                  <span class="label bg-default" data-translate="status_default">W trasie</span>


                  <span class="label bg-warning" data-translate="status_delayed_4">Opóźniony 4′+</span>


                  <span class="label bg-danger" data-translate="status_delayed_10">Opóźniony 10′+</span>


               </p>


               


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


               <p class="small">


                  <span class="bigger" title="Bombardier NGT6, Bombardier NGT8, PESA 2014N Krakowiak, Newag Nevelo 126N" data-translate="low_floor_sign">&#x267F;</span> - <span data-translate="low_floor_description">tramwaj niskopodłogowy</span>.


                  <span class="bigger" title="Düwag/Man/MPK N8C-NF, Düwag/MPK GT8C, Bombardier-Rotax/MPK EU8N, Protram 405N-Kr" data-translate="partially_low_floor_sign">*&#x267F;</span> - <span data-translate="partially_low_floor_description">tramwaj częściowo niskopodłogowy</span>.


                  <span class="bigger" title="other tram types" data-translate="high_floor_sign">&#x2010;</span> - <span data-translate="high_floor_description">tramwaj wysokopodłogowy</span>.


                  <span data-translate="help_hover_for_more">Najedź na ikonę, by uzyskać więcej informacji.</span>


               </p>


               


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


               <p class="small" data-translate="help_text">Względne czasy (np. 3 min) są podawane na podstawie faktycznej lokalizacji tramwajów. Czasy bezwzględne (np. 8:01) to odjazdy rozkładowe, pokazywane gdy tramwaj nie może być zlokalizowany. "?" oznacza nieznane opóźnienie.</p>


					


               <p class="small">&copy; 2016-2017 Jacek Kowalski - <a href="https://github.com/jacekkow/mpk-ttss" data-translate="help_source">Źródło</a> - <a href="https://raw.githubusercontent.com/jacekkow/mpk-ttss/master/LICENSE" data-translate="help_license">Licencja</a></p>


            </div>


         </div>


      </div>


      <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"  crossorigin="anonymous"></script>


      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>


      <script type="text/javascript" src="lang_pl.js" id="lang_script"></script>


      <script type="text/javascript" src="common.js"></script>


      <script type="text/javascript" src="index.js"></script>


   </body>


</html>