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

1738 lines
107 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Kanban Board | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
</head>
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<!-- Begin page -->
<div class="wrapper">
<!-- ========== Left Sidebar Start ========== -->
<div class="left-side-menu">
<!-- LOGO -->
<a href="index.html" class="logo text-center logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="" height="16">
</span>
<span class="logo-sm">
<img src="assets/images/logo_sm.png" alt="" height="16">
</span>
</a>
<!-- LOGO -->
<a href="index.html" class="logo text-center logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="16">
</span>
<span class="logo-sm">
<img src="assets/images/logo_sm_dark.png" alt="" height="16">
</span>
</a>
<div class="h-100" id="left-side-menu-container" data-simplebar>
<!--- Sidemenu -->
<ul class="metismenu side-nav">
<li class="side-nav-title side-nav-item">Navigation</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-home-alt"></i>
<span class="badge badge-success float-right">4</span>
<span> Dashboards </span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="dashboard-analytics.html">Analytics</a>
</li>
<li>
<a href="dashboard-crm.html">CRM</a>
</li>
<li>
<a href="index.html">Ecommerce</a>
</li>
<li>
<a href="dashboard-projects.html">Projects</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item">Apps</li>
<li class="side-nav-item">
<a href="apps-calendar.html" class="side-nav-link">
<i class="uil-calender"></i>
<span> Calendar </span>
</a>
</li>
<li class="side-nav-item">
<a href="apps-chat.html" class="side-nav-link">
<i class="uil-comments-alt"></i>
<span> Chat </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-store"></i>
<span> Ecommerce </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-ecommerce-products.html">Products</a>
</li>
<li>
<a href="apps-ecommerce-products-details.html">Products Details</a>
</li>
<li>
<a href="apps-ecommerce-orders.html">Orders</a>
</li>
<li>
<a href="apps-ecommerce-orders-details.html">Order Details</a>
</li>
<li>
<a href="apps-ecommerce-customers.html">Customers</a>
</li>
<li>
<a href="apps-ecommerce-shopping-cart.html">Shopping Cart</a>
</li>
<li>
<a href="apps-ecommerce-checkout.html">Checkout</a>
</li>
<li>
<a href="apps-ecommerce-sellers.html">Sellers</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-envelope"></i>
<span> Email </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-email-inbox.html">Inbox</a>
</li>
<li>
<a href="apps-email-read.html">Read Email</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-briefcase"></i>
<span> Projects </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-projects-list.html">List</a>
</li>
<li>
<a href="apps-projects-details.html">Details</a>
</li>
<li>
<a href="apps-projects-gantt.html">Gantt <span class="badge badge-pill badge-light-lighten font-10 float-right">New</span></a>
</li>
<li>
<a href="apps-projects-add.html">Create Project <span class="badge badge-pill badge-success-lighten font-10 float-right">New</span></a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="apps-social-feed.html" class="side-nav-link">
<i class="uil-rss"></i>
<span> Social Feed </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-clipboard-alt"></i>
<span> Tasks </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="apps-tasks.html">List</a>
</li>
<li>
<a href="apps-tasks-details.html">Details</a>
</li>
<li>
<a href="apps-kanban.html">Kanban Board</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item">Custom</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-copy-alt"></i>
<span> Pages </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="pages-profile.html">Profile</a>
</li>
<li>
<a href="pages-profile-2.html">Profile 2</a>
</li>
<li>
<a href="pages-invoice.html">Invoice</a>
</li>
<li>
<a href="pages-faq.html">FAQ</a>
</li>
<li>
<a href="pages-pricing.html">Pricing</a>
</li>
<li>
<a href="pages-maintenance.html">Maintenance</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Authentication
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="pages-login.html">Login</a>
</li>
<li>
<a href="pages-login-2.html">Login 2</a>
</li>
<li>
<a href="pages-register.html">Register</a>
</li>
<li>
<a href="pages-register-2.html">Register 2</a>
</li>
<li>
<a href="pages-logout.html">Logout</a>
</li>
<li>
<a href="pages-logout-2.html">Logout 2</a>
</li>
<li>
<a href="pages-recoverpw.html">Recover Password</a>
</li>
<li>
<a href="pages-recoverpw-2.html">Recover Password 2</a>
</li>
<li>
<a href="pages-lock-screen.html">Lock Screen</a>
</li>
<li>
<a href="pages-lock-screen-2.html">Lock Screen 2</a>
</li>
<li>
<a href="pages-confirm-mail.html">Confirm Mail</a>
</li>
<li>
<a href="pages-confirm-mail-2.html">Confirm Mail 2</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Error
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="pages-404.html">Error 404</a>
</li>
<li>
<a href="pages-404-alt.html">Error 404-alt</a>
</li>
<li>
<a href="pages-500.html">Error 500</a>
</li>
</ul>
</li>
<li>
<a href="pages-starter.html">Starter Page</a>
</li>
<li>
<a href="pages-preloader.html">With Preloader</a>
</li>
<li>
<a href="pages-timeline.html">Timeline</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="landing.html" target="_blank" class="side-nav-link">
<i class="uil-globe"></i>
<span class="badge badge-light float-right">New</span>
<span> Landing </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-window"></i>
<span> Layouts </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="layouts-horizontal.html">Horizontal</a>
</li>
<li>
<a href="layouts-detached.html">Detached</a>
</li>
</ul>
</li>
<li class="side-nav-title side-nav-item mt-1">Components</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-box"></i>
<span> Base UI </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="ui-accordions.html">Accordions</a>
</li>
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-avatars.html">Avatars</a>
</li>
<li>
<a href="ui-badges.html">Badges</a>
</li>
<li>
<a href="ui-breadcrumb.html">Breadcrumb</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-cards.html">Cards</a>
</li>
<li>
<a href="ui-carousel.html">Carousel</a>
</li>
<li>
<a href="ui-dropdowns.html">Dropdowns</a>
</li>
<li>
<a href="ui-embed-video.html">Embed Video</a>
</li>
<li>
<a href="ui-grid.html">Grid</a>
</li>
<li>
<a href="ui-list-group.html">List Group</a>
</li>
<li>
<a href="ui-media-object.html">Media Object</a>
</li>
<li>
<a href="ui-modals.html">Modals</a>
</li>
<li>
<a href="ui-notifications.html">Notifications</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-ribbons.html">Ribbons</a>
</li>
<li>
<a href="ui-spinners.html">Spinners</a>
</li>
<li>
<a href="ui-tabs.html">Tabs</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
<li>
<a href="ui-typography.html">Typography</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-package"></i>
<span> Extended UI </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="extended-dragula.html">Dragula</a>
</li>
<li>
<a href="extended-range-slider.html">Range Slider</a>
</li>
<li>
<a href="extended-ratings.html">Ratings</a>
</li>
<li>
<a href="extended-scrollbar.html">Scrollbar</a>
</li>
<li>
<a href="extended-scrollspy.html">Scrollspy</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="widgets.html" class="side-nav-link">
<i class="uil-layer-group"></i>
<span> Widgets </span>
</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-streering"></i>
<span> Icons </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="icons-dripicons.html">Dripicons</a>
</li>
<li>
<a href="icons-mdi.html">Material Design</a>
</li>
<li>
<a href="icons-unicons.html">Unicons</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-document-layout-center"></i>
<span> Forms </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="form-elements.html">Basic Elements</a>
</li>
<li>
<a href="form-advanced.html">Form Advanced</a>
</li>
<li>
<a href="form-validation.html">Validation</a>
</li>
<li>
<a href="form-wizard.html">Wizard</a>
</li>
<li>
<a href="form-fileuploads.html">File Uploads</a>
</li>
<li>
<a href="form-editors.html">Editors</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-chart"></i>
<span> Charts </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Apex Charts
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="charts-apex-area.html">Area</a>
</li>
<li>
<a href="charts-apex-bar.html">Bar</a>
</li>
<li>
<a href="charts-apex-bubble.html">Bubble</a>
</li>
<li>
<a href="charts-apex-candlestick.html">Candlestick</a>
</li>
<li>
<a href="charts-apex-column.html">Column</a>
</li>
<li>
<a href="charts-apex-heatmap.html">Heatmap</a>
</li>
<li>
<a href="charts-apex-line.html">Line</a>
</li>
<li>
<a href="charts-apex-mixed.html">Mixed</a>
</li>
<li>
<a href="charts-apex-pie.html">Pie</a>
</li>
<li>
<a href="charts-apex-radar.html">Radar</a>
</li>
<li>
<a href="charts-apex-radialbar.html">RadialBar</a>
</li>
<li>
<a href="charts-apex-scatter.html">Scatter</a>
</li>
<li>
<a href="charts-apex-sparklines.html">Sparklines</a>
</li>
</ul>
</li>
<li>
<a href="charts-brite.html">Britecharts</a>
</li>
<li>
<a href="charts-chartjs.html">Chartjs</a>
</li>
<li>
<a href="charts-sparkline.html">Sparklines</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-table"></i>
<span> Tables </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="tables-basic.html">Basic Tables</a>
</li>
<li>
<a href="tables-datatable.html">Data Tables</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-location-point"></i>
<span> Maps </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li>
<a href="maps-google.html">Google Maps</a>
</li>
<li>
<a href="maps-vector.html">Vector Maps</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link">
<i class="uil-folder-plus"></i>
<span> Multi Level </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level" aria-expanded="false">
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Second Level
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2</a>
</li>
</ul>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Third Level
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-third-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li class="side-nav-item">
<a href="javascript: void(0);" aria-expanded="false">Item 2
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-forth-level" aria-expanded="false">
<li>
<a href="javascript: void(0);">Item 2.1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2.2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- Help Box -->
<div class="help-box text-white text-center">
<a href="javascript: void(0);" class="float-right close-btn text-white">
<i class="mdi mdi-close"></i>
</a>
<img src="assets/images/help-icon.svg" height="90" alt="Helper Icon Image" />
<h5 class="mt-3">Unlimited Access</h5>
<p class="mb-3">Upgrade to plan to get access to unlimited reports</p>
<a href="javascript: void(0);" class="btn btn-outline-light btn-sm">Upgrade</a>
</div>
<!-- end Help Box -->
<!-- End Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Topbar Start -->
<div class="navbar-custom">
<ul class="list-unstyled topbar-right-menu float-right mb-0">
<li class="notification-list">
<a class="nav-link right-bar-toggle" href="javascript: void(0);">
<i class="dripicons-gear noti-icon"></i>
</a>
</li>
<li class="dropdown notification-list topbar-dropdown">
<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us.jpg" alt="user-image" class="mr-0 mr-sm-1" height="12">
<span class="align-middle d-none d-sm-inline-block">English</span> <i class="mdi mdi-chevron-down d-none d-sm-inline-block"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/germany.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">German</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/italy.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Italian</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/spain.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Spanish</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<img src="assets/images/flags/russia.jpg" alt="user-image" class="mr-1" height="12"> <span class="align-middle">Russian</span>
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="dripicons-bell noti-icon"></i>
<span class="noti-icon-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5 class="m-0">
<span class="float-right">
<a href="javascript: void(0);" class="text-dark">
<small>Clear All</small>
</a>
</span>Notification
</h5>
</div>
<div style="max-height: 230px;" data-simplebar>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
<p class="notify-details">Caleb Flakelar commented on Admin
<small class="text-muted">1 min ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info">
<i class="mdi mdi-account-plus"></i>
</div>
<p class="notify-details">New user registered.
<small class="text-muted">5 hours ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon">
<img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
<p class="notify-details">Cristina Pride</p>
<p class="text-muted mb-0 user-msg">
<small>Hi, How are you? What about our next meeting</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
<p class="notify-details">Caleb Flakelar commented on Admin
<small class="text-muted">4 days ago</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon">
<img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
<p class="notify-details">Karen Robinson</p>
<p class="text-muted mb-0 user-msg">
<small>Wow ! this admin looks good and awesome design</small>
</p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info">
<i class="mdi mdi-heart"></i>
</div>
<p class="notify-details">Carlos Crouch liked
<b>Admin</b>
<small class="text-muted">13 days ago</small>
</p>
</a>
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
View All
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle nav-user arrow-none mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
aria-expanded="false">
<span class="account-user-avatar">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
</span>
<span>
<span class="account-user-name">Dominic Keller</span>
<span class="account-position">Founder</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
<!-- item-->
<div class=" dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome !</h6>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-account-circle mr-1"></i>
<span>My Account</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-account-edit mr-1"></i>
<span>Settings</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-lifebuoy mr-1"></i>
<span>Support</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-lock-outline mr-1"></i>
<span>Lock Screen</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="mdi mdi-logout mr-1"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
<button class="button-menu-mobile open-left disable-btn">
<i class="mdi mdi-menu"></i>
</button>
<div class="app-search">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="mdi mdi-magnify"></span>
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</div>
</form>
</div>
</div>
<!-- end Topbar -->
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Tasks</a></li>
<li class="breadcrumb-item active">Kanban Board</li>
</ol>
</div>
<h4 class="page-title">Kanban Board
<a href="#" data-toggle="modal" data-target="#add-new-task-modal" class="btn btn-success btn-sm ml-3">Add New</a></h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="board">
<div class="tasks" data-plugin="dragula" data-containers='["task-list-one", "task-list-two", "task-list-three", "task-list-four"]'>
<h5 class="mt-0 task-header">TODO (3)</h5>
<div id="task-list-one" class="task-list-items">
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">18 Jul 2018</small>
<span class="badge badge-danger">High</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">iOS App home page</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
iOS
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>74</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-2.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Robert Carlile</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">18 Jul 2018</small>
<span class="badge badge-secondary">Medium</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Topnav layout design</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
Hyper
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>28</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-1.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Coder Themes</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">11 Jul 2018</small>
<span class="badge badge-success">Low</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Invite user to a project</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
CRM
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>68</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-3.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Lucas Hardy</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
</div> <!-- end company-list-1-->
</div>
<div class="tasks">
<h5 class="mt-0 task-header text-uppercase">In Progress (2)</h5>
<div id="task-list-two" class="task-list-items">
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">22 Jun 2018</small>
<span class="badge badge-secondary">Medium</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Write a release note</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
Hyper
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>17</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-5.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Sean White</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">19 Jun 2018</small>
<span class="badge badge-success">Low</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Enable analytics tracking</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
CRM
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>48</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-6.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Louis Allen</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
</div> <!-- end company-list-2-->
</div>
<div class="tasks">
<h5 class="mt-0 task-header text-uppercase">Review (4)</h5>
<div id="task-list-three" class="task-list-items">
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">2 May 2018</small>
<span class="badge badge-danger">High</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Kanban board design</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
CRM
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>65</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-1.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Coder Themes</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">7 May 2018</small>
<span class="badge badge-secondary">Medium</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Code HTML email template</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
CRM
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>106</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-9.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Zak Turnbull</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">8 Jul 2018</small>
<span class="badge badge-secondary">Medium</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Brand logo design</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
Design
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>95</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-8.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Lily Parkin</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">22 Jul 2018</small>
<span class="badge badge-danger">High</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Improve animation loader</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
CRM
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>39</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-4.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Riley Steele</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
</div> <!-- end company-list-3-->
</div>
<div class="tasks">
<h5 class="mt-0 task-header text-uppercase">Done (1)</h5>
<div id="task-list-four" class="task-list-items">
<!-- Task Item -->
<div class="card mb-0">
<div class="card-body p-3">
<small class="float-right text-muted">16 Jul 2018</small>
<span class="badge badge-success">Low</span>
<h5 class="mt-2 mb-2">
<a href="#" data-toggle="modal" data-target="#task-detail-modal" class="text-body">Dashboard design</a>
</h5>
<p class="mb-0">
<span class="pr-2 text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-briefcase-outline text-muted"></i>
Hyper
</span>
<span class="text-nowrap mb-2 d-inline-block">
<i class="mdi mdi-comment-multiple-outline text-muted"></i>
<b>287</b> Comments
</span>
</p>
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle text-muted arrow-none" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-vertical font-18"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-pencil mr-1"></i>Edit</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-delete mr-1"></i>Delete</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-plus-circle-outline mr-1"></i>Add People</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item"><i class="mdi mdi-exit-to-app mr-1"></i>Leave</a>
</div>
</div>
<p class="mb-0">
<img src="assets/images/users/avatar-10.jpg" alt="user-img" class="avatar-xs rounded-circle mr-1" />
<span class="align-middle">Harvey Dickinson</span>
</p>
</div> <!-- end card-body -->
</div>
<!-- Task Item End -->
</div> <!-- end company-list-4-->
</div>
</div> <!-- end .board-->
</div> <!-- end col -->
</div>
<!-- end row-->
</div> <!-- container -->
</div> <!-- content -->
<!-- Footer Start -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
2018 - 2020 © Hyper - Coderthemes.com
</div>
<div class="col-md-6">
<div class="text-md-right footer-links d-none d-md-block">
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Support</a>
<a href="javascript: void(0);">Contact Us</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end Footer -->
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- Right Sidebar -->
<div class="right-bar">
<div class="rightbar-title">
<a href="javascript:void(0);" class="right-bar-toggle float-right">
<i class="dripicons-cross noti-icon"></i>
</a>
<h5 class="m-0">Settings</h5>
</div>
<div class="rightbar-content h-100" data-simplebar>
<div class="p-3">
<div class="alert alert-warning" role="alert">
<strong>Customize </strong> the overall color scheme, sidebar menu, etc.
</div>
<!-- Settings -->
<h5 class="mt-3">Color Scheme</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="color-scheme-mode" value="light"
id="light-mode-check" checked />
<label class="custom-control-label" for="light-mode-check">Light Mode</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="color-scheme-mode" value="dark"
id="dark-mode-check" />
<label class="custom-control-label" for="dark-mode-check">Dark Mode</label>
</div>
<!-- Width -->
<h5 class="mt-4">Width</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="width" value="fluid" id="fluid-check" checked />
<label class="custom-control-label" for="fluid-check">Fluid</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="width" value="boxed" id="boxed-check" />
<label class="custom-control-label" for="boxed-check">Boxed</label>
</div>
<!-- Left Sidebar-->
<h5 class="mt-4">Left Sidebar</h5>
<hr class="mt-1" />
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="theme" value="default" id="default-check"
checked />
<label class="custom-control-label" for="default-check">Default</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="theme" value="light" id="light-check" />
<label class="custom-control-label" for="light-check">Light</label>
</div>
<div class="custom-control custom-switch mb-3">
<input type="radio" class="custom-control-input" name="theme" value="dark" id="dark-check" />
<label class="custom-control-label" for="dark-check">Dark</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="fixed" id="fixed-check"
checked />
<label class="custom-control-label" for="fixed-check">Fixed</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="condensed"
id="condensed-check" />
<label class="custom-control-label" for="condensed-check">Condensed</label>
</div>
<div class="custom-control custom-switch mb-1">
<input type="radio" class="custom-control-input" name="compact" value="scrollable"
id="scrollable-check" />
<label class="custom-control-label" for="scrollable-check">Scrollable</label>
</div>
<button class="btn btn-primary btn-block mt-4" id="resetBtn">Reset to Default</button>
<a href="https://themes.getbootstrap.com/product/hyper-responsive-admin-dashboard-template/"
class="btn btn-danger btn-block mt-3" target="_blank"><i class="mdi mdi-basket mr-1"></i> Purchase Now</a>
</div> <!-- end padding-->
</div>
</div>
<div class="rightbar-overlay"></div>
<!-- /Right-bar -->
<!-- Add new task modal -->
<div class="modal fade task-modal-content" id="add-new-task-modal" tabindex="-1" role="dialog" aria-labelledby="NewTaskModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="NewTaskModalLabel">Create New Task</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form class="p-2">
<div class="form-group">
<label>Project</label>
<select class="form-control form-control-light">
<option>Select</option>
<option>Hyper - Admin Dashboard</option>
<option>CRM - Design & Development</option>
<option>iOS - App Design</option>
</select>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="task-title">Title</label>
<input type="text" class="form-control form-control-light" id="task-title" placeholder="Enter title">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="task-priority2">Priority</label>
<select class="form-control form-control-light" id="task-priority2">
<option>Low</option>
<option>Medium</option>
<option>High</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="task-description">Description</label>
<textarea class="form-control form-control-light" id="task-description" rows="3"></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="task-title">Assign To</label>
<select class="form-control form-control-light" id="task-priority">
<option>Coderthemes</option>
<option>Robert Carlile</option>
<option>Louis Allen</option>
<option>Sean White</option>
<option>Riley Steele</option>
<option>Zak Turnbull</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="task-priority">Due Date</label>
<input type="text" class="form-control form-control-light" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
</div>
</div>
</div>
<div class="text-right">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Task details modal -->
<div class="modal fade task-modal-content" id="task-detail-modal" tabindex="-1" role="dialog" aria-labelledby="TaskDetailModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="TaskDetailModalLabel">iOS App home page <span class="badge badge-danger ml-2">High</span></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="p-2">
<h5 class="mt-0">Description:</h5>
<p class="text-muted mb-4">
Voluptates, illo, iste itaque voluptas corrupti ratione reprehenderit magni similique? Tempore, quos delectus asperiores
libero voluptas quod perferendis! Voluptate, quod illo rerum? Lorem ipsum dolor sit amet. With supporting text below
as a natural lead-in to additional contenposuere erat a ante.
</p>
<div class="row">
<div class="col-md-4">
<div class="mb-4">
<h5>Create Date</h5>
<p>17 March 2018 <small class="text-muted">1:00 PM</small></p>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<h5>Due Date</h5>
<p>22 December 2018 <small class="text-muted">1:00 PM</small></p>
</div>
</div>
<div class="col-md-4">
<div class="mb-4">
<h5>Asignee:</h5>
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme" class="d-inline-block">
<img src="assets/images/users/avatar-6.jpg" class="rounded-circle avatar-xs" alt="friend">
</a>
</div>
</div>
</div>
<!-- end row-->
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#home-b1" data-toggle="tab" aria-expanded="false" class="nav-link active">
Comments
</a>
</li>
<li class="nav-item">
<a href="#profile-b1" data-toggle="tab" aria-expanded="true" class="nav-link">
Files
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="home-b1">
<textarea class="form-control form-control-light mb-2" placeholder="Write message" id="example-textarea" rows="3"></textarea>
<div class="text-right">
<div class="btn-group mb-2 d-none d-sm-inline-block">
<button type="button" class="btn btn-link btn-sm text-muted font-18"><i class="dripicons-paperclip"></i></button>
</div>
<div class="btn-group mb-2 ml-2 d-none d-sm-inline-block">
<button type="button" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
<div class="media mt-2">
<img class="mr-3 avatar-sm rounded-circle" src="assets/images/users/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Jeremy Tomlinson</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis.
<div class="media mt-3">
<a class="pr-3" href="#">
<img src="assets/images/users/avatar-4.jpg" class="avatar-sm rounded-circle" alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Kathleen Thomas</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<div class="text-center mt-2">
<a href="javascript:void(0);" class="text-danger">Load more </a>
</div>
</div>
<div class="tab-pane" id="profile-b1">
<div class="card mb-1 shadow-none border">
<div class="p-2">
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar-sm">
<span class="avatar-title rounded">
.ZIP
</span>
</div>
</div>
<div class="col pl-0">
<a href="javascript:void(0);" class="text-muted font-weight-bold">Hyper-admin-design.zip</a>
<p class="mb-0">2.3 MB</p>
</div>
<div class="col-auto">
<!-- Button -->
<a href="javascript:void(0);" class="btn btn-link btn-lg text-muted">
<i class="dripicons-download"></i>
</a>
</div>
</div>
</div>
</div>
<div class="card mb-1 shadow-none border">
<div class="p-2">
<div class="row align-items-center">
<div class="col-auto">
<img src="assets/images/projects/project-1.jpg" class="avatar-sm rounded" alt="file-image" />
</div>
<div class="col pl-0">
<a href="javascript:void(0);" class="text-muted font-weight-bold">Dashboard-design.jpg</a>
<p class="mb-0">3.25 MB</p>
</div>
<div class="col-auto">
<!-- Button -->
<a href="javascript:void(0);" class="btn btn-link btn-lg text-muted">
<i class="dripicons-download"></i>
</a>
</div>
</div>
</div>
</div>
<div class="card mb-0 shadow-none border">
<div class="p-2">
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar-sm">
<span class="avatar-title bg-secondary rounded">
.MP4
</span>
</div>
</div>
<div class="col pl-0">
<a href="javascript:void(0);" class="text-muted font-weight-bold">Admin-bug-report.mp4</a>
<p class="mb-0">7.05 MB</p>
</div>
<div class="col-auto">
<!-- Button -->
<a href="javascript:void(0);" class="btn btn-link btn-lg text-muted">
<i class="dripicons-download"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- .p-2 -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- bundle -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
<!-- dragula js-->
<script src="assets/js/vendor/dragula.min.js"></script>
<!-- demo js -->
<script src="assets/js/ui/component.dragula.js"></script>
</body>
</html>