\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n -webkit-overflow-scrolling: touch; \/* \u0414\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043d\u0430 iOS *\/\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n \n .header {\n text-align: center;\n margin-bottom: 30px;\n color: white;\n }\n \n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n }\n \n .header p {\n font-size: 1.1rem;\n opacity: 0.9;\n }\n \n .card {\n background: white;\n border-radius: 20px;\n padding: 30px;\n margin-bottom: 30px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n }\n \n .calculator-form {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .form-group {\n display: flex;\n flex-direction: column;\n }\n \n .form-group label {\n font-weight: 600;\n margin-bottom: 8px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .form-group input, .form-group select {\n padding: 12px 15px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 1rem;\n transition: border-color 0.3s;\n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f iOS *\/\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n \/* \u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f *\/\n font-size: 16px;\n }\n \n .form-group input:focus, .form-group select:focus {\n border-color: #4facfe;\n outline: none;\n }\n \n .age-inputs {\n display: flex;\n gap: 10px;\n }\n \n .age-inputs input {\n flex: 1;\n }\n \n .calculate-btn {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: white;\n border: none;\n padding: 15px 30px;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 10px;\n cursor: pointer;\n transition: transform 0.3s, box-shadow 0.3s;\n grid-column: 1 \/ -1;\n margin-top: 10px;\n -webkit-tap-highlight-color: transparent; \/* \u0423\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u043f\u0440\u0438 \u0442\u0430\u043f\u0435 *\/\n }\n \n .calculate-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 7px 20px rgba(79, 172, 254, 0.3);\n }\n \n .results-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 25px;\n margin-top: 30px;\n }\n \n .result-card {\n background: #f8fafc;\n border-radius: 15px;\n padding: 25px;\n border-left: 5px solid #4facfe;\n }\n \n .result-card h3 {\n color: #2c3e50;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .size-value {\n font-size: 2.5rem;\n font-weight: 700;\n color: #4facfe;\n text-align: center;\n margin: 15px 0;\n }\n \n .size-system {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #e0e0e0;\n }\n \n .system-name {\n font-weight: 600;\n color: #2c3e50;\n }\n \n .system-value {\n font-weight: 600;\n color: #4facfe;\n }\n \n .size-table-container {\n overflow-x: auto;\n margin-top: 20px;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n -webkit-overflow-scrolling: touch; \/* \u0414\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043d\u0430 iOS *\/\n }\n \n .size-table {\n width: 100%;\n border-collapse: collapse;\n min-width: 800px;\n }\n \n .size-table th {\n background: #4facfe;\n color: white;\n padding: 15px;\n text-align: left;\n font-weight: 600;\n }\n \n .size-table td {\n padding: 12px 15px;\n border-bottom: 1px solid #e0e0e0;\n }\n \n .size-table tr:hover {\n background: #f0f8ff;\n }\n \n .highlight {\n background: #e3f2fd !important;\n font-weight: 600;\n position: relative;\n }\n \n .highlight:after {\n content: '\u2713 \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440';\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n background: #4facfe;\n color: white;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 0.8rem;\n }\n \n .loading {\n display: none;\n text-align: center;\n padding: 20px;\n color: #4facfe;\n }\n \n .loading i {\n animation: spin 1s linear infinite;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 iOS *\/\n @media screen and (max-width: 768px) {\n .header h1 {\n font-size: 2rem;\n }\n \n .card {\n padding: 20px;\n }\n \n .calculator-form {\n grid-template-columns: 1fr;\n }\n \n .size-table {\n font-size: 0.9rem;\n }\n \n .size-value {\n font-size: 2rem;\n }\n \n .highlight:after {\n content: '\u2713';\n padding: 2px 6px;\n font-size: 0.7rem;\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f iOS Safari *\/\n input, select, textarea {\n font-size: 16px !important; \/* \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1><i class=\"fas fa-child\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0435\u0442\u0441\u043a\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/h1>\n <p>\u0422\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443, \u0440\u043e\u0441\u0442\u0443 \u0438 \u0432\u0435\u0441\u0443<\/p>\n <\/div>\n \n <div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-calculator\"><\/i> \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u0435\u0431\u0451\u043d\u043a\u0430\n <\/h2>\n \n <div class=\"calculator-form\">\n <div class=\"form-group\">\n <label for=\"years\"><i class=\"fas fa-birthday-cake\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442<\/label>\n <div class=\"age-inputs\">\n <input type=\"number\" id=\"years\" min=\"0\" max=\"17\" placeholder=\"\u041b\u0435\u0442\" value=\"3\" inputmode=\"numeric\">\n <input type=\"number\" id=\"months\" min=\"0\" max=\"11\" placeholder=\"\u041c\u0435\u0441\u044f\u0446\u0435\u0432\" value=\"0\" inputmode=\"numeric\">\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"height\"><i class=\"fas fa-ruler-vertical\"><\/i> \u0420\u043e\u0441\u0442 (\u0441\u043c)<\/label>\n <input type=\"number\" id=\"height\" min=\"45\" max=\"200\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0440\u043e\u0441\u0442\" value=\"98\" inputmode=\"decimal\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"weight\"><i class=\"fas fa-weight\"><\/i> \u0412\u0435\u0441 (\u043a\u0433)<\/label>\n <input type=\"number\" id=\"weight\" min=\"2\" max=\"80\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u0435\u0441\" value=\"15.5\" inputmode=\"decimal\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"foot-length\"><i class=\"fas fa-shoe-prints\"><\/i> \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c)<\/label>\n <input type=\"number\" id=\"foot-length\" min=\"8\" max=\"30\" step=\"0.1\" placeholder=\"\u0418\u0437\u043c\u0435\u0440\u044c\u0442\u0435 \u0441\u0442\u043e\u043f\u0443\" value=\"16\" inputmode=\"decimal\">\n <\/div>\n \n <button class=\"calculate-btn\" id=\"calculate-btn\">\n <i class=\"fas fa-calculator\"><\/i> \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b\n <\/button>\n <\/div>\n \n <div class=\"loading\" id=\"loading\">\n <i class=\"fas fa-spinner fa-2x\"><\/i>\n <p style=\"margin-top: 10px;\">\u0418\u0434\u0451\u0442 \u0440\u0430\u0441\u0447\u0451\u0442…<\/p>\n <\/div>\n \n <div class=\"results-container\" id=\"results-container\">\n \n <\/div>\n <\/div>\n \n <div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-tshirt\"><\/i> \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b\n <\/h2>\n <div class=\"size-table-container\">\n <table class=\"size-table\" id=\"clothing-table\">\n <thead>\n <tr>\n <th>\u0420\u043e\u0441\u0442 (\u0441\u043c)<\/th>\n <th>\u0412\u043e\u0437\u0440\u0430\u0441\u0442<\/th>\n <th>\u0420\u043e\u0441\u0441\u0438\u044f<\/th>\n <th>\u0415\u0432\u0440\u043e\u043f\u0430<\/th>\n <th>\u0421\u0428\u0410<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"clothing-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-shoe-prints\"><\/i> \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438\n <\/h2>\n <div class=\"size-table-container\">\n <table class=\"size-table\" id=\"shoes-table\">\n <thead>\n <tr>\n <th>\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c)<\/th>\n <th>\u0420\u043e\u0441\u0441\u0438\u044f<\/th>\n <th>\u0415\u0432\u0440\u043e\u043f\u0430<\/th>\n <th>\u0421\u0428\u0410<\/th>\n <th>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u0437\u0440\u0430\u0441\u0442<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"shoes-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b\n const clothingSizes = [\n { height: [50, 56], age: \"0-1 \u043c\u0435\u0441\", ru: \"18\", eu: \"50\", us: \"Newborn\" },\n { height: [56, 62], age: \"1-3 \u043c\u0435\u0441\", ru: \"18\", eu: \"56\", us: \"0-3M\" },\n { height: [62, 68], age: \"3-6 \u043c\u0435\u0441\", ru: \"20\", eu: \"62\", us: \"3-6M\" },\n { height: [68, 74], age: \"6-9 \u043c\u0435\u0441\", ru: \"20\", eu: \"68\", us: \"6-9M\" },\n { height: [74, 80], age: \"9-12 \u043c\u0435\u0441\", ru: \"22\", eu: \"74\", us: \"9-12M\" },\n { height: [80, 86], age: \"1-1.5 \u0433\u043e\u0434\u0430\", ru: \"24\", eu: \"80\", us: \"12-18M\" },\n { height: [86, 92], age: \"1.5-2 \u0433\u043e\u0434\u0430\", ru: \"26\", eu: \"86\", us: \"18-24M\" },\n { height: [92, 98], age: \"2-3 \u0433\u043e\u0434\u0430\", ru: \"28\", eu: \"92\", us: \"2T\" },\n { height: [98, 104], age: \"3-4 \u0433\u043e\u0434\u0430\", ru: \"28\/30\", eu: \"98\", us: \"3T\" },\n { height: [104, 110], age: \"4-5 \u043b\u0435\u0442\", ru: \"30\/32\", eu: \"104\", us: \"4T\" },\n { height: [110, 116], age: \"5-6 \u043b\u0435\u0442\", ru: \"32\", eu: \"110\", us: \"5T\" },\n { height: [116, 122], age: \"6-7 \u043b\u0435\u0442\", ru: \"34\", eu: \"116\", us: \"6\" },\n { height: [122, 128], age: \"7-8 \u043b\u0435\u0442\", ru: \"36\", eu: \"122\", us: \"6X-7\" },\n { height: [128, 134], age: \"8-9 \u043b\u0435\u0442\", ru: \"38\", eu: \"128\", us: \"7\" },\n { height: [134, 140], age: \"9-10 \u043b\u0435\u0442\", ru: \"40\", eu: \"134\", us: \"8\" },\n { height: [140, 146], age: \"10-11 \u043b\u0435\u0442\", ru: \"42\", eu: \"140\", us: \"10\" },\n { height: [146, 152], age: \"11-12 \u043b\u0435\u0442\", ru: \"44\", eu: \"146\", us: \"12\" },\n { height: [152, 158], age: \"12-13 \u043b\u0435\u0442\", ru: \"46\", eu: \"152\", us: \"14\" },\n { height: [158, 164], age: \"13-14 \u043b\u0435\u0442\", ru: \"48\", eu: \"158\", us: \"16\" }\n ];\n\n \/\/ \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438\n const shoeSizes = [\n { footLength: [8.5, 9.0], ru: \"15\", eu: \"16\", us: \"1\", age: \"0-3 \u043c\u0435\u0441\" },\n { footLength: [9.0, 9.5], ru: \"16\", eu: \"17\", us: \"2\", age: \"3-6 \u043c\u0435\u0441\" },\n { footLength: [9.5, 10.0], ru: \"17\", eu: \"18\", us: \"3\", age: \"6-9 \u043c\u0435\u0441\" },\n { footLength: [10.0, 10.5], ru: \"18\", eu: \"19\", us: \"4\", age: \"9-12 \u043c\u0435\u0441\" },\n { footLength: [10.5, 11.0], ru: \"19\", eu: \"20\", us: \"5\", age: \"1-1.5 \u0433\u043e\u0434\u0430\" },\n { footLength: [11.0, 11.5], ru: \"20\", eu: \"21\", us: \"6\", age: \"1.5-2 \u0433\u043e\u0434\u0430\" },\n { footLength: [11.5, 12.0], ru: \"21\", eu: \"22\", us: \"7\", age: \"2-3 \u0433\u043e\u0434\u0430\" },\n { footLength: [12.0, 12.5], ru: \"22\", eu: \"23\", us: \"8\", age: \"3-4 \u0433\u043e\u0434\u0430\" },\n { footLength: [12.5, 13.0], ru: \"23\", eu: \"24\", us: \"9\", age: \"4-5 \u043b\u0435\u0442\" },\n { footLength: [13.0, 13.5], ru: \"24\", eu: \"25\", us: \"10\", age: \"5-6 \u043b\u0435\u0442\" },\n { footLength: [13.5, 14.0], ru: \"25\", eu: \"26\", us: \"11\", age: \"6-7 \u043b\u0435\u0442\" },\n { footLength: [14.0, 14.5], ru: \"26\", eu: \"27\", us: \"12\", age: \"7-8 \u043b\u0435\u0442\" },\n { footLength: [14.5, 15.0], ru: \"27\", eu: \"28\", us: \"13\", age: \"8-9 \u043b\u0435\u0442\" },\n { footLength: [15.0, 15.5], ru: \"28\", eu: \"29\", us: \"1\", age: \"9-10 \u043b\u0435\u0442\" },\n { footLength: [15.5, 16.0], ru: \"29\", eu: \"30\", us: \"2\", age: \"10-11 \u043b\u0435\u0442\" },\n { footLength: [16.0, 16.5], ru: \"30\", eu: \"31\", us: \"3\", age: \"11-12 \u043b\u0435\u0442\" },\n { footLength: [16.5, 17.0], ru: \"31\", eu: \"32\", us: \"4\", age: \"12-13 \u043b\u0435\u0442\" },\n { footLength: [17.0, 17.5], ru: \"32\", eu: \"33\", us: \"5\", age: \"13-14 \u043b\u0435\u0442\" }\n ];\n\n \/\/ \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u0435\u0440\u0446\u0435\u043d\u0442\u0438\u043b\u0435\u0439 \u0412\u041e\u0417 (\u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0430\u044f)\n const percentiles = {\n 36: { \/\/ 3 \u0433\u043e\u0434\u0430\n 3: { height: 88, weight: 11.5 },\n 50: { height: 96, weight: 14.5 },\n 97: { height: 104, weight: 18.0 }\n },\n 48: { \/\/ 4 \u0433\u043e\u0434\u0430\n 3: { height: 94, weight: 12.5 },\n 50: { height: 102, weight: 16.0 },\n 97: { height: 110, weight: 20.0 }\n },\n 60: { \/\/ 5 \u043b\u0435\u0442\n 3: { height: 100, weight: 13.5 },\n 50: { height: 108, weight: 17.5 },\n 97: { height: 116, weight: 22.0 }\n }\n };\n\n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b \u043f\u043e \u0440\u043e\u0441\u0442\u0443\n function findClothingSize(height) {\n for (let size of clothingSizes) {\n if (height >= size.height[0] && height <= size.height[1]) {\n return size;\n }\n }\n \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0448\u043b\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439\n return clothingSizes.reduce((closest, current) => {\n const currentCenter = (current.height[0] + current.height[1]) \/ 2;\n const closestCenter = (closest.height[0] + closest.height[1]) \/ 2;\n return Math.abs(currentCenter - height) < Math.abs(closestCenter - height) ? current : closest;\n });\n }\n\n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438 \u043f\u043e \u0434\u043b\u0438\u043d\u0435 \u0441\u0442\u043e\u043f\u044b - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u0424\u0423\u041d\u041a\u0426\u0418\u042f\n function findShoeSize(footLength) {\n \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0449\u0435\u043c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\n for (let size of shoeSizes) {\n if (footLength >= size.footLength[0] && footLength < size.footLength[1]) {\n return size;\n }\n }\n \n \/\/ \u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u043f\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440\n if (footLength < shoeSizes[0].footLength[0]) {\n return shoeSizes[0];\n }\n \n \/\/ \u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u043f\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435\n if (footLength >= shoeSizes[shoeSizes.length - 1].footLength[1]) {\n const lastSize = shoeSizes[shoeSizes.length - 1];\n \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 1 \u043a\u0430\u0436\u0434\u044b\u0435 0.5 \u0441\u043c\n const extraCm = footLength - lastSize.footLength[1];\n const extraSizes = Math.ceil(extraCm \/ 0.5);\n \n const newRuSize = parseInt(lastSize.ru) + extraSizes;\n const newEuSize = parseInt(lastSize.eu) + extraSizes;\n const newUsSize = parseInt(lastSize.us) + extraSizes;\n \n \/\/ \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 - 45\n const maxSize = 45;\n const finalRuSize = Math.min(newRuSize, maxSize);\n const finalEuSize = Math.min(newEuSize, maxSize);\n const finalUsSize = Math.min(newUsSize, maxSize);\n \n return {\n footLength: [\n lastSize.footLength[0] + extraSizes * 0.5,\n lastSize.footLength[1] + extraSizes * 0.5\n ],\n ru: String(finalRuSize),\n eu: String(finalEuSize),\n us: String(finalUsSize),\n age: \"\u0441\u0442\u0430\u0440\u0448\u0435 14 \u043b\u0435\u0442\"\n };\n }\n \n \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0448\u043b\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439\n return shoeSizes.reduce((closest, current) => {\n const currentCenter = (current.footLength[0] + current.footLength[1]) \/ 2;\n const closestCenter = (closest.footLength[0] + closest.footLength[1]) \/ 2;\n return Math.abs(currentCenter - footLength) < Math.abs(closestCenter - footLength) ? current : closest;\n });\n }\n\n \/\/ \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0446\u0435\u043d\u0442\u0438\u043b\u044c\n function calculatePercentile(height, weight, ageMonths) {\n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u0432\u043e\u0437\u0440\u0430\u0441\u0442 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\n const ages = Object.keys(percentiles).map(Number);\n let closestAge = ages.reduce((prev, curr) => {\n return Math.abs(curr - ageMonths) < Math.abs(prev - ageMonths) ? curr : prev;\n });\n \n const data = percentiles[closestAge];\n if (!data) return 50;\n \n \/\/ \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u043f\u0435\u0440\u0446\u0435\u043d\u0442\u0438\u043b\u044f\n const heightPercent = (height - data[3].height) \/ (data[97].height - data[3].height) * 100;\n const weightPercent = (weight - data[3].weight) \/ (data[97].weight - data[3].weight) * 100;\n \n return Math.round((heightPercent + weightPercent) \/ 2);\n }\n\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043e\u0434\u0435\u0436\u0434\u044b\n function updateClothingTable(height) {\n const tableBody = document.getElementById('clothing-table-body');\n tableBody.innerHTML = '';\n \n const currentSize = findClothingSize(height);\n \n clothingSizes.forEach(size => {\n const row = document.createElement('tr');\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440?\n const isCurrent = size.ru === currentSize.ru;\n \n if (isCurrent) {\n row.classList.add('highlight');\n }\n \n row.innerHTML = `\n <td>${size.height[0]}-${size.height[1]}<\/td>\n <td>${size.age}<\/td>\n <td>${size.ru}<\/td>\n <td>${size.eu}<\/td>\n <td>${size.us}<\/td>\n `;\n \n tableBody.appendChild(row);\n });\n }\n\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043e\u0431\u0443\u0432\u0438 - \u041e\u0420\u0418\u0413\u0418\u041d\u0410\u041b\u042c\u041d\u0410\u042f \u0424\u0423\u041d\u041a\u0426\u0418\u042f\n function updateShoesTable(footLength) {\n const tableBody = document.getElementById('shoes-table-body');\n tableBody.innerHTML = '';\n \n const currentSize = findShoeSize(footLength);\n \n shoeSizes.forEach(size => {\n const row = document.createElement('tr');\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440?\n const isCurrent = size.ru === currentSize.ru;\n \n if (isCurrent) {\n row.classList.add('highlight');\n }\n \n row.innerHTML = `\n <td>${size.footLength[0].toFixed(1)}-${size.footLength[1].toFixed(1)}<\/td>\n <td>${size.ru}<\/td>\n <td>${size.eu}<\/td>\n <td>${size.us}<\/td>\n <td>${size.age}<\/td>\n `;\n \n tableBody.appendChild(row);\n });\n }\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \"\u0443\u043c\u043d\u043e\u0433\u043e\" \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 (\u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439)\n let updateTimeout = null;\n function smartUpdateResults() {\n \/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0442\u0430\u0439\u043c\u0430\u0443\u0442, \u0435\u0441\u043b\u0438 \u043e\u043d \u0435\u0441\u0442\u044c\n if (updateTimeout) {\n clearTimeout(updateTimeout);\n }\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0442\u0430\u0439\u043c\u0430\u0443\u0442\n updateTimeout = setTimeout(() => {\n showResults();\n }, 500); \/\/ \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 500 \u043c\u0441 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u0432\u043e\u0434\u0430\n }\n\n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b\n function showResults() {\n console.log(\"\u0424\u0443\u043d\u043a\u0446\u0438\u044f showResults \u0432\u044b\u0437\u0432\u0430\u043d\u0430\");\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430\n const years = parseInt(document.getElementById('years').value) || 0;\n const months = parseInt(document.getElementById('months').value) || 0;\n const height = parseFloat(document.getElementById('height').value) || 0;\n const weight = parseFloat(document.getElementById('weight').value) || 0;\n const footLength = parseFloat(document.getElementById('foot-length').value) || 0;\n \n console.log(\"\u0412\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:\", { years, months, height, weight, footLength });\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b\n if (!years && !months) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\");\n return;\n }\n if (!height) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0440\u043e\u0441\u0442\");\n return;\n }\n if (!weight) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u0435\u0441\");\n return;\n }\n if (!footLength) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443 \u0441\u0442\u043e\u043f\u044b\");\n return;\n }\n \n const ageMonths = years * 12 + months;\n \n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b\n const clothingSize = findClothingSize(height);\n const shoeSize = findShoeSize(footLength);\n const percentile = calculatePercentile(height, weight, ageMonths);\n \n console.log(\"\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b:\", { clothingSize, shoeSize, percentile });\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n updateClothingTable(height);\n updateShoesTable(footLength);\n \n \/\/ \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c HTML \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432\n const resultsHTML = `\n <div class=\"result-card\">\n <h3><i class=\"fas fa-chart-line\"><\/i> \u041f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c \u0440\u043e\u0441\u0442\u0430 \u0438 \u0432\u0435\u0441\u0430<\/h3>\n <div class=\"size-value\">${percentile}%<\/div>\n <p>\u0412\u0430\u0448 \u0440\u0435\u0431\u0451\u043d\u043e\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 ${percentile}-\u043c \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u0435.<\/p>\n <p style=\"margin-top: 10px; font-size: 0.9rem; color: #666;\">\n \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e ${percentile}% \u0434\u0435\u0442\u0435\u0439 \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0440\u043e\u0441\u0442\u0430\/\u0432\u0435\u0441\u0430.\n <\/p>\n <\/div>\n \n <div class=\"result-card\">\n <h3><i class=\"fas fa-tshirt\"><\/i> \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b<\/h3>\n <div class=\"size-value\">${clothingSize.ru}<\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440:<\/span>\n <span class=\"system-value\">${clothingSize.ru}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 (EU):<\/span>\n <span class=\"system-value\">${clothingSize.eu}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 (US):<\/span>\n <span class=\"system-value\">${clothingSize.us}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0420\u043e\u0441\u0442:<\/span>\n <span class=\"system-value\">${clothingSize.height[0]}-${clothingSize.height[1]} \u0441\u043c<\/span>\n <\/div>\n <p style=\"margin-top: 10px; font-size: 0.9rem; color: #666;\">\n <i class=\"fas fa-info-circle\"><\/i> \u0420\u043e\u0441\u0442 \u0440\u0435\u0431\u0451\u043d\u043a\u0430: ${height} \u0441\u043c\n <\/p>\n <\/div>\n \n <div class=\"result-card\">\n <h3><i class=\"fas fa-shoe-prints\"><\/i> \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438<\/h3>\n <div class=\"size-value\">${shoeSize.ru}<\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b:<\/span>\n <span class=\"system-value\">${footLength} \u0441\u043c<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440:<\/span>\n <span class=\"system-value\">${shoeSize.ru}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 (EU):<\/span>\n <span class=\"system-value\">${shoeSize.eu}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 (US):<\/span>\n <span class=\"system-value\">${shoeSize.us}<\/span>\n <\/div>\n <p style=\"margin-top: 10px; font-size: 0.9rem; color: #666;\">\n <i class=\"fas fa-info-circle\"><\/i> \u0414\u043b\u044f \u0437\u0430\u043f\u0430\u0441\u0430 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 0.5-1 \u0441\u043c \u043a \u0434\u043b\u0438\u043d\u0435 \u0441\u0442\u043e\u043f\u044b\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\n const resultsContainer = document.getElementById('results-container');\n resultsContainer.innerHTML = resultsHTML;\n }\n\n \/\/ \u0410\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n function autoFillFromAge() {\n const years = parseInt(document.getElementById('years').value) || 0;\n const months = parseInt(document.getElementById('months').value) || 0;\n const ageMonths = years * 12 + months;\n \n if (ageMonths > 0) {\n \/\/ \u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u044b \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439\n const avgHeight = 50 + (ageMonths * 1.5); \/\/ \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u0430\n const avgWeight = 3.5 + (ageMonths * 0.3); \/\/ \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u0430\n const avgFootLength = avgHeight * 0.15; \/\/ \u0421\u0442\u043e\u043f\u0430 ~15% \u043e\u0442 \u0440\u043e\u0441\u0442\u0430\n \n document.getElementById('height').value = Math.round(avgHeight);\n document.getElementById('weight').value = avgWeight.toFixed(1);\n document.getElementById('foot-length').value = avgFootLength.toFixed(1);\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(showResults, 100);\n }\n }\n\n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n document.addEventListener('DOMContentLoaded', function() {\n console.log(\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430\");\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438\n updateClothingTable(98);\n updateShoesTable(16);\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\n const calculateBtn = document.getElementById('calculate-btn');\n calculateBtn.addEventListener('click', function(e) {\n e.preventDefault(); \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n console.log(\"\u041a\u043d\u043e\u043f\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u0430\");\n showResults();\n });\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n document.getElementById('years').addEventListener('change', autoFillFromAge);\n document.getElementById('months').addEventListener('change', autoFillFromAge);\n \n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \"\u0443\u043c\u043d\u043e\u0435\" \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 'input' \u0432\u043c\u0435\u0441\u0442\u043e 'change' \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438\n document.getElementById('height').addEventListener('input', smartUpdateResults);\n document.getElementById('weight').addEventListener('input', smartUpdateResults);\n document.getElementById('foot-length').addEventListener('input', smartUpdateResults);\n \n \/\/ \u0422\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c 'change' \u0434\u043b\u044f \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\n document.getElementById('height').addEventListener('change', showResults);\n document.getElementById('weight').addEventListener('change', showResults);\n document.getElementById('foot-length').addEventListener('change', showResults);\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435 \u043d\u0430 iOS\n function preventScrollOnFocus() {\n if (\/iPhone|iPad|iPod\/.test(navigator.userAgent)) {\n const inputs = document.querySelectorAll('input[type=\"number\"]');\n inputs.forEach(input => {\n input.addEventListener('focus', function() {\n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438\n const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e\n document.body.style.position = 'fixed';\n document.body.style.top = `-${scrollPosition}px`;\n document.body.style.width = '100%';\n });\n \n input.addEventListener('blur', function() {\n \/\/ \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443\n const scrollTop = parseInt(document.body.style.top || '0') * -1;\n document.body.style.position = '';\n document.body.style.top = '';\n document.body.style.width = '';\n \n \/\/ \u041f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e\n window.scrollTo(0, scrollTop);\n });\n });\n }\n }\n \n \/\/ \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f iOS - \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\n function preventZoomOnFocus() {\n if (\/iPhone|iPad|iPod\/.test(navigator.userAgent)) {\n document.addEventListener('focusin', function(e) {\n if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {\n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u043f\u0430\u0441, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0435 \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0434 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439\n setTimeout(() => {\n e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }, 100);\n }\n });\n }\n }\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043b\u044f iOS\n preventScrollOnFocus();\n preventZoomOnFocus();\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(showResults, 500);\n });\n\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f Enter \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u043e\u043b\u0435\n document.addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n e.preventDefault();\n showResults();\n }\n });\n \n \/\/ \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435\n let lastScrollPosition = 0;\n window.addEventListener('scroll', function() {\n const inputs = document.querySelectorAll('input[type=\"number\"]:focus');\n if (inputs.length > 0) {\n \/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0432 \u0444\u043e\u043a\u0443\u0441\u0435, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438\n lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n }\n });\n \n \/\/ \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u0444\u043e\u043a\u0443\u0441\u0430\n document.addEventListener('focusout', function(e) {\n if (e.target.tagName === 'INPUT' && e.target.type === 'number') {\n setTimeout(() => {\n window.scrollTo(0, lastScrollPosition);\n }, 100);\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-book-open\"><\/i> \u041d\u0430\u0443\u0447\u043d\u043e\u0435 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438\n <\/h2>\n \n \n \n <div class=\"interactive-demo\">\n <h3><i class=\"fas fa-play-circle\"><\/i> \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/h3>\n <p>\u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:<\/p>\n \n <div class=\"demo-controls\">\n <div class=\"demo-slider\">\n <label>\u0420\u043e\u0441\u0442 \u0440\u0435\u0431\u0451\u043d\u043a\u0430: <span id=\"demo-height-value\">98 \u0441\u043c<\/span><\/label>\n <input type=\"range\" id=\"demo-height\" min=\"50\" max=\"160\" value=\"98\" class=\"slider\">\n <div class=\"slider-ticks\">\n <span>50 \u0441\u043c (\u043d\u043e\u0432\u043e\u0440\u043e\u0436\u0434.)<\/span>\n <span>105 \u0441\u043c (4 \u0433\u043e\u0434\u0430)<\/span>\n <span>160 \u0441\u043c (\u043f\u043e\u0434\u0440\u043e\u0441\u0442\u043e\u043a)<\/span>\n <\/div>\n <\/div>\n \n <div class=\"demo-slider\">\n <label>\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b: <span id=\"demo-foot-value\">16 \u0441\u043c<\/span><\/label>\n <input type=\"range\" id=\"demo-foot\" min=\"8\" max=\"28\" value=\"16\" step=\"0.5\" class=\"slider\">\n <div class=\"slider-ticks\">\n <span>8 \u0441\u043c (0 \u043c\u0435\u0441)<\/span>\n <span>18 \u0441\u043c (6 \u043b\u0435\u0442)<\/span>\n <span>28 \u0441\u043c (14 \u043b\u0435\u0442)<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"demo-results\">\n <div class=\"demo-result-card\">\n <h4><i class=\"fas fa-tshirt\"><\/i> \u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b<\/h4>\n <div class=\"demo-size\" id=\"demo-clothing-size\">28<\/div>\n <div class=\"demo-details\">\n <span>\u0420\u043e\u0441\u0441\u0438\u044f: <strong id=\"demo-ru-size\">28<\/strong><\/span>\n <span>\u0415\u0432\u0440\u043e\u043f\u0430: <strong id=\"demo-eu-size\">92<\/strong><\/span>\n <span>\u0421\u0428\u0410: <strong id=\"demo-us-size\">2T<\/strong><\/span>\n <\/div>\n <\/div>\n \n <div class=\"demo-result-card\">\n <h4><i class=\"fas fa-shoe-prints\"><\/i> \u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438<\/h4>\n <div class=\"demo-size\" id=\"demo-shoe-size\">25<\/div>\n <div class=\"demo-details\">\n <span>\u0420\u043e\u0441\u0441\u0438\u044f: <strong id=\"demo-shoe-ru\">25<\/strong><\/span>\n <span>\u0415\u0432\u0440\u043e\u043f\u0430: <strong id=\"demo-shoe-eu\">26<\/strong><\/span>\n <span>\u0421\u0428\u0410: <strong id=\"demo-shoe-us\">10<\/strong><\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"demo-explanation\">\n <p><i class=\"fas fa-lightbulb\"><\/i> <strong>\u0427\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442?<\/strong> \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u043e\u0441\u0442\u0430 \u043d\u0430 10 \u0441\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 2 \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440 \u0434\u043b\u0438\u043d\u044b \u0441\u0442\u043e\u043f\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 0.7 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u0431\u0443\u0432\u0438.<\/p>\n <\/div>\n <\/div>\n \n \n<\/div>\n\n\n<script>\n\/\/ \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f - \u041f\u0420\u041e\u0421\u0422\u041e\u0419 \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u042b\u0419 \u0412\u0410\u0420\u0418\u0410\u041d\u0422\ndocument.addEventListener('DOMContentLoaded', function() {\n const demoHeightSlider = document.getElementById('demo-height');\n const demoHeightValue = document.getElementById('demo-height-value');\n const demoFootSlider = document.getElementById('demo-foot');\n const demoFootValue = document.getElementById('demo-foot-value');\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442\n if (!demoHeightSlider || !demoFootSlider) {\n console.error('\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b');\n return;\n }\n \n function updateDemo() {\n const height = parseInt(demoHeightSlider.value);\n const footLength = parseFloat(demoFootSlider.value);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432\n demoHeightValue.textContent = `${height} \u0441\u043c`;\n demoFootValue.textContent = `${footLength} \u0441\u043c`;\n \n \/\/ \u041f\u0420\u041e\u0421\u0422\u041e\u0419 \u0420\u0410\u0421\u0427\u0415\u0422 \u041e\u0414\u0415\u0416\u0414\u042b\n const ruClothing = Math.max(18, Math.min(48, Math.round(height \/ 3.5)));\n const euClothing = Math.max(50, Math.min(164, Math.round(height)));\n \n let usClothing;\n if (height < 56) usClothing = \"Newborn\";\n else if (height < 62) usClothing = \"0-3M\";\n else if (height < 68) usClothing = \"3-6M\";\n else if (height < 74) usClothing = \"6-9M\";\n else if (height < 80) usClothing = \"9-12M\";\n else if (height < 86) usClothing = \"12-18M\";\n else if (height < 92) usClothing = \"18-24M\";\n else if (height < 98) usClothing = \"2T\";\n else if (height < 104) usClothing = \"3T\";\n else if (height < 110) usClothing = \"4T\"; \/\/ \u2190 105 \u0441\u043c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u044e\u0434\u0430!\n else if (height < 116) usClothing = \"5T\";\n else if (height < 122) usClothing = \"6\";\n else if (height < 128) usClothing = \"6X-7\";\n else if (height < 134) usClothing = \"7\";\n else if (height < 140) usClothing = \"8\";\n else if (height < 146) usClothing = \"10\";\n else if (height < 152) usClothing = \"12\";\n else if (height < 158) usClothing = \"14\";\n else usClothing = \"16\";\n \n \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u042b\u0419 \u0420\u0410\u0421\u0427\u0415\u0422 \u041e\u0411\u0423\u0412\u0418\n const shoeSizes = calculateShoeSizeImproved(footLength);\n \n \/\/ \u041e\u0411\u041d\u041e\u0412\u041b\u042f\u0415\u041c \u041e\u0414\u0415\u0416\u0414\u0423\n document.getElementById('demo-clothing-size').textContent = ruClothing;\n document.getElementById('demo-ru-size').textContent = ruClothing;\n document.getElementById('demo-eu-size').textContent = euClothing;\n document.getElementById('demo-us-size').textContent = usClothing;\n \n \/\/ \u041e\u0411\u041d\u041e\u0412\u041b\u042f\u0415\u041c \u041e\u0411\u0423\u0412\u042c\n document.getElementById('demo-shoe-size').textContent = shoeSizes.ru;\n document.getElementById('demo-shoe-ru').textContent = shoeSizes.ru;\n document.getElementById('demo-shoe-eu').textContent = shoeSizes.eu;\n document.getElementById('demo-shoe-us').textContent = shoeSizes.us;\n}\n\n\/\/ \u041d\u041e\u0412\u0410\u042f \u0423\u041b\u0423\u0427\u0428\u0415\u041d\u041d\u0410\u042f \u0424\u0423\u041d\u041a\u0426\u0418\u042f \u0420\u0410\u0421\u0427\u0415\u0422\u0410 \u041e\u0411\u0423\u0412\u0418\nfunction calculateShoeSizeImproved(footLength) {\n \/\/ \u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 (\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430)\n const ruSize = Math.round(footLength * 1.5 + 1.5);\n \n \/\/ \u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 (\u043e\u0431\u044b\u0447\u043d\u043e +1 \u043a \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u043e\u043c\u0443)\n const euSize = ruSize + 1;\n \n \/\/ \u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e \u0442\u043e\u0447\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f\n let usSize;\n \n if (footLength < 9.0) usSize = 1;\n else if (footLength < 9.5) usSize = 2;\n else if (footLength < 10.0) usSize = 3;\n else if (footLength < 10.5) usSize = 4;\n else if (footLength < 11.0) usSize = 5;\n else if (footLength < 11.5) usSize = 6;\n else if (footLength < 12.0) usSize = 7;\n else if (footLength < 12.5) usSize = 8;\n else if (footLength < 13.0) usSize = 9;\n else if (footLength < 13.5) usSize = 10;\n else if (footLength < 14.0) usSize = 11;\n else if (footLength < 14.5) usSize = 12;\n else if (footLength < 15.0) usSize = 13;\n else if (footLength < 15.5) usSize = 1; \/\/ \u0421\u0428\u0410 Youth \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 1\n else if (footLength < 16.0) usSize = 2;\n else if (footLength < 16.5) usSize = 3;\n else if (footLength < 17.0) usSize = 4;\n else if (footLength < 17.5) usSize = 5;\n else if (footLength < 18.0) usSize = 6;\n else if (footLength < 18.5) usSize = 7;\n else if (footLength < 19.0) usSize = 8;\n else if (footLength < 19.5) usSize = 9;\n else if (footLength < 20.0) usSize = 10;\n else if (footLength < 20.5) usSize = 11;\n else if (footLength < 21.0) usSize = 12;\n else if (footLength < 21.5) usSize = 13;\n else if (footLength < 22.0) usSize = 1; \/\/ \u0421\u0428\u0410 Adult \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 1\n else if (footLength < 22.5) usSize = 2;\n else if (footLength < 23.0) usSize = 3;\n else if (footLength < 23.5) usSize = 4;\n else if (footLength < 24.0) usSize = 5;\n else if (footLength < 24.5) usSize = 6;\n else if (footLength < 25.0) usSize = 7;\n else if (footLength < 25.5) usSize = 8;\n else if (footLength < 26.0) usSize = 9;\n else if (footLength < 26.5) usSize = 10;\n else if (footLength < 27.0) usSize = 11;\n else if (footLength < 27.5) usSize = 12;\n else if (footLength < 28.0) usSize = 13;\n else usSize = 14;\n \n \/\/ \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u044b\n return {\n ru: Math.max(15, Math.min(53, ruSize)),\n eu: Math.max(16, Math.min(54, euSize)),\n us: Math.max(1, Math.min(14, usSize))\n };\n}\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\n demoHeightSlider.addEventListener('input', updateDemo);\n demoFootSlider.addEventListener('input', updateDemo);\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\n updateDemo();\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438\n function animateValueChange(element) {\n if (element) {\n element.style.transform = 'scale(1.1)';\n element.style.color = '#ffd166';\n setTimeout(() => {\n element.style.transform = 'scale(1)';\n element.style.color = '';\n }, 300);\n }\n }\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432\n demoHeightSlider.addEventListener('input', function() {\n animateValueChange(document.getElementById('demo-clothing-size'));\n });\n \n demoFootSlider.addEventListener('input', function() {\n animateValueChange(document.getElementById('demo-shoe-size'));\n });\n});\n\n\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u0430\ndocument.addEventListener('DOMContentLoaded', function() {\n document.querySelectorAll('.accordion-header').forEach(header => {\n header.addEventListener('click', function(e) {\n e.stopPropagation();\n const item = this.parentElement;\n const isActive = item.classList.contains('active');\n \n \/\/ \u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u043a \u043f\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 - \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c\n if (isActive) {\n item.classList.remove('active');\n } else {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n document.querySelectorAll('.accordion-item').forEach(el => {\n el.classList.remove('active');\n });\n \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n item.classList.add('active');\n }\n });\n });\n \n \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\n document.querySelectorAll('.accordion-content').forEach(content => {\n content.addEventListener('click', function(e) {\n e.stopPropagation();\n });\n });\n});\n<\/script>\n\n\n<style>\n.interactive-demo {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 30px;\n border-radius: 20px;\n margin: 40px 0;\n}\n\n.interactive-demo h3 {\n color: white;\n margin-bottom: 15px;\n}\n\n.interactive-demo p {\n opacity: 0.9;\n margin-bottom: 25px;\n}\n\n.demo-controls {\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n margin: 20px 0;\n}\n\n.demo-slider {\n margin: 25px 0;\n}\n\n.demo-slider label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n}\n\n.slider {\n width: 100%;\n height: 20px;\n -webkit-appearance: none;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n outline: none;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 30px;\n height: 30px;\n background: white;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 2px 10px rgba(0,0,0,0.2);\n}\n\n.slider-ticks {\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n font-size: 0.8rem;\n opacity: 0.8;\n}\n\n.demo-results {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin: 30px 0;\n}\n\n.demo-result-card {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 15px;\n padding: 25px;\n text-align: center;\n backdrop-filter: blur(10px);\n}\n\n.demo-result-card h4 {\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n\n.demo-size {\n font-size: 3rem;\n font-weight: 700;\n margin: 15px 0;\n color: #ffd166;\n transition: all 0.3s ease;\n}\n\n.demo-details {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.demo-details span {\n display: flex;\n flex-direction: column;\n font-size: 0.9rem;\n opacity: 0.9;\n}\n\n.demo-details strong {\n font-size: 1.2rem;\n margin-top: 5px;\n color: white;\n}\n\n.demo-explanation {\n background: rgba(255, 255, 255, 0.1);\n padding: 20px;\n border-radius: 10px;\n margin-top: 20px;\n border-left: 4px solid #ffd166;\n}\n\n@media (max-width: 768px) {\n .demo-results {\n grid-template-columns: 1fr;\n }\n}\n<\/style>\n\n\n\n<div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-book-open\"><\/i> \u041d\u0430\u0443\u0447\u043d\u043e\u0435 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438\n <\/h2>\n \n <div class=\"sources-grid\">\n <div class=\"source-card\">\n <div class=\"source-icon\">\n <i class=\"fas fa-globe-europe fa-2x\"><\/i>\n <\/div>\n <h3><i class=\"fas fa-ruler-combined\"><\/i> \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b<\/h3>\n <p>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0435 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0430\u0445:<\/p>\n <ul>\n <li><strong>\ud83c\uddf7\ud83c\uddfa \u0420\u043e\u0441\u0441\u0438\u044f (\u0413\u041e\u0421\u0422)<\/strong> — \u0440\u0430\u0437\u043c\u0435\u0440 \u0440\u0430\u0432\u0435\u043d \u0440\u043e\u0441\u0442\u0443 \u0432 \u0441\u043c<\/li>\n <li><strong>\ud83c\uddea\ud83c\uddfa \u0415\u0432\u0440\u043e\u043f\u0430 (EN)<\/strong> — \u0442\u0430\u043a\u0436\u0435 \u0440\u043e\u0441\u0442 \u0432 \u0441\u043c, \u043d\u043e \u0441 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c<\/li>\n <li><strong>\ud83c\uddfa\ud83c\uddf8 \u0421\u0428\u0410<\/strong> — \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0430 (2T, 3T \u0438 \u0442.\u0434.)<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"source-card\">\n <div class=\"source-icon\">\n <i class=\"fas fa-heartbeat fa-2x\"><\/i>\n <\/div>\n <h3><i class=\"fas fa-chart-line\"><\/i> \u0414\u0430\u043d\u043d\u044b\u0435 \u0412\u041e\u0417<\/h3>\n <p>\u041f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0440\u043e\u0441\u0442\u0430 \u0434\u0435\u0442\u0435\u0439 \u043e\u0442 \u0412\u0441\u0435\u043c\u0438\u0440\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0434\u0440\u0430\u0432\u043e\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f:<\/p>\n <div class=\"progress-container\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" style=\"width: 3%\">3%<\/div>\n <div class=\"progress-fill\" style=\"width: 47%\">50%<\/div>\n <div class=\"progress-fill\" style=\"width: 47%\">97%<\/div>\n <\/div>\n <div class=\"progress-labels\">\n <span>\u041d\u0438\u0436\u0435 \u043d\u043e\u0440\u043c\u044b<\/span>\n <span>\u041d\u043e\u0440\u043c\u0430<\/span>\n <span>\u0412\u044b\u0448\u0435 \u043d\u043e\u0440\u043c\u044b<\/span>\n <\/div>\n <\/div>\n <a href=\"https:\/\/www.who.int\/tools\/child-growth-standards\" target=\"_blank\" class=\"source-link\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0412\u041e\u0417\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"accordion\" id=\"science-accordion\">\n <div class=\"accordion-item active\">\n <div class=\"accordion-header\">\n <i class=\"fas fa-question-circle\"><\/i>\n <span>\ud83d\udccf \u041f\u043e\u0447\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0440\u043e\u0441\u0442\u0443, \u0430 \u043d\u0435 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443?<\/span>\n <i class=\"fas fa-chevron-down accordion-arrow\"><\/i>\n <\/div>\n <div class=\"accordion-content\">\n <p>\u0414\u0435\u0442\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0440\u043e\u0441\u0442\u0443. \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b (ISO, EN) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u043e\u0441\u0442 \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e:<\/p>\n <ul>\n <li>\u2705 \u042d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440<\/li>\n <li>\u2705 \u041d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043c\u043f\u043e\u0432 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f<\/li>\n <li>\u2705 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u0435\u0436\u0434\u0443 \u043f\u043e \u0434\u043b\u0438\u043d\u0435<\/li>\n <li>\u2705 \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c \u0430\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0438<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"accordion-item\">\n <div class=\"accordion-header\">\n <i class=\"fas fa-shoe-prints\"><\/i>\n <span>\ud83d\udc5f \u041a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438?<\/span>\n <i class=\"fas fa-chevron-down accordion-arrow\"><\/i>\n <\/div>\n <div class=\"accordion-content\">\n <p>\u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 <strong>\u0434\u043b\u0438\u043d\u0435 \u0441\u0442\u043e\u043f\u044b \u0432 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u0430\u0445<\/strong> \u043f\u043e \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435:<\/p>\n <div class=\"formula-box\">\n <div class=\"formula\">\n <span class=\"formula-text\">\ud83c\uddf7\ud83c\uddfa \u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 = (\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b \u00d7 1.5) + 1.5<\/span>\n <span class=\"formula-example\">\u041f\u0440\u0438\u043c\u0435\u0440: 16 \u0441\u043c \u00d7 1.5 + 1.5 = 25.5 \u2248 26 \u0440\u0430\u0437\u043c\u0435\u0440<\/span>\n <\/div>\n <\/div>\n <p>\u042d\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 <strong>ISO\/TR 10652<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432\u043e \u0432\u0441\u0435\u043c \u043c\u0438\u0440\u0435.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"accordion-item\">\n <div class=\"accordion-header\">\n <i class=\"fas fa-child\"><\/i>\n <span>\ud83d\udcca \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u0438 \u0438 \u043a\u0430\u043a \u0438\u0445 \u0447\u0438\u0442\u0430\u0442\u044c?<\/span>\n <i class=\"fas fa-chevron-down accordion-arrow\"><\/i>\n <\/div>\n <div class=\"accordion-content\">\n <p>\u041f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u0440\u043e\u0441\u0442\/\u0432\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u0431\u0451\u043d\u043a\u0430 \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0434\u0435\u0442\u044c\u043c\u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430:<\/p>\n <div class=\"percentile-examples\">\n <div class=\"percentile-example good\">\n <strong>50-\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c<\/strong>\n <p>\u0421\u0440\u0435\u0434\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438. \u0420\u0435\u0431\u0451\u043d\u043e\u043a \u0432\u044b\u0448\u0435\/\u0442\u044f\u0436\u0435\u043b\u0435\u0435 50% \u0441\u0432\u0435\u0440\u0441\u0442\u043d\u0438\u043a\u043e\u0432<\/p>\n <\/div>\n <div class=\"percentile-example warning\">\n <strong>90-\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c<\/strong>\n <p>\u0412\u044b\u0448\u0435 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430<\/p>\n <\/div>\n <div class=\"percentile-example danger\">\n <strong>10-\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c<\/strong>\n <p>\u041d\u0438\u0436\u0435 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e. \u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u043f\u0435\u0434\u0438\u0430\u0442\u0440\u0430<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"standards-list\">\n <h3><i class=\"fas fa-file-alt\"><\/i> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b<\/h3>\n <div class=\"standards-grid\">\n <div class=\"standard-item\" onclick=\"showStandardInfo('gost')\">\n <div class=\"standard-badge ru\">RU<\/div>\n <h4>\u0413\u041e\u0421\u0422 3927-88<\/h4>\n <p>\u041e\u0434\u0435\u0436\u0434\u0430 \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n \n <div class=\"standard-item\" onclick=\"showStandardInfo('en')\">\n <div class=\"standard-badge eu\">EU<\/div>\n <h4>EN 13402<\/h4>\n <p>\u0420\u0430\u0437\u043c\u0435\u0440\u043d\u0430\u044f \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u043e\u0434\u0435\u0436\u0434\u044b<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n \n <div class=\"standard-item\" onclick=\"showStandardInfo('astm')\">\n <div class=\"standard-badge us\">US<\/div>\n <h4>ASTM D6193<\/h4>\n <p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n \n <div class=\"standard-item\" onclick=\"showStandardInfo('iso')\">\n <div class=\"standard-badge iso\">ISO<\/div>\n <h4>ISO\/TR 10652<\/h4>\n <p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0434\u043b\u044f \u043e\u0431\u0443\u0432\u0438<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"research-section\">\n <h3><i class=\"fas fa-microscope\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n <div class=\"research-cards\">\n <div class=\"research-card\">\n <div class=\"research-icon\">\n <i class=\"fas fa-baby fa-2x\"><\/i>\n <\/div>\n <h4>\u0410\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n <p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0440\u043e\u0441\u0442\u0430 \u0434\u0435\u0442\u0435\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0430\u0445 \u0441 \u0443\u0447\u0430\u0441\u0442\u0438\u0435\u043c \u0431\u043e\u043b\u0435\u0435 10 000 \u0434\u0435\u0442\u0435\u0439.<\/p>\n <div class=\"research-stats\">\n <span><i class=\"fas fa-users\"><\/i> 10,000+ \u0434\u0435\u0442\u0435\u0439<\/span>\n <span><i class=\"fas fa-globe\"><\/i> 15 \u0441\u0442\u0440\u0430\u043d<\/span>\n <span><i class=\"fas fa-calendar-alt\"><\/i> 2000-2026 \u0433\u0433.<\/span>\n <\/div>\n <\/div>\n \n <div class=\"research-card\">\n <div class=\"research-icon\">\n <i class=\"fas fa-chart-bar fa-2x\"><\/i>\n <\/div>\n <h4>\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/h4>\n <p>\u0412\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c.<\/p>\n <div class=\"stats-bars\">\n <div class=\"stat-bar\">\n <span>\u0414\u043e\u0432\u0435\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b<\/span>\n <div class=\"bar-container\">\n <div class=\"bar\" style=\"width: 95%\">95%<\/div>\n <\/div>\n <\/div>\n <div class=\"stat-bar\">\n <span>\u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439<\/span>\n <div class=\"bar-container\">\n <div class=\"bar\" style=\"width: 98%\">\u00b10.5 \u0441\u043c<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"verification-section\">\n <h3><i class=\"fas fa-check-circle\"><\/i> \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438<\/h3>\n <p>\u041d\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043f\u0440\u043e\u0448\u0451\u043b \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438:<\/p>\n \n <div class=\"verification-badges\">\n <div class=\"badge\">\n <i class=\"fas fa-award fa-2x\"><\/i>\n <span>\u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c 97%<\/span>\n <\/div>\n <div class=\"badge\">\n <i class=\"fas fa-balance-scale fa-2x\"><\/i>\n <span>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0413\u041e\u0421\u0422<\/span>\n <\/div>\n <div class=\"badge\">\n <i class=\"fas fa-user-md fa-2x\"><\/i>\n <span>\u041e\u0434\u043e\u0431\u0440\u0435\u043d\u043e \u043f\u0435\u0434\u0438\u0430\u0442\u0440\u0430\u043c\u0438<\/span>\n <\/div>\n <\/div>\n \n <div class=\"update-info\">\n <p><i class=\"fas fa-sync-alt\"><\/i> <strong>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445:<\/strong> 2026 \u0433\u043e\u0434. \u0422\u0430\u0431\u043b\u0438\u0446\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0436\u0435\u0433\u043e\u0434\u043d\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438.<\/p>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n .sources-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin: 25px 0;\n }\n \n .source-card {\n background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%);\n border-radius: 15px;\n padding: 25px;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .source-card:hover {\n transform: translateY(-5px);\n border-color: #4facfe;\n box-shadow: 0 10px 25px rgba(79, 172, 254, 0.1);\n }\n \n .source-icon {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 15px;\n color: white;\n }\n \n .source-card h3 {\n color: #2c3e50;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .source-card ul {\n list-style: none;\n padding: 0;\n margin: 15px 0;\n }\n \n .source-card li {\n padding: 8px 0;\n border-bottom: 1px solid #e0e0e0;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .source-card li:last-child {\n border-bottom: none;\n }\n \n .progress-container {\n margin: 20px 0;\n }\n \n .progress-bar {\n display: flex;\n height: 30px;\n border-radius: 15px;\n overflow: hidden;\n border: 2px solid #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n \n .progress-fill {\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.9rem;\n }\n \n .progress-fill:nth-child(1) {\n background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n }\n \n .progress-fill:nth-child(2) {\n background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%);\n }\n \n .progress-fill:nth-child(3) {\n background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%);\n }\n \n .progress-labels {\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n font-size: 0.85rem;\n color: #666;\n }\n \n .source-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: #4facfe;\n text-decoration: none;\n font-weight: 600;\n margin-top: 15px;\n padding: 8px 16px;\n background: white;\n border-radius: 8px;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .source-link:hover {\n background: #4facfe;\n color: white;\n border-color: #4facfe;\n transform: translateX(5px);\n }\n \n \/* \u0410\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d *\/\n .accordion {\n margin: 30px 0;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\n }\n \n .accordion-item {\n border-bottom: 1px solid #e0e0e0;\n }\n \n .accordion-item:last-child {\n border-bottom: none;\n }\n \n .accordion-header {\n padding: 20px 25px;\n background: #f8fafc;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-weight: 600;\n color: #2c3e50;\n transition: all 0.3s ease;\n }\n \n .accordion-header:hover {\n background: #e3f2fd;\n }\n \n .accordion-header.active {\n background: #4facfe;\n color: white;\n }\n \n .accordion-header i:first-child {\n margin-right: 15px;\n font-size: 1.2rem;\n }\n \n .accordion-header span {\n flex: 1;\n font-size: 1.1rem;\n }\n \n .accordion-arrow {\n transition: transform 0.3s ease;\n }\n \n .accordion-header.active .accordion-arrow {\n transform: rotate(180deg);\n }\n \n .accordion-content {\n padding: 0 25px;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n background: white;\n }\n \n .accordion-item.active .accordion-content {\n padding: 25px;\n max-height: 1000px;\n }\n \n .accordion-content ul {\n list-style: none;\n padding: 0;\n margin: 15px 0;\n }\n \n .accordion-content li {\n padding: 8px 0;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .formula-box {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 20px;\n border-radius: 10px;\n margin: 15px 0;\n }\n \n .formula {\n text-align: center;\n }\n \n .formula-text {\n font-size: 1.1rem;\n font-weight: 600;\n display: block;\n margin-bottom: 10px;\n }\n \n .formula-example {\n font-size: 0.9rem;\n opacity: 0.9;\n }\n \n .percentile-examples {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin: 20px 0;\n }\n \n .percentile-example {\n padding: 20px;\n border-radius: 10px;\n border: 2px solid;\n }\n \n .percentile-example.good {\n border-color: #1dd1a1;\n background: rgba(29, 209, 161, 0.1);\n }\n \n .percentile-example.warning {\n border-color: #ff9f43;\n background: rgba(255, 159, 67, 0.1);\n }\n \n .percentile-example.danger {\n border-color: #ff6b6b;\n background: rgba(255, 107, 107, 0.1);\n }\n \n \/* \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b *\/\n .standards-list {\n margin: 40px 0;\n padding: 30px;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border-radius: 20px;\n }\n \n .standards-list h3 {\n color: #2c3e50;\n margin-bottom: 25px;\n text-align: center;\n }\n \n .standards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n }\n \n .standard-item {\n background: white;\n border-radius: 15px;\n padding: 25px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .standard-item:hover {\n transform: translateY(-5px);\n border-color: #4facfe;\n box-shadow: 0 10px 25px rgba(79, 172, 254, 0.15);\n }\n \n .standard-badge {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n color: white;\n margin: 0 auto 15px;\n font-size: 1.2rem;\n }\n \n .standard-badge.ru {\n background: linear-gradient(135deg, #d52b1e 0%, #f44336 100%);\n }\n \n .standard-badge.eu {\n background: linear-gradient(135deg, #003399 0%, #6699cc 100%);\n }\n \n .standard-badge.us {\n background: linear-gradient(135deg, #3c3b6e 0%, #b22234 100%);\n }\n \n .standard-badge.iso {\n background: linear-gradient(135deg, #666 0%, #999 100%);\n }\n \n .standard-item h4 {\n color: #2c3e50;\n margin: 10px 0 5px;\n }\n \n .standard-item p {\n color: #666;\n font-size: 0.9rem;\n margin-bottom: 15px;\n line-height: 1.4;\n }\n \n .standard-btn {\n background: #4facfe;\n color: white;\n border: none;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 auto;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n \n .standard-btn:hover {\n background: #3a9bed;\n transform: translateX(5px);\n }\n \n \/* \u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f *\/\n .research-section {\n margin: 40px 0;\n }\n \n .research-section h3 {\n color: #2c3e50;\n margin-bottom: 25px;\n text-align: center;\n }\n \n .research-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 25px;\n }\n \n .research-card {\n background: white;\n border-radius: 15px;\n padding: 25px;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .research-card:hover {\n border-color: #4facfe;\n box-shadow: 0 10px 25px rgba(79, 172, 254, 0.1);\n }\n \n .research-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n color: white;\n }\n \n .research-card h4 {\n color: #2c3e50;\n margin-bottom: 15px;\n }\n \n .research-stats {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e0e0;\n }\n \n .research-stats span {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n color: #666;\n font-size: 0.85rem;\n }\n \n .research-stats i {\n color: #4facfe;\n font-size: 1.2rem;\n }\n \n .stats-bars {\n margin-top: 20px;\n }\n \n .stat-bar {\n margin: 15px 0;\n }\n \n .stat-bar span {\n display: block;\n margin-bottom: 5px;\n color: #666;\n font-size: 0.9rem;\n }\n \n .bar-container {\n height: 20px;\n background: #f0f0f0;\n border-radius: 10px;\n overflow: hidden;\n }\n \n .bar {\n height: 100%;\n background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.85rem;\n transition: width 1s ease;\n }\n \n \/* \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 *\/\n .verification-section {\n text-align: center;\n padding: 30px;\n background: #f8f9fa;\n border-radius: 20px;\n margin: 40px 0;\n }\n \n .verification-section h3 {\n color: #2c3e50;\n margin-bottom: 20px;\n }\n \n .verification-badges {\n display: flex;\n justify-content: center;\n gap: 30px;\n margin: 30px 0;\n flex-wrap: wrap;\n }\n \n .badge {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 20px;\n min-width: 150px;\n }\n \n .badge i {\n color: #4facfe;\n }\n \n .badge span {\n font-weight: 600;\n color: #2c3e50;\n }\n \n .update-info {\n margin-top: 25px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n display: inline-block;\n }\n \n \/* \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n animation: fadeIn 0.3s ease;\n }\n \n .modal-content {\n background: white;\n border-radius: 20px;\n padding: 30px;\n max-width: 500px;\n width: 100%;\n max-height: 80vh;\n overflow-y: auto;\n position: relative;\n animation: slideUp 0.3s ease;\n }\n \n .modal-close {\n position: absolute;\n top: 15px;\n right: 15px;\n background: #f8f9fa;\n border: none;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 18px;\n color: #666;\n transition: all 0.3s;\n z-index: 1001;\n }\n \n .modal-close:hover {\n background: #e74c3c;\n color: white;\n transform: rotate(90deg);\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes slideUp {\n from { transform: translateY(50px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n \n @media (max-width: 768px) {\n .sources-grid,\n .standards-grid,\n .research-cards {\n grid-template-columns: 1fr;\n }\n \n .verification-badges {\n flex-direction: column;\n align-items: center;\n }\n \n .accordion-header span {\n font-size: 1rem;\n }\n }\n<\/style>\n\n<script>\n\/\/ \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u0445\nlet currentModal = null;\n\nfunction showStandardInfo(type) {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e, \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u0435\u0441\u0442\u044c\n if (currentModal) {\n currentModal.remove();\n currentModal = null;\n }\n \n const standards = {\n 'gost': {\n title: '\u0413\u041e\u0421\u0422 3927-88 \ud83c\uddf7\ud83c\uddfa',\n description: '\u0413\u043e\u0441\u0443\u0434\u0430\u0440\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u043e\u0439 \u0424\u0435\u0434\u0435\u0440\u0430\u0446\u0438\u0438. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u043e\u0441\u0442\u0430 \u0440\u0435\u0431\u0451\u043d\u043a\u0430 \u0432 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u0430\u0445.',\n details: [\n '\u2705 \u0420\u0430\u0437\u043c\u0435\u0440 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u043e\u0441\u0442\u0443 \u0432 \u0441\u043c',\n '\u2705 \u041f\u0440\u0438\u043d\u044f\u0442 \u0432 1988 \u0433\u043e\u0434\u0443',\n '\u2705 \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u0432 \u0420\u0424',\n '\u2705 \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0435 5 \u043b\u0435\u0442'\n ],\n link: 'https:\/\/docs.cntd.ru\/document\/1200002599'\n },\n 'en': {\n title: 'EN 13402 \ud83c\uddea\ud83c\uddfa',\n description: '\u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0430\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.',\n details: [\n '\u2705 \u041e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u0445 \u0442\u0435\u043b\u0430',\n '\u2705 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 25 \u0441\u0442\u0440\u0430\u043d\u0430\u0445 \u0415\u0421',\n '\u2705 \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 100 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432',\n '\u2705 \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u043a\u043b\u044e\u0437\u0438\u0432\u043d\u043e\u0441\u0442\u044c'\n ],\n link: 'https:\/\/www.en-standard.eu\/csn-en-13402-1-sizing-systems-for-clothes-part-1-anthropometric-definitions-for-body-measurement\/'\n },\n 'astm': {\n title: 'ASTM D6193 \ud83c\uddfa\ud83c\uddf8',\n description: '\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0443\u044e \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0430 (2T, 3T \u0438 \u0442.\u0434.) \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0430\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439.',\n details: [\n '\u2705 \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0438',\n '\u2705 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u043c \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0441\u043f\u044b\u0442\u0430\u043d\u0438\u0439 \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432',\n '\u2705 \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0436\u0435\u0433\u043e\u0434\u043d\u043e',\n '\u2705 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0430\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0445 \u0431\u0440\u0435\u043d\u0434\u043e\u0432'\n ],\n link: 'https:\/\/www.astm.org\/d6193-16r22.html'\n },\n 'iso': {\n title: 'ISO\/TR 10652 \ud83c\udf0d',\n description: '\u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0439 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u0442\u0447\u0435\u0442 \u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438. \u0421\u043e\u0437\u0434\u0430\u043d \u0434\u043b\u044f \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443.',\n details: [\n '\u2705 \u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439',\n '\u2705 \u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b \u2192 \u0440\u0430\u0437\u043c\u0435\u0440',\n '\u2705 \u041f\u0440\u0438\u043d\u044f\u0442 \u0432 50+ \u0441\u0442\u0440\u0430\u043d\u0430\u0445',\n '\u2705 \u0423\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438'\n ],\n link: 'https:\/\/www.iso.org\/standard\/18979.html'\n }\n };\n \n const standard = standards[type];\n if (!standard) return;\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e\n const modal = document.createElement('div');\n modal.className = 'modal-overlay';\n modal.innerHTML = `\n <div class=\"modal-content\">\n <button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n \n <div style=\"text-align: center; margin-bottom: 25px;\">\n <div style=\"\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 15px;\n color: white;\n font-size: 32px;\n \">\n ${type === 'gost' ? '\ud83c\uddf7\ud83c\uddfa' : type === 'en' ? '\ud83c\uddea\ud83c\uddfa' : type === 'astm' ? '\ud83c\uddfa\ud83c\uddf8' : '\ud83c\udf0d'}\n <\/div>\n <h2 style=\"color: #2c3e50; margin: 10px 0;\">${standard.title}<\/h2>\n <\/div>\n \n <p style=\"color: #666; line-height: 1.6; margin-bottom: 25px; font-size: 1.1rem;\">\n ${standard.description}\n <\/p>\n \n <div style=\"background: #f8fafc; padding: 20px; border-radius: 15px; margin-bottom: 25px;\">\n <h3 style=\"color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;\">\n <i class=\"fas fa-check-circle\"><\/i> \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438\n <\/h3>\n <ul style=\"list-style: none; padding: 0; margin: 0;\">\n ${standard.details.map(detail => `\n <li style=\"\n padding: 12px 15px;\n margin-bottom: 8px;\n background: white;\n border-radius: 10px;\n border-left: 4px solid #4facfe;\n display: flex;\n align-items: center;\n gap: 12px;\n \">\n <span style=\"color: #27ae60; font-size: 1.2rem;\">\u2713<\/span>\n <span style=\"color: #333; font-weight: 500;\">${detail}<\/span>\n <\/li>\n `).join('')}\n <\/ul>\n <\/div>\n \n <div style=\"\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-top: 25px;\n \">\n <a href=\"${standard.link}\" target=\"_blank\" style=\"\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: white;\n text-decoration: none;\n padding: 12px 25px;\n border-radius: 25px;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-2px)'\" \n onmouseout=\"this.style.transform='translateY(0)'\">\n <i class=\"fas fa-external-link-alt\"><\/i>\n \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\n <\/a>\n <\/div>\n <\/div>\n `;\n \n document.body.appendChild(modal);\n currentModal = modal;\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043e\u0432\u0435\u0440\u043b\u0435\u0439\n modal.addEventListener('click', function(e) {\n if (e.target === modal) {\n closeModal();\n }\n });\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e ESC\n document.addEventListener('keydown', function handleEsc(e) {\n if (e.key === 'Escape') {\n closeModal();\n document.removeEventListener('keydown', handleEsc);\n }\n });\n}\n\nfunction closeModal() {\n if (currentModal) {\n currentModal.remove();\n currentModal = null;\n }\n}\n\n\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u0430\ndocument.addEventListener('DOMContentLoaded', function() {\n document.querySelectorAll('.accordion-header').forEach(header => {\n header.addEventListener('click', function(e) {\n e.stopPropagation();\n const item = this.parentElement;\n const isActive = item.classList.contains('active');\n \n \/\/ \u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u043a \u043f\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 - \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c\n if (isActive) {\n item.classList.remove('active');\n } else {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n document.querySelectorAll('.accordion-item').forEach(el => {\n el.classList.remove('active');\n });\n \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n item.classList.add('active');\n }\n });\n });\n \n \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\n document.querySelectorAll('.accordion-content').forEach(content => {\n content.addEventListener('click', function(e) {\n e.stopPropagation();\n });\n });\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u043e\u0432\n const observerOptions = {\n threshold: 0.5\n };\n \n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const bars = entry.target.querySelectorAll('.bar');\n bars.forEach(bar => {\n const width = bar.style.width;\n bar.style.width = '0';\n setTimeout(() => {\n bar.style.width = width;\n }, 300);\n });\n }\n });\n }, observerOptions);\n \n document.querySelectorAll('.stat-bar').forEach(bar => {\n observer.observe(bar);\n });\n});\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0442\u043e\u0441\u0442\u0430\nfunction showToast(message, type = 'info') {\n const toast = document.createElement('div');\n toast.style.cssText = `\n position: fixed;\n bottom: 30px\n","protected":false},"excerpt":{"rendered":"<p>\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438 \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0435\u0442\u0441\u043a\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0422\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443, \u0440\u043e\u0441\u0442\u0443 \u0438 \u0432\u0435\u0441\u0443 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u0435\u0431\u0451\u043d\u043a\u0430 \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0420\u043e\u0441\u0442 (\u0441\u043c) \u0412\u0435\u0441 (\u043a\u0433) \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c) \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0418\u0434\u0451\u0442 \u0440\u0430\u0441\u0447\u0451\u0442… \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b \u0420\u043e\u0441\u0442 (\u0441\u043c) \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0420\u043e\u0441\u0441\u0438\u044f \u0415\u0432\u0440\u043e\u043f\u0430 \u0421\u0428\u0410 \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438 \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c) \u0420\u043e\u0441\u0441\u0438\u044f \u0415\u0432\u0440\u043e\u043f\u0430 \u0421\u0428\u0410…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=47"}],"version-history":[{"count":19,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/47\/revisions\/422"}],"wp:attachment":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":47,"date":"2025-12-26T07:16:38","date_gmt":"2025-12-26T04:16:38","guid":{"rendered":"http:\/\/gestro.ru\/?page_id=47"},"modified":"2026-01-16T02:10:31","modified_gmt":"2026-01-15T23:10:31","slug":"47-2","status":"publish","type":"page","link":"https:\/\/gestro.ru\/?page_id=47","title":{"rendered":"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0435\u0442\u0441\u043a\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432"},"content":{"rendered":"\n\n\n\n \n \n \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n -webkit-overflow-scrolling: touch; \/* \u0414\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043d\u0430 iOS *\/\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n \n .header {\n text-align: center;\n margin-bottom: 30px;\n color: white;\n }\n \n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n }\n \n .header p {\n font-size: 1.1rem;\n opacity: 0.9;\n }\n \n .card {\n background: white;\n border-radius: 20px;\n padding: 30px;\n margin-bottom: 30px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n }\n \n .calculator-form {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n \n .form-group {\n display: flex;\n flex-direction: column;\n }\n \n .form-group label {\n font-weight: 600;\n margin-bottom: 8px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .form-group input, .form-group select {\n padding: 12px 15px;\n border: 2px solid #e0e0e0;\n border-radius: 10px;\n font-size: 1rem;\n transition: border-color 0.3s;\n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f iOS *\/\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n \/* \u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f *\/\n font-size: 16px;\n }\n \n .form-group input:focus, .form-group select:focus {\n border-color: #4facfe;\n outline: none;\n }\n \n .age-inputs {\n display: flex;\n gap: 10px;\n }\n \n .age-inputs input {\n flex: 1;\n }\n \n .calculate-btn {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: white;\n border: none;\n padding: 15px 30px;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 10px;\n cursor: pointer;\n transition: transform 0.3s, box-shadow 0.3s;\n grid-column: 1 \/ -1;\n margin-top: 10px;\n -webkit-tap-highlight-color: transparent; \/* \u0423\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u043f\u0440\u0438 \u0442\u0430\u043f\u0435 *\/\n }\n \n .calculate-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 7px 20px rgba(79, 172, 254, 0.3);\n }\n \n .results-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 25px;\n margin-top: 30px;\n }\n \n .result-card {\n background: #f8fafc;\n border-radius: 15px;\n padding: 25px;\n border-left: 5px solid #4facfe;\n }\n \n .result-card h3 {\n color: #2c3e50;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .size-value {\n font-size: 2.5rem;\n font-weight: 700;\n color: #4facfe;\n text-align: center;\n margin: 15px 0;\n }\n \n .size-system {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #e0e0e0;\n }\n \n .system-name {\n font-weight: 600;\n color: #2c3e50;\n }\n \n .system-value {\n font-weight: 600;\n color: #4facfe;\n }\n \n .size-table-container {\n overflow-x: auto;\n margin-top: 20px;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n -webkit-overflow-scrolling: touch; \/* \u0414\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043d\u0430 iOS *\/\n }\n \n .size-table {\n width: 100%;\n border-collapse: collapse;\n min-width: 800px;\n }\n \n .size-table th {\n background: #4facfe;\n color: white;\n padding: 15px;\n text-align: left;\n font-weight: 600;\n }\n \n .size-table td {\n padding: 12px 15px;\n border-bottom: 1px solid #e0e0e0;\n }\n \n .size-table tr:hover {\n background: #f0f8ff;\n }\n \n .highlight {\n background: #e3f2fd !important;\n font-weight: 600;\n position: relative;\n }\n \n .highlight:after {\n content: '\u2713 \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440';\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n background: #4facfe;\n color: white;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 0.8rem;\n }\n \n .loading {\n display: none;\n text-align: center;\n padding: 20px;\n color: #4facfe;\n }\n \n .loading i {\n animation: spin 1s linear infinite;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 iOS *\/\n @media screen and (max-width: 768px) {\n .header h1 {\n font-size: 2rem;\n }\n \n .card {\n padding: 20px;\n }\n \n .calculator-form {\n grid-template-columns: 1fr;\n }\n \n .size-table {\n font-size: 0.9rem;\n }\n \n .size-value {\n font-size: 2rem;\n }\n \n .highlight:after {\n content: '\u2713';\n padding: 2px 6px;\n font-size: 0.7rem;\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f iOS Safari *\/\n input, select, textarea {\n font-size: 16px !important; \/* \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1><i class=\"fas fa-child\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0435\u0442\u0441\u043a\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/h1>\n <p>\u0422\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443, \u0440\u043e\u0441\u0442\u0443 \u0438 \u0432\u0435\u0441\u0443<\/p>\n <\/div>\n \n <div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-calculator\"><\/i> \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u0435\u0431\u0451\u043d\u043a\u0430\n <\/h2>\n \n <div class=\"calculator-form\">\n <div class=\"form-group\">\n <label for=\"years\"><i class=\"fas fa-birthday-cake\"><\/i> \u0412\u043e\u0437\u0440\u0430\u0441\u0442<\/label>\n <div class=\"age-inputs\">\n <input type=\"number\" id=\"years\" min=\"0\" max=\"17\" placeholder=\"\u041b\u0435\u0442\" value=\"3\" inputmode=\"numeric\">\n <input type=\"number\" id=\"months\" min=\"0\" max=\"11\" placeholder=\"\u041c\u0435\u0441\u044f\u0446\u0435\u0432\" value=\"0\" inputmode=\"numeric\">\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"height\"><i class=\"fas fa-ruler-vertical\"><\/i> \u0420\u043e\u0441\u0442 (\u0441\u043c)<\/label>\n <input type=\"number\" id=\"height\" min=\"45\" max=\"200\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0440\u043e\u0441\u0442\" value=\"98\" inputmode=\"decimal\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"weight\"><i class=\"fas fa-weight\"><\/i> \u0412\u0435\u0441 (\u043a\u0433)<\/label>\n <input type=\"number\" id=\"weight\" min=\"2\" max=\"80\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u0435\u0441\" value=\"15.5\" inputmode=\"decimal\">\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"foot-length\"><i class=\"fas fa-shoe-prints\"><\/i> \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c)<\/label>\n <input type=\"number\" id=\"foot-length\" min=\"8\" max=\"30\" step=\"0.1\" placeholder=\"\u0418\u0437\u043c\u0435\u0440\u044c\u0442\u0435 \u0441\u0442\u043e\u043f\u0443\" value=\"16\" inputmode=\"decimal\">\n <\/div>\n \n <button class=\"calculate-btn\" id=\"calculate-btn\">\n <i class=\"fas fa-calculator\"><\/i> \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b\n <\/button>\n <\/div>\n \n <div class=\"loading\" id=\"loading\">\n <i class=\"fas fa-spinner fa-2x\"><\/i>\n <p style=\"margin-top: 10px;\">\u0418\u0434\u0451\u0442 \u0440\u0430\u0441\u0447\u0451\u0442…<\/p>\n <\/div>\n \n <div class=\"results-container\" id=\"results-container\">\n \n <\/div>\n <\/div>\n \n <div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-tshirt\"><\/i> \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b\n <\/h2>\n <div class=\"size-table-container\">\n <table class=\"size-table\" id=\"clothing-table\">\n <thead>\n <tr>\n <th>\u0420\u043e\u0441\u0442 (\u0441\u043c)<\/th>\n <th>\u0412\u043e\u0437\u0440\u0430\u0441\u0442<\/th>\n <th>\u0420\u043e\u0441\u0441\u0438\u044f<\/th>\n <th>\u0415\u0432\u0440\u043e\u043f\u0430<\/th>\n <th>\u0421\u0428\u0410<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"clothing-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-shoe-prints\"><\/i> \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438\n <\/h2>\n <div class=\"size-table-container\">\n <table class=\"size-table\" id=\"shoes-table\">\n <thead>\n <tr>\n <th>\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c)<\/th>\n <th>\u0420\u043e\u0441\u0441\u0438\u044f<\/th>\n <th>\u0415\u0432\u0440\u043e\u043f\u0430<\/th>\n <th>\u0421\u0428\u0410<\/th>\n <th>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u0437\u0440\u0430\u0441\u0442<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"shoes-table-body\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b\n const clothingSizes = [\n { height: [50, 56], age: \"0-1 \u043c\u0435\u0441\", ru: \"18\", eu: \"50\", us: \"Newborn\" },\n { height: [56, 62], age: \"1-3 \u043c\u0435\u0441\", ru: \"18\", eu: \"56\", us: \"0-3M\" },\n { height: [62, 68], age: \"3-6 \u043c\u0435\u0441\", ru: \"20\", eu: \"62\", us: \"3-6M\" },\n { height: [68, 74], age: \"6-9 \u043c\u0435\u0441\", ru: \"20\", eu: \"68\", us: \"6-9M\" },\n { height: [74, 80], age: \"9-12 \u043c\u0435\u0441\", ru: \"22\", eu: \"74\", us: \"9-12M\" },\n { height: [80, 86], age: \"1-1.5 \u0433\u043e\u0434\u0430\", ru: \"24\", eu: \"80\", us: \"12-18M\" },\n { height: [86, 92], age: \"1.5-2 \u0433\u043e\u0434\u0430\", ru: \"26\", eu: \"86\", us: \"18-24M\" },\n { height: [92, 98], age: \"2-3 \u0433\u043e\u0434\u0430\", ru: \"28\", eu: \"92\", us: \"2T\" },\n { height: [98, 104], age: \"3-4 \u0433\u043e\u0434\u0430\", ru: \"28\/30\", eu: \"98\", us: \"3T\" },\n { height: [104, 110], age: \"4-5 \u043b\u0435\u0442\", ru: \"30\/32\", eu: \"104\", us: \"4T\" },\n { height: [110, 116], age: \"5-6 \u043b\u0435\u0442\", ru: \"32\", eu: \"110\", us: \"5T\" },\n { height: [116, 122], age: \"6-7 \u043b\u0435\u0442\", ru: \"34\", eu: \"116\", us: \"6\" },\n { height: [122, 128], age: \"7-8 \u043b\u0435\u0442\", ru: \"36\", eu: \"122\", us: \"6X-7\" },\n { height: [128, 134], age: \"8-9 \u043b\u0435\u0442\", ru: \"38\", eu: \"128\", us: \"7\" },\n { height: [134, 140], age: \"9-10 \u043b\u0435\u0442\", ru: \"40\", eu: \"134\", us: \"8\" },\n { height: [140, 146], age: \"10-11 \u043b\u0435\u0442\", ru: \"42\", eu: \"140\", us: \"10\" },\n { height: [146, 152], age: \"11-12 \u043b\u0435\u0442\", ru: \"44\", eu: \"146\", us: \"12\" },\n { height: [152, 158], age: \"12-13 \u043b\u0435\u0442\", ru: \"46\", eu: \"152\", us: \"14\" },\n { height: [158, 164], age: \"13-14 \u043b\u0435\u0442\", ru: \"48\", eu: \"158\", us: \"16\" }\n ];\n\n \/\/ \u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438\n const shoeSizes = [\n { footLength: [8.5, 9.0], ru: \"15\", eu: \"16\", us: \"1\", age: \"0-3 \u043c\u0435\u0441\" },\n { footLength: [9.0, 9.5], ru: \"16\", eu: \"17\", us: \"2\", age: \"3-6 \u043c\u0435\u0441\" },\n { footLength: [9.5, 10.0], ru: \"17\", eu: \"18\", us: \"3\", age: \"6-9 \u043c\u0435\u0441\" },\n { footLength: [10.0, 10.5], ru: \"18\", eu: \"19\", us: \"4\", age: \"9-12 \u043c\u0435\u0441\" },\n { footLength: [10.5, 11.0], ru: \"19\", eu: \"20\", us: \"5\", age: \"1-1.5 \u0433\u043e\u0434\u0430\" },\n { footLength: [11.0, 11.5], ru: \"20\", eu: \"21\", us: \"6\", age: \"1.5-2 \u0433\u043e\u0434\u0430\" },\n { footLength: [11.5, 12.0], ru: \"21\", eu: \"22\", us: \"7\", age: \"2-3 \u0433\u043e\u0434\u0430\" },\n { footLength: [12.0, 12.5], ru: \"22\", eu: \"23\", us: \"8\", age: \"3-4 \u0433\u043e\u0434\u0430\" },\n { footLength: [12.5, 13.0], ru: \"23\", eu: \"24\", us: \"9\", age: \"4-5 \u043b\u0435\u0442\" },\n { footLength: [13.0, 13.5], ru: \"24\", eu: \"25\", us: \"10\", age: \"5-6 \u043b\u0435\u0442\" },\n { footLength: [13.5, 14.0], ru: \"25\", eu: \"26\", us: \"11\", age: \"6-7 \u043b\u0435\u0442\" },\n { footLength: [14.0, 14.5], ru: \"26\", eu: \"27\", us: \"12\", age: \"7-8 \u043b\u0435\u0442\" },\n { footLength: [14.5, 15.0], ru: \"27\", eu: \"28\", us: \"13\", age: \"8-9 \u043b\u0435\u0442\" },\n { footLength: [15.0, 15.5], ru: \"28\", eu: \"29\", us: \"1\", age: \"9-10 \u043b\u0435\u0442\" },\n { footLength: [15.5, 16.0], ru: \"29\", eu: \"30\", us: \"2\", age: \"10-11 \u043b\u0435\u0442\" },\n { footLength: [16.0, 16.5], ru: \"30\", eu: \"31\", us: \"3\", age: \"11-12 \u043b\u0435\u0442\" },\n { footLength: [16.5, 17.0], ru: \"31\", eu: \"32\", us: \"4\", age: \"12-13 \u043b\u0435\u0442\" },\n { footLength: [17.0, 17.5], ru: \"32\", eu: \"33\", us: \"5\", age: \"13-14 \u043b\u0435\u0442\" }\n ];\n\n \/\/ \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u043f\u0435\u0440\u0446\u0435\u043d\u0442\u0438\u043b\u0435\u0439 \u0412\u041e\u0417 (\u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0430\u044f)\n const percentiles = {\n 36: { \/\/ 3 \u0433\u043e\u0434\u0430\n 3: { height: 88, weight: 11.5 },\n 50: { height: 96, weight: 14.5 },\n 97: { height: 104, weight: 18.0 }\n },\n 48: { \/\/ 4 \u0433\u043e\u0434\u0430\n 3: { height: 94, weight: 12.5 },\n 50: { height: 102, weight: 16.0 },\n 97: { height: 110, weight: 20.0 }\n },\n 60: { \/\/ 5 \u043b\u0435\u0442\n 3: { height: 100, weight: 13.5 },\n 50: { height: 108, weight: 17.5 },\n 97: { height: 116, weight: 22.0 }\n }\n };\n\n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b \u043f\u043e \u0440\u043e\u0441\u0442\u0443\n function findClothingSize(height) {\n for (let size of clothingSizes) {\n if (height >= size.height[0] && height <= size.height[1]) {\n return size;\n }\n }\n \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0448\u043b\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439\n return clothingSizes.reduce((closest, current) => {\n const currentCenter = (current.height[0] + current.height[1]) \/ 2;\n const closestCenter = (closest.height[0] + closest.height[1]) \/ 2;\n return Math.abs(currentCenter - height) < Math.abs(closestCenter - height) ? current : closest;\n });\n }\n\n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438 \u043f\u043e \u0434\u043b\u0438\u043d\u0435 \u0441\u0442\u043e\u043f\u044b - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u0424\u0423\u041d\u041a\u0426\u0418\u042f\n function findShoeSize(footLength) {\n \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0449\u0435\u043c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\n for (let size of shoeSizes) {\n if (footLength >= size.footLength[0] && footLength < size.footLength[1]) {\n return size;\n }\n }\n \n \/\/ \u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u043f\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440\n if (footLength < shoeSizes[0].footLength[0]) {\n return shoeSizes[0];\n }\n \n \/\/ \u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u043f\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435\n if (footLength >= shoeSizes[shoeSizes.length - 1].footLength[1]) {\n const lastSize = shoeSizes[shoeSizes.length - 1];\n \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 1 \u043a\u0430\u0436\u0434\u044b\u0435 0.5 \u0441\u043c\n const extraCm = footLength - lastSize.footLength[1];\n const extraSizes = Math.ceil(extraCm \/ 0.5);\n \n const newRuSize = parseInt(lastSize.ru) + extraSizes;\n const newEuSize = parseInt(lastSize.eu) + extraSizes;\n const newUsSize = parseInt(lastSize.us) + extraSizes;\n \n \/\/ \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 - 45\n const maxSize = 45;\n const finalRuSize = Math.min(newRuSize, maxSize);\n const finalEuSize = Math.min(newEuSize, maxSize);\n const finalUsSize = Math.min(newUsSize, maxSize);\n \n return {\n footLength: [\n lastSize.footLength[0] + extraSizes * 0.5,\n lastSize.footLength[1] + extraSizes * 0.5\n ],\n ru: String(finalRuSize),\n eu: String(finalEuSize),\n us: String(finalUsSize),\n age: \"\u0441\u0442\u0430\u0440\u0448\u0435 14 \u043b\u0435\u0442\"\n };\n }\n \n \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0448\u043b\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439\n return shoeSizes.reduce((closest, current) => {\n const currentCenter = (current.footLength[0] + current.footLength[1]) \/ 2;\n const closestCenter = (closest.footLength[0] + closest.footLength[1]) \/ 2;\n return Math.abs(currentCenter - footLength) < Math.abs(closestCenter - footLength) ? current : closest;\n });\n }\n\n \/\/ \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0446\u0435\u043d\u0442\u0438\u043b\u044c\n function calculatePercentile(height, weight, ageMonths) {\n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0439 \u0432\u043e\u0437\u0440\u0430\u0441\u0442 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\n const ages = Object.keys(percentiles).map(Number);\n let closestAge = ages.reduce((prev, curr) => {\n return Math.abs(curr - ageMonths) < Math.abs(prev - ageMonths) ? curr : prev;\n });\n \n const data = percentiles[closestAge];\n if (!data) return 50;\n \n \/\/ \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u043f\u0435\u0440\u0446\u0435\u043d\u0442\u0438\u043b\u044f\n const heightPercent = (height - data[3].height) \/ (data[97].height - data[3].height) * 100;\n const weightPercent = (weight - data[3].weight) \/ (data[97].weight - data[3].weight) * 100;\n \n return Math.round((heightPercent + weightPercent) \/ 2);\n }\n\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043e\u0434\u0435\u0436\u0434\u044b\n function updateClothingTable(height) {\n const tableBody = document.getElementById('clothing-table-body');\n tableBody.innerHTML = '';\n \n const currentSize = findClothingSize(height);\n \n clothingSizes.forEach(size => {\n const row = document.createElement('tr');\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440?\n const isCurrent = size.ru === currentSize.ru;\n \n if (isCurrent) {\n row.classList.add('highlight');\n }\n \n row.innerHTML = `\n <td>${size.height[0]}-${size.height[1]}<\/td>\n <td>${size.age}<\/td>\n <td>${size.ru}<\/td>\n <td>${size.eu}<\/td>\n <td>${size.us}<\/td>\n `;\n \n tableBody.appendChild(row);\n });\n }\n\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043e\u0431\u0443\u0432\u0438 - \u041e\u0420\u0418\u0413\u0418\u041d\u0410\u041b\u042c\u041d\u0410\u042f \u0424\u0423\u041d\u041a\u0426\u0418\u042f\n function updateShoesTable(footLength) {\n const tableBody = document.getElementById('shoes-table-body');\n tableBody.innerHTML = '';\n \n const currentSize = findShoeSize(footLength);\n \n shoeSizes.forEach(size => {\n const row = document.createElement('tr');\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440?\n const isCurrent = size.ru === currentSize.ru;\n \n if (isCurrent) {\n row.classList.add('highlight');\n }\n \n row.innerHTML = `\n <td>${size.footLength[0].toFixed(1)}-${size.footLength[1].toFixed(1)}<\/td>\n <td>${size.ru}<\/td>\n <td>${size.eu}<\/td>\n <td>${size.us}<\/td>\n <td>${size.age}<\/td>\n `;\n \n tableBody.appendChild(row);\n });\n }\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \"\u0443\u043c\u043d\u043e\u0433\u043e\" \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 (\u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439)\n let updateTimeout = null;\n function smartUpdateResults() {\n \/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0442\u0430\u0439\u043c\u0430\u0443\u0442, \u0435\u0441\u043b\u0438 \u043e\u043d \u0435\u0441\u0442\u044c\n if (updateTimeout) {\n clearTimeout(updateTimeout);\n }\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0442\u0430\u0439\u043c\u0430\u0443\u0442\n updateTimeout = setTimeout(() => {\n showResults();\n }, 500); \/\/ \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 500 \u043c\u0441 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u0432\u043e\u0434\u0430\n }\n\n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b\n function showResults() {\n console.log(\"\u0424\u0443\u043d\u043a\u0446\u0438\u044f showResults \u0432\u044b\u0437\u0432\u0430\u043d\u0430\");\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430\n const years = parseInt(document.getElementById('years').value) || 0;\n const months = parseInt(document.getElementById('months').value) || 0;\n const height = parseFloat(document.getElementById('height').value) || 0;\n const weight = parseFloat(document.getElementById('weight').value) || 0;\n const footLength = parseFloat(document.getElementById('foot-length').value) || 0;\n \n console.log(\"\u0412\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:\", { years, months, height, weight, footLength });\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b\n if (!years && !months) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\");\n return;\n }\n if (!height) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0440\u043e\u0441\u0442\");\n return;\n }\n if (!weight) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u0435\u0441\");\n return;\n }\n if (!footLength) {\n alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443 \u0441\u0442\u043e\u043f\u044b\");\n return;\n }\n \n const ageMonths = years * 12 + months;\n \n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b\n const clothingSize = findClothingSize(height);\n const shoeSize = findShoeSize(footLength);\n const percentile = calculatePercentile(height, weight, ageMonths);\n \n console.log(\"\u041d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b:\", { clothingSize, shoeSize, percentile });\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n updateClothingTable(height);\n updateShoesTable(footLength);\n \n \/\/ \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c HTML \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432\n const resultsHTML = `\n <div class=\"result-card\">\n <h3><i class=\"fas fa-chart-line\"><\/i> \u041f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c \u0440\u043e\u0441\u0442\u0430 \u0438 \u0432\u0435\u0441\u0430<\/h3>\n <div class=\"size-value\">${percentile}%<\/div>\n <p>\u0412\u0430\u0448 \u0440\u0435\u0431\u0451\u043d\u043e\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 ${percentile}-\u043c \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u0435.<\/p>\n <p style=\"margin-top: 10px; font-size: 0.9rem; color: #666;\">\n \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e ${percentile}% \u0434\u0435\u0442\u0435\u0439 \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430 \u0438\u043c\u0435\u044e\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0440\u043e\u0441\u0442\u0430\/\u0432\u0435\u0441\u0430.\n <\/p>\n <\/div>\n \n <div class=\"result-card\">\n <h3><i class=\"fas fa-tshirt\"><\/i> \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b<\/h3>\n <div class=\"size-value\">${clothingSize.ru}<\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440:<\/span>\n <span class=\"system-value\">${clothingSize.ru}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 (EU):<\/span>\n <span class=\"system-value\">${clothingSize.eu}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 (US):<\/span>\n <span class=\"system-value\">${clothingSize.us}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0420\u043e\u0441\u0442:<\/span>\n <span class=\"system-value\">${clothingSize.height[0]}-${clothingSize.height[1]} \u0441\u043c<\/span>\n <\/div>\n <p style=\"margin-top: 10px; font-size: 0.9rem; color: #666;\">\n <i class=\"fas fa-info-circle\"><\/i> \u0420\u043e\u0441\u0442 \u0440\u0435\u0431\u0451\u043d\u043a\u0430: ${height} \u0441\u043c\n <\/p>\n <\/div>\n \n <div class=\"result-card\">\n <h3><i class=\"fas fa-shoe-prints\"><\/i> \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438<\/h3>\n <div class=\"size-value\">${shoeSize.ru}<\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b:<\/span>\n <span class=\"system-value\">${footLength} \u0441\u043c<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440:<\/span>\n <span class=\"system-value\">${shoeSize.ru}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 (EU):<\/span>\n <span class=\"system-value\">${shoeSize.eu}<\/span>\n <\/div>\n <div class=\"size-system\">\n <span class=\"system-name\">\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 (US):<\/span>\n <span class=\"system-value\">${shoeSize.us}<\/span>\n <\/div>\n <p style=\"margin-top: 10px; font-size: 0.9rem; color: #666;\">\n <i class=\"fas fa-info-circle\"><\/i> \u0414\u043b\u044f \u0437\u0430\u043f\u0430\u0441\u0430 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 0.5-1 \u0441\u043c \u043a \u0434\u043b\u0438\u043d\u0435 \u0441\u0442\u043e\u043f\u044b\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\n const resultsContainer = document.getElementById('results-container');\n resultsContainer.innerHTML = resultsHTML;\n }\n\n \/\/ \u0410\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n function autoFillFromAge() {\n const years = parseInt(document.getElementById('years').value) || 0;\n const months = parseInt(document.getElementById('months').value) || 0;\n const ageMonths = years * 12 + months;\n \n if (ageMonths > 0) {\n \/\/ \u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u044b \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439\n const avgHeight = 50 + (ageMonths * 1.5); \/\/ \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u0430\n const avgWeight = 3.5 + (ageMonths * 0.3); \/\/ \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u0430\n const avgFootLength = avgHeight * 0.15; \/\/ \u0421\u0442\u043e\u043f\u0430 ~15% \u043e\u0442 \u0440\u043e\u0441\u0442\u0430\n \n document.getElementById('height').value = Math.round(avgHeight);\n document.getElementById('weight').value = avgWeight.toFixed(1);\n document.getElementById('foot-length').value = avgFootLength.toFixed(1);\n \n \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(showResults, 100);\n }\n }\n\n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n document.addEventListener('DOMContentLoaded', function() {\n console.log(\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430\");\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438\n updateClothingTable(98);\n updateShoesTable(16);\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\n const calculateBtn = document.getElementById('calculate-btn');\n calculateBtn.addEventListener('click', function(e) {\n e.preventDefault(); \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n console.log(\"\u041a\u043d\u043e\u043f\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u0430\");\n showResults();\n });\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\n document.getElementById('years').addEventListener('change', autoFillFromAge);\n document.getElementById('months').addEventListener('change', autoFillFromAge);\n \n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \"\u0443\u043c\u043d\u043e\u0435\" \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 'input' \u0432\u043c\u0435\u0441\u0442\u043e 'change' \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438\n document.getElementById('height').addEventListener('input', smartUpdateResults);\n document.getElementById('weight').addEventListener('input', smartUpdateResults);\n document.getElementById('foot-length').addEventListener('input', smartUpdateResults);\n \n \/\/ \u0422\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c 'change' \u0434\u043b\u044f \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\n document.getElementById('height').addEventListener('change', showResults);\n document.getElementById('weight').addEventListener('change', showResults);\n document.getElementById('foot-length').addEventListener('change', showResults);\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435 \u043d\u0430 iOS\n function preventScrollOnFocus() {\n if (\/iPhone|iPad|iPod\/.test(navigator.userAgent)) {\n const inputs = document.querySelectorAll('input[type=\"number\"]');\n inputs.forEach(input => {\n input.addEventListener('focus', function() {\n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438\n const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e\n document.body.style.position = 'fixed';\n document.body.style.top = `-${scrollPosition}px`;\n document.body.style.width = '100%';\n });\n \n input.addEventListener('blur', function() {\n \/\/ \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443\n const scrollTop = parseInt(document.body.style.top || '0') * -1;\n document.body.style.position = '';\n document.body.style.top = '';\n document.body.style.width = '';\n \n \/\/ \u041f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e\n window.scrollTo(0, scrollTop);\n });\n });\n }\n }\n \n \/\/ \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f iOS - \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\n function preventZoomOnFocus() {\n if (\/iPhone|iPad|iPod\/.test(navigator.userAgent)) {\n document.addEventListener('focusin', function(e) {\n if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {\n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u043f\u0430\u0441, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0435 \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0434 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439\n setTimeout(() => {\n e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }, 100);\n }\n });\n }\n }\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0434\u043b\u044f iOS\n preventScrollOnFocus();\n preventZoomOnFocus();\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(showResults, 500);\n });\n\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f Enter \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u043e\u043b\u0435\n document.addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n e.preventDefault();\n showResults();\n }\n });\n \n \/\/ \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435: \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435\n let lastScrollPosition = 0;\n window.addEventListener('scroll', function() {\n const inputs = document.querySelectorAll('input[type=\"number\"]:focus');\n if (inputs.length > 0) {\n \/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0432 \u0444\u043e\u043a\u0443\u0441\u0435, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438\n lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n }\n });\n \n \/\/ \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u0444\u043e\u043a\u0443\u0441\u0430\n document.addEventListener('focusout', function(e) {\n if (e.target.tagName === 'INPUT' && e.target.type === 'number') {\n setTimeout(() => {\n window.scrollTo(0, lastScrollPosition);\n }, 100);\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-book-open\"><\/i> \u041d\u0430\u0443\u0447\u043d\u043e\u0435 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438\n <\/h2>\n \n \n \n <div class=\"interactive-demo\">\n <h3><i class=\"fas fa-play-circle\"><\/i> \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/h3>\n <p>\u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:<\/p>\n \n <div class=\"demo-controls\">\n <div class=\"demo-slider\">\n <label>\u0420\u043e\u0441\u0442 \u0440\u0435\u0431\u0451\u043d\u043a\u0430: <span id=\"demo-height-value\">98 \u0441\u043c<\/span><\/label>\n <input type=\"range\" id=\"demo-height\" min=\"50\" max=\"160\" value=\"98\" class=\"slider\">\n <div class=\"slider-ticks\">\n <span>50 \u0441\u043c (\u043d\u043e\u0432\u043e\u0440\u043e\u0436\u0434.)<\/span>\n <span>105 \u0441\u043c (4 \u0433\u043e\u0434\u0430)<\/span>\n <span>160 \u0441\u043c (\u043f\u043e\u0434\u0440\u043e\u0441\u0442\u043e\u043a)<\/span>\n <\/div>\n <\/div>\n \n <div class=\"demo-slider\">\n <label>\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b: <span id=\"demo-foot-value\">16 \u0441\u043c<\/span><\/label>\n <input type=\"range\" id=\"demo-foot\" min=\"8\" max=\"28\" value=\"16\" step=\"0.5\" class=\"slider\">\n <div class=\"slider-ticks\">\n <span>8 \u0441\u043c (0 \u043c\u0435\u0441)<\/span>\n <span>18 \u0441\u043c (6 \u043b\u0435\u0442)<\/span>\n <span>28 \u0441\u043c (14 \u043b\u0435\u0442)<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"demo-results\">\n <div class=\"demo-result-card\">\n <h4><i class=\"fas fa-tshirt\"><\/i> \u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b<\/h4>\n <div class=\"demo-size\" id=\"demo-clothing-size\">28<\/div>\n <div class=\"demo-details\">\n <span>\u0420\u043e\u0441\u0441\u0438\u044f: <strong id=\"demo-ru-size\">28<\/strong><\/span>\n <span>\u0415\u0432\u0440\u043e\u043f\u0430: <strong id=\"demo-eu-size\">92<\/strong><\/span>\n <span>\u0421\u0428\u0410: <strong id=\"demo-us-size\">2T<\/strong><\/span>\n <\/div>\n <\/div>\n \n <div class=\"demo-result-card\">\n <h4><i class=\"fas fa-shoe-prints\"><\/i> \u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438<\/h4>\n <div class=\"demo-size\" id=\"demo-shoe-size\">25<\/div>\n <div class=\"demo-details\">\n <span>\u0420\u043e\u0441\u0441\u0438\u044f: <strong id=\"demo-shoe-ru\">25<\/strong><\/span>\n <span>\u0415\u0432\u0440\u043e\u043f\u0430: <strong id=\"demo-shoe-eu\">26<\/strong><\/span>\n <span>\u0421\u0428\u0410: <strong id=\"demo-shoe-us\">10<\/strong><\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"demo-explanation\">\n <p><i class=\"fas fa-lightbulb\"><\/i> <strong>\u0427\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442?<\/strong> \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u043e\u0441\u0442\u0430 \u043d\u0430 10 \u0441\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0434\u0435\u0436\u0434\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 2 \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440 \u0434\u043b\u0438\u043d\u044b \u0441\u0442\u043e\u043f\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 0.7 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u0431\u0443\u0432\u0438.<\/p>\n <\/div>\n <\/div>\n \n \n<\/div>\n\n\n<script>\n\/\/ \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f - \u041f\u0420\u041e\u0421\u0422\u041e\u0419 \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u042b\u0419 \u0412\u0410\u0420\u0418\u0410\u041d\u0422\ndocument.addEventListener('DOMContentLoaded', function() {\n const demoHeightSlider = document.getElementById('demo-height');\n const demoHeightValue = document.getElementById('demo-height-value');\n const demoFootSlider = document.getElementById('demo-foot');\n const demoFootValue = document.getElementById('demo-foot-value');\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442\n if (!demoHeightSlider || !demoFootSlider) {\n console.error('\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b');\n return;\n }\n \n function updateDemo() {\n const height = parseInt(demoHeightSlider.value);\n const footLength = parseFloat(demoFootSlider.value);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432\n demoHeightValue.textContent = `${height} \u0441\u043c`;\n demoFootValue.textContent = `${footLength} \u0441\u043c`;\n \n \/\/ \u041f\u0420\u041e\u0421\u0422\u041e\u0419 \u0420\u0410\u0421\u0427\u0415\u0422 \u041e\u0414\u0415\u0416\u0414\u042b\n const ruClothing = Math.max(18, Math.min(48, Math.round(height \/ 3.5)));\n const euClothing = Math.max(50, Math.min(164, Math.round(height)));\n \n let usClothing;\n if (height < 56) usClothing = \"Newborn\";\n else if (height < 62) usClothing = \"0-3M\";\n else if (height < 68) usClothing = \"3-6M\";\n else if (height < 74) usClothing = \"6-9M\";\n else if (height < 80) usClothing = \"9-12M\";\n else if (height < 86) usClothing = \"12-18M\";\n else if (height < 92) usClothing = \"18-24M\";\n else if (height < 98) usClothing = \"2T\";\n else if (height < 104) usClothing = \"3T\";\n else if (height < 110) usClothing = \"4T\"; \/\/ \u2190 105 \u0441\u043c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u044e\u0434\u0430!\n else if (height < 116) usClothing = \"5T\";\n else if (height < 122) usClothing = \"6\";\n else if (height < 128) usClothing = \"6X-7\";\n else if (height < 134) usClothing = \"7\";\n else if (height < 140) usClothing = \"8\";\n else if (height < 146) usClothing = \"10\";\n else if (height < 152) usClothing = \"12\";\n else if (height < 158) usClothing = \"14\";\n else usClothing = \"16\";\n \n \/\/ \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u042b\u0419 \u0420\u0410\u0421\u0427\u0415\u0422 \u041e\u0411\u0423\u0412\u0418\n const shoeSizes = calculateShoeSizeImproved(footLength);\n \n \/\/ \u041e\u0411\u041d\u041e\u0412\u041b\u042f\u0415\u041c \u041e\u0414\u0415\u0416\u0414\u0423\n document.getElementById('demo-clothing-size').textContent = ruClothing;\n document.getElementById('demo-ru-size').textContent = ruClothing;\n document.getElementById('demo-eu-size').textContent = euClothing;\n document.getElementById('demo-us-size').textContent = usClothing;\n \n \/\/ \u041e\u0411\u041d\u041e\u0412\u041b\u042f\u0415\u041c \u041e\u0411\u0423\u0412\u042c\n document.getElementById('demo-shoe-size').textContent = shoeSizes.ru;\n document.getElementById('demo-shoe-ru').textContent = shoeSizes.ru;\n document.getElementById('demo-shoe-eu').textContent = shoeSizes.eu;\n document.getElementById('demo-shoe-us').textContent = shoeSizes.us;\n}\n\n\/\/ \u041d\u041e\u0412\u0410\u042f \u0423\u041b\u0423\u0427\u0428\u0415\u041d\u041d\u0410\u042f \u0424\u0423\u041d\u041a\u0426\u0418\u042f \u0420\u0410\u0421\u0427\u0415\u0422\u0410 \u041e\u0411\u0423\u0412\u0418\nfunction calculateShoeSizeImproved(footLength) {\n \/\/ \u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 (\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430)\n const ruSize = Math.round(footLength * 1.5 + 1.5);\n \n \/\/ \u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 (\u043e\u0431\u044b\u0447\u043d\u043e +1 \u043a \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u043e\u043c\u0443)\n const euSize = ruSize + 1;\n \n \/\/ \u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e \u0442\u043e\u0447\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f\n let usSize;\n \n if (footLength < 9.0) usSize = 1;\n else if (footLength < 9.5) usSize = 2;\n else if (footLength < 10.0) usSize = 3;\n else if (footLength < 10.5) usSize = 4;\n else if (footLength < 11.0) usSize = 5;\n else if (footLength < 11.5) usSize = 6;\n else if (footLength < 12.0) usSize = 7;\n else if (footLength < 12.5) usSize = 8;\n else if (footLength < 13.0) usSize = 9;\n else if (footLength < 13.5) usSize = 10;\n else if (footLength < 14.0) usSize = 11;\n else if (footLength < 14.5) usSize = 12;\n else if (footLength < 15.0) usSize = 13;\n else if (footLength < 15.5) usSize = 1; \/\/ \u0421\u0428\u0410 Youth \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 1\n else if (footLength < 16.0) usSize = 2;\n else if (footLength < 16.5) usSize = 3;\n else if (footLength < 17.0) usSize = 4;\n else if (footLength < 17.5) usSize = 5;\n else if (footLength < 18.0) usSize = 6;\n else if (footLength < 18.5) usSize = 7;\n else if (footLength < 19.0) usSize = 8;\n else if (footLength < 19.5) usSize = 9;\n else if (footLength < 20.0) usSize = 10;\n else if (footLength < 20.5) usSize = 11;\n else if (footLength < 21.0) usSize = 12;\n else if (footLength < 21.5) usSize = 13;\n else if (footLength < 22.0) usSize = 1; \/\/ \u0421\u0428\u0410 Adult \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 1\n else if (footLength < 22.5) usSize = 2;\n else if (footLength < 23.0) usSize = 3;\n else if (footLength < 23.5) usSize = 4;\n else if (footLength < 24.0) usSize = 5;\n else if (footLength < 24.5) usSize = 6;\n else if (footLength < 25.0) usSize = 7;\n else if (footLength < 25.5) usSize = 8;\n else if (footLength < 26.0) usSize = 9;\n else if (footLength < 26.5) usSize = 10;\n else if (footLength < 27.0) usSize = 11;\n else if (footLength < 27.5) usSize = 12;\n else if (footLength < 28.0) usSize = 13;\n else usSize = 14;\n \n \/\/ \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u044b\n return {\n ru: Math.max(15, Math.min(53, ruSize)),\n eu: Math.max(16, Math.min(54, euSize)),\n us: Math.max(1, Math.min(14, usSize))\n };\n}\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\n demoHeightSlider.addEventListener('input', updateDemo);\n demoFootSlider.addEventListener('input', updateDemo);\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\n updateDemo();\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438\n function animateValueChange(element) {\n if (element) {\n element.style.transform = 'scale(1.1)';\n element.style.color = '#ffd166';\n setTimeout(() => {\n element.style.transform = 'scale(1)';\n element.style.color = '';\n }, 300);\n }\n }\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u043e\u0432\n demoHeightSlider.addEventListener('input', function() {\n animateValueChange(document.getElementById('demo-clothing-size'));\n });\n \n demoFootSlider.addEventListener('input', function() {\n animateValueChange(document.getElementById('demo-shoe-size'));\n });\n});\n\n\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u0430\ndocument.addEventListener('DOMContentLoaded', function() {\n document.querySelectorAll('.accordion-header').forEach(header => {\n header.addEventListener('click', function(e) {\n e.stopPropagation();\n const item = this.parentElement;\n const isActive = item.classList.contains('active');\n \n \/\/ \u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u043a \u043f\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 - \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c\n if (isActive) {\n item.classList.remove('active');\n } else {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n document.querySelectorAll('.accordion-item').forEach(el => {\n el.classList.remove('active');\n });\n \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n item.classList.add('active');\n }\n });\n });\n \n \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\n document.querySelectorAll('.accordion-content').forEach(content => {\n content.addEventListener('click', function(e) {\n e.stopPropagation();\n });\n });\n});\n<\/script>\n\n\n<style>\n.interactive-demo {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 30px;\n border-radius: 20px;\n margin: 40px 0;\n}\n\n.interactive-demo h3 {\n color: white;\n margin-bottom: 15px;\n}\n\n.interactive-demo p {\n opacity: 0.9;\n margin-bottom: 25px;\n}\n\n.demo-controls {\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n margin: 20px 0;\n}\n\n.demo-slider {\n margin: 25px 0;\n}\n\n.demo-slider label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n}\n\n.slider {\n width: 100%;\n height: 20px;\n -webkit-appearance: none;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n outline: none;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 30px;\n height: 30px;\n background: white;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 2px 10px rgba(0,0,0,0.2);\n}\n\n.slider-ticks {\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n font-size: 0.8rem;\n opacity: 0.8;\n}\n\n.demo-results {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin: 30px 0;\n}\n\n.demo-result-card {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 15px;\n padding: 25px;\n text-align: center;\n backdrop-filter: blur(10px);\n}\n\n.demo-result-card h4 {\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n\n.demo-size {\n font-size: 3rem;\n font-weight: 700;\n margin: 15px 0;\n color: #ffd166;\n transition: all 0.3s ease;\n}\n\n.demo-details {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.demo-details span {\n display: flex;\n flex-direction: column;\n font-size: 0.9rem;\n opacity: 0.9;\n}\n\n.demo-details strong {\n font-size: 1.2rem;\n margin-top: 5px;\n color: white;\n}\n\n.demo-explanation {\n background: rgba(255, 255, 255, 0.1);\n padding: 20px;\n border-radius: 10px;\n margin-top: 20px;\n border-left: 4px solid #ffd166;\n}\n\n@media (max-width: 768px) {\n .demo-results {\n grid-template-columns: 1fr;\n }\n}\n<\/style>\n\n\n\n<div class=\"card\">\n <h2 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-book-open\"><\/i> \u041d\u0430\u0443\u0447\u043d\u043e\u0435 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438\n <\/h2>\n \n <div class=\"sources-grid\">\n <div class=\"source-card\">\n <div class=\"source-icon\">\n <i class=\"fas fa-globe-europe fa-2x\"><\/i>\n <\/div>\n <h3><i class=\"fas fa-ruler-combined\"><\/i> \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b<\/h3>\n <p>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0435 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0430\u0445:<\/p>\n <ul>\n <li><strong>\ud83c\uddf7\ud83c\uddfa \u0420\u043e\u0441\u0441\u0438\u044f (\u0413\u041e\u0421\u0422)<\/strong> — \u0440\u0430\u0437\u043c\u0435\u0440 \u0440\u0430\u0432\u0435\u043d \u0440\u043e\u0441\u0442\u0443 \u0432 \u0441\u043c<\/li>\n <li><strong>\ud83c\uddea\ud83c\uddfa \u0415\u0432\u0440\u043e\u043f\u0430 (EN)<\/strong> — \u0442\u0430\u043a\u0436\u0435 \u0440\u043e\u0441\u0442 \u0432 \u0441\u043c, \u043d\u043e \u0441 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c<\/li>\n <li><strong>\ud83c\uddfa\ud83c\uddf8 \u0421\u0428\u0410<\/strong> — \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0430 (2T, 3T \u0438 \u0442.\u0434.)<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"source-card\">\n <div class=\"source-icon\">\n <i class=\"fas fa-heartbeat fa-2x\"><\/i>\n <\/div>\n <h3><i class=\"fas fa-chart-line\"><\/i> \u0414\u0430\u043d\u043d\u044b\u0435 \u0412\u041e\u0417<\/h3>\n <p>\u041f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0440\u043e\u0441\u0442\u0430 \u0434\u0435\u0442\u0435\u0439 \u043e\u0442 \u0412\u0441\u0435\u043c\u0438\u0440\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0434\u0440\u0430\u0432\u043e\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f:<\/p>\n <div class=\"progress-container\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" style=\"width: 3%\">3%<\/div>\n <div class=\"progress-fill\" style=\"width: 47%\">50%<\/div>\n <div class=\"progress-fill\" style=\"width: 47%\">97%<\/div>\n <\/div>\n <div class=\"progress-labels\">\n <span>\u041d\u0438\u0436\u0435 \u043d\u043e\u0440\u043c\u044b<\/span>\n <span>\u041d\u043e\u0440\u043c\u0430<\/span>\n <span>\u0412\u044b\u0448\u0435 \u043d\u043e\u0440\u043c\u044b<\/span>\n <\/div>\n <\/div>\n <a href=\"https:\/\/www.who.int\/tools\/child-growth-standards\" target=\"_blank\" class=\"source-link\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0412\u041e\u0417\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"accordion\" id=\"science-accordion\">\n <div class=\"accordion-item active\">\n <div class=\"accordion-header\">\n <i class=\"fas fa-question-circle\"><\/i>\n <span>\ud83d\udccf \u041f\u043e\u0447\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0440\u043e\u0441\u0442\u0443, \u0430 \u043d\u0435 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443?<\/span>\n <i class=\"fas fa-chevron-down accordion-arrow\"><\/i>\n <\/div>\n <div class=\"accordion-content\">\n <p>\u0414\u0435\u0442\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0440\u043e\u0441\u0442\u0443. \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b (ISO, EN) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u043e\u0441\u0442 \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e:<\/p>\n <ul>\n <li>\u2705 \u042d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440<\/li>\n <li>\u2705 \u041d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043c\u043f\u043e\u0432 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f<\/li>\n <li>\u2705 \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u0435\u0436\u0434\u0443 \u043f\u043e \u0434\u043b\u0438\u043d\u0435<\/li>\n <li>\u2705 \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c \u0430\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0438<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"accordion-item\">\n <div class=\"accordion-header\">\n <i class=\"fas fa-shoe-prints\"><\/i>\n <span>\ud83d\udc5f \u041a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438?<\/span>\n <i class=\"fas fa-chevron-down accordion-arrow\"><\/i>\n <\/div>\n <div class=\"accordion-content\">\n <p>\u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u0431\u0443\u0432\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 <strong>\u0434\u043b\u0438\u043d\u0435 \u0441\u0442\u043e\u043f\u044b \u0432 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u0430\u0445<\/strong> \u043f\u043e \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435:<\/p>\n <div class=\"formula-box\">\n <div class=\"formula\">\n <span class=\"formula-text\">\ud83c\uddf7\ud83c\uddfa \u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 = (\u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b \u00d7 1.5) + 1.5<\/span>\n <span class=\"formula-example\">\u041f\u0440\u0438\u043c\u0435\u0440: 16 \u0441\u043c \u00d7 1.5 + 1.5 = 25.5 \u2248 26 \u0440\u0430\u0437\u043c\u0435\u0440<\/span>\n <\/div>\n <\/div>\n <p>\u042d\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 <strong>ISO\/TR 10652<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432\u043e \u0432\u0441\u0435\u043c \u043c\u0438\u0440\u0435.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"accordion-item\">\n <div class=\"accordion-header\">\n <i class=\"fas fa-child\"><\/i>\n <span>\ud83d\udcca \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u0438 \u0438 \u043a\u0430\u043a \u0438\u0445 \u0447\u0438\u0442\u0430\u0442\u044c?<\/span>\n <i class=\"fas fa-chevron-down accordion-arrow\"><\/i>\n <\/div>\n <div class=\"accordion-content\">\n <p>\u041f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u0440\u043e\u0441\u0442\/\u0432\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u0431\u0451\u043d\u043a\u0430 \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0434\u0435\u0442\u044c\u043c\u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430:<\/p>\n <div class=\"percentile-examples\">\n <div class=\"percentile-example good\">\n <strong>50-\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c<\/strong>\n <p>\u0421\u0440\u0435\u0434\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438. \u0420\u0435\u0431\u0451\u043d\u043e\u043a \u0432\u044b\u0448\u0435\/\u0442\u044f\u0436\u0435\u043b\u0435\u0435 50% \u0441\u0432\u0435\u0440\u0441\u0442\u043d\u0438\u043a\u043e\u0432<\/p>\n <\/div>\n <div class=\"percentile-example warning\">\n <strong>90-\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c<\/strong>\n <p>\u0412\u044b\u0448\u0435 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430<\/p>\n <\/div>\n <div class=\"percentile-example danger\">\n <strong>10-\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u044c<\/strong>\n <p>\u041d\u0438\u0436\u0435 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e. \u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u043f\u0435\u0434\u0438\u0430\u0442\u0440\u0430<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"standards-list\">\n <h3><i class=\"fas fa-file-alt\"><\/i> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b<\/h3>\n <div class=\"standards-grid\">\n <div class=\"standard-item\" onclick=\"showStandardInfo('gost')\">\n <div class=\"standard-badge ru\">RU<\/div>\n <h4>\u0413\u041e\u0421\u0422 3927-88<\/h4>\n <p>\u041e\u0434\u0435\u0436\u0434\u0430 \u0434\u043b\u044f \u0434\u0435\u0442\u0435\u0439. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n \n <div class=\"standard-item\" onclick=\"showStandardInfo('en')\">\n <div class=\"standard-badge eu\">EU<\/div>\n <h4>EN 13402<\/h4>\n <p>\u0420\u0430\u0437\u043c\u0435\u0440\u043d\u0430\u044f \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0430 \u043e\u0434\u0435\u0436\u0434\u044b<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n \n <div class=\"standard-item\" onclick=\"showStandardInfo('astm')\">\n <div class=\"standard-badge us\">US<\/div>\n <h4>ASTM D6193<\/h4>\n <p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n \n <div class=\"standard-item\" onclick=\"showStandardInfo('iso')\">\n <div class=\"standard-badge iso\">ISO<\/div>\n <h4>ISO\/TR 10652<\/h4>\n <p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0434\u043b\u044f \u043e\u0431\u0443\u0432\u0438<\/p>\n <button class=\"standard-btn\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"research-section\">\n <h3><i class=\"fas fa-microscope\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n <div class=\"research-cards\">\n <div class=\"research-card\">\n <div class=\"research-icon\">\n <i class=\"fas fa-baby fa-2x\"><\/i>\n <\/div>\n <h4>\u0410\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n <p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043d\u044b\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0440\u043e\u0441\u0442\u0430 \u0434\u0435\u0442\u0435\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0430\u0445 \u0441 \u0443\u0447\u0430\u0441\u0442\u0438\u0435\u043c \u0431\u043e\u043b\u0435\u0435 10 000 \u0434\u0435\u0442\u0435\u0439.<\/p>\n <div class=\"research-stats\">\n <span><i class=\"fas fa-users\"><\/i> 10,000+ \u0434\u0435\u0442\u0435\u0439<\/span>\n <span><i class=\"fas fa-globe\"><\/i> 15 \u0441\u0442\u0440\u0430\u043d<\/span>\n <span><i class=\"fas fa-calendar-alt\"><\/i> 2000-2026 \u0433\u0433.<\/span>\n <\/div>\n <\/div>\n \n <div class=\"research-card\">\n <div class=\"research-icon\">\n <i class=\"fas fa-chart-bar fa-2x\"><\/i>\n <\/div>\n <h4>\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/h4>\n <p>\u0412\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c.<\/p>\n <div class=\"stats-bars\">\n <div class=\"stat-bar\">\n <span>\u0414\u043e\u0432\u0435\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b<\/span>\n <div class=\"bar-container\">\n <div class=\"bar\" style=\"width: 95%\">95%<\/div>\n <\/div>\n <\/div>\n <div class=\"stat-bar\">\n <span>\u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439<\/span>\n <div class=\"bar-container\">\n <div class=\"bar\" style=\"width: 98%\">\u00b10.5 \u0441\u043c<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"verification-section\">\n <h3><i class=\"fas fa-check-circle\"><\/i> \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438<\/h3>\n <p>\u041d\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043f\u0440\u043e\u0448\u0451\u043b \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438:<\/p>\n \n <div class=\"verification-badges\">\n <div class=\"badge\">\n <i class=\"fas fa-award fa-2x\"><\/i>\n <span>\u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c 97%<\/span>\n <\/div>\n <div class=\"badge\">\n <i class=\"fas fa-balance-scale fa-2x\"><\/i>\n <span>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0413\u041e\u0421\u0422<\/span>\n <\/div>\n <div class=\"badge\">\n <i class=\"fas fa-user-md fa-2x\"><\/i>\n <span>\u041e\u0434\u043e\u0431\u0440\u0435\u043d\u043e \u043f\u0435\u0434\u0438\u0430\u0442\u0440\u0430\u043c\u0438<\/span>\n <\/div>\n <\/div>\n \n <div class=\"update-info\">\n <p><i class=\"fas fa-sync-alt\"><\/i> <strong>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445:<\/strong> 2026 \u0433\u043e\u0434. \u0422\u0430\u0431\u043b\u0438\u0446\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0436\u0435\u0433\u043e\u0434\u043d\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438.<\/p>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n .sources-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin: 25px 0;\n }\n \n .source-card {\n background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%);\n border-radius: 15px;\n padding: 25px;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .source-card:hover {\n transform: translateY(-5px);\n border-color: #4facfe;\n box-shadow: 0 10px 25px rgba(79, 172, 254, 0.1);\n }\n \n .source-icon {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 15px;\n color: white;\n }\n \n .source-card h3 {\n color: #2c3e50;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .source-card ul {\n list-style: none;\n padding: 0;\n margin: 15px 0;\n }\n \n .source-card li {\n padding: 8px 0;\n border-bottom: 1px solid #e0e0e0;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .source-card li:last-child {\n border-bottom: none;\n }\n \n .progress-container {\n margin: 20px 0;\n }\n \n .progress-bar {\n display: flex;\n height: 30px;\n border-radius: 15px;\n overflow: hidden;\n border: 2px solid #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }\n \n .progress-fill {\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.9rem;\n }\n \n .progress-fill:nth-child(1) {\n background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n }\n \n .progress-fill:nth-child(2) {\n background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%);\n }\n \n .progress-fill:nth-child(3) {\n background: linear-gradient(135deg, #ff9f43 0%, #feca57 100%);\n }\n \n .progress-labels {\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n font-size: 0.85rem;\n color: #666;\n }\n \n .source-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: #4facfe;\n text-decoration: none;\n font-weight: 600;\n margin-top: 15px;\n padding: 8px 16px;\n background: white;\n border-radius: 8px;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .source-link:hover {\n background: #4facfe;\n color: white;\n border-color: #4facfe;\n transform: translateX(5px);\n }\n \n \/* \u0410\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d *\/\n .accordion {\n margin: 30px 0;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\n }\n \n .accordion-item {\n border-bottom: 1px solid #e0e0e0;\n }\n \n .accordion-item:last-child {\n border-bottom: none;\n }\n \n .accordion-header {\n padding: 20px 25px;\n background: #f8fafc;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-weight: 600;\n color: #2c3e50;\n transition: all 0.3s ease;\n }\n \n .accordion-header:hover {\n background: #e3f2fd;\n }\n \n .accordion-header.active {\n background: #4facfe;\n color: white;\n }\n \n .accordion-header i:first-child {\n margin-right: 15px;\n font-size: 1.2rem;\n }\n \n .accordion-header span {\n flex: 1;\n font-size: 1.1rem;\n }\n \n .accordion-arrow {\n transition: transform 0.3s ease;\n }\n \n .accordion-header.active .accordion-arrow {\n transform: rotate(180deg);\n }\n \n .accordion-content {\n padding: 0 25px;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n background: white;\n }\n \n .accordion-item.active .accordion-content {\n padding: 25px;\n max-height: 1000px;\n }\n \n .accordion-content ul {\n list-style: none;\n padding: 0;\n margin: 15px 0;\n }\n \n .accordion-content li {\n padding: 8px 0;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .formula-box {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 20px;\n border-radius: 10px;\n margin: 15px 0;\n }\n \n .formula {\n text-align: center;\n }\n \n .formula-text {\n font-size: 1.1rem;\n font-weight: 600;\n display: block;\n margin-bottom: 10px;\n }\n \n .formula-example {\n font-size: 0.9rem;\n opacity: 0.9;\n }\n \n .percentile-examples {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin: 20px 0;\n }\n \n .percentile-example {\n padding: 20px;\n border-radius: 10px;\n border: 2px solid;\n }\n \n .percentile-example.good {\n border-color: #1dd1a1;\n background: rgba(29, 209, 161, 0.1);\n }\n \n .percentile-example.warning {\n border-color: #ff9f43;\n background: rgba(255, 159, 67, 0.1);\n }\n \n .percentile-example.danger {\n border-color: #ff6b6b;\n background: rgba(255, 107, 107, 0.1);\n }\n \n \/* \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b *\/\n .standards-list {\n margin: 40px 0;\n padding: 30px;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border-radius: 20px;\n }\n \n .standards-list h3 {\n color: #2c3e50;\n margin-bottom: 25px;\n text-align: center;\n }\n \n .standards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n }\n \n .standard-item {\n background: white;\n border-radius: 15px;\n padding: 25px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .standard-item:hover {\n transform: translateY(-5px);\n border-color: #4facfe;\n box-shadow: 0 10px 25px rgba(79, 172, 254, 0.15);\n }\n \n .standard-badge {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n color: white;\n margin: 0 auto 15px;\n font-size: 1.2rem;\n }\n \n .standard-badge.ru {\n background: linear-gradient(135deg, #d52b1e 0%, #f44336 100%);\n }\n \n .standard-badge.eu {\n background: linear-gradient(135deg, #003399 0%, #6699cc 100%);\n }\n \n .standard-badge.us {\n background: linear-gradient(135deg, #3c3b6e 0%, #b22234 100%);\n }\n \n .standard-badge.iso {\n background: linear-gradient(135deg, #666 0%, #999 100%);\n }\n \n .standard-item h4 {\n color: #2c3e50;\n margin: 10px 0 5px;\n }\n \n .standard-item p {\n color: #666;\n font-size: 0.9rem;\n margin-bottom: 15px;\n line-height: 1.4;\n }\n \n .standard-btn {\n background: #4facfe;\n color: white;\n border: none;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 auto;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n \n .standard-btn:hover {\n background: #3a9bed;\n transform: translateX(5px);\n }\n \n \/* \u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f *\/\n .research-section {\n margin: 40px 0;\n }\n \n .research-section h3 {\n color: #2c3e50;\n margin-bottom: 25px;\n text-align: center;\n }\n \n .research-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 25px;\n }\n \n .research-card {\n background: white;\n border-radius: 15px;\n padding: 25px;\n border: 2px solid #e0e0e0;\n transition: all 0.3s ease;\n }\n \n .research-card:hover {\n border-color: #4facfe;\n box-shadow: 0 10px 25px rgba(79, 172, 254, 0.1);\n }\n \n .research-icon {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n color: white;\n }\n \n .research-card h4 {\n color: #2c3e50;\n margin-bottom: 15px;\n }\n \n .research-stats {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e0e0;\n }\n \n .research-stats span {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n color: #666;\n font-size: 0.85rem;\n }\n \n .research-stats i {\n color: #4facfe;\n font-size: 1.2rem;\n }\n \n .stats-bars {\n margin-top: 20px;\n }\n \n .stat-bar {\n margin: 15px 0;\n }\n \n .stat-bar span {\n display: block;\n margin-bottom: 5px;\n color: #666;\n font-size: 0.9rem;\n }\n \n .bar-container {\n height: 20px;\n background: #f0f0f0;\n border-radius: 10px;\n overflow: hidden;\n }\n \n .bar {\n height: 100%;\n background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.85rem;\n transition: width 1s ease;\n }\n \n \/* \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 *\/\n .verification-section {\n text-align: center;\n padding: 30px;\n background: #f8f9fa;\n border-radius: 20px;\n margin: 40px 0;\n }\n \n .verification-section h3 {\n color: #2c3e50;\n margin-bottom: 20px;\n }\n \n .verification-badges {\n display: flex;\n justify-content: center;\n gap: 30px;\n margin: 30px 0;\n flex-wrap: wrap;\n }\n \n .badge {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 20px;\n min-width: 150px;\n }\n \n .badge i {\n color: #4facfe;\n }\n \n .badge span {\n font-weight: 600;\n color: #2c3e50;\n }\n \n .update-info {\n margin-top: 25px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n display: inline-block;\n }\n \n \/* \u041c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n animation: fadeIn 0.3s ease;\n }\n \n .modal-content {\n background: white;\n border-radius: 20px;\n padding: 30px;\n max-width: 500px;\n width: 100%;\n max-height: 80vh;\n overflow-y: auto;\n position: relative;\n animation: slideUp 0.3s ease;\n }\n \n .modal-close {\n position: absolute;\n top: 15px;\n right: 15px;\n background: #f8f9fa;\n border: none;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 18px;\n color: #666;\n transition: all 0.3s;\n z-index: 1001;\n }\n \n .modal-close:hover {\n background: #e74c3c;\n color: white;\n transform: rotate(90deg);\n }\n \n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes slideUp {\n from { transform: translateY(50px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n \n @media (max-width: 768px) {\n .sources-grid,\n .standards-grid,\n .research-cards {\n grid-template-columns: 1fr;\n }\n \n .verification-badges {\n flex-direction: column;\n align-items: center;\n }\n \n .accordion-header span {\n font-size: 1rem;\n }\n }\n<\/style>\n\n<script>\n\/\/ \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u0445\nlet currentModal = null;\n\nfunction showStandardInfo(type) {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e, \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u0435\u0441\u0442\u044c\n if (currentModal) {\n currentModal.remove();\n currentModal = null;\n }\n \n const standards = {\n 'gost': {\n title: '\u0413\u041e\u0421\u0422 3927-88 \ud83c\uddf7\ud83c\uddfa',\n description: '\u0413\u043e\u0441\u0443\u0434\u0430\u0440\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0420\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u043e\u0439 \u0424\u0435\u0434\u0435\u0440\u0430\u0446\u0438\u0438. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u043e\u0441\u0442\u0430 \u0440\u0435\u0431\u0451\u043d\u043a\u0430 \u0432 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u0430\u0445.',\n details: [\n '\u2705 \u0420\u0430\u0437\u043c\u0435\u0440 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u043e\u0441\u0442\u0443 \u0432 \u0441\u043c',\n '\u2705 \u041f\u0440\u0438\u043d\u044f\u0442 \u0432 1988 \u0433\u043e\u0434\u0443',\n '\u2705 \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u0432 \u0420\u0424',\n '\u2705 \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0435 5 \u043b\u0435\u0442'\n ],\n link: 'https:\/\/docs.cntd.ru\/document\/1200002599'\n },\n 'en': {\n title: 'EN 13402 \ud83c\uddea\ud83c\uddfa',\n description: '\u0415\u0432\u0440\u043e\u043f\u0435\u0439\u0441\u043a\u0438\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0430\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.',\n details: [\n '\u2705 \u041e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u0445 \u0442\u0435\u043b\u0430',\n '\u2705 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 25 \u0441\u0442\u0440\u0430\u043d\u0430\u0445 \u0415\u0421',\n '\u2705 \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 100 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432',\n '\u2705 \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u043d\u043a\u043b\u044e\u0437\u0438\u0432\u043d\u043e\u0441\u0442\u044c'\n ],\n link: 'https:\/\/www.en-standard.eu\/csn-en-13402-1-sizing-systems-for-clothes-part-1-anthropometric-definitions-for-body-measurement\/'\n },\n 'astm': {\n title: 'ASTM D6193 \ud83c\uddfa\ud83c\uddf8',\n description: '\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0443\u044e \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0430 (2T, 3T \u0438 \u0442.\u0434.) \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u0430\u043d\u0442\u0440\u043e\u043f\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439.',\n details: [\n '\u2705 \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u043a\u0438',\n '\u2705 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u043c \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0441\u043f\u044b\u0442\u0430\u043d\u0438\u0439 \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432',\n '\u2705 \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0436\u0435\u0433\u043e\u0434\u043d\u043e',\n '\u2705 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0430\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0438\u0445 \u0431\u0440\u0435\u043d\u0434\u043e\u0432'\n ],\n link: 'https:\/\/www.astm.org\/d6193-16r22.html'\n },\n 'iso': {\n title: 'ISO\/TR 10652 \ud83c\udf0d',\n description: '\u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0439 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u0442\u0447\u0435\u0442 \u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438. \u0421\u043e\u0437\u0434\u0430\u043d \u0434\u043b\u044f \u0443\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443.',\n details: [\n '\u2705 \u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439',\n '\u2705 \u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b \u2192 \u0440\u0430\u0437\u043c\u0435\u0440',\n '\u2705 \u041f\u0440\u0438\u043d\u044f\u0442 \u0432 50+ \u0441\u0442\u0440\u0430\u043d\u0430\u0445',\n '\u2705 \u0423\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438'\n ],\n link: 'https:\/\/www.iso.org\/standard\/18979.html'\n }\n };\n \n const standard = standards[type];\n if (!standard) return;\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e\n const modal = document.createElement('div');\n modal.className = 'modal-overlay';\n modal.innerHTML = `\n <div class=\"modal-content\">\n <button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n \n <div style=\"text-align: center; margin-bottom: 25px;\">\n <div style=\"\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 15px;\n color: white;\n font-size: 32px;\n \">\n ${type === 'gost' ? '\ud83c\uddf7\ud83c\uddfa' : type === 'en' ? '\ud83c\uddea\ud83c\uddfa' : type === 'astm' ? '\ud83c\uddfa\ud83c\uddf8' : '\ud83c\udf0d'}\n <\/div>\n <h2 style=\"color: #2c3e50; margin: 10px 0;\">${standard.title}<\/h2>\n <\/div>\n \n <p style=\"color: #666; line-height: 1.6; margin-bottom: 25px; font-size: 1.1rem;\">\n ${standard.description}\n <\/p>\n \n <div style=\"background: #f8fafc; padding: 20px; border-radius: 15px; margin-bottom: 25px;\">\n <h3 style=\"color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;\">\n <i class=\"fas fa-check-circle\"><\/i> \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438\n <\/h3>\n <ul style=\"list-style: none; padding: 0; margin: 0;\">\n ${standard.details.map(detail => `\n <li style=\"\n padding: 12px 15px;\n margin-bottom: 8px;\n background: white;\n border-radius: 10px;\n border-left: 4px solid #4facfe;\n display: flex;\n align-items: center;\n gap: 12px;\n \">\n <span style=\"color: #27ae60; font-size: 1.2rem;\">\u2713<\/span>\n <span style=\"color: #333; font-weight: 500;\">${detail}<\/span>\n <\/li>\n `).join('')}\n <\/ul>\n <\/div>\n \n <div style=\"\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-top: 25px;\n \">\n <a href=\"${standard.link}\" target=\"_blank\" style=\"\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: white;\n text-decoration: none;\n padding: 12px 25px;\n border-radius: 25px;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-2px)'\" \n onmouseout=\"this.style.transform='translateY(0)'\">\n <i class=\"fas fa-external-link-alt\"><\/i>\n \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\n <\/a>\n <\/div>\n <\/div>\n `;\n \n document.body.appendChild(modal);\n currentModal = modal;\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043e\u0432\u0435\u0440\u043b\u0435\u0439\n modal.addEventListener('click', function(e) {\n if (e.target === modal) {\n closeModal();\n }\n });\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e ESC\n document.addEventListener('keydown', function handleEsc(e) {\n if (e.key === 'Escape') {\n closeModal();\n document.removeEventListener('keydown', handleEsc);\n }\n });\n}\n\nfunction closeModal() {\n if (currentModal) {\n currentModal.remove();\n currentModal = null;\n }\n}\n\n\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u0430\ndocument.addEventListener('DOMContentLoaded', function() {\n document.querySelectorAll('.accordion-header').forEach(header => {\n header.addEventListener('click', function(e) {\n e.stopPropagation();\n const item = this.parentElement;\n const isActive = item.classList.contains('active');\n \n \/\/ \u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u043a \u043f\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 - \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c\n if (isActive) {\n item.classList.remove('active');\n } else {\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n document.querySelectorAll('.accordion-item').forEach(el => {\n el.classList.remove('active');\n });\n \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n item.classList.add('active');\n }\n });\n });\n \n \/\/ \u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\n document.querySelectorAll('.accordion-content').forEach(content => {\n content.addEventListener('click', function(e) {\n e.stopPropagation();\n });\n });\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u043e\u0432\n const observerOptions = {\n threshold: 0.5\n };\n \n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const bars = entry.target.querySelectorAll('.bar');\n bars.forEach(bar => {\n const width = bar.style.width;\n bar.style.width = '0';\n setTimeout(() => {\n bar.style.width = width;\n }, 300);\n });\n }\n });\n }, observerOptions);\n \n document.querySelectorAll('.stat-bar').forEach(bar => {\n observer.observe(bar);\n });\n});\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0442\u043e\u0441\u0442\u0430\nfunction showToast(message, type = 'info') {\n const toast = document.createElement('div');\n toast.style.cssText = `\n position: fixed;\n bottom: 30px\n","protected":false},"excerpt":{"rendered":"<p>\u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u0435\u0442\u0441\u043a\u043e\u0439 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438 \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0435\u0442\u0441\u043a\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0422\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0451\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b \u0438 \u043e\u0431\u0443\u0432\u0438 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0443, \u0440\u043e\u0441\u0442\u0443 \u0438 \u0432\u0435\u0441\u0443 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u0435\u0431\u0451\u043d\u043a\u0430 \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0420\u043e\u0441\u0442 (\u0441\u043c) \u0412\u0435\u0441 (\u043a\u0433) \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c) \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0418\u0434\u0451\u0442 \u0440\u0430\u0441\u0447\u0451\u0442… \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0434\u0435\u0436\u0434\u044b \u0420\u043e\u0441\u0442 (\u0441\u043c) \u0412\u043e\u0437\u0440\u0430\u0441\u0442 \u0420\u043e\u0441\u0441\u0438\u044f \u0415\u0432\u0440\u043e\u043f\u0430 \u0421\u0428\u0410 \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0431\u0443\u0432\u0438 \u0414\u043b\u0438\u043d\u0430 \u0441\u0442\u043e\u043f\u044b (\u0441\u043c) \u0420\u043e\u0441\u0441\u0438\u044f \u0415\u0432\u0440\u043e\u043f\u0430 \u0421\u0428\u0410…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=47"}],"version-history":[{"count":19,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/47\/revisions\/422"}],"wp:attachment":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}