Hugging Face's logo

Spaces:
Tirvo
/
ji8g
Running

App Files Community
ji8g / index.html
Tirvo's picture
Tirvo
Add 2 files
a549b63 verified
raw
history blame contribute delete
18.8 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fatura | Sua Empresa</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#10B981',
dark: '#1F2937',
light: '#F9FAFB'
}
}
}
}
</script>
<style>
@media print {
.no-print {
display: none !important;
}
body {
padding: 0;
margin: 0;
}
}
.watermark {
position: absolute;
opacity: 0.1;
font-size: 5rem;
width: 100%;
text-align: center;
z-index: -1;
transform: rotate(-30deg);
top: 50%;
left: 0;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<div class="max-w-4xl mx-auto p-6">
<!-- Header with action buttons -->
<div class="flex justify-between items-center mb-8 no-print">
<h1 class="text-2xl font-bold text-dark">Gerador de Fatura</h1>
<div class="space-x-2">
<button onclick="window.print()" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-print mr-2"></i> Imprimir
</button>
<button onclick="generatePDF()" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-file-pdf mr-2"></i> Gerar PDF
</button>
<button onclick="sendEmail()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-paper-plane mr-2"></i> Enviar por Email
</button>
</div>
</div>
<!-- Invoice Container -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
<!-- Invoice Header -->
<div class="bg-primary p-6 text-white">
<div class="flex justify-between items-start">
<div>
<h1 class="text-3xl font-bold">FATURA</h1>
<p class="text-primary-200 mt-1">Nº <span id="invoice-number">INV-2023-001</span></p>
</div>
<div class="text-right">
<img src="https://via.placeholder.com/150x50?text=Your+Logo" alt="Logo" class="h-12">
<p class="mt-2 text-primary-200">Sua Empresa LTDA</p>
</div>
</div>
</div>
<!-- Invoice Details -->
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- From -->
<div>
<h3 class="text-lg font-semibold text-dark mb-3">De:</h3>
<p class="font-bold">Sua Empresa LTDA</p>
<p>Rua Exemplo, 123</p>
<p>Centro, São Paulo - SP</p>
<p>CEP: 01000-000</p>
<p class="mt-2">CNPJ: 12.345.678/0001-90</p>
<p>IE: 123.456.789.111</p>
<p class="mt-2">Email: contato@suaempresa.com</p>
<p>Telefone: (11) 9999-9999</p>
</div>
<!-- To and Dates -->
<div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-dark mb-3">Para:</h3>
<input type="text" id="client-name" placeholder="Nome do Cliente" class="w-full p-2 border border-gray-300 rounded mb-2">
<input type="text" id="client-document" placeholder="CPF/CNPJ" class="w-full p-2 border border-gray-300 rounded mb-2">
<textarea id="client-address" placeholder="Endereço completo" class="w-full p-2 border border-gray-300 rounded mb-2" rows="3"></textarea>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="issue-date" class="block text-sm font-medium text-gray-700">Data de Emissão</label>
<input type="date" id="issue-date" class="w-full p-2 border border-gray-300 rounded">
</div>
<div>
<label for="due-date" class="block text-sm font-medium text-gray-700">Vencimento</label>
<input type="date" id="due-date" class="w-full p-2 border border-gray-300 rounded">
</div>
</div>
</div>
</div>
<!-- Items Table -->
<div class="px-6">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Item</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantidade</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Preço Unit.</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider no-print">Ações</th>
</tr>
</thead>
<tbody id="items-table" class="bg-white divide-y divide-gray-200">
<!-- Items will be added here -->
</tbody>
</table>
</div>
<div class="mt-4 no-print">
<button onclick="addItem()" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Adicionar Item
</button>
</div>
</div>
<!-- Totals -->
<div class="p-6">
<div class="flex justify-end">
<div class="w-full md:w-1/3">
<div class="grid grid-cols-2 gap-2">
<div class="text-right font-medium">Subtotal:</div>
<div class="text-right" id="subtotal">R$ 0,00</div>
<div class="text-right font-medium">Desconto:</div>
<div class="text-right">
<input type="number" id="discount" value="0" min="0" step="0.01" class="w-full p-1 border border-gray-300 rounded text-right" onchange="calculateTotals()">
</div>
<div class="text-right font-medium">Taxas:</div>
<div class="text-right">
<input type="number" id="tax" value="0" min="0" step="0.01" class="w-full p-1 border border-gray-300 rounded text-right" onchange="calculateTotals()">
</div>
<div class="text-right font-bold text-lg border-t border-gray-300 pt-2">Total:</div>
<div class="text-right font-bold text-lg border-t border-gray-300 pt-2" id="total">R$ 0,00</div>
</div>
</div>
</div>
</div>
<!-- Payment Info -->
<div class="p-6 bg-gray-50 border-t border-gray-200">
<h3 class="text-lg font-semibold text-dark mb-3">Informações de Pagamento</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="payment-method" class="block text-sm font-medium text-gray-700">Método de Pagamento</label>
<select id="payment-method" class="mt-1 block w-full p-2 border border-gray-300 rounded-md">
<option value="bank-transfer">Transferência Bancária</option>
<option value="credit-card">Cartão de Crédito</option>
<option value="boleto">Boleto Bancário</option>
<option value="pix">PIX</option>
<option value="cash">Dinheiro</option>
</select>
</div>
<div>
<label for="payment-instructions" class="block text-sm font-medium text-gray-700">Instruções</label>
<textarea id="payment-instructions" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" rows="3">
Banco: Banco do Brasil
Agência: 1234
Conta: 56789-0
Favorecido: Sua Empresa LTDA
CNPJ: 12.345.678/0001-90
</textarea>
</div>
</div>
</div>
<!-- Footer -->
<div class="p-6 bg-gray-100 text-center text-gray-600 text-sm">
<p>Agradecemos pela preferência! Em caso de dúvidas, entre em contato conosco.</p>
<p class="mt-1">contato@suaempresa.com | (11) 9999-9999</p>
<p class="mt-2">Este documento é válido sem assinatura conforme art. 7º da Lei nº 8.078/90</p>
</div>
<!-- Watermark (hidden by default) -->
<div id="watermark" class="watermark hidden">
<p>COPIA</p>
</div>
</div>
<!-- Email Modal -->
<div id="email-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Enviar Fatura por Email</h3>
<button onclick="closeEmailModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label for="email-to" class="block text-sm font-medium text-gray-700">Para:</label>
<input type="email" id="email-to" class="w-full p-2 border border-gray-300 rounded">
</div>
<div>
<label for="email-subject" class="block text-sm font-medium text-gray-700">Assunto:</label>
<input type="text" id="email-subject" value="Fatura Nº INV-2023-001" class="w-full p-2 border border-gray-300 rounded">
</div>
<div>
<label for="email-message" class="block text-sm font-medium text-gray-700">Mensagem:</label>
<textarea id="email-message" rows="4" class="w-full p-2 border border-gray-300 rounded">
Prezado(a),
Segue em anexo a fatura referente aos nossos serviços.
Agradecemos pela preferência!
Atenciosamente,
Sua Empresa
</textarea>
</div>
<div class="flex justify-end space-x-2 pt-2">
<button onclick="closeEmailModal()" class="px-4 py-2 border border-gray-300 rounded">Cancelar</button>
<button onclick="confirmSendEmail()" class="px-4 py-2 bg-primary text-white rounded">Enviar</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize invoice with one empty item
document.addEventListener('DOMContentLoaded', function() {
// Set default dates
const today = new Date();
document.getElementById('issue-date').valueAsDate = today;
const dueDate = new Date();
dueDate.setDate(today.getDate() + 7);
document.getElementById('due-date').valueAsDate = dueDate;
// Add first item
addItem();
// Generate random invoice number
document.getElementById('invoice-number').textContent = 'INV-' + today.getFullYear() + '-' + Math.floor(1000 + Math.random() * 9000);
});
// Add new item to the invoice
function addItem() {
const table = document.getElementById('items-table');
const rowCount = table.rows.length;
const row = table.insertRow();
row.className = 'item-row';
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">
<input type="text" class="item-name w-full p-1 border border-gray-300 rounded" placeholder="Serviço">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="text" class="item-description w-full p-1 border border-gray-300 rounded" placeholder="Descrição detalhada">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="number" class="item-quantity w-full p-1 border border-gray-300 rounded" value="1" min="1" onchange="calculateItemTotal(this)">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="number" class="item-price w-full p-1 border border-gray-300 rounded" value="0" min="0" step="0.01" onchange="calculateItemTotal(this)">
</td>
<td class="px-6 py-4 whitespace-nowrap item-total">
R$ 0,00
</td>
<td class="px-6 py-4 whitespace-nowrap no-print">
<button onclick="removeItem(this)" class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</td>
`;
calculateTotals();
}
// Remove item from invoice
function removeItem(button) {
const row = button.closest('tr');
row.remove();
calculateTotals();
}
// Calculate total for a single item
function calculateItemTotal(input) {
const row = input.closest('tr');
const quantity = parseFloat(row.querySelector('.item-quantity').value) || 0;
const price = parseFloat(row.querySelector('.item-price').value) || 0;
const total = quantity * price;
row.querySelector('.item-total').textContent = formatCurrency(total);
calculateTotals();
}
// Calculate all totals (subtotal, tax, discount, total)
function calculateTotals() {
let subtotal = 0;
const rows = document.querySelectorAll('.item-row');
rows.forEach(row => {
const totalText = row.querySelector('.item-total').textContent;
const totalValue = parseFloat(totalText.replace('R$', '').replace('.', '').replace(',', '.').trim()) || 0;
subtotal += totalValue;
});
const discount = parseFloat(document.getElementById('discount').value) || 0;
const tax = parseFloat(document.getElementById('tax').value) || 0;
const total = subtotal - discount + tax;
document.getElementById('subtotal').textContent = formatCurrency(subtotal);
document.getElementById('total').textContent = formatCurrency(total);
}
// Format number as currency
function formatCurrency(value) {
return 'R$ ' + value.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, '$1.');
}
// Generate PDF (mock function)
function generatePDF() {
alert('Funcionalidade de PDF seria implementada com uma biblioteca como jsPDF ou similar.');
// In a real implementation, you would use jsPDF or similar library
// to generate a PDF version of the invoice
}
// Show email modal
function sendEmail() {
document.getElementById('email-modal').classList.remove('hidden');
}
// Close email modal
function closeEmailModal() {
document.getElementById('email-modal').classList.add('hidden');
}
// Confirm send email (mock function)
function confirmSendEmail() {
const to = document.getElementById('email-to').value;
if (!to) {
alert('Por favor, insira um endereço de email válido.');
return;
}
alert(`Fatura enviada para: ${to}\n\nEm uma implementação real, isso enviaria o email com a fatura anexada.`);
closeEmailModal();
}
// Toggle watermark for print
function toggleWatermark() {
const watermark = document.getElementById('watermark');
watermark.classList.toggle('hidden');
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tirvo/ji8g" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>