<!DOCTYPE html>
<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.0" />
  <title>Assinatura Multiplica</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
    integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"
    integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="./style/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2/dist/sweetalert2.min.css">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2/dist/sweetalert2.min.js"></script>
  <script src="./js/index.js"></script>
</head>

<body onload="showAlert()">
  <main>

    <div class="container__main">
      <div class="container__main--logo_tutorial">
        <article class="container__main--form">
          <figure class="container__main--image">
            <img class="container__main--image-logo" src="./imagem/multiplica_investimentos-01.svg" alt="" />
          </figure>
          <div class="container__main--inputs">
            <select onchange="changeGroup()" type="text" class="input__empresa" name="empresa">
              <option hidden>Selecione a empresa</option>
              <option value="Multiplica Grupo">Multiplica Grupo</option>
              <option value="Multiplica Capital">Multiplica Capital</option>
            </select>
            <input onchange="changeHTML()" type="text" class="input__nome" name="nome" placeholder="Digite seu nome"
              maxlength="24" />
            <input onchange="changeHTML()" type="email" class="input__emailPessoal" name="email"
              placeholder="Digite seu e-mail" />
            <select onchange="changeHTML()" type="text" class="input__area" name="area">
              <option hidden>Selecione uma área</option>
              <option value="Análise e Planejamento Comercial">Análise e Planejamento Comercial</option>
              <option value="ASSET">ASSET</option>
              <option value="Auditoria e Controles Internos">Auditoria e Controles Internos</option>
              <option value="Backoffice">Backoffice</option>
              <option value="Backoffice de Fundos">Backoffice de Fundos</option>
              <option value="BeyondBank">BeyondBank</option>
              <option value="Cadastro">Cadastro</option>
              <option value="Câmbio">Câmbio</option>
              <option value="Célula de Prospecção Comercial">Célula de Prospecção Comercial</option>
              <option value="Cobrança">Cobrança</option>
              <option value="Comercial">Comercial</option>
              <option value="Compliance">Compliance</option>
              <option value="Controladoria">Controladoria</option>
              <option value="Crédito">Crédito</option>
              <option value="CSC">CSC</option>
              <option value="Diretoria">Diretoria</option>
              <option value="Financeiro">Financeiro</option>
              <option value="Formalização">Formalização</option>
              <option value="Gente e Gestão">Gente e Gestão</option>
              <option value="Governança Corporativa">Governança Corporativa</option>
              <option value="GPQ - Gestão de Processos e Qualidade">GPQ - Gestão de Processos e Qualidade</option>
              <option value="Inteligência Comercial">Inteligência Comercial</option>
              <option value="Jurídico">Jurídico</option>
              <option value="Marketing">Marketing</option>
              <option value="MiddleOffice">MiddleOffice</option>
              <option value="Produtos">Produtos</option>
              <option value="Recursos Humanos">Recursos Humanos</option>
              <option value="Relação com Investidor">Relação com Investidor</option>
              <option value="Seguros">Seguros</option>
              <option value="Tecnologia da Informação">Tecnologia da Informação</option>
            </select>
            <div class="input__ramalcelular"></div>
            <div class="input__ramalcelularselected"></div>
            <input onchange="phoneMask()" type="text" id="ramal" style="display: none" autocomplete="off" name="ramal"
              placeholder="Digite o ramal" maxlength="4" />
            <input onchange="phoneMaskCelular()" type="text" id="celular" style="display: none" autocomplete="off"
              name="celular" placeholder="Digite o celular" maxlength="15" />
            <div id="inputfile">
              <p id="inputfile_text" for="fileInput">Adicionar QR Code (logo abaixo estão as etapas para criá-lo):</p>
            </div>
            <div id="inputfile">
              <input type="file" accept="image/png, image/jpeg, image/jpg" id="fileInput" />
            </div>
            <div id="result">
              <img id="original" width="100" height="100" style="margin: 0px; width: 100px; height: 100px">
            </div>

            <!-- <div id="result" onclick="removeImage()"></div> -->
            <button id="createSignature" onclick="createSignature()">
              Download do arquivo HTML
            </button>
          </div>
        </article>
        <div id="inputfile_link">
          <div style="display: flex; justify-content: space-between;">
            <h2 style="margin-bottom: 4%;">
              Como gerar um QR Code:
            </h2>
            <p id="show_hide_card_qrcode">
              &#129171;</p>
          </div>
          <div id="div-qr-code-steps">
            <ul id="ul-lis-step" style="padding: 0;">
              <p>
                Entre no site
                <a target="_blank" href="https://www.qrplus.com.br/">https://www.qrplus.com.br/</a>
                e preencha os dados em "VCARD":
              </p>
              <img width="65%" src="./imagem/screenshotqrcode.png" style="margin: 2%;" alt="screenshot-qrcode1" />
            </ul>
          </div>
          <div id="div-qr-code-steps">
            <ul id="ul-lis-step" style="padding: 0;">
              <p>Clique em "Gerar QR Code" e depois em "JPG". Salve a imagem em seu computador.</p>
              <img width="50%" style="margin: 2%;" src="./imagem/screenshotqrcode2.png" alt="screenshot-qrcode2">
            </ul>
          </div>
        </div>
      </div>
      <button id="showTutorial">
        Ver tutorial
      </button>
      <div id="stepscontainer">
        <div id="steps">
          <div style="display: flex; justify-content: space-between;">
            <h2 style="margin-bottom: 4%;">Tutorial para criar assinatura:</h2>
            <p id="show_hide_card">
              &#129171;</p>
          </div>
          <ol>
            <li>
              <p>Preencha as informações no formulário</p>
            </li>
            <li>
              <p>
                Faça o download do arquivo "<span id="step">novaassinaturamultiplica.htm</span>" na pasta
                <span style="color: rgb(225, 60, 60); font-size: 13px; font-weight: 900;">Downloads !!! </span>
              </p>
              <ul>
                <ul>
                  <p>
                    Se o arquivo for renomeado para algo como "<span id="step">novaassinaturamultiplica(1).htm</span>",
                    exclua
                    o arquivo anterior e o renomeie tirando o número.
                  </p>
                </ul>
                <ul id="ul-lis-step">
                  <p>
                    Se a opção de fazer download de vários arquivos aparecer no navegador, clique em "Permitir"
                  </p>
                  <img src="./imagem/salvarvarios.png" height="auto" width="50%" alt="" style="margin: 2%" />
                </ul>
              </ul>
            </li>
            <li>
              <p>
                Faça o download do arquivo "<span id="step">Clique aqui para configurar assinatura.bat</span>"
              </p>
              <ul>
                <ul id="ul-lis-step">
                  <p>
                    Se estiver utilizando "Microsoft Edge", clique no ícone de Downloads e nos 3 pontos:
                  </p>
                  <img src="./imagem/edge1.png" width="50%" height="auto" alt="" style="margin: 2%" />
                </ul>
                <ul id="ul-lis-step">
                  <p>
                    Com as ações abertas, clique em "Manter":
                  </p>
                  <img src="./imagem/edge2.png" width="50%" height="auto" alt="" style="margin: 2%" />
                </ul>
                <ul id="ul-lis-step">
                  <p>
                    Depois clique em "Mostrar mais".
                  </p>
                  <img src="./imagem/edge3.png" width="50%" height="auto" alt="" style="margin: 2%;" />
                </ul>
                <ul id="ul-lis-step">
                  <p>
                    E depois em "Manter mesmo assim":
                  </p>
                  <img src="./imagem/edge4.png" width="50%" height="auto" alt="" style=" margin: 2%;" />
                </ul>
              </ul>
            </li>
            <li>
              <p>
                Clique no arquivo "<span id="step">Clique aqui para configurar assinatura.bat</span>"
              </p>
              <ul id="ul-lis-step">
                <p>
                  Aceite a execução do arquivo mesmo que apareça como arriscado:
                </p>
                <img src="./imagem/executarmaisinfo.png" width="50%" height="auto" alt="" style=" margin: 2%;" />
              </ul>
              <ul id="ul-lis-step">
                <p>
                </p>
                <img src="./imagem/executarassimmesmo.png" width="50%" height="auto" alt="" style="margin: 0 2% 2%" />
              </ul>
            </li>
            <li>
              <p>
                Após a execução do arquivo, aparecerá a mensagem de sucesso:
              </p>
              <ul id="ul-lis-step">
                <p>Clique em qualquer tecla do teclado e ela será fechada.</p>
                <img src="./imagem/cmd.png" width="70%" height="auto" alt="" style=" margin: 2%;" />
              </ul>
            </li>
            <li>
              <p>
                Depois da execução desse arquivo, abra o aplicativo do Outlook
              </p>
            </li>
            <li>
              <p>Clique em "Arquivo":</p>
              <img src="./imagem/screenshotemail1.png" width="80%" height="auto" alt="" style="margin: 0% 2% 2% 18%;" />
            </li>
            <li>
              <p>Clique em "Opções":</p>
              <img src="./imagem/screenshotemail2.png" width="80%" height="auto" alt="" style="margin: 0% 2% 2% 18%;" />
            </li>
            <li>
              <p>Clique em "Email" e em "Assinaturas":</p>
              <img src="./imagem/screenshotemail3.png" width="80%" height="auto" alt="" style="margin: 0% 2% 2% 18%;" />
            </li>
            <li>
              <p style="width: 80%">
                Clique em "novaassinaturamultiplica" na opção "Selecione a
                assinatura a ser editada", em "Novas mensagens" e em
                "Respostas/encaminhamentos".
              </p>
              <ul id="ul-lis-step">
                <p>
                  Por último, clique em "OK":
                </p>
                <img src="./imagem/screenshotemail4.png" width="70%" height="auto" alt="" style="margin:2%;" />
              </ul>
            </li>
          </ol>
        </div>
        <footer class="footer">
          <div style="display: flex; justify-content: space-between;">
            <h2 style="margin-bottom: 4%;">
              Observações:
            </h2>
            <p id="show_hide_card_footer">
              &#129171;</p>
          </div>
          <div id="observacao-step">
            <p>Caso não funcione de acordo com o esperado, baixe o template ( <a
                href="./template/Assinaturas-email-editável-Novo.pptx" download>aqui</a> ), edite, copie e cole* (como
              imagem)
              no editor (passo 10 do tutoral), conforme mostrado
              <a href="#" id="link-editor">aqui</a>
              .
            </p>
            <p style="color: rgb(177, 68, 68);">* nesse caso, os links (telefone, redes sociais, etc) não funcionarão.
            </p>
          </div>

          <div id="border-div-steps">
            <p>
              OBS: Não funciona corretamente na versão nova (beta) do Outlook.
            </p>
            <img src="./imagem/versaoantiga.png" width="50%" style="margin: 2%" alt="foto-check-versao-nova">

          </div>
          <p style="display: flex; align-items: center;">
            Para configurar a assinatura na versão beta siga
            esse outro tutorial:
            <button id="meuBotaoShow" class="button-show">&#43;
            </button>
            <button id="meuBotaoHide" class="button-hide" style="display: none;">&#8722;
            </button>
          </p>
          <div id="modal2" style="display: none;">
            <div class="sugestions-beta">
              <p id="modal-paragraph">
                Clique <a target="_blank" href="./template/novaassinaturamultiplicabeta.html"> aqui</a>.
              </p>
              <div id="border-div-steps">
                <p id="modal-paragraph">Copie o conteúdo da página:</p>
                <img width="70%" style="margin: 2%" src="./imagem/copied.PNG" alt="">
              </div>
              <div id="border-div-steps">
                <p id="modal-paragraph">Clique em "Exibir" e em "Configurações de exibição":</p>
                <img width="70%" " style=" margin: 2%" src="./imagem/configsignbeta.png" alt="">
              </div>
              <div id="border-div-steps">
                <p id="modal-paragraph">Clique em "Contas", em "Assinaturas" e em "+ Nova assinatura":</p>
                <img width="70%" " style=" margin: 2%" src="./imagem/novasignbeta.png" alt="">
              </div>
              <div id="border-div-steps">
                <p id="modal-paragraph">Escolha um nome para sua assinatura e cole o conteúdo copiado:</p>
                <img width="70%" " style=" margin: 2%" src="./imagem/pastedsignature.PNG" alt="">
              </div>
              <div id="border-div-steps">
                <p id="modal-paragraph">Clique em cima do QRcode e na tecla de "Delete" (caso não queira ter o seu
                  próprio), ou clique no ícone de imagem e selecione o seu próprio QRCode:</p>
                <img width="70%" " style=" margin: 2%" src="./imagem/trocarqrcode.png" alt="">
              </div>
              <div id="border-div-steps">
                <p id="modal-paragraph">Edite a assinatura com suas próprias informações:</p>
                <img width="70%" " style=" margin: 2%" src="./imagem/editinfos.png" alt="">
              </div>
              <div id="border-div-steps">
                <p id="modal-paragraph">Selecione o nome da assinatura que voce escolheu:</p>
                <img width="70%" " style=" margin: 2%" src="./imagem/selectedsign.png" alt="">
              </div>
              <div id="border-div-steps">
                <p id="modal-paragraph">Selecione o mesmo nome para tornar essa sua assinatura padrão e clique em
                  "Salvar".</p>
                <img width="70%" " style=" margin: 2%" src="./imagem/padraosign.png" alt="">
              </div>
              <p id="modal-paragraph">Pronto! Sua assinatura estará configurada.</p>
            </div>
          </div>
          </p>
        </footer>
        </article>
      </div>
      </section>
      <div id="modal" onclick="document.querySelector('#modal').style.display = 'none'">
        <img src="./imagem/modal.png" alt="">
      </div>

      <div id="image__signature">
        <table class="table">
          <tr>
            <td>
              <table align="center" style="width: 100%;">
                <tr>
                  <td style="width: 40%; padding: 1% 10%" id="image__grupo">
                    <img src="./imagem/logoMultiplicaTable.png" alt="">
                  </td>
                  <td style="width: 50%; padding: 0 0 0 5%">
                    <table>
                      <tr style="margin: 0">
                        <td>
                          <h1 id="image__h1">Nome</h1>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <p id="image__p" style="color: #6accdc;padding-left: 2%;
                                ">Área</p>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <p class="input__emailPessoal" style="color: #6accdc;padding-left: 2%;
                                ">Email</p>
                        </td>
                      </tr>
                      <tr style="width: 100%; padding: 0;">
                        <td>
                          <table>
                            <td style="color: #ffffff;padding-right: 5px;
                                  ">
                              <img src="./imagem/logoTelefone.png" alt="" style="width: 20px;height: 20px;" />
                            </td>
                            <td>
                              <a id="image__telefone" style="text-decoration: none; color: #ffffff;">
                                (11) 2578-5628</a>
                            </td>
                            <td style="color: #ffffff; padding: 0 5px">
                              <img src="./imagem/logoTelefone2.png" alt="" style="width: 20px;height: 20px;" />
                            </td>
                            <td>
                              <a id="image__ramal" style="text-decoration: none; color: #ffffff;padding: 0"
                                style="padding-left: 10%;">1234 </a>
                            </td>
                        </td>
                    </table>
                </tr>
                <tr>
                  <table>
                    <td>
                    <td>
                      <img src="./imagem/logoMundo.png" alt="" style="width: 20px;height: 20px;" />
                    </td>
                    <td style="padding: 0 5px">
                      <a style=" color: #ffffff; line-height: 30px;" id="email"
                        href="http://www.grupomultiplica.com.br/">
                        www.grupomultiplica.com.br
                      </a>
                    </td>
            </td>
        </table>
        </tr>
        </table>
        <table align="center" style="padding: 0 5%;">
          <tr>
            <td align="center">
            <td>
              <img src="./imagem/logoLocal.png" alt="" style="width:20px;height: 20px;" />
            </td>
            <td style="padding: 0 5px">
              <a style="text-decoration: none; color: #ffffff;" target="_blank"
                href="http://goo.gl/maps/c5ntV6iDwuR4A4so8">
                Av. Paulista, 283 | Cj 141 | 14º andar | CEP:01311-000 |
                Bela Vista - SP - Brasil
              </a>
            </td>
            </td>
          </tr>
        </table>
        </td>
        </tr>
        </table>
      </div>
  </main>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
    integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"
    integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#celular").mask("+55 (00) 00000-0000");
    });
    $("#showTutorial").click(function () {
      $("#steps").animate({
        width: 'toggle'
      });
      $(".footer").animate({
        width: 'toggle'
      });
      $("#inputfile_link").animate({
        width: 'toggle'
      });
    });

    const linkEditor = document.getElementById('link-editor');
    const modal = document.getElementById('modal');
    const closeModal = document.getElementById('close-modal');

    linkEditor.addEventListener('click', function (event) {
      event.preventDefault();
      modal.style.display = 'block';
    });

    closeModal.addEventListener('click', function (event) {
      modal.style.display = 'none';
    });
  </script>
  <script type="text/javascript">
    document.querySelector("#meuBotaoShow").addEventListener("click", function () {
      var modalElement = document.querySelector("#modal2");
      modalElement.style.display = "block";
      var modalElement2 = document.querySelector("#meuBotaoHide");
      modalElement2.style.display = "inline";
    });
    document.querySelector("#meuBotaoHide").addEventListener("click", function () {
      var modalElement = document.querySelector("#modal2");
      modalElement.style.display = "none";
      var modalElement2 = document.querySelector("#meuBotaoHide");
      modalElement2.style.display = "none";
    });

    document.querySelector("#showTutorial").addEventListener("click", function () {
      var tutorial = document.querySelector("#steps");

      if (tutorial.style.width < "5px") {
        var modalElement2 = document.querySelector(".container__main--form");
        modalElement2.classList.add("container__main--form-with-tutorial");
        var modalElement3 = document.querySelector(".container__main--inputs");
        modalElement3.classList.add("container__main--inputs-with-tutorial");
        var modalElement4 = document.querySelector("#stepscontainer");
        modalElement4.style.margin = "2%";
        var modalElement5 = document.querySelector("#createSignature");
        modalElement5.style.width = "60%";
        var modalElement6 = document.querySelector("#inputfile input[type='file']");
        modalElement6.style.width = "94.5%";
      }
      if (tutorial.style.width > "5px") {
        var modalElement2 = document.querySelector(".container__main--form");
        modalElement2.classList.remove("container__main--form-with-tutorial");
        var modalElement3 = document.querySelector(".container__main--inputs");
        modalElement3.classList.remove("container__main--inputs-with-tutorial");
        var modalElement4 = document.querySelector("#stepscontainer");
        modalElement4.style.margin = "0";
        var modalElement5 = document.querySelector("#createSignature");
        modalElement5.style.width = "30%";
        var modalElement6 = document.querySelector("#inputfile input[type='file']");
        modalElement6.style.width = "96.8%";
      }
    });

    document.querySelector("#show_hide_card").addEventListener("click", function () {
      var step = document.querySelector("#steps");
      var containermain = document.querySelector(".container__main")
      var footer = document.querySelector(".footer");
      var observacao = document.querySelector("#inputfile_link");

      if (step.style.height === "7vh") {
        step.style.height = "75vh"
      } else {
        step.style.height = "7vh"
      }

      if (step.style.height === "7vh" && observacao.style.height === "7vh" && footer.style.height === "7vh") {
        containermain.style.height = "105vh"
      } else {
        containermain.style.height = "inherit"
      }
    });

    document.querySelector("#show_hide_card_qrcode").addEventListener("click", function () {
      var observacao = document.querySelector("#inputfile_link");
      var step = document.querySelector("#steps");
      var containermain = document.querySelector(".container__main")
      var footer = document.querySelector(".footer");

      if (observacao.style.height === "7vh") {
        observacao.style.height = "75vh"
      } else {
        observacao.style.height = "7vh"
      }

      if (step.style.height === "7vh" && observacao.style.height === "7vh" && footer.style.height === "7vh") {
        containermain.style.height = "105vh";
      } else {
        containermain.style.height = "inherit"
      }
    });

    document.querySelector("#show_hide_card_footer").addEventListener("click", function () {
      var footer = document.querySelector(".footer");
      var containermain = document.querySelector(".container__main")
      var observacao = document.querySelector("#inputfile_link");
      var step = document.querySelector("#steps");

      if (footer.style.height === "7vh") {
        footer.style.height = "76vh"
      } else {
        footer.style.height = "7vh"
      }

      if (step.style.height === "7vh" && observacao.style.height === "7vh" && footer.style.height === "7vh") {
        containermain.style.height = "105vh"
      } else {
        containermain.style.height = "inherit"
      }
    });

  </script>
</body>


</html>