2103 lines
220 KiB
HTML
2103 lines
220 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ListOn - Directory & Listing HTML Template</title>
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/dist/img/favicon.png">
|
|
<!-- Global Styles(used by all pages) -->
|
|
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
|
|
<link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
|
|
<!-- Third party Styles(used by this page) -->
|
|
<link href="assets/plugins/datatables/dataTables.bootstrap5.min.css" rel="stylesheet">
|
|
<!-- App css -->
|
|
<link href="assets/dist/css/app.min.css" rel="stylesheet">
|
|
<!-- Start Your Custom Style Now -->
|
|
<link href="assets/dist/css/style.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="fixed sidebar-mini">
|
|
<div class="wrapper">
|
|
<!-- Sidebar -->
|
|
<nav class="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="dashboard.html" class="sidebar-brand">
|
|
<img class="sidebar-brand_icon" src="assets/dist/img/mini-logo.png" alt="">
|
|
<span class="sidebar-brand_text">List<span>On</span></span>
|
|
</a>
|
|
</div>
|
|
<!--/.sidebar header-->
|
|
<div class="sidebar-body">
|
|
<nav class="sidebar-nav">
|
|
<ul class="metismenu">
|
|
<li class="nav-label">
|
|
<span class="nav-label_text">Main Menu</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-three-dots nav-label_ellipsis m-auto" viewBox="0 0 16 16">
|
|
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
|
|
</svg>
|
|
</li>
|
|
<li>
|
|
<a href="dashboard.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-speedometer" viewBox="0 0 16 16">
|
|
<path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2M3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z" />
|
|
<path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z" />
|
|
</svg>
|
|
<span class="ms-2">Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="add-listing.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-add" viewBox="0 0 16 16">
|
|
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h4a.5.5 0 1 0 0-1h-4a.5.5 0 0 1-.5-.5V7.207l5-5 6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" />
|
|
<path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0m-3.5-2a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 1 0 1 0v-1h1a.5.5 0 1 0 0-1h-1v-1a.5.5 0 0 0-.5-.5" />
|
|
</svg>
|
|
<span class="ms-2">Add listing</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="wallet.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wallet2" viewBox="0 0 16 16">
|
|
<path d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z" />
|
|
</svg>
|
|
<span class="ms-2">Wallet</span>
|
|
</a>
|
|
</li>
|
|
<li class="mm-active">
|
|
<a href="messages.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text" viewBox="0 0 16 16">
|
|
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
|
|
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5" />
|
|
</svg>
|
|
<span class="ms-2">Message</span>
|
|
<span class="badge rounded-pill bg-success">2</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-label">
|
|
<span class="nav-label_text">Listing</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-three-dots nav-label_ellipsis m-auto" viewBox="0 0 16 16">
|
|
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
|
|
</svg>
|
|
</li>
|
|
<li>
|
|
<a class="has-arrow material-ripple" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
|
|
<path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5" />
|
|
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z" />
|
|
</svg>
|
|
<span class="ms-2">My Listing</span>
|
|
</a>
|
|
<ul class="nav-second-level">
|
|
<li><a href="my-listing.html">Active</a></li>
|
|
<li><a href="my-listing.html">Pending</a></li>
|
|
<li><a href="my-listing.html">Expired</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="reviews.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stars" viewBox="0 0 16 16">
|
|
<path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z" />
|
|
</svg>
|
|
<span class="ms-2">Reviews</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="bookings.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-bookmark-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M6 1h6v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z" />
|
|
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2" />
|
|
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z" />
|
|
</svg>
|
|
<span class="ms-2">Bookings</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="bookmark.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
|
|
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
|
|
</svg>
|
|
<span class="ms-2">Bookmark</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="invoice.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
|
|
<path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208M5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
|
|
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"/>
|
|
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"/>
|
|
</svg>
|
|
<span class="ms-2">Invoice</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="has-arrow material-ripple" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-nested" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5" />
|
|
</svg>
|
|
<span class="ms-2">Multi Level Menu</span>
|
|
</a>
|
|
<ul class="nav-second-level">
|
|
<li><a href="#">Menu - 2(1)</a></li>
|
|
<li>
|
|
<a class="has-arrow" href="#" aria-expanded="false">Level - 2</a>
|
|
<ul class="nav-third-level">
|
|
<li><a href="#">Menu - 3(1)</a></li>
|
|
<li>
|
|
<a class="has-arrow" href="#" aria-expanded="false">Level - 3</a>
|
|
<ul class="nav-fourth-level">
|
|
<li><a href="#">Menu - 4(1)</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-label">
|
|
<span class="nav-label_text">Account</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-three-dots nav-label_ellipsis m-auto" viewBox="0 0 16 16">
|
|
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
|
|
</svg>
|
|
</li>
|
|
<li>
|
|
<a href="profile.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard2-plus" viewBox="0 0 16 16">
|
|
<path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z" />
|
|
<path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5z" />
|
|
<path d="M8.5 6.5a.5.5 0 0 0-1 0V8H6a.5.5 0 0 0 0 1h1.5v1.5a.5.5 0 0 0 1 0V9H10a.5.5 0 0 0 0-1H8.5z" />
|
|
</svg>
|
|
<span class="ms-2">Edit Profile</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="setting-app.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
|
|
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
|
|
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
|
|
</svg>
|
|
<span class="ms-2">Setting</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="../sign-up.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-headset" viewBox="0 0 16 16">
|
|
<path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5" />
|
|
</svg>
|
|
<span class="ms-2">Support</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="../sign-in.html">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z" />
|
|
<path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z" />
|
|
</svg>
|
|
<span class="ms-2">Logout</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="card p-4 shadow-none m-4 help-box alert" role="alert">
|
|
<button type="button" class="btn-close end-0 me-3 mt-3 position-absolute top-0" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
<div class="text-center"><img src="assets/dist/img/predictive_analytics.png" alt="" height="120" class="mb-3">
|
|
<h6 class="mb-1">Monthly Sales Report</h6>
|
|
<p class="fs-12">Your monthly sales report is ready for download!</p>
|
|
<div class="d-grid"><a class="btn btn-primary" href="#" target="_blank">Purchase</a></div>
|
|
</div>
|
|
</div>
|
|
</div><!-- sidebar-body -->
|
|
</nav>
|
|
<!-- Page Content -->
|
|
<div class="content-wrapper">
|
|
<div class="main-content">
|
|
<!-- Star navbar -->
|
|
<nav class="navbar-custom-menu navbar navbar-expand-xl m-0 navbar-transfarent">
|
|
<div class="sidebar-toggle">
|
|
<div class="sidebar-toggle-icon" id="sidebarCollapse">
|
|
sidebar toggle<span></span>
|
|
</div>
|
|
</div>
|
|
<!--/.sidebar toggle icon-->
|
|
<!-- Collapse -->
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<!-- Toggler -->
|
|
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-collapse" aria-expanded="true" aria-label="Toggle navigation"><span></span> <span></span></button>
|
|
<!-- Start search -->
|
|
<form class="search" action="#" method="get">
|
|
<div class="search__inner">
|
|
<input type="text" class="search__text" placeholder="Search (Ctrl+/)">
|
|
<svg data-sa-action="search-close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search search__helper" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
<span class="search-shortcode">(Ctrl+/)</span>
|
|
</div>
|
|
</form>
|
|
<!-- End /. search -->
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle material-ripple" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="typcn typcn-weather-stormy top-menu-icon"></i>Home
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../index.html">Home (Main)</a></li>
|
|
<li><a class="dropdown-item" href="../home-classic.html">Home (Classic)</a></li>
|
|
<li><a class="dropdown-item" href="../home-rounded.html">Home (Rounded)</a></li>
|
|
<li><a class="dropdown-item" href="../home-map.html">Home (Map)</a></li>
|
|
<li><a class="dropdown-item" href="../home-grid.html">Home (Grid)</a></li>
|
|
<li><a class="dropdown-item" href="../home-waves.html">Home (Waves)</a></li>
|
|
<li><a class="dropdown-item" href="../home-car.html">Home (Car) <span class="badge text-bg-primary fw-semibold">New</span></a></li>
|
|
<li><a class="dropdown-item" href="../home-restaurant.html">Home (Restaurant) <span class="badge text-bg-primary fw-semibold">New</span></a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle material-ripple" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="typcn typcn-weather-stormy top-menu-icon"></i>Dashboard
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="dashboard.html">Dashboard</a></li>
|
|
<li><a class="dropdown-item" href="bookings.html">Bookings</a></li>
|
|
<li><a class="dropdown-item" href="messages.html">Message</a></li>
|
|
<li><a class="dropdown-item" href="wallet.html">Wallet</a></li>
|
|
<li><a class="dropdown-item" href="profile.html">Edit Profile</a></li>
|
|
<li><a class="dropdown-item" href="add-listing.html">Add Listing</a></li>
|
|
<li><a class="dropdown-item" href="submit-rider.html">Submit Rider</a></li>
|
|
<li><a class="dropdown-item" href="my-listing.html">My listing</a></li>
|
|
<li><a class="dropdown-item" href="bookings.html">Bookings</a></li>
|
|
<li><a class="dropdown-item" href="reviews.html">Reviews</a></li>
|
|
<li><a class="dropdown-item" href="bookmark.html">Bookmark</a></li>
|
|
<li><a class="dropdown-item" href="setting-app.html">Settings</a></li>
|
|
<li><a class="dropdown-item" href="invoice.html">invoice</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
Listing
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">List View</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../listings-list-left.html">Left Sidebar</a></li>
|
|
<li><a class="dropdown-item" href="../listings-list-right.html">Right Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 1</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../listings-grid-1-left.html">Left Sidebar</a></li>
|
|
<li><a class="dropdown-item" href="../listings-grid-1-right.html">Right Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Grid View 2</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../listings-grid-2-left.html">Left Sidebar</a></li>
|
|
<li><a class="dropdown-item" href="../listings-grid-2-right.html">Right Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Half Map + Sidebar</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../listings-map.html">Half Map List</a></li>
|
|
<li><a class="dropdown-item" href="../listings-map-car.html">Half Map List (Car) <span class="badge text-bg-primary fw-semibold">New</span></a></li>
|
|
<li><a class="dropdown-item" href="../listings-map-grid-1.html">Half Map Grid 1</a></li>
|
|
<li><a class="dropdown-item" href="../listings-map-grid-2.html">Half Map Grid 2</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Listing Details</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../listing-details.html">Listing Details 1</a></li>
|
|
<li><a class="dropdown-item" href="../listing-details-2.html">Listing Details 2</a></li>
|
|
<li><a class="dropdown-item" href="../listing-details-car.html">Listing Details Car <span class="badge text-bg-primary fw-semibold">New</span></a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../listings-map-grid-1.html"><i class="typcn typcn-point-of-interest-outline top-menu-icon"></i>Explore</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
Template
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../about.html">About us 1</a></li>
|
|
<li><a class="dropdown-item" href="../about-2.html">About us 2</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Agent</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../agent.html">Agent</a></li>
|
|
<li><a class="dropdown-item" href="../agent-details.html">Agent Details</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="../blog.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../blog.html">Blog</a></li>
|
|
<li><a class="dropdown-item" href="../blog-details.html">Blog Standard</a></li>
|
|
<li><a class="dropdown-item" href="../blog-post-galary.html">Blog Galary</a></li>
|
|
<li><a class="dropdown-item" href="../blog-post-video.html">Blog Video</a></li>
|
|
<li><a class="dropdown-item" href="../blog-post-audio.html">Blog Audio</a></li>
|
|
<li><a class="dropdown-item" href="../blog-archive.html">Blog Archive</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item" href="../add-listing.html">Add Listing</a></li>
|
|
<li><a class="dropdown-item" href="../submit-rider.html">Submit rider</a></li>
|
|
<li><a class="dropdown-item" href="../contact.html">Contact</a></li>
|
|
<li><a class="dropdown-item" href="../pricing.html">Pricing</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Authentication</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../sign-in.html">Sign In</a></li>
|
|
<li><a class="dropdown-item" href="../sign-up.html">Sign Up</a></li>
|
|
<li><a class="dropdown-item" href="../forgot-password.html">Forgot Password</a></li>
|
|
<li><a class="dropdown-item" href="../two-factor-auth.html">Two factor authentication</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Specialty</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../404.html">404 Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Help Center</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../faq.html">Faq Page</a></li>
|
|
<li><a class="dropdown-item" href="../terms-conditions.html">Terms & Conditions</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item" href="../style-guide.html">Style Guide</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-icon d-flex">
|
|
<ul class="navbar-nav flex-row align-items-center">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" id="btnFullscreen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen" viewBox="0 0 16 16">
|
|
<path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link dark-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon" viewBox="0 0 16 16">
|
|
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278M4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link light-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high" viewBox="0 0 16 16">
|
|
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li class="nav-item dropdown user-menu user-menu-custom">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<div class="profile-element d-flex align-items-center flex-shrink-0 p-0 text-start">
|
|
<div class="avatar online">
|
|
<img src="assets/dist/img/avatar/01.jpg" class="img-fluid rounded-circle" alt="">
|
|
</div>
|
|
<div class="profile-text">
|
|
<h6 class="m-0 fw-medium fs-14">Naeem Khan</h6>
|
|
<span>example@gmail.com</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-header d-sm-none">
|
|
<a href="" class="header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
|
</div>
|
|
<div class="user-header">
|
|
<div class="img-user">
|
|
<img src="assets/dist/img/avatar/01.jpg" alt="">
|
|
</div><!-- img-user -->
|
|
<h6>Naeem Khan</h6>
|
|
<span>example@gmail.com</span>
|
|
</div><!-- user-header -->
|
|
<a href="profile.html" class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
|
|
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664z" />
|
|
</svg>
|
|
My Profile</a>
|
|
<a href="profile.html" class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
|
|
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" />
|
|
</svg>
|
|
Edit Profile</a>
|
|
<a href="" class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-shuffle" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5" />
|
|
<path d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z" />
|
|
</svg>
|
|
Activity Logs</a>
|
|
<a href="setting-app.html" class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
|
|
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
|
|
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
|
|
</svg>
|
|
Account Settings</a>
|
|
<a href="../sign-in.html" class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z" />
|
|
<path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
|
|
</svg>
|
|
Sign Out</a>
|
|
</div>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<i class="fa-solid fa-bars fs-18"></i>
|
|
</button>
|
|
</nav>
|
|
<!-- End /. navbar -->
|
|
<div class="body-content">
|
|
<div class="decoration blur-2"></div>
|
|
<div class="decoration blur-3"></div>
|
|
<div class="container-xxl">
|
|
<div class="chat-container m-0 overflow-hidden position-relative rounded-4 row">
|
|
<div class="chat-list__sidebar p-0">
|
|
<div class="chat-list__search position-relative">
|
|
<form class="form-inline position-relative">
|
|
<input type="search" class="form-control" placeholder="People Groups and Messages">
|
|
<button type="button" class="btn btn-link loop">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<button class="btn create" data-bs-toggle="modal" data-bs-target="#startnewchat">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
|
|
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" />
|
|
</svg>
|
|
</button>
|
|
</div><!--/.chat list search-->
|
|
<ul class="chat-list__sidebar-tabs nav nav-tabs border-0" id="sidebarTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="chat-tab" data-bs-toggle="tab" href="#chat" role="tab" aria-controls="chat" aria-selected="true">
|
|
<div class="position-relative">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-chat-square-text" viewBox="0 0 16 16">
|
|
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
|
|
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5" />
|
|
</svg>
|
|
<div class="counts">5</div>
|
|
</div><span class="d-block fs-11 fw-semibold text-truncate">Chats</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="phone-tab" data-bs-toggle="tab" href="#phone" role="tab" aria-controls="phone" aria-selected="true">
|
|
<div class="position-relative">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
|
|
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" />
|
|
</svg>
|
|
</div><span class="d-block fs-11 fw-semibold text-truncate">Online users</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contacts-tab" data-bs-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">
|
|
<div class="position-relative">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
|
|
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1z" />
|
|
</svg>
|
|
</div><span class="d-block fs-11 fw-semibold text-truncate">Contacts</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="notifications-tab" data-bs-toggle="tab" href="#notifications" role="tab" aria-controls="notifications" aria-selected="false">
|
|
<div class="position-relative">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
|
|
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6" />
|
|
</svg>
|
|
<div class="counts">3</div>
|
|
</div><span class="d-block fs-11 fw-semibold text-truncate">Notifications</span>
|
|
</a>
|
|
</li>
|
|
</ul><!--/.chat list sidebar tabs-->
|
|
<div class="tab-content" id="sidebarTabContent">
|
|
<div class="tab-pane fade show active" id="chat" role="tabpanel" aria-labelledby="chat-tab">
|
|
<div class="chat-list__in position-relative">
|
|
<h2>Recent Chat</h2>
|
|
<div class="nav chat-list" role="tablist">
|
|
<a class="item-list item-list__chat d-flex align-items-start unseen active" id="list-item1-tab" data-bs-toggle="tab" href="#list-item1" role="tab" aria-controls="list-item1" aria-selected="true">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/01.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
<div class="new bg-yellow"><span>9</span> </div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Alexander Kaminski</h5>
|
|
<span>Sat</span>
|
|
<p>A new feature has been updated to your...</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a class="item-list item-list__chat d-flex align-items-start unseen" id="list-item2-tab" data-bs-toggle="tab" href="#list-item2" role="tab" aria-controls="list-item2" aria-selected="true">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/02.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
<div class="new bg-pink"><span>+10</span></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Edwin Martins</h5>
|
|
<span>10:05PM</span>
|
|
<p>How can i improve my chances of getting a deposit?</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a class="item-list item-list__chat d-flex align-items-start seen" id="list-item3-tab" data-bs-toggle="tab" href="#list-item3" role="tab" aria-controls="list-item3" aria-selected="true">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/03.jpg" alt="avatar">
|
|
<div class="status ofline"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Gabriel North</h5>
|
|
<span>Tus</span>
|
|
<p>Hey Chris, could i ask you to help me out with variation...</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__chat d-flex align-items-start seen">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/04.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Ethan Blackwood</h5>
|
|
<span>1/22/2019</span>
|
|
<p>By injected humour, or randomised words which...</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__chat d-flex align-items-start seen">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/02.jpg" alt="avatar">
|
|
<div class="status ofline"></div>
|
|
<div class="new bg-pink"><span>10</span></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Alexander Steele</h5>
|
|
<span>1/18/2019</span>
|
|
<p>No more running out of the office at 4pm on Fridays!</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__chat d-flex align-items-start seen">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/01.jpg" alt="avatar">
|
|
<div class="status ofline"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Marcus Knight</h5>
|
|
<span>1/09/2019</span>
|
|
<p>All your favourite books at your reach! We are now mobile.</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__chat d-flex align-items-start unseen">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/02.jpg" alt="avatar">
|
|
<div class="status"></div>
|
|
<div class="new bg-gray"><span>?</span></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Alexander Kaminski</h5>
|
|
<span>Feb 10</span>
|
|
<p>Hi Keith, I'd like to add you as a contact.</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__chat d-flex align-items-start seen">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/03.jpg" alt="avatar">
|
|
<div class="status"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Pranoti Deshpande</h5>
|
|
<span>Feb 9</span>
|
|
<p>Dear Deborah, your Thai massage is today at 5pm.</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__chat d-flex align-items-start unseen">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/04.jpg" alt="avatar">
|
|
<div class="status"></div>
|
|
<div class="new bg-green"><span>+10</span></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Edwin Martins</h5>
|
|
<span>Thu</span>
|
|
<p>Unfortunately your session today has been cancelled!</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="phone" role="tabpanel" aria-labelledby="phone-tab">
|
|
<div class="chat-list__in position-relative">
|
|
<h2>Online Users</h2>
|
|
<div class="online-visitor">
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">visitor.75327</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">Pawel</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">Visitor.13150</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">visitor.65652</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">visitor.75327</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">visitor.95343</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">Visitor.13150</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
<a href="#" class="visitor-history" data-bs-toggle="popover" data-trigger="hover" data-placement="right" title="User Info" data-content="<div class='chat-user__info chat-user__info-popover user-info d-flex align-items-center'><div class='avatar'><img src='assets/dist/img/avatar/avatar-5.png' alt='avatar'><div class='status online'></div></div><div class='info-text'><table class='table m-0'><tbody><tr><td class='user-info-first'>Name</td><td class='text-muted'>Edwin Martins</td></tr><tr><td class='user-info-first'>ID</td><td class='text-muted'>123</td></tr><tr><td class='user-info-first'>E-mail</td><td class='text-muted'>example@email.com</td></tr><tr><td class='user-info-first'>URL</td><td class='text-muted'><a href='#' class='text-muted'>https://easital.com/</a></td></tr></tbody></table></div></div>">
|
|
<div><span class="visitor-id">visitor.65652</span><span class="source-link">https://easital.com/</span></div>
|
|
</a><!--/.visitor history-->
|
|
</div><!--/.online visitor-->
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
|
|
<div class="chat-list__in position-relative">
|
|
<h2>Contacts</h2>
|
|
<div class="nav contact-list">
|
|
<a class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/01.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Ethan Blackwood</h5>
|
|
<p>Dhaka, Bangladesh</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/02.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
<div class="new bg-pink"><span>+10</span></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Shafiqul Hasan</h5>
|
|
<p>Douala, Cameroon</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/03.jpg" alt="avatar">
|
|
<div class="status ofline"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Gabriel North</h5>
|
|
<p>Abuja, Nigeria</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/04.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Ethan Blackwood</h5>
|
|
<p>Kampala, Uganda</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/05.jpg" alt="avatar">
|
|
<div class="status ofline"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Alexander Steele</h5>
|
|
<p>London, United Kingdom</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/06.jpg" alt="avatar">
|
|
<div class="status ofline"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Marcus Knight</h5>
|
|
<p>Berlin, Germany</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/07.jpg" alt="avatar">
|
|
<div class="status"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Alexander Kaminski</h5>
|
|
<p>Douala, Cameroon</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/01.jpg" alt="avatar">
|
|
<div class="status"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Pranoti Deshpande</h5>
|
|
<p>Honolulu, Hawaii</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/02.jpg" alt="avatar">
|
|
<div class="status"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Edwin Martins</h5>
|
|
<p>Nairobi, Kenya</p>
|
|
</div>
|
|
<div class="person-add">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-person-check-fill" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M15.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L12.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
|
|
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
|
|
</svg>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">
|
|
<div class="chat-list__in position-relative">
|
|
<h2>Notifications</h2>
|
|
<div class="nav notification-list">
|
|
<a class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/04.jpg" alt="avatar">
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Ethan Blackwood have just sent you a new message.</h5>
|
|
<p>Thursday at 6:59PM</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/05.jpg" alt="avatar">
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Alexander Kaminski has a birthday today. Wish her all the best.</h5>
|
|
<p>Friday at 5:34PM</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/06.jpg" alt="avatar">
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Gabriel North has a birthday today. Wish him all the best.</h5>
|
|
<p>Sunday at 3:34PM</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
<a href="#" class="item-list item-list__contact d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/07.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5>Ethan Blackwood have just sent you a new message.</h5>
|
|
<p>Monday at 8:34PM</p>
|
|
</div>
|
|
</a><!--/.chat list item-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.chat list sidebar-->
|
|
<div class="tab-content chat-panel p-0">
|
|
<div class="tab-pane fade" id="list-item-empty" role="tabpanel">
|
|
<div class="message-content app-empty-page empty">
|
|
<div class="no-messages">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-quote" viewBox="0 0 16 16">
|
|
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
|
|
<path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z" />
|
|
</svg>
|
|
<p>Seems people are shy to start the chat. Break the ice send the first message.</p>
|
|
</div>
|
|
</div><!--App empty page-->
|
|
</div>
|
|
<div class="tab-pane show active" id="list-item1" role="tabpanel" aria-labelledby="list-item1-tab">
|
|
<div class="chat-header d-flex align-items-center">
|
|
<button type="button" class="btn chat-sidebar-collapse d-block d-xl-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-grid" viewBox="0 0 16 16">
|
|
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z" />
|
|
</svg>
|
|
</button>
|
|
<!--chat list sidebar collapse button-->
|
|
<!--<a href="#" class="position-relative">
|
|
<img src="assets/dist/img/avatar.png" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="status online"></div>
|
|
</a>-->
|
|
<div class="meta-info data">
|
|
<h5><a href="#">Alexander Kaminski</a></h5>
|
|
<span>Last seen 12hour ago</span>
|
|
</div>
|
|
<button class="btn d-md-block d-none" title="Start a voice call">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-telephone-outbound" viewBox="0 0 16 16">
|
|
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none" title="Start a video call">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none" title="Conversation information">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none search-btn" title="Search in conversation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-block d-lg-none chat-settings-collapse" title="Settings">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-sliders" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z" />
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button class="btn me-0" data-bs-toggle="dropdown" aria-haspopup="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
|
|
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-forward" viewBox="0 0 16 16">
|
|
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zm10.762.135a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L14.293 4H9.5a.5.5 0 0 1 0-1h4.793l-1.647-1.646a.5.5 0 0 1 0-.708z" />
|
|
</svg>
|
|
Voice Call
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z" />
|
|
</svg>
|
|
Video Call
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
Clear History
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ban" viewBox="0 0 16 16">
|
|
<path d="M15 8a6.973 6.973 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0" />
|
|
</svg>
|
|
Block Contact
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
|
|
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
|
|
</svg>
|
|
Delete Contact
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="messenger-dialog row m-0">
|
|
<div class="messenger-dialog__area p-0">
|
|
<div class="conversation-search">
|
|
<div class="d-flex">
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" />
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="search__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
|
|
<button class="btn btn-outline-secondary close-search" type="button" id="button-addon2">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.conversation search -->
|
|
<div class="align-items-center d-flex empty justify-content-center message-content overflow-y-auto p-0 position-relative">
|
|
<div class="no-messages">
|
|
<img src="assets/dist/img/message.png" alt="" height="150" class="mb-3">
|
|
<p class="mb-0">This chat is empty.<br> Be the first one to start it.</p>
|
|
</div>
|
|
</div>
|
|
<!--/.tab content-->
|
|
<div class="chat-area-bottom d-flex align-items-center">
|
|
<form class="position-relative w-100">
|
|
<button type="submit" class="align-items-center btn d-flex start-0 justify-content-center p-0 position-absolute send top-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5" />
|
|
</svg>
|
|
</button>
|
|
<textarea class="form-control" placeholder="Type a message here..." rows="1"></textarea>
|
|
<button type="submit" class="align-items-center btn d-flex end-0 justify-content-center p-0 position-absolute send top-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
|
|
<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<label>
|
|
<input type="file">
|
|
<span class="align-items-center attach btn btn-primary d-flex justify-content-center ms-3 p-0 rounded-circle text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-paperclip" viewBox="0 0 16 16">
|
|
<path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
</div><!--/.chat area bottom-->
|
|
</div>
|
|
<div class="chat-list__sidebar--right">
|
|
<div class="chat-user__info d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/01.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5 class="m-0">Alexander Kaminski</h5>
|
|
<p class="writing">Alexander typing a message</p>
|
|
</div>
|
|
</div>
|
|
<div class="chatting_indicate card-body">
|
|
<h5>Conversation With Auto bot or manual</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="d-flex align-items-center">
|
|
<label class="toggler toggler--is-active" id="autobot">Auto bot</label>
|
|
<div class="toggle">
|
|
<input type="checkbox" id="switcher" class="check">
|
|
<b class="toggle-switch"></b>
|
|
</div>
|
|
<label class="toggler" id="manual">Manual</label>
|
|
</div>
|
|
</div>
|
|
<div id="accordion" class="accordion">
|
|
<div class="">
|
|
<div class="accordion-header" id="headingThree">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
|
|
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
|
|
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1z" />
|
|
</svg>
|
|
User Details
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
|
|
<div class="card-body">
|
|
<div class="user-info">
|
|
<div class="table-responsive">
|
|
<table class="table border">
|
|
<tbody>
|
|
<tr>
|
|
<td class="user-info-first">Name</td>
|
|
<td>Alexander Kaminski</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">ID</td>
|
|
<td>123</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">E-mail</td>
|
|
<td>example@email.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">URL</td>
|
|
<td><a href="#">https://easital.com/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">Browser</td>
|
|
<td>Chrome</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingOne">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
|
|
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" />
|
|
</svg>
|
|
Edit name
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
|
|
<div class="card-body">
|
|
<h5>Edit Nickname for Alexander Kaminski</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="mb-3">
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Alexander Kaminski">
|
|
</div>
|
|
<div class="action-btn text-end">
|
|
<a href="#">Save</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingTwo">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
|
|
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" />
|
|
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7" />
|
|
</svg>
|
|
Change color
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion">
|
|
<div class="card-body">
|
|
<h5>Pick a color for this conversation</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="radio-list change-bg-color">
|
|
<input type="radio" name="color" id="red">
|
|
<label for="red" data-color="red"><span class="red"></span></label>
|
|
|
|
<input type="radio" name="color" id="green" checked>
|
|
<label for="green" data-color="green"><span class="green"></span></label>
|
|
|
|
<input type="radio" name="color" id="yellow">
|
|
<label for="yellow" data-color="yellow"><span class="yellow"></span></label>
|
|
|
|
<input type="radio" name="color" id="olive">
|
|
<label for="olive" data-color="olive"><span class="olive"></span></label>
|
|
|
|
<input type="radio" name="color" id="orange">
|
|
<label for="orange" data-color="orange"><span class="orange"></span></label>
|
|
|
|
<input type="radio" name="color" id="teal">
|
|
<label for="teal" data-color="teal"><span class="teal"></span></label>
|
|
|
|
<input type="radio" name="color" id="blue">
|
|
<label for="blue" data-color="blue"><span class="blue"></span></label>
|
|
|
|
<input type="radio" name="color" id="violet">
|
|
<label for="violet" data-color="violet"><span class="violet"></span></label>
|
|
|
|
<input type="radio" name="color" id="purple">
|
|
<label for="purple" data-color="purple"><span class="purple"></span></label>
|
|
|
|
<input type="radio" name="color" id="pink">
|
|
<label for="pink" data-color="pink"><span class="pink"></span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingFour">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
|
|
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6" />
|
|
</svg>
|
|
Notifications
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
|
|
<div class="card-body">
|
|
<h5>Conversation Notifications</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="mb-3 mb-4">
|
|
<span class="switch switch-sm">
|
|
<input type="checkbox" class="switch" id="switch1">
|
|
<label for="switch1">Receive notifications for new messages</label>
|
|
</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<span class="switch switch-sm">
|
|
<input type="checkbox" class="switch" id="switch2">
|
|
<label for="switch2">Receive notifications for reactions</label>
|
|
</span>
|
|
</div>
|
|
<div class="action-btn text-end">
|
|
<a href="#">Done</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.chat list sidebar right-->
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="list-item2" role="tabpanel" aria-labelledby="list-item2-tab">
|
|
<div class="chat-header d-flex align-items-center">
|
|
<button type="button" class="btn chat-sidebar-collapse d-block d-xl-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-grid" viewBox="0 0 16 16">
|
|
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="meta-info data">
|
|
<h5><a href="#">Edwin Martins</a></h5>
|
|
<span>Last seen 12hour ago</span>
|
|
</div>
|
|
<button class="btn d-md-block d-none" title="Start a voice call">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-telephone-outbound" viewBox="0 0 16 16">
|
|
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none" title="Start a video call">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none" title="Conversation information">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none search-btn" title="Search in conversation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-block d-lg-none chat-settings-collapse" title="Settings">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-sliders" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z" />
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button class="btn me-0" data-bs-toggle="dropdown" aria-haspopup="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
|
|
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-forward" viewBox="0 0 16 16">
|
|
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zm10.762.135a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L14.293 4H9.5a.5.5 0 0 1 0-1h4.793l-1.647-1.646a.5.5 0 0 1 0-.708z" />
|
|
</svg>
|
|
Voice Call
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z" />
|
|
</svg>
|
|
Video Call
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
Clear History
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ban" viewBox="0 0 16 16">
|
|
<path d="M15 8a6.973 6.973 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0" />
|
|
</svg>
|
|
Block Contact
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
|
|
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
|
|
</svg>
|
|
Delete Contact
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="messenger-dialog row m-0">
|
|
<div class="messenger-dialog__area p-0">
|
|
<div class="conversation-search">
|
|
<div class="d-flex">
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" />
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="search__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon4">
|
|
<button class="btn btn-outline-secondary close-search" type="button" id="button-addon4">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.conversation search -->
|
|
<div class="message-content message-content-scroll bg-text-green">
|
|
<div class="position-relative">
|
|
<div class="date">
|
|
<hr><span>Yesterday</span>
|
|
<hr>
|
|
</div>
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/01.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span class="time-ago">09:46 AM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<p>It is a long established fact that a reader will be.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message me">
|
|
<div class="text-main">
|
|
<span class="time-ago">11:32 AM</span>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p> By the readable content of a page when looking at its?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/01.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span class="time-ago">02:56 PM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message me">
|
|
<div class="text-main">
|
|
<span class="time-ago">10:21 PM</span>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p>Roger that boss!</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/01.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span class="time-ago">11:07 PM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<p> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="date">
|
|
<hr><span>Today</span>
|
|
<hr>
|
|
</div><!--/.date-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/01.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span>11:07 PM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<div class="align-items-center attachment d-flex gap-2">
|
|
<button class="align-items-center attach btn btn-primary d-flex justify-content-center p-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-hdd" viewBox="0 0 16 16">
|
|
<path d="M4.5 11a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M3 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" />
|
|
<path d="M16 11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V9.51c0-.418.105-.83.305-1.197l2.472-4.531A1.5 1.5 0 0 1 4.094 3h7.812a1.5 1.5 0 0 1 1.317.782l2.472 4.53c.2.368.305.78.305 1.198zM3.655 4.26 1.592 8.043C1.724 8.014 1.86 8 2 8h12c.14 0 .276.014.408.042L12.345 4.26a.5.5 0 0 0-.439-.26H4.094a.5.5 0 0 0-.44.26zM1 10v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1" />
|
|
</svg>
|
|
</button>
|
|
<div class="file">
|
|
<h5><a href="#">Documentations.pdf</a></h5>
|
|
<span>21kb Document</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message me">
|
|
<div class="text-main">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-all" viewBox="0 0 16 16">
|
|
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
|
|
<path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708" />
|
|
</svg>
|
|
10:21 PM</span>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p> If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/01.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<div class="text-group">
|
|
<div class="text typing">
|
|
<div class="wave">
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
</div>
|
|
</div>
|
|
<div class="chat-area-bottom d-flex align-items-center">
|
|
<form class="position-relative w-100">
|
|
<button type="submit" class="align-items-center btn d-flex start-0 justify-content-center p-0 position-absolute send top-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5" />
|
|
</svg>
|
|
</button>
|
|
<textarea class="form-control" placeholder="Type a message here..." rows="1"></textarea>
|
|
<button type="submit" class="align-items-center btn d-flex end-0 justify-content-center p-0 position-absolute send top-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
|
|
<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<label>
|
|
<input type="file">
|
|
<span class="align-items-center attach btn btn-primary d-flex justify-content-center ms-3 p-0 rounded-circle text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-paperclip" viewBox="0 0 16 16">
|
|
<path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
</div><!--/.chat area bottom-->
|
|
</div>
|
|
<div class="chat-list__sidebar--right">
|
|
<div class="chat-user__info d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/01.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5 class="m-0">Edwin Martins</h5>
|
|
<p class="writing">Mozammel typing a message</p>
|
|
</div>
|
|
</div>
|
|
<div class="chatting_indicate card-body">
|
|
<h5>Conversation With Auto bot or manual</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="d-flex align-items-center">
|
|
<label class="toggler toggler--is-active" id="autobot2">Auto bot</label>
|
|
<div class="toggle">
|
|
<input type="checkbox" id="switcher2" class="check">
|
|
<b class="toggle-switch"></b>
|
|
</div>
|
|
<label class="toggler" id="manual2">Manual</label>
|
|
</div>
|
|
</div>
|
|
<div id="accordion2" class="accordion">
|
|
<div class="">
|
|
<div class="accordion-header" id="headingThree2">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
|
|
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
|
|
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1z" />
|
|
</svg>
|
|
User Details
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseThree2" class="collapse" aria-labelledby="headingThree2" data-parent="#accordion2">
|
|
<div class="card-body">
|
|
<div class="user-info">
|
|
<div class="table-responsive">
|
|
<table class="table border">
|
|
<tbody>
|
|
<tr>
|
|
<td class="user-info-first">Name</td>
|
|
<td>Alexander Kaminski</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">ID</td>
|
|
<td>123</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">E-mail</td>
|
|
<td>example@email.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">URL</td>
|
|
<td><a href="#">https://easital.com/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">Browser</td>
|
|
<td>Chrome</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingOne2">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="false" aria-controls="collapseOne2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
|
|
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" />
|
|
</svg>
|
|
Edit name
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseOne2" class="collapse" aria-labelledby="headingOne2" data-parent="#accordion2">
|
|
<div class="card-body">
|
|
<h5>Edit Nickname for Alexander Kaminski</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="mb-3">
|
|
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Alexander Kaminski">
|
|
</div>
|
|
<div class="action-btn text-end">
|
|
<a href="#">Save</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingTwo2">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="true" aria-controls="collapseTwo2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
|
|
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" />
|
|
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7" />
|
|
</svg>
|
|
Change color
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseTwo2" class="collapse show" aria-labelledby="headingTwo2" data-parent="#accordion2">
|
|
<div class="card-body">
|
|
<h5>Pick a color for this conversation</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="radio-list change-bg-color">
|
|
<input type="radio" name="color" id="red2">
|
|
<label for="red2" data-color="red"><span class="red"></span></label>
|
|
|
|
<input type="radio" name="color" id="green2" checked>
|
|
<label for="green2" data-color="green"><span class="green"></span></label>
|
|
|
|
<input type="radio" name="color" id="yellow2">
|
|
<label for="yellow2" data-color="yellow"><span class="yellow"></span></label>
|
|
|
|
<input type="radio" name="color" id="olive2">
|
|
<label for="olive2" data-color="olive"><span class="olive"></span></label>
|
|
|
|
<input type="radio" name="color" id="orange2">
|
|
<label for="orange2" data-color="orange"><span class="orange"></span></label>
|
|
|
|
<input type="radio" name="color" id="teal2">
|
|
<label for="teal2" data-color="teal"><span class="teal"></span></label>
|
|
|
|
<input type="radio" name="color" id="blue2">
|
|
<label for="blue2" data-color="blue"><span class="blue"></span></label>
|
|
|
|
<input type="radio" name="color" id="violet2">
|
|
<label for="violet2" data-color="violet"><span class="violet"></span></label>
|
|
|
|
<input type="radio" name="color" id="purple2">
|
|
<label for="purple2" data-color="purple"><span class="purple"></span></label>
|
|
|
|
<input type="radio" name="color" id="pink2">
|
|
<label for="pink2" data-color="pink"><span class="pink"></span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingFour2">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour2" aria-expanded="false" aria-controls="collapseFour2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
|
|
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6" />
|
|
</svg>
|
|
Notifications
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseFour2" class="collapse" aria-labelledby="headingFour2" data-parent="#accordion2">
|
|
<div class="card-body">
|
|
<h5>Conversation Notifications</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="mb-3 mb-4">
|
|
<span class="switch switch-sm">
|
|
<input type="checkbox" class="switch" id="switch3">
|
|
<label for="switch3">Receive notifications for new messages</label>
|
|
</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<span class="switch switch-sm">
|
|
<input type="checkbox" class="switch" id="switch4">
|
|
<label for="switch4">Receive notifications for reactions</label>
|
|
</span>
|
|
</div>
|
|
<div class="action-btn text-end">
|
|
<a href="#">Done</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.chat list sidebar right-->
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="list-item3" role="tabpanel" aria-labelledby="list-item3-tab">
|
|
<div class="chat-header d-flex align-items-center">
|
|
<button type="button" class="btn chat-sidebar-collapse d-block d-xl-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-grid" viewBox="0 0 16 16">
|
|
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="meta-info data mr-auto">
|
|
<h5><a href="#">Gabriel North</a></h5>
|
|
<span>Last seen 12hour ago</span>
|
|
</div>
|
|
<button class="btn d-md-block d-none" title="Start a voice call">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-telephone-outbound" viewBox="0 0 16 16">
|
|
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none" title="Start a video call">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none" title="Conversation information">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-md-block d-none search-btn" title="Search in conversation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn d-block d-lg-none chat-settings-collapse" title="Settings">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-sliders" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z" />
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button class="btn me-0" data-bs-toggle="dropdown" aria-haspopup="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
|
|
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-forward" viewBox="0 0 16 16">
|
|
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zm10.762.135a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L14.293 4H9.5a.5.5 0 0 1 0-1h4.793l-1.647-1.646a.5.5 0 0 1 0-.708z" />
|
|
</svg>
|
|
Voice Call
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z" />
|
|
</svg>
|
|
Video Call
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
Clear History
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ban" viewBox="0 0 16 16">
|
|
<path d="M15 8a6.973 6.973 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0" />
|
|
</svg>
|
|
Block Contact
|
|
</button>
|
|
<button class="dropdown-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
|
|
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
|
|
</svg>
|
|
Delete Contact
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="messenger-dialog row m-0">
|
|
<div class="messenger-dialog__area p-0">
|
|
<div class="conversation-search">
|
|
<div class="d-flex">
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5" />
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="input-group">
|
|
<div class="search__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon5">
|
|
<button class="btn btn-outline-secondary close-search" type="button" id="button-addon5">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.conversation search -->
|
|
<div class="message-content message-content-scroll bg-text-green">
|
|
<div class="position-relative">
|
|
<div class="date">
|
|
<hr><span>Yesterday</span>
|
|
<hr>
|
|
</div>
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/03.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span class="time-ago">09:46 AM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<p>It is a long established fact that a reader will be.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message me">
|
|
<div class="text-main">
|
|
<span class="time-ago">11:32 AM</span>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p> By the readable content of a page when looking at its?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/03.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span class="time-ago">02:56 PM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message me">
|
|
<div class="text-main">
|
|
<span class="time-ago">10:21 PM</span>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p>Roger that boss!</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/03.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span class="time-ago">11:07 PM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<p> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="date">
|
|
<hr><span>Today</span>
|
|
<hr>
|
|
</div><!--/.date-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/03.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<span>11:07 PM</span>
|
|
<div class="text-group">
|
|
<div class="text">
|
|
<div class="align-items-center attachment d-flex gap-2">
|
|
<button class="align-items-center attach btn btn-primary d-flex justify-content-center p-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-hdd" viewBox="0 0 16 16">
|
|
<path d="M4.5 11a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M3 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" />
|
|
<path d="M16 11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V9.51c0-.418.105-.83.305-1.197l2.472-4.531A1.5 1.5 0 0 1 4.094 3h7.812a1.5 1.5 0 0 1 1.317.782l2.472 4.53c.2.368.305.78.305 1.198zM3.655 4.26 1.592 8.043C1.724 8.014 1.86 8 2 8h12c.14 0 .276.014.408.042L12.345 4.26a.5.5 0 0 0-.439-.26H4.094a.5.5 0 0 0-.44.26zM1 10v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1" />
|
|
</svg>
|
|
</button>
|
|
<div class="file">
|
|
<h5><a href="#">Documentations.pdf</a></h5>
|
|
<span>21kb Document</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message me">
|
|
<div class="text-main">
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-all" viewBox="0 0 16 16">
|
|
<path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z" />
|
|
<path d="m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708" />
|
|
</svg>
|
|
10:21 PM</span>
|
|
<div class="text-group me">
|
|
<div class="text me">
|
|
<p> If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
<div class="message">
|
|
<img class="avatar" src="assets/dist/img/avatar/03.jpg" data-bs-toggle="tooltip" data-placement="top" title="" alt="avatar" data-original-title="Keith">
|
|
<div class="text-main">
|
|
<div class="text-group">
|
|
<div class="text typing">
|
|
<div class="wave">
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.message-->
|
|
</div>
|
|
</div>
|
|
<!--/.tab content-->
|
|
<div class="chat-area-bottom d-flex align-items-center">
|
|
<form class="position-relative w-100">
|
|
<button type="submit" class="align-items-center btn d-flex start-0 justify-content-center p-0 position-absolute send top-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5m4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5" />
|
|
</svg>
|
|
</button>
|
|
<textarea class="form-control" placeholder="Type a message here..." rows="1"></textarea>
|
|
<button type="submit" class="align-items-center btn d-flex end-0 justify-content-center p-0 position-absolute send top-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
|
|
<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<label>
|
|
<input type="file">
|
|
<span class="align-items-center attach btn btn-primary d-flex justify-content-center ms-3 p-0 rounded-circle text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-paperclip" viewBox="0 0 16 16">
|
|
<path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
</div><!--/.chat area bottom-->
|
|
</div>
|
|
<div class="chat-list__sidebar--right">
|
|
<div class="chat-user__info d-flex align-items-center">
|
|
<div class="avatar">
|
|
<img src="assets/dist/img/avatar/03.jpg" alt="avatar">
|
|
<div class="status online"></div>
|
|
</div>
|
|
<div class="info-text">
|
|
<h5 class="m-0">Gabriel North</h5>
|
|
<p class="writing">Tuhin typing a message</p>
|
|
</div>
|
|
</div>
|
|
<div class="chatting_indicate card-body">
|
|
<h5>Conversation With Auto bot or manual</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="d-flex align-items-center">
|
|
<label class="toggler toggler--is-active" id="autobot3">Auto bot</label>
|
|
<div class="toggle">
|
|
<input type="checkbox" id="switcher3" class="check">
|
|
<b class="toggle-switch"></b>
|
|
</div>
|
|
<label class="toggler" id="manual3">Manual</label>
|
|
</div>
|
|
</div>
|
|
<div id="accordion3" class="accordion">
|
|
<div class="">
|
|
<div class="accordion-header" id="headingThree3">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
|
|
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
|
|
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1z" />
|
|
</svg>
|
|
User Details
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseThree3" class="collapse" aria-labelledby="headingThree3" data-parent="#accordion3">
|
|
<div class="card-body">
|
|
<div class="user-info">
|
|
<div class="table-responsive">
|
|
<table class="table border">
|
|
<tbody>
|
|
<tr>
|
|
<td class="user-info-first">Name</td>
|
|
<td>Alexander Kaminski</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">ID</td>
|
|
<td>123</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">E-mail</td>
|
|
<td>example@email.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">URL</td>
|
|
<td><a href="#">https://easital.com/</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="user-info-first">Browser</td>
|
|
<td>Chrome</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingOne3">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne3" aria-expanded="false" aria-controls="collapseOne3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16">
|
|
<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" />
|
|
</svg>
|
|
Edit name
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseOne3" class="collapse" aria-labelledby="headingOne3" data-parent="#accordion3">
|
|
<div class="card-body">
|
|
<h5>Edit Nickname for Alexander Kaminski</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="mb-3">
|
|
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Alexander Kaminski">
|
|
</div>
|
|
<div class="action-btn text-end">
|
|
<a href="#">Save</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingTwo3">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="" data-bs-toggle="collapse" data-bs-target="#collapseTwo3" aria-expanded="true" aria-controls="collapseTwo3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
|
|
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3" />
|
|
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7" />
|
|
</svg>
|
|
Change color
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseTwo3" class="collapse show" aria-labelledby="headingTwo3" data-parent="#accordion3">
|
|
<div class="card-body">
|
|
<h5>Pick a color for this conversation</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="radio-list change-bg-color">
|
|
<input type="radio" name="color" id="red3">
|
|
<label for="red3" data-color="red"><span class="red"></span></label>
|
|
|
|
<input type="radio" name="color" id="green3" checked>
|
|
<label for="green3" data-color="green"><span class="green"></span></label>
|
|
|
|
<input type="radio" name="color" id="yellow3">
|
|
<label for="yellow3" data-color="yellow"><span class="yellow"></span></label>
|
|
|
|
<input type="radio" name="color" id="olive3">
|
|
<label for="olive3" data-color="olive"><span class="olive"></span></label>
|
|
|
|
<input type="radio" name="color" id="orange3">
|
|
<label for="orange3" data-color="orange"><span class="orange"></span></label>
|
|
|
|
<input type="radio" name="color" id="teal3">
|
|
<label for="teal3" data-color="teal"><span class="teal"></span></label>
|
|
|
|
<input type="radio" name="color" id="blue3">
|
|
<label for="blue3" data-color="blue"><span class="blue"></span></label>
|
|
|
|
<input type="radio" name="color" id="violet3">
|
|
<label for="violet3" data-color="violet"><span class="violet"></span></label>
|
|
|
|
<input type="radio" name="color" id="purple3">
|
|
<label for="purple3" data-color="purple"><span class="purple"></span></label>
|
|
|
|
<input type="radio" name="color" id="pink3">
|
|
<label for="pink3" data-color="pink"><span class="pink"></span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="accordion-header" id="headingFour3">
|
|
<h5 class="card-header__title mb-0">
|
|
<a href="javascript:void(0)" class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour3" aria-expanded="false" aria-controls="collapseFour3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
|
|
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6" />
|
|
</svg>
|
|
Notifications
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseFour3" class="collapse" aria-labelledby="headingFour3" data-parent="#accordion3">
|
|
<div class="card-body">
|
|
<h5>Conversation Notifications</h5>
|
|
<p>Everyone in this conversation will see this.</p>
|
|
<div class="mb-3 mb-4">
|
|
<span class="switch switch-sm">
|
|
<input type="checkbox" class="switch" id="switch5">
|
|
<label for="switch5">Receive notifications for new messages</label>
|
|
</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<span class="switch switch-sm">
|
|
<input type="checkbox" class="switch" id="switch6">
|
|
<label for="switch6">Receive notifications for reactions</label>
|
|
</span>
|
|
</div>
|
|
<div class="action-btn text-end">
|
|
<a href="#">Done</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/.chat list sidebar right-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-overlay"></div>
|
|
</div><!--/.chat container-->
|
|
</div>
|
|
</div>
|
|
<!--/.body content-->
|
|
</div>
|
|
<!--/.main content-->
|
|
<footer class="footer-content">
|
|
<div class="align-items-center d-flex footer-text gap-3 justify-content-between">
|
|
<div class="copy">© 2022 ListOn - All Rights Reserved</div>
|
|
<div class="credit">Developed by: <a href="#">ListOn</a> 🌺💚</div>
|
|
</div>
|
|
</footer>
|
|
<!--/.footer content-->
|
|
<div class="overlay"></div>
|
|
</div>
|
|
<!--/.wrapper-->
|
|
</div>
|
|
<!-- Global script(used by all pages) -->
|
|
<script src="assets/plugins/jQuery/jquery.min.js"></script>
|
|
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/plugins/metisMenu/metisMenu.min.js"></script>
|
|
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
|
|
<!-- Third Party Scripts(used by this page) -->
|
|
|
|
<!-- Page Scripts(used by all page) -->
|
|
<script src="assets/dist/js/app.min.js"></script>
|
|
<!-- Page Active Scripts(used by this page) -->
|
|
<script src="assets/dist/js/dashboard.js"></script>
|
|
<script src="assets/dist/js/messenger.active.js"></script>
|
|
</body>
|
|
|
|
</html> |