Jump to content

Archived

This topic is now archived and is closed to further replies.

brunobonato

Status do pedido

By brunobonato, in HTML e CSS

Recommended Posts

brunobonato    0

brunobonato
Posted

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.STATUS.thumb.jpg.7b2420537fc4c2029355b1f1dd29ada6.jpg

 

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

 

Share this post

Link to post
Share on other sites
Go To Topic Listing HTML e CSS

  • Similar Content

    • Jack Oliveira
      style css
      By Jack Oliveira
      Ola pessoal tava procurando um modo de eu montar algo dessa forma com css e html
      que seja usado cores rgb ou um bg de fundo, poderia ser ambos tbm.
      porem que ambos ficassem tando pra direita, esquerda e centro, neste caso ficara a escolha da pessoa da forma que quer que fique
      montei o exemplo no editor de imagem apenas para ver como que preciso, porem que fiquem alinhando srrs. Sobre o tamanho e a largura que pudesse ajustar conforme for a necessidade tbm sem que 
      fique sem qualidade..
       

       
      Desde já fico grato
    • juliosonic
      Menu Navbar CSS Bootstrap
      By juliosonic
      Boa noite..
      Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica Curitiba
      Tantra em Curitiba

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Marcones Borges
      Erro em css não fica uma div a baixo da outra.
      By Marcones Borges
      Olá, estou com o seguinte problema, não estou conseguindo alinhar a div a baixo da outra.
       
      Tenho a div linha, div assinatura, div conteúdo.
      A div linha precisa ficar a pós o conteúdo, após o texto linha e assinatura...
       
      porém não fica.
      Veja o css
      #texto1 {     position:absolute;     left: 30px;     top: 310px;     font-size:16px;     letter-spacing: .1rem;     font-family:courier,arial,helvetica;     line-height: 1.5;     text-align: justify;     padding-left: 2%;     padding-right: 5%;     padding-bottom: 2em;     float:right;     height:902px;     z-index: 1;   #linha1{     position:fixed;     left: 70px;     bottom: 80px; } #assinatura {     border-radius: 10%;     left: 435px;     overflow: hidden;     position:absolute; }  
      O html
      <div id="texto1"><?=nl2br($cliente->conteudo)?></div> <div id="linha1"> ___________________________________ </div> <div id="assinatura"> &nbsp;&nbsp;<?=$cliente->secretario?> - <?=$cliente->convencao?><br> &nbsp;&nbsp;&nbsp;<b>SECRETÁRIO(A)</b><br> </div>
    • Marcones Borges
      Exportar arquivo gerado para jpg
      By Marcones Borges
      Olá, estou com uma dúvida, como faço para transformar um arquivo gerado com dados do sistema em jpg?
       
      Tenho uma pagina que pega informações do cliente para gerar um cartão, nome, foto e uma imagem de background.
      Até ai tudo bem, esta gerando a imagem que preciso, agora preciso criar um botão para exportar ela em jpg ou compartilhar nas redes a imagem gerada...
       
      Assim eu abro ela em outra página.
      <code]>
      <a href='cartao_aniversariante.php?id=<?=$cliente->id?>' target="_blank"><img src="imagens/niver.png" width="20" height="20" title="Cartão Aniversário"></a>
      </code>

      Tentei anexar a imagem aqui mais não permite pelo tamanho.
       
      Preciso exportar esta nova página aberta.... 
    • Marcones Borges
      Como remover fundo de imagem
      By Marcones Borges
      Olá, estou fazendo um banner virtual, ele vem com fundo default e uma imagem sobrepondo ele (foto de uma pessoa), queria remover o fundo da imagem, deixando apenas a imagem da pessoa, como faço isso?
×

Important Information

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

  I accept