you get lettest content at a time when data will updated
Automaticaly take backup as par schedule
Allow to show public user message
.layout-8 class in <body> tag.
<body class="layout-8">
</body>
dir="rtl" attribute in html tag.
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
<div class="navbar-wrapper container">
.................
<ul class="navbar-nav ml-auto">
<li>
<div class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right notification">
<div class="noti-head">
<h6 class="d-inline-block m-b-0">Notifications</h6>
<div class="float-right">
<a href="#!" class="m-r-10">mark as read</a>
<a href="#!">clear all</a>
</div>
</div>
<ul class="noti-body">
<li class="n-title">
<p class="m-b-0">NEW</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
<p>New ticket Added</p>
</div>
</div>
</li>
<li class="n-title">
<p class="m-b-0">EARLIER</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>1 hour</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>2 hour</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
</ul>
<div class="noti-footer">
<a href="#!">show all</a>
</div>
</div>
</div>
</li>
<li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
<li>
<div class="dropdown drp-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification">
<div class="pro-head">
<img src="../assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
<span>John Doe</span>
<a href="auth-signin.html" class="dud-logout" title="Logout">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
<li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
<li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
<li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<!-- [ navigation menu ] end -->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 10]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="keywords" content="">
<meta name="author" content="" />
<!-- Favicon icon -->
<link rel="icon" href="../assets/images/favicon.ico" type="image/x-icon">
<!-- fontawesome icon -->
<link rel="stylesheet" href="../assets/fonts/fontawesome/css/fontawesome-all.min.css">
<!-- animation css -->
<link rel="stylesheet" href="../assets/plugins/animation/css/animate.min.css">
<!-- vendor css -->
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body class="layout-8">
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar theme-horizontal">
<div class="navbar-wrapper container">
<div class="navbar-brand header-logo">
<a href="index.html" class="b-brand">
<div class="b-bg">
E
</div>
<span class="b-title">Elite Able</span>
</a>
<a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
</div>
<div class="navbar-content sidenav-horizontal" id="layout-sidenav">
<ul class="nav pcoded-inner-navbar sidenav-inner">
<li class="nav-item pcoded-menu-caption">
<label>Navigation</label>
</li>
<li data-username="dashboard Default Ecommerce CRM Analytics Crypto Project" class="nav-item pcoded-hasmenu">
<a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-home"></i></span><span class="pcoded-mtext">Dashboard</span></a>
<ul class="pcoded-submenu">
<li class=""><a href="index.html" class="">Analytics</a></li>
<li class=""><a href="dashboard-sale.html" class="">Sales</a></li>
<li class=""><a href="dashboard-crypto.html" class="">Crypto</a></li>
</ul>
</li>
<li data-username="Vertical Horizontal Box Layout RTL fixed static collapse menu color icon dark" class="nav-item pcoded-hasmenu">
<a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layout"></i></span><span class="pcoded-mtext">Page layouts</span></a>
<ul class="pcoded-submenu">
<li class="pcoded-hasmenu"><a href="#!" class="">Vertical</a>
<ul class="pcoded-submenu">
<li class=""><a href="layout-static.html" class="" target="_blank">Static</a></li>
<li class=""><a href="layout-fixed.html" class="" target="_blank">Fixed</a></li>
<li class=""><a href="layout-menu-fixed.html" class="" target="_blank">Navbar fixed</a></li>
<li class=""><a href="layout-mini-menu.html" class="" target="_blank">Collapse menu</a></li>
</ul>
</li>
<li class=""><a href="layout-horizontal.html" class="" target="_blank">Horizontal</a></li>
<li class=""><a href="layout-box.html" class="" target="_blank">Box layout</a></li>
<li class=""><a href="layout-rtl.html" class="" target="_blank">RTL</a></li>
<li class=""><a href="layout-light.html" class="" target="_blank">Light layout</a></li>
<li class=""><a href="layout-dark.html" class="" target="_blank">Dark layout <span class="pcoded-badge label label-danger">Hot</span></a></li>
<li class=""><a href="layout-menu-icon.html" class="" target="_blank">Color icon</a></li>
</ul>
</li>
<li data-username="widget Statistic Data Table User card Chart" class="nav-item pcoded-hasmenu">
<a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layers"></i></span><span class="pcoded-mtext">Widget</span><span class="pcoded-badge label label-info">100+</span></a>
<ul class="pcoded-submenu">
<li class=""><a href="widget-statistic.html" class="">Statistic</a></li>
<li class=""><a href="widget-data.html" class="">Data</a></li>
<li class=""><a href="widget-chart.html" class="">Chart</a></li>
</ul>
</li>
<li class="nav-item pcoded-menu-caption">
<label>UI Element</label>
</li>
<li data-username="basic components Button Alert Badges breadcrumb Paggination progress Tooltip popovers Carousel Cards Collapse Tabs pills Modal Grid System Typography Extra Shadows Embeds" class="nav-item pcoded-hasmenu">
<a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-box"></i></span><span class="pcoded-mtext">Basic</span></a>
<ul class="pcoded-submenu">
<li class=""><a href="bc_alert.html" class="">Alert</a></li>
<li class=""><a href="bc_button.html" class="">Button</a></li>
<li class=""><a href="bc_badges.html" class="">Badges</a></li>
<li class=""><a href="bc_breadcrumb-pagination.html" class="">Breadcrumb & Paggination</a></li>
<li class=""><a href="bc_card.html" class="">Cards</a></li>
<li class=""><a href="bc_collapse.html" class="">Collapse</a></li>
<li class=""><a href="bc_carousel.html" class="">Carousel</a></li>
<li class=""><a href="bc_grid.html" class="">Grid System</a></li>
<li class=""><a href="bc_progress.html" class="">Progress</a></li>
<li class=""><a href="bc_modal.html" class="">Modal</a></li>
<li class=""><a href="bc_spinner.html" class="">Spinner<span class="pcoded-badge label label-danger">NEW</span></a></li>
<li class=""><a href="bc_tabs.html" class="">Tabs & pills</a></li>
<li class=""><a href="bc_typography.html" class="">Typography</a></li>
<li class=""><a href="bc_tooltip-popover.html" class="">Tooltip & popovers</a></li>
<li class=""><a href="bc_toasts.html" class="">Toasts<span class="pcoded-badge label label-danger">NEW</span></a></li>
<li class=""><a href="bc_extra.html" class="">Other</a></li>
</ul>
</li>
<li data-username="advance components Alert gridstack lightbox modal notification pnotify rating rangeslider slider syntax highlighter Tour Tree view Nestable Toolbar" class="nav-item pcoded-hasmenu">
<a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-gitlab"></i></span><span class="pcoded-mtext">Advance</span></a>
<ul class="pcoded-submenu">
<li class=""><a href="ac_alert.html" class="">Sweet alert</a></li>
<li class=""><a href="ac-datepicker-componant.html" class="">Datepicker</a></li>
<li class=""><a href="ac_gridstack.html" class="">Gridstack</a></li>
<li class=""><a href="ac_lightbox.html" class="">Lightbox</a></li>
<li class=""><a href="ac_modal.html" class="">Modal</a></li>
<li class=""><a href="ac_notification.html" class="">Notification</a></li>
<li class=""><a href="ac_nestable.html" class="">Nestable</a></li>
<li class=""><a href="ac_pnotify.html" class="">pnotify</a></li>
<li class=""><a href="ac_rating.html" class="">Rating</a></li>
<li class=""><a href="ac_rangeslider.html" class="">Rangeslider</a></li>
<li class=""><a href="ac_slider.html" class="">Slider</a></li>
<li class=""><a href="ac_syntax_highlighter.html" class="">Syntax highlighter</a></li>
<li class=""><a href="ac_tour.html" class="">Tour</a></li>
<li class=""><a href="ac_treeview.html" class="">Tree view</a></li>
<li class=""><a href="ac_toolbar.html" class="">Toolbar</a></li>
</ul>
</li>
<li data-username="extra components Session Timeout Session Idle Timeout Offline" class="nav-item pcoded-hasmenu">
<a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-package"></i></span><span class="pcoded-mtext">Extra</span></a>
<ul class="pcoded-submenu">
<li class=""><a href="ec-session-timeout.html" class="">Session timeout</a></li>
<li class=""><a href="ec-session-idle-timeout.html" class="">Session idle timeout</a></li>
<li class=""><a href="ec-offline.html" class="">Offline</a></li>
</ul>
</li>
</ul>
</div>
<ul class="navbar-nav ml-auto">
<li>
<div class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right notification">
<div class="noti-head">
<h6 class="d-inline-block m-b-0">Notifications</h6>
<div class="float-right">
<a href="#!" class="m-r-10">mark as read</a>
<a href="#!">clear all</a>
</div>
</div>
<ul class="noti-body">
<li class="n-title">
<p class="m-b-0">NEW</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
<p>New ticket Added</p>
</div>
</div>
</li>
<li class="n-title">
<p class="m-b-0">EARLIER</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>1 hour</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>2 hour</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
</ul>
<div class="noti-footer">
<a href="#!">show all</a>
</div>
</div>
</div>
</li>
<li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
<li>
<div class="dropdown drp-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification">
<div class="pro-head">
<img src="../assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
<span>John Doe</span>
<a href="auth-signin.html" class="dud-logout" title="Logout">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
<li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
<li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
<li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<!-- [ navigation menu ] end -->
<!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg navbar-light">
<div class="container">
<div class="m-header">
<a class="mobile-menu" id="mobile-collapse1" href="#!"><span></span></a>
<a href="index.html" class="b-brand">
<div class="b-bg">
E
</div>
<span class="b-title">Elite Able</span>
</a>
</div>
<a class="mobile-menu" id="mobile-header" href="#!">
<i class="feather icon-more-horizontal"></i>
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<div class="main-search">
<div class="input-group">
<input type="text" id="m-search" class="form-control" placeholder="Search . . .">
<a href="#!" class="input-group-append search-close">
<i class="feather icon-x input-group-text"></i>
</a>
<span class="input-group-append search-btn btn btn-primary">
<i class="feather icon-search input-group-text"></i>
</span>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<div class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right notification">
<div class="noti-head">
<h6 class="d-inline-block m-b-0">Notifications</h6>
<div class="float-right">
<a href="#!" class="m-r-10">mark as read</a>
<a href="#!">clear all</a>
</div>
</div>
<ul class="noti-body">
<li class="n-title">
<p class="m-b-0">NEW</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
<p>New ticket Added</p>
</div>
</div>
</li>
<li class="n-title">
<p class="m-b-0">EARLIER</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>1 hour</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>2 hour</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
</ul>
<div class="noti-footer">
<a href="#!">show all</a>
</div>
</div>
</div>
</li>
<li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
<li>
<div class="dropdown drp-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification">
<div class="pro-head">
<img src="../assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
<span>John Doe</span>
<a href="auth-signin.html" class="dud-logout" title="Logout">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
<li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
<li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
<li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</header>
<!-- [ Header ] end -->
<!-- [ chat user list ] start -->
<section class="header-user-list">
<a href="#!" class="h-close-text"><i class="feather icon-x"></i></a>
<ul class="nav nav-tabs" id="chatTab" role="tablist">
<li class="nav-item">
<a class="nav-link active text-uppercase" id="chat-tab" data-toggle="tab" href="#chat" role="tab" aria-controls="chat" aria-selected="true"><i class="feather icon-message-circle mr-2"></i>Chat</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="false"><i class="feather icon-users mr-2"></i>User</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" id="setting-tab" data-toggle="tab" href="#setting" role="tab" aria-controls="setting" aria-selected="false"><i class="feather icon-settings mr-2"></i>Setting</a>
</li>
</ul>
<div class="tab-content" id="chatTabContent">
<div class="tab-pane fade show active" id="chat" role="tabpanel" aria-labelledby="chat-tab">
<div class="h-list-header">
<div class="input-group">
<input type="text" id="search-friends" class="form-control" placeholder="Search Friend . . .">
</div>
</div>
<div class="h-list-body">
<div class="main-friend-cont scroll-div">
<div class="main-friend-list">
<div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
<div class="live-status">3</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
</div>
</div>
<div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
<div class="live-status">3</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
</div>
</div>
<div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
<div class="live-status">3</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
</div>
</div>
<div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
<div class="h-list-body">
<div class="main-friend-cont scroll-div">
<div class="main-friend-list">
<div class="media px-3 d-flex align-items-center mt-3">
<a class="media-left m-r-15" href="#!">
<div class="hei-50 wid-50 bg-primary img-radius d-flex text-white f-22 align-items-center justify-content-center"><i class="icon feather icon-users"></i></div>
</a>
<div class="media-body">
<p class="chat-header f-w-600 mb-0">New Group</p>
</div>
</div>
<div class="media p-3 d-flex align-items-center">
<a class="media-left m-r-15" href="#!">
<div class="hei-50 wid-50 bg-primary img-radius d-flex text-white f-22 align-items-center justify-content-center"><i class="icon feather icon-user-plus"></i></div>
</a>
<div class="media-body">
<p class="chat-header f-w-600 mb-0">New Contact</p>
</div>
</div>
<div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image "></a>
<div class="media-body">
<p class="chat-header">Josephin Doe<small class="d-block">i am not what happened . .</small></p>
</div>
</div>
<div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block">Avalable</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block">hear using Elite able</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
<a class="media-left" href="#!">
<div class="hei-50 wid-50 img-radius bg-success d-flex text-white f-22 align-items-center justify-content-center">A</div>
</a>
<div class="media-body">
<h6 class="chat-header">Alia<small class="d-block text-muted">Avalable</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Suzen<small class="d-block text-muted">Avalable</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="#!">
<div class="hei-50 wid-50 bg-danger img-radius d-flex text-white f-22 align-items-center justify-content-center">JD</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-muted">Don't send me image</small></h6>
</div>
</div>
<div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-muted">not send free msg</small></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="setting" role="tabpanel" aria-labelledby="setting-tab">
<div class="p-4 main-friend-cont scroll-div">
<h6 class="mt-2"><i class="feather icon-monitor mr-2"></i>Desktop settings</h6>
<hr>
<div class="form-group mb-0">
<div class="switch switch-primary d-inline m-r-10">
<input type="checkbox" id="cn-p-1" checked>
<label for="cn-p-1" class="cr"></label>
</div>
<label class="f-w-600">Allow desktop notification</label>
</div>
<p class="text-muted ml-5">you get lettest content at a time when data will updated</p>
<div class="form-group mb-0">
<div class="switch switch-primary d-inline m-r-10">
<input type="checkbox" id="cn-p-5">
<label for="cn-p-5" class="cr"></label>
</div>
<label class="f-w-600">Store Cookie</label>
</div>
<h6 class="mb-0 mt-5"><i class="feather icon-layout mr-2"></i>Application settings</h6>
<hr>
<div class="form-group mb-0">
<div class="switch switch-primary d-inline m-r-10">
<input type="checkbox" id="cn-p-3" checked>
<label for="cn-p-3" class="cr"></label>
</div>
<label class="f-w-600">Backup Storage</label>
</div>
<p class="text-muted mb-0 ml-5">Automaticaly take backup as par schedule</p>
<div class="form-group mb-4">
<div class="switch switch-primary d-inline m-r-10">
<input type="checkbox" id="cn-p-4" checked>
<label for="cn-p-4" class="cr"></label>
</div>
<label class="f-w-600">Allow guest to print file</label>
</div>
<h6 class="mb-0 mt-5"><i class="feather icon-globe mr-2"></i>System settings</h6>
<hr>
<div class="form-group mb-0">
<div class="switch switch-primary d-inline m-r-10">
<input type="checkbox" id="cn-p-2">
<label for="cn-p-2" class="cr"></label>
</div>
<label class="f-w-600">View other user chat</label>
</div>
<p class="text-muted ml-5">Allow to show public user message</p>
</div>
</div>
</div>
</section>
<!-- [ chat user list ] end -->
<!-- [ chat message ] start -->
<section class="header-chat">
<div class="h-list-header">
<h6>Josephin Doe</h6>
<a href="#!" class="h-back-user-list"><i class="feather icon-chevron-left"></i></a>
</div>
<div class="h-list-body">
<div class="main-chat-cont scroll-div">
<div class="main-friend-chat">
<div class="media chat-messages">
<a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
<div class="media-body chat-menu-content">
<div class="">
<p class="chat-cont">hello tell me something</p>
<p class="chat-cont">about yourself?</p>
</div>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
<div class="media chat-messages">
<div class="media-body chat-menu-reply">
<div class="">
<p class="chat-cont">Ohh! very nice</p>
</div>
<p class="chat-time">8:22 a.m.</p>
</div>
<a class="media-right photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image"></a>
</div>
<div class="media chat-messages">
<a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
<div class="media-body chat-menu-content">
<div class="">
<p class="chat-cont">can you help me?</p>
</div>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
</div>
</div>
</div>
<div class="h-list-footer">
<div class="input-group">
<input type="file" class="chat-attach" style="display:none">
<a href="#!" class="input-group-prepend btn btn-success btn-attach">
<i class="feather icon-paperclip"></i>
</a>
<input type="text" name="h-chat-text" class="form-control h-send-chat" placeholder="Write hear . . ">
<button type="submit" class="input-group-append btn-send btn btn-primary">
<i class="feather icon-message-circle"></i>
</button>
</div>
</div>
</section>
<!-- [ chat message ] end -->
<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
<div class="pcoded-wrapper container">
<div class="pcoded-content">
<div class="pcoded-inner-content">
<div class="main-body">
<div class="page-wrapper">
<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-12">
<div class="page-header-title">
<h5>Layout 8</h5>
</div>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
<li class="breadcrumb-item"><a href="#!">Layout 8</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] start -->
<div class="row">
</div>
<!-- [ Main Content ] end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] end -->
<!-- Required Js -->
<script src="../assets/js/vendor-all.min.js"></script>
<script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/js/pcoded.min.js"></script>
<script src="../assets/js/horizontal-menu.js"></script>
<script type="text/javascript">
// Collapse menu
(function() {
if ($('#layout-sidenav').hasClass('sidenav-horizontal') || window.layoutHelpers.isSmallScreen()) {
return;
}
try {
window.layoutHelpers.setCollapsed(
localStorage.getItem('layoutCollapsed') === 'true',
false
);
} catch (e) {}
})();
$(function() {
// Initialize sidenav
$('#layout-sidenav').each(function() {
new SideNav(this, {
orientation: $(this).hasClass('sidenav-horizontal') ? 'horizontal' : 'vertical'
});
});
// Initialize sidenav togglers
$('body').on('click', '.layout-sidenav-toggle', function(e) {
e.preventDefault();
window.layoutHelpers.toggleCollapsed();
if (!window.layoutHelpers.isSmallScreen()) {
try {
localStorage.setItem('layoutCollapsed', String(window.layoutHelpers.isCollapsed()));
} catch (e) {}
}
});
});
$(document).ready(function() {
$("#pcoded").pcodedmenu({
themelayout: 'horizontal',
MenuTrigger: 'hover',
SubMenuTrigger: 'hover',
});
});
</script>
</body>
</html>