<commit_before><html lang="en">

<head>
    <meta charset="UTF-8">
    <title> <NAME> - (Videos) </title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        body {
            background: #f4f4f4;
        }

        #container {
            max-width: 960px;
            margin: 0 auto;
            font-family: arial;
        }

        ul {
            display: flex;
            flex-flow: row wrap;
            padding: 0;
            align-content: space-between;
        }

        li {
            width: 31%;
            margin-right: 2%;
            list-style: none;
            margin-bottom: 30px;
            background: white;
            border-radius: 3px;
            padding: 10px;
        }

        p {
            font-size: 15px;
            min-height: 40px;
        }

        a {
            color: #2793da;
            text-decoration: none;
        }

        a:hover {
            color: #333;
            text-decoration: underline;
        }

        .thumbnail {
            border: 1px solid #fcfcfc;
            padding: 2px;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <h1>Videos</h1>
        <gallery></gallery>

        <template id="videos-template">
            <ul>
                <li v-for="video in videos">
                    <p>
                        <a href="http://www.youtube.com/watch?v={{video.snippet.resourceId.videoId}}">{{ video.snippet.title }} </a>
                    </p>
                    <a href="http://www.youtube.com/watch?v={{video.snippet.resourceId.videoId}}">
                        <img src="{{video.snippet.thumbnails.medium.url}}" alt="{{video.snippet.title}}" title="{{video.snippet.title}}"
                            class="thumbnail" />
                    </a>
                </li>
            </ul>
        </template>
    </div>
    <!-- #container -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
    <script>
        Vue.component('gallery', {
            template: '#videos-template',
            data: function () {
                return {
                    videos: []
                };
            },
            created: function () {
                this.fetchVideoList();
            },
            methods: {
                fetchVideoList: function () {
                    this.$http.get('https://www.googleapis.com/youtube/v3/playlistItems?playlistId=PLaeVO-DauJ8-4V2arNfPn69losFh9H5qi&key=AIzaSyD4O-DOa1TihOEo4USsJy7faBdqXIN0UGY&fields=items&part=snippet&maxResults=15&order=date', function (videosList) {
                        this.videos = videosList.items;
                        console.log(videosList.items);
                    });
                }
            }
        });

        new Vue({
            el: 'body'
        });
    </script>
</body>

</html><commit_msg>Change color<commit_after><html lang="en">

<head>
    <meta charset="UTF-8">
    <title> <NAME> - (Videos) </title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        body {
            background: #232323;
        }

        #container {
            max-width: 960px;
            margin: 0 auto;
            font-family: arial;
        }

        ul {
            display: flex;
            flex-flow: row wrap;
            padding: 0;
            align-content: space-between;
        }

        li {
            width: 31%;
            margin-right: 2%;
            list-style: none;
            margin-bottom: 30px;
            background: #2d2c2c;
            border-radius: 3px;
            padding: 10px;
        }

        p {
            font-size: 15px;
            min-height: 40px;
        }

        a {
            color: #2793da;
            text-decoration: none;
        }

        a:hover {
            color: #333;
            text-decoration: underline;
        }

        .thumbnail {
            border: 1px solid #fcfcfc;
            padding: 2px;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <h1>Videos</h1>
        <gallery></gallery>

        <template id="videos-template">
            <ul>
                <li v-for="video in videos">
                    <p>
                        <a href="http://www.youtube.com/watch?v={{video.snippet.resourceId.videoId}}">{{ video.snippet.title }} </a>
                    </p>
                    <a href="http://www.youtube.com/watch?v={{video.snippet.resourceId.videoId}}">
                        <img src="{{video.snippet.thumbnails.medium.url}}" alt="{{video.snippet.title}}" title="{{video.snippet.title}}"
                            class="thumbnail" />
                    </a>
                </li>
            </ul>
        </template>
    </div>
    <!-- #container -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
    <script>
        Vue.component('gallery', {
            template: '#videos-template',
            data: function () {
                return {
                    videos: []
                };
            },
            created: function () {
                this.fetchVideoList();
            },
            methods: {
                fetchVideoList: function () {
                    this.$http.get('https://www.googleapis.com/youtube/v3/playlistItems?playlistId=PLaeVO-DauJ8-4V2arNfPn69losFh9H5qi&key=AIzaSyD4O-DOa1TihOEo4USsJy7faBdqXIN0UGY&fields=items&part=snippet&maxResults=15&order=date', function (videosList) {
                        this.videos = videosList.items;
                        console.log(videosList.items);
                    });
                }
            }
        });

        new Vue({
            el: 'body'
        });
    </script>
</body>

</html>
{'fraction_non_alphanumeric': 0.14126333059885152, 'fraction_numerical': 0.019688269073010665, 'mean_word_length': 1.224817518248175, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 79, 'https://': 6, 'lorem ipsum': 0, 'www.': 6, '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': '3345163', 'n_tokens_mistral': 1955, 'n_tokens_neox': 1798, 'n_words': 278}