<commit_before><!DOCTYPE html>
<html lang="en">

<head>
    <title>Graphic : NPR</title>

    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://media.npr.org/favicon.ico" />

    <!-- Fonts -->
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script>
    <script>
        WebFont.load({
             custom: {
                 families: [
                     'Gotham SSm:n4,n7',
                     'Gotham:n4,n7'
                 ],
                 urls: [
                     'http://s.npr.org/templates/css/fonts/GothamSSm.css',
                     'http://s.npr.org/templates/css/fonts/Gotham.css'
                 ]
             },
             timeout: 10000
         });
    </script>
    
    <style type="text/css">
        /* base styles */
        html { -webkit-text-size-adjust: none; }
        body {
            margin: 0;
            padding: 0;
            font: 14px/1.4 Arial, Helvetica, sans-serif;
            color: #555;
        }
        .footer p {
            margin: 2px 0 0 0;
            font-size: 11px;
            line-height: 1.3;
            color: #808080;
        }
        a, a:link, a:visited {
            color: #4774CC;
            text-decoration: none;
        }
        a:hover, a:active { opacity: 0.7; }
        
        #graphic {
            font-family: 'Gotham SSm', Helvetica, Arial, sans-serif;
        }
        
        h3 {
            margin: 0 0 2px 0;
            clear: both;
            font-size: 18px;
            color: #121212;
            background-color: #ebebeb;
            padding: 22px 11px;
        }
        h3 span {
            font-weight: normal;
            color: #999;
        }
        
        h4 {
            font-size: 14px;
            margin: 0 0 11px 0;
            padding: 0 11px;
            color: #121212;
        }
        
        img { 
            display: block;
            float: right;
            width: 33%;
            height: auto;
        }
        .quote {
            float: left;
            width: 66%;
        }
        
        blockquote {
            font-size: 18px;
            line-height: 1.6;
            margin: 0 11px;
            color: #999;
            text-indent: -.5em;
        }
        
        section {
            margin: 0 0 22px 0;
        }
        
        .intro {
            margin-bottom: 22px;
            background-color: #f7f7f7;
            padding: 22px 22px 22px 11px;
        }
        
        ul {
            margin: 0 0 22px 0;
            padding: 0 11px;
            list-style-type: none;
        }
        li {
            margin: 0 0 11px 0;
            padding: 0;
            line-height: 1.6;
        }
        li strong {
            color: #121212;
        }
        
        
        section:before,
        section:after,
        .intro:before,
        .intro:after {
            content: " ";
            display: table;
        }
        section:after,
        .intro:after {
            clear: both;
        }

        @media screen and (max-width: 480px) {
            h3 { 
                font-size: 14px;
                padding: 11px;
            }
            h4 { font-size: 12px; }
            blockquote { font-size: 16px; }
            /*
            blockquote:before { 
                font-size: 48px;
                line-height: 32px;
                margin-left: -30px;
            }
            */
            li { font-size: 12px; }
            .intro { padding: 16px 11px; }
        }
    </style>

</head>
<body>
    <div id="graphic">
        {% for row in COPY.data %}
        <section>
            <h3>{{ row.name }}{% if row.location != 'None' %}<span>, {{ row.location }}</span>{% endif %}</h3>

            <div class="intro">
                <img src="{{ row.photo }}" alt="Photo of {{ row.name }}" />
                <div class="quote">
                    {% if row.pullquote != 'None' %}<blockquote>&ldquo;{{ row.pullquote }}&rdquo;</blockquote>{% endif %}
                </div>
            </div>

            <ul>
                {% if row.crime != 'None' %}<li><strong>{{ COPY.labels.hdr_crime}}:</strong> {{ row.crime }}</li>{% endif %}
                {% if row.punishment != 'None' %}<li><strong>{{ COPY.labels.hdr_punishment}}:</strong> {{ row.punishment }}</li>{% endif %}
                {% if row.description != 'None' %}<li><strong>{{ COPY.labels.hdr_description}}:</strong> {{ row.description }}</li>{% endif %}
                {% if row.fines != 'None' %}<li><strong>{{ COPY.labels.hdr_fines}}:</strong> {{ row.fines }}</li>{% endif %}
            </ul>

            {% if row.audio_prompt != 'None' %}
            <h4>{{ row.audio_prompt }}</h4>
            <p>[player]</p>
            {% endif %}
        </section>
        {% endfor %}
    </div>
    
    <div class="footer">
        <p>Photos: {{ COPY.labels.photo_credit }}</p>
        <p>Credit: {{ COPY.labels.credit }}</p>
    </div>

    <script src="js/lib/jquery.js" type="text/javascript"></script>
    <script src="js/lib/pym.js" type="text/javascript"></script>
    <script src="js/graphic.js" type="text/javascript"></script>
</body>
</html><commit_msg>style play buttons for audio-fees-profiles<commit_after><!DOCTYPE html>
<html lang="en">

<head>
    <title>Graphic : NPR</title>

    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://media.npr.org/favicon.ico" />

    <!-- Fonts -->
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script>
    <script>
        WebFont.load({
             custom: {
                 families: [
                     'Gotham SSm:n4,n7',
                     'Gotham:n4,n7'
                 ],
                 urls: [
                     'http://s.npr.org/templates/css/fonts/GothamSSm.css',
                     'http://s.npr.org/templates/css/fonts/Gotham.css'
                 ]
             },
             timeout: 10000
         });
    </script>
    
    <style type="text/css">
        /* base styles */
        html { -webkit-text-size-adjust: none; }
        body {
            margin: 0;
            padding: 0;
            font: 14px/1.4 Arial, Helvetica, sans-serif;
            color: #555;
        }
        .footer p {
            margin: 2px 0 0 0;
            font-size: 11px;
            line-height: 1.3;
            color: #808080;
        }
        a, a:link, a:visited {
            color: #4774CC;
            text-decoration: none;
        }
        a:hover, a:active { opacity: 0.7; }
        
        #graphic {
            font-family: 'Gotham SSm', Helvetica, Arial, sans-serif;
        }
        
        h3 {
            margin: 0 0 2px 0;
            clear: both;
            font-size: 18px;
            color: #121212;
            background-color: #ebebeb;
            padding: 22px 11px;
        }
        h3 span {
            font-weight: normal;
            color: #999;
        }
        
        h4 {
            font-size: 14px;
            margin: 0 0 11px 0;
            padding: 0 11px;
            color: #121212;
        }
        
        img { 
            display: block;
            float: right;
            width: 33%;
            height: auto;
        }
        .quote {
            float: left;
            width: 66%;
        }
        
        blockquote {
            font-size: 18px;
            line-height: 1.6;
            margin: 0 11px;
            color: #999;
            text-indent: -.5em;
        }
        
        section {
            margin: 0 0 22px 0;
        }
        
        .intro {
            margin-bottom: 22px;
            background-color: #f7f7f7;
            padding: 22px 22px 22px 11px;
        }
        
        ul {
            margin: 0 0 22px 0;
            padding: 0 11px;
            list-style-type: none;
        }
        li {
            margin: 0 0 11px 0;
            padding: 0;
            line-height: 1.6;
        }
        li strong {
            color: #121212;
        }
        
        section:before,
        section:after,
        .intro:before,
        .intro:after {
            content: " ";
            display: table;
        }
        section:after,
        .intro:after {
            clear: both;
        }
        
        .player-wrapper {
            line-height: 44px;
            margin: 0 11px;
            padding: 0;
            background-color: #e0e0e0;
            color: #666;
        }
        .player-wrapper:before,
        .player-wrapper:after {
            content: " ";
            display: table;
        }
        .player-wrapper:after { clear: both; }

        .player {
            width: 44px;
            height: 44px;
            overflow: hidden;
            float: left;
            margin-right: 11px;
            text-indent: -9999px;
        }
        .player .jp-play {
            width: 44px;
            height: 44px;
            background-image: url('data:image/png;base64,iVBORw0KG<KEY>YMWIABCzBgwAIMuBr9jwADAMUFGQj6uqMJAAAAAElFTkSuQmCC');
            background-position: 0 0;
            text-indent: -9999px;
            display: block;
            overflow: hidden;
        }
        .player .jp-pause {
            width: 44px;
            height: 44px;
            background-image: url('data:image/png;base64,iVBORw0KG<KEY>FTkSuQmCC');
            background-position: 0 -456px;
            text-indent: -9999px;
            display: block;
            overflow: hidden;
        }
        .player .jp-play:hover {
            cursor: pointer;
            background-position: 0 -54px;
        }
        .player .jp-pause:hover {
            cursor: pointer;
            background-position: 0 -510px;
        }

        .label {
            float: left;
            font-weight: bold;
            font-size: 12px;
        }


        @media screen and (max-width: 480px) {
            h3 { 
                font-size: 14px;
                padding: 11px;
            }
            h4 { font-size: 12px; }
            blockquote { font-size: 16px; }
            /*
            blockquote:before { 
                font-size: 48px;
                line-height: 32px;
                margin-left: -30px;
            }
            */
            li { font-size: 12px; }
            .intro { padding: 16px 11px; }
        }
    </style>

</head>
<body>
    <div id="graphic">
        {% for row in COPY.data %}
        <section>
            <h3>{{ row.name }}{% if row.location != 'None' %}<span>, {{ row.location }}</span>{% endif %}</h3>

            <div class="intro">
                <img src="{{ row.photo }}" alt="Photo of {{ row.name }}" />
                <div class="quote">
                    {% if row.pullquote != 'None' %}<blockquote>&ldquo;{{ row.pullquote }}&rdquo;</blockquote>{% endif %}
                </div>
            </div>

            <ul>
                {% if row.crime != 'None' %}<li><strong>{{ COPY.labels.hdr_crime}}:</strong> {{ row.crime }}</li>{% endif %}
                {% if row.punishment != 'None' %}<li><strong>{{ COPY.labels.hdr_punishment}}:</strong> {{ row.punishment }}</li>{% endif %}
                {% if row.description != 'None' %}<li><strong>{{ COPY.labels.hdr_description}}:</strong> {{ row.description }}</li>{% endif %}
                {% if row.fines != 'None' %}<li><strong>{{ COPY.labels.hdr_fines}}:</strong> {{ row.fines }}</li>{% endif %}
            </ul>

            {% if row.audio_prompt != 'None' %}
            <div class="player-wrapper">
                <div id="player_{{ loop.index }}" class="jp-jplayer"></div>
                <div id="jp_container_{{ loop.index }}" class="jp-audio player">
                    <div class="jp-type-single">
                        <div class="jp-gui jp-interface">
                            <div class="jp-controls">
                                <a href="javascript:;" class="jp-play" tabindex="1">play</a>
                                <a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="label">{{ row.audio_prompt }}</div>
            </div>
            {% endif %}
        </section>
        {% endfor %}
    </div>
    
    <div class="footer">
        <p>Photos: {{ COPY.labels.photo_credit }}</p>
        <p>Credit: {{ COPY.labels.credit }}</p>
    </div>

    <script src="js/lib/jquery.js" type="text/javascript"></script>
    <script src="js/lib/pym.js" type="text/javascript"></script>
    <script src="js/graphic.js" type="text/javascript"></script>
</body>
</html>
{'fraction_non_alphanumeric': 0.1468823574086732, 'fraction_numerical': 0.03015113541429331, 'mean_word_length': 1.2288422477995937, 'pattern_counts': {'":': 0, '<': 159, '<?xml version=': 0, '>': 159, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4328055', 'n_tokens_mistral': 4465, 'n_tokens_neox': 3961, 'n_words': 806}