<commit_before><!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Example 37 - <NAME></title>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
    <!--  Mobile viewport scale | Disable user zooming as the layout is optimised -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
      /* Global Styles, not needed */
      ::selection,body{color:#fff;background:#2ecc71}body,h1,h2,h3,h4,h5{font-weight:300}a,body{color:#fff}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}::selection{text-shadow:none}html{font-size:16px}body{font-size:1rem;font-family:'Open Sans',sans-serif;overflow-y:scroll}nav{margin-bottom:20px}nav li{padding:10px 20px;background:#27ae60}nav li:hover{background:#1d7f41}#nav2{width:400px}#nav3{width:650px}
       /* END Global Styles, not needed */
    </style>

    <style>
    .container {
      width: 100%;
      height: 500px;
      position: relative;
    }

    .container .other-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 2;
      padding: 30px;
      font-size: 50px;
      color: white;
    }

    .container .slide {
      z-index: 1;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      transition: opacity 1s ease-in-out;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
    }

    .container .slide.show {
      opacity: 1;
    }
    </style>
</head>
<body>

    <div class="container">
    	<div class="other-content">We could have anything here</div>

    	<div class="slide show" style="background-image: url('images/image-1.jpeg');"></div>
    	<div class="slide" style="background-image: url('images/image-2.jpeg');"></div>
    	<div class="slide" style="background-image: url('images/image-3.jpeg');"></div>
    </div>

    <script>
      /**
       * @param  {number} interval (in milliseconds)
       */
      function cycleBackgrounds(interval) {
        let index = 0

        const $imageEls = document.querySelectorAll('.container .slide') // Get the images to be cycled.

        setInterval(() => {
          // Get the next index.  If at end, restart to the beginning.
          index = index + 1 < $imageEls.length ? index + 1 : 0

          // Show the next
          $imageEls[index].classList.add('show')

        // Find the previous.
        const previous = index - 1 < 0 ? $imageEls.length - 1 : index - 1;

          // Hide the previous
          $imageEls[previous].classList.remove('show')
        }, interval)
      }

      document.addEventListener("DOMContentLoaded", function() {
        cycleBackgrounds(2000);
      });
    </script>

    <div class="back-to-article">
      <p>
          <a href="https://php.quicoto.com/easy-background-image-slideshow/">Back to the Article</a> | <a href="https://github.com/quicoto/ricks-code-examples/tree/master/37">Fork me on Github</a>
      </p>
    </div>

</body>
</html>
<commit_msg>Update index.html<commit_after><!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Example 37 - <NAME></title>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
    <!--  Mobile viewport scale | Disable user zooming as the layout is optimised -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="preload" href="images/image-1.jpeg" as="image">
    <link rel="preload" href="images/image-2.jpeg" as="image">
    <link rel="preload" href="images/image-3.jpeg" as="image">

    <style>
      /* Global Styles, not needed */
      ::selection,body{color:#fff;background:#2ecc71}body,h1,h2,h3,h4,h5{font-weight:300}a,body{color:#fff}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}::selection{text-shadow:none}html{font-size:16px}body{font-size:1rem;font-family:'Open Sans',sans-serif;overflow-y:scroll}nav{margin-bottom:20px}nav li{padding:10px 20px;background:#27ae60}nav li:hover{background:#1d7f41}#nav2{width:400px}#nav3{width:650px}
       /* END Global Styles, not needed */
    </style>

    <style>
    .container {
      width: 100%;
      height: 500px;
      position: relative;
    }

    .container .other-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 2;
      padding: 30px;
      font-size: 50px;
      color: white;
    }

    .container .slide {
      z-index: 1;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      transition: opacity 1s ease-in-out;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
    }

    .container .slide.show {
      opacity: 1;
    }
    </style>
</head>
<body>

    <div class="container">
    	<div class="other-content">We could have anything here</div>

    	<div class="slide show" style="background-image: url('images/image-1.jpeg');"></div>
    	<div class="slide" style="background-image: url('images/image-2.jpeg');"></div>
    	<div class="slide" style="background-image: url('images/image-3.jpeg');"></div>
    </div>

    <script>
      /**
       * @param  {number} interval (in milliseconds)
       */
      function cycleBackgrounds(interval) {
        let index = 0

        const $imageEls = document.querySelectorAll('.container .slide') // Get the images to be cycled.

        setInterval(() => {
          // Get the next index.  If at end, restart to the beginning.
          index = index + 1 < $imageEls.length ? index + 1 : 0

          // Show the next
          $imageEls[index].classList.add('show')

        // Find the previous.
        const previous = index - 1 < 0 ? $imageEls.length - 1 : index - 1;

          // Hide the previous
          $imageEls[previous].classList.remove('show')
        }, interval)
      }

      document.addEventListener("DOMContentLoaded", function() {
        cycleBackgrounds(2000);
      });
    </script>

    <div class="back-to-article">
      <p>
          <a href="https://php.quicoto.com/easy-background-image-slideshow/">Back to the Article</a> | <a href="https://github.com/quicoto/ricks-code-examples/tree/master/37">Fork me on Github</a>
      </p>
    </div>

</body>
</html>

{'fraction_non_alphanumeric': 0.16251500600240096, 'fraction_numerical': 0.029861944777911164, 'mean_word_length': 2.7213847012841987, 'pattern_counts': {'":': 0, '<': 86, '<?xml version=': 0, '>': 84, 'https://': 4, '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': '4349620', 'n_tokens_mistral': 2371, 'n_tokens_neox': 2168, 'n_words': 439}