<commit_before><!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/normalize.min.css">
        <style type="text/css">
/* ==========================================================================
   Demo styles
   ========================================================================== */

body{
  margin:0;
  padding: 20px 60px;
  background-color: #efefef;
  font-family: helvetica, sans-serif;
  color:#777;
}
h1, h2, h3{
  color: #555;
  margin: 0;
  padding: 0 0 15px;
}
h2{padding: 15px 0 15px;}
p{margin:0 0 6px;}
textarea{
  margin:0 0 10px;
  width: 100%;
  background-color: #666;
  color: #ccc;
  border:0px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  font-size: 11px;
}
textarea:focus{outline: none; background-color: #444;}
a.selector{ font-size: 12px; color:#47b; text-decoration: none; font-weight: bold; float: right;}

/* ==========================================================================
   Helium Modal styles
   ========================================================================== */

/* === essential styles === */
.modalholder{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 2000;
  display: none;
}
.modalholder .modal{
  position: absolute;
  left: -9999px;
}

/* === customizable styles === */
.modalholder .modal{
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}
.modalholder .modal a.close{
  position: absolute;
  top:3px;
  right:6px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 20px;
  line-height: 20px;
  color: #222;
}
        </style>    
    </head>
    <body style="margin:0;">

    <div id="modalid" class="modalholder">
        <div class="modal">
        content for modal #1
        <a href="" class="close">&times;</a>
        </div>
    </div>
    <div id="modalid2" class="modalholder">
        <div class="modal">
        content for modal #2<br>
        <a href="" title="" class="close2">additional close link</a>
        <a href="" class="close">&times;</a>
        </div>
    </div>
    <h1>Helium-Modal</h1>
    <p>Helium-modal is a jQuery modal window script, developed by <NAME> under the open source MIT licence.</p>
    <h2>Features:</h2>
    <ul>
      <li>No required set widths</li>
      <li>Fully CSS stylable</li>
      <li>Recenters if size of modal changes</li>
      <li>Customizable show/hide animation</li>
      <li>Triggered through a link or javascript</li>
    </ul>
    <h2>Examples:</h2>
    <p>
      <a href="" data-mid="modalid">open modal #1</a>
      <a href="" data-mid="modalid2">open modal #2</a>
    </p>
    <h2>Usage:</h2>
    <h3>1: include required files</h3>
    <p>include the following scripts as follows before the end of the BODY tag</p>
<a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:45px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/helium.mutate.js"></script>
<script src="js/helium.modal.js"></script></textarea>
    <h3>2: Add required HTML</h3>
    <p>add the following customizable modal template after your opening BODY tag</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:85px;">
<div id="your-modal-id" class="modalholder">
    <div class="modal">
    content for your modal
    <a href="" class="close">&amp;times;</a>
    </div>
</div></textarea>
    <p>use the <em>data-mid</em> custom attribute on the link that you wish to trigger your modal</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:20px;">
    <a href="" data-mid="your-modal-id">your button text</a></textarea>
    <h3>3: Add CSS</h3>
    <p>Add the following CSS in main.css (or any desired css location)</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:490px;">
/* ====================================================================
   Helium Modal styles
   ==================================================================== */

/* === essential styles === */
.modalholder{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 2000;
  display: none;
}
.modalholder .modal{
  position: absolute;
  left: -9999px;
}

/* === customizable styles === */
.modalholder .modal{
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}
.modalholder .modal a.close{
  position: absolute;
  top:3px;
  right:6px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 20px;
  line-height: 20px;
  color: #222;
}
    </textarea>
    <h3>4: initialize</h3>
    <p>Place the follow before the end of the BODY tag to initialize all modals</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:180px;">
        <script type="text/javascript" charset="utf-8">
        $(function() {
          $("*[data-mid]").each( function(){
            $(this).heliumModal({
              vert: 50,
              speed: 500,
              easing: 'swing',
              onOpen: function(){ },  // callback for custom JS when modal opens
              onClose: function(){ }  // callback for custom JS when modal close
            });           
          });
        });
        </script></textarea>
    <h3>Alternatives:  "I want an additional close or cancel button in my modal"</h3>
    <p>just use the "close2" class on any element in your modal that should act as a close link. Like so&hellip;</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:100px;">
<div id="your-modal-id" class="modalholder">
    <div class="modal">
    content for your modal<br>
    <a href="" title="" class="close2">additional close link</a>
    <a href="" class="close">&amp;times;</a>
    </div>
</div></textarea>
    <h3>Alternatives:  "I want to open or close my modal via javascript"</h3>
    <p>use the following jQuery inside any event</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:70px;">
// to open ...
$('*[data-mid="your-modal-id"]').heliumModal('openModal');

// to close ...
$('*[data-mid="your-modal-id"]').heliumModal('closeModal');</textarea>
      <h3>Alternatives: "I dont want a open link" (e.g. an error modal)</h3>
      <p>In this case add the data-mid attribute to the same element as "your-modal-id" in your HTML and trigger your modal via javascript (as described above)</p>
          <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:85px;">
<div id="your-modal-id" data-mid="your-modal-id" class="modalholder">
    <div class="modal">
    content for your modal
    <a href="" class="close">&amp;times;</a>
    </div>
</div></textarea>
    <h3>Alternatives:  "I want to initialize my modals separately"</h3>
    <p>If you want a different initialization for each modal just remove the "each" wrapper from the initialization script like so&hellip;</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:180px;">
<script type="text/javascript" charset="utf-8">
$(function() {
  // repeat for each of your modals ===============================
  $("*[data-mid='your-modal-id-1']").heliumModal({
    vert: 50,
    speed: 500,
    easing: 'swing',
    onOpen: function(){ },  // callback for custom JS when modal opens
    onClose: function(){ }  // callback for custom JS when modal close
  });   
  // end repeat ===================================================
});
</script></textarea>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
        <script src="js/helium.mutate.js"></script>
        <script src="js/helium.modal.js"></script>
        <script type="text/javascript" charset="utf-8">
        $(function() {
          $("*[data-mid]").each( function(){
            $(this).heliumModal({
              vert: 50,
              speed: 500,
              easing: 'swing',
              onOpen: function(){ },
              onClose: function(){ }
            });        
          });  

          $('.selector').click(function(){
            $(this).next().focus().select();
            return false;
          });
        });
        </script>

    </body>
</html><commit_msg>removed protocol for jquery<commit_after><!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/normalize.min.css">
        <style type="text/css">
/* ==========================================================================
   Demo styles
   ========================================================================== */

body{
  margin:0;
  padding: 20px 60px;
  background-color: #efefef;
  font-family: helvetica, sans-serif;
  color:#777;
}
h1, h2, h3{
  color: #555;
  margin: 0;
  padding: 0 0 15px;
}
h2{padding: 15px 0 15px;}
p{margin:0 0 6px;}
textarea{
  margin:0 0 10px;
  width: 100%;
  background-color: #666;
  color: #ccc;
  border:0px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  font-size: 11px;
}
textarea:focus{outline: none; background-color: #444;}
a.selector{ font-size: 12px; color:#47b; text-decoration: none; font-weight: bold; float: right;}

/* ==========================================================================
   Helium Modal styles
   ========================================================================== */

/* === essential styles === */
.modalholder{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 2000;
  display: none;
}
.modalholder .modal{
  position: absolute;
  left: -9999px;
}

/* === customizable styles === */
.modalholder .modal{
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}
.modalholder .modal a.close{
  position: absolute;
  top:3px;
  right:6px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 20px;
  line-height: 20px;
  color: #222;
}
        </style>    
    </head>
    <body style="margin:0;">

    <div id="modalid" class="modalholder">
        <div class="modal">
        content for modal #1
        <a href="" class="close">&times;</a>
        </div>
    </div>
    <div id="modalid2" class="modalholder">
        <div class="modal">
        content for modal #2<br>
        <a href="" title="" class="close2">additional close link</a>
        <a href="" class="close">&times;</a>
        </div>
    </div>
    <h1>Helium-Modal</h1>
    <p>Helium-modal is a jQuery modal window script, developed by <NAME> under the open source MIT licence.</p>
    <h2>Features:</h2>
    <ul>
      <li>No required set widths</li>
      <li>Fully CSS stylable</li>
      <li>Recenters if size of modal changes</li>
      <li>Customizable show/hide animation</li>
      <li>Triggered through a link or javascript</li>
    </ul>
    <h2>Examples:</h2>
    <p>
      <a href="" data-mid="modalid">open modal #1</a>
      <a href="" data-mid="modalid2">open modal #2</a>
    </p>
    <h2>Usage:</h2>
    <h3>1: include required files</h3>
    <p>include the following scripts as follows before the end of the BODY tag</p>
<a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:45px;">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/helium.mutate.js"></script>
<script src="js/helium.modal.js"></script></textarea>
    <h3>2: Add required HTML</h3>
    <p>add the following customizable modal template after your opening BODY tag</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:85px;">
<div id="your-modal-id" class="modalholder">
    <div class="modal">
    content for your modal
    <a href="" class="close">&amp;times;</a>
    </div>
</div></textarea>
    <p>use the <em>data-mid</em> custom attribute on the link that you wish to trigger your modal</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:20px;">
    <a href="" data-mid="your-modal-id">your button text</a></textarea>
    <h3>3: Add CSS</h3>
    <p>Add the following CSS in main.css (or any desired css location)</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:490px;">
/* ====================================================================
   Helium Modal styles
   ==================================================================== */

/* === essential styles === */
.modalholder{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 2000;
  display: none;
}
.modalholder .modal{
  position: absolute;
  left: -9999px;
}

/* === customizable styles === */
.modalholder .modal{
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}
.modalholder .modal a.close{
  position: absolute;
  top:3px;
  right:6px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 20px;
  line-height: 20px;
  color: #222;
}
    </textarea>
    <h3>4: initialize</h3>
    <p>Place the follow before the end of the BODY tag to initialize all modals</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:180px;">
        <script type="text/javascript" charset="utf-8">
        $(function() {
          $("*[data-mid]").each( function(){
            $(this).heliumModal({
              vert: 50,
              speed: 500,
              easing: 'swing',
              onOpen: function(){ },  // callback for custom JS when modal opens
              onClose: function(){ }  // callback for custom JS when modal close
            });           
          });
        });
        </script></textarea>
    <h3>Alternatives:  "I want an additional close or cancel button in my modal"</h3>
    <p>just use the "close2" class on any element in your modal that should act as a close link. Like so&hellip;</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:100px;">
<div id="your-modal-id" class="modalholder">
    <div class="modal">
    content for your modal<br>
    <a href="" title="" class="close2">additional close link</a>
    <a href="" class="close">&amp;times;</a>
    </div>
</div></textarea>
    <h3>Alternatives:  "I want to open or close my modal via javascript"</h3>
    <p>use the following jQuery inside any event</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:70px;">
// to open ...
$('*[data-mid="your-modal-id"]').heliumModal('openModal');

// to close ...
$('*[data-mid="your-modal-id"]').heliumModal('closeModal');</textarea>
      <h3>Alternatives: "I dont want a open link" (e.g. an error modal)</h3>
      <p>In this case add the data-mid attribute to the same element as "your-modal-id" in your HTML and trigger your modal via javascript (as described above)</p>
          <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:85px;">
<div id="your-modal-id" data-mid="your-modal-id" class="modalholder">
    <div class="modal">
    content for your modal
    <a href="" class="close">&amp;times;</a>
    </div>
</div></textarea>
    <h3>Alternatives:  "I want to initialize my modals separately"</h3>
    <p>If you want a different initialization for each modal just remove the "each" wrapper from the initialization script like so&hellip;</p>
    <a href="" class="selector" title="">&#8595; select all</a>
<textarea readonly name="" style="height:180px;">
<script type="text/javascript" charset="utf-8">
$(function() {
  // repeat for each of your modals ===============================
  $("*[data-mid='your-modal-id-1']").heliumModal({
    vert: 50,
    speed: 500,
    easing: 'swing',
    onOpen: function(){ },  // callback for custom JS when modal opens
    onClose: function(){ }  // callback for custom JS when modal close
  });   
  // end repeat ===================================================
});
</script></textarea>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
        <script src="js/helium.mutate.js"></script>
        <script src="js/helium.modal.js"></script>
        <script type="text/javascript" charset="utf-8">
        $(function() {
          $("*[data-mid]").each( function(){
            $(this).heliumModal({
              vert: 50,
              speed: 500,
              easing: 'swing',
              onOpen: function(){ },
              onClose: function(){ }
            });        
          });  
        });
          $('.selector').click(function(){
            $(this).next().focus().select();
            return false;
          });
        </script>

    </body>
</html>
{'fraction_non_alphanumeric': 0.23120759837177748, 'fraction_numerical': 0.028005427408412484, 'mean_word_length': 3.2368360542653485, 'pattern_counts': {'":': 0, '<': 383, '<?xml version=': 0, '>': 381, 'https://': 0, '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': '2784687', 'n_tokens_mistral': 6363, 'n_tokens_neox': 5823, 'n_words': 1544}