Flask-Web-App statt Tkinter: Live-Berechnung, PDF-Rechnung, Dark Mode, Tabler CSS
This commit is contained in:
Erik Thiele
166
templates/index.html
Normal file
166
templates/index.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!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>3D-Druck Kostenkalkulation</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') }}">
|
||||
<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 navbar-brand-autodark pe-0 pe-md-3 py-2 d-flex align-items-center gap-2">
|
||||
<span class="fw-bold">JET Design</span>
|
||||
<span class="text-secondary" style="opacity:0.5;">|</span>
|
||||
<span class="fw-semibold">3D Druck Kostenkalkulator</span>
|
||||
</div>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item">
|
||||
<button class="nav-link px-0" id="dark-mode-btn" onclick="toggleDarkMode()" title="Dark Mode umschalten">
|
||||
<i class="ti ti-{% if config.dark_mode %}sun{% else %}moon{% endif %} icon icon-1" id="dark-mode-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container-xl my-4">
|
||||
<div class="row g-4">
|
||||
|
||||
<!-- Linke Spalte: Formular -->
|
||||
<div class="col-lg-6">
|
||||
<form id="calc-form" onchange="onInputChange()" onkeyup="onInputChange()">
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-info-circle me-2"></i>Projektinformationen</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Projektname</label>
|
||||
<input type="text" class="form-control" data-var="projektName" value="{{ config.projektName }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-box me-2"></i>Material</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Gewicht (Gramm)</label>
|
||||
<input type="number" step="0.01" class="form-control" data-var="materialGewicht" data-type="number" value="{{ config.materialGewicht }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Preis pro kg (EUR)</label>
|
||||
<input type="number" step="0.01" class="form-control" data-var="materialPreisProKg" data-type="number" value="{{ config.materialPreisProKg }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-printer me-2"></i>Druckparameter</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Druckzeit (Minuten)</label>
|
||||
<input type="number" step="1" class="form-control" data-var="druckzeit" data-type="number" value="{{ config.druckzeit }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Stromverbrauch (kW)</label>
|
||||
<input type="number" step="0.01" class="form-control" data-var="stromverbrauch" data-type="number" value="{{ config.stromverbrauch }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Strompreis (EUR/kWh)</label>
|
||||
<input type="number" step="0.01" class="form-control" data-var="strompreis" data-type="number" value="{{ config.strompreis }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-tools me-2"></i>Drucker Abschreibung</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Anschaffungspreis (EUR)</label>
|
||||
<input type="number" step="1" class="form-control" data-var="druckerAnschaffung" data-type="number" value="{{ config.druckerAnschaffung }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Nutzungsdauer (Jahre)</label>
|
||||
<input type="number" step="0.5" class="form-control" data-var="druckerNutzungsdauer" data-type="number" value="{{ config.druckerNutzungsdauer }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Betriebsstunden pro Jahr</label>
|
||||
<input type="number" step="1" class="form-control" data-var="druckerBetriebsstunden" data-type="number" value="{{ config.druckerBetriebsstunden }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-users me-2"></i>Arbeitskosten</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Arbeitszeit (Minuten)</label>
|
||||
<input type="number" step="1" class="form-control" data-var="arbeitszeit" data-type="number" value="{{ config.arbeitszeit }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Stundenlohn (EUR)</label>
|
||||
<input type="number" step="0.5" class="form-control" data-var="stundenlohn" data-type="number" value="{{ config.stundenlohn }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-currency-euro me-2"></i>Gewinnmarge</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-0">
|
||||
<label class="form-label">Gewinnmarge (%)</label>
|
||||
<input type="number" step="0.5" class="form-control" data-var="gewinnmarge" data-type="number" value="{{ config.gewinnmarge }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Spalte: Ergebnisse -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-chart-bar me-2"></i>Kostenaufstellung</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="result-box p-3" id="result-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="ti ti-info-square me-2"></i>Detaillierte Informationen</div>
|
||||
<div class="card-body text-secondary" id="detail-text" style="font-size:0.9rem;white-space:pre"></div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ url_for('invoice') }}" class="btn btn-primary flex-fill">
|
||||
<i class="ti ti-file-invoice me-1"></i>Rechnung
|
||||
</a>
|
||||
<button class="btn btn-outline-primary flex-fill" onclick="exportData()">
|
||||
<i class="ti ti-download me-1"></i>Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3" id="notification" style="z-index:9999;display:none">
|
||||
<div class="toast show bg-primary text-white">
|
||||
<div class="toast-body fw-semibold" id="notification-msg"></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>
|
||||
98
templates/invoice.html
Normal file
98
templates/invoice.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!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') }}">
|
||||
<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 navbar-brand-autodark pe-0 pe-md-3 py-2 d-flex align-items-center gap-2">
|
||||
<span class="fw-bold">JET Design</span>
|
||||
<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">
|
||||
<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">
|
||||
|
||||
<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" value="{{ config.rechnungsnummer }}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Datum</label>
|
||||
<input type="text" class="form-control" name="datum" value="{{ config.datum }}">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Kundenname</label>
|
||||
<input type="text" class="form-control" name="kundenName" value="{{ config.kundenName }}">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Kundenadresse</label>
|
||||
<textarea class="form-control" name="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' * 50 }}
|
||||
Position: 3D-Druck - {{ config.projektName }}
|
||||
Menge: 1
|
||||
Einzelpreis: {{ "%.2f"|format(calc.verkaufspreis) }} EUR
|
||||
Gesamt: {{ "%.2f"|format(calc.verkaufspreis) }} EUR
|
||||
|
||||
{{ '\u2500' * 50 }}
|
||||
Nettobetrag: {{ "%.2f"|format(calc.verkaufspreis) }} EUR
|
||||
MwSt. (19%): {{ "%.2f"|format(calc.mwst) }} EUR
|
||||
{{ '\u2550' * 50 }}
|
||||
GESAMTBETRAG: {{ "%.2f"|format(calc.gesamt_brutto) }} EUR
|
||||
|
||||
Zahlbar innerhalb von 14 Tagen ohne Abzug.
|
||||
Vielen Dank fur Ihren Auftrag!</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>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user