Untitled

 avatar
claudiomf1
plain_text
4 years ago
6.4 kB
11
Indexable
 <!DOCTYPE html>
<html lang="pt-br">
  <head>
    <base target="_top">
    <title>Formulario de Pesquisa Modelagem completa</title>
    <style>
      
      .btn1{
            background-color:#000;
            color:#fff;
            width: 150px;
            height: 40px;
            border: 3px #0a0 solid;
            border-radius: 15px;
           }
      .btn1:hover{
            background-color:#fff;
            color:#000;
            width: 150px;
            height: 40px;
            border: 3px #000 solid;
            border-radius: 15px;
            cursor: pointer;
           }
          
      .main{
          border:1px dotted #f00;
          margin: auto;
          width:96%;
        }
      #cabecalho,#corpo{
       // border:2px dotted #aaa;
      } 
      #cabecalho{
        position: static;
        top:;
        left:;
        right:;
        button:;
        width:86%;
        height:58px;
      }
      #titulo-pagina{
        top:0px; 
        position: absolute;
        left:30%;
        font-size:50px;
        } 
      #btn_pesquisa{
        position: absolute;
        top:140px;
        padding:10px;
        width:86%;
      }  
      
      
      form{
        position: relative;
        border:1px solid #000;
        padding:0px;
        border-box:35px;
        background-color: #eee;
        height:635px;
        width:86%;
        top:25px;

      } 
      #dv_btns{
        display:flex;
      } 
      .quebra{display:block;} 
      .espaco{margin-buttom:15px;}
      .radios{
      position: absolute; 
      border:1px solid #000;
      height:140px;
      width:160px;
      }
       
      
       }
      .concluido-methods {
      list-style: none;
      position: relative;
      
      margin: 0;
      padding: 0;
            
      }
      .concluido-methods:after {
      content: "";
      clear: both;
      }

      .concluido-method {
        border: 1px solid #ccc;
        box-sizing: border-box;
        float: left;
        height: 70px;
        position: relative;
        top:40px;
        left:7px;
        width: 60px;

      }
      .concluido-method + .concluido-method {
       margin-left: 25px;
      }
      .labelradios{
        position: absolute;
        left:15%;
        font-size:25px;
        
      }
      .concluido-method label {
        background: #fff no-repeat center center;
        bottom: 1px;
        cursor: pointer;
        display: block;
        font-size: 0;
        left: 1px;
        position: absolute;
        right: 1px;
        text-indent: 100%;
        top: 1px;
        white-space: nowrap;
      }
     

      .sim label {
        background-image: url("https://i.imgur.com/dctVFyo.jpg");
        background-repeat: no-repeat;
        background-size: 50px 50px;
      }
      .nao label {
        background-image: url("https://i.imgur.com/hjZwv4Q.jpg");
        background-repeat: no-repeat;
        background-size: 50px 50px;
      }
      .concluido-methods input:focus + label {
        outline: 2px dotted #21b4d0;
      }
      .concluido-methods input:checked + label {
        outline: 4px solid #21b4d0;
      }
      .concluido-methods input:checked + label:after {
        background: url("https://imgur.com/Mz5ThbI.png");
        background-size: 20px 20px;
        bottom: -10px;
        content: "";
        display: inline-block;
        height: 20px;
        position: absolute;
        right: -10px;
        width: 20px;

      }
      #tabela_consulta{
        position: absolute;
        left:190px;
        width:300px;
      }
      table{
       // position:relative;
        border:2px solid #000000;
        border-spacing: 0px; 
        width:400px;
        left:0px;
      }
      tbody {
          display: block;
          height: 300px;
          overflow: auto;
          top:10px;

      }
      td{
        border:1px solid #000000;
        padding:0px;
        color:#000000;
      }
      th{
        width:500px;
      }
      .titulo_consulta{
        border:1px solid #000000;
        background-color: #00BFFF;
        text-aligh: center;
        color:#FFFAFA;
      }
      .cabecalho_tabela{
        position:relative;
        width:400px;
        
      }
      .CorpoTabela{
        top:10px;
      }
      .hide{
        width:120px;
        top:120px;
        left:25%;
        position:absolute;
      }
     
    </style>
    
  </head>
  
  
  <body>
    <div id="cabecalho">
        <div class="">
          <h1 id="titulo-pagina" > Pesquisar </h1>  
        </div> 
         
    </div>  
        <form name="f_pesquisa" action= "#" method="GET">
            
           <div class="radios" >
                  <label class="labelradios">Concluidos</label>
                <div class="concluido-methods">  
                    <div class="concluido-method sim">
                        <input name="concluido_methods" type="radio" id="sim">
                        <label for="sim">Sim</label>
                    </div>
                    <div class="concluido-method nao">
                        <input name="concluido_methods" type="radio" id="nao">
                        <label for="nao">Nao</label>
                    </div>
                </div> 
            
             <div id="btn_pesquisa">
                 <div id="dv_btns">
                  
                     <input class="btn1" type="submit" name="f_btn_enviar" onclick="Tabela()" value="Pesquisar">
                      
                 </div> 

             </div>
           </div>

           
          <div id="tabela_consulta">
            <p aligh ="center">
              <b><font color="black" size="5" >Relatorio de serviço</font></b>
            </p>
            <table>
              <tread class="cabecalho_tabela">
                <tr >
                  <th class="titulo_consulta">Data</th>
                  <th class="titulo_consulta">Cli.</th>
                  <th class="titulo_consulta">Cliente</th>
                  <th class="titulo_consulta">Serviço</th>
                  <th class="titulo_consulta">Dias</th>
                </tr>
              </tread>
              
              <tbody id="CorpoTabela">
              </tbody>
              
            </table>
            <img id="load" src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" class="hide"> 
          </div>

            
        </form>  
        <?!=Chamar()?>
  </body>
</html>
Editor is loading...