Открытый борт (10 тонн)

<style>
        #delivery-calc {
            font-family: 'Roboto', Arial, sans-serif;
            padding: 20px;
            background-color: #ffffff;
            color: #000000;
            margin: 20px auto;
            max-width: 1200px;
            box-sizing: border-box;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        #delivery-calc h2 {
            margin-bottom: 25px;
            color: #000000;
            text-align: left;
            font-size: 1.8em;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        #delivery-calc .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            box-sizing: border-box;
        }

        #delivery-calc .calculator {
            flex: 1 1 300px;
            min-width: 280px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

        #delivery-calc label {
            display: block;
            margin-top: 15px;
            font-weight: 600;
            color: #333333;
            margin-bottom: 5px;
        }

        #delivery-calc input {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            box-sizing: border-box;
            border: 2px solid #ff6d00;
            background-color: transparent;
            color: #000000;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s ease, background-color 0.3s ease;
            border-radius: 4px;
        }

        #delivery-calc input:focus {
            border-color: #e65a00;
            background-color: #fff8f0;
        }

        #delivery-calc input::placeholder {
            color: #999999;
        }

        #delivery-calc button {
            margin-top: 20px;
            padding: 12px 24px;
            font-size: 16px;
            cursor: pointer;
            background-color: #ff6d00;
            border: none;
            color: white;
            font-weight: 600;
            transition: background-color 0.3s ease, transform 0.2s ease;
            border-radius: 4px;
            width: 100%;
        }

        #delivery-calc button:hover {
            background-color: #e65a00;
            transform: translateY(-2px);
        }

        #delivery-calc #infoText {
            margin-top: 15px;
            font-size: 14px;
            color: #666666;
            font-style: italic;
            text-align: center;
        }

        #delivery-calc #result {
            margin-top: 25px;
            font-size: 18px;
            font-weight: 400;
            color: #000000;
            background-color: #eaf7ed;
            padding: 15px;
            border-radius: 5px;
            border-left: 5px solid #28a745;
        }

        #delivery-calc #result span {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }

        #delivery-calc #map {
            flex: 2 1 400px;
            min-height: 350px;
            height: 50vh;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
        }

        /* Стили для спиннера */
        #delivery-calc #loader {
            border: 4px solid #f3f3f3; /* Light grey */
            border-top: 4px solid #ff6d00; /* Orange */
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 20px auto; /* Центрируем спиннер */
            display: none; /* Изначально скрыт */
        }

        #delivery-calc #loader.hidden {
            display: none;
        }

        #delivery-calc #loader.visible {
            display: block;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Мобильные стили */
        @media (max-width: 768px) {
            #delivery-calc {
                padding: 15px;
                margin: 0px auto;
            }

            #delivery-calc h2 {
                margin-bottom: 0px;
                font-size: 1.5em;
                text-align: left;
            }

            #delivery-calc .container {
                flex-direction: column;
            }

            #delivery-calc .calculator {
                margin-top: 0;
                order: -1;
                padding: 10px;
            }

            #delivery-calc #map {
                height: 40vh;
                min-height: 250px;
            }

            #delivery-calc button {
                width: 100%;
                padding: 10px 20px;
            }

            #delivery-calc input {
                padding: 10px;
            }
        }
    </style>
</head>
<body>

    <div id="delivery-calc">
        <h2>Укажите адрес загрузки и доставки — стоимость рассчитается автоматически:</h2>
        <div class="container">
            <div class="calculator">
                <label for="from">Адрес загрузки:</label>
                <input type="text" id="from" placeholder="г. Самара" autocomplete="off">
                <label for="to">Адрес доставки:</label>
                <input type="text" id="to" placeholder="Введите адрес" autocomplete="off">
                <button id="calcBtn">Рассчитать стоимость</button>
                <div id="loader" class="hidden"></div> <div id="infoText">
                    * Точную стоимость доставки уточняйте у своего персонального менеджера.
                </div>
                <div id="result"></div>
            </div>
            <div id="map"></div>
        </div>
    </div>

    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=d226f93d-96fd-4347-8632-e56857eaad0e&q...;
    <script>
        let myMap;
        let multiRoute;
        const pricePerKm = 130; // Цена за км
        const minPrice = 10000; // Минимальная стоимость доставки в рублях
        const loader = document.getElementById("loader"); // Получаем элемент спиннера

        ymaps.ready(init);

        function init() {
            myMap = new ymaps.Map("map", {
                center: [53.221867, 50.244535], // Координаты Самары
                zoom: 7,
                controls: ['zoomControl']
            });

            document.getElementById("calcBtn").addEventListener("click", calculateRoute);

            new ymaps.SuggestView('from');
            new ymaps.SuggestView('to');
        }

        function showLoader() {
            loader.classList.remove("hidden");
            loader.classList.add("visible");
        }

        function hideLoader() {
            loader.classList.remove("visible");
            loader.classList.add("hidden");
        }

        function calculateRoute() {
            const from = document.getElementById("from").value.trim();
            const to = document.getElementById("to").value.trim();
            const resultDiv = document.getElementById("result");

            resultDiv.innerHTML = "";

            if (!from || !to) {
                resultDiv.innerHTML = "<span>Пожалуйста, введите оба адреса.</span>";
                return;
            }

            showLoader();

            if (multiRoute) {
                myMap.geoObjects.remove(multiRoute);
            }

            multiRoute = new ymaps.multiRouter.MultiRoute({
                referencePoints: [from, to],
                params: { routingMode: 'auto' }
            }, {
                boundsAutoApply: true
            });

            multiRoute.model.events.add("requestsuccess", function () {
                hideLoader();
                const distance = multiRoute.getActiveRoute().properties.get("distance").value / 1000;
                let price = Math.round(distance * pricePerKm); // Рассчитываем цену по расстоянию

                // Проверяем, не меньше ли рассчитанная цена минимальной
                if (price < minPrice) {
                    price = minPrice; // Если меньше, устанавливаем минимальную цену
                }

                resultDiv.innerHTML = `
                    <span>Расстояние: ${distance.toFixed(2)} км</span>
                    <span>Стоимость: ≈ ${price} ₽</span>
                `;
            });

            multiRoute.model.events.add("requestfail", function () {
                hideLoader();
                resultDiv.innerHTML = "<span>Ошибка расчета маршрута. Проверьте адреса.</span>";
            });

            myMap.geoObjects.add(multiRoute);
            myMap.container.fitToViewport();
        }
</script>