<!DOCTYPE html>
<html lang="pt-br">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">



  <link rel="stylesheet" href="estilos/w3.css">



  <link rel="shortcut icon" type="image/x-icon" href="fotoIndex/favicon.ico">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5408157966429216"
    crossorigin="anonymous"></script>


  <title>Duvid - Home</title>




  <style>
    @font-face {

      src: url('fontes/FreePixel.woff');
      font-family: pixel;
    }


    body {

      margin: 0 auto;
      font-family: pixel, arial, helvetica;
      margin-bottom: 120px;
    }

    .dark-mode {
      background-color: #333333;
      color: white;
    }



    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: pixel;
      padding: 20px;
      margin-top: 20px !important;
      margin-bottom: 20px !important;
      margin: 10px;
    }

    .bold {
      font-weight: bold;
    }





    .fontPixel {
      font-family: pixel;
    }

    .fotosCapa {
      margin-bottom: 20px;
    }

    .fotosCapa a :hover {
      font-size: 20px;
    }

    .fotosCapa img {
      width: 80%;
      box-shadow: 2px 1px 7px 5px rgba(0, 0, 0, 0.247);
      border-radius: 10px;
      cursor: pointer;
      transition: .5s ease all;
    }


    .fotosCapa img:hover {
      width: 90%;

    }

    #gifcapa {
      box-shadow: 0px 10px 10px lightblue;
      border-radius: 10px;
    }

    /* Rodapé */

    html {
      position: relative;
      min-height: 100%;
    }



    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: auto;
      line-height: 10px;
      color: #FFF;
      text-align: center;


    }

    .containerFoot {
      max-width: 1200px;
      /* ajuste conforme necessário */
      margin: 0 auto;
      /* centraliza a div horizontalmente */



    }

    .links-footer {
      display: flex;

      align-items: center;

    }


    #iconeFooter {
      width: 32px;
      height: 32px;
    }

    .fonte {
      font-family: pixel, Arial, Helvetica, sans-serif;
    }


    #fotoHome {
      width: 60px;
      height: 30px;
      margin-top: 10px;
      border-radius: 5px;
      background-color: white;

    }

    a {
      text-decoration: none;
    }

    #logoPlayStore1 {
      width: 60%;
      height: auto;
    }

    .CardPlayImg img:hover {
      border: 2px solid yellow;
    }





    #logoPlayStore2 {
      width: 60%;
      height: auto;
    }

    #logoPlayStore3 {
      width: 60%;
      height: auto;
    }


    li {
      margin-left: 5%;
      padding: 5px 50px 0px 0px;
      font-size: 16px;
    }

    a:hover {
      color: hotpink;
    }


    .fa {
      /* outras propriedades CSS aqui */
      display: inline-block;
      border-radius: 50%;
      /* torna o botão redondo */
      height: 50px;
      width: 50px;
      line-height: 50px;
      /* centraliza o ícone verticalmente */
      text-align: center;
      /* centraliza o ícone horizontalmente */
    }

    .fa:hover {
      /* outras propriedades CSS aqui */
      transform: scale(1.1);
      /* aumenta o tamanho do botão ao passar o mouse */
    }


    .fa-instagram {
      background: #128822;
      color: white;

    }

    .fa-youtube {
      background: #128822;
      color: white;

    }

    .fa-brands-tiktok {


      display: inline-block;
      width: 0.88em;
      height: 1em;
      --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14Z'/%3E%3C/svg%3E");
      background-color: currentColor;
      -webkit-mask-image: var(--svg);
      mask-image: var(--svg);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }

    /* Dialogo */

    .character {
      position: relative;
    }

    /* Imagem alinhada à esquerda */
    img.left {
      margin-left: 10%;
      margin-top: 40px;
      padding: auto;
      cursor: pointer;
    }

    /* Imagem alinhada à direita */
    img.right {
      margin-left: -10%;
      margin-top: 30px;
      padding: auto;
      cursor: pointer;
    }

    .ImagemDialogo {
      padding-top: 5%;
      max-width: 800px;
      margin: 0 auto;
      border: 10px solid #fff;
      border-radius: 20px;
      box-shadow: 0 0 10px #ccc;
      background-image: url("fotoIndex/fotoDialogo1.png");
      background-size: cover;
      background-position: top;
    }

    .Avisos {

      max-width: 60%;

      margin: 0 auto;
      border: 10px solid #fff;
      border-radius: 20px;
      box-shadow: 0 0 10px #ccc;
      background-image: url("fotoIndex/cortica.jpg");
      background-size: cover;
      background-position: top;
    }

    .balloon {
      position: absolute;
      display: flex;

      background-color: #fff;
      border-radius: 10px;

      min-width: 100%;
      min-height: 20%;

      padding: 2%;

      border: 3px solid #3a3a3a85;
      box-shadow: 0 0 10px #474747a2;

      font-size: 18px;

      color: black !important;



    }

    .balao1 {

      opacity: 0.2;
      transition: opacity 1.5s;


    }

    .balao2 {

      opacity: 0.2;
      transition: opacity 1.5s;

    }

    .fadeBaloon {
      opacity: 1;

    }

    .triangle {
      position: absolute;
      width: 0;
      height: 0;
      transform: rotate(45deg);

      border-top: 20px solid transparent;
      border-bottom: none;
      z-index: 10;
      max-width: 100%;
      width: auto;
      bottom: -10px;
      /* ajusta a posição do triângulo para baixo */
    }

    .triangleLeft {
      border-right: 20px solid #fff;
      left: 50%;
    }

    .triangleRight {
      border-right: 20px solid #fff;
      left: 30%;
    }

    .pad {
      padding: 2%;
      padding-right: 2%;
    }


    .postit-tp9 {
      background: #f5ff9e;

      width: 50%;

      padding: 15px;
      font-family: pixel;
      margin-bottom: 60px;
      margin-top: 60px;

      justify-content: center;
      text-align: center;
      position: relative;
      Color: rgb(0, 0, 0);
      font-size: 18px;
      box-shadow: 2px 4px 6px #444;
      -moz-box-shadow: 2px 4px 6px #444;
      -webkit-box-shadow: 2px 4px 6px #444;
      transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -webkit-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
    }

    .postit-tp9>a {
      text-decoration: none;
    }

    .postit-tp9>a:hover {
      text-decoration: underline;
    }

    .postit-tp10 {
      background: #88ff9a;

      width: auto;
      height: auto;
      padding: 15px;
      font-family: pixel;
      margin-bottom: 60px;
      margin-top: 60px;

      justify-content: center;
      text-align: center;
      position: relative;
      Color: rgb(0, 0, 0);
      font-size: 18px;
      box-shadow: 2px 4px 6px #444;
      -moz-box-shadow: 2px 4px 6px #444;
      -webkit-box-shadow: 2px 4px 6px #444;
      transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -webkit-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
    }

    .postit-tp10>a {
      text-decoration: none;
    }

    .postit-tp10>a:hover {
      text-decoration: underline;
    }


    .margemFooter {
      margin-top: 64px;
      margin-bottom: 300px;
    }



    /* área para mobile */



    @media screen and (max-width: 600px) {

      .ImagemDialogo {
        padding-top: 5%;
        max-width: auto;
        margin: 0 auto;
        border: 10px solid #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px #ccc;
        background-image: url("fotoIndex/fotoDialogo2.png");
        background-size: cover;
        background-position: center;
        z-index: 10;
      }

      .Avisos {
        padding-top: 5%;
        max-width: 90%;
        margin: 0 auto;
        border: 10px solid #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px #ccc;
        background-image: url("fotoIndex/cortica.jpg");
        background-size: cover;
        background-position: center;
        z-index: 0;
      }


      /* postit mobile */
      .postit-tp9 {
        background: #f5ff9e;

        width: auto;
        height: auto;
        padding: 20px;
        font-family: pixel;
        margin-bottom: 60px;
        margin-top: 60px;

        justify-content: center;
        text-align: center;
        position: relative;
        Color: rgb(0, 0, 0);
        font-size: 18px;
        box-shadow: 2px 4px 6px #444;
        -moz-box-shadow: 2px 4px 6px #444;
        -webkit-box-shadow: 2px 4px 6px #444;
        transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -webkit-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
      }


      /* postit mobile */
      .postit-tp10 {
        background: #88ff9a;

        width: auto;
        height: auto;
        padding: 20px;
        font-family: pixel;
        margin-bottom: 60px;
        margin-top: 60px;

        justify-content: center;
        text-align: center;
        position: relative;
        Color: rgb(0, 0, 0);
        font-size: 18px;
        box-shadow: 2px 4px 6px #444;
        -moz-box-shadow: 2px 4px 6px #444;
        -webkit-box-shadow: 2px 4px 6px #444;
        transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -webkit-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
      }


      .balloon {
        position: absolute;
        display: flex;

        background-color: #fff;
        border-radius: 10px;
        min-width: 100%;
        min-height: 50px;
        padding: 5%;

        border: 1px solid #3a3a3a85;
        box-shadow: 0 0 10px #474747a2;
        font-size: 16px;
        z-index: 10;



      }



      .pad {
        padding: 5%;

      }


      .triangle {
        position: absolute;
        width: 0;
        height: 0;
        transform: rotate(45deg);

        border-top: 20px solid transparent;
        border-bottom: none;
        z-index: 10;
        max-width: auto;
        width: auto;
        bottom: -10px;
        /* ajusta a posição do triângulo para baixo */
      }

      .triangleLeft {
        border-right: 20px solid #fff;
        left: 30%;
      }

      .triangleRight {
        border-right: 20px solid #fff;
        left: 30%;
      }

      /* Imagem alinhada à esquerda */
      img.left {
        max-width: 200px;
        margin-left: -40%;
        margin-top: 20%;
        cursor: pointer;
        z-index: 1;


      }

      /* Imagem alinhada à direita */
      img.right {
        max-width: 200px;
        margin-left: -20%;
        margin-top: 20%;
        cursor: pointer;
        z-index: 1;


      }

    }

    #typingSpeed {
      width: auto;
      /* largura do controle deslizante */
      background-color: #407943;
    }

    #typingSpeed::-webkit-slider-thumb {
      -webkit-appearance: none;
      /* remove o estilo padrão do polegar */
      appearance: none;
      width: 20px;
      /* largura do polegar */
      height: 20px;
      /* altura do polegar */

      /* cor do polegar */
      cursor: pointer;
    }

    #typingSpeed::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background-color: #39693b;
      cursor: pointer;
    }

    input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      background-color: #ddd;
      border-radius: 5px;
      outline: none;
      margin: 10px 0;
    }

    input[type=range]:hover {
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background-color: #76a176;
      margin-top: -5px;
    }

    input[type=range]::-moz-range-thumb {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background-color: #3a493a;
    }


    /* BOX AVISOS */
  </style>

</head>

<body>



  <Header>



    <div class="w3-top w3-black  ">
      <div class="w3-container">

        <div class="w3-bar" id="myNavbar">



          <a class="w3-bar-item w3-button w3-hover-black w3-right w3-margin-right w3-hide-medium w3-hide-large"
            href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
            <i class="fa fa-bars"></i>
          </a>

          <a href="index.html" class="w3-bar-item w3-button w3-left w3-margin-left w3-hide-medium "><img id="fotoHome"
              src="fotoIndex/titulo3.png" class="w3-image w3-mobile " alt="icone"> </a>

          <!-- <a href="#home" class="w3-bar-item w3-button w3-left ">HOME </a> -->





          <a href="#" class="w3-bar-item w3-button w3-right w3-margin-right w3-hide-small " onclick="DarkMode()"><i
              class="fa fa-lightbulb-o"></i> </a>
          <a href="paginas/sobre.html" class="w3-bar-item w3-button w3-hide-small w3-margin-right "><i
              class="fa fa-user"></i>
            SOBRE</a>
          <a href="paginas/creditos.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i>
            CRÉDITOS</a>





          <a href="paginas/instrucoes.html" class="w3-bar-item w3-button w3-hide-small "><i class="fa fa-leanpub"></i>
            INSTRUÇÕES GERAIS</a>

          <!-- Novo Menu Dropdown -->
          <div class="w3-dropdown-hover w3-right w3-hide-small">
            <button class="w3-button">SIMULADOS <i class="fa fa-caret-down"></i></button>
            <div class="w3-dropdown-content w3-bar-block w3-card-4">
              <a href="simulados/capasimuladoenem.html" class="w3-bar-item w3-button w3-black">ENEM</a>
              <a href="simulados/capasimuladounicamp.html" class="w3-bar-item w3-button w3-black">  UNICAMP</a>
              <!-- <a href="#" class="w3-bar-item w3-button">Categoria 2</a>
              <a href="#" class="w3-bar-item w3-button">Categoria 3</a> -->
              <!-- Adicione mais links conforme necessário -->
            </div>
          </div>
          <!-- Fim do Novo Menu Dropdown -->


          <a href="blog/blog.html" class="w3-bar-item w3-button w3-hide-small "><i class="fa fa-rss"></i>
            BLOG</a>





        </div>

      </div>


      <!-- Navbar on small screens -->
      <div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium">
        <a href="blog/blog.html" class="w3-bar-item w3-button" onclick="toggleFunction()">BLOG</a>

        <!-- Novo Menu Dropdown -->
        <div class="w3-dropdown-hover w3-right w3-hide-large">
          <button class="w3-button">SIMULADOS <i class="fa fa-caret-down"></i></button>
          <div class="w3-dropdown-content w3-bar-block w3-card-4">
            <a href="simulados/capasimuladoenem.html" class="w3-bar-item w3-button w3-black">ENEM</a>
            <a href="simulados/capasimuladounicamp.html" class="w3-bar-item w3-button w3-black">  UNICAMP</a>
            <!-- <a href="#" class="w3-bar-item w3-button">Categoria 2</a>
                <a href="#" class="w3-bar-item w3-button">Categoria 3</a> -->
            <!-- Adicione mais links conforme necessário -->
          </div>
        </div>
        <!-- Fim do Novo Menu Dropdown -->

        <a href="paginas/sobre.html" class="w3-bar-item w3-button" onclick="toggleFunction()">SOBRE</a>
        <a href="paginas/creditos.html" class="w3-bar-item w3-button" onclick="toggleFunction()">CRÉDITOS</a>
        <a href="paginas/contato.html" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTATO</a>
        <a href="paginas/instrucoes.html" class="w3-bar-item w3-button" onclick="toggleFunction()">INSTRUÇÕES GERAIS</a>
        <a href="#" class="w3-bar-item w3-button w3-right w3-margin-right  " onclick="DarkMode()"><i
            class="fa fa-lightbulb-o"></i> </a>


      </div>
    </div>

  </Header>
  <!-- Start Content -->
  <div id="home" class="w3-content">
    <!-- About -->




    <div class="w3-center w3-padding-top-64">
      <img id="gifcapa" src="fotoIndex/iconeTransicao.gif" class="w3-image w3-mobile  " alt="icone" style="width:80%">
    </div>



    <div class="w3-center w3-padding-top-48">

      <picture>
        <source srcset="fotoIndex/titulo2.png" media="(max-width:700px)">
        <img src="fotoIndex/tituloMaior.png" alt="Logo Duvid">

      </picture>


    </div>










    <div class="ImagemDialogo w3-container w3-mobile w3-margin-top w3-responsive">

      <div class="w3-col s6">
        <div class="character ">
          <div class="balloon balao1" id="baloon1">
            <div class="triangle triangleLeft"></div>
            <span id="demo1" class="pad ">Clique na personagem</span>
          </div>
          <img id="demo1-img" onclick="ShowDialog(['Ei, Franciele, Você conhece o site Duvid - Geografia?' ,' É super legal porque tem um monte de textos e exercícios sobre geografia, tudo de graça. ', 
                  'Tem muito conteúdo sobre geografia para o ensino médio, sabe?',
                  'Ele explica tudo direitinho, com textos e imagens bem bacanas.', 
                  'E ainda tem várias questões interativas para praticar e testar nosso conhecimento.'], 

                  'demo1');" class="left" src="fotoIndex/FotoDir.gif" width="auto" height="auto" alt="FotoDir">


        </div>
      </div>



      <!-- segundo diálogo -->
      <div class="w3-col s6">
        <div class="character ">
          <div class="balloon balao2 " id="baloon2">
            <div class="triangle triangleRight"></div>
            <span id="demo2" class="pad">Clique na personagem</span>
          </div>
          <img id="demo2-img" onclick="ShowSecondDialog(['Nossa Jéssica, que demais!', 
                  'Eu sempre tive um pouco de dificuldade em geografia.', 
                  'Talvez esse site possa me ajudar!.',
                  'Vou dar uma olhada agora mesmo!', 
                  'Obrigada por avisar!'], 'demo2');" class="right" src="fotoIndex/person28.gif" width="auto"
            height="auto" alt="FotoDir">

        </div>

        <div class="container w3-mobile">
          <label for="typingSpeed" class="w3-text-white">Velocidade de digitação:</label>
          <input type="range" id="typingSpeed" min="30" max="150" step="1" value="50">
        </div>


        <div class="w3-container w3-mobile w3-margin">
          <button Class="w3-button w3-button w3-green w3-round-large"
            onclick="resetDialogVariables()">Reiniciar</button>

        </div>
      </div>


    </div>



    <div class="w3-margin-bottom">
      <h4>No site Duvid você encontra:</h4>
      <ul>
        <li>Mais de <strong>1000</strong> questões para se dar bem nos principais vestibulares do Brasil;</li>
        <li><strong>Textos autorais</strong> interativos com atividades legais no final;</li>
        <li><strong>Correção automática</strong> de questões comentadas de várias Universidades como UEL, UNICAMP, UERJ,
          além do ENEM, é claro. <span class="w3-small"><mark>(Questões atualizadas 2024).</mark></span>
        </li>
        <li>E o melhor, você pode baixar a versão do site na Google Play Store, é de graça e esses aplicativos não tem
          anúncios, e ainda não precisa de internet
          após instalado. Isso é muito bom, não é?</li>
      </ul>

    </div>


    <div id="members" class="w3-container w3-padding-32">
      <div class="w3-row w3-center">

        <div class="w3-third fotosCapa ">


          <a href="Duvid1Ano.html" target="_self">
            <img src="fotoIndex/capa1ano.png" alt="Name1">
          </a>

          <h4 class="bold"> <a href="Duvid1Ano.html" target="_self">Duvid 1º ano
            </a></h4>


          <div class="w3-panel">
            <h4>Aplicativo offline na Google Play Store - 1º ano</h4>
          </div>

          <div class="CardPlayImg">
            <a href="https://play.google.com/store/apps/details?id=io.kodular.geoleandro.Duvid1ano&hl=pt_BR&gl=US"
              target=" _blank">
              <img id="logoPlayStore1" src="fotoIndex/google-play-badge1.png" alt="Name1">
            </a>
            <p class="w3-small">Google Play e o logotipo do Google Play são marcas registradas da Google LLC.</p>
          </div>

        </div>




        <div class="w3-third fotosCapa">

          <a href="Duvid2Ano.html" target="_self">
            <img src="fotoIndex/capa2anob.png" alt="Name2">
          </a>


          <h4 class="bold"> <a href="Duvid2Ano.html" target="_self">Duvid 2º ano </a></h4>



          <div class="w3-panel">
            <h4>Aplicativo offline na Google Play Store - 2º ano</h4>
          </div>



          <div class="CardPlayImg">
            <a href="https://play.google.com/store/apps/details?id=io.kodular.geoleandro.Duvid2" target="_blank">
              <img id="logoPlayStore2" src="fotoIndex/google-play-badge1.png" alt="Name1">
            </a>
            <p class="w3-small">Google Play e o logotipo do Google Play são marcas registradas da Google LLC.</p>
          </div>

        </div>

        <div class="w3-third fotosCapa">

          <a href="Duvid3Ano.html" target="_self">
            <img src="fotoIndex/capa3ano.png" alt="Name3">
          </a>




          <h4 class="bold"> <a href="Duvid3Ano.html" target="_self">Duvid 3º ano</a></h4>



          <div class="w3-panel">
            <h4>Aplicativo offline na Google Play Store - 3º ano</h4>
          </div>

          <div class="CardPlayImg">
            <a href="https://play.google.com/store/apps/details?id=br.com.duvid" target="_blank">
              <img id="logoPlayStore3" src="fotoIndex/google-play-badge1.png" alt="Name1">
            </a>
            <p class="w3-small">Google Play e o logotipo do Google Play são marcas registradas da Google LLC.</p>
          </div>
        </div>
      </div>

    </div>

  </div>




  <!-- 


  <div class="w3-panel Avisos">

    <h2 class="w3-panel w3-center postit-tp9"><mark>
        <a class="w3-margin" href="paginas/sobre.html" target="_self">
          Conheça mais sobre o projeto!
        </a></mark>
    </h2>

    <h2 class="w3-panel w3-right postit-tp9"><mark>
        <a class="w3-margin" href="https://www.youtube.com/@duvidgeografia" target="_self">
          Canal Duvid Geografia no youtube!
        </a></mark>
    </h2>

    <h2 class="w3-panel w3-left postit-tp9 "><mark>
        <a class="w3-margin" href="blog/blog.html" target="_self">
          Duvid Blog!
        </a></mark>
    </h2>

    <h2 class="w3-panel w3-left postit-tp10 ">

      Duvid Simulado
      <br>em breve!

    </h2>


  </div> -->





  <div class="w3-panel Avisos w3-responsive">
    <div class="w3-row-padding">


      <div class="w3-col m6">
        <h2 class="w3-panel w3-lef postit-tp9">
          <mark>
            <a class="w3-margin" href="paginas/sobre.html" target="_self">
              Conheça mais sobre o projeto!
            </a>
          </mark>
        </h2>
        <h2 class="w3-panel w3-right postit-tp9">
          <mark>
            <a class="w3-margin" href="https://www.youtube.com/@duvidgeografia" target="_self">
              Canal Duvid Geografia no youtube!
            </a>
          </mark>
        </h2>
      </div>


      <div class="w3-col m6">
        <h2 class="w3-panel w3-left postit-tp9">
          <mark>
            <a class="w3-margin" href="blog/blog.html" target="_self">
              Duvid Blog!
            </a>
          </mark>
        </h2>
        <h2 class="w3-panel w3-left postit-tp9">
          <mark>
            <a class="w3-margin" href="simulados/capasimuladogeral.html" target="_self">
              Duvid Simulado!
            </a>
          </mark>
        </h2>
      </div>

      <div class="w3-col m6">
        <h2 class="w3-panel w3-right postit-tp9">
          <mark>
            <a class="w3-margin" href="paginas/livrosgeografia.html" target="_self">
              Livros sobre Geografia
            </a>
          </mark>
        </h2>
        <!-- <h2 class="w3-panel w3-right postit-tp9">
          <mark>
            <a class="w3-margin" href="simulados/capasimuladoenem.html" target="_self">
              Duvid Simulado!
            </a>
          </mark>
        </h2> -->
      </div>

    </div>
  </div>



  <div class="w3-center margemFooter ">
    <h3>Apoio:</h3>
    <p>
      <img class="w3-mobile w3-border w3-round-large  " src="fotoIndex/inova.png" alt="Inova IFSP">

    </p>

  </div>





  <footer class="footer w3-black ">


    <div class="containerFoot w3-margin-top">

      <p> <img id="iconeFooter" src="fotoIndex/marcaDuvid.png" alt="icone" class="">

        &copy; Duvid - Geografia 2022. </p>

      <a class="fa fa-instagram" href="https://www.instagram.com/leandrohenriquedasilva/" target="_blank">

      </a>

      <a class="fa fa-youtube" href="https://www.youtube.com/@duvidgeografia/" target="_blank">

      </a>

      <a class="fa-brands-tiktok" href="https://www.tiktok.com/@duvidgeografia/" target="_blank">

      </a>



      <p><a href="paginas/politicaPrivacidade.html" target="_self">Política de Privacidade</a></p>

      <i class="fa fa-envelope" style="width:30px"> </i> Email: leandro.henrique@ifsp.edu.br<br>

      <!-- <p><a href="paginas/termos.html" target="_self">Termos e Condições</a></p> -->

    </div>






    <!-- The Contact Section -->



  </footer>


  <!-- Global site tag (gtag.js) - Google Analytics -->

  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DPX55DSFZ0"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-DPX55DSFZ0');

  </script>


  <script>

    const typingSpeedSlider = document.getElementById("typingSpeed");

    var currentTypingSpeed = typingSpeedSlider.value;


    typingSpeedSlider.addEventListener("input", function () {
      currentTypingSpeed = typingSpeedSlider.value;
    });


    const typingSound = new Audio('audios/dialogsound.mp3');
    var currentLine = 0;
    var dialogLines;
    const typingSpeed = 50;
    var isFirstDialogDone = false;
    var isSecondDialogDone = true;
    var apertouDialogo = true;
    var isSecondDialogActivated = false;
    var balao1 = document.querySelector('.balao1');
    var balao2 = document.querySelector('.balao2');
    var imagem = document.getElementById('demo1-img');

    var indiceFraseAtual = 0;


    var liberaFrases = false;


    function ShowDialog(newLines, targetID) {

      if (isSecondDialogDone && apertouDialogo) {
        dialogLines = newLines;
        currentLine = 0;
        document.getElementById(targetID).innerHTML = '';
        AtivaDialogo(targetID, currentTypingSpeed);


        // imagem.addEventListener("click", function () {
        //     adicionarEventoDeCliqueAoPersonagem(targetID);

        // });

        isFirstDialogDone = false;

        balao1.style.display = "block";
        TransicaoBalao('baloon1');


      }

    }


    function TransicaoBalao(el) {
      document.getElementById(el).classList.add('fadeBaloon');
    }


    function adicionarEventoDeCliqueAoPersonagem(targetID) {


      AvancaDialogo(targetID);

      apertouDialogo = true;



      // console.log("cliquei na imagem");


    }


    function ShowSecondDialog(newLines, targetID) {
      if (isFirstDialogDone && apertouDialogo && !isSecondDialogActivated) {
        dialogLines = newLines;
        currentLine = 0;
        document.getElementById(targetID).innerHTML = '';
        AtivaDialogo(targetID, currentTypingSpeed);
        isSecondDialogActivated = true;

        // let imagem = document.getElementById('demo2-img');

        // imagem.addEventListener("click", function () {
        //     adicionarEventoDeCliqueAoPersonagem(targetID);
        // });

        balao2.style.display = "block";
        TransicaoBalao('baloon2');

      }



    }

    function AtivaDialogo(targetID, currentTypingSpeed) {

      typeWriter(dialogLines[currentLine], targetID, 0, currentTypingSpeed);
      // console.log(currentTypingSpeed);

    }



    function typeWriter(txt, targetID, contadorLetras, speed) {

      // let balloonWidth = document.querySelector('.balloon').offsetWidth;


      let waitTime = dialogLines[currentLine].length;




      if (contadorLetras < txt.length) {
        document.getElementById(targetID).innerHTML += txt.charAt(contadorLetras);
        contadorLetras++;

        typingSound.play();


        setTimeout(function () {
          apertouDialogo = false;
          // console.log("andando o diálogo");

          typeWriter(txt, targetID, contadorLetras, speed);


        }, speed);
      }

      else {

        setTimeout(function () {

          AvancaDialogo(targetID);

          typingSound.pause();
          typingSound.currentTime = 0;


          // console.log("acabou o diálogo");


        }, speed * waitTime);




        // AvancaDialogo(targetID);
        // apertouDialogo = true;



      }
    }






    function AvancaDialogo(targetID) {

      currentLine++;
      // console.log(currentLine);
      apertouDialogo = true;


      if (currentLine < dialogLines.length) {
        document.getElementById(targetID).innerHTML = '';
        AtivaDialogo(targetID, currentTypingSpeed);


      } else {
        document.getElementById(targetID).innerHTML = '';
        isFirstDialogDone = true;
        isSecondDialogDone = false;
        balao1.style.display = "none";
        balao2.style.display = "none";


      }
    }



    function resetDialogVariables() {
      isFirstDialogDone = false;
      isSecondDialogDone = true;
      apertouDialogo = true;
      contadorDialogo = 0;
      isSecondDialogActivated = false;
    }


    function DarkMode() {
      let element = document.body;
      element.classList.toggle("dark-mode");
    }
    // Modal Image Gallery
    function onClick(element) {
      document.getElementById("img01").src = element.src;
      document.getElementById("modal01").style.display = "block";
      var captionText = document.getElementById("caption");
      captionText.innerHTML = element.alt;
    }

    // Change style of navbar on scroll
    window.onscroll = function () { myFunction() };
    function myFunction() {
      var navbar = document.getElementById("myNavbar");
      if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-black";
      } else {
        navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-black", "");
      }
    }

    // Used to toggle the menu on small screens when clicking on the menu button
    function toggleFunction() {
      var x = document.getElementById("navDemo");
      if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
      } else {
        x.className = x.className.replace(" w3-show", "");
      }
    }
  </script>



</body>


</html>