Skip to content

Instantly share code, notes, and snippets.

@sawatsky

sawatsky/clientDashboard.html

Last active March 14, 2018 05:44
Show Gist options
  • Save sawatsky/42f4d8a9557e987a16c1ef2981169600 to your computer and use it in GitHub Desktop.
Save sawatsky/42f4d8a9557e987a16c1ef2981169600 to your computer and use it in GitHub Desktop.
Download ZIP
The various dashboards
Raw
clientDashboard.html
<!DOCTYPE html>
<title>Dashboard - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?42f4d8a9557e987a16c1ef2981169600/dashboard.css"/>
<link rel="stylesheet" href="dashboard.css"/>
<style>
.tile:nth-child(1) .tile-title {
background-image: url("http://www.blpipeco.com/BLPipeco/wp-content/uploads/2017/08/pexels-photo-93398.jpeg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
</style>
<div class="tile-container">
<div class="tile">
<a href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/trip.html"><div class="tile-title">Trips</div></a>
<a href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/trip.html" class="tile-create">Create</a>
</div>
</div>
Raw
dashboard.css
body {
margin: 0;
box-sizing: border-box;
font: 16px Arial;
color: #333;
}
.tile-container {
font-size: 0;
text-align: center;
}
.tile {
display: inline-block;
box-sizing: border-box;
width: 200px;
max-width: 300px;
margin: 1rem;
font-size: 1rem;
vertical-align: top;
border: 1px solid rgb(200, 200, 200);
}
.tile-title {
padding: 0.5rem 0.5rem 5rem 0.5rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: black;
}
.tile-create {
display: block;
padding: 1rem 0;
text-decoration: none;
background-color: #5EB8FF;
}
Raw
dispatcherDashboard.html
<!DOCTYPE html>
<title>Dashboard - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?42f4d8a9557e987a16c1ef2981169600/dashboard.css"/>
<link rel="stylesheet" href="dashboard.css"/>
<style>
.tile:nth-child(1) .tile-title {
background-image: url("http://www.blpipeco.com/BLPipeco/wp-content/uploads/2017/08/pexels-photo-93398.jpeg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
.tile:nth-child(2) .tile-title {
background-image: url("https://mobe.com/home/wp-content/uploads/2015/08/best-kept-secrets-successful-business-people-55746932-1024x682.jpg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
.tile:nth-child(3) .tile-title {
background-image: url("https://www.crengland.com/webroot/uploads/2016/11/img_0610.jpg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
.tile:nth-child(4) .tile-title {
background-image: url("https://az184419.vo.msecnd.net/schneider-national/Images/Slice-of-Orange/Posts/Pay_Lilja-400x250.jpg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
.tile:nth-child(5) .tile-title {
background-image: url("https://i.pinimg.com/originals/19/99/57/199957c47c4e7764002c14c6e976bee8.jpg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
</style>
<div class="tile-container">
<div class="tile">
<a href="https://gistpreview.github.io/?7926efe66c22088b399dce4121c240ca/trips.html"><div class="tile-title">Trips</div></a>
<a href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/trip.html" class="tile-create">Create</a>
</div>
<div class="tile">
<a href="https://gistpreview.github.io/?7926efe66c22088b399dce4121c240ca/clients.html"><div class="tile-title">Clients</div></a>
<a href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/client.html" class="tile-create">Create</a>
</div>
<div class="tile">
<a href="https://gistpreview.github.io/?7926efe66c22088b399dce4121c240ca/drivers.html"><div class="tile-title">Drivers</div></a>
<a href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/driver.html" class="tile-create">Create</a>
</div>
<div class="tile">
<a href="https://gistpreview.github.io/?7926efe66c22088b399dce4121c240ca/trucks.html"><div class="tile-title">Trucks</div></a>
<a href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/truck.html" class="tile-create">Create</a>
</div>
<div class="tile">
<a href="https://gistpreview.github.io/?7926efe66c22088b399dce4121c240ca/trailers.html"><div class="tile-title">Trailers</div></a>
<a href="https://gistpreview.github.io/?2eac6bc2a028f885681b1d1fc1d1f37b/trailer.html" class="tile-create">Create</a>
</div>
</div>
Raw
driverDashboard.html
<!DOCTYPE html>
<title>Dashboard - TruckIt</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Heather Sawatsky"/>
<meta name="application-name" content="TruckIt"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="https://gistpreview.github.io/?42f4d8a9557e987a16c1ef2981169600/dashboard.css"/>
<link rel="stylesheet" href="dashboard.css"/>
<style>
.tile:nth-child(1) .tile-title {
background-image: url("http://www.blpipeco.com/BLPipeco/wp-content/uploads/2017/08/pexels-photo-93398.jpeg");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
.tile:nth-child(2) .tile-title {
background-image: url("https://images.pexels.com/photos/172074/pexels-photo-172074.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
.tile:nth-child(3) .tile-title {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTb1jt_5N_1_oatXAQ41Xk23h_RwxExT_-XClhkomH6cqC8AuZj");
background-repeat: no-repeat;
background-position: right bottom;
background-size: cover;
}
</style>
<div class="tile-container">
<div class="tile">
<div class="tile-title">Current Trip</div>
<a href="" class="tile-create">Update Location</a>
</div>
<div class="tile">
<a href="https://gistpreview.github.io/?7926efe66c22088b399dce4121c240ca/trips.html"><div class="tile-title">Future Trips</div></a>
</div>
<div class="tile">
<div class="tile-title">Payroll</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment