<!--
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&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");
}
}
This Pen doesn't use any external CSS resources.