Gerador de Recibo de Mensalidade
Gerador de Recibo de Mensalidade
“A força da Capoeira vem de cada um que a mantém viva”
Recibo de Mensalidade
“A força da Capoeira vem de cada um que a mantém viva”
Nome / apelido:
Valor: R$
Data do pagamento:
Mês de referência / ano:
Declaro, para os devidos fins, que recebi o valor acima referente à mensalidade de capoeira do mês especificado, quitando assim a obrigação para este período.
Baixar Recibo em PDF
Gerar Novo Recibo
body {
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #2c3e50;
text-align: center;
}
.motto {
font-style: italic;
text-align: center;
color: #7f8c8d;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type=”text”],
input[type=”number”],
input[type=”date”] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
display: block;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #2980b9;
}
#reciboPreview {
margin-top: 30px;
}
.recibo-container {
background: white;
border: 1px solid #ddd;
padding: 30px;
margin-bottom: 20px;
border-radius: 8px;
}
.recibo-info p {
margin: 15px 0;
padding-bottom: 10px;
border-bottom: 1px dashed #eee;
}
.declaracao {
margin: 30px 0;
text-align: justify;
}
.assinatura {
text-align: right;
margin: 40px 0 30px;
}
.codigo-validacao {
text-align: center;
font-size: 18px;
padding: 15px;
background: #f9f9f9;
border-radius: 4px;
}
.download-btn {
background-color: #27ae60;
}
.download-btn:hover {
background-color: #219653;
}
.secondary-btn {
background-color: #95a5a6;
}
.secondary-btn:hover {
background-color: #7f8c8d;
}
.hidden {
display: none;
}
// Inicializa o jsPDF
const { jsPDF } = window.jspdf;
document.addEventListener(‘DOMContentLoaded’, function() {
const form = document.getElementById(‘reciboForm’);
const reciboPreview = document.getElementById(‘reciboPreview’);
const downloadBtn = document.getElementById(‘downloadRecibo’);
const novoReciboBtn = document.getElementById(‘novoRecibo’);
form.addEventListener(‘submit’, function(e) {
e.preventDefault();
// Coletar dados do formulário
const nome = document.getElementById(‘nome’).value;
const valor = parseFloat(document.getElementById(‘valor’).value).toFixed(2);
const mesReferencia = document.getElementById(‘mesReferencia’).value;
const dataPagamento = formatarData(document.getElementById(‘dataPagamento’).value);
// Gerar código de validação
const codigo = gerarCodigoValidacao();
// Preencher preview do recibo
document.getElementById(‘previewNome’).textContent = nome;
document.getElementById(‘previewValor’).textContent = valor;
document.getElementById(‘previewDataPagamento’).textContent = dataPagamento;
document.getElementById(‘previewMesReferencia’).textContent = mesReferencia;
document.getElementById(‘previewCodigo’).textContent = codigo;
// Mostrar preview e esconder formulário
form.classList.add(‘hidden’);
reciboPreview.classList.remove(‘hidden’);
});
downloadBtn.addEventListener(‘click’, function() {
gerarPDF();
});
novoReciboBtn.addEventListener(‘click’, function() {
// Resetar formulário
form.reset();
// Mostrar formulário e esconder preview
form.classList.remove(‘hidden’);
reciboPreview.classList.add(‘hidden’);
});
// Função para formatar data (dd/mm/aaaa)
function formatarData(dataISO) {
const data = new Date(dataISO);
const dia = String(data.getDate()).padStart(2, ‘0’);
const mes = String(data.getMonth() + 1).padStart(2, ‘0’);
const ano = data.getFullYear();
return `${dia}/${mes}/${ano}`;
}
// Função para gerar código de validação
function gerarCodigoValidacao() {
const caracteres = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789’;
let codigo = ”;
for (let i = 0; i < 8; i++) {
codigo += caracteres.charAt(Math.floor(Math.random() * caracteres.length));
}
return codigo;
}
// Função para gerar PDF
function gerarPDF() {
const reciboContent = document.getElementById('reciboContent');
html2canvas(reciboContent).then(canvas => {
const imgData = canvas.toDataURL(‘image/png’);
const pdf = new jsPDF({
orientation: ‘portrait’,
unit: ‘mm’
});
// Adiciona a imagem ao PDF
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, ‘PNG’, 0, 0, pdfWidth, pdfHeight);
// Salva o PDF
pdf.save(‘Recibo_Mensalidade.pdf’);
});
}
});