File: /mnt/data/smarthr-co-in/demo/mobile/live/bootstrap5/template/task-view.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#3a57c4">
<title>SmartHR - HTML Mobile Template</title>
<!-- Favicon -->
<link rel="icon" href="assets/img/favicon.png" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Font-Awesome CSS -->
<link rel="stylesheet" href="assets/plugins/css/all.css">
<link rel="stylesheet" href="assets/plugins/css/fontawesome.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main-wrapper">
<div class="task-view">
<!-- Header -->
<div class="navbar two-action no-hairline">
<div class="navbar-inner d-flex align-items-center justify-content-between">
<div class="left me-0">
<a href="tasks.html" class="back link d-flex align-items-center">
<i class="fa fa-angle-left"></i>
<span>Back</span>
</a>
</div>
<div class="sliding custom-title">Task</div>
<div class="right d-flex">
<a href="#" class="link icon-only circle-tick"><i class="far fa-check-circle"></i></a>
<a href="#" data-bs-toggle="dropdown" aria-expanded="true" class="link dropdown-link ms-1"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right header_drop_icon">
<a href="#" class="dropdown-item">Delete</a>
<a href="#" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</div>
<!-- /Header -->
<div class="page-content">
<div class="project-view task-view-content">
<div class="card-box">
<h4 class="project-title">Hospital Administration Phase 1</h4>
<div class="pro-info clearfix">
<div class="task-assign">
<span class="assign-title">Assigned to </span>
<a href="#">
<img width="24" height="24" alt="" class="avatar" src="assets/img/user.jpg">
</a>
<a class="followers-add" href="#" data-bs-toggle="modal" data-bs-target="#add-asign"><i class="material-icons">add</i></a>
</div>
<div>
<span class="due-icon"><i class="far fa-calendar-alt"></i> <span>Due Date</span></span>
</div>
</div>
</div>
<div class="card-box chats">
<div class="task-information">
<span class="task-info-line"><a href="#" class="task-user">Lesley Grauer</a> <span class="task-info-subject">created task</span></span>
<div class="task-time">Jan 26, 2015</div>
</div>
<div class="task-information">
<span class="task-info-line"><a href="#" class="task-user">Lesley Grauer</a> <span class="task-info-subject">added to Hospital Administration</span></span>
<div class="task-time">Jan 26, 2015</div>
</div>
<div class="task-information">
<span class="task-info-line"><a href="#" class="task-user">Lesley Grauer</a> <span class="task-info-subject">assigned to John Doe</span></span>
<div class="task-time">Jan 26, 2015</div>
</div>
<div class="task-information">
<span class="task-info-line"><a href="#" class="task-user">John Doe</a> <span class="task-info-subject">changed the due date to Sep 28</span> </span>
<div class="task-time">9:09pm</div>
</div>
<div class="task-information">
<span class="task-info-line"><a href="#" class="task-user">John Doe</a> <span class="task-info-subject">assigned to you</span></span>
<div class="task-time">9:10pm</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a class="avatar" href="profile.html">
<img class="img-fluid rounded-circle" src="assets/img/user.jpg" alt="John Doe">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="task-chat-user">John Doe</span> <span class="chat-time">8:35 am</span>
<p>I'm just looking around.</p>
<p>Will you tell me something about yourself? </p>
</div>
</div>
</div>
</div>
<div class="completed-task-msg"><span class="task-success"><a href="#">John Doe</a> completed this task.</span> <span class="task-time">Today at 9:27am</span></div>
<div class="chat chat-left">
<div class="chat-avatar">
<a class="avatar" href="profile.html">
<img class="img-fluid rounded-circle" src="assets/img/user.jpg" alt="John Doe">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="task-chat-user">John Doe</span> <span class="file-attached">attached 3 files <i class="fa fa-paperclip"></i></span> <span class="chat-time">Dec 17, 2014 at 4:32am</span>
<ul class="attach-list">
<li><i class="fa fa-file"></i> <a href="#">project_document.avi</a></li>
<li><i class="fa fa-file"></i> <a href="#">video_conferencing.psd</a></li>
<li><i class="fa fa-file"></i> <a href="#">landing_page.psd</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a class="avatar" href="/profile/">
<img class="img-fluid rounded-circle" src="assets/img/user.jpg" alt="John Doe">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="task-chat-user">Jeffery Lalor</span> <span class="file-attached">attached file <i class="fa fa-paperclip"></i></span> <span class="chat-time">Yesterday at 9:16pm</span>
<ul class="attach-list">
<li class="pdf-file"><i class="far fa-file-pdf"></i> <a href="#">Document_2016.pdf</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a class="avatar" href="/profile/">
<img class="img-fluid rounded-circle" src="assets/img/user.jpg" alt="John Doe">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="task-chat-user">Jeffery Lalor</span> <span class="file-attached">attached file <i class="fa fa-paperclip"></i></span> <span class="chat-time">Today at 12:42pm</span>
<ul class="attach-list">
<li class="img-file">
<div class="attach-img-download"><a href="#">avatar-1.jpg</a></div>
<div class="task-attach-img"><img alt="" src="assets/img/user.jpg"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="task-information"><span class="task-info-line"><a href="#" class="task-user">John Doe</a> <span class="task-info-subject">marked task as incomplete</span></span>
<div class="task-time">1:16pm</div>
</div>
</div>
</div>
</div>
<div class="footer-fixed">
<div class="project-members task-followers">
<span class="followers-title">Followers</span>
<a href="#">
<img width="20" height="20" alt="" class="avatar" src="assets/img/user.jpg">
</a>
<a href="#">
<img width="20" height="20" alt="" class="avatar" src="assets/img/user.jpg">
</a>
<a href="#">
<img width="20" height="20" alt="" class="avatar" src="assets/img/user.jpg">
</a>
<a href="#">
<img width="20" height="20" alt="" class="avatar" src="assets/img/user.jpg">
</a>
<a class="followers-add" href="#" data-bs-toggle="modal" data-bs-target="#add-followers"><i class="material-icons">add</i></a>
</div>
</div>
</div>
<!-- Add Asign Modal -->
<div class="modal fade custom-modal-popup" id="add-asign" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalLabel">Add Followers</h6>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="searchbar">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search">
<i class="fas fa-search"></i>
<span class="input-clear-button"></span>
</div>
</div>
</form>
<ul class="task-user-list">
<li>
<div class="task-user-cont">
<div class="taskuser-img">
<span class="avatar">R</span>
</div>
<div class="taskuser-info">
<div class="user-name">Richard Miles</div>
<span class="designation">Web Developer</span>
</div>
</div>
</li>
<li>
<div class="task-user-cont">
<div class="taskuser-img">
<span class="avatar">J</span>
</div>
<div class="taskuser-info">
<div class="user-name">John Smith</div>
<span class="designation">Android Developer</span>
</div>
</div>
</li>
<li>
<div class="task-user-cont">
<div class="taskuser-img">
<span class="avatar"><img alt="" src="assets/img/user.jpg"></span>
</div>
<div class="taskuser-info">
<div class="user-name">Jeffery Lalor</div>
<span class="designation">Team Leader</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Add Asign Modal -->
<!-- Add Followers Modal -->
<div class="modal fade custom-modal-popup" id="add-followers" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalLabel">Add Followers</h6>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="searchbar">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search">
<i class="fas fa-search"></i>
<span class="input-clear-button"></span>
</div>
</div>
</form>
<ul class="task-user-list">
<li>
<div class="task-user-cont">
<div class="taskuser-img">
<span class="avatar">J</span>
</div>
<div class="taskuser-info">
<div class="user-name">Jeffery Lalor</div>
<span class="designation">Team Leader</span>
</div>
</div>
</li>
<li>
<div class="task-user-cont">
<div class="taskuser-img">
<span class="avatar">C</span>
</div>
<div class="taskuser-info">
<div class="user-name">Catherine Manseau</div>
<span class="designation">Android Developer</span>
</div>
</div>
</li>
<li>
<div class="task-user-cont">
<div class="taskuser-img">
<span class="avatar">W</span>
</div>
<div class="taskuser-info">
<div class="user-name">Wilmer Deluna</div>
<span class="designation">Team Leader</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Add Followers Modal -->
</div>
<!-- Main Wrapper /-->
<!-- jQuery JS -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Main JS -->
<script src="assets/js/script.js"></script>
</body>
</html>