\u0422\u0440\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u044f<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n max-width: 1400px;\n margin: 0 auto;\n padding: 1px;\n background-color: #f5f5f5;\n }\n\n .container {\n display: flex;\n gap: 5px;\n flex-wrap: wrap;\n }\n\n .field-wrapper {\n flex: 1;\n min-width: 300px;\n background: white;\n padding: 10px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .field-label {\n font-weight: bold;\n margin-bottom: 1px;\n\t\t\twidth: 400px;\n color: #333;\n }\n\n .text-field {\n width: 100%;\n height: 400px;\n padding: 10px;\n border: 2px solid #ddd;\n border-radius: 4px;\n font-family: 'Courier New', monospace;\n font-size: 14px;\n resize: vertical;\n overflow-y: scroll;\n box-sizing: border-box;\n }\n\n .text-field:focus {\n outline: none;\n border-color: #4CAF50;\n }\n\n h1 {\n text-align: center;\n color: #333;\n }\n\n\n\t\tdetails {\n\t\t\tflex-basis: 100%;\n\t\t\twidth: 100%;\n\t\t\tmin-width: 300px;\n\t\t}\n\n\t\tdetails .one {\n\t\t\tflex: none;\n\t\t\tmin-width: 300px;\n\t\t}\n\n\t\tdetails .field-wrapper {\n\t\t\tflex: 1;\n\t\t\tmin-width: 300px;\n\t\t}\n\n\t\tdetails[open] {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tgap: 5px;\n\t\t}\n\n\t\tdetails[open] summary {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin-bottom: 10px;\n\t\t}\n\n\n\t\t.summary-content-wrapper {\n\t\t display: flex;\n\t\t \/* \u0420\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 *\/\n\t\t justify-content: space-between; \n\t\t \/* \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 *\/\n\t\t align-items: center; \n\t\t \/* \u0417\u0430\u043d\u0438\u043c\u0430\u0435\u043c 100% \u0448\u0438\u0440\u0438\u043d\u044b, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 summary *\/\n\t\t width: 100%; \n\t\t}\n\n\t\t\/* \u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e: \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u043e\u043b\u044f *\/\n\t\t.summary-content-wrapper div {\n\t\t padding: 0 10px;\n\t\t}\n\n\t\t\/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 *\/\n\t\t.button-container {\n\t\t\ttext-align: center;\n\t\t\tmargin: 20px 0;\n\t\t\tflex-basis: 100%;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.create-table-btn {\n\t\t\tbackground-color: #4CAF50;\n\t\t\tcolor: white;\n\t\t\tpadding: 12px 24px;\n\t\t\tfont-size: 16px;\n\t\t\tborder: none;\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: background-color 0.3s;\n\t\t}\n\n\t\t.create-table-btn:hover {\n\t\t\tbackground-color: #45a049;\n\t\t}\n\n\t\t.copy-table-btn {\n\t\t\tbackground-color: #2196F3;\n\t\t\tcolor: white;\n\t\t\tpadding: 12px 24px;\n\t\t\tfont-size: 16px;\n\t\t\tborder: none;\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: background-color 0.3s;\n\t\t\tmargin-left: 10px;\n\t\t}\n\n\t\t.copy-table-btn:hover {\n\t\t\tbackground-color: #0b7dda;\n\t\t}\n\n\t\t\/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b *\/\n\t\t.table-container {\n\t\t\tmargin: 20px 0;\n\t\t\toverflow-x: auto;\n\t\t\tflex-basis: 100%;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.result-table {\n\t\t\twidth: 100%;\n\t\t\tborder-collapse: collapse;\n\t\t\tbackground: white;\n\t\t\tbox-shadow: 0 2px 4px rgba(0,0,0,0.1);\n\t\t}\n\n\t\t.result-table th,\n\t\t.result-table td {\n\t\t\tborder: 1px solid #ddd;\n\t\t\tpadding: 12px;\n\t\t\ttext-align: left;\n\t\t\tvertical-align: top;\n\t\t}\n\n\t\t.result-table th {\n\t\t\tbackground-color: #4CAF50;\n\t\t\tcolor: white;\n\t\t\tfont-weight: bold;\n\t\t}\n\n\t\t.result-table tr:nth-child(even) {\n\t\t\tbackground-color: #f9f9f9;\n\t\t}\n\n\t\t.result-table tr:hover {\n\t\t\tbackground-color: #f5f5f5;\n\t\t}\n\n\t\t.result-table td:first-child {\n\t\t\ttext-align: center;\n\t\t\tfont-weight: bold;\n\t\t\twidth: 60px;\n\t\t}\n\n\t\t\/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f *\/\n\t\t.wrap-buttons {\n\t\t\tdisplay: flex;\n\t\t\tgap: 10px;\n\t\t\tmargin: 15px 0;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t.wrap-btn {\n\t\t\tpadding: 10px 20px;\n\t\t\tfont-size: 14px;\n\t\t\tborder: 2px solid #333;\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: all 0.3s;\n\t\t\tfont-weight: bold;\n\t\t}\n\n\t\t.wrap-btn:hover {\n\t\t\ttransform: scale(1.05);\n\t\t\tbox-shadow: 0 2px 8px rgba(0,0,0,0.2);\n\t\t}\n\n\t\t.wrap-btn-1 {\n\t\t\tbackground-color: rgba(255, 0, 0, 0.2);\n\t\t\tcolor: rgb(139, 0, 0);\n\t\t\tborder-color: rgb(255, 0, 0);\n\t\t}\n\n\t\t.wrap-btn-2 {\n\t\t\tbackground-color: rgba(0, 128, 0, 0.2);\n\t\t\tcolor: rgb(0, 100, 0);\n\t\t\tborder-color: rgb(0, 128, 0);\n\t\t}\n\n\t\t.wrap-btn-3 {\n\t\t\tbackground-color: rgba(0, 0, 255, 0.2);\n\t\t\tcolor: rgb(0, 0, 139);\n\t\t\tborder-color: rgb(0, 0, 255);\n\t\t}\n\n\t\t.wrap-btn-4 {\n\t\t\tbackground-color: rgba(255, 165, 0, 0.2);\n\t\t\tcolor: rgb(255, 140, 0);\n\t\t\tborder-color: rgb(255, 165, 0);\n\t\t}\n\n\t\t\/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 *\/\n\t\t.result-table td {\n\t\t\tuser-select: text;\n\t\t\tcursor: text;\n\t\t}\n <\/style>\n \n <style id=\"dynamicStyles\"><\/style>\n<\/head>\n<body>\n <h1>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f<\/h1>\n \n <div class=\"container\">\n\t\t<details>\n\t\t<summary>CSS \u0441\u0442\u0438\u043b\u0438<\/summary>\n\t\t\t<div class=\"field-wrapper one\">\n\t\t\t\t<div class=\"field-label\">CSS \u0441\u0442\u0438\u043b\u0438<\/div>\n\t\t\t\t<textarea id=\"field1\" class=\"text-field\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442...\"><\/textarea>\n\t\t\t<\/div>\n\t\t<\/details>\n\n\t\t<details open>\n\t\t<summary>\u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/summary>\n\t\t\n\t\t\n\t\t<div class=\"summary-content-wrapper\">\n\t\t\t<div class=\"field-wrapper\">\n\t\t\t\t<div class=\"field-label\">\u0418\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a<\/div>\n\t\t\t\t<textarea id=\"field2\" class=\"text-field\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442...\"><\/textarea>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"field-wrapper\">\n\t\t\t\t<div class=\"field-label\">\u0420\u043e\u0434\u043d\u043e\u0439 \u044f\u0437\u044b\u043a<\/div>\n\t\t\t\t<textarea id=\"field3\" class=\"text-field\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442...\"><\/textarea>\n\t\t\t<\/div>\n\t\t<\/details>\n\n\n\t\t\t\n <div class=\"container\">\n\t\t<details>\n\t\t<summary>\u041c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/summary>\n\n\t\t\t<div class=\"field-wrapper\">\n\t\t\t\t<div class=\"field-label\">\u041c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/div>\n\t\t\t\t<textarea id=\"field4\" class=\"text-field\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442...\"><\/textarea>\n\t\t\t<\/div>\n\n\n\t\t<\/details>\n\n\n\n\n\n\t\t\t<div class=\"wrap-buttons\">\n\t\t\t\t<button class=\"wrap-btn wrap-btn-1\" onclick=\"wrapSelectedText(1)\">t_1 Tag<\/button>\n\t\t\t\t<button class=\"wrap-btn wrap-btn-2\" onclick=\"wrapSelectedText(2)\">t_2 Tag<\/button>\n\t\t\t\t<button class=\"wrap-btn wrap-btn-3\" onclick=\"wrapSelectedText(3)\">t_3 Tag<\/button>\n\t\t\t\t<button class=\"wrap-btn wrap-btn-4\" onclick=\"wrapSelectedText(4)\">t_4 Tag<\/button>\n\t\t\t<\/div>\n\n\t\t\n\t\t<div class=\"button-container\">\n\t\t\t<button class=\"create-table-btn\" onclick=\"createTable()\">\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443<\/button>\n\t\t\t<button class=\"copy-table-btn\" onclick=\"copyTableToClipboard()\">\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 CSS<\/button>\n\t\t<\/div>\n\n\t\t\n\t\t<div id=\"tableContainer\" class=\"table-container\"><\/div>\n\n <\/div>\n\n <script>\n \/\/ \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439\n \/\/ \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0435, \u043f\u043e\u043b\u0435 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c\n const INITIAL_TEXT_FIELD1 = `t_1 {\n \/* \u0426\u0432\u0435\u0442: \u042f\u0440\u043a\u043e-\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e (255, 0, 0, 1) *\/\n color: rgba(255, 0, 0, 1); \n \n \/* \u0416\u0438\u0440\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 *\/\n font-weight: bold; \n \n \/* \u041a\u0443\u0440\u0441\u0438\u0432 *\/\n font-style: italic; \n \n \/* \u041f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 *\/\n text-decoration: underline; \n}\n\nt_2 {\n color: green;\n font-weight: bold;\n}\n\nt_3 {\n color: blue;\n font-weight: bold;\n}\n\nt_4 {\n color: orange;\n font-weight: bold;\n}\n\n\n\n\n`; \/\/ \u041f\u0443\u0441\u0442\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 - \u043f\u043e\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u044b\u043c\n\n const INITIAL_TEXT_FIELD2 = `Hallo zusammen,\nheute soll mein Paket <t_1>geliefert<\/t_1> werden.\nIch habe <t_2>darum<\/t_2> <t_1>gebeten<\/t_1>, es ohne Code zu <t_3>\u00fcbergeben<\/t_3>.\nSollte der Code trotzdem <t_4>erforderlich<\/t_4> sein,\nbitte ich die Person, die mein Paket annehmen kann, diesen Code mitzuteilen:\n\n***678\n\nDas Paket soll heute ungef\u00e4hr zwischen 19 und 20 Uhr geliefert werden.\nEs kann sein, dass ich es nicht rechtzeitig schaffe.\nDeshalb bitte ich euch, mein Paket anzunehmen.\nVielen Dank im Voraus f\u00fcr eure Hilfe!\nIch w\u00fcnsche euch allen einen sch\u00f6nen Tag.\n`;\n\n const INITIAL_TEXT_FIELD3 = `\u041f\u0440\u0438\u0432\u0435\u0442 \u0432\u0441\u0435\u043c,\n\u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u044b\u043b\u043a\u0443.\n\u042f \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u043e\u0442\u0434\u0430\u043b\u0438 \u0431\u0435\u0437 \u043a\u043e\u0434\u0430.\n\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0436\u0435 \u043a\u043e\u0434 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442.\n\u0422\u043e\u0433\u0434\u0430 \u043a\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u043c\u043e\u0439 \u0437\u0430\u043a\u0430\u0437 \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u0435 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434.\n\n***678\n\n\u041f\u043e\u0441\u044b\u043b\u043a\u0443 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441 7 \u0434\u043e 8 \u0432\u0435\u0447\u0435\u0440\u0430.\n\u042f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0443\u0441\u043f\u0435\u044e. (\u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0447\u0442\u043e \u044f \u043d\u0435 \u0441\u0432\u043e\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0443\u0441\u043f\u0435\u044e (\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f) )\n\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0448\u0443 \u044f \u0432\u0430\u0441 \u043c\u043e\u044e \u043f\u043e\u0441\u044b\u043b\u043a\u0443 \u043f\u0440\u0438\u043d\u044f\u0442\u044c.\n\u0417\u0430\u0440\u0430\u043d\u0435\u0435 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0412\u0430\u0448\u0443 \u043f\u043e\u043c\u043e\u0449\u044c.\n\u042f \u0436\u0435\u043b\u0430\u044e \u0432\u0441\u0435\u043c \u0432\u0441\u0435\u043c \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f.\n`;\n\n\n const INITIAL_TEXT_FIELD4 = \"\"; \/\/ \u041f\u0443\u0441\u0442\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 - \u043f\u043e\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u044b\u043c\n\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0435\u0439\n function initializeFields() {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0435\u0439\n const field1 = document.getElementById('field1');\n const field2 = document.getElementById('field2');\n const field3 = document.getElementById('field3');\n\t\t\tconst field4 = document.getElementById('field4');\n\n \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u044f \u0438\u0437 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u0434\u0430\u043d\u044b\n if (INITIAL_TEXT_FIELD1) {\n field1.value = INITIAL_TEXT_FIELD1;\n }\n\n if (INITIAL_TEXT_FIELD2) {\n field2.value = INITIAL_TEXT_FIELD2;\n }\n\n if (INITIAL_TEXT_FIELD3) {\n field3.value = INITIAL_TEXT_FIELD3;\n }\n\n if (INITIAL_TEXT_FIELD4) {\n field4.value = INITIAL_TEXT_FIELD4;\n }\n\n\t\t\t\/\/ !!! \u0413\u0410\u0420\u0410\u041d\u0422\u0418\u0420\u041e\u0412\u0410\u041d\u041d\u042b\u0419 \u0412\u042b\u0417\u041e\u0412 \u041f\u041e\u0421\u041b\u0415 \u0417\u0410\u041f\u041e\u041b\u041d\u0415\u041d\u0418\u042f \u041f\u041e\u041b\u0415\u0419 !!!\n\t\t\tcreateTable(); \n\t\t\tconsole.log(\"\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0435\u0439.\");\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 window.addEventListener('DOMContentLoaded', initializeFields);\n\n \/\/ \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u0437 \u043f\u043e\u043b\u0435\u0439 (\u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f)\n function getFieldValues() {\n return {\n field1: document.getElementById('field1').value,\n field2: document.getElementById('field2').value,\n field3: document.getElementById('field3').value,\n\t\t\t\tfield4: document.getElementById('field4').value\n };\n }\n\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u043e\u043b\u0435\u0439\n function setFieldValues(text1, text2, text3, text4) {\n document.getElementById('field1').value = text1 || '';\n document.getElementById('field2').value = text2 || '';\n document.getElementById('field3').value = text3 || '';\n\t\t\tdocument.getElementById('field4').value = text4 || '';\n }\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f CSS \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u0437 \u043f\u043e\u043b\u044f field1\n function applyCustomStyles() {\n const cssText = document.getElementById('field1').value.trim();\n const styleElement = document.getElementById('dynamicStyles');\n \n if (cssText) {\n \/\/ \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n styleElement.textContent = `.result-table ${cssText}`;\n } else {\n styleElement.textContent = '';\n }\n }\n\n\/\/ \u043d\u0430\u0447\u0430\u043b\u043e \u0431\u043b\u043e\u043a\u0430 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f.\n \/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\n let lastTableSelection = {\n text: '',\n columnIndex: -1\n };\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\n function trackTableSelection() {\n const selection = window.getSelection();\n const selectedText = selection.toString().trim();\n \n if (selectedText && selection.rangeCount > 0) {\n const range = selection.getRangeAt(0);\n let container = range.commonAncestorContainer;\n \n \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 td \u044d\u043b\u0435\u043c\u0435\u043d\u0442\n while (container && container.nodeName !== 'TD') {\n container = container.parentNode;\n }\n \n if (container && container.nodeName === 'TD') {\n const row = container.parentNode;\n const cells = Array.from(row.cells);\n const columnIndex = cells.indexOf(container);\n \n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 (\u043a\u043e\u043b\u043e\u043d\u043a\u0438: 1 = \u0438\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439, 2 = \u0440\u043e\u0434\u043d\u043e\u0439)\n lastTableSelection = {\n text: selectedText,\n columnIndex: columnIndex\n };\n }\n }\n }\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0442\u0435\u0433\n function wrapSelectedText(tagNumber) {\n if (!lastTableSelection.text || lastTableSelection.columnIndex === -1) {\n alert('\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 (\u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0438\u043b\u0438 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435)');\n return;\n }\n\n const selectedText = lastTableSelection.text;\n const columnIndex = lastTableSelection.columnIndex;\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c, \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c (1 = field2, 2 = field3)\n let targetField;\n if (columnIndex === 1) {\n targetField = document.getElementById('field2');\n } else if (columnIndex === 2) {\n targetField = document.getElementById('field3');\n } else {\n alert('\u0412\u044b\u0434\u0435\u043b\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0438\u043b\u0438 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b');\n return;\n }\n let currentValue = targetField.value;\n let textToWrap = selectedText;\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 \u043e\u0431\u0451\u0440\u043d\u0443\u0442 \u043b\u0438 \u0443\u0436\u0435 \u0442\u0435\u043a\u0441\u0442 \u0432 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0442\u0435\u0433\n \/\/ \u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0441 \u0442\u0435\u0433\u0430\u043c\u0438: <t_X>\u0442\u0435\u043a\u0441\u0442<\/t_X>\n let found = false;\n let newValue = currentValue;\n \n \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u0442\u0435\u043a\u0441\u0442 \u0441 \u043e\u0431\u0451\u0440\u0442\u043a\u043e\u0439\n const wrappedPattern = new RegExp(`<t_\\\\d+>${escapeRegExp(selectedText)}<\\\\\/t_\\\\d+>`, 'g');\n if (wrappedPattern.test(currentValue)) {\n \/\/ \u0422\u0435\u043a\u0441\u0442 \u0443\u0436\u0435 \u043e\u0431\u0451\u0440\u043d\u0443\u0442 - \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043e\u0431\u0451\u0440\u0442\u043a\u0443\n newValue = currentValue.replace(wrappedPattern, selectedText);\n found = true;\n } else {\n \/\/ \u0422\u0435\u043a\u0441\u0442 \u043d\u0435 \u043e\u0431\u0451\u0440\u043d\u0443\u0442 - \u0438\u0449\u0435\u043c \u0435\u0433\u043e \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442\n if (currentValue.includes(selectedText)) {\n found = true;\n }\n }\n \n if (!found) {\n alert(`\u0422\u0435\u043a\u0441\u0442 \"${selectedText}\" \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u043e\u043b\u0435`);\n return;\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0442\u0435\u0433\u043e\u0432\n currentValue = newValue;\n \n \/\/ \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u0432 \u043d\u043e\u0432\u044b\u0439 \u0442\u0435\u0433\n const tag = `t_${tagNumber}`;\n const wrappedText = `<${tag}>${selectedText}<\/${tag}>`;\n\n\n\n \/\/ \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u043e\u0431\u0451\u0440\u043d\u0443\u0442\u044b\u0439\n newValue = currentValue.replace(selectedText, wrappedText);\n\t\t\ttargetField.value = newValue;\t\t\t\t\t\t\t \n \n\n \/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435\n window.getSelection().removeAllRanges();\n lastTableSelection = { text: '', columnIndex: -1 };\n \n \/\/ \u041f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c\n createTable();\n }\n\n \/\/ \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0432 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445\n function escapeRegExp(string) {\n return string.replace(\/[.*+?^${}()|[\\]\\\\]\/g, '\\\\$&');\n }\n\n\/\/ \u043a\u043e\u043d\u0435\u0446 \u0431\u043b\u043e\u043a\u0430 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f.\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n function createTable() {\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u0438\u0437 \u043f\u043e\u043b\u0435\u0439\n const foreignText = document.getElementById('field2').value.trim();\n const nativeText = document.getElementById('field3').value.trim();\n\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u043e\u0431\u0430 \u043f\u043e\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b\n if (!foreignText || !nativeText) {\n console.log('\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043e\u0431\u0430 \u043f\u043e\u043b\u044f: \"\u0418\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a\" \u0438 \"\u0420\u043e\u0434\u043d\u043e\u0439 \u044f\u0437\u044b\u043a\"');\n\t\t\t\t\/\/alert('\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043e\u0431\u0430 \u043f\u043e\u043b\u044f: \"\u0418\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a\" \u0438 \"\u0420\u043e\u0434\u043d\u043e\u0439 \u044f\u0437\u044b\u043a\"');\n return;\n }\n\n \/\/ \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 CSS \u0441\u0442\u0438\u043b\u0438\n applyCustomStyles();\n\n \/\/ \u0420\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438\n const foreignLines = foreignText.split('\\n');\n const nativeLines = nativeText.split('\\n');\n\n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c HTML \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n let tableHTML = `\n <table class=\"result-table\">\n <thead>\n <tr>\n <th>\u2116<\/th>\n <th>\u0418\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a<\/th>\n <th>\u0420\u043e\u0434\u043d\u043e\u0439 \u044f\u0437\u044b\u043a<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n `;\n\n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0440\u043e\u043a\n const maxLines = Math.max(foreignLines.length, nativeLines.length);\n\n \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443\n for (let i = 0; i < maxLines; i++) {\n const foreignLine = foreignLines[i] || '';\n const nativeLine = nativeLines[i] || '';\n \n tableHTML += `\n <tr>\n <td>${i + 1}<\/td>\n <td>${foreignLine}<\/td>\n <td>${nativeLine}<\/td>\n <\/tr>\n `;\n }\n\n tableHTML += `\n <\/tbody>\n <\/table>\n `;\n\n \/\/ \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\n document.getElementById('tableContainer').innerHTML = tableHTML;\n\n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f\n const table = document.querySelector('.result-table');\n if (table) {\n table.addEventListener('mouseup', trackTableSelection);\n table.addEventListener('touchend', trackTableSelection);\n }\n }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 CSS \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430\n function copyTableToClipboard() {\n const tableContainer = document.getElementById('tableContainer');\n const table = tableContainer.querySelector('.result-table');\n \n if (!table) {\n alert('\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0443!');\n return;\n }\n\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c HTML \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n const tableHTML = table.outerHTML;\n\n \/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 CSS \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n const cssStyles = `\n\n\n<style>\n.result-table {\n width: 100%;\n border-collapse: collapse;\n background: white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.result-table th,\n.result-table td {\n border: 1px solid #ddd;\n padding: 12px;\n text-align: left;\n vertical-align: top;\n}\n\n.result-table th {\n background-color: #4CAF50;\n color: white;\n font-weight: bold;\n}\n\n.result-table tr:nth-child(even) {\n background-color: #f9f9f9;\n}\n\n.result-table tr:hover {\n background-color: #f5f5f5;\n}\n\n.result-table td:first-child {\n text-align: center;\n font-weight: bold;\n width: 60px;\n}\n${document.getElementById('dynamicStyles').textContent}\n<\/style>\n`;\n\n \/\/ \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c CSS \u0438 HTML\n const fullContent = cssStyles + '\\n' + tableHTML;\n\n \/\/ \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430\n navigator.clipboard.writeText(fullContent).then(() => {\n alert('\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441 CSS \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430!\\n\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0451 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 WordPress.');\n }).catch(err => {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:', err);\n alert('\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0435\u0449\u0451 \u0440\u0430\u0437.');\n });\n }\n\nconsole.log(\"!\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430\");\n\n\n\n <\/script>\n<\/body>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0422\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0439 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439 \u0438 \u0432\u0441\u0442\u0430\u0432\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0442\u0430\u043c \u0441\u043b\u0443\u0448\u0430\u0439. https:\/\/word.cbm.ua\/?p=13493 \u0422\u0440\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u044f \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f CSS \u0441\u0442\u0438\u043b\u0438 CSS \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0418\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0420\u043e\u0434\u043d\u043e\u0439 \u044f\u0437\u044b\u043a \u041c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u041c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 t_1 Tag t_2 Tag t_3 Tag t_4 Tag \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 CSS<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-13494","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13494"}],"version-history":[{"count":11,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13494\/revisions"}],"predecessor-version":[{"id":13744,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13494\/revisions\/13744"}],"wp:attachment":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13494,"date":"2025-11-16T18:46:42","date_gmt":"2025-11-16T16:46:42","guid":{"rendered":"https:\/\/word.cbm.ua\/?p=13494"},"modified":"2025-12-28T22:58:15","modified_gmt":"2025-12-28T20:58:15","slug":"_-%d1%82%d0%b5%d1%81%d1%82-%d0%ba%d0%be%d0%bf%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d1%82%d0%b0%d0%b1%d0%bb%d0%b8%d1%86%d1%83-%d1%81-html-%d0%bc%d0%be%d0%b5%d0%b9-%d1%81%d1%82%d1%80%d0%b0","status":"publish","type":"post","link":"https:\/\/word.cbm.ua\/?p=13494","title":{"rendered":"\ud83e\uddfe\ud83d\udd8c_ v1 \u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 c \u043e\u0440\u0435\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c \u0447\u0442\u043e\u0431\u044b \u0443\u0447\u0438\u0442\u044c \u0438\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e. (\u043d\u0435 \u0434\u043e\u0434\u0435\u043b\u0430\u043b \u0435\u0449\u0435.)"},"content":{"rendered":"\n

\u0422\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0439 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439 \u0438 \u0432\u0441\u0442\u0430\u0432\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044f<\/strong> \u0438 \u0442\u0430\u043c \u0441\u043b\u0443\u0448\u0430\u0439<\/span>.<\/p>\n\n\n\n