"SOBO" - Processing

ID	Autor	Duplicat din	Ultima modificare
`#6749`	6B-Necsulescu Stefan Matei (Stefan_Matei_Necsulescu)	-	Joi, 22 mai 2025, 18:16
<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Bucătăria lui Șobi</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #dde3e9;
      text-align: center;
      padding: 50px;
      overflow-x: hidden;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 10px;
      background-color: #6c8fab;
      color: white;
      cursor: pointer;
      margin: 10px;
    }

    .hidden { display: none; }

    #logo {
      position: fixed;
      top: 20px;
      left: 20px;
      width: 100px;
      z-index: 999;
    }

    #recipeContent img.recipe-img {
      max-width: 400px;
      border-radius: 10px;
      margin-top: 20px;
    }

    #kitchenArea {
      position: relative;
      width: 100%;
      height: 320px;
      margin-top: 30px;
    }

    #kitchenArea .table {
      width: 600px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .ingredient {
      position: absolute;
      width: 80px;
      cursor: grab;
      transition: transform 0.2s, top 0.3s ease, left 0.3s ease;
      z-index: 2;
    }

    .ingredient:hover {
      transform: scale(1.1);
    }

    .ingredient.fixed {
      cursor: default;
      transform: none !important;
    }
  </style>
</head>
<body>

  <img src="logo-sobi.png" alt="Logo Șobi" id="logo">

  <h1>Bine ai venit la bucătăria rozătoarelor!</h1>
  <p>Apasă butonul pentru a începe să gătești!</p>

  <button onclick="showRecipes()">Gătește cu Șobi!</button>

  <div id="recipeButtons" class="hidden" style="margin-top: 30px;">
    <p>Alege o rețetă:</p>
    <button onclick="showRecipe('supa')">Supă de brânză</button>
    <button onclick="showRecipe('pizza')">Pizza crocantă</button>
    <button onclick="showRecipe('tocana')">Tocană de legume</button>
    <button onclick="showRecipe('desert')">Desert cu mere</button>
  </div>

  <div id="recipeContent" style="margin-top: 40px;"></div>

  <script>
    function showRecipes() {
      document.getElementById("recipeButtons").classList.remove("hidden");
    }

    function showRecipe(type) {
      const recipeContent = document.getElementById("recipeContent");

      const recipes = {
        supa: {
          text: "O supă cremoasă de brânză, perfectă pentru zilele reci!",
          image: "supa-branza.jpg"
        },
        pizza: {
          text: "Pizza crocantă cu blat subțire și topping-uri delicioase!",
          image: "pizza-crocanta.jpg"
        },
        tocana: {
          text: "Tocană de legume plină de gust și sănătate.",
          image: "tocana-legume.jpg"
        },
        desert: {
          text: "Desert cald cu mere caramelizate și scorțișoară.",
          image: "desert-mere.jpg"
        }
      };

      const r = recipes[type];

      recipeContent.innerHTML = `
        <p style="font-size: 18px;">${r.text}</p>
        <img src="${r.image}" class="recipe-img" alt="${type}">
        <div id="kitchenArea">
          <img src="masa.png" class="table" alt="masa">
          <img src="rosie.png" class="ingredient" style="top: 40px; left: 25%;" draggable="true">
          <img src="branza.png" class="ingredient" style="top: 60px; left: 55%;" draggable="true">
          <img src="paine.png" class="ingredient" style="top: 90px; left: 35%;" draggable="true">
          <img src="maslina.png" class="ingredient" style="top: 30px; left: 45%;" draggable="true">
          <img src="ulei.png" class="ingredient" style="top: 70px; left: 65%;" draggable="true">
        </div>
      `;

      enableDrag();
    }

    function enableDrag() {
      const ingredients = document.querySelectorAll('.ingredient');
      const table = document.querySelector('.table');

      // Coordonatele fixe pentru zona de așezare
      const dropX = table.offsetLeft + table.offsetWidth / 2 - 40; // centrul mesei - jumătate din lățimea ingredientului
      const dropY = table.offsetTop + 60; // puțin mai jos pe masă

      ingredients.forEach(el => {
        let isDragging = false;

        el.addEventListener('mousedown', function (e) {
          if (el.classList.contains('fixed')) return;

          isDragging = true;
          let shiftX = e.clientX - el.getBoundingClientRect().left;
          let shiftY = e.clientY - el.getBoundingClientRect().top;

          function moveAt(pageX, pageY) {
            el.style.left = pageX - shiftX + 'px';
            el.style.top = pageY - shiftY + 'px';
          }

          function onMouseMove(e) {
            moveAt(e.pageX, e.pageY);
          }

          document.addEventListener('mousemove', onMouseMove);

          el.onmouseup = function () {
            document.removeEventListener('mousemove', onMouseMove);
            el.onmouseup = null;

            if (isDragging) {
              el.style.left = `${dropX}px`;
              el.style.top = `${dropY}px`;
              el.classList.add('fixed');
              el.style.cursor = 'default';
              isDragging = false;
            }
          };
        });

        el.ondragstart = () => false;
      });
    }
  </script>

</body>
</html>
Du-te sus!