<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="page-header">
<h1 id="timeline">Pugmark</h1>
<img src="http://pugmarktech.com/imgs/pugmarkfullicon.png" class="img-responsive" alt="Cinque Terre">
</div>
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Enterprise Dashboard</h4>
<img src="http://pugmarktech.com/imgs/pugmark_enterprise_dashboard.png" class="img-responsive" alt="Cinque Terre">
</div>
<div class="timeline-body">
<p>
<u>Dashboard</u> that provides real time data as below</p>
<ul>
<li>
Key statistics like Total KMs, Active trips, Time & Speed breaches</li>
<li>
Map view of the entire fleet relative to the organization location</li>
<li>
Route specific dashboard for distance, time, address of a specific route</li>
<li>
Notification window to broadcast messages under exceptional scenarios</li>
</ul>
<h3>
</h3>
<h3>
<u>Feeder</u><u> Monitors </u></h3>
<p>
</p>
<p>
In addition, various feeder monitors are available as below</p>
<ul>
<li>
History - To trace the exact path of the bus on a given date and time on the map</li>
<li>
Address - To trace the last reported location of the bus with date and time</li>
<li>
Map View - A map that shows the route stops and the location of its passengers</li>
</ul>
<h3>
<u>Reference data </u></h3>
<p>
A onetime setup that includes parameters like organization location, pick up, drop timings, routes & stops maintenance. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
<img src="http://pugmarktech.com/imgs/pugmark_user_creation.png" class="img-responsive" alt="Cinque Terre">
</div>
<div class="timeline-body">
<h3>
<u>User administration</u></h3>
<p>
</p>
<p>
A flexible and secure user administration suite that lets you define different roles and control access of functions across the web app and mobile app. Default roles are admin, passengers & routes.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
<img src="http://pugmarktech.com/imgs/pugmark_interactive_reports.png" class="img-responsive" alt="Cinque Terre">
</div>
<div class="timeline-body">
<p>
<u>Reports</u></p>
<p>
A comprehensive reports suite that helps you analyse the functioning of your fleet. Broad classification of reports are</p>
<ul>
<li style="margin-left: 36pt;">
Daily reports</li>
<li style="margin-left: 36pt;">
Trend reports</li>
<li style="margin-left: 36pt;">
Static data reports</li>
</ul>
<p>
The reports can also be delivered to your inbox on a daily basis for easy access. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
<img src="http://pugmarktech.com/imgs/pugmark_feeder_app.png" class="img-responsive" alt="Cinque Terre">
</div>
<div class="timeline-body">
<h1>
Feeder</h1>
<p>
</p>
<p>
The feeder will log in to the Pugmark android app on an android device that has GPS enabled. Feeder will trigger trip start and stop using the app.</p>
<p>
When the trip is in progress following data will be logged</p>
<ul>
<li>
distance</li>
<li>
time</li>
<li>
location</li>
<li>
battery charge remaining %</li>
<li>
speed</li>
</ul>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
<img src="http://pugmarktech.com/imgs/pugmark_tracker_dash_board.png" class="img-responsive" alt="Cinque Terre">
</div>
<div class="timeline-body">
<h1>
Tracker</h1>
<p>
</p>
<p>
Trackers can track the following information on a dashboard</p>
<ul>
<li style="margin-left: 36pt;">
Distance & time relative to their home location</li>
<li style="margin-left: 36pt;">
Current address of their default route</li>
<li style="margin-left: 36pt;">
Map location of their default route relative to their home and destination</li>
</ul>
<p>
Additionally, settings & preferences for notifications, home location & default route can be maintained through the tracker app.</p>
<hr>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
<img src="http://pugmarktech.com/imgs/pugmark_tracker_settings.png" class="img-responsive" alt="Cinque Terre">
</div>
<div class="timeline-body">
<p>
Automatic notifications can be configured as below</p>
<ul>
<li style="margin-left: 36pt;">
Notification mode : SMS ,App notification, Both</li>
<li style="margin-left: 36pt;">
Notifications X kms prior to pick up and drop off from/to home location</li>
<li style="margin-left: 36pt;">
Notification on trip start and completion</li>
</ul>
<p>
Android users can download the Pugmark android app, non-android users can view the same information on the responsive web app through a browser.</p>
</div>
</div>
</li>
</ul>
</div>
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 50%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li.timeline-inverted + li:not(.timeline-inverted),
.timeline > li:not(.timeline-inverted) + li.timeline-inverted {
margin-top: -60px;
}
.timeline > li:not(.timeline-inverted) {
padding-right:90px;
}
.timeline > li.timeline-inverted {
padding-left:90px;
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
