${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | /*
59 | * =========================================
60 | * Funcion para cambiar de formulario activo
61 | * =========================================
62 | */
63 |
64 | const displayForm = () => {
65 | document.querySelector('form').classList.add('hide');
66 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
67 | document.querySelector(".next").classList.add('hide');
68 | document.querySelector('.transaction-response').classList.add('hide');
69 | document.querySelector('.json-container').classList.add('hide');
70 | document.querySelector("button").classList.remove("hide");
71 | };
72 |
73 | /*
74 | * ==============================================
75 | * Funcion para mostrar nuevamente el formmulario
76 | * ==============================================
77 | */
78 |
79 | function displayBack() {
80 | document.querySelector(".json-container").classList.add("hide");
81 | document.querySelector(".loader").classList.add("hide");
82 | document.querySelector(".transaction-response").classList.add("hide");
83 | document.querySelector('form').classList.remove('hide');
84 | document.querySelector("button").classList.remove("hide");
85 | }
86 |
87 | function displayResponse(rq, rs) {
88 | document.querySelector(".transaction-response").classList.remove("hide");
89 | document.querySelector("form").classList.add("hide");
90 | document.querySelector("button").classList.add("hide");
91 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
92 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
93 | document.querySelector(".transaction-response h2").classList.add('error');
94 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
95 | }
96 | else {
97 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
98 | document.querySelector(".transaction-response h2").classList.remove('error')
99 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
100 | }
101 | displayJsonInfo(rq, rs);
102 | }
103 |
104 | export { displayBack, displayJsonInfo, displayResponse, displayForm };
--------------------------------------------------------------------------------
/tdc/public/js/interface.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ======================================
3 | * Funcion para mostrar el response y request
4 | * ======================================
5 | */
6 |
7 | function renderSpaces(amount) {
8 | let string = '';
9 | for(let i = 0; i < amount; i++) {
10 | string += ' ';
11 | }
12 | return string;
13 | }
14 |
15 | function renderObject(object, spaces, element) {
16 | element.innerHTML += `{\n`;
17 | Object.keys(object).forEach( (key, index) => {
18 | element.innerHTML += `${renderSpaces(spaces)}${key}: `;
19 | if(typeof object[key] == "object") {
20 | spaces += 2
21 | renderObject(object[key], spaces, element)
22 | spaces -= 2
23 | element.innerHTML += `${renderSpaces(spaces)}}`;
24 | } else {
25 | element.innerHTML += `${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | /*
59 | * =========================================
60 | * Funcion para cambiar de formulario activo
61 | * =========================================
62 | */
63 |
64 | const displayForm = () => {
65 | document.querySelector('form').classList.add('hide');
66 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
67 | document.querySelector(".next").classList.add('hide');
68 | document.querySelector('.transaction-response').classList.add('hide');
69 | document.querySelector('.json-container').classList.add('hide');
70 | document.querySelector("button").classList.remove("hide");
71 | };
72 |
73 | /*
74 | * ==============================================
75 | * Funcion para mostrar nuevamente el formmulario
76 | * ==============================================
77 | */
78 |
79 | function displayBack() {
80 | document.querySelector(".json-container").classList.add("hide");
81 | document.querySelector(".loader").classList.add("hide");
82 | document.querySelector(".transaction-response").classList.add("hide");
83 | document.querySelector('form').classList.remove('hide');
84 | document.querySelector("button").classList.remove("hide");
85 | }
86 |
87 | function displayResponse(rq, rs) {
88 | document.querySelector(".transaction-response").classList.remove("hide");
89 | document.querySelector("form").classList.add("hide");
90 | document.querySelector("button").classList.add("hide");
91 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
92 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
93 | document.querySelector(".transaction-response h2").classList.add('error');
94 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
95 | }
96 | else {
97 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
98 | document.querySelector(".transaction-response h2").classList.remove('error')
99 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
100 | }
101 | displayJsonInfo(rq, rs);
102 | }
103 |
104 | export { displayBack, displayJsonInfo, displayResponse, displayForm };
--------------------------------------------------------------------------------
/tdd/public/js/interface.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ======================================
3 | * Funcion para mostrar el response y request
4 | * ======================================
5 | */
6 |
7 | function renderSpaces(amount) {
8 | let string = '';
9 | for(let i = 0; i < amount; i++) {
10 | string += ' ';
11 | }
12 | return string;
13 | }
14 |
15 | function renderObject(object, spaces, element) {
16 | element.innerHTML += `{\n`;
17 | Object.keys(object).forEach( (key, index) => {
18 | element.innerHTML += `${renderSpaces(spaces)}${key}: `;
19 | if(typeof object[key] == "object") {
20 | spaces += 2
21 | renderObject(object[key], spaces, element)
22 | spaces -= 2
23 | element.innerHTML += `${renderSpaces(spaces)}}`;
24 | } else {
25 | element.innerHTML += `${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | /*
59 | * =========================================
60 | * Funcion para cambiar de formulario activo
61 | * =========================================
62 | */
63 |
64 | const displayForm = () => {
65 | document.querySelector('form').classList.add('hide');
66 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
67 | document.querySelector(".next").classList.add('hide');
68 | document.querySelector('.transaction-response').classList.add('hide');
69 | document.querySelector('.json-container').classList.add('hide');
70 | document.querySelector("button").classList.remove("hide");
71 | };
72 |
73 | /*
74 | * ==============================================
75 | * Funcion para mostrar nuevamente el formmulario
76 | * ==============================================
77 | */
78 |
79 | function displayBack() {
80 | document.querySelector(".json-container").classList.add("hide");
81 | document.querySelector(".loader").classList.add("hide");
82 | document.querySelector(".transaction-response").classList.add("hide");
83 | document.querySelector('form').classList.remove('hide');
84 | document.querySelector("button").classList.remove("hide");
85 | }
86 |
87 | function displayResponse(rq, rs) {
88 | document.querySelector(".transaction-response").classList.remove("hide");
89 | document.querySelector("form").classList.add("hide");
90 | document.querySelector("button").classList.add("hide");
91 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
92 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
93 | document.querySelector(".transaction-response h2").classList.add('error');
94 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
95 | }
96 | else {
97 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
98 | document.querySelector(".transaction-response h2").classList.remove('error')
99 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
100 | }
101 | displayJsonInfo(rq, rs);
102 | }
103 |
104 | export { displayBack, displayJsonInfo, displayResponse, displayForm };
--------------------------------------------------------------------------------
/getauth/public/js/interface.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ======================================
3 | * Funcion para mostrar el response y request
4 | * ======================================
5 | */
6 |
7 | function renderSpaces(amount) {
8 | let string = '';
9 | for(let i = 0; i < amount; i++) {
10 | string += ' ';
11 | }
12 | return string;
13 | }
14 |
15 | function renderObject(object, spaces, element) {
16 | element.innerHTML += `{\n`;
17 | Object.keys(object).forEach( (key, index) => {
18 | element.innerHTML += `${renderSpaces(spaces)}${key}: `;
19 | if(typeof object[key] == "object") {
20 | spaces += 2
21 | renderObject(object[key], spaces, element)
22 | spaces -= 2
23 | element.innerHTML += `${renderSpaces(spaces)}}`;
24 | } else {
25 | element.innerHTML += `${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | /*
59 | * =========================================
60 | * Funcion para cambiar de formulario activo
61 | * =========================================
62 | */
63 |
64 | const displayForm = () => {
65 | document.querySelector('form').classList.add('hide');
66 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
67 | document.querySelector(".next").classList.add('hide');
68 | document.querySelector('.transaction-response').classList.add('hide');
69 | document.querySelector('.json-container').classList.add('hide');
70 | document.querySelector("button").classList.remove("hide");
71 | };
72 |
73 | /*
74 | * ==============================================
75 | * Funcion para mostrar nuevamente el formmulario
76 | * ==============================================
77 | */
78 |
79 | function displayBack() {
80 | document.querySelector(".json-container").classList.add("hide");
81 | document.querySelector(".loader").classList.add("hide");
82 | document.querySelector(".transaction-response").classList.add("hide");
83 | document.querySelector('form').classList.remove('hide');
84 | document.querySelector("button").classList.remove("hide");
85 | }
86 |
87 | function displayResponse(rq, rs) {
88 | document.querySelector(".transaction-response").classList.remove("hide");
89 | document.querySelector("form").classList.add("hide");
90 | document.querySelector("button").classList.add("hide");
91 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
92 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
93 | document.querySelector(".transaction-response h2").classList.add('error');
94 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
95 | }
96 | else {
97 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
98 | document.querySelector(".transaction-response h2").classList.remove('error')
99 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
100 | }
101 | displayJsonInfo(rq, rs);
102 | }
103 |
104 | export { displayBack, displayJsonInfo, displayResponse, displayForm };
--------------------------------------------------------------------------------
/td-search/public/js/interface.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ======================================
3 | * Funcion para mostrar el response y request
4 | * ======================================
5 | */
6 |
7 | function renderSpaces(amount) {
8 | let string = '';
9 | for(let i = 0; i < amount; i++) {
10 | string += ' ';
11 | }
12 | return string;
13 | }
14 |
15 | function renderObject(object, spaces, element) {
16 | element.innerHTML += `{\n`;
17 | Object.keys(object).forEach( (key, index) => {
18 | element.innerHTML += `${renderSpaces(spaces)}${key}: `;
19 | if(typeof object[key] == "object") {
20 | spaces += 2
21 | renderObject(object[key], spaces, element)
22 | spaces -= 2
23 | element.innerHTML += `${renderSpaces(spaces)}}`;
24 | } else {
25 | element.innerHTML += `${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | /*
59 | * =========================================
60 | * Funcion para cambiar de formulario activo
61 | * =========================================
62 | */
63 |
64 | const displayForm = () => {
65 | document.querySelector('form').classList.add('hide');
66 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
67 | document.querySelector(".next").classList.add('hide');
68 | document.querySelector('.transaction-response').classList.add('hide');
69 | document.querySelector('.json-container').classList.add('hide');
70 | document.querySelector("button").classList.remove("hide");
71 | };
72 |
73 | /*
74 | * ==============================================
75 | * Funcion para mostrar nuevamente el formmulario
76 | * ==============================================
77 | */
78 |
79 | function displayBack() {
80 | document.querySelector(".json-container").classList.add("hide");
81 | document.querySelector(".loader").classList.add("hide");
82 | document.querySelector(".transaction-response").classList.add("hide");
83 | document.querySelector('form').classList.remove('hide');
84 | document.querySelector("button").classList.remove("hide");
85 | }
86 |
87 | function displayResponse(rq, rs) {
88 | document.querySelector(".transaction-response").classList.remove("hide");
89 | document.querySelector("form").classList.add("hide");
90 | document.querySelector("button").classList.add("hide");
91 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
92 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
93 | document.querySelector(".transaction-response h2").classList.add('error');
94 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
95 | }
96 | else {
97 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
98 | document.querySelector(".transaction-response h2").classList.remove('error')
99 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
100 | }
101 | displayJsonInfo(rq, rs);
102 | }
103 |
104 | export { displayBack, displayJsonInfo, displayResponse, displayForm };
--------------------------------------------------------------------------------
/transfer-search/public/js/interface.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ======================================
3 | * Funcion para mostrar el response y request
4 | * ======================================
5 | */
6 |
7 | function renderSpaces(amount) {
8 | let string = '';
9 | for(let i = 0; i < amount; i++) {
10 | string += ' ';
11 | }
12 | return string;
13 | }
14 |
15 | function renderObject(object, spaces, element) {
16 | element.innerHTML += `{\n`;
17 | Object.keys(object).forEach( (key, index) => {
18 | element.innerHTML += `${renderSpaces(spaces)}${key}: `;
19 | if(typeof object[key] == "object") {
20 | spaces += 2
21 | renderObject(object[key], spaces, element)
22 | spaces -= 2
23 | element.innerHTML += `${renderSpaces(spaces)}}`;
24 | } else {
25 | element.innerHTML += `${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | /*
59 | * =========================================
60 | * Funcion para cambiar de formulario activo
61 | * =========================================
62 | */
63 |
64 | const displayForm = () => {
65 | document.querySelector('form').classList.add('hide');
66 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
67 | document.querySelector(".next").classList.add('hide');
68 | document.querySelector('.transaction-response').classList.add('hide');
69 | document.querySelector('.json-container').classList.add('hide');
70 | document.querySelector("button").classList.remove("hide");
71 | };
72 |
73 | /*
74 | * ==============================================
75 | * Funcion para mostrar nuevamente el formmulario
76 | * ==============================================
77 | */
78 |
79 | function displayBack() {
80 | document.querySelector(".json-container").classList.add("hide");
81 | document.querySelector(".loader").classList.add("hide");
82 | document.querySelector(".transaction-response").classList.add("hide");
83 | document.querySelector('form').classList.remove('hide');
84 | document.querySelector("button").classList.remove("hide");
85 | }
86 |
87 | function displayResponse(rq, rs) {
88 | document.querySelector(".transaction-response").classList.remove("hide");
89 | document.querySelector("form").classList.add("hide");
90 | document.querySelector("button").classList.add("hide");
91 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
92 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
93 | document.querySelector(".transaction-response h2").classList.add('error');
94 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
95 | }
96 | else {
97 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
98 | document.querySelector(".transaction-response h2").classList.remove('error')
99 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
100 | }
101 | displayJsonInfo(rq, rs);
102 | }
103 |
104 | export { displayBack, displayJsonInfo, displayResponse, displayForm };
--------------------------------------------------------------------------------
/c2p/public/js/interface.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ======================================
3 | * Funcion para mostrar el response y request
4 | * ======================================
5 | */
6 |
7 | function renderSpaces(amount) {
8 | let string = '';
9 | for(let i = 0; i < amount; i++) {
10 | string += ' ';
11 | }
12 | return string;
13 | }
14 |
15 | function renderObject(object, spaces, element) {
16 | element.innerHTML += `{\n`;
17 | Object.keys(object).forEach( (key, index) => {
18 | element.innerHTML += `${renderSpaces(spaces)}${key}: `;
19 | if(typeof object[key] == "object") {
20 | spaces += 2
21 | renderObject(object[key], spaces, element)
22 | spaces -= 2
23 | element.innerHTML += `${renderSpaces(spaces)}}`;
24 | } else {
25 | element.innerHTML += `${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | function formDisplayHandler(e) {
59 | if(e.target.value == "anulacion") {
60 | document.querySelector(".payment-reference").classList.remove("hide");
61 | document.querySelector(".twofactor").classList.add("hide");
62 | }
63 | else if(e.target.value == "compra") {
64 | document.querySelector(".twofactor").classList.remove("hide");
65 | document.querySelector(".payment-reference").classList.add("hide");
66 | }
67 | else {
68 | document.querySelector(".payment-reference").classList.add("hide");
69 | document.querySelector(".twofactor").classList.add("hide");
70 | }
71 | }
72 |
73 | /*
74 | * =========================================
75 | * Funcion para cambiar de formulario activo
76 | * =========================================
77 | */
78 |
79 | const displayForm = () => {
80 | document.querySelector('form').classList.add('hide');
81 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
82 | document.querySelector(".next").classList.add('hide');
83 | document.querySelector('.transaction-response').classList.add('hide');
84 | document.querySelector('.json-container').classList.add('hide');
85 | document.querySelector("button").classList.remove("hide");
86 | };
87 |
88 | /*
89 | * ==============================================
90 | * Funcion para mostrar nuevamente el formmulario
91 | * ==============================================
92 | */
93 |
94 | function displayBack() {
95 | document.querySelector(".json-container").classList.add("hide");
96 | document.querySelector(".loader").classList.add("hide");
97 | document.querySelector(".transaction-response").classList.add("hide");
98 | document.querySelector('form').classList.remove('hide');
99 | document.querySelector("button").classList.remove("hide");
100 | }
101 |
102 | function displayResponse(rq, rs) {
103 | document.querySelector(".transaction-response").classList.remove("hide");
104 | document.querySelector("form").classList.add("hide");
105 | document.querySelector("button").classList.add("hide");
106 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
107 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
108 | document.querySelector(".transaction-response h2").classList.add('error');
109 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
110 | }
111 | else {
112 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
113 | document.querySelector(".transaction-response h2").classList.remove('error')
114 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
115 | }
116 | displayJsonInfo(rq, rs);
117 | }
118 |
119 | export { displayBack, displayJsonInfo, displayResponse, displayForm, formDisplayHandler };
--------------------------------------------------------------------------------
/search-c2p/public/js/interface.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ======================================
3 | * Funcion para mostrar el response y request
4 | * ======================================
5 | */
6 |
7 | function renderSpaces(amount) {
8 | let string = '';
9 | for(let i = 0; i < amount; i++) {
10 | string += ' ';
11 | }
12 | return string;
13 | }
14 |
15 | function renderObject(object, spaces, element) {
16 | element.innerHTML += `{\n`;
17 | Object.keys(object).forEach( (key, index) => {
18 | element.innerHTML += `${renderSpaces(spaces)}${key}: `;
19 | if(typeof object[key] == "object") {
20 | spaces += 2
21 | renderObject(object[key], spaces, element)
22 | spaces -= 2
23 | element.innerHTML += `${renderSpaces(spaces)}}`;
24 | } else {
25 | element.innerHTML += `${typeof object[key] == "string" ? `"${object[key]}"` : object[key]} index) element.innerHTML += `,`;
28 | element.innerHTML += `\n`;
29 | });
30 | }
31 |
32 | /*
33 | * ============================================
34 | * Funcion para mostrar la información del JSON
35 | * ============================================
36 | */
37 |
38 | function displayJsonInfo(rq, rs) {
39 |
40 | document.querySelector('.response div').innerHTML = ``;
41 | document.querySelector('.request div').innerHTML = ``;
42 | document.querySelector(".json-container").classList.remove("hide");
43 |
44 |
45 | document.querySelector(".request div").innerHTML += ``;
46 | const rqElem = document.querySelector(".request div pre");
47 | renderObject(rq, 2, rqElem);
48 | document.querySelector('.request div pre').innerHTML += `}`;
49 |
50 |
51 |
52 | document.querySelector('.response div').innerHTML += ``;
53 | const rsElem = document.querySelector(".response div pre");
54 | renderObject(rs, 2, rsElem);
55 | document.querySelector('.response div pre').innerHTML += `}`;
56 | }
57 |
58 | function formDisplayHandler(e) {
59 | if(e.target.value == "anulacion") {
60 | document.querySelector(".payment-reference").classList.remove("hide");
61 | document.querySelector(".twofactor").classList.add("hide");
62 | }
63 | else if(e.target.value == "compra") {
64 | document.querySelector(".twofactor").classList.remove("hide");
65 | document.querySelector(".payment-reference").classList.add("hide");
66 | }
67 | else {
68 | document.querySelector(".payment-reference").classList.add("hide");
69 | document.querySelector(".twofactor").classList.add("hide");
70 | }
71 | }
72 |
73 | /*
74 | * =========================================
75 | * Funcion para cambiar de formulario activo
76 | * =========================================
77 | */
78 |
79 | const displayForm = () => {
80 | document.querySelector('form').classList.add('hide');
81 | document.querySelector('.payment-title').innerText = 'Crear agendamiento';
82 | document.querySelector(".next").classList.add('hide');
83 | document.querySelector('.transaction-response').classList.add('hide');
84 | document.querySelector('.json-container').classList.add('hide');
85 | document.querySelector("button").classList.remove("hide");
86 | };
87 |
88 | /*
89 | * ==============================================
90 | * Funcion para mostrar nuevamente el formmulario
91 | * ==============================================
92 | */
93 |
94 | function displayBack() {
95 | document.querySelector(".json-container").classList.add("hide");
96 | document.querySelector(".loader").classList.add("hide");
97 | document.querySelector(".transaction-response").classList.add("hide");
98 | document.querySelector('form').classList.remove('hide');
99 | document.querySelector("button").classList.remove("hide");
100 | }
101 |
102 | function displayResponse(rq, rs) {
103 | document.querySelector(".transaction-response").classList.remove("hide");
104 | document.querySelector("form").classList.add("hide");
105 | document.querySelector("button").classList.add("hide");
106 | if(rs.hasOwnProperty("errorList") || rs.hasOwnProperty("error_list") || rs.hasOwnProperty("code") || rs.hasOwnProperty("httpCode") || rs.hasOwnProperty("http_code")) {
107 | document.querySelector(".transaction-response h2").innerText = "Error al procesar la solicitud";
108 | document.querySelector(".transaction-response h2").classList.add('error');
109 | document.querySelector(".transaction-response p").innerText = "Se ha generado un error al procesar la solicitud";
110 | }
111 | else {
112 | document.querySelector(".transaction-response h2").innerText = "Solicitud procesada exitosamente";
113 | document.querySelector(".transaction-response h2").classList.remove('error')
114 | document.querySelector(".transaction-response p").innerText = "Su solicitud se ha procesado exitosamente";
115 | }
116 | displayJsonInfo(rq, rs);
117 | }
118 |
119 | export { displayBack, displayJsonInfo, displayResponse, displayForm, formDisplayHandler };
--------------------------------------------------------------------------------
/tdc/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | select {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
/getauth/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | select {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
/tdd/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | #customerid-prefix {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
/td-search/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | #customerid-prefix {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
/transfer-search/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | #customerid-prefix {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
/c2p/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | #customerid-prefix, #customer-phone-number-prefix {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
/scp/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | #customerid-prefix, #customer-phone-number-prefix {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
/search-c2p/public/styles/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --azul-mercantil: #004E9B;
3 | --azul-claro: #009FDA;
4 | --naranja: #FF5800;
5 | --texto-primario: #666666;
6 | --error: #FF3333;
7 | }
8 |
9 | body,
10 | html {
11 | margin: 0;
12 | padding: 0;
13 | font-family: Arial, Helvetica, sans-serif;
14 | }
15 |
16 | .nav-bar {
17 | width: 100%;
18 | height: 60px;
19 | gap: 0px;
20 | opacity: 0px;
21 | background: linear-gradient(90deg, var(--azul-mercantil) 0.96%, var(--azul-claro) 14.75%, var(--azul-mercantil) 37.06%);
22 | display: flex;
23 | align-items: center;
24 |
25 | .nav-logo {
26 | height: 80px;
27 | margin-left: 10%;
28 | }
29 | }
30 |
31 | .main-container {
32 | width: 700px;
33 | margin: 0 auto;
34 | padding: 12px;
35 | display: flex;
36 | flex-direction: column;
37 | align-items: center;
38 | gap: 12px;
39 | }
40 |
41 | h3 {
42 | text-align: center;
43 | color: var(--azul-claro);
44 | width: 100%;
45 | }
46 |
47 | form {
48 | box-shadow: 0px 4px 4px 0px #DDDCD8;
49 | padding: 12px 0;
50 | border: 1px solid #DFDFDF;
51 | display: flex;
52 | flex-direction: column;
53 | border-radius: 8px;
54 | width: 70%;
55 | }
56 |
57 | .transaction-response {
58 | box-shadow: 0px 4px 4px 0px #DDDCD8;
59 | border: 1px solid #DFDFDF;
60 | display: flex;
61 | flex-direction: column;
62 | align-items: center;
63 | border-radius: 8px;
64 | max-width: 700px;
65 | padding: 12px;
66 | h2 {
67 | color: var(--naranja);
68 | padding: 0;
69 | margin: 0;
70 | }
71 | p {
72 | margin: 0;
73 | margin-top: 12px;
74 | padding: 0;
75 | color: var(--azul-claro);
76 | font-weight: bold;
77 | }
78 | a {
79 | text-decoration: underline;
80 | color: var(--azul-claro);
81 | margin-top: 12px;
82 | cursor: pointer;
83 | }
84 | }
85 |
86 | fieldset {
87 | border: none;
88 |
89 | label {
90 | display: inline-block;
91 | color: var(--azul-mercantil);
92 | font-weight: bold;
93 | }
94 |
95 | input, select {
96 | display: block;
97 | border: 2px solid transparent;
98 | border-bottom-color: var(--azul-mercantil);
99 | outline: none;
100 | transition: .2s ease all;
101 | font-size: 16px;
102 | color: var(--texto-primario);
103 | padding-bottom: 4px;
104 | margin-top: 12px;
105 | width: 100%;
106 |
107 | &:focus {
108 | border-bottom-color: var(--azul-claro);
109 | }
110 | }
111 |
112 | #customerid-prefix, #customer-phone-number-prefix {
113 | width: 20%;
114 | margin-right: 12px;
115 | }
116 |
117 | div {
118 | display: flex;
119 | }
120 | }
121 |
122 | button {
123 | background-image: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%),
124 | linear-gradient(180deg, var(--azul-claro) 0%, var(--azul-mercantil) 100%);
125 | padding: 8px 32px;
126 | border-radius: 32px;
127 | border: 2px solid transparent;
128 | color: #Fff;
129 | font-size: 18px;
130 | box-sizing: border-box;
131 | background-origin: border-box;
132 | background-clip: padding-box, border-box;
133 | cursor: pointer;
134 | }
135 |
136 | .json-container {
137 | max-width: 1200px;
138 | margin: 12px auto;
139 | display: flex;
140 | justify-content: center;
141 | gap: 24px;
142 | flex-wrap: wrap;
143 | padding: 24px;
144 | }
145 |
146 | .json-container div {
147 | display: flex;
148 | flex-direction: column;
149 | align-items: flex-start;
150 | width: 400px;
151 | }
152 |
153 | .json-container div div {
154 | background-color: #212121;
155 | color: rgb(255, 255, 255);
156 | padding: 4px;
157 | border-radius: 8px;
158 | overflow: scroll;
159 | }
160 |
161 | .json-container div div::-webkit-scrollbar {
162 | -webkit-appearance: none;
163 | }
164 |
165 | .json-container div div::-webkit-scrollbar-thumb {
166 | background-color: #585858;
167 | border-radius: 8px;
168 | }
169 |
170 | .json-container div div::-webkit-scrollbar {
171 | height: 10px;
172 | }
173 |
174 | .json-container div div::-webkit-scrollbar-corner {
175 | background-color: transparent;
176 | }
177 |
178 | .json-container h3 {
179 | display: inline-block;
180 | padding: 4px 8px;
181 | border-radius: 4px;
182 | color: var(--azul-claro);
183 | }
184 |
185 | .hide {
186 | display: none;
187 | }
188 |
189 | .key {
190 | color: #9cdcfe;
191 | }
192 |
193 | .value {
194 | color: #c3835c;
195 | }
196 |
197 | .number {
198 | color: #b5cea8;
199 | }
200 |
201 | .error {
202 | color: var(--error);
203 | }
204 |
205 | .loader {
206 | border: 8px solid #fff;
207 | /* Light grey */
208 | border-top: 8px solid var(--azul-claro);
209 | /* Blue */
210 | border-radius: 50%;
211 | width: 120px;
212 | height: 120px;
213 | animation: spin 1s linear infinite;
214 | margin: 12px auto;
215 | }
216 |
217 | @keyframes spin {
218 | 0% {
219 | transform: rotate(0deg);
220 | }
221 |
222 | 100% {
223 | transform: rotate(360deg);
224 | }
225 | }
--------------------------------------------------------------------------------
14 |