<!--
Music Collection - Demo
-->

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

<div class="container">
	<div class="desc">Hey there!<br><br>This is a clickable <b>mock-up</b> for a music collection / blog thing. So far just a bit of unresponsive design.<br><br>If you have a minute to spare, I'd love to get your feedback <b><a href="https://goo.gl/forms/RufXxLeaBMF6lvVG3" target="_blank">here</a></b>.<br><br>Thanks!</div>

	<div class="frame"></div>
	<div class="hbutton"></div>
	<div class="bg">
		<div class="log">LOGO</div>

		<div class="pcontrols">
			<div class="backbut"><i class="fa fa-backward" aria-hidden="true"></i></div>
			<div class="playbut"><i class="fa fa-play" aria-hidden="true"></i></div>
			<div class="fwdbut"><i class="fa fa-forward" aria-hidden="true"></i></div>
			<svg width="100%" height="100%" viewBox="0 0 900 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
		  <path id="svg_1" fill="none" stroke="#020000" stroke-width="5px" d="m238.00333,249.33333l-106.066,-106.066l-106.066,106.066l106.066,106.066l106.066,-106.066z"/>
  <path id="svg_2" fill="none" stroke="#020000" stroke-width="5px" d="m874.40333,249.33333l-106.066,-106.066l-106.066,106.066l106.066,106.066l106.066,-106.066z"/>
  <path id="svg_3" fill="none" stroke="#020000" stroke-width="5px" d="m662.26733,249.33333l-212.132,-212.132l-212.132,212.132l212.132,212.132l212.132,-212.132z"/></svg>
		</div>
		<div class="ptitle">LENZMAN - In My Mind</div>
		<div class="pbox">
			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/7m0p-sp3Udw?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
		</div>

		<div class="omenu">
			<div class="oicon"><i class="fa fa-cog" aria-hidden="true"></i></div>
			<div class="otxt oback">SEARCH</div>
			<div class="boicon oback"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></div>
		</div>

		<div class="obox">
			<div class="cobox_search otitle"><i class="fa fa-search" aria-hidden="true"></i></div>
			<div class="cobox_filter otitle"><i class="fa fa-filter" aria-hidden="true"></i></div>
			<div class="cobox_about otitle"><i class="fa fa-question" aria-hidden="true"></i></div>
			<div class="cobox">
				<input class="searchinput ser" autocomplete="off" type="text" placeholder="">
				<div class="sresult ser">Clickable search result</div>

				<div class="filteroptions fil">
					<div class="swcont">
						<input type="checkbox" id="A" name="selgen" value="dnb">
						<label for="A"><span class="box">Filter option A</span></label>
					</div>
					<div class="swcont">
						<input type="checkbox" id="B" name="selgen" value="electro">
						<label for="B"><span class="box">Filter option B</span></label>
					</div>
					<div class="swcont">
						<input type="checkbox" id="C" name="selgen" value="reggae">
						<label for="C"><span class="box">Filter option C</span></label>
					</div>
					<div class="swcont">
						<input type="checkbox" id="D" name="selgen" value="reggae">
						<label for="D"><span class="box">Filter option D</span></label>
					</div>
					<div class="swcont">
						<input type="checkbox" id="E" name="selgen" value="reggae">
						<label for="E"><span class="box">Filter option E</span></label>
					</div>
				</div>

				<div class="abouttxt abo">For now, just a demo...<br>Maybe I'll do something with it at some point... ¯\_(ツ)_/¯<br><br>Take the <b><a style="text-decoration:none" href="https://goo.gl/forms/RufXxLeaBMF6lvVG3" target="_blank">Survey!</a></b></div>

			</div>
		</div>


		<div class="imenu">
			<div class="iicon"><i class="fa fa-info-circle" aria-hidden="true"></i></div>
			<div class="itxt ititle">LENZMAN - In My Mind</div>
			<div class="biicon ititle"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div>
		</div>

		<div class="ibox">
			<div class="cibox">Track found because it was featured<br>in <a href="http://www.randommovement.org/" target="_blank">Random Movements</a> latest<br>podcast.<br><br>Find more from Lenzman <a href="https://www.youtube.com/channel/UC81BpzDCkfvp86EYi6KFETA/videos" target="_blank">here</a>.</div>
		</div>


		<div class="tableview">
			<div class="tablebox">
				<table class="tracklist">
					<tr>
						<td>007</td>
						<td>-</td>
						<td>LENZMAN - In My Mind</td>
						<td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>97</td>
					</tr>
					<tr>
						<td>006</td>
						<td>-</td>
						<td>ARTIST NAME - Song Title</td>
						<td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>23</td>
					</tr>
					<tr>
						<td>005</td>
						<td>-</td>
						<td>MUSICIAN - Track Name</td>
						<td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>37</td>
					</tr>
					<tr>
						<td>004</td>
						<td>-</td>
						<td>BANDNAME - Piece of Art</td>
						<td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>12</td>
					</tr>
					<tr>
						<td>003</td>
						<td>-</td>
						<td>ALIAS - Composition</td>
						<td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>15</td>
					</tr>
					<tr>
						<td>002</td>
						<td>-</td>
						<td>AND - So On</td>
						<td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>333</td>
					</tr>
					<tr>
						<td>001</td>
						<td>-</td>
						<td>AND - So Forth</td>
						<td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>44</td>
					</tr>
				</table>
			</div>
		</div>


	</div>
</div>
/*
Music Collection - Demo
*/
body {
	background: #7f1978;
	background: -moz-linear-gradient(45deg, #7f1978 0%, #75d3d8 100%);
	background: -webkit-linear-gradient(45deg, #7f1978 0%, #75d3d8 100%);
	background: linear-gradient(45deg, #7f1978 0%, #75d3d8 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7f1978', endColorstr='#75d3d8', GradientType=1);
	/*width: 100%;
	height: 100%;*/
}


a:link,
a:visited {
	color: #222;
}

.tableview {
	position: absolute;
	left: 50%;
	top: 337px;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	height: 128px;
	width: 244px;
	overflow: hidden;
	/*background: #666;*/
}

.tablebox {
	left: 0;
	top: 0px;
	height: 128px;
	width: 262px;
	font-family: 'Roboto Condensed', sans-serif;
	color: #222;
	font-size: 14px;
	overflow: auto;
}

.tracklist {
	width: 100%;
}

td {
	padding-top: 5px;
	/*border: 1px solid #222;*/
	cursor: pointer;
}

.t3 {
	text-align: right;
	font-size: 10px;
}


/*Options Panel*/

.swcont {
	position: relative;
	left: 35px;
	top: 7px;
	display: block;
	padding: 0px;
	margin-bottom: 10px;
	height: 20px;
}

input[type="checkbox"] {
	display: none;
}


/* listspans */

.swcont span::before,
.swcont span::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}


/* Check-boxes */

.swcont span.box:hover {
	cursor: pointer;
}

.swcont span.box::before {
	width: 16px;
	height: 16px;
	left: -19px;
	background-color: transparent;
	border: 2px solid #222;
	transition: border-color .2s;
}

.swcont span.box::after {
	content: '\f00c';
	font-family: 'FontAwesome';
	left: -15px;
	top: 3px;
	color: transparent;
}

input[type="checkbox"]:checked + label span.box::after {
	color: #222;
	font-size: 13px;
}

label {
	color: #222;
	font-size: 15px;
	position: relative;
	padding: 0px 5px 0px 10px;
	margin: 10px auto;
	height: 30px;
}

.filteroptions {
	position: absolute;
	top: 3px;
	border: none;
	left: 0px;
	width: 130px;
	height: 102px;
	/*background: #AAA;*/
	font-size: 15px;
	font-family: 'Roboto Condensed', sans-serif;
	color: #222;
}

.searchinput {
	position: absolute;
	top: 20px;
	box-sizing: border-box;
	border: none;
	padding: 5px;
	left: 50%;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	width: 170px;
	height: 30px;
	resize: none;
	font-size: 16px;
	font-family: 'Roboto Condensed', sans-serif;
	border: 2px solid #BBB;
	text-align: center;
}

.searchinput:focus{
	outline: none;
}

.sresult{
	position: absolute;
	top: 60px;
	left: 50%;
	width: 170px;
	text-align: center;
	font-weight: bold;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	cursor: pointer;
	display: none;
}

.abouttxt {
	position: absolute;
	top: 0;
	left: 0px;
	height: 91px;
	width: 170px;
	padding: 7px;	
	/*background: #39A;*/
}

.fil{
	display: none;
}
.abo{
	display: none;
}
/*Options Panel End*/

.itxt,
.otxt {
	position: absolute;
	height: 40px;
	width: 180px;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	color: #222;
	font-size: 16px;
	font-weight: bold;
	line-height: 40px;
	white-space: nowrap;
	overflow: hidden;
}

.otxt {
	right: 40px;
}

.itxt {
	left: 40px;
}

.ititle,
.otitle,
.oback{
	display: none;
}

.biicon,
.boicon {
	position: absolute;
	top: 7px;
	font-size: 26px;
	color: #333;
	cursor: pointer;
}

.biicon {
	right: 30px;
}

.boicon {
	left: 30px;
}

.iicon,
.oicon {
	position: absolute;
	top: 6px;
	font-size: 26px;
	color: #333;
	cursor: pointer;
}

.iicon {
	left: 10px;
}

.oicon {
	right: 10px;
}

.omenu,
.imenu {
	position: absolute;
	top: 45px;
	height: 40px;
	width: 70px;
	/*background: #88A;*/
	border-radius: 20px;
	border: 1px solid #222;
	transition: all 0.5s ease-out;
}

.omenu {
	left: -25px;
}

.imenu {
	right: -25px;
}

.ibox,
.obox {
	position: absolute;
	top: 87px;
	height: 106px;
	width: 0px;
	background: #FFF;
	border-bottom: 1px solid #222;
	transition: all 0.4s ease-out;
	transition-delay: 0.1s;
}

.ibox {
	right: 0px;
}

.obox {
	width: 0px;
	/*border-right: 1px solid #222;*/
	left: 0px;
}

.cobox_search,
.cobox_filter,
.cobox_about {
	height: 35px;
	width: 35px;
	border-right: 1px solid #222;
	text-align: center;
	line-height: 35px;
	font-size: 18px;
	cursor: pointer;
	color: #222;
}

.cobox_search,
.cobox_filter {
	border-bottom: 1px solid #222;
}

.cibox {
	height: 91px;
	width: 230px;
	font-family: 'Roboto Condensed', sans-serif;
	color: #222;
	font-size: 15px;
	padding: 7px;
	/*background: #A39;*/
}

.cobox {
	top: 0px;
	/*left: 37px;*/
	right: 0px;
	position: absolute;
	height: 104px;
	width: 191px;
	font-family: 'Roboto Condensed', sans-serif;
	color: #222;
	font-size: 15px;
	/*background: #A39;*/
	overflow-y: auto;
}

.backbut {
	position: absolute;
	top: 40px;
	left: 25px;
	font-size: 18px;
	cursor: pointer;
}

.playbut {
	position: absolute;
	top: 30px;
	left: 90px;
	font-size: 35px;
	cursor: pointer;
}

.fwdbut {
	position: absolute;
	top: 40px;
	left: 158px;
	font-size: 18px;
	cursor: pointer;
}

.pcontrols {
	position: absolute;
	left: 50%;
	top: 60px;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	height: 100px;
	width: 200px;
	/*background: #FFF;*/
}

.pbox {
	position: absolute;
	left: 50%;
	top: 200px;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	height: calc(0.563 * 240px);
	width: 240px;
	box-shadow: 0 0 50px rgba(0, 0, 0, .3);
}

.ptitle {
	position: absolute;
	top: 172px;
	width: 100%;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	color: #222;
	font-size: 18px;
}

.log {
	position: relative;
	text-align: center;
	top: 8px;
	font-family: 'Pacifico', cursive;
	font-size: 20px;
}

.container{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 500px;
	width: 500px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.desc{
	position: absolute;
	top: 70px;
	left: 0;
	height: 410px;
	width: 200px;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	color: #222;
	font-size: 22px;
}

.bg {
	position: absolute;
	top: 50%;
	left: 250px;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	height: 468px;
	width: 264px;
	background: #FFF;
	/*background: #9BF;
	/*opacity: 0.8;*/
	overflow: hidden;
}

.frame {
	position: absolute;
	top: 50%;
	left: 240px;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	height: 590px;
	width: 280px;
	background: #111;
	border-radius: 35px;
	border: 2px solid #443;
	box-shadow: 0 0 100px rgba(0, 0, 0, .4);
}

.hbutton {
	position: absolute;
	top: calc(50% + 263px);
	left: 361px;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	height: 38px;
	width: 38px;
	background: #111;
	border-radius: 35px;
	border: 2px solid #332;
}
//
//Music Collection - Demo
//


var iexp = false;
var oexp = false;
var playing = false;

//expand info
$(".iicon").click(function() {
	if (iexp) {
		HideImenu();
	} else {
		console.log("oi");
		$(".imenu").css("width", "280px");
		$(".imenu").css("background", "#FFF");
		//#778

		$(".ibox").css("width", "230px");
		$(".ibox").css("background", "#FFF");
		$(".ibox").css("border-left", "1px solid #222");

		$(".omenu").css("width", "0px");

		$(".ititle").css("display", "inline");

		iexp = true;
	}
});

$(".biicon").click(function() {
	HideImenu();
});

function HideImenu() {
	$(".imenu").css("width", "70px");
	$(".imenu").css("background", "none");

	$(".ibox").css("width", "0px");
	$(".ibox").css("background", "#FFF");
	HideBorder();

	$(".omenu").css("width", "70px");

	$(".ititle").css("display", "none");

	iexp = false;
}

function HideBorder() {
	setTimeout(function() {
		$(".ibox").css("border-left", "none");
		$(".obox").css("border-right", "none");
	}, 400);
}

//expand options
$(".oicon").click(function() {
	if (oexp) {
		HideOmenu()
	} else {
		console.log("oi");
		

		$(".omenu").css("width", "280px");
		$(".omenu").css("background", "#FFF");
		
		//$(".abouttxt").css("left", "block");

		$(".obox").css("width", "230px");
		$(".obox").css("background", "#FFF");
		$(".obox").css("border-right", "1px solid #222");

		$(".imenu").css("width", "0px");
		
		$(".oback").css("display", "block");
		DispOicons();

		oexp = true;
	}
});

function DispOicons() {
	setTimeout(function() {
		$(".otitle").css("display", "block");
	}, 400);
}

$(".boicon").click(function() {
	HideOmenu();
});

function HideOmenu() {
	$(".omenu").css("width", "70px");
	$(".omenu").css("background", "none");

	$(".obox").css("width", "0px");
	//cnobox display because left attach...
	//$(".abouttxt").css("display", "none");
	
	$(".obox").css("background", "#FFF");
	HideBorder();

	$(".imenu").css("width", "70px");

	$(".otitle").css("display", "none");
	$(".oback").css("display", "none");
	oexp = false;
}

//playbutton UI
$(".playbut").click(function() {
	if (playing) {
		$(".playbut").css("font-size", "35px");
		$(".playbut").css("left", "90px");
		$(".playbut").css("top", "30px");
		$(".playbut").html('<i class="fa fa-play" aria-hidden="true"></i>');
		playing = false;
	} else {
		$(".playbut").css("font-size", "33px");
		$(".playbut").css("left", "86px");
		$(".playbut").css("top", "32px");
		$(".playbut").html('<i class="fa fa-pause" aria-hidden="true"></i>');
		playing = true;
	}
});

//Options
$(".cobox_search").click(function() {
	$(".otxt").html('SEARCH');
	$(".cobox").css("overflow", "visible");
	$(".ser").css("display", "inline");
	$(".fil").css("display", "none");
	$(".abo").css("display", "none");
	DispSresult();
});
$(".cobox_filter").click(function() {
	$(".otxt").html('FILTER');
	$(".cobox").css("overflow", "auto");
	$(".fil").css("display", "inline");
	$(".ser").css("display", "none");
	$(".abo").css("display", "none");
});
$(".cobox_about").click(function() {
	$(".otxt").html('ABOUT');
	$(".cobox").css("overflow", "visible");
	$(".abo").css("display", "inline");
	$(".ser").css("display", "none");
	$(".fil").css("display", "none");
});


//Simulate search...
$(".searchinput").on("input", function() {
	DispSresult();
});

function DispSresult(){
		if($(".searchinput").val() != ""){
		$(".sresult").css("display", "inline");
	}else{
		$(".sresult").css("display", "none");
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js