ricardocunha/ChatBot-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ChatBot - Frontend Pronto

Browse Source
This commit is contained in:
Ricardo Cunha 2025-05-23 20:38:33 +01:00
parent 00c66742f6
commit e2bf3a3743
9 changed files with 1255 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ChatBot-Frontend/angular.json
View File

@ -96,5 +96,8 @@
}
}
}
},
"cli": {
"analytics": "a03aa43f-820f-4ed4-bcfe-56adceb49573"
}
}

536
ChatBot-Frontend/src/app/app.component.css
View File

@ -0,0 +1,536 @@
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body, html {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
min-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.main {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
}
.text-node { background-clip: text !important; -webkit-background-clip: text !important; }
.group-96e07eb27483 {
position: relative;
margin: 40px auto;
left: 0;
top: 0;
width: 100%;
min-height: 480px;
max-width: 420px;
min-width: 0;
height: auto;
background: #232329;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 24px 16px 80px 16px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.group-96e07eb27483 {
max-width: 100vw;
margin: 0;
border-radius: 0;
min-height: 100vh;
height: 100vh;
padding: 8px 2px 72px 2px;
}
.chatbot-footer {
padding: 8px 2px;
}
}
.chatbot-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 16px;
background: transparent;
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
}
.chatbot-input {
flex: 1;
padding: 12px 16px;
border-radius: 20px;
border: 1px solid #4567c8;
background: #242431;
color: #fff;
font-family: Poppins;
font-size: 14px;
outline: none;
}
.chatbot-send {
background: #3665e5;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.chatbot-send:hover {
background: #274bb5;
}
.group-960966d81066 {
position: absolute;
right: 24px;
bottom: 24px;
}
.majesticon-96090a0d56c6 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.majesticon-96090a0d56c6 {
position: absolute;
left: 6px;
top: 6px;
width: 24px;
height: 24px;
}
.svgg-96090a0ec27b > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgg-96090a0ec27b {
position: absolute;
left: 2px;
top: 1px;
width: 20px;
height: 20px;
}
.svgpath-28b572d45adb > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-28b572d45adb {
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
}
.basebackg-96090a0e90ae > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-96090a0e90ae {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
border-radius: 0px;
display: none;
}
.ellipse-960912454190 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.ellipse-960912454190 {
position: absolute;
left: 0px;
top: 0px;
width: 36px;
height: 36px;
}
.fluent-add-9606a9926cc1 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-5.798989873223036px,-5.798989873223377px);
}
.fluent-add-9606a9926cc1 {
position: absolute;
left: 20.8px;
top: 16.8px;
width: 28px;
height: 28px;
}
.svgpath-9606a9926cc3 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-4.556349186103944px,-4.556349186104285px);
}
.svgpath-9606a9926cc3 {
position: absolute;
left: 3px;
top: 3px;
width: 22px;
height: 22px;
transform: matrix(0.71, -0.71, 0.71, 0.71, -0.00, -0.00);
}
.basebackg-9606a9926cc2 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-5.798989873223036px,-5.798989873223377px);
}
.basebackg-9606a9926cc2 {
position: absolute;
left: 0px;
top: 0px;
width: 28px;
height: 28px;
transform: matrix(0.71, -0.71, 0.71, 0.71, -0.00, -0.00);
border-radius: 0px;
display: none;
}
.como-posso-96076e6f2b0e {
position: absolute;
left: 40px;
top: 144px;
width: 147px;
height: 17px;
}
.como-posso-96076e6f2b0e .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.como-posso-96076e6f2b0e .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.como-posso-96076e6f2b0e .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.como-posso-96076e6f2b0e .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.ol-ricar-9606a9922bc3 {
position: absolute;
left: 40px;
top: 105px;
width: 84px;
height: 17px;
}
.ol-ricar-9606a9922bc3 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.ol-ricar-9606a9922bc3 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.ol-ricar-9606a9922bc3 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.ol-ricar-9606a9922bc3 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.escrever-96087303180b {
width: 100%;
min-width: 0;
max-width: 100%;
margin-top: 24px;
box-sizing: border-box;
}
.escrever-m-96087303180c {
width: 109px;
height: 14px;
flex-shrink: 0;
}
.escrever-m-96087303180c .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.escrever-m-96087303180c .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.escrever-m-96087303180c .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.399999976158142;
margin: 0;
text-align: left;
}
.escrever-m-96087303180c .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(250, 250, 250, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 10px;
text-rendering: geometricPrecision;
caret-color: rgba(250, 250, 250, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.group-960a79ab28ed {
position: absolute;
left: 40px;
top: 187px;
width: 178px;
height: 196px;
}
.messsage-960a1c58fff8,
.messsage-9609b70bc8d5,
.messsage-9609aa192b77,
.messsage-96082a7c27ce {
position: relative;
width: auto;
height: auto;
background: #3d4764FF;
border-radius: 20px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
padding: 10px 20px 10px 20px;
z-index: 0;
flex-direction: row;
flex-wrap: nowrap;
}
.ver-relat-960a1c58fff9,
.ver-relat-9609b70bc8d6,
.visualizar-9609aa192b78,
.consultar-96082a7c27cf {
height: 14px;
flex-shrink: 0;
}
.ver-relat-960a1c58fff9 .root-0,
.ver-relat-9609b70bc8d6 .root-0,
.visualizar-9609aa192b78 .root-0,
.consultar-96082a7c27cf .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.ver-relat-960a1c58fff9 .root-0-paragraph-set-0,
.ver-relat-9609b70bc8d6 .root-0-paragraph-set-0,
.visualizar-9609aa192b78 .root-0-paragraph-set-0,
.consultar-96082a7c27cf .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.ver-relat-960a1c58fff9 .root-0-paragraph-set-0-paragraph-0,
.ver-relat-9609b70bc8d6 .root-0-paragraph-set-0-paragraph-0,
.visualizar-9609aa192b78 .root-0-paragraph-set-0-paragraph-0,
.consultar-96082a7c27cf .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.399999976158142;
margin: 0;
text-align: left;
}
.ver-relat-960a1c58fff9 .root-0-paragraph-set-0-paragraph-0-text-0,
.ver-relat-9609b70bc8d6 .root-0-paragraph-set-0-paragraph-0-text-0,
.visualizar-9609aa192b78 .root-0-paragraph-set-0-paragraph-0-text-0,
.consultar-96082a7c27cf .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(250, 250, 250, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 10px;
text-rendering: geometricPrecision;
caret-color: rgba(250, 250, 250, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.vamos-a-is-960a62b1bab0 {
position: absolute;
left: 48.19px;
top: 441px;
width: 101px;
height: 17px;
}
.vamos-a-is-960a62b1bab0 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.pode-falar-960a50fa2a15 {
position: absolute;
left: 48.19px;
top: 406.83px;
width: 160px;
height: 17px;
}
.pode-falar-960a50fa2a15 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.pode-falar-960a50fa2a15 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.pode-falar-960a50fa2a15 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.pode-falar-960a50fa2a15 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.rectangle-9606a9926cc4 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.rectangle-9606a9926cc4 {
position: absolute;
left: 0px;
top: 0px;
width: 535px;
height: 588px;
}
.frame {
width: 100%;
min-width: 0;
margin-bottom: 12px;
}
.shape.text {
width: 100%;
}

969
ChatBot-Frontend/src/app/app.component.html
View File

@ -1,336 +1,681 @@
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
--bright-blue: oklch(51.01% 0.274 263.83);
--electric-violet: oklch(53.18% 0.28 296.97);
--french-violet: oklch(47.66% 0.246 305.88);
--vivid-pink: oklch(69.02% 0.277 332.77);
--hot-red: oklch(61.42% 0.238 15.34);
--orange-red: oklch(63.32% 0.24 31.68);
--gray-900: oklch(19.37% 0.006 300.98);
--gray-700: oklch(36.98% 0.014 302.71);
--gray-400: oklch(70.9% 0.015 304.04);
--red-to-pink-to-purple-vertical-gradient: linear-gradient(
180deg,
var(--orange-red) 0%,
var(--vivid-pink) 50%,
var(--electric-violet) 100%
);
--red-to-pink-to-purple-horizontal-gradient: linear-gradient(
90deg,
var(--orange-red) 0%,
var(--vivid-pink) 50%,
var(--electric-violet) 100%
);
--pill-accent: var(--bright-blue);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-size: 3.125rem;
color: var(--gray-900);
font-weight: 500;
line-height: 100%;
letter-spacing: -0.125rem;
margin: 0;
font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}
p {
margin: 0;
color: var(--gray-700);
}
main {
width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-sizing: inherit;
position: relative;
}
.angular-logo {
max-width: 9.2rem;
}
.content {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 700px;
margin-bottom: 3rem;
}
.content h1 {
margin-top: 1.75rem;
}
.content p {
margin-top: 1.5rem;
}
.divider {
width: 1px;
background: var(--red-to-pink-to-purple-vertical-gradient);
margin-inline: 0.5rem;
}
.pill-group {
display: flex;
flex-direction: column;
align-items: start;
flex-wrap: wrap;
gap: 1.25rem;
}
.pill {
display: flex;
align-items: center;
--pill-accent: var(--bright-blue);
background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
color: var(--pill-accent);
padding-inline: 0.75rem;
padding-block: 0.375rem;
border-radius: 2.75rem;
border: 0;
transition: background 0.3s ease;
font-family: var(--inter-font);
font-size: 0.875rem;
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
line-height: 1.4rem;
letter-spacing: -0.00875rem;
text-decoration: none;
font-weight: 400;
font-display: block;
src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
.pill:hover {
background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.pill-group .pill:nth-child(6n + 1) {
--pill-accent: var(--bright-blue);
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.pill-group .pill:nth-child(6n + 2) {
--pill-accent: var(--french-violet);
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.pill-group .pill:nth-child(6n + 3),
.pill-group .pill:nth-child(6n + 4),
.pill-group .pill:nth-child(6n + 5) {
--pill-accent: var(--hot-red);
}
.pill-group svg {
margin-inline-start: 0.25rem;
}
.social-links {
body {
min-height: 100vh;
min-width: 100vw;
display: flex;
align-items: center;
gap: 0.73rem;
margin-top: 1.5rem;
justify-content: center;
background: #fff;
}
.social-links path {
transition: fill 0.3s ease;
fill: var(--gray-400);
.main {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.social-links a:hover svg path {
fill: var(--gray-900);
* {
box-sizing: border-box;
}
@media screen and (max-width: 650px) {
.content {
flex-direction: column;
width: max-content;
}
.divider {
height: 1px;
.text-node { background-clip: text !important; -webkit-background-clip: text !important; }
.group-96e07eb27483 {
position: relative;
margin: 40px auto;
left: 0;
top: 0;
width: 100%;
background: var(--red-to-pink-to-purple-horizontal-gradient);
margin-block: 1.5rem;
min-height: 480px;
max-width: 420px;
min-width: 0;
height: auto;
background: #232329;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 24px 16px 80px 16px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.group-96e07eb27483 {
max-width: 100vw;
margin: 0;
border-radius: 0;
min-height: 100vh;
height: 100vh;
padding: 8px 2px 72px 2px;
}
.chatbot-footer {
padding: 8px 2px;
}
}
.chatbot-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 16px;
background: transparent;
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
}
.chatbot-input {
flex: 1;
padding: 12px 16px;
border-radius: 20px;
border: 1px solid #4567c8;
background: #242431;
color: #fff;
font-family: Poppins;
font-size: 14px;
outline: none;
}
.chatbot-send {
background: #3665e5;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.chatbot-send:hover {
background: #274bb5;
}
.group-960966d81066 {
position: absolute;
right: 24px;
bottom: 24px;
}
.majesticon-96090a0d56c6 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.majesticon-96090a0d56c6 {
position: absolute;
left: 6px;
top: 6px;
width: 24px;
height: 24px;
}
.svgg-96090a0ec27b > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgg-96090a0ec27b {
position: absolute;
left: 2px;
top: 1px;
width: 20px;
height: 20px;
}
.svgpath-28b572d45adb > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.svgpath-28b572d45adb {
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
}
.basebackg-96090a0e90ae > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.basebackg-96090a0e90ae {
position: absolute;
left: 0px;
top: 0px;
width: 24px;
height: 24px;
border-radius: 0px;
display: none;
}
.ellipse-960912454190 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.ellipse-960912454190 {
position: absolute;
left: 0px;
top: 0px;
width: 36px;
height: 36px;
}
.fluent-add-9606a9926cc1 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-5.798989873223036px,-5.798989873223377px);
}
.fluent-add-9606a9926cc1 {
position: absolute;
left: 20.8px;
top: 16.8px;
width: 28px;
height: 28px;
}
.svgpath-9606a9926cc3 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-4.556349186103944px,-4.556349186104285px);
}
.svgpath-9606a9926cc3 {
position: absolute;
left: 3px;
top: 3px;
width: 22px;
height: 22px;
transform: matrix(0.71, -0.71, 0.71, 0.71, -0.00, -0.00);
}
.basebackg-9606a9926cc2 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(-5.798989873223036px,-5.798989873223377px);
}
.basebackg-9606a9926cc2 {
position: absolute;
left: 0px;
top: 0px;
width: 28px;
height: 28px;
transform: matrix(0.71, -0.71, 0.71, 0.71, -0.00, -0.00);
border-radius: 0px;
display: none;
}
.como-posso-96076e6f2b0e {
position: absolute;
left: 40px;
top: 144px;
width: 147px;
height: 17px;
}
.como-posso-96076e6f2b0e .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.como-posso-96076e6f2b0e .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.como-posso-96076e6f2b0e .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.como-posso-96076e6f2b0e .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.ol-ricar-9606a9922bc3 {
position: absolute;
left: 40px;
top: 105px;
width: 84px;
height: 17px;
}
.ol-ricar-9606a9922bc3 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.ol-ricar-9606a9922bc3 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.ol-ricar-9606a9922bc3 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.ol-ricar-9606a9922bc3 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.escrever-96087303180b {
width: 100%;
min-width: 0;
max-width: 100%;
margin-top: 24px;
box-sizing: border-box;
}
.escrever-m-96087303180c {
width: 109px;
height: 14px;
flex-shrink: 0;
}
.escrever-m-96087303180c .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.escrever-m-96087303180c .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.escrever-m-96087303180c .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.399999976158142;
margin: 0;
text-align: left;
}
.escrever-m-96087303180c .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(250, 250, 250, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 10px;
text-rendering: geometricPrecision;
caret-color: rgba(250, 250, 250, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.group-960a79ab28ed {
position: absolute;
left: 40px;
top: 187px;
width: 178px;
height: 196px;
}
.messsage-960a1c58fff8,
.messsage-9609b70bc8d5,
.messsage-9609aa192b77,
.messsage-96082a7c27ce {
position: relative;
width: auto;
height: auto;
background: #3d4764FF;
border-radius: 20px;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
padding: 10px 20px 10px 20px;
z-index: 0;
flex-direction: row;
flex-wrap: nowrap;
}
.ver-relat-960a1c58fff9,
.ver-relat-9609b70bc8d6,
.visualizar-9609aa192b78,
.consultar-96082a7c27cf {
height: 14px;
flex-shrink: 0;
}
.ver-relat-960a1c58fff9 .root-0,
.ver-relat-9609b70bc8d6 .root-0,
.visualizar-9609aa192b78 .root-0,
.consultar-96082a7c27cf .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.ver-relat-960a1c58fff9 .root-0-paragraph-set-0,
.ver-relat-9609b70bc8d6 .root-0-paragraph-set-0,
.visualizar-9609aa192b78 .root-0-paragraph-set-0,
.consultar-96082a7c27cf .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.ver-relat-960a1c58fff9 .root-0-paragraph-set-0-paragraph-0,
.ver-relat-9609b70bc8d6 .root-0-paragraph-set-0-paragraph-0,
.visualizar-9609aa192b78 .root-0-paragraph-set-0-paragraph-0,
.consultar-96082a7c27cf .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.399999976158142;
margin: 0;
text-align: left;
}
.ver-relat-960a1c58fff9 .root-0-paragraph-set-0-paragraph-0-text-0,
.ver-relat-9609b70bc8d6 .root-0-paragraph-set-0-paragraph-0-text-0,
.visualizar-9609aa192b78 .root-0-paragraph-set-0-paragraph-0-text-0,
.consultar-96082a7c27cf .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(250, 250, 250, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 10px;
text-rendering: geometricPrecision;
caret-color: rgba(250, 250, 250, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.vamos-a-is-960a62b1bab0 {
position: absolute;
left: 48.19px;
top: 441px;
width: 101px;
height: 17px;
}
.vamos-a-is-960a62b1bab0 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.pode-falar-960a50fa2a15 {
position: absolute;
left: 48.19px;
top: 406.83px;
width: 160px;
height: 17px;
}
.pode-falar-960a50fa2a15 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.pode-falar-960a50fa2a15 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.pode-falar-960a50fa2a15 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.2;
margin: 0;
text-align: left;
}
.pode-falar-960a50fa2a15 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(255, 255, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(255, 255, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
}
.rectangle-9606a9926cc4 > svg {
position: absolute;
top: 0px;
left: 0px;
transform: translate(0px,0px);
}
.rectangle-9606a9926cc4 {
position: absolute;
left: 0px;
top: 0px;
width: 535px;
height: 588px;
}
.frame {
width: 100%;
min-width: 0;
margin-bottom: 12px;
}
.shape.text {
width: 100%;
}
</style>
<main class="main">
<div class="content">
<div class="left-side">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 982 239"
fill="none"
class="angular-logo"
>
<g clip-path="url(#a)">
<path
fill="url(#b)"
d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
<path
fill="url(#c)"
d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
<div class="group group-96e07eb27483">
<div class="shape path rectangle-9606a9926cc4">
<svg width="535" xmlns="http://www.w3.org/2000/svg" height="588" id="screenshot-b0f42cb3-61fe-8063-8005-9606a9926cc4" viewBox="2022 755 535 588" style="-webkit-print-color-adjust: exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1">
<g id="shape-b0f42cb3-61fe-8063-8005-9606a9926cc4">
<defs></defs>
<g class="fills" id="fills-b0f42cb3-61fe-8063-8005-9606a9926cc4">
<path d="M2022.000,765.000C2022.000,759.481,2026.481,755.000,2032.000,755.000L2491.936,755.000L2547.000,755.000C2552.519,755.000,2557.000,759.481,2557.000,765.000L2557.000,1333.000C2557.000,1338.519,2552.519,1343.000,2547.000,1343.000L2032.000,1343.000C2026.481,1343.000,2022.000,1338.519,2022.000,1333.000L2022.000,765.000Z" style="fill:#1e1e22;fill-opacity:1"></path>
</g>
</g>
<defs>
<radialGradient
id="c"
cx="0"
cy="0"
r="1"
gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF41F8" />
<stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
<stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
</radialGradient>
<linearGradient
id="b"
x1="0"
x2="982"
y1="192"
y2="192"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F0060B" />
<stop offset="0" stop-color="#F0070C" />
<stop offset=".526" stop-color="#CC26D5" />
<stop offset="1" stop-color="#7702FF" />
</linearGradient>
<clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
</defs>
</svg>
<h1>Hello, {{ title }}</h1>
<p>Congratulations! Your app is running. 🎉</p>
</div>
<div class="divider" role="separator" aria-label="Divider"></div>
<div class="right-side">
<div class="pill-group">
@for (item of [
{ title: 'Explore the Docs', link: 'https://angular.dev' },
{ title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
{ title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
{ title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
{ title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
]; track item.title) {
<a
class="pill"
[href]="item.link"
target="_blank"
rel="noopener"
>
<span>{{ item.title }}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
height="14"
viewBox="0 -960 960 960"
width="14"
fill="currentColor"
>
<path
d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
<div class="chatbot-footer">
<input
class="chatbot-input"
type="text"
placeholder="Digite sua mensagem..."
(keyup.enter)="enviarMensagem()"
/>
<button class="chatbot-send" (click)="enviarMensagem()">
<svg width="20" height="20" fill="#fff" viewBox="0 0 24 24">
<path d="M2 21l21-9-21-9v7l15 2-15 2z"/>
</svg>
</a>
}
</button>
</div>
<div class="social-links">
<a
href="https://github.com/angular/angular"
aria-label="Github"
target="_blank"
rel="noopener"
>
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
alt="Github"
>
<path
d="M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z"
/>
</svg>
</a>
<a
href="https://twitter.com/angular"
aria-label="Twitter"
target="_blank"
rel="noopener"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
alt="Twitter"
>
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
/>
</svg>
</a>
<a
href="https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw"
aria-label="Youtube"
target="_blank"
rel="noopener"
>
<svg
width="29"
height="20"
viewBox="0 0 29 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
alt="Youtube"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
/>
</svg>
</a>
</div>
<div class="shape text pode-falar-960a50fa2a15">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-960a50fa2a15" data-x="2070.193747453611" data-y="1161.8282269185227">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(255, 255, 255, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:14px;text-rendering:geometricPrecision;caret-color:rgba(255, 255, 255, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#ffffff&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Pode falar ou escrever.</span>
</p>
</div>
</div>
</div>
</main>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<router-outlet />
</div>
<div class="shape text vamos-a-is-960a62b1bab0">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-960a62b1bab0" data-x="2070.193747453611" data-y="1196">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(255, 255, 255, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:14px;text-rendering:geometricPrecision;caret-color:rgba(255, 255, 255, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#ffffff&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Vamos a isso?</span>
</p>
</div>
</div>
</div>
</div>
<div class="group group-960a79ab28ed">
<div class="frame messsage-96082a7c27ce">
<div class="shape text consultar-96082a7c27cf">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-96082a7c27cf" data-x="2082" data-y="952">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(250, 250, 250, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:10px;text-rendering:geometricPrecision;caret-color:rgba(250, 250, 250, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#fafafa&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Consultar faturas</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="frame messsage-9609aa192b77">
<div class="shape text visualizar-9609aa192b78">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-9609aa192b78" data-x="2082" data-y="1006">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(250, 250, 250, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:10px;text-rendering:geometricPrecision;caret-color:rgba(250, 250, 250, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#fafafa&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Visualizar Dashboards</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="frame messsage-9609b70bc8d5">
<div class="shape text ver-relat-9609b70bc8d6">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-9609b70bc8d6" data-x="2082" data-y="1060">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(250, 250, 250, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:10px;text-rendering:geometricPrecision;caret-color:rgba(250, 250, 250, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#fafafa&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Ver relatórios de faturação</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="frame messsage-960a1c58fff8">
<div class="shape text ver-relat-960a1c58fff9">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-960a1c58fff9" data-x="2082" data-y="1114">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(250, 250, 250, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:10px;text-rendering:geometricPrecision;caret-color:rgba(250, 250, 250, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#fafafa&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Ver relatórios de consumos</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="shape text ol-ricar-9606a9922bc3">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-9606a9922bc3" data-x="2062" data-y="860">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(255, 255, 255, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:14px;text-rendering:geometricPrecision;caret-color:rgba(255, 255, 255, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#ffffff&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Olá, Ricardo</span>
</p>
</div>
</div>
</div>
</div>
<div class="shape text como-posso-96076e6f2b0e">
<div class="text-node-html" id="html-text-node-b0f42cb3-61fe-8063-8005-96076e6f2b0e" data-x="2062" data-y="899">
<div class="root rich-text root-0" style="display:flex;white-space:break-spaces;align-items:flex-start" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr">
<span class="text-node root-0-paragraph-set-0-paragraph-0-text-0" style="color:rgba(255, 255, 255, 1);text-transform:none;line-break:auto;overflow-wrap:initial;white-space:pre;font-size:14px;text-rendering:geometricPrecision;caret-color:rgba(255, 255, 255, 1);text-decoration:none;--font-id:gfont-poppins;--fills:[[&quot;^ &quot;,&quot;~:fill-color&quot;,&quot;#ffffff&quot;,&quot;~:fill-opacity&quot;,1]];letter-spacing:0px;font-family:&quot;Poppins&quot;;font-style:normal;font-weight:400">Como posso ajudar?</span>
</p>
</div>
</div>
</div>
</div>
<div class="shape group fluent-add-9606a9926cc1">
<svg width="39.598" xmlns="http://www.w3.org/2000/svg" height="39.598" id="screenshot-b0f42cb3-61fe-8063-8005-9606a9926cc1" viewBox="2037 766 39.598 39.598" style="-webkit-print-color-adjust: exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1">
<g id="shape-b0f42cb3-61fe-8063-8005-9606a9926cc1" style="fill:#000000" width="28" height="28" rx="0" ry="0">
<defs></defs>
<g id="shape-b0f42cb3-61fe-8063-8005-9606a9926cc2" style="display:none">
<defs></defs>
<g class="fills" id="fills-b0f42cb3-61fe-8063-8005-9606a9926cc2">
<rect rx="0" ry="0" x="2042.798989873223" y="771.7989898732234" transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 1158.066271, -1224.221318)" width="28" height="27.999999999999773" fill="none" style="fill:none"></rect>
</g>
</g>
<g id="shape-b0f42cb3-61fe-8063-8005-9606a9926cc3">
<defs></defs>
<g class="fills" id="fills-b0f42cb3-61fe-8063-8005-9606a9926cc3">
<path d="M2064.577,792.163L2058.213,785.799L2064.577,779.435C2064.968,779.045,2064.968,778.411,2064.577,778.021C2064.187,777.630,2063.553,777.630,2063.163,778.021L2056.799,784.385L2050.435,778.021C2050.045,777.630,2049.411,777.630,2049.021,778.021C2048.630,778.411,2048.630,779.045,2049.021,779.435L2055.385,785.799L2049.021,792.163C2048.630,792.553,2048.630,793.187,2049.021,793.577C2049.411,793.968,2050.045,793.968,2050.435,793.577L2056.799,787.213L2063.163,793.577C2063.553,793.968,2064.187,793.968,2064.577,793.577C2064.968,793.187,2064.968,792.553,2064.577,792.163Z" style="fill:#e5e5e5;fill-opacity:1"></path>
</g>
</g>
</g>
</svg>
</div>
</div>

20
ChatBot-Frontend/src/app/app.component.ts
View File

@ -1,13 +1,23 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ChatService } from './chat.service';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
imports: [CommonModule, FormsModule],
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'ChatBot';
userMessage = '';
resposta: string | null = null;
constructor(private chatService: ChatService) {}
enviarMensagem() {
this.chatService.sendMessage(this.userMessage).subscribe((res: any) => {
this.resposta = res?.reply || 'Sem resposta do servidor';
});
}
}

13
ChatBot-Frontend/src/app/app.config.ts
View File

@ -1,9 +1,14 @@
import { ApplicationConfig } from '@angular/core';
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideClientHydration()]
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(),
provideHttpClient()
]
};

21
ChatBot-Frontend/src/app/app.module.ts Normal file
View File

@ -0,0 +1,21 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot([])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

14
ChatBot-Frontend/src/app/chat.service.ts Normal file
View File

@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ChatService {
constructor(private http: HttpClient) {}
sendMessage(message: string): Observable<any> {
return this.http.post('/api/chat', { message });
}
}

3
ChatBot-Frontend/src/index.html
View File

@ -2,12 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>ChatBot</title>
<title>ChatBotFrontend</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

1
ChatBot-Frontend/src/styles.css
View File

@ -1 +0,0 @@
/* You can add global styles to this file, and also import other style files */