You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

593 lines
43 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chat | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
</head>
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<!-- Begin page -->
<div class="wrapper">
@@include('./partials/left-sidebar.html')
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
@@include('./partials/topbar.html')
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
<li class="breadcrumb-item active">Chat</li>
</ol>
</div>
<h4 class="page-title">Chat</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<!-- start chat users-->
<div class="col-xl-3 col-lg-6 order-lg-1 order-xl-1">
<div class="card">
<div class="card-body p-0">
<ul class="nav nav-tabs nav-bordered">
<li class="nav-item">
<a href="#allUsers" data-toggle="tab" aria-expanded="false" class="nav-link active py-2">
All
</a>
</li>
<li class="nav-item">
<a href="#favUsers" data-toggle="tab" aria-expanded="true" class="nav-link py-2">
Favourties
</a>
</li>
<li class="nav-item">
<a href="#friendUsers" data-toggle="tab" aria-expanded="true" class="nav-link py-2">
Friends
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active p-3" id="newpost">
<!-- start search box -->
<div class="app-search">
<form>
<div class="form-group position-relative">
<input type="text" class="form-control"
placeholder="People, groups & messages..." />
<span class="mdi mdi-magnify"></span>
</div>
</form>
</div>
<!-- end search box -->
<!-- users -->
<div class="row">
<div class="col">
<div data-simplebar style="max-height: 550px">
<a href="javascript:void(0);" class="text-body">
<div class="media mt-1 p-2">
<img src="assets/images/users/avatar-2.jpg" class="mr-2 rounded-circle" height="48" alt="Brandon Smith" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span class="float-right text-muted font-12">4:30am</span>
Brandon Smith
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-25 float-right text-right"><span class="badge badge-danger-lighten">3</span></span>
<span class="w-75">How are you today?</span>
</p>
</div>
</div>
</a>
<a href="javascript:void(0);" class="text-body">
<div class="media bg-light p-2">
<img src="assets/images/users/avatar-5.jpg" class="mr-2 rounded-circle" height="48" alt="Shreyu N" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span class="float-right text-muted font-12">5:30am</span>
Shreyu N
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-75">Hey! a reminder for tomorrow's meeting...</span>
</p>
</div>
</div>
</a>
<a href="javascript:void(0);" class="text-body">
<div class="media mt-1 p-2">
<img src="assets/images/users/avatar-7.jpg" class="mr-2 rounded-circle" height="48" alt="Maria C" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span class="float-right text-muted font-12">Thu</span>
Maria C
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-25 float-right text-right"><span class="badge badge-danger-lighten">2</span></span>
<span class="w-75">Are we going to have this week's planning meeting today?</span>
</p>
</div>
</div>
</a>
<a href="javascript:void(0);" class="text-body">
<div class="media mt-1 p-2">
<img src="assets/images/users/avatar-10.jpg"
class="mr-2 rounded-circle" height="48" alt="Rhonda D" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span class="float-right text-muted font-12">Wed</span>
Rhonda D
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-75">Please check these design assets...</span>
</p>
</div>
</div>
</a>
<a href="javascript:void(0);" class="text-body">
<div class="media mt-1 p-2">
<img src="assets/images/users/avatar-3.jpg"
class="mr-2 rounded-circle" height="48" alt="Michael H" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span class="float-right text-muted font-12">Tue</span>
Michael H
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-25 float-right text-right"><span class="badge badge-danger-lighten">6</span></span>
<span class="w-75">Are you free for 15 min? I would like to discuss something...</span>
</p>
</div>
</div>
</a>
<a href="javascript:void(0);" class="text-body">
<div class="media mt-1 p-2">
<img src="assets/images/users/avatar-6.jpg"
class="mr-2 rounded-circle" height="48" alt="Thomas R" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span class="float-right text-muted font-12">Tue</span>
Thomas R
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-75">Let's have meeting today between me, you and Tony...</span>
</p>
</div>
</div>
</a>
<a href="javascript:void(0);" class="text-body">
<div class="media mt-1 p-2">
<img src="assets/images/users/avatar-8.jpg"
class="mr-2 rounded-circle" height="48" alt="Thomas J" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span class="float-right text-muted font-12">Tue</span>
Thomas J
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-75">Howdy?</span>
</p>
</div>
</div>
</a>
<a href="javascript:void(0);" class="text-body">
<div class="media mt-1 p-2">
<img src="assets/images/users/avatar-1.jpg"
class="mr-2 rounded-circle" height="48" alt="Ricky J" />
<div class="media-body">
<h5 class="mt-0 mb-0 font-14">
<span
class="float-right text-muted font-12">Mon</span>
Ricky J
</h5>
<p class="mt-1 mb-0 text-muted font-14">
<span class="w-25 float-right text-right"><span class="badge badge-danger-lighten">28</span></span>
<span class="w-75">Are you interested in learning?</span>
</p>
</div>
</div>
</a>
</div> <!-- end slimscroll-->
</div> <!-- End col -->
</div>
<!-- end users -->
</div> <!-- end Tab Pane-->
</div> <!-- end tab content-->
</div> <!-- end card-body-->
</div> <!-- end card-->
</div>
<!-- end chat users-->
<!-- chat area -->
<div class="col-xl-6 col-lg-12 order-lg-2 order-xl-1">
<div class="card">
<div class="card-body">
<ul class="conversation-list" data-simplebar style="max-height: 537px">
<li class="clearfix">
<div class="chat-avatar">
<img src="assets/images/users/avatar-5.jpg" class="rounded" alt="Shreyu N" />
<i>10:00</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Shreyu N</i>
<p>
Hello!
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix odd">
<div class="chat-avatar">
<img src="assets/images/users/avatar-1.jpg" class="rounded" alt="dominic" />
<i>10:01</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Dominic</i>
<p>
Hi, How are you? What about our next meeting?
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix">
<div class="chat-avatar">
<img src="assets/images/users/avatar-5.jpg" class="rounded" alt="Shreyu N" />
<i>10:01</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Shreyu N</i>
<p>
Yeah everything is fine
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix odd">
<div class="chat-avatar">
<img src="assets/images/users/avatar-1.jpg" class="rounded" alt="dominic" />
<i>10:02</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Dominic</i>
<p>
Wow that's great
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix">
<div class="chat-avatar">
<img src="assets/images/users/avatar-5.jpg" alt="Shreyu N" class="rounded" />
<i>10:02</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Shreyu N</i>
<p>
Let's have it today if you are free
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix odd">
<div class="chat-avatar">
<img src="assets/images/users/avatar-1.jpg" alt="dominic" class="rounded" />
<i>10:03</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Dominic</i>
<p>
Sure thing! let me know if 2pm works for you
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix">
<div class="chat-avatar">
<img src="assets/images/users/avatar-5.jpg" alt="Shreyu N" class="rounded" />
<i>10:04</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Shreyu N</i>
<p>
Sorry, I have another meeting scheduled at 2pm. Can we have it
at 3pm instead?
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix">
<div class="chat-avatar">
<img src="assets/images/users/avatar-5.jpg" alt="Shreyu N" class="rounded" />
<i>10:04</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Shreyu N</i>
<p>
We can also discuss about the presentation talk format if you have some extra mins
</p>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
<li class="clearfix odd">
<div class="chat-avatar">
<img src="assets/images/users/avatar-1.jpg" alt="dominic" class="rounded" />
<i>10:05</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>Dominic</i>
<p>
3pm it is. Sure, let's discuss about presentation format, it would be great to finalize today.
I am attaching the last year format and assets here...
</p>
</div>
<div class="card mt-2 mb-1 shadow-none border text-left">
<div class="p-2">
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar-sm">
<span class="avatar-title rounded">
.ZIP
</span>
</div>
</div>
<div class="col pl-0">
<a href="javascript:void(0);"
class="text-muted font-weight-bold">Hyper-admin-design.zip</a>
<p class="mb-0">2.3 MB</p>
</div>
<div class="col-auto">
<!-- Button -->
<a href="javascript:void(0);"
class="btn btn-link btn-lg text-muted">
<i class="dripicons-download"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="conversation-actions dropdown">
<button class="btn btn-sm btn-link" data-toggle="dropdown"
aria-expanded="false"><i class='uil uil-ellipsis-v'></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Copy Message</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
</ul>
<div class="row">
<div class="col">
<div class="mt-2 bg-light p-3 rounded">
<form class="needs-validation" novalidate="" name="chat-form"
id="chat-form">
<div class="row">
<div class="col mb-2 mb-sm-0">
<input type="text" class="form-control border-0" placeholder="Enter your text" required="">
<div class="invalid-feedback">
Please enter your messsage
</div>
</div>
<div class="col-sm-auto">
<div class="btn-group">
<a href="#" class="btn btn-light"><i class="uil uil-paperclip"></i></a>
<a href="#" class="btn btn-light"> <i class='uil uil-smile'></i> </a>
<button type="submit" class="btn btn-success chat-send btn-block"><i class='uil uil-message'></i></button>
</div>
</div> <!-- end col -->
</div> <!-- end row-->
</form>
</div>
</div> <!-- end col-->
</div>
<!-- end row -->
</div> <!-- end card-body -->
</div> <!-- end card -->
</div>
<!-- end chat area-->
<!-- start user detail -->
<div class="col-xl-3 col-lg-6 order-lg-1 order-xl-2">
<div class="card">
<div class="card-body">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">View full</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Edit Contact Info</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Remove</a>
</div>
</div>
<div class="mt-3 text-center">
<img src="assets/images/users/avatar-5.jpg" alt="shreyu"
class="img-thumbnail avatar-lg rounded-circle" />
<h4>Shreyu N</h4>
<button class="btn btn-primary btn-sm mt-1"><i class='uil uil-envelope-add mr-1'></i>Send Email</button>
<p class="text-muted mt-2 font-14">Last Interacted: <strong>Few hours back</strong></p>
</div>
<div class="mt-3">
<hr class="" />
<p class="mt-4 mb-1"><strong><i class='uil uil-at'></i> Email:</strong></p>
<p>support@coderthemes.com</p>
<p class="mt-3 mb-1"><strong><i class='uil uil-phone'></i> Phone Number:</strong></p>
<p>+1 456 9595 9594</p>
<p class="mt-3 mb-1"><strong><i class='uil uil-location'></i> Location:</strong></p>
<p>California, USA</p>
<p class="mt-3 mb-1"><strong><i class='uil uil-globe'></i> Languages:</strong></p>
<p>English, German, Spanish</p>
<p class="mt-3 mb-2"><strong><i class='uil uil-users-alt'></i> Groups:</strong></p>
<p>
<span class="badge badge-success-lighten p-1 font-14">Work</span>
<span class="badge badge-primary-lighten p-1 font-14">Friends</span>
</p>
</div>
</div> <!-- end card-body -->
</div> <!-- end card-->
</div> <!-- end col -->
<!-- end user detail -->
</div> <!-- end row-->
</div> <!-- container -->
</div> <!-- content -->
@@include('./partials/footer.html')
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
@@include('./partials/right-sidebar.html')
<!-- bundle -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
</body>
</html>