<commit_before><!doctype html public "✰">

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  
  <title>wtcss</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <meta name="author" content="@benjaminbenben">
<style type="text/css" media="screen">
body{margin:0;font-family:Helvetica,Arial,sans-serif;overflow-x:hidden;}
#page{position:fixed;width:50%;background-color:#f5f5f5;height:100%;overflow:hidden;z-index:10;}
ol{margin:0;position:absolute;z-index:1;left:50%;width:50%;padding:0;color:#aaa;font-size:.8em;}
li{padding:8px;list-style:none;border-bottom:1px solid #f5f5f5;border-left:3px solid #08f;}
li.none{border-left-color:#fff;}
.selector{color:#f08;font-weight:bold;}
canvas{position:absolute;width:100%;height:100%;}
#rulecount{position:fixed;top:0;right:0;background-color:#fff;z-index:100;padding:.5em;color:#ccc;}
#rulecount span{color:#999;cursor:pointer;}
#rulecount span.selected{color:#f08;}
#sites li:hover{cursor:pointer;color:#08f;}
form{
	padding:2em;
}
input#url{
	margin-right:0;
	width:50%;
	font-size:1.3em;
	border:none;
	border-left:3px solid #08f;
	padding:.5em;
}
input#sub{
	border:none;
	background-color:#fff;
	padding:.5em;
	font-size:1.3em;
	cursor:pointer;
}
form p{
	font-size:.75em;
	color:#444;
}

#loading{
	background-color:#08f;
	color:#fff;
	left:0%;
	top:50%;
	position:absolute;
	margin: -.5em 1em;
	font-size:1.2em;
	padding:.5em;
	text-shadow:#08f 0 0 2px;
}
ol{
	-webkit-transform-origin: 0 0;
	-webkit-transition: -webkit-transform .5s;
}
#zoom,#cancel{
	position:fixed;
	bottom:0;
	right:0;
	padding:.5em;
	background-color:#fff;
	color:#08f;
	font-size:2em;
	z-index:50;
	cursor:pointer;
}
#cancel{
	left:0;
	background: none;
}
img{display:none;}
a{color:#08f;text-decoration: none}
.note{
	margin-top:20px;
	font-size:.7em;
	max-width:24em;
}
.author{
	margin-top:20px;
	font-size:.7em;
}
</style>
</head>
<body>
	
	<div id="rulecount">
		<span class="total selected"></span> &raquo; <span class="active"></span>
	</div>
	<div id="zoom">-</div>
	<div id="cancel"><a href='/'>&times;</a></div>
	
	<p id="loading">loading</p>
	
	<div id="page">
		<form method="get">
			<input type='text' value="http://" id="url" name="url"/>
			<input type="submit" value="&raquo;" id="sub">	
			<p>Enter a url to see how the css rules interact with that page</p>
			<p class="note">(Note, this is hacked together and might not work in many browsers. If it's hanging, give chrome a try)</p>
			<p class="author">Details &rsaquo; <a href="http://benjaminbenben.com">BenjaminBenBen</a></p>
			<h3>Examples</h3>
			<ul id="sites">
				<li>http://google.com</li>
				<li>http://www.w3.org/</li>
				<li>http://twitter.github.io/bootstrap/</li>
			</ul>
		</form>
		<canvas id="canvas"></canvas>
		<img>
	</div>
	<ol id="rules">
	</ol>
	
	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  var scale = 1;
	var load = function(data){		
		var canvas = document.getElementById("canvas");
		
		$(document).bind('render', function(){
			var height = $(window).height(), width = $(window).width()/2;
			canvas.width = width;
			canvas.height = height;

			if (canvas.getContext) {  
				var ctx = canvas.getContext("2d");  
				ctx.drawImage(document.images[0], 0,0);


				// ctx.strokeStyle = "#08f";  

				var top = $(document).scrollTop();
				$('#rules li:visible').each(function(){
					$rule = $(this);
					var y = $(this).offset().top - top;
					
					if(y < 0 || y > height){return;}
					
					y += ($(this).outerHeight()*scale)/2;
					
					var links = $(this).data('links') || [];
					var opacity = 0.25 + (0.75/links.length); // assign an opacity based on the number of links
					
					// #08f
					ctx.strokeStyle = "rgba(0, 136, 255, "+opacity+")"; 
					
					$.each(links, function(i,link){
						ctx.beginPath();  
						ctx.moveTo(link[1],link[0]);

						// ctx.lineTo(canvas.width,y);
						// make it slightly more fancy
						var controlX = (link[1] + width) / 2;
						ctx.bezierCurveTo(controlX, y,controlX, y, width,y)

						ctx.stroke();
					});
				});

			}
		});
		
		$(window).on('resize scroll', function(){
			$(document).trigger('render');
		});

		$('img').attr('src',data.img);
		$(document).trigger('render')
		setTimeout(function(){
			$(document).trigger('render');
		},250);
		
		// populate/hack
		$.when(data.css).done(function(data){
			var $rules = $('#rules').empty();
			$rules.css('left','0');
			var tmpl = '<li><span class="selector"></span></li>';
			var activeCount = 0;
			$.each(data, function(_i, arr){
				var rule = arr[0].split('{');
				var el = $(tmpl);
				el.find('.selector').text(rule[0])
				el.append('{' + rule.slice(1).join('{'))
				el.data('links', arr.slice(1));
				if(arr.length == 1){
					el.addClass('none');
				} else {
					activeCount++;
				}
				el.appendTo(rules);
				
			});
			
			$rules.animate({'left':'50%'});
			$('#rulecount .total').text(data.length + ' rules');
			$('#rulecount .active').text(activeCount + ' active');
			$(document).trigger('render');
		});
		
		$('#rulecount span').click(function(e){
			$(this).addClass('selected').siblings().removeClass('selected');
			var active = $(this).hasClass('active');
			$('li.none').each(function(){
				// this is ridiculously faster than .toggle
				this.style.display = active ? 'none' : 'block';
			})
			$(document).trigger('render');
		})
	}

	$(function(){
		$('form').submit(function(e){
			e.preventDefault();
			var $form = $(this);

			var url = $('[name=url]').val();

			if(typeof(_gaq) !== 'undefined')
				_gaq.push(['_trackEvent', 'requests', 'get', url]);
			
			if(history.replaceState)
				history.replaceState(null, "", "?" + $.param({url:url}));

			var loadedYet;
			$form.find('input').blur().animate({width:0, opacity:0}, function(){
				$form.slideUp();
				if(!loadedYet) $('#loading').animate({left:'50%'});
				
			});


			$.get('/data',$form.serializeArray())
			.pipe(JSON.parse)
			.done(function(){
				loadedYet = true;
				$('#loading').animate({left:'0%'});
			})
			.done(load)
			.fail(function(){
				$('#loading').html('&hellip;failed to load')
			});

			
		})



		// maybe spark it off?
		if(window.location.search && window.location.search.indexOf('?url=') === 0){
			var url = decodeURIComponent(window.location.search.substr(5))
			console.log("--", url);
			$('[name=url]').val(url);
			$('form').submit();
		}

		
		
		
		// $form = $('form');

		// $('#loading').show();

		$('#sites li').click(function(){
			$('[name=url]').val($(this).text());
			$('form').submit();
		});
		
		$('#zoom').toggle(function(){
			scale = 1/($('ol').height() / $(window).height());
			$('ol').css({'-webkit-transform':'scale('+scale+')', backgroundColor:'#f5f5f5'});
			setTimeout(function(){
				$(document).trigger('render');
			},500);
			
		},function(){
			$('ol').css({'-webkit-transform':'scale(1)', backgroundColor:'#fff'});
			
			setTimeout(function(){
				$(document).trigger('render');
			},500);
		})
	});


  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35774866-1']);
  _gaq.push(['_setDomainName', 'wtcss.benjaminbenben.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html><commit_msg>use /go url for cloudfront<commit_after><!doctype html public "✰">

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  
  <title>wtcss</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <meta name="author" content="@benjaminbenben">
<style type="text/css" media="screen">
body{margin:0;font-family:Helvetica,Arial,sans-serif;overflow-x:hidden;}
#page{position:fixed;width:50%;background-color:#f5f5f5;height:100%;overflow:hidden;z-index:10;}
ol{margin:0;position:absolute;z-index:1;left:50%;width:50%;padding:0;color:#aaa;font-size:.8em;}
li{padding:8px;list-style:none;border-bottom:1px solid #f5f5f5;border-left:3px solid #08f;}
li.none{border-left-color:#fff;}
.selector{color:#f08;font-weight:bold;}
canvas{position:absolute;width:100%;height:100%;}
#rulecount{position:fixed;top:0;right:0;background-color:#fff;z-index:100;padding:.5em;color:#ccc;}
#rulecount span{color:#999;cursor:pointer;}
#rulecount span.selected{color:#f08;}
#sites li:hover{cursor:pointer;color:#08f;}
form{
	padding:2em;
}
input#url{
	margin-right:0;
	width:50%;
	font-size:1.3em;
	border:none;
	border-left:3px solid #08f;
	padding:.5em;
}
input#sub{
	border:none;
	background-color:#fff;
	padding:.5em;
	font-size:1.3em;
	cursor:pointer;
}
form p{
	font-size:.75em;
	color:#444;
}

#loading{
	background-color:#08f;
	color:#fff;
	left:0%;
	top:50%;
	position:absolute;
	margin: -.5em 1em;
	font-size:1.2em;
	padding:.5em;
	text-shadow:#08f 0 0 2px;
}
ol{
	-webkit-transform-origin: 0 0;
	-webkit-transition: -webkit-transform .5s;
}
#zoom,#cancel{
	position:fixed;
	bottom:0;
	right:0;
	padding:.5em;
	background-color:#fff;
	color:#08f;
	font-size:2em;
	z-index:50;
	cursor:pointer;
}
#cancel{
	left:0;
	background: none;
}
img{display:none;}
a{color:#08f;text-decoration: none}
.note{
	margin-top:20px;
	font-size:.7em;
	max-width:24em;
}
.author{
	margin-top:20px;
	font-size:.7em;
}
</style>
</head>
<body>
	
	<div id="rulecount">
		<span class="total selected"></span> &raquo; <span class="active"></span>
	</div>
	<div id="zoom">-</div>
	<div id="cancel"><a href='/'>&times;</a></div>
	
	<p id="loading">loading</p>
	
	<div id="page">
		<form method="get" action="go">
			<input type='text' value="http://" id="url" name="url"/>
			<input type="submit" value="&raquo;" id="sub">	
			<p>Enter a url to see how the css rules interact with that page</p>
			<p class="note">(Note, this is hacked together and might not work in many browsers. If it's hanging, give chrome a try)</p>
			<p class="author">Details &rsaquo; <a href="http://benjaminbenben.com">BenjaminBenBen</a></p>
			<h3>Examples</h3>
			<ul id="sites">
				<li>http://google.com</li>
				<li>http://www.w3.org/</li>
				<li>http://twitter.github.io/bootstrap/</li>
			</ul>
		</form>
		<canvas id="canvas"></canvas>
		<img>
	</div>
	<ol id="rules">
	</ol>
	
	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  var scale = 1;
	var load = function(data){		
		var canvas = document.getElementById("canvas");
		
		$(document).bind('render', function(){
			var height = $(window).height(), width = $(window).width()/2;
			canvas.width = width;
			canvas.height = height;

			if (canvas.getContext) {  
				var ctx = canvas.getContext("2d");  
				ctx.drawImage(document.images[0], 0,0);


				// ctx.strokeStyle = "#08f";  

				var top = $(document).scrollTop();
				$('#rules li:visible').each(function(){
					$rule = $(this);
					var y = $(this).offset().top - top;
					
					if(y < 0 || y > height){return;}
					
					y += ($(this).outerHeight()*scale)/2;
					
					var links = $(this).data('links') || [];
					var opacity = 0.25 + (0.75/links.length); // assign an opacity based on the number of links
					
					// #08f
					ctx.strokeStyle = "rgba(0, 136, 255, "+opacity+")"; 
					
					$.each(links, function(i,link){
						ctx.beginPath();  
						ctx.moveTo(link[1],link[0]);

						// ctx.lineTo(canvas.width,y);
						// make it slightly more fancy
						var controlX = (link[1] + width) / 2;
						ctx.bezierCurveTo(controlX, y,controlX, y, width,y)

						ctx.stroke();
					});
				});

			}
		});
		
		$(window).on('resize scroll', function(){
			$(document).trigger('render');
		});

		$('img').attr('src',data.img);
		$(document).trigger('render')
		setTimeout(function(){
			$(document).trigger('render');
		},250);
		
		// populate/hack
		$.when(data.css).done(function(data){
			var $rules = $('#rules').empty();
			$rules.css('left','0');
			var tmpl = '<li><span class="selector"></span></li>';
			var activeCount = 0;
			$.each(data, function(_i, arr){
				var rule = arr[0].split('{');
				var el = $(tmpl);
				el.find('.selector').text(rule[0])
				el.append('{' + rule.slice(1).join('{'))
				el.data('links', arr.slice(1));
				if(arr.length == 1){
					el.addClass('none');
				} else {
					activeCount++;
				}
				el.appendTo(rules);
				
			});
			
			$rules.animate({'left':'50%'});
			$('#rulecount .total').text(data.length + ' rules');
			$('#rulecount .active').text(activeCount + ' active');
			$(document).trigger('render');
		});
		
		$('#rulecount span').click(function(e){
			$(this).addClass('selected').siblings().removeClass('selected');
			var active = $(this).hasClass('active');
			$('li.none').each(function(){
				// this is ridiculously faster than .toggle
				this.style.display = active ? 'none' : 'block';
			})
			$(document).trigger('render');
		})
	}

	$(function(){
		$('form').submit(function(e){
			e.preventDefault();
			var $form = $(this);

			var url = $('[name=url]').val();

			if(typeof(_gaq) !== 'undefined')
				_gaq.push(['_trackEvent', 'requests', 'get', url]);
			
			if(history.replaceState)
				history.replaceState(null, "", "go?" + $.param({url:url}));

			var loadedYet;
			$form.find('input').blur().animate({width:0, opacity:0}, function(){
				$form.slideUp();
				if(!loadedYet) $('#loading').animate({left:'50%'});
				
			});


			$.get('/data',$form.serializeArray())
			.pipe(JSON.parse)
			.done(function(){
				loadedYet = true;
				$('#loading').animate({left:'0%'});
			})
			.done(load)
			.fail(function(){
				$('#loading').html('&hellip;failed to load')
			});

			
		})



		// maybe spark it off?
		if(window.location.search && window.location.search.indexOf('?url=') === 0){
			var url = decodeURIComponent(window.location.search.substr(5))
			console.log("--", url);
			$('[name=url]').val(url);
			$('form').submit();
		}

		
		
		
		// $form = $('form');

		// $('#loading').show();

		$('#sites li').click(function(){
			$('[name=url]').val($(this).text());
			$('form').submit();
		});
		
		$('#zoom').toggle(function(){
			scale = 1/($('ol').height() / $(window).height());
			$('ol').css({'-webkit-transform':'scale('+scale+')', backgroundColor:'#f5f5f5'});
			setTimeout(function(){
				$(document).trigger('render');
			},500);
			
		},function(){
			$('ol').css({'-webkit-transform':'scale(1)', backgroundColor:'#fff'});
			
			setTimeout(function(){
				$(document).trigger('render');
			},500);
		})
	});


  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35774866-1']);
  _gaq.push(['_setDomainName', 'wtcss.benjaminbenben.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>
{'fraction_non_alphanumeric': 0.23229498601807894, 'fraction_numerical': 0.023801781882031605, 'mean_word_length': 3.9115298626636856, 'pattern_counts': {'":': 0, '<': 137, '<?xml version=': 0, '>': 137, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, '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': '7345558', 'n_tokens_mistral': 6687, 'n_tokens_neox': 5596, 'n_words': 921}