1073 lines
67 KiB
HTML
1073 lines
67 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Admindek - Horizontal Ticket</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="Admindek Bootstrap admin template made using bootstrap 5 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
|
|
<meta name="keywords"
|
|
content="admin templates, bootstrap admin templates, bootstrap 5, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, Admindek, Admindek bootstrap admin template">
|
|
<meta name="author" content="Phoenixcoded" />
|
|
|
|
<!-- Favicon icon -->
|
|
<link rel="icon" href="assets/images/favicon.svg" 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">
|
|
<!-- template css -->
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="assets/css/layouts/layout-horizontal.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- [ 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">
|
|
|
|
<img src="assets/images/logo-dark.svg" alt="" class="logo images">
|
|
<img src="assets/images/logo-icon-dark.svg" alt="" class="logo-thumb images">
|
|
</a>
|
|
<a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
|
|
</div>
|
|
<div class="navbar-content sidenav-horizontal" id="layout-sidenav">
|
|
<div class="sidenav-horizontal-wrapper">
|
|
<ul class="nav pcoded-inner-navbar sidenav-inner">
|
|
<li class="nav-item pcoded-menu-caption">
|
|
<label>Navigation</label>
|
|
</li>
|
|
<li data-username="helpdesk" class="nav-item"><a href="hd-help-desk.html" class="nav-link"><span
|
|
class="pcoded-micon"><i class="feather icon-help-circle"></i></span><span
|
|
class="pcoded-mtext">Helpdesk dashboard</span></a></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-layers"></i></span><span
|
|
class="pcoded-mtext">Ticket</span></a>
|
|
<ul class="pcoded-submenu">
|
|
<li class=""><a href="hd-new-ticket.html" class="">Create new ticket</a></li>
|
|
<li class=""><a href="hd-dashboard.html" class="">Ticket list</a></li>
|
|
</ul>
|
|
</li>
|
|
<li data-username="custlist" class="nav-item"><a href="hd-cust-list.html" class="nav-link"><span
|
|
class="pcoded-micon"><i class="feather icon-list"></i></span><span
|
|
class="pcoded-mtext">Customer list</span></a></li>
|
|
<li data-username="detail" class="nav-item"><a href="hd-detail.html" class="nav-link"><span
|
|
class="pcoded-micon"><i class="feather icon-file-text"></i></span><span
|
|
class="pcoded-mtext">Ticket detail</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
|
|
<img src="assets/images/logo-dark.svg" alt="" class="logo images">
|
|
<img src="assets/images/logo-icon-dark.svg" alt="" class="logo-thumb images">
|
|
</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 me-auto">
|
|
<li class="nav-item">
|
|
<div class="main-search open">
|
|
<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 ms-1">
|
|
<i class="feather icon-search input-group-text"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav ms-auto">
|
|
<li>
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle" href="#" data-bs-toggle="dropdown"><i
|
|
class="icon feather icon-bell"></i></a>
|
|
<div class="dropdown-menu dropdown-menu-end notification">
|
|
<div class="noti-head">
|
|
<h6 class="d-inline-block m-b-0">Notifications</h6>
|
|
<div class="float-end">
|
|
<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-bs-toggle="dropdown">
|
|
<i class="icon feather icon-settings"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end 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-bs-toggle="tab" href="#chat" role="tab"
|
|
aria-controls="chat" aria-selected="true"><i class="feather icon-message-circle me-2"></i>Chat</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-uppercase" id="user-tab" data-bs-toggle="tab" href="#user" role="tab"
|
|
aria-controls="user" aria-selected="false"><i class="feather icon-users me-2"></i>User</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-uppercase" id="setting-tab" data-bs-toggle="tab" href="#setting" role="tab"
|
|
aria-controls="setting" aria-selected="false"><i class="feather icon-settings me-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 me-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 ms-5">You get latest 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 me-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 ms-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 me-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 ms-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">
|
|
<!-- [ Main Content ] start -->
|
|
<div class="row">
|
|
<!-- support-section start -->
|
|
<div class="col-xl-4 col-md-6">
|
|
<div class="card support-bar">
|
|
<div class="card-body pb-0">
|
|
<h2 class="m-0">350</h2>
|
|
<span class="text-c-purple">Support Requests</span>
|
|
<p class="mb-3 mt-3">Total number of support requests that come in.</p>
|
|
</div>
|
|
<div id="support-chart" style="height:100px;width:100%;"></div>
|
|
<div class="card-footer bg-purple text-white">
|
|
<div class="row text-center">
|
|
<div class="col border-right">
|
|
<h4 class="m-0 text-white">10</h4>
|
|
<span>Open</span>
|
|
</div>
|
|
<div class="col border-right">
|
|
<h4 class="m-0 text-white">5</h4>
|
|
<span>Running</span>
|
|
</div>
|
|
<div class="col">
|
|
<h4 class="m-0 text-white">3</h4>
|
|
<span>Solved</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- support-section end -->
|
|
<!-- support1-section start -->
|
|
<div class="col-xl-4 col-md-6">
|
|
<div class="card support-bar">
|
|
<div class="card-body pb-0">
|
|
<h2 class="m-0">500</h2>
|
|
<span class="text-c-blue">Agent Response</span>
|
|
<p class="mb-3 mt-3">Total number of support requests that come in.</p>
|
|
</div>
|
|
<div id="support-chart1" style="height:100px;width:100%;"></div>
|
|
<div class="card-footer bg-primary text-white">
|
|
<div class="row text-center">
|
|
<div class="col border-right">
|
|
<h4 class="m-0 text-white">50</h4>
|
|
<span>Open</span>
|
|
</div>
|
|
<div class="col border-right">
|
|
<h4 class="m-0 text-white">75</h4>
|
|
<span>Running</span>
|
|
</div>
|
|
<div class="col">
|
|
<h4 class="m-0 text-white">30</h4>
|
|
<span>Solved</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- support-section1 end -->
|
|
<!-- support2-section start -->
|
|
<div class="col-xl-4 col-md-12">
|
|
<div class="card support-bar">
|
|
<div class="card-body pb-0">
|
|
<h2 class="m-0">800</h2>
|
|
<span class="text-c-green">Support Resolved</span>
|
|
<p class="mb-3 mt-3">Total number of support requests that come in.</p>
|
|
</div>
|
|
<div id="support-chart2" style="height:100px;width:100%;"></div>
|
|
<div class="card-footer bg-success text-white">
|
|
<div class="row text-center">
|
|
<div class="col border-right">
|
|
<h4 class="m-0 text-white">80</h4>
|
|
<span>Open</span>
|
|
</div>
|
|
<div class="col border-right">
|
|
<h4 class="m-0 text-white">60</h4>
|
|
<span>Running</span>
|
|
</div>
|
|
<div class="col">
|
|
<h4 class="m-0 text-white">90</h4>
|
|
<span>Solved</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- support-section2 end -->
|
|
<!-- customer-section start -->
|
|
<div class="col-xl-8 col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6>Customer Satisfaction</h6>
|
|
<span>It takes continuous effort to maintain high customer satisfaction
|
|
levels.Internal and external quality measures are often tied
|
|
together.,as the opinion...</span>
|
|
<span class="text-c-blue d-block">Learn more..</span>
|
|
<div class="row d-flex justify-content-center align-items-center">
|
|
<div class="col-sm-6">
|
|
<div id="satisfaction-chart" style="height:200px;"></div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<span class="d-block mb-1"><i class="fas fa-circle f-10 m-r-5"
|
|
style="color:#67b7dc;"></i>Very Poor [66%]</span>
|
|
<span class="d-block mb-1"><i class="fas fa-circle f-10 m-r-5"
|
|
style="color:#6794dc;"></i>Satisfied [50%]</span>
|
|
<span class="d-block mb-1"><i class="fas fa-circle f-10 m-r-5"
|
|
style="color:#6771dc;"></i>Very Satisfied [40%]</span>
|
|
<span class="d-block mb-1"><i class="fas fa-circle f-10 m-r-5"
|
|
style="color:#8067dc;"></i>Poor [30%]</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- rating-section start -->
|
|
<div class="row">
|
|
<div class="col-xl-6 col-md-12">
|
|
<div class="card social-res-card">
|
|
<div class="card-header">
|
|
<h5>Facebook Source</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="m-b-10">Page Profile</p>
|
|
<div class="progress m-b-25">
|
|
<div class="progress-bar progress-c-blue" style="width:25%">
|
|
</div>
|
|
</div>
|
|
<p class="m-b-10">Favorite</p>
|
|
<div class="progress m-b-25">
|
|
<div class="progress-bar progress-c-blue" style="width:85%">
|
|
</div>
|
|
</div>
|
|
<p class="m-b-10">Like Story</p>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-c-blue" style="width:65%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6 col-md-12">
|
|
<div class="card social-res-card">
|
|
<div class="card-header">
|
|
<h5>Twitter Source</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="m-b-10">Wall Profile</p>
|
|
<div class="progress m-b-25">
|
|
<div class="progress-bar progress-c-red" style="width:85%">
|
|
</div>
|
|
</div>
|
|
<p class="m-b-10">Favorite</p>
|
|
<div class="progress m-b-25">
|
|
<div class="progress-bar progress-c-red" style="width:25%">
|
|
</div>
|
|
</div>
|
|
<p class="m-b-10">Like Tweets</p>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-c-red" style="width:65%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- rating-section end -->
|
|
</div>
|
|
<!-- customer-section end -->
|
|
<!-- latest-section start -->
|
|
<div class="col-xl-4 col-md-6">
|
|
<div class="card latest-update-card">
|
|
<div class="card-header">
|
|
<h5>Latest Activity</h5>
|
|
<div class="card-header-right">
|
|
<div class="btn-group card-option">
|
|
<button type="button" class="btn dropdown-toggle"
|
|
data-bs-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false">
|
|
<i class="feather icon-more-horizontal"></i>
|
|
</button>
|
|
<ul
|
|
class="list-unstyled card-option dropdown-menu dropdown-menu-end">
|
|
<li class="dropdown-item full-card"><a href="#!"><span><i
|
|
class="feather icon-maximize"></i>
|
|
maximize</span><span style="display:none"><i
|
|
class="feather icon-minimize"></i>
|
|
Restore</span></a></li>
|
|
<li class="dropdown-item minimize-card"><a href="#!"><span><i
|
|
class="feather icon-minus"></i>
|
|
collapse</span><span style="display:none"><i
|
|
class="feather icon-plus"></i> expand</span></a>
|
|
</li>
|
|
<li class="dropdown-item reload-card"><a href="#!"><i
|
|
class="feather icon-refresh-cw"></i> reload</a></li>
|
|
<li class="dropdown-item close-card"><a href="#!"><i
|
|
class="feather icon-trash"></i> remove</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="latest-scroll" style="height:320px;position:relative;">
|
|
<div class="card-body">
|
|
<div class="latest-update-box">
|
|
<div class="row p-t-20 p-b-20">
|
|
<div class="col-auto text-end update-meta">
|
|
<i class="b-primary update-icon ring"></i>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<a href="#!">
|
|
<h6 class="m-0">Devlopment & Update</h6>
|
|
</a>
|
|
<p class="m-b-0">Lorem ipsum dolor sit amet, <a href="#!"
|
|
class="text-c-blue"> More</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-20">
|
|
<div class="col-auto text-end update-meta">
|
|
<i class="b-primary update-icon ring"></i>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<a href="#!">
|
|
<h6 class="m-0">Showcases</h6>
|
|
</a>
|
|
<p class="m-b-0">Lorem dolor sit amet, <a href="#!"
|
|
class="text-c-blue"> More</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-20">
|
|
<div class="col-auto text-end update-meta">
|
|
<i class="b-success update-icon ring"></i>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<a href="#!">
|
|
<h6 class="m-0">Miscellaneous</h6>
|
|
</a>
|
|
<p class="m-b-0">Lorem ipsum dolor sit ipsum amet, <a
|
|
href="#!" class="text-c-green"> More</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-20">
|
|
<div class="col-auto text-end update-meta">
|
|
<i class="b-primary update-icon ring"></i>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<a href="#!">
|
|
<h6 class="m-0">Showcases</h6>
|
|
</a>
|
|
<p class="m-b-0">Lorem dolor sit amet, <a href="#!"
|
|
class="text-c-blue"> More</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-20">
|
|
<div class="col-auto text-end update-meta">
|
|
<i class="b-success update-icon ring"></i>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<a href="#!">
|
|
<h6 class="m-0">Miscellaneous</h6>
|
|
</a>
|
|
<p class="m-b-0">Lorem ipsum dolor sit ipsum amet, <a
|
|
href="#!" class="text-c-green"> More</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-20">
|
|
<div class="col-auto text-end update-meta">
|
|
<i class="b-primary update-icon ring"></i>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<a href="#!">
|
|
<h6 class="m-0">Devlopment</h6>
|
|
</a>
|
|
<p class="m-b-0">Lorem ipsum dolor sit amet, <a href="#!"
|
|
class="text-c-green"> More</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-0">
|
|
<div class="col-auto text-end update-meta">
|
|
<i class="b-primary update-icon ring"></i>
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<a href="#!">
|
|
<h6 class="m-0">Showcases</h6>
|
|
</a>
|
|
<p class="m-b-0">Lorem dolor sit amet, <a href="#!"
|
|
class="text-c-blue"> More</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card table-card widget-primary-card bg-c-blue">
|
|
<div class="row-table">
|
|
<div class="col-sm-3 card-body-big">
|
|
<i class="feather icon-star-on"></i>
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<h4>4000 +</h4>
|
|
<h6>Ratings Received</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card table-card widget-purple-card bg-c-yellow">
|
|
<div class="row-table">
|
|
<div class="col-sm-3 card-body-big">
|
|
<i class="fas fa-trophy"></i>
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<h4>17</h4>
|
|
<h6>Achievements</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- latest-section end -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [ Main Content ] end -->
|
|
|
|
<!-- Warning Section start -->
|
|
<!-- Older IE warning message -->
|
|
<!--[if lt IE 11]>
|
|
<div class="ie-warning">
|
|
<h1>Warning!!</h1>
|
|
<p>You are using an outdated version of Internet Explorer, please upgrade
|
|
<br/>to any of the following web browsers to access this website.
|
|
</p>
|
|
<div class="iew-container">
|
|
<ul class="iew-download">
|
|
<li>
|
|
<a href="http://www.google.com/chrome/">
|
|
<img src="assets/images/browser/chrome.png" alt="Chrome">
|
|
<div>Chrome</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.mozilla.org/en-US/firefox/new/">
|
|
<img src="assets/images/browser/firefox.png" alt="Firefox">
|
|
<div>Firefox</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.opera.com">
|
|
<img src="assets/images/browser/opera.png" alt="Opera">
|
|
<div>Opera</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.apple.com/safari/">
|
|
<img src="assets/images/browser/safari.png" alt="Safari">
|
|
<div>Safari</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
|
|
<img src="assets/images/browser/ie.png" alt="">
|
|
<div>IE (11 & above)</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p>Sorry for the inconvenience!</p>
|
|
</div>
|
|
<![endif]-->
|
|
<!-- Warning Section Ends -->
|
|
|
|
<!-- 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>
|
|
|
|
<!-- tinymce editor -->
|
|
<script src="assets/plugins/tinymce/tinymce.min.js"></script>
|
|
|
|
<!-- am chart js -->
|
|
<script src="assets/plugins/chart-am4/js/core.js"></script>
|
|
<script src="assets/plugins/chart-am4/js/charts.js"></script>
|
|
<script src="assets/plugins/chart-am4/js/animated.js"></script>
|
|
<script src="assets/plugins/chart-am4/js/maps.js"></script>
|
|
<script src="assets/plugins/chart-am4/js/worldLow.js"></script>
|
|
<script src="assets/plugins/chart-am4/js/continentsLow.js"></script>
|
|
|
|
<!-- dashboard-custom js -->
|
|
<script src="assets/js/pages/ticksy-dashboard-help.js"></script>
|
|
|
|
<script src="assets/js/horizontal-menu.js"></script>
|
|
<script src="assets/js/analytics.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
(function () {
|
|
if ($('#layout-sidenav').hasClass('sidenav-horizontal') || window.layoutHelpers.isSmallScreen()) {
|
|
return;
|
|
}
|
|
try {
|
|
window.layoutHelpers.setCollapsed(
|
|
localStorage.getItem('layoutCollapsed') === 'true',
|
|
false
|
|
);
|
|
} catch (e) { }
|
|
})();
|
|
|
|
$(function () {
|
|
$('#layout-sidenav').each(function () {
|
|
new SideNav(this, {
|
|
orientation: $(this).hasClass('sidenav-horizontal') ? 'horizontal' : 'vertical'
|
|
});
|
|
});
|
|
|
|
$('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',
|
|
});
|
|
});
|
|
|
|
$(window).on('load', function () {
|
|
tinymce.init({
|
|
selector: '#tinymce-editor',
|
|
height: 200,
|
|
theme: 'modern',
|
|
plugins: [
|
|
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
|
|
'searchreplace wordcount visualblocks visualchars code fullscreen',
|
|
'insertdatetime media nonbreaking save table contextmenu directionality',
|
|
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
|
|
],
|
|
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
|
|
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
|
|
image_advtab: true
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="footer-fab">
|
|
<div class="b-bg">
|
|
<i class="fas fa-question"></i>
|
|
</div>
|
|
<div class="fab-hover">
|
|
<ul class="list-unstyled">
|
|
<li><a href="../doc/index-bc-package.html" target="_blank" data-text="UI Kit"
|
|
class="btn btn-icon btn-rounded btn-info m-0"><i class="feather icon-layers"></i></a></li>
|
|
<li><a href="../doc/index.html" target="_blank" data-text="Document"
|
|
class="btn btn-icon btn-rounded btn-primary m-0"><i
|
|
class="feather icon feather icon-book"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |