A Pen by Luca Demian

Thumbnail
This awesome code was written by lucademian_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lucademian_ ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Luca Demian</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
	<div id='logo'><img src='http://lucademian.com/streamlogo.png' alt='Logo'><span> iPirate</span></div>
	<div id='searchbar'><i class="material-icons">search</i><form id='search-form'><input type='text' placeholder='Search movies'></form></div>
</header>
<div id='content' class='active'>
	<div id='media'>
		<div id='search-results'></div>
		<div id='new'></div>
		<div id='trending'></div>
		<div id='coming-soon'></div>
		<div id='favorites'></div>
		<div id='watch-later'></div>
	</div>
	<div id='menu'>
		<nav>
			<ul>
				<li id='search-results-link' class='disabled'>Search Results</li>
				<li id='new-link' class='disabled'>New Releases</li>
				<li id='trending-link' class='disabled'>Trending</li>
				<li id='coming-soon-link' class='disabled'>Coming Soon</li>
				<li id='favorites-link' class='disabled'>Favorites</li>
				<li id='watch-later-link' class='disabled'>Watch Later</li>
			</ul>
		</nav>
		<div id='menu-divider'></div>
		<div id='share-buttons'>
			<a href='#'><img src='https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/paypal-128.png' alt='Donate via PayPal'></a>
			<a href='#'><img src='https://ip.bitcointalk.org/?u=https%3A%2F%2Fdl.dropboxusercontent.com%2Fu%2F59597%2FBC_graphics%2FBC_Logo_.png&t=564&c=Lg_MT9sxZlNbYA' alt='Donate via Bitcoin'></a>
		</div>
	</div>
</div>
<div id='movie-info' class='active'>

</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/lucademian_/a-pen-by-luca-demian-WxrYJR */
@import url(https://fonts.googleapis.com/css?family=Titillium+Web|Ubuntu|Droid+Sans|Cabin);
body, html{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
header{
	background:rgb(255, 66, 79);
	width:100%;
	height:70px;
	position:absolute;
	z-index:9999;
	-webkit-box-shadow: 0px 0px 23px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 23px -1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 23px -1px rgba(0,0,0,0.75);
}
#logo{
	font:30px Cabin, Droid Sans, Ubuntu, Titillium Web;
	background:rgb(248, 55, 69);
	width:270px;
	height:100%;
	text-align:center;
	color:#FFF;
	vertical-align:middle;
	line-height:100%;
	vertical-align:middle;
	padding-top:17px;
	box-sizing:border-box;
}
#logo span{vertical-align:middle;padding-left:5px;}
#logo img{
	height:22px;
	vertical-align:middle;
}
#searchbar{
	position:absolute;
	top:20px;
	left:300px;
}
#searchbar .material-icons{
	color:rgb(255, 195, 199);
	vertical-align:middle;
}
#searchbar input, #searchbar input::-webkit-input-placeholder{
	border:none;
	background:none;
	color:rgb(255, 195, 199);
	vertical-align:middle;
	font:17px ubuntu;
}
#searchbar input{
	margin-left:10px;
}
#searchbar input:focus{
	outline:none;
}
#searchbar form{
	display:inline-block;
}

#media{
	background:rgb(34, 43, 49);
	width:100%;
	min-height:100%;
	position:absolute;
	top:0;
	padding-left:300px;
	padding-bottom:60px;
	box-sizing:border-box;
}
#menu{
	min-height:100%;
	width:270px;
	background:rgb(25, 28, 31);
	position:absolute;
	top:0;
	padding-top:100px;
	box-sizing:border-box;
}
#menu nav li{
	list-style:none;
	color:rgb(216, 231, 241);
	font:20px ubuntu;
	padding:13px;
	width:100%;
	padding-left:50px;
	cursor:pointer;
	box-sizing:border-box;
	transition:all 0.3s;
}
#menu nav li.disabled{
	color:rgb(45, 48, 51);
	cursor:default;
}
#menu nav ul{
	padding:0;
}
#menu nav li.active{
	background:rgb(34, 43, 49);
	color:rgb(245, 84, 95);
}
#menu-divider{
	width:80%;
	height:1px;
	background:rgb(45, 48, 51);
	margin-left:10%;
	margin-top:30px;
	border-radius:1px;
}
.subject-title{
	font:40px ubuntu;
	color:#FFF;
	margin:20px;
	margin-bottom:30px;
	margin-left:30px;
	margin-top:100px;
}

.card{
	width:200px;
	position:relative;
	text-align:center;
	box-sizing:border-box;
	display:inline-block;
	margin-left:30px;
	vertical-align:top;
}
.card .background{
	width:100%;
	display:inline-block;
	position:relative;
	cursor:pointer;
}
.card .description{
	font:17px droid sans;
	overflow-y:scroll;
	color:#EDEDED;
	height:200px;
}
.card .info-card{
	width:600px;
	height:0px;
	background:#191c1f;
	box-sizing:border-box;
	text-align:left;
	position:relative;
	margin-top:50px;
	top:100%;
	left:0px;
	overflow-x:hidden;
	overflow:hidden;
	transition:height 0.3s 0.2s, padding 0.1s 0.4s;
	
}
.card .close{
	font-size:50px;
	position:absolute;
	top:-20px;
	right:0;
}
.card .close .material-icons{
	font-size:25px;
	color:#FFF;
	cursor:pointer;
}
.card .info-card.active{
	height:300px;
	transition:height 0.3s;
	padding:20px;
}
.card .info-card.active .buttons{
	left:10px;
	transition:left 0.2s 0.3s;
}
.card .buttons{
	left:-300px;
	position:absolute;
	bottom:10px;
	transition:left 0.2s;
}
.card .buttons *{
	color:#FFF;
	font-size:50px;
	margin-left:10px;
}
.card .info-card iframe{
	float:right;
	margin-left:15px;
	margin-bottom:15px;
}
.card .description::-webkit-scrollbar {
  width: 8px;
}

.card .description::-webkit-scrollbar-thumb:vertical {
  margin: 5px;
  background-color: #999;
  -webkit-border-radius: 5px;
}

.card .description::-webkit-scrollbar-button:start:decrement,
.card .description::-webkit-scrollbar-#profile:end:increment {
  height: 5px;
  display: block;
}
.card .background:hover .description{
	transform:rotateY(0deg);
	left:0;
}
.card .background img{
	width:100%;
	transform-origin:0 100%;
	-webkit-box-shadow: 0px 0px 54px -7px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 54px -7px rgba(0,0,0,1);
	box-shadow: 0px 0px 54px -7px rgba(0,0,0,1);
/* 	-webkit-box-shadow: 0px 39px 80px -42px rgba(0,0,0,1);
	-moz-box-shadow: 0px 39px 80px -42px rgba(0,0,0,1);
	box-shadow: 0px 39px 80px -42px rgba(0,0,0,1); */
}
.card .rating{
	font:20px droid sans;
	color:#FFF;
	background:rgb(255, 177, 10);
	display:inline-block;
	padding:5px;
	border-radius:50px;
	padding-left:15px;
	padding-right:15px;
	position:relative;
	bottom:-18px;
	z-index:2;
}
.card .title{
	font:20px ubuntu;
	text-align:left;
	margin-top:15px;
	color:#FFF;
}
.card .subject{
	font:14px ubuntu;
	color:rgb(161, 202, 229);
	text-align:left;
	margin-top:5px;
}
#share-buttons{
	text-align:left;
	padding-top:30px;
	padding-left:50px;
	padding-bottom:30px;
}
#share-buttons img{
	width:40px;
	margin:5px;
}
#share-buttons img:first-of-type{
	margin-left:0;
}
#no-results{
	font:27px ubuntu;
	text-align:center;
	color:#FFF;
	filter:brightness(0.8);
	-webkit-filter:brightness(0.8);
	-moz-filter:brightness(0.8);
	line-height:2em;
	padding-top:60px;
}
#no-results img{
	height:80px;
}


/*Downloaded from https://www.codeseek.co/lucademian_/a-pen-by-luca-demian-WxrYJR */
//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
//   @callback: function to be called when even triggers
//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not
//              caused by blur.
// Requires jQuery 1.7+
//
;(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 1e3; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress paste',function(e){
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too preemptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type=='keyup' && e.keyCode!=8) return;
                    
                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function(){
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    }, timeout);
                }).on('blur',function(){
                    // If we can, fire the event since we're leaving the field
                    doneTyping(el);
                });
            });
        }
    });
})(jQuery);


var movies = {"new" : {"name": "New Releases", "id" : "new", "cards" : []}, "trending" : {"name": "Trending", "id" : "trending", "cards" : [11]}, "comingSoon" : {"name": "Coming Soon", "id" : "coming-soon", "cards" : []}, "favorites" : {"name": "Favorites", "id" : "favorites", "cards" : []}, "watchLater" : {"name": "Watch Later", "id" : "watch-later", "cards" : [40]}, "search" : {"name": "Search Results", "id" : "search-results", "cards" : []}};

var addPage = function(page){
	page = movies[page];
	$("#" + page.id).empty();
	if(page.cards.length > 0){
		$("#" + page.id + "-link").removeClass('disabled');
		$("#" + page.id).html("<div class='subject-title'>" + page.name + "</div>");
		for(var i = 0; i < page.cards.length; i++){
			key = page.cards[i];
			var card = {};
			$.get("https://yts.ag/api/v2/movie_details.json?movie_id=" + key, function(response){
				if(response.status == "ok"){
					card.description = response.data.movie.year + "|" + response.data.movie.runtime + " Min.|" + response.data.movie.mpa_rating + "<br><br>"+ response.data.movie.description_intro;
					card.rating = response.data.movie.rating;
					card.image = response.data.movie.medium_cover_image;
					card.title = response.data.movie.title;
					card.subject = response.data.movie.genres.toString().replace(/,/g, ", ");
					card.magnet = "magnet:?xt=urn:btih:" + response.data.movie.torrents[0].hash + "&dn=" + encodeURIComponent(response.data.movie.title + "(" + response.data.movie.year + ")[" + response.data.movie.torrents[0].quality + "][YTS.AG]") +  "&tr=udp%3A%2F%2Fglotorrents.pw%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Fp4p.arenabg.ch%3A1337&tr=udp%3A%2F%2Ftracker.internetwarriors.net%3A1337";
					
					$('#' + page.id).append("<div class='card'>\
					<div class='rating'>"+card.rating+"</div>\
					<div class='background'><img src='"+card.image+"' alt='"+card.title+" Cover'></div>\
					<div class='title'>"+card.title+"</div>\
					<div class='subject'>"+card.subject+"</div>\
					<div class='info-card'><div class='close'><i class='material-icons'>close</i></div><div class='description'><iframe width='280' height='160' src='https://www.youtube.com/embed/"+response.data.movie.yt_trailer_code+"' frameborder='0' allowfullscreen></iframe>"+card.description+"</div>\
						<div class='buttons'><i class='material-icons'>play_circle_outline</i><i class='material-icons'>playlist_add</i><a href='"+card.magnet+"'><i class='material-icons'>cloud_download</i></a></div>\
					</div>\
					</div>");
					
				}
			});
		}
	}
	
};

var updateScroll = function(scrollTop){
	var scrolledToResults = false;
	if($("#search-results").length > 0)
	{
		if(scrollTop > $('#search-results').offset().top-200)
		{
			scrolledToResults = true;
		}
		else
		{
			scrolledToResults = false;
		}
	}
	
	if(scrollTop > $('#watch-later').offset().top-200 || scrollTop + $(window).height() == $(document).height())
	{
		$('#menu li').removeClass('active');
		$('#menu #watch-later-link:not(.disabled)').addClass('active');
	}
	else if(scrollTop > $('#favorites').offset().top-200)
	{
		$('#menu li').removeClass('active');
		$('#menu #favorites-link:not(.disabled)').addClass('active');
	}
	else if(scrollTop > $('#coming-soon').offset().top-200)
	{
		$('#menu li').removeClass('active');
		$('#menu #coming-soon-link:not(.disabled)').addClass('active');
	}
	else if(scrollTop > $('#trending').offset().top-200)
	{
		$('#menu li').removeClass('active');
		$('#menu #trending-link:not(.disabled)').addClass('active');
	}
	else if(scrollTop > $('#new').offset().top - 200)
	{
		$('#menu li').removeClass('active');
		$('#menu #new-link:not(.disabled)').addClass('active');
	}
	else if(scrolledToResults)
	{
		$('#menu li').removeClass('active');
		$('#menu #search-results-link:not(.disabled)').addClass('active');
	}
}
var search = function(query){
	
	if(query.length > 0){
		$("#search-results-link").show();
		$("#search-results").empty();
		key = encodeURIComponent(query);
		
		$.get("https://yts.ag/api/v2/list_movies.json?query_term=" + key, function(response){
			if(response.status == "ok"){
				movies.search.cards = [];
				if(response.data.movie_count >0){
					for(var i=0; i<response.data.movie_count; i++){
						movies.search.cards.push(response.data.movies[i].id);
					}
					addPage("search");
				}else{
					$("#search-results").html("<div class='subject-title'>Search Results</div><h1 id='no-results'><img src='http://lucademian.com/no-results.png' alt='No Results'><br>Nothing Found</h1>");
				}
			}
		});
	}else{
		$("#search-results").empty();
		$("#search-results-link").hide();
	}
	updateScroll($(document).scrollTop());
}


addPage("new");
addPage("trending");
addPage("comingSoon");
addPage("favorites");
addPage("watchLater");
$('#menu li:not(.disabled):first-of-type').addClass('active');

$("#search-results-link").hide();
$("#searchbar input").donetyping(function(e){
	search($("#searchbar input").val());
});

$("#search-form").submit(function(e){
	e.preventDefault();
	search($("#searchbar input").val());
});

//updateScroll($(document).scrollTop());

$('body').on('click', '.background', function(){
	$('.info-card').removeClass('active');
	$(this).siblings('.info-card').toggleClass('active');
});
$('body').on('click', '.close', function(){
	$(this).parents('.info-card').removeClass('active');
});
$(document).scroll(function(){
	var scrollTop = $(document).scrollTop();
	if(scrollTop > ($('#menu').outerHeight() - window.innerHeight))
	{
		$('#menu, header').css({'position':'fixed', 'top':-($('#menu').outerHeight() - window.innerHeight)+'px'});
	}
	else
	{
		$('#menu, header').css({'position':'absolute', 'top':'0'});
	}
	
	updateScroll(scrollTop);
});

$('#new-link:not(.disabled)').click(function(){
	$('body').animate({scrollTop:$('#new').offset().top});
	$('#menu li').removeClass('active');
	$(this).addClass('active');
});
$('#trending-link:not(.disabled)').click(function(){
	$('body').animate({scrollTop:$('#trending').offset().top});
	$('#menu li').removeClass('active');
	$(this).addClass('active');
});
$('#coming-soon-link:not(.disabled)').click(function(){
	$('body').animate({scrollTop:$('#coming-soon').offset().top});
	$('#menu li').removeClass('active');
	$(this).addClass('active');
});
$('#favorites-link:not(.disabled)').click(function(){
	$('body').animate({scrollTop:$('#favorites').offset().top});
	$('#menu li').removeClass('active');
	$(this).addClass('active');
});
$('#watch-later-link:not(.disabled)').click(function(){
	$('body').animate({scrollTop:$('#watch-later').offset().top});
	$('#menu li').removeClass('active');
	$(this).addClass('active');
});

Comments