Онлайн калькуляторы для расчета материалов

.opc-calc * { box-sizing: border-box; margin: 0; padding: 0; } .opc-calc { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: #1e293b; max-width: 800px; margin: 0 auto; padding: 20px 0; } .opc-calc .opc-section { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 24px; margin-bottom: 20px; } .opc-calc .opc-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .opc-calc .opc-badge { width: 28px; height: 28px; background: #dbeafe; color: #1d4ed8; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .opc-calc .opc-desc { font-size: 14px; color: #64748b; margin-bottom: 16px; } .opc-calc .opc-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .opc-calc .opc-block-opt { padding: 16px; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.2s; background: #fff; } .opc-calc .opc-block-opt:hover { border-color: #93c5fd; } .opc-calc .opc-block-opt.active { border-color: #2563eb; background: #eff6ff; } .opc-calc .opc-block-opt .opc-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; } .opc-calc .opc-block-opt.active .opc-radio { border-color: #2563eb; } .opc-calc .opc-block-opt .opc-radio-dot { width: 12px; height: 12px; border-radius: 50%; background: #2563eb; display: none; } .opc-calc .opc-block-opt.active .opc-radio-dot { display: block; } .opc-calc .opc-block-opt .opc-bl { font-weight: 500; } .opc-calc .opc-block-opt .opc-bs { font-size: 12px; color: #64748b; margin-top: 2px; } .opc-calc .opc-row { display: flex; align-items: center; gap: 12px; background: #f8fafc; border-radius: 12px; padding: 12px; margin-bottom: 12px; } .opc-calc .opc-row-label { font-size: 14px; font-weight: 500; color: #64748b; width: 80px; flex-shrink: 0; } .opc-calc .opc-row-inputs { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .opc-calc .opc-ig label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; } .opc-calc .opc-ig input { width: 100%; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; outline: none; } .opc-calc .opc-ig input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); } .opc-calc .opc-btn-rm { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #94a3b8; border-radius: 8px; cursor: pointer; flex-shrink: 0; } .opc-calc .opc-btn-rm:hover { color: #ef4444; background: #fef2f2; } .opc-calc .opc-btn-add { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #2563eb; font-weight: 500; background: transparent; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; margin-top: 4px; } .opc-calc .opc-btn-add:hover { background: #eff6ff; } .opc-calc .opc-empty { text-align: center; padding: 16px; font-size: 14px; color: #94a3b8; background: #f8fafc; border-radius: 12px; } .opc-calc .opc-glue-box { background: #f0f9ff; padding: 16px; border-radius: 12px; border: 2px solid #bae6fd; display: flex; align-items: center; gap: 12px; } .opc-calc .opc-glue-box input[type= checkbox ] { width: 24px; height: 24px; accent-color: #2563eb; cursor: pointer; } .opc-calc .opc-glue-text { font-size: 16px; font-weight: 500; color: #0369a1; } .opc-calc .opc-glue-desc { font-size: 13px; color: #64748b; margin-top: 2px; } .opc-calc .opc-actions { display: flex; gap: 12px; margin-bottom: 24px; } .opc-calc .opc-btn-calc { flex: 1; background: #2563eb; color: #fff; font-size: 18px; font-weight: 600; padding: 16px 24px; border: none; border-radius: 12px; cursor: pointer; } .opc-calc .opc-btn-calc:hover { background: #1d4ed8; } .opc-calc .opc-btn-reset { padding: 16px 24px; border: 1px solid #cbd5e1; background: #fff; color: #475569; font-size: 16px; font-weight: 500; border-radius: 12px; cursor: pointer; } .opc-calc .opc-results { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 24px; margin-bottom: 20px; animation: opcFadeIn 0.4s ease-out; } @keyframes opcFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .opc-calc .opc-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .opc-calc .opc-rc { padding: 16px; border-radius: 12px; border: 1px solid; } .opc-calc .opc-rc.blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #bfdbfe; } .opc-calc .opc-rc.orange { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fed7aa; } .opc-calc .opc-rc.green { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #bbf7d0; } .opc-calc .opc-rc.purple { background: linear-gradient(135deg, #faf5ff, #f3e8ff); border-color: #e9d5ff; } .opc-calc .opc-rc.slate { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-color: #e2e8f0; } .opc-calc .opc-rc.teal { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); border-color: #99f6e4; } .opc-calc .opc-rc.amber { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; } .opc-calc .opc-rc.hl { box-shadow: 0 0 0 2px rgba(37,99,235,0.15); } .opc-calc .opc-rl { font-size: 12px; color: #64748b; margin-bottom: 4px; } .opc-calc .opc-rv { font-size: 24px; font-weight: 700; } .opc-calc .opc-rv.blue { color: #1d4ed8; } .opc-calc .opc-rv.orange { color: #c2410c; } .opc-calc .opc-rv.green { color: #15803d; } .opc-calc .opc-rv.purple { color: #7c3aed; } .opc-calc .opc-rv.slate { color: #334155; } .opc-calc .opc-rv.teal { color: #0f766e; } .opc-calc .opc-rv.amber { color: #b45309; } .opc-calc .opc-ru { font-size: 14px; font-weight: 400; color: #64748b; margin-left: 4px; } .opc-calc .opc-info { margin-top: 20px; padding: 16px; background: #f8fafc; border-radius: 12px; font-size: 14px; color: #475569; } .opc-calc .opc-info .opc-note { font-size: 12px; color: #94a3b8; margin-top: 8px; } @media (max-width: 640px) { .opc-calc .opc-blocks { grid-template-columns: 1fr; } .opc-calc .opc-res-grid { grid-template-columns: repeat(2, 1fr); } .opc-calc .opc-actions { flex-direction: column; } .opc-calc .opc-row { flex-wrap: wrap; } .opc-calc .opc-row-label { width: 100%; margin-bottom: 4px; } } 1 Выберите размер газоблока 200 × 300 × 600 мм В × Ш × Д (высота × ширина × длина) 200 × 400 × 600 мм В × Ш × Д (высота × ширина × длина) 2 Размеры стен Укажите длину и высоту каждой стены в метрах Стена 1Длина (м)Высота (м) + Добавить стену 3 Проёмы (окна, двери) Укажите размеры проёмов в метрах (необязательно) Нет добавленных проёмов + Добавить проём 4 Дополнительно ✓ Рассчитать клей для кладки Расход: 25 кг клея на 1 м³ блока Рассчитать Сбросить ✅ Результаты расчёта (function(){ var BLOCKS = [ { label: '200 × 300 × 600 мм', h: 200, w: 300, l: 600 }, { label: '200 × 400 × 600 мм', h: 200, w: 400, l: 600 } ]; var PALLET = 1.44; var GLUE = 25; var selBlock = 0, wId = 0, oId = 0, walls = [], openings = []; window.opcSelectBlock = function(i) { selBlock = i; var opts = document.querySelectorAll('#opcBlocks .opc-block-opt'); for (var j = 0; j < opts.length; j++) opts[j].classList.toggle('active', j === i); document.getElementById('opcResults').style.display = 'none'; }; window.opcAddWall = function() { walls.push({ id: ++wId, length: '', height: '' }); renderWalls(); }; window.opcAddOpening = function() { openings.push({ id: ++oId, width: '', height: '' }); renderOpenings(); }; function renderWalls() { var c = document.getElementById('opcWalls'); var html = ''; for (var i = 0; i 1 ? '✕' : '') + ''; } c.innerHTML = html; } function renderOpenings() { var c = document.getElementById('opcOpenings'); if (openings.length === 0) { c.innerHTML = 'Нет добавленных проёмов'; return; } var html = ''; for (var i = 0; i < openings.length; i++) { var o = openings[i]; html += '' + 'Проём ' + (i+1) + '' + '' + 'Ширина (м)' + 'Высота (м)' + '' + '✕' + ''; } c.innerHTML = html; } window.opcRemoveWall = function(i) { walls.splice(i, 1); renderWalls(); }; window.opcRemoveOpening = function(i) { openings.splice(i, 1); renderOpenings(); }; window.opcCalculate = function() { var b = BLOCKS[selBlock]; var twa = 0, toa = 0; for (var i = 0; i 0 && h > 0) twa += l * h; } for (var i = 0; i 0 && h > 0) toa += w * h; } var net = Math.max(0, twa - toa); var face = (b.h / 1000) * (b.l / 1000); var blocks = face > 0 ? Math.ceil(net / face) : 0; var bv = (b.h / 1000) * (b.w / 1000) * (b.l / 1000); var bpm = bv > 0 ? Math.floor(1 / bv) : 0; var vol = blocks * bv; var pallets = vol > 0 ? Math.ceil(vol / PALLET) : 0; var glueOn = document.getElementById('opcGlue').checked; var glueKg = vol * GLUE; var html = card('blue', '', 'Общая площадь стен', twa.toFixed(2), 'м²') + card('orange', '', 'Площадь проёмов', toa.toFixed(2), 'м²') + card('green', '', 'Площадь кладки', net.toFixed(2), 'м²') + card('purple', 'hl', 'Количество блоков', blocks, 'шт') + card('blue', 'hl', 'Объём газоблока', vol.toFixed(2), 'м³') + card('slate', '', 'Блоков в 1 м³', bpm, 'шт') + card('teal', 'hl', 'Количество поддонов', pallets, 'подд.'); if (glueOn && vol > 0) { html += card('amber', 'hl', 'Клей для кладки', glueKg.toFixed(0), 'кг'); } document.getElementById('opcGrid').innerHTML = html; var info = 'Размер блока: ' + b.label + ' • Толщина стены: ' + b.w + ' мм' + 'Объём поддона: ' + PALLET + ' м³'; if (glueOn && vol > 0) { info += 'Клей: ' + glueKg.toFixed(0) + ' кг (' + (glueKg/1000).toFixed(2) + ' т) — ' + GLUE + ' кг на 1 м³'; } info += '* Расчёт без учёта запаса на подрезку. Рекомендуем +5-10%.'; document.getElementById('opcInfo').innerHTML = info; document.getElementById('opcResults').style.display = 'block'; document.getElementById('opcResults').scrollIntoView({ behavior: 'smooth', block: 'start' }); }; function card(color, hl, label, value, unit) { return '' + '' + label + '' + '' + value + '' + unit + ''; } window.opcReset = function() { wId = 0; oId = 0; walls = []; openings = []; selBlock = 0; var opts = document.querySelectorAll('#opcBlocks .opc-block-opt'); for (var j = 0; j < opts.length; j++) opts[j].classList.toggle('active', j === 0); document.getElementById('opcGlue').checked = false; document.getElementById('opcResults').style.display = 'none'; opcAddWall(); renderOpenings(); }; opcAddWall(); })();