Differences

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

--- hot-sauces:habanero_mango_taco_sauce [2024/09/16 08:28] – david
+++ hot-sauces:habanero_mango_taco_sauce [2026/10/24 07:56] (current) – david
@@ Line 14: / Line 14: @@
 ergibt ~12 liter 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; }
+.sauce-calc .note { margin: 15px 0 0; color: #555; font-size: 14px; }
+</style>
+<div class="sauce-calc">
+  <h3>🌶️ Mengen-Rechner</h3>
+  <label><strong>Habaneros gesamt (kg):</strong></label>
+  <input type="number" id="hab" value="3" min="0.1" step="0.1" oninput="calc()">
+  <div id="out"></div>
+  <p class="note">Mangosaft vor der Verwendung eindicken.</p>
+</div>
+<script>
+const R = {
+  'Habaneros gesamt': [1, 'kg', 1],
+  'Mangosaft': [1, 'l', 0],
+  'Mangofruchtfleisch': [1.5/3, 'kg', 0],
+  'Zwiebeln': [1, 'kg', 0],
+  'Knoblauch': [0.5/3, 'kg', 0],
+  'Tomatenmark': [200/3, 'g', 0],
+  'Salz': [200/3, 'g', 0],
+  'Korianderpulver': [45/3, 'g', 0],
+  'Kreuzkümmelpulver': [90/3, 'g', 0],
+  'Condimento Bianco': [1, '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>