projeto.html
Publicado em
01/10/2026 10h14
projeto.html
— 20 KB
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--FAVICON-->
<link rel="shortcut icon" href="../assets/img/favicon.ico" />
<!-- Fonte Rawline-->
<link rel="stylesheet"
href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css" />
<!-- Fonte Raleway-->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap" />
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--CSS GOVBR (contém todos os componentes: datetimepicker, select, footer, etc)-->
<link rel="stylesheet" href="./assets/govbr/core.css" />
<!--PROTEÇÃO CONTRA IMPRESSÃO - ESTILOS-->
<link rel="stylesheet" href="./assets/css/printProtection.css" />
<!--JS GOVBR (contém todos os componentes: datetimepicker, select, footer, etc)-->
<script src="./assets/govbr/core.js"></script>
<!--HTML2CANVAS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--JSPDF-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"
integrity="sha512-qZvrmS2ekKPF2mSznTQsxqPgnpkI4DNTlrdUmTzrDgektczlKNRRhy5X5AAOnx5S09ydFYWWNSfcEqDTTHgtNA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--INSTANCIADOR DE COMPONENTES-->
<script src="./assets/js/instanciador.js" data-observar></script>
<!--PROTEÇÃO CONTRA PRINT-->
<script src="./assets/js/printProtection.js"></script>
<!--GERADOR DE DOCUMENTO-->
<script src="./assets/js/gerarDocumento.js"></script>
<!--GERADOR JSON-->
<script src="./assets/js/gerarJson.js"></script>
<!--TOOLS.JS - DEVE VIR PRIMEIRO (arquivos genéricos)-->
<script src="./assets/js/tools.js"></script>
<!--projeto.js - Sua lógica específica (vem DEPOIS de tools.js)-->
<script src="./projeto.js"></script>
<style>
.fix {
top: 0px !important;
}
/* Estilos para botão desabilitado usando classe CSS */
.br-button.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.br-button.disabled:hover {
opacity: 0.6;
background-color: inherit;
}
</style>
<title>CODAR RW Compensação em Formulário 2026</title>
</head>
<body class="d-flex flex-column" style="background-color: #f8f8f8; min-height: 100vh">
<main class="flex-grow-1">
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SEÇÃO 1: CABEÇALHO -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section id="id-cabecalho" class="pagina1">
<header class="br-header">
<div class="container-lg">
<div class="header-top">
<div class="header-logo">
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374.7 134.9"
style="enable-background: new 0 0 374.7 134.9" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #2864ae;
}
.st1 {
fill: #46ad44;
}
.st2 {
fill: #fabd10;
}
</style>
<path class="st0" d="M40.1,84.7c8.9,0,16-7.5,16-18.7c0-8.1-4.8-17.2-16-17.2
c-9.3,0-14.2,8.2-14.2,18.1C25.9,78.3,32.6,84.7,40.1,84.7z
M80.4,95.5c0,29.8-14.5,39.4-43.8,39.4c-12,0-21.9-2.5-27.7-4.6l1.3-19.8
c7.7,3.8,14.1,6,24.5,6c14.5,0,22.3-6.8,22.3-21.1v-3.9h-0.3c-6,8.5-14.4,12.4-24.4,12.4
C12.4,104,0,88.9,0,67.4c0-21.6,10.2-37.8,32.8-37.8c10.7,0,19.4,5.9,24.7,14.8h0.3V31.3h22.7
L80.4,95.5L80.4,95.5z" />
<polygon class="st1" points="181.6,103.9 209.5,103.9 235.8,31.7 211.4,31.7 196.6,83.1 196.3,83.1
181.6,31.7 155.3,31.7 " />
<path class="st2" d="M139,67.8c0-10.8-4.7-20.4-16.2-20.4c-11.5,0-16.2,9.6-16.2,20.4c0,10.7,4.7,20.2,16.2,20.2
C134.3,88,139,78.5,139,67.8z M80.8,67.8c0-24,18.1-37.8,42-37.8s42,13.9,42,37.8
c0,23.8-18.1,37.7-42,37.7C99,105.5,80.8,91.6,80.8,67.8z" />
<path class="st0" d="M238.6,93.7c0,6.5-5.3,11.8-11.8,11.8c-6.5,0-11.8-5.3-11.8-11.8c0-6.5,5.3-11.8,11.8-11.8
C233.3,81.8,238.6,87.1,238.6,93.7z" />
<path class="st0" d="M281,49.2c-9.1,0-15.2,8-15.2,18.8c0,10.5,6.9,18.4,15.2,18.4c9.4,0,15.1-7.9,15.1-19.4
C296.1,57.5,290.7,49.2,281,49.2z M240.9,0h25.1v41h0.3c6.4-8,14.8-10.9,24.8-10.9
c20,0,30.9,19,30.9,36.4c0,21.3-11.5,39.1-33,39.1c-11.5,0-21.6-6.5-24.8-14.6h-0.3v12.9h-23
L240.9,0L240.9,0z" />
<path class="st2" d="M373.4,51.7c-2.8-0.8-5.5-0.8-8.5-0.8c-11.6,0-18.1,8.4-18.1,22.6v30.5h-24.9V31.7h22.7V45h0.3
c4.3-9.1,10.5-15,21.3-15c2.9,0,6,0.4,8.5,0.8L373.4,51.7z" />
</svg>
</div>
</div>
<div class="header-bottom">
<div class="header-menu">
<div class="header-info">
<div class="header-title">
Discriminativo de Débitos (Declaração de Compensação em Formulário)
</div>
<div class="header-subtitle">
Utilize este formulário apenas nas situações em que não for possível elaborar a declaração de compensação por meio
eletrônico no PER/DCOMP. Este formulário preenchido deve ser juntado ao requerimento por meio do portal Serviços da
Receita Federal, item Meus Processos / Solicitar Serviço via Processo Digital.
</div>
</div>
</div>
</div>
</div>
</header>
</section>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SEÇÃO 2: DADOS DO CRÉDITO (Primeira seção do formulário) -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section id="secao-dados-credito" class="pagina1 toPdf my-3" name="dados_credito">
<div class="container-lg">
<!-- Título e subtítulo da Seção -->
<div class="row">
<div class="col-12">
<h1 class="h1 mb-5">Dados do crédito</h1>
<p class="text-up-03 mb-4">Preencha os dados do crédito para continuar</p>
</div>
</div>
<!-- Linha 1: Valor original, crédito na data de entrega, índice de atualização -->
<div class="row mb-4">
<div class="col-3">
<div class="br-input">
<label for="valor_original_credito_inicial">Valor original do crédito inicial *</label>
<input id="valor_original_credito_inicial" type="text" name="valor_original_credito_inicial"
onchange="reiniciarFormulario(this); validarCreditoNaDataDeEntrega();" required inputmode="numeric" placeholder="0,00" oninput="inputMoeda(this)">
</div>
</div>
<div class="col-3">
<div class="br-input">
<label for="credito_original_na_data_de_entrega">Crédito original na data de entrega *</label>
<input id="credito_original_na_data_de_entrega" type="text" name="credito_original_na_data_de_entrega"
onchange="reiniciarFormulario(this); validarCreditoNaDataDeEntrega(); atualizarSaldoCreditoOriginal(); atualizarCreditoNaDataDeEntrega(); totalDoCreditoOriginalUsado();" inputmode="numeric" placeholder="0,00" oninput="inputMoeda(this)" required>
</div>
</div>
<div class="col-3">
<div class="br-input">
<label for="indice_de_atualizacao">Índice de atualização *</label>
<input id="indice_de_atualizacao" type="text" name="indice_de_atualizacao" inputmode="numeric" placeholder="0,0%" required
onchange="reiniciarFormulario(this); atualizarCreditoNaDataDeEntrega();" oninput="inputPercentual(this)">
</div>
</div>
</div>
<!-- Linha 2: Crédito autalizado na data de entrega, Total de débitos deste documento, Total do crédito original utilizado, saldo do crédito original -->
<div class="row mb-4">
<div class="col-3">
<div class="br-input">
<label for="credito_atualizado_na_data_de_entrega">Crédito atualizado na data de entrega</label>
<input id="credito_atualizado_na_data_de_entrega" type="text" name="credito_atualizado_na_data_de_entrega" readonly
onchange="reiniciarFormulario(this); totalDoCreditoOriginalUsado();" placeholder="0,00" required>
</div>
</div>
<div class="col-3">
<div class="br-input">
<label for="total_debitos_deste_documento">Total de débitos deste documento</label>
<input id="total_debitos_deste_documento" type="text" inputmode="numeric" name="total_debitos_deste_documento" readonly
onchange="reiniciarFormulario(this)" required value="0,00">
</div>
</div>
<div class="col-3">
<div class="br-input">
<label for="total_credito_utilizado_neste_documento">Total do crédito utilizado neste documento</label>
<input id="total_credito_utilizado_neste_documento" type="text" name="total_credito_utilizado_neste_documento" value="0,00"
onchange="reiniciarFormulario(this)"
required readonly>
</div>
</div>
<div class="col-3">
<div class="br-input">
<label for="saldo_do_credito_original">Saldo do crédito original</label>
<input id="saldo_do_credito_original" type="text" name="saldo_do_credito_original" readonly onchange="reiniciarFormulario(this)"
placeholder="0,00" required>
</div>
</div>
</div>
<!-- Botão Avançar -->
<div class="row mt-5">
<div class="col-12 text-center">
<button class="br-button primary" type="button" onclick="confirmarSecaoComValidacao(this)">
<span>Avançar para Próxima Seção</span>
</button>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SEÇÃO 3: DADOS DO DÉBITO -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section id="secao_dados_debito" class="pagina2 toPdf my-3 d-none" name="dados_debito">
<div class="container-lg">
<!-- Título e subtítulo da Seção -->
<div class="row">
<div class="col-12">
<h1 class="h1 mb-5">Dados do débito</h1>
<p class="text-up-03 mb-4">Preencha os dados do débito para continuar</p>
</div>
</div>
<!-- Linha 1: Origem dos débitos, CNPJ/CPF, Numero do processo -->
<div class="row mb-4">
<!--ORIGEM-->
<div class="col-4">
<div class="br-select" onchange="reiniciarFormulario(this);">
<div class="br-input">
<label for="select-simple">Origem dos débitos *</label>
<input id="select-simple" type="text" placeholder="Selecione o item" required />
<button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
</button>
</div>
<div class="br-list" tabindex="0">
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="dctf" type="radio" name="origem_debito" value="dctf"/>
<label for="dctf">DCTF</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="dctfweb" type="radio" name="origem_debito" value="dctfweb"/>
<label for="dctfweb">DCTFWEB</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="dirpf" type="radio" name="origem_debito" value="dirpf"/>
<label for="dirpf">DIRPF</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="ditr" type="radio" name="origem_debito" value="ditr"/>
<label for="ditr">DITR</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="ainf" type="radio" name="origem_debito" value="ainf"/>
<label for="ainf">Auto de infração/Notificação de lançamento</label>
</div>
</div>
<div class="br-item" tabindex="-1">
<div class="br-radio">
<input id="outra" type="radio" name="origem_debito" value="outra"/>
<label for="outra">Outra origem</label>
</div>
</div>
</div>
</div>
</div>
<!--CNPJ/CPF-->
<div class="col-4">
<div class="br-input">
<label for="cnpjcpf">CNPJ/CPF do devedor *</label>
<input id="cnpjcpf" type="text" name="cnpjcpf" onchange="reiniciarFormulario(this);" oninput="aplicarMascaraCpfCnpj(this);" required>
</div>
</div>
<!--NUMERO PROCESSO-->
<div class="col-4">
<div class="br-input">
<label for="processo">Número do processo (se houver)</label>
<input id="processo" type="text" name="processo" onchange="reiniciarFormulario(this);">
</div>
</div>
</div>
<!-- Botões -->
<div class="row mt-5">
<div class="col-12 text-center">
<button class="br-button primary" type="button" onclick="confirmarSecaoComValidacao(this)">
<span>Avançar para Próxima Seção</span>
</button>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SEÇÃO 4: DETALHAMENTO DOS DÉBITOS -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section id="secao_detalhamento_debitos" class="pagina3 toPdf my-3 d-none" name="detalhamento_debitos">
<div class="container-lg">
<!-- Título e subtítulo da Seção -->
<div class="row">
<div class="col-12">
<h1 class="h1 mb-5">Detalhamento dos débitos</h1>
<p class="text-up-03 mb-4">Adicione seus débitos</p>
</div>
</div>
<!-- Detalhamento dos débitos -->
<div class="row mb-4">
<div class="col-12">
<div class="br-table">
<div id="container-debitos">
<!-- Débitos serão incluídos aqui -->
</div>
<div id="container_total_debitos" class="d-none">
<div class="row">
<div class="col-12">
<h1 class="h1 mb-5">Total compensado</h1>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="br-input">
<label for="total_debitos">Total compensado</label>
<input id="total_debitos" type="text" placeholder="0,00" readonly name="total_debitos"/>
</div>
</div>
</div>
</div>
<div class="text-center mb-3">
<button class="br-button primary" type="button" onclick="incluirDebito();">
<i class="fas fa-plus mr-1"></i>Incluir Débito
</button>
</div>
</div>
</div>
</div>
<!-- Botão Avançar -->
<div class="row mt-5">
<div class="col-12 text-center">
<button class="br-button primary" type="button" onclick="confirmarSecaoComValidacao(this)">
<span>Avançar para Próxima Seção</span>
</button>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- SEÇÃO 5: CONFIRMAÇÃO -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<section id="secao-confirmacao" class="pagina4 toPdf my-3 d-none" name="confirmacao">
<div class="container-lg">
<!-- Título e subtítulo da Seção -->
<div class="row">
<div class="col-12">
<h1 class="h1 mb-5">Gerar PDF</h1>
<p class="text-up-03 mb-4">Gere o PDF para ser anexado ao requerimento utilizando o botão abaixo</p>
</div>
</div>
<!-- Botão de Ação -->
<div class="row mt-5">
<div class="col-12 text-center">
<button class="br-button primary" type="button" onclick="gerarDocumento()">
<span>Gerar Documento</span>
</button>
</div>
</div>
</div>
</section>
</main>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- RODAPÉ -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<footer class="br-footer">
<!-- <div class="container-lg">
<div class="d-none d-sm-block">
<div class="row align-items-end justify-content-between py-5">
<div class="col">
<div class="social-network">
<div class="social-network-title">Redes Sociais</div>
<div class="d-flex">
<a class="br-button circle" href="javascript:void(0)"
aria-label="Compartilhar por Facebook">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)"
aria-label="Compartilhar por Twitter">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)"
aria-label="Compartilhar por LinkedIn">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div> -->
<span class="br-divider my-3"></span>
<div class="container-lg">
<div class="info">
<div class="text-down-01 text-medium pb-3">
© 2025 - Projeto Exemplo - Template Base para Produção de Formulários HTML
</div>
</div>
</div>
</footer>
<!-- ═══════════════════════════════════════════════════════════════ -->
<!-- INSTRUÇÕES: Lógica em projeto.js -->
<!-- ═══════════════════════════════════════════════════════════════ -->
<!--
✅ ARQUIVO: projeto.js
Contém:
- confirmarSecaoComValidacao(button) - Valida seção antes de avançar
- atualizarResumo() - Atualiza tabela de resumo
- gerarJSONCustomizado() - Gera JSON do formulário
- gerarPDFCustomizado() - Gera PDF do formulário
- voltarSecaoAnterior() - Volta para seção anterior
📖 Veja projeto.js para entender como as funções de tools.js são utilizadas
-->
</body>
</html>