EnVisageOnline/PixelAdmin-1.3.0/html/widgets.html

1613 lines
63 KiB
HTML

<!DOCTYPE html>
<!--
TABLE OF CONTENTS.
Use search to find needed section.
===============================================================================
| 1. $BODY | Body |
| 2. $MAIN_NAVIGATION | Main navigation |
| 3. $NAVBAR_ICON_BUTTONS | Navbar Icon Buttons |
| 4. $MAIN_MENU | Main menu |
| 5. $PROFILE_WIDGET_LINKS_EXAMPLE | Profile widget - Links example |
| 6. $PROFILE_WIDGET_COUNTERS_EXAMPLE | Profile widget - Counters example |
| 7. $PROFILE_WIDGET_CENTERED_EXAMPLE | Profile widget - Centered example |
| 8. $MESSAGES_LIST_ALT | Alt messages list |
| 9. $MESSAGES_LIST | Messages list |
| 10. $SUPPORT_TICKETS | Support tickets |
| 11. $THREADS | Threads |
| 12. $CHAT | Chat |
| 13. $NOTIFICATIONS | Notifications |
| 14. $TASKS | Tasks |
| 15. $RATING | Rating |
| 16. $COMMENTS | Comments |
| 17. $ARTICLE_COMMENTS | Article comments |
| 18. $FOLLOWERS | Followers |
| 19. $GOOGLE_MAPS_WIDGET | Google maps widget |
===============================================================================
-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9 gt-ie8"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Widgets - PixelAdmin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- Open Sans font from Google CDN -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css">
<!-- Pixel Admin's stylesheets -->
<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
<link href="assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
<link href="assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
<link href="assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="assets/javascripts/ie.min.js"></script>
<![endif]-->
</head>
<!-- 1. $BODY ======================================================================================
Body
Classes:
* 'theme-{THEME NAME}'
* 'right-to-left' - Sets text direction to right-to-left
* 'main-menu-right' - Places the main menu on the right side
* 'no-main-menu' - Hides the main menu
* 'main-navbar-fixed' - Fixes the main navigation
* 'main-menu-fixed' - Fixes the main menu
* 'main-menu-animated' - Animate main menu
-->
<body class="theme-default main-menu-animated">
<script>var init = [];</script>
<!-- Demo script --> <script src="assets/demo/demo.js"></script> <!-- / Demo script -->
<div id="main-wrapper">
<!-- 2. $MAIN_NAVIGATION ===========================================================================
Main navigation
-->
<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
<!-- Main menu toggle -->
<button type="button" id="main-menu-toggle"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>
<div class="navbar-inner">
<!-- Main navbar header -->
<div class="navbar-header">
<!-- Logo -->
<a href="index.html" class="navbar-brand">
<div><img alt="Pixel Admin" src="assets/images/pixel-admin/main-navbar-logo.png"></div>
PixelAdmin
</a>
<!-- Main navbar toggle -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"><i class="navbar-icon fa fa-bars"></i></button>
</div> <!-- / .navbar-header -->
<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
<div>
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li class="divider"></li>
<li><a href="#">Third item</a></li>
</ul>
</li>
</ul> <!-- / .navbar-nav -->
<div class="right clearfix">
<ul class="nav navbar-nav pull-right right-navbar-nav">
<!-- 3. $NAVBAR_ICON_BUTTONS =======================================================================
Navbar Icon Buttons
NOTE: .nav-icon-btn triggers a dropdown menu on desktop screens only. On small screens .nav-icon-btn acts like a hyperlink.
Classes:
* 'nav-icon-btn-info'
* 'nav-icon-btn-success'
* 'nav-icon-btn-warning'
* 'nav-icon-btn-danger'
-->
<li class="nav-icon-btn nav-icon-btn-danger dropdown">
<a href="#notifications" class="dropdown-toggle" data-toggle="dropdown">
<span class="label">5</span>
<i class="nav-icon fa fa-bullhorn"></i>
<span class="small-screen-text">Notifications</span>
</a>
<!-- NOTIFICATIONS -->
<!-- Javascript -->
<script>
init.push(function () {
$('#main-navbar-notifications').slimScroll({ height: 250 });
});
</script>
<!-- / Javascript -->
<div class="dropdown-menu widget-notifications no-padding" style="width: 300px">
<div class="notifications-list" id="main-navbar-notifications">
<div class="notification">
<div class="notification-title text-danger">SYSTEM</div>
<div class="notification-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-hdd-o bg-danger"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-info">STORE</div>
<div class="notification-description">You have <strong>9</strong> new orders.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-truck bg-info"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-default">CRON DAEMON</div>
<div class="notification-description">Job <strong>"Clean DB"</strong> has been completed.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-clock-o bg-default"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-success">SYSTEM</div>
<div class="notification-description">Server <strong>up</strong>.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-hdd-o bg-success"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-warning">SYSTEM</div>
<div class="notification-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-hdd-o bg-warning"></div>
</div> <!-- / .notification -->
</div> <!-- / .notifications-list -->
<a href="#" class="notifications-link">MORE NOTIFICATIONS</a>
</div> <!-- / .dropdown-menu -->
</li>
<li class="nav-icon-btn nav-icon-btn-success dropdown">
<a href="#messages" class="dropdown-toggle" data-toggle="dropdown">
<span class="label">10</span>
<i class="nav-icon fa fa-envelope"></i>
<span class="small-screen-text">Income messages</span>
</a>
<!-- MESSAGES -->
<!-- Javascript -->
<script>
init.push(function () {
$('#main-navbar-messages').slimScroll({ height: 250 });
});
</script>
<!-- / Javascript -->
<div class="dropdown-menu widget-messages-alt no-padding" style="width: 300px;">
<div class="messages-list" id="main-navbar-messages">
<div class="message">
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<div class="message-description">
from <a href="#">Robert Jang</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
<div class="message-description">
from <a href="#">Michelle Bortz</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
<div class="message-description">
from <a href="#">Timothy Owens</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
<div class="message-description">
from <a href="#">Denise Steiner</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
<div class="message-description">
from <a href="#">Robert Jang</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<div class="message-description">
from <a href="#">Robert Jang</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
<div class="message-description">
from <a href="#">Michelle Bortz</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
<div class="message-description">
from <a href="#">Timothy Owens</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
<div class="message-description">
from <a href="#">Denise Steiner</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
<div class="message-description">
from <a href="#">Robert Jang</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div>
</div> <!-- / .message -->
</div> <!-- / .messages-list -->
<a href="#" class="messages-link">MORE MESSAGES</a>
</div> <!-- / .dropdown-menu -->
</li>
<!-- /3. $END_NAVBAR_ICON_BUTTONS -->
<li>
<form class="navbar-form pull-left">
<input type="text" class="form-control" placeholder="Search">
</form>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
<img src="assets/demo/avatars/1.jpg">
<span>John Doe</span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li>
<li><a href="#"><span class="badge badge-primary pull-right">New</span>Account</a></li>
<li><a href="#"><i class="dropdown-icon fa fa-cog"></i>&nbsp;&nbsp;Settings</a></li>
<li class="divider"></li>
<li><a href="pages-signin.html"><i class="dropdown-icon fa fa-power-off"></i>&nbsp;&nbsp;Log Out</a></li>
</ul>
</li>
</ul> <!-- / .navbar-nav -->
</div> <!-- / .right -->
</div>
</div> <!-- / #main-navbar-collapse -->
</div> <!-- / .navbar-inner -->
</div> <!-- / #main-navbar -->
<!-- /2. $END_MAIN_NAVIGATION -->
<!-- 4. $MAIN_MENU =================================================================================
Main menu
Notes:
* to make the menu item active, add a class 'active' to the <li>
example: <li class="active">...</li>
* multilevel submenu example:
<li class="mm-dropdown">
<a href="#"><span class="mm-text">Submenu item text 1</span></a>
<ul>
<li>...</li>
<li class="mm-dropdown">
<a href="#"><span class="mm-text">Submenu item text 2</span></a>
<ul>
<li>...</li>
...
</ul>
</li>
...
</ul>
</li>
-->
<div id="main-menu" role="navigation">
<div id="main-menu-inner">
<div class="menu-content top" id="menu-content-demo">
<!-- Menu custom content demo
CSS: styles/pixel-admin-less/demo.less or styles/pixel-admin-scss/_demo.scss
Javascript: html/assets/demo/demo.js
-->
<div>
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold">John</span></div>
<img src="assets/demo/avatars/1.jpg" alt="" class="">
<div class="btn-group">
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-envelope"></i></a>
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-user"></i></a>
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-cog"></i></a>
<a href="#" class="btn btn-xs btn-danger btn-outline dark"><i class="fa fa-power-off"></i></a>
</div>
<a href="#" class="close">&times;</a>
</div>
</div>
<ul class="navigation">
<li>
<a href="index.html"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
</li>
<li class="mm-dropdown">
<a href="#"><i class="menu-icon fa fa-th"></i><span class="mm-text">Layouts</span><span class="label label-warning">Updated</span></a>
<ul>
<li>
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid</span></a>
</li>
<li>
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
</li>
</ul>
</li>
<li>
<a href="stat-panels.html"><i class="menu-icon fa fa-tasks"></i><span class="mm-text">Stat panels</span></a>
</li>
<li>
<a href="widgets.html"><i class="menu-icon fa fa-flask"></i><span class="mm-text">Widgets</span></a>
</li>
<li class="mm-dropdown">
<a href="#"><i class="menu-icon fa fa-desktop"></i><span class="mm-text">UI elements</span></a>
<ul>
<li>
<a tabindex="-1" href="ui-buttons.html"><span class="mm-text">Buttons</span></a>
</li>
<li>
<a tabindex="-1" href="ui-typography.html"><span class="mm-text">Typography</span></a>
</li>
<li>
<a tabindex="-1" href="ui-tabs.html"><span class="mm-text">Tabs &amp; Accordions</span></a>
</li>
<li>
<a tabindex="-1" href="ui-modals.html"><span class="mm-text">Modals</span></a>
</li>
<li>
<a tabindex="-1" href="ui-alerts.html"><span class="mm-text">Alerts &amp; Tooltips</span></a>
</li>
<li>
<a tabindex="-1" href="ui-components.html"><span class="mm-text">Components</span></a>
</li>
<li>
<a tabindex="-1" href="ui-panels.html"><span class="mm-text">Panels</span></a>
</li>
<li>
<a tabindex="-1" href="ui-jqueryui.html"><span class="mm-text">jQuery UI</span></a>
</li>
<li>
<a tabindex="-1" href="ui-icons.html"><span class="mm-text">Icons</span></a>
</li>
<li>
<a tabindex="-1" href="ui-utility-classes.html"><span class="mm-text">Utility classes</span></a>
</li>
</ul>
</li>
<li class="mm-dropdown">
<a href="#"><i class="menu-icon fa fa-check-square"></i><span class="mm-text">Form components</span></a>
<ul>
<li>
<a tabindex="-1" href="forms-layouts.html"><span class="mm-text">Layouts</span></a>
</li>
<li>
<a tabindex="-1" href="forms-general.html"><span class="mm-text">General</span></a>
</li>
<li>
<a tabindex="-1" href="forms-advanced.html"><span class="mm-text">Advanced</span></a>
</li>
<li>
<a tabindex="-1" href="forms-pickers.html"><span class="mm-text">Pickers</span></a>
</li>
<li>
<a tabindex="-1" href="forms-validation.html"><span class="mm-text">Validation</span></a>
</li>
<li>
<a tabindex="-1" href="forms-editors.html"><span class="mm-text">Editors</span></a>
</li>
</ul>
</li>
<li>
<a href="tables.html"><i class="menu-icon fa fa-table"></i><span class="mm-text">Tables</span></a>
</li>
<li>
<a href="charts.html"><i class="menu-icon fa fa-bar-chart-o"></i><span class="mm-text">Charts</span></a>
</li>
<li class="mm-dropdown">
<a href="#"><i class="menu-icon fa fa-files-o"></i><span class="mm-text">Pages</span><span class="label label-success">16</span></a>
<ul>
<li>
<a tabindex="-1" href="pages-search.html"><span class="mm-text">Search results</span></a>
</li>
<li>
<a tabindex="-1" href="pages-pricing.html"><span class="mm-text">Plans &amp; pricing</span></a>
</li>
<li>
<a tabindex="-1" href="pages-faq.html"><span class="mm-text">FAQ</span></a>
</li>
<li>
<a tabindex="-1" href="pages-profile.html"><span class="mm-text">Profile</span></a>
</li>
<li>
<a tabindex="-1" href="pages-timeline.html"><span class="mm-text">Timeline</span></a>
</li>
<li>
<a tabindex="-1" href="pages-signin.html"><span class="mm-text">Sign In</span></a>
</li>
<li>
<a tabindex="-1" href="pages-signup.html"><span class="mm-text">Sign Up</span></a>
</li>
<li>
<a tabindex="-1" href="pages-signin-alt.html"><span class="mm-text">Sign In Alt</span></a>
</li>
<li>
<a tabindex="-1" href="pages-signup-alt.html"><span class="mm-text">Sign Up Alt</span></a>
</li>
<li>
<a tabindex="-1" href="pages-invoice.html"><span class="mm-text">Invoice</span></a>
</li>
<li>
<a tabindex="-1" href="pages-404.html"><span class="mm-text">Error 404</span></a>
</li>
<li>
<a tabindex="-1" href="pages-500.html"><span class="mm-text">Error 500</span></a>
</li>
<li class="mm-dropdown">
<a href="#"><i class="menu-icon fa fa-envelope"></i><span class="mm-text">Messages</span></a>
<ul>
<li>
<a tabindex="-1" href="pages-inbox.html"><span class="mm-text">Inbox</span></a>
</li>
<li>
<a tabindex="-1" href="pages-show-email.html"><span class="mm-text">Show message</span></a>
</li>
<li>
<a tabindex="-1" href="pages-new-email.html"><span class="mm-text">New message</span></a>
</li>
</ul>
</li>
<li>
<a tabindex="-1" href="pages-blank.html"><span class="mm-text">Blank page</span></a>
</li>
</ul>
</li>
<li>
<a href="complete-ui.html"><i class="menu-icon fa fa-briefcase"></i><span class="mm-text">Complete UI</span></a>
</li>
<li>
<a href="color-builder.html"><i class="menu-icon fa fa-tint"></i><span class="mm-text">Color Builder</span></a>
</li>
<li class="mm-dropdown">
<a href="#"><i class="menu-icon fa fa-sitemap"></i><span class="mm-text">Menu levels</span><span class="badge badge-primary">6</span></a>
<ul>
<li>
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.1</span><span class="badge badge-danger">12</span><span class="label label-info">21</span></a>
</li>
<li>
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.2</span></a>
</li>
<li class="mm-dropdown">
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.3</span><span class="label label-warning">5</span></a>
<ul>
<li>
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.1</span></a>
</li>
<li class="mm-dropdown">
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
<ul>
<li class="mm-dropdown">
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.1</span></a>
<ul>
<li>
<a tabindex="-1" href="#"><span class="mm-text">Menu level 4.1</span></a>
</li>
</ul>
</li>
<li>
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.2</span></a>
</li>
</ul>
</li>
<li>
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul> <!-- / .navigation -->
<div class="menu-content">
<a href="pages-invoice.html" class="btn btn-primary btn-block btn-outline dark">Create Invoice</a>
</div>
</div> <!-- / #main-menu-inner -->
</div> <!-- / #main-menu -->
<!-- /4. $MAIN_MENU -->
<div id="content-wrapper">
<div class="page-header">
<h1><i class="fa fa-th-large page-header-icon"></i>&nbsp;&nbsp;Widgets</h1>
</div> <!-- / .page-header -->
<div class="row">
<div class="col-md-4">
<!-- 5. $PROFILE_WIDGET_LINKS_EXAMPLE ==============================================================
Profile widget - Links example
-->
<div class="panel panel-success panel-dark widget-profile">
<div class="panel-heading">
<div class="widget-profile-bg-icon"><i class="fa fa-flask"></i></div>
<img src="assets/demo/avatars/2.jpg" alt="" class="widget-profile-avatar">
<div class="widget-profile-header">
<span>Robert Jang</span><br>
email@example.com
</div>
</div> <!-- / .panel-heading -->
<div class="list-group">
<a href="#" class="list-group-item"><i class="fa fa-envelope-o list-group-icon"></i>Inbox messages<span class="badge badge-info">14</span></a>
<a href="#" class="list-group-item"><i class="fa fa-tasks list-group-icon"></i>Uncompleted tasks<span class="badge badge-warning">7</span></a>
<a href="#" class="list-group-item"><i class="fa fa-bell-o list-group-icon"></i>New notifications<span class="badge badge-danger">11</span></a>
<a href="#" class="list-group-item">Account settings</a>
</div>
</div> <!-- / .panel -->
<!-- /5. $PROFILE_WIDGET_LINKS_EXAMPLE -->
</div>
<div class="col-md-4">
<!-- 6. $PROFILE_WIDGET_COUNTERS_EXAMPLE ===========================================================
Profile widget - Counters example
-->
<div class="panel panel-info panel-dark widget-profile">
<div class="panel-heading">
<div class="widget-profile-bg-icon"><i class="fa fa-twitter"></i></div>
<img src="assets/demo/avatars/3.jpg" alt="" class="widget-profile-avatar">
<div class="widget-profile-header">
<span>Michelle Bortz</span><br>
<a href="https://twitter.com/test">https://twitter.com/test</a>
</div>
</div> <!-- / .panel-heading -->
<div class="widget-profile-counters">
<div class="col-xs-4"><span>131</span><br>TWEETS</div>
<div class="col-xs-4"><span>230</span><br>FOLLOWERS</div>
<div class="col-xs-4"><span>56</span><br>FOLLOWING</div>
</div>
<input type="text" placeholder="Write your tweet" class="form-control input-lg widget-profile-input">
<div class="widget-profile-text">
Lorem ipsum dolor sit amet
</div>
</div> <!-- / .panel -->
<!-- /6. $PROFILE_WIDGET_COUNTERS_EXAMPLE -->
</div>
<div class="col-md-4">
<!-- 7. $PROFILE_WIDGET_CENTERED_EXAMPLE ===========================================================
Profile widget - Centered example
-->
<div class="panel panel-danger panel-dark panel-body-colorful widget-profile widget-profile-centered">
<div class="panel-heading">
<img src="assets/demo/avatars/1.jpg" alt="" class="widget-profile-avatar">
<div class="widget-profile-header">
<span>John Doe</span><br>
<a href="https://twitter.com/test">https://twitter.com/test</a>
</div>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="widget-profile-text" style="padding: 0;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div> <!-- / .panel -->
<!-- /7. $PROFILE_WIDGET_CENTERED_EXAMPLE -->
</div>
</div> <!-- / .row -->
<div class="row">
<div class="col-md-6">
<!-- 8. $MESSAGES_LIST_ALT =========================================================================
Alt messages list
-->
<div class="panel widget-messages-alt">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-envelope"></i>Alt Messages List</span>
</div> <!-- / .panel-heading -->
<div class="panel-body padding-sm">
<div class="messages-list">
<div class="message">
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<div class="message-description">
from <a href="#">Robert Jang</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div> <!-- / .message-description -->
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
<div class="message-description">
from <a href="#">Michelle Bortz</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div> <!-- / .message-description -->
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
<div class="message-description">
from <a href="#">Timothy Owens</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div> <!-- / .message-description -->
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
<div class="message-description">
from <a href="#">Denise Steiner</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div> <!-- / .message-description -->
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
<div class="message-description">
from <a href="#">Robert Jang</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div> <!-- / .message-description -->
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
<div class="message-description">
from <a href="#">Michelle Bortz</a>
&nbsp;&nbsp;·&nbsp;&nbsp;
2h ago
</div> <!-- / .message-description -->
</div> <!-- / .message -->
</div> <!-- / .messages-list -->
<a href="#" class="messages-link">MORE MESSAGES</a>
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /8. $MESSAGES_LIST_ALT -->
<!-- 9. $MESSAGES_LIST =============================================================================
Messages list
-->
<div class="panel widget-messages">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-envelope-o"></i>Messages</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="message unread">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px" checked="checked"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Robert Jang</a>
<a href="#" title="" class="title">Message Title 1</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message unread">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Michelle Bortz</a>
<a href="#" title="" class="title"><i class="message-title-icon fa fa-paperclip"></i>Message Title 2</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px" checked="checked"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Timothy Owens</a>
<a href="#" title="" class="title">Message Title 3</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Denise Steiner</a>
<a href="#" title="" class="title">Message Title 4</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Robert Jang</a>
<a href="#" title="" class="title">Message Title 5</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Michelle Bortz</a>
<a href="#" title="" class="title">Message Title 6</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Timothy Owens</a>
<a href="#" title="" class="title">Message Title 7</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Denise Steiner</a>
<a href="#" title="" class="title">Message Title 8</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
<div class="message">
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" title="" class="from">Robert Jang</a>
<a href="#" title="" class="title">Message Title 9</a>
<div class="date">
18 jan
</div>
</div> <!-- / .message -->
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /9. $MESSAGES_LIST -->
<!-- 10. $SUPPORT_TICKETS ==========================================================================
Support tickets
-->
<div class="panel widget-support-tickets">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-bullhorn"></i>Support Tickets</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="ticket">
<span class="label label-success ticket-label">Completed</span>
<a href="#" title="" class="ticket-title">Server unavaible<span>[#201798]</span></a>
<span class="ticket-info">
Opened by <a href="#" title="">Timothy Owens</a> today
</span>
</div> <!-- / .ticket -->
<div class="ticket">
<span class="label label-warning ticket-label">Pending</span>
<a href="#" title="" class="ticket-title">Mobile App Problem<span>[#201797]</span></a>
<span class="ticket-info">
Opened by <a href="#">Denise Steiner</a> 2 days ago
</span>
</div> <!-- / .ticket -->
<div class="ticket">
<span class="label label-info ticket-label">In progress</span>
<a href="#" title="" class="ticket-title">
<i class="fa fa-warning text-danger"></i>PayPal issue<span>[#201796]</span>
</a>
<span class="ticket-info">
Opened by <a href="#">Robert Jang</a> 3 days ago
</span>
</div> <!-- / .ticket -->
<div class="ticket">
<span class="label label-danger ticket-label">Rejected</span>
<a href="#" title="" class="ticket-title">IE8 problem<span>[#201795]</span></a>
<span class="ticket-info">
Opened by <a href="#">Robert Jang</a> 4 days ago
</span>
</div> <!-- / .ticket -->
<div class="ticket">
<span class="label label-success ticket-label">Completed</span>
<a href="#" title="" class="ticket-title">Server unavaible<span>[#201794]</span></a>
<span class="ticket-info">
Opened by <a href="#">Timothy Owens</a> 5 days ago
</span>
</div> <!-- / .ticket -->
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /10. $SUPPORT_TICKETS -->
<!-- 11. $THREADS ==================================================================================
Threads
-->
<div class="panel widget-threads">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-comments-o"></i>Last threads</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="thread">
<img src="assets/demo/avatars/2.jpg" alt="" class="thread-avatar">
<div class="thread-body">
<span class="thread-time">14h</span>
<a href="#" class="thread-title">Lorem ipsum dolor sit amet</a>
<div class="thread-info">started by <a href="#" title="">Robert Jang</a> in <a href="#" title="">Forum name</a></div>
</div> <!-- / .thread-body -->
</div> <!-- / .thread -->
<div class="thread">
<img src="assets/demo/avatars/3.jpg" alt="" class="thread-avatar">
<div class="thread-body">
<span class="thread-time">14h</span>
<a href="#" class="thread-title">Lorem ipsum dolor sit amet</a>
<div class="thread-info">started by <a href="#" title="">Michelle Bortz</a> in <a href="#" title="">Forum name</a></div>
</div> <!-- / .thread-body -->
</div> <!-- / .thread -->
<div class="thread">
<img src="assets/demo/avatars/4.jpg" alt="" class="thread-avatar">
<div class="thread-body">
<span class="thread-time">14h</span>
<a href="#" class="thread-title">Lorem ipsum dolor sit amet</a>
<div class="thread-info">started by <a href="#" title="">Timothy Owens</a> in <a href="#" title="">Forum name</a></div>
</div> <!-- / .thread-body -->
</div> <!-- / .thread -->
<div class="thread">
<img src="assets/demo/avatars/5.jpg" alt="" class="thread-avatar">
<div class="thread-body">
<span class="thread-time">14h</span>
<a href="#" class="thread-title">Lorem ipsum dolor sit amet</a>
<div class="thread-info">started by <a href="#" title="">Denise Steiner</a> in <a href="#" title="">Forum name</a></div>
</div> <!-- / .thread-body -->
</div> <!-- / .thread -->
<div class="thread">
<img src="assets/demo/avatars/2.jpg" alt="" class="thread-avatar">
<div class="thread-body">
<span class="thread-time">14h</span>
<a href="#" class="thread-title">Lorem ipsum dolor sit amet</a>
<div class="thread-info">started by <a href="#" title="">Robert Jang</a> in <a href="#" title="">Forum name</a></div>
</div> <!-- / .thread-body -->
</div> <!-- / .thread -->
<div class="thread">
<img src="assets/demo/avatars/3.jpg" alt="" class="thread-avatar">
<div class="thread-body">
<span class="thread-time">14h</span>
<a href="#" class="thread-title">Lorem ipsum dolor sit amet</a>
<div class="thread-info">started by <a href="#" title="">Michelle Bortz</a> in <a href="#" title="">Forum name</a></div>
</div> <!-- / .thread-body -->
</div> <!-- / .thread -->
<div class="thread">
<img src="assets/demo/avatars/4.jpg" alt="" class="thread-avatar">
<div class="thread-body">
<span class="thread-time">14h</span>
<a href="#" class="thread-title">Lorem ipsum dolor sit amet</a>
<div class="thread-info">started by <a href="#" title="">Timothy Owens</a> in <a href="#" title="">Forum name</a></div>
</div> <!-- / .thread-body -->
</div> <!-- / .thread -->
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /11. $THREADS -->
<!-- 12. $CHAT =====================================================================================
Chat
-->
<!-- Javascript -->
<script>
init.push(function () {
$(".chat-controls-input .form-control").autosize();
});
</script>
<!-- / Javascript -->
<div class="panel widget-chat">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-comments-o"></i>Chat</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="message">
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
<div class="message-body">
<div class="message-heading">
<a href="#" title="">Denise Steiner</a> says:
<span class="pull-right">2 minutes ago</span>
</div>
<div class="message-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div> <!-- / .message-body -->
</div> <!-- / .message -->
<div class="message right">
<img src="assets/demo/avatars/1.jpg" alt="" class="message-avatar">
<div class="message-body">
<div class="message-heading">
<a href="#" title="">John Doe</a> says:
<span class="pull-right">2 minutes ago</span>
</div>
<div class="message-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div> <!-- / .message-body -->
</div> <!-- / .message -->
<div class="message right">
<img src="assets/demo/avatars/1.jpg" alt="" class="message-avatar">
<div class="message-body">
<div class="message-heading">
<a href="#" title="">John Doe</a> says:
<span class="pull-right">2 minutes ago</span>
</div>
<div class="message-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div> <!-- / .message-body -->
</div> <!-- / .message -->
<div class="message">
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
<div class="message-body">
<div class="message-heading">
<a href="#" title="">Denise Steiner</a> says:
<span class="pull-right">2 minutes ago</span>
</div>
<div class="message-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div> <!-- / .message-body -->
</div> <!-- / .message -->
<div class="message right">
<img src="assets/demo/avatars/1.jpg" alt="" class="message-avatar">
<div class="message-body">
<div class="message-heading">
<a href="#" title="">John Doe</a> says:
<span class="pull-right">2 minutes ago</span>
</div>
<div class="message-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
</div> <!-- / .message-body -->
</div> <!-- / .message -->
</div> <!-- / .panel-body -->
<form class="panel-footer chat-controls">
<div class="chat-controls-input">
<textarea rows="1" class="form-control"></textarea>
</div>
<button class="btn btn-primary chat-controls-btn">Send</button>
</form> <!-- / .panel-footer -->
</div> <!-- / .panel -->
<!-- /12. $CHAT -->
</div>
<div class="col-md-6">
<!-- 13. $NOTIFICATIONS ============================================================================
Notifications
-->
<div class="panel widget-notifications">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-fire"></i>Notifications</span>
</div> <!-- / .panel-heading -->
<div class="panel-body padding-sm">
<div class="notifications-list">
<div class="notification">
<div class="notification-title text-danger">SYSTEM</div>
<div class="notification-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-hdd-o bg-danger"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-info">STORE</div>
<div class="notification-description">You have <strong>9</strong> new orders.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-truck bg-info"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-default">CRON DAEMON</div>
<div class="notification-description">Job <strong>"Clean DB"</strong> has been completed.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-clock-o bg-default"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-success">SYSTEM</div>
<div class="notification-description">Server <strong>up</strong>.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-hdd-o bg-success"></div>
</div> <!-- / .notification -->
<div class="notification">
<div class="notification-title text-warning">SYSTEM</div>
<div class="notification-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
<div class="notification-ago">12h ago</div>
<div class="notification-icon fa fa-hdd-o bg-warning"></div>
</div> <!-- / .notification -->
</div>
<a href="#" class="notifications-link">MORE NOTIFICATIONS</a>
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /13. $NOTIFICATIONS -->
<!-- 14. $TASKS ====================================================================================
Tasks
-->
<!-- Javascript -->
<script>
init.push(function () {
$('.widget-tasks .panel-body').pixelTasks().sortable({
axis: "y",
handle: ".task-sort-icon",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( ".task-sort-icon" ).triggerHandler( "focusout" );
}
});
$('#clear-completed-tasks').click(function () {
$('.widget-tasks .panel-body').pixelTasks('clearCompletedTasks');
});
});
</script>
<!-- / Javascript -->
<div class="panel widget-tasks">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-tasks"></i>Tasks</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="task">
<span class="label label-warning pull-right">High</span>
<div class="fa fa-arrows-v task-sort-icon"></div>
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" class="task-title">A very important task<span>1 hour left</span></a>
</div> <!-- / .task -->
<div class="task completed">
<span class="label label-warning pull-right">High</span>
<div class="fa fa-arrows-v task-sort-icon"></div>
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px" checked="checked"><span class="lbl"></span></label>
</div>
<a href="#" class="task-title">A very important task<span>58 minutes left</span></a>
</div> <!-- / .task -->
<div class="task completed">
<div class="fa fa-arrows-v task-sort-icon"></div>
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px" checked="checked"><span class="lbl"></span></label>
</div>
<a href="#" class="task-title">A regular task</a>
</div> <!-- / .task -->
<div class="task">
<div class="fa fa-arrows-v task-sort-icon"></div>
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" class="task-title">A regular task</a>
</div> <!-- / .task -->
<div class="task">
<div class="fa fa-arrows-v task-sort-icon"></div>
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" class="task-title">A regular task</a>
</div> <!-- / .task -->
<div class="task">
<span class="label pull-right">Low</span>
<div class="fa fa-arrows-v task-sort-icon"></div>
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" class="task-title">An unimportant task</a>
</div> <!-- / .task -->
<div class="task">
<span class="label pull-right">Low</span>
<div class="fa fa-arrows-v task-sort-icon"></div>
<div class="action-checkbox">
<label class="px-single"><input type="checkbox" name="" value="" class="px"><span class="lbl"></span></label>
</div>
<a href="#" class="task-title">An unimportant task</a>
</div> <!-- / .task -->
</div> <!-- / .panel-body -->
<div class="panel-footer clearfix">
<div class="pull-right">
<button class="btn btn-xs" id="clear-completed-tasks"><i class="fa fa-eraser text-success"></i> Clear completed tasks</button>
</div>
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /14. $TASKS -->
<!-- 15. $RATING ===================================================================================
Rating
-->
<!-- Javascript -->
<script>
init.push(function () {
var current_rating = 3.4;
$('#current-rating-example').text(current_rating);
$('#stars-rating-example').pixelRating({
rating: current_rating,
onRatingChange: function (value) {
$('#your-rating-example').text(value);
}
});
$('#set-rating-example').click(function(){
$('#stars-rating-example').pixelRating('setRating', 2.3);
$('#current-rating-example').text(2.3);
});
});
</script>
<!-- / Javascript -->
<div class="panel widget-tasks">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-star-o"></i>Rating</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<span id="stars-rating-example"></span>&nbsp;&nbsp;&nbsp;
Current rating: <strong id="current-rating-example">0</strong>&nbsp;&nbsp;&nbsp;
Your rating: <strong id="your-rating-example">0</strong><br><br>
<button id="set-rating-example" class="btn btn-xs">Set current rating = 2.3</button>
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /15. $RATING -->
<!-- 16. $COMMENTS =================================================================================
Comments
-->
<div class="panel widget-comments">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-comment-o"></i>Last comments</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="comment">
<img src="assets/demo/avatars/5.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-by">
<a href="#" title="">Denise Steiner</a> commented on <a href="#" title="">Article Name</a>
</div>
<div class="comment-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-actions">
<a href="#"><i class="fa fa-pencil"></i>Edit</a>
<a href="#"><i class="fa fa-times"></i>Remove</a>
<span class="pull-right">2 hours ago</span>
</div>
</div> <!-- / .comment-body -->
</div> <!-- / .comment -->
<div class="comment">
<img src="assets/demo/avatars/3.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-by">
<a href="#" title="">Michelle Bortz</a> commented on <a href="#" title="">Article Name</a>
</div>
<div class="comment-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-actions">
<a href="#"><i class="fa fa-pencil"></i>Edit</a>
<a href="#"><i class="fa fa-times"></i>Remove</a>
<span class="pull-right">2 hours ago</span>
</div>
</div> <!-- / .comment-body -->
</div> <!-- / .comment -->
<div class="comment">
<img src="assets/demo/avatars/2.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-by">
<a href="#" title="">Robert Jang</a> commented on <a href="#" title="">Article Name</a>
</div>
<div class="comment-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-actions">
<a href="#"><i class="fa fa-pencil"></i>Edit</a>
<a href="#"><i class="fa fa-times"></i>Remove</a>
<span class="pull-right">2 hours ago</span>
</div>
</div> <!-- / .comment-body -->
</div> <!-- / .comment -->
<div class="comment">
<img src="assets/demo/avatars/4.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-by">
<a href="#" title="">Timothy Owens</a> commented on <a href="#" title="">Article Name</a>
</div>
<div class="comment-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-actions">
<a href="#"><i class="fa fa-pencil"></i>Edit</a>
<a href="#"><i class="fa fa-times"></i>Remove</a>
<span class="pull-right">2 hours ago</span>
</div>
</div> <!-- / .comment-body -->
</div> <!-- / .comment -->
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /16. $COMMENTS -->
<!-- 17. $ARTICLE_COMMENTS =========================================================================
Article comments
-->
<!-- Javascript -->
<script>
init.push(function () {
$(".article-comments-add").expandingInput({
target: 'textarea',
hidden_content: '> div',
placeholder: 'Write comment',
onAfterExpand: function () {
this.$target.attr('rows', 2);
this.$target.removeClass('input-sm');
this.$target.autosize();
}
});
});
</script>
<!-- / Javascript -->
<div class="panel widget-article-comments">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-comment"></i>Article comments</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="comment">
<img src="assets/demo/avatars/2.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-text">
<div class="comment-heading">
<a href="#" title="">Robert Jang</a><span>14 hours ago</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-footer">
<a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
<a href="#"><i class="fa fa-thumbs-o-down"></i></a>
&nbsp;&nbsp;·&nbsp;&nbsp;
<a href="#">Reply</a>
</div>
</div> <!-- / .comment-body -->
<div class="comment">
<img src="assets/demo/avatars/4.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-text">
<div class="comment-heading">
<a href="#" title="">Timothy Owens</a><span>14 hours ago</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-footer">
<a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
<a href="#"><i class="fa fa-thumbs-o-down"></i></a>
&nbsp;&nbsp;·&nbsp;&nbsp;
<a href="#">Reply</a>
</div>
</div> <!-- / .comment-body -->
</div> <!-- / .comment -->
<div class="comment">
<img src="assets/demo/avatars/5.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-text">
<div class="comment-heading">
<a href="#" title="">Denise Steiner</a><span>14 hours ago</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-footer">
<a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
<a href="#"><i class="fa fa-thumbs-o-down"></i></a>
&nbsp;&nbsp;·&nbsp;&nbsp;
<a href="#">Reply</a>
</div>
</div> <!-- / .comment-body -->
<div class="comment">
<img src="assets/demo/avatars/1.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-text">
<div class="comment-heading">
<a href="#" title="">John Doe</a><span>14 hours ago</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="comment-footer">
<a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
<a href="#"><i class="fa fa-thumbs-o-down"></i></a>
&nbsp;&nbsp;·&nbsp;&nbsp;
<a href="#">Reply</a>
</div>
</div> <!-- / .comment-body -->
</div> <!-- / .comment -->
</div> <!-- / .comment -->
</div> <!-- / .comment -->
<div class="comment">
<img src="assets/demo/avatars/3.jpg" alt="" class="comment-avatar">
<div class="comment-body">
<div class="comment-text">
<div class="comment-heading">
<a href="#" title="">Michelle Bortz</a><span>14 hours ago</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<div class="comment-footer">
<a href="#"><i class="fa fa-thumbs-o-up"></i></a>&nbsp;&nbsp;
<a href="#"><i class="fa fa-thumbs-o-down"></i></a>
&nbsp;&nbsp;·&nbsp;&nbsp;
<a href="#">Reply</a>
</div>
</div> <!-- / .comment-body -->
</div> <!-- / .comment -->
</div> <!-- / .panel-body -->
<div class="panel-footer clearfix">
<div class="article-comments-add">
<textarea rows="1" class="form-control input-sm"></textarea>
<div class="expanding-input-hidden" style="margin-top: 10px;">
<button class="btn btn-sm btn-primary pull-right">Post comment</button>
</div>
</div>
</div> <!-- / .panel-footer -->
</div> <!-- / .panel -->
<!-- /17. $ARTICLE_COMMENTS -->
<!-- 18. $FOLLOWERS ================================================================================
Followers
-->
<div class="panel widget-followers">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-check"></i>Followers</span>
</div> <!-- / .panel-heading -->
<div class="panel-body">
<div class="follower">
<img src="assets/demo/avatars/2.jpg" alt="" class="follower-avatar">
<div class="body">
<div class="follower-controls">
<a href="#" class="btn btn-sm btn-success"><i class="fa fa-check"></i><span>&nbsp;&nbsp;Following</span></a>
</div>
<a href="#" class="follower-name">Robert Jang</a><br>
<a href="#" class="follower-username">@rjang</a>
</div>
</div>
<div class="follower">
<img src="assets/demo/avatars/3.jpg" alt="" class="follower-avatar">
<div class="body">
<div class="follower-controls">
<a href="#" class="btn btn-sm btn-outline">Follow</a>
</div>
<a href="#" class="follower-name">Michelle Bortz</a><br>
<a href="#" class="follower-username">@mbortz</a>
</div>
</div>
<div class="follower">
<img src="assets/demo/avatars/4.jpg" alt="" class="follower-avatar">
<div class="body">
<div class="follower-controls">
<a href="#" class="btn btn-sm btn-outline">Follow</a>
</div>
<a href="#" class="follower-name">Timothy Owens</a><br>
<a href="#" class="follower-username">@towens</a>
</div>
</div>
<div class="follower">
<img src="assets/demo/avatars/5.jpg" alt="" class="follower-avatar">
<div class="body">
<div class="follower-controls">
<a href="#" class="btn btn-sm btn-outline">Follow</a>
</div>
<a href="#" class="follower-name">Denise Steiner</a><br>
<a href="#" class="follower-username">@dsteiner</a>
</div>
</div>
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /18. $FOLLOWERS -->
</div>
</div> <!-- / .row -->
<div class="row">
<div class="col-xs-12">
<!-- 19. $GOOGLE_MAPS_WIDGET =======================================================================
Google maps widget
-->
<!-- Javascript -->
<script>
init.push(function () {
// Google Maps docs - https://developers.google.com/maps/documentation/javascript/examples/map-simple
var map = new google.maps.Map(document.getElementById('widget-maps-example'), {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
<!-- / Javascript -->
<div class="panel">
<div class="panel-heading">
<span class="panel-title"><i class="panel-title-icon fa fa-map-marker"></i>Google Maps</span>
</div> <!-- / .panel-heading -->
<div class="panel-body" style="position:relative;height: 300px;">
<div class="widget-maps" id="widget-maps-example"></div>
</div> <!-- / .panel-body -->
</div> <!-- / .panel -->
<!-- /19. $GOOGLE_MAPS_WIDGET -->
</div>
</div> <!-- / .row -->
</div> <!-- / #content-wrapper -->
<div id="main-menu-bg"></div>
</div> <!-- / #main-wrapper -->
<!-- Get jQuery from Google CDN -->
<!--[if !IE]> -->
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">'+"<"+"/script>"); </script>
<!-- <![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
<![endif]-->
<!-- Pixel Admin's javascripts -->
<script src="assets/javascripts/bootstrap.min.js"></script>
<script src="assets/javascripts/pixel-admin.min.js"></script>
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
init.push(function () {
// Javascript code here
})
window.PixelAdmin.start(init);
</script>
</body>
</html>