[html]<div style="border: 2px solid #333; padding: 15px; background: #f9f9f9; border-radius: 8px; max-width: 300px; font-family: Arial, sans-serif;">
    <h3 style="margin-top: 0; color: #333;">FATE Dice Roller</h3>
   
    <div style="margin-bottom: 15px;">
        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Модификатор:</label>
        <input type="number" id="fateModifier" value="0" style="width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
    </div>
   
    <button id="rollButton" onclick="rollFateDice()" style="background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-bottom: 15px;">
        Бросить кубики
    </button>
   
    <div id="fateResult" style="background: white; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 40px;">
        Нажмите кнопку для броска
    </div>
</div>

<script>
function rollFateDice() {
    const button = document.getElementById('rollButton');
    const modifier = parseInt(document.getElementById('fateModifier').value) || 0;
   
    // Блокируем кнопку и меняем её текст
    button.disabled = true;
    button.innerHTML = 'Бросок сделан';
    button.style.background = '#9E9E9E';
    button.style.cursor = 'not-allowed';
   
    // Показываем бросок
    document.getElementById('fateResult').innerHTML = 'Бросаем...';
   
    setTimeout(function() {
        let total = modifier;
        let diceResults = [];
        let diceSymbols = [];
       
        // Бросаем 4 кубика FATE
        for(let i = 0; i < 4; i++) {
            const roll = Math.floor(Math.random() * 3) - 1; // -1, 0, или +1
            total += roll;
            diceResults.push(roll);
           
            if(roll === 1) {
                diceSymbols.push('+');
            } else if(roll === -1) {
                diceSymbols.push('-');
            } else {
                diceSymbols.push('0');
            }
        }
       
        // Формируем финальный текст результата
        let resultText = `<strong>Результат броска FATE: ${total}</strong>`;
       
        if(modifier !== 0) {
            resultText += `<br>Детали: [${diceSymbols.join(' ')}] + ${modifier} = ${total}`;
        } else {
            resultText += `<br>Детали: [${diceSymbols.join(' ')}] = ${total}`;
        }
       
        // Добавляем оценку результата
        if(total >= 3) {
            resultText += "<br><span style='color: #2E7D32; font-weight: bold;'>Отличный результат!</span>";
        } else if(total <= -3) {
            resultText += "<br><span style='color: #C62828; font-weight: bold;'>Провал!</span>";
        }
       
        // Заменяем весь блок на простой текст результата
        const originalDiv = document.querySelector('div[style*="border: 2px solid #333"]');
        originalDiv.outerHTML = `
            <div style="border: 2px solid #333; padding: 15px; background: #f9f9f9; border-radius: 8px; max-width: 300px; font-family: Arial, sans-serif;">
                <h3 style="margin-top: 0; color: #333;">FATE Dice Roller</h3>
                <div style="background: white; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                    ${resultText}
                </div>
                <div style="margin-top: 10px; font-size: 12px; color: #666;">
                    Бросок завершён
                </div>
            </div>
        `;
       
    }, 500);
}
</script>[/html]

[html]<div style="border: 2px solid #333; padding: 15px; background: #f9f9f9; border-radius: 8px; max-width: 300px; font-family: Arial, sans-serif;">
    <h3 style="margin-top: 0; color: #333;">FATE Dice Roller</h3>
   
    <div style="margin-bottom: 15px;">
        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Модификатор:</label>
        <input type="number" id="fateModifier" value="0" style="width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
    </div>
   
    <button id="rollButton" onclick="rollFateDice()" style="background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-bottom: 15px;">
        Бросить кубики
    </button>
   
    <div id="fateResult" style="background: white; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 40px;">
        Нажмите кнопку для броска
    </div>
   
    <div id="fateDice" style="margin-top: 10px; font-size: 20px;"></div>
</div>

<script>
function rollFateDice() {
    const rollButton = document.getElementById('rollButton');
   
    // Блокируем кнопку
    rollButton.disabled = true;
    rollButton.style.background = '#cccccc';
    rollButton.style.cursor = 'not-allowed';
    rollButton.textContent = 'Бросок выполнен';
   
    // Очищаем предыдущие результаты
    document.getElementById('fateResult').innerHTML = 'Бросаем...';
    document.getElementById('fateDice').innerHTML = '';
   
    // Даем небольшую задержку для визуального эффекта
    setTimeout(function() {
        const modifier = parseInt(document.getElementById('fateModifier').value) || 0;
        let total = modifier;
        let diceResults = [];
        let diceSymbols = [];
       
        // Бросаем 4 кубика FATE
        for(let i = 0; i < 4; i++) {
            const roll = Math.floor(Math.random() * 3) - 1; // -1, 0, или +1
            total += roll;
            diceResults.push(roll);
           
            // Преобразуем в символы для отображения
            if(roll === 1) {
                diceSymbols.push('+');
            } else if(roll === -1) {
                diceSymbols.push('-');
            } else {
                diceSymbols.push('0');
            }
        }
       
        // Отображаем результаты
        const resultElement = document.getElementById('fateResult');
        const diceElement = document.getElementById('fateDice');
       
        let resultText = `🎲 Результат: ${total}`;
        if(modifier !== 0) {
            resultText += ` (${diceResults.join(' + ')} + ${modifier})`;
        } else {
            resultText += ` (${diceResults.join(' + ')})`;
        }
       
        resultElement.innerHTML = resultText;
        diceElement.innerHTML = `Кубики: [${diceSymbols.join(' ')}]`;
       
        // Добавляем цвет в зависимости от результата
        if(total >= 3) {
            resultElement.style.color = '#2E7D32';
            resultElement.style.fontWeight = 'bold';
        } else if(total <= -3) {
            resultElement.style.color = '#C62828';
            resultElement.style.fontWeight = 'bold';
        } else {
            resultElement.style.color = '#333';
            resultElement.style.fontWeight = 'normal';
        }
       
        // Делаем результат более заметным для всех читателей
        resultElement.style.fontSize = '18px';
        resultElement.style.textAlign = 'center';
       
    }, 300);
}
</script>[/html]