RubyGems - kirgudu_base - Versions diffs - 0.0.1 → 0.0.3 - Mend

kirgudu_base 0.0.1 → 0.0.3

Files changed (871) hide show

data/app/views/admin_templates/good/zapanel/charts.html ADDED Viewed

@@ -0,0 +1,611 @@
+<!DOCTYPE html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Charts</title>
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Raleway:100,900,800,700,600,500,400,300,200' rel='stylesheet' type='text/css'><!-- Google Fonts -->
+<!-- Styles -->
+<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
+<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" /><!-- Custom Scroll Bar -->
+<link rel="stylesheet" href="font-awesome/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
+<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
+<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive Style -->
+<!-- Script -->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- Jquery -->
+<script src="js/jquery.mCustomScrollbar.concat.min.js"></script><!-- Scroll Bar -->
+<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script><!-- Circle Chart -->
+<script type="text/javascript"  src="js/bootstrap.js"></script><!-- Bootstrap -->
+<script type="text/javascript"  src="js/script.js"></script><!-- Script -->
+<script type="text/javascript" src="js/tcal.js"></script> <!-- Input Calendar -->
+<script type="text/javascript" src="js/jquery.sparkline.min.js"></script> <!-- Sparkline -->
+<script type="text/javascript" src="https://www.google.com/jsapi"></script> <!-- Google Map -->
+<script src="js/jquery-ui.custom.min.js"></script> <!-- Jquery UI Custom -->
+<script src="js/jquery.easypiechart.min.js"></script> <!-- Easy Pie Chart -->
+<script type="text/javascript" src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js"></script><!-- Sidebar Add Tag -->
+<script src="js/chart-line-and-graph.js"></script>
+<script src="js/jquery.nicescroll.min.js"></script>
+<script src="js/header-line-chart.js"></script>
+<script src="js/jquery.flot.min.js"></script><!-- Chart -->
+<script src="js/flot-chart-header.js"></script>
+<script src="js/flot-jquery-header.js"></script>
+<script src="js/side-navigation-tag.js"></script>
+<!-- Google Map-->
+<script type='text/javascript'>
+     google.load('visualization', '1', {'packages': ['geochart']});
+     google.setOnLoadCallback(drawRegionsMap);
+      function drawRegionsMap() {
+        var data = google.visualization.arrayToDataTable([
+          ['Country', 'Popularity'],
+          ['Germany', 200],
+          ['United States', 300],
+          ['Brazil', 400],
+          ['Canada', 500],
+          ['France', 600],
+          ['RU', 700]
+        ]);
+        var options = {};
+        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
+        chart.draw(data, options);
+    };
+</script>
+<!-- Easy Pie Chart -->
+<script type="text/javascript">
+	$(function() {
+		//create instance
+	   $(".visitor").easyPieChart({animate:2000});setTimeout(function(){$(".visitor").data("easyPieChart").update(50)},5000);setTimeout(function(){$(".visitor").data("easyPieChart").update(70)},10000);setTimeout(function(){$(".visitor").data("easyPieChart").update(30)},15000);setTimeout(function(){$(".visitor").data("easyPieChart").update(90)},19000);setTimeout(function(){$(".visitor").data("easyPieChart").update(40)},32000)
+	   $(".returning-visitor").easyPieChart({animate:2000});setTimeout(function(){$(".returning-visitor").data("easyPieChart").update(78)},5000);setTimeout(function(){$(".returning-visitor").data("easyPieChart").update(67)},10000);setTimeout(function(){$(".returning-visitor").data("easyPieChart").update(84)},15000);setTimeout(function(){$(".returning-visitor").data("easyPieChart").update(23)},19000);setTimeout(function(){$(".returning-visitor").data("easyPieChart").update(40)},32000)
+	});
+</script>
+<!-- Sparklines -->
+<script type="text/javascript">
+	$(function() {
+	$("#new-orders").sparkline([4,5,6,7,6,5,4,3,2,2,3,4], {
+    type: 'bar',
+    height: '40px',
+	barSpacing:3,
+    barWidth: 6,
+    barColor: '#ff4646',
+    negBarColor: '#D6A838'});
+    });
+	$(function() {
+	$("#my-balance").sparkline([4,5,6,7,6,5,4,3,2,2,3,4], {
+    type: 'bar',
+    height: '40px',
+	barSpacing:3,
+    barWidth: 6,
+    barColor: '#21b95e',
+    negBarColor: '#27A9E3'});
+    });
+	$(function() {
+	$("#large-bar-chart").sparkline([4,5,6,7,6,5,4,5,6,7,8,9,10,9,8,7,6,5,4,5,6,7,8,9,10,9,8], {
+    type: 'bar',
+    height: '300px',
+	barSpacing:3,
+    barWidth: 15,
+    barColor: '#656260',
+    negBarColor: '#35AA47'});
+    });
+</script>
+</head>
+<body>
+<div class="wrapper dark">
+	<header>
+		<div class="logo">
+			<img src="images/logo.png" alt="" />
+		</div><!-- Logo -->
+		<div class="welcome-user">
+			<img src="images/user.png" alt=""/>
+			<span>LARA SMITH</span>
+			<p>Welcome Lara Smith</p>
+		</div>
+			<div class="side-navigation">
+				<ul>
+					<li><a title=""><i class="icon-laptop"></i>Dashboard<span>5</span></a>
+						<ul>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Dashboard 1</a></li>
+							<li><a href="dashboard2.html" title=""><i class="icon-angle-right"></i>Dashboard 2</a></li>
+							<li><a href="dashboard3.html" title=""><i class="icon-angle-right"></i>Dashboard 3</a></li>
+							<li><a href="hosting-dashboard.html" title=""><i class="icon-angle-right"></i>Hosting Dashboard</a></li>
+							<li><a href="sale-purchase-dashboard.html" title=""><i class="icon-angle-right"></i>For Sale & Purchase</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-cogs"></i>Components<span>13</span></a>
+						<ul>
+							<li><a href="charts.html" title=""><i class="icon-angle-right"></i>Charts</a></li>
+							<li><a href="notification.html" title=""><i class="icon-angle-right"></i>Notifications</a></li>
+							<li><a href="grids.html" title=""><i class="icon-angle-right"></i>Grids</a></li>
+							<li><a href="ribbon-grids.html" title=""><i class="icon-angle-right"></i>Ribbon Grids</a></li>
+							<li><a href="buttons.html" title=""><i class="icon-angle-right"></i>Buttons</a></li>
+							<li><a href="calendars.html" title=""><i class="icon-angle-right"></i>Calendars</a></li>
+							<li><a href="progressbar.html" title=""><i class="icon-angle-right"></i>Progress Bar</a></li>
+							<li><a href="file-manager.html" title=""><i class="icon-angle-right"></i>File Manager</a></li>
+							<li><a href="gallery.html" title=""><i class="icon-angle-right"></i>Gallery</a></li>
+							<li><a href="slider.html" title=""><i class="icon-angle-right"></i>Slider</a></li>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Page Tour</a></li>
+							<li><a href="collapse.html" title=""><i class="icon-angle-right"></i>Collapse</a></li>
+							<li><a href="range-slider.html" title=""><i class="icon-angle-right"></i>Range Slider</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-shopping-cart"></i>Cart Example</a>
+						<ul>
+							<li><a href="cart.html" title=""><i class="icon-angle-right"></i>Cart Page</a></li>
+							<li><a href="billing.html" title=""><i class="icon-angle-right"></i>Billing Page</a></li>
+							<li><a href="order-recieved.html" title=""><i class="icon-angle-right"></i>Order Recieved</a></li>
+						</ul>
+					</li>
+					<li><a href="form.html" title=""><i class="icon-pencil"></i>Form Elements</a></li>
+					<li><a href="icon.html" title=""><i class="icon-tint"></i>Icons</a></li>
+					<li><a href="tables.html" title=""><i class="icon-list-alt"></i>Tables</a></li>
+					<li><a href="typography.html" title=""><i class="icon-font"></i>Typography</a></li>
+					<li><a title=""><i class="icon-rocket"></i>Sample Pages<span>4</span></a>
+						<ul>
+							<li><a href="invoice.html" title=""><i class="icon-angle-right"></i>Invoice</a></li>
+							<li><a href="index.html" title=""><i class="icon-angle-right"></i>Log in</a></li>
+							<li><a href="404.html" title=""><i class="icon-angle-right"></i>404 Error Page</a></li>
+							<li><a href="blank-page.html" title=""><i class="icon-angle-right"></i>Blank Page</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-ellipsis-horizontal"></i>Bonus Free<span>5</span></a>
+						<ul>
+							<li><a href="price-table.html" title=""><i class="icon-angle-right"></i>Pricing Table</a></li>
+							<li><a href="search.html" title=""><i class="icon-angle-right"></i>Search Result</a></li>
+							<li><a href="inbox.html" title=""><i class="icon-angle-right"></i>Message</a></li>
+							<li><a href="profile.html" title=""><i class="icon-angle-right"></i>Profile</a></li>
+							<li><a href="faq.html" title=""><i class="icon-angle-right"></i>FAQ</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		<div class="social-statistics">
+			<h4 class="headings"><i class="icon-twitter"></i>Social Statistics</h4>
+				<div class="social-details">
+					<img src="images/fb.jpg" alt="" />
+					<span>530,893</span>
+					<p>Total Facebook Likes</p>
+				</div>
+				<div class="social-details">
+					<img src="images/twitter.jpg" alt="" />
+					<span>17,812</span>
+					<p>Total Twitter Tweets</p>
+				</div>
+				<div class="social-details">
+					<img src="images/rss.jpg" alt="" />
+					<span>2,159</span>
+					<p>Total Rss</p>
+				</div>
+		</div>
+		<div class="new-files">
+			<h4 class="headings"><i class="icon-envelope"></i> Your Emails</h4>
+			<ul>
+				<li>
+					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+					<a title="" href="#"><i class="icon-envelope blue"></i>From : David Smith</a>
+					<p>Dear Victoria, Congratulations! You work has been uploaded so please....</p>
+				</li>
+				<li>
+					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+					<a title="" href="#"><img src="images/email-thumb.png" alt="" />Re : John Doe</a>
+					<p>Dear Haxzer, What's Your Plan! You work has been uploaded so please....</p>
+				</li>
+				<li>
+					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+					<a title="" href="#"><i class="icon-envelope green"></i>Re : Parker</a>
+					<p>Dear Haxzer, What's Your Plan! You work has been uploaded so please....</p>
+				</li>
+			</ul>
+		</div>
+		<div class="tag-sec">
+			<input id="tags_1" type="text" class="tags" value="Here,you,can,add,tags" />
+		</div>
+		<a class="slide-up-btn"><i class="icon-align-justify"></i></a>
+	</header><!-- Header End -->
+<section class="main-section">
+		<div class="responsive-logo">
+			<img src="images/logo.png" alt="" />
+		</div>
+			<div class="responsive-menu">
+			<div class="responsive-menu-dropdown">
+				<a title="" class="red">MENU <i class="icon-align-justify" ></i></a>
+			</div>
+				<ul>
+					<li><a title=""><i class="icon-laptop"></i>Dashboard<span>5</span></a>
+						<ul>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Dashboard 1</a></li>
+							<li><a href="dashboard2.html" title=""><i class="icon-angle-right"></i>Dashboard 2</a></li>
+							<li><a href="dashboard3.html" title=""><i class="icon-angle-right"></i>Dashboard 3</a></li>
+							<li><a href="hosting-dashboard.html" title=""><i class="icon-angle-right"></i>Hosting Dashboard</a></li>
+							<li><a href="sale-purchase-dashboard.html" title=""><i class="icon-angle-right"></i>For Sale & Purchase</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-cogs"></i>Components<span>13</span></a>
+						<ul>
+							<li><a href="charts.html" title=""><i class="icon-angle-right"></i>Charts</a></li>
+							<li><a href="notification.html" title=""><i class="icon-angle-right"></i>Notifications</a></li>
+							<li><a href="grids.html" title=""><i class="icon-angle-right"></i>Grids</a></li>
+							<li><a href="ribbon-grids.html" title=""><i class="icon-angle-right"></i>Ribbon Grids</a></li>
+							<li><a href="buttons.html" title=""><i class="icon-angle-right"></i>Buttons</a></li>
+							<li><a href="calendars.html" title=""><i class="icon-angle-right"></i>Calendars</a></li>
+							<li><a href="progressbar.html" title=""><i class="icon-angle-right"></i>Progress Bar</a></li>
+							<li><a href="file-manager.html" title=""><i class="icon-angle-right"></i>File Manager</a></li>
+							<li><a href="gallery.html" title=""><i class="icon-angle-right"></i>Gallery</a></li>
+							<li><a href="slider.html" title=""><i class="icon-angle-right"></i>Slider</a></li>
+							<li><a href="dashboard.html" title=""><i class="icon-angle-right"></i>Page Tour</a></li>
+							<li><a href="collapse.html" title=""><i class="icon-angle-right"></i>Collapse</a></li>
+							<li><a href="range-slider.html" title=""><i class="icon-angle-right"></i>Range Slider</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-shopping-cart"></i>Cart Example</a>
+						<ul>
+							<li><a href="cart.html" title=""><i class="icon-angle-right"></i>Cart Page</a></li>
+							<li><a href="billing.html" title=""><i class="icon-angle-right"></i>Billing Page</a></li>
+							<li><a href="order-recieved.html" title=""><i class="icon-angle-right"></i>Order Recieved</a></li>
+						</ul>
+					</li>
+					<li><a href="form.html" title=""><i class="icon-pencil"></i>Form Elements</a></li>
+				</ul>
+				<ul>
+					<li><a href="icon.html" title=""><i class="icon-tint"></i>Icons</a></li>
+					<li><a href="tables.html" title=""><i class="icon-list-alt"></i>Tables</a></li>
+					<li><a href="typography.html" title=""><i class="icon-font"></i>Typography</a></li>
+					<li><a title=""><i class="icon-rocket"></i>Sample Pages<span>4</span></a>
+						<ul>
+							<li><a href="invoice.html" title=""><i class="icon-angle-right"></i>Invoice</a></li>
+							<li><a href="index.html" title=""><i class="icon-angle-right"></i>Log in</a></li>
+							<li><a href="404.html" title=""><i class="icon-angle-right"></i>404 Error Page</a></li>
+							<li><a href="blank-page.html" title=""><i class="icon-angle-right"></i>Blank Page</a></li>
+						</ul>
+					</li>
+					<li><a title=""><i class="icon-ellipsis-horizontal"></i>Bonus Free<span>5</span></a>
+						<ul>
+							<li><a href="price-table.html" title=""><i class="icon-angle-right"></i>Pricing Table</a></li>
+							<li><a href="search.html" title=""><i class="icon-angle-right"></i>Search Result</a></li>
+							<li><a href="inbox.html" title=""><i class="icon-angle-right"></i>Message</a></li>
+							<li><a href="profile.html" title=""><i class="icon-angle-right"></i>Profile</a></li>
+							<li><a href="faq.html" title=""><i class="icon-angle-right"></i>FAQ</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+<div class="container">
+	<div class="row">
+		<div class="main-bg">
+			<div class="top-stats">
+				<form>
+					<input type="text" placeholder="Your Search Here" class="search-box"/>
+					<input type="submit" class="search-submit" value=""/>
+				</form>				<div class="top-bar-chart">
+					<div class="bar-chart-details">
+						<p>New User</p>
+						<h5>17,561</h5>
+					</div>
+					<span id="new-orders" class="sparkline">4,5,6,7,6,5,4,3,2,2,4</span>
+				</div>
+				<div class="top-bar-chart">
+					<div class="bar-chart-details">
+						<p>My Balance</p>
+						<h5>$21,561.01</h5>
+					</div>
+					<span id="my-balance" class="sparkline">4,5,6,7,6,5,4,3,2,2,4</span>
+				</div>
+				<div class="top-stats-icons">
+					<i class="icon-rocket"></i><i class="icon-user"></i><i class="icon-laptop"></i><i class="icon-tasks"></i>
+				</div>
+			</div>
+			<div class="breadcrumbs-notify">
+				<a href="#" title="">Home / </a> <a href="#" class="current-page" title=""> Blank Page </a>
+				<div class="notification-auto">
+					<div class="fade-notification">
+					<h5><i class="icon-warning-sign"></i> Notification :</h5>
+					</div>
+					<div class="notification-slideshow">
+						<h6 class="notify-fade">Server 3 is Over Loader Please Check. <i>3:45pm</i></h6>
+						<h6 class="notify-fade">Server # 10 is Not Responding<i>1:30 Am</i></h6>
+						<h6 class="notify-fade">New User Registration Error . <i>Today</i></h6>
+						<h6 class="notify-fade">Domain Expiration Error <i>Yesterday</i></h6>
+						<h6 class="notify-fade">Database Over loaded 2% Remaining <i>9:59 pm</i></h6>
+						<h6 class="notify-fade">Application Erro Delete it Now <i>Last Week</i></h6>
+					</div>
+				</div>
+			</div>
+			<div class="heading-buttons-sec">
+				<h1>Charts</h1>
+				<p>Good Morning Lara Smith!!</p>
+					<div class="heading-buttons">
+						<ul>
+						<li class="dropdown heading-dropdown">
+							<a href="#" data-toggle="dropdown" role="button" id="drop1">Dropdown <b class="caret"></b></a>
+							<ul aria-labelledby="drop1" role="menu" class="dropdown-menu" id="menu1">
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
+							<li class="divider" role="presentation"></li>
+							<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
+							</ul>
+						</li>
+						</ul>
+						<a href="#" title=""><i class="icon-paper-clip"></i></a><a href="#" title=""><i class="icon-calendar"></i></a><a href="#" title=""><i class="icon-envelope"></i></a><a href="#" title=""><i class="icon-refresh"></i></a>
+					</div>
+			</div>
+		<div class="body-sec">
+			<div class="col-md-9">
+				<div class="widget-body">
+					<div class="widget-heading green">
+						<i class="icon-signal pull-left"></i><h3 class="pull-left">Line Chart & Bar Chart</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop2"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop2" role="menu" class="dropdown-menu" id="menu2">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<div id="graph-wrapper">
+							<div class="graph-info">
+								<a href="" class="visitors"><span class="green"></span>Visitors</a>
+								<a href="" class="returning"><span class="brown"></span>Returning Visitors</a>
+								<a href="#" id="bars"><span><i class="icon-bar-chart"></i></span></a>
+								<a href="#" id="lines" class="active"><span><i class="icon-code-fork"></i></span></a>
+							</div>
+							<div class="graph-container">
+								<div id="graph-lines"></div>
+								<div id="graph-bars"></div>
+							</div>
+							<div class="graph-details">
+								<ul>
+									<li><strong>$5,450<span class="green">+5.00%</span></strong><p>Average of $450.35 Per Day</p></li>
+									<li><strong>1,120<span class="blue">+5.00%</span></strong><p>Total Visitors : 2,58,256,00</p></li>
+									<li>
+										<form action="#">
+											<label>From</label>
+											<!-- add class="tcal" to your input field -->
+											<div><input type="text" name="date" class="tcal" value="" /></div>
+										</form>
+										<form action="#">
+											<label>To</label>
+											<!-- add class="tcal" to your input field -->
+											<div><input type="text" name="date" class="tcal" value="" /></div>
+										</form>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-3">
+				<div class="widget-body">
+					<div class="widget-heading blue">
+						<i class="icon-time pull-left"></i><h3 class="pull-left">Circle Chart</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop3"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop3" role="menu" class="dropdown-menu" id="menu3">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<div class="circle-sta">
+							<div class="visitor chart-bg" data-percent="73">
+								<span></span>
+							</div>
+							<p>Lorem ipsum dolor site torirte amet, cons ectetuer.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-3">
+				<div class="widget-body">
+					<div class="widget-heading red">
+						<i class="icon-time pull-left"></i><h3 class="pull-left">Circle Chart</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop4"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop4" role="menu" class="dropdown-menu" id="menu4">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<div class="circle-sta">
+							<div class="returning-visitor chart-bg" data-percent="73">
+								<span></span>
+							</div>
+							<p>Lorem ipsum dolor site torirte amet, cons ectetuer.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-12">
+				<div class="widget-body">
+					<div class="widget-heading purple">
+						<i class="icon-eye-open pull-left"></i><h3 class="pull-left">Live Updating Chart</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop5"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop5" role="menu" class="dropdown-menu" id="menu5">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<div id="flot-placeholder"></div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6">
+				<div class="widget-body">
+					<div class="widget-heading orange">
+						<i class="icon-globe pull-left"></i><h3 class="pull-left">Map Chart</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop6"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop6" role="menu" class="dropdown-menu" id="menu6">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<div id="chart_div" style="width: 100%; height: 300px;"></div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6">
+				<div class="widget-body">
+					<div class="widget-heading gray">
+						<i class="icon-signal pull-left"></i><h3 class="pull-left">Bar Chart</h3>
+						<ul>
+						<li class="dropdown panel-function">
+							<a href="#" data-toggle="dropdown" role="button" id="drop7"> <b class="caret"></b></a>
+							<ul aria-labelledby="drop7" role="menu" class="dropdown-menu" id="menu7">
+							<li role="presentation"><a class="hide-btn" title="">-</a></li>
+							<li role="presentation"><a class="close-sec" title="">x</a></li>
+							<li role="presentation" class="color-box-hover"><a class="color-box" title=""><i class="icon-magic"></i></a>
+							<div class="color-box-sec">
+								<a title="" class="clr-red"><i class="red"></i></a>
+								<a title="" class="clr-blue"><i class="blue"></i></a>
+								<a title="" class="clr-green"><i class="green"></i></a>
+								<a title="" class="clr-orange"><i class="orange"></i></a>
+								<a title="" class="clr-purple"><i class="purple"></i></a>
+								<a title="" class="clr-gray"><i class="gray"></i></a>
+							</div>
+							</li>
+							</ul>
+						</li>
+						</ul>
+					</div>
+					<div class="widget-sec">
+						<span id="large-bar-chart" class="sparkline">4,5,6,7,6,5,4,3,2,2,4</span>
+					</div>
+				</div>
+			</div>
+		</div><!-- Body Sec -->
+		</div><!-- main-bg-->
+	</div><!-- Row -->
+</div><!-- Container -->
+</section><!-- Main Section -->
+</div><!-- wrapper dark -->
+	<!-- Side Panel -->
+	<div class="side-panel green">
+		<a class="panel-button gray"><i class="icon-cogs"></i></a>
+		<h4 class="gray">Sidebar Theme</h4>
+		<div class="patterns">
+			<div class="light-theme-sec">
+			<img src="images/light-theme-thumb.jpg" alt="" /><a title="" class="light-theme">LIGHT</a>
+			</div>
+			<div class="dark-theme-sec">
+			<img src="images/dark-theme-thumb.jpg" alt="" /><a title="" class="dark-theme">DARK</a>
+			</div>
+			<a title="" class="gradient-theme-btn">GRADIENT THEME</a>
+		</div>
+	</div>
+</body><!-- Body -->
+</html><!-- Html -->