<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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Image Pixellate</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/stylish-portfolio.css" rel="stylesheet">
    <link href="css/kylie.css" rel="stylesheet">
    <link href="css/image-pixellate.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic|ABeeZee" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/image-pixellate.js"></script>
</head>
<body>
    <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
    <nav id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-light btn-lg pull-left toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand">
                <a href="#top">EXPOSURE</a>
            </li>
            <li>
                <a href="#intro">Introduction</a>
            </li>
            <li>
                <a href="#first-section">Exposition</a>
            </li>
            <li>
                <a href="#pixels">Discovery</a>
            </li>
            <li>
                <a href="#services">Pixels, Arrays + Colors</a>
            </li>
            <li>
                <a href="#adjustments">Digital Image Formation</a>
            </li>
            <li>
                <a href="#adjustments">Digital Image Processing</a>
            </li>
            <li>
                <a href="#adjustments">Digital Image Aesthetics</a>
            </li>
            <li>
                <a href="#adjustments">Brightness</a>
            </li>
            <li>
                <a href="#adjustments">Contrast</a>
            </li>
            <li>
                <a href="#adjustments">Applet</a>
            </li>
            <li>
                <a href="#about-thisstie">About</a>
            </li>
            <li>
                <a href="#extension">Extension</a>
            </li>
        </ul>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
            <br><br>
                <h3 class="text-center">A Digital Image is an Array of Pixels.</h3>
                <hr class="small grey" style="margin-bottom:10px;"><hr/>
                <p class="text-center"><i>Scroll to explore the image below.</i></p>
                <hr class="small grey" style="margin-top:10px;"><hr/>
            </div>
        </div>
        <div class="row">
              <div class="col-lg-2">
                <div id="popup">
                    <p> Click on pixels to display pixel information. Clicking toggles the pixel viewer on and off. Moving the mouse inspects different pixels. The image is still scrollable.</p>
                </div>
            </div> 
            <div class="col-lg-8">
                <div id="wrapper">
                    <div id="canvas-wrapper">
                        <canvas id="canvas" width="750" height="570"></canvas>
                    </div>
                    <div id="computed">
                        <p>Computed</p>
                        <p>R: <span class="computed" id="r"></span></p>
                        <p>G: <span class="computed" id="g"></span></p>
                        <p>B: <span class="computed" id="b"></span></p><commit_msg>moved popup in between grey lines<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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Image Pixellate</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/stylish-portfolio.css" rel="stylesheet">
    <link href="css/kylie.css" rel="stylesheet">
    <link href="css/image-pixellate.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic|ABeeZee" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/image-pixellate.js"></script>
</head>
<body>
    <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
    <nav id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-light btn-lg pull-left toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand">
                <a href="#top">EXPOSURE</a>
            </li>
            <li>
                <a href="#intro">Introduction</a>
            </li>
            <li>
                <a href="#first-section">Exposition</a>
            </li>
            <li>
                <a href="#pixels">Discovery</a>
            </li>
            <li>
                <a href="#services">Pixels, Arrays + Colors</a>
            </li>
            <li>
                <a href="#adjustments">Digital Image Formation</a>
            </li>
            <li>
                <a href="#adjustments">Digital Image Processing</a>
            </li>
            <li>
                <a href="#adjustments">Digital Image Aesthetics</a>
            </li>
            <li>
                <a href="#adjustments">Brightness</a>
            </li>
            <li>
                <a href="#adjustments">Contrast</a>
            </li>
            <li>
                <a href="#adjustments">Applet</a>
            </li>
            <li>
                <a href="#about-thisstie">About</a>
            </li>
            <li>
                <a href="#extension">Extension</a>
            </li>
        </ul>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
            <br><br>
                <h3 class="text-center">A Digital Image is an Array of Pixels.</h3>
                <hr class="small grey" style="margin-bottom:10px;"><hr/>
                <div class="row">
                    <div class="col-lg-3"id="popup">
                        <p> Click on pixels to display pixel information. Clicking toggles the pixel viewer on and off. Moving the mouse inspects different pixels. The image is still scrollable.</p>
                    </div>
                <div class="col-lg-4 col-lg-offset-1"><p class="text-center"><i>Scroll to explore the image below.</i></p></div>
                </div>
                <hr class="small grey" style="margin-top:10px;"><hr/>
            </div>
        </div>
        <div class="row">
              <div class="col-lg-2">
                <div id="popup">
                    <p> Click on pixels to display pixel information. Clicking toggles the pixel viewer on and off. Moving the mouse inspects different pixels. The image is still scrollable.</p>
                </div>
            </div> 
            <div class="col-lg-8">
                <div id="wrapper">
                    <div id="canvas-wrapper">
                        <canvas id="canvas" width="750" height="570"></canvas>
                    </div>
                    <div id="computed">
                        <p>Computed</p>
                        <p>R: <span class="computed" id="r"></span></p>
                        <p>G: <span class="computed" id="g"></span></p>
                        <p>B: <span class="computed" id="b"></span></p>
{'fraction_non_alphanumeric': 0.17079990274738632, 'fraction_numerical': 0.010089958667639193, 'mean_word_length': 1.7386817576564582, 'pattern_counts': {'":': 0, '<': 279, '<?xml version=': 0, '>': 279, 'https://': 2, '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': '3612482', 'n_tokens_mistral': 2559, 'n_tokens_neox': 2410, 'n_words': 531}