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 <*/style>
#breadcrumb-section >
nav <header>{
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>background-color: initial !important;
box-shadow: <div class="compositiondani-banner">
<div class="compositiondani-banner-image"></div>
<div class="compositiondani-banner-overlay"></div>
<div class="compositiondani-banner-logo-container">none !important;
}
@media only screen and (min-width: 601px) {
nav,
nav .nav-wrapper i,
nav a.sidenav-trigger,
nav a.sidenav-trigger <div class="compositiondani-banner-logo"></div>i {
</div>
height: <div class="compositiondani-banner-content">auto !important;
<h1 class="compositiondani-banner-title"> line-height: normal !important;
}
}
/* final vermelho no nav FILTRAGEM E VISUALIZAÇÃO INTELIGENTE DE AGENDA
*/
</h1>style>
</header>
</div><header>
</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/iconcss2?family=Material+Icons"
Roboto:wght@400&display=swap" rel="stylesheet"
/>
<link
rel <div class="stylesheetcompositiondani-banner">
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" <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">
FILTRADO Y VISUALIZACIÓN INTELIGENTE DE AGENDA
</h1>
</header>
</div>
</div>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesomematerialize/61.0.0-beta2/css/allmaterialize.min.css"
/>
<link
<style>href="https://fonts.googleapis.com/icon?family=Material+Icons"
/* ==============================
= 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;
}
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>
/* ==============================
= ESTILOS DE CARDS CONFIGURAÇÕES GERAIS =
=============================== */
.card* {
border: 2px solid #9aa1adfont-family: "Roboto", sans-serif;
margin: 0;
padding: 20px0;
box-sizing: border-box;
}
body {
box-shadowmargin: 0;
4px 8pxpadding: rgba(0, 0, 0, 0.1)0;
}
a {
color: #42526e;
text-decoration: none;
border-radius: 8px;
background-color: #f4f5f7;
color: #42526e;
overflow-x: hidden;
top: 0;
}
/* ==============================
= ESTILOS DE TABS =
=-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;
}
/* ============================== */
.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: #42526eESTILOS 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 COMPONENTES =
=============================== */
.collapsible,
.collapsible-header,
.collapsible-body {
box-shadow: none !important;
}
.faq-question {
font-weight: bold;
margin-bottom: 5px;
}
.faq-answer */
.wiki-content p {
marginfont-bottomsize: 14px 20px!important;
}
.justificado,
.custom-listjustified {
paddingtext-leftalign: 0justify;
margin-left: 10px 1.5em0;
}
.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 = 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-weightsize: bold14px;
}
.item .valuewiki-content a:hover {
flexcolor: 1white;
}
/* 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 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 IMAGENSCARDS =
=============================== */
.imagem-responsivacard {
max-widthborder: 100%2px solid #9aa1ad;
heightpadding: auto;
}
.custom-header-bg img {
width: 100%;
height: auto;
display: block;
}
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 VÍDEO TABS =
=============================== */
#youtube-video-container iframe.tabs {
widthbackground-color: 100%#dfe1e5;
}
.tabs .tab height:a auto;{
displaycolor: block rgb(66, 82, 110);
}
.video-container {
max-width: 800px;
margin: 0 auto;
}
.ytp-cued-thumbnail-overlay-image.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
color: #6B48FF;
background-color: transparent;
}
.tabs .tab a:focus {
background-sizecolor: cover;
background-position: center;
width: 100%;
height: 100%;
position: absolutergba(82, 97, 232, 0.25);
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(16, 148, 184, 0.24);
}
/* ==============================
= OUTROS ESTILOS PERSONALIZADOS =
=========.tabs .indicator {
background-color: #6B48FF;
}
.tab-content {
gap: 0;
padding: 10px;
}
.tab-content pre {
max-width: 100%;
overflow-x: hidden;
}
/* ====================== */
.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 Í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 TABELAS =
=
=============================== */
.custom-grey*/
.collapsible,
.collapsible-header,
.collapsible-body {
box-shadow: none !important;
}
.faq-question {
font-weight: bold;
margin-bottom: 5px;
}
.faq-answer {
backgroundmargin-colorbottom: #ffffff20px;
}
.custom-grey th,-list {
padding-left: 0;
margin-left: 1.5em;
}
.custom-greylist tdli {
borderposition: 1px solid #362194relative;
padding-left: 10px1em;
}
ul.custom-list color:#362194{
padding-left: 10px;
}
ul.custom-grey tr:nth-child(even) td {
background-color: #e6e0f7list li {
position: relative;
list-style-type: disc;
padding-left: 30px;
margin-bottom: 10px;
}
.custom-grey tr:nth-child(odd) tditem {
background-colordisplay: #f4f5f7flex;
}
.custom-grey th { align-items: center;
colorpadding: #fff10px;
backgroundborder-colorbottom: 1px #443391solid #eee;
}
.custom-grey tditem:last-child {
fontborder-sizebottom: 13pxnone;
}
.custom-grey tr:nth-child(odd) {.item .label {
flex: 1;
backgroundfont-colorweight: #e4e4e6bold;
}
.custom-grey tr:nth-child(even) {item .value {
flex: 1;
backgroundtext-coloralign: #dfdfdfright;
}
.custom-alert-warningitem {
backgroundborder-colorbottom: #fdf1dc;1px /* ou qualquer outra cor que preferir */solid #e0e0e0;
padding: 10px 0;
colordisplay: #5c4225flex;
/* cor do texto */ justify-content: space-between;
borderalign-items: 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 */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 extradepois entre o ícone e o textodos ícones */
}
.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 */
/* ==============================
= ESTILOS DE IMAGENS =
=============================== */
.imagem-responsiva {
max-width: 100%;
height: auto;
}
.custom-alertheader-dangerbg .fasimg {
colorwidth: #f34b72100%; /*
cor do ícone no alerta de perigo */height: auto;
margin-rightdisplay: 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 */
}
/* 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;
}
/* ===================== FIM DO ESTILO ========= */
</style>
<!-- Tabs e conteúdo das guias -->
<div class="card">
<ul class="tabs">
= OUTROS ESTILOS PERSONALIZADOS =
<li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</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></td>
<td>Gestão de Clientes</td>
</tr>
<tr>
<td><i class="fas fa-link"></i> <b>Linha de Produto:</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></td>
<td>Web/app móvel</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=============================== */
.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">DETALLES FUNCIONALES</a></li>
<li class="tab col s4"><a href="#tab3">FAQ</a></li>
</ul>
<!-- Tab Content -->
<div id="tab1" class="col s12">
<i<div class="fa-solid fa-eye"></i>    VISÃO GERAL
tab-content">
</h2>
<p<div classstyle="justificado">
O aprimoramento de agenda no TOTVS CRM facilita uma navegação mais fluída e organizada.Com os novos recursos, é possível visualizar
background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
<section id="section1" style="margin-top: 40px;">
informações detalhadas sobre o status das atividades com um simples clique, além<!-- Tab 70 conteúdo -->
<!-- Segundo Card -->
<!-- Primeiro Card -->
de poderem filtrar e selecionar múltiplas agendas de maneira eficiente, seja no<!-- Primeiro Card -->
<div class="card">
<div class="item">
ambiente web ou no aplicativo.<span class="label">
<table border="1">
<tr>
</p>
<br>
<h2 class="custom-heading">
<i<td><i class="fa-solidfas fa-rockettags"></i>    OBJETIVO
</h2>
<p class="justificado"> <b>Producto:</b></td>
Proporcionar uma gestão de agenda mais dinâmica<td>Gestión e personalizada, permitindo aosde clientes</td>
usuários uma melhor</tr>
organização e acompanhamento das suas atividades, com
<tr>
facilidade de acesso tanto em ambientes web quanto em aplicativos móveis.
</p>
<td><i class="fas fa-link"></i> <b>Línea de producto:</b></td>
<br>
<!-- ... (seu conteúdo existente) ... -->
<td>TOTVS CRM</td>
</tr>
<h2 class="custom-heading">
<tr>
<i<td><i class="fas fa-solid fachart-bookpie"></i>   ANTES DE COMEÇAR
<b>Segmento:</b></td>
<td>Cross <Segmentos</h2>td>
<h3>Requisitos<</h3>tr>
<tr>
<p>Para aproveitar plenamente o recurso de seleção de múltiplas agendas, é
<td><i class="fas fa-desktop"></i> <b>Módulo:</b></td>
fundamental que existam outras<td>Agenda</td>
agendas compartilhadas disponíveis.</p> </tr>
<tr>
<td><i class="fas fa-globe"></i> <b>Aplicación:</b></td>
<td>Web/app móvil</td>
</section>
tr>
<section id="section2" style="margin-top: 40px;">
<tr>
<h2 class="custom-heading"><i <td><i class="fa-solidfas fa-starhashtag"></i>  DETALHES FUNCIONAIS</h2>
<b>Identificador:</b></td>
<h3>Funções </h3><td>
<ol>
<li>
ME300520230806</td>
<p><b>Visualização da Situação da Atividade</b>:</p>tr>
</table>
<ul class="browser-default"></span>
</div>
</div>
<li>Ao clicar em uma atividade específica diretamente no painel da agenda, uma <br>
<h2 class="custom-heading">
<i class="fa-solid fa-eye"></i>    VISIÓN GENERAL
</h2>
janela pop-up será exibida apresentando o status através do ícone de atividade
que indica a situação atual da atividade (seja ela aberta, cancelada ou
concluída com sucesso ou sem sucesso).
<p class="justificado"> La mejora de la agenda en el TOTVS CRM facilita una navegación más fluida y organizada. Con los nuevos recursos es posible visualizar informaciones detalladas sobre el estatus de las actividades con un simple clic, además de poder filtrar y seleccionar múltiples agendas de manera eficiente, ya sea en el entorno web o en la aplicación.
</p>
<br>
<h2 class="custom-heading">
<i class="fa-solid fa-rocket"></i>    OBJETIVO
</h2>
<p class="justificado">
Proporcionar una gestión de agenda más dinámica </li>
</ul>
y personalizada, permitiendo a los usuarios una mejor organización y seguimiento de sus actividades, con facilidad de acceso tanto en entornos web como en aplicaciones móviles.
</li>p>
<br>
<!-- ... (seu conteúdo existente) <li>... -->
<p><b>Filtro de Situação da Atividade</b>:</p><h2 class="custom-heading">
<ul<i class="browser-default">
fa-solid fa-book"></i>   ANTES DE COMENZAR
</h2>
<li>No painel à direita da agenda, foi implementada uma funcionalidade que permite<h3>Requisitos</h3>
<p>Para aprovechar plenamente el recurso de selección de múltiples filtraragendas, ases atividadesfundamental porque suaexistan situaçãootras atual,agendas facilitando a visualização
compartidas disponibles.</p>
específica de atividades em diferentes estados, seja em agendas pessoais ou
compartilhadas. Esta funcionalidade está disponível tanto na</section>
versão web quanto
<section id="section2" style="margin-top: 40px;">
no aplicativo.
<h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALLES FUNCIONALES</h2>
<h3>Funciones </h3>
<ol>
</li>
<li>
</ul>
<p><b>Visualización de la situación de la actividad</b>:</li>p>
<ul class="browser-default">
<li>
<li>Al hacer clic en una actividad específica directamente en el <p><b>Seleçãopanel de Todasla as Agendas</b>:</p>
<ul class="browser-default">
<li>Foi adicionada a opção "Selecionar Todas" nas seções "Agendas Compartilhadas" e
agenda, se mostrará una ventana pop-up presentando el estatus por medio del ícono de actividad que indica la situación actual de la actividad (ya sea abierta, anulada o finalizada con éxito o sin éxito).
"Minhas Agendas", permitindo que os usuários selecionem rapidamente todas as
agendas disponíveis.</li>
</ol>ul>
</li>
</section>
<li>
<p><b>Filtro de situación de <section id="section3" style="margin-top: 40px;">
la actividad</b>:</p>
<h2<ul class="custombrowser-heading"><i class="fa-solid fa-shoe-prints"></i>  COMO USAR?</h2>
default">
<li>En <h3>el Passopainel, a Passo</h3>
la derecha de la agenda, se implementó una funcionalidad que permite filtrar <ol>
las actividades por su situación actual, facilitando la visualización específica de actividades en diferentes estados, ya <li>
sea en agendas personales o compartidas. Esta funcionalidad está disponible tanto en la versión web como en la <p><b>Acesseaplicación.
a Agenda</b></p>
<ul>
<li>Inicie acessando a seção de agenda no TOTVS CRM.</li>
</li>
</ul>
</li>
</ul>
</li><li>
<li>
<p><b>Selección de todas las agendas</b>:</p>
<p><b>Visualização do Status da Atividade</b></p><ul class="browser-default">
<ul>
<li>Se incluyó la opción "Seleccionar todas" en las secciones "Agendas compartidas" y "Mis agendas", permitiendo que los usuarios seleccionen <li>rápidamente todas las agendas disponibles.</li>
</ol>
Nos espaços ou
blocos que representam os dias na agenda, clique em um</section>
compromisso de atividade específico. <section id="section3" style="margin-top: 40px;">
<h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>  ¿CÓMO UTILIZAR?</li>h2>
<h3> Paso <li>a paso</h3>
<ol>
Uma janela pop-up será exibida, apresentando o ícone representativo da <li>
<p><b>Acceda a Agenda</b></p>
atividade junto ao seu status atual.
<ul>
<br><br>
<li>Comience accediendo a la sección de agenda en el <p>TOTVS CRM.</li>
</ul>
<video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
</li>
<li>
<source src="https://totvscrm.com/wp-content/uploads/2023/09/statusagendaedit.mp4" type="video/mp4">
<p><b>Visualización del estatus de la actividad</b></p>
</video>
<ul>
</p><br>
<li> En los espacios o bloques que </li>
representan los días en la agenda, haga clic en un compromiso de actividad específico.
</ul>
</li>
<li>
<li> Se mostrará <p><b>Filtragemuna por Situação/Status da Atividade</b></p>
ventana pop-up, mostrando el ícono representativo de la actividad junto a su estatus actual.
<ul>
<li><br><br>
No<p>
canto direito do painel da agenda, você encontrará um campo de lista
<video autoplay loop muted style="width: 100%; height: auto; max-width: chamado "Situação das atividades".
100%; display: block;">
</li>
<source src="https://totvscrm.com/wp-content/uploads/2023/09/statusagendaedit.mp4" type="video/mp4">
<li>
</video>
Clique nele e selecione os status de atividades que deseja visualizar,</p><br>
</li>
facilitando a identificação de atividades em diferentes estados.
</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/filtrosativs.mp4" type="video/mp4">
</video>
Al lado derecho del panel de la agenda, encontrará un campo de la lista denominado "Situación de las actividades".
</p><br>li>
</li>
<li> Haga clic en este </ul>
</li>y seleccione los estatus de las actividades que desea visualizar, facilitando la identificación de actividades en diferentes estados.
<li>
<br><br>
<p><b>Selecionando Todas as Agendas</b></p>
<p>
<ul>
<video autoplay loop muted style="width: 100%; height: <li>
auto; max-width: 100%; display: block;">
Ainda no canto direito do painel, procure pelas seções<source "Minhas agendas", "Agenda externa", "Agendas
src="https://totvscrm.com/wp-content/uploads/2023/09/filtrosativs.mp4" type="video/mp4">
compartilhadas".
</li>video>
<li>
</p><br>
Marque</li>
a opção "Selecionar todas" para visualizar todas as agendas
</ul>
disponíveis, tanto pessoais quanto compartilhadas. </li>
<br><br><li>
<p><b>Seleccionando todas <p>las agendas</b></p>
<ul>
<video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;">
<li> También, al lado derecho del painel, busque las secciones "Mis <sourceagendas", src="https://totvscrm.com/wp-content/uploads/2023/09/selecagendas.mp4" type="video/mp4">
"Agenda externa", "Agendas compartidas".
</video>li>
</p><br><li>
</li>
Marque la opción "Seleccionar todas" para visualizar todas las agendas disponibles, tanto personales </ul>como compartidas.
</li>
</ol><br><br>
<p>
<br>
</section>
<video autoplay <section id="section4"loop muted style="margin-top: 40pxwidth: 100%; height: auto; max-width: 100%; display: block;">
<h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i>  EXEMPLO PRÁTICO</h2>
<source src="https://totvscrm.com/wp-content/uploads/2023/09/selecagendas.mp4" type="video/mp4">
<h3>Caso de uso<</h3>video>
</p><br>
<p>
<b>Cenário:</b>li>
<p>Na empresa ABC, os gestores</ul>
e o time de vendas lidam com
</li>
múltiplas agendas diariamente.
</ol>
</p>
<br>
<br></section>
<section id="section4" style="margin-top: 40px;">
<h2 <b>Desafio Antigo:</b>class="custom-heading"><i class="fa-solid fa-signs-post"></i>  EJEMPLO PRÁCTICO</h2>
<h3>Caso <p>Anteriormente, a equipe tinha dificuldade em acompanhar o status das atividadesde utilización</h3>
<p>
em tempo real, já que precisavam acessar cada uma individualmente, uma tarefa<b>Escenario:</b>
<p>En la queempresa seABC, mostravalos demorada.administradores Ay falta de uma funçãoel equipo de filtragem
ventas trabajan con múltiples agendas diariamente.
também impedia uma visão clara e</p>
rápida do progresso das atividades,
levando a atrasos e gerenciamento ineficaz do tempo.<br>
<b>Desafío antiguo:</p>b>
<p>Anteriormente, el equipo tenía
dificultad en acompañar el estatus de las actividades en tiempo real, ya que necesitaban <br>
acceder a cada una 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 <b>Solução Atualizada:</b>
las actividades, llevando a atrasos y administración ineficaz del tiempo.
<p>Com atualização no TOTVS CRM, a gestão de agendas tornou-se mais ágil
e</p>
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,
<br>
eliminando a necessidade de navegar por múltiplas telas. A adição de um filtro
<b>Solución actualizada:</b>
<p>Con la actualización en el TOTVS CRM, la gestión de agendas es demás statuságil nay interfacemenos facilitasusceptible a rápidaerrores. identificaçãoAhora, eal acompanhamentohacer de
clic en un compromiso en el panel de la agenda, se muestra una ventana pop-up que atividades,indica enquantoclaramente ael opçãoestatus de selecionar e visualizar todas as agendas
compartilhadas oferece uma visão global e integrada, economizando tempo e
melhorando a eficiência 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> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas