<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LMS | Home</title>
<!--styles links-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-family.css">
<link rel="stylesheet" href="assets/css/all.css">
<link rel="stylesheet" href="assets/owl-carousel/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/style-admin.css">
<link rel="stylesheet" href="assets/css/style-admin-responsive.css">
</head>
<body>
<div class="wraper">
<!--left side content-->
<aside id="mySidebar" class="sideMenu">
<div class="logo-wrap">
<img src="assets/images/erisn-white.png">
</div>
<ul class="side-list">
<li class="list active">
<a href="index.html">
<img src="assets/images/dashboard1.png" class="icon-inactive">
<img src="assets/images/dashboard2.png" class="icon-active">
<span>Dashboard</span>
</a>
</li>
<li class="list ">
<a href="subject-create.html">
<img src="assets/images/buses1.png" class="icon-inactive">
<img src="assets/images/buses2.png" class="icon-active">
<span>Buses</span>
</a>
</li>
<li class="list ">
<a href="syllabus-list.html">
<img src="assets/images/driver1.png" class="icon-inactive">
<img src="assets/images/driver2.png" class="icon-active">
<span>Drivers</span>
</a>
</li>
<li class="list">
<a href="course-list.html">
<img src="assets/images/route1.png" class="icon-inactive">
<img src="assets/images/route2.png" class="icon-active">
<span>Routes</span>
</a>
</li>
<li class="list">
<a href="classroom-create.html">
<img src="assets/images/student2.png" class="icon-inactive">
<img src="assets/images/student1.png" class="icon-active">
<span>Students</span>
</a>
</li>
<!-- <li class="list">
<a href="classroom-create.html">
<img src="assets/images/trips1.png" class="icon-inactive">
<img src="assets/images/trips2.png" class="icon-active">
<span>Assign Trips</span>
</a>
</li> -->
</ul>
</aside>
<!--End left side content-->
<!--right-top side-->
<header class="common_margin" id="header">
<div class="search-bar-wrap">
<input type="text" name="" placeholder="Search..">
</div>
<div class="user-login-section">
<div class="notification-icon-wrap">
<img src="assets/images/notification.png">
<span></span>
<div class="notifications-wrap">
<div class="notifications">
<h4>Notifications</h4>
<ul>
<li>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor </p>
<i class="fas fa-trash-alt"></i>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor </p>
<i class="fas fa-trash-alt"></i>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor </p>
<i class="fas fa-trash-alt"></i>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor </p>
<i class="fas fa-trash-alt"></i>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor </p>
<i class="fas fa-trash-alt"></i>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor </p>
<i class="fas fa-trash-alt"></i>
</li>
</ul>
</div>
</div>
</div>
<div class="user-wrap">
<div class="user-login-head">
<img src="assets/images/A.png">
<h5><span class="user-name">Andrew</span><i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-up" aria-hidden="true"></i></h5>
</div>
<div class="login-wrap-open">
<ul>
<li><a href=""><span><i class="fa fa-user" aria-hidden="true"></i></span>My Profile</a></li>
<li><a href=""><span><i class="fas fa-sign-out-alt"></i></span>Sign Out</a></li>
</ul>
</div>
</div>
</div>
<div class="mobileMenu">
<i class="fas fa-bars"></i>
</div>
</header>
<main class="common_margin" id="main">
<div class="main-wrap">
<div class="dashboard-cover">
<div class="dashboard-left">
<div class="from-group">
<a href=""><button type="button" class="btn btn-dark btn-sm">Back</button></a>
</div>
<div class="common-sub-heading">
Track Bus
</div>
</div>
</div>
<div class="dashboard-cover">
<div class="dashboard-left">
<div class="common-sub-sub-heading">
Bus Details
</div>
<div class="veh_details">
<ul>
<li><label>Bus Number: </label>KA00JE000</li>
<li><label>Driver Name:</label> Jhon S</li>
</ul>
<ul>
<li><label>Driver Mobile:</label> 9545646844</li>
<li><label>Dropoff Time:</label> 4:30PM</li>
</ul>
</div>
<div class="map-div">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7777.571379030323!2d77.61403862439637!3d12.92149136355506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1458e6baac69%3A0x1d02c77cc85211ed!2sMadiwala%2C%201st%20Stage%2C%20BTM%20Layout%2C%20Bengaluru%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1632120611168!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
<div class="dashboard-right">
<div class="right-first-block">
<div class="right-head">
<div class="common-sub-heading">
Route1 (Towards Silkboard)
</div>
</div>
<div class="right-block right-block-noborder">
<table>
<thead>
<tr>
<th><span class="bus-tr"> </span></th>
<th>Bus Stop</th>
<th>Arrival Time</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="bus-tr"> </span></td>
<td>Tin Factory</td>
<td>4:30PM</td>
</tr>
<tr>
<td><span class="bus-tr"> </span></td>
<td>KR Puram</td>
<td>4:40PM</td>
</tr>
<tr>
<td><span class="bus-tr"> </span></td>
<td>Mahadev Pura</td>
<td>5:00PM</td>
</tr>
<tr>
<td><span class="bus-tr"> </span></td>
<td>Karthik Nagar</td>
<td>5:05PM</td>
</tr>
<tr>
<td><span class="bus-tr"> </span></td>
<td>Marathahalli</td>
<td>5:15PM</td>
</tr>
<tr>
<td><span class="bus-tr"> </span></td>
<td>Multiplex</td>
<td>5:20PM</td>
</tr>
<tr>
<td><span class="bus-tr"> </span></td>
<td>Bellandur</td>
<td>5:30PM</td>
</tr>
<tr>
<td><span class="bus-tr"> </span></td>
<td>Agara</td>
<td>6:00PM</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
<!--End right-top side-->
</div>
<!-- <script src="assets/js/jquery-3.2.1.slim.min.js"></script> -->
<script src="assets/js/jquery-3.4.1.min.js" ></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script defer src="assets/js/all.js"></script>
<script defer src="assets/js/main.js"></script>
<script src="assets/owl-carousel/js/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$('.user-drpdown').click(function(){
$('.drpdown-items').toggle();
});
});
//table js
$('#tbl').DataTable( {
"lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]]
} );
//table js end
</script>
</body>
</html>