EdocBr | Solicitação de e-Doc Tipo: CDI – Certificado de Dispensa de Incorporação
:root {
–primary-color: #027d6c;
–secondary-color: #10b981;
–light-color: #ecfdf5;
–dark-color: #064e3b;
–text-color: #1f2937;
–accent-color: #34d399;
}
* {
box-sizing: border-box;
}
body {
font-family: ‘Inter’, sans-serif;
background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
color: var(–text-color);
line-height: 1.6;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-wrapper {
flex: 1;
max-width: 1280px;
margin: 0 auto;
width: 100%;
padding: 0 0.5rem;
}
.header {
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: white;
padding: 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.logo-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo {
width: 32px;
height: 32px;
object-fit: contain;
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.1);
}
.brand-name {
font-weight: 800;
font-size: 1.1rem;
letter-spacing: -0.025em;
}
.mobile-menu-btn {
background: none;
border: none;
color: white;
font-size: 1.25rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.mobile-menu-btn:hover {
transform: rotate(90deg);
}
.nav-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(–primary-color), var(–dark-color));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(-100%);
transition: transform 0.3s ease;
z-index: 99;
padding: 0.75rem;
}
.nav-menu.active {
transform: translateY(0);
}
.nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
text-align: center;
}
.nav-menu ul li a {
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
padding: 0.5rem;
display: block;
transition: all 0.3s ease;
}
.nav-menu ul li a:hover {
color: var(–light-color);
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
}
.main-content {
padding: 1.5rem 0.25rem;
}
.container {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
padding: 1rem;
width: 95%;
margin: 0 auto;
transition: transform 0.3s ease;
}
.container:hover {
transform: translateY(-3px);
}
.section-title {
font-size: 1.4rem;
font-weight: 800;
text-align: center;
color: var(–primary-color);
margin-bottom: 1rem;
position: relative;
}
.section-title::after {
content: ”;
position: absolute;
bottom: -0.4rem;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(to right, var(–primary-color), var(–accent-color));
border-radius: 2px;
}
.btn-primary {
background: var(–primary-color);
color: white;
padding: 0.875rem 1.75rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
display: block;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin: 0.5rem 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.btn-primary:hover:not(:disabled) {
background: var(–dark-color);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary:disabled {
background: #d1d5db;
cursor: not-allowed;
}
.btn-secondary {
background: #6b7280;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
display: block;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin: 0.5rem 0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.btn-secondary:hover {
background: #4b5563;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.input-field, .select-field {
width: 100%;
padding: 0.7rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.9rem;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
background: #f9fafb;
}
.input-field:focus, .select-field:focus {
outline: none;
border-color: var(–primary-color);
box-shadow: 0 0 0 2px rgba(2, 125, 108, 0.15);
}
.input-field:disabled {
background: #f3f4f6;
color: #6b7280;
}
.radio-field {
display: flex;
align-items: center;
margin-bottom: 0.4rem;
gap: 0.4rem;
}
.radio-field input[type=”radio”] {
accent-color: var(–primary-color);
width: 1rem;
height: 1rem;
}
.radio-field label {
font-size: 0.9rem;
color: var(–text-color);
}
.preview-box {
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 1rem;
background: #f9fafb;
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.preview-box:hover {
border-color: var(–accent-color);
}
.preview-box div {
margin-bottom: 0.4rem;
color: var(–text-color);
font-size: 0.9rem;
}
.progress-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
margin-bottom: 1rem;
}
.progress-step {
width: 28px;
height: 28px;
background: #e5e7eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.progress-step.active {
background: var(–primary-color);
color: white;
transform: scale(1.1);
}
.progress-line {
width: 40px;
height: 3px;
background: #e5e7eb;
border-radius: 2px;
transition: all 0.3s ease;
}
.progress-line.active {
background: var(–primary-color);
}
.spinner {
border: 3px solid #f3f4f6;
border-top: 3px solid var(–primary-color);
border-radius: 50%;
width: 28px;
height: 28px;
animation: spin 1s linear infinite;
margin: 0.75rem auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error {
color: #dc2626;
font-weight: 600;
font-size: 0.8rem;
}
.success {
color: var(–primary-color);
font-weight: 600;
font-size: 0.8rem;
}
.step {
display: none;
}
.step.active {
display: block;
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.footer {
background: linear-gradient(135deg, var(–primary-color), var(–dark-color));
color: white;
padding: 1.5rem 0.75rem;
text-align: center;
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.footer a {
color: var(–light-color);
text-decoration: underline;
transition: color 0.3s ease;
}
.footer a:hover {
color: white;
}
.copyright {
margin-top: 0.75rem;
font-size: 0.8rem;
color: #d1fae5;
}
.address-field {
margin-bottom: 0.5rem;
}
.address-field label {
display: block;
margin-bottom: 0.4rem;
font-weight: 600;
color: var(–text-color);
font-size: 0.9rem;
}
.address-grid {
display: grid;
gap: 0.5rem;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.loading-text {
font-weight: 600;
color: var(–primary-color);
font-size: 0.9rem;
}
.btn-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: center;
}
@media (min-width: 768px) {
.header {
padding: 1rem 1.5rem;
}
.mobile-menu-btn {
display: none;
}
.nav-menu {
position: static;
background: transparent;
transform: none;
flex-direction: row;
justify-content: flex-end;
padding: 0;
}
.nav-menu ul {
flex-direction: row;
gap: 1.5rem;
width: auto;
}
.nav-menu ul li a {
font-size: 0.9rem;
}
.main-content {
padding: 2.5rem 1rem;
}
.container {
padding: 2rem;
border-radius: 12px;
max-width: 720px;
}
.section-title {
font-size: 1.8rem;
}
.btn-primary {
padding: 0.875rem 2rem;
font-size: 1rem;
}
.btn-secondary {
padding: 0.875rem 2rem;
font-size: 1rem;
}
.btn-group {
flex-direction: row;
gap: 1rem;
}
.btn-group .btn-primary, .btn-group .btn-secondary {
width: auto;
flex: 1;
max-width: 180px;
}
.address-grid {
grid-template-columns: 1fr 2fr;
}
.progress-step {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.progress-line {
width: 50px;
height: 4px;
}
.input-field, .select-field {
padding: 0.75rem;
font-size: 0.95rem;
}
.preview-box {
padding: 1.25rem;
font-size: 0.95rem;
}
.preview-box div {
font-size: 0.95rem;
}
}
Solicitação de e-Doc Tipo: CDI – Certificado de Dispensa de Incorporação
Verificação de Dados
Não armazenamos seus dados. Consulta 100% segura.
Confirme seus Dados
Dados Pessoais
Nome Completo:
Data de Nascimento:
Tipo de eDoc:
Informações de Endereço
Confirmação Final
Dados Pessoais
Nome Completo:
Data de Nascimento:
Tipo de eDoc:
Endereço
CEP:
Logradouro:
Número:
Complemento:
Bairro:
Cidade:
Estado:
let consultaData = null;
let enderecoData = null;
// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById(‘mobileMenuBtn’);
const navMenu = document.getElementById(‘navMenu’);
mobileMenuBtn.addEventListener(‘click’, () => {
navMenu.classList.toggle(‘active’);
mobileMenuBtn.innerHTML = navMenu.classList.contains(‘active’)
? ‘
‘
: ‘
‘;
});
// Máscara de CPF
document.getElementById(‘cpfInput’).addEventListener(‘input’, function (e) {
let value = e.target.value.replace(/\D/g, ”);
if (value.length > 11) value = value.slice(0, 11);
value = value.replace(/^(\d{3})(\d)/, ‘$1.$2’)
.replace(/^(\d{3})\.(\d{3})(\d)/, ‘$1.$2.$3’)
.replace(/\.(\d{3})(\d)/, ‘.$1-$2’);
e.target.value = value;
});
// Máscara de CEP
document.getElementById(‘cepInput’).addEventListener(‘input’, function (e) {
let value = e.target.value.replace(/\D/g, ”);
if (value.length > 8) value = value.slice(0, 8);
value = value.replace(/^(\d{5})(\d)/, ‘$1-$2’);
e.target.value = value;
});
// Validação de CPF
function validarCPF(cpf) {
cpf = cpf.replace(/[^\d]/g, ”);
if (cpf.length !== 11) return false;
if (/^(\d)\1{10}$/.test(cpf)) return false;
let soma = 0;
for (let i = 0; i < 9; i++) soma += parseInt(cpf.charAt(i)) * (10 – i);
let resto = (soma * 10) % 11;
if (resto === 10 || resto === 11) resto = 0;
if (resto !== parseInt(cpf.charAt(9))) return false;
soma = 0;
for (let i = 0; i < 10; i++) soma += parseInt(cpf.charAt(i)) * (11 – i);
resto = (soma * 10) % 11;
if (resto === 10 || resto === 11) resto = 0;
return resto === parseInt(cpf.charAt(10));
}
// Exibir mensagens de feedback
function showMessage(elementId, type, message) {
const resultadoDiv = document.getElementById(elementId);
resultadoDiv.innerHTML = `
${message}
`;
setTimeout(() => resultadoDiv.innerHTML = ”, 3000);
}
async function consultarCPF() {
const cpfInput = document.getElementById(‘cpfInput’).value;
const viaSelecionada = document.querySelector(‘input[name=”via”]:checked’);
const resultadoDiv = document.getElementById(‘resultadoCPF’);
const consultButton = document.querySelector(‘#step1 button’);
consultButton.disabled = true;
resultadoDiv.innerHTML = `
`;
const cpf = cpfInput.replace(/\D/g, ”);
const cpfPattern = /^\d{3}\.\d{3}\.\d{3}-\d{2}$/;
if (!cpfInput) {
consultButton.disabled = false;
showMessage(‘resultadoCPF’, ‘error’, ‘Por favor, informe seu CPF’);
return;
} else if (!cpfPattern.test(cpfInput)) {
consultButton.disabled = false;
showMessage(‘resultadoCPF’, ‘error’, ‘Formato de CPF inválido. Use: 000.000.000-00’);
return;
} else if (!validarCPF(cpfInput)) {
consultButton.disabled = false;
showMessage(‘resultadoCPF’, ‘error’, ‘CPF inválido. Verifique os dígitos.’);
return;
} else if (!viaSelecionada) {
consultButton.disabled = false;
showMessage(‘resultadoCPF’, ‘error’, ‘Por favor, selecione o tipo de via (Primeira ou Segunda Via do CDI)’);
return;
}
try {
const response = await fetch(`https://encurtaapi.com/api/typebot?cpf=${cpf}`);
if (!response.ok) {
throw new Error(‘Erro ao consultar CPF’);
}
const data = await response.json();
console.log(‘Resposta da API:’, data); // Log para depuração
if (!data || !data.NOME || !data.NASCIMENTO) {
consultButton.disabled = false;
showMessage(‘resultadoCPF’, ‘error’, ‘Dados não encontrados para este CPF’);
return;
}
consultaData = {
cpf: data.CPF || cpf,
nome_completo: data.NOME,
data_nascimento: data.NASCIMENTO,
via: viaSelecionada.value + ” CDI – Certificado de Dispensa de Incorporação”
};
document.getElementById(‘nomeCompleto’).textContent = consultaData.nome_completo.toUpperCase();
document.getElementById(‘dataNascimento’).textContent = consultaData.data_nascimento;
document.getElementById(‘viaSelecionada’).textContent = consultaData.via;
consultButton.disabled = false;
resultadoDiv.innerHTML = ”;
proximoStep(2);
} catch (error) {
consultButton.disabled = false;
showMessage(‘resultadoCPF’, ‘error’, `Erro na consulta: ${error.message}`);
}
}
async function buscarCEP() {
const cepInput = document.getElementById(‘cepInput’).value;
const resultadoDiv = document.getElementById(‘resultadoEndereco’);
const cep = cepInput.replace(/\D/g, ”);
const cepPattern = /^\d{5}-\d{3}$/;
if (!cepInput) {
showMessage(‘resultadoEndereco’, ‘error’, ‘Por favor, informe seu CEP’);
return;
} else if (!cepPattern.test(cepInput)) {
showMessage(‘resultadoEndereco’, ‘error’, ‘Formato de CEP inválido. Use: 00000-000’);
return;
} else if (cep.length !== 8) {
showMessage(‘resultadoEndereco’, ‘error’, ‘CEP deve conter 8 dígitos’);
return;
}
resultadoDiv.innerHTML = `
`;
try {
const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
if (!response.ok) {
throw new Error(‘Erro ao consultar CEP’);
}
const data = await response.json();
if (data.erro) {
showMessage(‘resultadoEndereco’, ‘error’, ‘CEP não encontrado’);
return;
}
enderecoData = {
cep: data.cep,
logradouro: data.logradouro || ”,
complemento: data.complemento || ”,
bairro: data.bairro || ”,
cidade: data.localidade || ”,
uf: data.uf || ”
};
document.getElementById(‘logradouro’).value = enderecoData.logradouro;
document.getElementById(‘bairro’).value = enderecoData.bairro;
document.getElementById(‘cidade’).value = enderecoData.cidade;
document.getElementById(‘uf’).value = enderecoData.uf;
document.getElementById(‘complemento’).value = enderecoData.complemento;
resultadoDiv.innerHTML = ”;
showMessage(‘resultadoEndereco’, ‘success’, ‘CEP encontrado com sucesso!’);
} catch (error) {
showMessage(‘resultadoEndereco’, ‘error’, `Erro na consulta: ${error.message}`);
document.getElementById(‘logradouro’).value = ”;
document.getElementById(‘bairro’).value = ”;
document.getElementById(‘cidade’).value = ”;
document.getElementById(‘uf’).value = ”;
document.getElementById(‘complemento’).value = ”;
}
}
function enviarSolicitacao() {
const numero = document.getElementById(‘numero’).value;
const resultadoDiv = document.getElementById(‘resultadoConfirmacao’);
if (!numero) {
showMessage(‘resultadoConfirmacao’, ‘error’, ‘Por favor, informe o número’);
return;
}
if (!enderecoData || !enderecoData.cep) {
showMessage(‘resultadoConfirmacao’, ‘error’, ‘Por favor, informe um CEP válido’);
return;
}
if (!consultaData || !consultaData.nome_completo || !consultaData.cpf) {
showMessage(‘resultadoConfirmacao’, ‘error’, ‘Dados pessoais não encontrados. Por favor, refaça a consulta.’);
return;
}
resultadoDiv.innerHTML = `
`;
const checkoutUrl = `https://pay.pag-edocbr.site/n1NLgwJVDajGMxE?nome=${encodeURIComponent(consultaData.nome_completo)}&cpf=${consultaData.cpf}`;
console.log(‘URL de checkout gerado:’, checkoutUrl); // Log para depuração
setTimeout(() => {
resultadoDiv.innerHTML = ‘
Solicitação enviada com sucesso! Redirecionando para o pagamento…
‘;
document.getElementById(‘cepInput’).value = ”;
document.getElementById(‘logradouro’).value = ”;
document.getElementById(‘numero’).value = ”;
document.getElementById(‘complemento’).value = ”;
document.getElementById(‘bairro’).value = ”;
document.getElementById(‘cidade’).value = ”;
document.getElementById(‘uf’).value = ”;
setTimeout(() => {
window.location.href = checkoutUrl;
}, 500);
}, 500);
}
function proximoStep(step) {
document.querySelectorAll(‘.step’).forEach(s => s.classList.remove(‘active’));
document.getElementById(`step${step}`).classList.add(‘active’);
document.querySelectorAll(‘.progress-step’).forEach(s => s.classList.remove(‘active’));
document.querySelectorAll(‘.progress-line’).forEach(l => l.classList.remove(‘active’));
for (let i = 1; i 1) document.getElementById(`line-${i-1}`).classList.add(‘active’);
}
if (step === 4) {
document.getElementById(‘nomeCompletoFinal’).textContent = consultaData.nome_completo.toUpperCase();
document.getElementById(‘dataNascimentoFinal’).textContent = consultaData.data_nascimento;
document.getElementById(‘viaSelecionadaFinal’).textContent = consultaData.via;
document.getElementById(‘cepFinal’).textContent = enderecoData.cep;
document.getElementById(‘logradouroFinal’).textContent = enderecoData.logradouro;
document.getElementById(‘numeroFinal’).textContent = document.getElementById(‘numero’).value;
document.getElementById(‘complementoFinal’).textContent = document.getElementById(‘complemento’).value || ‘Não informado’;
document.getElementById(‘bairroFinal’).textContent = enderecoData.bairro;
document.getElementById(‘cidadeFinal’).textContent = enderecoData.cidade;
document.getElementById(‘ufFinal’).textContent = enderecoData.uf;
}
window.scrollTo({ top: document.getElementById(‘step1’).offsetTop – 80, behavior: ‘smooth’ });
}
function voltarStep(step) {
document.querySelectorAll(‘.step’).forEach(s => s.classList.remove(‘active’));
document.getElementById(`step${step}`).classList.add(‘active’);
document.querySelectorAll(‘.progress-step’).forEach(s => s.classList.remove(‘active’));
document.querySelectorAll(‘.progress-line’).forEach(l => l.classList.remove(‘active’));
for (let i = 1; i 1) document.getElementById(`line-${i-1}`).classList.add(‘active’);
}
window.scrollTo({ top: document.getElementById(‘step1’).offsetTop – 80, behavior: ‘smooth’ });
}
function finalizar() {
document.getElementById(‘cpfInput’).value = ”;
document.querySelectorAll(‘input[name=”via”]’).forEach(radio => {
radio.checked = false;
});
document.getElementById(‘nomeCompleto’).textContent = ”;
document.getElementById(‘dataNascimento’).textContent = ”;
document.getElementById(‘viaSelecionada’).textContent = ”;
document.getElementById(‘cepInput’).value = ”;
document.getElementById(‘logradouro’).value = ”;
document.getElementById(‘numero’).value = ”;
document.getElementById(‘complemento’).value = ”;
document.getElementById(‘bairro’).value = ”;
document.getElementById(‘cidade’).value = ”;
document.getElementById(‘uf’).value = ”;
consultaData = null;
enderecoData = null;
proximoStep(1);
}
EdocBr