<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- Page title -->
<title>HOMER | WebApp admin theme</title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!--<link rel="shortcut icon" type="image/ico" href="favicon.ico" />-->
<!-- Vendor styles -->
<link th:href="@{/vendor/fontawesome/css/font-awesome.css}" rel="stylesheet" />
<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="vendor/metisMenu/dist/metisMenu.css" />
<link rel="stylesheet" href="vendor/animate.css/animate.css" />
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.css" />
<!-- App styles -->
<link rel="stylesheet" href="fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css" />
<link rel="stylesheet" href="fonts/pe-icon-7-stroke/css/helper.css" />
<link rel="stylesheet" href="styles/style.css"/>
<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
</head>
<body class="fixed-navbar fixed-sidebar">
<!-- Simple splash screen-->
<div class="splash"> <div class="color-line"></div><div class="splash-title"><h1>Homer - Responsive Admin Theme</h1><p>Special Admin Theme for small and medium webapp with very clean and aesthetic style and feel. </p><div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> </div>
<!--[if lt IE 7]>
<p class="alert alert-danger">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Header -->
<div id="header">
<div class="color-line">
</div>
<div id="logo" class="light-version">
<span>
Homer Theme
</span>
</div>
<nav role="navigation">
<div class="header-link hide-menu"><i class="fa fa-bars"></i></div>
<div class="small-logo">
<span class="text-primary">HOMER APP</span>
</div>
<form role="search" class="navbar-form-custom" method="post" action="#">
<div class="form-group">
<input type="text" placeholder="Search something special" class="form-control" name="search"/>
</div>
</form>
<div class="mobile-menu">
<button type="button" class="navbar-toggle mobile-menu-toggle" data-toggle="collapse" data-target="#mobile-collapse">
<i class="fa fa-chevron-down"></i>
</button>
<div class="collapse mobile-navbar" id="mobile-collapse">
<ul class="nav navbar-nav">
<li>
<a class="" href="login.html">Login</a>
</li>
<li>
<a class="" href="login.html">Logout</a>
</li>
<li>
<a class="" href="profile.html">Profile</a>
</li>
</ul>
</div>
</div>
<div class="navbar-right">
<ul class="nav navbar-nav no-borders">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="pe-7s-speaker"></i>
</a>
<ul class="dropdown-menu hdropdown notification animated flipInX">
<li>
<a>
<span class="label label-success">NEW</span> It is a long established.
</a>
</li>
<li>
<a>
<span class="label label-warning">WAR</span> There are many variations.
</a>
</li>
<li>
<a>
<span class="label label-danger">ERR</span> Contrary to popular belief.
</a>
</li>
<li class="summary"><a href="#">See all notifications</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="pe-7s-keypad"></i>
</a>
<div class="dropdown-menu hdropdown bigmenu animated flipInX">
<table>
<tbody>
<tr>
<td>
<a href="projects.html">
<i class="pe pe-7s-portfolio text-info"></i>
<h5>Projects</h5>
</a>
</td>
<td>
<a href="mailbox.html">
<i class="pe pe-7s-mail text-warning"></i>
<h5>Email</h5>
</a>
</td>
<td>
<a href="contacts.html">
<i class="pe pe-7s-users text-success"></i>
<h5>Contacts</h5>
</a>
</td>
</tr>
<tr>
<td>
<a href="forum.html">
<i class="pe pe-7s-comment text-info"></i>
<h5>Forum</h5>
</a>
</td>
<td>
<a href="analytics.html">
<i class="pe pe-7s-graph1 text-danger"></i>
<h5>Analytics</h5>
</a>
</td>
<td>
<a href="file_manager.html">
<i class="pe pe-7s-box1 text-success"></i>
<h5>Files</h5>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle label-menu-corner" href="#" data-toggle="dropdown">
<i class="pe-7s-mail"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu hdropdown animated flipInX">
<div class="title">
You have 4 new messages
</div>
<li>
<a>
It is a long established.
</a>
</li>
<li>
<a>
There are many variations.
</a>
</li>
<li>
<a>
Lorem Ipsum is simply dummy.
</a>
</li>
<li>
<a>
Contrary to popular belief.
</a>
</li>
<li class="summary"><a href="#">See All Messages</a></li>
</ul>
</li>
<li>
<a href="#" id="sidebar" class="right-sidebar-toggle">
<i class="pe-7s-upload pe-7s-news-paper"></i>
</a>
</li>
<li class="dropdown">
<a href="login.html">
<i class="pe-7s-upload pe-rotate-90"></i>
</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Navigation -->
<aside id="menu">
<div id="navigation">
<div class="profile-picture">
<a href="index.html">
<img src="images/profile.jpg" class="img-circle m-b" alt="logo"/>
</a>
<div class="stats-label text-color">
<span class="font-extra-bold font-uppercase">Robert Razer</span>
<div class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
<small class="text-muted">Founder of App <b class="caret"></b></small>
</a>
<ul class="dropdown-menu animated flipInX m-t-xs">
<li><a href="contacts.html">Contacts</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="analytics.html">Analytics</a></li>
<li class="divider"></li>
<li><a href="login.html">Logout</a></li>
</ul>
</div>
<div id="sparkline1" class="small-chart m-t-sm"></div>
<div>
<h4 class="font-extra-bold m-b-xs">
$260 104,200
</h4>
<small class="text-muted">Your income from the last year in sales product X.</small>
</div>
</div>
</div>
<!--加資料-->
<ul class="nav" id="side-menu">
<li>
<a href="#"><span class="nav-label">Interface</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="typography.html">Typography</a></li>
<li><a href="buttons.html">Colors & Buttons</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="alerts.html">Alerts</a></li>
<li><a href="modals.html">Modals</a></li>
<li><a href="loading_buttons.html">Loading buttons</a></li>
<li><a href="draggable.html">Draggable panels</a></li>
<li><a href="code_editor.html">Code editor</a></li>
<li><a href="email_template.html">Email template</a></li>
<li><a href="nestable_list.html">List</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="icons.html">Icons library</a></li>
</ul>
</li>
</ul>
<!--<ul class="nav" id="side-menu">
<li class="active">
<a href="index.html"> <span class="nav-label">Dashboard</span> <span class="label label-success pull-right">v.1</span> </a>
</li>
<li>
<a href="analytics.html"> <span class="nav-label">Analytics</span><span class="label label-warning pull-right">NEW</span> </a>
</li>
<li>
<a href="#"><span class="nav-label">Interface</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="panels.html">Panels design</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="buttons.html">Colors & Buttons</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="alerts.html">Alerts</a></li>
<li><a href="modals.html">Modals</a></li>
<li><a href="loading_buttons.html">Loading buttons</a></li>
<li><a href="draggable.html">Draggable panels</a></li>
<li><a href="code_editor.html">Code editor</a></li>
<li><a href="email_template.html">Email template</a></li>
<li><a href="nestable_list.html">List</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="icons.html">Icons library</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">App views</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="contacts.html">Contacts</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="project.html">Project detail</a></li>
<li><a href="app_plans.html">App plans</a></li>
<li><a href="social_board.html">Social board</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="mailbox.html">Mailbox</a></li>
<li><a href="mailbox_compose.html">Email compose</a></li>
<li><a href="mailbox_view.html">Email view</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog_details.html">Blog article</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="forum_details.html">Forum details</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="file_manager.html">File manager</a></li>
<li><a href="chat_view.html">Chat view</a></li>
<li><a href="search.html">Search view</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">Charts</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="chartjs.html">ChartJs</a></li>
<li><a href="flot.html">Flot charts</a></li>
<li><a href="inline.html">Inline graphs</a></li>
<li><a href="chartist.html">Chartist</a></li>
<li><a href="c3.html">C3 Charts</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">Box transitions</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="overview.html"><span class="label label-success pull-right">Start</span> Overview </a> </li>
<li><a href="transition_two.html">Columns from up</a></li>
<li><a href="transition_one.html">Columns custom</a></li>
<li><a href="transition_three.html">Panels zoom</a></li>
<li><a href="transition_four.html">Rows from down</a></li>
<li><a href="transition_five.html">Rows from right</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">Common views</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="error_one.html">Error 404</a></li>
<li><a href="error_two.html">Error 505</a></li>
<li><a href="lock.html">Lock screen</a></li>
<li><a href="password_recovery.html">Passwor recovery</a></li>
</ul>
</li>
<li>
<a href="#"><span class="nav-label">Tables</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="tables_design.html">Tables design</a></li>
<li><a href="datatables.html">Data tables</a></li>
<li><a href="footable.html">Foo Table</a></li>
</ul>
</li>
<li>
<a href="widgets.html"> <span class="nav-label">Widgets</span> <span class="label label-success pull-right">Special</span></a>
</li>
<li>
<a href="#"><span class="nav-label">Forms</span><span class="fa arrow"></span> </a>
<ul class="nav nav-second-level">
<li><a href="forms_elements.html">Forms elements</a></li>
<li><a href="forms_extended.html">Forms extended</a></li>
<li><a href="text_editor.html">Text editor</a></li>
<li><a href="wizard.html">Wizard</a></li>
<li><a href="validation.html">Validation</a></li>
</ul>
</li>
<li>
<a href="options.html"> <span class="nav-label">Layout options</span></a>
</li>
<li>
<a href="grid_system.html"> <span class="nav-label">Grid system</span></a>
</li>
<li>
<a href="landing_page.html"> <span class="nav-label">Landing page</span></a>
</li>
<li>
<a href="package.html"> <span class="nav-label">Package</span></a>
</li>
</ul>-->
<!--加資料-->
<script type="text/javascript">
$.ajax({
type: "get",
dataType:'json',
url: "http://localhost:9999/html/glks",
//data: "name=John&location=Boston",
success: function(data){
var n = eval(data);
console.log(n.row);
//console.log(n.row.length);
var listone = [];
var liststr="";
var dd=[];
var ss={};
for(var i=0;i<n.row.length;i++){
// listone.push(n.row[i].keyword);
// liststr +=n.row[i].keyword;
var cstr = "";
//console.log(n.row[i].camenu.length);
for (var j = 0; j < n.row[i].camenu.length; j++)
{
listone.push(n.row[i].camenu[j].keyword);
// cstr+=n.row[i].camenu[j].keyword;
cstr+=" <li><a href=\"http://localhost:9999/html/tables\">"+n.row[i].camenu[j].keyword+"</a></li>";
}
//1
liststr+=" <li>\n" +
" <a href=\"#\"><span class=\"nav-label\">"+n.row[i].keyword+"</span><span id='fff' class=\"fa arrow\"></span> </a><ul class=\"nav nav-second-level\" id='son'>"+cstr+"</ul></li>"
//console.log($(".fa arrow"));
//dd=$(".fa arrow");
// console.log(dd);
$(".nav-label").click(function(){
$(" li ul li").toggle();
});
}
$('#side-menu').html(liststr);
/*$(".nav-label").click(function(){
$(".nav nav-second-level").toggle();
});*/
/*$("#fff").click(function(){
$("#son").toggle();
});*/
console.log(listone);
}
});
</script>
<li></li>
</div>
</aside>
<!-- Main Wrapper -->
<div id="wrapper">
<div class="content animate-panel">
<div class="row">
<div class="col-lg-12 text-center m-t-md">
<h2>
Welcome to Homer Theme
</h2>
<p>
Special <strong>Admin Theme</strong> for small, medium and large webapp with very clean and
aesthetic style and feel.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Dashboard information and statistics
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 text-center">
<div class="small">
<i class="fa fa-bolt"></i> Page views
</div>
<div>
<h1 class="font-extra-bold m-t-xl m-b-xs">
226,802
</h1>
<small>Page views in last month</small>
</div>
<div class="small m-t-xl">
<i class="fa fa-clock-o"></i> Data from January
</div>
</div>
<div class="col-md-6">
<div class="text-center small">
<i class="fa fa-laptop"></i> Active users in current month (December)
</div>
<div class="flot-chart" style="height: 160px">
<div class="flot-chart-content" id="flot-line-chart"></div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="small">
<i class="fa fa-clock-o"></i> Active duration
</div>
<div>
<h1 class="font-extra-bold m-t-xl m-b-xs">
10 Months
</h1>
<small>And four weeks</small>
</div>
<div class="small m-t-xl">
<i class="fa fa-clock-o"></i> Last active in 12.10.2015
</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-right">
You have two new messages from <a href="">Monica Bolt</a>
</span>
Last update: 21.05.2015
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="hpanel"style="width: 500px;height: 500px;">
<div class="panel-body text-center h-200" >
<iframe src="http://localhost:9999/html/shu"style="width: 1500px;height: 400px;border: 1px solid #ffffff;"></iframe>
</div>
<!-- <div class="panel-body text-center h-200">
<i class="pe-7s-graph1 fa-4x"></i>
<h1 class="m-xs">$1 206,90</h1>
<h3 class="font-extra-bold no-margins text-success">
All Income
</h3>
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit vestibulum.</small>
</div>-->
<!--<div class="panel-footer">
This is standard panel footer
</div>-->
</div>
</div>
<!-- <div class="col-lg-3">
<div class="hpanel stats">
<div class="panel-body h-200">
<div class="stats-title pull-left">
<h4>Users Activity</h4>
</div>
<div class="stats-icon pull-right">
<i class="pe-7s-share fa-4x"></i>
</div>
<div class="m-t-xl">
<h3 class="m-b-xs">210</h3>
<span class="font-bold no-margins">
Social users
</span>
<div class="progress m-t-xs full progress-small">
<div style="width: 55%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="55"
role="progressbar" class=" progress-bar progress-bar-success">
<span class="sr-only">35% Complete (success)</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<small class="stats-label">Pages / Visit</small>
<h4>7.80</h4>
</div>
<div class="col-xs-6">
<small class="stats-label">% New Visits</small>
<h4>76.43%</h4>
</div>
</div>
</div>
</div>
<div class="panel-footer">
This is standard panel footer
</div>
</div>
</div>-->
<!--<div class="col-lg-3">
<div class="hpanel stats">
<div class="panel-body h-200">
<div class="stats-title pull-left">
<h4>Page Views</h4>
</div>
<div class="stats-icon pull-right">
<i class="pe-7s-monitor fa-4x"></i>
</div>
<div class="m-t-xl">
<h1 class="text-success">860k+</h1>
<span class="font-bold no-margins">
Social users
</span>
<br/>
<small>
Lorem Ipsum is simply dummy text of the printing and <strong>typesetting
industry</strong>. Lorem Ipsum has been.
</small>
</div>
</div>
<div class="panel-footer">
This is standard panel footer
</div>
</div>
</div>-->
<!--<div class="col-lg-3">
<div class="hpanel stats">
<div class="panel-body h-200">
<div class="stats-title pull-left">
<h4>Today income</h4>
</div>
<div class="stats-icon pull-right">
<i class="pe-7s-cash fa-4x"></i>
</div>
<div class="clearfix"></div>
<div class="flot-chart">
<div class="flot-chart-content" id="flot-income-chart"></div>
</div>
<div class="m-t-xs">
<div class="row">
<div class="col-xs-5">
<small class="stat-label">Today</small>
<h4>$230,00 </h4>
</div>
<div class="col-xs-7">
<small class="stat-label">Last week</small>
<h4>$7 980,60 <i class="fa fa-level-up text-success"></i></h4>
</div>
</div>
</div>
</div>
<div class="panel-footer">
This is standard panel footer
</div>
</div>
</div>-->
</div>
<div class="row">
<div class="col-lg-3">
<div class="hpanel stats">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Last active
</div>
<div class="panel-body list">
<iframe src="http://localhost:9999/html/xian" style="width: 1500px;height: 400px;border: 1px solid #ffffff;"></iframe>
</div>
<!--<div class="panel-body list">
<div class="stats-title pull-left">
<h4>Activity</h4>
</div>
<div class="stats-icon pull-right">
<i class="pe-7s-science fa-4x"></i>
</div>
<div class="m-t-xl">
<span class="font-bold no-margins">
Social users
</span>
<br/>
<small>
Lorem Ipsum is simply dummy text of the printing simply all dummy text. Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.
</small>
</div>
<div class="row m-t-md">
<div class="col-lg-6">
<h3 class="no-margins font-extra-bold text-success">300,102</h3>
<div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div>
</div>
<div class="col-lg-6">
<h3 class="no-margins font-extra-bold text-success">280,200</h3>
<div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div>
</div>
</div>
<div class="row m-t-md">
<div class="col-lg-6">
<h3 class="no-margins font-extra-bold ">120,108</h3>
<div class="font-bold">38% <i class="fa fa-level-down"></i></div>
</div>
<div class="col-lg-6">
<h3 class="no-margins font-extra-bold ">450,600</h3>
<div class="font-bold">28% <i class="fa fa-level-down"></i></div>
</div>
</div>
</div>-->
<div class="panel-footer">
This is standard panel footer
</div>
</div>
</div>
<!-- <div class="col-lg-6">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Recently active projects
</div>
<div class="panel-body list">
<div class="table-responsive project-list">
<table class="table table-striped">
<thead>
<tr>
<th colspan="2">Project</th>
<th>Completed</th>
<th>Task</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="i-checks" checked="checked"/></td>
<td>Contract with Zender Company
<br/>
<small><i class="fa fa-clock-o"></i> Created 14.08.2015</small>
</td>
<td>
<span class="pie">1/5</span>
</td>
<td><strong>20%</strong></td>
<td>Jul 14, 2013</td>
<td><a href=""><i class="fa fa-check text-success"></i></a></td>
</tr>
<tr>
<td><input type="checkbox" class="i-checks"/></td>
<td>There are many variations of passages
<br/>
<small><i class="fa fa-clock-o"></i> Created 21.07.2015</small>
</td>
<td>
<span class="pie">1/4</span>
</td>
<td><strong>40%</strong></td>
<td>Jul 16, 2013</td>
<td><a href=""><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td><input type="checkbox" class="i-checks" checked="checked"/></td>
<td>Contrary to popular belief
<br/>
<small><i class="fa fa-clock-o"></i> Created 12.06.2015</small>
</td>
<td>
<span class="pie">0.52/1.561</span>
</td>
<td><strong>75%</strong></td>
<td>Jul 18, 2013</td>
<td><a href=""><i class="fa fa-check text-navy"></i></a></td>
</tr>
<tr>
<td><input type="checkbox" class="i-checks"/></td>
<td>Gamma project
<br/>
<small><i class="fa fa-clock-o"></i> Created 06.03.2015</small>
</td>
<td>
<span class="pie">226/360</span>
</td>
<td><strong>16%</strong></td>
<td>Jul 22, 2013</td>
<td><a href=""><i class="fa fa-check text-navy"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Activity
</div>
<div class="panel-body list">
<div class="pull-right">
<a href="#" class="btn btn-xs btn-default">Today</a>
<a href="#" class="btn btn-xs btn-default">Month</a>
</div>
<div class="panel-title">Last Activity</div>
<small class="fo">This is simple example</small>
<div class="list-item-container">
<div class="list-item">
<h3 class="no-margins font-extra-bold text-success">2,773</h3>
<small>Tota Messages Sent</small>
<div class="pull-right font-bold">98% <i class="fa fa-level-up text-success"></i></div>
</div>
<div class="list-item">
<h3 class="no-margins font-extra-bold text-color3">4,422</h3>
<small>Last activity</small>
<div class="pull-right font-bold">13% <i class="fa fa-level-down text-color3"></i></div>
</div>
<div class="list-item">
<h3 class="no-margins font-extra-bold text-color3">9,180</h3>
<small>Monthly income</small>
<div class="pull-right font-bold">22% <i class="fa fa-bolt text-color3"></i></div>
</div>
<div class="list-item">
<h3 class="no-margins font-extra-bold text-success">1,450</h3>
<small>Tota Messages Sent</small>
<div class="pull-right font-bold">44% <i class="fa fa-level-up text-success"></i></div>
</div>
</div>
</div>
</div>
</div>-->
</div>
</div>
<!-- Right sidebar -->
<div id="right-sidebar" class="animated fadeInRight">
<div class="p-m">
<button id="sidebar-close" class="right-sidebar-toggle sidebar-button btn btn-default m-b-md"><i class="pe pe-7s-close"></i>
</button>
<div>
<span class="font-bold no-margins"> Analytics </span>
<br/>
<small> Lorem Ipsum is simply dummy text of the printing simply all dummy text.</small>
</div>
<div class="row m-t-sm m-b-sm">
<div class="col-lg-6">
<h3 class="no-margins font-extra-bold text-success">300,102</h3>
<div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div>
</div>
<div class="col-lg-6">
<h3 class="no-margins font-extra-bold text-success">280,200</h3>
<div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div>
</div>
</div>
<div class="progress m-t-xs full progress-small">
<div style="width: 25%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar"
class=" progress-bar progress-bar-success">
<span class="sr-only">35% Complete (success)</span>
</div>
</div>
</div>
<div class="p-m bg-light border-bottom border-top">
<span class="font-bold no-margins"> Social talks </span>
<br/>
<small> Lorem Ipsum is simply dummy text of the printing simply all dummy text.</small>
<div class="m-t-md">
<div class="social-talk">
<div class="media social-profile clearfix">
<a class="pull-left">
<img src="images/a1.jpg" alt="profile-picture"/>
</a>
<div class="media-body">
<span class="font-bold">John Novak</span>
<small class="text-muted">21.03.2015</small>
<div class="social-content small">
Injected humour, or randomised words which don't look even slightly believable.
</div>
</div>
</div>
</div>
<div class="social-talk">
<div class="media social-profile clearfix">
<a class="pull-left">
<img src="images/a3.jpg" alt="profile-picture"/>
</a>
<div class="media-body">
<span class="font-bold">Mark Smith</span>
<small class="text-muted">14.04.2015</small>
<div class="social-content">
Many desktop publishing packages and web page editors.
</div>
</div>
</div>
</div>
<div class="social-talk">
<div class="media social-profile clearfix">
<a class="pull-left">
<img src="images/a4.jpg" alt="profile-picture"/>
</a>
<div class="media-body">
<span class="font-bold">Marica Morgan</span>
<small class="text-muted">21.03.2015</small>
<div class="social-content">
There are many variations of passages of Lorem Ipsum available, but the majority have
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-m">
<span class="font-bold no-margins"> Sales in last week </span>
<div class="m-t-xs">
<div class="row">
<div class="col-xs-6">
<small>Today</small>
<h4 class="m-t-xs">$170,20 <i class="fa fa-level-up text-success"></i></h4>
</div>
<div class="col-xs-6">
<small>Last week</small>
<h4 class="m-t-xs">$580,90 <i class="fa fa-level-up text-success"></i></h4>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<small>Today</small>
<h4 class="m-t-xs">$620,20 <i class="fa fa-level-up text-success"></i></h4>
</div>
<div class="col-xs-6">
<small>Last week</small>
<h4 class="m-t-xs">$140,70 <i class="fa fa-level-up text-success"></i></h4>
</div>
</div>
</div>
<small> Lorem Ipsum is simply dummy text of the printing simply all dummy text.
Many desktop publishing packages and web page editors.
</small>
</div>
</div>
<!-- Footer-->
<footer class="footer">
<span class="pull-right">
Example text
</span>
Company 2015-2020
</footer>
</div>
<!-- Vendor scripts -->
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/jquery-ui/jquery-ui.min.js"></script>
<script src="vendor/slimScroll/jquery.slimscroll.min.js"></script>
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/jquery-flot/jquery.flot.js"></script>
<script src="vendor/jquery-flot/jquery.flot.resize.js"></script>
<script src="vendor/jquery-flot/jquery.flot.pie.js"></script>
<script src="vendor/flot.curvedlines/curvedLines.js"></script>
<script src="vendor/jquery.flot.spline/index.js"></script>
<script src="vendor/metisMenu/dist/metisMenu.min.js"></script>
<script src="vendor/iCheck/icheck.min.js"></script>
<script src="vendor/peity/jquery.peity.min.js"></script>
<script src="vendor/sparkline/index.js"></script>
<!-- App scripts -->
<script src="scripts/homer.js"></script>
<script src="scripts/charts.js"></script>
<script>
$(function () {
/**
* Flot charts data and options
*/
var data1 = [ [0, 55], [1, 48], [2, 40], [3, 36], [4, 40], [5, 60], [6, 50], [7, 51] ];
var data2 = [ [0, 56], [1, 49], [2, 41], [3, 38], [4, 46], [5, 67], [6, 57], [7, 59] ];
var chartUsersOptions = {
series: {
splines: {
show: true,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
},
grid: {
tickColor: "#f0f0f0",
borderWidth: 1,
borderColor: 'f0f0f0',
color: '#6a6c6f'
},
colors: [ "#62cb31", "#efefef"],
};
$.plot($("#flot-line-chart"), [data1, data2], chartUsersOptions);
/**
* Flot charts 2 data and options
*/
var chartIncomeData = [
{
label: "line",
data: [ [1, 10], [2, 26], [3, 16], [4, 36], [5, 32], [6, 51] ]
}
];
var chartIncomeOptions = {
series: {
lines: {
show: true,
lineWidth: 0,
fill: true,
fillColor: "#64cc34"
}
},
colors: ["#62cb31"],
grid: {
show: false
},
legend: {
show: false
}
};
$.plot($("#flot-income-chart"), chartIncomeData, chartIncomeOptions);
});
</script>
</body>
</html>