Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
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;
}
  
  </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"> 
            FILTRAGEM E VISUALIZAÇÃO INTELIGENTE DE AGENDA
  </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 */
}


/* ========== 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</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>Agenda</td>
          </tr>
          <tr>
              <td><i class="fas fa-globe"></i> <b>Aplicação<b>Aplicación:</b></td>
              <td>Web/app móvel<móvil</td>
          </tr>
          <tr>
              <td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td>
              <td>
                
                ME300520230806</td>
          </tr>
      </table>
      </span>
    </div>
    </div>
 

      <br>

      <h2 class="custom-heading">
        <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃOVISIÓN GERALGENERAL
      </h2>
      <p class="justificado">
         La mejora de Ola aprimoramentoagenda deen agendael no TOTVS CRM facilita umauna navegaçãonavegación maismás fluídafluida ey organizada.Com Con oslos novosnuevos recursos, ées possívelposible visualizar
 informaciones detalladas sobre el estatus de las informaçõesactividades detalhadascon sobreun o status das atividades com um simples clique, além
        de poderem filtrar e selecionar múltiplassimple clic, además de poder filtrar y seleccionar múltiples agendas de maneiramanera eficiente, sejaya no
sea en el entorno web o en  ambiente web ou no aplicativola aplicación.
        
        
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
        Proporcionar umauna gestãogestión de agenda maismás dinâmicadinámica ey personalizada, permitindopermitiendo aos
a los usuarios una mejor organización y seguimiento usuáriosde uma melhor organização e acompanhamento das suas atividades, com
        facilidade de acesso tanto em ambientes web quanto em aplicativos móveissus actividades, con facilidad de acceso tanto en entornos web como en aplicaciones móviles.
    </p>
    <br>

  <!-- ... (seu conteúdo existente) ... -->

               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇARCOMENZAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para aproveitaraprovechar plenamente oel recurso de seleçãoselección de múltiplasmúltiples agendas, é
                es fundamental que existamexistan outrasotras agendas compartilhadascompartidas disponíveisdisponibles.</p>                 
              
                
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHESDETALLES FUNCIONAIS<FUNCIONALES</h2>
            <h3>Funções<h3>Funciones </h3>
            <ol>
              <li>
                <p><b>Visualización de <p><b>Visualizaçãola dasituación Situaçãode dala Atividade<actividad</b>:</p>
                <ul class="browser-default">
                  <li>Al <li>Aohacer clicarclic emen umauna atividadeactividad específica directamente en diretamenteel nopanel painelde dala agenda, uma
se mostrará una ventana pop-up presentando el estatus por medio del ícono de actividad que indica la situación actual de la janela pop-up será exibida apresentandoactividad (ya sea abierta, anulada o statusfinalizada atravéscon doéxito íconeo desin atividadeéxito).
                    
 que indica a situação atual da atividade (seja ela aberta, cancelada ou
        
            concluída com sucesso ou sem sucesso).
                    
                    
                    </li>
                </ul>
              </li>
              <li>
                <p><b>Filtro de situación Situaçãode dala Atividade<actividad</b>:</p>
                <ul class="browser-default">
                  <li>o	En <li>Noel painel, a la àderecha direitade dala agenda, foise implementadaimplementó umauna funcionalidadefuncionalidad que permite
 filtrar las actividades por su situación actual, facilitando la visualización específica de actividades en diferentes estados, ya sea  filtrar as atividades por sua situação atual, facilitando a visualização
   en agendas personales o compartidas. Esta funcionalidad está disponible tanto en la versión web como en la aplicación.
                 específica de atividades em
 diferentes estados, seja em agendas pessoais ou
             </li>
       compartilhadas. Esta funcionalidade está disponível tanto na versão web quanto</ul>
              </li>
      no aplicativo.
                    <li>
                <p><b>Selección de todas las agendas</b>:</li>p>
                </ul><ul class="browser-default">
              </li>
    <li>o	Se incluyó la opción "Seleccionar todas" en las secciones "Agendas compartidas" y "Mis agendas", permitiendo que los usuarios seleccionen rápidamente todas las agendas <li>disponibles.</li>
            </ol>
    <p><b>Seleção  de Todas as Agendas</b>:</p>
   
          </section>
   <ul class="browser-default">
     
      
       <li>Foi adicionada a opção<section id="section3"Selecionar Todas" nas seções "Agendas Compartilhadas" e
style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp ¿CÓMO UTILIZAR?</h2>
       "Minhas Agendas", permitindo que os usuários<h3> selecionemPaso rapidamente todas asa paso</h3>

            <ol>
        agendas disponíveis.</li>
            </ol><li>
            
      <p><b>Acceda a Agenda</b></p>
   </section>
         
      <ul>
          <section id="section3" style="margin-top: 40px;">
       <li>Comience accediendo a la sección <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>de agenda en el TOTVS CRM.</li>
            <h3> Passo a Passo</h3>

   </ul>
                <ol></li>
                <li>
                  <p><b>Visualización del estatus <p><b>Acessede ala Agenda<actividad</b></p>
                  <ul>
                    <li>Inicie<li> acessando  a  seção  de  agenda  no  TOTVS CRM.</li>
                  </ul>
               En los espacios o bloques que representan los días en la agenda, haga clic en un compromiso de actividad específico.
           </li>
         </li>
       <li>
             <li>         <p><b>Visualização  do  Status  da Atividade</b></p>
                  <ul>        Se mostrará una ventana pop-up, mostrando el ícono representativo de la actividad junto a su estatus actual.
                    <li>
  <br><br>
                    Nos espaços ou<p>
 blocos que representam os dias na agenda, clique em um
              <video autoplay loop muted style="width: 100%; height:  compromisso de atividade específico.auto; max-width: 100%; display: block;">
                    </li>
      <source src="https://totvscrm.com/wp-content/uploads/2023/09/statusagendaedit.mp4" type="video/mp4">
            <li>
            </video>
          Uma janela pop-up será exibida, apresentando o ícone representativo da
           </p><br>
                    </li>
    atividade    junto ao seu status atual.
      </ul>
                <br><br></li>
                <li>
      <p>
            <p><b>Filtrado por Situación/Estatus de la actividad</b></p>
       <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;"> <ul>
                    <li>              <source src="https://totvscrm.com/wp-content/uploads/2023/09/statusagendaedit.mp4" type="video/mp4">
             Al lado derecho del panel de la agenda, encontrará un campo de la lista denominado "Situación de las actividades".
                     </video>li>
                    <li>   </p><br>
                    Haga clic en este y seleccione los estatus de las </li>
actividades que desea visualizar, facilitando la identificación de actividades en diferentes estados.
       </ul>
                </li><br><br>
                <li>
      <p>
            <p><b>Filtragem por Situação/Status  da Atividade</b></p>
       <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%;  <ul>display: block;">
                    <li>
      <source src="https://totvscrm.com/wp-content/uploads/2023/09/filtrosativs.mp4" type="video/mp4">
              No canto direito do painel da agenda, você encontrará um campo de lista </video>
                      chamado "Situação das atividades".</p><br>
                    </li>
                  </ul>
  <li>
              </li>
        Clique nele e selecione os status de atividades que deseja visualizar,
        <li>
                  <p><b>Seleccionando todas las agendas</b></p>
           facilitando a identificação de atividades em diferentes estados.<ul>
                    <li>   <br><br>
                    También, al lado derecho del painel, busque las secciones "Mis agendas", "Agenda externa", "Agendas <p>compartidas".
                    </li>
    <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
     <li>
                     <source src="https://totvscrm.com/wp-content/uploads/2023/09/filtrosativs.mp4" type="video/mp4">
                        </video> Marque la opción "Seleccionar todas" para visualizar todas las agendas disponibles, tanto personales como compartidas.
                      </p><br><br><br>
                    </li>
  <p>
                </ul>
        <video autoplay loop muted style="width: 100%; height:  </li>
   auto; max-width: 100%; display: block;">
             <li>
                  <p><b>Selecionando Todas as Agendas</b></p><source src="https://totvscrm.com/wp-content/uploads/2023/09/selecagendas.mp4" type="video/mp4">
                  <ul>
      </video>
              <li>
        </p><br>
              Ainda no canto direito do painel, procure pelas seções "Minhas agendas", "Agenda externa", "Agendas
 </li>
                  </ul>
           compartilhadas".
      </li>
              </li>ol>
              
      <li>
        <br>

          </section>

    Marque a opção "Selecionar todas" para visualizar todas as agendas
<section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEJEMPLO PRÁCTICO</h2>
          disponíveis, tanto pessoais<h3>Caso quanto compartilhadas.
de utilización</h3>
            

            <br><br><p>
              <b>Escenario:</b>
        <p>
      <p>En la empresa ABC, los administradores y el equipo de ventas trabajan con múltiples agendas diariamente.
    <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">  </p>
              
            <source src="https://totvscrm.com/wp-content/uploads/2023/09/selecagendas.mp4" type="video/mp4"> <br>
              
          </video>
    <b>Desafío antiguo:</b>
              <p>Anteriormente, el equipo </p><br>
tenía dificultad en acompañar el estatus de las actividades en tiempo real, ya que necesitaban acceder a cada una  </li>
                  </ul>
                </li>
individualmente, una tarea que se mostraba demorada. La falta de una función de filtrado también impedía una visión clara y rápida del progreso de las actividades, llevando a atrasos y administración ineficaz del tiempo.
                </ol>
                </p>
              <br>

          </section>

    <br>
      <section id="section4" style="margin-top: 40px;">
     
       <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>
  <b>Solución actualizada:</b>
         <h3>Caso de uso</h3>
   <p>Con la actualización en el TOTVS CRM, la gestión 

de agendas es más ágil y menos susceptible     <p>
              <b>Cenário:</b>
              <p>Na empresa ABC, os gestores e o time de vendas lidam com
                múltiplas agendas diariamente.
                </p>
              
              <br>
              
              <b>Desafio Antigo:</b>
              <p>Anteriormente, a equipe tinha dificuldade em acompanhar o status das atividades
                em tempo real, já que precisavam acessar cada uma individualmente, uma tarefa
                que se mostrava demorada. A falta de uma função de filtragem
                também impedia uma visão clara e rápida do progresso das atividades,
                levando a atrasos e gerenciamento ineficaz do tempo.
                
                </p>
              
              <br>
              
              <b>Solução Atualizada:</b>
              <p>Com atualização no TOTVS CRM, a gestão de agendas tornou-se mais ágil
                e menos susceptível a erros. Agora, ao clicar em um compromisso no painel da
                agenda, é exibida uma janela pop-up que indica claramente o status da atividade,
                eliminando a necessidade de navegar por múltiplas telas. A adição de um filtro
                de status na interface facilita a rápida identificação e acompanhamento de
                atividades, enquanto a opção de selecionar e visualizar todas as agendas
                compartilhadas oferece uma visão global e integrada, economizando tempo e
                melhorando a eficiênciaa errores. Ahora, al hacer clic en un compromiso en el panel de la agenda, se muestra una ventana pop-up que indica claramente el estatus de la actividad, eliminando la necesidad de navegar por múltiples pantallas. La inclusión de un filtro de estatus en la interfaz facilita la rápida identificación y seguimiento de actividades, mientras que la opción de seleccionar y visualizar todas las agendas compartidas ofrece una visión global e integrada, economizando tiempo y mejorando la eficiencia.
                .</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>É possível visualizar o status de atividades de outras agendas compartilhadas na
                        mesma tela class="collapsible-header"><i class="material-icons">question_answer</i>¿Es posible visualizar el estatus de actividades de otras agendas compartidas en la misma pantalla?
                        </div>
                    <div class="collapsible-body"><span>Sim><span>Sí, comcon ala novanueva funcionalidadefuncionalidad de filtragemfiltrado, vocêpuede podevisualizar visualizarel oestatus statusde daslas atividadesactividades de váriasvarias agendas compartidas compartilhadasen nala mesmamisma telapantalla.  
                      </span></div>
                </li> 
                <li>
                  <div class="collapsible-header"><i class="material-icons">question_answer</i>Hái>¿Existe algumalgún recurso exclusivo para ala versãoversión web ouo para ola aplicativoaplicación?

                  </div>
                  <div class="collapsible-body"><span>Não><span>No, ala atualizaçãoactualización foifue desenvolvidadesarrollada para garantirgarantizar umauna experiênciaexperiencia uniforme, tanto naen la versãoversión web como quantoen nola aplicativoaplicación. 
                    </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>