Сайт находится в разработке
Типография для бизнеса.
baltic-art@yandex.ru
Санкт-Петербург, ул. Будапештская 87 к3.
пн.- пт. с 10:00 до 19:00
Санкт-Петербург, ул. Будапештская 87 к3.
пн.- пт. с 10:00 до 19:00
Печать полиграфической продукции в Санкт-Петербурге
Калькулятор стоимости визиток
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор полиграфии</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.calculator {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
}
.calculator h2 {
text-align: center;
}
.calculator label {
display: block;
margin: 10px 0 5px;
}
.calculator select, .calculator input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.calculator button:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Калькулятор полиграфии</h2>
<label for="product">Тип продукции:</label>
<select id="product">
<option value="visiting_card">Визитки</option>
<option value="flyer">Листовки</option>
<option value="booklet">Буклеты</option>
<option value="poster">Плакаты</option>
</select>
<label for="quantity">Тираж (шт.):</label>
<input type="number" id="quantity" min="100" value="100">
<label for="color">Цветность:</label>
<select id="color">
<option value="1+0">1+0 (односторонняя)</option>
<option value="4+0">4+0 (односторонняя полноцветная)</option>
<option value="4+4">4+4 (двусторонняя полноцветная)</option>
</select>
<label for="paper">Бумага:</label>
<select id="paper">
<option value="90g">90 г/м²</option>
<option value="130g">130 г/м²</option>
<option value="170g">170 г/м²</option>
<option value="300g">300 г/м²</option>
</select>
<label for="extra">Дополнительные услуги:</label>
<select id="extra">
<option value="none">Нет</option>
<option value="lamination">Ламинация</option>
<option value="uv">УФ-лакировка</option>
<option value="folding">Фальцовка</option>
</select>
<button onclick="calculate()">Рассчитать</button>
<div class="result" id="result"></div>
</div>
<script>
// Базовая стоимость для каждого типа продукции
const basePrices = {
visiting_card: 500, // Визитки
flyer: 1000, // Листовки
booklet: 2000, // Буклеты
poster: 3000 // Плакаты
};
// Коэффициенты для цветности
const colorMultipliers = {
"1+0": 1.0,
"4+0": 1.5,
"4+4": 2.0
};
// Коэффициенты для бумаги
const paperMultipliers = {
"90g": 1.0,
"130g": 1.2,
"170g": 1.5,
"300g": 2.0
};
// Стоимость дополнительных услуг
const extraCosts = {
none: 0,
lamination: 300,
uv: 500,
folding: 200
};
function calculate() {
// Получаем значения из формы
const product = document.getElementById("product").value;
const quantity = parseInt(document.getElementById("quantity").value);
const color = document.getElementById("color").value;
const paper = document.getElementById("paper").value;
const extra = document.getElementById("extra").value;
// Рассчитываем стоимость
let totalCost = basePrices[product] * (quantity / 100); // Базовая стоимость за 100 шт.
totalCost *= colorMultipliers[color]; // Учитываем цветность
totalCost *= paperMultipliers[paper]; // Учитываем бумагу
totalCost += extraCosts[extra]; // Добавляем стоимость дополнительных услуг
// Выводим результат
document.getElementById("result").innerText = Примерная стоимость: ${totalCost.toFixed(2)} руб.;
}
</script>
</body>
</html>