\u042d\u043a\u043e-\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u2014 Maxsustrans<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Golos+Text:wght@400;500;600;700;900&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --green: #75B527;\r\n --green-light: #EBF6D6;\r\n --green-mid: #C2E08A;\r\n --green-dark: #3B6D11;\r\n --navy: #0E2859;\r\n --navy-mid: #1A3F80;\r\n --navy-light: #E3EDF9;\r\n --teal: #1D9E75;\r\n --teal-light: #DDF2EA;\r\n --white: #ffffff;\r\n --bg: #F7FAF2;\r\n --text-muted: #1a1a1a;\r\n --radius: 10px;\r\n --radius-sm: 6px;\r\n }\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n .eco-brand {\r\n display: flex; align-items: center; gap: 10px;\r\n }\r\n .eco-brand-dot {\r\n width: 32px; height: 32px; border-radius: 10px;\r\n background: rgba(117,181,39,0.25);\r\n border: 1.5px solid rgba(117,181,39,0.5);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px;\r\n }\r\n .eco-brand-name {\r\n font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7);\r\n letter-spacing: 1.5px; text-transform: uppercase;\r\n }\r\n\r\n .eco-live-badge {\r\n font-size: 11px; font-weight: 600; color: #75B527;\r\n background: rgba(117,181,39,0.15);\r\n border: 1px solid rgba(117,181,39,0.3);\r\n border-radius: 99px; padding: 5px 12px;\r\n display: flex; align-items: center; gap: 6px;\r\n }\r\n .eco-live-dot {\r\n width: 6px; height: 6px; border-radius: 50%;\r\n background: #75B527;\r\n animation: blink 1.8s ease-in-out infinite;\r\n }\r\n @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }\r\n\r\n .eco-hero-title {\r\n position: relative; z-index: 1;\r\n }\r\n .eco-hero-title h1 {\r\n font-size: 28px; font-weight: 800; color: white;\r\n line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 6px;\r\n }\r\n .eco-hero-title h1 span { color: #75B527; }\r\n .eco-hero-title p {\r\n font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5;\r\n }\r\n\r\n \/* \u2500\u2500 FLOATING CONTROL CARD \u2500\u2500 *\/\r\n .eco-controls {\r\n background: white;\r\n border-radius: var(--radius);\r\n box-shadow: 0 -8px 32px rgba(14,40,89,0.08), 0 2px 12px rgba(14,40,89,0.06);\r\n padding: 28px 28px 24px;\r\n margin: -56px 20px 0;\r\n position: relative; z-index: 10;\r\n }\r\n\r\n .control-row {\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;\r\n }\r\n @media(max-width: 480px){ .control-row { grid-template-columns: 1fr; } }\r\n\r\n .field-label {\r\n font-size: 12px; font-weight: 600; color: var(--text-muted);\r\n letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px;\r\n }\r\n\r\n \/* TYPE SELECTOR \u2014 pill buttons *\/\r\n .type-pills {\r\n display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;\r\n }\r\n @media(max-width: 480px){ .type-pills { grid-template-columns: repeat(2,1fr); } }\r\n\r\n .type-pill {\r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n gap: 4px; padding: 10px 4px; border-radius: var(--radius-sm);\r\n border: 1.5px solid #E8F0DC; background: #f4f4f4;\r\n cursor: pointer; transition: all 0.2s;\r\n font-family: 'Golos Text', sans-serif;\r\n font-size: 14px; font-weight: 600; color: var(--text-muted);\r\n letter-spacing: 0.2px;\r\n }\r\n .type-pill .pill-icon { font-size: 20px; }\r\n .type-pill:hover { border-color: var(--green-mid); color: var(--green-dark); background: var(--green-light); }\r\n .type-pill.active {\r\n border-color: var(--green); background: var(--green-light);\r\n color: var(--green-dark); box-shadow: 0 0 0 3px rgba(117,181,39,0.15);\r\n }\r\n\r\n \/* WEIGHT INPUT *\/\r\n .weight-field { }\r\n .weight-input-row {\r\n display: flex; align-items: center;\r\n background: #F7FAF2; border: 1.5px solid #E8F0DC;\r\n border-radius: var(--radius-sm); overflow: hidden;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n }\r\n .weight-input-row:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(117,181,39,0.15); }\r\n\r\n .weight-btn {\r\n width: 44px; height: 52px; border: none; background: none; cursor: pointer;\r\n font-size: 20px; color: var(--green); display: flex; align-items: center; justify-content: center;\r\n transition: background 0.15s; flex-shrink: 0;\r\n }\r\n .weight-btn:hover { background: rgba(117,181,39,0.1); }\r\n .weight-btn:active { background: rgba(117,181,39,0.2); }\r\n\r\n #weightInput {\r\n flex: 1; border: none; background: none; outline: none;\r\n text-align: center; font-family: 'Golos Text', sans-serif;\r\n font-size: 22px; font-weight: 700; color: var(--navy);\r\n width: 100%;\r\n }\r\n .weight-unit-tag {\r\n padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--green);\r\n border-left: 1px solid #E8F0DC; height: 52px; display: flex; align-items: center;\r\n background: rgba(117,181,39,0.06);\r\n }\r\n\r\n \/* SLIDER *\/\r\n .slider-wrap { padding: 4px 0 2px; }\r\n .eco-slider {\r\n -webkit-appearance: none; width: 100%; height: 6px; border-radius: 99px;\r\n background: linear-gradient(to right, var(--green) 0%, var(--green) var(--pct, 2%), #E8F0DC var(--pct, 2%), #E8F0DC 100%);\r\n outline: none; border: none; cursor: pointer; margin-bottom: 6px;\r\n }\r\n .eco-slider::-webkit-slider-thumb {\r\n -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;\r\n background: white; border: 3px solid var(--green);\r\n box-shadow: 0 2px 8px rgba(14,40,89,0.2); cursor: pointer;\r\n transition: transform 0.15s, box-shadow 0.15s;\r\n }\r\n .eco-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 2px 12px rgba(117,181,39,0.4); }\r\n .eco-slider::-moz-range-thumb {\r\n width: 22px; height: 22px; border-radius: 50%;\r\n background: white; border: 3px solid var(--green); cursor: pointer;\r\n }\r\n .slider-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }\r\n\r\n \/* \u2500\u2500 RESULTS SECTION \u2500\u2500 *\/\r\n .eco-results { padding: 24px 28px 28px; }\r\n\r\n .results-header {\r\n display: flex; align-items: center; gap: 10px; margin-bottom: 18px;\r\n }\r\n .results-line { flex: 1; height: 1px; background: #E8F0DC; }\r\n .results-label { font-size: 15px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; }\r\n\r\n \/* Summary strip *\/\r\n .eco-summary-strip {\r\n background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);\r\n border-radius: 8px; padding: 14px 18px;\r\n display: flex; align-items: center; gap: 12px; margin-bottom: 18px;\r\n position: relative; overflow: hidden;\r\n }\r\n .eco-summary-strip::after {\r\n content: ''; position: absolute; right: -20px; top: -20px;\r\n width: 100px; height: 100px; border-radius: 50%;\r\n background: rgba(117,181,39,0.12);\r\n }\r\n .strip-icon { font-size: 20px; flex-shrink: 0; position: relative; z-index: 1; }\r\n .strip-text { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.4; position: relative; z-index: 1; }\r\n .strip-text strong { color: white; font-weight: 700; }\r\n\r\n \/* RESULT CARDS *\/\r\n .eco-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\r\n @media(max-width: 480px){ .eco-cards { grid-template-columns: 1fr; } }\r\n\r\n .eco-card {\r\n border-radius: 8px; padding: 20px 16px; position: relative; overflow: hidden;\r\n transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;\r\n }\r\n \r\n .eco-card:hover { transform: translateY(-4px); }\r\n\r\n .card-green { background: var(--green-light); border: 1.5px solid var(--green-mid); }\r\n .card-green::before { background: var(--green); }\r\n .card-green:hover { box-shadow: 0 12px 30px rgba(117,181,39,0.22); }\r\n\r\n .card-blue { background: var(--navy-light); border: 1.5px solid #A8C4E8; }\r\n .card-blue::before { background: var(--navy); }\r\n .card-blue:hover { box-shadow: 0 12px 30px rgba(14,40,89,0.14); }\r\n\r\n .card-teal { background: var(--teal-light); border: 1.5px solid #90D9BC; }\r\n .card-teal::before { background: var(--teal); }\r\n .card-teal:hover { box-shadow: 0 12px 30px rgba(29,158,117,0.18); }\r\n\r\n .card-icon {\r\n width: 42px; height: 42px; border-radius: 5px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 20px; margin-bottom: 14px; position: relative; z-index: 1;\r\n }\r\n .card-green .card-icon { background: rgba(117,181,39,0.2); }\r\n .card-blue .card-icon { background: rgba(14,40,89,0.1); }\r\n .card-teal .card-icon { background: rgba(29,158,117,0.15); }\r\n\r\n .card-num {\r\n font-size: 30px; font-weight: 800; line-height: 1;\r\n letter-spacing: -1px; margin-bottom: 3px; position: relative; z-index: 1;\r\n }\r\n .card-green .card-num { color: var(--green-dark); }\r\n .card-blue .card-num { color: var(--navy); }\r\n .card-teal .card-num { color: #0A6648; }\r\n\r\n .card-unit { font-size: 15px; font-weight: 600; margin-bottom: 6px; position: relative; z-index: 1; }\r\n .card-green .card-unit { color: var(--green); }\r\n .card-blue .card-unit { color: #185FA5; }\r\n .card-teal .card-unit { color: var(--teal); }\r\n\r\n .card-desc { font-size: 15px; font-weight:600; color: var(--text-muted); line-height: 1.4; position: relative; z-index: 1; }\r\n\r\n .card-hidden { opacity: 0.3; pointer-events: none; }\r\n\r\n \/* PROGRESS BARS *\/\r\n .eco-bars { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }\r\n .bar-row { display: flex; align-items: center; gap: 10px; }\r\n .bar-label { font-size: 12px; color: var(--text-muted); width: 80px; flex-shrink: 0; }\r\n .bar-track { flex: 1; height: 6px; background: #E8F0DC; border-radius: 99px; overflow: hidden; }\r\n .bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s cubic-bezier(.4,0,.2,1); }\r\n .bar-co2 { background: linear-gradient(90deg, #1D9E75, #75B527); }\r\n .bar-water { background: linear-gradient(90deg, #185FA5, #1D9E75); }\r\n .bar-val { font-size: 12px; font-weight: 600; color: var(--navy); min-width: 60px; text-align: right; }\r\n\r\n \/* FOOTER *\/\r\n .eco-footer {\r\n padding: 16px 28px 20px;\r\n border-top: 1px solid #EEF4E6;\r\n display: flex; align-items: center; justify-content: space-between;\r\n flex-wrap: wrap; gap: 8px;\r\n }\r\n .eco-footer-note { font-size: 11px; color: var(--text-muted); }\r\n .eco-badge {\r\n font-size: 11px; font-weight: 700; color: white;\r\n background: linear-gradient(135deg, var(--navy), var(--navy-mid));\r\n border-radius: 99px; padding: 5px 14px; letter-spacing: 0.5px;\r\n }\r\n\r\n \/* PULSE ANIM *\/\r\n .num-pulse { animation: numPop 0.4s cubic-bezier(.36,.07,.19,.97); }\r\n @keyframes numPop { 0%{transform:scale(1)} 40%{transform:scale(1.1)} 100%{transform:scale(1)} }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"eco-widget\" role=\"main\" aria-label=\"\u042d\u043a\u043e-\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u0445\u043e\u0434\u043e\u0432\">\r\n\r\n \r\n <div class=\"eco-controls\">\r\n <div class=\"control-row\">\r\n <div>\r\n <div class=\"field-label\">\u0422\u0438\u043f \u043e\u0442\u0445\u043e\u0434\u0430<\/div>\r\n <div class=\"type-pills\" id=\"typePills\">\r\n <button class=\"type-pill active\" data-type=\"paper\">\r\n <span class=\"pill-icon\">\ud83d\udcc4<\/span>\u0411\u0443\u043c\u0430\u0433\u0430\r\n <\/button>\r\n <button class=\"type-pill\" data-type=\"plastic\">\r\n <span class=\"pill-icon\">\ud83e\uddf4<\/span>\u041f\u043b\u0430\u0441\u0442\u0438\u043a\r\n <\/button>\r\n <button class=\"type-pill\" data-type=\"glass\">\r\n <span class=\"pill-icon\">\ud83e\uded9<\/span>\u0421\u0442\u0435\u043a\u043b\u043e\r\n <\/button>\r\n <button class=\"type-pill\" data-type=\"metal\">\r\n <span class=\"pill-icon\">\ud83d\udd29<\/span>\u041c\u0435\u0442\u0430\u043b\u043b\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"weight-field\">\r\n <div class=\"field-label\">\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e<\/div>\r\n <div class=\"weight-input-row\">\r\n <button class=\"weight-btn\" id=\"btnMinus\">\u2212<\/button>\r\n <input type=\"number\" id=\"weightInput\" value=\"10\" min=\"0.5\" max=\"1000\" step=\"0.5\" aria-label=\"\u0412\u0435\u0441 \u0432 \u043a\u0438\u043b\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445\">\r\n <div class=\"weight-unit-tag\">\u043a\u0433<\/div>\r\n <button class=\"weight-btn\" id=\"btnPlus\">+<\/button>\r\n <\/div>\r\n <div class=\"slider-wrap\" style=\"margin-top:10px;\">\r\n <input type=\"range\" class=\"eco-slider\" id=\"weightSlider\" min=\"1\" max=\"500\" value=\"10\" step=\"1\">\r\n <div class=\"slider-labels\"><span>1 \u043a\u0433<\/span><span>250 \u043a\u0433<\/span><span>500 \u043a\u0433<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"eco-results\">\r\n <div class=\"results-header\">\r\n <div class=\"results-line\"><\/div>\r\n <div class=\"results-label\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/div>\r\n <div class=\"results-line\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"eco-summary-strip\">\r\n <span class=\"strip-icon\">\ud83c\udf31<\/span>\r\n <span class=\"strip-text\" id=\"summaryText\">\u0412\u044b \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 <strong>10 \u043a\u0433 \u0431\u0443\u043c\u0430\u0433\u0438<\/strong><\/span>\r\n <\/div>\r\n\r\n <div class=\"eco-cards\">\r\n <div class=\"eco-card card-green\" id=\"cardTrees\">\r\n <div class=\"card-icon\">\ud83c\udf33<\/div>\r\n <div class=\"card-num\" id=\"treesVal\">0.17<\/div>\r\n <div class=\"card-unit\">\u0414\u0435\u0440\u0435\u0432\u044c\u0435\u0432<\/div>\r\n <div class=\"card-desc\">\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043e \u043e\u0442 \u0432\u044b\u0440\u0443\u0431\u043a\u0438<\/div>\r\n <\/div>\r\n <div class=\"eco-card card-blue\" id=\"cardWater\">\r\n <div class=\"card-icon\">\ud83d\udca7<\/div>\r\n <div class=\"card-num\" id=\"waterVal\">50<\/div>\r\n <div class=\"card-unit\">\u041b\u0438\u0442\u0440\u043e\u0432<\/div>\r\n <div class=\"card-desc\">\u0412\u043e\u0434\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u043b\u0435\u043d\u043e<\/div>\r\n <\/div>\r\n <div class=\"eco-card card-teal\" id=\"cardCO2\">\r\n <div class=\"card-icon\">\ud83c\udf0d<\/div>\r\n <div class=\"card-num\" id=\"co2Val\">15<\/div>\r\n <div class=\"card-unit\">\u041a\u0413 CO\u2082<\/div>\r\n <div class=\"card-desc\">\u0412\u044b\u0431\u0440\u043e\u0441\u043e\u0432 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043e<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"eco-bars\">\r\n <div class=\"bar-row\">\r\n <span class=\"bar-label\">CO\u2082<\/span>\r\n <div class=\"bar-track\"><div class=\"bar-fill bar-co2\" id=\"barCO2\" style=\"width:30%\"><\/div><\/div>\r\n <span class=\"bar-val\" id=\"barCO2Val\">15 \u043a\u0433<\/span>\r\n <\/div>\r\n <div class=\"bar-row\">\r\n <span class=\"bar-label\">\u0412\u043e\u0434\u0430<\/span>\r\n <div class=\"bar-track\"><div class=\"bar-fill bar-water\" id=\"barWater\" style=\"width:10%\"><\/div><\/div>\r\n <span class=\"bar-val\" id=\"barWaterVal\">50 \u043b<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"eco-footer\">\r\n <span class=\"eco-footer-note\">\u0420\u0430\u0441\u0447\u0451\u0442 \u043f\u043e \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/span>\r\n <span class=\"eco-badge\">Maxsustrans<\/span>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst factors = {\r\n paper: { trees: 0.017, water: 5, co2: 1.5, maxCO2: 3000, maxWater: 10000 },\r\n plastic: { trees: 0, water: 0, co2: 6, maxCO2: 3000, maxWater: 10000 },\r\n glass: { trees: 0, water: 0, co2: 0.3, maxCO2: 3000, maxWater: 10000 },\r\n metal: { trees: 0, water: 0, co2: 2.5, maxCO2: 3000, maxWater: 10000 }\r\n};\r\nconst wasteNames = { paper:'\u0431\u0443\u043c\u0430\u0433\u0438', plastic:'\u043f\u043b\u0430\u0441\u0442\u0438\u043a\u0430', glass:'\u0441\u0442\u0435\u043a\u043b\u0430', metal:'\u043c\u0435\u0442\u0430\u043b\u043b\u0430' };\r\n\r\nlet currentType = 'paper';\r\nlet animFrames = {};\r\n\r\nconst weightInput = document.getElementById('weightInput');\r\nconst sliderEl = document.getElementById('weightSlider');\r\nconst summaryEl = document.getElementById('summaryText');\r\nconst treesValEl = document.getElementById('treesVal');\r\nconst waterValEl = document.getElementById('waterVal');\r\nconst co2ValEl = document.getElementById('co2Val');\r\nconst cardTrees = document.getElementById('cardTrees');\r\nconst barCO2El = document.getElementById('barCO2');\r\nconst barWaterEl = document.getElementById('barWater');\r\nconst barCO2Val = document.getElementById('barCO2Val');\r\nconst barWaterVal = document.getElementById('barWaterVal');\r\n\r\nfunction animateNum(el, to, decimals) {\r\n cancelAnimationFrame(animFrames[el.id]);\r\n const from = parseFloat(el.textContent.replace(\/\\s\/g,'')) || 0;\r\n const start = performance.now();\r\n const dur = 550;\r\n function step(now) {\r\n const t = Math.min((now - start) \/ dur, 1);\r\n const ease = 1 - Math.pow(1 - t, 3);\r\n const val = from + (to - from) * ease;\r\n const display = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString('ru');\r\n el.textContent = display;\r\n if (t < 1) { animFrames[el.id] = requestAnimationFrame(step); }\r\n else { el.textContent = decimals > 0 ? to.toFixed(decimals) : Math.round(to).toLocaleString('ru'); }\r\n }\r\n animFrames[el.id] = requestAnimationFrame(step);\r\n el.classList.remove('num-pulse');\r\n void el.offsetWidth;\r\n el.classList.add('num-pulse');\r\n}\r\n\r\nfunction updateSliderTrack() {\r\n const pct = ((sliderEl.value - 1) \/ (500 - 1)) * 100;\r\n sliderEl.style.setProperty('--pct', pct + '%');\r\n}\r\n\r\nfunction calc() {\r\n const f = factors[currentType];\r\n const weight = Math.max(0.5, parseFloat(weightInput.value) || 0);\r\n\r\n const trees = weight * f.trees;\r\n const water = weight * f.water;\r\n const co2 = weight * f.co2;\r\n\r\n const tDec = trees < 10 ? 2 : trees < 100 ? 1 : 0;\r\n const cDec = co2 < 10 ? 1 : 0;\r\n\r\n animateNum(treesValEl, trees, tDec);\r\n animateNum(waterValEl, water, 0);\r\n animateNum(co2ValEl, co2, cDec);\r\n\r\n cardTrees.classList.toggle('card-hidden', f.trees === 0);\r\n\r\n const maxCO2 = Math.max(co2 * 2, 100);\r\n const maxWater = Math.max(water * 2, 100);\r\n barCO2El.style.width = Math.min((co2 \/ maxCO2) * 100, 100) + '%';\r\n barWaterEl.style.width = Math.min((water \/ maxWater) * 100, 100) + '%';\r\n barCO2Val.textContent = (co2 < 10 ? co2.toFixed(1) : Math.round(co2)) + ' \u043a\u0433';\r\n barWaterVal.textContent= Math.round(water).toLocaleString('ru') + ' \u043b';\r\n\r\n const wDisp = weight % 1 === 0 ? weight : parseFloat(weight.toFixed(1));\r\n summaryEl.innerHTML = `\u0412\u044b \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 <strong>${wDisp} \u043a\u0433 ${wasteNames[currentType]}<\/strong>`;\r\n}\r\n\r\ndocument.getElementById('typePills').addEventListener('click', e => {\r\n const btn = e.target.closest('.type-pill');\r\n if (!btn) return;\r\n document.querySelectorAll('.type-pill').forEach(p => p.classList.remove('active'));\r\n btn.classList.add('active');\r\n currentType = btn.dataset.type;\r\n calc();\r\n});\r\n\r\nsliderEl.addEventListener('input', () => {\r\n weightInput.value = sliderEl.value;\r\n updateSliderTrack();\r\n calc();\r\n});\r\n\r\nweightInput.addEventListener('input', () => {\r\n const v = Math.min(500, Math.max(0.5, parseFloat(weightInput.value) || 0.5));\r\n sliderEl.value = Math.round(v);\r\n updateSliderTrack();\r\n calc();\r\n});\r\n\r\ndocument.getElementById('btnMinus').addEventListener('click', () => {\r\n const v = Math.max(0.5, (parseFloat(weightInput.value) || 1) - 1);\r\n weightInput.value = v;\r\n sliderEl.value = Math.round(v);\r\n updateSliderTrack(); calc();\r\n});\r\ndocument.getElementById('btnPlus').addEventListener('click', () => {\r\n const v = Math.min(500, (parseFloat(weightInput.value) || 0) + 1);\r\n weightInput.value = v;\r\n sliderEl.value = Math.round(v);\r\n updateSliderTrack(); calc();\r\n});\r\n\r\nupdateSliderTrack();\r\ncalc();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u042d\u043a\u043e-\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0442 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u0445\u043e\u0434\u043e\u0432 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0438\u043f \u0438 \u0432\u0435\u0441 \u043e\u0442\u0445\u043e\u0434\u043e\u0432 \u2014 \u0443\u0437\u043d\u0430\u0439\u0442\u0435, \u043a\u0430\u043a\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u0443 \u0432\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u0435 \u043f\u043b\u0430\u043d\u0435\u0442\u0435. \u042d\u043a\u043e-\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u2014 Maxsustrans \u0422\u0438\u043f \u043e\u0442\u0445\u043e\u0434\u0430 \ud83d\udcc4\u0411\u0443\u043c\u0430\u0433\u0430 \ud83e\uddf4\u041f\u043b\u0430\u0441\u0442\u0438\u043a \ud83e\uded9\u0421\u0442\u0435\u043a\u043b\u043e \ud83d\udd29\u041c\u0435\u0442\u0430\u043b\u043b \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u2212 \u043a\u0433 + 1 \u043a\u0433250 \u043a\u0433500 \u043a\u0433 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \ud83c\udf31 \u0412\u044b \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 10 \u043a\u0433 \u0431\u0443\u043c\u0430\u0433\u0438 \ud83c\udf33 0.17 \u0414\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043e \u043e\u0442 \u0432\u044b\u0440\u0443\u0431\u043a\u0438 \ud83d\udca7 50 \u041b\u0438\u0442\u0440\u043e\u0432 \u0412\u043e\u0434\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u043b\u0435\u043d\u043e \ud83c\udf0d 15 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6705","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/pages\/6705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/comments?post=6705"}],"version-history":[{"count":121,"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/pages\/6705\/revisions"}],"predecessor-version":[{"id":8111,"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/pages\/6705\/revisions\/8111"}],"wp:attachment":[{"href":"https:\/\/maxsustrans.uz\/uz\/wp-json\/wp\/v2\/media?parent=6705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}