\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 \/* \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 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e *\/\n .wrap-buttons {\n position: fixed;\n top: 102px; \/* \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f WordPress \u0430\u0434\u043c\u0438\u043d-\u0431\u0430\u0440\u0430 *\/\n left: 50%;\n transform: translateX(-50%);\n width: 100%;\n max-width: 1400px;\n\t\t\t\t \n z-index: 999;\n background-color: #ffffff;\n padding: 10px 0;\n border-bottom: 1px solid #ddd;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n display: flex;\n gap: 10px;\n\t\t\t\t \n flex-wrap: wrap;\n justify-content: center;\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n }\n\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\n \/* \u0414\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 (\u0431\u0435\u0437 \u0430\u0434\u043c\u0438\u043d-\u0431\u0430\u0440\u0430) *\/\n @media screen and (max-width: 782px) {\n .wrap-buttons {\n top: 46px;\n }\n \n h1 {\n margin-top: 90px !important;\n }\n }\n\n \/* \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0437\u0430\u043b\u043e\u0433\u0438\u043d\u0435\u043d (\u043d\u0435\u0442 \u0430\u0434\u043c\u0438\u043d-\u0431\u0430\u0440\u0430) *\/\n body:not(.admin-bar) .wrap-buttons {\n top: 0;\n }\n\n body:not(.admin-bar) h1 {\n margin-top: 60px !important;\n }\n\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\t\t<\/div>\n\t<\/div>\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 <\/div>\n\n\n\n\n\n\t<div class=\"wrap-buttons\">\n\t\t<button class=\"wrap-btn wrap-btn-1\" onclick=\"wrapSelectedText(1)\">t_1 Tag<\/button>\n\t\t<button class=\"wrap-btn wrap-btn-2\" onclick=\"wrapSelectedText(2)\">t_2 Tag<\/button>\n\t\t<button class=\"wrap-btn wrap-btn-3\" onclick=\"wrapSelectedText(3)\">t_3 Tag<\/button>\n\t\t<button class=\"wrap-btn wrap-btn-4\" onclick=\"wrapSelectedText(4)\">t_4 Tag<\/button>\n\t<\/div>\n\n\t\n\t<div class=\"button-container\">\n\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<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<\/div>\n\n\t\n\t<div id=\"tableContainer\" class=\"table-container\"><\/div>\n\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 = `Heute haben wir sehr kleine <t_1>Touren<\/t_1>. \n\t\tBitte arbeitet ruhig, langsam und <t_1>sauber<\/t_1>.\nIch m\u00f6chte heute keine <t_1>Konzessionen<\/t_1> (Concessions) sehen. \nDie Qualit\u00e4t muss <t_1>vollst\u00e4ndig<\/t_1> <t_1>eingehalten<\/t_1> werden.\n\nWie bereits <t_1>mehrfach<\/t_1> und <t_3>deutlich gesagt<\/t_3>:\nArbeitstage werden nur den Mitarbeitenden gegeben, die gute Arbeit <t_1>leisten<\/t_1>.\n\nSeit gestern <t_1>erhalte<\/t_1> ich viele <t_2>unn\u00f6tige<\/t_2> Nachrichten mit der Frage, warum ich nicht <t_3>eingeplant<\/t_3> bin.\nBitte: Lest zuerst meine Nachrichten in der Gruppe, bevor ihr mir schreibt.\nIch werde keine <t_1>Einzelantworten<\/t_1> geben.\n\nWenn jemand meine Nachricht nicht liest, ist das nicht mein Problem.\n\nWie bereits gesagt:\n\nDie Concessions-Quote muss w\u00f6chentlich bei 0 % liegen.\n\nAlle anderen Qualit\u00e4tsstandards m\u00fcssen eingehalten werden.\n\nWer diese Anforderungen nicht erf\u00fcllt, bekommt entsprechend weniger Arbeitstage.\n\nWer zus\u00e4tzlich unn\u00f6tige Probleme verursacht oder respektlos handelt, zwingt mich leider dazu, arbeitsrechtliche Konsequenzen bis hin zur K\u00fcndigung zu pr\u00fcfen.\n`;\n\n const INITIAL_TEXT_FIELD3 = `\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0443 \u043d\u0430\u0441 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 <t_1>\u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b<\/t_1>. \n\t\t\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0440\u0430\u0431\u043e\u0442\u0430\u0439\u0442\u0435 \u0442\u0438\u0445\u043e, \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0438 <t_1>\u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e<\/t_1>.\n\u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0445 <t_1>\u0443\u0441\u0442\u0443\u043f\u043e\u043a<\/t_1>. \n\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c <t_1>\u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e<\/t_1> <t_2>\u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u044b<\/t_2>.\n\n\u041a\u0430\u043a \u044f \u0443\u0436\u0435 <t_1>\u043d\u0435\u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e<\/t_1> \u0438 <t_3>\u0447\u0435\u0442\u043a\u043e \u0437\u0430\u044f\u0432\u043b\u044f\u043b<\/t_3>:\n\u0420\u0430\u0431\u043e\u0447\u0438\u0435 \u0434\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0435\u0431\u044f <t_1>\u043f\u0440\u043e\u044f\u0432\u0438\u043b\u0438<\/t_1>.\n\n\u0421\u043e \u0432\u0447\u0435\u0440\u0430\u0448\u043d\u0435\u0433\u043e \u0434\u043d\u044f \u044f <t_1>\u043f\u043e\u043b\u0443\u0447\u0430\u044e<\/t_1> \u043c\u043d\u043e\u0433\u043e <t_2>\u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445<\/t_2> \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \u0432 <t_3>\u0433\u0440\u0430\u0444\u0438\u043a\u0435<\/t_3>.\n\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0447\u0442\u0438\u0442\u0435 \u043c\u043e\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0433\u0440\u0443\u043f\u043f\u0435, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0439.\n\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 <t_1>\u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c<\/t_1> \u043d\u0430 <t_1>\u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435<\/t_1> \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.\n\n\u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u043d\u0435 \u0447\u0438\u0442\u0430\u0435\u0442 \u043c\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u044d\u0442\u043e \u043d\u0435 \u043c\u043e\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.\n\n\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b:\n\n\u0415\u0436\u0435\u043d\u0435\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0432\u043a\u0430 \u0443\u0441\u0442\u0443\u043f\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c 0%.\n\n\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u044b.\n\n\u0422\u0435\u043c, \u043a\u0442\u043e \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u044d\u0442\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0434\u043d\u0435\u0439.\n\n\u0422\u0435\u043c, \u043a\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438\u043b\u0438 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043d\u0435\u0443\u0432\u0430\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0430\u0440\u043d\u044b\u0445 \u043c\u0435\u0440\u0430\u0445, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0443\u0432\u043e\u043b\u044c\u043d\u0435\u043d\u0438\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","protected":false},"excerpt":{"rendered":"<p>\u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c:const INITIAL_TEXT_FIELD2 =const INITIAL_TEXT_FIELD3 =\u0442\u0435\u0433\u0438 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0432 <t_1><\/t_1> \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-13711","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13711","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=13711"}],"version-history":[{"count":33,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13711\/revisions"}],"predecessor-version":[{"id":13771,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13711\/revisions\/13771"}],"wp:attachment":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13711,"date":"2025-12-28T18:18:52","date_gmt":"2025-12-28T16:18:52","guid":{"rendered":"https:\/\/word.cbm.ua\/?p=13711"},"modified":"2025-12-30T00:22:19","modified_gmt":"2025-12-29T22:22:19","slug":"%f0%9f%a7%be%f0%9f%96%8c_%d1%82%d0%b5%d0%ba%d1%81%d1%82-%d0%bd%d0%b0-%d0%bd%d0%b5%d0%bc%d0%b5%d1%86%d0%ba%d0%be%d0%bc-%d0%bf%d0%be-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b5-%d0%b0%d0%bc%d0%b0%d0%b7%d0%be","status":"publish","type":"post","link":"https:\/\/word.cbm.ua\/?p=13711","title":{"rendered":"\ud83e\uddfe\ud83d\udd8c_\u0422\u0435\u043a\u0441\u0442 \u043d\u0430 \u043d\u0435\u043c\u0435\u0446\u043a\u043e\u043c \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0410\u043c\u0430\u0437\u043e\u043d."},"content":{"rendered":"\n

\u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c:
const INITIAL_TEXT_FIELD2 =
const INITIAL_TEXT_FIELD3 =
\u0442\u0435\u0433\u0438 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0432 <t_1><\/t_1><\/strong><\/mark><\/p>\n\n\n\n\n\n \n \n \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 \/* \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 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e *\/\n .wrap-buttons {\n position: fixed;\n top: 102px; \/* \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f WordPress \u0430\u0434\u043c\u0438\u043d-\u0431\u0430\u0440\u0430 *\/\n left: 50%;\n transform: translateX(-50%);\n width: 100%;\n max-width: 1400px;\n\t\t\t\t \n z-index: 999;\n background-color: #ffffff;\n padding: 10px 0;\n border-bottom: 1px solid #ddd;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n display: flex;\n gap: 10px;\n\t\t\t\t \n flex-wrap: wrap;\n justify-content: center;\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \n }\n\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\n \/* \u0414\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 (\u0431\u0435\u0437 \u0430\u0434\u043c\u0438\u043d-\u0431\u0430\u0440\u0430) *\/\n @media screen and (max-width: 782px) {\n .wrap-buttons {\n top: 46px;\n }\n \n h1 {\n margin-top: 90px !important;\n }\n }\n\n \/* \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0437\u0430\u043b\u043e\u0433\u0438\u043d\u0435\u043d (\u043d\u0435\u0442 \u0430\u0434\u043c\u0438\u043d-\u0431\u0430\u0440\u0430) *\/\n body:not(.admin-bar) .wrap-buttons {\n top: 0;\n }\n\n body:not(.admin-bar) h1 {\n margin-top: 60px !important;\n }\n\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\t\t<\/div>\n\t<\/div>\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 <\/div>\n\n\n\n\n\n\t<div class=\"wrap-buttons\">\n\t\t<button class=\"wrap-btn wrap-btn-1\" onclick=\"wrapSelectedText(1)\">t_1 Tag<\/button>\n\t\t<button class=\"wrap-btn wrap-btn-2\" onclick=\"wrapSelectedText(2)\">t_2 Tag<\/button>\n\t\t<button class=\"wrap-btn wrap-btn-3\" onclick=\"wrapSelectedText(3)\">t_3 Tag<\/button>\n\t\t<button class=\"wrap-btn wrap-btn-4\" onclick=\"wrapSelectedText(4)\">t_4 Tag<\/button>\n\t<\/div>\n\n\t\n\t<div class=\"button-container\">\n\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<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<\/div>\n\n\t\n\t<div id=\"tableContainer\" class=\"table-container\"><\/div>\n\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 = `Heute haben wir sehr kleine <t_1>Touren<\/t_1>. \n\t\tBitte arbeitet ruhig, langsam und <t_1>sauber<\/t_1>.\nIch m\u00f6chte heute keine <t_1>Konzessionen<\/t_1> (Concessions) sehen. \nDie Qualit\u00e4t muss <t_1>vollst\u00e4ndig<\/t_1> <t_1>eingehalten<\/t_1> werden.\n\nWie bereits <t_1>mehrfach<\/t_1> und <t_3>deutlich gesagt<\/t_3>:\nArbeitstage werden nur den Mitarbeitenden gegeben, die gute Arbeit <t_1>leisten<\/t_1>.\n\nSeit gestern <t_1>erhalte<\/t_1> ich viele <t_2>unn\u00f6tige<\/t_2> Nachrichten mit der Frage, warum ich nicht <t_3>eingeplant<\/t_3> bin.\nBitte: Lest zuerst meine Nachrichten in der Gruppe, bevor ihr mir schreibt.\nIch werde keine <t_1>Einzelantworten<\/t_1> geben.\n\nWenn jemand meine Nachricht nicht liest, ist das nicht mein Problem.\n\nWie bereits gesagt:\n\nDie Concessions-Quote muss w\u00f6chentlich bei 0 % liegen.\n\nAlle anderen Qualit\u00e4tsstandards m\u00fcssen eingehalten werden.\n\nWer diese Anforderungen nicht erf\u00fcllt, bekommt entsprechend weniger Arbeitstage.\n\nWer zus\u00e4tzlich unn\u00f6tige Probleme verursacht oder respektlos handelt, zwingt mich leider dazu, arbeitsrechtliche Konsequenzen bis hin zur K\u00fcndigung zu pr\u00fcfen.\n`;\n\n const INITIAL_TEXT_FIELD3 = `\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0443 \u043d\u0430\u0441 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 <t_1>\u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b<\/t_1>. \n\t\t\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0440\u0430\u0431\u043e\u0442\u0430\u0439\u0442\u0435 \u0442\u0438\u0445\u043e, \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0438 <t_1>\u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e<\/t_1>.\n\u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0445 <t_1>\u0443\u0441\u0442\u0443\u043f\u043e\u043a<\/t_1>. \n\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c <t_1>\u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e<\/t_1> <t_2>\u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u044b<\/t_2>.\n\n\u041a\u0430\u043a \u044f \u0443\u0436\u0435 <t_1>\u043d\u0435\u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e<\/t_1> \u0438 <t_3>\u0447\u0435\u0442\u043a\u043e \u0437\u0430\u044f\u0432\u043b\u044f\u043b<\/t_3>:\n\u0420\u0430\u0431\u043e\u0447\u0438\u0435 \u0434\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0435\u0431\u044f <t_1>\u043f\u0440\u043e\u044f\u0432\u0438\u043b\u0438<\/t_1>.\n\n\u0421\u043e \u0432\u0447\u0435\u0440\u0430\u0448\u043d\u0435\u0433\u043e \u0434\u043d\u044f \u044f <t_1>\u043f\u043e\u043b\u0443\u0447\u0430\u044e<\/t_1> \u043c\u043d\u043e\u0433\u043e <t_2>\u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445<\/t_2> \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \u0432 <t_3>\u0433\u0440\u0430\u0444\u0438\u043a\u0435<\/t_3>.\n\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0447\u0442\u0438\u0442\u0435 \u043c\u043e\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0433\u0440\u0443\u043f\u043f\u0435, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0439.\n\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 <t_1>\u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c<\/t_1> \u043d\u0430 <t_1>\u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435<\/t_1> \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.\n\n\u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u043d\u0435 \u0447\u0438\u0442\u0430\u0435\u0442 \u043c\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u044d\u0442\u043e \u043d\u0435 \u043c\u043e\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.\n\n\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b:\n\n\u0415\u0436\u0435\u043d\u0435\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0432\u043a\u0430 \u0443\u0441\u0442\u0443\u043f\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c 0%.\n\n\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u044b.\n\n\u0422\u0435\u043c, \u043a\u0442\u043e \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u044d\u0442\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0434\u043d\u0435\u0439.\n\n\u0422\u0435\u043c, \u043a\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438\u043b\u0438 \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043d\u0435\u0443\u0432\u0430\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0430\u0440\u043d\u044b\u0445 \u043c\u0435\u0440\u0430\u0445, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0443\u0432\u043e\u043b\u044c\u043d\u0435\u043d\u0438\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","protected":false},"excerpt":{"rendered":"<p>\u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c:const INITIAL_TEXT_FIELD2 =const INITIAL_TEXT_FIELD3 =\u0442\u0435\u0433\u0438 \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0432 <t_1><\/t_1> \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-13711","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13711","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=13711"}],"version-history":[{"count":33,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13711\/revisions"}],"predecessor-version":[{"id":13771,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13711\/revisions\/13771"}],"wp:attachment":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}