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 EN EL WORKFLOW DE 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">Producto:</th>
<td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - Gestión de 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">Línea de producto:</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">Aplicación</th>
<td style="text-align: left;" colspan="1" class="confluenceTd">Web/app 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 el 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 - Soporte a webhooks vía Workflow</span>
<span class="aui-lozenge aui-lozenge-subtle aui-lozenge-current
jira-macro-single-issue-export-pdf">En ejecución</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
|
| HTML |
|---|
<br>
<p> Muchas empresas enfrentan el desafío de mantener sus registros actualizados en diversos sistemas cuando se ejecuta una acción en el TOTVS CRM. Este proceso manual demora y puede inducir a cometer errores, impactando negativamente en la eficiencia y productividad del equipo. Para superar esta dificultad, TOTVS CRM lanzó recientemente un nuevo recurso de acción denominado Webhook, disponible en el módulo de workflow. Con la utilización de Webhooks, ahora los clientes pueden automatizar estos procesos e integrar fácilmente diferentes sistemas y aplicaciones. Cuando un disparador de creación o actualización es activado en el TOTVS CRM, la acción de Webhook se ejecuta, permitiendo que las informaciones se actualicen en tiempo real en otros sistemas conectados. Este proceso resulta en actualizaciones rápidas y precisas, economizando tiempo y eliminando errores manuales que antes eran muy usuales. En otras palabras, la acción de Webhook permite que los clientes conecten sus sistemas y automaticen la actualización de registros, lo cual simplifica el proceso y mejora significativamente la eficiencia operativa de la empresa. <br> <br> <div>
</div> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> TIPO DE INTEGRACIÓN</b> </div> <p> <strong>Salida:</strong> esta integración envía datos del TCRM - Gestión de clientes a una herramienta destino, especificada en la configuración. </p> <br> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> ¿QUÉ HACE ESTA INTEGRACIÓN?</b> </div> <p> Esta configuración permite enviar datos de TOTVS CRM a otras herramientas que dispongan de una URL de entrada de datos. Esta URL debe conseguir leer y consumir datos enviados en formato JSON. </p> <br> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> OBSERVACIONES Y REQUISITOS</b> </div> <p> Es importante tener un desarrollador o contacto con el soporte de su otro sistema para chequear la compatibilidad con la lectura del paquete de datos que TOTVS CRM envía. </p> <br> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> PASO A PASO PARA REALIZAR LA INTEGRACIÓN </b> </div> <br> <ol> <li>Con TOTVS CRM Gestión de clientes abierto en su navegador, acceda al Workflow por medio del menú principal.</li> <br> <li>Para agregarincluir una automatización, haga clic en la opción "AgregarIncluir" ubicado en la parte superior derecha de la pantalla.;</li><br> <li>En el campo de nombre, incluya una breve descripción del Webhook, facilitando la identificación del registro en accesos futuros. Si fuera necesario, agregueincluya informaciones complementarias en el campo de observaciones.</li><br> <li>Después de nombrar su Workflow, seleccione el disparador de su workflow haciendo clic en la opción "Seleccionar disparador" disponible en la pantalla. A continuación, seleccione el disparador que iniciará su automatización haciendo clic en la opción "Seleccionar disparador". El disparador será el evento que desencadenará la llamada del Webhook, como una actividad finalizada o una oportunidad ganada, entre otros.</li><br> <li>Si desea, puede agregarincluir condiciones (filtros) para limitar cuándo la automatización se ejecutará, haciendo clic en "AgregarIncluir condiciones".</li><br> <li>Finalmente, seleccione la acción "Webhook" en "Seleccionar acción" e informe la URL pública del sistema que recibirá la notificación del evento. Si fuera necesario, agregueincluya encabezados adicionales para cuestiones técnicas, como autenticación.</li><br> <li>Grabe su Workflow con el estatus de activo y este se ejecutará en los próximos eventos.</li><br> <li>Cabe destacar que Webhooks en TOTVS CRM está regida por algunas características técnicas importantes. Consulte la próxima sección de este documento para más informaciones al respecto, permitiendo que su integración suceda con éxito y 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> INFORMACIONES TÉCNICAS</b> </div> <p> Cuando TOTVS CRM Gestión de clientes realiza una llamada a sistemas externos vía Webhooks, este transmite metadatos sobre el evento que permiten identificar lo que sucedió y reaccionar adecuadamente. Estos metadatos se envían por medio de una llamada HTTP utilizando el método POST, con el contenido (payload/body) formateado en JSON. <br> <br> Aquí está un ejemplo de este formato JSON y las informaciones incluidas en este para referencia: </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> La siguiente tabla contiene información detallada sobre los atributos presentes en el formato JSON. Estos atributos se listan junto con sus respectivos formatos e intenciones. Esta información puede ser útil para entender mejor la estructura del JSON y cómo utilizarlo. </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 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">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 del evento</td>
</tr>
<tr role="row">
<td class="confluenceTd">timestamp</td>
<td class="confluenceTd">Fecha y hora formateados como String (ISO 8601)</td>
<td class="confluenceTd">Fecha y hora en la cual se ejecutó el Workflow</td>
</tr>
<tr role="row">
<td class="confluenceTd">workflow.id</td>
<td class="confluenceTd">UUID formateado como String</td>
<td class="confluenceTd">Identificador único del workflow que emitió el evento</td>
</tr>
<tr role="row">
<td class="confluenceTd">workflow.description</td>
<td class="confluenceTd">String</td>
<td class="confluenceTd">Nombre del workflow que emitió el evento, como se definió en el momento que se disparó la llamada</td>
</tr>
<tr role="row">
<td class="confluenceTd">trigger.id</td>
<td class="confluenceTd">UUID formateado como String</td>
<td class="confluenceTd">Identificador único global del disparador definido en el Workflow en el momento en el cual se disparó el evento</td>
</tr>
<tr role="row">
<td class="confluenceTd">trigger.description</td>
<td class="confluenceTd">String</td>
<td class="confluenceTd">Nombre del disparador definido en el Workflow en el momento en el cual el evento fue disparado</td>
</tr>
<tr role="row">
<td class="confluenceTd">source.object.id</td>
<td class="confluenceTd">UUID formateado como String</td>
<td class="confluenceTd">Identificador único del objeto de origen del evento (oportunidades, leads, actividades, etc.)</td>
</tr>
<tr role="row">
<td class="confluenceTd">source.object.description</td>
<td class="confluenceTd">String</td>
<td class="confluenceTd">Descripción del objeto de origen del evento</td>
</tr>
<tr role="row">
<td class="confluenceTd">source.object.contextUrl</td>
<td class="confluenceTd">URL formatea como String</td>
<td class="confluenceTd">URL base da API del objeto de origen en el TOTVS CRM Gestión de clientes</td>
</tr>
<tr role="row">
<td class="confluenceTd">source.row.id</td>
<td class="confluenceTd">UUID formateado como String</td>
<td class="confluenceTd">Identificador único del registro de origen del evento (ID de la oportunidad, lead, actividad, 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 del registro de origen del evento, si hubiera uno y el atributo estuviera visible en el Workflow</td>
</tr>
</tbody>
</table> </p> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> ESTRATEGIA DE EJECUCIÓN DE LAS LLAMADAS</b> </div> <p> O TOTVS CRM Gestión de clientes ejecuta las llamadas de forma asíncrona y basada en consistencia eventual, lo cual puede resultar en eventos entregados fuera de orden y con atrasos de algunos minutos. En caso de fallas de comunicación, los eventos son devueltos a la cola y se realiza un nuevo intento después de por lo menos 5 minutos, pudiendo ocurrir entregas de nuevos eventos durante este período. Es importante que el sistema tercero que recibe los eventos esté preparado para trabajar con posibles escenarios de eventos entregados fuera de orden, más de una vez y/o con atrasos, identificables por los atributos eventId y timestamp.</p> <br> |
| HTML |
|---|
<div class="pause" id="secao-5">   <b> ESCENARIOS DE FALLA</b> </div> <p> Cuando el TOTVS CRM Gestión de clientes llama al sistema tercero para informar un evento, este verifica si la respuesta HTTP recibida es de la familia 2xx para entender si la entrega fue exitosa. Si fuera afirmativo, el evento se considera entregado con éxito. En caso contrario, el evento se encamina a una cola de nuevos intentos de entrega, con un intervalo de por lo menos 5 minutos entre cada intento. Si después de 10 intentos el evento no se entregara con éxito, este se descartará. TOTVS CRM también establece un tiempo límite de 5 segundos para la conexión con el servicio remoto y 60 segundos para recibir una respuesta. Si estos límites fueran superados, el evento se encaminará a la cola de nuevos intentos, independientemente de que el sistema tercero haya recibido el mensaje después de estos lí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