body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
}
.black-theme {
background-color: #121212;
}
.white-theme {
background-color: #f8f8f8;
color: #000;
}
.container {
width: 100%;
padding: 40px;
box-sizing: border-box;
text-align: center;
}
h2 {
margin-top: 0;
margin-bottom: 30px;
font-size: 28px;
color: #61dafb;
}
input[type="text"] {
width: calc(100% - 10px);
padding: 15px;
border: none;
border-radius: 6px;
margin-bottom: 20px;
font-size: 16px;
background-color: #303030;
color: #fff;
outline: none;
}
input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.7);
}
button {
padding: 15px 40px;
background-color: #61dafb;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #4ba3c7;
}
.result-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.result-block {
width: calc(50% - 20px);
background-color: #212121;
border-radius: 8px;
padding: 20px;
margin: 10px;
box-sizing: border-box;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.result-block label {
font-weight: bold;
font-size: 16px;
color: #61dafb;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
.result-block p {
margin: 0;
font-size: 14px;
color: #fff;
}
.theme-button {
background-color: #61dafb;
color: #fff;
border: none;
width: 10px;
height: 10px;
cursor: pointer;
position: fixed;
bottom: 20px;
left: 20px;
transition: background-color 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
async function fetchData() {
const inputValue = document.getElementById('inputField').value;
const apiUrl = `http://207.244.236.148:1717/consulta?inputValue=${inputValue}`;
try {
const response = await fetch(apiUrl);
const data = await response.json();
console.log(data);
displayData(data);
} catch (error) {
console.error('Erro ao buscar dados:', error);
}
}
function displayData(data) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
for (const key in data) {
if (data.hasOwnProperty(key)) {
const value = data[key];
const resultBlock = document.createElement('div');
resultBlock.classList.add('result-block');
const label = document.createElement('label');
label.textContent = key.toUpperCase();
const paragraph = document.createElement('p');
if (Array.isArray(value)) {
if (key.toLowerCase() === 'telefones') {
paragraph.textContent = value.map(item => item.numero).join(', ') || 'N/A';
} else if (key.toLowerCase() === 'emails') {
paragraph.textContent = value.map(item => item.email).join(', ') || 'N/A';
} else {
paragraph.textContent = value.join(', ') || 'N/A';
}
} else {
paragraph.textContent = value || 'N/A';
}
resultBlock.appendChild(label);
resultBlock.appendChild(paragraph);
resultDiv.appendChild(resultBlock);
}
}
}
function toggleTheme() {
const body = document.body;
body.classList.toggle('black-theme');
body.classList.toggle('white-theme');
}