Skip to content

Instantly share code, notes, and snippets.

@renatosousafilho

renatosousafilho/gist:9592423

Created March 17, 2014 01:31
Show Gist options
  • Save renatosousafilho/9592423 to your computer and use it in GitHub Desktop.
Save renatosousafilho/9592423 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Apphotel</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<!-- colocando esse botão fora ele faz a requisição do asset do glyphicons -->
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
<div class='container'>
<div class='row' id='content-wrapper'>
<div class='col-xs-12'>
<div class='row'>
<div class='col-sm-12'>
<div class='page-header'>
<h1 class='pull-left'>
</h1>
<div class='pull-right'>
<ul class='breadcrumb'>
<li>
<a href='index.html'>
<i class='icon-bar-chart'></i>
</a>
</li>
<li class='separator'>
<i class='icon-angle-right'></i>
</li>
<li>
UI Elements & Widgets
</li>
<li class='separator'>
<i class='icon-angle-right'></i>
</li>
<li class='active'>Widgets</li>
</ul>
</div>
</div>
</div>
</div>
<div class='group-header group-header-first'>
<div class='row'>
<div class='col-sm-6 col-sm-offset-3'>
<div class='text-center'>
<h2>Quick navigation</h2>
</div>
</div>
</div>
</div>
<div class='row box box-transparent'>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link blue-background'>
<a href='#'>
<div class='header'>
<div class='icon-comments'></div>
</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link green-background'>
<a href='#'>
<div class='header'>
<div class='icon-star'></div>
</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link orange-background'>
<a href='#'>
<div class='header'>
<div class='icon-magic'></div>
</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link purple-background'>
<a href='#'>
<div class='header'>
<div class='icon-eye-open'></div>
</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link red-background'>
<a href='orders.html'>
<div class='header'>
<div class='icon-inbox'></div>
</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link muted-background'>
<a href='#'>
<div class='header'>
<div class='icon-refresh'></div>
</div>
</a>
</div>
</div>
</div>
<div class='text-center'>
<small class='text-muted'>OR</small>
</div>
<br>
<div class='row box box-transparent'>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link blue-background'>
<a href='#'>
<div class='header'>
<div class='icon-comments'></div>
</div>
<div class='content'>Comments</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link green-background'>
<a href='#'>
<div class='header'>
<div class='icon-star'></div>
</div>
<div class='content'>Veeeery long title of this quick link</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link orange-background'>
<a href='#'>
<div class='header'>
<div class='icon-magic'></div>
</div>
<div class='content'>Magic</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link purple-background'>
<a href='#'>
<div class='header'>
<div class='icon-eye-open'></div>
</div>
<div class='content'>Show</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link red-background'>
<a href='orders.html'>
<div class='header'>
<div class='icon-inbox'></div>
</div>
<div class='content'>Orders</div>
</a>
</div>
</div>
<div class='col-xs-4 col-sm-2'>
<div class='box-quick-link muted-background'>
<a href='#'>
<div class='header'>
<div class='icon-refresh'></div>
</div>
<div class='content'>Spinning</div>
</a>
</div>
</div>
</div>
<div class='group-header'>
<div class='row'>
<div class='col-sm-6 col-sm-offset-3'>
<div class='text-center'>
<h2>Statistics</h2>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<div class='box'>
<div class='box-header'>
<div class='title'>
<div class='icon-inbox'></div>
Orders
</div>
<div class='actions'>
<a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
</a>
<a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
</a>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<div class='box-content box-statistic'>
<h3 class='title text-error'>191</h3>
<small>New</small>
<div class='text-error icon-inbox align-right'></div>
</div>
<div class='box-content box-statistic'>
<h3 class='title text-warning'>311</h3>
<small>In process</small>
<div class='text-warning icon-check align-right'></div>
</div>
<div class='box-content box-statistic'>
<h3 class='title text-info'>3</h3>
<small>Pending</small>
<div class='text-info icon-time align-right'></div>
</div>
</div>
<div class='col-sm-6'>
<div class='box-content box-statistic red-background'>
<h3 class='title text-primary'>3</h3>
<small>Shipped</small>
<div class='text-primary icon-truck align-right'></div>
</div>
<div class='box-content box-statistic green-background'>
<h3 class='title text-success'>981</h3>
<small>Completed</small>
<div class='text-success icon-flag align-right'></div>
</div>
<div class='box-content box-statistic muted-background'>
<h3 class='title text-muted'>0</h3>
<small>Canceled</small>
<div class='text-muted icon-remove align-right'></div>
</div>
</div>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class='box'>
<div class='box-header'>
<div class='title'>
<i class='icon-group'></i>
Visitors
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='box-content box-statistic text-right'>
<h3 class='title text-error'>9100</h3>
<small>Unique</small>
<div class='text-error icon-user align-left'></div>
</div>
<div class='box-content box-statistic text-right'>
<h3 class='title text-warning'>41 000</h3>
<small>Pageviews</small>
<div class='text-warning icon-book align-left'></div>
</div>
<div class='box-content box-statistic text-right'>
<h3 class='title text-primary'>12:21</h3>
<small>Average time</small>
<div class='text-primary icon-time align-left'></div>
</div>
</div>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class='box'>
<div class='box-header'>
<div class='title'>
<i class='icon-comments'></i>
Comments
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='box-content box-statistic'>
<h3 class='title text-error'>91</h3>
<small>New</small>
<div class='text-error icon-plus align-right'></div>
</div>
<div class='box-content box-statistic'>
<h3 class='title text-success'>1</h3>
<small>Approved</small>
<div class='text-success icon-ok align-right'></div>
</div>
<div class='box-content box-statistic'>
<h3 class='title text-info'>123</h3>
<small>Pending</small>
<div class='text-info icon-time align-right'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id='footer'>
<%= render 'layouts/footer' %>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment