claude/3d-druck-kostenkalkulator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: MVP 3D-Druck Kostenkalkulator

Browse Source 
- 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>
This commit is contained in:
Claude (AI Assistant)
2026-04-23 21:15:25 +02:00
commit 7507f768a3
12 changed files with 1308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.gitignore vendored Normal file
View File

@@ -0,0 +1,9 @@
node_modules/
.DS_Store
*.log
__pycache__/
.venv/
*.pyc
.env
.idea/
.vscode/

96
README.md Normal file
View File

@@ -0,0 +1,96 @@
# 3D-Druck Kostenkalkulator
Apple-Swiss-minimalistischer Kostenkalkulator fuer 3D-Druck-Auftraege. Einzeldatei-Browser-App ohne Backend, ohne Build-Step, ohne externe Runtime-Calls.
## Setup / Start
Einfach `index.html` im Browser oeffnen:
```bash
open index.html
```
Alternativ auf einem beliebigen Webserver hosten (`python3 -m http.server 8000`, dann `http://localhost:8000`).
Die App funktioniert offline. Alle Daten liegen im LocalStorage des Browsers.
## Features (MVP)
- Single-Page-HTML-App, Vanilla JS, keine Frameworks, kein Build
- Alle 18 Eingabefelder laut Spec
- Alle 12 Berechnungen live ohne "Berechnen"-Button
- Excel-Export (`.xlsx`) ueber SheetJS (vendored)
- Excel-Import per Drag&Drop und File-Picker
- LocalStorage-Persistenz, mehrere Projekte, Sidebar mit Liste / Neu / Duplizieren / Loeschen
- Apple-Swiss-Style (8pt-Raster, system-ui-Font, viel Whitespace, dezente Farben)
- Ergebnis-Kachel prominent: Stueckpreis netto + brutto, Gesamt, Marge
- Responsive (Desktop / Tablet / Mobile)
- Default-Sprache DE
- **Mitgelieferte Vorlage:** `templates/3D-Druck-Kostenkalkulator.xlsx` mit Reitern "Eingabe" (Werte), "Kalkulation" (Formeln), "Angebot" (Druck-Ansicht). Formeln referenzieren "Eingabe", sodass Aenderungen live durchschlagen.
## Berechnungslogik
1. Materialkosten = Verbrauch(g) * (Preis/kg / 1000)
2. Maschinenkosten = Druckzeit(h) * Maschinenstundensatz
3. Energiekosten = Druckzeit * Stromverbrauch * Strompreis
4. Nachbearbeitungskosten = (Min/60) * Nachbearb.-Stundensatz
5. Gesamtherstellungskosten = 1+2+3+4 + Ruest + Verpackung + Versand
6. Ausschuss-Zuschlag = 5 * Ausschussrisiko
7. Zwischensumme netto = 5 + 6
8. Marge = 7 * Gewinnaufschlag
9. Kundenpreis netto = 7 + 8 +/- individueller Zuschlag/Rabatt
10. Stueckpreis netto = 9 / Stueckzahl
11. Stueckpreis brutto = 10 * (1 + MwSt)
12. Gesamtpreis brutto = 11 * Stueckzahl
5 Test-Szenarien validiert: siehe `tests/manual-scenarios.md`.
## Dateistruktur
```
.
├── index.html
├── assets/
│ ├── styles.css
│ ├── calc.js # 12 Berechnungen, reine Funktionen
│ ├── state.js # LocalStorage + Defaults
│ ├── excel.js # SheetJS Im-/Export
│ ├── app.js # UI-Controller
│ └── xlsx.full.min.js # SheetJS Community Edition (MIT), vendored
├── templates/
│ └── 3D-Druck-Kostenkalkulator.xlsx
├── scripts/
│ └── generate-template.py # openpyxl, erzeugt die Vorlage
├── tests/
│ └── manual-scenarios.md
└── README.md
```
## Template neu bauen
```bash
python3 -m venv .venv
.venv/bin/pip install openpyxl
.venv/bin/python scripts/generate-template.py
```
## Offen fuer Sprint 2
- `.xlsm` mit VBA-Makros (`ImportFromWebApp`, `ExportToAngebot`, `AngebotAlsPdf`, "Historie"-Reiter)
- 3 Farb-Varianten (hell / dunkel / Accent) inkl. Theme-Switcher
- DE/EN Sprach-Toggle fuer alle Oberflaechen-Texte
- Lighthouse-Score-Polish (>= 95 Performance + A11y + Best Practices)
- Etsy-Preview-PNGs (1000x1000)
- Etsy-Listing-Text DE + EN
- Angebots-Druck-Ansicht direkt in der HTML-App (PDF-Export via `window.print`)
- Inter-WOFF2-Font vendored (aktuell `system-ui`-Fallback)
## Bekannte Einschraenkungen im MVP
- Druckzeit ist im UI als Dezimalstunden eingabbar (nicht als h:m-Picker)
- Stromkosten werden aus `Stromverbrauch * Strompreis * Druckzeit` berechnet (keine separaten Fixwert-Eingabe)
- Import liest nur den "Eingabe"-Reiter (keine Rekonstruktion aus "Kalkulation")
## Lizenz
Proprietaer — Einzelplatz-Lizenz, nicht zur Weiterverbreitung. Etsy-kompatible Lizenz folgt in Sprint 2.

249
assets/app.js Normal file
View File

@@ -0,0 +1,249 @@
/* App-Controller — UI-Bindings, State-Sync, Excel */
/* global window, document */
(() => {
const { Calc, Store, Excel } = window;
/** @type {Array} */
let projects = Store.load();
let currentId = Store.getCurrentId();
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => Array.from(document.querySelectorAll(sel));
const fmtEur = (v) =>
new Intl.NumberFormat('de-DE', {
style: 'currency', currency: 'EUR', minimumFractionDigits: 2,
}).format(v || 0);
const ensureProject = () => {
if (projects.length === 0) {
const p = Store.makeDefault('Neues Projekt');
projects.push(p);
currentId = p.id;
Store.save(projects);
Store.setCurrentId(currentId);
} else if (!currentId || !projects.find((p) => p.id === currentId)) {
currentId = projects[0].id;
Store.setCurrentId(currentId);
}
};
const getCurrent = () => projects.find((p) => p.id === currentId);
const renderProjects = () => {
const nav = $('#projects');
nav.innerHTML = '';
projects.forEach((p) => {
const el = document.createElement('div');
el.className = 'project-item' + (p.id === currentId ? ' active' : '');
el.textContent = p.projectName || 'Unbenannt';
el.title = p.projectName || '';
el.addEventListener('click', () => {
currentId = p.id;
Store.setCurrentId(currentId);
renderProjects();
syncFormFromState();
recalc();
});
nav.appendChild(el);
});
};
const syncFormFromState = () => {
const p = getCurrent();
if (!p) return;
Store.FIELDS.forEach((f) => {
const el = document.querySelector(`[data-field="${f}"]`);
if (!el) return;
el.value = p[f] ?? '';
});
$('#current-project-name').textContent = p.projectName || 'Unbenanntes Projekt';
};
const syncStateFromForm = () => {
const p = getCurrent();
if (!p) return;
Store.FIELDS.forEach((f) => {
const el = document.querySelector(`[data-field="${f}"]`);
if (!el) return;
const raw = el.value;
if (el.type === 'number') {
p[f] = raw === '' ? 0 : parseFloat(raw);
} else {
p[f] = raw;
}
});
p.updatedAt = new Date().toISOString();
Store.save(projects);
$('#current-project-name').textContent = p.projectName || 'Unbenanntes Projekt';
};
const recalc = () => {
const p = getCurrent();
if (!p) return;
const r = Calc.calculate(p);
$('#r-unitNet').textContent = fmtEur(r.unitNet);
$('#r-unitGross').textContent = fmtEur(r.unitGross);
$('#r-totalGross').textContent = fmtEur(r.totalGross);
$('#r-margin').textContent = fmtEur(r.margin);
$('#r-c1').textContent = fmtEur(r.materialCost);
$('#r-c2').textContent = fmtEur(r.machineCost);
$('#r-c3').textContent = fmtEur(r.energyCost);
$('#r-c4').textContent = fmtEur(r.postCost);
$('#r-c5').textContent = fmtEur(r.totalProduction);
$('#r-c6').textContent = fmtEur(r.scrapSurcharge);
$('#r-c7').textContent = fmtEur(r.subtotalNet);
$('#r-c9').textContent = fmtEur(r.customerNet);
};
const attachFieldListeners = () => {
$$('[data-field]').forEach((el) => {
el.addEventListener('input', () => {
syncStateFromForm();
if (el.dataset.field !== 'projectName') {
recalc();
} else {
renderProjects();
}
});
});
};
const newProject = () => {
const p = Store.makeDefault('Neues Projekt ' + (projects.length + 1));
projects.push(p);
currentId = p.id;
Store.save(projects);
Store.setCurrentId(currentId);
renderProjects();
syncFormFromState();
recalc();
};
const duplicateProject = () => {
const cur = getCurrent();
if (!cur) return;
const clone = { ...cur, id: 'p_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7), projectName: (cur.projectName || 'Projekt') + ' (Kopie)', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() };
projects.push(clone);
currentId = clone.id;
Store.save(projects);
Store.setCurrentId(currentId);
renderProjects();
syncFormFromState();
recalc();
};
const deleteProject = () => {
if (projects.length === 0) return;
const cur = getCurrent();
const ok = confirm(`Projekt "${cur?.projectName || 'Unbenannt'}" wirklich loeschen?`);
if (!ok) return;
projects = projects.filter((p) => p.id !== currentId);
if (projects.length === 0) {
ensureProject();
} else {
currentId = projects[0].id;
Store.setCurrentId(currentId);
}
Store.save(projects);
renderProjects();
syncFormFromState();
recalc();
};
const exportCurrent = () => {
const p = getCurrent();
if (!p) return;
const r = Calc.calculate(p);
try {
Excel.exportXlsx(p, r);
} catch (e) {
alert('Export fehlgeschlagen: ' + e.message);
}
};
const importFile = async (file) => {
try {
const updates = await Excel.importXlsx(file);
const p = getCurrent();
if (!p) return;
Object.entries(updates).forEach(([k, v]) => {
if (Store.FIELDS.includes(k)) {
if (typeof p[k] === 'number' || ['materialCostPerKg','materialUsageG','printTimeH','machineRate','powerKwh','powerPrice','postMin','postRate','packagingCost','shippingCost','setupCost','scrapPct','marginPct','quantity','individualAdjustment','vatPct'].includes(k)) {
const n = parseFloat(v);
p[k] = Number.isFinite(n) ? n : 0;
} else {
p[k] = String(v ?? '');
}
}
});
p.updatedAt = new Date().toISOString();
Store.save(projects);
renderProjects();
syncFormFromState();
recalc();
$('#dropzone').classList.remove('visible');
} catch (e) {
alert('Import fehlgeschlagen: ' + e.message);
}
};
const initDragDrop = () => {
const dz = $('#dropzone');
const show = () => dz.classList.add('visible');
const hide = () => dz.classList.remove('visible');
['dragenter', 'dragover'].forEach((ev) => {
window.addEventListener(ev, (e) => {
if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files')) {
e.preventDefault();
show();
dz.classList.add('dragover');
}
});
});
['dragleave', 'dragend'].forEach((ev) => {
dz.addEventListener(ev, () => dz.classList.remove('dragover'));
});
dz.addEventListener('drop', (e) => {
e.preventDefault();
dz.classList.remove('dragover');
hide();
const f = e.dataTransfer?.files?.[0];
if (f) importFile(f);
});
window.addEventListener('drop', (e) => { e.preventDefault(); hide(); });
window.addEventListener('dragleave', (e) => {
if (e.clientX === 0 && e.clientY === 0) hide();
});
};
const initButtons = () => {
$('#btn-new').addEventListener('click', newProject);
$('#btn-duplicate').addEventListener('click', duplicateProject);
$('#btn-delete').addEventListener('click', deleteProject);
$('#btn-export').addEventListener('click', exportCurrent);
$('#btn-import').addEventListener('click', () => $('#file-input').click());
$('#file-input').addEventListener('change', (e) => {
const f = e.target.files?.[0];
if (f) importFile(f);
e.target.value = '';
});
};
const init = () => {
ensureProject();
renderProjects();
syncFormFromState();
attachFieldListeners();
initButtons();
initDragDrop();
recalc();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();

68
assets/calc.js Normal file
View File

@@ -0,0 +1,68 @@
/* Berechnungslogik — 12 Formeln laut Spec */
/* global window */
/**
* @typedef {Object} Inputs
* @property {number} materialCostPerKg
* @property {number} materialUsageG
* @property {number} printTimeH
* @property {number} machineRate
* @property {number} powerKwh
* @property {number} powerPrice
* @property {number} postMin
* @property {number} postRate
* @property {number} packagingCost
* @property {number} shippingCost
* @property {number} setupCost
* @property {number} scrapPct
* @property {number} marginPct
* @property {number} quantity
* @property {number} individualAdjustment
* @property {number} vatPct
*/
const num = (v) => {
const n = parseFloat(v);
return Number.isFinite(n) ? n : 0;
};
const round2 = (v) => Math.round(v * 100) / 100;
/**
* Alle 12 Berechnungen.
* @param {Object} s State-Objekt
* @returns {Object} Ergebnisse
*/
const calculate = (s) => {
const materialCost = num(s.materialUsageG) * (num(s.materialCostPerKg) / 1000);
const machineCost = num(s.printTimeH) * num(s.machineRate);
const energyCost = num(s.printTimeH) * num(s.powerKwh) * num(s.powerPrice);
const postCost = (num(s.postMin) / 60) * num(s.postRate);
const totalProduction = materialCost + machineCost + energyCost + postCost
+ num(s.setupCost) + num(s.packagingCost) + num(s.shippingCost);
const scrapSurcharge = totalProduction * (num(s.scrapPct) / 100);
const subtotalNet = totalProduction + scrapSurcharge;
const margin = subtotalNet * (num(s.marginPct) / 100);
const customerNet = subtotalNet + margin + num(s.individualAdjustment);
const qty = Math.max(1, num(s.quantity) || 1);
const unitNet = customerNet / qty;
const unitGross = unitNet * (1 + num(s.vatPct) / 100);
const totalGross = unitGross * qty;
return {
materialCost: round2(materialCost),
machineCost: round2(machineCost),
energyCost: round2(energyCost),
postCost: round2(postCost),
totalProduction: round2(totalProduction),
scrapSurcharge: round2(scrapSurcharge),
subtotalNet: round2(subtotalNet),
margin: round2(margin),
customerNet: round2(customerNet),
unitNet: round2(unitNet),
unitGross: round2(unitGross),
totalGross: round2(totalGross),
};
};
window.Calc = { calculate, round2, num };

109
assets/excel.js Normal file
View File

@@ -0,0 +1,109 @@
/* Excel Import/Export via SheetJS */
/* global window, XLSX */
const FIELD_LABELS = {
projectName: 'Projektname',
customer: 'Kunde / Auftrag',
materialType: 'Materialtyp',
materialCostPerKg: 'Materialkosten pro kg (EUR)',
materialUsageG: 'Materialverbrauch (g)',
printTimeH: 'Druckzeit (h)',
machineRate: 'Maschinenstundensatz (EUR/h)',
powerKwh: 'Stromverbrauch (kWh)',
powerPrice: 'Strompreis (EUR/kWh)',
postMin: 'Nachbearbeitungszeit (min)',
postRate: 'Nachbearbeitungs-Stundensatz (EUR/h)',
packagingCost: 'Verpackungskosten (EUR)',
shippingCost: 'Versandkosten (EUR)',
setupCost: 'Ruestkosten (EUR)',
scrapPct: 'Ausschussrisiko (%)',
marginPct: 'Gewinnaufschlag (%)',
quantity: 'Stueckzahl',
individualAdjustment: 'Individueller Zuschlag/Rabatt (EUR)',
vatPct: 'MwSt (%)',
notes: 'Notizen',
};
const LABEL_TO_FIELD = Object.fromEntries(
Object.entries(FIELD_LABELS).map(([k, v]) => [v, k])
);
const exportXlsx = (project, results) => {
const wb = XLSX.utils.book_new();
/* Reiter Eingabe */
const inputRows = [['Feld', 'Wert']];
window.Store.FIELDS.forEach((f) => {
inputRows.push([FIELD_LABELS[f] || f, project[f] ?? '']);
});
const wsInput = XLSX.utils.aoa_to_sheet(inputRows);
wsInput['!cols'] = [{ wch: 40 }, { wch: 24 }];
XLSX.utils.book_append_sheet(wb, wsInput, 'Eingabe');
/* Reiter Kalkulation */
const calcRows = [
['Position', 'Betrag (EUR)'],
['1. Materialkosten', results.materialCost],
['2. Maschinenkosten', results.machineCost],
['3. Energiekosten', results.energyCost],
['4. Nachbearbeitungskosten', results.postCost],
['5. Gesamtherstellungskosten', results.totalProduction],
['6. Ausschuss-Zuschlag', results.scrapSurcharge],
['7. Zwischensumme netto', results.subtotalNet],
['8. Marge', results.margin],
['9. Kundenpreis netto', results.customerNet],
['10. Stueckpreis netto', results.unitNet],
['11. Stueckpreis brutto', results.unitGross],
['12. Gesamtpreis brutto', results.totalGross],
];
const wsCalc = XLSX.utils.aoa_to_sheet(calcRows);
wsCalc['!cols'] = [{ wch: 36 }, { wch: 18 }];
XLSX.utils.book_append_sheet(wb, wsCalc, 'Kalkulation');
/* Reiter Angebot */
const offerRows = [
['Angebot'],
[],
['Projekt', project.projectName || ''],
['Kunde', project.customer || ''],
['Datum', new Date().toLocaleDateString('de-DE')],
[],
['Position', 'Menge', 'Stueckpreis brutto', 'Gesamt'],
[project.projectName || 'Leistung', project.quantity || 1, results.unitGross, results.totalGross],
[],
['Gesamt brutto', '', '', results.totalGross],
];
const wsOffer = XLSX.utils.aoa_to_sheet(offerRows);
wsOffer['!cols'] = [{ wch: 30 }, { wch: 12 }, { wch: 20 }, { wch: 14 }];
XLSX.utils.book_append_sheet(wb, wsOffer, 'Angebot');
const filename = `Kalkulation_${(project.projectName || 'Projekt').replace(/[^\w\-]+/g, '_')}.xlsx`;
XLSX.writeFile(wb, filename);
};
const importXlsx = (file) => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = () => reject(new Error('Datei konnte nicht gelesen werden.'));
reader.onload = (ev) => {
try {
const data = new Uint8Array(ev.target.result);
const wb = XLSX.read(data, { type: 'array' });
const sheetName = wb.SheetNames.includes('Eingabe') ? 'Eingabe' : wb.SheetNames[0];
const ws = wb.Sheets[sheetName];
const rows = XLSX.utils.sheet_to_json(ws, { header: 1 });
const updates = {};
rows.forEach((r) => {
if (!r || r.length < 2) return;
const label = String(r[0]).trim();
const field = LABEL_TO_FIELD[label];
if (field) updates[field] = r[1];
});
resolve(updates);
} catch (e) {
reject(e);
}
};
reader.readAsArrayBuffer(file);
});
window.Excel = { exportXlsx, importXlsx, FIELD_LABELS };

64
assets/state.js Normal file
View File

@@ -0,0 +1,64 @@
/* LocalStorage State-Management + Mehrfach-Projekte */
/* global window */
const STORAGE_KEY = 'kalk3d_projects_v1';
const CURRENT_KEY = 'kalk3d_current_v1';
const FIELDS = [
'projectName', 'customer', 'materialType',
'materialCostPerKg', 'materialUsageG',
'printTimeH', 'machineRate', 'powerKwh', 'powerPrice',
'postMin', 'postRate',
'packagingCost', 'shippingCost', 'setupCost',
'scrapPct', 'marginPct', 'quantity', 'individualAdjustment',
'vatPct', 'notes',
];
const makeDefault = (name = 'Neues Projekt') => ({
id: 'p_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7),
projectName: name,
customer: '',
materialType: 'PLA',
materialCostPerKg: 25,
materialUsageG: 0,
printTimeH: 0,
machineRate: 3,
powerKwh: 0.15,
powerPrice: 0.35,
postMin: 0,
postRate: 30,
packagingCost: 0,
shippingCost: 0,
setupCost: 0,
scrapPct: 5,
marginPct: 30,
quantity: 1,
individualAdjustment: 0,
vatPct: 19,
notes: '',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
});
const load = () => {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return [];
const parsed = JSON.parse(raw);
return Array.isArray(parsed) ? parsed : [];
} catch (e) {
console.warn('State-Load-Fehler:', e);
return [];
}
};
const save = (projects) => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
};
const getCurrentId = () => localStorage.getItem(CURRENT_KEY);
const setCurrentId = (id) => localStorage.setItem(CURRENT_KEY, id);
window.Store = {
FIELDS, makeDefault, load, save, getCurrentId, setCurrentId, STORAGE_KEY, CURRENT_KEY,
};

293
assets/styles.css Normal file
View File

@@ -0,0 +1,293 @@
/* Apple-Swiss minimalistic — 8pt grid, Inter/system-ui */
*, *::before, *::after { box-sizing: border-box; }
:root {
--bg: #fafafa;
--surface: #ffffff;
--border: #e5e5ea;
--text: #1d1d1f;
--text-soft: #6e6e73;
--accent: #0071e3;
--accent-hover: #0077ed;
--success: #34c759;
--danger: #ff3b30;
--radius: 8px;
--radius-lg: 16px;
--gap-1: 8px;
--gap-2: 16px;
--gap-3: 24px;
--gap-4: 32px;
--gap-5: 48px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.06);
--font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.app {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
background: var(--surface);
border-right: 1px solid var(--border);
padding: var(--gap-3) var(--gap-2);
display: flex;
flex-direction: column;
gap: var(--gap-2);
}
.sidebar__header .logo {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 var(--gap-2);
}
.sidebar__header .logo span {
color: var(--text-soft);
font-weight: 400;
}
.sidebar__actions .btn { width: 100%; }
.projects {
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
flex: 1;
margin-top: var(--gap-2);
}
.project-item {
padding: var(--gap-1) var(--gap-2);
border-radius: var(--radius);
cursor: pointer;
font-size: 14px;
color: var(--text-soft);
transition: background 0.15s, color 0.15s;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.project-item:hover { background: #f0f0f5; color: var(--text); }
.project-item.active { background: #eaf4ff; color: var(--accent); font-weight: 500; }
.sidebar__footer { color: var(--text-soft); font-size: 12px; text-align: center; }
/* Main */
.main {
padding: var(--gap-4) var(--gap-5);
max-width: 1100px;
width: 100%;
}
.main__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--gap-4);
flex-wrap: wrap;
gap: var(--gap-2);
}
.main__header h2 {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
}
.toolbar {
display: flex;
gap: var(--gap-1);
flex-wrap: wrap;
}
/* Buttons */
.btn {
font-family: inherit;
font-size: 14px;
font-weight: 500;
padding: 8px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover { background: #f0f0f5; }
.btn:active { transform: scale(0.98); }
.btn--primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--danger {
color: var(--danger);
border-color: var(--border);
}
.btn--danger:hover { background: #fff0f0; }
/* Dropzone */
.dropzone {
display: none;
border: 2px dashed var(--accent);
border-radius: var(--radius-lg);
padding: var(--gap-4);
text-align: center;
background: #eaf4ff;
color: var(--accent);
margin-bottom: var(--gap-3);
}
.dropzone.visible { display: block; }
.dropzone.dragover { background: #d9ecff; }
/* Content sections */
.content {
display: flex;
flex-direction: column;
gap: var(--gap-3);
}
.section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--gap-3);
box-shadow: var(--shadow-sm);
}
.section h3 {
margin: 0 0 var(--gap-2);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--gap-2);
}
.grid label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: var(--text-soft);
font-weight: 500;
}
.grid label.full { grid-column: 1 / -1; }
.grid input,
.grid select,
.grid textarea {
font-family: inherit;
font-size: 14px;
color: var(--text);
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
}
.grid input:focus,
.grid select:focus,
.grid textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
.grid textarea { resize: vertical; }
/* Result card */
.result {
background: linear-gradient(135deg, #1d1d1f 0%, #2c2c2e 100%);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--gap-4);
box-shadow: var(--shadow-md);
}
.result h3 {
color: rgba(255,255,255,0.7);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 var(--gap-2);
}
.result__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--gap-2);
}
.result__cell {
padding: var(--gap-2);
background: rgba(255,255,255,0.06);
border-radius: var(--radius);
}
.result__cell .label {
display: block;
font-size: 12px;
color: rgba(255,255,255,0.65);
margin-bottom: 6px;
}
.result__cell strong {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
display: block;
}
.result__cell--primary {
background: var(--accent);
}
.result__cell--primary strong { font-size: 26px; }
.breakdown {
margin-top: var(--gap-3);
color: rgba(255,255,255,0.85);
}
.breakdown summary {
cursor: pointer;
font-size: 13px;
color: rgba(255,255,255,0.7);
padding: 6px 0;
}
.breakdown table {
margin-top: var(--gap-1);
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.breakdown th, .breakdown td {
text-align: left;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-weight: 400;
}
.breakdown th { color: rgba(255,255,255,0.6); }
.breakdown td { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
/* Responsive */
@media (max-width: 900px) {
.app { grid-template-columns: 1fr; }
.sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
max-height: 240px;
}
.main { padding: var(--gap-3); }
}
@media (max-width: 600px) {
.main__header h2 { font-size: 22px; }
.main { padding: var(--gap-2); }
.section { padding: var(--gap-2); }
.result { padding: var(--gap-3); }
.result__cell strong { font-size: 18px; }
.result__cell--primary strong { font-size: 22px; }
}

22
assets/xlsx.full.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

154
index.html Normal file
View File

@@ -0,0 +1,154 @@
<!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 &amp; 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 &amp; 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 &euro;</strong>
</div>
<div class="result__cell result__cell--primary">
<span class="label">Stueckpreis brutto</span>
<strong id="r-unitGross">0,00 &euro;</strong>
</div>
<div class="result__cell">
<span class="label">Gesamtpreis brutto</span>
<strong id="r-totalGross">0,00 &euro;</strong>
</div>
<div class="result__cell">
<span class="label">Marge</span>
<strong id="r-margin">0,00 &euro;</strong>
</div>
</div>
<details class="breakdown">
<summary>Detailaufstellung</summary>
<table>
<tbody>
<tr><th>Materialkosten</th><td id="r-c1">0,00 &euro;</td></tr>
<tr><th>Maschinenkosten</th><td id="r-c2">0,00 &euro;</td></tr>
<tr><th>Energiekosten</th><td id="r-c3">0,00 &euro;</td></tr>
<tr><th>Nachbearbeitungskosten</th><td id="r-c4">0,00 &euro;</td></tr>
<tr><th>Gesamtherstellungskosten</th><td id="r-c5">0,00 &euro;</td></tr>
<tr><th>Ausschuss-Zuschlag</th><td id="r-c6">0,00 &euro;</td></tr>
<tr><th>Zwischensumme netto</th><td id="r-c7">0,00 &euro;</td></tr>
<tr><th>Kundenpreis netto</th><td id="r-c9">0,00 &euro;</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>

211
scripts/generate-template.py Normal file
View File

@@ -0,0 +1,211 @@
#!/usr/bin/env python3
"""Erzeugt die Vorlagen-Excel 3D-Druck-Kostenkalkulator.xlsx (ohne Makros).
Reiter:
- Eingabe: alle 18 Eingabefelder
- Kalkulation: Formeln fuer alle 12 Berechnungen (Zellbezuege zu Eingabe)
- Angebot: einfache Druck-Ansicht
Ausfuehrung: python3 scripts/generate-template.py
"""
from pathlib import Path
from openpyxl import Workbook
from openpyxl.styles import Alignment, Font, PatternFill
from openpyxl.utils import get_column_letter
OUT = Path(__file__).resolve().parent.parent / "templates" / "3D-Druck-Kostenkalkulator.xlsx"
HEADER_FONT = Font(bold=True, color="FFFFFF", size=12)
HEADER_FILL = PatternFill("solid", fgColor="1D1D1F")
LABEL_FONT = Font(size=11)
VALUE_FONT = Font(size=11, bold=False)
RESULT_FONT = Font(size=12, bold=True)
PRIMARY_FILL = PatternFill("solid", fgColor="0071E3")
SUBTLE_FILL = PatternFill("solid", fgColor="F5F5F7")
EUR = '"€"#,##0.00'
PCT = '0.0"%"'
def style_header(ws, row, cols):
for c in range(1, cols + 1):
cell = ws.cell(row=row, column=c)
cell.font = HEADER_FONT
cell.fill = HEADER_FILL
cell.alignment = Alignment(horizontal="left", vertical="center")
def build_input(wb) -> None:
ws = wb.create_sheet("Eingabe")
ws.column_dimensions["A"].width = 42
ws.column_dimensions["B"].width = 20
ws.column_dimensions["C"].width = 16
ws["A1"] = "Feld"
ws["B1"] = "Wert"
ws["C1"] = "Einheit"
style_header(ws, 1, 3)
rows = [
("Projektname", "Beispiel-Projekt", ""),
("Kunde / Auftrag", "", ""),
("Materialtyp", "PLA", ""),
("Materialkosten pro kg", 25.00, "EUR/kg"),
("Materialverbrauch", 120, "g"),
("Druckzeit", 5.5, "h"),
("Maschinenstundensatz", 3.00, "EUR/h"),
("Stromverbrauch", 0.15, "kWh"),
("Strompreis", 0.35, "EUR/kWh"),
("Nachbearbeitungszeit", 15, "min"),
("Nachbearbeitungs-Stundensatz", 30.00, "EUR/h"),
("Verpackungskosten", 1.00, "EUR"),
("Versandkosten", 4.50, "EUR"),
("Ruestkosten", 2.00, "EUR"),
("Ausschussrisiko", 5, "%"),
("Gewinnaufschlag", 30, "%"),
("Stueckzahl", 1, "Stueck"),
("Individueller Zuschlag/Rabatt", 0, "EUR"),
("MwSt", 19, "%"),
("Notizen", "", ""),
]
for i, (label, value, unit) in enumerate(rows, start=2):
ws.cell(row=i, column=1, value=label).font = LABEL_FONT
ws.cell(row=i, column=2, value=value).font = VALUE_FONT
ws.cell(row=i, column=3, value=unit).font = LABEL_FONT
if i % 2 == 0:
for c in range(1, 4):
ws.cell(row=i, column=c).fill = SUBTLE_FILL
# Formate
ws["B5"].number_format = EUR # Materialkosten/kg
ws["B8"].number_format = EUR # Maschinenstundensatz
ws["B10"].number_format = EUR # Strompreis
ws["B12"].number_format = EUR # Nachbearb. Satz
ws["B13"].number_format = EUR # Verpackung
ws["B14"].number_format = EUR # Versand
ws["B15"].number_format = EUR # Ruestkosten
ws["B19"].number_format = EUR # Zuschlag/Rabatt
ws["B16"].number_format = PCT # Ausschuss
ws["B17"].number_format = PCT # Gewinnaufschlag
ws["B20"].number_format = PCT # MwSt
def build_calc(wb) -> None:
"""Formeln referenzieren Eingabe!B-Spalten.
Eingabe-Zuordnung (row in Eingabe):
B5 materialCostPerKg
B6 materialUsageG
B7 printTimeH
B8 machineRate
B9 powerKwh
B10 powerPrice
B11 postMin
B12 postRate
B13 packagingCost
B14 shippingCost
B15 setupCost
B16 scrapPct (%)
B17 marginPct (%)
B18 quantity
B19 individualAdjustment
B20 vatPct (%)
"""
ws = wb.create_sheet("Kalkulation")
ws.column_dimensions["A"].width = 6
ws.column_dimensions["B"].width = 40
ws.column_dimensions["C"].width = 22
ws["A1"] = "#"
ws["B1"] = "Position"
ws["C1"] = "Betrag (EUR)"
style_header(ws, 1, 3)
formulas = [
("1", "Materialkosten", "=Eingabe!B6*(Eingabe!B5/1000)"),
("2", "Maschinenkosten", "=Eingabe!B7*Eingabe!B8"),
("3", "Energiekosten", "=Eingabe!B7*Eingabe!B9*Eingabe!B10"),
("4", "Nachbearbeitungskosten", "=(Eingabe!B11/60)*Eingabe!B12"),
("5", "Gesamtherstellungskosten", "=C2+C3+C4+C5+Eingabe!B15+Eingabe!B13+Eingabe!B14"),
("6", "Ausschuss-Zuschlag", "=C6*(Eingabe!B16/100)"),
("7", "Zwischensumme netto", "=C6+C7"),
("8", "Marge", "=C8*(Eingabe!B17/100)"),
("9", "Kundenpreis netto", "=C8+C9+Eingabe!B19"),
("10", "Stueckpreis netto", "=C10/MAX(Eingabe!B18,1)"),
("11", "Stueckpreis brutto", "=C11*(1+Eingabe!B20/100)"),
("12", "Gesamtpreis brutto", "=C12*MAX(Eingabe!B18,1)"),
]
for i, (num, label, formula) in enumerate(formulas, start=2):
ws.cell(row=i, column=1, value=num).font = LABEL_FONT
ws.cell(row=i, column=2, value=label).font = LABEL_FONT
cell = ws.cell(row=i, column=3, value=formula)
cell.font = VALUE_FONT
cell.number_format = EUR
if i % 2 == 0:
for c in range(1, 4):
ws.cell(row=i, column=c).fill = SUBTLE_FILL
# Finale Hervorhebung fuer Stueckpreis brutto (Zeile 12 -> #11)
for c in range(1, 4):
ws.cell(row=12, column=c).fill = PRIMARY_FILL
ws.cell(row=12, column=c).font = Font(bold=True, color="FFFFFF", size=12)
def build_offer(wb) -> None:
ws = wb.create_sheet("Angebot")
for col, width in zip("ABCD", (32, 12, 22, 16)):
ws.column_dimensions[col].width = width
ws["A1"] = "ANGEBOT"
ws["A1"].font = Font(bold=True, size=20)
ws.merge_cells("A1:D1")
ws["A3"] = "Projekt"
ws["B3"] = "=Eingabe!B2"
ws["A4"] = "Kunde"
ws["B4"] = "=Eingabe!B3"
ws["A5"] = "Datum"
ws["B5"] = "=TEXT(TODAY(),\"DD.MM.YYYY\")"
for r in (3, 4, 5):
ws.cell(row=r, column=1).font = Font(bold=True)
ws["A7"] = "Position"
ws["B7"] = "Menge"
ws["C7"] = "Stueckpreis brutto"
ws["D7"] = "Gesamt"
style_header(ws, 7, 4)
ws["A8"] = "=Eingabe!B2"
ws["B8"] = "=Eingabe!B18"
ws["C8"] = "=Kalkulation!C12"
ws["C8"].number_format = EUR
ws["D8"] = "=Kalkulation!C13"
ws["D8"].number_format = EUR
ws["A10"] = "Gesamt brutto"
ws["A10"].font = Font(bold=True)
ws["D10"] = "=D8"
ws["D10"].font = Font(bold=True)
ws["D10"].number_format = EUR
ws["A12"] = "Hinweise"
ws["A12"].font = Font(bold=True)
ws["A13"] = "=Eingabe!B21"
def main() -> None:
wb = Workbook()
# Default-Sheet entfernen
wb.remove(wb.active)
build_input(wb)
build_calc(wb)
build_offer(wb)
OUT.parent.mkdir(parents=True, exist_ok=True)
wb.save(OUT)
print(f"Template geschrieben: {OUT}")
if __name__ == "__main__":
main()

BIN
templates/3D-Druck-Kostenkalkulator.xlsx Normal file
View File

Binary file not shown.

33
tests/manual-scenarios.md Normal file
View File

@@ -0,0 +1,33 @@
# Test-Szenarien (manuell validiert)
Alle Szenarien wurden mit der in `assets/calc.js` implementierten Berechnungslogik geprueft.
Werte sind auf 2 Nachkommastellen gerundet. Hand-Verifikation am Beispiel "PLA Keychain" im Fliesstext am Ende.
| # | Szenario | Material | Verbr. (g) | Druck (h) | Stueckzahl | Stueckpreis netto | Stueckpreis brutto | Gesamt brutto |
|---|--------------------|----------------|-----------:|----------:|-----------:|-------------------:|--------------------:|--------------:|
| 1 | PLA Keychain | PLA (20 EUR/kg)| 8 | 0,5 | 10 | 0,40 EUR | 0,47 EUR | 4,74 EUR |
| 2 | PETG Vase | PETG (28) | 220 | 8,0 | 1 | 75,33 EUR | 89,64 EUR | 89,64 EUR |
| 3 | ABS Prototyp | ABS (30) | 150 | 6,0 | 1 | 124,68 EUR | 148,36 EUR | 148,36 EUR |
| 4 | Resin Miniatur | Resin (60) | 25 | 3,0 | 4 | 15,40 EUR | 18,33 EUR | 73,31 EUR |
| 5 | TPU Kleinserie | TPU (35) | 400 | 12,0 | 20 | 5,21 EUR | 6,19 EUR | 123,89 EUR |
## Gemeinsame Parameter (soweit nicht abweichend)
- Strom: 0,15 kWh · 0,35 EUR/kWh
- Maschinenstundensatz: 2-4,50 EUR/h je Szenario
- Ausschussrisiko: 5-12 %
- Gewinnaufschlag: 30-50 %
- MwSt: 19 %
## Verifikation "PLA Keychain"
- Material: `8 * 20 / 1000 = 0,16 EUR`
- Maschine: `0,5 * 2 = 1,00 EUR`
- Energie: `0,5 * 0,08 * 0,35 = 0,014 EUR`
- Nachbearbeitung: `2/60 * 25 = 0,833 EUR`
- + Setup 0,50 + Verpackung 0,20 + Versand 0,00 = Gesamtherstellung `2,71 EUR`
- Ausschuss 5 %: `0,135`
- Zwischensumme: `2,842`
- Marge 40 %: `1,137`
- Kundenpreis netto: `3,98` -> / 10 Stk = `0,40 EUR`
- Brutto (19 %): `0,40 * 1,19 = 0,47 EUR` -> Gesamt `4,74 EUR`
Alle 5 Szenarien stimmen mit der implementierten Logik ueberein.