Skip to content

Instantly share code, notes, and snippets.

@aaronbuchanan

aaronbuchanan/index.html

Created June 14, 2014 20:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaronbuchanan/e65ae3224eb380e0e03d to your computer and use it in GitHub Desktop.
Save aaronbuchanan/e65ae3224eb380e0e03d to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Aaron Buchanan.
Raw
index.html
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Staging <span class="glyphicon glyphicon-link"></span></a></li>
<li><a href="#">Production <span class="glyphicon glyphicon-link"></span></a></li>
<li><a href="#">Akamai <span class="glyphicon glyphicon-link"></span></a></li>
<li><a href="#">Pingdom <span class="glyphicon glyphicon-link"></span></a></li>
<li><a href="#">New Relic <span class="glyphicon glyphicon-link"></span></a></li>
<li><a href="#">Heroku <span class="glyphicon glyphicon-link"></span></a></li>
<li><a href="mailto:aaron.buchanan@ignitioncreative.com?subject='Defiant Few Dashboard Question'">Support <span class="glyphicon glyphicon-question-sign"></span></a></li>
<li><a href="#">Sign-out <span class="glyphicon glyphicon-off"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span> Overview</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tower"></span> Mission Control</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Collaborators</a></li>
<li><a href="#"><span class="glyphicon glyphicon-floppy-save"></span> Export</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-dashboard"></span> Overview</h3>
</div>
<div class="panel-body">
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="">
<h4>100,000</h4>
<span class="text-muted">Total Users Since Launch</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="">
<h4>100,000</h4>
<span class="text-muted">Current / Active Users</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="">
<h4>100,000</h4>
<span class="text-muted">Total Sweeps Entries</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="">
<h4>100,000</h4>
<span class="text-muted">Email Opt-ins</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Week Number</th>
<th>Registered Users</th>
<th>Active Users</th>
<th>Sweeps Entries</th>
<th>Email Opt-ins</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>100,000</td>
<td>100,000</td>
<td>100,000</td>
<td>100,000</td>
</tr>
<tr>
<td>2</td>
<td>100,000</td>
<td>100,000</td>
<td>100,000</td>
<td>100,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-tower"></span> Mission Control</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Mission Id</th>
<th>Mission Name</th>
<th>Mission Hash</th>
<th>Mission Status</th>
<th>Mission Release</th>
</tr>
</thead>
<tbody>
<tr>
<td>M01</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Available</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M02</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M03</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M04</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M05</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M06</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M07</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M08</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M09</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M10</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M11</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
<tr>
<td>M12</td>
<td>{{mission.name}}</td>
<td>{{mission.hash}}</td>
<td>Scheduled</td>
<td>{{mission.release_date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-user"></span> Collaborators</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron Buchanan</td>
<td>aaron.buchanan@ignitioncreative.com</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-floppy-save"></span> Export</h3>
</div>
<div class="panel-body">
<button type="button" class="btn btn-primary btn-lg">Download User Data</button>
</div>
</div>
</div>
</div>
</div>
Raw
style.css
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment