[html]<div id="giftBox" style="margin:20px auto; width:250px; text-align:center;">
  <button id="giftButton" style="padding:10px 20px; font-size:18px; border-radius:8px; background:linear-gradient(45deg,#f33,#f90); color:white; border:none; cursor:pointer;">🎁 Открыть подарок</button>
  <div id="giftResult" style="margin-top:5%; font-size:16px; color:#fff;"></div>
</div>

<script>
(function(){
  const gifts = [
    "✨ Вам выпала редкая снежинка удачи!",
    "🎅 Санта прислал улыбку!",
    "🎄 Подарок: +1 к праздничному настроению!",
    "🍫 Шоколадка от эльфов!",
    "💫 Волшебная звезда освещает ваш день!"
  ];
  const INTERVAL = 0 * 60 * 60; // раз в сутки
  const lastOpen = localStorage.getItem('giftTime');
  const now = Math.floor(Date.now()/1000);

  if (lastOpen && now - parseInt(lastOpen) < INTERVAL) {
    document.getElementById('giftButton').disabled = true;
    document.getElementById('giftButton').textContent = "🎁 Уже открыт сегодня!";
  }

  document.getElementById('giftButton').onclick = () => {
    const msg = gifts[Math.floor(Math.random() * gifts.length)];
    document.getElementById('giftResult').innerHTML = msg;
    localStorage.setItem('giftTime', Math.floor(Date.now()/1000));
    document.getElementById('giftButton').disabled = true;
    document.getElementById('giftButton').textContent = "🎁 Уже открыт сегодня!";
  };
})();
</script>[/html]

[html]<div id="predictionBox" style="display:flex; align-items:center; gap:20px; font-family:Arial;">
 
  <!-- Левая часть: кнопка + таймер -->
  <div id="leftBlock" style="padding:10px 20px; background:#d9ab5a; border:3px solid #4d4a3f; width:200px; text-align:center;">
      <button id="predictButton"
        style="width:100%; padding:10px; font-size:16px; font-weight:bold;
        border:none; background:none; cursor:pointer;">
        ОТКРЫТЬ<br>ПРЕДСКАЗАНИЕ
      </button>
      <div id="timer" style="margin-top:8px; font-size:14px; color:#1e8a00; font-weight:bold; display:none;">
      </div>
  </div>

  <!-- Правая часть: предсказание -->
  <div id="predictionResult"
       style="padding:15px 20px; width:350px; min-height:40px; border:3px solid #4d4a3f; background:#ece9df; display:flex; align-items:center;">
  </div>

</div>

<script>
(function(){
  const predictions = [
    "СЕГОДНЯ ТЕБЕ ПОВЕЗЁТ",
    "УДАЧА БУДЕТ НА ТВОЕЙ СТОРОНЕ",
    "ВАС ЖДЁТ ПРИЯТНЫЙ СЮРПРИЗ",
    "ТЫ ПОЛУЧИШЬ ХОРОШУЮ НОВОСТЬ",
    "ЖЕЛАНИЕ СБУДЕТСЯ, ЕСЛИ УЛЫБНУТЬСЯ"
  ];

  const INTERVAL = 1 * 60 * 60; // 3 часа (пример по макету)

  const btn = document.getElementById("predictButton");
  const result = document.getElementById("predictionResult");
  const timerBox = document.getElementById("timer");

  const lastOpen = localStorage.getItem("predTime");
  const savedText = localStorage.getItem("predText");
  const now = Math.floor(Date.now()/1000);

  // Если уже открыто ранее — показываем предсказание
  if (lastOpen && now - lastOpen < INTERVAL) {
    result.textContent = savedText || "";
    startCountdown(INTERVAL - (now - lastOpen));
    lockButton();
  }

  // При нажатии
  btn.onclick = () => {
    const text = predictions[Math.floor(Math.random() * predictions.length)];
    result.textContent = text;

    // Сохраняем
    localStorage.setItem("predTime", Math.floor(Date.now()/1000));
    localStorage.setItem("predText", text);

    lockButton();
    startCountdown(INTERVAL);
  };

  // Блокируем кнопку
  function lockButton() {
    btn.disabled = true;
    btn.style.opacity = "0.6";
    btn.style.cursor = "not-allowed";
  }

  // Разблокируем кнопку
  function unlockButton() {
    btn.disabled = false;
    btn.style.opacity = "1";
    btn.style.cursor = "pointer";
    result.textContent = "";
  }

  // Обратный отсчёт
  function startCountdown(sec) {
    timerBox.style.display = "block";
    update();

    const int = setInterval(update, 1000);

    function update() {
      if (sec <= 0) {
        clearInterval(int);
        timerBox.style.display = "none";

        localStorage.removeItem("predTime");
        localStorage.removeItem("predText");

        unlockButton();
        return;
      }

      const h = String(Math.floor(sec / 3600)).padStart(2, '0');
      const m = String(Math.floor((sec % 3600) / 60)).padStart(2, '0');
      const s = String(sec % 60).padStart(2, '0');

      timerBox.textContent = "осталось: " + h + ":" + m + ":" + s;

      sec--;
    }
  }
})();
</script>[/html]

[html]<div class="fortune-wrapper">
  <button id="fortune-btn">
    <span id="btn-text">ОТКРЫТЬ<br>ПРЕДСКАЗАНИЕ</span>
    <span id="btn-timer" style="display:none;"></span>
  </button>

  <div id="fortune-block">
    <div id="fortune-text"></div>
  </div>
</div>

<style>
.fortune-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible; /* важно! */
  font-family: "Trebuchet MS", sans-serif;
}

/* Кнопка */
#fortune-btn {
  width: 230px;
  height: 80px;
  background: linear-gradient(#e3b56a, #c89a4a);
  border: 3px solid #6d624a;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

#btn-timer {
  font-size: 20px;
  color: #1a7f1a;
}

/* Правый блок */
#fortune-block {
  width: 350px;
  height: 80px;
  background: #f5f2eb;
  border: 3px solid #6d624a;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-left: -20px;

  position: relative;
  left: -280px;        /* ←  скрыт ПОД кнопкой */
  opacity: 0;

  transition: left 0.65s ease, opacity 0.65s ease;
}

#fortune-block.active {
  left: 10px;         /* ← выезд */
  opacity: 1;
}
</style>

<script>
let canOpen = true;
let timerInterval = null;
let duration = 60; // поставила 10 секунд для теста — легко проверять

const btn = document.getElementById("fortune-btn");
const btnText = document.getElementById("btn-text");
const btnTimer = document.getElementById("btn-timer");
const block = document.getElementById("fortune-block");
const fortuneText = document.getElementById("fortune-text");

const predictions = [
  "Скоро случится неожиданная удача!",
  "Ты получишь приятную новость.",
  "Сегодня день благоприятен для желаний.",
  "Тебя ждёт маленькое чудо."
];

btn.addEventListener("click", () => {
  if (!canOpen) return;

  canOpen = false;

  fortuneText.textContent =
    predictions[Math.floor(Math.random() * predictions.length)];

  // меняем текст кнопки на таймер
  btnText.style.display = "none";
  btnTimer.style.display = "block";

  // показываем правый блок
  block.classList.add("active");

  startTimer();
});

function startTimer() {
  let remaining = duration;
  updateTimerDisplay(remaining);

  timerInterval = setInterval(() => {
    remaining--;
    updateTimerDisplay(remaining);

    if (remaining <= 0) {
      clearInterval(timerInterval);

      btnText.style.display = "block";
      btnTimer.style.display = "none";

      block.classList.remove("active");

      canOpen = true;
    }
  }, 1000);
}

function updateTimerDisplay(sec) {
  const m = String(Math.floor(sec / 60)).padStart(2, "0");
  const s = String(sec % 60).padStart(2, "0");
  btnTimer.textContent = `${m}:${s}`;
}
</script>
[/html]

[html]<style>
/* -------------------------------------------------------------------
|  ОБЩИЕ СТИЛИ КОНТЕЙНЕРА И ВКЛАДОК
|-------------------------------------------------------------------- */
.tab-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    border: 1px solid #3d3b37;
    background: #e7e3d8;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-family: Arial, sans-serif;
}

.tab-sidebar {
    width: 18%; /* Установил фиксированную ширину, чтобы избежать проблем с 25% */
    flex-shrink: 0;
    background: #474747;
    padding-top: 5px;
}

.tab-content-area {
    flex-grow: 1;
    padding: 10px;
    min-height: 600px;
    position: relative;
}

.tab-radio {
    display: none;
}

/* Стили для меток-вкладок */
.tab-label {
    display: block;
    padding: 10% 10%;
    text-align: left;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    background: #5b5b5b;
    border-bottom: 1px solid #3d3b37;
    transition: background 0.2s;
}

.tab-label:hover {
    background: #4a4a4a;
}

/* --- Логика активации вкладок --- */
#tab1:checked ~ .tab-sidebar .label-1,
#tab2:checked ~ .tab-sidebar .label-2,
#tab3:checked ~ .tab-sidebar .label-3,
#tab4:checked ~ .tab-sidebar .label-4,
#tab5:checked ~ .tab-sidebar .label-5,
#tab6:checked ~ .tab-sidebar .label-6 {
    background: #3a3a3a;
}

.tab-content {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #f0ede1;
    padding: 10px;
    overflow: auto;
}

#tab1:checked ~ .tab-content-area .content-1,
#tab2:checked ~ .tab-content-area .content-2,
#tab3:checked ~ .tab-content-area .content-3,
#tab4:checked ~ .tab-content-area .content-4,
#tab5:checked ~ .tab-content-area .content-5,
#tab6:checked ~ .tab-content-area .content-6 {
    display: block;
}

/* -------------------------------------------------------------------
|  СТИЛИ ДЛЯ КОНТЕНТА 1 (ИНГРЕДИЕНТЫ)
|-------------------------------------------------------------------- */

.ingredients-list-header {
    background: #a8a39a;
    border: 1px solid #3d3b37;
    padding: 5px 10px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.ingredients-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    padding-left: 5px;
}

.ingredient-item {
    text-align: center;
    width: 80px;
}

.ingredient-item {
    text-align: center;
    width: 80px;
}

.ingredient-img {
    width: 50px;
    height: 50px;
    border: 1px solid #3d3b37;
    object-fit: cover;
    margin-bottom: 5px;
}

.ingredient-item span {
    display: block;
    font-size: 12px;
    font-weight: bold;
}

/* -------------------------------------------------------------------
|  СТИЛИ ДЛЯ РЕЦЕПТОВ (КОНТЕНТ 2, 3, 4)
|-------------------------------------------------------------------- */

.recipe-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.recipe-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.recipe-image-side {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border: 2px solid #3d3b37;
    background: #b4a378;
}

.recipe-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-header {
    background: #a8a39a;
    border: 1px solid #3d3b37;
    padding: 5px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
}

.recipe-title-line {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 2px;
}

.recipe-description {
    font-weight: normal;
    font-size: 12px;
    line-height: 1.2;
    padding-left: 27px;
}

.recipe-ingredients {
    display: flex;
    gap: 5px;
    padding: 0;
}

/* Стиль для IMG тегов, используемых как иконки ингредиентов */
.ingredient-icon-img {
    width: 45px;
    height: 45px;
    border: 1px solid #3d3b37;
}

/* --- Стили для Квадратика (Чекбокса) --- */
.done-checkbox {
    display: none;
}
.checkbox-label {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #3a3a3a;
    background: #f0ede1;
    cursor: pointer;
    line-height: 18px;
    text-align: center;
    font-size: 14px;
    color: green;
    margin-right: 5px;
    flex-shrink: 0;
}
.checkbox-label::after {
    content: '✓';
    display: none;
}
.done-checkbox:checked + .checkbox-label::after {
    display: inline;
}

</style>

<div class="tab-container">
    <input type="radio" id="tab1" name="tab-group" class="tab-radio" checked>
    <input type="radio" id="tab2" name="tab-group" class="tab-radio">
    <input type="radio" id="tab3" name="tab-group" class="tab-radio">
    <input type="radio" id="tab4" name="tab-group" class="tab-radio">
    <input type="radio" id="tab5" name="tab-group" class="tab-radio">
    <input type="radio" id="tab6" name="tab-group" class="tab-radio">

    <div class="tab-sidebar">
        <label for="tab1" class="tab-label label-1">БЛЮДА И<br>ИНГРЕДИЕНТЫ</label>
        <label for="tab2" class="tab-label label-2">ПРОСТЫЕ<br>БЛЮДА</label>
        <label for="tab3" class="tab-label label-3">РЕДКИЕ<br>БЛЮДА</label>
        <label for="tab4" class="tab-label label-4">ПРОФЕССИОНАЛЬНЫЕ<br>БЛЮДА</label>
        <label for="tab5" class="tab-label label-5">ЭКСКЛЮЗИВНЫЕ<br>БЛЮДА</label>
        <label for="tab6" class="tab-label label-6">ОСОБЕННЫЕ<br>БЛЮДА</label>
    </div>

    <div class="tab-content-area">
       
<div class="tab-content content-1">
    <p style="border: 1px solid #3d3b37; background: #f0ede1; padding: 15px; margin-bottom: 10px;">
        Выберите вкладку слева, чтобы увидеть рецепты.
    </p>

    <div class="ingredients-list-header">ИНГРЕДИЕНТЫ</div>

    <div class="ingredients-grid">
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/871685.png" alt="Ингредиент" class="ingredient-img">
            <span>картофель</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/512221.png" alt="Ингредиент" class="ingredient-img">
            <span>лук</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/447452.png" alt="Ингредиент" class="ingredient-img">
            <span>вода</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/162271.png" alt="Ингредиент" class="ingredient-img">
            <span>мука</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/314387.png" alt="Ингредиент" class="ingredient-img">
            <span>соль</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/161773.png" alt="Ингредиент" class="ingredient-img">
            <span>рыба</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/851541.png" alt="Ингредиент" class="ingredient-img">
            <span>яйцо</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/80/ee/3/573120.png" alt="Ингредиент" class="ingredient-img">
            <span>ягоды</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/395835.png" alt="Ингредиент" class="ingredient-img">
            <span>крот</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/998025.png" alt="Ингредиент" class="ingredient-img">
            <span>томат</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/262394.png" alt="Ингредиент" class="ingredient-img">
            <span>молоко</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/926759.png" alt="Ингредиент" class="ingredient-img">
            <span>масло</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/80/ee/3/611401.png" alt="Ингредиент" class="ingredient-img">
            <span>гриб</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/230162.png" alt="Ингредиент" class="ingredient-img">
            <span>голубь</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/59138.png" alt="Ингредиент" class="ingredient-img">
            <span>старый сапог</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/278170.png" alt="Ингредиент" class="ingredient-img">
            <span>спирт</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/383221.png" alt="Ингредиент" class="ingredient-img">
            <span>пропавшее мясо</span>
        </div>
        <div class="ingredient-item">
            <img src="https://upforme.ru/uploads/001c/84/76/2/956123.png" alt="Ингредиент" class="ingredient-img">
            <span>тухлое яйцо</span>
        </div>
    </div>
</div>

        <div class="tab-content content-2">
           
            <div class="recipe-line">
                <div class="recipe-details">
                    <div class="recipe-header">
                        <div class="recipe-title-line">
                            <input type="checkbox" id="recipe1_done" class="done-checkbox">
                            <label for="recipe1_done" class="checkbox-label"></label>
                            <span>Вода из лужи (кипячёная, наверное)</span>
                        </div>
                        <div class="recipe-description">
                            На вкус как дождь, грязь и сомнения. Кипятили? Возможно. Живы? Пока да
                        </div>
                    </div>
                   
                    <div class="recipe-ingredients">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/447452.png" alt="вода" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/314387.png" alt="соль" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/512221.png" alt="лук" class="ingredient-icon-img">
                    </div>
                </div>
               
                <div class="recipe-image-side">
                    <img src="https://upforme.ru/uploads/001c/80/ee/3/562280.png" class="recipe-image">
                </div>
            </div>
           
            <div class="recipe-line">
                <div class="recipe-details">
                    <div class="recipe-header">
                        <div class="recipe-title-line">
                            <input type="checkbox" id="recipe2_done" class="done-checkbox">
                            <label for="recipe2_done" class="checkbox-label"></label>
                            <span>Яичница бюджетная</span>
                        </div>
                        <div class="recipe-description">
                            Дешево, сердито и немного грустно
                        </div>
                    </div>
                   
                    <div class="recipe-ingredients">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/851541.png" alt="яйцо" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/851541.png" alt="яйцо" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/314387.png" alt="соль" class="ingredient-icon-img">
                    </div>
                </div>
               
                <div class="recipe-image-side">
                    <img src="https://upforme.ru/uploads/001c/80/ee/3/769985.png" class="recipe-image">
                </div>
            </div>

           <div class="recipe-line">
                <div class="recipe-details">
                    <div class="recipe-header">
                        <div class="recipe-title-line">
                            <input type="checkbox" id="recipe3_done" class="done-checkbox">
                            <label for="recipe3_done" class="checkbox-label"></label>
                            <span>Картофельный суп-пюре</span>
                        </div>
                        <div class="recipe-description">
                            Классика выживания. Прост, как лопата
                        </div>
                    </div>
                   
                    <div class="recipe-ingredients">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/871685.png" alt="картофель" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/447452.png" alt="вода" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/512221.png" alt="лук" class="ingredient-icon-img">
                    </div>
                </div>
               
                <div class="recipe-image-side">
                    <img src="https://upforme.ru/uploads/001c/80/ee/3/443480.png" class="recipe-image">
                </div>
            </div>

            <div class="recipe-line">
                <div class="recipe-details">
                    <div class="recipe-header">
                        <div class="recipe-title-line">
                            <input type="checkbox" id="recipe4_done" class="done-checkbox">
                            <label for="recipe4_done" class="checkbox-label"></label>
                            <span>Жареные овощи</span>
                        </div>
                        <div class="recipe-description">
                            Простое и сытное блюдо, если удалось не спалить
                        </div>
                    </div>
                   
                    <div class="recipe-ingredients">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/871685.png" alt="картофель" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/998025.png" alt="томат" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/512221.png" alt="лук" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/80/ee/3/611401.png" alt="гриб" class="ingredient-icon-img">
                    </div>
                </div>
               
                <div class="recipe-image-side">
                    <img src="https://upforme.ru/uploads/001c/84/76/2/157323.png" class="recipe-image">
                </div>
            </div>

            <div class="recipe-line">
                <div class="recipe-details">
                    <div class="recipe-header">
                        <div class="recipe-title-line">
                            <input type="checkbox" id="recipe5_done" class="done-checkbox">
                            <label for="recipe5_done" class="checkbox-label"></label>
                            <span>Рыба и фри</span>
                        </div>
                        <div class="recipe-description">
                            Ностальгия по старым временам и фастфуду
                        </div>
                    </div>
                   
                    <div class="recipe-ingredients">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/161773.png" alt="рыба" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/871685.png" alt="картофель" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/926759.png" alt="масло" class="ingredient-icon-img">
                    </div>
                </div>
               
                <div class="recipe-image-side">
                    <img src="https://upforme.ru/uploads/001c/84/76/2/157323.png" class="recipe-image">
                </div>
            </div>

        </div>

        <div class="tab-content content-3">
             <p style="padding: 15px; border: 1px solid #3d3b37; background: #f0ede1; font-style: italic;">
                [ЗДЕСЬ МОЖНО ДОБАВИТЬ РЕДКИЕ РЕЦЕПТЫ]
            </p>
        </div>

        <div class="tab-content content-4">
           
             <div class="recipe-line">
                <div class="recipe-details">
                    <div class="recipe-header">
                        <div class="recipe-title-line">
                            <input type="checkbox" id="recipe4_done" class="done-checkbox">
                            <label for="recipe4_done" class="checkbox-label"></label>
                            <span>Сложный профессиональный суп</span>
                        </div>
                        <div class="recipe-description">
                            Рецепт для настоящих мастеров.
                        </div>
                    </div>
                   
                    <div class="recipe-ingredients">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/857076.png" alt="Картошка" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/709377.png" alt="Морковка" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/709377.png" alt="Лук" class="ingredient-icon-img">
                    </div>
                </div>
               
                <div class="recipe-image-side">
                    <img src="https://i.imgur.com/jS72S9F.png" alt="Профессиональный суп" class="recipe-image">
                </div>
            </div>
            </div>

        <div class="tab-content content-5">
           
             <div class="recipe-line">
                <div class="recipe-details">
                    <div class="recipe-header">
                        <div class="recipe-title-line">
                            <input type="checkbox" id="recipe5_done" class="done-checkbox">
                            <label for="recipe5_done" class="checkbox-label"></label>
                            <span>ЧТО ТО профессиональный суп</span>
                        </div>
                        <div class="recipe-description">
                            Рецепт для настоящих мастеров.
                        </div>
                    </div>
                   
                    <div class="recipe-ingredients">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/857076.png" alt="Картошка" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/709377.png" alt="Морковка" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/709377.png" alt="Лук" class="ingredient-icon-img">
                    </div>
                </div>
               
                <div class="recipe-image-side">
                    <img src="https://i.imgur.com/jS72S9F.png" alt="Профессиональный суп" class="recipe-image">
                </div>
            </div>
            </div>

        <div class="tab-content content-6">
             <p style="padding: 15px; border: 1px solid #3d3b37; background: #f0ede1; font-style: italic;">
                [ЗДЕСЬ МОЖНО ДОБАВИТЬ РЕДКИЕ РЕЦЕПТЫ]
            </p>
        </div>

        </div>
    </div>
</div>

<script>
// Функция для сохранения состояния чекбокса
function saveCheckboxState(checkbox) {
    localStorage.setItem(checkbox.id, checkbox.checked);
}

// Функция для загрузки состояния чекбокса
function loadCheckboxState(checkbox) {
    const savedState = localStorage.getItem(checkbox.id);
    if (savedState !== null) {
        checkbox.checked = (savedState === 'true');
    }
}

// Находим все чекбоксы с классом 'done-checkbox'
const checkboxes = document.querySelectorAll('.done-checkbox');

// Применяем логику ко всем найденным чекбоксам
checkboxes.forEach(checkbox => {
    loadCheckboxState(checkbox);
   
    checkbox.addEventListener('change', () => {
        saveCheckboxState(checkbox);
    });
});
</script>[/html]

[html]<div class="fortune-wrapper">
  <button id="fortune-btn">
    <span id="btn-text">ОТКРЫТЬ<br>ПРЕДСКАЗАНИЕ</span>
    <span id="btn-timer" style="display:none;"></span>
  </button>

  <div id="fortune-block">
    <div id="fortune-text"></div>
  </div>
</div>

<style>
.fortune-wrapper {
  position: relative;
  width: 100%;
  font-family: "Trebuchet MS", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Кнопка */
#fortune-btn {
  width: 420px;
  height: 80px;
  background: linear-gradient(#e3b56a, #c89a4a);
  border: 3px solid #6d624a;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  z-index: 3;
}

#btn-timer {
  font-size: 20px;
  color: #1a7f1a;
}

/* --- РАСКРЫВАЮЩИЙСЯ ПРУЖИНЯЩИЙСЯ БЛОК --- */
#fortune-block {
  width: 350px;
  background: #f5f2eb;
  border: 3px solid #6d624a;
  border-top: none;
  overflow: hidden;

  /* закрыто */
  max-height: 0;
  opacity: 0;

  /* эффект */
  transition:
    max-height 0.6s cubic-bezier(.26, .72, .35, 1.3),
    opacity 0.4s ease;
  position: relative;
  z-index: 1;
}

/* открыто */
#fortune-block.active {
  max-height: 220px; /* раскрытие вниз */
  opacity: 1;
}

/* текст */
#fortune-text {
  padding: 15px 20px;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
  min-height: 40px;
}
</style>

<script>
/* -----------------------------
   НАСТРОЙКА ВРЕМЕНИ
----------------------------- */
const HOURS = 0;
const MINUTES = 1;
const INTERVAL = HOURS * 3600 + MINUTES * 60;

/* -----------------------------
   ЭЛЕМЕНТЫ
----------------------------- */
const btn = document.getElementById("fortune-btn");
const btnText = document.getElementById("btn-text");
const btnTimer = document.getElementById("btn-timer");
const block = document.getElementById("fortune-block");
const fortuneText = document.getElementById("fortune-text");

let timerInterval = null;
let typingInterval = null;

const predictions = [
  "Скоро случится неожиданная удача!",
  "Тебя ждёт приятная новость!",
  "День благоприятен для желаний.",
  "Скоро произойдёт маленькое чудо!",
];

/* -----------------------------
   ПЕЧАТЬ ТЕКСТА ПО БУКВАМ
----------------------------- */
function typeText(text) {
  clearInterval(typingInterval);
  fortuneText.textContent = "";
  let i = 0;

  typingInterval = setInterval(() => {
    fortuneText.textContent += text[i];
    i++;
    if (i >= text.length) clearInterval(typingInterval);
  }, 35); // скорость печати
}

/* -----------------------------
   ЗАГРУЗКА СОСТОЯНИЯ
----------------------------- */
const savedTime = localStorage.getItem("fortuneTime");
const savedText = localStorage.getItem("fortuneText");
const now = Math.floor(Date.now() / 1000);

if (savedTime && now < savedTime) {
  const remaining = savedTime - now;

  if (savedText) {
    fortuneText.textContent = savedText;
    block.classList.add("active");
  }

  btnText.style.display = "none";
  btnTimer.style.display = "block";

  startTimer(remaining);
}

/* -----------------------------
   КНОПКА
----------------------------- */
btn.addEventListener("click", () => {
  if (btnTimer.style.display === "block") return;

  const msg = predictions[Math.floor(Math.random() * predictions.length)];

  block.classList.add("active");

  typeText(msg);

  btnText.style.display = "none";
  btnTimer.style.display = "block";

  const newEndTime = Math.floor(Date.now() / 1000) + INTERVAL;

  localStorage.setItem("fortuneText", msg);
  localStorage.setItem("fortuneTime", newEndTime);

  startTimer(INTERVAL);
});

/* -----------------------------
   ТАЙМЕР
----------------------------- */
function startTimer(duration) {
  let remaining = duration;

  updateTimerDisplay(remaining);

  timerInterval = setInterval(() => {
    remaining--;
    updateTimerDisplay(remaining);

    if (remaining <= 0) {
      clearInterval(timerInterval);

      localStorage.removeItem("fortuneText");
      localStorage.removeItem("fortuneTime");

      btnTimer.style.display = "none";
      btnText.style.display = "block";

      block.classList.remove("active");
      fortuneText.textContent = "";
    }
  }, 1000);
}

function updateTimerDisplay(sec) {
  const m = String(Math.floor(sec / 60)).padStart(2, "0");
  const s = String(sec % 60).padStart(2, "0");
  btnTimer.textContent = `${m}:${s}`;
}
</script>[/html]