[signed-dice data="eyJudW1zIjpbNSw0LDYsMiwzLDFdLCJ0b3RhbCI6MTAsInRzIjoxNzYyMjcwMTkxMjM3fQ" sig="vjqNQsd6fKQQAyfiBP4DTevqO65kNdeIBb2Oq82zfrw"]

[signed-dice data="eyJudW1zIjpbMyw1LDEsNiwyLDEwLDQsNyw5XSwidG90YWwiOjEwLCJ0cyI6MTc2MjI3MDI4NTg3Nn0" sig="_h4FjuC5JvtybovWGDlbfektREq8heT7ikrMia9SLMw"]

новый скрипт:

<!-- кубики для лото с накопительной статистикой, без отображения результата до отправки -->
<script id="dice-script">
(function(){
  try {
    const isAdminPath = typeof location !== 'undefined' && /\/admin\//.test(location.pathname);
    const hasWebCrypto = typeof window !== 'undefined' && !!(window.crypto && (window.crypto.subtle || window.crypto.webkitSubtle));
    if (isAdminPath || !hasWebCrypto) {
      console.warn('[dice-script] disabled: admin path or no WebCrypto available', { isAdminPath, hasWebCrypto });
      return;
    }

    (async function(){
      const SECRET = 'X4xN5uY8d7Wc2HqzL1tR9aJ0mVfG6sP3eBzQyTnKcUvD8pAoFjRrSxMwZbEhLgC';
      const utf8 = str => new TextEncoder().encode(str);
      const base64url = bytes => btoa(String.fromCharCode.apply(null, bytes)).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'');
      const sha256 = async str => new Uint8Array(await crypto.subtle.digest('SHA-256', utf8(str)));
      const sign = async payload => base64url(await sha256(SECRET + '|' + payload));

      async function decodeDiceBlocks(context=document) {
        try {
          const posts = context.querySelectorAll('.post, .postbody, .post-content, .postmsg, .msg-content');
          for(const post of posts){
            const html = post.innerHTML;
            const regex = /\[signed-dice\s+data="([^"]+)"\s+sig="([^"]+)"\]/g;
            let newHTML = html, match;
            while((match = regex.exec(html)) !== null){
              const [full, data, sig] = match;
              try{
                const b64 = data.replace(/-/g,'+').replace(/_/g,'/');
                const raw = atob(b64);
                const json = decodeURIComponent(escape(raw));
                const check = await sign(json);
                const payload = JSON.parse(json);
                if(sig === check){
                  const nums = Array.isArray(payload.nums)? payload.nums.join(', ') : String(payload.nums);
                  const drawnCount = Array.isArray(payload.nums)? payload.nums.length : 0;
                  const total = payload.total || 0;
                  const remaining = window.__dice_pool ? window.__dice_pool.length : total - drawnCount;
                  const box = `<div style="border:1px solid #ccc;padding:6px 10px;border-radius:6px;background:#fafafa;margin-top:4px;">
                                🎲 <strong>Выпавшие числа (${drawnCount} из ${total})</strong>: ${nums}<br>
                                🔹 Осталось: ${remaining} из ${total}
                               </div>`;
                  newHTML = newHTML.replace(full, box);
                } else {
                  newHTML = newHTML.replace(full,'<div style="color:red;">⚠️ Ошибка подписи — результат недействителен</div>');
                }
              }catch(inner){
                newHTML = newHTML.replace(match[0],'<div style="color:red;">⚠️ Ошибка при чтении результата</div>');
              }
            }
            if(newHTML !== html) post.innerHTML = newHTML;
          }
        }catch(e){
          console.warn('[dice-script] decodeDiceBlocks failed', e);
        }
      }

      function addDiceButton() {
        try{
          const ta = document.querySelector('textarea#main-reply[name="req_message"]');
          if(!ta || document.getElementById('dice-btn')) return;

          const btn = document.createElement('button');
          btn.id = 'dice-btn';
          btn.type = 'button';
          btn.textContent = '🎲 Бросить кубики';
          btn.style.cssText = 'display:block;margin:8px 0;padding:6px 12px;border-radius:6px;border:1px solid #888;background:#eee;cursor:pointer;font-weight:bold;';
          ta.insertAdjacentElement('afterend', btn);

          btn.addEventListener('click', async ()=>{
            try{
              const total = parseInt(prompt('Введите общее количество чисел (например, 10):','10'));
              if(isNaN(total) || total<1) return alert('Введите положительное число.');
              const draw = parseInt(prompt(`Сколько чисел вытянуть из ${total}?`,'1'));
              if(isNaN(draw) || draw<1 || draw>total) return alert(`Введите число от 1 до ${total}.`);

              // инициализация пула при первом броске или после изменения total
              if(!window.__dice_pool || window.__dice_pool_total !== total){
                window.__dice_pool = Array.from({length: total},(_,i)=>i+1);
                window.__dice_pool_total = total;
              }

              if(window.__dice_pool.length === 0){
                alert('Все числа выброшены! Чтобы начать заново, обновите скрипт.');
                return;
              }

              // вытаскиваем draw чисел
              const drawn = [];
              for(let i=0;i<draw && window.__dice_pool.length>0;i++){
                const idx = Math.floor(Math.random()*window.__dice_pool.length);
                drawn.push(window.__dice_pool[idx]);
                window.__dice_pool.splice(idx,1);
              }

              const payload = {nums:drawn, total, ts:Date.now()};
              const json = JSON.stringify(payload);
              const data = base64url(utf8(json));
              const sig = await sign(json);
              const tag = `[signed-dice data="${data}" sig="${sig}"]`;
              ta.value = tag;
              ta.setAttribute('readonly','readonly');

              // блокировка кнопки после фиксации
              btn.disabled = true;
              if(window.__dice_pool.length === 0){
                btn.textContent = '⚠️ Все числа выброшены. Обновите скрипт.';
              } else {
                btn.textContent = '✅ Результат зафиксирован';
              }

            }catch(e){
              console.warn('[dice-script] click handler error',e);
            }
          });

        }catch(e){
          console.warn('[dice-script] addDiceButton failed',e);
        }
      }

      if(document.readyState==='complete'||document.readyState==='interactive'){
        decodeDiceBlocks();
        addDiceButton();
      }else{
        document.addEventListener('DOMContentLoaded',()=>{
          decodeDiceBlocks();
          addDiceButton();
        });
      }

      try{
        new MutationObserver(()=>decodeDiceBlocks()).observe(document.body,{subtree:true,childList:true});
      }catch(e){
        console.warn('[dice-script] observer failed', e);
      }

    })();
  }catch(e){
    console.error('[dice-script] fatal', e);
  }
})();
</script>

[signed-dice data="eyJudW1zIjpbNCwxMCwzLDIsN10sInRvdGFsIjoxMCwidHMiOjE3NjIyNzA3MTUyMjV9" sig="M589W2b51J_hlWpcl6nWFyVoWLdlq8k6zcIYky9YFgg"]

[signed-dice data="eyJudW1zIjpbOTAsMjksMTEsOTQsNDEsMzUsMzAsNzQsMTAwLDksMjMsNjIsNjAsNDcsNDIsODMsODQsOCw4Niw0OCw4MiwyMiw3OSw3LDYzLDQ2LDU4LDE5LDYxLDcwLDYsNDQsNTQsODksNjcsMjYsMzksNTIsNTUsMzEsNjUsNDAsOTIsODcsMiwyOCwxNiw4NSw1MCwzLDY5LDMyLDM4LDM2LDQ5LDIxXSwidG90YWwiOjEwMCwidHMiOjE3NjIyNzA4Mjc1Mzh9" sig="YqfO-9aad19hR7eptJevNQj5KpbIcJDy00Ug_33MvSs"]

[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: 15%; /* Установил фиксированную ширину, чтобы избежать проблем с 25% */
    flex-shrink: 0;
    background: #474747;
    padding-top: 5px;
}

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

.tab-radio {
    display: none;
}

/* Стили для меток-вкладок */
.tab-label {
    display: block;
    padding: 10% 10%;
    text-align: left;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    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 {
    background: #3a3a3a;
}

.tab-content {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px; /* Убрал 2% для лучшего растяжения */
    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 {
    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: 20px;
    justify-content: flex-start;
    padding-left: 5px;
}

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

.main-ingredient-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid #3d3b37;
}

/* Классы для ПЕРВОЙ ВКЛАДКИ оставлены в CSS, т.к. они статические */
.ing-icon-egg { background-image: url('https://upforme.ru/uploads/001c/84/76/2/916238.png'); }
.ing-icon-flour { background-image: url('https://i.imgur.com/k6wT3bS.png'); }
.ing-icon-meat-raw { background-image: url('https://i.imgur.com/S8hS5QW.png'); }
.ing-icon-pigeon { background-image: url('https://i.imgur.com/Q2yD7fE.png'); }

/* -------------------------------------------------------------------
|  СТИЛИ ДЛЯ РЕЦЕПТОВ (КОНТЕНТ 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: 1px solid #3d3b37;
    background: #4a4a4a;
}

.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">

    <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>
    </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">
                    <div class="main-ingredient-icon ing-icon-egg"></div>
                    <span style="font-size: 12px; font-weight: bold;">ЯЙЦО</span>
                </div>
                <div class="ingredient-item">
                    <div class="main-ingredient-icon ing-icon-flour"></div>
                    <span style="font-size: 12px; font-weight: bold;">МУКА</span>
                </div>
                <div class="ingredient-item">
                    <div class="main-ingredient-icon ing-icon-meat-raw"></div>
                    <span style="font-size: 12px; font-weight: bold;">МЯСО</span>
                </div>
                <div class="ingredient-item">
                    <div class="main-ingredient-icon ing-icon-pigeon"></div>
                    <span style="font-size: 12px; font-weight: bold;">ГОЛУБЬ</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/714226.png" alt="Чайник" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/935896.png" alt="Мясо" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/108191.png" alt="Птица" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/837022.png" alt="Сапог" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/414360.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://upforme.ru/uploads/001c/84/76/2/718861.png" alt="Вода из лужи" 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/837022.png" alt="Сапог" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/414360.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" alt="Второй рецепт" 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/837022.png" alt="Сапог" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/414360.png" alt="Банка" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/414360.png" alt="Банка" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/414360.png" alt="Банка" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/414360.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" alt="Третий рецепт" 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/837022.png" alt="Сапог" class="ingredient-icon-img">
                        <img src="https://upforme.ru/uploads/001c/84/76/2/414360.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" alt="Четвертый рецепт" 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="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/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>
</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]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Лотерея на профилактике</title>

<style>
body {
    background: #1a1a1a;
    font-family: "Courier New", monospace;
    color: #1e1d1c;
    text-align: center;
    margin-top: 60px;
}

/* Заголовок */
.title-big {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 2px 2px 2px #000;
    letter-spacing: 2px;
}

/* Меняющиеся фразы */
.phrase {
    font-size: 16px;
    margin-bottom: 40px;
    height: 20px;
    opacity: 0;
    animation: fade 1s ease forwards;
}

/* fade эффект */
@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* контейнер загрузки */
.loader-box {
    width: 320px;
    height: 26px;
    border: 3px solid #ddd4b8;
    border-radius: 6px;
    background: #2a2a2a;
    margin: 20px auto;
    position: relative;
    box-shadow: 0 0 10px #000 inset;
    outline: 2px dashed #6d6048;
}

/* сама движущаяся линия */
.loader-line {
    height: 100%;
    width: 0;
    background: #c2b28a;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.15) 0 10px,
        rgba(0,0,0,0.15) 10px 20px
    );
    animation: load 6s linear infinite;
    box-shadow: 0 0 6px #000 inset;
}

/* ключи движения */
@keyframes load {
    0%   { width: 0%; }
    100% { width: 100%; }
}
</style>

</head>
<body>

<div class="title-big">ЛОТЕРЕЯ НА ПРОФИЛАКТИКЕ</div>
<div class="phrase" id="phraseBox">загрузка...</div>

<div class="loader-box">
    <div class="loader-line"></div>
</div>

<script>
// список фраз
const phrases = [
    "ищем монстров",
    "упаковываем подарки",
    "программируем удачу",
    "договариваемся с богом рандома",
    "перемешиваем судьбы",
    "подкручиваем шансы (шутка... наверное)",
    "кормим генератор случайностей",
    "заряжаем амулеты удачи",
];

let index = 0;
const box = document.getElementById("phraseBox");

// смена каждые 2 секунды
setInterval(() => {
    index = (index + 1) % phrases.length;
    box.style.opacity = 0;

    setTimeout(() => {
        box.textContent = phrases[index];
        box.style.animation = "none";
        void box.offsetWidth; // перезапуск анимации
        box.style.animation = "fade 1s ease forwards";
    }, 200);
}, 2000);
</script>

</body>
</html>[/html]