Histórico da Página
| HTML |
|---|
<div class="imgcapa">
<img src="http://danielypaz.com.br/wp-content/uploads/2023/02/capaartigo3-1final.png" style="width:100%"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="content">
<div class="article"> <br> <h2> <img src="http://projeto.cloud/wp-content/uploads/2023/03/[email protected]" alt="some text" width=40> WEBHOOKS NOEN EL WORKFLOW DODE TOTVS CRM</h2>
<div class="table-wrap" style="margin-left: 30px;">
<table class="relative-table wrapped confluenceTable" style="width: 367.06px;" resolved="">
<thead>
<tr>
<th style="text-align: left;" colspan="1" class="confluenceTh">Produto>Producto:</th>
<td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - GestãoGestión de Clientes<clientes</td>
<div class="content-wrapper">
</div>
</td>
</tr>
</thead>
<colgroup>
<col style="width: 162.912px;">
<col style="width: 203.153px;">
</colgroup>
<tbody>
<tr>
<th style="text-align: left;" class="confluenceTh">Linha>Línea de Produtoproducto:</th>
<td style="text-align: left;" class="confluenceTd">TOTVS CRM</td>
<div class="content-wrapper">
</div>
</td>
</tr>
<tr>
<th style="text-align: left;" class="confluenceTh">Segmento:</th>
<td style="text-align: left;" class="confluenceTd">Cross Segmentos</td>
<div class="content-wrapper">
</div>
</td>
</tr>
<tr>
<th style="text-align: left;" class="confluenceTh">Módulo:</th>
<td style="text-align: left;" class="confluenceTd">Workflow</td>
</tr>
<tr>
<th style="text-align: left;" colspan="1" class="confluenceTh">Aplicação<>Aplicación</th>
<td style="text-align: left;" colspan="1" class="confluenceTd">Web/app móvel<móvil</td>
</tr>
<tr>
<th style="text-align: left;" colspan="1" class="confluenceTh">Identificador:</th>
<td style="text-align: left;" colspan="1" class="confluenceTd"><span style="color: rgb(23,43,77);">ME261020221452</span></td>
</tr>
<tr>
<th style="text-align: left;" colspan="1" class="confluenceTh">Stakeholder:</th>
<td style="text-align: left;" colspan="1" class="confluenceTd">TOTVS Connector</td>
</tr>
<tr>
<th style="text-align: left;" colspan="1" class="confluenceTh">Ticket:</th>
<td style="text-align: left;" colspan="1" class="confluenceTd"><br></td>
</tr>
<tr>
<th style="text-align: left;" colspan="1" class="confluenceTh"><span style="color: rgb(0,0,0);">Requisito/S</span><span style="color: rgb(0,0,0);">tory/Issue (informe oel requisito relacionado)</span><span style="color: rgb(47,57,65);"> > :</span></th>
<td style="text-align: left;" colspan="1" class="confluenceTd">
<div class="content-wrapper">
<span class="jira-issue" data-jira-key="DTCRMSC-2480">
<a href="https://jiraproducao.totvs.com.br/browse/DTCRMSC-2480" class="jira-issue-key"><img class="icon" src="https://jiraproducao.totvs.com.br/images/icons/ico_epic.png">DTCRMSC-2480</a>
-
<span class="summary">ME261020221452 - SuporteSoporte a webhooks viavía Workflow</span>
<span class="aui-lozenge aui-lozenge-subtle aui-lozenge-current
jira-macro-single-issue-export-pdf">Em>En Execução<ejecución</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
|
| HTML |
|---|
<br>
<p> MuitasMuchas empresas enfrentamenfrentan oel desafiodesafío de mantermantener seussus registros atualizadosactualizados emen diversos sistemas quandocuando se umaejecuta açãouna éacción executadaen noel TOTVS CRM. EsseEste processoproceso manual édemora demoradoy epuede podeinducir levara acometer erroserrores, impactando negativamente aen la eficiênciaeficiencia ey produtividadeproductividad dadel equipeequipo. Para superar essaesta dificuldadedificultad, o TOTVS CRM lançoulanzó recentementerecientemente umun novonuevo recurso de açãoacción chamadodenominado Webhook, disponible disponívelen noel módulo de workflow. ComCon ala utilizaçãoutilización de Webhooks, osahora los clientes agora podempueden automatizar essesestos processosprocesos e integrar facilmentefácilmente diferentes sistemas ey aplicativosaplicaciones. QuandoCuando umun gatilhodisparador de creación criaçãoo ouactualización atualizaçãoes éactivado acionadoen noel TOTVS CRM, ala açãoacción de Webhook ése executadaejecuta, permitindopermitiendo que aslas informaçõesinformaciones sejamse atualizadasactualicen emen tempotiempo real emen outrosotros sistemas conectados. EsseEste processoproceso resulta emen atualizaçõesactualizaciones rápidas ey precisas, economizando tempotiempo ey eliminando erroserrores manuaismanuales que antes erameran muitomuy comunsusuales. EmEn outrasotras palavraspalabras, ala açãoacción de Webhook permite que oslos clientes conectemconecten seussus sistemas ey automatizemautomaticen ala atualizaçãoactualización de registros, olo quecual simplifica oel processoproceso ey melhoramejora significativamente ala eficiencia eficiênciaoperativa operacionalde dala empresa. <br> <br> <div>
</div> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> TIPO DE INTEGRAÇÃO<INTEGRACIÓN</b> </div> <p> <strong>Saída<strong>Salida:</strong> esta integraçãointegración enviaenvía dadosdatos dodel TCRM - GestãoGestión de Clientesclientes paraa umauna ferramentaherramienta destino, especificada naen configuraçãola configuración. </p> <br> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> O QUE ¿QUÉ HACE ESTA INTEGRAÇÃO FAZINTEGRACIÓN?</b> </div> <p> Esta configuraçãoconfiguración permite enviar dadosdatos dode TOTVS CRM paraa outrasotras ferramentasherramientas que disponhamdispongan de umauna URL de entrada de dadosdatos. EssaEsta URL precisadebe conseguir lerleer ey consumir dadosdatos enviados emen formato JSON. </p> <br> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> OBSERVAÇÕES OBSERVACIONES EY REQUISITOS</b> </div> <p> ÉEs importante tertener umun desenvolvedordesarrollador ouo contatocontacto comcon oel suportesoporte dode seusu outrootro sistema para checarchequear ala compatibilidadecompatibilidad comcon ala leituralectura dodel pacotepaquete de dadosdatos que o TOTVS CRM enviaenvía. </p> <br> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> PASSOPASO A PASSOPASO PARA REALIZAR ALA INTEGRAÇÃOINTEGRACIÓN </b> </div> <br> <ol> <li>Com o<li>Con TOTVS CRM GestãoGestión de Clientesclientes abertoabierto emen seusu navegador, acesseacceda oal Workflow por meiomedio dodel menumenú principal;.</li> <br> <li>Para adicionaragregar umauna automaçãoautomatización, cliquehaga noclic botãoen la opción "AdicionarAgregar" ubicado localizadoen nola cantoparte superior direitoderecha de dala telapantalla.;</li><br> <li>No<li>En el campo de nomenombre, insiraincluya umauna breve descriçãodescripción dodel Webhook, facilitando ala identificaçãoidentificación dodel cadastroregistro emen acessosaccesos futuros. SeSi fuera necessárionecesario, agregue adicioneinformaciones informaçõescomplementarias complementaresen noel campo de observações;observaciones.</li><br> <li>Depois<li>Después de nomearnombrar seusu Workflow, selecioneseleccione oel gatilhodisparador dode seusu workflow clicando no botãohaciendo clic en la opción "SelecionarSeleccionar Gatilhodisparador" disponíveldisponible en emla telapantalla. EmA seguidacontinuación, selecioneseleccione oel gatilhodisparador que iniciará su suaautomatización haciendo automaçãoclic clicandoen nola botãoopción "SelecionarSeleccionar Gatilhodisparador". OEl gatilhodisparador será oel evento que desencadearádesencadenará ala chamadallamada dodel Webhook, como umauna atividadeactividad concluídafinalizada ouo umauna oportunidadeoportunidad ganhaganada, entre outros;otros.</li><br> <li>Se<li>Si desejardesea, vocêpuede podeagregar adicionarcondiciones condições (filtros) para limitar quandocuándo ala automaçãoautomatización seráse executadaejecutará, clicandohaciendo clic emen "AdicionarAgregar Condiçõescondiciones";.</li><br> <li>Por fim<li>Finalmente, selecioneseleccione ala açãoacción "Webhook" emen "SelecionarSeleccionar Açãoacción" e informe ala URL pública dodel sistema que receberárecibirá ala notificaçãonotificación dodel evento. Si Sefuera necessárionecesario, adicioneagregue cabeçalhosencabezados adicionaisadicionales para questõescuestiones técnicas, como autenticação;autenticación.</li><br> <li>Salve<li>Grabe seusu Workflow comcon oel statusestatus de ativoactivo ey eleeste passaráse aejecutará seren executado paralos os próximos eventos;.</li><br> <li>Vale<li>Cabe destacar que Webhooks noen TOTVS CRM sãoestá regidosregida por algumasalgunas características técnicas importantes. Consulte ala próxima sección seçãode desteeste documento para maioresmás informaçõesinformaciones aal respeitorespecto, permitindopermitiendo que suasu integraçãointegración aconteçasuceda comcon sucessoéxito ey de forma eficiente.</li><br> </ol> <img src="https://tdn.totvs.com/download/attachments/745140752/gifwehook.gif?version=1&modificationDate=1678548639423&api=v2"> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> INFORMAÇÕES INFORMACIONES TÉCNICAS</b> </div> <p> QuandoCuando o TOTVS CRM GestãoGestión de Clientesclientes realiza umauna chamadallamada paraa sistemas externos viavía Webhooks, eleeste transmite metadadosmetadatos sobre oel evento que permitempermiten identificar olo que aconteceusucedió ey reagirreaccionar adequadamenteadecuadamente. EssesEstos metadadosmetadatos sãose enviadosenvían por meiomedio de umauna chamadallamada HTTP utilizando oel método POST, comcon oel conteúdocontenido (payload/body) formatadoformateado emen JSON. <br> <br> AquiAquí está umun ejemplo exemplode desseeste formato JSON y elas asinformaciones informaçõesincluidas incluídasen neleeste para referênciareferencia: </p> <br> <br> |
| HTML |
|---|
<style>
.code-box {
background-color: #282c34;
color: #abb2bf;
padding: 20px;
margin: 20px;
border-radius: 5px;
position: relative;
}
.code-title {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #343541;
color: #282c34;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight: bold;
}
.code-btn {
position: absolute;
top: 5px;
right: 5px;
background-color: #343541;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
font-weight: bold;
cursor: pointer;
}
.code-box pre {
margin: 0;
}
.code-string {
color: #98c379;
}
.code-number {
color: #d19a66;
}
.code-boolean {
color: #56b6c2;
}
.code-null {
color: #e06c75;
}
</style>
<div class="code-box">
<div class="code-title">
<img src="http://projeto.cloud/wp-content/uploads/2023/03/json-file.png" alt="JSON logo" width="20" height="20" style="margin-right: 5px;">
</div>
<button class="code-btn" onclick="copyToClipboard()">Copiar</button>
<pre><code id="myCode" class="language-json">
{
"eventId": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
"timestamp": <span class="code-string">"2022-05-06T15:28:36.110-03:00"</span>,
"workflow": {
"id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
"description": <span class="code-string">"Lorem ipsum dolor sit amet"</span>
},
"trigger": {
"id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
"description": <span class="code-string">"Opportunity won"</span>
},
"source": {
"object": {
"id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
"description": <span class="code-string">"Opportunity"</span>,
"contextUrl": <span class="code-string">"/api/v11/opportunity/opportunities"</span>
},
"row": {
"id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
"externalId": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>
}
}
}
</code></pre>
</div>
<script>
function copyToClipboard() {
const codeToCopy = document.getElementById("myCode").textContent;
const el = document.createElement('textarea');
el.value = codeToCopy;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
alert("Código copiado para a área de transferência.");
}
</script> <br> <br> |
| HTML |
|---|
<p> A La tabelasiguiente abaixotabla contémcontiene informaçõesinformación detalhadasdetallada sobre oslos atributos presentes noen el formato JSON. EssesEstos atributos sãose listadoslistan juntamentejunto comcon seussus respectivos formatos e intençõesintenciones. EssasEsta informaçõesinformación podempuede ser úteisútil para entender melhormejor ala estruturaestructura dodel JSON ey comocómo usá-loutilizarlo. </p> <br> <p> <style> table { } </style> <table class="wrapped confluenceTable tablesorter tablesorter-default" role="grid" resolved=""> <colgroup> <col> <col> <col> </colgroup> <thead> <tr role="row" class="tablesorter-headerRow"> <th class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="0" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Atributo: No sort applied, activate to apply an ascending sort" style="user-select: none;"> <div class="tablesorter-header-inner">Atributo</div> </th> <th class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Tipo de dados: No sort applied, activate to apply an ascending sort" style="user-select: none;"> <div class="tablesorter-header-inner">Tipo de dados<datos</div> </th> <th class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="2" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Descrição: No sort applied, activate to apply an ascending sort" style="user-select: none;"> <div class="tablesorter-header-inner">Descrição<>Descripción</div> </th> </tr> </thead> <tbody aria-live="polite" aria-relevant="all"> <tr role="row"> <td class="confluenceTd">eventId</td> <td class="confluenceTd">String</td> <td class="confluenceTd">Identificador único dodel evento</td> </tr> <tr role="row"> <td class="confluenceTd">timestamp</td> <td class="confluenceTd">Data>Fecha ey hora formatadosformateados como String (ISO 8601)</td> <td class="confluenceTd">Data>Fecha ey hora en emla quecual ose Workflowejecutó foiel executado<Workflow</td> </tr> <tr role="row"> <td class="confluenceTd">workflow.id</td> <td class="confluenceTd">UUID formatadoformateado como String</td> <td class="confluenceTd">Identificador único dodel workflow que emitiuemitió oel evento</td> </tr> <tr role="row"> <td class="confluenceTd">workflow.description</td> <td class="confluenceTd">String</td> <td class="confluenceTd">Nome>Nombre dodel workflow que emitiuemitió oel evento, como definido nose definió en el momento que ase chamadadisparó foila disparada <llamada</td> </tr> <tr role="row"> <td class="confluenceTd">trigger.id</td> <td class="confluenceTd">UUID formatadoformateado como String</td> <td class="confluenceTd">Identificador único global dodel gatilhodisparador definido en noel Workflow noen el momento en queel cual ose eventodisparó foiel disparado<evento</td> </tr> <tr role="row"> <td class="confluenceTd">trigger.description</td> <td class="confluenceTd">String</td> <td class="confluenceTd">Nome>Nombre dodel gatilhodisparador definido noen el Workflow noen el momento en queel cual oel evento foifue disparado</td> </tr> <tr role="row"> <td class="confluenceTd">source.object.id</td> <td class="confluenceTd">UUID formatadoformateado como String</td> <td class="confluenceTd">Identificador único dodel objeto de origemorigen dodel evento (oportunidades, leads, atividadesactividades, etc.)</td> </tr> <tr role="row"> <td class="confluenceTd">source.object.description</td> <td class="confluenceTd">String</td> <td class="confluenceTd">Descrição>Descripción dodel objeto de origemorigen dodel evento</td> </tr> <tr role="row"> <td class="confluenceTd">source.object.contextUrl</td> <td class="confluenceTd">URL formataformatea como String</td> <td class="confluenceTd">URL base da API dodel objeto de origemorigen en noel TOTVS CRM GestãoGestión de Clientes<clientes</td> </tr> <tr role="row"> <td class="confluenceTd">source.row.id</td> <td class="confluenceTd">UUID formatadoformateado como String</td> <td class="confluenceTd">Identificador único dodel registro de origemorigen dodel evento (ID dade la oportunidadeoportunidad, lead, atividadeactividad, etc.)</td> </tr> <tr role="row"> <td colspan="1" class="confluenceTd">source.row.externalId</td> <td colspan="1" class="confluenceTd">String</td> <td colspan="1" class="confluenceTd">Identificador externo dodel registro de origemorigen dodel evento, sesi houverhubiera umuno ey oel atributo estuviera estivervisible visívelen noel Workflow</td> </tr> </tbody> </table> </p> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> ESTRATÉGIA ESTRATEGIA DE DAEJECUCIÓN EXECUÇÃODE DASLAS CHAMADAS<LLAMADAS</b> </div> <p> O TOTVS CRM GestãoGestión de Clientesclientes fazejecuta a execução das chamadaslas llamadas de forma assíncronaasíncrona ey baseadabasada emen consistênciaconsistencia eventual, olo quecual podepuede resultar emen eventos entreguesentregados forafuera de ordemorden ey comcon atrasos de algunsalgunos minutos. EmEn caso de falhasfallas de comunicaçãocomunicación, los eventos osson eventosdevueltos sãoa retornadosla paracola ay filase erealiza umaun novanuevo tentativaintento édespués feitade apóspor pelolo menos 5 minutos, podendopudiendo ocorrerocurrir entregas de novosnuevos eventos durante esseeste período. ÉEs importante que oel sistema terceirotercero que receberecibe oslos eventos estejaesté preparado para lidartrabajar comcon possíveisposibles cenáriosescenarios de eventos entreguesentregados forafuera de ordemorden, maismás de umauna vez ey/ouo comcon atrasos, identificáveisidentificables por peloslos atributos eventId ey timestamp.</p> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> CENÁRIOS ESCENARIOS DE FALHA<FALLA</b> </div> <p> QuandoCuando oel TOTVS CRM GestãoGestión de Clientesclientes chamallama oal sistema terceirotercero para informar umun evento, eleeste verifica sesi ala respostarespuesta HTTP recebidarecibida es éde dala famíliafamilia 2xx para entender sesi ala entrega foifue bem-sucedidaexitosa. SeSi fuera simafirmativo, oel evento ése consideradoconsidera entregueentregado comcon sucessoéxito. CasoEn caso contráriocontrario, oel evento ése encaminhadoencamina paraa umauna filacola de novasnuevos tentativasintentos de entrega, comcon umun intervalo de pelopor lo menos 5 minutos entre cada tentativaintento. SeSi después apósde 10 tentativasintentos oel evento nãono forse entregueentregara comcon sucessoéxito, eleeste seráse descartadodescartará. O TOTVS CRM tambémtambién estabeleceestablece umun tempotiempo limitelímite de 5 segundos para ala conexãoconexión comcon oel serviçoservicio remoto ey 60 segundos para receberrecibir umauna respostarespuesta. SeSi essesestos limiteslímites foremfueran ultrapassadossuperados, oel evento seráse encaminhadoencaminará paraa ala filacola de novasnuevos tentativasintentos, independentementeindependientemente de oque el sistema terceirotercero haya terrecibido recebidoel amensaje mensagemdespués depoisde dessesestos limiteslímites.</p> <br> <br> <br> <br> <br> <br> <br> <br> |
| HTML |
|---|
<style>
#title-text {
display: none !important;}
@import "compass/css3"; @import "compass/css3";
* {
box-sizing: border-box;
font-family: lato, sans-serif;
}
* {
font-family: lato, sans-serif;
}
blockquote {
margin: 3%;
border-left: 10px solid #363636;
padding: 2%;
color: #222;
background: #fff;
font-style: italic;
line-height: 130%;
}
.top {
width: 100%;
background: #363636;
}
.img {
image-resolution: 5px 5px 9px;
image-rendering: auto;
image-orientation:0deg
}
.header {
max-width: 1200px;
width: 98%;
height: 7em;
margin: 0px auto;
overflow: hidden;
h1 {
text-align: center;
font-weight: bold;
color: #fff;
padding: 20px;
font-size: 22px;
div {
margin: 0;
font-weight: normal;
font-size: 1.8em;
}
}
.author {
font-size: 0.8em;
font-weight: normal;
border-top: 1px dashed #555;
border-bottom: 1px dashed #555;
max-width: 160px;
text-align: center;
margin: -1em auto 0 auto;
padding: 0.3em;
text-transform: uppercase;
color: #ccc;
}
}
.content {
max-width: auto;
float: right;
margin: auto;
padding: 0;
}
.date {
float: left;
width: 10%;
color: #444;
text-align: center;
div {
margin: 0;
line-height: 50%;
}}
.day {
float: left;
margin-top: 0.1em;
width: 100%;
color: #FEAC0E;
font-size: 200%;
}
}
.date-line {
display: none;
}
.article {
width: 100%;
padding: 0 7em 0 7em;
background: rgb(247, 247, 252);
}
h2 {
font-weight: normal;
font-size: 22px;
font-weight: bold;
color: #555555;
margin: 0;
}
h3 {
font-weight: normal;
font-size: 16px;
color: #888;
font-style: italic;
margin: 0 0 1em 0;
}
p {
margin: 0;
padding-top: 8px;
color: #555;
text-align: justify;
font-size: 16px;
line-height: 150%;
}
li{
font-size: 16px;
color: #555555;
}
div{
font-style: 16px;
color: #555;
}
.firstpara {
text-indent: 0;
font-size: 16px;
}
.pause {
margin: 2em auto 2em auto;
color: #555555;
width: 60%;
padding: 10px;
text-align: center;
font-size: 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.firstcharacter {
float: left;
font-size: 16px;
font-weight: bold;
color: #555;
line-height: 0.6em;
padding-top: 0.12em;
padding-right: 0.1em;
padding-left: 0;
}
}
.footer {
max-width: 1200px;
width: 98%;
height: 50px;
margin: 0px auto;
overflow: hidden;
border-top: 1px solid #ccc;}
.copy {
float: right;
font-style: italic;
color: #888;
padding: 1% 1% 0 0;
}
}
.prev a,
.next a {
position: fixed;
top: 9.6em;
padding: 1em;
background: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
}
.prev a:hover,
.next a:hover {
background: #fff;
}
.prev a {
left: 0.7em;
}
.next a {
right: 0.7em;
}
@media only screen and (max-width: 450px) {
.content {
margin-top: 2em;
}
.social {
display: none;
}
.date {
display: none;
}
.date-line {
display: inline;
}
.article {
width: 100%;
margin: 0 auto 2em auto;
border-left: none;
padding-bottom: 2em;
border-bottom: 1px solid #ccc;
p {
font-size: 1.2em;
}
}
.header {
height: auto;
position: fixed;
top: 0;
padding: 0;
margin: 0;
background: rgb(34, 16, 171)
h1 {
text-align: center;
width: 100%;
margin: 0;
color: #f1f1f1;
span {
font-size: 80%;
}
}
.author {
display: none;
}
}
.footer {
text-align: center;
padding: 3%;
height: 40px;
.copy {
float: none;
}
}
.prev a,
.next a {
position: relative;
margin-bottom: 2em;
text-align: center;
top: 0;
}
.prev a {
float: left;
width: 40%;
}
.next a {
float: right;
width: 40%;
}s
.table {
font-family: lato;
background-color: #fff;
}
#wrapper {
display: flex;
flex-direction: column;
gap: 2px;
position: absolute;
inset: 0;
justify-content: center;
align-items: center;
}}
.flexWrap {
display: flex;
gap: 2px;
width: 110px;
}
#disclaimer {
font-family: sans-serif;
color: #333333;
position: fixed;
top: 5%;
right: 5%;
width: 5%;
}
.badge-primary {
color: #8686FF;
background-color: #F3F3FF;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-secondary{
color: #ebeef0;
background-color: #2abe74;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold
}
.badge-novo {
color: #fff;
background-color: #20d691;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-danger{
color: #FFFFFF;
background-color: #FF4057;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-manutencao {
color: #FFF;
background-color: #efc307;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-melhoria {
color: #FFF;
background-color: #6f60f6;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-light {
color: #8686FF;
background-color: #F3F3FF
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-dark {
color: #ebeef0;
background-color: #064118;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
body {
font-family: lato;
}
}
caption {
font-size: 1.5rem;
text-align: left;
padding-bottom: 1rem;
}
}
tbody tr:nth-child(odd),
tfoot tr:nth-child(even) {
background-color: #fff;
}
tfoot tr td:first-child {
border: none;
background-color: white;
}
tfoot {
border-top: 5px solid #fff;
}
.img2 {
width:50%;
height:auto;
padding:2%;
margin-bottom:4%;
align-content: center;
display: block;
margin-left: auto;
margin-right: auto }
#f7f7fc;
}
}
container{
width: 50%;
}
.borderbox{
border: 1px dashed #ebebeb;
width:45%;
margin: 50px auto;
border-radius: 8px;
border-width:2px;
}
.box{
position:relative;
width:auto;
height:auto;
margin: 30px auto;
padding: 15px;
box-shadow: 0px 1px 6px 1px #ebebeb;
border-radius: 8px;
}
.sucess-box{
border-left: solid 5px #3FC43C;
background-color: #fff;
} .info-box{
border-left: solid 5px #585EC2;
background-color: #fff;
}
.warning-box{
border-left: solid 5px #EFA162;
background-color: #fff;
}
.error-box{
border-left: solid 5px #F32D70;
background-color: #fff;
}
.fa{
padding-right:10px;
}
.fa-check-circle{
color: #3FC43C;
}
.fa fa-info-circle {
color: #585EC2;
}
.warning-box .fa-exclamation-triangle{
color: #EFA162;
}
.info-box .fa-info-circle{
color: #585EC2;
}
.error-box .fa-exclamation-triangle{
color: #E63470;
}
p{
padding:0px 28px;
}
.time{
color:#9b9b9b;
}
.fa-close{
color:#BCC4CD;
}
.close{
position:absolute;
top: 20px;
right:20px;
}
.link1,
.link2,
.link3,
.link4{
opacity:0;
margin-left:20px;
text-decoration:none;
}
.link1{
color:#3FC43C;
}
.link2{
color:#585EC2;
}
.link3{
color:#EFA162;
}
.link4{
color:#E63470;
}
.box:hover a{
opacity:1;
}
.topic-cluster-index {
list-style: none;
padding: 0;
}
.topic-cluster-index li {
display: inline-block; list-style: none;
min-height: 30px;
width: 98%;
background-color: #fff;
border-radius: 2px;
padding: 24px;
margin: 5px 0;
border: 1px solid #e4e8ec;
line-height: 16px !important;
font-weight: bold;
color: #363636;
font-family: lato;
font-weight: 600;
}
.topic-cluster-index li a {
list-style: none;
font-weight: 400;
color: #363636 !important;
list-style: none;
font-size: 15px;
margin: 0;
padding: 0;
font-family: lato;
font-weight: bold;
text-decoration: none !important;
}
.topic-cluster-index li:hover {
list-style: none;
background-color: #F7F7FC;
font-family: lato;
font-weight: 700;
cursor: pointer;
}
.topic-cluster-index li:hover a {
list-style: none;
color: #feac0e !important;
font-family: lato;
font-weight: 700;
text-decoration: none !important;
}
.index-title {
width: 100%;
height: 30px;
background: #feac0e;
font-family: lato;
font-size: 20px;
border-radius: 2px;
color: #fff;
font-weight: 700;
padding: 6px 10px 6px 25px;
}
.imgcapa {
width: 100%;
margin-top: 0px;}
</style>
|
| HTML |
|---|
<style>
.main-presupuestoMensual {
min-width: 320px;
max-width: 100%;
padding: 50px;
margin: 0 auto;
background: #F7F7FC;
}
.containter-tab1 {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.input-tabPresupuestoMensual {
display: none;
}
.label-tabPresupuestoMensual {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.label-tabPresupuestoMensual:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
/* .label-tabPresupuestoMensual[for*='1']:before {
content: '\f1cb';
}
.label-tabPresupuestoMensual[for*='2']:before {
content: '\f17d';
}
.label-tabPresupuestoMensual[for*='3']:before {
content: '\f16b';
}
.label-tabPresupuestoMensual[for*='4']:before {
content: '\f1a9';
} */
.label-tabPresupuestoMensual:hover {
color: #888;
cursor: pointer;
}
.input-tabPresupuestoMensual:checked + .label-tabPresupuestoMensual {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid orange;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4
{
display: flex;
}
@media screen and (max-width: 650px) {
.label-tabPresupuestoMensual {
font-size: 0;
}
.label-tabPresupuestoMensual:before {
margin: 0;
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
.label-tabPresupuestoMensual {
padding: 15px;
}
}
/**/
body {
background: #ececec;
}
.loader:before,
.loader:after {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border-style: solid;
border-top-color: #ecd078;
border-right-color: #c02942;
border-bottom-color: #542437;
border-left-color: #53777a;
content: "";
transform: translate(-50%, -50%);
animation: rotate 1.5s infinite ease-in-out;
}
.loader:before {
border-width: 10vh;
}
.loader:after {
width: 30vh;
height: 30vh;
border-width: 2.5vh;
animation-direction: reverse;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style> |
| HTML |
|---|
<style> #title-text {
display: none !important;} body {
font-size: 100%;
font-family: "lato", serif;
color: #363636;
background-color: #ffffff;
}
a {
color: #acb7c0;
text-decoration: none;
font-family: "lato";
font-family: lato, sans-serif!important;
font-size: 16px;
}
img {
max-width: 100%;
}
p {
text-align:justify;
font-family: "Lato", sans-serif;
}
h2
h5 {
font-family: "lato", sans-serif;
font-size: 90px ;
font-weight: bold;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: "";
display: table;
clear: both;
}
/* --------------------------------
xnugget info
-------------------------------- */
.cd-nugget-info {
text-align: center;
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
top: 0;
left: 0;
}
.cd-nugget-info a {
position: relative;
font-size: 14px;
color: #718ca1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
opacity: 0.8;
}
.cd-nugget-info span {
vertical-align: middle;
display: inline-block;
}
.cd-nugget-info span svg {
display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
fill: #718ca1;
}
/* --------------------------------
Main components
-------------------------------- */
#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: "";
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
}
.cd-timeline-block {
position: relative;
margin: 2em 0;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),
0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
display: block;
width: 32px;
height: 32px;
position: relative;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
}
.cd-timeline-img.cd-novo {
background: #363636;
}
.cd-timeline-img.cd-melhoria {
background: #363636;
}
.cd-timeline-img.cd-manutencao {
background: #363636;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}
60% {
opacity: 1;
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 50px;
background: #f5f5fa;
border-radius: 0.25em;
max-width: 400px;
padding: 1em;
box-shadow: 0 3px 0 #363636;
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #363636;
font-weight: bold;
}
.cd-timeline-content p,
.cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: 0.8em 1em;
background: #5596e6;
color: white;
border-radius: 0.25em;
text-decoration: none;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #ffffff;
}
.cd-timeline-content .cd-date {
float: left;
padding: 0.8em 0;
opacity: 0.7;
}
.cd-timeline-content::before {
content: "";
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
font-weight: bold ;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more,
.cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: #d7e4ed;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: #d7e4ed;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.button-2 {
padding: 8px 9px;
font-size: 12px;
color: #fff;
background-color: #FDAB0E;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-2:hover {
background-color: #0897E9;
}
.button-2:active {
background-color: #FDAB0E;
}
#wrapper {
display: flex;
flex-direction: column;
gap: 20px;
position: absolute;
inset: 0;
justify-content: center;
align-items: center;
margin: 0;
}
.flexWrap {
display: flex;
gap: 2px;
width: 50px;
}
#disclaimer {
font-family: Tahoma;
color: #333333;
position: fixed;
top: 5%;
right: 5%;
width: 5%;
}
.button-2 {
padding: 8px 9px;
font-size: 12px;
color: #fff;
background-color: #363636;
border: none;
border-radius: 6px;
cursor: pointer;
}
.button-2:hover {
background-color: #feac0e;
}
.button-2:active {
background-color: #feac0e;
}
#wrapper {
display: flex;
flex-direction: column;
gap: 2px;
position: absolute;
inset: 0;
justify-content: center;
align-items: center;
}
.flexWrap {
display: flex;
gap: 2px;
width: 110px;
}
#disclaimer {
font-family: sans-serif;
color: #333333;
position: fixed;
top: 5%;
right: 5%;
width: 5%;
}
.badge-primary {
color: #8686FF;
background-color: #F3F3FF;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-secondary{
color: #ebeef0;
background-color: #2abe74;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold
}
.badge-novo {
color: #fff;
background-color: #20d691;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-danger{
color: #FFFFFF;
background-color: #FF4057
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-manutencao {
color: #FFF;
background-color: #FEAC0E;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-melhoria {
color: #FFF;
background-color: #6f60f6;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-light {
color: #8686FF;
background-color: #F3F3FF
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-dark {
color: #ebeef0;
background-color: #064118;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
</style> |
| HTML |
|---|
<style> @import url(https://fonts.googleapis.com/css?family=Raleway:300);
.my-custom-class {
/* Estilos para o body */
margin: 0;
padding: 15px;
background: #f7f7fc;
text-align: center;
}
.personne {
display: inline-block;
position: relative;
width: 80px;
margin: 0 20px;
cursor: pointer;
vertical-align: top;
}
.personne > div {
width: 100%;
height: 80px;
border-radius: 50%;
border: 4px solid transparent;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
text-align: center;
overflow: hidden;
box-sizing: border-box;
}
.personne img {
height: 100%;
margin: 0 -50%;
transition: all 0.5s ease;
}
.personne:hover img {
height: 105%;
}
.personne:hover > div {
border: 4px solid #feac0e;
}
.personne h4 {
font-family: lato, sans-serif!important;
text-align: center;
margin-top: 5px;
color: #363636;
font-size: 13px;
padding-left: 1px;
}
/* Estilos para o tooltip */
.tooltip {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
}
/* Mostrar o tooltip quando o elemento pai é hover */
.personne:hover .tooltip {
display: block;
}
.titulo-destaque {
font-size: 18px;
font-family: lato, sans-serif!important;
font-weight: bold;
margin: 0;
text-align: center;
padding-bottom: 5px;
color: #363636;
}
.subtitulo-destaque {
font-family: lato;
margin-left: 22%;
margin-right: 22%;
padding-top: 8px;
color: #555;
text-align: center;
font-size: 16px;
line-height: 150%;
text-align: justify;
}
.tooltip {
position: relative;
}
.tooltip:before {
content: "";
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px;
border-radius: 5px;
background-color: #333;
color: #fff;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
}
.tooltip:hover:before {
display: block;
}
.titulo-destaque.tooltip:before {
content: attr(data-tooltip);
}
.tooltip:before {
content: "";
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px;
border-radius: 5px;
background-color: #333;
color: #fff;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
max-width: 80px; /* Define a largura máxima do tooltip */
word-wrap: break-word; /* Faz o tooltip quebrar a linha quando necessário */
}
</style> |
| HTML |
|---|
<style>
#conteudo {
background-color: #f7f7fc;
}
.caixas {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.caixa {
width: calc(50% - 10px);
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.caixa:hover {
background-color: #F7F7FC;;
}
.caixa .conteudo {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.caixa .imagem {
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.caixa img {
max-width: 100%;
max-height: 100%;
border-radius: 50%;
}
.caixa .texto {
height: 0%;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
font-family: 'Lato', sans-serif;
max-width: 100%;
font-size: 14px;
color: #363636;
}
.caixa h3 {
margin-top: 10px;
font-size: 1.2em;
font-family: 'Lato', sans-serif;
color: #363636;
}
.caixa p {
margin: 15 10px;
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #363636;
</style> |
| HTML |
|---|
<style> body {
margin: 0; // 1
font-family: lato;
font-size: 16px;
font-weight: $font-weight-base;
line-height: $line-height-base;
color: #555555
text-align: left; // 3
background-color: $body-bg; // 2
}
.speech-bubble {
max-width: 300px;
font-family: lato;
color: #555555;
font-size: 16px;
margin: 1rem;
padding: 1rem;
position: relative;
border: 2px solid #FEAC0E;
background: #fff;
border-radius: 0.4em;
}
.speech-row {
display: flex;
justify-content: center;
}
img {
overflow-clip-margin: content-box;
overflow: clip;
}
.speech-img img {
border-radius: 50%;
}
img {
vertical-align: middle;
border-style: none;
}
.speech-img {
align-self: center;
max-width: 100%;
height: auto;
}
*,
::after,
::before {
box-sizing: border-box;
}
img {
overflow-clip-margin: content-box;
overflow: clip;
}
.speech-bubble:before,
.speech-bubble:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-right-color: #FEAC0E;
border-left: 0;
margin-top: -20px;
margin-left: -20px;
}
.speech-bubble:after {
border-right-color: #fff;
margin-left: -18px;
z-index: 1;
}
</style> |
| HTML |
|---|
<style>
.alert-box {
color:#555;
border-radius:5px;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
padding:10px 25px 10px 25px;
margin: 5px 25px 5px 25px;
max-width: 100%;
}
.alert-box span {
font-weight:bold;
text-transform:uppercase;
}
.error {
background:#ffecec url('images/error.png') no-repeat 10px 50%;
border:1px solid #f5aca6;
}
.success {
background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
border:1px solid #a6ca8a;
}
.warning {
background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
border:1px solid #f2c779;
}
.notice {
background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
border:1px solid #8ed9f6;
}
</style> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas