Histórico da Página
| 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/2023/08/capa-com-fundo-e-sem-icone-TDN21.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">
OPTIMIZACIÓN EN LA GESTIÓN DE LISTAS DE PRECIO
</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 {
color: #42526e;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
a:hover {
color: white;
}
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: #6B48FF;
background-color: transparent;
}
.tabs .tab a:focus {
background-color: rgba(82, 97, 232, 0.25);
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(16, 148, 184, 0.24);
}
.tabs .indicator {
background-color: #6B48FF;
}
.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;
}
.custom-list {
padding-left: 0;
margin-left: 1.5em;
}
.custom-list li {
position: relative;
padding-left: 1em;
}
ul.custom-list {
padding-left: 10px;
}
ul.custom-list li {
position: relative;
list-style-type: disc;
padding-left: 30px;
margin-bottom: 10px;
}
.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: #6B48FF;
color: white;
}
/* ==============================
= ESTILOS DE TABELAS =
============================== */
.custom-grey {
background-color: #ffffff;
}
.custom-grey th,
.custom-grey td {
border: 1px solid #362194;
padding: 10px;
color:#362194
}
.custom-grey tr:nth-child(even) td {
background-color: #e6e0f7;
}
.custom-grey tr:nth-child(odd) td {
background-color: #f4f5f7;
}
.custom-grey th {
color: #fff;
background-color: #443391;
}
.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: #F2EEFF; /* Cor de fundo do alerta */
color: #3217a7; /* Cor do texto */
border: 1px solid #9475f7; /* adicionando borda da mesma cor que o ícone */
padding: 10px; /* adicione padding conforme necessário */
}
.alert-secondary-custom .fas {
color: #6B48FF; /* 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">DETALLES 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>Producto:</b></td>
<td>Gestión de clientes</td>
</tr>
<tr>
<td><i class="fas fa-link"></i> <b>Línea de producto:</b></td>
<td>TOTVS CRM</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>Catálogo</td>
</tr>
<tr>
<td><i class="fas fa-globe"></i> <b>Aplicación:</b></td>
<td>Web/Mobile</td>
</tr>
<tr>
<td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
<td>
DTCRMSD-2419 - DT110720231628b</td>
</tr>
</table>
</span>
</div>
</div>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-eye"></i>    VISIÓN GENERAL
</h2>
<p class="justificado">
La reciente actualización de las listas de precio en el TOTVS CRM implementa optimizaciones significativas para el registro y consulta de precios de productos y servicios, con el objetivo de la eficiencia operativa y mejora de la experiencia del usuario. Las innovaciones incluyen la reorganización de vínculos de clientes, usuarios y empresas en solapas dedicadas, paginación para listas de productos y servicios, opciones de acción estratégicamente reubicados y modos de inclusión perfeccionados con campos de precios configurados previamente. Estas mejoras simplifican la gestión de las listas de precio, facilitando el registro y el mantenimiento, dejando la operación más eficiente.
</p>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-rocket"></i>    OBJETIVO
</h2>
<p class="justificado">
Las mejorias en el registro de lista de precios en el TOTVS CRM tiene como objetivo simplificar el proceso de registro, consulta y mantenimiento de precios, dejándolos más rápidos e intuitivos.
</p>
<br>
<!-- ... (seu conteúdo existente) ... -->
<h2 class="custom-heading">
<i class="fa-solid fa-book"></i>   ANTES DE COMENZAR
</h2>
<h3>Requisitos</h3>
<ol>
<li>Permisos adecuados: Tener permisos de acceso configurados para permitir el registro, la consulta y el mantenimiento de las listas de precio. Esto incluye permisos específicos para inlcluir, editar o borrar informaciones de precios, dependiendo del nivel de acceso del usuario.
</li>
</ol>
</section>
<section id="section2" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALLES FUNCIONALES</h2>
<h3>Funciones </h3>
<ol>
<li>
<p><strong>Organización en solapas para vínculos:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Antes, los vínculos de clientes, usuarios y empresas se presentaban en carpetas tipo sanfona dentro de la solapa de configuraciones. Con la actualización, estos vínculos se administran en solapas dedicadas, proporcionando una mejora significativa en la organización, facilitando el acceso de los usuarios a estas informaciones.
<img src="https://totvscrm.com/wp-content/uploads/2024/03/MOCKUP-TDN-RELEASE-COMPONENTES11.png" alt="Mockup TDN Release Componentes" title="Mockup TDN Release Componentes" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ul>
</li>
<li>
<p class=""><strong class="">Inclusión y retiro en masa:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Anteriormente, incluir o retirar clientes, usuarios y empresas a los vínculos en las listas de precio era un proceso manual, exigiendo selección y borrado individuales para cada entrada. Ahora, la nueva funcionalidad facilita la inclusión y retiro en masa de ítems, agilizando significativamente la gestión de grandes volúmenes de datos.
<img src="https://totvscrm.com/wp-content/uploads/2024/03/MOCKUP-TDN-RELEASE-COMPONENTES12.png" alt="Mockup TDN Release Componentes" title="Mockup TDN Release Componentes" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ul>
</li>
<li>
<p class=""><strong class="">Paginación en listas de productos y servicios:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Antes, todas las entradas de precios para productos y servicios se mostraban en una única pantalla, lo cual podía dejar la navegación y la búsqueda de ítems específicos lentas en listas extensas. Con la nueva implementación de la paginación, el acceso a estas informaciones quedó más rápido y práctico, permitirndo a los usuarios moverse fácilmente entre páginas de datos, mejorando la experiencia de consulta.
<img src="https://totvscrm.com/wp-content/uploads/2024/03/MOCKUP-TDN-RELEASE-COMPONENTES13.png" alt="Mockup TDN Release Componentes" title="Mockup TDN Release Componentes" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ul>
</li>
<li>
<p class=""><strong class="">Reubicación del lugar de ajustes de precio:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Antes, los ajustes de precio se ubicaban al lado derecho de la interfaz, exigiendo movimientos adicionales para su ubicación y uso. Ahora, estos ajustes se movieron al lado izquierdo, junto a la barra de búsqueda, ofreciendo un comportamiento estándar semejante al observado en otras páginas del sistema.
<img src="https://totvscrm.com/wp-content/uploads/2024/03/MOCKUP-TDN-RELEASE-COMPONENTES14.png" alt="Mockup TDN Release Componentes" title="Mockup TDN Release Componentes" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ul>
</li>
<li>
<p class=""><strong class="">Inclusión de nuevas columnas en productos y servicios:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Al incluir productos o servicios a las listas de precio, ahora es posible mostrar y predeterminar directamente en la lista campos importantes de precio, como precio de costo, precio mínimo, precio máximo y precio de venta. Esta actualización enriquece las listas con informaciones valiosas, permitiendo una visión más completa y facilitando la gestión de precios de forma eficiente yjjjjjjnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn y transparente. Además, ahora es compatible la edición y borrado en masa, potenciando la agilidad y practicidad en la actualización y mantenimiento de estas listas.
<img src="https://totvscrm.com/wp-content/uploads/2024/03/MOCKUP-TDN-RELEASE-COMPONENTES15.png" alt="Mockup TDN Release Componentes" title="Mockup TDN Release Componentes" style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
</ul>
</li>
<li>
<p class=""><strong class="">Mejoras de desempeño:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Se realizaron optimizaciones internas para aumentar la velocidad de actualización de las listas de precio, especialmente en operaciones que involucran múltiples registros.
</li>
</ul>
</li>
</ol>
</section>
<section id="section3" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>  ¿CÓMO UTILIZAR?</h2>
<ol>
<li>
<p><strong class="">Acceso al Módulo de Catálogo:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Entre al TOTVS CRM y navegue hasta el módulo de Catálogo.</li>
</ul>
</li>
<li>
<p><strong>Selección de la lista de precios:</strong></p>
<ul>
<li style="list-style-type: disc; padding-left: 5px; margin-bottom: 5px;">Seleccione la lista de precios en la cual desea trabajar.</li>
</ul>
</li>
</ol>
<p>Después de estos pasos iniciales, estará listo para explorar y utilizar las nuevas funcionalidades implementadas en el sistema:</p> <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/03/tabelaajuste.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>  EJEMPLO PRÁCTICO</h2>
<p>
<br>
<b>Desafío antiguo:</b>
<p>
La gestión de listas de precio era compleja y poco intuitiva, con un desempeño menos optimizado durante el registro y consulta de precios, resultando en lentitud y dificultad en la operación.
</p>
<br>
<b>Solución actualizada:</b>
<p>Con las recientes optimizaciones, incluyendo la reorganización de solapas, implementación de paginación y mejora en la inclusión de precios, el proceso de gestión de listas de precio quedó más eficiente y rápido. La capacidad de realizar inclusiones en masa y la mejor ubicación de opciones de acción contribuyen para una experiencia de usuario perfeccionada y una operación más ágil en el TOTVS CRM.</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> PREGUNTAS FRECUENTES</h2>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">question_answer</i> ¿Esta actualización requiere alguna configuración adicional?
</div>
<div class="collapsible-body"><span>No, esta actualización no requiere configuraciones adicionales. Los usuarios solamente necesitan tener los permisos necesarios para acceder a las listas de precio en el sistema.
</span></div>
</li>
<!-- Adicione mais perguntas e respostas aqui conforme necessário -->
</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>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas