<commit_before><html>
<head>
<style>
body {
    background-color: rgb(209, 207, 184);
}

button.apply-gradient {
  margin: 10px auto auto 10px;
}

table {
  width: 90%;
}

td:nth-child(1) {
  width: 30%;
}

td:nth-child(2) {
  width: 70%;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1.2em;
}

#gradient-display {
    margin: 20px auto 20px auto;
    width: 90%;
    height: 30px;
}


iframe {
    width: 500px;
    height: 280px; 
}
</style>
</head>

<body>
    <h2>Try experimenting with your own gradient maps or your own website.</h2>

	<table>
		<tr>
		    <td valign="top">
				<h3>Sample gradients:</h3>
				<ul>
        			<li><input type="button" data-gradient="black, white" onclick="doGMShortcut(this, event)" value="Black &amp; White"/></li>
			        <li><input type="button" data-gradient="black, gray 60%, white" onclick="doGMShortcut(this, event)" value="Black &amp; White (Darken mid-tones)"/></li>
			        <li><input type="button" data-gradient="black 10%, white 90%" onclick="doGMShortcut(this, event)" value="High Contrast Black &amp; White"/></li>
			        <li><input type="button" data-gradient="white, black" onclick="doGMShortcut(this, event)" value="X-Ray"/></li>
			        <li><input type="button" data-gradient="black, white, black, white" onclick="doGMShortcut(this, event)" value="Double Black &amp; White"/></li>
			        <li><input type="button" data-gradient="rgb(100, 48, 33), white" onclick="doGMShortcut(this, event)" value="Sepia"/></li>
			        <li><input type="button" data-gradient="rgb(239, 13, 13) 10%, rgb(244, 219, 10) 90%" onclick="doGMShortcut(this, event)" value="Sunset"/></li>
			        <li><input type="button" data-gradient="black, blue 10%, white, black, white" onclick="doGMShortcut(this, event)" value="Icy"/></li>
      			</ul>

				<button onclick="clearGradientMap()">Clear Gradient Map</button>
				
				<form style="margin-top: 20px" action="#">
					<label for="colorGradient">Color Gradient: </label><br/>
					<input type="text" size="50"  id="colorGradient"  value="black, blue 10%, white, black, white" onkeypress="stopReload(event)"/><br/>
					<button class="apply-gradient" onclick="docalc(event)">Apply Gradient Map to IFrame</button>
				</form>

				<div id="gradient-display"></div>
			</td>
			<td valign="top">
				<form action="#">
					<label for="iFrameUrl">IFrame URL: </label>
					<input type="text" size="50"  id="iFrameUrl" value="http://commons.wikimedia.org/wiki/File:Time-lapse_looking_down_on_42nd_and_7th_in_Times_Square.ogv?embedplayer=yes" onkeypress="stopReload(event)"/>
					<button onclick="reloadIFrame()" >Reload IFrame</button>
				</form>
      
				<iframe id="target" src="http://commons.wikimedia.org/wiki/File:Time-lapse_looking_down_on_42nd_and_7th_in_Times_Square.ogv?embedplayer=yes" width="800px" height="600px"></iframe>  
				
                <div>
                    <sup>*</sup>Unfortunately, not all URLs will work with this demo due to IFrame  security concerns.
                </div>				                  
			</td>
		</tr>
	</table>
    
    <script src="../gradientmaps.js"></script>
    
    <script>
        function docalc(e) {
            var target = document.getElementById('target');
            var gradient = document.getElementById('colorGradient').value;
            GradientMaps.applyGradientMap(target, gradient);
        
            var gradientDisplay = document.getElementById('gradient-display');
            gradientDisplay.style['background'] = 
                '-webkit-linear-gradient(left,' + gradient + ')';
                
            e.preventDefault();
        }
        
        function reloadIFrame() {
            var url = document.getElementById('iFrameUrl').value;
            if (url.indexOf('http://') != 0) {
                // Simple but effective for demo purposes
                url = 'http://' + url;
            }
            document.getElementById('target').src = url;
        }
        
        function stopReload(e) {
            if (!e) e = window.event;
            var keyCode = e.keyCode || e.which;
            if (keyCode == '13'){
              // Enter pressed
              e.preventDefault();
            }        
        }
        
        function doGMShortcut(btn, e) {
            var gm = btn.dataset['gradient'];
            document.getElementById('colorGradient').value = gm;
            docalc(e);
            e.preventDefault();
        }
        
        function clearGradientMap() {
            GradientMaps.removeGradientMap(document.getElementById('target'));
            document.getElementById('colorGradient').value = '';
        }
        
    </script>
</body>
</html>
<commit_msg>iframe.html should include minified script<commit_after><html>
<head>
<style>
body {
    background-color: rgb(209, 207, 184);
}

button.apply-gradient {
  margin: 10px auto auto 10px;
}

table {
  width: 90%;
}

td:nth-child(1) {
  width: 30%;
}

td:nth-child(2) {
  width: 70%;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1.2em;
}

#gradient-display {
    margin: 20px auto 20px auto;
    width: 90%;
    height: 30px;
}


iframe {
    width: 500px;
    height: 280px; 
}
</style>
</head>

<body>
    <h2>Try experimenting with your own gradient maps or your own website.</h2>

	<table>
		<tr>
		    <td valign="top">
				<h3>Sample gradients:</h3>
				<ul>
        			<li><input type="button" data-gradient="black, white" onclick="doGMShortcut(this, event)" value="Black &amp; White"/></li>
			        <li><input type="button" data-gradient="black, gray 60%, white" onclick="doGMShortcut(this, event)" value="Black &amp; White (Darken mid-tones)"/></li>
			        <li><input type="button" data-gradient="black 10%, white 90%" onclick="doGMShortcut(this, event)" value="High Contrast Black &amp; White"/></li>
			        <li><input type="button" data-gradient="white, black" onclick="doGMShortcut(this, event)" value="X-Ray"/></li>
			        <li><input type="button" data-gradient="black, white, black, white" onclick="doGMShortcut(this, event)" value="Double Black &amp; White"/></li>
			        <li><input type="button" data-gradient="rgb(100, 48, 33), white" onclick="doGMShortcut(this, event)" value="Sepia"/></li>
			        <li><input type="button" data-gradient="rgb(239, 13, 13) 10%, rgb(244, 219, 10) 90%" onclick="doGMShortcut(this, event)" value="Sunset"/></li>
			        <li><input type="button" data-gradient="black, blue 10%, white, black, white" onclick="doGMShortcut(this, event)" value="Icy"/></li>
      			</ul>

				<button onclick="clearGradientMap()">Clear Gradient Map</button>
				
				<form style="margin-top: 20px" action="#">
					<label for="colorGradient">Color Gradient: </label><br/>
					<input type="text" size="50"  id="colorGradient"  value="black, blue 10%, white, black, white" onkeypress="stopReload(event)"/><br/>
					<button class="apply-gradient" onclick="docalc(event)">Apply Gradient Map to IFrame</button>
				</form>

				<div id="gradient-display"></div>
			</td>
			<td valign="top">
				<form action="#">
					<label for="iFrameUrl">IFrame URL: </label>
					<input type="text" size="50"  id="iFrameUrl" value="http://commons.wikimedia.org/wiki/File:Time-lapse_looking_down_on_42nd_and_7th_in_Times_Square.ogv?embedplayer=yes" onkeypress="stopReload(event)"/>
					<button onclick="reloadIFrame()" >Reload IFrame</button>
				</form>
      
				<iframe id="target" src="http://commons.wikimedia.org/wiki/File:Time-lapse_looking_down_on_42nd_and_7th_in_Times_Square.ogv?embedplayer=yes" width="800px" height="600px"></iframe>  
				
                <div>
                    <sup>*</sup>Unfortunately, not all URLs will work with this demo due to IFrame  security concerns.
                </div>				                  
			</td>
		</tr>
	</table>
    
    <script src="../gradientmaps.min.js"></script>
    
    <script>
        function docalc(e) {
            var target = document.getElementById('target');
            var gradient = document.getElementById('colorGradient').value;
            GradientMaps.applyGradientMap(target, gradient);
        
            var gradientDisplay = document.getElementById('gradient-display');
            gradientDisplay.style['background'] = 
                '-webkit-linear-gradient(left,' + gradient + ')';
                
            e.preventDefault();
        }
        
        function reloadIFrame() {
            var url = document.getElementById('iFrameUrl').value;
            if (url.indexOf('http://') != 0) {
                // Simple but effective for demo purposes
                url = 'http://' + url;
            }
            document.getElementById('target').src = url;
        }
        
        function stopReload(e) {
            if (!e) e = window.event;
            var keyCode = e.keyCode || e.which;
            if (keyCode == '13'){
              // Enter pressed
              e.preventDefault();
            }        
        }
        
        function doGMShortcut(btn, e) {
            var gm = btn.dataset['gradient'];
            document.getElementById('colorGradient').value = gm;
            docalc(e);
            e.preventDefault();
        }
        
        function clearGradientMap() {
            GradientMaps.removeGradientMap(document.getElementById('target'));
            document.getElementById('colorGradient').value = '';
        }
        
    </script>
</body>
</html>

{'fraction_non_alphanumeric': 0.15961844197138314, 'fraction_numerical': 0.021197668256491786, 'mean_word_length': 2.5946666666666665, 'pattern_counts': {'":': 0, '<': 155, '<?xml version=': 0, '>': 155, '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': '3996352', 'n_tokens_mistral': 3325, 'n_tokens_neox': 2859, 'n_words': 608}