122 lines
6.9 KiB
HTML
122 lines
6.9 KiB
HTML
{# Offerte als document (A4): in de CRM binnen het menu (quote_print.html), in het portaal los (quote_portal.html). #}
|
|
<style>
|
|
.qdoc { font-family: "Mukta", system-ui, sans-serif; color: #212121; font-size: 14px; line-height: 1.55; font-variant-numeric: lining-nums tabular-nums; }
|
|
.qdoc .page { background: #fff; max-width: 210mm; margin: 24px auto; padding: 16mm 15mm; border-radius: 20px; }
|
|
.qdoc header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
|
|
.qdoc header img { width: 210px; max-width: 45%; }
|
|
.qdoc .company { text-align: right; color: #5c6670; font-size: 13px; }
|
|
.qdoc .company strong { color: #212121; }
|
|
.qdoc .meta { display: flex; justify-content: space-between; gap: 24px; margin: 40px 0 28px; }
|
|
.qdoc .label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5c6670; }
|
|
.qdoc .kv td { padding: 1px 0 1px 16px; }
|
|
.qdoc .kv td:first-child { padding-left: 0; }
|
|
.qdoc h1 { font-family: "Kantumruy Pro", sans-serif; font-weight: 500; font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
|
|
.qdoc h1::before { content: ""; display: block; width: 3rem; height: 3px; background: #b95913; margin-bottom: 14px; }
|
|
.qdoc .intro, .qdoc .notes { white-space: pre-line; }
|
|
.qdoc table.lines { width: 100%; border-collapse: collapse; margin: 24px 0 8px; }
|
|
.qdoc .lines th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5c6670; padding: 8px; border-bottom: 1px solid rgba(0,0,0,.15); }
|
|
.qdoc .lines td { padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
|
|
.qdoc .lines tr { break-inside: avoid; }
|
|
.qdoc .desc { white-space: pre-line; }
|
|
.qdoc .desc::first-line { font-weight: 600; }
|
|
.qdoc .num { text-align: right; white-space: nowrap; }
|
|
.qdoc .totals { margin-left: auto; width: 300px; border-collapse: collapse; }
|
|
.qdoc .totals td { padding: 4px 8px; }
|
|
.qdoc .totals .grand td { font-family: "Kantumruy Pro", sans-serif; font-weight: 600; font-size: 18px; border-top: 2px solid #212121; padding-top: 8px; }
|
|
.qdoc .notes { margin-top: 32px; }
|
|
.qdoc .sign { margin-top: 40px; display: flex; gap: 48px; }
|
|
.qdoc .sign div { flex: 1; border-top: 1px solid rgba(0,0,0,.3); padding-top: 6px; color: #5c6670; font-size: 12px; }
|
|
.qdoc .bestek { break-before: page; margin-top: 48px; }
|
|
.qdoc .bestek h2 { font-family: "Kantumruy Pro", sans-serif; font-weight: 500; font-size: 15px; margin: 22px 0 4px; display: flex; justify-content: space-between; border-bottom: 2px solid #212121; padding-bottom: 3px; }
|
|
.qdoc .bestek table { width: 100%; border-collapse: collapse; }
|
|
.qdoc .bestek td { padding: 4px 8px 4px 0; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
|
|
.qdoc .bestek tr { break-inside: avoid; }
|
|
.qdoc .bestek .info td { color: #5c6670; font-style: italic; }
|
|
.qdoc .bestek .intro { color: #5c6670; font-size: 13px; }
|
|
.qdoc footer { margin-top: 40px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); color: #5c6670; font-size: 12px; text-align: center; }
|
|
@media print {
|
|
.qdoc .page { margin: 0; padding: 0; max-width: none; border-radius: 0; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.qdoc .page { padding: 20px 16px; margin: 0; border-radius: 0; }
|
|
.qdoc header, .qdoc .meta { flex-direction: column; }
|
|
.qdoc .company { text-align: left; }
|
|
.qdoc .totals { width: 100%; }
|
|
}
|
|
</style>
|
|
<div class="qdoc">
|
|
<div class="page">
|
|
<header>
|
|
<img src="{{ url_for('static', filename='logo.svg') }}" alt="{{ s.company_name }}">
|
|
<div class="company">
|
|
<strong>{{ s.company_name }}</strong><br>
|
|
{{ [s.company_address, s.company_postcode_city, s.company_phone, s.company_email, s.company_website]|select|join('<br>'|safe) }}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="meta">
|
|
<div>
|
|
<div class="label">Offerte voor</div>
|
|
{% if c %}
|
|
<strong>{{ c.name }}</strong><br>
|
|
{{ [c.relation_name if c.relation_kind == 'klant' and c.relation_name != c.name, c.company, c.address, (c.postcode ~ ' ' ~ c.city)|trim]|select|join('<br>'|safe) }}
|
|
{% else %}—{% endif %}
|
|
</div>
|
|
<table class="kv">
|
|
<tr><td class="label">Offertenummer</td><td>{{ qt.number }}</td></tr>
|
|
<tr><td class="label">Datum</td><td>{{ qt.date|dt('%d-%m-%Y') }}</td></tr>
|
|
{% if qt.valid_until %}<tr><td class="label">Geldig tot</td><td>{{ qt.valid_until|dt('%d-%m-%Y') }}</td></tr>{% endif %}
|
|
</table>
|
|
</div>
|
|
|
|
<h1>Offerte{% if qt.title %}: {{ qt.title }}{% endif %}</h1>
|
|
{% if qt.intro %}<div class="intro">{{ qt.intro }}</div>{% endif %}
|
|
|
|
<table class="lines">
|
|
<thead><tr><th>Omschrijving</th><th class="num">Aantal</th><th class="num">Prijs</th><th class="num">Btw</th><th class="num">Totaal</th></tr></thead>
|
|
<tbody>
|
|
{% for l in lines %}
|
|
<tr>
|
|
<td class="desc">{{ l.description }}</td>
|
|
<td class="num">{{ l.qty|nr }} {{ l.unit }}</td>
|
|
<td class="num">{{ l.price|euro }}</td>
|
|
<td class="num">{{ l.vat|nr }}%</td>
|
|
<td class="num">{{ (l.qty * l.price)|euro }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="totals">
|
|
<tr><td>Subtotaal excl. btw</td><td class="num">{{ t.subtotal|euro }}</td></tr>
|
|
{% for rate, amount in t.vat %}<tr><td>Btw {{ rate|nr }}%</td><td class="num">{{ amount|euro }}</td></tr>{% endfor %}
|
|
<tr class="grand"><td>Totaal</td><td class="num">{{ t.total|euro }}</td></tr>
|
|
</table>
|
|
|
|
{% if qt.notes %}<div class="notes"><div class="label">Opmerkingen en voorwaarden</div>{{ qt.notes }}</div>{% endif %}
|
|
|
|
<div class="sign"><div>Datum en handtekening opdrachtgever</div><div>Namens {{ s.company_name }}</div></div>
|
|
|
|
<footer>
|
|
{% if s.quote_footer %}<div style="white-space:pre-line;margin-bottom:6px">{{ s.quote_footer }}</div>{% endif %}
|
|
{{ [('KvK ' ~ s.company_kvk) if s.company_kvk, ('Btw ' ~ s.company_btw) if s.company_btw, ('IBAN ' ~ s.company_iban) if s.company_iban]|select|join(' · ') }}
|
|
</footer>
|
|
|
|
{% if bestek %}
|
|
<section class="bestek" id="bestek">
|
|
<h1>Bestek{% if bestek.design.title %}: {{ bestek.design.title }}{% endif %}</h1>
|
|
<p class="intro">Bijlage bij offerte {{ qt.number }}. Omschrijving en hoeveelheden van de woning volgens het ontwerp{% if bestek.units %}
|
|
({{ bestek.units }} module{{ 's' if bestek.units != 1 }}){% endif %}, berekend op {{ bestek.computedAt[:19]|dt('%d-%m-%Y') }}. Hoeveelheden zijn netto
|
|
volgens tekening; de prijzen staan in de offerte.</p>
|
|
{% for ch in bestek.chapters %}
|
|
<h2><span>{{ loop.index }}. {{ ch.name }}</span></h2>
|
|
<table><tbody>
|
|
{% for l in ch.lines %}<tr><td>{{ l.label }}</td><td class="num">{{ l.qty|nr }} {{ l.unit }}</td></tr>{% endfor %}
|
|
{% for l in ch.info %}<tr class="info"><td>{{ l.label }}</td><td class="num">{{ l.qty|nr }} {{ l.unit }}</td></tr>{% endfor %}
|
|
</tbody></table>
|
|
{% endfor %}
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|