templates.html

<template id="cadastroDeUsuarios"> 
    <h1>Cadastrar Usuario</h1>
    <p>
      Primeiro Nome:
      <input id="view1PrimeiroNome" type="text" required='required'>
    </p>
    <p>
      Último Nome:
      <input id="view1UltimoNome" type="text" required='required'>
      </p>
    <p>
      Email:
      <input id="view1Email" type="email" required='required'>
    </p>
    <p>
      Cartão de Crédito:
      <input id="view1CartaoCredito" type="number" required='required'>
    </p>
    <p>
      Senha:
      <input id="view1Senha" type="password" required='required'>
    </p>    
    <button id="view1Button" style="display: table;">Salvar</button>
</template>

<template id="cadastroDeUsuariosRealizado">
  <div>
      <p>Cadastro realizado com sucesso!</p>
      <button id="vaiParaLogin" style="display: table;">Login</button>
  </div>
</template>

<template id= "loginDoUsuario">
  <div class="block">
    <div>
      <h1>Login</h1>
      <div>
      <p>Email:<input id="view2Email" type="email"></p>
      <p>Senha:<input id="view2Senha" type="password"></p>
      <button id="view2Button" style="display: table;">Logar</button>
    </div>
    </div>
  </div>
</template>

<template id ="campanha">
    <div class = "teste" id=maiorDiv>
      <div class="row">
        <div class='col col-2'><div>Nome da Campanha:<input id="cNome" type="text" readonly='true'></div></div>
      </div>
      <div class="row">
        <div >Descricao da Campanha:</div>
        <div><textarea id="cDescricao" type="text" style='height: 100px; width: 500px;' readonly='true'></textarea></div>
        <div class='col col-2'><div>Encerar Campanha:<button id='cEncerrar'>Encerrar</button></div></div>

      </div>
      <div class='row'>
          <div class="col col-2">Criada por: <input id="cDono" type="text" readonly='true'></div> 
          <div class='col col-2'>Status:<input id="cStatus" type="text" readonly='true'></div>
      </div>
      <div class="row">
            <div class="col col-2">Meta(R$): <input id="cMeta" type="number" min=0 readonly='true'></div> 
            <div class="col col-2">Data de Encerramento: <input id="cData" type="date" min="2019-11-20" readonly='true'></div>
      </div>
      <div class='row'>
          <div class="col">Total de Doações: <input id="cDoacao" type="number" min=0 readonly='true'></div> 
      </div>
      <div class='row'> 
          <div class="col col-2">Likes: <input id="cLike" type="number" min=0 readonly='true'></div> 
          <div class="col col-2"id='like'><button>Curtir</button></div>
      </div>
      <div class='row'> 
        <div class="col col-2"id='divDoacao'>
          <button id='doacaoButton'>Realizar Doação</button>
        </div>
    </div>
      <div class='row'>
          <div id='espacoComentario'>Espaço Reservado Para Comentario</div>
          <button id='comentarioButtom'>Comentar</button>
      </div>
    </div>
  </template>

<template id="perfil">
  <div class = 'teste'>
    <div class='row'>
      <div class="col col-2" id="pPrimeiroNome"></div>
      <div class="col col-2" id="pUltimoNome"></div>
    </div>
    <div class='row'>
      <div class='col' id="pEmail"></div>
    </div>
  </div>
  <table>
    <tr>
      <th>Nome</th>
      <th>Data Limite</th>
      <th>Status</th>
      <th>Meta (R$) /Doação (R$)</th>
      <th>Visualizar</th>
    </tr>
  </table>
</template>

<template id="pesquisaCampanhas"> 
    <h1>Pesquisar Campanha</h1>
    <p>
      Insira o nome da Campanha:
      <input id="view4Substring" type="text">
    </p>
    <button id="view4Button" style='display: table'>Pesquisar</button>
</template>

<template id="home">
    <div class='teste'>
      <img src="cow.jpg" width="100%"  height="auto"/>
      <div class='row'>
          <div class='col col-2'><div></div></div>
          <div class='col col-2'>Campanhas em Alta:</div>
          <div class='col col-2'><div></div></div>
      </div>
      <div>
          <div class='col col-2'>Ordenar Por:</div>
          <div class='col col-2'><button id='ordenaMeta'>Meta</button></div>
          <div class='col col-2'><button id='ordenaLike'>Like</button></div>
          <div class='col col-2'><button id='ordenaTempo'>Tempo</button></div>
          <div class='col col-2'><div></div></div>
        </div>
      <div class='row'>
          <table id='homeTable'> 
              <tr>
                 <th>Nome</th>
                 <th>Data Limite</th>
                 <th>Status</th>
                 <th>Meta (R$) /Doação (R$)</th>
                 <th>Visualizar</th>
               </tr>
          </table>
      </div> 
  </div>
</template>

<template id="logar">
    <li><a href = "#login" id="viewLogar">Login</a></li>
</template>
 
<template id="deslogar">
  <div class='teste'>
    <dic calss='row'>
        <div class= "col">Você tem certeza que quer deslogar?</div>
    </dic>
  </div>
  <button style="display: table;"  id="buttonDeslogar">Deslogar</button>

</template>

<template id="menu1">
    <div>
        <ul>
          <li><a href = "#/home">Inicio</a></li>
          <li><a href = "#/login">Login</a></li>
          <li><a href = "#/cadastro">Cadastro</a></li>
        </ul>
      </div>
</template>

<template id="menu2">
    <div>
        <ul>
          <li><a href = "#/home">Inicio</a></li>
          <li><a href = "#/deslogar">Deslogar</a></li>
          <li><a href = "#/cadastroCampanha">Cadastrar Campanha</a></li>
          <li><a href = "#/pesquisaCampanhas">Pesquisa Campanha</a></li>
          <li><a href = "#/perfil">Perfil</a></li>
        </ul>
      </div>
</template>

<template id="resultadoPesquisa">
  <div>
    <h1>Resultado</h1>
    <table>
     <tr>
        <th>Nome</th>
        <th>Data Limite</th>
        <th>Status</th>
        <th>Meta (R$) /Doação (R$)</th>
        <th>Visualizar</th>
      </tr>
    </table>
  </div>
</template>

<template id='templateNewButton'>
  <div>
    <button id='newButton' style="display: table;">Cadastrar Campanha</button>
  </div>
</template>

<template id='habilitarEdicao'>
    <div>
      <button id='editButton' style="display: table;">Habilitar Edição</button>
    </div>
  </template>

  <template id='salvarAlteracao'>
      <div>
        <button id='salvarButton' style="display: table;">Salvar Edição</button>
      </div>
    </template>