<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор стоимости тонировки автомобиля</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #2c3e50;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
header {
background: linear-gradient(135deg, #2c3e50 0%, #4a6491 100%);
color: white;
padding: 25px;
text-align: center;
}
h1 {
margin-bottom: 10px;
font-size: 32px;
}
.description {
font-size: 18px;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.calculator-container {
display: flex;
flex-wrap: wrap;
padding: 25px;
}
.car-selection {
flex: 1;
min-width: 350px;
padding: 25px;
background: #f8f9fa;
border-radius: 10px;
margin-right: 25px;
}
.car-visualization {
flex: 1;
min-width: 350px;
padding: 25px;
text-align: center;
}
.form-group {
margin-bottom: 25px;
padding: 15px;
background: white;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.form-group h3 {
margin-bottom: 15px;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 8px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #2c3e50;
}
select, input {
width: 100%;
padding: 14px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
margin-bottom: 10px;
transition: border-color 0.3s;
}
select:focus, input:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.glass-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px;
margin-top: 15px;
}
.glass-option {
display: flex;
align-items: center;
padding: 12px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.glass-option:hover {
background: #e8f4fc;
border-color: #3498db;
transform: translateY(-2px);
}
.glass-option input {
margin-right: 12px;
width: auto;
}
.car-image {
max-width: 100%;
height: auto;
margin-bottom: 25px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
transition: transform 0.3s ease;
}
.car-image:hover {
transform: scale(1.02);
}
.summary {
background: linear-gradient(135deg, #2c3e50 0%, #4a6491 100%);
color: white;
padding: 25px;
border-radius: 10px;
margin-top: 25px;
}
.summary h3 {
margin-bottom: 20px;
text-align: center;
font-size: 22px;
}
.summary-item {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.total {
font-size: 26px;
font-weight: bold;
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid rgba(255, 255, 255, 0.3);
}
.contact-form {
margin-top: 25px;
padding: 25px;
background: #f8f9fa;
border-radius: 10px;
}
.contact-form h3 {
margin-bottom: 20px;
color: #2c3e50;
text-align: center;
}
button {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}
button:hover {
background: linear-gradient(135deg, #2980b9 0%, #1e2a38 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.counter {
display: flex;
align-items: center;
margin-top: 10px;
}
.counter button {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin: 0 10px;
}
.counter span {
font-size: 18px;
font-weight: bold;
min-width: 30px;
text-align: center;
}
.van-options {
background: #e8f4fc;
padding: 15px;
border-radius: 8px;
margin-top: 15px;
border-left: 4px solid #3498db;
}
@Media (max-width: 900px) {
.calculator-container {
flex-direction: column;
}
.car-selection {
margin-right: 0;
margin-bottom: 25px;
}
.glass-options {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Калькулятор стоимости тонировки автомобиля</h1>
<p class="description">Рассчитайте точную стоимость тонировки с учетом всех особенностей вашего автомобиля: форточек, люков и множества боковых стекол</p>
</header>
<div class="calculator-container">
<div class="car-selection">
<div class="form-group">
<h3>Тип автомобиля</h3>
<label for="car-type">Тип кузова:</label>
<select id="car-type">
<option value="">Выберите тип кузова</option>
<option value="sedan">Седан (4-дверный)</option>
<option value="hatchback3">Хэтчбек (3-дверный)</option>
<option value="hatchback5">Хэтчбек (5-дверный)</option>
<option value="universal">Универсал</option>
<option value="crossover">Кроссовер</option>
<option value="suv">Внедорожник</option>
<option value="minivan">Минивэн</option>
<option value="coupe">Купе</option>
<option value="van">Фургон</option>
</select>
</div>
<div class="form-group">
<h3>Стекла для тонировки</h3>
<label>Выберите стекла для тонировки:</label>
<div class="glass-options" id="glass-options">
<p style="grid-column: 1 / -1; text-align: center; padding: 20px;">Сначала выберите тип кузова</p>
</div>
</div>
<div class="form-group">
<h3>Пленка для тонировки</h3>
<label for="film-type">Тип пленки:</label>
<select id="film-type">
<option value="">Выберите тип пленки</option>
<option value="1.3">Llumar ATR (50%) - 1.3x</option>
<option value="1.3">Llumar ATR (35%) - 1.3x</option>
<option value="1.3">Llumar ATR (20%) - 1.3x</option>
<option value="1.0">3M Classic (35%) - 1.0x</option>
<option value="2.0">3M Crystalline (70%) - 2.0x</option>
<option value="1.5">SunTek Carbon (40%) - 1.5x</option>
<option value="1.8">Johnson IR (30%) - 1.8x</option>
</select>
</div>
<div class="form-group">
<h3>Дополнительные услуги</h3>
<div class="glass-options">
<label class="glass-option">
<input type="checkbox" id="remove-old" value="1500">
<span>Снятие старой пленки (+1 500 руб.)</span>
</label>
<label class="glass-option">
<input type="checkbox" id="master-call" value="3000">
<span>Вызов мастера (+3 000 руб.)</span>
</label>
<label class="glass-option">
<input type="checkbox" id="antirain" value="2000">
<span>Нанесение "Антидождь" (+2 000 руб.)</span>
</label>
<label class="glass-option">
<input type="checkbox" id="headlights" value="2500">
<span>Оклейка фар (+2 500 руб.)</span>
</label>
</div>
</div>
</div>
<div class="car-visualization">
<img src="https://via.placeholder.com/500x250/e0e0e0/666666?text=%D0%9..." alt="Изображение автомобиля" id="car-image" class="car-image">
<div class="summary">
<h3>Стоимость тонировки</h3>
<div class="summary-item">
<span>Стоимость стекол:</span>
<span id="glass-price">0 руб.</span>
</div>
<div class="summary-item">
<span>Коэффициент пленки:</span>
<span id="film-coeff">1.0x</span>
</div>
<div class="summary-item">
<span>Дополнительные услуги:</span>
<span id="services-price">0 руб.</span>
</div>
<div class="total">
<span>ИТОГО:</span>
<span id="total-price">0 руб.</span>
</div>
</div>
<div class="contact-form">
<h3>Оставьте заявку</h3>
<div class="form-group">
<input type="text" placeholder="Ваше имя" id="client-name">
</div>
<div class="form-group">
<input type="tel" placeholder="Ваш телефон" id="client-phone">
</div>
<div class="form-group">
<input type="email" placeholder="Ваш email (необязательно)" id="client-email">
</div>
<button id="calculate-btn">Рассчитать стоимость</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Данные по типам кузовов и стеклам
const carData = {
sedan: {
name: "Седан",
image: "https://via.placeholder.com/500x250/3498db/ffffff?text=%D0%A1%D0%B5%D0%B4%D0%B0%D0%BD",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 3000, default: true },
{ id: "front-side", name: "Передние боковые", price: 2000, default: true },
{ id: "rear-side", name: "Задние боковые", price: 2500, default: true },
{ id: "rear", name: "Заднее стекло", price: 2800, default: true },
{ id: "front-vent", name: "Передние форточки", price: 800, default: false },
{ id: "sunroof", name: "Люк", price: 1500, default: false }
]
},
hatchback3: {
name: "Хэтчбек 3дв",
image: "https://via.placeholder.com/500x250/2ecc71/ffffff?text=%D0%A...",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 3000, default: true },
{ id: "front-side", name: "Передние боковые", price: 2000, default: true },
{ id: "rear-side", name: "Задние боковые", price: 2500, default: true },
{ id: "rear", name: "Заднее стекло", price: 2800, default: true },
{ id: "front-vent", name: "Передние форточки", price: 800, default: false },
{ id: "sunroof", name: "Люк", price: 1500, default: false }
]
},
hatchback5: {
name: "Хэтчбек 5дв",
image: "https://via.placeholder.com/500x250/e74c3c/ffffff?text=%D0%A...",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 3000, default: true },
{ id: "front-side", name: "Передние боковые", price: 2000, default: true },
{ id: "rear-side", name: "Задние боковые", price: 2500, default: true },
{ id: "rear", name: "Заднее стекло", price: 2800, default: true },
{ id: "front-vent", name: "Передние форточки", price: 800, default: false },
{ id: "rear-vent", name: "Задние форточки", price: 800, default: false },
{ id: "sunroof", name: "Люк", price: 1500, default: false }
]
},
universal: {
name: "Универсал",
image: "https://via.placeholder.com/500x250/9b59b6/ffffff?text=%D0%A...",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 3200, default: true },
{ id: "front-side", name: "Передние боковые", price: 2200, default: true },
{ id: "rear-side", name: "Задние боковые", price: 2700, default: true },
{ id: "rear", name: "Заднее стекло", price: 3000, default: true },
{ id: "front-vent", name: "Передние форточки", price: 900, default: false },
{ id: "rear-vent", name: "Задние форточки", price: 900, default: false },
{ id: "sunroof", name: "Люк", price: 1700, default: false }
]
},
crossover: {
name: "Кроссовер",
image: "https://via.placeholder.com/500x250/f39c12/ffffff?text=%D0%9...",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 3500, default: true },
{ id: "front-side", name: "Передние боковые", price: 2500, default: true },
{ id: "rear-side", name: "Задние боковые", price: 2800, default: true },
{ id: "rear", name: "Заднее стекло", price: 3200, default: true },
{ id: "front-vent", name: "Передние форточки", price: 1000, default: false },
{ id: "rear-vent", name: "Задние форточки", price: 1000, default: false },
{ id: "sunroof", name: "Люк", price: 1800, default: false }
]
},
suv: {
name: "Внедорожник",
image: "https://via.placeholder.com/500x250/34495e/ffffff?text=%D0%9...",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 4000, default: true },
{ id: "front-side", name: "Передние боковые", price: 2800, default: true },
{ id: "rear-side", name: "Задние боковые", price: 3000, default: true },
{ id: "rear", name: "Заднее стекло", price: 3500, default: true },
{ id: "front-vent", name: "Передние форточки", price: 1200, default: false },
{ id: "rear-vent", name: "Задние форточки", price: 1200, default: false },
{ id: "sunroof", name: "Люк", price: 2000, default: false }
]
},
minivan: {
name: "Минивэн",
image: "https://via.placeholder.com/500x250/16a085/ffffff?text=%D0%9...",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 3800, default: true },
{ id: "front-side", name: "Передние боковые", price: 2600, default: true },
{ id: "rear-side", name: "Задние боковые", price: 2900, default: true },
{ id: "rear", name: "Заднее стекло", price: 3300, default: true },
{ id: "front-vent", name: "Передние форточки", price: 1100, default: false },
{ id: "rear-vent", name: "Задние форточки", price: 1100, default: false },
{ id: "sunroof", name: "Люк", price: 1900, default: false }
]
},
coupe: {
name: "Купе",
image: "https://via.placeholder.com/500x250/e67e22/ffffff?text=%D0%9A%D1%83%D0%BF%D0%B5",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 3200, default: true },
{ id: "front-side", name: "Передние боковые", price: 2200, default: true },
{ id: "rear-side", name: "Задние боковые", price: 2600, default: true },
{ id: "rear", name: "Заднее стекло", price: 3000, default: true },
{ id: "sunroof", name: "Люк", price: 1700, default: false }
]
},
van: {
name: "Фургон",
image: "https://via.placeholder.com/500x250/7f8c8d/ffffff?text=%D0%A...",
glasses: [
{ id: "windscreen", name: "Лобовое стекло", price: 4500, default: true },
{ id: "front-side", name: "Передние боковые", price: 3000, default: true },
{ id: "front-vent", name: "Передние форточки", price: 1500, default: false },
{ id: "rear", name: "Заднее стекло", price: 4000, default: true },
{ id: "side-windows", name: "Боковые стекла (каждое)", price: 1800, default: 0, count: true },
{ id: "rear-vent", name: "Задние форточки", price: 1500, default: false }
]
}
};
// Элементы DOM
const carTypeSelect = document.getElementById('car-type');
const glassOptionsDiv = document.getElementById('glass-options');
const carImage = document.getElementById('car-image');
const filmTypeSelect = document.getElementById('film-type');
const glassPriceSpan = document.getElementById('glass-price');
const filmCoeffSpan = document.getElementById('film-coeff');
const servicesPriceSpan = document.getElementById('services-price');
const totalPriceSpan = document.getElementById('total-price');
const calculateBtn = document.getElementById('calculate-btn');
// Обработчик изменения типа кузова
carTypeSelect.addEventListener('change', function() {
const selectedCar = carData[this.value];
if (selectedCar) {
// Обновляем изображение автомобиля
carImage.src = selectedCar.image;
carImage.alt = selectedCar.name;
// Генерируем options для стекол
let glassHTML = '';
selectedCar.glasses.forEach(glass => {
if (glass.count) {
// Для фургона - счетчик боковых стекол
glassHTML += `
<div class="van-options">
<label>${glass.name}:</label>
<div class="counter">
<button type="button" class="decrease" data-id="${glass.id}">-</button>
<span id="count-${glass.id}">0</span>
<button type="button" class="increase" data-id="${glass.id}">+</button>
</div>
<div>Цена за единицу: ${glass.price} руб.</div>
</div>
`;
} else {
// Обычный чекбокс
glassHTML += `
<label class="glass-option">
<input type="checkbox" id="${glass.id}" value="${glass.price}" ${glass.default ? 'checked' : ''}>
<span>${glass.name} (${glass.price} руб.)</span>
</label>
`;
}
});
glassOptionsDiv.innerHTML = glassHTML;
// Добавляем обработчики для кнопок счетчика
document.querySelectorAll('.increase').forEach(btn => {
btn.addEventListener('click', function() {
const id = this.getAttribute('data-id');
const countElement = document.getElementById(`count-${id}`);
let count = parseInt(countElement.textContent);
countElement.textContent = count + 1;
calculatePrice();
});
});
document.querySelectorAll('.decrease').forEach(btn => {
btn.addEventListener('click', function() {
const id = this.getAttribute('data-id');
const countElement = document.getElementById(`count-${id}`);
let count = parseInt(countElement.textContent);
if (count > 0) {
countElement.textContent = count - 1;
calculatePrice();
}
});
});
// Пересчитываем стоимость
calculatePrice();
} else {
glassOptionsDiv.innerHTML = '<p style="grid-column: 1 / -1; text-align: center; padding: 20px;">Сначала выберите тип кузова</p>';
carImage.src = 'https://via.placeholder.com/500x250/e0e0e0/666666?text=%D0%9...';
}
});
// Обработчики изменений для пересчета стоимости
filmTypeSelect.addEventListener('change', calculatePrice);
// Динамическое добавление обработчиков для чекбоксов
document.addEventListener('change', function(e) {
if (e.target.type === 'checkbox') {
calculatePrice();
}
});
// Функция расчета стоимости
function calculatePrice() {
let glassTotal = 0;
let servicesTotal = 0;
// Суммируем стоимость выбранных стекол
document.querySelectorAll('#glass-options input[type="checkbox"]:checked').forEach(checkbox => {
glassTotal += parseInt(checkbox.value);
});
// Суммируем стоимость боковых стекол фургона
document.querySelectorAll('[id^="count-"]').forEach(element => {
const count = parseInt(element.textContent);
const id = element.id.replace('count-', '');
const glass = carData[carTypeSelect.value]?.glasses.find(g => g.id === id);
if (glass) {
glassTotal += count * glass.price;
}
});
// Суммируем стоимость дополнительных услуг
document.querySelectorAll('.glass-options:not(#glass-options) input[type="checkbox"]:checked').forEach(checkbox => {
servicesTotal += parseInt(checkbox.value);
});
// Получаем коэффициент пленки
const filmCoeff = filmTypeSelect.value ? parseFloat(filmTypeSelect.value) : 1.0;
// Рассчитываем итоговую стоимость
const total = glassTotal * filmCoeff + servicesTotal;
// Обновляем отображение
glassPriceSpan.textContent = `${glassTotal.toLocaleString('ru-RU')} руб.`;
filmCoeffSpan.textContent = `${filmCoeff}x`;
servicesPriceSpan.textContent = `${servicesTotal.toLocaleString('ru-RU')} руб.`;
totalPriceSpan.textContent = `${total.toLocaleString('ru-RU')} руб.`;
}
// Обработчик кнопки расчета
calculateBtn.addEventListener('click', function() {
const name = document.getElementById('client-name').value;
const phone = document.getElementById('client-phone').value;
if (!name || !phone) {
alert('Пожалуйста, заполните ваше имя и телефон!');
return;
}
if (carTypeSelect.value === "") {
alert('Пожалуйста, выберите тип кузова!');
return;
}
calculatePrice();
// Собираем информацию о выбранных опциях
const selectedOptions = [];
document.querySelectorAll('#glass-options input[type="checkbox"]:checked').forEach(checkbox => {
selectedOptions.push(checkbox.parentElement.querySelector('span').textContent.split(' (')[0]);
});
document.querySelectorAll('[id^="count-"]').forEach(element => {
const count = parseInt(element.textContent);
if (count > 0) {
const id = element.id.replace('count-', '');
const glass = carData[carTypeSelect.value]?.glasses.find(g => g.id === id);
if (glass) {
selectedOptions.push(`${count} × ${glass.name}`);
}
}
});
alert(`Спасибо, ${name}! Ваша заявка принята.\n\nТип автомобиля: ${carData[carTypeSelect.value].name}\nВыбранные опции: ${selectedOptions.join(', ')}\nИтоговая стоимость: ${totalPriceSpan.textContent}\n\nМы свяжемся с вами по телефону ${phone} в течение 15 минут для уточнения деталей.`);
});
// Инициализация
calculatePrice();
});
</script>
</body>
</html>
