Commit 424c818d authored by Phạm Duy Phi's avatar Phạm Duy Phi

no message

parent afbac0e6
...@@ -74,10 +74,9 @@ public class TimeSheetBusiness { ...@@ -74,10 +74,9 @@ public class TimeSheetBusiness {
@Transactional @Transactional
public String updateTimeSheet(TimeSheetDTO timeSheetDTO) { public String updateTimeSheet(TimeSheetDTO timeSheetDTO) {
String message; String message;
Employee employee = employeeRepository.findEmployeeById(timeSheetDTO.getEmployeeId()); // Employee employee = employeeRepository.findEmployeeById(timeSheetDTO.getEmployeeId());
Eproject eproject = eProjectRepository.findEprojectByEmployee(employee); // Eproject eproject = eProjectRepository.findEprojectByEmployee(employee);
TimeSheet timeSheet = timeSheetRepository.findTimeSheetByEprojectAndId(eproject, timeSheetDTO.getId()); TimeSheet timeSheet = timeSheetRepository.findTimeSheetById(timeSheetDTO.getId());
if (eproject != null) {
if (timeSheet != null) { if (timeSheet != null) {
int i = timeSheetRepository.updateTimeSheet(timeSheetDTO.getTitle(), timeSheetDTO.getContent() int i = timeSheetRepository.updateTimeSheet(timeSheetDTO.getTitle(), timeSheetDTO.getContent()
, timeSheetDTO.getNote(), timeSheetDTO.getId()); , timeSheetDTO.getNote(), timeSheetDTO.getId());
...@@ -89,9 +88,6 @@ public class TimeSheetBusiness { ...@@ -89,9 +88,6 @@ public class TimeSheetBusiness {
} else { } else {
message = "TimeSheet does not exist"; message = "TimeSheet does not exist";
} }
} else {
message = "Eproject does not exist";
}
return message; return message;
} }
...@@ -107,24 +103,6 @@ public class TimeSheetBusiness { ...@@ -107,24 +103,6 @@ public class TimeSheetBusiness {
return message; return message;
} }
// @Transactional
// public String updateLeaveFormStatus(TimeSheetDTO timeSheetDTO) {
// String message;
// TimeSheet timeSheet = timeSheetRepository.findTimeSheetByEmployeeId(timeSheetDTO.getId());
// if (timeSheet != null) {
// int i = timeSheetRepository.updateTimeSheetStatus(timeSheetDTO.isStatus(), timeSheetDTO.getId());
// if (i == 1) {
// message = "Update status success";
// } else {
// message = "Update status failed";
// }
// } else {
// message = "TimeSheet does not exist";
// }
//
// return message;
// }
public List<TimeSheet> findTimeSheetByEmployeeId(int employeeId) { public List<TimeSheet> findTimeSheetByEmployeeId(int employeeId) {
Employee employee = employeeRepository.findEmployeeById(employeeId); Employee employee = employeeRepository.findEmployeeById(employeeId);
Eproject eproject = eProjectRepository.findEprojectByEmployee(employee); Eproject eproject = eProjectRepository.findEprojectByEmployee(employee);
......
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Blank Page :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span></i> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<h2 class="title1">Blank Page</h2>
<div class="blank-page widget-shadow scroll" id="style-2 div1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.
</p>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Buttons :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span><span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>Timesheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<h2 class="title1">Buttons</h2>
<!-- buttons -->
<!-- Color-variations -->
<div class="panel1 variations-panel">
<div class="panel-body mtn">
<div class="col-adjust-10">
<div class="row">
<div class="col-md-3 w3layouts-bnt">
<div class="bg-dark light pv20 text-white fw600 text-center">#364155 </div>
<div class="bg-dark pv20 text-white fw600 text-center">#2A3342</div>
<div class="bg-dark dark pv20 text-white fw600 text-center">#1E252F</div>
</div>
<div class="col-md-3 agileits-bnt">
<div class="bg-primary light pv20 text-white fw600 text-center">#14C1d7</div>
<div class="bg-primary pv20 text-white fw600 text-center">#11A8BB</div>
<div class="bg-primary dark pv20 text-white fw600 text-center">#0E8F9F</div>
</div>
<div class="col-md-3 agileinfo-bnt">
<div class="bg-success light pv20 text-white fw600 text-center">#5FD78A</div>
<div class="bg-success pv20 text-white fw600 text-center">#47D178</div>
<div class="bg-success dark pv20 text-white fw600 text-center">#32C867</div>
</div>
<div class="col-md-3 wthree-bnt">
<div class="bg-info light pv20 text-white fw600 text-center">#5FD7BA</div>
<div class="bg-info pv20 text-white fw600 text-center">#47D1AF</div>
<div class="bg-info dark pv20 text-white fw600 text-center">#32C8A3</div>
</div>
<div class="col-md-3 w3-agileits-bnt">
<div class="bg-warning light pv20 text-white fw600 text-center">#FF8B63</div>
<div class="bg-warning pv20 text-white fw600 text-center">#FF7444</div>
<div class="bg-warning dark pv20 text-white fw600 text-center">#FF5D25</div>
</div>
<div class="col-md-3 agileits-w3layouts-bnt">
<div class="bg-danger light pv20 text-white fw600 text-center">#F17060</div>
<div class="bg-danger pv20 text-white fw600 text-center">#EE5744</div>
<div class="bg-danger dark pv20 text-white fw600 text-center">#EB3E28</div>
</div>
<div class="col-md-3 w3-agile-bnt">
<div class="bg-alert light pv20 text-white fw600 text-center">#FDC669</div>
<div class="bg-alert pv20 text-white fw600 text-center">#FDBA4B</div>
<div class="bg-alert dark pv20 text-white fw600 text-center">#FDAE2D</div>
</div>
<div class="col-md-3 agile-bnt">
<div class="bg-system light pv20 text-white fw600 text-center">#7A67BB</div>
<div class="bg-system pv20 text-white fw600 text-center">#6852B2</div>
<div class="bg-system dark pv20 text-white fw600 text-center">#5B479F</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!-- //Color-variations -->
<!-- /buttons_w3ls_agile -->
<div class="buttons_w3ls_agile">
<div class="button_set_one agile_info_shadow">
<h3 class="w3_inner_tittle two">Simple Buttons</h3>
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
</div>
<div class="button_set_one two agile_info_shadow">
<!-- Standard button -->
<h3 class="w3_inner_tittle two"> Button With Radius</h3>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
</div>
<div class="clearfix"></div>
</div>
<!-- //buttons_w3ls_agile -->
<!-- /buttons_w3ls_agile -->
<div class="buttons_w3ls_agile">
<div class="col-md-6 button_set_one three agile_info_shadow">
<h3 class="w3_inner_tittle two">Button With Icon</h3>
<!-- Standard button -->
<button type="button" class="btn btn-primary btn-flat btn-pri"><i class="fa fa-plus" aria-hidden="true"></i> Primary</button>
<button type="button" class="btn btn-success btn-flat btn-pri"><i class="fa fa-plus" aria-hidden="true"></i> Success</button>
<button type="button" class="btn btn-info btn-flat btn-pri"><i class="fa fa-plus" aria-hidden="true"></i>Info</button>
<button type="button" class="btn btn-warning btn-flat btn-pri"><i class="fa fa-plus" aria-hidden="true"></i>Warning</button>
<button type="button" class="btn btn-danger btn-flat btn-pri"><i class="fa fa-plus" aria-hidden="true"></i>Danger</button>
</div>
<div class="col-md-6 button_set_one three one agile_info_shadow">
<!-- Standard button -->
<h3 class="w3_inner_tittle two"> Button With Icon</h3>
<button type="button" class="btn btn-primary btn-flat btn-pri btn-lg"><i class="fa fa-plus" aria-hidden="true"></i> Primary</button>
<button type="button" class="btn btn-success btn-flat btn-pri btn-md"><i class="fa fa-plus" aria-hidden="true"></i> Success</button>
<button type="button" class="btn btn-info btn-flat btn-pri btn-sm"><i class="fa fa-plus" aria-hidden="true"></i>Info</button>
<button type="button" class="btn btn-warning btn-flat btn-pri btn-xs"><i class="fa fa-plus" aria-hidden="true"></i>Warning</button>
</div>
<div class="clearfix"></div>
</div>
<!-- //buttons_w3ls_agile -->
<div class="agile-buttons-grids">
<!-- button-states -->
<div class="col-sm-6 col-md-3 button-states-top-grid">
<div class="panel1 button-states-grid">
<div class="panel-heading">
<div class="panel-title pn">
<h3 class="mtn mb10 fw400">Button States</h3>
</div>
</div>
<div class="mtn">
<p class="mb15">
<code>.disabled</code>
</p>
<div class="bs-component mb20">
<button type="button" class="btn disabled btn-dark btn-block">Disabled</button>
</div>
<p class="mb15">
<code>.btn-hover</code>
</p>
<div class="bs-component mb20">
<button type="button" class="btn btn-hover btn-dark btn-block">Hover</button>
<div id="source-button" class="btn btn-system btn-xs" style="display: none;">&lt; &gt;</div></div>
<p class="mb15">
<code>.active</code>
</p>
<div class="bs-component mb20">
<button type="button" class="btn active btn-dark btn-block">Active</button>
</div>
</div>
</div>
</div>
<!-- //button-states -->
<!-- button-sizes -->
<div class="col-sm-6 col-md-3 button-size-grids">
<div class="panel1 button-sizes">
<div class="panel-heading">
<div class="panel-title pn">
<h3 class="mtn mb10 fw400">Button Sizes</h3>
</div>
</div>
<div class="mtn">
<p class="mb15">
<code>.btn-xs</code>
</p>
<div class="bs-component mb20">
<button type="button" class="btn btn-xs btn-primary btn-block">Primary</button>
</div>
<p class="mb15">
<code>.btn-sm</code>
</p>
<div class="bs-component mb20">
<button type="button" class="btn btn-sm btn-primary btn-block">Primary</button>
</div>
<p class="mb15">
<code>Normal button</code>
</p>
<div class="bs-component mb20">
<button type="button" class="btn btn-primary btn-block">Primary</button>
</div>
<p class="mb15">
<code>.btn-lg</code>
</p>
<div class="bs-component mb20">
<button type="button" class="btn btn-lg btn-primary btn-block">Primary</button>
</div>
</div>
</div>
</div>
<!-- //button-sizes -->
<!-- icon-hover-effects -->
<div class="col-sm-6 hover-buttons">
<div class="wrap">
<div class="bg-effect">
<h2>Button with Icons</h2>
<ul class="bt-list">
<li><a href="#" class="hvr-icon-grow-rotate col-1">Icon Hang</a></li>
<li><a href="#" class="hvr-icon-forward col-2">Icon Forward</a></li>
<li><a href="#" class="hvr-icon-down col-3">Icon Down</a></li>
<li><a href="#" class="hvr-icon-up col-4">Icon Up</a></li>
<li><a href="#" class="hvr-icon-spin col-5">Icon Spin</a></li>
<li><a href="#" class="hvr-icon-drop col-6">Icon Drop</a></li>
<li><a href="#" class="hvr-icon-fade col-7">Icon Fade</a></li>
<li><a href="#" class="hvr-icon-float-away col-24">Icon Sink</a></li>
<li><a href="#" class="hvr-icon-grow col-9">Icon Grow</a></li>
<li><a href="#" class="hvr-icon-sink-away col-8">Icon Away</a></li>
<li><a href="#" class="hvr-icon-pulse col-11">Icon Pulse</a></li>
<li><a href="#" class="hvr-icon-shrink col-10">Icon Shrink</a></li>
<li><a href="#" class="hvr-icon-push col-14">Icon Push</a></li>
<li><a href="#" class="hvr-icon-pop col-15">Icon Pop</a></li>
<li><a href="#" class="hvr-icon-pulse-grow col-12">Icon Bob</a></li>
<li><a href="#" class="hvr-icon-float col-21">Icon Float</a></li>
<li><a href="#" class="hvr-icon-bounce col-22">Icon Bounce</a></li>
<li><a href="#" class="hvr-icon-rotate col-23">Icon Rotate</a></li>
</ul>
</div>
</div>
</div>
<!-- //icon-hover-effects -->
<div class="clearfix"> </div>
</div>
<!-- //buttons -->
</div>
</div>
<!-- //main content ends-->
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".header-main").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-main").addClass("fixed");
}else{
$(".header-main").removeClass("fixed");
}
});
});
</script>
<!-- /script-for sticky-nav -->
<!--inner block start here-->
<div class="inner-block">
</div>
<!--inner block end here-->
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Compose mail :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push" ng-app="myApp">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page compose">
<div ui-view="content">
<!-- Content222-->
</div>
<div class="col-md-4 compose-left">
<div class="folder widget-shadow">
<ul>
<li class="head">Folders</li>
<li><a href="inbox.html"><i class="fa fa-inbox"></i>Inbox <span>52</span></a></li>
<li><a href="#"><i class="fa fa fa-envelope-o"></i>Sent </a></li>
<li><a href="#"><i class="fa fa-file-text-o"></i>Drafts <span>03</span></a> </li>
<li><a href="#"><i class="fa fa-flag-o"></i>Spam </a></li>
<li><a href="#"><i class="fa fa-trash-o"></i>Trash</a></li>
</ul>
</div>
<div class="chat-grid widget-shadow">
<ul>
<li class="head">Friends (Online) </li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i1.png" alt="">
<label class="small-badge"></label>
</div>
<div class="chat-right">
<p>Andrew Josifn</p>
<h6>Nullam quis risus eget </h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i4.png" alt="">
<label class="small-badge bg-green"></label>
</div>
<div class="chat-right">
<p>Justen Ferry</p>
<h6>Urna mollis ornare vel</h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i3.png" alt="">
<label class="small-badge bg-green"></label>
</div>
<div class="chat-right">
<p>Brown Andy </p>
<h6>Quis risus ullam neget </h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i4.png" alt="">
<label class="small-badge"></label>
</div>
<div class="chat-right">
<p>Deos Jhon</p>
<h6>Mollis ornare Urna vel</h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-8 compose-right widget-shadow">
<div class="panel-default">
<div class="panel-heading">
Compose New Message
</div>
<div class="panel-body">
<div class="alert alert-info">
Please fill details to send a new message
</div>
<form class="com-mail">
<input type="text" class="form-control1 control3" placeholder="To :">
<input type="text" class="form-control1 control3" placeholder="Subject :">
<textarea rows="6" class="form-control1 control2" placeholder="Message :" ></textarea>
<div class="form-group">
<div class="btn btn-default btn-file">
<i class="fa fa-paperclip"></i> Attachment
<input type="file" name="attachment">
</div>
<p class="help-block">Max. 32MB</p>
</div>
<input type="submit" value="Send Message">
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!--footer-->
<!--//footer-->
</div>
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<script src="js/scripts.js"></script>
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Forms :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<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="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design Dashboard</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>Timesheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div class="forms">
<h2 class="title1">Forms</h2>
<div class="form-grids row widget-shadow" data-example-id="basic-forms">
<div class="form-title">
<h4>Basic Form :</h4>
</div>
<div class="form-body">
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
</div>
</div>
<div class=" form-grids row form-grids-right">
<div class="widget-shadow " data-example-id="basic-forms">
<div class="form-title">
<h4>Horizontal form :</h4>
</div>
<div class="form-body">
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="col-sm-offset-2"> <button type="submit" class="btn btn-default">Sign in</button> </div> </form>
</div>
</div>
</div>
<div class="inline-form widget-shadow">
<div class="form-title">
<h4>Inline form Example 1 :</h4>
</div>
<div class="form-body">
<div data-example-id="simple-form-inline"> <form class="form-inline"> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </div>
</div>
</div>
<div class="form-two widget-shadow">
<div class="form-title">
<h4>Inline form Example 2 :</h4>
</div>
<div class="form-body" data-example-id="simple-form-inline">
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Your name"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="mail.abc@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
</div>
</div>
<div class="row">
<h3 class="title1">General Form :</h3>
<div class="form-three widget-shadow">
<form class="form-horizontal">
<div class="form-group">
<label for="focusedinput" class="col-sm-2 control-label">Focused Input</label>
<div class="col-sm-8">
<input type="text" class="form-control1" id="focusedinput" placeholder="Default Input">
</div>
<div class="col-sm-2">
<p class="help-block">Your help text!</p>
</div>
</div>
<div class="form-group">
<label for="disabledinput" class="col-sm-2 control-label">Disabled Input</label>
<div class="col-sm-8">
<input disabled="" type="text" class="form-control1" id="disabledinput" placeholder="Disabled Input">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control1" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="checkbox" class="col-sm-2 control-label">Checkbox</label>
<div class="col-sm-8">
<div class="checkbox-inline1"><label><input type="checkbox"> Unchecked</label></div>
<div class="checkbox-inline1"><label><input type="checkbox" checked=""> Checked</label></div>
<div class="checkbox-inline1"><label><input type="checkbox" disabled=""> Disabled Unchecked</label></div>
<div class="checkbox-inline1"><label><input type="checkbox" disabled="" checked=""> Disabled Checked</label></div>
</div>
</div>
<div class="form-group">
<label for="checkbox" class="col-sm-2 control-label">Checkbox Inline</label>
<div class="col-sm-8">
<div class="checkbox-inline"><label><input type="checkbox"> Unchecked</label></div>
<div class="checkbox-inline"><label><input type="checkbox" checked=""> Checked</label></div>
<div class="checkbox-inline"><label><input type="checkbox" disabled=""> Disabled Unchecked</label></div>
<div class="checkbox-inline"><label><input type="checkbox" disabled="" checked=""> Disabled Checked</label></div>
</div>
</div>
<div class="form-group">
<label for="selector1" class="col-sm-2 control-label">Dropdown Select</label>
<div class="col-sm-8"><select name="selector1" id="selector1" class="form-control1">
<option>Lorem ipsum dolor sit amet.</option>
<option>Dolore, ab unde modi est!</option>
<option>Illum, fuga minus sit eaque.</option>
<option>Consequatur ducimus maiores voluptatum minima.</option>
</select></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Multiple Select</label>
<div class="col-sm-8">
<select multiple="" class="form-control1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="txtarea1" class="col-sm-2 control-label">Textarea</label>
<div class="col-sm-8"><textarea name="txtarea1" id="txtarea1" cols="50" rows="4" class="form-control1"></textarea></div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label">Radio</label>
<div class="col-sm-8">
<div class="radio block"><label><input type="radio"> Unchecked</label></div>
<div class="radio block"><label><input type="radio" checked=""> Checked</label></div>
<div class="radio block"><label><input type="radio" disabled=""> Disabled Unchecked</label></div>
<div class="radio block"><label><input type="radio" disabled="" checked=""> Disabled Checked</label></div>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label">Radio Inline</label>
<div class="col-sm-8">
<div class="radio-inline"><label><input type="radio"> Unchecked</label></div>
<div class="radio-inline"><label><input type="radio" checked=""> Checked</label></div>
<div class="radio-inline"><label><input type="radio" disabled=""> Disabled Unchecked</label></div>
<div class="radio-inline"><label><input type="radio" disabled="" checked=""> Disabled Checked</label></div>
</div>
</div>
<div class="form-group">
<label for="smallinput" class="col-sm-2 control-label label-input-sm">Small Input</label>
<div class="col-sm-8">
<input type="text" class="form-control1 input-sm" id="smallinput" placeholder="Small Input">
</div>
</div>
<div class="form-group">
<label for="mediuminput" class="col-sm-2 control-label">Medium Input</label>
<div class="col-sm-8">
<input type="text" class="form-control1" id="mediuminput" placeholder="Medium Input">
</div>
</div>
<div class="form-group mb-n">
<label for="largeinput" class="col-sm-2 control-label label-input-lg">Large Input</label>
<div class="col-sm-8">
<input type="text" class="form-control1 input-lg" id="largeinput" placeholder="Large Input">
</div>
</div>
</form>
</div>
</div>
<div class="row">
<h3 class="title1">Variable Forms :</h3>
<div class="form-three widget-shadow">
<div data-example-id="form-validation-states-with-icons"> <form> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status"> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> <span id="inputWarning2Status" class="sr-only">(warning)</span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status"> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span> </div> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputGroupSuccess1">Input group with success</label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputGroupSuccess1Status" class="sr-only">(success)</span> </div> </form> </div>
</div>
<div class="form-three widget-shadow">
<div class=" panel-body-inputin">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">Email Address</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input type="text" class="form-control1" placeholder="Email Address">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Password</label>
<div class="col-md-8">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-key"></i>
</span>
<input type="password" class="form-control1" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email Address</label>
<div class="col-md-8">
<div class="input-group input-icon right">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input id="email" class="form-control1" type="text" placeholder="Email Address">
</div>
</div>
<div class="col-sm-2">
<p class="help-block">With tooltip</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Password</label>
<div class="col-md-8">
<div class="input-group input-icon right">
<span class="input-group-addon">
<i class="fa fa-key"></i>
</span>
<input type="password" class="form-control1" placeholder="Password">
</div>
</div>
<div class="col-sm-2">
<p class="help-block">With tooltip</p>
</div>
</div>
<div class="form-group has-success">
<label class="col-md-2 control-label">Input Addon Success</label>
<div class="col-md-8">
<div class="input-group input-icon right">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input id="email" class="form-control1" type="text" placeholder="Email Address">
</div>
</div>
<div class="col-sm-2">
<p class="help-block">Email is valid!</p>
</div>
</div>
<div class="form-group has-error">
<label class="col-md-2 control-label">Input Addon Error</label>
<div class="col-md-8">
<div class="input-group input-icon right">
<span class="input-group-addon">
<i class="fa fa-key"></i>
</span>
<input type="password" class="form-control1" placeholder="Password">
</div>
</div>
<div class="col-sm-2">
<p class="help-block">Error!</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Checkbox Addon</label>
<div class="col-md-8">
<div class="input-group">
<div class="input-group-addon"><input type="checkbox"></div>
<input type="text" class="form-control1">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Checkbox Addon</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control1">
<div class="input-group-addon"><input type="checkbox"></div>
</div>
</div>
<div class="col-sm-2">
<p class="help-block">Checkbox on right</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Radio Addon</label>
<div class="col-md-8">
<div class="input-group">
<div class="input-group-addon"><input type="radio"></div>
<input type="text" class="form-control1">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Radio Addon</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control1">
<div class="input-group-addon"><input type="radio"></div>
</div>
</div>
<div class="col-sm-2">
<p class="help-block">Radio on right</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Input Processing</label>
<div class="col-md-8">
<div class="input-icon right spinner">
<i class="fa fa-fw fa-spin fa-spinner"></i>
<input id="email" class="form-control1" type="text" placeholder="Processing...">
</div>
</div>
<div class="col-sm-2">
<p class="help-block">Processing right</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Static Paragraph</label>
<div class="col-md-8">
<p class="form-control1 m-n">email@example.com</p>
</div>
</div>
<div class="form-group mb-n">
<label class="col-md-2 control-label">Readonly</label>
<div class="col-md-8">
<input type="text" class="form-control1" placeholder="Readonly" readonly="">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | General Elements :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page general">
<h2 class="title1">General Elements</h2>
<div class="panel-info widget-shadow">
<h4 class="title2">Contextual alternatives :</h4>
<div class="col-md-6 panel-grids">
<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel Default</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis quam sit amet nisi dictum, in iaculis dolor lobortis. Aenean placerat purus non faucibus.</div> </div>
</div>
<div class="col-md-6 panel-grids">
<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel Primary</h3> </div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis quam sit amet nisi dictum, in iaculis dolor lobortis. Aenean placerat purus non faucibus. </div> </div>
</div>
<div class="col-md-6 panel-grids">
<div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel Success</h3> </div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis quam sit amet nisi dictum, in iaculis dolor lobortis. Aenean placerat purus non faucibus. </div> </div>
</div>
<div class="col-md-6 panel-grids">
<div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title"> Panel Info</h3> </div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis quam sit amet nisi dictum, in iaculis dolor lobortis. Aenean placerat purus non faucibus. </div> </div>
</div>
<div class="col-md-6 panel-grids">
<div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Panel Warning</h3> </div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis quam sit amet nisi dictum, in iaculis dolor lobortis. Aenean placerat purus non faucibus.</div> </div>
</div>
<div class="col-md-6 panel-grids">
<div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Panel Danger</h3> </div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis quam sit amet nisi dictum, in iaculis dolor lobortis. Aenean placerat purus non faucibus. </div> </div>
</div>
<div class="clearfix"> </div>
</div>
<div class="modals widget-shadow">
<h4 class="title2">Modals :</h4>
<div class="col-md-4 modal-grids">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">Demo modal </button>
<div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row-info">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-sm-9"> Level 1: .col-sm-9
<div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div>
<div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<div class="col-md-4 modal-grids">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 modal-grids">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body"> Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="row">
<div class="col-md-6 general-grids widget-shadow">
<h4 class="title2">ScrollSpy example :</h4>
<div class="bs-example1" data-example-id="embedded-scrollspy">
<nav id="navbar-example2" class="navbar navbar-default navbar-static">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy"> <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="index.html">Project Name</a>
</div>
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#fat">Item 1</a></li>
<li class=""><a href="#three">Item 2</a></li>
<li class=""><a href="#four">Item 3</a></li>
<li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">New Items<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="navbarDrop1"> <li class=""><a href="#one">product 1</a></li>
<li class=""><a href="#two">product 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" class="scrollspy-example scroll scrollbar1">
<h4 id="fat">Item 1</h4><p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamust.</p>
<h4 id="three">Item 2</h4> <p>Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatevthundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. </p> <p>Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. </p>
<h4 id="four">Item 3</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatevthundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. </p> <p>Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. </p>
<h4 id="one">New Product 1</h4> <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
<h4 id="two">New Product 2</h4> <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
</div>
</div>
</div>
<div class="col-md-6 general-grids grids-right widget-shadow">
<h4 class="title2">Horizontal Tabs:</h4>
<ul id="myTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class=""><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">Home</a></li> <li role="presentation" class="active"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="true">Profile</a></li> <li role="presentation" class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> <li class=""><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1" aria-expanded="false">@fat</a></li> <li class=""><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2" aria-expanded="false">@mdo</a></li> </ul> </li> </ul>
<div id="myTabContent" class="tab-content scrollbar1"> <div role="tabpanel" class="tab-pane fade" id="home" aria-labelledby="home-tab"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> <div role="tabpanel" class="tab-pane fade active in" id="profile" aria-labelledby="profile-tab"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> </div> <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab"> <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> </div> </div>
</div>
<div class="clearfix"> </div>
</div>
<div class="tool-tips widget-shadow">
<h4 class="title2">Tooltips :</h4>
<div class="bs-example-tooltips">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>
<script>$(function () {
$('[data-toggle="tooltip"]').tooltip()
})</script>
</div>
</div>
<div class="tool-tips widget-shadow">
<h4 class="title2">Popovers :</h4>
<div class="bs-example-tooltips">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</div>
</div>
<div class="panel-group tool-tips widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
<h4 class="title2"> Accordion example :</h4>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Product 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. apiente ea proident. Ad vegan excepteur butcher vice lomo. labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Product 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Anim pariatur cliche reprehenderit, enim Food truck quinoa nesciunt laborum eiusmod. apiente ea proident. Ad vegan excepteur butcher vice lomo. labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Product 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. apiente ea proident. Ad vegan excepteur butcher vice lomo. labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Product 4
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
Cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. apiente ea proident. Ad vegan excepteur butcher vice lomo. labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Product 5
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. apiente ea proident. Ad vegan excepteur butcher vice lomo. labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p> </div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Grids :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span><span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>Timesheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<h2 class="title1">Grid system</h2>
<div class="grids widget-shadow">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control1" placeholder=".col-md-12">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="col-md-10">
<input type="text" class="form-control1" placeholder=".col-md-10">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-3">
</div>
<div class="col-md-9">
<input type="text" class="form-control1" placeholder=".col-md-9">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-4">
</div>
<div class="col-md-8">
<input type="text" class="form-control1" placeholder=".col-md-8">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-5 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-5">
</div>
<div class="col-md-7">
<input type="text" class="form-control1" placeholder=".col-md-7">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-6">
</div>
<div class="col-md-6">
<input type="text" class="form-control1" placeholder=".col-md-6">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-4">
</div>
<div class="col-md-4 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-4">
</div>
<div class="col-md-4">
<input type="text" class="form-control1" placeholder=".col-md-4">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="col-md-8 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-8">
</div>
<div class="col-md-2">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-3">
</div>
<div class="col-md-3 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-3">
</div>
<div class="col-md-3 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-3">
</div>
<div class="col-md-3">
<input type="text" class="form-control1" placeholder=".col-md-3">
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="form-group mb-n">
<div class="row">
<div class="col-md-2 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="col-md-2 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="col-md-2 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="col-md-2 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="col-md-2 grid_box1">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="col-md-2">
<input type="text" class="form-control1" placeholder=".col-md-2">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<h3 class="title1">Bootstrap Grid Details</h3>
<div class="grid-bottom widget-shadow">
<table class="table table-bordered table-striped no-margin grd_tble">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (&lt;768px)</small>
</th>
<th>
Small devices
<small>Tablets (≥768px)</small>
</th>
<th>
Medium devices
<small>Desktops (≥992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Suitable for</th>
<td>Phones</td>
<td>Tablets</td>
<td>Small Laptops</td>
<td>Laptops & Desktops</td>
</tr>
<tr>
<th>Grid behaviour</th>
<td>Horizontal at all times</td>
<td>Collapsed to start, horizontal above breakpoints</td>
<td>Collapsed to start, horizontal above breakpoints</td>
<td>Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th>Max container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th>Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th># of columns</th>
<td >12</td>
<td >12</td>
<td >12</td>
<td >12</td>
</tr>
<tr>
<th>Column Width</th>
<td>Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<th>Gutter width</th>
<td>30px (15px on each side of a column)</td>
<td>30px (15px on each side of a column)</td>
<td>30px (15px on each side of a column)</td>
<td>30px (15px on each side of a column)</td>
</tr>
<tr>
<th>Nestable</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Offests</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Column Ordering</th>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p> </div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Inbox :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span><span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/2.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/2.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.png" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<h2 class="title1">Mail Page</h2>
<div class="col-md-4 compose-left">
<div class="folder widget-shadow">
<ul>
<li class="head"><i class="fa fa-folder" aria-hidden="true"></i>Folders</li>
<li><a href="inbox.html"><i class="fa fa-inbox"></i>Inbox <span>52</span></a></li>
<li><a href="#"><i class="fa fa fa-envelope-o"></i>Sent </a></li>
<li><a href="#"><i class="fa fa-file-text-o"></i>Drafts <span>03</span></a> </li>
<li><a href="#"><i class="fa fa-flag-o"></i>Spam </a></li>
<li><a href="#"><i class="fa fa-trash-o"></i>Trash</a></li>
</ul>
</div>
<div class="chat-grid widget-shadow">
<ul>
<li class="head"><i class="fa fa-user" aria-hidden="true"></i>Friends (Online) </li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i1.png" alt="">
<label class="small-badge"></label>
</div>
<div class="chat-right">
<p>Alexander</p>
<h6>Nullam quis risus eget </h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i2.png" alt="">
<label class="small-badge bg-green"></label>
</div>
<div class="chat-right">
<p>Jackson jacob</p>
<h6>Urna mollis ornare vel</h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i3.png" alt="">
<label class="small-badge bg-green"></label>
</div>
<div class="chat-right">
<p>Elisa liden </p>
<h6>Quis risus ullam neget </h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
<li><a href="#">
<div class="chat-left">
<img class="img-circle" src="images/i4.png" alt="">
<label class="small-badge"></label>
</div>
<div class="chat-right">
<p>Michael John</p>
<h6>Mollis ornare Urna vel</h6>
</div>
<div class="clearfix"> </div>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-8 compose-right widget-shadow">
<div class="panel-default">
<div class="panel-heading">
Inbox
</div>
<div class="inbox-page">
<h4>Today</h4>
<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i1.png" alt=""/></div>
<div class="mail mail-name"> <h6>Alexander</h6> </div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="mail"><p>Nullam quis risus eget urna mollis ornare accusamus terry </p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>30th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i2.png" alt=""/></div>
<div class="mail mail-name"><h6>Michael</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<div class="mail"><p>Mollis nullam quis risus eget ornare accusamus terry </p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>30th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="mail-body">
<p>Quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i3.png" alt=""/></div>
<div class="mail mail-name"><h6>Davidson</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapsethree">
<div class="mail"><p>Ornare vel eu leo nullam quis urna mollis accusamus terry </p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>30th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="mail-body">
<p>Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i4.png" alt=""/></div>
<div class="mail mail-name"><h6>Charley</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<div class="mail"><p>Vely Ornare leo nullam quis risus mollis lorem ipsum</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapsefour">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>30th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="mail-body">
<p> Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
</div>
<div class="inbox-page row">
<h4>Yesterday Messages</h4>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i2.png" alt=""/></div>
<div class="mail mail-name"><h6> Michael </h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<div class="mail"><p>Mollis nullam quis risus eget urna ornare dolor sit amet</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>29th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch Nihil.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i1.png" alt=""/></div>
<div class="mail mail-name"><h6>Janiya</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapsesix">
<div class="mail"><p>Nullam quis risus eget urna mollis ornare eiusmod accusamus</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>29th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix">
<div class="mail-body">
<p>Officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i3.png" alt=""/></div>
<div class="mail mail-name"><h6>Skolski</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSev" aria-expanded="true" aria-controls="collapsesev">
<div class="mail"><p>Ornare vel eu leo nullam quis urna mollis eiusmod high life</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSev" aria-expanded="true" aria-controls="collapseSev">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>29th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseSev" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsev">
<div class="mail-body">
<p>wolf moon officia aute, non cupidatat skateboard dolor brunch aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i4.png" alt=""/></div>
<div class="mail mail-name"><h6>Emoori</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
<div class="mail"><p>Vely Ornare leo nullam eget urna mollis lorem ipsum</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>29th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseEight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingeight">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
</div>
<div class="inbox-page row">
<h4>Older Messages</h4>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i2.png" alt=""/></div>
<div class="mail mail-name"><h6> Michael</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNine" aria-expanded="true" aria-controls="collapsenine">
<div class="mail"><p>Mollis nullam quis risus ornare vel leo dolor sit amet</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNine" aria-expanded="true" aria-controls="collapseNine">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>29th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseNine" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingnine">
<div class="mail-body">
<p>Skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i1.png" alt=""/></div>
<div class="mail mail-name"><h6>Janiya</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTen" aria-expanded="true" aria-controls="collapseTen">
<div class="mail"><p>Nullam quis risus mollis ornare leo ollis nullam quis</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTen" aria-expanded="true" aria-controls="collapseTen">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>28th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapseTen" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingten">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i3.png" alt=""/></div>
<div class="mail mail-name"><h6>Skolski</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse11" aria-expanded="true" aria-controls="collapse11">
<div class="mail"><p>Ornare vel quis risus ollis nullam quis eget urna mollis </p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse11" aria-expanded="true" aria-controls="collapse11">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>28th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading11">
<div class="mail-body">
<p>Nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i4.png" alt=""/></div>
<div class="mail mail-name"><h6>Emoori</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse12" aria-expanded="true" aria-controls="collapse12">
<div class="mail"><p>Vely Ornare leo nullam quis risus eget ollis nullam quis</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse12" aria-expanded="true" aria-controls="collapse12">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>27th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse12" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading12">
<div class="mail-body">
<p>Anim pariatur cliche repreh enderit brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i1.png" alt=""/></div>
<div class="mail mail-name"><h6>Janiya</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse13" aria-expanded="true" aria-controls="collapse13">
<div class="mail"><p>Vely Ornare quis risus ollis nullam quis eget urna mollis </p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse13" aria-expanded="true" aria-controls="collapse13">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>26th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse13" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading13">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon temsunt </p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i3.png" alt=""/></div>
<div class="mail mail-name"><h6>Skolski</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse14" aria-expanded="true" aria-controls="collapse14">
<div class="mail"><p>Vely Ornare leo nullam quis ollis nullam quis risus eget </p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse15" aria-expanded="true" aria-controls="collapse15">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>26th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading14">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i1.png" alt=""/></div>
<div class="mail mail-name"><h6>Janiya</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse15" aria-expanded="true" aria-controls="collapse15">
<div class="mail"><p>Nullam quis risus mollis ornare vel eu leo ollis nullam quis</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse15" aria-expanded="true" aria-controls="collapse15">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>26th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse15" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading15">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i2.png" alt=""/></div>
<div class="mail mail-name"><h6> Michael</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse16" aria-expanded="true" aria-controls="collapse16">
<div class="mail"><p>Mollis nullam quis risus eget ollis nullam quis urna</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse16" aria-expanded="true" aria-controls="collapse16">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>25th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading16">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua putica sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i3.png" alt=""/></div>
<div class="mail mail-name"><h6>Skolski</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse17" aria-expanded="true" aria-controls="collapse17">
<div class="mail"><p>Ornare vel eu leo nullam quis urna mollis ollis nullam quis</p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse17" aria-expanded="true" aria-controls="collapse17">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>25th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse17" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading17">
<div class="mail-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
<div class="inbox-row widget-shadow">
<div class="mail "> <input type="checkbox" class="checkbox"> </div>
<div class="mail"><img src="images/i4.png" alt=""/></div>
<div class="mail mail-name"><h6>Emoori</h6></div>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse18" aria-expanded="true" aria-controls="collapse18">
<div class="mail"><p>Vely Ornare leo nullam quis ollis nullam quis risus mollis </p></div>
</a>
<div class="mail-right dots_drop">
<div class="dropdown">
<a href="#" data-toggle="dropdown" aria-expanded="false">
<p><i class="fa fa-ellipsis-v mail-icon"></i></p>
</a>
<ul class="dropdown-menu float-right">
<li>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse18" aria-expanded="true" aria-controls="collapse18">
<i class="fa fa-reply mail-icon"></i>
Reply
</a>
</li>
<li>
<a href="#" title="">
<i class="fa fa-download mail-icon"></i>
Archive
</a>
</li>
<li>
<a href="#" class="font-red" title="">
<i class="fa fa-trash-o mail-icon"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div class="mail-right"><p>10th Nov</p></div>
<div class="clearfix"> </div>
<div id="collapse18" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading18">
<div class="mail-body">
<p>Laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
<form>
<input type="text" placeholder="Reply to sender" required="">
<input type="submit" value="Send">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE HTML> <!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <title>Quản trị văn phòng</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>News</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="common/css/all.min.css" rel="stylesheet" <meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
type="text/css"> SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link rel="stylesheet" href="css/bootstrap-combined.min.css">
<!-- Custom styles for this template-->
<link href="common/css/sb-admin.css" rel="stylesheet">
<!--==============================News=================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.png"/>
<!--===============================================================================================-->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="fonts/fontawesome-5.0.8/css/fontawesome-all.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="vendor/animsition/css/animsition.min.css">
<!--==============================================================S=================================-->
<link rel="stylesheet" href="css/util.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="css/main.css">
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/animsition/js/animsition.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="js/angular.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angular-resource.js"></script>
<script data-require="angular-ui-bootstrap@0.3.0" data-semver="0.3.0" src="js/ui-bootstrap-tpls-0.3.0.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge">-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document</title> <title>Quản trị văn phòng</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/> <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
...@@ -59,709 +35,84 @@ ...@@ -59,709 +35,84 @@
<!-- Custom fonts for this template--> <!-- Custom fonts for this template-->
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
rel="stylesheet" type="text/css"> rel="stylesheet" type="text/css">
<link href="common/css/all.min.css" rel="stylesheet" <!-- <link href="common/css/all.min.css" rel="stylesheet"-->
type="text/css"> <!-- type="text/css">-->
<!-- Page level plugin CSS--> <!-- &lt;!&ndash; Page level plugin CSS&ndash;&gt;-->
<link href="common/css/dataTables.bootstrap4.css" <!-- <link href="common/css/dataTables.bootstrap4.css"-->
rel="stylesheet"> <!-- rel="stylesheet">-->
<!-- Custom styles for this template--> <!-- &lt;!&ndash; Custom styles for this template&ndash;&gt;-->
<link href="common/css/sb-admin.css" rel="stylesheet"> <!-- <link href="common/css/sb-admin.css" rel="stylesheet">-->
<!-- angular --> <!-- angular -->
<script src="js/angular.js"></script> <script src="js/angular.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
<script type="application/x-javascript"> addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
} </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css'/>
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/Footer-with-social-icons.css">
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext"
rel="stylesheet">
<script src="js/Chart.js"></script>
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="js/angular-route.js"></script> <script src="js/angular-route.js"></script>
<script src="js/angular-ui-router.min.js"></script> <script src="js/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="pages/project/groupproject/groupProjectController.js"></script> <script src="pages/project/groupproject/groupProjectController.js"></script>
<script src="pages/timesheet/timeSheetController.js"></script> <script src="pages/timesheet/timeSheetController.js"></script>
<script src="pages/leaveform/leaveFormController.js"></script> <script src="pages/leaveform/leaveFormController.js"></script>
<script src="pages/leaveform/leaveFormDetailController.js"></script> <script src="pages/leaveform/leaveFormDetailController.js"></script>
<script src="pages/timesheet/timeSheetDetailController.js"></script> <script src="pages/timesheet/timeSheetDetailController.js"></script>
<script src="pages/employee/employeeController.js"></script>
<script src="pages/employee/createEmployeeController.js"></script>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet"
href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/>
`
<!-- end anguarjs app-->
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
<style>
#chartdiv {
width: 100%;
height: 295px;
}
</style>
<!--pie-chart --><!-- index page sales reviews visitors pie chart -->
<script src="js/pie-chart.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#demo-pie-1').pieChart({
barColor: '#2dde98',
trackColor: '#eee',
lineCap: 'round',
lineWidth: 8,
onStep: function (from, to, percent) {
$(this.element).find('.pie-value').text(Math.round(percent) + '%');
}
});
$('#demo-pie-2').pieChart({
barColor: '#8e43e7',
trackColor: '#eee',
lineCap: 'butt',
lineWidth: 8,
onStep: function (from, to, percent) {
$(this.element).find('.pie-value').text(Math.round(percent) + '%');
}
});
$('#demo-pie-3').pieChart({
barColor: '#ffc168',
trackColor: '#eee',
lineCap: 'square',
lineWidth: 8,
onStep: function (from, to, percent) {
$(this.element).find('.pie-value').text(Math.round(percent) + '%');
}
});
});
</script>
<link href="css/owl.carousel.css" rel="stylesheet">
<script src="js/owl.carousel.js"></script>
<script>
$(document).ready(function () {
$("#owl-demo").owlCarousel({
items: 3,
lazyLoad: true,
autoPlay: true,
pagination: true,
nav: true
});
});
</script>
<!-- Js --> <!-- Js -->
<!-- Bootstrap core JavaScript--> <!-- Bootstrap core JavaScript-->
<script src="pages/employee/employeeController.js"></script> <script src="pages/employee/employeeController.js"></script>
<script src="pages/project/project/projectController.js"></script> <script src="pages/project/project/projectController.js"></script>
<script src="pages/login/loginsController.js"></script> <script src="pages/login/loginsController.js"></script>
<script src="pages/adminhome/admin.js"></script> <script src="pages/adminhome/admin.js"></script>
<script src="common/js/jquery.min.js"></script> <!-- <script src="common/js/jquery.min.js"></script>-->
<script src="common/js/bootstrap.bundle.min.js"></script> <!-- <script src="common/js/bootstrap.bundle.min.js"></script>-->
<!-- Core plugin JavaScript--> <!-- &lt;!&ndash; Core plugin JavaScript&ndash;&gt;-->
<script src="common/js/jquery.easing.min.js"></script> <!-- <script src="common/js/jquery.easing.min.js"></script>-->
<!-- Page level plugin JavaScript--> <!-- &lt;!&ndash; Page level plugin JavaScript&ndash;&gt;-->
<script src="common/js/Chart.min.js"></script> <!-- <script src="common/js/Chart.min.js"></script>-->
<script src="common/js/jquery.dataTables.js"></script> <!-- <script src="common/js/jquery.dataTables.js"></script>-->
<script src="common/js/dataTables.bootstrap4.js"></script> <!-- <script src="common/js/dataTables.bootstrap4.js"></script>-->
<!-- Custom scripts for all pages--> <!-- &lt;!&ndash; Custom scripts for all pages&ndash;&gt;-->
<script src="common/js/sb-admin.min.js"></script> <!-- <script src="common/js/sb-admin.min.js"></script>-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head> <!-- Bootstrap Core CSS -->
<body class="cbp-spmenu-push" ng-app="myApp"> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1"> <!-- Custom CSS -->
<!--left-fixed -navigation--> <link href="css/style.css" rel='stylesheet' type='text/css' />
<aside class="sidebar-left">
<nav class="navbar navbar-inverse"> <!-- font-awesome icons CSS -->
<div class="navbar-header"> <link href="css/font-awesome.css" rel="stylesheet">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" <!-- //font-awesome icons CSS -->
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <!-- side nav css file -->
<span class="icon-bar"></span> <link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<span class="icon-bar"></span> <!-- side nav css file -->
<span class="icon-bar"></span>
</button> <!-- js-->
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span <script src="js/jquery-1.11.1.min.js"></script>
class="dashboard_text">Design dashboard</span></a></h1> <script src="js/modernizr.custom.js"></script>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!--webfonts-->
<ul class="sidebar-menu"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<li class="header">MAIN NAVIGATION</li> <!--//webfonts-->
<li class="treeview">
<a href="index.html"> <!-- Metis Menu -->
<span class="glyphicon glyphicon-user"></span> <span>Employee</span> <!--<script src="js/metisMenu.min.js"></script>-->
</a> <script src="js/custom.js"></script>
</li> <link href="css/custom.css" rel="stylesheet">
<li class="treeview"> <!--//Metis Menu -->
<a href="#"> <!-- <script src='js/SidebarNav.min.js'></script>-->
<i class="fa fa-laptop"></i> <!-- <script>-->
<span>Project</span> <!-- $('.sidebar-menu').SidebarNav()-->
<i class="fa fa-angle-left pull-right"></i> <!-- </script>-->
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
</li>
<li class="treeview">
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>TimeSheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a>
</li>
</ul>
</li>
<
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox </span>
<i class="fa fa-angle-left pull-right"></i>
<small class="label pull-right label-info1">08</small>
<span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox </a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
</nav>
</aside>
</div>
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<div class="profile_details_left">
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/2.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/2.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
<!--notification menu end -->
<div class="clearfix"></div>
</div>
</nav>
<!-- /.Navbar-->
<div class="header-right">
<div ui-view="layout"></div>
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search"
id="input-31"/>
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div>
<!--//end-search-box-->
<!-- -->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<!-- <span class="prfil-img"><img src="images/2.jpg" alt=""> </span> -->
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
<li><a href="#"><i class="fa fa-user"></i> My Account</a></li>
<li><a href="#"><i class="fa fa-suitcase"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-sign-out"></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div ui-view="layout">
Content222
</div>
</div>
</div>
<!--footer-->
<div class="content">
</div>
<footer id="myFooter">
<div class="container">
<div class="row">
<div class="col-sm-3 myCols">
<h5>Get started</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5>About us</h5>
<ul>
<li><a href="#">Company Information</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5>Support</h5>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Help desk</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5>Legal</h5>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="social-networks">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook-official"></i></a>
<a href="#" class="google"><i class="fa fa-google-plus"></i></a>
</div>
<!--//footer-->
<!-- new added graphs chart js-->
<script src="js/Chart.bundle.js"></script>
<script src="js/utils.js"></script>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var color = Chart.helpers.color;
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 2',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}]
};
$(function () {
window.onload = function () {
var ctx = document.getElementById("canvas")
if (ctx) {
ctx.getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top'
},
title: {
display: true,
text: 'Chart.js Bar Chart'
}
}
});
}
}
});
var c = document.getElementById('randomizeData');
if (c) {
c.addEventListener('click', function () {
var zero = Math.random() < 0.2 ? true : false;
barChartData.datasets.forEach(function (dataset) {
dataset.data = dataset.data.map(function () {
return zero ? 0.0 : randomScalingFactor();
});
});
window.myBar.update();
});
}
var colorNames = Object.keys(window.chartColors);
var el = document.getElementById('addDataset');
if (el) {
addEventListener('click', function () {
var colorName = colorNames[barChartData.datasets.length % colorNames.length];
;
var dsColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + barChartData.datasets.length,
backgroundColor: color(dsColor).alpha(0.5).rgbString(),
borderColor: dsColor,
borderWidth: 1,
data: []
};
for (var index = 0; index < barChartData.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
barChartData.datasets.push(newDataset);
window.myBar.update();
});
}
var els = document.getElementById('addData');
if (els) {
addEventListener('click', function () {
if (barChartData.datasets.length > 0) {
var month = MONTHS[barChartData.labels.length % MONTHS.length];
barChartData.labels.push(month);
for (var index = 0; index < barChartData.datasets.length; ++index) {
//window.myBar.addData(randomScalingFactor(), index);
barChartData.datasets[index].data.push(randomScalingFactor());
}
window.myBar.update();
}
});
}
var rs = document.getElementById('removeDataset');
if (rs) {
addEventListener('click', function () {
barChartData.datasets.splice(0, 1);
window.myBar.update();
});
}
var res = document.getElementById('removeData');
if (res) {
addEventListener('click', function () {
barChartData.labels.splice(-1, 1); // remove the label first
});
}
</script>
<<<<<<< HEAD
=======
<<<<<<< HEAD
<!-- new added graphs chart js-->
>>>>>>> 14cbe76ccc34395abe463875cb178d2c872e3f85
=======
>>>>>>> 049511c3b37f668c637022150c53bd25d9b8e61d
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeftPush = document.getElementById('showLeftPush'),
body = document.body;
showLeftPush.onclick = function () {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toright');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeftPush');
};
>>>>>>> master
<div ui-view="layout">
barChartData.datasets.forEach(function (dataset, datasetIndex) {
dataset.data.pop();
});
window.myBar.update();
});
}
<script src="js/main.js"></script>
<script src="js/app.js"></script>
<script src="pages/employee/employeeController.js"></script>
<script src="pages/project/project/projectController.js"></script>
<script src="pages/homepage/homeController.js"></script>
<script src="pages/homepage/HomeService.js"></script>
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script> <script src="js/classie.js"></script>
<script> <!--scrolling js-->
var menuLeft = document.getElementById('cbp-spmenu-s1'), <!-- <script src="js/jquery.nicescroll.js"></script>-->
showLeftPush = document.getElementById('showLeftPush'), <script src="js/scripts.js"></script>
body = document.body; <!--//scrolling js-->
showLeftPush.onclick = function () {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toright');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeftPush');
};
</script>
<!-- Custom scripts for all pages-->
<script src="common/js/sb-admin.min.js"></script>
<script>
function disableOther(button) {
if (button !== 'showLeftPush') {
classie.toggle(showLeftPush, 'disabled');
}
}
</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
<script src="js/scripts.js"></script> </head>
<script src="js/bootstrap.js"></script> <body ng-app="myApp" class="cbp-spmenu-push">
</div> <div ui-view="layout"></div>
</footer>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
/** /**
* *
*/ */
<<<<<<< HEAD
// angular.module("myApp", ["ui.router", "ui.bootstrap"]).config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
=======
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> master
// angular.module("myApp", ["ui.router", 'ngRoute']).config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
angular.module("myApp", ["ngAnimate","ui.router","ui.bootstrap"]).config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
<<<<<<< HEAD
=======
>>>>>>> 14cbe76ccc34395abe463875cb178d2c872e3f85
=======
angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(function ($stateProvider, $urlRouterProvider, $locationProvider) { angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
>>>>>>> 049511c3b37f668c637022150c53bd25d9b8e61d
>>>>>>> master
$locationProvider.hashPrefix(''); $locationProvider.hashPrefix('');
// $urlRouterProvider.otherwise("/news");
//trở về trang mặc định //trở về trang mặc định
$urlRouterProvider.otherwise("/timesheet"); $urlRouterProvider.otherwise("/leaveform");
// $urlRouterProvider.otherwise("/admin");
$stateProvider $stateProvider
.state("layout3", { .state("layout2", {
abstract: true, abstract: true,
views: { views: {
"layout": { "layout": {
templateUrl: "layout/layout3.html" templateUrl: "layout/layout2.html"
} }
} }
}) })
.state("admin", { .state("admin", {
parent: 'layout3', parent: 'layout2',
url: "/admin", url: "/admin",
views: { views: {
"content": { "content": {
...@@ -46,7 +26,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -46,7 +26,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("login", { .state("login", {
parent: 'layout4', parent: 'layout2',
url: "/login", url: "/login",
views: { views: {
"content": { "content": {
...@@ -56,7 +36,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -56,7 +36,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("register", { .state("register", {
parent: 'layout4', parent: 'layout2',
url: "/register", url: "/register",
views: { views: {
"content": { "content": {
...@@ -66,7 +46,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -66,7 +46,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("forgot-password", { .state("forgot-password", {
parent: 'layout4', parent: 'layout2',
url: "/forgot-password", url: "/forgot-password",
views: { views: {
"content": { "content": {
...@@ -75,14 +55,6 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -75,14 +55,6 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
} }
}) })
// .state("layout3", {
// abstract: true,
// views: {
// "layout": {
// templateUrl: "layout/layout3.html"
// }
// }
// })
.state("news", { .state("news", {
parent: 'layout2', parent: 'layout2',
url: "/news", url: "/news",
...@@ -114,7 +86,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -114,7 +86,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("CatagoriManagement",{ .state("CatagoriManagement",{
parent:'layout3', parent:'layout2',
url:"/management/catagori", url:"/management/catagori",
views:{ views:{
"content":{ "content":{
...@@ -124,7 +96,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -124,7 +96,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("newsManagement",{ .state("newsManagement",{
parent:'layout3', parent:'layout2',
url:"/management/catagori/:myCatagoriId", url:"/management/catagori/:myCatagoriId",
views:{ views:{
"content":{ "content":{
...@@ -134,36 +106,8 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -134,36 +106,8 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
} }
}) })
<<<<<<< HEAD
.state("employees", { .state("employees", {
prarent:'layout3', parent: 'layout2',
=======
=======
$urlRouterProvider.otherwise("/employees");
$stateProvider
.state("layout1", {
abstract: true,
views: {
"layout": {
templateUrl: "layout/layout1.html"
}
}
})
.state("layout2", {
abstract: true,
views: {
"layout": {
templateUrl: "layout/layout2.html"
}
}
})
>>>>>>> 14cbe76ccc34395abe463875cb178d2c872e3f85
.state("employees", {
parent: 'layout1',
>>>>>>> master
url: "/employees", url: "/employees",
views: { views: {
"content": { "content": {
...@@ -173,7 +117,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -173,7 +117,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("createEmployee", { .state("createEmployee", {
parent: 'layout1', parent: 'layout2',
url: "/createEmployee", url: "/createEmployee",
params: { params: {
emp: null emp: null
...@@ -186,58 +130,47 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -186,58 +130,47 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("timeSheet", { .state("timeSheet", {
parent: 'layout3', parent: 'layout2',
url: "/timesheet", url: "/timesheet",
views: { views: {
"layout": { "content": {
templateUrl: "/pages/timesheet/timeSheet.html", templateUrl: "pages/timesheet/timeSheet.html",
controller: "timeSheetController" controller: "timeSheetController"
} }
} }
}) })
.state("timeSheetDetail", { .state("timeSheetDetail", {
parent: 'layout3', parent: 'layout2',
url: "/timesheetdetail/:id", url: "/timesheetdetail/:id",
views: { views: {
"layout": { "content": {
templateUrl: "/pages/timesheet/timeSheetDetail.html", templateUrl: "pages/timesheet/timeSheetDetail.html",
controller: "timeSheetDetailController" controller: "timeSheetDetailController"
} }
} }
}) })
.state("leaveForm", { .state("leaveForm", {
parent: 'layout3', parent: 'layout2',
url: "/leaveform", url: "/leaveform",
views: { views: {
"layout": { "content": {
templateUrl: "/pages/leaveform/leaveForm.html", templateUrl: "pages/leaveform/leaveForm.html",
controller: "leaveFormController" controller: "leaveFormController"
} }
} }
}) })
.state("leaveFormDetail", { .state("leaveFormDetail", {
parent: 'layout3', parent: 'layout2',
url: "/leaveformdetail/:id", url: "/leaveformdetail/:id",
views: {
"layout": {
templateUrl: "/pages/leaveform/leaveFormDetail.html",
controller: "leaveFormDetailController"
}
}
})
.state("gioithieu", {
parent: 'app',
url: "/gioithieu",
views: { views: {
"content": { "content": {
templateUrl: "pages/gioithieu/gioithieu.htm", templateUrl: "pages/leaveform/leaveFormDetail.html",
controller: "gioithieuController" controller: "leaveFormDetailController"
} }
} }
}) })
.state("editproject", { .state("editproject", {
parent: 'layout3', parent: 'layout2',
url: "/editproject/:ID", url: "/editproject/:ID",
views: { views: {
"content": { "content": {
...@@ -247,7 +180,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -247,7 +180,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("groupProjectByProjectId", { .state("groupProjectByProjectId", {
parent: 'layout3', parent: 'layout2',
url: "/groupProjectByProjectId/:ID", url: "/groupProjectByProjectId/:ID",
views: { views: {
"content": { "content": {
...@@ -257,7 +190,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -257,7 +190,7 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
.state("addEmployeeProject", { .state("addEmployeeProject", {
parent: 'layout3', parent: 'layout2',
url: "/addEmployeeProject", url: "/addEmployeeProject",
views: { views: {
"content": { "content": {
...@@ -267,86 +200,3 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct ...@@ -267,86 +200,3 @@ angular.module("myApp", ["ngAnimate", "ui.router", "ui.bootstrap"]).config(funct
} }
}) })
}); });
\ No newline at end of file
<<<<<<< HEAD
angular
.module('myApp')
.filter('lmto', lmto);
=======
=======
.state("timeSheet", {
parent: 'layout2',
url: "/timesheet",
views: {
"content": {
templateUrl: "/pages/timesheet/timeSheet.html",
controller: "timeSheetController"
}
}
})
.state("timeSheetDetail", {
parent: 'layout2',
url: "/timesheetdetail/:id",
views: {
"content": {
templateUrl: "/pages/timesheet/timeSheetDetail.html",
controller: "timeSheetDetailController"
}
}
})
.state("leaveForm", {
parent: 'layout2',
url: "/leaveform",
views: {
"content": {
templateUrl: "/pages/leaveform/leaveForm.html",
controller: "leaveFormController"
}
}
})
.state("leaveFormDetail", {
parent: 'layout2',
url: "/leaveformdetail/:id",
views: {
"content": {
templateUrl: "/pages/leaveform/leaveFormDetail.html",
controller: "leaveFormDetailController"
}
}
})
});
angular
.module('myApp')
.filter('lmto', lmto);
>>>>>>> master
<<<<<<< HEAD
function lmto() {
return function(items,limit,offset){
if(items.length > 0) {
return items.slice(offset, offset + limit);
} else {
return [];
}
};
}
<<<<<<< HEAD
=======
>>>>>>> 14cbe76ccc34395abe463875cb178d2c872e3f85
=======
function lmto() {
return function (items, limit, offset) {
if (items.length > 0) {
return items.slice(offset, offset + limit);
} else {
return [];
}
};
}
>>>>>>> 049511c3b37f668c637022150c53bd25d9b8e61d
>>>>>>> master
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<a ui-sref="employees"></a> <a ui-sref="employees"></a>
<!-- <a ui-sref="report"></a>--> <!-- <a ui-sref="report"></a>-->
<!-- <a ui-sref="project"></a>--> <!-- <a ui-sref="project"></a>-->
<a ui-sref="timeSheet"></a>
<div ui-view="content"> <div ui-view="content">
</div> </div>
......
<div> <div class="main-content">
<div ui-view="content"> <div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
layout 2 <!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<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="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design Dashboard</span></a>
</div> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div class="forms">
<div class="form-grids row widget-shadow" data-example-id="basic-forms">
<div class="form-body" ui-view="content">
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div> </div>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="container-fluid"> <div class="container-fluid">
<!-- Content --> <!-- Content -->
<div ui-view="layout"> <div ui-view="content">
</div> </div>
<!-- footer --> <!-- footer -->
......
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Login Page :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS-->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS-->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>TimeSheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page login-page ">
<h2 class="title1">Login</h2>
<div class="widget-shadow">
<div class="login-body">
<form action="#" method="post">
<input type="email" class="user" name="email" placeholder="Enter Your Email" required="">
<input type="password" name="password" class="lock" placeholder="Password" required="">
<div class="forgot-grid">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Remember me</label>
<div class="forgot">
<a href="#">forgot password?</a>
</div>
<div class="clearfix"> </div>
</div>
<input type="submit" name="Sign In" value="Sign In">
<div class="registration">
Don't have an account ?
<a class="" href="signup.html">
Create an account
</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p> </div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
<!-- //Bootstrap Core JavaScript -->
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Media :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>TimeSheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div class="media">
<h2 class="title1">Media Objects</h2>
<div class="bs-example5 widget-shadow" data-example-id="default-media">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiM2U3NSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2IzZTc1Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<div class="clearfix"> </div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiM2ZhNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2IzZmE3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiMzIxNSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2IzMjE1Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
<div class="media-right">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiMTE4OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2IxMTg5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="clearfix"> </div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiNDY0ZCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2I0NjRkIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
<div class="media-right">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNhZGIwMSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2FkYjAxIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
</div>
</div>
<div class="bs-example5 example_6 widget-shadow" data-example-id="media-list">
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiMzg3YyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2IzODdjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiM2EzNCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2IzYTM0Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNiMmYzMCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2IyZjMwIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGUwMDNhZWVmMyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTAwM2FlZWYzIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="media_1">
<div class="col-md-6 media_1-left widget-shadow">
<div class="panel_2">
<h3 class="title1">Padding</h3>
<p>All size: 0,5,10,15,20,25,30,35,40,45,50px</p>
<table class="table table-hover">
<thead>
<tr>
<td class="head">Class</td>
<td class="head">Preview</td>
<td class="head">Description</td>
</tr>
</thead>
<tbody>
<tr>
<td><code>.padding-5</code></td>
<td>
<div class="demolayout padding-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>padding: 5px</td>
</tr>
<tr>
<td><code>.padding-l-5</code></td>
<td>
<div class="demolayout padding-l-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>padding-left: 5px</td>
</tr>
<tr>
<td><code>.padding-r-5</code></td>
<td>
<div class="demolayout padding-r-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>padding-right: 5px</td>
</tr>
<tr>
<td><code>.padding-t-5</code></td>
<td>
<div class="demolayout padding-t-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>padding-top: 5px</td>
</tr>
<tr>
<td><code>.padding-b-5</code></td>
<td>
<div class="demolayout padding-b-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>padding-bottom: 5px</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6 media_1-right widget-shadow">
<div class="panel_2 panel_3">
<h3 class="title1">Margin</h3>
<p>All size: 0,5,10,15,20,25,30,35,40,45,50px</p>
<table class="table table-hover">
<thead>
<tr>
<td class="head">Class</td>
<td class="head">Preview</td>
<td class="head">Description</td>
</tr>
</thead>
<tbody>
<tr>
<td><code>.margin-5</code></td>
<td>
<div class="demolayout padding-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>margin: 5px</td>
</tr>
<tr>
<td><code>.margin-l-5</code></td>
<td>
<div class="demolayout padding-l-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>margin-left: 5px</td>
</tr>
<tr>
<td><code>.margin-r-5</code></td>
<td>
<div class="demolayout padding-r-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>margin-right: 5px</td>
</tr>
<tr>
<td><code>.margin-t-5</code></td>
<td>
<div class="demolayout padding-t-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>margin-top: 5px</td>
</tr>
<tr>
<td><code>.margin-b-5</code></td>
<td>
<div class="demolayout padding-b-5">
<div class="demobox">Demo</div>
</div>
</td>
<td>margin-bottom: 5px</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="table-title"> <div class="table-title">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<h2><b>Leave Form</b></h2> <h4><b>Leave Form</b></h4>
<label> <label>
Search: <input type="text" ng-model="search" placeholder="Search" style="color: black; margin: 10px"/> Search: <input type="text" ng-model="search" placeholder="Search" style="color: black; margin: 10px"/>
</label> </label>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-11">
<div id="addDivLF" style="display: none"> <div id="addDivLF" style="display: none">
<h2><b>Add Leave Form</b></h2> <h2><b>Add Leave Form</b></h2>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="table-title"> <div class="table-title">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<h2><b>TimeSheet</b></h2> <h4><b>TimeSheet</b></h4>
<label> <label>
Search: <input type="text" ng-model="search" placeholder="Search" style="color: black; margin: 10px"/> Search: <input type="text" ng-model="search" placeholder="Search" style="color: black; margin: 10px"/>
</label> </label>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-11">
<div id="addDivTS" style="display: none"> <div id="addDivTS" style="display: none">
<h2><b>Add TimeSheet</b></h2> <h2><b>Add TimeSheet</b></h2>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="tss" ng-repeat="ts in myTimeSheets | limitTo:numLimit:start | filter: search"> <tr class="tss" ng-repeat="ts in myTimeSheets | filter: search">
<td>{{$index + 1}}</td> <td>{{$index + 1}}</td>
<td>{{ts.title}}</td> <td>{{ts.title}}</td>
<td>{{ts.content}}</td> <td>{{ts.content}}</td>
...@@ -133,9 +133,9 @@ ...@@ -133,9 +133,9 @@
<td>{{ts.eproject.project.name}}</td> <td>{{ts.eproject.project.name}}</td>
<td>{{ts.updatedAt}}</td> <td>{{ts.updatedAt}}</td>
<td><a ui-sref="timeSheetDetail({id: ts.id})"data-toggle="modal"><i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td> <td><a ui-sref="timeSheetDetail({id: ts.id})" data-toggle="modal"><i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td>
<td><a ui-sref="timeSheet" ng-click="getTs(ts);" onclick="document.getElementById('updateDivTS').style.display = 'block'"class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a></td> <td><a ui-sref="timeSheet" ng-click="getTs(ts);" onclick="document.getElementById('updateDivTS').style.display = 'block'" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a></td>
<td><a ui-sref="timeSheet" ng-click="delete(ts);"class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a></td> <td><a ui-sref="timeSheet" ng-click="delete(ts);" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a></td>
</tr> </tr>
<!-- <tr>--> <!-- <tr>-->
<!-- <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>--> <!-- <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>-->
......
/* /*
*/ */
angular.module("MyTimeSheet").controller("timesheetController", function($scope, $http,$window) { angular.module("myApp").controller("timeSheetController", function($scope, $http, $state) {
console.log("Time Sheet controller"); console.log("Time Sheet controller");
$scope.ts = { $scope.ts = {
...@@ -19,7 +19,6 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope, ...@@ -19,7 +19,6 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope,
}; };
//get all time sheet //get all time sheet
//function getAllTimesheet(){
$http({ $http({
method: 'GET', method: 'GET',
url: "http://localhost:8080/eproject/timesheet/show" url: "http://localhost:8080/eproject/timesheet/show"
...@@ -29,8 +28,6 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope, ...@@ -29,8 +28,6 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope,
}, function errorCallback(response) { }, function errorCallback(response) {
console.log(response) console.log(response)
}); });
//}
//get all eproject //get all eproject
$http({ $http({
method: 'GET', method: 'GET',
...@@ -84,7 +81,6 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope, ...@@ -84,7 +81,6 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope,
} }
$scope.update = update; $scope.update = update;
function update() { function update() {
$http({ $http({
headers: "content-type: application/json", headers: "content-type: application/json",
...@@ -99,84 +95,4 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope, ...@@ -99,84 +95,4 @@ angular.module("MyTimeSheet").controller("timesheetController", function($scope,
$state.reload(); $state.reload();
}); });
} }
// $scope.myTimeSheets = [];
// $scope.save = save;
// $scope.currentPage = 1;
// $scope.timesheetPerPage = 3;
// $scope.maxSize = 5;
// this.myTimeSheets = $scope.myTimeSheets;
// $scope.numOfPage = numOfPage;
// $scope.dataHasLoaded = false;
// $scope.makeTimesheet = function () {
// $scope.myTimeSheets = [];
// for (let i = 1; i <=50 ; i++) {
// $scope.myTimeSheets.push( {text : 'ts'+ i , done:false});
// }
//
// };
// $scope.makeTimesheet();
// $scope.getAllTimesheet = getAllTimesheet;
// //$scope.getTotalTimesheet = getTotalTimesheet;
// getAllTimesheet();
// $scope.pageChangedIndex = pageChangedIndex;
// function pageChangedIndex() {
// console.log($scope.currentPage);
// }
// function numOfPage() {
// return Math.ceil($scope.myTimeSheets.length/ $scope.timesheetPerPage);
//
// }
}); });
// }).directive('pgnTable', ['$compile', function ($compile) {
// return {
// restrict: 'EA',
// templateUrl: 'pages/timesheet/timeSheet.html',
// replace: true,
// scope: {
// pages: "=pgnTable"
// },
// controller: function ($scope) {
// $scope.currentPage=1;
// $scope.numLimit=5;
// $scope.start = 0;
// $scope.$watch("pages",function(newVal){
// if(newVal){
// $scope.pages=Math.ceil($scope.pages.length/$scope.numLimit);
// }
// });
// $scope.hideNext=function(){
// if(($scope.start + $scope.numLimit) < $scope.pages.length){
// return false;
// }
// else
// return true;
// };
// $scope.hidePrev=function(){
// if($scope.start===0){
// return true;
// }
// else
// return false;
// };
// $scope.nextPage=function(){
// console.log("next pages");
// $scope.currentPage++;
// $scope.start=$scope.start+ $scope.numLimit;
// console.log( $scope.start)
// };
// $scope.PrevPage=function(){
// if($scope.currentPage>1){
// $scope.currentPage--;
// }
// console.log("next pages");
// $scope.start=$scope.start - $scope.numLimit;
// console.log( $scope.start)
// };
// },
// compile: function(elem) {
// return function(ielem, $scope) {
// $compile(ielem)($scope);
// };
// }
// };
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="table-title"> <div class="table-title">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<h2><b>TimeSheet</b></h2> <h4><b>TimeSheet</b></h4>
<label> <label>
Search: <input type="text" ng-model="search" placeholder="Search" style="color: black; margin: 10px"/> Search: <input type="text" ng-model="search" placeholder="Search" style="color: black; margin: 10px"/>
</label> </label>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-11">
<div id="addDivTS" style="display: none"> <div id="addDivTS" style="display: none">
<h2><b>Add TimeSheet</b></h2> <h2><b>Add TimeSheet</b></h2>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="tss" ng-repeat="ts in myTimeSheets | limitTo:numLimit:start | filter: search"> <tr class="tss" ng-repeat="ts in myTimeSheets | filter: search">
<td>{{$index + 1}}</td> <td>{{$index + 1}}</td>
<td>{{ts.title}}</td> <td>{{ts.title}}</td>
<td>{{ts.content}}</td> <td>{{ts.content}}</td>
...@@ -133,9 +133,9 @@ ...@@ -133,9 +133,9 @@
<td>{{ts.eproject.project.name}}</td> <td>{{ts.eproject.project.name}}</td>
<td>{{ts.updatedAt}}</td> <td>{{ts.updatedAt}}</td>
<td><a ui-sref="timeSheetDetail({id: ts.id})"data-toggle="modal"><i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td> <td><a ui-sref="timeSheetDetail({id: ts.id})" data-toggle="modal"><i class="fa fa-eye" data-toggle="tooltip" title="View"></i></a></td>
<td><a ui-sref="timeSheet" ng-click="getTs(ts);" onclick="document.getElementById('updateDivTS').style.display = 'block'"class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a></td> <td><a ui-sref="timeSheet" ng-click="getTs(ts);" onclick="document.getElementById('updateDivTS').style.display = 'block'" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a></td>
<td><a ui-sref="timeSheet" ng-click="delete(ts);"class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a></td> <td><a ui-sref="timeSheet" ng-click="delete(ts);" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a></td>
</tr> </tr>
<!-- <tr>--> <!-- <tr>-->
<!-- <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>--> <!-- <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>-->
......
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | SignUp Page :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>TimeSheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page signup-page">
<h2 class="title1">SignUp Here</h2>
<div class="sign-up-row widget-shadow">
<h5>Personal Information :</h5>
<form action="#" method="post">
<div class="sign-u">
<input type="text" name="firstname" placeholder="First Name" required="">
<div class="clearfix"> </div>
</div>
<div class="sign-u">
<input type="text" placeholder="Last Name" required="">
<div class="clearfix"> </div>
</div>
<div class="sign-u">
<input type="email" placeholder="Email Address" required="">
<div class="clearfix"> </div>
</div>
<div class="sign-u">
<div class="sign-up1">
<h4>Gender* :</h4>
</div>
<div class="sign-up2">
<label>
<input type="radio" name="Gender" required="">
Male
</label>
<label>
<input type="radio" name="Gender" required="">
Female
</label>
</div>
<div class="clearfix"> </div>
</div>
<h6>Login Information :</h6>
<div class="sign-u">
<input type="password" placeholder="Password" required="">
<div class="clearfix"> </div>
</div>
<div class="sign-u">
<input type="password" placeholder="Confirm Password" required="">
</div>
<div class="clearfix"> </div>
<div class="sub_home">
<input type="submit" value="Submit">
<div class="clearfix"> </div>
</div>
<div class="registration">
Already Registered.
<a class="" href="login.html">
Login
</a>
</div>
</form>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
<script type="application/x-javascript"> addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
} </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css'/>
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/Footer-with-social-icons.css">
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext"
rel="stylesheet">
<script src="js/Chart.js"></script>
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="js/app.js"></script>
<script src="pages/employee/employeeController.js"></script>
<script src="pages/employee/createEmployeeController.js"></script>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet"
href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/>
`
<!-- end anguarjs app-->
<link href="css/custom.css" rel="stylesheet">
<!-- //calendar -->
</head>
<body class="cbp-spmenu-push" ng-app="myApp">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>TimeSheet</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div ui-view="layout1">
</div>
<div class="elements">
<!--photoday-section-->
<script src="js/scripts.js"></script>
<script src="js/bootstrap.js"> </script>
</div>
</div>
</div>
</div>
<!-- footer-->
<div class="content">
</div>
<footer id="myFooter">
<div class="container">
<div class="row">
<div class="col-sm-3 myCols">
<h5>Get started</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5>About us</h5>
<ul>
<li><a href="#">Company Information</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5>Support</h5>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Help desk</a></li>
<li><a href="#">Forums</a></li>
</ul>
</div>
<div class="col-sm-3 myCols">
<h5>Legal</h5>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="social-networks">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="facebook"><i class="fa fa-facebook-official"></i></a>
<a href="#" class="google"><i class="fa fa-google-plus"></i></a>
</div>
<!--end footer-->
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Typography :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>TimeSheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div class="typography">
<h2 class="title1">Typography</h2>
<div class="grid_3 grid_4 widget-shadow">
<h3 class="hdg">Headings</h3>
<div class="bs-example">
<table class="table">
<tbody>
<tr>
<td><h1 id="h1.-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1></td>
<td class="type-info">Semibold 36px</td>
</tr>
<tr>
<td><h2 id="h2.-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2></td>
<td class="type-info">Semibold 30px</td>
</tr>
<tr>
<td><h3 id="h3.-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3></td>
<td class="type-info">Semibold 24px</td>
</tr>
<tr>
<td><h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4></td>
<td class="type-info">Semibold 18px</td>
</tr>
<tr>
<td><h5 id="h5.-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5></td>
<td class="type-info">Semibold 14px</td>
</tr>
<tr>
<td><h6>h6. Bootstrap heading</h6></td>
<td class="type-info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid_3 grid_5 widget-shadow">
<h3 class="hdg" >Buttons</h3>
<h1>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h1>
<h2>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h2>
<h3>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h3>
<h4>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h4>
<h5>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h5>
<h6>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h6>
</div>
<div class="grid_3 grid_5 widget-shadow">
<h3 class="hdg" >Progress Bars</h3>
<div class="tab-content">
<div class="tab-pane active" id="domprogress">
<div class="progress">
<div class="progress-bar progress-bar-primary" style="width: 20%"></div>
</div>
<p>Info with <code>progress-bar-info</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 60%"></div>
</div>
<p>Success with <code>progress-bar-success</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 30%"></div>
</div>
<p>Warning with <code>progress-bar-warning</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 70%"></div>
</div>
<p>Danger with <code>progress-bar-danger</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 50%"></div>
</div>
<p>Inverse with <code>progress-bar-inverse</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-inverse" style="width: 40%"></div>
</div>
<p>Inverse with <code>progress-bar-inverse</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class="sr-only">10% Complete (danger)</span></div>
</div>
</div>
</div>
</div>
<div class="grid_3 grid_5 widget-shadow">
<h3 class="hdg">Alerts</h3>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
<div class="grid_3 grid_5 widget-shadow">
<h3 class="hdg">Pagination</h3>
<div class="col-md-6">
<nav>
<ul class="pagination pagination-lg">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><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="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><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="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><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="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
<div class="col-md-6">
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#">«</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="#">»</a></li>
</ul>
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</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="#">»</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="grid_3 grid_5 widget-shadow">
<h3 class="hdg">Breadcrumbs</h3>
<ol class="breadcrumb">
<li class="active">Home</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
<div class="grid_3 grid_5 widget-shadow">
<h3 class="hdg">Badges</h3>
<div class="col-md-6">
<p>Add modifier classes to change the appearance of a badge.</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Classes</th>
<th>Badges</th>
</tr>
</thead>
<tbody>
<tr>
<td>No modifiers</td>
<td><span class="badge">42</span></td>
</tr>
<tr>
<td><code>.badge-primary</code></td>
<td><span class="badge badge-primary">1</span></td>
</tr>
<tr>
<td><code>.badge-success</code></td>
<td><span class="badge badge-success">22</span></td>
</tr>
<tr>
<td><code>.badge-info</code></td>
<td><span class="badge badge-info">30</span></td>
</tr>
<tr>
<td><code>.badge-warning</code></td>
<td><span class="badge badge-warning">412</span></td>
</tr>
<tr>
<td><code>.badge-danger</code></td>
<td><span class="badge badge-danger">999</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<p>Easily highlight new or unread items with the <code>.badge</code> class</p>
<div class="list-group list-group-alternate">
<a href="#" class="list-group-item"><span class="badge">201</span> <i class="ti ti-email"></i> Inbox </a>
<a href="#" class="list-group-item"><span class="badge badge-primary">5021</span> <i class="ti ti-eye"></i> Profile visits </a>
<a href="#" class="list-group-item"><span class="badge">14</span> <i class="ti ti-headphone-alt"></i> Call </a>
<a href="#" class="list-group-item"><span class="badge">20</span> <i class="ti ti-comments"></i> Messages </a>
<a href="#" class="list-group-item"><span class="badge badge-warning">14</span> <i class="ti ti-bookmark"></i> Bookmarks </a>
<a href="#" class="list-group-item"><span class="badge badge-danger">30</span> <i class="ti ti-bell"></i> Notifications </a>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="grid_3 grid_5 widget-shadow">
<h3 class="hdg">Wells</h3>
<div class="well">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
</div>
<div class="well">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here
</div>
<div class="well">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Validation :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--//js-->
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<!-- <ul class="treeview-menu">-->
<!-- <li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>-->
<!-- <li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>-->
<!-- </ul>-->
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="timesheet.html">
<i class="fa fa-th"></i> <span>Timesheet</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div class="forms validation">
<h2 class="title1">Validation Forms :</h2>
<div class="form-three widget-shadow">
<div data-example-id="form-validation-states">
<form> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> <input type="text" class="form-control" id="inputWarning1"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"> </div> <div class="has-success"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxSuccess" value="option1"> Checkbox with success </label> </div> </div> <div class="has-warning"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxWarning" value="option1"> Checkbox with warning </label> </div> </div> <div class="has-error"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxError" value="option1"> Checkbox with error </label> </div> </div> </form>
</div>
</div>
<div class="row">
<div class="col-md-6 validation-grids widget-shadow" data-example-id="basic-forms">
<div class="form-title">
<h4>Register Form :</h4>
</div>
<div class="form-body">
<form data-toggle="validator">
<div class="form-group">
<input type="text" class="form-control" id="inputName" placeholder="Username" required>
</div>
<div class="form-group has-feedback">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<span class="help-block with-errors">Please enter a valid email address</span>
</div>
<div class="form-group">
<input type="password" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm password" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="gender" required>
Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" required>
Male
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
I have read and accept terms of use.
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary disabled">Submit</button>
</div>
</form>
</div>
</div>
<div class="col-md-6 validation-grids validation-grids-right">
<div class="widget-shadow" data-example-id="basic-forms">
<div class="form-title">
<h4>Login form :</h4>
</div>
<div class="form-body">
<form data-toggle="validator">
<div class="form-group has-feedback">
<input type="email" class="form-control" id="inputEmail" placeholder="Enter Your Email" data-error="Bruh, that email address is invalid" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<input type="password" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
<div class="bottom">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Remember me
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary disabled">Login</button>
</div>
<div class="clearfix"> </div>
</div>
</form>
</div>
</div>
<div class="inline-form widget-shadow">
<div class="form-title">
<h4>Recover form :</h4>
</div>
<div class="form-body">
<form data-toggle="validator">
<div class="form-group has-feedback">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<input type="text" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="Enter your phone number" required>
</div>
<div class="bottom">
<div class="form-group">
<button type="submit" class="btn btn-primary disabled">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
<!--validator js-->
<script src="js/validator.min.js"></script>
<!--//validator js-->
</body>
</html>
\ No newline at end of file
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Glance Design Dashboard an Admin Panel Category Flat Bootstrap Responsive Website Template | Widgets :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Glance Design Dashboard Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- font-awesome icons CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons CSS -->
<!-- side nav css file -->
<link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
<!-- side nav css file -->
<!-- js-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!--webfonts-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
<!--//webfonts-->
<!-- Metis Menu -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<link href="css/custom.css" rel="stylesheet">
<!--//Metis Menu -->
<!-- calendar -->
<link rel="stylesheet" href="css/monthly.css">
<!-- //calendar -->
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<!--left-fixed -navigation-->
<aside class="sidebar-left">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span class="dashboard_text">Design dashboard</span></a></h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="index.html">
<span class="glyphicon glyphicon-user"></span> <span>Employee</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Components</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
<li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
</ul>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
<li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
<li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
<li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
</ul>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">08</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
<li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i><small class="label pull-right label-info1">08</small><span class="label label-primary1 pull-right">02</span></a>
<ul class="treeview-menu">
<li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
<li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
<li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
<li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
<li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
</ul>
</li>
<li class="header">LABELS</li>
<li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</aside>
</div>
<!--left-fixed -navigation-->
<!-- header-starts -->
<div class="sticky-header header-section ">
<div class="header-left">
<!--toggle button start-->
<button id="showLeftPush"><i class="fa fa-bars"></i></button>
<!--toggle button end-->
<div class="profile_details_left"><!--notifications of menu start -->
<ul class="nofitications-dropdown">
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new messages</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all messages</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 3 new notification</h3>
</div>
</li>
<li><a href="#">
<div class="user_img"><img src="images/4.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet</p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li class="odd"><a href="#">
<div class="user_img"><img src="images/1.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li><a href="#">
<div class="user_img"><img src="images/3.jpg" alt=""></div>
<div class="notification_desc">
<p>Lorem ipsum dolor amet </p>
<p><span>1 hour ago</span></p>
</div>
<div class="clearfix"></div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all notifications</a>
</div>
</li>
</ul>
</li>
<li class="dropdown head-dpdn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
<ul class="dropdown-menu">
<li>
<div class="notification_header">
<h3>You have 8 pending task</h3>
</div>
</li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Database update</span><span class="percentage">40%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar yellow" style="width:40%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar green" style="width:90%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar red" style="width: 33%;"></div>
</div>
</a></li>
<li><a href="#">
<div class="task-info">
<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
<div class="clearfix"></div>
</div>
<div class="progress progress-striped active">
<div class="bar blue" style="width: 80%;"></div>
</div>
</a></li>
<li>
<div class="notification_bottom">
<a href="#">See all pending tasks</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"> </div>
</div>
<!--notification menu end -->
<div class="clearfix"> </div>
</div>
<div class="header-right">
<!--search-box-->
<div class="search-box">
<form class="input">
<input class="sb-search-input input__field--madoka" placeholder="Search..." type="search" id="input-31" />
<label class="input__label" for="input-31">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
</svg>
</label>
</form>
</div><!--//end-search-box-->
<div class="profile_details">
<ul>
<li class="dropdown profile_details_drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="profile_img">
<span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
<div class="user-name">
<p>Admin Name</p>
<span>Administrator</span>
</div>
<i class="fa fa-angle-down lnr"></i>
<i class="fa fa-angle-up lnr"></i>
<div class="clearfix"></div>
</div>
</a>
<ul class="dropdown-menu drp-mnu">
<li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
<li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
<li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
<li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //header-ends -->
<!-- main content start-->
<div id="page-wrapper">
<div class="main-page">
<div ui-view="layout">
<h2>PHI</h2>
</div>
<div class="elements">
<!--photoday-section-->
<div class="col-sm-4 wthree-crd widgettable">
<div class="card">
<div class="card-body">
<div class="agileinfo-cdr">
<div class="card-header">
<h3>Report</h3>
</div>
<hr class="widget-separator">
<div class="widget-body">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 w3-agileits-crd widgettable">
<div class="card card-contact-list">
<div class="agileinfo-cdr">
<div class="card-header">
<h3>Contacts</h3>
</div>
<hr class="widget-separator">
<div class="card-body p-b-20">
<div class="list-group">
<a class="list-group-item media" href="">
<div class="pull-left">
<img class="lg-item-img" src="images/4.jpg" alt="">
</div>
<div class="media-body">
<div class="pull-left">
<div class="lg-item-heading">Alexander</div>
<small class="lg-item-text">example@gmail.com</small>
</div>
<div class="pull-right">
<div class="lg-item-heading">Ceo</div>
</div>
</div>
</a>
<a class="list-group-item media" href="">
<div class="pull-left">
<img class="lg-item-img" src="images/1.jpg" alt="">
</div>
<div class="media-body">
<div class="pull-left">
<div class="lg-item-heading">Jackson Jacob</div>
<small class="lg-item-text">example@hotmail.com</small>
</div>
<div class="pull-right">
<div class="lg-item-heading">Director</div>
</div>
</div>
</a>
<a class="list-group-item media" href="">
<div class="pull-left">
<img class="lg-item-img" src="images/3.jpg" alt="">
</div>
<div class="media-body">
<div class="pull-left">
<div class="lg-item-heading">Merina lisa</div>
<small class="lg-item-text">example1@gmail.com</small>
</div>
<div class="pull-right">
<div class="lg-item-heading">Manager</div>
</div>
</div>
</a>
<a class="list-group-item media" href="">
<div class="pull-left">
<img class="lg-item-img" src="images/1.jpg" alt="">
</div>
<div class="media-body">
<div class="pull-left">
<div class="lg-item-heading">Michael</div>
<small class="lg-item-text">example1@hotmail.com</small>
</div>
<div class="pull-right">
<div class="lg-item-heading">Assistant</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 w3-agile-crd widgettable">
<div class="card">
<div class="card-body card-padding">
<div class="">
<header class="widget-header">
<h4 class="widget-title">Activities</h4>
</header>
<hr class="widget-separator">
<div class="widget-body">
<div class="streamline">
<div class="sl-item sl-primary">
<div class="sl-content">
<small class="text-muted">0 mins ago</small>
<p>Alexander has just joined</p>
</div>
</div>
<div class="sl-item sl-danger">
<div class="sl-content">
<small class="text-muted">15 minutes ago</small>
<p>Michael has sent a request for access</p>
</div>
</div>
<div class="sl-item sl-success">
<div class="sl-content">
<small class="text-muted">18 minutes ago</small>
<p>chris added you to his team</p>
</div>
</div>
<div class="sl-item">
<div class="sl-content">
<small class="text-muted">22 minutes ago</small>
<p>jackson has finished his task</p>
</div>
</div>
<div class="sl-item sl-warning">
<div class="sl-content">
<small class="text-muted">30 minutes ago</small>
<p>Jacob shared a folder with you</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<!--//photoday-section-->
<!-- mainpage-chit -->
<div class="chit-chat-layer1">
<div class="col-md-6 chit-chat-layer1-left">
<div class="work-progres">
<header class="widget-header">
<h4 class="widget-title">Recent Followers</h4>
</header>
<hr class="widget-separator">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Project</th>
<th>Manager</th>
<th>Status</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Face book</td>
<td>Alexander</td>
<td><span class="label label-danger">in progress</span></td>
<td><span class="badge badge-info">70%</span></td>
</tr>
<tr>
<td>2</td>
<td>Twitter</td>
<td>Lucika adam</td>
<td><span class="label label-success">completed</span></td>
<td><span class="badge badge-success">80%</span></td>
</tr>
<tr>
<td>3</td>
<td>Google</td>
<td>Michael</td>
<td><span class="label label-warning">in progress</span></td>
<td><span class="badge badge-warning">30%</span></td>
</tr>
<tr>
<td>4</td>
<td>LinkedIn</td>
<td>Chris dany</td>
<td><span class="label label-info">in progress</span></td>
<td><span class="badge badge-info">55%</span></td>
</tr>
<tr>
<td>5</td>
<td>Tumblr</td>
<td>Jacob velly</td>
<td><span class="label label-warning">in progress</span></td>
<td><span class="badge badge-danger">75%</span></td>
</tr>
<tr>
<td>6</td>
<td>Tesla</td>
<td>Donald chris</td>
<td><span class="label label-info">in progress</span></td>
<td><span class="badge badge-success">25%</span></td>
</tr>
<tr>
<td>7</td>
<td>Behance</td>
<td>alexa louis</td>
<td><span class="label label-info">in progress</span></td>
<td><span class="badge badge-success">100%</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6 chit-chat-layer1-rit">
<div class="geo-chart">
<section id="charts1" class="charts">
<div class="wrapper-flex">
<table id="myTable" class="geoChart tableChart data-table col-table myTable chtr-table" style="display: none; position: absolute; top: -99999px; width: 485px;">
<caption>Student Nationalities Table</caption>
<tbody><tr>
<th scope="col" data-type="string">Country</th>
<th scope="col" data-type="number">Number of Students</th>
<th scope="col" data-role="annotation">Annotation</th>
</tr>
<tr>
<td>China</td>
<td align="right">20</td>
<td align="right">20</td>
</tr>
<tr>
<td>Colombia</td>
<td align="right">5</td>
<td align="right">5</td>
</tr>
<tr>
<td>France</td>
<td align="right">3</td>
<td align="right">3</td>
</tr>
<tr>
<td>Italy</td>
<td align="right">1</td>
<td align="right">1</td>
</tr>
<tr>
<td>Japan</td>
<td align="right">18</td>
<td align="right">18</td>
</tr>
<tr>
<td>Kazakhstan</td>
<td align="right">1</td>
<td align="right">1</td>
</tr>
<tr>
<td>Mexico</td>
<td align="right">1</td>
<td align="right">1</td>
</tr>
<tr>
<td>Poland</td>
<td align="right">1</td>
<td align="right">1</td>
</tr>
<tr>
<td>Russia</td>
<td align="right">11</td>
<td align="right">11</td>
</tr>
<tr>
<td>Spain</td>
<td align="right">2</td>
<td align="right">2</td>
</tr>
<tr>
<td>Tanzania</td>
<td align="right">1</td>
<td align="right">1</td>
</tr>
<tr>
<td>Turkey</td>
<td align="right">2</td>
<td align="right">2</td>
</tr>
</tbody></table>
<div class="col geo_main">
<h3 id="geoChartTitle">World Market</h3>
<div id="geoChart" class="chart"> </div>
</div>
</div><!-- .wrapper-flex -->
</section>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!-- //mainpage-chit -->
<div class="agil-info-calendar">
<!-- calendar -->
<div class="col-md-4 agile-calendar">
<div class="calendar-widget">
<header class="widget-header">
<h4 class="widget-title">Calender widget</h4>
</header>
<hr class="widget-separator">
<!-- grids -->
<div class="agile-calendar-grid">
<div class="page">
<div class="w3l-calendar-left">
<div class="calendar-heading">
</div>
<div class="monthly" id="mycalendar"></div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<div class="col-md-4 stats-info widget">
<div class="stats-info-agileits">
<header class="widget-header">
<h4 class="widget-title">Browser stats</h4>
</header>
<hr class="widget-separator">
<div class="stats-body">
<ul class="list-unstyled">
<li>GoogleChrome <span class="pull-right">85%</span>
<div class="progress progress-striped active progress-right">
<div class="bar green" style="width:85%;"></div>
</div>
</li>
<li>Firefox <span class="pull-right">35%</span>
<div class="progress progress-striped active progress-right">
<div class="bar yellow" style="width:35%;"></div>
</div>
</li>
<li>Internet Explorer <span class="pull-right">78%</span>
<div class="progress progress-striped active progress-right">
<div class="bar red" style="width:78%;"></div>
</div>
</li>
<li>Safari <span class="pull-right">50%</span>
<div class="progress progress-striped active progress-right">
<div class="bar blue" style="width:50%;"></div>
</div>
</li>
<li>Opera <span class="pull-right">80%</span>
<div class="progress progress-striped active progress-right">
<div class="bar light-blue" style="width:80%;"></div>
</div>
</li>
<li>Microsoft Edge <span class="pull-right">78%</span>
<div class="progress progress-striped active progress-right">
<div class="bar red" style="width:78%;"></div>
</div>
</li>
<li class="last">Others <span class="pull-right">60%</span>
<div class="progress progress-striped active progress-right">
<div class="bar orange" style="width:60%;"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 chart-layer1-right">
<div class="user-marorm">
<div class="malorum-top">
</div>
<div class="malorm-bottom">
<span class="malorum-pro"> </span>
<h2>Calorine ELiza</h2>
<p>Fusce elit sem, dictum non gravida vitae, pulv
inar ac mi. Proin aliquet ex nunc, sodales efficitur
ris imperdiet et. Vestibulum antei psum primis in faucibus orci luctus et </p>
<ul class="malorum-icons">
<li><a href="#"><i class="fa fa-facebook"> </i>
<div class="tooltip"><span>Facebook</span></div>
</a></li>
<li><a href="#"><i class="fa fa-twitter"> </i>
<div class="tooltip"><span>Twitter</span></div>
</a></li>
<li><a href="#"><i class="fa fa-google-plus"> </i>
<div class="tooltip"><span>Google</span></div>
</a></li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<!-- //calendar -->
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<p>&copy; 2018 Glance Design Dashboard. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts</a></p>
</div>
<!--//footer-->
</div>
<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
$('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->
<!-- geo chart -->
<script src="//cdn.jsdelivr.net/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script>window.modernizr || document.write('<script src="lib/modernizr/modernizr-custom.js"><\/script>')</script>
<!--<script src="lib/html5shiv/html5shiv.js"></script>-->
<!-- Chartinator -->
<script src="js/chartinator.js" ></script>
<script type="text/javascript">
jQuery(function ($) {
var chart3 = $('#geoChart').chartinator({
tableSel: '.geoChart',
columns: [{role: 'tooltip', type: 'string'}],
colIndexes: [2],
rows: [
['China - 2015'],
['Colombia - 2015'],
['France - 2015'],
['Italy - 2015'],
['Japan - 2015'],
['Kazakhstan - 2015'],
['Mexico - 2015'],
['Poland - 2015'],
['Russia - 2015'],
['Spain - 2015'],
['Tanzania - 2015'],
['Turkey - 2015']],
ignoreCol: [2],
chartType: 'GeoChart',
chartAspectRatio: 1.5,
chartZoom: 1.75,
chartOffset: [-12,0],
chartOptions: {
width: null,
backgroundColor: '#fff',
datalessRegionColor: '#F5F5F5',
region: 'world',
resolution: 'countries',
legend: 'none',
colorAxis: {
colors: ['#679CCA', '#337AB7']
},
tooltip: {
trigger: 'focus',
isHtml: true
}
}
});
});
</script>
<!--geo chart-->
<!-- calendar -->
<script type="text/javascript" src="js/monthly.js"></script>
<script type="text/javascript">
$(window).load( function() {
$('#mycalendar').monthly({
mode: 'event',
});
$('#mycalendar2').monthly({
mode: 'picker',
target: '#mytarget',
setWidth: '250px',
startHidden: true,
showTrigger: '#mytarget',
stylePast: true,
disablePast: true
});
switch(window.location.protocol) {
case 'http:':
case 'https:':
// running on a server, should be good.
break;
case 'file:':
alert('Just a heads-up, events will not work when run locally.');
}
});
</script>
<!-- //calendar -->
<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
function disableOther( button ) {
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
}
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment