<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-md-6">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1primary" data-toggle="tab">Creating an account</a></li>
<li><a href="#tab2primary" data-toggle="tab">Getting ready for your play</a></li>
<li><a href="#tab3primary" data-toggle="tab">Other basics</a></li>
<li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">Step 1 - Go to https://www.plug.dj/trapcity. You will find a box similar to the image below when you visit the page.<br><img src="http://i.imgur.com/2I8Kelf.jpg"><br>Step 2 - Follow the instructions until you reach the option for Avatar or Video Mode. This will decide how you see the crowd. We recommend Avatar Mode for the best experience. This will allow you to see the "crowd" and the DJ booth.<br><img src="http://i.imgur.com/yHMREL7.jpg"><br>Step 3 - Once you have followed through the walkthrough you will see a box near the bottom area of the window. Click this and it will show a box for registering.<br><img src="http://i.imgur.com/Lm834h7.jpg"><br>Step 4 - Once you click it, a new box will appear which is where you can choose your username. Please choose your offical artist name. If it is not available select one similar and we can get someone to free up the official username.<br><img src="http://i.imgur.com/sFw2UUg.jpg"><br>Step 5 - Select whether you want to register with an email or with your facebook. Whatever works best. For the example, the email option was chosen. This part should be fairly self explanitory.<br><img src="http://i.imgur.com/yiqGoGy.jpg"><br> If you have any questions with the process or any problems please tell us. Please tell one of the hosts online that you are the offical artist so we can promote you.
</div>
<div class="tab-pane fade" id="tab2primary">In order for you to play, you will need to first set up your playlist which includes your song.<br> Step 1 - Click the bar located at the center bottom of the page.<br><img src="http://i.imgur.com/4dOaIeI.jpg"><br> Step 2 - A new screen will appear after that bar has been clicked. Click the create playlist button in the bottom left corner of the screen. Name it whatever you like. The name will not be public.<br><img src="http://i.imgur.com/DG7B6BY.jpg"><br> Step 3 - You will now be able to add your mix to the playlist by clicking the dropdown button and selecting soundcloud (or if you have uploaded this mix to youtube, keep it on youtube and follow the instructions) then pasting the direct link to the mix. Your mix should pop up in the search results. To add this to your playlist you will need to click the plus icon and select your playlist.<br><img src="http://i.imgur.com/QwHD8zM.jpg"><br> Step 4 - The main portion of the screen should now look like the image below. Simply click the purple arrow in the top left area to go back out of your playlist screen.<br><img src="http://i.imgur.com/bDq3lDn.jpg"><br>Step 5 - You can now join the waitlist for your turn to DJ. To do this simply click the button near the bottom right corner of the screen.<br><img src="http://i.imgur.com/gjYB0UW.jpg"><br>
</div>
<div class="tab-pane fade" id="tab3primary">Here are some helpful things that you may need while in the plug. <br>Plug.dj FAQ http://support.plug.dj/hc/en-us <br>Typing /cap 1 into the chat will remove most of the avatars on your screen to reduce lag.</div>
<div class="tab-pane fade" id="tab4primary">Primary 4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
.panel.with-nav-tabs .panel-heading{
padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
margin-bottom: -1px;
}
.panel {
min-width:1000px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
background-color: #ddd;
border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
color: #555;
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f5f5f5;
border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #555;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.tab1primary img {
width:800px;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
