[html]<h3>🎲 Генератор ЗЛА</h3>
<button id="makeCard">Сгенерировать карточку</button>
<button id="copyCard" style="display:none;">📋 Скопировать код карточки</button>

<div id="preview" style="margin-top:15px;"></div>
<p id="message" style="color:green; font-weight:bold; display:none;"></p>

<!-- Скрытое текстовое поле для хранения и ручного копирования кода -->
<textarea id="hiddenCardCode" style="width:100%; height:150px; margin-top:15px; display:none; font-family:monospace; white-space:pre; word-wrap:normal; overflow-x:auto; resize:vertical; border:1px solid #ccc; padding:5px; box-sizing:border-box;" readonly></textarea>

<style>
/* Эти стили используются только на странице генератора для предпросмотра карточки.
   Для копирования на форумы генерируется HTML с инлайн-стилями. */
.lotto-card {
    display: inline-block;
    border: 4px solid #f39c12;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(to bottom right, #fff3e0, #ffe0b2);
    box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.lotto-card:hover {
    transform: scale(1.03);
}

.lotto-card table {
    border-collapse: collapse;
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 18px;
}

.lotto-card td {
    width: 40px;
    height: 40px;
    border: 1px solid #f39c12;
    border-radius: 5px;
    background-color: #fff8e1;
}

button {
    background: #f39c12;
    border: none;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    margin-right: 5px;
}

button:hover {
    background: #e67e22;
}
</style>

<script>
// Функция для генерации числовых данных карточки
function generateCardData() {
    let card = Array.from({length: 3}, () => Array(9).fill(''));
    let ranges = [[1,10],[11,20],[21,30],[31,40],[41,50],[51,60],[61,70],[71,80],[81,90]];

    for (let col = 0; col < 9; col++) {
        let nums = [];
        // Гарантируем 3 уникальных числа в каждом столбце
        while (nums.length < 3) {
            let n = Math.floor(Math.random() * (ranges[col][1] - ranges[col][0] + 1)) + ranges[col][0];
            if (!nums.includes(n)) {
                nums.push(n);
            }
        }
        nums.sort((a, b) => a - b); // Сортируем числа по возрастанию

        for (let row = 0; row < 3; row++) {
            card[row][col] = nums[row];
        }
    }

    // Удаляем по 4 числа из каждой строки (чтобы получить 5 пустых ячеек в каждой строке)
    for (let row = 0; row < 3; row++) {
        let indices = Array.from({length: 9}, (_, i) => i).sort(() => 0.5 - Math.random()); // Перемешиваем индексы столбцов
        for (let i = 0; i < 4; i++) { // Удаляем 4 числа
            card[row][indices[i]] = '';
        }
    }
    return card;
}

// Функция для генерации HTML с инлайн-стилями (для копирования на форумы)
function generateCardHtmlForCopy(cardData) {
    let html = '<div style="display:inline-block; border:4px solid #f39c12; border-radius:10px; padding:10px; background:linear-gradient(to bottom right, #fff3e0, #ffe0b2); box-shadow:2px 2px 12px rgba(0,0,0,0.2);">';
    html += '<table style="border-collapse:collapse; text-align:center; font-family:\'Arial\', sans-serif; font-weight:bold; font-size:18px;">';
    for (let row of cardData) {
        html += '<tr>';
        for (let num of row) {
            // Используем неразрывный пробел для пустых ячеек, чтобы сохранить их высоту
            html += `<td style="width:40px; height:40px; border:1px solid #f39c12; border-radius:5px; background-color:#fff8e1;">${num || ' '}</td>`;
        }
        html += '</tr>';
    }
    html += '</table></div>';
    return html;
}

// Функция для генерации HTML с использованием классов (для отображения на странице генератора)
function generateCardHtmlForDisplay(cardData) {
    let html = '<div class="lotto-card"><table>';
    for (let row of cardData) {
        html += '<tr>';
        for (let num of row) {
            html += `<td>${num || ' '}</td>`; // Используем неразрывный пробел для пустых ячеек
        }
        html += '</tr>';
    }
    html += '</table></div>';
    return html;
}

// Обработчик события для кнопки "Сгенерировать карточку"
document.getElementById('makeCard').addEventListener('click', function() {
    let cardData = generateCardData();
   
    // Отображаем карточку, используя определенные CSS-классы
    document.getElementById('preview').innerHTML = generateCardHtmlForDisplay(cardData);
   
    // Сохраняем HTML с инлайн-стилями в скрытом текстовом поле для копирования
    document.getElementById('hiddenCardCode').value = generateCardHtmlForCopy(cardData);
   
    document.getElementById('copyCard').style.display = 'inline-block';
    document.getElementById('message').style.display = 'none';
    document.getElementById('hiddenCardCode').style.display = 'none'; // Убеждаемся, что текстовое поле скрыто
});

// Функция для обработки инструкций по ручному копированию
function showManualCopyFallback(textToCopy, msgElement) {
    let textarea = document.getElementById('hiddenCardCode');
    textarea.value = textToCopy;
    textarea.style.display = 'block'; // Делаем текстовое поле видимым
    textarea.select(); // Выделяем его содержимое
    textarea.setSelectionRange(0, 99999); // Для мобильных устройств

    // Пытаемся использовать устаревшую команду execCommand для копирования
    try {
        let successful = document.execCommand('copy');
        if (successful) {
            msgElement.textContent = '✅ Код скопирован (возможно, через execCommand)!';
            msgElement.style.color = 'green';
            msgElement.style.display = 'block';
            setTimeout(() => {
                msgElement.style.display = 'none';
                textarea.style.display = 'none'; // Скрываем текстовое поле после успешного копирования
            }, 2500);
            return; // Выход, если копирование было успешным
        }
    } catch (err) {
        console.warn('execCommand copy failed:', err);
    }
   
    // Если Clipboard API и execCommand не сработали, предлагаем ручное копирование
    msgElement.textContent = '⚠️ Код не скопирован автоматически. Пожалуйста, скопируйте его вручную: Ctrl+C (Cmd+C).';
    msgElement.style.color = 'orange';
    msgElement.style.display = 'block';
    // Не скрываем текстовое поле автоматически для ручного копирования
}

// Обработчик события для кнопки "Скопировать код карточки"
document.getElementById('copyCard').addEventListener('click', function() {
    let textToCopy = document.getElementById('hiddenCardCode').value;
    let msg = document.getElementById('message');
    msg.style.display = 'none'; // Скрываем предыдущие сообщения

    // Пытаемся использовать современный Clipboard API
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(textToCopy).then(() => {
            msg.textContent = '✅ Код карточки скопирован!';
            msg.style.color = 'green';
            msg.style.display = 'block';
            document.getElementById('hiddenCardCode').style.display = 'none'; // Убеждаемся, что текстовое поле скрыто
            setTimeout(() => msg.style.display = 'none', 2500);
        }).catch(err => {
            console.error('Failed to copy text using clipboard API:', err);
            // Фолбэк к инструкциям по ручному копированию, если API не сработало
            showManualCopyFallback(textToCopy, msg);
        });
    } else {
        // Фолбэк для старых браузеров или окружений без Clipboard API
        showManualCopyFallback(textToCopy, msg);
    }
});
</script>[/html]