Загрузка данных


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор намокания под дождем</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f4f8;
            color: #333;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
        }
        h1 {
            font-size: 22px;
            text-align: center;
            margin-bottom: 25px;
            color: #1e3a8a;
        }
        .param-group {
            margin-bottom: 20px;
        }
        label {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .unit {
            font-weight: normal;
            color: #666;
        }
        input[type="range"] {
            width: 100%;
            margin-top: 5px;
        }
        .result-box {
            background-color: #e0f2fe;
            border: 2px solid #7dd3fc;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            margin-top: 25px;
        }
        .wet-index {
            font-size: 36px;
            font-weight: bold;
            color: #0369a1;
            margin: 10px 0;
        }
        .verdict {
            font-size: 14px;
            color: #0c4a6e;
            font-style: italic;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Коэффициент намокания под дождем</h1>

    <!-- Слайдер скорости человека -->
    <div class="param-group">
        <label>
            Скорость человека: 
            <span class="unit" id="human-speed-val">5 км/ч (Шаг)</span>
        </label>
        <input type="range" id="human-speed" min="0" max="25" step="0.5" value="5">
    </div>

    <!-- Слайдер скорости ветра -->
    <div class="param-group">
        <label>
            Скорость ветра (встречный/попутный): 
            <span class="unit" id="wind-speed-val">0 км/ч (Штиль)</span>
        </label>
        <input type="range" id="wind-speed" min="-20" max="20" step="0.5" value="0">
    </div>

    <!-- Слайдер плотности осадков -->
    <div class="param-group">
        <label>
            Интенсивность дождя: 
            <span class="unit" id="rain-density-val">Умеренный</span>
        </label>
        <input type="range" id="rain-density" min="1" max="5" step="1" value="2">
    </div>

    <!-- Блок результатов -->
    <div class="result-box">
        <div>Ваш коэффициент намокания (в минуту):</div>
        <div class="wet-index" id="wet-index">0</div>
        <div class="verdict" id="verdict">Загрузка...</div>
    </div>
</div>

<script>
    const humanSpeedSlider = document.getElementById('human-speed');
    const windSpeedSlider = document.getElementById('wind-speed');
    const rainDensitySlider = document.getElementById('rain-density');

    const humanSpeedVal = document.getElementById('human-speed-val');
    const windSpeedVal = document.getElementById('wind-speed-val');
    const rainDensityVal = document.getElementById('rain-density-val');

    const wetIndexDisplay = document.getElementById('wet-index');
    const verdictDisplay = document.getElementById('verdict');

    function getRainLabel(val) {
        switch(parseInt(val)) {
            case 1: return "Морось";
            case 2: return "Умеренный";
            case 3: return "Сильный дождь";
            case 4: return "Ливень";
            case 5: return "Стена воды";
            default: return "";
        }
    }

    function updateCalculations() {
        const vH = parseFloat(humanSpeedSlider.value); // Скорость человека км/ч
        const vW = parseFloat(windSpeedSlider.value);  // Скорость ветра км/ч (положительная - встречный)
        const density = parseInt(rainDensitySlider.value); // Множитель плотности

        // Текстовые подписи для слайдеров
        let humanType = "Стоите";
        if (vH > 0 && vH <= 6) humanType = "Шаг";
        else if (vH > 6 && vH <= 12) humanType = "Быстрый шаг / Бег трусцой";
        else if (vH > 12) humanType = "Спринт";
        humanSpeedVal.textContent = `${vH} км/ч (${humanType})`;

        let windType = "Штиль";
        if (vW > 0) windType = "Встречный ветер";
        if (vW < 0) windType = "Попутный ветер";
        windSpeedVal.textContent = `${Math.abs(vW)} км/ч (${windType})`;

        rainDensityVal.textContent = getRainLabel(density);

        // --- Физическая модель расчета ---
        // 1. Поток сверху (горизонтальная проекция человека: голова и плечи ~ 0.1 м²)
        // Скорость падения капель примерно 25 км/ч. Этот поток стабилен во времени.
        const topFlux = 0.1 * 25; 

        // 2. Поток сбоку/спереди (вертикальная проекция человека ~ 0.6 м²)
        // Зависит от относительной горизонтальной скорости человека и ветра.
        // Если ветер встречный (+), относительная скорость растет. Если попутный (-), падает.
        const relativeHorizontalSpeed = Math.abs(vH + vW);
        const frontFlux = 0.6 * relativeHorizontalSpeed;

        // Итоговый объем капель в единицу времени, умноженный на коэффициент плотности дождя
        let wetRate = (topFlux + frontFlux) * density * 0.4;

        // Округляем для красоты
        wetIndexDisplay.textContent = wetRate.toFixed(1);

        // Вердикт и советы
        let verdict = "";
        if (vH === 0 && vW === 0) {
            verdict = "Вы стоите на месте. Намокнет в основном голова. Лучше бегите в укрытие!";
        } else if (vW < 0 && Math.abs(vH - Math.abs(vW)) < 1) {
            verdict = "Идеально! Вы бежите со скоростью попутного ветра, дождь в лицо почти не попадает.";
        } else if (vW > 10 && vH > 10) {
            verdict = "Жесткие условия: бег навстречу ветру сильно увеличивает промокание спереди.";
        } else if (vH > 15) {
            verdict = "Вы бежите очень быстро. Вы промокнете быстрее в секунду, но доберетесь до цели за меньшее время!";
        } else {
            verdict = "Стандартное намокание. Старайтесь найти укрытие.";
        }
        verdictDisplay.textContent = verdict;
    }

    // Навешиваем обработчики событий на слайдеры
    humanSpeedSlider.addEventListener('input', updateCalculations);
    windSpeedSlider.addEventListener('input', updateCalculations);
    rainDensitySlider.addEventListener('input', updateCalculations);

    // Первичный расчет при загрузке
    updateCalculations();
</script>

</body>
</html>