ok
Mini Shell
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Doctris - Doctor Appointment Booking System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Premium Bootstrap 5 Landing Page Template" />
<meta name="keywords" content="Appointment, Booking, System, Dashboard, Health" />
<meta name="author" content="Shreethemes" />
<meta name="email" content="support@shreethemes.in" />
<meta name="website" content="https://shreethemes.in/" />
<meta name="Version" content="v1.4.0" />
<!-- favicon -->
<link rel="shortcut icon" href="https://shreethemes.in/doctris/layouts/assets/images/favicon.ico">
<!-- Css -->
<link href="../assets/libs/simplebar/simplebar.min.css" rel="stylesheet">
<link href="../assets/libs/js-datepicker/datepicker.min.css" rel="stylesheet">
<!-- Bootstrap Css -->
<link href="../assets/css/bootstrap.min.css" class="theme-opt" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/libs/remixicon/fonts/remixicon.css" rel="stylesheet" type="text/css" />
<link href="../assets/libs/%40iconscout/unicons/css/line.css" type="text/css" rel="stylesheet" />
<!-- Style Css-->
<link href="../assets/css/style.min.css" class="theme-opt" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Loader -->
<!-- <div id="preloader">
<div id="status">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div> -->
<!-- Loader -->
<div class="page-wrapper doctris-theme toggled">
<!-- sidebar-wrapper -->
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content" data-simplebar style="height: calc(100% - 60px);">
<div class="sidebar-brand">
<a href="index.html">
<img src="../assets/images/logo-dark.png" height="22" class="logo-light-mode" alt="">
<img src="../assets/images/logo-light.png" height="22" class="logo-dark-mode" alt="">
<span class="sidebar-colored">
<img src="../assets/images/logo-light.png" height="22" alt="">
</span>
</a>
</div>
<ul class="sidebar-menu">
<li><a href="index.html"><i class="uil uil-dashboard me-2 d-inline-block"></i>Dashboard</a></li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-browser me-2"></i>Layouts <span class="badge bg-danger rounded-pill ms-2">New</span></a>
<div class="sidebar-submenu">
<ul>
<li><a href="index-dark.html">Dark Dashboard</a></li>
<li><a href="index-rtl.html">RTL Dashboard</a></li>
<li><a href="index-rtl-dark.html">Dark RTL Dashboard</a></li>
<li><a href="index-sidebar-dark.html">Dark Sidebar</a></li>
<li><a href="index-sidebar-colored.html">Colored Sidebar</a></li>
</ul>
</div>
</li>
<li><a href="appointment.html"><i class="uil uil-stethoscope me-2 d-inline-block"></i>Appointment</a></li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-user me-2 d-inline-block"></i>Doctors</a>
<div class="sidebar-submenu">
<ul>
<li><a href="doctors.html">Doctors</a></li>
<li><a href="add-doctor.html">Add Doctor</a></li>
<li><a href="dr-profile.html">Profile</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-wheelchair me-2 d-inline-block"></i>Patients</a>
<div class="sidebar-submenu">
<ul>
<li><a href="patients.html">All Patients</a></li>
<li><a href="add-patient.html">Add Patients</a></li>
<li><a href="patient-profile.html">Profile</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-apps me-2 d-inline-block"></i>Apps</a>
<div class="sidebar-submenu">
<ul>
<li><a href="chat.html">Chat</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-shopping-cart me-2 d-inline-block"></i>Pharmacy</a>
<div class="sidebar-submenu">
<ul>
<li><a href="shop.html">Shop</a></li>
<li><a href="product-detail.html">Shop Detail</a></li>
<li><a href="shopcart.html">Shopcart</a></li>
<li><a href="checkout.html">Checkout</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-flip-h me-2 d-inline-block"></i>Blogs</a>
<div class="sidebar-submenu">
<ul>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="blog-detail.html">Blog Detail</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-file me-2 d-inline-block"></i>Pages</a>
<div class="sidebar-submenu">
<ul>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="review.html">Reviews</a></li>
<li><a href="invoice-list.html">Invoice List</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="terms.html">Terms & Policy</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="blank-page.html">Blank Page</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-envelope-open me-2 d-inline-block"></i>Email Template </a>
<div class="sidebar-submenu">
<ul>
<li><a href="email-confirmation.html">Confirmation</a></li>
<li><a href="email-password-reset.html">Reset Password</a></li>
<li><a href="email-alert.html">Alert</a></li>
<li><a href="email-invoice.html">Invoice</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-sign-in-alt me-2 d-inline-block"></i>Authentication</a>
<div class="sidebar-submenu">
<ul>
<li><a href="login.html">Login</a></li>
<li><a href="signup.html">Signup</a></li>
<li><a href="forgot-password.html">Forgot Password</a></li>
<li><a href="lock-screen.html">Lock Screen</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-file-info-alt me-2 d-inline-block"></i>UI Components </a>
<div class="sidebar-submenu">
<ul>
<li><a href="ui-button.html">Buttons</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-alert.html">Alert</a></li>
<li><a href="ui-dropdown.html">Dropdowns</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-background.html">Background</a></li>
<li><a href="ui-text.html">Text Color</a></li>
<li><a href="ui-tooltip-popover.html">Tooltips & Popovers</a></li>
<li><a href="ui-shadow.html">Shadows</a></li>
<li><a href="ui-border.html">Border</a></li>
<li><a href="ui-form.html">Form Elements</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-avatar.html">Avatars</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-icons.html">Icons</a></li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="javascript:void(0)"><i class="uil uil-postcard me-2 d-inline-block"></i>Miscellaneous </a>
<div class="sidebar-submenu">
<ul>
<li><a href="comingsoon.html">Comingsoon</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="error.html">404 !</a></li>
<li><a href="thankyou.html">Thank you...!</a></li>
</ul>
</div>
</li>
<li><a href="https://shreethemes.in/doctris/layouts/landing/index-two.html" target="_blank"><i class="uil uil-window me-2 d-inline-block"></i>Landing page</a></li>
</ul>
<!-- sidebar-menu -->
</div>
<!-- Sidebar Footer -->
<ul class="sidebar-footer list-unstyled mb-0">
<li class="list-inline-item mb-0 ms-1">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary">
<i class="uil uil-comment"></i>
</a>
</li>
</ul>
<!-- Sidebar Footer -->
</nav>
<!-- sidebar-wrapper -->
<!-- sidebar-wrapper -->
<!-- Start Page Content -->
<main class="page-content bg-light">
<div class="top-header">
<div class="header-bar d-flex justify-content-between border-bottom">
<div class="d-flex align-items-center">
<a href="#" class="logo-icon">
<img src="../assets/images/logo-icon.png" height="30" class="small" alt="">
<span class="big">
<img src="../assets/images/logo-dark.png" height="22" class="logo-light-mode" alt="">
<img src="../assets/images/logo-light.png" height="22" class="logo-dark-mode" alt="">
</span>
</a>
<a id="close-sidebar" class="btn btn-icon btn-pills btn-soft-primary ms-2" href="#">
<i class="uil uil-bars"></i>
</a>
<div class="search-bar p-0 d-none d-lg-block ms-2">
<div id="search" class="menu-search mb-0">
<form role="search" method="get" id="searchform" class="searchform">
<div>
<input type="text" class="form-control border rounded-pill" name="s" id="s" placeholder="Search Keywords...">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</div>
</div>
</div>
<ul class="list-unstyled mb-0">
<li class="list-inline-item mb-0">
<div class="dropdown dropdown-primary">
<button type="button" class="btn btn-pills btn-soft-primary dropdown-toggle p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/language/american.png" class="avatar avatar-ex-small rounded-circle p-2" alt=""></button>
<div class="dropdown-menu dd-menu drop-ups dropdown-menu-end shadow border-0 mt-3 p-2" data-simplebar style="height: 175px;">
<a href="javascript:void(0)" class="d-flex align-items-center">
<img src="../assets/images/language/chinese.png" class="avatar avatar-client rounded-circle shadow" alt="">
<div class="flex-1 text-left ms-2 overflow-hidden">
<small class="text-dark mb-0">Chinese</small>
</div>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center mt-2">
<img src="../assets/images/language/european.png" class="avatar avatar-client rounded-circle shadow" alt="">
<div class="flex-1 text-left ms-2 overflow-hidden">
<small class="text-dark mb-0">European</small>
</div>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center mt-2">
<img src="../assets/images/language/indian.png" class="avatar avatar-client rounded-circle shadow" alt="">
<div class="flex-1 text-left ms-2 overflow-hidden">
<small class="text-dark mb-0">Indian</small>
</div>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center mt-2">
<img src="../assets/images/language/japanese.png" class="avatar avatar-client rounded-circle shadow" alt="">
<div class="flex-1 text-left ms-2 overflow-hidden">
<small class="text-dark mb-0">Japanese</small>
</div>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center mt-2">
<img src="../assets/images/language/russian.png" class="avatar avatar-client rounded-circle shadow" alt="">
<div class="flex-1 text-left ms-2 overflow-hidden">
<small class="text-dark mb-0">Russian</small>
</div>
</a>
</div>
</div>
</li>
<li class="list-inline-item mb-0 ms-1">
<a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<div class="btn btn-icon btn-pills btn-soft-primary"><i data-feather="settings" class="fea icon-sm"></i></div>
</a>
</li>
<li class="list-inline-item mb-0 ms-1">
<div class="dropdown dropdown-primary">
<button type="button" class="btn btn-icon btn-pills btn-soft-primary dropdown-toggle p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i data-feather="mail" class="fea icon-sm"></i></button>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">4 <span class="visually-hidden">unread mail</span></span>
<div class="dropdown-menu dd-menu dropdown-menu-end shadow rounded border-0 mt-3 px-2 py-2" data-simplebar style="height: 320px; width: 300px;">
<a href="#" class="d-flex align-items-center justify-content-between py-2">
<div class="d-inline-flex position-relative overflow-hidden">
<img src="../assets/images/client/02.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<small class="text-dark mb-0 d-block text-truncat ms-3">You received a new email from <b>Janalia</b> <small class="text-muted fw-normal d-inline-block">1 hour ago</small></small>
</div>
</a>
<a href="#" class="d-flex align-items-center justify-content-between py-2 border-top">
<div class="d-inline-flex position-relative overflow-hidden">
<img src="https://shreethemes.in/doctris/layouts/assets/images/client/Codepen.svg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<small class="text-dark mb-0 d-block text-truncat ms-3">You received a new email from <b>codepen</b> <small class="text-muted fw-normal d-inline-block">4 hour ago</small></small>
</div>
</a>
<a href="#" class="d-flex align-items-center justify-content-between py-2 border-top">
<div class="d-inline-flex position-relative overflow-hidden">
<img src="../assets/images/client/03.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<small class="text-dark mb-0 d-block text-truncat ms-3">You received a new email from <b>Cristina</b> <small class="text-muted fw-normal d-inline-block">5 hour ago</small></small>
</div>
</a>
<a href="#" class="d-flex align-items-center justify-content-between py-2 border-top">
<div class="d-inline-flex position-relative overflow-hidden">
<img src="https://shreethemes.in/doctris/layouts/assets/images/client/dribbble.svg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<small class="text-dark mb-0 d-block text-truncat ms-3">You received a new email from <b>Dribbble</b> <small class="text-muted fw-normal d-inline-block">24 hour ago</small></small>
</div>
</a>
<a href="#" class="d-flex align-items-center justify-content-between py-2 border-top">
<div class="d-inline-flex position-relative overflow-hidden">
<img src="../assets/images/client/06.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<small class="text-dark mb-0 d-block text-truncat ms-3">You received a new email from <b>Donald Aghori</b> <small class="text-muted fw-normal d-inline-block">1 day ago</small></small>
</div>
</a>
<a href="#" class="d-flex align-items-center justify-content-between py-2 border-top">
<div class="d-inline-flex position-relative overflow-hidden">
<img src="../assets/images/client/07.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<small class="text-dark mb-0 d-block text-truncat ms-3">You received a new email from <b>Calvin</b> <small class="text-muted fw-normal d-inline-block">2 day ago</small></small>
</div>
</a>
</div>
</div>
</li>
<li class="list-inline-item mb-0 ms-1">
<div class="dropdown dropdown-primary">
<button type="button" class="btn btn-pills btn-soft-primary dropdown-toggle p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/doctors/01.jpg" class="avatar avatar-ex-small rounded-circle" alt=""></button>
<div class="dropdown-menu dd-menu dropdown-menu-end shadow border-0 mt-3 py-3" style="min-width: 200px;">
<a class="dropdown-item d-flex align-items-center text-dark" href="profile.html">
<img src="../assets/images/doctors/01.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<div class="flex-1 ms-2">
<span class="d-block mb-1">Calvin Carlo</span>
<small class="text-muted">Orthopedic</small>
</div>
</a>
<a class="dropdown-item text-dark" href="index.html"><span class="mb-0 d-inline-block me-1"><i class="uil uil-dashboard align-middle h6"></i></span> Dashboard</a>
<a class="dropdown-item text-dark" href="dr-profile.html"><span class="mb-0 d-inline-block me-1"><i class="uil uil-setting align-middle h6"></i></span> Profile Settings</a>
<div class="dropdown-divider border-top"></div>
<a class="dropdown-item text-dark" href="lock-screen.html"><span class="mb-0 d-inline-block me-1"><i class="uil uil-sign-out-alt align-middle h6"></i></span> Logout</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="layout-specing">
<div class="row">
<div class="col-xl-9 col-lg-6 col-md-4">
<h5 class="mb-0">Appointment</h5>
<nav aria-label="breadcrumb" class="d-inline-block mt-2">
<ul class="breadcrumb breadcrumb-muted bg-transparent rounded mb-0 p-0">
<li class="breadcrumb-item"><a href="index.html">Doctris</a></li>
<li class="breadcrumb-item active" aria-current="page">Appointment</li>
</ul>
</nav>
</div><!--end col-->
<div class="col-xl-3 col-lg-6 col-md-8 mt-4 mt-md-0">
<div class="justify-content-md-end">
<form>
<div class="row justify-content-between align-items-center">
<div class="col-sm-12 col-md-5">
<div class="mb-0 position-relative">
<select class="form-select form-control">
<option value="EY">Today</option>
<option value="GY">Tomorrow</option>
<option value="PS">Yesterday</option>
</select>
</div>
</div><!--end col-->
<div class="col-sm-12 col-md-7 mt-4 mt-sm-0">
<div class="d-grid">
<a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#appointmentform">Appointment</a>
</div>
</div><!--end col-->
</div><!--end row-->
</form><!--end form-->
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row">
<div class="col-12 mt-4">
<div class="table-responsive bg-white shadow rounded">
<table class="table mb-0 table-center">
<thead>
<tr>
<th class="border-bottom p-3" style="min-width: 50px;">#</th>
<th class="border-bottom p-3" style="min-width: 180px;">Name</th>
<th class="border-bottom p-3" style="min-width: 150px;">Email</th>
<th class="border-bottom p-3">Age</th>
<th class="border-bottom p-3">Gender</th>
<th class="border-bottom p-3">Department</th>
<th class="border-bottom p-3" style="min-width: 150px;">Date</th>
<th class="border-bottom p-3">Time</th>
<th class="border-bottom p-3" style="min-width: 220px;">Doctor</th>
<th class="border-bottom p-3">Fees</th>
<th class="border-bottom p-3" style="min-width: 150px;"></th>
</tr>
</thead>
<tbody>
<tr>
<th class="p-3">1</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/01.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Howard Tanner</span>
</div>
</a>
</td>
<td class="p-3">howard@contact.com</td>
<td class="p-3">25</td>
<td class="p-3">Male</td>
<td class="p-3">Cardiology</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/01.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Calvin Carlo</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">2</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/02.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Wendy Filson</span>
</div>
</a>
</td>
<td class="p-3">wendy@contact.com</td>
<td class="p-3">28</td>
<td class="p-3">Female</td>
<td class="p-3">Gynecology</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/02.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Cristino Murphy</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">3</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/03.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Faye Bridger</span>
</div>
</a>
</td>
<td class="p-3">faye@contact.com</td>
<td class="p-3">28</td>
<td class="p-3">Female</td>
<td class="p-3">Psychotherapy</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/03.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Alia Reddy</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">4</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/04.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Ronald Curtis</span>
</div>
</a>
</td>
<td class="p-3">ronald@contact.com</td>
<td class="p-3">25</td>
<td class="p-3">Male</td>
<td class="p-3">Orthopedic</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/04.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Toni Kovar</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">5</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/05.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Melissa Hibner</span>
</div>
</a>
</td>
<td class="p-3">melissa@contact.com</td>
<td class="p-3">28</td>
<td class="p-3">Female</td>
<td class="p-3">Dental</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/05.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Jessica McFarlane</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">6</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/06.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Randall Case</span>
</div>
</a>
</td>
<td class="p-3">randall@contact.com</td>
<td class="p-3">25</td>
<td class="p-3">Male</td>
<td class="p-3">Orthopedic</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/04.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Toni Kovar</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">7</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/07.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Jerry Morena</span>
</div>
</a>
</td>
<td class="p-3">jerry@contact.com</td>
<td class="p-3">25</td>
<td class="p-3">Male</td>
<td class="p-3">Dentist</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/05.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Jessica McFarlane</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">8</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/08.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Lester McNally</span>
</div>
</a>
</td>
<td class="p-3">jessica@contact.com</td>
<td class="p-3">25</td>
<td class="p-3">Male</td>
<td class="p-3">Gastrology</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/06.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Elsie Sherman</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">9</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/09.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Christopher Burrell</span>
</div>
</a>
</td>
<td class="p-3">christopher@contact.com</td>
<td class="p-3">28</td>
<td class="p-3">Female</td>
<td class="p-3">Urology</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/07.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Bertha Magers</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
<tr>
<th class="p-3">10</th>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/client/10.jpg" class="avatar avatar-md-sm rounded-circle shadow" alt="">
<span class="ms-2">Mary Skeens</span>
</div>
</a>
</td>
<td class="p-3">mary@contact.com</td>
<td class="p-3">28</td>
<td class="p-3">Female</td>
<td class="p-3">Neurology</td>
<td class="p-3">20th Dec 2020</td>
<td class="p-3">11:00AM</td>
<td class="p-3">
<a href="#" class="text-dark">
<div class="d-flex align-items-center">
<img src="../assets/images/doctors/08.jpg" class="avatar avatar-md-sm rounded-circle border shadow" alt="">
<span class="ms-2">Dr. Louis Batey</span>
</div>
</a>
</td>
<td class="p-3">$50/Patient</td>
<td class="text-end p-3">
<a href="#" class="btn btn-icon btn-pills btn-soft-primary" data-bs-toggle="modal" data-bs-target="#viewappointment"><i class="uil uil-eye"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-success" data-bs-toggle="modal" data-bs-target="#acceptappointment"><i class="uil uil-check-circle"></i></a>
<a href="#" class="btn btn-icon btn-pills btn-soft-danger" data-bs-toggle="modal" data-bs-target="#cancelappointment"><i class="uil uil-times-circle"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><!--end row-->
<div class="row text-center">
<!-- PAGINATION START -->
<div class="col-12 mt-4">
<div class="d-md-flex align-items-center text-center justify-content-between">
<span class="text-muted me-3">Showing 1 - 10 out of 50</span>
<ul class="pagination justify-content-center mb-0 mt-3 mt-sm-0">
<li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Previous">Prev</a></li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Next">Next</a></li>
</ul>
</div>
</div><!--end col-->
<!-- PAGINATION END -->
</div><!--end row-->
</div>
</div><!--end container-->
<!-- Footer Start -->
<footer class="bg-footer-color shadow py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div class="text-sm-start text-center">
<p class="mb-0 text-muted"><script>document.write(new Date().getFullYear())</script> © Doctris. Design with <i class="mdi mdi-heart text-danger"></i> by <a href="https://shreethemes.in/" target="_blank" class="text-reset">Shreethemes</a>.</p>
</div>
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</footer><!--end footer-->
<!-- End -->
</main>
<!--End page-content" -->
</div>
<!-- page-wrapper -->
<!-- Offcanvas Start -->
<div class="offcanvas offcanvas-end shadow border-0" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header p-4 border-bottom">
<h5 id="offcanvasRightLabel" class="mb-0">
<img src="../assets/images/logo-dark.png" height="22" class="light-version" alt="">
<img src="../assets/images/logo-light.png" height="22" class="dark-version" alt="">
</h5>
<button type="button" class="btn-close d-flex align-items-center text-dark" data-bs-dismiss="offcanvas" aria-label="Close"><i class="uil uil-times fs-4"></i></button>
</div>
<div class="offcanvas-body p-4 px-md-5">
<div class="row">
<div class="col-12">
<!-- Style switcher -->
<div id="style-switcher">
<div>
<ul class="text-center style-switcher list-unstyled mb-0">
<li class="d-grid"><a href="javascript:void(0)" class="rtl-version t-rtl-light" onclick="setTheme('style-rtl')"><img src="../assets/images/layouts/light-dash-rtl.png" class="img-fluid rounded-md shadow-md d-block mx-auto" style="width: 240px;" alt=""><span class="text-dark fw-medium mt-3 d-block">RTL Version</span></a></li>
<li class="d-grid"><a href="javascript:void(0)" class="ltr-version t-ltr-light" onclick="setTheme('style')"><img src="../assets/images/layouts/light-dash.png" class="img-fluid rounded-md shadow-md d-block mx-auto" style="width: 240px;" alt=""><span class="text-dark fw-medium mt-3 d-block">LTR Version</span></a></li>
<li class="d-grid"><a href="javascript:void(0)" class="dark-rtl-version t-rtl-dark" onclick="setTheme('style-dark-rtl')"><img src="../assets/images/layouts/dark-dash-rtl.png" class="img-fluid rounded-md shadow-md d-block mx-auto" style="width: 240px;" alt=""><span class="text-dark fw-medium mt-3 d-block">RTL Version</span></a></li>
<li class="d-grid"><a href="javascript:void(0)" class="dark-ltr-version t-ltr-dark" onclick="setTheme('style-dark')"><img src="../assets/images/layouts/dark-dash.png" class="img-fluid rounded-md shadow-md d-block mx-auto" style="width: 240px;" alt=""><span class="text-dark fw-medium mt-3 d-block">LTR Version</span></a></li>
<li class="d-grid"><a href="javascript:void(0)" class="dark-version t-dark mt-4" onclick="setTheme('style-dark')"><img src="../assets/images/layouts/dark-dash.png" class="img-fluid rounded-md shadow-md d-block mx-auto" style="width: 240px;" alt=""><span class="text-dark fw-medium mt-3 d-block">Dark Version</span></a></li>
<li class="d-grid"><a href="javascript:void(0)" class="light-version t-light mt-4" onclick="setTheme('style')"><img src="../assets/images/layouts/light-dash.png" class="img-fluid rounded-md shadow-md d-block mx-auto" style="width: 240px;" alt=""><span class="text-dark fw-medium mt-3 d-block">Light Version</span></a></li>
<li class="d-grid"><a href="https://shreethemes.in/doctris/layouts/landing/index.html" target="_blank" class="mt-4"><img src="../assets/images/layouts/landing-light.png" class="img-fluid rounded-md shadow-md d-block mx-auto" style="width: 240px;" alt=""><span class="text-dark fw-medium mt-3 d-block">Landing Page</span></a></li>
</ul>
</div>
</div>
<!-- end Style switcher -->
</div><!--end col-->
</div><!--end row-->
</div>
<div class="offcanvas-footer p-4 border-top text-center">
<ul class="list-unstyled social-icon social mb-0">
<li class="list-inline-item mb-0"><a href="https://1.envato.market/doctris-template" target="_blank" class="rounded"><i class="uil uil-shopping-cart align-middle" title="Buy Now"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://dribbble.com/shreethemes" target="_blank" class="rounded"><i class="uil uil-dribbble align-middle" title="dribbble"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://www.behance.net/shreethemes" target="_blank" class="rounded"><i class="uil uil-behance align-middle" title="behance"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://www.facebook.com/shreethemes" target="_blank" class="rounded"><i class="uil uil-facebook-f align-middle" title="facebook"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://www.instagram.com/shreethemes/" target="_blank" class="rounded"><i class="uil uil-instagram align-middle" title="instagram"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://x.com/shreethemes" target="_blank" class="rounded"><i class="uil uil-twitter align-middle" title="twitter"></i></a></li>
<li class="list-inline-item mb-0"><a href="mailto:support@shreethemes.in" class="rounded"><i class="uil uil-envelope align-middle" title="email"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://shreethemes.in/" target="_blank" class="rounded"><i class="uil uil-globe align-middle" title="website"></i></a></li>
</ul><!--end icon-->
</div>
</div>
<!-- Offcanvas End -->
<!-- Modal start -->
<!-- Add New Appointment Start -->
<div class="modal fade" id="appointmentform" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-bottom p-3">
<h5 class="modal-title" id="exampleModalLabel">Book an Appointment</h5>
<button type="button" class="btn btn-icon btn-close" data-bs-dismiss="modal" id="close-modal"><i class="uil uil-times fs-4 text-dark"></i></button>
</div>
<div class="modal-body p-3 pt-4">
<form>
<div class="row">
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Patient Name <span class="text-danger">*</span></label>
<input name="name" id="name" type="text" class="form-control" placeholder="Patient Name :">
</div>
</div><!--end col-->
<div class="col-lg-4 col-md-6">
<div class="mb-3">
<label class="form-label">Departments</label>
<select class="form-select form-control">
<option value="EY">Eye Care</option>
<option value="GY">Gynecologist</option>
<option value="PS">Psychotherapist</option>
<option value="OR">Orthopedic</option>
<option value="DE">Dentist</option>
<option value="GA">Gastrologist</option>
<option value="UR">Urologist</option>
<option value="NE">Neurologist</option>
</select>
</div>
</div><!--end col-->
<div class="col-lg-4 col-md-6">
<div class="mb-3">
<label class="form-label">Doctor</label>
<select class="form-select form-control">
<option value="CA">Dr. Calvin Carlo</option>
<option value="CR">Dr. Cristino Murphy</option>
<option value="AL">Dr. Alia Reddy</option>
<option value="TO">Dr. Toni Kovar</option>
<option value="JE">Dr. Jessica McFarlane</option>
<option value="EL">Dr. Elsie Sherman</option>
<option value="BE">Dr. Bertha Magers</option>
<option value="LO">Dr. Louis Batey</option>
</select>
</div>
</div><!--end col-->
<div class="col-lg-4 col-md-6">
<div class="mb-3">
<label class="form-label">Your Email <span class="text-danger">*</span></label>
<input name="email" id="email" type="email" class="form-control" placeholder="Your email :">
</div>
</div><!--end col-->
<div class="col-lg-4 col-md-6">
<div class="mb-3">
<label class="form-label">Your Phone <span class="text-danger">*</span></label>
<input name="phone" id="phone" type="tel" class="form-control" placeholder="Your Phone :">
</div>
</div><!--end col-->
<div class="col-lg-4 col-md-6">
<div class="mb-3">
<label class="form-label"> Date : </label>
<input name="date" type="text" class="form-control start" placeholder="Select date :">
</div>
</div><!--end col-->
<div class="col-lg-4 col-md-6">
<div class="mb-3">
<label class="form-label" for="input-time">Time : </label>
<input name="time" type="text" class="form-control timepicker" id="input-time" placeholder="03:30 PM">
</div>
</div><!--end col-->
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Comments <span class="text-danger">*</span></label>
<textarea name="comments" id="comments" rows="4" class="form-control" placeholder="Your Message :"></textarea>
</div>
</div><!--end col-->
<div class="col-lg-12">
<div class="d-grid">
<button type="submit" class="btn btn-primary">Book An Appointment</button>
</div>
</div><!--end col-->
</div><!--end row-->
</form>
</div>
</div>
</div>
</div>
<!-- Add New Appointment End -->
<!-- View Appintment Start -->
<div class="modal fade" id="viewappointment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-bottom p-3">
<h5 class="modal-title" id="exampleModalLabel">Appointment Detail</h5>
<button type="button" class="btn btn-icon btn-close" data-bs-dismiss="modal" id="close-modal"><i class="uil uil-times fs-4 text-dark"></i></button>
</div>
<div class="modal-body p-3 pt-4">
<div class="d-flex align-items-center">
<img src="../assets/images/client/01.jpg" class="avatar avatar-small rounded-pill" alt="">
<h5 class="mb-0 ms-3">Howard Tanner</h5>
</div>
<ul class="list-unstyled mb-0 d-md-flex justify-content-between mt-4">
<li>
<ul class="list-unstyled mb-0">
<li class="d-flex">
<h6>Age:</h6>
<p class="text-muted ms-2">25 year old</p>
</li>
<li class="d-flex">
<h6>Gender:</h6>
<p class="text-muted ms-2">Male</p>
</li>
<li class="d-flex">
<h6 class="mb-0">Department:</h6>
<p class="text-muted ms-2 mb-0">Cardiology</p>
</li>
</ul>
</li>
<li>
<ul class="list-unstyled mb-0">
<li class="d-flex">
<h6>Date:</h6>
<p class="text-muted ms-2">20th Dec 2020</p>
</li>
<li class="d-flex">
<h6>Time:</h6>
<p class="text-muted ms-2">11:00 AM</p>
</li>
<li class="d-flex">
<h6 class="mb-0">Doctor:</h6>
<p class="text-muted ms-2 mb-0">Dr. Calvin Carlo</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- View Appintment End -->
<!-- Accept Appointment Start -->
<div class="modal fade" id="acceptappointment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body py-5">
<div class="text-center">
<div class="icon d-flex align-items-center justify-content-center bg-soft-success rounded-circle mx-auto" style="height: 95px; width:95px;">
<i class="uil uil-check-circle h1 mb-0"></i>
</div>
<div class="mt-4">
<h4>Accept Appointment</h4>
<p class="para-desc mx-auto text-muted mb-0">Great doctor if you need your family member to get immediate assistance, emergency treatment.</p>
<div class="mt-4">
<a href="#" class="btn btn-soft-success">Accept</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Accept Appointment End -->
<!-- Cancel Appointment Start -->
<div class="modal fade" id="cancelappointment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body py-5">
<div class="text-center">
<div class="icon d-flex align-items-center justify-content-center bg-soft-danger rounded-circle mx-auto" style="height: 95px; width:95px;">
<i class="uil uil-times-circle h1 mb-0"></i>
</div>
<div class="mt-4">
<h4>Cancel Appointment</h4>
<p class="para-desc mx-auto text-muted mb-0">Great doctor if you need your family member to get immediate assistance, emergency treatment.</p>
<div class="mt-4">
<a href="#" class="btn btn-soft-danger">Cancel</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cancel Appointment End -->
<!-- Modal end -->
<!-- javascript -->
<script src="../assets/libs/simplebar/simplebar.min.js"></script>
<script src="../assets/libs/js-datepicker/datepicker.min.js"></script>
<script src="../assets/libs/feather-icons/feather.min.js"></script>
<!-- Main Js -->
<!-- JAVASCRIPT -->
<script src="../assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/plugins.init.js"></script>
<script src="../assets/js/app.js"></script>
</body>
</html>
Zerion Mini Shell 1.0