LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




CodePen Stats Checker

CSS
html, body{margin:0;background:#ECF0F1;font:normal 16px/22px 'Open Sans', sans-serif;}
*:focus{outline:none}
::-webkit-input-placeholder{color:rgba(255,255,255, .5)}
::-moz-placeholder {color:rgba(255,255,255, .5)}
:-moz-placeholder {color:rgba(255,255,255, .5)}
:-ms-input-placeholder {color:rgba(255,255,255, .5)}
		
a{text-decoration:none}
a:hover{opacity:.6;text-decoration:underline}
h1, p{margin:0}
form h1{position:absolute;top:-50px;width:100%;left:0;color:#193B48;text-align:center;text-shadow:1px 1px #fff;}
label{width:100px;float:left;line-height:50px}
input[type=text]{background:rgba(255,255,255, .2);border:0;margin:0;font:normal 16px/20px 'Open Sans', sans-serif;padding:14px 10px;
		color:#fff;width:100px;text-align:center;vertical-align:baseline;width:200px;float:left}
input[type=text]:active,
input[type=text]:focus{box-shadow:0 0 4px rgba(255,255,255, .8)}
input[type=submit]{display:block;margin-top:40px;width:100%;background:#193B48;box-shadow:0 2px 0 #000;border:0;color:#fff;
		font:800 22px/50px 'Open Sans', sans-serif;text-transform:uppercase;float:left;position:relative}
input[type=submit]:active{top:2px;box-shadow:none}
		
.glow{animation:glow 1s infinite}
@keyframes glow{
	0,100%{color:#fff}
	50%{color:#FDA543}
}
.error-message{opacity:0;;z-index:-1;transition:opacity 250ms;color:#fff;background:#F63D3A;line-height:52px;text-align:center;width:100%;position:absolute;top:-65px;left:0}
.error-message.shown{opacity:1;z-index:1}
		
/*Icons, 16x16*/
.icn::before{display:inline-block;width:16px;height:16px;content:'';position:relative;top:3px;margin-right:5px;}
.icn.icn-codepen::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAt0lEQVR42sXTsQqCUBTG8Qjc09ldN4V6l3qP2ut1stUhHSvdLhgU+h6123/4BiMvGQUd+MHlePjg6HXUtu1XfhdgqbG81JCAKQqUOg8OcLCGwVGMes67gAgZdvCwFA8JckS2gAluyBQWoJJAvb1m3L4AH1ekOKHGQmr1Us34toCLhgo0mEtjD7CvEKLCGWFnhXvvCqoYOZLOS1zBxVbP4iGfcQODgxj1nE8u0gylcH6q313l//+ND240fI6rONevAAAAAElFTkSuQmCC);}
.icn.icn-heart::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAArElEQVQ4jc3SPQrCQBQE4A/1BKKnEI8h2CjY23iA9HoEbyGIB7G10AvYRQRLbUPUwkVCSPxJIQ5Mse/NzHu7LP+ENla4IMYU9cAZ9jhiiVbe3MAOtxwXgfn6NgQ/0S8QvWMPaiGgU+HK3WzAoUJAnD00cSpYs4xnBQ85QPKBOcGwbK3Rm5AkaF5ijLTAnIbeR5jgmjFfQ+0rRJmAqExUL2tg4/FD15h/O/13uAP+TU7uPo9xKwAAAABJRU5ErkJggg==);}
.icn.icn-comment::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAKxJREFUOI210jsOQUEYxfGfR4OSXdiChF0IUdiItSgVeq9IJBoRpd4K1CqvwsUUXNcVJznJTCbn/33zzfCjMjFnWVSi9R7npMAmZjjgEvmAOVpxRctYBKF3XgadPZTDKkH47jXyIaD9RfjuDrdBQf3DbF6pEQJOKQCnEDBNAZiEmwxGkt9/5sVzFjFIEB6iFNdaDX3scAyCY9HgvlXP8wMV0gCgiy02qKaF/EdXo/NMvKd9uQsAAAAASUVORK5CYII=);}
.icn.icn-view::before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAA7ElEQVQ4jcXSMUpDURAF0BMhYi1oJNhZGYighQsQK7G0cx+CLsR96A4SIdlBUNCIRKy0UFEQRC2cBy+PfE2lA5///ty58/69M/x31H7Ir6AZ33e4wudvDWdxgMsozp8hDjFXRW5hkBGe0Ecvzil/jtWSvI7HrOgMSxneQCfDH9BO4CJuMvAVy9gJ3UPshh8vhaQFOC209qLxdZYbRa5b1J7MYL6Q8xHvfEK1AktRhw28TZCwFTffYnuChFF4A/bxbnoTn7FZ/I0945OoGuMF1kpyiiaOcW/crOT6kWKRqla57nuVG0GeepX/Pr4AgepbklEkZ7YAAAAASUVORK5CYII=);}
		
		
/*Preloader*/
.preload{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0;height:0;
	transition:height 450ms, width 450ms}
.loading .preload{width:100px;height:100px;opacity:1}
.preload hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.preload :first-child{background:#19A68C;animation-delay:-1.5s}
.preload :nth-child(2){background:#F63D3A;animation-delay:-1s}
.preload :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.preload :last-child{background:#193B48}
.preload::after{position:absolute;bottom:-70px;left:-50px;width:200px;text-align:center;color:#19A68C;}
.loading .preload::after{content:attr(data-preload);}
@keyframes spin{
  /*Since IE HATES transforms, we're gonna use abs. positioning*/
  0%,100%{top:0;left:0}
  25%{top:0;left:60%}
  50%{top:60%;left:60%}
  75%{top:60%;left:0}
}
		
form{width:320px;background:#19A68C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:50px;
	border-radius:5px;color:#fff;transition:all 450ms;z-index:10}
.loading form,
.loaded form{top:-50%}
	
#chart{width:100%;opacity:0;transition:opacity 450ms;overflow:hidden;}
.loaded #chart{opacity:1}
.overview-bar{width:100%;font-size:14px;color:#19A68C;margin:5px 0 20px;text-align:center}
.overview-bar .icn{margin:0 10px;}
.chart-username{color:#19A68C}
.chart-label{color:#193B48;font-size:13px;}
			
.closeBtn{width:40px;height:40px;opacity:0;position:fixed;top:12px;right:-40px;cursor:pointer;transition:all 250ms;}
.closeBtn:hover{transform:rotate(180deg)}
.closeBtn::after,
.closeBtn::before{content:'';transition:background 250ms;width:56px;height:2px;background:#F63D3A;position:absolute;top:19px;left:-8px;transform:rotate(45deg)}
.closeBtn::after{transform:rotate(-45deg)}
.closeBtn:hover::before,
.closeBtn:hover::after{background:#19A68C}
.loaded .closeBtn{right:12px;opacity:1}
JS
$(function(){
	var $preloader = $('.preload'),
	    $error     = $('.error-message'),
	    $username  = $('#username');
	
	$('form').on('submit', function(e){
		e.preventDefault();
		
		var username = $username.blur().val();
		
		if(username.length > 0){
			$('body').addClass('loading');
			
			var objData = {
				comments : 0,
			    hearts   : 0,
			    views    : 0,
			    pensNo   : 0,
			    
			    // Christmas Tree for teh lolz =3
			    
			    aComments  :     []
			    ,aHearts   :    [  ]
			    ,aViews    :   [    ]
			    ,aTitles   :  [      ]
			    ,aLinks    :     []
			}
		    
			getPensData(1, username, objData);
		}
		else $('label[for=username]').addClass('glow');
	});
	
	$username.on('focus', function(){
		$('label[for=username]').removeClass('glow');
		$error.removeClass('shown');
	});
	
	$('.closeBtn').on('click', function(){
		$('body').removeClass('loaded');
		setTimeout(function(){
			$('#chart').empty();
		}, 450);
	});
	
	var getPensData = function(page, username, objData){
		$.ajax({
			dataType : 'jsonp',
			jsonp    : 'jsonp',
			url      : 'http://codepen-awesomepi.timpietrusky.com/'+username+'/public/'+page,
			success  : function(data){
				var status  = data.status.code,
				    content = data.content;
			
				if(content){
					var pens = content.pens;
					$preloader.attr('data-preload', 'Checking pens '+objData.pensNo +' to '+ (pens.length + objData.pensNo) +'...');
					
					for(var i=0; i < pens.length; i++){
						var pen         = pens[i],
						    penTitle    = pen.title ? pen.title : 'Untitled Pen by '+username,
						    penViews    = pen.views,
						    penComments = pen.comments,
						    penHearts   = pen.hearts;
						
						objData.views += penViews;
						objData.aViews.push(penViews);
						
						objData.comments += penComments;
						objData.aComments.push(penComments);
						
						objData.hearts += penHearts;
						objData.aHearts.push(penHearts);
						
						objData.aTitles.push(penTitle);
						
						objData.aLinks.push(pen.url['details']);
						objData.pensNo++;
					}
					getPensData(page+1, username, objData);
				}
				else{
					$('body').removeClass('loading');
					$preloader.removeAttr('data-preload');
					
					if(objData.pensNo > 0) runChart(username, objData);
					else if(status == 1337) $error.text('That user does not exist, Monsieur.').addClass('shown');
					else $error.text('That user has no pens, Monsieur.').addClass('shown');
				}
			},
			error : function(){
				$('body').removeClass('loading');
				$preloader.removeAttr('data-preload');
				
				$error.text('Whoops! Something went wrong...').addClass('shown');
			}
		});
	}
	
	var addLegendLinks = function(links){
		// hacky way of adding label anchors because they have
		// a tendency to break after using the legend filters
		// if inserted right in the formatter
		$.each($('.chart-label'), function(index){
			$(this).attr('href', links[index]);
		});
	}
	
	var runChart = function(username, objData){
		// make sure the chart takes at least the entire height of the screen
		var chartMinHeight = objData.pensNo*40,
		    windowHeight   = window.innerHeight,
		    chartHeight    = chartMinHeight > windowHeight ? chartMinHeight : windowHeight;
		
		$('#chart').highcharts({
			chart: {
				type: 'bar',
				backgroundColor: '#ECF0F1',
				height: chartHeight,
				events: {
					load : function(){
						addLegendLinks(objData.aLinks);
						$('body').addClass('loaded');
					},
					redraw : function(){
						addLegendLinks(objData.aLinks);
					}
				}
			},
			colors: ['#F63D3A', '#193B48', '#19A68C'],
			title: {
				useHTML : true,
				text: '

'+username +'\'s Pens Overview

'+ '

'+ ''+objData.pensNo+''+ ''+objData.views+''+ ''+objData.hearts+''+ ''+objData.comments+''+ '

', style: { color: '#193B48' } }, yAxis: { title : { text : '' } }, xAxis: { categories: objData.aTitles, labels: { useHTML : true, formatter: function(){ return ''+this.value+''; } } }, tooltip: { followPointer : true }, credits: { enabled: false }, plotOptions: { bar : { stacking: 'normal' }, areaspline : { fillOpacity: 0.1 }, series : { groupPadding: .15 } }, series: [{ name: 'Hearts', data: objData.aHearts }, { name: 'Comments', data: objData.aComments }, { name: 'Views', data: objData.aViews }] }); } });
Host Instantly Drag and Drop Website Builder

 

Description

This is deprecated and no longer functional, but Luke fixed it here: https://codepen.io/LukeXF/details/PGOBzk/ so you're in luck :)
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID