Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
522 lines (489 sloc) 22.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inspiritas - a free Bootstrap theme by Ripple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="inspiritas.css" rel="stylesheet">
</head>
<body>
<!-- Navbar
================================================== -->
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<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="#">INSPIRITAS</a>
<span class="tagline">a free Bootstrap theme by Ripple. <a href="http://littke.com/2012/11/06/inspiritas-bootstrap-theme-by-ripple.html">Read more.</a></span>
<div class="nav-collapse collapse" id="main-menu">
<div class="auth pull-right">
<img class="avatar" src="images/littke.png">
<span class="name">Jonatan Littke</span><br/>
<span class="links">
<a href="#">Settings</a>
<a href="#">Logout</a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span3">
<aside>
<nav>
<ul class="nav">
<li class="selected">
<a href=""><i class="icon-play"></i> Dashboard</a>
</li>
<li>
<a href=""><i class="icon-th-list icon-white"></i> Campaigns</a>
</li>
<li>
<a href=""><i class="icon-font icon-white"></i> Typography</a>
</li>
<li>
<a href=""><i class="icon-user icon-white"></i> Members</a>
</li>
<li>
<a href=""><i class="icon-retweet icon-white"></i> Sexalicious</a>
</li>
</ul>
</nav>
</aside>
</div>
<div class="span9" id="content-wrapper">
<div id="content">
<!-- Navbar
================================================== -->
<section id="stats">
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Shoot me</a>
</div>
<h1>Dashboard</h1>
</header>
<div class="row-fluid">
<div class="span2">
<div class="kpi">45,000</div>
<div><small>total income</small></div>
</div>
<div class="span2">
<div class="kpi">32,403</div>
<div><small>torsdag på fredag</small></div>
</div>
<div class="span2">
<div class="kpi">21,388</div>
<div><small>scores today</small></div>
</div>
<div class="span2">
<div class="kpi">2,105</div>
<div><small>income today</small></div>
</div>
<div class="span2">
<div class="kpi">3,339</div>
<div><small>income yesterday</small></div>
</div>
<div class="span2">
<div class="kpi">8,100</div>
<div><small>income 2012</small></div>
</div>
</div>
</section>
<!-- Graph
================================================== -->
<section id="forms">
<div class="sub-header">
<h2>Graphs with Highcharts</h2>
</div>
<div class="row-fluid row-fluid-alternate-bg">
<div class="span12">
<div id="mainChart"></div>
</div>
</div>
</section>
<!-- Tables
================================================== -->
<section id="tables">
<div class="sub-header">
<h2>Tables</h2>
</div>
<table class="table table-striped full-section table-hover">
<thead>
<tr>
<th>Name</th>
<th>Chances</th>
<th>Completed</th>
<th>USD</th>
<th>EUR</th>
<th>Highest day</th>
</tr>
</thead>
<tbody>
<tr>
<td class="primary">HTML5</td>
<td>87%</td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 35%"></div>
</div>
</td>
<td>32,854</td>
<td>40,633</td>
<td>December 15, 2012</td>
</tr>
<tr>
<td class="primary">CSS3</td>
<td>57%</td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 62%"></div>
</div>
</td>
<td>10,537</td>
<td>30,352</td>
<td>December 7, 2012</td>
</tr>
<tr>
<td class="primary">JavaScript 8.8</td>
<td>87%</td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 40%"></div>
</div>
</td>
<td>39,104</td>
<td>33,241</td>
<td>December 21, 2012</td>
</tr>
<tr>
<td class="primary">HTML5</td>
<td>87%</td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 85%"></div>
</div>
</td>
<td>32,854</td>
<td>40,633</td>
<td>December 15, 2012</td>
</tr>
<tr>
<td class="primary">CSS3</td>
<td>57%</td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 89%"></div>
</div>
</td>
<td>10,537</td>
<td>30,352</td>
<td>December 7, 2012</td>
</tr>
<tr>
<td class="primary">JavaScript 8.8</td>
<td>87%</td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 15%"></div>
</div>
</td>
<td>39,104</td>
<td>33,241</td>
<td>December 21, 2012</td>
</tr>
</tbody>
</table>
</section>
<!-- Forms
================================================== -->
<section id="forms">
<div class="sub-header">
<h2>Forms</h2>
</div>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="input01">Campaign name</label>
<div class="controls">
<input type="text" class="input-large" id="input01">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Campaign tagline</label>
<div class="controls">
<input type="text" class="input-large" id="input01">
<p class="help-block">Some help text looks like this.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Max weekly amount</label>
<div class="controls">
<input type="text" class="input-small">
</div>
</div>
<!--
<div class="control-group">
<label class="control-label" for="select01">Country</label>
<div class="controls">
<select id="select01">
<option>Sweden</option>
<option>Kenya</option>
<option>Zimbabwe</option>
<option>United States</option>
</select>
</div>
</div>
-->
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Username taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Username available</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Password</label>
<div class="controls">
<input type="password" class="input-large" id="input01">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Description</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="5"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">Access</label>
<div class="controls">
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Publishers
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Authors
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> Admins
</label>
</div>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="sub-header">
<h2>Buttons</h2>
</div>
<div class="row-fluid">
<div class="span12">
<table class="table">
<thead>
<td>Type</td>
<td>Default</td>
<td>Primary</td>
</thead>
<tbody>
<tr>
<td class="primary">Small</td>
<td><a class="btn btn-small">Click me</a></td>
<td><a class="btn btn-primary btn-small">Click me</a></td>
</tr>
<tr>
<tr>
<td class="primary">Normal</td>
<td><a class="btn">Click me</a></td>
<td><a class="btn btn-primary">Click me</a></td>
</tr>
<td class="primary">Disabled</td>
<td><a class="btn disabled">Click me</a></td>
<td><a class="btn btn-primary disabled">Click me</a></td>
</tr>
<tr>
<td class="primary">With icon</td>
<td><a class="btn"><i class="icon-cog"></i> Click me</a></td>
<td><a class="btn btn-primary"><i class="icon-shopping-cart icon-white"></i> Click me</a></td>
</tr>
<tr>
<td class="primary">Split</td>
<td>
<div class="btn-group">
<a class="btn">Click me</a>
<a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>Something else here</a></li>
<li class="divider"></li>
<li><a>Separated link</a></li>
</ul>
</div>
</td>
<td>
<div class="btn-group">
<a class="btn btn-primary">Click me</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Action</a></li>
<li><a>Another action</a></li>
<li><a>Something else here</a></li>
<li class="divider"></li>
<li><a>Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</td>
</tr>
<tr>
<td class="primary">Large</td>
<td><a class="btn btn-large">Click me</a></td>
<td><a class="btn btn-primary btn-large">Click me</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="progress-bars">
<div class="sub-header">
<h2>Progress bars</h2>
</div>
<div class="row-fluid">
<table class="table">
<thead>
<td>Class</td>
<td>Looks</td>
</thead>
<tbody>
<tr>
<td><code>.progress</code></td>
<td>
<div class="progress no-margin">
<div class="bar" style="width: 60%;"></div>
</div>
</td>
<tr>
<td><code>.progress-mini</code></td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 45%"></div>
</div>
</td>
</tr>
</table>
</div>
</section>
<!-- Miscellaneous
================================================== -->
<section id="miscellaneous">
<div class="sub-header">
<h2>Alerts</h2>
</div>
<div class="row-fluid">
<div class="span12">
<div class="alert alert-block">
<a class="close">&times;</a>
<h4 class="alert-heading">Alert block</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="alert alert-error">
<a class="close">&times;</a>
<strong>Error</strong> Change a few things up and try submitting again.
</div>
</div>
<div class="span4">
<div class="alert alert-success">
<a class="close">&times;</a>
<strong>Success</strong> You successfully read this important alert message.
</div>
</div>
<div class="span4">
<div class="alert alert-info">
<a class="close">&times;</a>
<strong>Information</strong> This alert needs your attention, but it's not super important.
</div>
</div>
</div>
</section>
<!-- Typography
================================================== -->
<section id="typography">
<div class="sub-header">
<h2>Typography</h2>
</div>
<!-- Headings & Paragraph Copy -->
<div class="row-fluid">
<div class="span5">
<div class="well">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
</div>
<div class="span4">
<h3>Some text</h3>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
</div>
<div class="span3">
<h3>Addresses</h3>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@gmail.com</a>
</address>
</div>
</div>
</section>
</div>
</div>
</div>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/inspiritas.js"></script>
<script src="bootstrap/js/bootstrap-dropdown.js"></script>
<script src="bootstrap/js/bootstrap-collapse.js"></script>
</body>
</html>