Rezeptansicht

by der_robert

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  
  
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
  <script src="/_sdk/element_sdk.js" type="text/javascript"></script>
  <script src="https://cdn.tailwindcss.com" type="text/javascript"></script>
 
 
  <div class="main-container">
   <div class="container-fluid" style="max-width: 1400px;"><!-- 1. Rezeptbild -->
    <div class="gradient-border mb-4">
     <div class="recipe-image-container">
      <svg width="96" height="96" fill="none" stroke="var(--border-color)" viewbox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
      <div class="time-badge">
       ⏱️ 45 Min
      </div>
     </div>
    </div><!-- 2. Rezeptname -->
    <div class="text-center mb-4">
     <h1 id="recipe-title" class="recipe-title">Cremige Pasta Carbonara</h1>
     <div class="d-flex align-items-center justify-content-center gap-2"><span class="rating-stars">⭐⭐⭐⭐⭐</span> <span style="font-size: 0.875rem;">(127 Bewertungen)</span>
     </div>
    </div><!-- 3. Rezeptbeschreibung -->
    <div class="card-custom mb-4">
     <h2 class="section-title"><span style="font-size: 1.5rem;">📝</span> Beschreibung</h2>
     <p id="recipe-description" style="font-size: 1.125rem; line-height: 1.7;">Ein klassisches italienisches Pasta-Gericht mit einer samtigen Sauce aus Eigelb, Pecorino Romano und knusprigem Guanciale. Diese authentische römische Carbonara ist cremig, herzhaft und in nur 30 Minuten zubereitet. Das Geheimnis liegt in der perfekten Temperatur beim Vermischen der Sauce mit der heißen Pasta.</p>
    </div><!-- 4. Schritte und Zutaten -->
    <div class="row g-4 mb-4"><!-- 4b. Zutaten (4 Spalten) - Mobile first -->
     <div...

CSS

body {
      box-sizing: border-box;
    }
    
    :root {
      --bg-primary: #151521;
      --bg-card: #1e1e2d;
      --border-color: #2d2d3f;
      --color-primary: #5c5ced;
      --color-text: #a2a3b7;
      --color-heading: #ffffff;
      --color-accent: #ff6b6b;
      --color-success: #50cd89;
    }
    
    html, body {
      height: 100%;
      background-color: var(--bg-primary);
      color: var(--color-text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    
    .main-container {
      height: 100%;
      overflow-y: auto;
      padding: 1.5rem;
    }
    
    .gradient-border {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
      padding: 2px;
      border-radius: 6px;
    }
    
    .card-custom {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 1.5rem;
    }
    
    .recipe-image-container {
      background-color: var(--bg-card);
      height: 250px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    @media (min-width: 768px) {
      .recipe-image-container {
        height: 350px;
      }
    }
    
    .time-badge {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      background-color: rgba(92, 92, 237, 0.9);
      backdrop-filter: blur(10px);
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      font-weight: bold;
      font-size: 0.9rem;
    }
    
    .recipe-title {
      color: var(--color-heading);
      font-weight: 800;
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }
    
    @media (min-width: 768px) {
      .recipe-title {
        font-size: 2.5rem;
      }
    }
    
    @media (min-width: 992px) {
     ...

JavaScript

const basePortions = 4;
    const baseIngredients = [
      { amount: 400, unit: 'g', name: 'Spaghetti' },
      { amount: 200, unit: 'g', name: 'Guanciale' },
      { amount: 4, unit: '', name: 'Eigelb' },
      { amount: 100, unit: 'g', name: 'Pecorino Romano' },
      { amount: 1, unit: 'TL', name: 'Schwarzer Pfeffer' },
      { amount: 1, unit: 'Prise', name: 'Salz' }
    ];

    let currentPortions = 4;

    function renderIngredients(portions) {
      const container = document.getElementById('ingredients-list');
      const multiplier = portions / basePortions;
      
      let html = '';
      baseIngredients.forEach(function(ing) {
        const scaledAmount = ing.amount * multiplier;
        const displayAmount = scaledAmount % 1 === 0 ? scaledAmount : scaledAmount.toFixed(1);
        
        html += '<div class="ingredient-item">';
        html += '<span class="ingredient-bullet"></span>';
        html += '<span style="color: var(--color-heading); font-weight: 600;">' + displayAmount + ' ' + ing.unit + '</span> ';
        html += '<span>' + ing.name + '</span>';
        html += '</div>';
      });
      
      container.innerHTML = html;
    }

    document.getElementById('decrease-btn').addEventListener('click', function() {
      if (currentPortions > 1) {
        currentPortions--;
        document.getElementById('portion-count').textContent = currentPortions;
        renderIngredients(currentPortions);
      }
    });

    document.getElementById('increase-btn').addEventListener('click', function() {
      if (currentPortions < 20) {
        currentPortions++;
        document.getElementById('portion-count').textContent = currentPortions;
        renderIngredients(currentPortions);
      }
    });

    renderIngredients(currentPortions);

(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var...