New version

public/assets/.gitkeep

@@ -1 +0,0 @@
-

public/assets/app.css

@@ -0,0 +1,235 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
+:root {
+  --bg: #f5efe6;
+  --bg-accent: #eef1f8;
+  --ink: #1d1d1f;
+  --muted: #5b5b64;
+  --card: #ffffff;
+  --line: #e2e2e8;
+  --accent: #ffb454;
+  --accent-dark: #eb7b1c;
+  --ok: #1f8a4c;
+  --warn: #d97706;
+  --no: #b91c1c;
+  --shadow: 0 22px 60px rgba(20, 20, 45, 0.08);
+}
+
+* { box-sizing: border-box; }
+
+.app-body {
+  margin: 0;
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  color: var(--ink);
+  background: radial-gradient(circle at 20% 10%, rgba(255, 210, 150, 0.35), transparent 55%),
+              radial-gradient(circle at 90% 5%, rgba(185, 221, 255, 0.35), transparent 60%),
+              var(--bg);
+  min-height: 100vh;
+}
+
+.mm-shell {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 3rem 2rem 4rem;
+  animation: fadeUp 0.6s ease both;
+}
+
+.mm-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mm-kicker {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-size: 0.7rem;
+  color: var(--muted);
+  margin: 0 0 0.6rem 0;
+}
+
+.mm-title {
+  font-size: clamp(2rem, 2.6vw, 2.8rem);
+  margin: 0;
+}
+
+.mm-subtitle {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  max-width: 36rem;
+}
+
+.mm-status {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 0.85rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--card);
+}
+
+.mm-card {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 1.5rem;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  padding: 1.75rem;
+  box-shadow: var(--shadow);
+}
+
+.mm-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  border-right: 1px dashed var(--line);
+  padding-right: 1.5rem;
+}
+
+.mm-panel h2 {
+  font-size: 1rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.mm-panel label {
+  display: block;
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.4rem;
+  color: var(--muted);
+}
+
+.mm-panel select {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.55rem 0.75rem;
+  font-size: 0.95rem;
+  background: #fff;
+}
+
+.mm-panel p {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.mm-tip {
+  font-size: 0.8rem;
+  color: var(--muted);
+  padding: 0.75rem;
+  border-radius: 16px;
+  background: var(--bg-accent);
+}
+
+.mm-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.mm-table-wrap {
+  overflow: auto;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: #fff;
+  max-height: 70vh;
+}
+
+.mm-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.mm-table thead th {
+  position: sticky;
+  top: 0;
+  background: #f8f8fb;
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  border-bottom: 1px solid var(--line);
+}
+
+.mm-table tbody td {
+  padding: 0.7rem 0.75rem;
+  border-bottom: 1px solid #f0f0f4;
+  vertical-align: top;
+}
+
+.mm-table tbody tr:nth-child(even) {
+  background: #fcfcff;
+}
+
+.mm-table tbody tr.is-alt {
+  background: #fcfcff;
+}
+
+.mm-table [data-printer] {
+  background: rgba(248, 247, 255, 0.8);
+}
+
+.mm-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border-radius: 999px;
+  padding: 0.25rem 0.6rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.mm-tag.ok { background: rgba(31, 138, 76, 0.12); color: var(--ok); }
+.mm-tag.warn { background: rgba(217, 119, 6, 0.12); color: var(--warn); }
+.mm-tag.no { background: rgba(185, 28, 28, 0.12); color: var(--no); }
+.mm-tag.addon { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
+
+.mm-sub {
+  font-size: 0.75rem;
+  color: var(--muted);
+  margin-top: 0.25rem;
+}
+
+.mm-error {
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  border: 1px solid rgba(185, 28, 28, 0.25);
+  background: rgba(185, 28, 28, 0.08);
+  color: var(--no);
+  font-size: 0.9rem;
+}
+
+.mm-disclaimer {
+  background: #f9fafc;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  padding: 1rem 1.25rem;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 980px) {
+  .mm-card {
+    grid-template-columns: 1fr;
+  }
+  .mm-sidebar {
+    border-right: none;
+    border-bottom: 1px dashed var(--line);
+    padding-right: 0;
+    padding-bottom: 1rem;
+  }
+}
+
+@media (max-width: 720px) {
+  .mm-shell { padding: 2rem 1.25rem 3rem; }
+  .mm-header { flex-direction: column; align-items: flex-start; }
+}

public/assets/app.js

@@ -0,0 +1,200 @@
+(function () {
+  const API_BASE = '/api';
+  const printerSelect = document.getElementById('printerSelect');
+  const printerCompare = document.getElementById('printerCompare');
+  const matBody = document.getElementById('matBody');
+  const tableHead = document.getElementById('tableHead');
+  const statusEl = document.getElementById('status');
+  const errorBox = document.getElementById('errorBox');
+
+  if (!printerSelect || !printerCompare || !matBody || !tableHead) {
+    return;
+  }
+
+  function setStatus(text) {
+    if (statusEl) {
+      statusEl.textContent = text;
+    }
+  }
+
+  function showError(msg) {
+    if (!errorBox) return;
+    errorBox.hidden = false;
+    errorBox.textContent = msg;
+  }
+
+  function clearError() {
+    if (!errorBox) return;
+    errorBox.hidden = true;
+    errorBox.textContent = '';
+  }
+
+  function escapeHtml(value) {
+    return String(value ?? '')
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  async function fetchJSON(path) {
+    const res = await fetch(API_BASE + path, { headers: { 'Accept': 'application/json' } });
+    if (!res.ok) throw new Error('HTTP ' + res.status + ' for ' + path);
+    return await res.json();
+  }
+
+  async function loadPrinters() {
+    try {
+      setStatus('Lade Drucker ...');
+      const data = await fetchJSON('/printers');
+      printerSelect.innerHTML = '';
+      printerCompare.innerHTML = '';
+
+      if (!Array.isArray(data) || data.length === 0) {
+        printerSelect.innerHTML = '<option value="">(keine Drucker gefunden)</option>';
+        setStatus('Keine Drucker gefunden');
+        return;
+      }
+
+      data.forEach(p => {
+        printerSelect.appendChild(new Option(p.name, p.id));
+        printerCompare.appendChild(new Option(p.name, p.id));
+      });
+
+      loadSinglePrinter(data[0].id);
+      setStatus('Drucker geladen');
+    } catch (err) {
+      console.error(err);
+      showError('Konnte Drucker nicht laden.');
+      setStatus('Fehler');
+    }
+  }
+
+  async function loadSinglePrinter(id) {
+    if (!id) return;
+    clearError();
+    setStatus('Lade Materialien ...');
+    try {
+      const data = await fetchJSON('/printer-materials?id=' + encodeURIComponent(id));
+      renderTable([data]);
+      setStatus('Fertig');
+    } catch (err) {
+      console.error(err);
+      showError('Konnte Materialien für den Drucker nicht laden.');
+      setStatus('Fehler');
+    }
+  }
+
+  async function loadMultiplePrinters(ids) {
+    if (!ids.length) return;
+    clearError();
+    setStatus('Lade Vergleich ...');
+    try {
+      const datasets = await Promise.all(
+        ids.map(id => fetchJSON('/printer-materials?id=' + encodeURIComponent(id)))
+      );
+      renderTable(datasets);
+      setStatus('Vergleich geladen');
+    } catch (err) {
+      console.error(err);
+      showError('Konnte einen der gewählten Drucker nicht laden.');
+      setStatus('Fehler');
+    }
+  }
+
+  function renderTable(datasets) {
+    const baseHead = [
+      'Material',
+      'Eigenschaften',
+      'Tg °C',
+      'Düse',
+      'Platte',
+      'Zusatz',
+      'Anwendung',
+      'Kinder',
+      'Emission'
+    ].map(label => `<th>${label}</th>`).join('');
+
+    let printerCols = '';
+    datasets.forEach(ds => {
+      if (ds && ds.printer) {
+        printerCols += `<th data-printer="${escapeHtml(ds.printer.id)}">${escapeHtml(ds.printer.name)}</th>`;
+      }
+    });
+
+    tableHead.innerHTML = baseHead + printerCols;
+
+    const materials = (datasets[0] && datasets[0].materials) ? datasets[0].materials : [];
+    matBody.innerHTML = '';
+
+    if (!materials.length) {
+      const empty = document.createElement('tr');
+      empty.innerHTML = '<td colspan="12">Keine Materialien gefunden.</td>';
+      matBody.appendChild(empty);
+      return;
+    }
+
+    materials.forEach((m, idx) => {
+      const tr = document.createElement('tr');
+      tr.className = idx % 2 === 0 ? '' : 'is-alt';
+
+      const kid = m.kid_safety === 'safe' ? 'grün' : (m.kid_safety === 'limited' ? 'gelb' : 'rot');
+      const em = m.emission === 'low' ? 'niedrig' : (m.emission === 'medium' ? 'mittel' : 'hoch');
+
+      let html = '';
+      html += `<td><strong>${escapeHtml(m.code)}</strong><div class="mm-sub">${escapeHtml(m.short_desc || '')}</div></td>`;
+      html += `<td>${escapeHtml(m.properties || '')}</td>`;
+      html += `<td>${escapeHtml(m.tg_celsius || '–')}</td>`;
+      html += `<td>${escapeHtml(m.nozzle_req || '')}</td>`;
+      html += `<td>${escapeHtml(m.plate_req || '')}</td>`;
+      html += `<td>${escapeHtml(m.extra_req || '')}</td>`;
+      html += `<td>${escapeHtml(m.application || '')}</td>`;
+      html += `<td>${escapeHtml(kid)}</td>`;
+      html += `<td>${escapeHtml(em)}</td>`;
+
+      datasets.forEach(ds => {
+        const printerId = ds && ds.printer ? ds.printer.id : '';
+        const match = ds.materials.find(x => x.id === m.id || x.code === m.code);
+        if (!match || !match.support_level) {
+          html += `<td data-printer="${escapeHtml(printerId)}"><span class="mm-tag">unbekannt</span></td>`;
+        } else {
+          let badge = '';
+          if (match.support_level === 'full') {
+            badge = '<span class="mm-tag ok">voll</span>';
+          } else if (match.support_level === 'partial') {
+            badge = '<span class="mm-tag warn">teilw.</span>';
+          } else if (match.support_level === 'with_addon') {
+            badge = '<span class="mm-tag addon">Zusatz</span>';
+          } else {
+            badge = '<span class="mm-tag no">nein</span>';
+          }
+          const note = match.partial_reason
+            ? `<div class="mm-sub">${escapeHtml(match.partial_reason)}</div>`
+            : (match.extra_info ? `<div class="mm-sub">${escapeHtml(match.extra_info)}</div>` : '');
+          html += `<td data-printer="${escapeHtml(printerId)}">${badge}${note}</td>`;
+        }
+      });
+
+      tr.innerHTML = html;
+      matBody.appendChild(tr);
+    });
+  }
+
+  printerSelect.addEventListener('change', e => {
+    const id = e.target.value;
+    if (id) {
+      loadSinglePrinter(id);
+      printerCompare.selectedIndex = -1;
+    }
+  });
+
+  printerCompare.addEventListener('change', e => {
+    const ids = Array.from(e.target.selectedOptions).map(o => o.value);
+    if (ids.length) {
+      loadMultiplePrinters(ids);
+    }
+  });
+
+  loadPrinters();
+})();

public/assets/bilder/.gitkeep

@@ -1 +0,0 @@
-

public/assets/css/.gitkeep

@@ -1 +0,0 @@
-

public/assets/fonts/.gitkeep

@@ -1 +0,0 @@
-

public/assets/js/.gitkeep

@@ -1 +0,0 @@
-