3ddruckkalkulation/templates/invoice.html

<!DOCTYPE html>
<html lang="de" data-bs-theme="{% if config.dark_mode %}dark{% else %}light{% endif %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Rechnung erstellen</title>
    <link href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    {# Die Plakette traegt ihre eigene dunkle Platte, sie steht deshalb in
       hellen wie dunklen Reitern. #}
    <link rel="icon" href="{{ url_for('static', filename='img/logo/jet-plakette.svg') }}" type="image/svg+xml">
    <style>
        @import url("https://rsms.me/inter/inter.css");
    </style>
</head>
<body>
    <div class="page">

        <header class="navbar navbar-expand-md">
            <div class="container-xl">
                <div class="navbar-brand pe-0 pe-md-3 py-2 d-flex align-items-center gap-2">
                    <img src="{{ url_for('static', filename='img/logo/jet-design.svg') }}" alt="JET Design" class="marke marke-hell">
                    <img src="{{ url_for('static', filename='img/logo/jet-design-weiss.svg') }}" alt="JET Design" class="marke marke-dunkel">
                    <span class="text-secondary" style="opacity:0.5;">|</span>
                    <span class="fw-semibold"><i class="ti ti-file-invoice me-1"></i>Rechnung erstellen</span>
                </div>
                <div class="navbar-nav flex-row order-md-last">
                    <div class="nav-item me-3">
                        <a href="{{ url_for('settings') }}" class="nav-link px-0" title="Einstellungen">
                            <i class="ti ti-settings icon icon-1"></i>
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="{{ url_for('index') }}" class="nav-link px-0" title="Zuruck zur Kalkulation">
                            <i class="ti ti-arrow-left icon icon-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <div class="container-xl my-4">
            <div class="row justify-content-center">
                <div class="col-lg-8">

                    <form method="POST" action="{{ url_for('invoice_pdf') }}" target="_blank" onchange="scheduleSave()" onkeyup="scheduleSave()">

                        <div class="card mb-3">
                            <div class="card-header"><i class="ti ti-user me-2"></i>Rechnungsdaten</div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Rechnungsnummer</label>
                                        <input type="text" class="form-control" name="rechnungsnummer" data-var="rechnungsnummer" value="{{ config.rechnungsnummer }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Rechnungsdatum</label>
                                        <input type="date" class="form-control" name="datum" data-var="datum" value="{{ config.datum }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Leistungsdatum</label>
                                        <input type="date" class="form-control" name="leistungsdatum" data-var="leistungsdatum" value="{{ config.leistungsdatum }}">
                                        {% if calc.ist_unternehmer %}<div class="form-text">Pflichtangabe nach §14 UStG. Leer lassen, wenn Leistung am Rechnungsdatum erbracht wurde.</div>{% else %}<div class="form-text">Optional &ndash; bei Privatverkauf keine Pflichtangabe.</div>{% endif %}
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Kundenname</label>
                                        <input type="text" class="form-control" name="kundenName" data-var="kundenName" value="{{ config.kundenName }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Kundenadresse</label>
                                        <textarea class="form-control" name="kundenAdresse" data-var="kundenAdresse" rows="3">{{ config.kundenAdresse }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mb-3">
                            <div class="card-header"><i class="ti ti-eye me-2"></i>Vorschau</div>
                            <div class="card-body p-0">
                                <div class="p-3" style="font-family:'Courier New',Courier,monospace;font-size:13px;line-height:1.8;white-space:pre;overflow-x:auto;background:var(--tblr-bg-surface);">LEISTUNGSBESCHREIBUNG:
{{ '\u2500' * 58 }}
{% for pos in calc.positionen -%}
{{ loop.index }}. {{ pos.name if pos.name else (config.projektName if calc.anzahl_positionen == 1 else 'Position ' ~ loop.index) }}
   {{ pos.stueckzahl }} x {{ "%.2f"|format(pos.stueckpreis) }} EUR = {{ "%.2f"|format(pos.zeilensumme) }} EUR
{% endfor %}
{{ '\u2500' * 58 }}
Nettobetrag:           {{ "%.2f"|format(calc.gesamt_netto) }} EUR
{% if calc.mwst_ausweisen %}MwSt. ({{ '%g'|format(calc.mwst_satz) }}%):           {{ "%.2f"|format(calc.gesamt_mwst) }} EUR
{% endif %}{{ '\u2550' * 58 }}
GESAMTBETRAG{% if calc.mwst_ausweisen %} (brutto){% endif %}:          {{ "%.2f"|format(calc.gesamt_endpreis) }} EUR
{% if calc.kleinunternehmer %}
{{ kleinunternehmer_hinweis }}
{% elif calc.privat %}
{{ privat_hinweis }}
{% endif %}
{% if calc.ist_unternehmer %}{{ zahlungsziel }}
{% endif %}{{ dank }}</div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 btn-lg">
                            <i class="ti ti-file-download me-2"></i>PDF speichern
                        </button>
                    </form>

                </div>
            </div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>