<commit_before><!DOCTYPE html>
<html>
    <head>
        <title>notion</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>
        <script>
        var items = {selected: {1: [], 2: [], 3: [], 4: []}, main: {}, all:{}};
        $(function() {
            var detailsTemplate = Hogan.compile($('#details-template:first').html());
            var itemTemplate = Hogan.compile($('#item-template:first').html());

            var $details = $('#details');
            var $selected = $('#selected');
            var $items = $('#items');
            $('body').on('click', 'a#details-close', function() {
                $details.hide();
            });
            $('#show-all').click(function() {
                $items.show();
                $selected.hide();
            });
            $('#show-selected').click(function() {
                $items.hide();
                $selected.show();
                $selected.html('');
                $.each(items.selected, function(index, colorItems) {
                    if (colorItems.length === 0 && !items.main[index]) {
                        return;
                    }
                    var $colorContainer = $('<div class="collection"></div>');
                    $colorContainer.addClass('collection');
                    $colorContainer.addClass('color' + index);
                    if (items.main[index]) {
                        var $item = $(itemTemplate.render(items.main[index]));
                        $item.find('.colors').remove();
                        $colorContainer.append($item);
                    }
                    $.each(colorItems, function(index, item) {
                        var $item = $(itemTemplate.render(item));
                        $item.find('.colors').remove();
                        $colorContainer.append($item);
                    });
                    $selected.append($colorContainer);
                });
            });

            $.get('db.csv', function(data) {
                var rows = data.trim().split('\n');
                $.each(rows, function(i, _row) {
                    var id = i + 1;
                    var row = _row.split(',');
                    var namesString = row[0].split('/');
                    var names = [];
                    for (var j = 0; j < namesString.length; j++) {
                        names.push({name: namesString[j][0].toUpperCase() + namesString[j].substr(1)});
                    }
                    var item = {
                        id: id,
                        names: names,
                        url: row[1] ? 'images/' + row[1] : '',
                        author: row[2],
                        author_url: row[3],
                    };
                    items.all[id] = item;
                    var $item = $(itemTemplate.render(item));
                    $item.data(item);
                    $item.find('a.image').click(function() {
                        $details.show();
                        $details.html(detailsTemplate.render(item));
                    });
                    $item.find('a.selectColor').click(function(ev) {
                        var $target = $(ev.currentTarget);
                        var color = parseInt($target.data('color'));
                        if (items.selected[color].indexOf(item) !== -1) {
                            items.selected[color].splice(items.selected[color].indexOf(item), 1);
                            $target.removeClass('selected');
                            return;
                        }
                        if (items.main[color] == item) {
                            delete items.main[color];
                            $target.removeClass('main');
                            return;
                        }
                        if (!items.main[color]) {
                            items.main[color] = item;
                            $target.addClass('main');
                            return;
                        }
                        items.selected[color].push(item);
                        $target.addClass('selected');
                    });
                    $items.append($item)
                });
            });
        });
        </script>
        <style>
        @import url("https://necolas.github.io/normalize.css/3.0.2/normalize.css");
        .template { display: none; }
        .item { margin: 10px 0 0 10px; border: 1px solid #000; width: 200px; text-align: left; padding: 10px; float: left; height: 174px; }
        .item .names { float: left; }
        .item .names p { margin: 0; padding: 0; }
        .item .colors { float: right; }
        .item img { clear: both; max-width: 100px; max-height: 100px; display: block; margin: 10px auto; }
        .selectColor { display: block; width: 10px; height: 10px; float: left; margin: 2px; border: 2px solid white; border-radius: 100%; }
        .selectColor.color1.selected.main, .selectColor.color1 { border-color: blue; }
        .selectColor.color1.main, .selectColor.color1.selected { background: blue; }
        .selectColor.color2.selected.main, .selectColor.color2 { border-color: red; }
        .selectColor.color2.main, .selectColor.color2.selected { background: red; }
        .selectColor.color3.selected.main, .selectColor.color3 { border-color: green; clear: left; }
        .selectColor.color3.main, .selectColor.color3.selected { background: green; }
        .selectColor.color4.selected.main, .selectColor.color4 { border-color: orange; }
        .selectColor.color4.main, .selectColor.color4.selected { background: orange; }
        .selectColor.selected {border-color: white; }
        #details { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; background: rgba(255, 255, 255, 0.98); }
        #details #details-container p { text-align: center; line-height: 0%; margin-bottom: 20px; }
        #details #details-container { width: 300px; margin: 20px auto; position: relative; padding-top: 20px; }
        #details #details-container img { margin: 20px auto; display: block; }
        #details #details-container #details-close { display: block; position: absolute; right: 0; top: 10px; text-decoration: none; color: black; border: 1px solid black; border-radius: 20%; padding: 2px 6px; }
        .collection { clear: both; }
        .collection.color1 .item { color: blue; }
        .collection.color2 .item { color: red; }
        .collection.color3 .item { color: green; }
        .collection.color4 .item { color: orange; }
        #stuff { padding: 12px; }
        </style>
    </head>
    <body>
        <div id="stuff">
            <a href="javascript:void(null);" id="show-selected">Show selected</a>
            <a href="javascript:void(null);" id="show-all">Show all</a>
        </div><commit_msg>Add explanation<commit_after><!DOCTYPE html>
<html>
    <head>
        <title>notion</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>
        <script>
        var items = {selected: {1: [], 2: [], 3: [], 4: []}, main: {}, all:{}};
        $(function() {
            var detailsTemplate = Hogan.compile($('#details-template:first').html());
            var itemTemplate = Hogan.compile($('#item-template:first').html());

            var $details = $('#details');
            var $selected = $('#selected');
            var $items = $('#items');
            $('body').on('click', 'a#details-close', function() {
                $details.hide();
            });
            $('#show-all').click(function() {
                $items.show();
                $selected.hide();
            });
            $('#show-selected').click(function() {
                $items.hide();
                $selected.show();
                $selected.html('');
                $.each(items.selected, function(index, colorItems) {
                    if (colorItems.length === 0 && !items.main[index]) {
                        return;
                    }
                    var $colorContainer = $('<div class="collection"></div>');
                    $colorContainer.addClass('collection');
                    $colorContainer.addClass('color' + index);
                    if (items.main[index]) {
                        var $item = $(itemTemplate.render(items.main[index]));
                        $item.find('.colors').remove();
                        $colorContainer.append($item);
                    }
                    $.each(colorItems, function(index, item) {
                        var $item = $(itemTemplate.render(item));
                        $item.find('.colors').remove();
                        $colorContainer.append($item);
                    });
                    $selected.append($colorContainer);
                });
            });

            $.get('db.csv', function(data) {
                var rows = data.trim().split('\n');
                $.each(rows, function(i, _row) {
                    var id = i + 1;
                    var row = _row.split(',');
                    var namesString = row[0].split('/');
                    var names = [];
                    for (var j = 0; j < namesString.length; j++) {
                        names.push({name: namesString[j][0].toUpperCase() + namesString[j].substr(1)});
                    }
                    var item = {
                        id: id,
                        names: names,
                        url: row[1] ? 'images/' + row[1] : '',
                        author: row[2],
                        author_url: row[3],
                    };
                    items.all[id] = item;
                    var $item = $(itemTemplate.render(item));
                    $item.data(item);
                    $item.find('a.image').click(function() {
                        $details.show();
                        $details.html(detailsTemplate.render(item));
                    });
                    $item.find('a.selectColor').click(function(ev) {
                        var $target = $(ev.currentTarget);
                        var color = parseInt($target.data('color'));
                        if (items.selected[color].indexOf(item) !== -1) {
                            items.selected[color].splice(items.selected[color].indexOf(item), 1);
                            $target.removeClass('selected');
                            return;
                        }
                        if (items.main[color] == item) {
                            delete items.main[color];
                            $target.removeClass('main');
                            return;
                        }
                        if (!items.main[color]) {
                            items.main[color] = item;
                            $target.addClass('main');
                            return;
                        }
                        items.selected[color].push(item);
                        $target.addClass('selected');
                    });
                    $items.append($item)
                });
            });
        });
        </script>
        <style>
        @import url("https://necolas.github.io/normalize.css/3.0.2/normalize.css");
        .template { display: none; }
        .item { margin: 10px 0 0 10px; border: 1px solid #000; width: 200px; text-align: left; padding: 10px; float: left; height: 174px; }
        .item .names { float: left; }
        .item .names p { margin: 0; padding: 0; }
        .item .colors { float: right; }
        .item img { clear: both; max-width: 100px; max-height: 100px; display: block; margin: 10px auto; }
        .selectColor { display: block; width: 10px; height: 10px; float: left; margin: 2px; border: 2px solid white; border-radius: 100%; }
        .selectColor.color1.selected.main, .selectColor.color1 { border-color: blue; }
        .selectColor.color1.main, .selectColor.color1.selected { background: blue; }
        .selectColor.color2.selected.main, .selectColor.color2 { border-color: red; }
        .selectColor.color2.main, .selectColor.color2.selected { background: red; }
        .selectColor.color3.selected.main, .selectColor.color3 { border-color: green; clear: left; }
        .selectColor.color3.main, .selectColor.color3.selected { background: green; }
        .selectColor.color4.selected.main, .selectColor.color4 { border-color: orange; }
        .selectColor.color4.main, .selectColor.color4.selected { background: orange; }
        .selectColor.selected {border-color: white; }
        #details { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; background: rgba(255, 255, 255, 0.98); }
        #details #details-container p { text-align: center; line-height: 0%; margin-bottom: 20px; }
        #details #details-container { width: 300px; margin: 20px auto; position: relative; padding-top: 20px; }
        #details #details-container img { margin: 20px auto; display: block; }
        #details #details-container #details-close { display: block; position: absolute; right: 0; top: 10px; text-decoration: none; color: black; border: 1px solid black; border-radius: 20%; padding: 2px 6px; }
        .collection { clear: both; }
        .collection.color1 .item { color: blue; }
        .collection.color2 .item { color: red; }
        .collection.color3 .item { color: green; }
        .collection.color4 .item { color: orange; }
        #stuff { padding: 12px; }
        </style>
    </head>
    <body>
        <div id="stuff">
            El objetivo del juego es representar un concepto con una serie de
            iconos.<br />
            Por ejemplo, para que adivinar "leche" se puede elegir como idea
            principal l&iacute;quido, y soportarlo con "comestible" y "blanco".
            Para un concepto m&aacute;s complicado como "<NAME>",
            se puede usar un concepto principal y sub-conceptos tal como
            pel&iacute;culas en las que actu&oacute; como Titanic e Inception.<br />
            La primer imagen de cada categoría indica el concepto principal.
            <a href="javascript:void(null);" id="show-selected">Show selected</a>
            <a href="javascript:void(null);" id="show-all">Show all</a>
        </div>
{'fraction_non_alphanumeric': 0.14774924054128694, 'fraction_numerical': 0.016984258492129246, 'mean_word_length': 1.5160673962133056, 'pattern_counts': {'":': 0, '<': 54, '<?xml version=': 0, '>': 52, 'https://': 6, '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': '5230069', 'n_tokens_mistral': 4057, 'n_tokens_neox': 3756, 'n_words': 818}