-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
da4de53
commit 9722376
Showing
17 changed files
with
2,589 additions
and
479 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
tbody tr { | ||
cursor: pointer; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
.wrapper-options { | ||
position: absolute; | ||
background-color: red; | ||
width: 100%; | ||
} | ||
|
||
.wrapper-options li { | ||
list-style: none; | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,97 @@ | ||
body{ | ||
font-family: 'Roboto', Arial , sans-serif; | ||
padding: 0; | ||
margin: 0; | ||
height: 100vh; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: space-around; | ||
align-items: center; | ||
} | ||
|
||
.progress-bar-owner{ | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
.progress-bar-owner .line{ | ||
} | ||
|
||
.progress-bar-owner .line{ | ||
height: 15px; | ||
background: #e8e8e8; | ||
border-radius: 7px; | ||
position: relative; | ||
} | ||
.progress-bar-owner .label{ | ||
} | ||
|
||
.progress-bar-owner .label{ | ||
font-size: 30px; | ||
} | ||
.progress-bar-owner > .line > span{ | ||
} | ||
|
||
.progress-bar-owner > .line > .progress-quantidade-finish{ | ||
position: absolute; | ||
left: 0; | ||
top: 0; | ||
height: 100%; | ||
background: red; | ||
background: #1a8aff; | ||
border-radius: 10px; | ||
} | ||
|
||
|
||
@keyframes animationLoaded{ | ||
} | ||
|
||
|
||
.progress-partida, .progress-tooltip-final { | ||
color: rgb(251, 251, 251); | ||
position: absolute; | ||
top: 48px; | ||
font-size: .6rem; | ||
} | ||
|
||
.progress-tooltip-final { | ||
right: -53%; | ||
top:13px; | ||
} | ||
|
||
img.progress-img-ship { | ||
width: 74px; | ||
height: 64px; | ||
cursor: pointer; | ||
} | ||
|
||
.progress-tooltip-final, .progress-tooltip-ship { | ||
background-color: rgb(149, 149, 149); | ||
padding: 10px; | ||
border-radius: 10px; | ||
|
||
} | ||
|
||
.progress-tooltip-ship { | ||
position: absolute; | ||
top: -21%; | ||
font-size: .6rem; | ||
color: #e8e8e8; | ||
} | ||
|
||
.progress-mark-ship { | ||
left: -10px; | ||
background-color: red; | ||
} | ||
|
||
@keyframes animationLoaded{ | ||
0%{ | ||
width: 0%; | ||
width: 0%; | ||
} | ||
100%{ | ||
width: 100%; | ||
width: 100%; | ||
} | ||
} | ||
} | ||
|
||
.progress-mark-final, .progress-mark-ship { | ||
position: absolute; | ||
width: 15px; | ||
height: 15px; | ||
border-radius: 50%; | ||
background-color: rgb(0, 162, 255); | ||
right: 0; | ||
cursor: pointer; | ||
} | ||
|
||
|
||
.wrapper-progress-v2 { | ||
background-color: rgb(199, 187, 187); | ||
border-radius: 10px; | ||
width: 100%; | ||
height: 10px; | ||
} | ||
.wrapper-progress-v2 .progress-v2-inside { | ||
border-top-left-radius: 10px; | ||
border-bottom-left-radius: 10px; | ||
background-color: rgb(56, 156, 61); | ||
height: 100px; | ||
height: 10px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,208 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
|
||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<title>INSPINIA | Contacts 2</title> | ||
|
||
<link href="css/bootstrap.min.css" rel="stylesheet"> | ||
<link href="font-awesome/css/font-awesome.css" rel="stylesheet"> | ||
|
||
<link href="css/animate.css" rel="stylesheet"> | ||
<link href="css/style.css" rel="stylesheet"> | ||
<link href="css/progress.css" rel="stylesheet"> | ||
|
||
</head> | ||
|
||
<body> | ||
|
||
<div id="wrapper"> | ||
|
||
<nav class="navbar-default navbar-static-side" role="navigation"> | ||
<div class="sidebar-collapse"> | ||
<ul class="nav metismenu" id="side-menu"> | ||
<li class="nav-header"> | ||
<div class="dropdown profile-element"> | ||
<img alt="image" class="rounded-circle w-25" src="img/profile_small.jpg"> | ||
<a data-toggle="dropdown" class="dropdown-toggle" href="#"> | ||
<span class="block m-t-xs font-bold">Example user</span> | ||
<span class="text-muted text-xs block">menu <b class="caret"></b></span> | ||
</a> | ||
<ul class="dropdown-menu animated fadeInRight m-t-xs"> | ||
<li><a class="dropdown-item" href="login.html">Logout</a></li> | ||
</ul> | ||
</div> | ||
<div class="logo-element"> | ||
IN+ | ||
</div> | ||
</li> | ||
<li class="active"> | ||
<a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">Main view</span></a> | ||
</li> | ||
<li> | ||
<a href="minor.html"><i class="fa fa-th-large"></i> <span class="nav-label">Minor view</span> </a> | ||
</li> | ||
</ul> | ||
|
||
</div> | ||
</nav> | ||
<div id="page-wrapper" class="gray-bg"> | ||
|
||
<div class="row border-bottom"> | ||
<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0"> | ||
<div class="navbar-header"> | ||
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a> | ||
<form role="search" class="navbar-form-custom" action="search_results.html"> | ||
<div class="form-group"> | ||
<input type="text" placeholder="Pesquisar..." class="form-control" name="top-search" id="top-search"> | ||
</div> | ||
</form> | ||
</div> | ||
<ul class="nav navbar-top-links navbar-right"> | ||
<li class="dropdown"> | ||
<a class="dropdown-toggle count-info" data-toggle="dropdown" href="#"> | ||
<i class="fa fa-envelope"></i> <span class="label label-warning">16</span> | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
<i class="fa fa-sign-out"></i> Log out | ||
</a> | ||
</li> | ||
</ul> | ||
|
||
</nav> | ||
</div> | ||
<div class="wrapper wrapper-content animated fadeInRight"> | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="row d-flex justify-content-center mt-3"> | ||
<div class="col-lg-9"> | ||
<div class="ibox"> | ||
<div class="ibox-content"> | ||
<div class="d-flex justify-content-center mb-3"> | ||
<h1>Status do navio</h1> | ||
</div> | ||
<div class="row"> | ||
<div class="col-lg-6"> | ||
<dl class="row mb-0"> | ||
<div class="col-sm-4 text-sm-right" style="white-space: nowrap"><dt>Horario previsto:</dt> </div> | ||
<div class="col-sm-8 text-sm-left"><dd class="mb-1"><span class="label label-danger">12:04</span></dd></div> | ||
</dl> | ||
<dl class="row mb-0"> | ||
<div class="col-sm-4 text-sm-right" style="white-space: nowrap"><dt>Velocidade média:</dt> </div> | ||
<div class="col-sm-8 text-sm-left"><dd class="mb-1">40kn/h</dd> </div> | ||
</dl> | ||
<dl class="row mb-0"> | ||
<div class="col-sm-4 text-sm-right"><dt>Containers:</dt> </div> | ||
<div class="col-sm-8 text-sm-left"> <dd class="mb-1"> 162</dd></div> | ||
</dl> | ||
|
||
|
||
</div> | ||
<div class="col-lg-6" id="cluster_info"> | ||
|
||
<dl class="row mb-0"> | ||
<div class="col-sm-4 text-sm-right" style="white-space: nowrap;"> | ||
<dt>Ultima atualização:</dt> | ||
</div> | ||
<div class="col-sm-8 text-sm-left"> | ||
<dd class="mb-1">07/04/2019 12:39</dd> | ||
</div> | ||
</dl> | ||
</div> | ||
</div> | ||
|
||
|
||
<div class="ibox w-50 "> | ||
|
||
<div class="position-relative"> | ||
<div class="ibox-content"> | ||
<div class="progress-bar-owner"> | ||
<div class="progress-partida">0</div> | ||
<div class="js--wrapper-img-ship" data-count="60"> | ||
<div class="js--tooltip-progress progress-tooltip-ship d-none" data-tooltip="1"> | ||
<div><span class="mb-0">Velocidade:</span><span class="text-center mb-0">120km/h</span></div> | ||
<div><span class="mb-0">Containers: </span><span class="text-center mb-0">300</span></div> | ||
</div> | ||
<img data-tooltip="1" src="/img/ship.png" class="js--progress-hover progress-img-ship d-absolute" alt=""> | ||
</div> | ||
<div class="js--line line" style="width:500px"> | ||
<span class="progress-quantidade-finish"></span> | ||
<span class="js--progress-hover progress-mark-final" data-tooltip="2"></span> | ||
</div> | ||
<div class="js--tooltip-progress js--progress-final progress-tooltip-final d-none" data-tooltip="2"><p class="mb-0">Chegada prevista na barra:</p><p class="text-center mb-0">12:00</p></div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
|
||
|
||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="row"> | ||
<div class="col-lg-3"> | ||
<div class="contact-box center-version"> | ||
<a href="profile.html"> | ||
<img alt="image" class="rounded-circle" src="img/profile_small.jpg"> | ||
<h3 class="m-b-xs"><strong>Michael Zimber</strong></h3> | ||
|
||
<div class="font-bold">Sales manager</div> | ||
</a> | ||
<div class="contact-box-footer"> | ||
<span>Engajamento</span> | ||
<div class="wrapper-progress-v2"> | ||
<div style="width: 20%;" class="progress-v2-inside"></div> | ||
</div> | ||
</div> | ||
|
||
</div> | ||
</div> | ||
|
||
|
||
</div> | ||
</div> | ||
|
||
</div> | ||
</div> | ||
|
||
<!-- Mainly scripts --> | ||
<script src="js/jquery-3.1.1.min.js"></script> | ||
<script src="js/popper.min.js"></script> | ||
<script src="js/bootstrap.js"></script> | ||
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> | ||
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script> | ||
|
||
<!-- Custom and plugin javascript --> | ||
<script src="js/inspinia.js"></script> | ||
<script src="js/plugins/pace/pace.min.js"></script> | ||
<script src="js/progress.js"></script> | ||
|
||
|
||
</body> | ||
|
||
</html> |
Oops, something went wrong.