Status do pedido

brunobonato · June 5, 2017

Boa tarde

Estou fazendo um sistema para mostrar o status dos pedidos do cliente.

Até agora só estou fazendo a interface. Porém vou ler as informações do banco de dados.

Segue abaixo os códigos HTML e CSS.

Segue também a imagem de como eu estou pensando em ficar.

Gostaria de fazer que na linha "Em Produção até Elétrica e Testes" houvesse um ícone com o progresso da situação do pedido, por exemplo, 50% o ícone estará na metade do percurso e assim por diante. Alguém pode me dar uma luz como posso fazer isso?

<html>
  <head>
    <meta charset="utf-8">
    <title>Teste</title>
	<link href="css/main.css" rel="stylesheet">
  </head>
  <body>
  <table align="center_verde" border="0px" width="70%">
  <tr>
	<td>
	<div class="container_text">
	<div style="width:30px; height:1px; background: #fff;"></div>
		<p class="p1">Pedido<br>Realizado</p>
		<div style="width:25px; height:1px; background: #fff;">
		</div>
		<p class="p1">Ord. Produção<br>Criada</p>
		<div style="width:35px; height:10px; background: #fff;">
		</div>
		<p class="p1">Em<br>Produção</p>
		<div style="width:190px; height:10px; background: #fff;">
		</div>
		<p class="p1">Elétrica e<br>Testes</p>
		<div style="width:50px; height:1px; background: #fff;">
		</div>
		<p class="p1">Pintura</p>
		<div style="width:45px; height:1px; background: #fff;">
		</div>
		<p class="p1">Embalagem</p>
		<div style="width:35px; height:1px; background: #fff;">
		</div>
		<p class="p1">Pronto para<br>Entrega</p>
	</div>
	</td>
	</tr>
	<tr><td>
	<div class="container">
		<div style="width:30px; height:1px; background: #fff;"></div>
		<div class="board">
			<div class="circle outer_verde">
				<div class="circle center_verde"></div>
			</div>
			<div class="linha_verde"></div>
		</div>
		<div class="container">
			<div class="board">
				<div class="circle outer_verde">
					<div class="circle center_verde"></div>
				</div>
				<div class="linha_verde"></div>
			</div>
			<div class="container">
				<div class="board">
					<div class="circle outer_verde">
						<div class="circle center_verde"></div>
					</div>
					<div class="linha_producao"></div>
				</div>
			</div>
			<div class="container">
				<div class="board">
					<div class="circle outer_verde">
						<div class="circle center_verde"></div>
					</div>
					<div class="linha_verde"></div>
				</div>
			</div>
			<div class="container">
				<div class="board">
					<div class="circle outer_verde">
						<div class="circle center_verde"></div>
					</div>
					<div class="linha_verde"></div>
				</div>
			</div>
			<div class="container">
				<div class="board">
					<div class="circle outer_verde">
						<div class="circle center_verde"></div>
					</div>
					<div class="linha_verde"></div>
				</div>
			</div>
			<div class="container">
				<div class="board">
					<div class="circle outer_verde">
						<div class="circle center_verde"></div>
					</div>
				</div>
			</div>
		</div>
	</td></tr>
  <tr>
	<td>
    <div class="container_text">
		<div style="width:10px; height:1px; background: #fff;">
		</div>
		<p class="p2">Data: 02/06/2017<br>Hora: 10:55</p>
		<div style="width:20px; height:1px; background: #fff;">
		</div>
		<p class="p2">Data: 02/06/2017<br>Hora: 14:35</p>
		<div style="width:16px; height:1px; background: #fff;">
		</div>
		<p class="p2">Data: 04/06/2017<br>Hora: 19:00</p>
		<div style="width:150px; height:1px; background: #fff;">
		</div>
		<p class="p2">Data: 21/07/2017<br>Hora: 14:35</p>
		<div style="width:20px; height:1px; background: #fff;">
		</div>
		<p class="p2">Data: 24/07/2017<br>Hora: 16:22</p>
		<div style="width:20px; height:1px; background: #fff;">
		</div>
		<p class="p2">Data: 02/06/2017<br>Hora: 14:35</p>
		<div style="width:24px; height:1px; background: #fff;">
		</div>
		<p class="p2">Previsão<br>05/08/2017</p>
	</div>
	</td>
 </tr>
  <tr>
	<td>
		<div class="container">
			<div style="width:15px; height:1px; background: #fff;"></div>
			<div class="board">
				<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
				<div style="width:35px; height:1px; background: #fff;"></div>
			</div>
		<div class="container">
			<div class="board">
				<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
				<div style="width:35px; height:1px; background: #fff;"></div>
			</div>
		<div class="container">
			<div class="board">
				<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
				<div style="width:165px; height:1px; background: #fff;"></div>
			</div>
		<div class="container">
			<div class="board">
				<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
				<div style="width:35px; height:1px; background: #fff;"></div>
			</div>
		<div class="container">
			<div class="board">
				<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
				<div style="width:35px; height:1px; background: #fff;"></div>
			</div>
		<div class="container">
			<div class="board">
				<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
				<div style="width:35px; height:1px; background: #fff;"></div>
			</div>
		<div class="container">
			<div class="board">
				<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
				<div style="width:35px; height:1px; background: #fff;"></div>
			</div>
		</div>
	</td>
 </tr>
	</table>
  </body>
</html>

html, body {
  height: 100%;
}

.container {
  display: flex;
  
}

.board {
  display: flex;
  align-items: center;
}

.container_text {
  display: flex;
  justify-content: left;
}

.espaco_texto {
  width: 150px; 
  height: 0px; 
  background: #000; 
}

.circle {
  border-radius:50%;
  border:3px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.botao {
  border:3px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer_amarelo {
  border-radius: 50%; 
  height: 40px; 
  width: 40px; 
  border: 3px solid #BA9500; 
  background-color: rgba(10,23,55,0.0);
}

.outer_verde {
  border-radius: 50%; 
  height: 40px; 
  width: 40px; 
  border: 3px solid #006633; 
  background-color: rgba(10,23,55,0.0);
}

.linha_verde {
  width: 60px; 
  height: 3px; 
  background: #006633; 
}

.linha_amarela {
  width: 60px; 
  height: 3px; 
  background: #ffcc00; 
}

.linha_cinza {
  width: 60px; 
  height: 3px; 
  background: #f0f0f0; 
}

.linha_producao {
  width: 200px; 
  height: 3px; 
  background: #006633; 
}

.center_amarelo {
  border-radius: 50%; 
  height: 25px;
  width: 25px; 
  border: 3px solid #d3a900; 
  background-color: #FFCC00; 
  box-shadow: inset 10px -10px 10px #BA9500, inset 3px 3px 5px #FFCC00;
}

.center_verde {
  border-radius: 50%; 
  height: 25px;
  width: 25px; 
  border: 3px solid #006633; 
  background-color: #009424; 
  box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}

.center_botao_verde {
  height: 20px;
  width: 70px; 
  border: 2px solid #006633; 
  background-color: #009424; 
  box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}

.center_botao_amarelo {
  height: 20px;
  width: 70px; 
  border: 2px solid #006633; 
  background-color: #009424; 
  box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}

.p1 {
  font-family: verdana;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  color: red;
}

.p2 {
  font-family: verdana;
  font-size: 9px;
  text-align: center;
  color: grey;
  font-weight: bold;
}

.p3 {
  font-family: verdana;
  font-size: 9px;
  text-align: center;
  color: white;
  font-weight: bold;
}

.espaco_circulo {
  width: 114px; 
  height: 0px; 
  background: #000; 
}

Sign In

Status do pedido

Recommended Posts

brunobonato 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Como criar uma solicitação POST usando PHP?

Question: Formatar imagens PNG em JPEG

Problema com o cálculo de frete da transportadora JadLog. Não recebo nenhum retorno

Similar Content

Este projeto é apoiado pelas empresas

Forums

Activity

Important Information