feat: MVP 3D-Druck Kostenkalkulator
- 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:
249
assets/app.js
Normal file
249
assets/app.js
Normal 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
68
assets/calc.js
Normal 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
109
assets/excel.js
Normal 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
64
assets/state.js
Normal 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
293
assets/styles.css
Normal 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
22
assets/xlsx.full.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user