<commit_before><!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="musicQuestApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="musicQuestApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="musicQuestApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="musicQuestApp" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Music Quest</title>
    <meta name="description" content="A Music Search Application using Spotify Web-API">
    <meta name="author" content="<NAME>">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bower Generated components -->
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>

    <!-- Favicon -->
    <link rel="icon" href="img/logo-black.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="<KEY>" crossorigin="anonymous">

    <!-- Custom Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
          type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Font Awesome CDN -->
    <script src="https://use.fontawesome.com/9c57e276a9.js"></script>

    <!-- Custom styles from open source theme -->
    <link href="css/freelancer.css" rel="stylesheet">

</head>
<body class="index" id="page-top" ng-controller="displayViewController">
<!-- Navigation -->
<nav class="navbar fixed-top navbar-light navbar-shrink" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="#page-top"><img src="img/logo-white.png" width="30" height="30"
                                                      class="d-inline-block align-top" alt="logo-white">
        </a>
    </div>
</nav>

<!-- Header -->
<header class="masthead" id="header-div">
    <div id="search-div" class="container">
        <div class="intro-text">
            <span class="name">Music Quest</span>
            <span class="skills">A demo Music Search Application using Spotify Web-API.</span>
            <hr class="star-light">
        </div>
        <div class="input-group input-group-lg">
            <input class="form-control" type="search" ng-model="searchString" id="search-box"
                   placeholder="Search your song here ...">
        </div>
        <br/>
        <a href="#display-div">
            <button id="search-btn" class="btn btn-primary btn-lg page-scroll"
                    ng-click="searchSpotify()">Search
            </button>
        </a>
        &nbsp;&nbsp;&nbsp;<button id="filter-btn" class="btn btn-secondary btn-lg page-scroll" data-toggle="modal"
                                  data-target="#filterModal">Filter
    </button>
        <br/>
    </div>
</header>

<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="filterModalLabel">Filters</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="yearFilter" class="col-sm-2 col-form-label">Year:&nbsp;</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="yearFilter" ng-model="yearString">
                        <i><small id="yearFilterHelp" class="form-text text-muted">(format: '2017' for particular year | '2000-2017' for range)</small></i>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label" for="genreFilter">Genre:&nbsp;</label>
                    <div class="col-sm-10">
                        <select id="genreFilter" class="form-control" ng-model="genreString">
                            <option></option>
                            <option>classical</option>
                            <option>country</option>
                            <option>disco</option>
                            <option>edm</option>
                            <option>hip-hop</option>
                            <option>house</option>
                            <option>indie-pop</option>
                            <option>pop</option>
                            <option>rock</option>
                            <option>sleep</option>
                            <option>trance</option>
                            <option>work-out</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Display Section -->
<div id="display-div" class="container">
    <table class="table sortable" id="display-table">
        <thead class="thead-inverse">
        <tr>
            <th>Spotify ID</th>
            <th>Track Name</th>
            <th>Album Name</th>
            <th>Duration (sec)</th>
            <th>Popularity</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="track in tracksList">
            <td>{{track.id}}</td>
            <td>{{track.name}}</td>
            <td>{{track.albumName}}</td>
            <td>{{track.duration}}</td>
            <td>{{track.popularity}}</td>
        </tr>
        </tbody>
    </table>

    <span class="message" ng-hide="searchSuccessful">No Search Results.</span>

    <div id="navigationLinks">
        <span>
            <a href="" ng-click="getPreviousTracks()"><i class="fa fa-arrow-circle-left fa-3x"
                                                         aria-hidden="true"></i></a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" ng-click="getNextTracks()"><i class="fa fa-arrow-circle-right fa-3x" aria-hidden="true"></i></a>
        </span>
    </div>
</div>

<!-- Footer -->
<footer class="text-center" id="footer-div">
    <div class="footer-below">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    Copyright &copy; Created by <NAME>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;Uses
                    Spotify Web-API
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top">
    <a class="btn btn-primary page-scroll" href="#page-top">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<!-- Bower Generated components -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>

<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="<KEY>"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="<KEY>"
        crossorigin="anonymous"></script>

<!-- Plugin JavaScript -->
<script src="js/jquery.easing.js"></script>
<script src="js/sorttable.js"></script>

<!-- Custom scripts from open source theme -->
<script src="js/freelancer.js"></script>

<!-- JavaScript for App & View -->
<script src="app.js"></script>
</body>
</html>
<commit_msg>Made changes to make development ready environment to production ready environment<commit_after><!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="musicQuestApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="musicQuestApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="musicQuestApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="musicQuestApp" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Music Quest</title>
    <meta name="description" content="A Music Search Application using Spotify Web-API">
    <meta name="author" content="<NAME>">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bower Generated components -->
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>

    <!-- Favicon -->
    <link rel="icon" href="img/logo-black.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="<KEY>" crossorigin="anonymous">

    <!-- Custom Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
          type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Font Awesome CDN -->
    <script src="https://use.fontawesome.com/9c57e276a9.js"></script>

    <!-- Custom styles from open source theme -->
    <link href="css/freelancer.css" rel="stylesheet">

</head>
<body class="index" id="page-top" ng-controller="displayViewController">
<!-- Navigation -->
<nav class="navbar fixed-top navbar-light navbar-shrink" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="#page-top"><img src="img/logo-white.png" width="30" height="30"
                                                      class="d-inline-block align-top" alt="logo-white">
        </a>
    </div>
</nav>

<!-- Header -->
<header class="masthead" id="header-div">
    <div id="search-div" class="container">
        <div class="intro-text">
            <span class="name">Music Quest</span>
            <span class="skills">A demo Music Search Application using Spotify Web-API.</span>
            <hr class="star-light">
        </div>
        <div class="input-group input-group-lg">
            <input class="form-control" type="search" ng-model="searchString" id="search-box"
                   placeholder="Search your song here ...">
        </div>
        <br/>
        <a href="#display-div">
            <button id="search-btn" class="btn btn-primary btn-lg page-scroll"
                    ng-click="searchSpotify()">Search
            </button>
        </a>
        &nbsp;&nbsp;&nbsp;<button id="filter-btn" class="btn btn-secondary btn-lg page-scroll" data-toggle="modal"
                                  data-target="#filterModal">Filter
    </button>
        <br/>
    </div>
</header>

<!-- Filter Modal -->
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="filterModalLabel">Filters</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="yearFilter" class="col-sm-2 col-form-label">Year:&nbsp;</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="yearFilter" ng-model="yearString">
                        <i>
                            <small id="yearFilterHelp" class="form-text text-muted">(format: '2017' for particular year
                                | '2000-2017' for range)
                            </small>
                        </i>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label" for="genreFilter">Genre:&nbsp;</label>
                    <div class="col-sm-10">
                        <select id="genreFilter" class="form-control" ng-model="genreString">
                            <option></option>
                            <option>classical</option>
                            <option>country</option>
                            <option>disco</option>
                            <option>edm</option>
                            <option>hip-hop</option>
                            <option>house</option>
                            <option>indie-pop</option>
                            <option>pop</option>
                            <option>rock</option>
                            <option>sleep</option>
                            <option>trance</option>
                            <option>work-out</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Display Section -->
<div id="display-div" class="container">
    <table class="table sortable" id="display-table">
        <thead class="thead-inverse">
        <tr>
            <th>Spotify ID</th>
            <th>Track Name</th>
            <th>Album Name</th>
            <th>Duration (sec)</th>
            <th>Popularity</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="track in tracksList">
            <td>{{track.id}}</td>
            <td>{{track.name}}</td>
            <td>{{track.albumName}}</td>
            <td>{{track.duration}}</td>
            <td>{{track.popularity}}</td>
        </tr>
        </tbody>
    </table>

    <span class="message" ng-hide="searchSuccessful">No Search Results.</span>

    <div id="navigationLinks">
        <span>
            <a href="" ng-click="getPreviousTracks()"><i class="fa fa-arrow-circle-left fa-3x"
                                                         aria-hidden="true"></i></a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" ng-click="getNextTracks()"><i class="fa fa-arrow-circle-right fa-3x" aria-hidden="true"></i></a>
        </span>
    </div>
</div>

<!-- Footer -->
<footer class="text-center" id="footer-div">
    <div class="footer-below">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    Copyright &copy; Created by <NAME>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;Uses
                    Spotify Web-API
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top">
    <a class="btn btn-primary page-scroll" href="#page-top">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>

<!-- In production use: -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>

<!-- Bower Generated components - In developement phase use
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
-->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="<KEY>"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="<KEY>"
        crossorigin="anonymous"></script>

<!-- Plugin JavaScript -->
<script src="js/jquery.easing.js"></script>
<script src="js/sorttable.js"></script>

<!-- Custom scripts from open source theme -->
<script src="js/freelancer.js"></script>

<!-- JavaScript for App & View -->
<script src="app.js"></script>
</body>
</html>

{'fraction_non_alphanumeric': 0.1853144884284025, 'fraction_numerical': 0.011374514330761868, 'mean_word_length': 2.155089713981169, 'pattern_counts': {'":': 0, '<': 487, '<?xml version=': 0, '>': 485, 'https://': 20, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 11, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3164674', 'n_tokens_mistral': 5595, 'n_tokens_neox': 5287, 'n_words': 985}