<commit_before><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Display status of Stack Exchange chat users who opt-in.">
        <meta name="author" content="<NAME>">

        <title>Stack Exchange Chat Status</title>

        <!-- Bootstrap Core CSS -->
        <link href="/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="/css/landing-page.min.css" rel="stylesheet">
        <link href="/css/particles.min.css" rel="stylesheet">

        <!-- Custom Fonts -->
    	<link href="/css/font-awesome.min.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    </head>
    <body>
	    <div id="particles-js"></div>

        <!-- Header -->
        <div class="intro-header">
        	<div class="ribbon" style="z-index:1000">
            	<p>Now in Beta!</p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="intro-message">
                            <h1>Stack Exchange Chat Status</h1>
                            <h3>Chat &mdash; the Way It Was Meant to Be</h3>
                            <hr class="intro-divider">
                            <ul class="list-inline intro-social-buttons">
                                <li>
                                    <a href="/js/chatstatus.user.js" class="btn btn-success btn-lg">
                                        <i class="fa fa-download"></i>
                                        <span class="network-name">Install</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://github.com/nathan-osman/auchatstatus" class="btn btn-default btn-lg">
                                        <i class="fa fa-github fa-fw"></i>
                                        <span class="network-name">Source</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="content-section-a" style="z-index: 500; position: relative">
        	<div class="container">
                <div class="row">
                    <div class="col-lg-12 col-sm-16">
                        <div class="clearfix"></div>
                        <h2 class="section-heading">What Is This?</h2>
                        <p class="lead">
                            Have you ever found the Stack Exchange chat platform lacking in critical features like seeing how far other users have read or "this user is typing" notifications? If so, this UserScript is for you!</p>
                        <p class="lead">
                            The script adds these features to <a href="http://chat.stackexchange.com/">Stack Exchange chat rooms</a>, and completely revitalizes your chat experience!
                        </p>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-lg-5 col-sm-6">
                        <div class="clearfix"></div>
                        <h2 class="section-heading">Requirements</h2>
                        <p class="lead">
                            Using this script is easy! All you need is one of the following extensions for your browser:
                        </p>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-chrome fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Google Chrome &amp; Chromium</h4>
                                <p>
                                    Both browsers proactively disable unrecognized scripts, so you will need to install the
                                    <a href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en">Tampermonkey extension</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-firefox fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Mozilla Firefox</h4>
                                <p>
                                    Please install the
                                    <a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/">Greasemonkey add-on</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-opera fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Opera</h4>
                                <p>
                                    Opera users can install either the
                                    <a href="https://addons.opera.com/en/extensions/details/tampermonkey-beta/">Tampermonkey Beta add-on</a>
                                    or the
                                    <a href="https://addons.opera.com/en/extensions/details/violent-monkey/">Violent monkey add-on</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-safari fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Safari</h4>
                                <p>
                                    Please install the
                                    <a href="http://tampermonkey.net/?browser=safari">Tampermonkey extension</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-internet-explorer fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Internet Explorer</h4>
                                <p>
                                    IE and Edge users need
                                    <a href="javascript:var c=document.createElement('script');c.type='text/javascript';c.src='https://sechat.quickmediasolutions.com/js/chatstatus.js';document.body.appendChild(c)">this bookmarklet</a>.
                                    Edge users need to follow the steps in
                                    <a href="http://www.howtogeek.com/231775/how-to-install-and-use-bookmarklets-in-microsoft-edge/">this</a>
                                    article.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                        <div class="clearfix"></div>
                        <h2 class="section-heading">How to Install</h2>
                        <p class="lead">Installing the actual UserScript is easy as 1-2-3:</p>
                        <ol class="lead">
                        	<li>Make sure you have a Userscript manager installed.</li>
                            <li>Click the Install button above and confirm the installation.</li>
                            <li>Reload the chat page!</li>
                        </ol>
                        <p class="lead">
                            The script will now automatically load each time you visit the chat page.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <p class="copyright text-muted small">
                            Copyright 2015 <a href="https://quickmediasolutions.com"><NAME></a>
                            &mdash; Page designed by <a href="https://github.com/KazWolfe">KazWolfe</a>.
                        </p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- jQuery -->
        <script src="/js/jquery.min.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="/js/bootstrap.min.js"></script>

        <!-- Pretty particles :3 -->
        <script src="/js/particles/particles.js"></script>
        <script src="/js/particles/app.js"></script>
    </body><commit_msg>Added interactive banner to home page.<commit_after><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Display status of Stack Exchange chat users who opt-in.">
        <meta name="author" content="<NAME>">

        <title>Stack Exchange Chat Status</title>

        <!-- Bootstrap Core CSS -->
        <link href="/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="/css/landing-page.min.css" rel="stylesheet">
        <link href="/css/particles.min.css" rel="stylesheet">

        <!-- Custom Fonts -->
    	<link href="/css/font-awesome.min.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    </head>
    <body>
	    <div id="particles-js"></div>

        <!-- Header -->
        <div class="intro-header">
        	<div class="ribbon" style="z-index:1000">
            	<p>Now in Beta!</p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="intro-message">
                            <h1>Stack Exchange Chat Status</h1>
                            <h3 id="ticker">Chat &mdash; the Way It Was Meant to Be</h3>
                            <hr class="intro-divider">
                            <ul class="list-inline intro-social-buttons">
                                <li>
                                    <a href="/js/chatstatus.user.js" class="btn btn-success btn-lg">
                                        <i class="fa fa-download"></i>
                                        <span class="network-name">Install</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://github.com/nathan-osman/auchatstatus" class="btn btn-default btn-lg">
                                        <i class="fa fa-github fa-fw"></i>
                                        <span class="network-name">Source</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="content-section-a" style="z-index: 500; position: relative">
        	<div class="container">
                <div class="row">
                    <div class="col-lg-12 col-sm-16">
                        <div class="clearfix"></div>
                        <h2 class="section-heading">What Is This?</h2>
                        <p class="lead">
                            Have you ever found the Stack Exchange chat platform lacking in critical features like seeing how far other users have read or "this user is typing" notifications? If so, this UserScript is for you!</p>
                        <p class="lead">
                            The script adds these features to <a href="http://chat.stackexchange.com/">Stack Exchange chat rooms</a>, and completely revitalizes your chat experience!
                        </p>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-lg-5 col-sm-6">
                        <div class="clearfix"></div>
                        <h2 class="section-heading">Requirements</h2>
                        <p class="lead">
                            Using this script is easy! All you need is one of the following extensions for your browser:
                        </p>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-chrome fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Google Chrome &amp; Chromium</h4>
                                <p>
                                    Both browsers proactively disable unrecognized scripts, so you will need to install the
                                    <a href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en">Tampermonkey extension</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-firefox fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Mozilla Firefox</h4>
                                <p>
                                    Please install the
                                    <a href="https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/">Greasemonkey add-on</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-opera fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Opera</h4>
                                <p>
                                    Opera users can install either the
                                    <a href="https://addons.opera.com/en/extensions/details/tampermonkey-beta/">Tampermonkey Beta add-on</a>
                                    or the
                                    <a href="https://addons.opera.com/en/extensions/details/violent-monkey/">Violent monkey add-on</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-safari fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Safari</h4>
                                <p>
                                    Please install the
                                    <a href="http://tampermonkey.net/?browser=safari">Tampermonkey extension</a>.
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-internet-explorer fa-fw"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Internet Explorer</h4>
                                <p>
                                    IE and Edge users need
                                    <a href="javascript:var c=document.createElement('script');c.type='text/javascript';c.src='https://sechat.quickmediasolutions.com/js/chatstatus.js';document.body.appendChild(c)">this bookmarklet</a>.
                                    Edge users need to follow the steps in
                                    <a href="http://www.howtogeek.com/231775/how-to-install-and-use-bookmarklets-in-microsoft-edge/">this</a>
                                    article.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                        <div class="clearfix"></div>
                        <h2 class="section-heading">How to Install</h2>
                        <p class="lead">Installing the actual UserScript is easy as 1-2-3:</p>
                        <ol class="lead">
                        	<li>Make sure you have a Userscript manager installed.</li>
                            <li>Click the Install button above and confirm the installation.</li>
                            <li>Reload the chat page!</li>
                        </ol>
                        <p class="lead">
                            The script will now automatically load each time you visit the chat page.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <p class="copyright text-muted small">
                            Copyright 2015 <a href="https://quickmediasolutions.com"><NAME></a>
                            &mdash; Page designed by <a href="https://github.com/KazWolfe">KazWolfe</a>.
                        </p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- jQuery -->
        <script src="/js/jquery.min.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="/js/bootstrap.min.js"></script>

        <!-- Pretty particles :3 -->
        <script src="/js/particles/particles.js"></script>
        <script src="/js/particles/app.js"></script>

        <!-- Display current users. -->
        <script>
            $(function() {
                function refresh() {
                    function pl(i, s, p) {
                        return i.length == 1 ? s : p;
                    }
                    function schedule() {
                        window.setTimeout(refresh, 30000);
                    }
                    $.get('/api/stats').then(function(d) {
                        $('#ticker').text(
                            "There " + pl(d.num_users, "is", "are") + " currently " +
                            d.num_users + " user" + pl(d.num_users, "", "s") + " chatting in " +
                            d.num_rooms + " room" + pl(d.num_rooms, "", "s") + "."
                        );
                        schedule();
                    }, schedule);
                }
                refresh();
            });
        </script>
    </body>
{'fraction_non_alphanumeric': 0.12233165025246213, 'fraction_numerical': 0.007698845173224016, 'mean_word_length': 0.9567641592487528, 'pattern_counts': {'":': 0, '<': 426, '<?xml version=': 0, '>': 426, 'https://': 16, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 76, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '568312', 'n_tokens_mistral': 5045, 'n_tokens_neox': 4686, 'n_words': 1040}