Расчет стоимости доставки

<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&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>