260 lines
7.0 KiB
Handlebars
260 lines
7.0 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.css"
|
|
referrerpolicy="no-referrer" />
|
|
<title>Factura F26200</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 40px;
|
|
color: #333;
|
|
font-size: 11pt;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.accent-color {
|
|
background-color: #F08119;
|
|
}
|
|
|
|
.company-info,
|
|
.invoice-meta {
|
|
width: 48%;
|
|
}
|
|
|
|
.invoice-meta {
|
|
text-align: right;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.contact {
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 0px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
table th,
|
|
table td {
|
|
border: 0px solid;
|
|
padding: 3px 10px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
table th {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.totals {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.totals td {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.totals td.label {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 40px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: #eef;
|
|
}
|
|
|
|
.accent-color {
|
|
background-color: #F08119;
|
|
}
|
|
|
|
@media print {
|
|
* {
|
|
-webkit-print-color-adjust: exact;
|
|
}
|
|
|
|
thead {
|
|
display: table-header-group;
|
|
}
|
|
|
|
tfoot {
|
|
display: table-footer-group;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<aside class="flex items-start mb-4 w-full">
|
|
<!-- Bloque IZQUIERDO: imagen arriba + texto abajo, alineado a la izquierda -->
|
|
<div class="w-[70%] flex flex-col items-start text-left">
|
|
<img src="https://rodax-software.com/images/logo_rodax.jpg" alt="Logo Rodax" class="block h-14 w-auto mb-1" />
|
|
<div class="flex w-full">
|
|
<div class="p-1 ">
|
|
<p>Factura nº:<strong> {{series}}{{invoice_number}}</strong></p>
|
|
<p><span>Fecha:<strong> {{invoice_date}}</strong></p>
|
|
</div>
|
|
<div class="p-1 ml-9">
|
|
<h2 class="font-semibold uppercase mb-1">{{recipient.name}}</h2>
|
|
<p>{{recipient.tin}}</p>
|
|
<p>{{recipient.street}}</p>
|
|
<p>{{recipient.postal_code}} {{recipient.city}} {{recipient.province}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bloque DERECHO: logo2 arriba y texto DEBAJO -->
|
|
<div class="ml-auto flex flex-col items-end text-right">
|
|
<img src="https://rodax-software.com/images/logo2.jpg" alt="Logo secundario"
|
|
class="block h-5 w-auto md:h-8 mb-1" />
|
|
<div class="not-italic text-xs leading-tight">
|
|
<p>Telf: 91 785 02 47 / 686 62 10 59</p>
|
|
<p><a href="mailto:info@rodax-software.com" class="hover:underline">info@rodax-software.com</a></p>
|
|
<p><a href="https://www.rodax-software.com" target="_blank" rel="noopener"
|
|
class="hover:underline">www.rodax-software.com</a></p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section id="details" class="border-b border-black ">
|
|
|
|
<div class="relative pt-0 border-b border-black">
|
|
<!-- Badge TOTAL decorado con imagen -->
|
|
<div class="absolute -top-9 right-0">
|
|
|
|
<div class="relative text-sm font-semibold text-black pr-2 pl-10 py-2 justify-center bg-red-900"
|
|
style="background-image: url('https://rodax-software.com/images/img-total2.jpg'); background-size: cover; background-position: left;">
|
|
<!-- Texto del total -->
|
|
<span>TOTAL: {{total_amount}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tu tabla -->
|
|
<table class="table-header">
|
|
<thead>
|
|
<tr class="text-left">
|
|
<th class="py-2">Concepto</th>
|
|
<th class="py-2">Cantidad</th>
|
|
<th class="py-2">Precio unidad</th>
|
|
<th class="py-2">Importe total</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{{#each items}}
|
|
<tr>
|
|
<td>{{description}}</td>
|
|
<td class="text-right">{{#if quantity}}{{quantity}}{{else}} {{/if}}</td>
|
|
<td class="text-right">{{#if unit_amount}}{{unit_amount}}{{else}} {{/if}}</td>
|
|
<td class="text-right">{{#if taxable_amount}}{{taxable_amount}}{{else}} {{/if}}</td>
|
|
</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section id="resume" class="flex items-center justify-between pb-4 mb-4">
|
|
|
|
<div class="grow relative pt-10 self-start">
|
|
{{#if payment_method}}
|
|
<div class="">
|
|
<p class=" text-sm"><strong>Forma de pago:</strong> {{payment_method}}</p>
|
|
</div>
|
|
{{else}}
|
|
<!-- Empty payment method-->
|
|
{{/if}}
|
|
{{#if notes}}
|
|
<div class="pt-4">
|
|
<p class="text-sm"><strong>Notas:</strong> {{notes}} </p>
|
|
</div>
|
|
{{else}}
|
|
<!-- Empty notes-->
|
|
{{/if}}
|
|
|
|
</div>
|
|
|
|
<div class="relative pt-10 grow">
|
|
<table class=" table-header min-w-full bg-transparent">
|
|
<tbody>
|
|
{{#if discount_percentage}}
|
|
<tr>
|
|
<td class="px-4 text-right">Importe neto</td>
|
|
<td class="w-5"> </td>
|
|
<td class="px-4 text-right">{{subtotal_amount}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 text-right">Descuento {{discount_percentage}}</td>
|
|
<td class="w-5"> </td>
|
|
<td class="px-4 text-right">{{discount_amount.value}}</td>
|
|
</tr>
|
|
{{else}}
|
|
<!-- dto 0-->
|
|
{{/if}}
|
|
<tr>
|
|
<td class="px-4 text-right">Base imponible</td>
|
|
<td class="w-5"> </td>
|
|
<td class="px-4 text-right">{{taxable_amount}}</td>
|
|
</tr>
|
|
{{#each taxes}}
|
|
<tr>
|
|
<td class="px-4 text-right">{{tax_name}}</td>
|
|
<td class="w-5"> </td>
|
|
<td class="px-4 text-right">{{taxes_amount}}</td>
|
|
</tr>
|
|
{{/each}}
|
|
<tr class="">
|
|
<td class="px-4 text-right accent-color">
|
|
Total factura
|
|
</td>
|
|
<td class="w-5"> </td>
|
|
<td class="px-4 text-right accent-color">
|
|
{{total_amount}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
|
|
<footer id="footer" class="mt-4">
|
|
<aside>
|
|
<p class="text-center">Insc. en el Reg. Merc. de Madrid, Tomo 20.073, Libro 0, Folio 141, Sección 8, Hoja M-354212
|
|
| CIF: B83999441 -
|
|
Rodax Software S.L.</p>
|
|
</aside>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html> |