UI mockup

by Glen Keane

HTML

<link rel="stylesheet" href="https://rawgit.com/designmodo/Flat-UI/master/dist/css/flat-ui.min.css">
<div class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-inner">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#"><img src="http://imgur.com/9ldLgLI.png" width="191px" height="20px"/></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a type="button" class="btn btn-info btn-responsive">Create A Room</a>

        </li>
        <li class="dropdown"> <a class="dropdown-toggle" role="button" data-toggle="dropdown">Find A Room <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Find A Room</a>

            </li>
            <li><a href="#">Popular In Your Area</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a class="dropdown-toggle" role="button" data-toggle="dropdown">Your Profile <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Your Profile</a>

            </li>
            <li><a href="#">Your Rooms</a>

            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li><a href="#">Sign out</a>

        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid contentwrap">
  <div class="row">
    <div class="col-sm-12">
      <div id="mainContentAccordion" class="panel-group">
        <div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;">
          <div class="panel-heading">
            <h2 class="panel-title"><a...

CSS

.navbar {
  border-radius: 0px;
  margin-bottom: 0px;
}

.fill {
  min-height: 100%;
  height: 100%;
}

.content {
  margin-top: 70px;
}

.list-group-submenu {
  margin-left: 20px;
}

.panel-group .panel,
.panel {
  border-radius: 0px;
}

.panel-group .panel + .panel {
  margin-top: 0px;
}

.dropdown-menu,
.navbar-nav > li > .dropdown-menu {
  margin-top: 0px;
  border-radius: 0px;
}

.table-responsive {
  overflow-x: scroll;
}

.sidebar .panel-body {
  padding: 0px;
}

#sidebarMobileAccordion,
#mainContentAccordion {
  margin-bottom: 0px;
}

.col-sm-8,
.col-sm-4 {
  padding-left: 0px;
  padding-right: 0px;
}

JavaScript

$(document).ready(function () {
  $('.contentwrap').css({
    'margin-top': ($('.navbar-fixed-top').height()) + 'px'
  });

  $(window).resize(function () {
    $('.contentwrap').css({
      'margin-top': ($('.navbar-fixed-top').height()) + 'px'
    });
  });

  $('#mainContentAccordion .panel-heading a').on('click', function (e) {
    if ($(this).parents('.panel').children('.panel-collapse').hasClass('in')) {
      e.stopPropagation();
      e.preventDefault();
    }
  });

  $(".sidebar-tabs a").click(function (e) {
    $(this).tab('show');
    e.preventDefault();
  });

  queue.forEach(function (item) {
    var queueOptions = `<div class="btn-group"> <a type="button" class="btn btn-info btn-responsive" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Options<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Play song</a></li><li><a href="#">Move to front</a></li><li><a href="#">Push to back</a></li><li><a href="#">Delete song</a></li></ul></div>`;
    var queueString = `<tr><td><img src="${item.thumbnails.default.url}" class="img-responsive"></img></td><td>${item.title}</td><td>${item.channelTitle}</td><td>${queueOptions}</td></tr>`;
    $("#queue").append(queueString);

    var searchOptions = `<div class="btn-group"><a type="button" class="btn btn-info btn-responsive" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Add video</a></li><li><a href="#">Add to back of queue</a></li><li><a href="#">Play now</a></li></ul></div>`;
    var searchString = `<tr><td><img src="${item.thumbnails.default.url}" class="img-responsive"></img></td><td>${item.title}</td><td>${item.channelTitle}</td><td>${searchOptions}</td></tr>`;
    $("#searchResults").append(searchString);
  });
});

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag =...