Nephila

In this example below you will see how to do a Nephila with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by fonsecaman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fonsecaman ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Nephila</title>
  
  
  
  
  
</head>

<body>

  
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="NephilaPaper é uma ferramenta desenvolvida pelo SiBBr que produz de maneira automatizada o esboço de um Data Paper.">
  <meta name="NephilaPaper" content="Ferramenta desenvolvida pelo SiBBr que produz de maneira automatizada o esboço de um Data Paper.">
  <link rel="icon" href="img/nephila.ico">

  <title>SiBBr | NephilaPaper - Gerador de Data Paper</title>


  <!-- CSS -->

  <link href="/css/reset.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <link href="https://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">
  
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic' rel='stylesheet' type='text/css'>

  <link href="https://ferramentas.sibbr.gov.br/nephila/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
  <link href="https://ferramentas.sibbr.gov.br/nephila/css/style-nephila.css" media="all" rel="stylesheet" type="text/css" />
  <link href="https://cdn.sibbr.gov.br/css/nav-bar.css" media="all" rel="stylesheet" type="text/css" /> 
  
</head>

<body>
  <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
    <ul id="menu-barra-temp" style="list-style:none;">
      <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="https://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a></li>
      <li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="https://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
    </ul>
  </div>

  
  <div class="container-fluid">
    <!-- Begin page content -->
    <div class="container">
      <div class="engloba-conteudo">

        <div class="help">
          <div class="engloba-interrogacao">
            <div class="bg-interrogacao">
              <span>?</span>
            </div>
          </div>

          <div class="help-content">
            <span>Precisa de ajuda?</span>
            <br>
            <a target="_blank" href="/forum" type="button" class="btn btn-default">Clique aqui</a>
          </div>
        </div>

        <div clas="row">
          <div class="col-md-4">

            <img class="center iconograma" src="https://cdn.sibbr.gov.br/img/nephila/logo-nephila.svg" alt="nephilaValida - Validador de nomes científicos">

            <div class="panel-group"  id="accordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      O que a ferramenta faz?
                      <span class="bullet-down glyphicon glyphicon-menu-up"></span>
                    </a>

                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <p>NephilaPaper é uma ferramenta desenvolvida pelo SiBBr que produz de maneira automatizada o esboço de um data paper a partir do envio de um arquivo com o conjunto de dados em formato <i>Darwin Core Archive</i> (DwC-A).</p>
                  <p>Data paper é uma publicação acadêmica destinada a divulgar um conjunto de dados e metadados. Tem o objetivo de descrever o conteúdo e contexto do conjunto de dados, mais do que formular hipóteses e conclusões. Publicado em revistas acadêmicas, os dados e metadados descritos em um data paper devem estar disponibilizados em um repositório permanente, como o SiBBr. </p>
                  <p>O esboço é gerado em um arquivo de texto editável, que deverá posteriormente ser formatado conforme as normas da revista selecionada para a publicação do data paper. </p>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                  <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      Passo-a-passo
                      <span class="bullet-down glyphicon glyphicon-menu-down"></span>
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                  <ol>
                    <li>Baixe o arquivo o <i>Darwin Core Archive</i> (DwC-A) a partir do conjunto de dados publicados no IPT. Para baixar o <i>Darwin Core Archive</i>, clique no conjunto de dados para abri-lo e clique no botão DwC-A localizado abaixo a descrição do recurso e acima da seção Downloads.</li>
                    <li>Clique no Botão <strong>Anexar</strong>.</li>
                    <li>Selecione o arquivo baixado em formato zip com o <i>Darwin Core Archive</i> (DwC-A).</li>
                    <li>Clique em <strong>Enviar</strong>.</li>
                    <li>O download do arquivo de esboço será iniciado automaticamente e estará em seu computador.</li>
                  </ol>
                </div>
              </div>

            </div>

            <div class="homenagem">
              <img src="https://cdn.sibbr.gov.br/img/nephila/logo-nephila-p.svg" alt="nephilaValida - Validador de nomes científicos">
              <p>O nome da ferramenta homenageia as aranhas do gênero <i>Nephila</i>. Essas aranhas são de origem africana e já naturalizadas no Brasil. Vivem em florestas e ambientes urbanos, e possuem a peculiaridade de não desfazer a teia, por isso podem ser observadas durante o dia e a noite.</p>
            </div>

          </div>



        </div>
        <div class="col-md-8">
          <div class="content">

            <h2>Formulário gerador de Data Paper</h2>

            <form class="nephila-form" action="https://ferramentas.sibbr.gov.br/v1/dwca" method="post" enctype="multipart/form-data">
              <label for="file" class="">Selecione um arquivo:</label>
              <input type="file" name="file" id="file" class="input-group input-group-lg" />
              <div id="errorBlock" class="help-block"></div>
            </form>

            <img class="center marca-dagua-sibbr" src="https://cdn.sibbr.gov.br/img/logo.svg" alt="SiBBr - Sistema de Informação sobre a Biodiversidade Brasileira">
          </div><!-- Content -->
        </div><!-- col-md-8 -->
      </div><!-- Row -->
    </div>
  </div>
</div>
<footer class="footer">
  <div class="container">
    <div class="row ">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <img class="center" src="https://cdn.sibbr.gov.br/img/img-rodape.svg" alt="Ministerio da Ciencia, Tecnologia, Inovaçoes e Comunicaçoes" >
        <br />
      </div>
      <div class="col-md-4"></div>
    </div>
  </div>
</footer>


<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://ferramentas.sibbr.gov.br/nephila/js/fileinput.js" type="text/javascript"></script>
<script src="https://ferramentas.sibbr.gov.br/nephila/js/nephila-reset.js" type="text/javascript"></script>
<script src="https://ferramentas.sibbr.gov.br/nephila/js/nephila-piwik.js" type="text/javascript"></script>
<script src="https://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.sibbr.gov.br/js/menu-global.js"></script>
<script defer="defer" src="https://cdn.sibbr.gov.br/js/barra.js" type="text/javascript"></script>

<noscript><p><img src="https://ferramentas.sibbr.gov.br/piwik/piwik.php?idsite=4" style="border:0;" alt="" /></p></noscript>

</body>


</html>
  
  

</body>

</html>

Comments