<commit_before><!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perturbações do Metro de Lisboa</title>
  <meta name="description" content="Estado das linhas do Metro de Lisboa"/>
  <meta name="keywords" content="ML, metro, lisboa, perturbações, linhas, estado"/>
  <meta name="author" content="Segvault"/>

  <!-- Pure CSS -->
  <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="<KEY>" crossorigin="anonymous">
  <!--[if lte IE 8]>
      <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
  <![endif]-->
  <!--[if gt IE 8]><!-->
      <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
  <!--<![endif]-->

  <!-- Counter script -->
  <script type="text/javascript" src="/static/js/flipcounter.js"></script>
  <script type="text/javascript" src="/static/js/modernizr.custom.21954.js"></script>
  <!-- Counter styles -->
  <link rel="stylesheet" type="text/css" href="/static/css/counter.css"/>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">

  <link rel="stylesheet" type="text/css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css">

  <style>
    .header {
      margin-bottom: 50px;
    }

    .content {
      max-width: 650px;
      padding-left:5px;
      padding-right: 5px;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
    }

    .footer {
      font-size: 87.5%;
      border-top: 1px solid #eee;
      margin-top: 3.4286em;
      padding: 1.1429em;
      background: rgb(245, 245, 245);
      color: #777;
    }
    .pure-g [class*=pure-u] {
      font-family: 'Roboto';
    }
    .pure-g [class*=pure-u].ubuntu {
      font-family: 'Ubuntu', sans-serif;
    }

    .unitlink {
      text-transform: none;
      text-align: right;
    }
    .unitlink > a {
      color: #777;
    }

    .status {
      font-size: 130%;
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;
    }

    .line {
      color: white;
    }

    .dimmed {
      background: linear-gradient(90deg,
        rgba(0, 0, 0, 0), 
        rgba(0, 0, 0, 0.5)
      );
    }

    .status.problem {
      color: red;
    }
    .status.ok {
      color: limegreen;
    }

    th.smallhead {
      font-size: 80%;
    }
    th.tinyhead {
      padding-left: 0;
      padding-right: 0;
      text-align: center;
    }
    table.tinycells > tbody > tr > td {
      padding-left: 0;
      padding-right: 0;
    }

    .sixStyle {
      position:relative;
      display:inline-block;
      white-space: pre; /* to preserve the spaces from collapsing */
    }
    .sixStyle:before {
      display:block;
      z-index:1;
      position:absolute;
      top:0;
      left:0;
      width: 50%;
      content: attr(data-content); /* dynamic content for the pseudo element */
      overflow:hidden;
      color: #e0e0e0;
    }

    @media screen and (max-width: 35.5em) {
      .pure-table {
        font-size: 80%;
      }
    }

    @media screen and (max-width: 25em) {
      .pure-table {
        font-size: 70%;
      }
    }

    @media screen and (max-width: 17.5em) {
      .pure-table {
        font-size: 60%;
      }
    }

    @keyframes blink {
      0% { opacity: 1 }
      50% { opacity: 0.5 }
      100% { opacity: 1 }
    }
    @-webkit-keyframes blink {
        0% { opacity: 1 }
        50% { opacity: 0.5 }
        100% { opacity: 1 }
    }

    .errorblink {
      -moz-transition:all 0.5s ease-in-out;
      -webkit-transition:all 0.5s ease-in-out;
      -o-transition:all 0.5s ease-in-out;
      -ms-transition:all 0.5s ease-in-out;
      transition:all 0.5s ease-in-out;
      -moz-animation:blink normal 1.5s infinite ease-in-out;
      /* Firefox */
      -webkit-animation:blink normal 1.5s infinite ease-in-out;
      /* Webkit */
      -ms-animation:blink normal 1.5s infinite ease-in-out;
      /* IE */
      animation:blink normal 1.5s infinite ease-in-out;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="pure-g">
      <div class="pure-u-1" style="text-align: center; background-color: #eee;">
        <strong>Estado das linhas</strong> <small style="color: #777;">última alteração há {{ if .LastChangeAgoHour }}{{.LastChangeAgoHour}} horas e {{end}}{{ .LastChangeAgoMin }} minutos</small>
      </div>
      {{ $numlines := len .Lines }}
      {{ range $line := .Lines }}
        <div class="pure-u-1 pure-u-sm-1-{{ $numlines }} line status{{if $line.Down}} dimmed{{end}}" style="background-color: #{{ $line.Color }};">
          {{ $line.Name }}
          {{ if $line.Down }}
          <span style="float: right;">
            <span style="font-size: 60%;">desde há {{ $line.Minutes }} min</span>
            <i class="fa fa-times-rectangle errorblink" aria-hidden="true"></i>
          </span>
          {{ else }}
          <span style="float: right;"><i class="fa fa-check-square" aria-hidden="true"></i></span>
          {{ end }}
        </div>
      {{ end }}
    </div>
    <div class="pure-g ubuntu" style="margin-left: auto; margin-right: auto; width: 60%; text-transform: uppercase;">
      <div class="pure-u-1 ubuntu" style="font-size: 6.2vw; white-space: nowrap;">O Metro de Lisboa</div>
      <div class="pure-u-1 ubuntu" style="font-size: 10.8vw; white-space: nowrap;">opera <span style="color: #f15c2b;">sem</span></div>
      <div class="pure-u-1 ubuntu" style="font-size: 7.8vw; color: #f15c2b;"><em>perturbações</em></div>
      <div id="days" style="width: 100%;">
        <div class="pure-u-7-24 ubuntu" style="font-size: 11vw;">há</div>
        <div class="pure-u-7-24 ubuntu">
          <div class="counter-wrapper scalable">
            <div class="flip-counter scalable" id="dayCounter"></div>
          </div>
        </div>
        <div class="pure-u-10-24 ubuntu" style="font-size: 11vw;">dias</div>
        <div class="pure-u-1 unitlink"><a href="#" onclick="switchToHours(); return false;">...ver antes em horas</a></div>
      </div>
      <div id="hours" style="width: 100%; display: none;">
        <div class="pure-u-5-24 ubuntu" style="font-size: 8vw;">há</div>
        <div class="pure-u-8-24 ubuntu">
          <div class="counter-wrapper scalable small">
            <div class="flip-counter scalable small" id="hourCounter"></div>
          </div>
        </div>
        <div class="pure-u-11-24 ubuntu" style="font-size: 8vw;">horas</div>
        <div class="pure-u-1 unitlink"><a href="#" onclick="switchToDays(); return false;">...ver antes em dias</a></div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="pure-g">
      <div class="pure-u-1">
        <h1><em>Perturbações</em> na última semana</h1>
        <table class="pure-table" style="width: 100%; text-align: center;">
          <thead>
            <tr>
              <th>Linha</th>
              {{ range $day := .DayNames }}
              <th class="smallhead">{{ $day }}</th>
              {{ end }}
            </tr>
          </thead>

          <tbody>
            {{ range $line := .Lines }}
            <tr>
              <td class="line" style="background-color: #{{ $line.Color }};">{{ $line.Name }}</td>
              {{ range $count := $line.DayCounts }}
                {{ if eq $count 0 }}
                  <td class="status ok">0 <i class="fa fa-check" aria-hidden="true"></i></td>
                {{ else }}
                  <td class="status problem">{{ $count }} <i class="fa fa-times" aria-hidden="true"></i></td>
                {{ end }}
              {{end}}
            </tr>
            {{end}}
          </tbody>
        </table>
        <h2>Disponibilidade na última semana</h2>
        {{ range $line := .Lines }}
        <p><span style="color: #{{ $line.Color }};">{{ $line.Name }}</span>: {{ $line.Availability }}{{ if ne $line.Availability "100.000%" }}<small>, as perturbações duraram em média {{ $line.AvgDuration }} minutos.{{end}}</small></p>
        {{end}}
        <p style="color: #777;"><small>A disponibilidade corresponde ao tempo em que uma linha funciona sem perturbações, como percentagem do tempo de exploração (horas a que o Metro está aberto ao público).</small></p>
        <h2><em>Perturbações</em> por hora do dia, na última semana</h2>
        <table class="pure-table tinycells" style="width: 100%; text-align: center;">
          <thead>
            <tr>
              <th>Linha</th>
              <th class="tinyhead"><span class="sixStyle" data-content="6">6</span></th>
              <th class="tinyhead">7</th>
              <th class="tinyhead">8</th>
              <th class="tinyhead">9</th>
              <th class="tinyhead">10</th>
              <th class="tinyhead">11</th>
              <th class="tinyhead">12</th>
              <th class="tinyhead">13</th>
              <th class="tinyhead">14</th>
              <th class="tinyhead">15</th>
              <th class="tinyhead">16</th>
              <th class="tinyhead">17</th>
              <th class="tinyhead">18</th>
              <th class="tinyhead">19</th>
              <th class="tinyhead">20</th>
              <th class="tinyhead">21</th>
              <th class="tinyhead">22</th>
              <th class="tinyhead">23</th>
              <th class="tinyhead">0</th>
            </tr>
          </thead>

          <tbody>
            {{ range $line := .Lines }}
            <tr>
              <td class="line" style="background-color: #{{ $line.Color }};">{{ $line.Name }}</td>
              {{ range $count := $line.HourCounts }}
                {{ if eq $count 0 }}
                  <td class="status ok">0<br><i class="fa fa-check" aria-hidden="true"></i></td>
                {{ else }}
                  <td class="status problem">{{ $count }}<br><i class="fa fa-times" aria-hidden="true"></i></td>
                {{ end }}
              {{end}}
            </tr>
            {{end}}
          </tbody>
        </table>
        <p style="color: #777;"><small>As perturbações são contabilizadas em cada hora que afectem.</small></p>
        <h1>Últimas <em>perturbações</em> por linha</h1>
        {{ range $line := .Lines }}
        <h3 style="color: #{{ $line.Color }};">{{ $line.Name }}</h3>
        <div style="padding-left: 40px;">
          {{ range $index, $s := $line.LastDisturbance.Statuses }}
            {{if (eq $index 0) }}
            <p>{{ formatDisturbanceTime $s.Time }} <span style="color: #777;">- {{ $s.Status }}</span>
            {{if not $s.IsDowntime}}<i style="color: limegreen;" class="fa fa-check" aria-hidden="true"></i>{{end}}</p>
            {{else}}
              {{if (ne (index $line.LastDisturbance.Statuses (minus $index 1)).Status $s.Status)}}
              <p>{{ formatDisturbanceTime $s.Time }} <span style="color: #777;">- {{ $s.Status }}</span>
              {{if not $s.IsDowntime}}<i style="color: limegreen;" class="fa fa-check" aria-hidden="true"></i>{{end}}</p>
              {{end}}
            {{end}}
          {{end}}
          {{ if not $line.LastDisturbance.Ended }}
            <p><em>Por resolver</em> <i style="color: red;" class="fa fa-times" aria-hidden="true"></p>
          {{end}}
        </div>
        {{end}}
        <p style="margin-top: 50px;">Serão disponibilizados mais dados, para intervalos de tempo maiores, à medida que estes sejam recolhidos.</p>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-2">
        <p>
            Este <em>website</em> não tem qualquer ligação à <em>Metropolitano de Lisboa, E.P.E.</em><br>
            Não podemos garantir a correcção da informação fornecida.<br>
            Só as autoridades competentes poderão fornecer dados oficiais.
        </p>
      </div>
      <div class="pure-u-4-5 pure-u-md-5-12" style="padding-right: 5px; box-sizing: border-box;">
        <p style="text-align: right;">Código no <a href="https://github.com/gbl08ma/disturbancesmlx">GitHub</a> | <a href="https://gbl08ma.github.io/contact/">Contactos</a></p>

        <p style="text-align: right;">
            Copyright © 2017 <a href="http://segvault.tny.im" target="_blank"><img src="/static/img/segvault-16.png" alt="Segvault"></a> / <a href="https://gbl08ma.github.io" target="_blank">gbl08ma</a>
        </p>
      </div>
      <div class="pure-u-1-5 pure-u-md-1-12">
        <div class="addthis_inline_share_toolbox" style="float: right;"></div>
      </div>
    </div>
  </div>
  <script>
    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    }

    window.onload = function() {
      var dayCounter = new flipCounter('dayCounter', {value: getRandomInt(90, 100), inc: 1, pace: 1000, auto: false, places: 2});
      var hourCounter = new flipCounter('hourCounter', {value: getRandomInt(900, 1000), inc: 1, pace: 1000, auto: false, places: 3});
      animate(dayCounter, {{ .Days }});
      animate(hourCounter, {{ .Hours }});
    };

    function animate(counter, target) {
        if(counter.getValue() > target) {
          counter.subtract(
            Math.min(
              counter.getValue() - target,
              Math.max(~~((counter.getValue() - target) / 2), 1)
            ));
          window.setTimeout(function () { animate(counter, target); }, 250);
        }
    };

    function switchToHours() {
      document.getElementById("days").style.display = 'none';
      document.getElementById("hours").style.display = 'block';
    }
    function switchToDays() {
      document.getElementById("hours").style.display = 'none';
      document.getElementById("days").style.display = 'block';
    }
  </script>
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4db86d9c0ef1e792"></script> 
</body>
</html>
<commit_msg>Different types of share widgets depending on screen size<commit_after><!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perturbações do Metro de Lisboa</title>
  <meta name="description" content="Estado das linhas do Metro de Lisboa"/>
  <meta name="keywords" content="ML, metro, lisboa, perturbações, linhas, estado"/>
  <meta name="author" content="Segvault"/>

  <!-- Pure CSS -->
  <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="<KEY>" crossorigin="anonymous">
  <!--[if lte IE 8]>
      <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
  <![endif]-->
  <!--[if gt IE 8]><!-->
      <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
  <!--<![endif]-->

  <!-- Counter script -->
  <script type="text/javascript" src="/static/js/flipcounter.js"></script>
  <script type="text/javascript" src="/static/js/modernizr.custom.21954.js"></script>
  <!-- Counter styles -->
  <link rel="stylesheet" type="text/css" href="/static/css/counter.css"/>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">

  <link rel="stylesheet" type="text/css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css">

  <style>
    .header {
      margin-bottom: 50px;
    }

    .content {
      max-width: 650px;
      padding-left:5px;
      padding-right: 5px;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
    }

    .footer {
      font-size: 87.5%;
      border-top: 1px solid #eee;
      margin-top: 3.4286em;
      padding: 1.1429em;
      background: rgb(245, 245, 245);
      color: #777;
    }
    .pure-g [class*=pure-u] {
      font-family: 'Roboto';
    }
    .pure-g [class*=pure-u].ubuntu {
      font-family: 'Ubuntu', sans-serif;
    }

    .unitlink {
      text-transform: none;
      text-align: right;
    }
    .unitlink > a {
      color: #777;
    }

    .status {
      font-size: 130%;
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;
    }

    .line {
      color: white;
    }

    .dimmed {
      background: linear-gradient(90deg,
        rgba(0, 0, 0, 0), 
        rgba(0, 0, 0, 0.5)
      );
    }

    .status.problem {
      color: red;
    }
    .status.ok {
      color: limegreen;
    }

    th.smallhead {
      font-size: 80%;
    }
    th.tinyhead {
      padding-left: 0;
      padding-right: 0;
      text-align: center;
    }
    table.tinycells > tbody > tr > td {
      padding-left: 0;
      padding-right: 0;
    }

    .sixStyle {
      position:relative;
      display:inline-block;
      white-space: pre; /* to preserve the spaces from collapsing */
    }
    .sixStyle:before {
      display:block;
      z-index:1;
      position:absolute;
      top:0;
      left:0;
      width: 50%;
      content: attr(data-content); /* dynamic content for the pseudo element */
      overflow:hidden;
      color: #e0e0e0;
    }

    .hideOnLarge {
      display: block;
    }

    @media screen and (min-width: 48em) {
      .hideOnLarge {
        display: none;
      }
    }

    @media screen and (max-width: 35.5em) {
      .pure-table {
        font-size: 80%;
      }
    }

    @media screen and (max-width: 25em) {
      .pure-table {
        font-size: 70%;
      }
    }

    @media screen and (max-width: 17.5em) {
      .pure-table {
        font-size: 60%;
      }
    }

    @keyframes blink {
      0% { opacity: 1 }
      50% { opacity: 0.5 }
      100% { opacity: 1 }
    }
    @-webkit-keyframes blink {
        0% { opacity: 1 }
        50% { opacity: 0.5 }
        100% { opacity: 1 }
    }

    .errorblink {
      -moz-transition:all 0.5s ease-in-out;
      -webkit-transition:all 0.5s ease-in-out;
      -o-transition:all 0.5s ease-in-out;
      -ms-transition:all 0.5s ease-in-out;
      transition:all 0.5s ease-in-out;
      -moz-animation:blink normal 1.5s infinite ease-in-out;
      /* Firefox */
      -webkit-animation:blink normal 1.5s infinite ease-in-out;
      /* Webkit */
      -ms-animation:blink normal 1.5s infinite ease-in-out;
      /* IE */
      animation:blink normal 1.5s infinite ease-in-out;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="pure-g">
      <div class="pure-u-1" style="text-align: center; background-color: #eee;">
        <strong>Estado das linhas</strong> <small style="color: #777;">última alteração há {{ if .LastChangeAgoHour }}{{.LastChangeAgoHour}} horas e {{end}}{{ .LastChangeAgoMin }} minutos</small>
      </div>
      {{ $numlines := len .Lines }}
      {{ range $line := .Lines }}
        <div class="pure-u-1 pure-u-sm-1-{{ $numlines }} line status{{if $line.Down}} dimmed{{end}}" style="background-color: #{{ $line.Color }};">
          {{ $line.Name }}
          {{ if $line.Down }}
          <span style="float: right;">
            <span style="font-size: 60%;">desde há {{ $line.Minutes }} min</span>
            <i class="fa fa-times-rectangle errorblink" aria-hidden="true"></i>
          </span>
          {{ else }}
          <span style="float: right;"><i class="fa fa-check-square" aria-hidden="true"></i></span>
          {{ end }}
        </div>
      {{ end }}
    </div>
    <div class="pure-g ubuntu" style="margin-left: auto; margin-right: auto; width: 60%; text-transform: uppercase;">
      <div class="pure-u-1 ubuntu" style="font-size: 6.2vw; white-space: nowrap;">O Metro de Lisboa</div>
      <div class="pure-u-1 ubuntu" style="font-size: 10.8vw; white-space: nowrap;">opera <span style="color: #f15c2b;">sem</span></div>
      <div class="pure-u-1 ubuntu" style="font-size: 7.8vw; color: #f15c2b;"><em>perturbações</em></div>
      <div id="days" style="width: 100%;">
        <div class="pure-u-7-24 ubuntu" style="font-size: 11vw;">há</div>
        <div class="pure-u-7-24 ubuntu">
          <div class="counter-wrapper scalable">
            <div class="flip-counter scalable" id="dayCounter"></div>
          </div>
        </div>
        <div class="pure-u-10-24 ubuntu" style="font-size: 11vw;">dias</div>
        <div class="pure-u-1 unitlink"><a href="#" onclick="switchToHours(); return false;">...ver antes em horas</a></div>
      </div>
      <div id="hours" style="width: 100%; display: none;">
        <div class="pure-u-5-24 ubuntu" style="font-size: 8vw;">há</div>
        <div class="pure-u-8-24 ubuntu">
          <div class="counter-wrapper scalable small">
            <div class="flip-counter scalable small" id="hourCounter"></div>
          </div>
        </div>
        <div class="pure-u-11-24 ubuntu" style="font-size: 8vw;">horas</div>
        <div class="pure-u-1 unitlink"><a href="#" onclick="switchToDays(); return false;">...ver antes em dias</a></div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="pure-g">
      <div class="pure-u-1">
        <h1><em>Perturbações</em> na última semana</h1>
        <table class="pure-table" style="width: 100%; text-align: center;">
          <thead>
            <tr>
              <th>Linha</th>
              {{ range $day := .DayNames }}
              <th class="smallhead">{{ $day }}</th>
              {{ end }}
            </tr>
          </thead>

          <tbody>
            {{ range $line := .Lines }}
            <tr>
              <td class="line" style="background-color: #{{ $line.Color }};">{{ $line.Name }}</td>
              {{ range $count := $line.DayCounts }}
                {{ if eq $count 0 }}
                  <td class="status ok">0 <i class="fa fa-check" aria-hidden="true"></i></td>
                {{ else }}
                  <td class="status problem">{{ $count }} <i class="fa fa-times" aria-hidden="true"></i></td>
                {{ end }}
              {{end}}
            </tr>
            {{end}}
          </tbody>
        </table>
        <h2>Disponibilidade na última semana</h2>
        {{ range $line := .Lines }}
        <p><span style="color: #{{ $line.Color }};">{{ $line.Name }}</span>: {{ $line.Availability }}{{ if ne $line.Availability "100.000%" }}<small>, as perturbações duraram em média {{ $line.AvgDuration }} minutos.{{end}}</small></p>
        {{end}}
        <p style="color: #777;"><small>A disponibilidade corresponde ao tempo em que uma linha funciona sem perturbações, como percentagem do tempo de exploração (horas a que o Metro está aberto ao público).</small></p>
        <h2><em>Perturbações</em> por hora do dia, na última semana</h2>
        <table class="pure-table tinycells" style="width: 100%; text-align: center;">
          <thead>
            <tr>
              <th>Linha</th>
              <th class="tinyhead"><span class="sixStyle" data-content="6">6</span></th>
              <th class="tinyhead">7</th>
              <th class="tinyhead">8</th>
              <th class="tinyhead">9</th>
              <th class="tinyhead">10</th>
              <th class="tinyhead">11</th>
              <th class="tinyhead">12</th>
              <th class="tinyhead">13</th>
              <th class="tinyhead">14</th>
              <th class="tinyhead">15</th>
              <th class="tinyhead">16</th>
              <th class="tinyhead">17</th>
              <th class="tinyhead">18</th>
              <th class="tinyhead">19</th>
              <th class="tinyhead">20</th>
              <th class="tinyhead">21</th>
              <th class="tinyhead">22</th>
              <th class="tinyhead">23</th>
              <th class="tinyhead">0</th>
            </tr>
          </thead>

          <tbody>
            {{ range $line := .Lines }}
            <tr>
              <td class="line" style="background-color: #{{ $line.Color }};">{{ $line.Name }}</td>
              {{ range $count := $line.HourCounts }}
                {{ if eq $count 0 }}
                  <td class="status ok">0<br><i class="fa fa-check" aria-hidden="true"></i></td>
                {{ else }}
                  <td class="status problem">{{ $count }}<br><i class="fa fa-times" aria-hidden="true"></i></td>
                {{ end }}
              {{end}}
            </tr>
            {{end}}
          </tbody>
        </table>
        <p style="color: #777;"><small>As perturbações são contabilizadas em cada hora que afectem.</small></p>
        <h1>Últimas <em>perturbações</em> por linha</h1>
        {{ range $line := .Lines }}
        <h3 style="color: #{{ $line.Color }};">{{ $line.Name }}</h3>
        <div style="padding-left: 40px;">
          {{ range $index, $s := $line.LastDisturbance.Statuses }}
            {{if (eq $index 0) }}
            <p>{{ formatDisturbanceTime $s.Time }} <span style="color: #777;">- {{ $s.Status }}</span>
            {{if not $s.IsDowntime}}<i style="color: limegreen;" class="fa fa-check" aria-hidden="true"></i>{{end}}</p>
            {{else}}
              {{if (ne (index $line.LastDisturbance.Statuses (minus $index 1)).Status $s.Status)}}
              <p>{{ formatDisturbanceTime $s.Time }} <span style="color: #777;">- {{ $s.Status }}</span>
              {{if not $s.IsDowntime}}<i style="color: limegreen;" class="fa fa-check" aria-hidden="true"></i>{{end}}</p>
              {{end}}
            {{end}}
          {{end}}
          {{ if not $line.LastDisturbance.Ended }}
            <p><em>Por resolver</em> <i style="color: red;" class="fa fa-times" aria-hidden="true"></p>
          {{end}}
        </div>
        {{end}}
        <p style="margin-top: 50px;">Serão disponibilizados mais dados, para intervalos de tempo maiores, à medida que estes sejam recolhidos.</p>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-2">
        <p>
            Este <em>website</em> não tem qualquer ligação à <em>Metropolitano de Lisboa, E.P.E.</em><br>
            Não podemos garantir a correcção da informação fornecida.<br>
            Só as autoridades competentes poderão fornecer dados oficiais.
        </p>
      </div>
      <div class="pure-u-4-5 pure-u-md-1-2" style="padding-right: 5px; box-sizing: border-box;">
        <p style="text-align: right;">Código no <a href="https://github.com/gbl08ma/disturbancesmlx">GitHub</a> | <a href="https://gbl08ma.github.io/contact/">Contactos</a></p>

        <p style="text-align: right;">
            Copyright © 2017 <a href="http://segvault.tny.im" target="_blank"><img src="/static/img/segvault-16.png" alt="Segvault"></a> / <a href="https://gbl08ma.github.io" target="_blank">gbl08ma</a>
        </p>
      </div>
      <div class="pure-u-1-5 hideOnLarge">
        <div class="addthis_inline_share_toolbox" style="float: right;"></div>
      </div>
    </div>
  </div>
  <script>
    function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    }

    window.onload = function() {
      var dayCounter = new flipCounter('dayCounter', {value: getRandomInt(90, 100), inc: 1, pace: 1000, auto: false, places: 2});
      var hourCounter = new flipCounter('hourCounter', {value: getRandomInt(900, 1000), inc: 1, pace: 1000, auto: false, places: 3});
      animate(dayCounter, {{ .Days }});
      animate(hourCounter, {{ .Hours }});
    };

    function animate(counter, target) {
        if(counter.getValue() > target) {
          counter.subtract(
            Math.min(
              counter.getValue() - target,
              Math.max(~~((counter.getValue() - target) / 2), 1)
            ));
          window.setTimeout(function () { animate(counter, target); }, 250);
        }
    };

    function switchToHours() {
      document.getElementById("days").style.display = 'none';
      document.getElementById("hours").style.display = 'block';
    }
    function switchToDays() {
      document.getElementById("hours").style.display = 'none';
      document.getElementById("days").style.display = 'block';
    }
  </script>
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4db86d9c0ef1e792"></script> 
</body>
</html>

{'fraction_non_alphanumeric': 0.18680235219549984, 'fraction_numerical': 0.026198105567097434, 'mean_word_length': 2.216672329822177, 'pattern_counts': {'":': 0, '<': 573, '<?xml version=': 0, '>': 581, 'https://': 18, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1624518', 'n_tokens_mistral': 10287, 'n_tokens_neox': 9407, 'n_words': 1999}