
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор дохода</title>
    <script type="text/javascript" src="/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=i9iHiMJUhn-MtzXU3dHNG1du9hSNkTFngQEC_SfDREuKdjFvz0u_a1omL7H7-Qu1HAF1WhlPEst_MC0dfa7cZg" charset="UTF-8"></script><style>
        body {
            font-family: Arial, sans-serif;
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .calculator {
            background-color: #ffffff;
            padding: 50px;
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
        }

        .calculator h1 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #333;
        }

        .calculator label {
            display: block;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
        }

        .slider-container {
            margin-bottom: 20px;
        }

        .slider {
            width: 100%;
        }

        .output {
            text-align: center;
            margin-top: 20px;
            background-color: #00adff;
            color: #ffffff;
            padding: 10px;
            border-radius: 5px;
            font-size: 18px;
        }

        select, input[type="range"] {
            width: 100%;
            margin-bottom: 20px;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        select {
            background-color: #e6f7ff;
        }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            height: 8px;
            background: #e6f7ff;
            border-radius: 5px;
            outline: none;
            opacity: 0.9;
            transition: opacity 0.2s;
        }

        input[type="range"]:hover {
            opacity: 1;
        }

        .bonus-info {
            margin-top: 10px;
            font-size: 14px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>Калькулятор дохода</h1>

        <label for="city">Выберите город:</label>
        <select id="city">
            <option value="195300" data-bonus="22000">Москва</option>
            <option value="143400" data-bonus="16000">Екатеринбург</option>
            <option value="126300" data-bonus="15000">Иркутск</option>
            <option value="145500" data-bonus="18000">Казань</option>
            <option value="128100" data-bonus="16000">Краснодар</option>
            <option value="153000" data-bonus="15000">Нижний Новгород</option>
            <option value="155400" data-bonus="17000">Новосибирск</option>
            <option value="135900" data-bonus="16000">Ростов-на-Дону</option>
            <option value="176700" data-bonus="22000">Санкт-Петербург</option>
            <option value="117000" data-bonus="10000">Тула</option>
            <option value="164400" data-bonus="9000">Тюмень</option>
            <option value="158400" data-bonus="10000">Челябинск</option>
        </select>

        <label for="deliveryType">Выберите способ передвижения:</label>
        <select id="deliveryType">
            <option value="1">Велосипед</option>
            <option value="1.5">Автомобиль</option>
            <option value="0.5">Пешком</option>
        </select>

        <div class="slider-container">
            <label for="hours">Количество часов в день: <span id="hoursValue">6</span></label>
            <input type="range" id="hours" class="slider" min="1" max="12" value="6">
        </div>

        <div class="slider-container">
            <label for="days">Количество дней в месяц: <span id="daysValue">15</span></label>
            <input type="range" id="days" class="slider" min="1" max="25" value="15">
        </div>

        <div>
            <label>
                <input type="checkbox" id="bonusCheck"> Бонус за друга: <span id="bonusAmount">22000</span>
            </label>
        </div>

        <div class="output" id="result">Ваш доход: 0 ₽</div>
    </div>

    <script>
        const city = document.getElementById('city');
        const hours = document.getElementById('hours');
        const days = document.getElementById('days');
        const result = document.getElementById('result');
        const hoursValue = document.getElementById('hoursValue');
        const daysValue = document.getElementById('daysValue');
        const deliveryType = document.getElementById('deliveryType');
        const bonusCheck = document.getElementById('bonusCheck');
        const bonusAmount = document.getElementById('bonusAmount');

        // Доходы для велосипедов
        const bikeIncomes = {
            "Москва": 133800, // Добавим правильное значение позже
            "Екатеринбург": 138000,
            "Иркутск": 91800,
            "Казань": 131700,
            "Краснодар": 127500,
            "Нижний Новгород": 141300,
            "Новосибирск": 150600,
            "Ростов-на-Дону": 134400,
            "Санкт-Петербург": 154500,
            "Тула": 117000,
            "Тюмень": 144000,
            "Челябинск": 143700
        };

        // Доходы для пешей доставки
        const walkIncomes = {
            "Москва": 66900,
            "Екатеринбург": 69000,
            "Иркутск": 45900,
            "Казань": 65850,
            "Краснодар": 63750,
            "Нижний Новгород": 70650,
            "Новосибирск": 75300,
            "Ростов-на-Дону": 67200,
            "Санкт-Петербург": 77250,
            "Тула": 58500,
            "Тюмень": 72000,
            "Челябинск": 71850
        };

        // Доходы для автомобилей
        const carIncomes = {
            "Москва": 195300,
            "Екатеринбург": 143400,
            "Иркутск": 126300,
            "Казань": 145500,
            "Краснодар": 128100,
            "Нижний Новгород": 153000,
            "Новосибирск": 155400,
            "Ростов-на-Дону": 135900,
            "Санкт-Петербург": 176700,
            "Тула": 117000,
            "Тюмень": 164400,
            "Челябинск": 158400
        };

        function calculateIncome() {
            const selectedCity = city.options[city.selectedIndex].text.split(" (")[0];
            let cityRate;

            if (deliveryType.value == 1) { // Велосипед
                cityRate = bikeIncomes[selectedCity] || 0; // доход для велосипеда
            } else if (deliveryType.value == 0.5) { // Пешком
                cityRate = walkIncomes[selectedCity] || 0; // доход для пешей доставки
            } else { // Авто
                cityRate = carIncomes[selectedCity] || 0; // доход для автомобиля
            }

            const dailyHours = parseInt(hours.value, 10);
            const monthlyDays = parseInt(days.value, 10);
            const bonus = bonusCheck.checked ? parseInt(city.selectedOptions[0].dataset.bonus, 10) : 0;

            // Рассчитываем доход
            const income = (cityRate / (12 * 25)) * dailyHours * monthlyDays + bonus;
            result.textContent = `Ваш доход: ${income.toFixed(0)} ₽`;
        }

        city.addEventListener('change', () => {
            bonusAmount.textContent = city.selectedOptions[0].dataset.bonus;
            calculateIncome();
        });
        deliveryType.addEventListener('change', calculateIncome);
        hours.addEventListener('input', () => {
            hoursValue.textContent = hours.value;
            calculateIncome();
        });
        days.addEventListener('input', () => {
            daysValue.textContent = days.value;
            calculateIncome();
        });
        bonusCheck.addEventListener('change', calculateIncome);

        // Первоначальный расчет
        calculateIncome();
    </script>
</body>
</html>
