HTML |
---|
<style> /* Início estilo banner */ .compositiondani-banner { position: relative; min-height: 220px; border-radius: 5px; margin-bottom: 5px; overflow: hidden; } .compositiondani-banner-image { background-image: url("https://totvscrm.com/wp-content/uploads/2024/04/capa-com-fundo-e-sem-icone-TDN-AZUL2.png"); background-size: cover; min-height: inherit; width: 100%; } .compositiondani-banner-overlay { min-height: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; pointer-events: none; } .compositiondani-banner-logo-container { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; bottom: 0; transform: translate(-50%, -50%); } .compositiondani-banner-logo { width: 350px; height: 180px; background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png"); background-size: contain; background-repeat: no-repeat; } .compositiondani-banner-title { margin-bottom: 10px !important; padding: 10px !important; background: rgba(0, 0, 0, 0.5) !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 12px !important; line-height: 1.3 !important; max-height: 133px !important; font-family: "Roboto", sans-serif !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #ffffff !important; position: relative !important; margin-top: 130px !important; border-radius: 10px !important; } .compositiondani-banner-content { position: absolute; padding: 30px; max-width: 60%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; color: white; text-align: center; } .custom-header h1 { font-size: 16px; background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px; margin: 0; } .negrito-materialize { font-weight: bold; } .custom-margin-justified { margin: 0 20px; text-align: justify; } /* Final estilo banner */ #content.page.view { padding-right: 0 !important; } /* impedir vermelho no nav */ #breadcrumb-section > nav { background-color: initial !important; box-shadow: none !important; } @media only screen and (min-width: 601px) { nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { height: auto !important; line-height: normal !important; } } /* final vermelho no nav */ </style> <header> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/> <div class="compositiondani-banner"> <div class="compositiondani-banner-image"></div> <div class="compositiondani-banner-overlay"></div> <div class="compositiondani-banner-logo-container"> <div class="compositiondani-banner-logo"></div> </div> <div class="compositiondani-banner-content"> <h1 class="compositiondani-banner-title"> IMPLEMENTAÇÃOIMPLEMENTACIÓN DE DALA NOVANUEVA ABASOLAPA 'COMPLEMENTOS' EN NALA ORDEMORDEN DE VENDAVENTA </h1> </header> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Inclua o estilo do tema Monokai --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" /> <style> /* ============================== = CONFIGURAÇÕES GERAIS = =============================== */ * { font-family: "Roboto", sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; } a { text-decoration: none; -webkit-tap-highlight-color: transparent; } a:hover { } li { font-size: 14px !important; } h3 { font-size: 14px !important; font-weight: bold; } h1 { font-size: 13px !important; } h2 { font-size: 15px !important; font-weight: bold; } td, th { padding: 6px; } * p { margin-bottom: 0 !important; } /* ============================== = ESTILOS DE TÍTULOS = =============================== */ #title-text { display: none !important; } #content > div.page-metadata > div { float: none !important; line-height: normal !important; width: auto !important; display: none !important; /* ou outra propriedade de display que você deseja usar */ margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */ } #section2 > ol > li:nth-child(2) > p { margin-bottom: 0; } .wiki-content h1, .wiki-content h2 { font-family: "Roboto", sans-serif !important; font-size: 13px!important; } .wiki-content h1 { font-size: 13px !important; } .wiki-content h2 { font-size: 14px !important; color: #42526e !important; border-bottom: 2px solid #dfe1e5; padding-bottom: 5px; font-weight: bold; } .custom-heading, h3.custom-h3 { font-size: 16px; color: #42526e; margin-bottom: 20px; } .custom-h1 { color: #feac0e; } .explanation h2 { font-weight: bold; } /* ============================== = ESTILOS DE TEXTO = =============================== */ .wiki-content p { font-size: 14px !important; } .justificado, .custom-justified { text-align: justify; margin: 10px 0; } /* ============================== = ESTILOS DE LINKS = =============================== */ .wiki-content a, .wiki-content a:link, .wiki-content a:visited, .wiki-content a:focus, .wiki-content a:active { text-decoration: none; color: #42526e; font-size: 14px; } .wiki-content a:hover { color: white; } /* ============================== = ESTILOS DE CONTAINER = =============================== */ .custom-content { background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin: 0 10px; max-width: 100%; overflow: hidden; } .faq-container { max-width: 800px; margin: 0 auto; padding: 20px; } /* ============================== = ESTILOS DE CARDS = =============================== */ .card { border: 2px solid #9aa1ad; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: #f4f5f7; color: #42526e; overflow-x: hidden; top: 0; } /* ============================== = ESTILOS DE TABS = =============================== */ .tabs { background-color: #dfe1e5; } .tabs .tab a { color: rgb(66, 82, 110); } .tabs .tab a:hover, .tabs .tab a.active, .tabs .tab a:focus.active { color: #0897E9; background-color: transparent; } .tabs .tab a:focus { background-color: rgba(8, 151, 233, 0.25); } .tabs .tab.disabled a, .tabs .tab.disabled a:hover { color: rgba(16, 148, 184, 0.24); } .tabs .indicator { background-color: #0897E9; } .tab-content { gap: 0; padding: 10px; } .tab-content pre { max-width: 100%; overflow-x: hidden; } /* ============================== = ESTILOS DE ÍCONES = =============================== */ .icon-list, .icon { padding-left: 0; list-style-type: none; } .icon { display: inline-block; width: 24px; vertical-align: middle; margin-right: 45px; position: relative; left: -25px; } .item .label i { margin-right: 10px; } .label b { color: #42526e; } td th { color: #42526e; } /* ============================== = ESTILOS DE COMPONENTES = =============================== */ .collapsible, .collapsible-header, .collapsible-body { box-shadow: none !important; } .faq-question { font-weight: bold; margin-bottom: 5px; } .faq-answer { margin-bottom: 20px; } .item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; } .item:last-child { border-bottom: none; } .item .label { flex: 1; font-weight: bold; } .item .value { flex: 1; text-align: right; } .item { border-bottom: 1px solid #e0e0e0; padding: 10px 0; display: flex; justify-content: space-between; align-items: center; } .item:last-child { border-bottom: none; } /* Estilos para o label */ .label { font-weight: bold; display: flex; align-items: center; } .item .label i { margin-right: 10px; /* Adiciona espaço depois dos ícones */ } /* ============================== = ESTILOS DE IMAGENS = =============================== */ .imagem-responsiva { max-width: 100%; height: auto; } .custom-header-bg img { width: 100%; height: auto; display: block; } /* ============================== = ESTILOS DE VÍDEO = =============================== */ #youtube-video-container iframe { width: 100%; height: auto; display: block; } .video-container { max-width: 800px; margin: 0 auto; } .ytp-cued-thumbnail-overlay-image { background-size: cover; background-position: center; width: 100%; height: 100%; position: absolute; } /* ============================== = OUTROS ESTILOS PERSONALIZADOS = =============================== */ .custom-content { background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin: 0 10px; max-width: 100%; overflow: hidden; } .custom-heading { font-size: 16px; color: #42526e; margin: 10px 0; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px; font-weight: bold; } #indice { border-radius: 5px; padding: 20px; max-width: 100%; overflow: hidden; } #indice h2 { text-align: center; margin-bottom: 16px; } #indice ul { list-style-type: none; padding-left: 0; } #indice li { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.1s ease; } #indice li:last-child { border-bottom: none; } #indice li:hover { background-color: #0897E9; color: white; } /* ============================== = ESTILOS DE TABELAS = ============================== */ .custom-grey { background-color: #ffffff; } .custom-grey th, .custom-grey td { border: 1px solid #086ea8; padding: 10px; color:#064569 } .custom-grey tr:nth-child(even) td { background-color: #d2e6f1; } .custom-grey tr:nth-child(odd) td { background-color: #f4f5f7; } .custom-grey th { color: #fff; background-color: #0897E9; } .custom-grey td { font-size: 13px; } .custom-grey tr:nth-child(odd) { background-color: #e4e4e6; } .custom-grey tr:nth-child(even) { background-color: #dfdfdf; } .custom-alert-warning { background-color: #fdf1dc; /* ou qualquer outra cor que preferir */ color: #5c4225; /* cor do texto */ border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */ padding: 10px; /* adicione padding conforme necessário */ } .custom-alert-warning .fas { color: #5c4225; /* cor do ícone no alerta de aviso */ margin-right: 10px; /* espaço extra entre o ícone e o texto */ } .custom-alert-danger { background-color: #ffe7ec; /* ou qualquer outra cor que preferir */ color: #9e1d3b; /* cor do texto */ border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */ padding: 10px; /* adicione padding conforme necessário */ } .custom-alert-danger .fas { color: #f34b72; /* cor do ícone no alerta de perigo */ margin-right: 10px; /* espaço extra entre o ícone e o texto */ } .alert-secondary-custom { background-color: #d9eefa; /* Cor de fundo do alerta */ color: #094f77; /* Cor do texto */ border: 1px solid #094f77; /* adicionando borda da mesma cor que o ícone */ padding: 10px; /* adicione padding conforme necessário */ } .alert-secondary-custom .fas { color: #0897E9; /* Cor dos ícones FontAwesome */ margin-right: 10px; /* Espaço extra entre o ícone e o texto */ } .custom-content ul li { list-style-type: disc !important; /* Forçando 'bolinhas' */ padding-left: 30px; /* Espaçamento para alinhar com o texto se necessário */ margin-bottom: 10px; /* Espaço entre itens da lista se necessário */ } /* ========== FIM DO ESTILO ========= */ </style> <!-- Tabs e conteúdo das guias --> <div class="card"> <ul class="tabs"> <li class="tab col s4"><a href="#tab1">DETALHES>DETALLES FUNCIONAIS<FUNCIONALES</a></li> <li class="tab col s4"><a href="#tab3">FAQ</a></li> </ul> <!-- Tab Content --> <div id="tab1" class="col s12"> <div class="tab-content"> <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;"> <section id="section1" style="margin-top: 40px;"> <!-- Tab 70 conteúdo --> <!-- Segundo Card --> <!-- Primeiro Card --> <!-- Primeiro Card --> <div class="card"> <div class="item"> <span class="label"> <table border="1"> <tr> <td><i class="fas fa-tags"></i> <b>Produto<b>Producto:</b></td> <td>Gestão<td>Gestión de Clientes<clientes</td> </tr> <tr> <td><i class="fas fa-link"></i> <b>Linha<b>Línea de Produtoproducto:</b></td> <td>TOTVS CRM - VENDAS<VENTAS</td> </tr> <tr> <td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td> <td>Cross Segmentos</td> </tr> <tr> <td><i class="fas fa-desktop"></i> <b>Módulo:</b></td> <td>Vendas<<td>Ventas</td> </tr> <tr> <td><i class="fas fa-globe"></i> <b>Aplicação<b>Aplicación:</b></td> <td>Web</td> </tr> <tr> <td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td> <td> ME010220241613a</td> </tr> </table> </span> </div> </div> <br> <h2 class="custom-heading"> <i class="fa-solid fa-eye"></i>    VISÃOVISIÓN GERALGENERAL </h2> <p class="justificado"> A TOTVS CRM inovouinnovó aoal introduzirintroducir umauna novanueva abasolapa denominada "Complementos" naen la interfaceinterfaz de ordensórdenes de vendaventa. Este desenvolvimento visa melhorar a usabilidade e a eficiência do processo de finalizaçãodesarrollo tiene por objetivo mejorar la usabilidad y la eficiencia del proceso de finalización de pedidos, centralizando informaçõesinformaciones complementarescomplementarias, que, anteriormente, estavamestaban dispersas naen la abasolapa "ResumoResumen". DentreEntre estas informações,informaciones encontram-se observaçõesencuentran observaciones, detalhesdetalles de entrega, parcelascuotas ey assinaturasfirmas. La Areorganización reorganizaçãode dessesestos elementos emen umauna única abasolapa simplifica ala interaçãointeracción dodel usuáriousuario comcon oel sistema ey facilita umauna tomadatoma de decisãodecisión maismás informada ey eficaz. </p> <br> <h2 class="custom-heading"> <i class="fa-solid fa-rocket"></i>    OBJETIVO </h2> <p class="justificado"> OEl objetivo de destaeste mudançacambio ées aumentar la aclaridad clarezay eaccesibilidad acessibilidadede daslas informaçõesinformaciones necessáriasinnecesarias aoal concluirfinalizar umun pedido, reduzindoreduciendo oel tempotiempo de processamentoprocesamiento ey aumentando la aprecisión precisãode daslas transaçõestransacciones. </p> <br> <!-- ... (seu conteúdo existente) ... --> <h2 class="custom-heading"> <i class="fa-solid fa-book"></i>   ANTES DE COMEÇARCOMENZAR </h2> <h3>Requisitos</h3> <ol> <li> <b>Acesso<b>Acceso necessárionecesario:</b> ÉEs necessárionecesario ser administrador dodel sistema para habilitar oslos parâmetrosparámetros "AssinaturaFirma Obrigatóriaobligatoria" ey "Habilitar Parcelascuotas", que permiten permitemla avisibilidad visibilidadede destasestas funcionalidades en nala abasolapa "Complementos". </li> </ol> </section> <section id="section2" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALHESDETALLES FUNCIONAIS<FUNCIONALES</h2> <br> <ol> <li> <p><strong> NovaNueva abasolapa "Complementos":</strong></p> <ul> <li style="list-style-type: disc;"> IntroduzimosSe incluyó umauna abasolapa dedicada naen la interfaceinterfaz de ordensórdenes de vendaventa para centralizar informaçõesinformaciones críticas que antes estavamestaban dispersas, facilitando oel acessoacceso ey ala ediçãoedición.</li> </ul><br> <img src="https://totvscrm.com/wp-content/uploads/2024/05/MOCKUP-TDN-RELEASE-COMPONENTES-aba.png" alt="" title="" style="width: 100%; height: auto; max-width: 100%; display: block;"> <li> <p><strong>Campo "ObservaçãoObservación" ey seçãosección "Entrega":</strong></p> <ul> <li style="list-style-type: disc;"> <strong>Campo "ObservaçãoObservación":</strong> IncluímosSe incluyó umun campo de texto "ObservaçãoObservación" en nala abasolapa "Complementos" comcon capacidadecapacidad para 4000 caracteres. Este campo permite aosa los usuáriosusuarios registrar detalhesdetalles importantes ey notas específicas sobre cada pedido, facilitando oel acompanhamentoseguimiento ey ala comunicaçãocomunicación relacionada aoal pedido. </li> <li style="list-style-type: disc;"> <p> <strong>Seção<strong>Sección "Entrega":</strong> TransferimosSe atransfirió seçãola sección de entrega, que antes estaba estavaen nala abasolapa "ResumoResumen", paraa ala abasolapa "Complementos". </p> </li></li> <img src="https://totvscrm.com/wp-content/uploads/2024/05/MOCKUP-TDN-RELEASE-COMPONENTES-entregas.png" alt="" title="" style="width: 100%; height: auto; max-width: 100%; display: block;"> </ol> <ol start="3"> <li> <p><strong>Seção<p><strong>Sección "ParcelasCuotas" ey campo "AssinaturaFirma":</strong></p> <ul> <li style="list-style-type: disc;"> <strong>Seção<strong>Sección"ParcelasCuotas":</strong> ALa seçãosección de parcelascuotas, anteriormente ubicada localizadaen nala abasolapa 'ResumoResumen', foifue movida paraa ala abasolapa 'Complementos'. </li> <li style="list-style-type: disc;"> <p> <strong>Campo "AssinaturaFirma":</strong> IntroduzimosEn um campo de assinatura na aba la solapa 'Complementos'. se Esseincluyó un posicionamentocampo garantede quefirma. aEl assinaturacual sejagarantiza facilmentefácil acessívelacceso ey visívelvisibilidad, ajudandoayudando a assegurargarantizar ala autenticaçãoautenticación ey ala finalizaçãofinalización dodel pedido de forma eficiente ey segura." </p> </li></li> <br> <div class="alert alert-warning" role="alert" style="padding-left: 20px;"> <i class="fas fa-info-circle"></i> <strong>Atenção<strong>Atención:</strong><br> Para visualizar oel campo 'AssinaturaFirma' en nala abasolapa 'Complementos' en nala interfaceinterfaz web, ées necessárionecesario que ala assinaturafirma sejase realizadarealice previamente noen la aplicativoaplicación móvelmóvil. Certifique-seAsegúrese de completar este essepaso passoen noel mobile para que ala assinaturafirma sejasea sincronizada y emostrada exibidacorrectamente corretamenteen nala web. </div> <img src="https://totvscrm.com/wp-content/uploads/2024/05/MOCKUP-TDN-RELEASE-COMPONENTES-assinatura.png" alt="" title="" style="width: 100%; height: auto; max-width: 100%; display: block;"> </ol> </li> <br> <br> </section> <section id="section3" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>  COMO¿CÓMO USARUTILIZAR?</h2> <ol> <li><strong>Acessar<li><strong>Acceda a la Ordemorden de Vendaventa:</strong> Entre noal módulo de VendasVentas dodel TOTVS CRM, selecioneseleccione ouo inicie umauna novanueva ordemorden de vendaventa.</li> <li><strong>Explorar<li><strong>Explore ala Abasolapa "Complementos":</strong> UtilizeUtilice esta abasolapa para acessaracceder ey editar todas aslas informaçõesinformaciones necessáriasnecesarias semsin anecesidad necessidade dede navegar por múltiplasmúltiples abassolapas.</li> <li><strong>Configurar<li><strong>Configure Parâmetrosparámetros:</strong> Como administrador, garantagarantice que todos oslos parâmetrosparámetros necessáriosnecesarios estejamestén habilitados para que oslos campos relevantes sejamestén visíveisvisibles ey funcionaisfuncionales.</li> </ol> <br> <br> <p> <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;"> <source src="https://totvscrm.com/wp-content/uploads/2024/05/complemento_3.mp4" type="video/mp4"> </video> </p><br> </section> <section id="section4" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i>  EXEMPLOnbspEJEMPLO PRÁTICO<PRÁCTICO</h2> <p> <br> <b>Desafio<b>Desafío Antigoantiguo:</b> <p> Anteriormente, ala abasolapa "ResumoResumen" en naslas ordensórdenes de vendaventa estavaestaba sobrecarregadasobrecargada comcon umauna variedadevariedad de informaçõesinformaciones complementarescomplementarias, que naen verdadeverdad deveriamdeberían ser breves ey diretasdirectas. EssaEsta dispersãodispersión de informaçõesinformaciones no nãosolo sócomplicaba complicavael oacceso acessoa àslas informaçõesinformaciones necessáriasnecesarias, massino tambémtambién aumentavaaumentaba ala probabilidadeprobabilidad de erroserrores e ineficiênciasineficiencias durante oel processoproceso de fechamentocierre de vendasventas. </p> <br> <b>Solução<b>Solución Atualizadaactualizada:</b> <p>A<p>La introducción introduçãode dala abasolapa "Complementos" transformoutransformó la ogestión gerenciamentode daslas ordensórdenes de vendaventa aoal centralizar todas aslas informaçõesinformaciones críticas emen umun único locallugar. Esta abasolapa específica agoraahora acopla detalhesdetalles como observaçõesobservaciones, entrega, parcelascuotas ey assinaturasfirmas, que antes estavamestaban dispersos. ALa reorganizaçãoreorganización proporcionouproporcionó umauna clarezaclaridad significativa, melhorandomejorando ala eficiênciaeficiencia dodel processoproceso de vendasventas ey reduzindoreduciendo ael margemmargen de erroerror. AgoraAhora, todos oslos aspectos importantes de umun pedido sãoson revisados ey confirmados de maneiramanera sistemática antes dade la finalizaçãofinalización, garantindogarantizando umun fechamentocierre de pedido maismás seguro ey preciso.</p> <br> </p> </section> </div> <!-- Tab 30 fim --> <!-- Tab 30 fim --> </div> </div> <div id="tab3" class="col s12"> <div class="tab-content"> <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;"> <!-- Primeira coluna do conteúdo da guia 2 --> <div class="container"> <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTASPREGUNTAS FREQUENTES<FRECUENTES</h2> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">question_answer</i>Éi>¿Es necesario necessáriotener algumaalguna configuraçãoconfiguración especial para ver oel campo "AssinaturaFirma"? </div> <div class="collapsible-body"><span> SimSí, ées necessárionecesario que la afirma assinaturase sejarealice feitaen nola aplicativoaplicación móvelmóvil para que oel campo de assinaturafirma sejaesté visívelvisible ey sincronizado en nala interfaceinterfaz web. Certifique-seAsegúrese de completar la afirma assinaturaen noel dispositivo móvelmóvil para que elaesta aparezca apareçacorrectamente corretamenteen nala web. </span></div> </li> <!-- Adicione mais perguntas e respostas aqui conforme necessário --> <li> <div class="collapsible-header"><i class="material-icons">question_answer</i> ¿Todos Todoslos osusuarios usuáriostienen têmacceso acessoa àla abasolapa "Complementos"? </div> <div class="collapsible-body"><span>O><span>El acceso acessoa àla abasolapa "Complementos" podepuede depender dasde los permissõespermisos de usuáriousuario configurados configuradasen noel sistema. NormalmenteGeneralmente, usuáriosusuarios comcon permissõespermisos para editar ey revisar ordensórdenes de vendaventa terãotienen acessoacceso a essaesta abasolapa. </span></div> </li> </ul> </div> <!-- Primeira coluna do conteúdo da guia 2 --> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script> // Inicialização das tabs document.addEventListener("DOMContentLoaded", function () { var tabs = document.querySelectorAll(".tabs"); M.Tabs.init(tabs); }); </script> <script> const items = document.querySelectorAll("#indice li"); items.forEach(item => { item.addEventListener('click', (e) => { const targetId = e.target.getAttribute('data-target'); const targetElement = document.getElementById(targetId); window.scrollTo({ top: targetElement.offsetTop - 10, behavior: "smooth" }); }); }); </script> <script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> <script src="scripts.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.collapsible'); var instances = M.Collapsible.init(elems); }); </script> <!-- ... (conteudo video) ... --> <script src="https://www.youtube.com/iframe_api"></script> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '315', width: '560', videoId: 'FvsuBOvyyro', playerVars: { start: 1238, // 20:38 em segundos end: 1356 // 22:36 em segundos } }); } </script> |