v0.0.4: e-mailtemplates met velden ({voornaam}, {model}, {afzender}…), te kiezen bij nieuwe e-mail, antwoord en contact; inbox met nieuwe e-mail, doorsturen, CC en bijlagen, Verzonden, Archief, zoeken, als ongelezen markeren en alles gelezen; agenda per gebruiker met CalDAV (/dav/, app-wachtwoord in Mijn account); zoeken en Nieuw in de bovenbalk; e-mailinstellingen met voorinstellingen (OVHcloud, Gmail), beveiliging per server, kopie in Verzonden en verbindingstest; offerte in het klantportaal
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
81fc27fa86
commit
366a3f9d17
+20
-150
@@ -1,152 +1,22 @@
|
||||
<!doctype html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Offerte {{ qt.number }}{% if c %} · {{ c.name }}{% endif %}</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@500;600&family=Mukta:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@page { size: A4; margin: 16mm 15mm; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; font-family: "Mukta", system-ui, sans-serif; color: #212121; font-size: 14px; line-height: 1.55; background: #f0f1ec; font-variant-numeric: lining-nums tabular-nums; }
|
||||
.bar { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); padding: 12px 16px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
|
||||
.bar a { color: #b95913; font-weight: 600; text-decoration: none; }
|
||||
.btn { font: 600 15px/1 "Mukta", sans-serif; padding: 12px 22px; border-radius: 50px; border: 1px solid #b95913; background: #b95913; color: #fff; cursor: pointer; }
|
||||
.btn.ghost { background: #fff; color: #b95913; border-color: rgba(185,89,19,.35); }
|
||||
.page { background: #fff; max-width: 210mm; margin: 24px auto; padding: 16mm 15mm; border-radius: 20px; }
|
||||
header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
|
||||
header img { width: 210px; max-width: 45%; }
|
||||
.company { text-align: right; color: #5c6670; font-size: 13px; }
|
||||
.company strong { color: #212121; }
|
||||
.meta { display: flex; justify-content: space-between; gap: 24px; margin: 40px 0 28px; }
|
||||
.label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5c6670; }
|
||||
.kv td { padding: 1px 0 1px 16px; }
|
||||
.kv td:first-child { padding-left: 0; }
|
||||
h1 { font-family: "Kantumruy Pro", sans-serif; font-weight: 500; font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
|
||||
h1::before { content: ""; display: block; width: 3rem; height: 3px; background: #b95913; margin-bottom: 14px; }
|
||||
.intro, .notes { white-space: pre-line; }
|
||||
table.lines { width: 100%; border-collapse: collapse; margin: 24px 0 8px; }
|
||||
.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); }
|
||||
.lines td { padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
|
||||
.lines tr { break-inside: avoid; }
|
||||
.desc { white-space: pre-line; }
|
||||
.desc::first-line { font-weight: 600; }
|
||||
.num { text-align: right; white-space: nowrap; }
|
||||
.totals { margin-left: auto; width: 300px; border-collapse: collapse; }
|
||||
.totals td { padding: 4px 8px; }
|
||||
.totals .grand td { font-family: "Kantumruy Pro", sans-serif; font-weight: 600; font-size: 18px; border-top: 2px solid #212121; padding-top: 8px; }
|
||||
.notes { margin-top: 32px; }
|
||||
.sign { margin-top: 40px; display: flex; gap: 48px; }
|
||||
.sign div { flex: 1; border-top: 1px solid rgba(0,0,0,.3); padding-top: 6px; color: #5c6670; font-size: 12px; }
|
||||
.bestek { break-before: page; margin-top: 48px; }
|
||||
.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; }
|
||||
.bestek table { width: 100%; border-collapse: collapse; }
|
||||
.bestek td { padding: 4px 8px 4px 0; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
|
||||
.bestek tr { break-inside: avoid; }
|
||||
.bestek .info td { color: #5c6670; font-style: italic; }
|
||||
.bestek .intro { color: #5c6670; font-size: 13px; }
|
||||
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 {
|
||||
body { background: #fff; }
|
||||
.bar { display: none; }
|
||||
.page { margin: 0; padding: 0; max-width: none; border-radius: 0; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page { padding: 20px 16px; margin: 0; border-radius: 0; }
|
||||
header, .meta { flex-direction: column; }
|
||||
.company { text-align: left; }
|
||||
.totals { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bar">
|
||||
{% if portal %}
|
||||
<a href="{{ url_for('portal_home') }}">← Terug naar het portaal</a>
|
||||
{% if qt.status == 'verzonden' %}
|
||||
<form method="post" action="{{ url_for('portal_quote_answer', qid=qt.id, choice='accept') }}" onsubmit="return confirm('Wilt u deze offerte accepteren?')"><button class="btn">Offerte accepteren</button></form>
|
||||
<form method="post" action="{{ url_for('portal_quote_answer', qid=qt.id, choice='decline') }}"><button class="btn ghost">Afwijzen</button></form>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="{{ url_for('quote_edit', qid=qt.id) }}">← Terug naar bewerken</a>
|
||||
{% endif %}
|
||||
<button class="btn {{ 'ghost' if portal and qt.status == 'verzonden' }}" onclick="window.print()">Afdrukken / opslaan als PDF</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Offerte {{ qt.number }}{% if c %} · {{ c.name }}{% endif %}{% endblock %}
|
||||
{% block styles %}
|
||||
<style>
|
||||
@page { size: A4; margin: 16mm 15mm; }
|
||||
.qdoc .page { margin: 0 auto 2rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
|
||||
@media print { .qdoc .page { margin: 0; } }
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="head no-print">
|
||||
<div>
|
||||
<a class="label" href="{{ url_for('quote_edit', qid=qt.id) }}">← Offerte {{ qt.number }}</a>
|
||||
<h1>Offerte bekijken</h1>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a class="btn btn-outline-secondary" href="{{ url_for('quote_edit', qid=qt.id) }}">Bewerken</a>
|
||||
<button class="btn btn-primary" type="button" onclick="window.print()">Afdrukken / opslaan als PDF</button>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
{% include '_quote_doc.html' %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user