Radio station UI example

HTML
<div class="page"> <div class="bg"></div> <div class="overlay"></div> <div class="cover-overlay"></div> <header> <div class="title">Online Радио</div> </header> <div class="panel panel-channel-list available"> <header> <div class="title">Радиостанции</div> </header> <div class="list"> <ul> <li> <div class="title"> <span class="name">RADIO ZUMA</span><span class="country">(TR)</span></div> <div class="categories">Pop, Electronic, Top 40</div> <div class="bitrate">64 kbit</div> <div class="star fa fa-star-o"></div> </li> <li> <div class="title"> <span class="name">andHow.FM</span><span class="country">(NZ)</span></div> <div class="categories">Rock, Reggae, Jazz, Electronic</div> <div class="bitrate">128 kbit</div> <div class="star fa fa-star-o"></div> </li> <li> <div class="title"> <span class="name">Power Zone Radio</span><span class="country">(US)</span></div> <div class="categories">Rock, Hard Rock, Electronic, Normal Rock</div> <div class="bitrate">128 kbit</div> <div class="star fa fa-star"></div> </li> <li> <div class="title"> <span class="name">Atlantic Radio Uk</span><span class="country">(UK)</span></div> <div class="categories">Trance, Electronic, Dance</div> <div class="bitrate">192 kbit</div> <div class="star fa fa-star-o"></div> </li> <li> <div class="title"> <span class="name">Xltrax Dance</span><span class="country">(CA)</span></div> <div class="categories">Dance, Electronic, House</div> <div class="bitrate">128 kbit</div> <div class="star fa fa-star"></div> </li> <li> <div class="title"> <span class="name">cue-radio - Channel #1</span><span class="country">(FR)</span></div> <div class="categories">Electronic, Hardstyle, Electronic Folk</div> <div class="bitrate">128 kbit</div> <div class="star fa fa-star-o"></div> </li> <li> <div class="title"> <span class="name">Casafonda Radio</span><span class="country">(GB)</span></div> <div class="categories">Dance, Electronic, House</div> <div class="bitrate">128 kbit</div> <div class="star fa fa-star-o"></div> </li> </ul> </div> </div> <div class="panel panel-channel-list favorites"> <header> <div class="title">Избранное</div> </header> <div class="list"> <ul> <li> <div class="title"> <span class="name">247 A State Of Trance Armin Van Buuren</span><span class="country">(UK)</span></div> <div class="categories">Dance</div> <div class="bitrate">128 kbit</div> <div class="star fa fa-star"></div> </li> <li> <div class="title"> <span class="name">Sky Radio</span><span class="country">(ES)</span></div> <div class="categories">Top 40</div> <div class="bitrate">192 kbit</div> <div class="star fa fa-star"></div> </li> <li> <div class="title"> <span class="name">Energy Dance</span><span class="country">(CH)</span></div> <div class="categories">Trance, House</div> <div class="bitrate">64 kbit </div> <div class="star fa fa-star"></div> </li> </ul> </div> </div> <div class="panel panel-controls"> <div class="cover-overlay"></div> <div class="cover"></div> <div class="playButton"><i class="fa fa-play"></i></div> <div class="tracker"> <div class="trackName"><span>Beautiful Life - Radio Edit</span></div> <div class="artistName"><span>Armin Van Buuren</span></div> <div class="slider"> <div class="time"><i class="fa fa-clock-o"></i><span>00:13</span></div> <div class="slide"> <div class="pos"></div> </div> <div class="totalTime"><i class="fa fa-time"></i><span>2:59</span></div> </div> <div class="favorite"> <i class="fa fa-star-o"></i></div> <div class="volume"> <div class="slide"> <div class="pos"></div> </div> <div class="icon"><i class="fa fa-volume-up"></i></div> </div> </div> </div> </div> </body>
CSS
@charset "UTF-8"; @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext); * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { background: #000000 url(header.jpg) no-repeat center top; font-size: 16px; font-family: "Open Sans"; font-weight: 300; color: White; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } body { overflow: hidden; } .page { width: 98%; height: 98%; max-width: 800px; max-height: 480px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow: hidden; -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); } .page .bg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 800px; height: 480px; margin: auto auto; background-size: cover; background-image: url("http://i.imgur.com/Jp5wKOR.jpg"); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); } .page .overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 800px; height: 480px; margin: auto auto; background-color: rgba(164, 49, 230, 0.1); } .page .cover-overlay { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: auto auto; background-image: url("http://i.imgur.com/07S4eUb.jpg"); background-size: cover; opacity: 0.1; } .page > header { position: absolute; width: 92%; top: 2%; left: 0; right: 0; margin: auto; text-align: center; font-size: 1.6rem; line-height: 2.3rem; background-color: rgba(0, 0, 0, 0.2); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; font-family: "Open Sans"; font-weight: 400; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); } .page .panel { background-color: rgba(0, 0, 0, 0.2); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow: hidden; } .page .panel .content { padding: 4px; } .page .panel header { text-align: center; } .page .panel header .title { font-size: 1.5rem; line-height: 2.0rem; background-color: rgba(164, 49, 230, 0.8); } .page .panel.panel-channel-list { position: absolute; top: 12%; bottom: 6rem; } .page .panel.panel-channel-list .list { overflow: auto; position: absolute; top: 2rem; bottom: 0; left: 0; right: 0; } .page .panel.panel-channel-list .list .ps-scrollbar-y-rail { background-color: transparent; } .page .panel.panel-channel-list .list .ps-scrollbar-y-rail:hover { background-color: transparent; } .page .panel.panel-channel-list .list .ps-scrollbar-y { background-color: #8a19cb; } .page .panel.panel-channel-list ul { padding: 0; list-style: none; } .page .panel.panel-channel-list ul li { position: relative; cursor: pointer; padding: 0.1rem; margin: 0.5rem 0.5rem; padding: 0.2rem 0.3rem; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .page .panel.panel-channel-list ul li:hover { background-color: rgba(0, 0, 0, 0.2); } .page .panel.panel-channel-list ul li .title { font-weight: 600; } .page .panel.panel-channel-list ul li .title .country { padding-left: 5px; font-size: 0.8rem; } .page .panel.panel-channel-list ul li .categories { font-size: 0.8rem; float: left; } .page .panel.panel-channel-list ul li .bitrate { font-size: 0.8rem; float: right; } .page .panel.panel-channel-list ul li .star { position: absolute; top: 0.5rem; right: 0.1rem; } .page .panel.panel-channel-list ul li:before, .page .panel.panel-channel-list ul li:after { content: ""; display: table; } .page .panel.panel-channel-list ul li:after { clear: both; } .page .panel.panel-channel-list.available { left: 4%; right: 52%; } .page .panel.panel-channel-list.favorites { left: 52%; right: 4%; } .page .panel.panel-controls { position: absolute; left: 4%; right: 4%; bottom: 2%; height: 5rem; padding: 0.5rem; } .page .panel.panel-controls .cover-overlay { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: auto auto; background-image: url("http://i.imgur.com/07S4eUb.jpg"); background-size: cover; background-position: center; opacity: 0.2; } .page .panel.panel-controls .cover { float: left; width: 4rem; height: 4rem; margin-right: 0.5rem; background-image: url("http://i.imgur.com/N6OqT4T.jpg"); background-size: cover; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .page .panel.panel-controls .playButton { float: left; width: 3rem; height: 3rem; margin: 0.5rem; border: 2px solid #b85eec; -moz-border-radius: 3rem; -webkit-border-radius: 3rem; border-radius: 3rem; line-height: 3rem; text-align: center; vertical-align: center; } .page .panel.panel-controls .playButton i { margin-left: 2px; font-size: 1.4rem; color: #f4e7fc; } .page .panel.panel-controls .playButton.playing i:before { content: "\f04c"; } .page .panel.panel-controls .tracker { position: relative; margin-left: 9rem; } .page .panel.panel-controls .tracker .slider { margin-top: 0.2rem; } .page .panel.panel-controls .tracker .slider .time, .page .panel.panel-controls .tracker .slider .totalTime { float: left; font-size: 0.8rem; } .page .panel.panel-controls .tracker .slider .time i, .page .panel.panel-controls .tracker .slider .totalTime i { margin-right: 5px; } .page .panel.panel-controls .tracker .slider .slide { float: left; width: 60%; height: 0.5rem; overflow: hidden; background-color: rgba(255, 255, 255, 0.3); -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; margin: 0.4rem 0.5rem; } .page .panel.panel-controls .tracker .slider .slide .pos { width: 21%; height: 0.5rem; background-color: White; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; } .page .panel.panel-controls .tracker .slider:before, .page .panel.panel-controls .tracker .slider:after { content: ""; display: table; } .page .panel.panel-controls .tracker .slider:after { clear: both; } .page .panel.panel-controls .tracker .trackName { font-weight: 600; } .page .panel.panel-controls .tracker .trackName i { width: 1.2rem; } .page .panel.panel-controls .tracker .artistName { font-size: 0.9rem; } .page .panel.panel-controls .tracker .favorite { position: absolute; top: 0rem; right: 0.5rem; } .page .panel.panel-controls .tracker .favorite i { font-size: 1.2rem; } .page .panel.panel-controls .tracker .favorite.starred i:before { content: "пЂ…"; } .page .panel.panel-controls .tracker .volume { position: absolute; right: 0; bottom: 0; } .page .panel.panel-controls .tracker .volume .icon { display: inline-block; padding-bottom: 0.2rem; width: 1rem; } .page .panel.panel-controls .tracker .volume .slide { display: inline-block; width: 4rem; height: 0.5rem; background-color: rgba(255, 255, 255, 0.3); -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; margin: 0.0rem 0.5rem; } .page .panel.panel-controls .tracker .volume .slide .pos { width: 80%; height: 0.5rem; background-color: White; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; }
JAVASCRIPT
(function() { $(".favorite").on("click", function() { return $(this).toggleClass("starred"); }); $(".playButton").on("click", function() { return $(this).toggleClass("playing"); }); $(".slider .slide").on("click", function(e) { var $this, pos; $this = $(this); pos = (e.offsetX / $this.width()) * 100; console.log(pos.toFixed(0) + "%"); return $this.find(".pos").width(pos + "%"); }); $(".volume .slide").on("click", function(e) { var $this, pos, roundPos; $this = $(this); pos = (e.offsetX / $this.width()) * 100; roundPos = Math.round(pos / 25) * 25; console.log(pos.toFixed(0) + "%, " + roundPos + "%"); $this.find(".pos").width(roundPos + "%"); if (roundPos > 50) { return $(".volume .icon i").removeClass().addClass("fa fa-volume-up"); } else if (roundPos > 0) { return $(".volume .icon i").removeClass().addClass("fa fa-volume-down"); } else { return $(".volume .icon i").removeClass().addClass("fa fa-volume-off"); } }); $(function() { return $(".list").perfectScrollbar(); }); }).call(this);
Expand for more options Login