Поле - рецепты

const recipe = {
  steps: [
    {
      description: 'Нарезать овощи',
      duration: 180 // секунд
    },
    {
      description: 'Обжарить на сковороде',
      duration: 300
    }
    // ...другие шаги
  ],
  totalTime: 480 // общее время (сумма durations)
};
 

class RecipeTimer {
  constructor(recipe) {
    this.recipe = recipe;
    this.currentStep = 0;
    this.timerId = null;
    this.isRunning = false;
    this.remainingTime = this.recipe.steps[0].duration;
  }
 
  start() {
    if (this.isRunning) return;
    this.isRunning = true;
    this.updateDisplay();
    this.timerId = setInterval(() => {
      this.tick();
    }, 1000);
  }
 
  pause() {
    clearInterval(this.timer Id);
    this.isRunning = false;
  }
 
  nextStep() {
    this.pause();
    this.currentStep++;
    if (this.currentStep >= this.recipe.steps.length) {
      this.showCompletion();
      return;
    }
    this.remainingTime = this.recipe.steps[this.currentStep].duration;
    this.updateDisplay();
  }
 
  tick() {
    if (this.remainingTime <= 0) {
      this.notifyStepEnd();
      this.nextStep();
    } else {
      this.remainingTime--;
      this.updateDisplay();
    }
  }
 
  updateDisplay() {
    const minutes = Math.floor(this.remainingTime / 60);
    const seconds = this.remainingTime % 60;
    document.getElementById('timer').textContent = 
      `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 
    document.getElementById('step-description').textContent = 
      this.recipe.steps[this.currentStep].description;
  }
 
  notifyStepEnd() {
    // Звуковое оповещение
    const audio = new Audio('/sound/beep.mp3');
    audio.play();
 
    // Браузерное уведомление (если разрешено)
    if (Notification.permission === 'granted') {
      new Notification('Время следующего шага!');
    }
 
    // Визуальный эффект
    document.body.classList.add('flash');
    setTimeout(() => {
      document.body.classList.remove('flash');
    }, 500);
  }
 
  showCompletion() {
    alert('Рецепт готов!');
    this.reset();
  }
 
  reset() {
    this.pause();
    this.currentStep = 0;
    this.remainingTime = this.recipe.steps[0].duration;
    this.updateDisplay();
  }
}
 

<div class="recipe-player">
  <div id="step-description" class="step">Шаг 1: Нарезать овощи</div>
  <div id="timer" class="timer">03:00</div>
  <div class="controls">
    <button onclick="timer.start()">Старт</button>
    <button onclick="timer.pause()">Пауза</button>
    <button onclick="timer.nextStep()">Следующий шаг</button>
    <button onclick="timer.reset()">Сброс</button>
  </div>
  <div class="progress"></div>
</div>
 

.flash {
  animation: flash 0.5s ease-in-out;
}
 
@keyframes flash {
  0% { background-color: #fff; }
  50% { background-color: #ffeb3b; }
  100% { background-color: #fff; }
}
 
.timer {
  font-size: 2rem;
  font-weight: bold;
  margin: 1rem 0;
}

updateProgress() {
  const total = this.recipe.totalTime;
  const elapsed = total - this.remainingTime;
  const percent = (elapsed / total) * 100;
  document.querySelector('.progress').style.width = `${percent}%`;
}
 

const timer = new RecipeTimer(recipeData);