You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
12 KiB
232 lines
12 KiB
<?
|
|
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
|
|
$APPLICATION->SetPageProperty("description", "Онлайн-калькулятор септика – рассчитайте объем и стоимость автономной канализации за 2 минуты! Учет количества жильцов, типа грунта и водопотребления. Подбор моделей, сравнение цен и рекомендации по монтажу");
|
|
$APPLICATION->SetPageProperty("title", "Рассчитать септик онлайн • Калькулятор расчета Септиков Эра");
|
|
$APPLICATION->SetTitle("Расчет септика");
|
|
?><section class="calc section-inner container">
|
|
<h1 class="calc__title">Рассчитать септик онлайн</h1>
|
|
<form action="#">
|
|
<div class="calc__form">
|
|
<div class="calc__form-top">
|
|
<div class="select">
|
|
<div class="select__name">
|
|
Почва
|
|
</div>
|
|
<select name="soil" id="soil" class="js-calc-field">
|
|
<option value="">Выберите тип почвы</option>
|
|
<option value="att_pochva-is-glin">Глинистая</option>
|
|
<option value="att_pochva-is-pesch">Песчаная</option>
|
|
<option value="att_pochva-is-ilist">Илистая</option>
|
|
<option value="att_pochva-is-kamen">Каменистая</option>
|
|
<option value="att_pochva-is-chernoz">Чернозем</option>
|
|
</select>
|
|
</div>
|
|
<div class="select">
|
|
<div class="select__name">
|
|
Количество людей
|
|
</div>
|
|
<select name="people" id="people" class="js-calc-field">
|
|
<option value="">Выберите количество человек</option>
|
|
<option value="chel-is-users_1">1</option>
|
|
<option value="chel-is-users_3">3</option>
|
|
<option value="chel-is-users_4">4</option>
|
|
<option value="chel-is-users_5">5</option>
|
|
<option value="chel-is-users_6">6-8</option>
|
|
<option value="chel-is-users_8">8-10</option>
|
|
<option value="chel-is-users_15-or-users_20">15-20</option>
|
|
<option value="chel-is-users_20">20</option>
|
|
</select>
|
|
</div>
|
|
<div class="select">
|
|
<div class="select__name">
|
|
Проживание
|
|
</div>
|
|
<select name="living" id="living" class="js-calc-field">
|
|
<option value="">Выберите тип проживания</option>
|
|
<option value="att_projivanie-is-living_seasoned">Сезонное проживание</option>
|
|
<option value="att_projivanie-is-living_ever">Круглогодичное проживание</option>
|
|
<option value="att_projivanie-is-living_notever">Непостоянное проживание</option>
|
|
</select>
|
|
</div>
|
|
<div class="select">
|
|
<div class="select__name">
|
|
Глубина залегания труб
|
|
</div>
|
|
<select name="ground_water" id="ground_water" class="js-calc-field">
|
|
<option value="">Выберите глубину залегания трубы</option>
|
|
<option value="top">До 40 см</option>
|
|
<option value="middle">От 40 до 60 см</option>
|
|
<option value="top">От 60 до 90 см</option>
|
|
<option value="middle">От 90 до 130 см</option>
|
|
<option value="top">От 130 до 150 см</option>
|
|
<option value="middle">Для подвалов</option>
|
|
<option value="middle">Для высоких грунтовых вод</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="calc__form">
|
|
<h2 class="calc__form-title">Залповый сброс</h2>
|
|
<div class="calc__form-bottom">
|
|
<div class="calc__form-groups">
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="bath" id="calc_bath" checked=""> <label class="switcher" for="calc-bath">Ванна, 200л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="bath" value="1" id="bath-1" checked=""> <label class="radio" for="bath-1">1</label> <input class="visually-hidden" type="radio" name="bath" value="2" id="bath-2"> <label class="radio" for="bath-2">2</label> <input class="visually-hidden" type="radio" name="bath" value="3" id="bath-3"> <label class="radio" for="bath-3">3</label>
|
|
</div>
|
|
</div>
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="toilet" id="calc_toilet" checked=""> <label class="switcher" for="calc-toilet">Унитаз, 10л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="toilet" value="1" id="toilet-1" checked=""> <label class="radio" for="toilet-1">1</label> <input class="visually-hidden" type="radio" name="toilet" value="2" id="toilet-2"> <label class="radio" for="toilet-2">2</label> <input class="visually-hidden" type="radio" name="toilet" value="3" id="toilet-3"> <label class="radio" for="toilet-3">3</label>
|
|
</div>
|
|
</div>
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="sink" id="calc_sink" checked=""> <label class="switcher" for="calc-sink">Раковина, 20л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="sink" value="1" id="sink-1" checked=""> <label class="radio" for="sink-1">1</label> <input class="visually-hidden" type="radio" name="sink" value="2" id="sink-2"> <label class="radio" for="sink-2">2</label> <input class="visually-hidden" type="radio" name="sink" value="3" id="sink-3"> <label class="radio" for="sink-3">3</label>
|
|
</div>
|
|
</div>
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="shower" id="calc_shower"> <label class="switcher" for="calc-shower">Душ, 50л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="shower" value="1" id="shower-1" checked=""> <label class="radio" for="shower-1">1</label> <input class="visually-hidden" type="radio" name="shower" value="2" id="shower-2"> <label class="radio" for="shower-2">2</label> <input class="visually-hidden" type="radio" name="shower" value="3" id="shower-3"> <label class="radio" for="shower-3">3</label>
|
|
</div>
|
|
</div>
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="bidet" id="calc_bidet"> <label class="switcher" for="calc-bidet">Биде, 10л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="bidet" value="1" id="bidet-1" checked=""> <label class="radio" for="bidet-1">1</label> <input class="visually-hidden" type="radio" name="bidet" value="2" id="bidet-2"> <label class="radio" for="bidet-2">2</label> <input class="visually-hidden" type="radio" name="bidet" value="3" id="bidet-3"> <label class="radio" for="bidet-3">3</label>
|
|
</div>
|
|
</div>
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="jacuzzi" id="calc_jacuzzi"> <label class="switcher" for="calc-jacuzzi">Джакузи, 400л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="jacuzzi" value="1" id="jacuzzi-1" checked=""> <label class="radio" for="jacuzzi-1">1</label> <input class="visually-hidden" type="radio" name="jacuzzi" value="2" id="jacuzzi-2"> <label class="radio" for="jacuzzi-2">2</label> <input class="visually-hidden" type="radio" name="jacuzzi" value="3" id="jacuzzi-3"> <label class="radio" for="jacuzzi-3">3</label>
|
|
</div>
|
|
</div>
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="washer" id="calc_washer"> <label class="switcher" for="calc-washer">Стиральная машина, 50л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="washer" value="1" id="washer-1" checked=""> <label class="radio" for="washer-1">1</label> <input class="visually-hidden" type="radio" name="washer" value="2" id="washer-2"> <label class="radio" for="washer-2">2</label> <input class="visually-hidden" type="radio" name="washer" value="3" id="washer-3"> <label class="radio" for="washer-3">3</label>
|
|
</div>
|
|
</div>
|
|
<div class="calc__group">
|
|
<div class="calc__switcher">
|
|
<input class="visually-hidden" type="checkbox" name="dishwasher" id="calc_dishwasher"> <label class="switcher" for="calc-dishwasher">Посудомойка, 50л</label>
|
|
</div>
|
|
<div class="calc__radios">
|
|
<input class="visually-hidden" type="radio" name="dishwasher" value="1" id="dishwasher-1" checked=""> <label class="radio" for="dishwasher-1">1</label> <input class="visually-hidden" type="radio" name="dishwasher" value="2" id="dishwasher-2"> <label class="radio" for="dishwasher-2">2</label> <input class="visually-hidden" type="radio" name="dishwasher" value="3" id="dishwasher-3"> <label class="radio" for="dishwasher-3">3</label>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="button button--orange" type="button" onclick="return calculate()">Расcчитать</a>
|
|
</div>
|
|
<div class="calc__sum">
|
|
<h3 class="calc__sum-title">Примерная стоимость монтажа</h3>
|
|
<div class="calc__sum-price">
|
|
30 000 ₽ - 37 000 ₽
|
|
</div>
|
|
<div class="calc__sum-desc">
|
|
Точную цену можно узнать после консультации
|
|
</div>
|
|
<button class="button button--orange" type="button">Заказать монтаж</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<br>
|
|
<br>
|
|
</section>
|
|
<script>
|
|
function getV(id){
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
var calcData = {
|
|
soil: getV('soil'),
|
|
people: getV('people'),
|
|
using: getV('using'),
|
|
depth: getV('depth'),
|
|
calc_bath: getV('calc_bath'),
|
|
calc_toilet: getV('calc_toilet'),
|
|
calc_sink: getV('calc_sink'),
|
|
calc_shower: getV('calc_shower'),
|
|
calc_bidet: getV('calc_bidet'),
|
|
calc_jacuzzi: getV('calc_jacuzzi'),
|
|
calc_washer: getV('calc_washer'),
|
|
calc_dishwasher: getV('calc_dishwasher')
|
|
};
|
|
function calculate() {
|
|
calcData.ground_water.value = calcData.ground_water.checked ? 'att_grunt_water-is-g_water' : '';
|
|
console.dir(calcData);
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
const septics = {
|
|
"septik 1": {
|
|
"emkost": "2-4 человека",
|
|
"material": "песок",
|
|
"deep": "90 см"
|
|
},
|
|
"septik 2": {
|
|
"emkost": "3-4 человека",
|
|
"material": "грунт",
|
|
"deep": "50 см"
|
|
}
|
|
};
|
|
|
|
// Функция для проверки подходящего септика
|
|
function checkSeptic() {
|
|
// Получаем выбранные значения
|
|
const selectedEmkost = document.getElementById('emkost').value;
|
|
const selectedMaterial = document.getElementById('material').value;
|
|
const selectedDeep = document.getElementById('deep').value;
|
|
|
|
// Ищем подходящий септик
|
|
let foundSeptic = null;
|
|
for (const [name, details] of Object.entries(septics)) {
|
|
if (details.emkost === selectedEmkost && details.material === selectedMaterial && details.deep === selectedDeep) {
|
|
foundSeptic = name;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Отображаем результат
|
|
const resultElement = document.getElementById('result');
|
|
if (foundSeptic) {
|
|
resultElement.textContent = `Подходящий септик: ${foundSeptic}`;
|
|
} else {
|
|
resultElement.textContent = 'Подходящий септик не найден.';
|
|
}
|
|
}
|
|
|
|
// Добавляем обработчики событий для каждого select
|
|
document.getElementById('emkost').addEventListener('change', checkSeptic);
|
|
document.getElementById('material').addEventListener('change', checkSeptic);
|
|
document.getElementById('deep').addEventListener('change', checkSeptic);
|
|
</script>
|
|
<?$APPLICATION->IncludeComponent(
|
|
"bitrix:main.include",
|
|
"",
|
|
Array(
|
|
"AREA_FILE_RECURSIVE" => "Y",
|
|
"AREA_FILE_SHOW" => "file",
|
|
"EDIT_TEMPLATE" => "",
|
|
"PATH" => "/local/include/consultation.php"
|
|
)
|
|
);?><?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
|