Inclusão da página formulario e alteração de CSS e HTML do projeto

3 years ago · cd50ede455
--- a/index.html
+++ b/index.html
@ -7,6 +7,7 @@
    	<a class="active" href="/">Home</a>
      <a href="natureza/extincoes/extincoes.html">Extin&ccedil&otildees</a>
      <a href="natureza/parques/parques-naturais.html">Parques Naturais</a>
      <a href="/natureza/formulario/formulario.html">Formul&aacuterio</a>
    </div>
  </head>
  <body>
--- a/natureza/extincoes/extincoes.html
+++ b/natureza/extincoes/extincoes.html
@ -7,6 +7,7 @@
      <a href="/">Home</a>
      <a class="active" href="natureza/extincoes/extincoes.html">Extin&ccedil&otildees</a>
      <a href="/natureza/parques/parques-naturais.html">Parques Naturais</a>
      <a href="/natureza/formulario/formulario.html">Formul&aacuterio</a>
    </div>
  </head>
  <body>
--- a/natureza/formulario/formulario.html
+++ b/natureza/formulario/formulario.html
@ -0,0 +1,36 @@
 <!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>Formul&aacuterio</title>
    <div class="header">
      <a href="/">Home</a>
      <a href="/natureza/extincoes/extincoes.html">Extin&ccedil&otildees</a>
      <a href="/natureza/parques/parques-naturais.html">Parques Naturais</a>
      <a class="active" href="/natureza/formulario/formulario.html">Formul&aacuterio</a>
    </div>
  </head>
  <body>
    <h3>Formul&aacuterio de cadastro</h3>
    <div class="div-form">
      <form action="salvar.html" target="iframe-submissao">
        <label>Nome do animal </label>
        <input type="text" name="nomeAnimal" placeholder="Digite o nome do animal"/>
        <label>Quantidade:</label>
        <input type="number" name="quantidade" placeholder="Digite a quantidade"/>
        <label>Nome do parque:</label>
        <input type="text" name="nomeParque" placeholder="Digite o nome do parque"/>
        <label>Estado:</label>
        <input type="text" name="estado" placeholder="Digite o estado"/>
        <input type="submit" value="Submit">
      </form>
    </div>
    <iframe name="iframe-submissao"></iframe>
  </body>
  <footer>
    <div>
      <strong>Copyright &copy 2023 Higor.</strong>
      All rights reserved.
    </div>
  </footer>
 </html>
--- a/natureza/formulario/salvar.html
+++ b/natureza/formulario/salvar.html
@ -0,0 +1 @@
 Salvo com sucesso!
--- a/natureza/formulario/style.css
+++ b/natureza/formulario/style.css
@ -0,0 +1,70 @@
 html {
  font-family: Arial, Helvetica, sans-serif;
 }

 .header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
 }

 .header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
 }

 .header a:hover {
  background-color: #ddd;
  color: black;
 }

 .header a.active {
  background-color: dodgerblue;
  color: white;
 }

 footer {
  position: fixed;
  width: 100%;
  display: block;
  padding: 12px;
  bottom: 0;
  margin-right: 8px;
  background-color: #f1f1f1;
 }

 input[type=text], input[type=number], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
 }

 input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
 }

 input[type=submit]:hover {
  background-color: #45a049;
 }

 .div-form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
 }
--- a/natureza/parques/parques-naturais.html
+++ b/natureza/parques/parques-naturais.html
@ -6,6 +6,7 @@
      <a href="/">Home</a>
      <a href="/natureza/extincoes/extincoes.html">Extin&ccedil&otildees</a>
      <a class="active" href="natureza/parques/parques-naturais.html">Parques Naturais</a>
      <a href="/natureza/formulario/formulario.html">Formul&aacuterio</a>
    </div>
  </head>
  <body>
@ -19,25 +20,30 @@
      <tbody>
        <tr>
          <th>Parque Nacional da Chapada Diamantina</th>
          <td>1520</td>
          <td class="qtd">1520</td>
        </tr>
        <tr>
          <th>Parque Nacional Montanhas de Tumucumaque</th>
          <td>38874</td>
          <td class="qtd">38874</td>
        </tr>
        <tr>
          <th>Parque Nacional da Tijuca</th>
          <td>39,58</td>
          <th>Parque Nacional da Chapada das Mesas</th>
          <td class="qtd">1600</td>
        </tr>
        <tr>
          <th>Parque Nacional dos Len&ccedil&oacuteis Maranhenses</th>
          <td>1566,84</td>
          <td class="qtd">1566</td>
        </tr>
        <tr>
          <th>Parque Nacional da Chapada dos Veadeiros</th>
          <td>2405,9</td>
          <td class="qtd">2405</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td id="qtdTotal" colspan="2"></td>
        </tr>
      </tfoot>
    </table>
  </body>
  <footer>
@ -46,4 +52,13 @@
      All rights reserved.
    </div>
  </footer>
  <script>
   var els = document.getElementsByClassName("qtd");
   var total = 0;
   [].forEach.call(els, function (el)
   {
     total += parseInt(el.innerHTML);
   });
   document.getElementById("qtdTotal").innerHTML = total;
  </script>
 </html>