Jump to content

brunobonato

Members
  • Content count

    1
  • Joined

  • Last visited

Community Reputation

0 Comum

About brunobonato

  1. brunobonato

    Status do pedido

    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; }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.