Skip to content

R
react-ag-qeditor
Commit 98ec316b by Яков
Options

update

parent 2041da4b
Showing with 166 additions and 42 deletions
example/src/App.js
...@@ -9,7 +9,7 @@ const App = () => { ...@@ -9,7 +9,7 @@ const App = () => {
// value={`<iframe src="https://cdn.atmaguru.online/2/atmacompany/8/b/8bTfGoWtAuv5waVabQRTtWaNOrve5uv8UBXFbGOH9cowQ1K56dYi7TFz6h5jUfzr.pdf" width="100%" /><iframe src="https://www.youtube.com/embed/YmZGP7YP8c4" frameborder="0" allowfullscreen="true"></iframe><video src="https://cdn.atmaguru.online/2/demo/V/k/VkrEXjkxnutXLgcJPt5CLXNgEj4RaL9Zk4SQhIMUjOeIRpu0dSKtQCIMl49pJM6N.webm" controls="true"></video><p>Так исторически сложилось, что взрослым людям стараются дать максимум материалов: часовые лекции, объемные массивы текста и должностных инструкций. Сотрудник изучает огромный объем информации. Пытается его запомнить, а потом в конце курса сдать большой аттестационный экзамен. Вы не учитывете при этом, что мозг взрослого человека перегружен, ему нужно выполнять обязанности по работе, думать о домашних делах, его постоянно отвлекают менеджеры и коллеги по работе… Единственный правильный способ — это давать информацию небольшими кусочками и после каждой порции проверять усвоена она или нет.</p><p></p><p>что-то новое о компании<br><a href="https://cdn.atmaguru.online/1/demo/T/G/TGvSAoLawONkteJ47yyNfmsC8zNe3ZRG4iO0ZfAjmvOIZkm20BWp8KdWCH5p1Rrx.gif" target="_blank" download="Редактор.gif" data-size="37 Мб">РСкачать книгу</a> <br></p>`} // value={`<iframe src="https://cdn.atmaguru.online/2/atmacompany/8/b/8bTfGoWtAuv5waVabQRTtWaNOrve5uv8UBXFbGOH9cowQ1K56dYi7TFz6h5jUfzr.pdf" width="100%" /><iframe src="https://www.youtube.com/embed/YmZGP7YP8c4" frameborder="0" allowfullscreen="true"></iframe><video src="https://cdn.atmaguru.online/2/demo/V/k/VkrEXjkxnutXLgcJPt5CLXNgEj4RaL9Zk4SQhIMUjOeIRpu0dSKtQCIMl49pJM6N.webm" controls="true"></video><p>Так исторически сложилось, что взрослым людям стараются дать максимум материалов: часовые лекции, объемные массивы текста и должностных инструкций. Сотрудник изучает огромный объем информации. Пытается его запомнить, а потом в конце курса сдать большой аттестационный экзамен. Вы не учитывете при этом, что мозг взрослого человека перегружен, ему нужно выполнять обязанности по работе, думать о домашних делах, его постоянно отвлекают менеджеры и коллеги по работе… Единственный правильный способ — это давать информацию небольшими кусочками и после каждой порции проверять усвоена она или нет.</p><p></p><p>что-то новое о компании<br><a href="https://cdn.atmaguru.online/1/demo/T/G/TGvSAoLawONkteJ47yyNfmsC8zNe3ZRG4iO0ZfAjmvOIZkm20BWp8KdWCH5p1Rrx.gif" target="_blank" download="Редактор.gif" data-size="37 Мб">РСкачать книгу</a> <br></p>`}
// value={"<p style=\"text-align: left\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://telemost.yandex.ru/j/5911922929\">дшдлодлод</a></p><table data-bordered=\"true\" class=\"\" style=\"min-width: 75px\"><colgroup><col style=\"min-width: 25px\"><col style=\"min-width: 25px\"><col style=\"min-width: 25px\"></colgroup><tbody><tr><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></th><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\"></p></th><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></th></tr><tr><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\"></p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></td></tr></tbody></table><p style=\"text-align: left\"></p>"} // value={"<p style=\"text-align: left\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://telemost.yandex.ru/j/5911922929\">дшдлодлод</a></p><table data-bordered=\"true\" class=\"\" style=\"min-width: 75px\"><colgroup><col style=\"min-width: 25px\"><col style=\"min-width: 25px\"><col style=\"min-width: 25px\"></colgroup><tbody><tr><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></th><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\"></p></th><th colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></th></tr><tr><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\"></p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: left\">sdfsdf</p></td></tr></tbody></table><p style=\"text-align: left\"></p>"}
// value={"<h2 style=\"text-align: center\">В данном разделе Вы сможете изучить профильные системы KRAUSS и их предназначения.</h2><h2 style=\"text-align: center\">Профильные системы с которыми мы работаем</h2><p style=\"text-align: left\"></p><p style=\"text-align: left\"><img src=\"https://cdn.atmaguru.online/1/galereya-okon/t/J/tJkxP0341Yu58FNTDNtan20IxGVVegvv4Ns8kQvn1SdiWbRBTKj009cPUNpYfD4S.png\" alt=\"fgdgdfdg&amp;#10;sdfsdf&amp;#10;SDfsdf&amp;#10;sdfsdf\" width=\"798\" height=\"449\" data-align=\"center\" style=\"display: block; margin-left: auto; margin-right: auto; width: 798px; height: 449px\" data-node-id=\"img-1752479121918-zsmot20zn\">​</p><p style=\"text-align: left\"><img src=\"https://cdn.atmaguru.online/1/galereya-okon/6/D/6DPwk96e0ja5vPaXFSDzz3SVmeJgWvMLeysYxxYXu5YgOjr57CxS21vzsMThgMgz.png\" alt=\"\" width=\"798\" height=\"431\" data-align=\"center\" style=\"display: block; margin-left: auto; margin-right: auto; width: 798px; height: 431px\" data-node-id=\"img-1752479121912-lk1uabgxv\">​</p><p style=\"text-align: left\"><span style=\"color: rgb(243, 76, 55)\"><strong>Примечание: профильные системы KRAUSS мы закупаем у компании \"Реалит\". Офис данной компании находится в г. Уфа.</strong></span></p><h2 style=\"text-align: left\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://disk.yandex.ru/d/KvB3VMNFKu4ULg\">Ссылка для скачивания видео-курсов от компании \"Реалит\" https://disk.yandex.ru/d/KvB3VMNFKu4ULg</a></h2><h2 style=\"text-align: left\">Файл для скачивания: <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cdn.atmaguru.online/1/galereya-okon/4/N/4N30p3UR8gb4jph1m1u8KijlQmDp6H9DgHKucRjvxOPUnMprnJyBaK2S1dGZPqaD.pdf\">Профильные системы</a></h2><p style=\"text-align: left\"></p>"} // value={"<h2 style=\"text-align: center\">В данном разделе Вы сможете изучить профильные системы KRAUSS и их предназначения.</h2><h2 style=\"text-align: center\">Профильные системы с которыми мы работаем</h2><p style=\"text-align: left\"></p><p style=\"text-align: left\"><img src=\"https://cdn.atmaguru.online/1/galereya-okon/t/J/tJkxP0341Yu58FNTDNtan20IxGVVegvv4Ns8kQvn1SdiWbRBTKj009cPUNpYfD4S.png\" alt=\"fgdgdfdg&amp;#10;sdfsdf&amp;#10;SDfsdf&amp;#10;sdfsdf\" width=\"798\" height=\"449\" data-align=\"center\" style=\"display: block; margin-left: auto; margin-right: auto; width: 798px; height: 449px\" data-node-id=\"img-1752479121918-zsmot20zn\">​</p><p style=\"text-align: left\"><img src=\"https://cdn.atmaguru.online/1/galereya-okon/6/D/6DPwk96e0ja5vPaXFSDzz3SVmeJgWvMLeysYxxYXu5YgOjr57CxS21vzsMThgMgz.png\" alt=\"\" width=\"798\" height=\"431\" data-align=\"center\" style=\"display: block; margin-left: auto; margin-right: auto; width: 798px; height: 431px\" data-node-id=\"img-1752479121912-lk1uabgxv\">​</p><p style=\"text-align: left\"><span style=\"color: rgb(243, 76, 55)\"><strong>Примечание: профильные системы KRAUSS мы закупаем у компании \"Реалит\". Офис данной компании находится в г. Уфа.</strong></span></p><h2 style=\"text-align: left\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://disk.yandex.ru/d/KvB3VMNFKu4ULg\">Ссылка для скачивания видео-курсов от компании \"Реалит\" https://disk.yandex.ru/d/KvB3VMNFKu4ULg</a></h2><h2 style=\"text-align: left\">Файл для скачивания: <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cdn.atmaguru.online/1/galereya-okon/4/N/4N30p3UR8gb4jph1m1u8KijlQmDp6H9DgHKucRjvxOPUnMprnJyBaK2S1dGZPqaD.pdf\">Профильные системы</a></h2><p style=\"text-align: left\"></p>"}
value={"<p style=\"text-align: left\"></p><h2 style=\"text-align: center\">Скрипт \"Вх.телефонного звонка потенциального клиента\"<br><img src=\"https://cdn.atmaguru.online/1/demo/N/8/N80blh8vFcvZ8vxF5gM92NW0asDy1HPB0eXt40tzHdtfWBKRR2IKW3P539sxoebj.png\" alt=\"Rutube_icon.svg.png\" title=\"Rutube_icon.svg.png\" width=\"1048\" height=\"1048\" data-align=\"right\" style=\"float: right; margin-left: 1rem; width: 1048px; height: 1048px\" data-node-id=\"img-1752484531717-671thw3tt\">​<br><img src=\"https://cdn.atmaguru.online/2/galereya-okon/s/I/sIt4vIbMQqB72fNnirRzc4SFge6ZYluV2RiVxz4lnr8eCe72U3uexQMR7ZM9CldA.jpg\" width=\"1064\" height=\"822\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 822px\" data-node-id=\"img-1751607113981-zg693aosm\">​<br><img src=\"https://cdn.atmaguru.online/2/galereya-okon/4/9/497lE0e2jzPAoyCnk0g1omLYKXOqJEG7ApkfaT5lBTRfuwioJIfsIVUy7fcbG9l6.jpg\" width=\"1064\" height=\"822\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 822px\" data-node-id=\"img-1751607113986-utmlo6wda\">​<br>Файл для скачивания: <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cdn.atmaguru.online/2/galereya-okon/Z/H/ZHeH2tnX0RZXy6ibijHNHpXySW01JIJElYzx1xoBQ9EZjKwHJZWFQ6tX8RyoS7TD.xls\">скрипт вх.звонка</a></h2><p style=\"text-align: left\"></p><p style=\"text-align: center\"></p><p style=\"text-align: left\"></p><p style=\"text-align: left\"></p><p style=\"text-align: center\"><img src=\"https://cdn.atmaguru.online/2/galereya-okon/L/7/L7IOgSXhT54y82ezhUIYjXYVxoqFjOBELKmQrp66UjwEybnX0QRwwDRttNHQ1OME.jpg\" width=\"1064\" height=\"1505\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 1505px\" data-node-id=\"img-1751607113981-cxqc0fbac\">​</p><p style=\"text-align: center\"><img src=\"https://cdn.atmaguru.online/2/galereya-okon/0/B/0Bw7BxdBMLHprU3mtib3TFuXlnyrbarQF82XvUM3jBGD4v3lGPQQCp19of82EMDx.jpg\" width=\"1064\" height=\"1505\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 1505px\" data-node-id=\"img-1751607113976-kfrhg4ziw\">​</p><p style=\"text-align: center\"><img src=\"https://cdn.atmaguru.online/2/galereya-okon/D/W/DW5FvXAFSm6A8gEx8qDBoYCyj0r5ep9yuI2qnUSvpNg2C2SzV3tff7ScIlvWjelB.jpg\" width=\"1064\" height=\"1505\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 1505px\" data-node-id=\"img-1751607113980-zcr1g75pv\">​</p><p style=\"text-align: left\"></p><p style=\"text-align: left\">Файл для скачивания: <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cdn.atmaguru.online/2/galereya-okon/F/O/FOvmHQ85dMkyLCIVWc4LK7Gxc7tVXAEdhL6soGR3EP9Fgo4d3ObVeUbtN9U18pmw.docx\">Скрипт при отказе клиента записываться на замер</a></p>"} value={"<p style=\"text-align: left\"></p><h2 style=\"text-align: center\">Скрипт \"Вх.телефонного звонка потенциального клиента\"</h2><h2 style=\"text-align: center\"></h2><interactive-image src=\"https://cdn.atmaguru.online/1/demo/y/V/yVH7VsNRAYz5w8ORxax0VfMgF8iYAkGmc6VUF6rGy1NX3URC2GaOil8EHDuAm6cM.png\" data-points=\"[{&quot;x&quot;:19.703389830508474,&quot;y&quot;:36.440677966101696,&quot;text&quot;:&quot;ываываыва&quot;},{&quot;x&quot;:76.0593220338983,&quot;y&quot;:80.72033898305084,&quot;text&quot;:&quot;ываываываыва&quot;}]\"></interactive-image><h2 style=\"text-align: center\"><br><img src=\"https://cdn.atmaguru.online/1/demo/N/8/N80blh8vFcvZ8vxF5gM92NW0asDy1HPB0eXt40tzHdtfWBKRR2IKW3P539sxoebj.png\" alt=\"Rutube_icon.svg.png\" title=\"Rutube_icon.svg.png\" width=\"518\" height=\"518\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 518px; height: 518px\" data-node-id=\"img-1752484531717-671thw3tt\">​​​​<br><img src=\"https://cdn.atmaguru.online/2/galereya-okon/s/I/sIt4vIbMQqB72fNnirRzc4SFge6ZYluV2RiVxz4lnr8eCe72U3uexQMR7ZM9CldA.jpg\" alt=\"\" width=\"1064\" height=\"822\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 822px\" data-node-id=\"img-1751607113981-zg693aosm\">​​​​<br><img src=\"https://cdn.atmaguru.online/2/galereya-okon/4/9/497lE0e2jzPAoyCnk0g1omLYKXOqJEG7ApkfaT5lBTRfuwioJIfsIVUy7fcbG9l6.jpg\" alt=\"\" width=\"1064\" height=\"822\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 822px\" data-node-id=\"img-1751607113986-utmlo6wda\">​​​​​​​<br>Файл для скачивания: <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cdn.atmaguru.online/2/galereya-okon/Z/H/ZHeH2tnX0RZXy6ibijHNHpXySW01JIJElYzx1xoBQ9EZjKwHJZWFQ6tX8RyoS7TD.xls\">скрипт вх.звонка</a></h2><p style=\"text-align: left\"></p><p style=\"text-align: center\"></p><p style=\"text-align: left\"></p><p style=\"text-align: left\"></p><p style=\"text-align: center\"><img src=\"https://cdn.atmaguru.online/2/galereya-okon/L/7/L7IOgSXhT54y82ezhUIYjXYVxoqFjOBELKmQrp66UjwEybnX0QRwwDRttNHQ1OME.jpg\" alt=\"\" width=\"1064\" height=\"1505\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 1505px\" data-node-id=\"img-1751607113981-cxqc0fbac\">​​​​</p><p style=\"text-align: center\"><img src=\"https://cdn.atmaguru.online/2/galereya-okon/0/B/0Bw7BxdBMLHprU3mtib3TFuXlnyrbarQF82XvUM3jBGD4v3lGPQQCp19of82EMDx.jpg\" alt=\"\" width=\"1064\" height=\"1505\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 1505px\" data-node-id=\"img-1751607113976-kfrhg4ziw\">​​​​</p><p style=\"text-align: center\"><img src=\"https://cdn.atmaguru.online/2/galereya-okon/D/W/DW5FvXAFSm6A8gEx8qDBoYCyj0r5ep9yuI2qnUSvpNg2C2SzV3tff7ScIlvWjelB.jpg\" alt=\"\" width=\"1064\" height=\"1505\" data-align=\"left\" style=\"float: left; margin-right: 1rem; width: 1064px; height: 1505px\" data-node-id=\"img-1751607113980-zcr1g75pv\">​​​​</p><p style=\"text-align: left\"></p><p style=\"text-align: left\">Файл для скачивания: <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cdn.atmaguru.online/2/galereya-okon/F/O/FOvmHQ85dMkyLCIVWc4LK7Gxc7tVXAEdhL6soGR3EP9Fgo4d3ObVeUbtN9U18pmw.docx\">Скрипт при отказе клиента записываться на замер</a></p>"}
onChange={(value)=>{ onChange={(value)=>{
console.log(value); console.log(value);
}} }}
......
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.1.9", "version": "1.1.10",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/components/Uploader.js
...@@ -107,7 +107,6 @@ export default class Uploader extends React.Component { ...@@ -107,7 +107,6 @@ export default class Uploader extends React.Component {
if(this.action === null){ if(this.action === null){
return <div style={{ textAlign: 'left' }}>{ this.errorMessage }</div> return <div style={{ textAlign: 'left' }}>{ this.errorMessage }</div>
} }
console.log(this.props)
return ( return (
<Fragment> <Fragment>
<div className={'atma-editor-uploader-uitems'}> <div className={'atma-editor-uploader-uitems'}>
......
src/extensions/InteractiveImage.js
import { Node, mergeAttributes, ReactNodeViewRenderer } from '@tiptap/react' import { Node, mergeAttributes, ReactNodeViewRenderer } from '@tiptap/react'
import React, { useState } from 'react' import React, { useState } from 'react'
import { NodeViewWrapper } from '@tiptap/react' import { NodeViewWrapper } from '@tiptap/react'
import { Button, Modal, Popconfirm, Input } from 'antd' import { Button, Modal, Popconfirm, Input, Typography } from 'antd'
const {Text} = Typography;
const InteractiveImageView = ({ node, updateAttributes }) => { const InteractiveImageView = ({ node, updateAttributes }) => {
const [modalVisible, setModalVisible] = useState(false) const [modalVisible, setModalVisible] = useState(false)
const [points, setPoints] = useState(node.attrs.points || []) const [points, setPoints] = useState(node.attrs.points || [])
const [newPoint, setNewPoint] = useState(null)
const [newPointText, setNewPointText] = useState('')
const [editingIdx, setEditingIdx] = useState(null)
const [editingText, setEditingText] = useState('')
const addPoint = (e) => { const addPoint = (e) => {
const rect = e.target.getBoundingClientRect() const rect = e.target.getBoundingClientRect()
const x = e.clientX - rect.left const x = ((e.clientX - rect.left) / rect.width) * 100
const y = e.clientY - rect.top const y = ((e.clientY - rect.top) / rect.height) * 100
const newText = prompt('Введите текст точки:')
setNewPoint({ x, y })
if (newText) { setNewPointText('')
const newPoints = [...points, { x, y, text: newText }] }
setPoints(newPoints)
updateAttributes({ points: newPoints }) const confirmAddPoint = () => {
} const newPoints = [...points, { ...newPoint, text: newPointText }]
setPoints(newPoints)
updateAttributes({ points: newPoints })
setNewPoint(null)
setNewPointText('')
}
const cancelAddPoint = () => {
setNewPoint(null)
setNewPointText('')
} }
const removePoint = (index) => { const removePoint = (index) => {
...@@ -26,6 +41,13 @@ const InteractiveImageView = ({ node, updateAttributes }) => { ...@@ -26,6 +41,13 @@ const InteractiveImageView = ({ node, updateAttributes }) => {
updateAttributes({ points: newPoints }) updateAttributes({ points: newPoints })
} }
const pointIcon = (
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.2969C5.48281 11.2969 5.875 11.6891 5.875 12.1719C5.87476 12.6545 5.48267 13.0469 5 13.0469C4.51742 13.0468 4.12524 12.6544 4.125 12.1719C4.125 11.6891 4.51727 11.297 5 11.2969ZM5 0.953125C6.1342 0.953125 7.20454 1.36506 8.01074 2.11328C8.40761 2.48046 8.71875 2.91056 8.9375 3.38867C9.16558 3.887 9.2812 4.41809 9.28125 4.96484C9.28125 5.43031 9.19735 5.88841 9.03027 6.32422C8.86938 6.74441 8.6362 7.13211 8.33789 7.48047C7.7457 8.16797 6.91738 8.66094 6.00488 8.86719C5.76899 8.92034 5.59863 9.13558 5.59863 9.38086V9.87109C5.59863 9.9679 5.52061 10.0468 5.42383 10.0469H4.58008C4.4832 10.0469 4.40527 9.96797 4.40527 9.87109V9.38086C4.40582 8.99176 4.53698 8.6138 4.77832 8.30859C5.02044 8.00253 5.3627 7.78908 5.74219 7.70312C6.40618 7.55314 7.00665 7.19836 7.43164 6.70312C7.86133 6.20312 8.08789 5.60234 8.08789 4.96484C8.08769 3.41031 6.703 2.14648 5 2.14648C3.29709 2.14658 1.91329 3.41037 1.91309 4.96484V5.38672C1.91309 5.48359 1.83418 5.5625 1.7373 5.5625H0.893555C0.796854 5.5623 0.71875 5.48347 0.71875 5.38672V4.96484C0.718799 4.41813 0.834455 3.88854 1.0625 3.38867C1.28123 2.90903 1.59244 2.48103 1.98926 2.1123C2.79546 1.36547 3.86569 0.95317 5 0.953125Z" fill="white"/>
</svg>
)
return ( return (
<NodeViewWrapper as="div" className="interactive-image-wrapper" contentEditable={false}> <NodeViewWrapper as="div" className="interactive-image-wrapper" contentEditable={false}>
<div style={{ position: 'relative', display: 'inline-block' }}> <div style={{ position: 'relative', display: 'inline-block' }}>
...@@ -35,7 +57,7 @@ const InteractiveImageView = ({ node, updateAttributes }) => { ...@@ -35,7 +57,7 @@ const InteractiveImageView = ({ node, updateAttributes }) => {
style={{ maxWidth: '100%', display: 'block' }} style={{ maxWidth: '100%', display: 'block' }}
/> />
<Button <Button
size="small" size="default"
type="primary" type="primary"
onClick={() => setModalVisible(true)} onClick={() => setModalVisible(true)}
style={{ position: 'absolute', top: 10, right: 10, zIndex: 10 }} style={{ position: 'absolute', top: 10, right: 10, zIndex: 10 }}
...@@ -43,21 +65,31 @@ const InteractiveImageView = ({ node, updateAttributes }) => { ...@@ -43,21 +65,31 @@ const InteractiveImageView = ({ node, updateAttributes }) => {
Редактировать Редактировать
</Button> </Button>
{points.map((point, idx) => ( {points.map((point, idx) => (
<div <Button
key={idx} key={idx}
title={point.text} type="primary"
size="small"
style={{ style={{
position: 'absolute', position: 'absolute',
top: point.y, top: `${point.y}%`,
left: point.x, left: `${point.x}%`,
width: 10, width: 24,
height: 10, height: 24,
backgroundColor: 'red',
borderRadius: '50%', borderRadius: '50%',
padding: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transform: 'translate(-50%, -50%)', transform: 'translate(-50%, -50%)',
zIndex: 5, zIndex: 5,
backgroundColor: '#1677ff',
border: 'none',
pointerEvents: 'none', // чтобы не блокировала выбор или драг
}} }}
/> title={point.text}
>
{pointIcon}
</Button>
))} ))}
</div> </div>
...@@ -68,6 +100,8 @@ const InteractiveImageView = ({ node, updateAttributes }) => { ...@@ -68,6 +100,8 @@ const InteractiveImageView = ({ node, updateAttributes }) => {
title="Редактировать точки" title="Редактировать точки"
footer={null} footer={null}
> >
<div><Text>Нажмите на изображение, чтобы добавить маркер</Text></div>
<div style={{marginBottom: '10px'}}><Text>Нажмите на маркер, чтобы удалить или изменить текст</Text></div>
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
<img <img
src={node.attrs.src} src={node.attrs.src}
...@@ -75,39 +109,126 @@ const InteractiveImageView = ({ node, updateAttributes }) => { ...@@ -75,39 +109,126 @@ const InteractiveImageView = ({ node, updateAttributes }) => {
style={{ width: '100%', maxWidth: '100%', display: 'block' }} style={{ width: '100%', maxWidth: '100%', display: 'block' }}
onClick={addPoint} onClick={addPoint}
/> />
{points.map((point, idx) => ( {newPoint && (
<Popconfirm <Popconfirm
key={idx} icon={null}
open={true}
title={ title={
<div> <div>
<Input.TextArea <Input.TextArea
defaultValue={point.text} autoSize
onChange={(e) => { placeholder="Введите текст точки"
const updated = [...points] value={newPointText}
updated[idx].text = e.target.value onChange={(e) => setNewPointText(e.target.value)}
setPoints(updated)
}}
/> />
</div> </div>
} }
onConfirm={() => updateAttributes({ points })} onConfirm={confirmAddPoint}
onCancel={() => removePoint(idx)} onCancel={cancelAddPoint}
okText="Применить" okText="Применить"
cancelText="Удалить" cancelText="Отменить"
> >
<div <Button
type="primary"
size="small"
style={{
position: 'absolute',
top: `${newPoint.y}%`,
left: `${newPoint.x}%`,
width: 24,
height: 24,
borderRadius: '50%',
padding: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transform: 'translate(-50%, -50%)',
zIndex: 1000,
backgroundColor: '#52c41a',
border: 'none',
}}
>
{pointIcon}
</Button>
</Popconfirm>
)}
{points.map((point, idx) => (
<Popconfirm
icon={null}
key={idx}
open={editingIdx === idx}
title={
<div style={{ maxWidth: 250 }}>
<Input.TextArea
autoSize
value={editingText}
onChange={(e) => setEditingText(e.target.value)}
/>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 8 }}>
<Button
size={'small'}
onClick={() => {
setEditingIdx(null)
setEditingText('')
}}
>
Закрыть
</Button>
<Button
size={'small'}
danger
onClick={() => {
setEditingIdx(null)
removePoint(idx)
}}
>
Удалить
</Button>
<Button
size={'small'}
type="primary"
onClick={() => {
const updated = [...points]
updated[idx].text = editingText
setPoints(updated)
updateAttributes({ points: updated })
setEditingIdx(null)
}}
>
Применить
</Button>
</div>
</div>
}
showCancel={false}
okButtonProps={{style:{ display: 'none' }}}
>
<Button
type="primary"
size="small"
onClick={() => {
setEditingText(points[idx].text)
setEditingIdx(idx)
}}
style={{ style={{
position: 'absolute', position: 'absolute',
top: point.y, top: `${point.y}%`,
left: point.x, left: `${point.x}%`,
width: 12, width: 24,
height: 12, height: 24,
backgroundColor: 'blue',
borderRadius: '50%', borderRadius: '50%',
padding: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transform: 'translate(-50%, -50%)', transform: 'translate(-50%, -50%)',
cursor: 'pointer', zIndex: 10,
backgroundColor: '#1677ff',
border: 'none',
}} }}
/> >
{pointIcon}
</Button>
</Popconfirm> </Popconfirm>
))} ))}
</div> </div>
......
src/index.scss
...@@ -256,7 +256,7 @@ body{ ...@@ -256,7 +256,7 @@ body{
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 -3px 0 3px #ffffff; box-shadow: 0 -3px 0 3px #ffffff;
padding: 6px; padding: 6px;
z-index: 1; z-index: 10;
&-g{ &-g{
display: flex; display: flex;
...@@ -1059,6 +1059,10 @@ body{ ...@@ -1059,6 +1059,10 @@ body{
&.qinsertToggleBlock { &.qinsertToggleBlock {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgPHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjMiIHJ4PSIxIiAvPgogIDxyZWN0IHg9IjMiIHk9IjEwIiB3aWR0aD0iMTgiIGhlaWdodD0iMyIgcng9IjEiIC8+CiAgPHJlY3QgeD0iMyIgeT0iMTYiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIgLz4KICA8cG9seWxpbmUgcG9pbnRzPSIxOCwxNiAyMSwxOC41IDE4LDIxIiAvPgo8L3N2Zz4K"); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgPHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjMiIHJ4PSIxIiAvPgogIDxyZWN0IHg9IjMiIHk9IjEwIiB3aWR0aD0iMTgiIGhlaWdodD0iMyIgcng9IjEiIC8+CiAgPHJlY3QgeD0iMyIgeT0iMTYiIHdpZHRoPSIxMiIgaGVpZ2h0PSIzIiByeD0iMSIgLz4KICA8cG9seWxpbmUgcG9pbnRzPSIxOCwxNiAyMSwxOC41IDE4LDIxIiAvPgo8L3N2Zz4K");
} }
&.qinteractiveImage {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmlld0JveD0iMCAwIDEzMy40NDA3NyAyMDAiCiAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iSW50ZXJhY3RpdmVfaWNvbiAodHdvIGNpcmNsZSkuc3ZnIgogICB3aWR0aD0iMTMzLjQ0MDc3IgogICBoZWlnaHQ9IjIwMCI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTAiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM4IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTg1OCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMDU3IgogICAgIGlkPSJuYW1lZHZpZXc2IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIxLjY2ODc3MiIKICAgICBpbmtzY2FwZTpjeD0iMzc0Ljc1NTAyIgogICAgIGlua3NjYXBlOmN5PSItNjEuODc5MTQ0IgogICAgIGlua3NjYXBlOndpbmRvdy14PSI1NCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmcyIgogICAgIGZpdC1tYXJnaW4tdG9wPSI1IgogICAgIGZpdC1tYXJnaW4tbGVmdD0iNSIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSI1IgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSI1IiAvPgogIDxwYXRoCiAgICAgaWQ9ImNpcmNsZTQxNDkiCiAgICAgc3R5bGU9Im9wYWNpdHk6MTtmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMzZjNmN2I7c3Ryb2tlLXdpZHRoOjUuNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxIgogICAgIHNvZGlwb2RpOnR5cGU9ImFyYyIKICAgICBzb2RpcG9kaTpjeD0iNTEuMDIzMjM1IgogICAgIHNvZGlwb2RpOmN5PSI1MC4yMTAwNTIiCiAgICAgc29kaXBvZGk6cng9IjQwLjk0NDIwNiIKICAgICBzb2RpcG9kaTpyeT0iNDEuMzU1MTU2IgogICAgIHNvZGlwb2RpOnN0YXJ0PSIyLjA5NzE3OTIiCiAgICAgc29kaXBvZGk6ZW5kPSIwLjU2MzE5MTk1IgogICAgIGQ9Ik0gMzAuNDUyNDkxLDg1Ljk2Njk2MSBBIDQwLjk0NDIwNiw0MS4zNTUxNTYgMCAwIDEgMTAuNDk2Mjg2LDQ0LjMyMTA2NCA0MC45NDQyMDYsNDEuMzU1MTU2IDAgMCAxIDQxLjI2NjQwMiwxMC4wNDYyMyA0MC45NDQyMDYsNDEuMzU1MTU2IDAgMCAxIDg0LjI0ODg0MywyNi4wNDMyMDMgNDAuOTQ0MjA2LDQxLjM1NTE1NiAwIDAgMSA4NS42NDM4MjUsNzIuMjg5MDY5IgogICAgIHNvZGlwb2RpOm9wZW49InRydWUiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz4KICA8cGF0aAogICAgIGlkPSJjaXJjbGU0MTUzIgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDpub25lO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojM2YzZjdiO3N0cm9rZS13aWR0aDo1LjU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBzb2RpcG9kaTp0eXBlPSJhcmMiCiAgICAgc29kaXBvZGk6Y3g9IjUxLjAyMzE1NSIKICAgICBzb2RpcG9kaTpjeT0iNTIuMTgyNTk4IgogICAgIHNvZGlwb2RpOnJ4PSIyNi4xNDc2MzYiCiAgICAgc29kaXBvZGk6cnk9IjI2LjcxOTk3NiIKICAgICBzb2RpcG9kaTpzdGFydD0iMi41ODU3NDk5IgogICAgIHNvZGlwb2RpOmVuZD0iMC40NTM4NDY4NSIKICAgICBkPSJtIDI4LjgxMTg4Nyw2Ni4yODE2NDQgYSAyNi4xNDc2MzYsMjYuNzE5OTc2IDAgMCAxIDQuNTI0NzI4LC0zMy43Nzg5NjggMjYuMTQ3NjM2LDI2LjcxOTk3NiAwIDAgMSAzMy4zMjAyOSwtMS43Mzc5NjggMjYuMTQ3NjM2LDI2LjcxOTk3NiAwIDAgMSA3Ljg2Njg4OCwzMy4xMzI2MjgiCiAgICAgc29kaXBvZGk6b3Blbj0idHJ1ZSIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgogIDxnCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoNS4zMjczMDUsMCwwLDUuMzI3MzA1LC02MS41ODU2NiwtNC40Njk3MzA1KSIKICAgICBpZD0iZzQxODEiCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSI+CiAgICA8cGF0aAogICAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4xMDU5MzIyLDApIgogICAgICAgZD0ibSAyMS4wOTk2MDksOS4xMzg2NzE5IGMgLTEuMTMzODQzLDAgLTEuODYxMzI4LDAuNzI3NDg0MiAtMS44NjEzMjgsMS44NjEzMjgxIGwgMCwxMC4zMDA3ODEgYSAwLjY4NjcxOTI0LDAuNjg2NzE5MjQgMCAwIDEgMCwwLjAwMzkgYyAtMC4wMDIxLDAuNDkzOTIgLTAuMzQyNzQ4LDAuOTE0MTI1IC0wLjc0ODA0NywxLjA2MjUgLTAuNDA1Mjk4LDAuMTQ4Mzc0IC0wLjkzNTMxOCwwLjA0NTY5IC0xLjI1NTg1OSwtMC4zMzAwNzkgYSAwLjY4NjcxOTI0LDAuNjg2NzE5MjQgMCAwIDEgLTAuMDAyLC0wLjAwMiBjIC0xLjAxNTIzMSwtMS4xOTk4MTkgLTIuMTA2ODE5LC0xLjg5NjQ4NCAtMi42MzI4MTMsLTEuODk2NDg0IC0wLjY0MzYwOCwwIC0xLjA1Njc4OSwwLjI0OTI0NiAtMS4xNTIzNDMsMC4zOTI1NzggYSAwLjY4NjcxOTI0LDAuNjg2NzE5MjQgMCAwIDEgLTAuMDA1OSwwLjAwNzggYyAtMC4wMTU3NiwwLjAyMjg5IC0wLjAzMzI2LDAuMDQ4MTUgLTAuMDUyNzMsMC4wNzIyNyAtMC4xNjc4OTYsMC4yMDk4NyAtMC40MTMzODcsMC42NDA4NjggLTAuMTAxNTYzLDEuNjU0Mjk3IDAuMTUxMDMyLDAuNDkwODUzIDAuNjY3MDU2LDEuNzExNjU1IDEuMzY1MjM1LDMuMTIzMDQ3IDAuNjk4MTc4LDEuNDExMzkyIDEuNTg2NjM2LDMuMDQ3NDY1IDIuNTA3ODEyLDQuNTAxOTUzIDAuNjYyNDc1LDEuMDQwODQ3IDEuMzIyMjA4LDEuODkwNjM2IDEuODkwNjI1LDIuNTU0Njg3IGwgMC4wMDk4LDAuMDExNzIgYyA0Ljg4ZS00LDUuNjllLTQgMC4wMDE1LDAuMDAxNCAwLjAwMiwwLjAwMiBhIDAuNjg2NzE5MjQsMC42ODY3MTkyNCAwIDAgMSAwLjAzMTI1LDAuMDM3MTEgYyAxLjA3MTUyOCwxLjM2Mzc2NSAxLjk1ODExMiwyLjU4OTk5IDIuMDA5NzY2LDQuMzY1MjM0IGwgMTEuNzcxNDg0LDAgYyAwLjAyMDYxLC0yLjQ4NzIzOSAwLjUzMzU5OCwtNC40ODU5NTQgMS4wMjE0ODQsLTYuNDM3NSBDIDM0LjM5NDI5NiwyOC40MzI2IDM0Ljg2MTMyOCwyNi40NTQ0IDM0Ljg2MTMyOCwyNCBsIDAsLTMgYyAwLC0xLjEzMzg0NSAtMC43Mjc0ODMsLTEuODYxMzI4IC0xLjg2MTMyOCwtMS44NjEzMjggLTAuMjA1MDgyLDAgLTAuNTE5NTMxLDAuMDY3MDUgLTAuNzQwMjM0LDAuMTQwNjI1IGwgMCwtMC4wMDIgYyAtMC41OTc0LDAuMTk5MzUxIC0xLjI2MTI4NCwtMC4xNDA1MSAtMS40NDcyNjYsLTAuNzQyMTg4IGEgMC42ODY3MTkyNCwwLjY4NjcxOTI0IDAgMCAxIDAsLTAuMDAyIEMgMzAuNTM3ODYzLDE3LjY0MDYzNSAyOS45MjMxOTgsMTcuMTM4NjcyIDI5LDE3LjEzODY3MiBjIC0wLjM0NTg4MywwIC0wLjU4NzIxMSwwLjA3NDY5IC0wLjcxNjc5NywwLjE3MTg3NSAtMC41MjUwOCwwLjM5MzYwOSAtMS4zMDA5NDUsMC4yNDc2NSAtMS42NDg0MzcsLTAuMzA4NTk0IEwgMjYuNjMyODEyLDE3IGMgLTAuMzEyMjE1LC0wLjQ5ODAwNyAtMC44NDY5ODgsLTAuODYxMzI4IC0xLjUzMzIwMywtMC44NjEzMjggLTAuMjE4NDIsMCAtMC4zNDMzNjIsMC4wNDE1MyAtMC42NDA2MjUsMC4xNDA2MjUgLTAuNzE2OTYyLDAuMjM4MTA1IC0xLjQ5Njg1OCwtMC4zMjI2NDkgLTEuNDk4MDQ2LC0xLjA3ODEyNSBhIDAuNjg2NzE5MjQsMC42ODY3MTkyNCAwIDAgMSAwLC0wLjAwMiBsIDAsLTQuMTk5MjE5IGMgMCwtMS4xMzM4NDM5IC0wLjcyNzQ4NCwtMS44NjEzMjgxIC0xLjg2MTMyOSwtMS44NjEzMjgxIHoiCiAgICAgICBpZD0icGF0aDQxODMiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxIgogICAgICAgaW5rc2NhcGU6b3JpZ2luYWw9Ik0gMjEuMDk5NjA5IDguNDUxMTcxOSBDIDE5LjYyOTc0MSA4LjQ1MTE3MTkgMTguNTUwNzgxIDkuNTMwMTMxMyAxOC41NTA3ODEgMTEgTCAxOC41NTA3ODEgMjEuMzAwNzgxIEMgMTguNTQ4OTgxIDIxLjcxOTQ2OCAxOC4wMjc1ODIgMjEuOTEwMzM5IDE3Ljc1NTg1OSAyMS41OTE3OTcgQyAxNi42ODY2MzYgMjAuMzI4MTY5IDE1LjU0ODYyOSAxOS40NTExNzIgMTQuNTk5NjA5IDE5LjQ1MTE3MiBDIDEzLjgwMDA1NCAxOS40NTExNzIgMTMuMTU5NTU3IDE5LjcyMzU1NSAxMi44NzUgMjAuMTUwMzkxIEMgMTIuODY3NiAyMC4xNjExNDEgMTIuODU5ODIyIDIwLjE3MTU3MSAxMi44NTE1NjIgMjAuMTgxNjQxIEMgMTIuNTQ3NTMxIDIwLjU2MTY4IDEyLjI2Njc3MiAyMS4yODM1MTQgMTIuNjMwODU5IDIyLjQ2Njc5NyBDIDEyLjk5NDAzMSAyMy42NDcxMDQgMTQuNzAyMzA2IDI3LjI5MjkxIDE2LjU4MDA3OCAzMC4yNTc4MTIgQyAxNy4yNjY3MjEgMzEuMzM2ODIzIDE3Ljk1MjQyOCAzMi4yMTk1NjUgMTguNTQxMDE2IDMyLjkwNjI1IEMgMTguNTQ1NzE2IDMyLjkxMDc1IDE4LjU1MDIxOCAzMi45MTUyNTIgMTguNTU0Njg4IDMyLjkxOTkyMiBDIDE5LjY1NTI1OSAzNC4zMjA2NTEgMjAuNDUxMTcyIDM1LjM1OTQwNCAyMC40NTExNzIgMzcgQyAyMC40NTExNzIgMzcuMTk5Njg2IDIwLjUwOTk1MiAzNy4zMjI0NDkgMjAuNTkzNzUgMzcuNDA2MjUgQyAyMC42Nzc1NSAzNy40OTAwNSAyMC44MDAzMTQgMzcuNTQ4ODI4IDIxIDM3LjU0ODgyOCBMIDMzIDM3LjU0ODgyOCBDIDMzLjE5OTY4NiAzNy41NDg4MjggMzMuMzIyNDQ5IDM3LjQ5MDA0OCAzMy40MDYyNSAzNy40MDYyNSBDIDMzLjQ5MDA1IDM3LjMyMjQ1IDMzLjU0ODgyOCAzNy4xOTk2ODYgMzMuNTQ4ODI4IDM3IEMgMzMuNTQ4ODI4IDM0LjUzNzMwNCAzNC4wNjMzNTIgMzIuNTg2NDM2IDM0LjU2MjUgMzAuNTg5ODQ0IEMgMzUuMDYxNjUyIDI4LjU5MzI1NCAzNS41NDg4MjggMjYuNTQyMTI3IDM1LjU0ODgyOCAyNCBMIDM1LjU0ODgyOCAyMSBDIDM1LjU0ODgyOCAxOS41MzAxMzEgMzQuNDY5ODY5IDE4LjQ1MTE3MiAzMyAxOC40NTExNzIgQyAzMi42NzQ2NDggMTguNDUxMTcyIDMyLjMxMzg2MiAxOC41MzY2NTIgMzIuMDQyOTY5IDE4LjYyNjk1MyBDIDMxLjgwMjcyMiAxOC43MDcxMjMgMzEuNTQzNTQ1IDE4LjU3NDAwMyAzMS40Njg3NSAxOC4zMzIwMzEgQyAzMS4xMTk5NzcgMTcuMTk4NTIgMzAuMjA2NzA2IDE2LjQ1MTE3MiAyOSAxNi40NTExNzIgQyAyOC41NjA0MjQgMTYuNDUxMTcyIDI4LjE2NTIgMTYuNTQxMTQyIDI3Ljg3MTA5NCAxNi43NjE3MTkgQyAyNy42NTkxMzQgMTYuOTIwNjA4IDI3LjM1NjU1NyAxNi44NjM3MDUgMjcuMjE2Nzk3IDE2LjYzODY3MiBDIDI2Ljc5MjAzMSAxNS45NTkwNDYgMjYuMDM1MzUzIDE1LjQ1MTE3MiAyNS4wOTk2MDkgMTUuNDUxMTcyIEMgMjQuNzc0MjU3IDE1LjQ1MTE3MiAyNC41NDE1MTggMTUuNTI3MTcyIDI0LjI0MjE4OCAxNS42MjY5NTMgQyAyMy45NTAyMyAxNS43MjM5MTMgMjMuNjQ4OTIyIDE1LjUwNjg1NyAyMy42NDg0MzggMTUuMTk5MjE5IEwgMjMuNjQ4NDM4IDExIEMgMjMuNjQ4NDM4IDkuNTMwMTMxMyAyMi41Njk0NzggOC40NTExNzE5IDIxLjA5OTYwOSA4LjQ1MTE3MTkgeiAiCiAgICAgICBpbmtzY2FwZTpyYWRpdXM9Ii0wLjY4NjY1MDU3IgogICAgICAgc29kaXBvZGk6dHlwZT0iaW5rc2NhcGU6b2Zmc2V0IiAvPgogIDwvZz4KICA8ZwogICAgIGlkPSJnNDEzOCIKICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDUuMzI3MzA1LDAsMCw1LjMyNzMwNSwtNjAuOTM4NjgyLC01LjAzNDA2MDUpIj4KICAgIDxwYXRoCiAgICAgICBzb2RpcG9kaTp0eXBlPSJpbmtzY2FwZTpvZmZzZXQiCiAgICAgICBpbmtzY2FwZTpyYWRpdXM9Ii0wLjQ1MTQxMTQ5IgogICAgICAgaW5rc2NhcGU6b3JpZ2luYWw9Ik0gMjEuMDk5NjA5IDggQyAxOS4zOTk2MDkgOCAxOC4wOTk2MDkgOS4zIDE4LjA5OTYwOSAxMSBMIDE4LjA5OTYwOSAyMS4zMDA3ODEgQyAxNi45OTk2MDkgMjAuMDAwNzgxIDE1Ljc5OTYwOSAxOSAxNC41OTk2MDkgMTkgQyAxMy42OTk2MDkgMTkgMTIuOSAxOS4zMDAzOTEgMTIuNSAxOS45MDAzOTEgQyAxMi4xIDIwLjQwMDM5MSAxMS43OTkyMTkgMjEuMjk5NjA5IDEyLjE5OTIxOSAyMi41OTk2MDkgQyAxMi41OTkyMTkgMjMuODk5NjA5IDE0LjI5OTIxOSAyNy41IDE2LjE5OTIxOSAzMC41IEMgMTYuODk5MjE5IDMxLjYgMTcuNTk5MjE5IDMyLjQ5OTIxOSAxOC4xOTkyMTkgMzMuMTk5MjE5IEMgMTkuMjk5MjE5IDM0LjU5OTIxOSAyMCAzNS41IDIwIDM3IEMgMjAgMzcuNiAyMC40IDM4IDIxIDM4IEwgMzMgMzggQyAzMy42IDM4IDM0IDM3LjYgMzQgMzcgQyAzNCAzNC42IDM0LjUgMzIuNjk5MjE5IDM1IDMwLjY5OTIxOSBDIDM1LjUgMjguNjk5MjE5IDM2IDI2LjYgMzYgMjQgTCAzNiAyMSBDIDM2IDE5LjMgMzQuNyAxOCAzMyAxOCBDIDMyLjYgMTggMzIuMjAwMzkxIDE4LjA5OTIxOSAzMS45MDAzOTEgMTguMTk5MjE5IEMgMzEuNTAwMzkxIDE2Ljg5OTIxOSAzMC40IDE2IDI5IDE2IEMgMjguNSAxNiAyNy45OTk2MDkgMTYuMTAwMzkxIDI3LjU5OTYwOSAxNi40MDAzOTEgQyAyNy4wOTk2MDkgMTUuNjAwMzkxIDI2LjE5OTYwOSAxNSAyNS4wOTk2MDkgMTUgQyAyNC42OTk2MDkgMTUgMjQuMzk5NjA5IDE1LjA5OTIxOSAyNC4wOTk2MDkgMTUuMTk5MjE5IEwgMjQuMDk5NjA5IDExIEMgMjQuMDk5NjA5IDkuMyAyMi43OTk2MDkgOCAyMS4wOTk2MDkgOCB6IE0gMjEgMTAgQyAyMS42IDEwIDIyIDEwLjQgMjIgMTEgTCAyMiAyMCBDIDIyIDIwLjYgMjIuNCAyMSAyMyAyMSBDIDIzLjYgMjEgMjQgMjAuNiAyNCAyMCBMIDI0IDE4IEMgMjQgMTcuNCAyNC40IDE3IDI1IDE3IEMgMjUuNiAxNyAyNiAxNy40IDI2IDE4IEwgMjYgMjEgQyAyNiAyMS42IDI2LjQgMjIgMjcgMjIgQyAyNy42IDIyIDI4IDIxLjYgMjggMjEgTCAyOCAxOSBDIDI4IDE4LjQgMjguNCAxOCAyOSAxOCBDIDI5LjYgMTggMzAgMTguNCAzMCAxOSBMIDMwIDIyIEMgMzAgMjIuNiAzMC40IDIzIDMxIDIzIEMgMzEuNiAyMyAzMiAyMi42IDMyIDIyIEwgMzIgMjEgQyAzMiAyMC40IDMyLjQgMjAgMzMgMjAgQyAzMy42IDIwIDM0IDIwLjQgMzQgMjEgTCAzNCAyNCBDIDM0IDI2LjMgMzMuNSAyOC4xOTkyMTkgMzMgMzAuMTk5MjE5IEMgMzIuNiAzMS45OTkyMTkgMzIuMSAzMy44IDMyIDM2IEwgMjEuOTAwMzkxIDM2IEMgMjEuNzAwMzkxIDM0LjMgMjAuNjk5NjA5IDMzLjIgMTkuNTk5NjA5IDMyIEMgMTguOTk5NjA5IDMxLjIgMTguNDAwNzgxIDMwLjUgMTcuODAwNzgxIDI5LjUgQyAxNS44MDA3ODEgMjYuMyAxNC4zIDIzLjEgMTQgMjIgQyAxMy45IDIxLjUgMTMuOSAyMS4xOTk2MDkgMTQgMjEuMDk5NjA5IEMgMTQuMSAyMC45OTk2MDkgMTQuMyAyMSAxNC41IDIxIEMgMTUuMiAyMSAxNy4xIDIyLjg5OTIxOSAxOCAyNS4xOTkyMTkgTCAxOCAyNiBDIDE4IDI2LjYgMTguNCAyNyAxOSAyNyBDIDE5LjYgMjcgMjAgMjYuNiAyMCAyNiBMIDIwIDExIEMgMjAgMTAuNCAyMC40IDEwIDIxIDEwIHogIgogICAgICAgaWQ9InBhdGg0MTQzIgogICAgICAgZD0ibSAyMS4wOTk2MDksOC40NTExNzE5IGMgLTEuNDY5ODY4LDAgLTIuNTQ4ODI4LDEuMDc4OTU5NCAtMi41NDg4MjgsMi41NDg4MjgxIGwgMCwxMC4zMDA3ODEgYSAwLjQ1MTQ1NjYzLDAuNDUxNDU2NjMgMCAwIDEgLTAuNzk0OTIyLDAuMjkxMDE2IGMgLTEuMDY5MjIzLC0xLjI2MzYyOCAtMi4yMDcyMywtMi4xNDA2MjUgLTMuMTU2MjUsLTIuMTQwNjI1IC0wLjc5OTU1NSwwIC0xLjQ0MDA1MiwwLjI3MjM4MyAtMS43MjQ2MDksMC42OTkyMTkgYSAwLjQ1MTQ1NjYzLDAuNDUxNDU2NjMgMCAwIDEgLTAuMDIzNDQsMC4wMzEyNSBjIC0wLjMwNDAzMSwwLjM4MDAzOSAtMC41ODQ3OSwxLjEwMTg3MyAtMC4yMjA3MDMsMi4yODUxNTYgMC4zNjMxNzIsMS4xODAzMDcgMi4wNzE0NDcsNC44MjYxMTIgMy45NDkyMTksNy43OTEwMTUgMC42ODY2NDMsMS4wNzkwMSAxLjM3MjM1LDEuOTYxNzUzIDEuOTYwOTM4LDIuNjQ4NDM4IGEgMC40NTE0NTY2MywwLjQ1MTQ1NjYzIDAgMCAxIDAuMDEzNjcsMC4wMTM2NyBjIDEuMTAwNTcyLDEuNDAwNzI5IDEuODk2NDg0LDIuNDM5NDgyIDEuODk2NDg0LDQuMDgwMDc4IDAsMC4xOTk2ODYgMC4wNTg3OCwwLjMyMjQ0OSAwLjE0MjU3OCwwLjQwNjI1IDAuMDgzOCwwLjA4MzggMC4yMDY1NjQsMC4xNDI1NzggMC40MDYyNSwwLjE0MjU3OCBsIDEyLDAgYyAwLjE5OTY4NiwwIDAuMzIyNDQ5LC0wLjA1ODc4IDAuNDA2MjUsLTAuMTQyNTc4IDAuMDgzOCwtMC4wODM4IDAuMTQyNTc4LC0wLjIwNjU2NCAwLjE0MjU3OCwtMC40MDYyNSAwLC0yLjQ2MjY5NiAwLjUxNDUyNCwtNC40MTM1NjQgMS4wMTM2NzIsLTYuNDEwMTU2IEMgMzUuMDYxNjQ4LDI4LjU5MzI1MiAzNS41NDg4MjgsMjYuNTQyMTI3IDM1LjU0ODgyOCwyNCBsIDAsLTMgYyAwLC0xLjQ2OTg2OSAtMS4wNzg5NTksLTIuNTQ4ODI4IC0yLjU0ODgyOCwtMi41NDg4MjggLTAuMzI1MzUyLDAgLTAuNjg2MTM4LDAuMDg1NDggLTAuOTU3MDMxLDAuMTc1NzgxIEEgMC40NTE0NTY2MywwLjQ1MTQ1NjYzIDAgMCAxIDMxLjQ2ODc1LDE4LjMzMjAzMSBDIDMxLjExOTk3NywxNy4xOTg1MiAzMC4yMDY3MDYsMTYuNDUxMTcyIDI5LDE2LjQ1MTE3MiBjIC0wLjQzOTU3NiwwIC0wLjgzNDgsMC4wODk5NyAtMS4xMjg5MDYsMC4zMTA1NDcgYSAwLjQ1MTQ1NjYzLDAuNDUxNDU2NjMgMCAwIDEgLTAuNjU0Mjk3LC0wLjEyMzA0NyBjIC0wLjQyNDc2NiwtMC42Nzk2MjYgLTEuMTgxNDQ0LC0xLjE4NzUgLTIuMTE3MTg4LC0xLjE4NzUgLTAuMzI1MzUyLDAgLTAuNTU4MDksMC4wNzYgLTAuODU3NDIxLDAuMTc1NzgxIGEgMC40NTE0NTY2MywwLjQ1MTQ1NjYzIDAgMCAxIC0wLjU5Mzc1LC0wLjQyNzczNCBsIDAsLTQuMTk5MjE5IGMgMCwtMS40Njk4Njg3IC0xLjA3ODk2LC0yLjU0ODgyODEgLTIuNTQ4ODI5LC0yLjU0ODgyODEgeiBNIDIxLDkuNTQ4ODI4MSBjIDAuNDAwMzE0LDAgMC43Nzg3MjMsMC4xNDAwNTExIDEuMDQ0OTIyLDAuNDA2MjUgMC4yNjYxOTksMC4yNjYxOTg5IDAuNDA2MjUsMC42NDQ2MDc5IDAuNDA2MjUsMS4wNDQ5MjE5IGwgMCw5IGMgMCwwLjE5OTY4NiAwLjA1ODc4LDAuMzIyNDQ5IDAuMTQyNTc4LDAuNDA2MjUgMC4wODM4LDAuMDgzOCAwLjIwNjU2NCwwLjE0MjU3OCAwLjQwNjI1LDAuMTQyNTc4IDAuMTk5Njg2LDAgMC4zMjI0NDksLTAuMDU4NzggMC40MDYyNSwtMC4xNDI1NzggMC4wODM4LC0wLjA4MzggMC4xNDI1NzgsLTAuMjA2NTY0IDAuMTQyNTc4LC0wLjQwNjI1IGwgMCwtMiBjIDAsLTAuNDAwMzE0IDAuMTQwMDUxLC0wLjc3ODcyMyAwLjQwNjI1LC0xLjA0NDkyMiAwLjI2NjE5OSwtMC4yNjYxOTkgMC42NDQ2MDgsLTAuNDA2MjUgMS4wNDQ5MjIsLTAuNDA2MjUgMC40MDAzMTQsMCAwLjc3ODcyMywwLjE0MDA1MSAxLjA0NDkyMiwwLjQwNjI1IDAuMjY2MTk5LDAuMjY2MTk5IDAuNDA2MjUsMC42NDQ2MDggMC40MDYyNSwxLjA0NDkyMiBsIDAsMyBjIDAsMC4xOTk2ODYgMC4wNTg3OCwwLjMyMjQ0OSAwLjE0MjU3OCwwLjQwNjI1IDAuMDgzOCwwLjA4MzggMC4yMDY1NjQsMC4xNDI1NzggMC40MDYyNSwwLjE0MjU3OCAwLjE5OTY4NiwwIDAuMzIyNDQ5LC0wLjA1ODc4IDAuNDA2MjUsLTAuMTQyNTc4IDAuMDgzOCwtMC4wODM4IDAuMTQyNTc4LC0wLjIwNjU2NCAwLjE0MjU3OCwtMC40MDYyNSBsIDAsLTIgYyAwLC0wLjQwMDMxNCAwLjE0MDA1MSwtMC43Nzg3MjMgMC40MDYyNSwtMS4wNDQ5MjIgMC4yNjYxOTksLTAuMjY2MTk5IDAuNjQ0NjA4LC0wLjQwNjI1IDEuMDQ0OTIyLC0wLjQwNjI1IDAuNDAwMzE0LDAgMC43Nzg3MjMsMC4xNDAwNTEgMS4wNDQ5MjIsMC40MDYyNSAwLjI2NjE5OSwwLjI2NjE5OSAwLjQwNjI1LDAuNjQ0NjA4IDAuNDA2MjUsMS4wNDQ5MjIgbCAwLDMgYyAwLDAuMTk5Njg2IDAuMDU4NzgsMC4zMjI0NDkgMC4xNDI1NzgsMC40MDYyNSAwLjA4MzgsMC4wODM4IDAuMjA2NTY0LDAuMTQyNTc4IDAuNDA2MjUsMC4xNDI1NzggMC4xOTk2ODYsMCAwLjMyMjQ0OSwtMC4wNTg3OCAwLjQwNjI1LC0wLjE0MjU3OCAwLjA4MzgsLTAuMDgzOCAwLjE0MjU3OCwtMC4yMDY1NjQgMC4xNDI1NzgsLTAuNDA2MjUgbCAwLC0xIGMgMCwtMC40MDAzMTQgMC4xNDAwNTEsLTAuNzc4NzIzIDAuNDA2MjUsLTEuMDQ0OTIyIDAuMjY2MTk5LC0wLjI2NjE5OSAwLjY0NDYwOCwtMC40MDYyNSAxLjA0NDkyMiwtMC40MDYyNSAwLjQwMDMxNCwwIDAuNzc4NzIzLDAuMTQwMDUxIDEuMDQ0OTIyLDAuNDA2MjUgMC4yNjYxOTksMC4yNjYxOTkgMC40MDYyNSwwLjY0NDYwOCAwLjQwNjI1LDEuMDQ0OTIyIGwgMCwzIGMgMCwyLjM2NTQyMiAtMC41MTQ1MzcsNC4zMTIwNTUgLTEuMDEzNjcyLDYuMzA4NTk0IGwgMC4wMDM5LC0wLjAxMTcyIGMgLTAuNDAzNDUsMS44MTU1MjYgLTAuODkyODI2LDMuNTc5Njc4IC0wLjk5MDIzNCw1LjcyMjY1NiBBIDAuNDUxNDU2NjMsMC40NTE0NTY2MyAwIDAgMSAzMiwzNi40NTExNzIgbCAtMTAuMDk5NjA5LDAgQSAwLjQ1MTQ1NjYzLDAuNDUxNDU2NjMgMCAwIDEgMjEuNDUxMTcyLDM2LjA1MjczNCBDIDIxLjI2ODk0OSwzNC41MDM4NCAyMC4zNjY4ODMsMzMuNTAzOTI5IDE5LjI2NzU3OCwzMi4zMDQ2ODggYSAwLjQ1MTQ1NjYzLDAuNDUxNDU2NjMgMCAwIDEgLTAuMDI5MywtMC4wMzMyIGMgLTAuNTg4MDA5LC0wLjc4NDAxMSAtMS4yMDEzNzMsLTEuNTAzMDEyIC0xLjgyMDMxMiwtMi41MzMyMDMgbCAtMC4wMDIsLTAuMDAyIGMgLTguNTZlLTQsLTAuMDAxNCAtMC4wMDExLC0wLjAwMjUgLTAuMDAyLC0wLjAwMzkgLTEuMDA3MjU0LC0xLjYxMjE0NCAtMS44ODYyNzYsLTMuMjIxMjc3IC0yLjU1NDY4NywtNC41NzAzMTMgLTAuNjY5MzA3LC0xLjM1MDg0NCAtMS4xMjM4ODIsLTIuNDE1ODIxIC0xLjI5NDkyMiwtMy4wNDI5NjggYSAwLjQ1MTQ1NjYzLDAuNDUxNDU2NjMgMCAwIDEgLTAuMDA3OCwtMC4wMzEyNSBjIC0wLjA1MzQxLC0wLjI2NzA0NyAtMC4wODM5OSwtMC40ODcyNzggLTAuMDgzOTksLTAuNjg3NSAwLC0wLjIwMDIyMiAtOC4yMWUtNCwtMC40MDkzMzUgMC4yMDg5ODUsLTAuNjE5MTQxIDAuMTU2NjA2LC0wLjE1NjYwNyAwLjMzMTY1NCwtMC4xOTc2NDIgMC40NjY3OTcsLTAuMjE2Nzk3IDAuMTM1MTQyLC0wLjAxOTE2IDAuMjUxODU2LC0wLjAxNTYzIDAuMzUxNTYyLC0wLjAxNTYzIDAuMzc5MTI2LDAgMC42NTY0NDgsMC4xNzk5MDUgMC45ODI0MjIsMC40MTk5MjIgMC4zMjU5NzQsMC4yNDAwMTcgMC42NzY5MTEsMC41Njg1ODEgMS4wMzEyNSwwLjk2ODc1IDAuNzA4Njc3LDAuODAwMzM4IDEuNDMyMzMzLDEuODg2NTM3IDEuOTA2MjUsMy4wOTc2NTYgYSAwLjQ1MTQ1NjYzLDAuNDUxNDU2NjMgMCAwIDEgMC4wMzEyNSwwLjE2NDA2MyBsIDAsMC44MDA3ODEgYyAwLDAuMTk5Njg2IDAuMDU4NzgsMC4zMjI0NDkgMC4xNDI1NzgsMC40MDYyNSAwLjA4MzgsMC4wODM4IDAuMjA2NTY0LDAuMTQyNTc4IDAuNDA2MjUsMC4xNDI1NzggMC4xOTk2ODYsMCAwLjMyMjQ0OSwtMC4wNTg3OCAwLjQwNjI1LC0wLjE0MjU3OCAwLjA4MzgsLTAuMDgzOCAwLjE0MjU3OCwtMC4yMDY1NjQgMC4xNDI1NzgsLTAuNDA2MjUgbCAwLC0xNSBjIDAsLTAuNDAwMzE0IDAuMTQwMDUxLC0wLjc3ODcyMyAwLjQwNjI1LC0xLjA0NDkyMTkgQyAyMC4yMjEyNzcsOS42ODg4NzkyIDIwLjU5OTY4Niw5LjU0ODgyODEgMjEsOS41NDg4MjgxIFoiCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxIiAvPgogIDwvZz4KICA8ZwogICAgIHN0eWxlPSJmaWxsOiMwMGZmZmY7ZmlsbC1vcGFjaXR5OjEiCiAgICAgaWQ9Imc0MTYxLTgiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoNS4zMjczMDUsMCwwLDUuMzI3MzA1LDIxNy4zNTE3MiwtNzguOTU4MzgpIiAvPgo8L3N2Zz4K");
background-size: 16px;
}
} }
.qcolors{ .qcolors{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment