Differences

This shows you the differences between two versions of the page.

--- hot-sauces:habanero_zwetschke [2026/10/24 07:56] – david
+++ hot-sauces:habanero_zwetschke [2026/10/24 07:57] (current) – david
@@ Line 10: / Line 10: @@
 ergibt 4,7l sauce
+<html>
+<style>
+.sauce-calc { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 500px; margin: 15px 0; padding: 20px; background: #fff; border: 2px solid #d9534f; border-radius: 8px; }
+.sauce-calc h3 { margin-top: 0; color: #d9534f; }
+.sauce-calc input { width: 100%; padding: 8px; border: 2px solid #ddd; border-radius: 4px; font-size: 14px; margin-bottom: 15px; }
+.sauce-calc input:focus { outline: none; border-color: #d9534f; }
+.sauce-calc .res { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
+.sauce-calc .res:last-child { border-bottom: none; }
+.sauce-calc .amt { font-weight: bold; color: #d9534f; }
+.sauce-calc .base { background: #fff3cd; padding: 8px; margin: 0 -8px; border-left: 3px solid #d9534f; }
+</style>
+<div class="sauce-calc">
+  <h3>🌶️ Mengen-Rechner</h3>
+  <label><strong>Habaneros gesamt (kg):</strong></label>
+  <input type="number" id="hab" value="1" min="0.1" step="0.1" oninput="calc()">
+  <div id="out"></div>
+</div>
+<script>
+const R = {
+  'Habaneros gesamt': [1, 'kg', 1],
+  'Zwetschken, entkernt': [2.8, 'kg', 0],
+  'Zwiebeln': [0.35, 'kg', 0],
+  'Knoblauch': [0.035, 'kg', 0],
+  'Zucker': [250, 'g', 0],
+  'Salz': [50, 'g', 0],
+  'Balsamico-Essig': [0.5, 'l', 0],
+  'Condimento Bianco': [0.5, 'l', 0]
+};
+function calc() {
+  let b = parseFloat(document.getElementById('hab').value) || 0, h = '';
+  for (let [i, d] of Object.entries(R)) {
+    let a = b * d[0];
+    let c = d[1] == 'g' ? Math.round(a) : a.toFixed(2).replace('.', ',');
+    h += `<div class="${d[2] ? 'res base' : 'res'}"><span>${i}</span><span class="amt">${c} ${d[1]}</span></div>`;
+  }
+  document.getElementById('out').innerHTML = h;
+}
+calc();
+</script>
+</html>