<commit_before><!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=640">
  <title>Minimalistic Youtube Looper</title>

  <script src="//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js"></script>
  <style>

    body {
      background: #333 url('zwartevilt.png'); /* image from http://subtlepatterns.com/black-felt/ (CC BY-SA) */
      display: table;
      position: absolute;
      overflow: hidden;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
    }

    body>div {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    #box {
      display: inline-block;
      text-align: left;
      background-color: #1B1B1B;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      color: #EEE;
      box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
      border: 1px solid rgba (100,100,100,0.25);
    }

    #box p {padding: 0 1em 0 1em; line-height: 2em;}
    #box a {color: #999; text-decoration:none}
    #box tt {padding: 0.25em 0.5em !important; color: #ccc; border-radius: 1em; background-color:#111; text-decoration:none; padding: 0.25em; border: 1px #333 solid}

    #menu {
      padding: 1em;
      position: absolute;
      bottom: 0;
      right: 0;
      color: #333;
      text-align:right;
      width: 100%;
      text-shadow: 0px 0px 6px #000;
      font-size: 0.8em;
    }
    /* disabled for now, perhaps we will use it when we have more functions
    #menu:hover {
      color: #888;
      background-color: #1B1B1B;
      box-shadow: 0px -5px 10px rgba(0,0,0,0.4);
      text-shadow: none;
    }
    */
    #menu a {
      display: inline-block;
      cursor: pointer;
      text-decoration: none;
    }
    #menu a:hover {
      color: #888;
    }
    #shortened {
      color: #fff !important;
    }

  </style>


</head>

<body>
<div id="menu">
  <a id="shorten" title="click to get a short URL for current playlist">short url</a>
</div>
<div><div id="box">
</div></div>

<script>
  $LAB
  .script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
  .script('//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js')
  .wait()
  .script('yt-looper.js')
  .wait(function(){
    normalizeUrl();
    renderPage();
  });
</script>

</body>
</html>
<!-- vim:set ts=2 sw=2 et: -->
<commit_msg>UX: fix 2px gap under a video in some browsers<commit_after><!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=640">
  <title>Minimalistic Youtube Looper</title>

  <script src="//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js"></script>
  <style>

    body {
      background: #333 url('zwartevilt.png'); /* image from http://subtlepatterns.com/black-felt/ (CC BY-SA) */
      display: table;
      position: absolute;
      overflow: hidden;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
    }

    body>div {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    #box {
      display: inline-block;
      text-align: left;
      background-color: #1B1B1B;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      color: #EEE;
      box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
      border: 1px solid rgba (100,100,100,0.25);
      max-height: 360px;
      max-width: 640px;
    }

    #box p {padding: 0 1em 0 1em; line-height: 2em;}
    #box a {color: #999; text-decoration:none}
    #box tt {padding: 0.25em 0.5em !important; color: #ccc; border-radius: 1em; background-color:#111; text-decoration:none; padding: 0.25em; border: 1px #333 solid}

    #menu {
      padding: 1em;
      position: absolute;
      bottom: 0;
      right: 0;
      color: #333;
      text-align:right;
      width: 100%;
      text-shadow: 0px 0px 6px #000;
      font-size: 0.8em;
    }
    /* disabled for now, perhaps we will use it when we have more functions
    #menu:hover {
      color: #888;
      background-color: #1B1B1B;
      box-shadow: 0px -5px 10px rgba(0,0,0,0.4);
      text-shadow: none;
    }
    */
    #menu a {
      display: inline-block;
      cursor: pointer;
      text-decoration: none;
    }
    #menu a:hover {
      color: #888;
    }
    #shortened {
      color: #fff !important;
    }

  </style>


</head>

<body>
<div id="menu">
  <a id="shorten" title="click to get a short URL for current playlist">short url</a>
</div>
<div><div id="box">
</div></div>

<script>
  $LAB
  .script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
  .script('//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js')
  .wait()
  .script('yt-looper.js')
  .wait(function(){
    normalizeUrl();
    renderPage();
  });
</script>

</body>
</html>
<!-- vim:set ts=2 sw=2 et: -->

{'fraction_non_alphanumeric': 0.16374388254486133, 'fraction_numerical': 0.04588091353996737, 'mean_word_length': 2.4639830508474576, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 57, 'https://': 0, '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': '2909386', 'n_tokens_mistral': 1996, 'n_tokens_neox': 1787, 'n_words': 417}