126 lines
6.4 KiB
HTML
126 lines
6.4 KiB
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>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 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">
|
|
<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 class="mb-0">
|
|
<label class="form-label">Stuckzahl</label>
|
|
<input type="number" step="1" min="1" class="form-control" data-var="stueckzahl" data-type="number" value="{{ config.stueckzahl }}">
|
|
</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>
|
|
</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>
|