<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" name="top">MCPanel</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#"><i class="icon-home"></i> Home</a></li>
<li class="divider-vertical"></li>
<li class="active"><a href="#"><i class="icon-file"></i> Pages</a></li>
<li class="divider-vertical"></li>
<li><a href="#"><i class="icon-envelope"></i> Messages</a></li>
<li class="divider-vertical"></li>
<li><a href="#"><i class="icon-signal"></i> Stats</a></li>
<li class="divider-vertical"></li>
<li><a href="#"><i class="icon-lock"></i> Permissions</a></li>
<li class="divider-vertical"></li>
</ul>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> admin <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-wrench"></i> Settings</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-share"></i> Logout</a></li>
</ul>
</div>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
<!--/.navbar-inner -->
</div>
<!--/.navbar -->
<br>
<br>
<br>
<div class="container">
<div class="row">
<div class="span12">
<div class="" id="loginModal">
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active"><a href="#login" data-toggle="tab">Overview</a></li>
<li><a href="#console" data-toggle="tab">Console</a></li>
<li><a href="#File" data-toggle="tab">File Manager</a></li>
<li><a href="#Setting" data-toggle="tab">Settings</a></li>
<li><a href="#Type" data-toggle="tab">GameType</a></li>
<li><a href="#Support" data-toggle="tab">Support</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="login">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<br>
<center><h4>Server IP: 0.0.0.0:25565</h4></center>
<center><h4>Server Node: 001</h4></center>
<center><h4>Players Online: 0/10</h4></h4></center>
<br>
<hr>
<button type="button" class="btn btn-success btn-lg btn3d"><span class="glyphicon glyphicon-ok"></span> Boot</button>
<button type="button" class="btn btn-warning btn-lg btn3d"><span class="glyphicon glyphicon-warning-sign"></span> Reboot</button>
<button type="button" class="btn btn-danger btn-lg btn3d"><span class="glyphicon glyphicon-remove"></span> Shutdown</button>
<button type="button" class="btn btn-primary btn-lg btn3d"><span class="glyphicon glyphicon-cloud"></span> Kill</button>
<br>
<br>
<hr>
<br>
<br>
<strong>RAM (Random Access Memory)</strong></center><span class="pull-right">67%</span>
<div class="progress progress-striped active">
<div class="bar" style="width: 67%;"></div>
</div>
<strong>Disk Space</strong></center><span class="pull-right">24%</span>
<div class="progress progress-striped active">
<div class="bar" style="width: 24%;"></div>
</div>
<strong>Players Online</strong></center><span class="pull-right">10/20</span>
<div class="progress progress-striped active">
<div class="bar" style="width: 50%;"></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="console">
<form id="tab">
<label>Username</label>
<input type="text" value="" class="input-xlarge">
<label>First Name</label>
<input type="text" value="" class="input-xlarge">
<label>Last Name</label>
<input type="text" value="" class="input-xlarge">
<label>Email</label>
<input type="text" value="" class="input-xlarge">
<label>Address</label>
<textarea value="Smith" rows="3" class="input-xlarge">
</textarea>
<div>
<button class="btn btn-primary">Create Account</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.btn3d {
transition:all .08s linear;
position:relative;
outline:medium none;
-moz-outline-style:none;
border:0px;
margin-right:10px;
margin-top:15px;
}
.btn3d:focus {
outline:medium none;
-moz-outline-style:none;
}
.btn3d:active {
top:9px;
}
.btn-default {
box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#fff;
}
.btn-primary {
box-shadow:0 0 0 1px #428bca inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #357ebd, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#428bca;
}
.btn-success {
box-shadow:0 0 0 1px #5cb85c inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4cae4c, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#5cb85c;
}
.btn-info {
box-shadow:0 0 0 1px #5bc0de inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #46b8da, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#5bc0de;
}
.btn-warning {
box-shadow:0 0 0 1px #f0ad4e inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #eea236, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#f0ad4e;
}
.btn-danger {
box-shadow:0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#c63702;
}
