<commit_before><!DOCTYPE html>
<html>
<head>
    <title>Musitop</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <style>

        body {
            font-family: sans-serif;
            text-align: center;
            background-color: lightskyblue;
            color: darkslategray;
            background-image: url('pattern.svg');
            display: flex;
            justify-content: center;
            overflow: hidden;
        }

        body.under-cover {
            background-image: none;
        }

        body.under-cover .palette {
            display: none;
        }

        h1 {
            background-color: skyblue;
            color: white;
            text-shadow: 2px 2px black;
            width: 100%;
            padding: 10px 0;
            margin: 0;
            border-style: solid;
            border-width: 12px 0 6px;
        }

        .content {
            display: flex;
            flex-direction: column;
            background-color: whitesmoke;
            border-radius: 30px;
            position: relative;
            box-shadow: 2px 2px 22px;
            overflow: hidden;
            margin: 15vw;
        }

        .status, .controls {
            padding: 0 5vw;
        }

        .status {
            display: flex;
            flex-direction: column;
            margin-top: 40px;
        }

        .status strong {
            padding: 10px 0;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .controls button {
            padding: 10px;
            background: none;
            color: currentColor;
            outline: none;
            border-width: 2px;
            border-style: dashed;
            position: relative;
            display: flex;
            align-items: center;
            opacity: .6;
            transition: .4s all;
            cursor: pointer;
            animation-duration: 1s;
            animation-fill-mode: both;
            font-size: 1.2em;
            width: 30%;
            overflow: hidden;
            justify-content: center;
        }

        .controls button .text {
            margin: 0 10px;
        }

        .controls button div:last-child {
            display: none;
        }

        @media screen and (max-width: 400px) {
            .controls {
                flex-direction: column;
            }

            .controls button {
                width: 100%;
                margin-bottom: 10px;
            }

            .controls button div:last-child {
                display: inherit;
            }
        }

        .controls button:hover {
            opacity: 1;
        }

        .controls button.clicked {
            animation-name: rubberBand;
        }

        button[data-music-is="good"] {
            color: darkgreen;
        }

        button[data-music-is="good"]:hover .icon-heart {
            animation-name: bounceIn;
        }

        button[data-music-is="next"] {

        }

        button[data-music-is="next"]:hover .icon-arrow-right {
            animation-name: shake;
        }

        button[data-music-is="bad"] {
            color: darkred;<commit_msg>added some media query for buttons display :whale:<commit_after><!DOCTYPE html>
<html>
<head>
    <title>Musitop</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <style>

        body {
            font-family: sans-serif;
            text-align: center;
            background-color: lightskyblue;
            color: darkslategray;
            background-image: url('pattern.svg');
            display: flex;
            justify-content: center;
            overflow: hidden;
        }

        body.under-cover {
            background-image: none;
        }

        body.under-cover .palette {
            display: none;
        }

        h1 {
            background-color: skyblue;
            color: white;
            text-shadow: 2px 2px black;
            width: 100%;
            padding: 10px 0;
            margin: 0;
            border-style: solid;
            border-width: 12px 0 6px;
        }

        .content {
            display: flex;
            flex-direction: column;
            background-color: whitesmoke;
            border-radius: 30px;
            position: relative;
            box-shadow: 2px 2px 22px;
            overflow: hidden;
            margin: 15vw;
            width: 100%;
            max-width: 400px;
        }

        .status, .controls {
            padding: 0 5vw;
        }

        .status {
            display: flex;
            flex-direction: column;
            margin-top: 40px;
        }

        .status strong {
            padding: 10px 0;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .controls button {
            padding: 10px;
            background: none;
            color: currentColor;
            outline: none;
            border-width: 2px;
            border-style: dashed;
            position: relative;
            display: flex;
            align-items: center;
            opacity: .6;
            transition: .4s all;
            cursor: pointer;
            animation-duration: 1s;
            animation-fill-mode: both;
            font-size: 1.2em;
            width: 30%;
            overflow: hidden;
            justify-content: center;
        }

        .controls button .text {
            margin: 0 10px;
        }

        .controls button div:last-child {
            display: none;
        }

        @media screen and (max-width: 400px) {
            .controls {
                flex-direction: column;
            }

            .controls button {
                width: 100%;
                margin-bottom: 10px;
            }

            .controls button div:last-child {
                display: inherit;
            }
        }

        @media screen and (min-width: 401px) and (max-width: 500px) {
            .controls button {
                flex-direction: column;
                justify-content: space-between;
            }
            .controls button .text {
                margin: 10px 0 4px;
            }
        }

        .controls button:hover {
            opacity: 1;
        }

        .controls button.clicked {
            animation-name: rubberBand;
        }

        button[data-music-is="good"] {
            color: darkgreen;
        }

        button[data-music-is="good"]:hover .icon-heart {
            animation-name: bounceIn;
        }

        button[data-music-is="next"] {

        }

        button[data-music-is="next"]:hover .icon-arrow-right {
            animation-name: shake;
        }

        button[data-music-is="bad"] {
            color: darkred;
{'fraction_non_alphanumeric': 0.10755697720911635, 'fraction_numerical': 0.01919232307077169, 'mean_word_length': 1.2142224845087046, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '270940', 'n_tokens_mistral': 2215, 'n_tokens_neox': 2014, 'n_words': 439}