Claude
7507f768a3
- Single-Page HTML-App mit allen 18 Eingabefeldern - 12 Berechnungen live (calc.js, reine Funktionen) - LocalStorage-Persistenz, Mehrfach-Projekte via Sidebar - Excel Im-/Export ueber SheetJS (vendored, MIT) - Drag&Drop + File-Picker-Import - Apple-Swiss-Styling, responsive - Vorlagen-Excel mit 3 Reitern (Eingabe/Kalkulation/Angebot), Formeln referenzieren Eingabe - openpyxl-Script fuer reproduzierbaren Template-Build - 5 Test-Szenarien validiert Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
155 lines
6.8 KiB
HTML
155 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>3D-Druck Kostenkalkulator</title>
|
|
<meta name="description" content="Apple-Swiss minimalistischer Kostenkalkulator fuer 3D-Druck-Auftraege. Lokal, ohne Backend." />
|
|
<link rel="stylesheet" href="assets/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar__header">
|
|
<h1 class="logo">3D-Druck<br/><span>Kalkulator</span></h1>
|
|
</div>
|
|
<div class="sidebar__actions">
|
|
<button class="btn btn--primary" id="btn-new">Neues Projekt</button>
|
|
</div>
|
|
<nav class="projects" id="projects"></nav>
|
|
<div class="sidebar__footer">
|
|
<small>v0.1 MVP</small>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<header class="main__header">
|
|
<h2 id="current-project-name">Unbenanntes Projekt</h2>
|
|
<div class="toolbar">
|
|
<button class="btn" id="btn-duplicate">Duplizieren</button>
|
|
<button class="btn btn--danger" id="btn-delete">Loeschen</button>
|
|
<button class="btn" id="btn-import">Excel Import</button>
|
|
<input type="file" id="file-input" accept=".xlsx" hidden />
|
|
<button class="btn btn--primary" id="btn-export">Excel Export</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="dropzone" id="dropzone">
|
|
<p>Excel-Datei hier ablegen zum Importieren</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<section class="section">
|
|
<h3>Projekt</h3>
|
|
<div class="grid">
|
|
<label>Projektname<input type="text" data-field="projectName" /></label>
|
|
<label>Kunde / Auftrag<input type="text" data-field="customer" /></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>Material</h3>
|
|
<div class="grid">
|
|
<label>Materialtyp
|
|
<select data-field="materialType">
|
|
<option value="PLA">PLA</option>
|
|
<option value="PETG">PETG</option>
|
|
<option value="ABS">ABS</option>
|
|
<option value="ASA">ASA</option>
|
|
<option value="TPU">TPU</option>
|
|
<option value="Resin">Resin</option>
|
|
<option value="Sonstiges">Sonstiges</option>
|
|
</select>
|
|
</label>
|
|
<label>Materialkosten (EUR/kg)<input type="number" step="0.01" min="0" data-field="materialCostPerKg" /></label>
|
|
<label>Materialverbrauch (g)<input type="number" step="0.1" min="0" data-field="materialUsageG" /></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>Maschine & Energie</h3>
|
|
<div class="grid">
|
|
<label>Druckzeit (h)<input type="number" step="0.01" min="0" data-field="printTimeH" /></label>
|
|
<label>Maschinenstundensatz (EUR/h)<input type="number" step="0.01" min="0" data-field="machineRate" /></label>
|
|
<label>Stromverbrauch (kWh)<input type="number" step="0.01" min="0" data-field="powerKwh" /></label>
|
|
<label>Strompreis (EUR/kWh)<input type="number" step="0.001" min="0" data-field="powerPrice" /></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>Nachbearbeitung</h3>
|
|
<div class="grid">
|
|
<label>Nachbearbeitungszeit (min)<input type="number" step="1" min="0" data-field="postMin" /></label>
|
|
<label>Nachbearbeitungs-Stundensatz (EUR/h)<input type="number" step="0.01" min="0" data-field="postRate" /></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>Versand & Extras</h3>
|
|
<div class="grid">
|
|
<label>Verpackungskosten (EUR)<input type="number" step="0.01" min="0" data-field="packagingCost" /></label>
|
|
<label>Versandkosten (EUR)<input type="number" step="0.01" min="0" data-field="shippingCost" /></label>
|
|
<label>Ruestkosten (EUR)<input type="number" step="0.01" min="0" data-field="setupCost" /></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>Kalkulation</h3>
|
|
<div class="grid">
|
|
<label>Ausschussrisiko (%)<input type="number" step="0.1" min="0" data-field="scrapPct" /></label>
|
|
<label>Gewinnaufschlag (%)<input type="number" step="0.1" min="0" data-field="marginPct" /></label>
|
|
<label>Stueckzahl<input type="number" step="1" min="1" data-field="quantity" value="1" /></label>
|
|
<label>Individueller Zuschlag/Rabatt (EUR)<input type="number" step="0.01" data-field="individualAdjustment" /></label>
|
|
<label>MwSt (%)<input type="number" step="0.1" min="0" data-field="vatPct" value="19" /></label>
|
|
<label class="full">Notizen<textarea data-field="notes" rows="2"></textarea></label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="result" id="result">
|
|
<h3>Ergebnis</h3>
|
|
<div class="result__grid">
|
|
<div class="result__cell">
|
|
<span class="label">Stueckpreis netto</span>
|
|
<strong id="r-unitNet">0,00 €</strong>
|
|
</div>
|
|
<div class="result__cell result__cell--primary">
|
|
<span class="label">Stueckpreis brutto</span>
|
|
<strong id="r-unitGross">0,00 €</strong>
|
|
</div>
|
|
<div class="result__cell">
|
|
<span class="label">Gesamtpreis brutto</span>
|
|
<strong id="r-totalGross">0,00 €</strong>
|
|
</div>
|
|
<div class="result__cell">
|
|
<span class="label">Marge</span>
|
|
<strong id="r-margin">0,00 €</strong>
|
|
</div>
|
|
</div>
|
|
<details class="breakdown">
|
|
<summary>Detailaufstellung</summary>
|
|
<table>
|
|
<tbody>
|
|
<tr><th>Materialkosten</th><td id="r-c1">0,00 €</td></tr>
|
|
<tr><th>Maschinenkosten</th><td id="r-c2">0,00 €</td></tr>
|
|
<tr><th>Energiekosten</th><td id="r-c3">0,00 €</td></tr>
|
|
<tr><th>Nachbearbeitungskosten</th><td id="r-c4">0,00 €</td></tr>
|
|
<tr><th>Gesamtherstellungskosten</th><td id="r-c5">0,00 €</td></tr>
|
|
<tr><th>Ausschuss-Zuschlag</th><td id="r-c6">0,00 €</td></tr>
|
|
<tr><th>Zwischensumme netto</th><td id="r-c7">0,00 €</td></tr>
|
|
<tr><th>Kundenpreis netto</th><td id="r-c9">0,00 €</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="assets/xlsx.full.min.js"></script>
|
|
<script src="assets/calc.js"></script>
|
|
<script src="assets/state.js"></script>
|
|
<script src="assets/excel.js"></script>
|
|
<script src="assets/app.js"></script>
|
|
</body>
|
|
</html>
|