\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n .sintez-group-calc * { margin: 0; padding: 0; box-sizing: border-box; }\n .sintez-group-calc { \n font-family: 'Open Sans', sans-serif; \n background: #F7FAFC; \n padding: 20px; \n max-width: 800px; \n margin: 0 auto;\n }\n .sintez-group-calc .calc-container { \n background: white; \n padding: 40px; \n border-radius: 12px; \n box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1); \n }\n .sintez-group-calc h2 { \n color: #1E3A5F; \n font-family: 'Montserrat', sans-serif; \n margin-bottom: 25px; \n font-size: 36px; \n font-weight: 700;\n }\n \n .sintez-group-calc .subjects h3 { \n color: #1E3A5F; \n margin-bottom: 20px; \n font-size: 22px; \n font-weight: 600;\n }\n \n .sintez-group-calc .subject-item { \n display: flex; \n align-items: center; \n padding: 18px; \n margin-bottom: 12px; \n background: #F7FAFC; \n border-radius: 8px; \n border: 2px solid #E2E8F0;\n transition: all 0.3s; \n }\n .sintez-group-calc .subject-item:hover { background: #E8F1F8; }\n .sintez-group-calc .subject-item.active { background: #E8F1F8; border-color: #F4A300; }\n \n .sintez-group-calc .subject-item input[type=\"checkbox\"] { \n width: 24px; \n height: 24px; \n cursor: pointer; \n margin-right: 15px; \n flex-shrink: 0;\n accent-color: #F4A300;\n }\n .sintez-group-calc .subject-item label { \n flex: 1; \n cursor: pointer; \n color: #2D3748; \n font-weight: 600; \n font-size: 22px;\n margin-right: 15px;\n }\n \n .sintez-group-calc .price-tag { \n color: #1E3A5F; \n font-weight: 700; \n font-size: 18px; \n margin-right: 20px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n \n .sintez-group-calc .hours-control { \n display: flex; \n align-items: center; \n gap: 10px;\n flex-shrink: 0;\n }\n .sintez-group-calc .hours-control label {\n font-size: 18px;\n color: #2D3748;\n font-weight: 700;\n white-space: nowrap;\n }\n .sintez-group-calc .subject-item input[type=\"number\"] { \n width: 80px; \n padding: 10px; \n border: 2px solid #CBD5E0; \n border-radius: 6px; \n text-align: center; \n font-size: 20px; \n font-weight: bold;\n color: #1E3A5F;\n }\n .sintez-group-calc .subject-item input[type=\"number\"]:focus { \n outline: none; \n border-color: #F4A300; \n }\n \n .sintez-group-calc .result { \n background: #1E3A5F; \n color: white; \n padding: 25px; \n border-radius: 12px; \n text-align: center; \n margin-top: 25px; \n }\n .sintez-group-calc .result h3 { \n font-size: 22px; \n margin-bottom: 12px; \n font-weight: 600; \n }\n .sintez-group-calc .result .total { \n font-size: 44px; \n font-weight: 700; \n color: #F4A300; \n font-family: 'Montserrat', sans-serif; \n }\n .sintez-group-calc .result .details { \n font-size: 16px; \n margin-top: 12px; \n opacity: 0.9; \n }\n\n \/* \u041c\u041e\u0411\u0418\u041b\u042c\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f \u2014 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 *\/\n @media (max-width: 768px) {\n .sintez-group-calc { padding: 10px; }\n .sintez-group-calc .calc-container { padding: 15px; max-width: 100%; }\n .sintez-group-calc h2 { font-size: 22px; margin-bottom: 15px; }\n .sintez-group-calc .subjects h3 { font-size: 15px; margin-bottom: 10px; }\n \n .sintez-group-calc .subject-item { \n padding: 8px 10px;\n margin-bottom: 8px;\n gap: 6px;\n flex-wrap: nowrap;\n }\n \n .sintez-group-calc .subject-item input[type=\"checkbox\"] { \n width: 18px; \n height: 18px; \n margin-right: 6px; \n }\n \n .sintez-group-calc .subject-item label { \n font-size: 14px;\n margin-right: 6px;\n min-width: auto;\n flex: 1;\n }\n \n .sintez-group-calc .price-tag { \n font-size: 12px;\n margin-right: 8px;\n }\n \n .sintez-group-calc .hours-control { \n gap: 4px;\n }\n \n .sintez-group-calc .hours-control label { \n font-size: 12px;\n }\n \n .sintez-group-calc .subject-item input[type=\"number\"] { \n width: 45px;\n font-size: 14px;\n padding: 5px;\n }\n \n .sintez-group-calc .result { padding: 15px; }\n .sintez-group-calc .result h3 { font-size: 16px; }\n .sintez-group-calc .result .total { font-size: 32px; }\n .sintez-group-calc .result .details { font-size: 13px; }\n }\n\n @media (max-width: 480px) {\n .sintez-group-calc .calc-container { padding: 10px; }\n .sintez-group-calc h2 { font-size: 18px; }\n .sintez-group-calc .subjects h3 { font-size: 13px; }\n \n .sintez-group-calc .subject-item { \n padding: 6px 8px;\n gap: 4px;\n }\n \n .sintez-group-calc .subject-item input[type=\"checkbox\"] { \n width: 16px; \n height: 16px; \n margin-right: 4px;\n }\n \n .sintez-group-calc .subject-item label { \n font-size: 12px;\n margin-right: 4px;\n }\n \n .sintez-group-calc .price-tag { \n font-size: 11px;\n margin-right: 6px;\n }\n \n .sintez-group-calc .hours-control label { \n font-size: 11px;\n }\n \n .sintez-group-calc .subject-item input[type=\"number\"] { \n width: 40px;\n font-size: 13px;\n padding: 4px;\n }\n \n .sintez-group-calc .result .total { font-size: 28px; }\n .sintez-group-calc .result .details { font-size: 12px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"sintez-group-calc\">\n <div class=\"calc-container\">\n <h2>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439<\/h2>\n \n <div class=\"subjects\">\n <h3>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u043e\u0432 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n \n <div class=\"subject-item\" id=\"group-item-physics\">\n <input type=\"checkbox\" id=\"group-physics\" data-subject=\"\u0424\u0438\u0437\u0438\u043a\u0430\" data-price=\"57\">\n <label for=\"group-physics\">\u0424\u0438\u0437\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-physics\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-chemistry\">\n <input type=\"checkbox\" id=\"group-chemistry\" data-subject=\"\u0425\u0438\u043c\u0438\u044f\" data-price=\"57\">\n <label for=\"group-chemistry\">\u0425\u0438\u043c\u0438\u044f<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-chemistry\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-biology\">\n <input type=\"checkbox\" id=\"group-biology\" data-subject=\"\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f\" data-price=\"57\">\n <label for=\"group-biology\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-biology\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-math\">\n <input type=\"checkbox\" id=\"group-math\" data-subject=\"\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430\" data-price=\"57\">\n <label for=\"group-math\">\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-math\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-english\">\n <input type=\"checkbox\" id=\"group-english\" data-subject=\"\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439\" data-price=\"57\">\n <label for=\"group-english\">\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-english\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-history\">\n <input type=\"checkbox\" id=\"group-history\" data-subject=\"\u0418\u0441\u0442\u043e\u0440\u0438\u044f\" data-price=\"57\">\n <label for=\"group-history\">\u0418\u0441\u0442\u043e\u0440\u0438\u044f<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-history\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"result\">\n <h3>\u0418\u0442\u043e\u0433\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n <div class=\"total\" id=\"group-total\">0 PLN<\/div>\n <div class=\"details\" id=\"group-details\">\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const subjects = ['physics', 'chemistry', 'biology', 'math', 'english', 'history'];\n const totalElement = document.getElementById('group-total');\n const detailsElement = document.getElementById('group-details');\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('group-' + subject);\n const hoursInput = document.getElementById('group-hours-' + subject);\n const itemDiv = document.getElementById('group-item-' + subject);\n \n checkbox.addEventListener('change', function() {\n if (this.checked) {\n hoursInput.disabled = false;\n itemDiv.classList.add('active');\n } else {\n hoursInput.disabled = true;\n hoursInput.value = 1;\n itemDiv.classList.remove('active');\n }\n calculateTotal();\n });\n \n hoursInput.addEventListener('input', calculateTotal);\n });\n \n function calculateTotal() {\n let total = 0;\n let totalHours = 0;\n let selectedSubjects = [];\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('group-' + subject);\n const hoursInput = document.getElementById('group-hours-' + subject);\n \n if (checkbox.checked) {\n const price = parseFloat(checkbox.dataset.price) || 0;\n const hours = parseInt(hoursInput.value) || 0;\n const subjectTotal = price * hours;\n \n total += subjectTotal;\n totalHours += hours;\n selectedSubjects.push(`${checkbox.dataset.subject}: ${hours}\u0447 \u00d7 ${price} PLN`);\n }\n });\n \n totalElement.textContent = `${total} PLN`;\n \n if (selectedSubjects.length > 0) {\n detailsElement.textContent = `\u0412\u0441\u0435\u0433\u043e \u0447\u0430\u0441\u043e\u0432: ${totalHours} | ${selectedSubjects.join(', ')}`;\n } else {\n detailsElement.textContent = '\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430';\n }\n }\n \n calculateTotal();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n .sintez-individual-calc * { margin: 0; padding: 0; box-sizing: border-box; }\n .sintez-individual-calc { \n font-family: 'Open Sans', sans-serif; \n background: #F7FAFC; \n padding: 20px; \n max-width: 800px; \n margin: 0 auto;\n }\n .sintez-individual-calc .calc-container { \n background: white; \n padding: 40px; \n border-radius: 12px; \n box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1); \n }\n .sintez-individual-calc h2 { \n color: #1E3A5F; \n font-family: 'Montserrat', sans-serif; \n margin-bottom: 25px; \n font-size: 36px; \n font-weight: 700;\n }\n \n .sintez-individual-calc .subjects h3 { \n color: #1E3A5F; \n margin-bottom: 20px; \n font-size: 22px; \n font-weight: 600;\n }\n \n .sintez-individual-calc .subject-item { \n display: flex; \n align-items: center; \n padding: 18px; \n margin-bottom: 12px; \n background: #F7FAFC; \n border-radius: 8px; \n border: 2px solid #E2E8F0;\n transition: all 0.3s; \n }\n .sintez-individual-calc .subject-item:hover { background: #E8F1F8; }\n .sintez-individual-calc .subject-item.active { background: #E8F1F8; border-color: #F4A300; }\n \n .sintez-individual-calc .subject-item input[type=\"checkbox\"] { \n width: 24px; \n height: 24px; \n cursor: pointer; \n margin-right: 15px; \n flex-shrink: 0;\n accent-color: #F4A300;\n }\n .sintez-individual-calc .subject-item label { \n flex: 1; \n cursor: pointer; \n color: #2D3748; \n font-weight: 600; \n font-size: 22px;\n margin-right: 15px;\n }\n \n .sintez-individual-calc .price-tag { \n color: #1E3A5F; \n font-weight: 700; \n font-size: 18px; \n margin-right: 20px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n \n .sintez-individual-calc .hours-control { \n display: flex; \n align-items: center; \n gap: 10px;\n flex-shrink: 0;\n }\n .sintez-individual-calc .hours-control label {\n font-size: 18px;\n color: #2D3748;\n font-weight: 700;\n white-space: nowrap;\n }\n .sintez-individual-calc .subject-item input[type=\"number\"] { \n width: 80px; \n padding: 10px; \n border: 2px solid #CBD5E0; \n border-radius: 6px; \n text-align: center; \n font-size: 20px; \n font-weight: bold;\n color: #1E3A5F;\n }\n .sintez-individual-calc .subject-item input[type=\"number\"]:focus { \n outline: none; \n border-color: #F4A300; \n }\n \n .sintez-individual-calc .result { \n background: #1E3A5F; \n color: white; \n padding: 25px; \n border-radius: 12px; \n text-align: center; \n margin-top: 25px; \n }\n .sintez-individual-calc .result h3 { \n font-size: 22px; \n margin-bottom: 12px; \n font-weight: 600; \n }\n .sintez-individual-calc .result .total { \n font-size: 44px; \n font-weight: 700; \n color: #F4A300; \n font-family: 'Montserrat', sans-serif; \n }\n .sintez-individual-calc .result .details { \n font-size: 16px; \n margin-top: 12px; \n opacity: 0.9; \n }\n\n \/* \u041c\u041e\u0411\u0418\u041b\u042c\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f \u2014 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 *\/\n @media (max-width: 768px) {\n .sintez-individual-calc { padding: 10px; }\n .sintez-individual-calc .calc-container { padding: 15px; max-width: 100%; }\n .sintez-individual-calc h2 { font-size: 22px; margin-bottom: 15px; }\n .sintez-individual-calc .subjects h3 { font-size: 15px; margin-bottom: 10px; }\n \n .sintez-individual-calc .subject-item { \n padding: 8px 10px;\n margin-bottom: 8px;\n gap: 6px;\n flex-wrap: nowrap;\n }\n \n .sintez-individual-calc .subject-item input[type=\"checkbox\"] { \n width: 18px; \n height: 18px; \n margin-right: 6px; \n }\n \n .sintez-individual-calc .subject-item label { \n font-size: 14px;\n margin-right: 6px;\n min-width: auto;\n flex: 1;\n }\n \n .sintez-individual-calc .price-tag { \n font-size: 12px;\n margin-right: 8px;\n }\n \n .sintez-individual-calc .hours-control { \n gap: 4px;\n }\n \n .sintez-individual-calc .hours-control label { \n font-size: 12px;\n }\n \n .sintez-individual-calc .subject-item input[type=\"number\"] { \n width: 45px;\n font-size: 14px;\n padding: 5px;\n }\n \n .sintez-individual-calc .result { padding: 15px; }\n .sintez-individual-calc .result h3 { font-size: 16px; }\n .sintez-individual-calc .result .total { font-size: 32px; }\n .sintez-individual-calc .result .details { font-size: 13px; }\n }\n\n @media (max-width: 480px) {\n .sintez-individual-calc .calc-container { padding: 10px; }\n .sintez-individual-calc h2 { font-size: 18px; }\n .sintez-individual-calc .subjects h3 { font-size: 13px; }\n \n .sintez-individual-calc .subject-item { \n padding: 6px 8px;\n gap: 4px;\n }\n \n .sintez-individual-calc .subject-item input[type=\"checkbox\"] { \n width: 16px; \n height: 16px; \n margin-right: 4px;\n }\n \n .sintez-individual-calc .subject-item label { \n font-size: 12px;\n margin-right: 4px;\n }\n \n .sintez-individual-calc .price-tag { \n font-size: 11px;\n margin-right: 6px;\n }\n \n .sintez-individual-calc .hours-control label { \n font-size: 11px;\n }\n \n .sintez-individual-calc .subject-item input[type=\"number\"] { \n width: 40px;\n font-size: 13px;\n padding: 4px;\n }\n \n .sintez-individual-calc .result .total { font-size: 28px; }\n .sintez-individual-calc .result .details { font-size: 12px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"sintez-individual-calc\">\n <div class=\"calc-container\">\n <h2>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439<\/h2>\n \n <div class=\"subjects\">\n <h3>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u043e\u0432 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n \n <div class=\"subject-item\" id=\"ind-item-physics\">\n <input type=\"checkbox\" id=\"ind-physics\" data-subject=\"\u0424\u0438\u0437\u0438\u043a\u0430\" data-price=\"90\">\n <label for=\"ind-physics\">\u0424\u0438\u0437\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">90 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-physics\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-chemistry\">\n <input type=\"checkbox\" id=\"ind-chemistry\" data-subject=\"\u0425\u0438\u043c\u0438\u044f\" data-price=\"90\">\n <label for=\"ind-chemistry\">\u0425\u0438\u043c\u0438\u044f<\/label>\n <span class=\"price-tag\">90 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-chemistry\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-biology\">\n <input type=\"checkbox\" id=\"ind-biology\" data-subject=\"\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f\" data-price=\"90\">\n <label for=\"ind-biology\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f<\/label>\n <span class=\"price-tag\">90 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-biology\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-math\">\n <input type=\"checkbox\" id=\"ind-math\" data-subject=\"\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430\" data-price=\"75\">\n <label for=\"ind-math\">\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">75 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-math\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-english\">\n <input type=\"checkbox\" id=\"ind-english\" data-subject=\"\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439\" data-price=\"75\">\n <label for=\"ind-english\">\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439<\/label>\n <span class=\"price-tag\">75 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-english\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-history\">\n <input type=\"checkbox\" id=\"ind-history\" data-subject=\"\u0418\u0441\u0442\u043e\u0440\u0438\u044f\" data-price=\"75\">\n <label for=\"ind-history\">\u0418\u0441\u0442\u043e\u0440\u0438\u044f<\/label>\n <span class=\"price-tag\">75 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-history\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"result\">\n <h3>\u0418\u0442\u043e\u0433\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n <div class=\"total\" id=\"ind-total\">0 PLN<\/div>\n <div class=\"details\" id=\"ind-details\">\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const subjects = ['physics', 'chemistry', 'biology', 'math', 'english', 'history'];\n const totalElement = document.getElementById('ind-total');\n const detailsElement = document.getElementById('ind-details');\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('ind-' + subject);\n const hoursInput = document.getElementById('ind-hours-' + subject);\n const itemDiv = document.getElementById('ind-item-' + subject);\n \n checkbox.addEventListener('change', function() {\n if (this.checked) {\n hoursInput.disabled = false;\n itemDiv.classList.add('active');\n } else {\n hoursInput.disabled = true;\n hoursInput.value = 1;\n itemDiv.classList.remove('active');\n }\n calculateTotal();\n });\n \n hoursInput.addEventListener('input', calculateTotal);\n });\n \n function calculateTotal() {\n let total = 0;\n let totalHours = 0;\n let selectedSubjects = [];\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('ind-' + subject);\n const hoursInput = document.getElementById('ind-hours-' + subject);\n \n if (checkbox.checked) {\n const price = parseFloat(checkbox.dataset.price) || 0;\n const hours = parseInt(hoursInput.value) || 0;\n const subjectTotal = price * hours;\n \n total += subjectTotal;\n totalHours += hours;\n selectedSubjects.push(`${checkbox.dataset.subject}: ${hours}\u0447 \u00d7 ${price} PLN`);\n }\n });\n \n totalElement.textContent = `${total} PLN`;\n \n if (selectedSubjects.length > 0) {\n detailsElement.textContent = `\u0412\u0441\u0435\u0433\u043e \u0447\u0430\u0441\u043e\u0432: ${totalHours} | ${selectedSubjects.join(', ')}`;\n } else {\n detailsElement.textContent = '\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430';\n }\n }\n \n calculateTotal();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u043e\u0432 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e: \u0424\u0438\u0437\u0438\u043a\u0430 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0425\u0438\u043c\u0438\u044f 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0418\u0441\u0442\u043e\u0440\u0438\u044f 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0418\u0442\u043e\u0433\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e: 0 PLN \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/fullwidth-page.php","meta":{"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sintez.school\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=38"}],"version-history":[{"count":10,"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":548,"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions\/548"}],"wp:attachment":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":38,"date":"2023-05-13T18:19:56","date_gmt":"2023-05-13T18:19:56","guid":{"rendered":"https:\/\/demo.themesdaddy.com\/flixita-pro\/?page_id=38"},"modified":"2026-07-02T11:22:02","modified_gmt":"2026-07-02T11:22:02","slug":"pricing","status":"publish","type":"page","link":"https:\/\/www.sintez.school\/?page_id=38","title":{"rendered":"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438"},"content":{"rendered":"\n\n\n\n \n \n \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n .sintez-group-calc * { margin: 0; padding: 0; box-sizing: border-box; }\n .sintez-group-calc { \n font-family: 'Open Sans', sans-serif; \n background: #F7FAFC; \n padding: 20px; \n max-width: 800px; \n margin: 0 auto;\n }\n .sintez-group-calc .calc-container { \n background: white; \n padding: 40px; \n border-radius: 12px; \n box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1); \n }\n .sintez-group-calc h2 { \n color: #1E3A5F; \n font-family: 'Montserrat', sans-serif; \n margin-bottom: 25px; \n font-size: 36px; \n font-weight: 700;\n }\n \n .sintez-group-calc .subjects h3 { \n color: #1E3A5F; \n margin-bottom: 20px; \n font-size: 22px; \n font-weight: 600;\n }\n \n .sintez-group-calc .subject-item { \n display: flex; \n align-items: center; \n padding: 18px; \n margin-bottom: 12px; \n background: #F7FAFC; \n border-radius: 8px; \n border: 2px solid #E2E8F0;\n transition: all 0.3s; \n }\n .sintez-group-calc .subject-item:hover { background: #E8F1F8; }\n .sintez-group-calc .subject-item.active { background: #E8F1F8; border-color: #F4A300; }\n \n .sintez-group-calc .subject-item input[type=\"checkbox\"] { \n width: 24px; \n height: 24px; \n cursor: pointer; \n margin-right: 15px; \n flex-shrink: 0;\n accent-color: #F4A300;\n }\n .sintez-group-calc .subject-item label { \n flex: 1; \n cursor: pointer; \n color: #2D3748; \n font-weight: 600; \n font-size: 22px;\n margin-right: 15px;\n }\n \n .sintez-group-calc .price-tag { \n color: #1E3A5F; \n font-weight: 700; \n font-size: 18px; \n margin-right: 20px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n \n .sintez-group-calc .hours-control { \n display: flex; \n align-items: center; \n gap: 10px;\n flex-shrink: 0;\n }\n .sintez-group-calc .hours-control label {\n font-size: 18px;\n color: #2D3748;\n font-weight: 700;\n white-space: nowrap;\n }\n .sintez-group-calc .subject-item input[type=\"number\"] { \n width: 80px; \n padding: 10px; \n border: 2px solid #CBD5E0; \n border-radius: 6px; \n text-align: center; \n font-size: 20px; \n font-weight: bold;\n color: #1E3A5F;\n }\n .sintez-group-calc .subject-item input[type=\"number\"]:focus { \n outline: none; \n border-color: #F4A300; \n }\n \n .sintez-group-calc .result { \n background: #1E3A5F; \n color: white; \n padding: 25px; \n border-radius: 12px; \n text-align: center; \n margin-top: 25px; \n }\n .sintez-group-calc .result h3 { \n font-size: 22px; \n margin-bottom: 12px; \n font-weight: 600; \n }\n .sintez-group-calc .result .total { \n font-size: 44px; \n font-weight: 700; \n color: #F4A300; \n font-family: 'Montserrat', sans-serif; \n }\n .sintez-group-calc .result .details { \n font-size: 16px; \n margin-top: 12px; \n opacity: 0.9; \n }\n\n \/* \u041c\u041e\u0411\u0418\u041b\u042c\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f \u2014 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 *\/\n @media (max-width: 768px) {\n .sintez-group-calc { padding: 10px; }\n .sintez-group-calc .calc-container { padding: 15px; max-width: 100%; }\n .sintez-group-calc h2 { font-size: 22px; margin-bottom: 15px; }\n .sintez-group-calc .subjects h3 { font-size: 15px; margin-bottom: 10px; }\n \n .sintez-group-calc .subject-item { \n padding: 8px 10px;\n margin-bottom: 8px;\n gap: 6px;\n flex-wrap: nowrap;\n }\n \n .sintez-group-calc .subject-item input[type=\"checkbox\"] { \n width: 18px; \n height: 18px; \n margin-right: 6px; \n }\n \n .sintez-group-calc .subject-item label { \n font-size: 14px;\n margin-right: 6px;\n min-width: auto;\n flex: 1;\n }\n \n .sintez-group-calc .price-tag { \n font-size: 12px;\n margin-right: 8px;\n }\n \n .sintez-group-calc .hours-control { \n gap: 4px;\n }\n \n .sintez-group-calc .hours-control label { \n font-size: 12px;\n }\n \n .sintez-group-calc .subject-item input[type=\"number\"] { \n width: 45px;\n font-size: 14px;\n padding: 5px;\n }\n \n .sintez-group-calc .result { padding: 15px; }\n .sintez-group-calc .result h3 { font-size: 16px; }\n .sintez-group-calc .result .total { font-size: 32px; }\n .sintez-group-calc .result .details { font-size: 13px; }\n }\n\n @media (max-width: 480px) {\n .sintez-group-calc .calc-container { padding: 10px; }\n .sintez-group-calc h2 { font-size: 18px; }\n .sintez-group-calc .subjects h3 { font-size: 13px; }\n \n .sintez-group-calc .subject-item { \n padding: 6px 8px;\n gap: 4px;\n }\n \n .sintez-group-calc .subject-item input[type=\"checkbox\"] { \n width: 16px; \n height: 16px; \n margin-right: 4px;\n }\n \n .sintez-group-calc .subject-item label { \n font-size: 12px;\n margin-right: 4px;\n }\n \n .sintez-group-calc .price-tag { \n font-size: 11px;\n margin-right: 6px;\n }\n \n .sintez-group-calc .hours-control label { \n font-size: 11px;\n }\n \n .sintez-group-calc .subject-item input[type=\"number\"] { \n width: 40px;\n font-size: 13px;\n padding: 4px;\n }\n \n .sintez-group-calc .result .total { font-size: 28px; }\n .sintez-group-calc .result .details { font-size: 12px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"sintez-group-calc\">\n <div class=\"calc-container\">\n <h2>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439<\/h2>\n \n <div class=\"subjects\">\n <h3>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u043e\u0432 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n \n <div class=\"subject-item\" id=\"group-item-physics\">\n <input type=\"checkbox\" id=\"group-physics\" data-subject=\"\u0424\u0438\u0437\u0438\u043a\u0430\" data-price=\"57\">\n <label for=\"group-physics\">\u0424\u0438\u0437\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-physics\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-chemistry\">\n <input type=\"checkbox\" id=\"group-chemistry\" data-subject=\"\u0425\u0438\u043c\u0438\u044f\" data-price=\"57\">\n <label for=\"group-chemistry\">\u0425\u0438\u043c\u0438\u044f<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-chemistry\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-biology\">\n <input type=\"checkbox\" id=\"group-biology\" data-subject=\"\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f\" data-price=\"57\">\n <label for=\"group-biology\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-biology\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-math\">\n <input type=\"checkbox\" id=\"group-math\" data-subject=\"\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430\" data-price=\"57\">\n <label for=\"group-math\">\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-math\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-english\">\n <input type=\"checkbox\" id=\"group-english\" data-subject=\"\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439\" data-price=\"57\">\n <label for=\"group-english\">\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-english\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"group-item-history\">\n <input type=\"checkbox\" id=\"group-history\" data-subject=\"\u0418\u0441\u0442\u043e\u0440\u0438\u044f\" data-price=\"57\">\n <label for=\"group-history\">\u0418\u0441\u0442\u043e\u0440\u0438\u044f<\/label>\n <span class=\"price-tag\">57 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"group-hours-history\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"result\">\n <h3>\u0418\u0442\u043e\u0433\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n <div class=\"total\" id=\"group-total\">0 PLN<\/div>\n <div class=\"details\" id=\"group-details\">\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const subjects = ['physics', 'chemistry', 'biology', 'math', 'english', 'history'];\n const totalElement = document.getElementById('group-total');\n const detailsElement = document.getElementById('group-details');\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('group-' + subject);\n const hoursInput = document.getElementById('group-hours-' + subject);\n const itemDiv = document.getElementById('group-item-' + subject);\n \n checkbox.addEventListener('change', function() {\n if (this.checked) {\n hoursInput.disabled = false;\n itemDiv.classList.add('active');\n } else {\n hoursInput.disabled = true;\n hoursInput.value = 1;\n itemDiv.classList.remove('active');\n }\n calculateTotal();\n });\n \n hoursInput.addEventListener('input', calculateTotal);\n });\n \n function calculateTotal() {\n let total = 0;\n let totalHours = 0;\n let selectedSubjects = [];\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('group-' + subject);\n const hoursInput = document.getElementById('group-hours-' + subject);\n \n if (checkbox.checked) {\n const price = parseFloat(checkbox.dataset.price) || 0;\n const hours = parseInt(hoursInput.value) || 0;\n const subjectTotal = price * hours;\n \n total += subjectTotal;\n totalHours += hours;\n selectedSubjects.push(`${checkbox.dataset.subject}: ${hours}\u0447 \u00d7 ${price} PLN`);\n }\n });\n \n totalElement.textContent = `${total} PLN`;\n \n if (selectedSubjects.length > 0) {\n detailsElement.textContent = `\u0412\u0441\u0435\u0433\u043e \u0447\u0430\u0441\u043e\u0432: ${totalHours} | ${selectedSubjects.join(', ')}`;\n } else {\n detailsElement.textContent = '\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430';\n }\n }\n \n calculateTotal();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n .sintez-individual-calc * { margin: 0; padding: 0; box-sizing: border-box; }\n .sintez-individual-calc { \n font-family: 'Open Sans', sans-serif; \n background: #F7FAFC; \n padding: 20px; \n max-width: 800px; \n margin: 0 auto;\n }\n .sintez-individual-calc .calc-container { \n background: white; \n padding: 40px; \n border-radius: 12px; \n box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1); \n }\n .sintez-individual-calc h2 { \n color: #1E3A5F; \n font-family: 'Montserrat', sans-serif; \n margin-bottom: 25px; \n font-size: 36px; \n font-weight: 700;\n }\n \n .sintez-individual-calc .subjects h3 { \n color: #1E3A5F; \n margin-bottom: 20px; \n font-size: 22px; \n font-weight: 600;\n }\n \n .sintez-individual-calc .subject-item { \n display: flex; \n align-items: center; \n padding: 18px; \n margin-bottom: 12px; \n background: #F7FAFC; \n border-radius: 8px; \n border: 2px solid #E2E8F0;\n transition: all 0.3s; \n }\n .sintez-individual-calc .subject-item:hover { background: #E8F1F8; }\n .sintez-individual-calc .subject-item.active { background: #E8F1F8; border-color: #F4A300; }\n \n .sintez-individual-calc .subject-item input[type=\"checkbox\"] { \n width: 24px; \n height: 24px; \n cursor: pointer; \n margin-right: 15px; \n flex-shrink: 0;\n accent-color: #F4A300;\n }\n .sintez-individual-calc .subject-item label { \n flex: 1; \n cursor: pointer; \n color: #2D3748; \n font-weight: 600; \n font-size: 22px;\n margin-right: 15px;\n }\n \n .sintez-individual-calc .price-tag { \n color: #1E3A5F; \n font-weight: 700; \n font-size: 18px; \n margin-right: 20px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n \n .sintez-individual-calc .hours-control { \n display: flex; \n align-items: center; \n gap: 10px;\n flex-shrink: 0;\n }\n .sintez-individual-calc .hours-control label {\n font-size: 18px;\n color: #2D3748;\n font-weight: 700;\n white-space: nowrap;\n }\n .sintez-individual-calc .subject-item input[type=\"number\"] { \n width: 80px; \n padding: 10px; \n border: 2px solid #CBD5E0; \n border-radius: 6px; \n text-align: center; \n font-size: 20px; \n font-weight: bold;\n color: #1E3A5F;\n }\n .sintez-individual-calc .subject-item input[type=\"number\"]:focus { \n outline: none; \n border-color: #F4A300; \n }\n \n .sintez-individual-calc .result { \n background: #1E3A5F; \n color: white; \n padding: 25px; \n border-radius: 12px; \n text-align: center; \n margin-top: 25px; \n }\n .sintez-individual-calc .result h3 { \n font-size: 22px; \n margin-bottom: 12px; \n font-weight: 600; \n }\n .sintez-individual-calc .result .total { \n font-size: 44px; \n font-weight: 700; \n color: #F4A300; \n font-family: 'Montserrat', sans-serif; \n }\n .sintez-individual-calc .result .details { \n font-size: 16px; \n margin-top: 12px; \n opacity: 0.9; \n }\n\n \/* \u041c\u041e\u0411\u0418\u041b\u042c\u041d\u0410\u042f \u0412\u0415\u0420\u0421\u0418\u042f \u2014 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 *\/\n @media (max-width: 768px) {\n .sintez-individual-calc { padding: 10px; }\n .sintez-individual-calc .calc-container { padding: 15px; max-width: 100%; }\n .sintez-individual-calc h2 { font-size: 22px; margin-bottom: 15px; }\n .sintez-individual-calc .subjects h3 { font-size: 15px; margin-bottom: 10px; }\n \n .sintez-individual-calc .subject-item { \n padding: 8px 10px;\n margin-bottom: 8px;\n gap: 6px;\n flex-wrap: nowrap;\n }\n \n .sintez-individual-calc .subject-item input[type=\"checkbox\"] { \n width: 18px; \n height: 18px; \n margin-right: 6px; \n }\n \n .sintez-individual-calc .subject-item label { \n font-size: 14px;\n margin-right: 6px;\n min-width: auto;\n flex: 1;\n }\n \n .sintez-individual-calc .price-tag { \n font-size: 12px;\n margin-right: 8px;\n }\n \n .sintez-individual-calc .hours-control { \n gap: 4px;\n }\n \n .sintez-individual-calc .hours-control label { \n font-size: 12px;\n }\n \n .sintez-individual-calc .subject-item input[type=\"number\"] { \n width: 45px;\n font-size: 14px;\n padding: 5px;\n }\n \n .sintez-individual-calc .result { padding: 15px; }\n .sintez-individual-calc .result h3 { font-size: 16px; }\n .sintez-individual-calc .result .total { font-size: 32px; }\n .sintez-individual-calc .result .details { font-size: 13px; }\n }\n\n @media (max-width: 480px) {\n .sintez-individual-calc .calc-container { padding: 10px; }\n .sintez-individual-calc h2 { font-size: 18px; }\n .sintez-individual-calc .subjects h3 { font-size: 13px; }\n \n .sintez-individual-calc .subject-item { \n padding: 6px 8px;\n gap: 4px;\n }\n \n .sintez-individual-calc .subject-item input[type=\"checkbox\"] { \n width: 16px; \n height: 16px; \n margin-right: 4px;\n }\n \n .sintez-individual-calc .subject-item label { \n font-size: 12px;\n margin-right: 4px;\n }\n \n .sintez-individual-calc .price-tag { \n font-size: 11px;\n margin-right: 6px;\n }\n \n .sintez-individual-calc .hours-control label { \n font-size: 11px;\n }\n \n .sintez-individual-calc .subject-item input[type=\"number\"] { \n width: 40px;\n font-size: 13px;\n padding: 4px;\n }\n \n .sintez-individual-calc .result .total { font-size: 28px; }\n .sintez-individual-calc .result .details { font-size: 12px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"sintez-individual-calc\">\n <div class=\"calc-container\">\n <h2>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439<\/h2>\n \n <div class=\"subjects\">\n <h3>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u043e\u0432 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n \n <div class=\"subject-item\" id=\"ind-item-physics\">\n <input type=\"checkbox\" id=\"ind-physics\" data-subject=\"\u0424\u0438\u0437\u0438\u043a\u0430\" data-price=\"90\">\n <label for=\"ind-physics\">\u0424\u0438\u0437\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">90 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-physics\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-chemistry\">\n <input type=\"checkbox\" id=\"ind-chemistry\" data-subject=\"\u0425\u0438\u043c\u0438\u044f\" data-price=\"90\">\n <label for=\"ind-chemistry\">\u0425\u0438\u043c\u0438\u044f<\/label>\n <span class=\"price-tag\">90 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-chemistry\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-biology\">\n <input type=\"checkbox\" id=\"ind-biology\" data-subject=\"\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f\" data-price=\"90\">\n <label for=\"ind-biology\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f<\/label>\n <span class=\"price-tag\">90 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-biology\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-math\">\n <input type=\"checkbox\" id=\"ind-math\" data-subject=\"\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430\" data-price=\"75\">\n <label for=\"ind-math\">\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430<\/label>\n <span class=\"price-tag\">75 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-math\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-english\">\n <input type=\"checkbox\" id=\"ind-english\" data-subject=\"\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439\" data-price=\"75\">\n <label for=\"ind-english\">\u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439<\/label>\n <span class=\"price-tag\">75 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-english\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n \n <div class=\"subject-item\" id=\"ind-item-history\">\n <input type=\"checkbox\" id=\"ind-history\" data-subject=\"\u0418\u0441\u0442\u043e\u0440\u0438\u044f\" data-price=\"75\">\n <label for=\"ind-history\">\u0418\u0441\u0442\u043e\u0440\u0438\u044f<\/label>\n <span class=\"price-tag\">75 PLN\/\u0447<\/span>\n <div class=\"hours-control\">\n <label>\u0427\u0430\u0441\u043e\u0432:<\/label>\n <input type=\"number\" id=\"ind-hours-history\" min=\"1\" max=\"20\" value=\"1\" disabled>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"result\">\n <h3>\u0418\u0442\u043e\u0433\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e:<\/h3>\n <div class=\"total\" id=\"ind-total\">0 PLN<\/div>\n <div class=\"details\" id=\"ind-details\">\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const subjects = ['physics', 'chemistry', 'biology', 'math', 'english', 'history'];\n const totalElement = document.getElementById('ind-total');\n const detailsElement = document.getElementById('ind-details');\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('ind-' + subject);\n const hoursInput = document.getElementById('ind-hours-' + subject);\n const itemDiv = document.getElementById('ind-item-' + subject);\n \n checkbox.addEventListener('change', function() {\n if (this.checked) {\n hoursInput.disabled = false;\n itemDiv.classList.add('active');\n } else {\n hoursInput.disabled = true;\n hoursInput.value = 1;\n itemDiv.classList.remove('active');\n }\n calculateTotal();\n });\n \n hoursInput.addEventListener('input', calculateTotal);\n });\n \n function calculateTotal() {\n let total = 0;\n let totalHours = 0;\n let selectedSubjects = [];\n \n subjects.forEach(subject => {\n const checkbox = document.getElementById('ind-' + subject);\n const hoursInput = document.getElementById('ind-hours-' + subject);\n \n if (checkbox.checked) {\n const price = parseFloat(checkbox.dataset.price) || 0;\n const hours = parseInt(hoursInput.value) || 0;\n const subjectTotal = price * hours;\n \n total += subjectTotal;\n totalHours += hours;\n selectedSubjects.push(`${checkbox.dataset.subject}: ${hours}\u0447 \u00d7 ${price} PLN`);\n }\n });\n \n totalElement.textContent = `${total} PLN`;\n \n if (selectedSubjects.length > 0) {\n detailsElement.textContent = `\u0412\u0441\u0435\u0433\u043e \u0447\u0430\u0441\u043e\u0432: ${totalHours} | ${selectedSubjects.join(', ')}`;\n } else {\n detailsElement.textContent = '\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430';\n }\n }\n \n calculateTotal();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u043e\u0432 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e: \u0424\u0438\u0437\u0438\u043a\u0430 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0425\u0438\u043c\u0438\u044f 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0411\u0438\u043e\u043b\u043e\u0433\u0438\u044f 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0418\u0441\u0442\u043e\u0440\u0438\u044f 57 PLN\/\u0447 \u0427\u0430\u0441\u043e\u0432: \u0418\u0442\u043e\u0433\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e: 0 PLN \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u0439 \u2014 SINTEZ.school […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/fullwidth-page.php","meta":{"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sintez.school\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=38"}],"version-history":[{"count":10,"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":548,"href":"https:\/\/www.sintez.school\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions\/548"}],"wp:attachment":[{"href":"https:\/\/www.sintez.school\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}