scale-dashboard
Version:
726 lines (694 loc) • 36.7 kB
HTML
<html lang="en" class="app bg-light">
<head>
<meta charset="utf-8" />
<title>Scale | Web Application</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/icon.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<!--[if lt IE 9]>
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/excanvas.js"></script>
<![endif]-->
</head>
<body class="">
<section class="hbox stretch">
<!-- .aside -->
<aside class="bg-black aside" id="nav">
<section class="vbox">
<header class="header header-md navbar navbar-fixed-top-xs bg">
<div class="navbar-header ">
<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav">
<i class="fa fa-bars"></i>
</a>
<a href="index.html" class="navbar-brand">
<img src="images/logo.png" class="m-r-sm" alt="scale">
<span class="hidden-nav-xs">Scale</span>
</a>
<a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
<i class="fa fa-cog"></i>
</a>
</div> </header>
<section class="w-f scrollable">
<!-- nav -->
<div class=slim-scroll data-height=auto data-disable-fade-out=true data-distance=0 data-size=10px data-railOpacity=0.2>
<!-- nav -->
<nav class="nav-primary hidden-xs">
<div class="text-muted text-sm hidden-nav-xs padder m-t-sm m-b-sm">Start</div>
<ul class="nav nav-main" data-ride="collapse">
<li >
<a href="index.html" class="auto">
<i class="i i-statistics icon">
</i>
<span class="font-bold">Overview</span>
</a>
</li>
<li >
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<b class="badge bg-danger pull-right">4</b>
<i class="i i-stack icon">
</i>
<span class="font-bold">Layouts</span>
</a>
<ul class="nav dk">
<li >
<a href="layout-color.html" class="auto">
<i class="i i-dot"></i>
<span>Color option</span>
</a>
</li>
<li class="active">
<a href="layout-hbox.html" class="auto">
<i class="i i-dot"></i>
<span>Hbox layout</span>
</a>
</li>
<li >
<a href="layout-boxed.html" class="auto">
<i class="i i-dot"></i>
<span>Boxed layout</span>
</a>
</li>
<li >
<a href="layout-fluid.html" class="auto">
<i class="i i-dot"></i>
<span>Fluid layout</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-lab icon">
</i>
<span class="font-bold">UI kit</span>
</a>
<ul class="nav dk">
<li >
<a href="buttons.html" class="auto">
<i class="i i-dot"></i>
<span>Buttons</span>
</a>
</li>
<li >
<a href="icons.html" class="auto">
<b class="badge bg-info pull-right">369</b>
<i class="i i-dot"></i>
<span>Icons</span>
</a>
</li>
<li >
<a href="grid.html" class="auto">
<i class="i i-dot"></i>
<span>Grid</span>
</a>
</li>
<li >
<a href="widgets.html" class="auto">
<b class="badge bg-dark pull-right">8</b>
<i class="i i-dot"></i>
<span>Widgets</span>
</a>
</li>
<li >
<a href="components.html" class="auto">
<i class="i i-dot"></i>
<span>Components</span>
</a>
</li>
<li >
<a href="list.html" class="auto">
<i class="i i-dot"></i>
<span>List group</span>
</a>
</li>
<li >
<a href="#table" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-dot"></i>
<span>Table</span>
</a>
<ul class="nav dker">
<li >
<a href="table-static.html">
<i class="i i-dot"></i>
<span>Table static</span>
</a>
</li>
<li >
<a href="table-datatable.html">
<i class="i i-dot"></i>
<span>Datatable</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#form" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-dot"></i>
<span>Form</span>
</a>
<ul class="nav dker">
<li >
<a href="form-elements.html">
<i class="i i-dot"></i>
<span>Form elements</span>
</a>
</li>
<li >
<a href="form-validation.html">
<i class="i i-dot"></i>
<span>Form validation</span>
</a>
</li>
<li >
<a href="form-wizard.html">
<i class="i i-dot"></i>
<span>Form wizard</span>
</a>
</li>
</ul>
</li>
<li >
<a href="chart.html" class="auto">
<i class="i i-dot"></i>
<span>Chart</span>
</a>
</li>
<li >
<a href="portlet.html" class="auto">
<i class="i i-dot"></i>
<span>Portlet</span>
</a>
</li>
<li >
<a href="timeline.html" class="auto">
<i class="i i-dot"></i>
<span>Timeline</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-docs icon">
</i>
<span class="font-bold">Pages</span>
</a>
<ul class="nav dk">
<li >
<a href="profile.html" class="auto">
<i class="i i-dot"></i>
<span>Profile</span>
</a>
</li>
<li >
<a href="invoice.html" class="auto">
<i class="i i-dot"></i>
<span>Invoice</span>
</a>
</li>
<li >
<a href="intro.html" class="auto">
<i class="i i-dot"></i>
<span>Intro</span>
</a>
</li>
<li >
<a href="master.html" class="auto">
<i class="i i-dot"></i>
<span>Master</span>
</a>
</li>
<li >
<a href="gmap.html" class="auto">
<i class="i i-dot"></i>
<span>Google Map</span>
</a>
</li>
<li >
<a href="jvectormap.html" class="auto">
<i class="i i-dot"></i>
<span>Vector Map</span>
</a>
</li>
<li >
<a href="signin.html" class="auto">
<i class="i i-dot"></i>
<span>Signin</span>
</a>
</li>
<li >
<a href="signup.html" class="auto">
<i class="i i-dot"></i>
<span>Signup</span>
</a>
</li>
<li >
<a href="404.html" class="auto">
<i class="i i-dot"></i>
<span>404</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#" class="auto">
<span class="pull-right text-muted">
<i class="i i-circle-sm-o text"></i>
<i class="i i-circle-sm text-active"></i>
</span>
<i class="i i-grid2 icon">
</i>
<span class="font-bold">Apps</span>
</a>
<ul class="nav dk">
<li >
<a href="mail.html" class="auto">
<b class="badge bg-success lt pull-right">2</b>
<i class="i i-dot"></i>
<span>Mailbox</span>
</a>
</li>
<li >
<a href="fullcalendar.html" class="auto">
<i class="i i-dot"></i>
<span>Calendar</span>
</a>
</li>
<li >
<a href="project.html" class="auto">
<i class="i i-dot"></i>
<span>Project</span>
</a>
</li>
<li >
<a href="media.html" class="auto">
<i class="i i-dot"></i>
<span>Media</span>
</a>
</li>
</ul>
</li>
</ul>
<div class="line dk hidden-nav-xs"></div>
<div class="text-muted text-xs hidden-nav-xs padder m-t-sm m-b-sm">Lables</div>
<ul class="nav">
<li>
<a href="mail.html#work">
<i class="i i-circle-sm text-info-dk"></i>
<span>Work space</span>
</a>
</li>
<li>
<a href="mail.html#social">
<i class="i i-circle-sm text-success-dk"></i>
<span>Connection</span>
</a>
</li>
<li>
<a href="mail.html#projects">
<i class="i i-circle-sm text-danger-dk"></i>
<span>Projects</span>
</a>
</li>
</ul>
<div class="text-muted text-xs hidden-nav-xs padder m-t-sm m-b-sm">Circles</div>
<ul class="nav">
<li>
<a href="#">
<i class="i i-circle-sm-o text-success-lt"></i>
<span>College</span>
</a>
</li>
<li>
<a href="#">
<i class="i i-circle-sm-o text-warning"></i>
<span>Social</span>
</a>
</li>
</ul>
</nav>
<!-- / nav -->
</div>
<!-- / nav -->
</section>
<footer class="footer hidden-xs no-padder text-center-nav-xs">
<a href="modal.lockme.html" data-toggle="ajaxModal" class="btn btn-icon icon-muted btn-inactive pull-right m-l-xs m-r-xs hidden-nav-xs">
<i class="i i-logout"></i>
</a>
<a href="#nav" data-toggle="class:nav-xs" class="btn btn-icon icon-muted btn-inactive m-l-xs m-r-xs">
<i class="i i-circleleft text"></i>
<i class="i i-circleright text-active"></i>
</a>
</footer>
</section>
</aside>
<!-- /.aside -->
<section id="content">
<section class="hbox stretch">
<section>
<section class="vbox">
<section class="scrollable wrapper">
<div class="panel b-a padder">
<div class="row">
<div class="col-sm-8 m-b m-t">
<a href="#" class="btn btn-icon btn-default btn-success btn-rounded btn-inactive" data-toggle="class:btn-success"><i class="fa fa-bookmark-o"></i></a>
<a href="#" class="btn btn-icon btn-default btn-rounded btn-inactive m-r-xs" data-toggle="class:btn-success">
<i class="fa fa-check"></i>
</a>
<a href="#" class="btn btn-default btn-rounded"><i class="fa fa-bars"></i> All Courses</a>
</div>
<div class="col-sm-4 m-b m-t">
<form role="search">
<div class="form-group m-b-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-icon"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="blog-post">
<div class="post-item">
<div class="post-media">
<section class="m-b-none">
<div class="carousel auto slide" id="c-fade">
<ol class="carousel-indicators out">
<li data-target="#c-fade" data-slide-to="0" class="active"></li>
<li data-target="#c-fade" data-slide-to="1" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item bg-light dker wrapper active text-center">
<span class="h2"><i class="fa fa-clock-o fa-5x m-t text-white"></i></span>
<p class="text-muted m-t m-b-lg">Time saving</p>
</div>
<div class="item bg-light dk wrapper text-center">
<span class="h2"><i class="fa fa-file-o fa-5x m-t text-white"></i></span>
<p class="text-muted m-t m-b-lg">Full documents</p>
</div>
</div>
<a class="left carousel-control" href="#c-fade" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right carousel-control" href="#c-fade" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</section>
</div>
<div class="caption wrapper-lg">
<h2 class="post-title"><a href="#">7 things you need to know about the flat design</a></h2>
<div class="post-sum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
<br><br>
Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.</p>
</div>
<div class="line line-lg"></div>
<div class="text-muted">
<i class="fa fa-user icon-muted"></i> by <a href="#" class="m-r-sm">Admin</a>
<i class="fa fa-clock-o icon-muted"></i> Feb 20, 2013
<a href="#" class="m-l-sm"><i class="fa fa-comment-o icon-muted"></i> 2 comments</a>
</div>
</div>
</div>
<div class="post-item">
<div class="caption wrapper-lg">
<h2 class="post-title"><a href="#">Bootstrap 3: What you need to know</a></h2>
<div class="post-sum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
</p>
<h3>Html5 and CSS3</h3>
<p>
Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.</p>
</div>
<div class="line line-lg"></div>
<div class="text-muted">
<i class="fa fa-user icon-muted"></i> by <a href="#" class="m-r-sm">Admin</a>
<i class="fa fa-clock-o icon-muted"></i> Feb 15, 2013
<a href="#" class="m-l-sm"><i class="fa fa-comment-o icon-muted"></i> 4 comments</a>
</div>
</div>
</div>
</div>
<div class="text-center m-t-lg m-b-lg">
<ul class="pagination pagination-md">
<li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
</ul>
</div>
<h4 class="m-t-lg m-b">3 Comments</h4>
<section class="comment-list block">
<article id="comment-id-1" class="comment-item">
<a class="pull-left thumb-sm">
<img src="images/a2.png" class="img-circle">
</a>
<section class="comment-body m-b">
<header>
<a href="#"><strong>John smith</strong></a>
<label class="label bg-info m-l-xs">Editor</label>
<span class="text-muted text-xs block m-t-xs">
24 minutes ago
</span>
</header>
<div class="m-t-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum.</div>
</section>
</article>
<!-- .comment-reply -->
<article id="comment-id-2" class="comment-item comment-reply">
<a class="pull-left thumb-sm">
<img src="images/a1.png" class="img-circle">
</a>
<section class="comment-body m-b">
<header>
<a href="#"><strong>John smith</strong></a>
<label class="label bg-dark m-l-xs">Admin</label>
<span class="text-muted text-xs block m-t-xs">
26 minutes ago
</span>
</header>
<div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>
</section>
</article>
<!-- / .comment-reply -->
<article id="comment-id-2" class="comment-item">
<a class="pull-left thumb-sm">
<img src="images/a0.png" class="img-circle">
</a>
<section class="comment-body m-b">
<header>
<a href="#"><strong>John smith</strong></a>
<label class="label bg-dark m-l-xs">Admin</label>
<span class="text-muted text-xs block m-t-xs">
26 minutes ago
</span>
</header>
<blockquote class="m-t">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>
</section>
</article>
</section>
<h4 class="m-t-lg m-b">Leave a comment</h4>
<form>
<div class="form-group pull-in clearfix">
<div class="col-sm-6">
<label>Your name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-sm-6">
<label >Email</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label>Comment</label>
<textarea class="form-control" rows="5" placeholder="Type your comment"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-rounded">Post comment</button>
</div>
</form>
</section>
</section>
</section>
<aside class="aside-md">
<section class="vbox">
<header class="header header-md navbar b-b bg-white" data-toggle="shift:prependTo" data-target="#content">
<ul class="nav navbar-nav m-n hidden-xs nav-user user">
<li class="hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="i i-chat3"></i>
<span class="badge badge-sm up bg-danger m-l-n-sm count">2</span>
</a>
<section class="dropdown-menu aside-xl pull-right">
<section class="panel bg-white">
<header class="panel-heading b-light bg-light">
<strong>You have <span class="count">2</span> notifications</strong>
</header>
<div class="list-group list-group-alt animated fadeInRight">
<a href="#" class="media list-group-item">
<span class="pull-left thumb-sm">
<img src="images/a0.png" alt="John said" class="img-circle">
</span>
<span class="media-body block m-b-none">
Use awesome animate.css<br>
<small class="text-muted">10 minutes ago</small>
</span>
</a>
<a href="#" class="media list-group-item">
<span class="media-body block m-b-none">
1.0 initial released<br>
<small class="text-muted">1 hour ago</small>
</span>
</a>
</div>
<footer class="panel-footer text-sm">
<a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
<a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
</footer>
</section>
</section>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="thumb-sm avatar pull-left">
<img src="images/a0.png">
</span>
John.Smith <b class="caret"></b>
</a>
<ul class="dropdown-menu animated fadeInRight">
<span class="arrow top"></span>
<li>
<a href="#">Settings</a>
</li>
<li>
<a href="profile.html">Profile</a>
</li>
<li>
<a href="#">
<span class="badge bg-danger pull-right">3</span>
Notifications
</a>
</li>
<li>
<a href="docs.html">Help</a>
</li>
<li class="divider"></li>
<li>
<a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a>
</li>
</ul>
</li>
</ul>
</header>
<section class="scrollable wrapper-md bg-light dker">
<h5 class="font-semibold">About me</h5>
<div class="m-b-lg">
<p class="clear text-sm">
I am a UI/UX designer for Flatfull where i focus on Web applications, Mobile apps...
</p>
</div>
<h5 class="font-semibold">Subscribe</h5>
<div class="line line-dashed"></div>
<div class="m-t-sm m-b-lg">
<a href="#" title="Twitter" class="btn btn-rounded btn-info btn-icon"><i class="fa fa-twitter"></i></a>
<a href="#" title="Facebook" class="btn btn-rounded btn-primary btn-icon"><i class="fa fa-facebook"></i></a>
<a href="#" title="Google+" class="btn btn-rounded btn-danger btn-icon"><i class="fa fa-google-plus"></i></a>
</div>
<h5 class="font-semibold">Recent Tweets</h5>
<div class="line line-dashed"></div>
<div class="clear m-b">
<a href="#" class="text-info">
<span class="thumb-sm">
<img src="images/a0.png" class="img-circle">
</span>
@Mike Mcalidek <i class="fa fa-twitter"></i>
</a>
</div>
<ul class="list-unstyled m-b-lg">
<li>
<p>Wellcome <a href="#" class="text-info">@Drew Wllon</a> and play this web application template, have fun1 </p>
<small class="block text-muted"><i class="fa fa-clock-o"></i> 2 minuts ago</small>
</li>
<li>
<p>Morbi nec <a href="#" class="text-info">@Jonathan George</a> nunc condimentum ipsum dolor sit amet, consectetur</p>
<small class="block text-muted"><i class="fa fa-clock-o"></i> 1 hour ago</small>
</li>
<li>
<p><a href="#" class="text-info">@Josh Long</a> Vestibulum ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis</p>
<small class="block text-muted"><i class="fa fa-clock-o"></i> 2 hours ago</small>
</li>
</ul>
<h5 class="font-semibold">Categories</h5>
<div class="line line-dashed"></div>
<div class="list-group auto dk">
<a href="#" class="list-group-item">
<span class="badge pull-right">15</span>
Photograph
</a>
<a href="#" class="list-group-item">
<span class="badge pull-right">30</span>
Life style
</a>
<a href="#" class="list-group-item">
<span class="badge pull-right">9</span>
Food
</a>
<a href="#" class="list-group-item">
<span class="badge pull-right">4</span>
Travel world
</a>
</div>
</section>
</section>
</aside>
</section>
<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
</section>
</section>
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/app.plugin.js"></script>
</body>
</html>