index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Формула оценки эффективности Customer Care</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7f9;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: linear-gradient(135deg, #2c3e50, #4a6491);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        h2 {
            font-size: 1.8rem;
            margin: 25px 0 15px;
            color: #2c3e50;
            border-bottom: 2px solid #4a6491;
            padding-bottom: 8px;
        }
        
        h3 {
            font-size: 1.4rem;
            margin: 20px 0 10px;
            color: #3498db;
        }
        
        p {
            margin-bottom: 15px;
            font-size: 1.1rem;
        }
        
        .formula-container {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
        }
        
        .formula {
            font-size: 1.6rem;
            text-align: center;
            padding: 20px;
            background-color: #f8f9fa;
            border-left: 5px solid #3498db;
            margin: 20px 0;
            overflow-x: auto;
        }
        
        .components {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .component {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        }
        
        .component h3 {
            display: flex;
            align-items: center;
        }
        
        .component-icon {
            font-size: 1.8rem;
            margin-right: 10px;
        }
        
        .calculator {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
        }
        
        .input-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
        }
        
        .input-group label {
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .input-group input {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        .weights {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        button {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 15px;
            transition: all 0.3s ease;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .result {
            margin-top: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #2c3e50, #4a6491);
            color: white;
            border-radius: 10px;
            text-align: center;
        }
        
        .result-value {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 15px 0;
        }
        
        .interpretation {
            margin-top: 20px;
            font-size: 1.1rem;
        }
        
        .chart-container {
            height: 400px;
            margin-top: 30px;
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            color: #7f8c8d;
        }
        
        @media (max-width: 768px) {
            .components {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .formula {
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Формула оценки эффективности Customer Care</h1>
            <p>Комплексный подход к измерению качества работы подразделения заботы о клиентах</p>
        </header>
        
        <div class="formula-container">
            <h2>Формула CCEI (Customer Care Effectiveness Index)</h2>
            <div class="formula">
                CCEI = (W₁ × Quality_Score) + (W₂ × Efficiency_Score) + (W₃ × Business_Score) + (W₄ × Team_Score)
            </div>
            <p>Где W₁, W₂, W₃, W₄ — весовые коэффициенты, отражающие приоритеты компании (в сумме дают 1).</p>
        </div>
        
        <h2>Компоненты формулы</h2>
        <div class="components">
            <div class="component">
                <h3><span class="component-icon">⭐</span> Quality Score</h3>
                <p>Оценивает качество обслуживания клиентов. Рассчитывается как:</p>
                <p><strong>(CSAT × 0.5) + (CES × 0.3) + (FCR × 0.2)</strong></p>
                <p>CSAT — удовлетворенность клиентов, CES — простота решения проблемы, FCR — решение с первого обращения.</p>
            </div>
            
            <div class="component">
                <h3><span class="component-icon">⚡</span> Efficiency Score</h3>
                <p>Оценивает операционную эффективность. Рассчитывается как:</p>
                <p><strong>(Target_FRT / Avg_FRT × 0.4) + (Target_AHT / Avg_AHT × 0.3) + (Target_Resolution_Time / Avg_Resolution_Time × 0.3) × 100</strong></p>
                <p>FRT — время первого ответа, AHT — время обработки обращения.</p>
            </div>
            
            <div class="component">
                <h3><span class="component-icon">📈</span> Business Score</h3>
                <p>Оценивает влияние на бизнес-показатели. Рассчитывается как:</p>
                <p><strong>(Retention_Rate_Influence × 0.5) + (Feedback_Quality_Score × 0.5)</strong></p>
                <p>Учитывает удержание клиентов и ценность обратной связи для продукта.</p>
            </div>
            
            <div class="component">
                <h3><span class="component-icon">👥</span> Team Score</h3>
                <p>Оценивает состояние команды. Рассчитывается как:</p>
                <p><strong>(eNPS × 0.6) + (1 - Turnover_Rate) × 100 × 0.4</strong></p>
                <p>eNPS — лояльность сотрудников, Turnover_Rate — текучесть кадров.</p>
            </div>
        </div>
        
        <div class="calculator">
            <h2>Калькулятор CCEI</h2>
            <p>Введите значения для расчета индекса эффективности вашего подразделения:</p>
            
            <div class="weights">
                <div class="input-group">
                    <label for="w1">Вес Quality Score (W₁)</label>
                    <input type="number" id="w1" min="0" max="1" step="0.05" value="0.4">
                </div>
                
                <div class="input-group">
                    <label for="w2">Вес Efficiency Score (W₂)</label>
                    <input type="number" id="w2" min="0" max="1" step="0.05" value="0.25">
                </div>
                
                <div class="input-group">
                    <label for="w3">Вес Business Score (W₃)</label>
                    <input type="number" id="w3" min="0" max="1" step="0.05" value="0.25">
                </div>
                
                <div class="input-group">
                    <label for="w4">Вес Team Score (W₄)</label>
                    <input type="number" id="w4" min="0" max="1" step="0.05" value="0.1">
                </div>
            </div>
            
            <div class="weights">
                <div class="input-group">
                    <label for="quality">Quality Score (0-100)</label>
                    <input type="number" id="quality" min="0" max="100" value="85.5">
                </div>
                
                <div class="input-group">
                    <label for="efficiency">Efficiency Score (0-100)</label>
                    <input type="number" id="efficiency" min="0" max="100" value="114.1">
                </div>
                
                <div class="input-group">
                    <label for="business">Business Score (0-100)</label>
                    <input type="number" id="business" min="0" max="100" value="95">
                </div>
                
                <div class="input-group">
                    <label for="team">Team Score (0-100)</label>
                    <input type="number" id="team" min="0" max="100" value="66">
                </div>
            </div>
            
            <button id="calculate">Рассчитать CCEI</button>
            
            <div class="result">
                <h3>Результат</h3>
                <div class="result-value" id="result-value">93.1</div>
                <div class="interpretation" id="interpretation">
                    Общий индекс эффективности поддержки составляет 93.1 из 100 возможных. 
                    Это отличный результат! Обратите внимание на показатель команды — есть возможности для улучшения.
                </div>
            </div>
            
            <div class="chart-container">
                <canvas id="scoreChart"></canvas>
            </div>
        </div>
        
        <footer>
            <p>Формула оценки эффективности Customer Care</p>
            <p>Данный инструмент предназначен для оценки и улучшения работы подразделения заботы о клиентах</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calculateButton = document.getElementById('calculate');
            calculateButton.addEventListener('click', calculateCCEI);
            
            // Инициализация графика
            const ctx = document.getElementById('scoreChart').getContext('2d');
            const chart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['Качество', 'Эффективность', 'Бизнес-воздействие', 'Команда', 'Общий результат'],
                    datasets: [{
                        label: 'Текущие показатели',
                        data: [85.5, 114.1, 95, 66, 93.1],
                        backgroundColor: 'rgba(52, 152, 219, 0.2)',
                        borderColor: 'rgba(52, 152, 219, 1)',
                        pointBackgroundColor: 'rgba(52, 152, 219, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(52, 152, 219, 1)'
                    }]
                },
                options: {
                    scales: {
                        r: {
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0,
                            suggestedMax: 100
                        }
                    }
                }
            });
            
            function calculateCCEI() {
                // Получаем значения весов
                const w1 = parseFloat(document.getElementById('w1').value);
                const w2 = parseFloat(document.getElementById('w2').value);
                const w3 = parseFloat(document.getElementById('w3').value);
                const w4 = parseFloat(document.getElementById('w4').value);
                
                // Проверяем сумму весов
                const totalWeight = w1 + w2 + w3 + w4;
                if (Math.abs(totalWeight - 1.0) > 0.01) {
                    alert(`Сумма весов должна равняться 1.0. Текущая сумма: ${totalWeight.toFixed(2)}`);
                    return;
                }
                
                // Получаем значения компонентов
                const quality = parseFloat(document.getElementById('quality').value);
                const efficiency = parseFloat(document.getElementById('efficiency').value);
                const business = parseFloat(document.getElementById('business').value);
                const team = parseFloat(document.getElementById('team').value);
                
                // Вычисляем CCEI
                const ccei = (w1 * quality) + (w2 * efficiency) + (w3 * business) + (w4 * team);
                
                // Обновляем результат
                document.getElementById('result-value').textContent = ccei.toFixed(1);
                
                // Обновляем интерпретацию
                let interpretation = '';
                if (ccei >= 90) {
                    interpretation = `Общий индекс эффективности поддержки составляет ${ccei.toFixed(1)} из 100 возможных. 
                    Это отличный результат! Продолжайте в том же духе.`;
                } else if (ccei >= 70) {
                    interpretation = `Общий индекс эффективности поддержки составляет ${ccei.toFixed(1)} из 100 возможных. 
                    Это хороший результат, но есть возможности для улучшения. Проанализируйте показатели каждого компонента.`;
                } else {
                    interpretation = `Общий индекс эффективности поддержки составляет ${ccei.toFixed(1)} из 100 возможных. 
                    Есть значительные возможности для улучшения. Рекомендуется детальный анализ всех компонентов формулы.`;
                }
                document.getElementById('interpretation').textContent = interpretation;
                
                // Обновляем график
                chart.data.datasets[0].data = [quality, efficiency, business, team, ccei];
                chart.update();
            }
            
            // Первоначальный расчет
            calculateCCEI();
        });
    </script>
</body>
</html>