Update pages.html

pages.html

@@ -1209,208 +1209,210 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
 <script src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/per.js"></script>
 
-<script type="text/javascript">
-  var editor = grapesjs.init({
-    container: '#gjs',
-    fromElement: true,
-    height: "100vh",
-    storageManager: {
-      type: 'local',
-      autosave: true,
-      autoload: true,
-      stepsBeforeSave: 1,
-    },
-    plugins: [
-      "gjs-blocks-basic",
-      "grapesjs-component-countdown",
-      "grapesjs-component-code-editor",
-      "grapesjs-templates",
-      "grapesjs-rte-extensions",
-      "grapesjs-user-blocks",
-      "grapesjs-tabs", // Плагин вкладок
-      "grapesjs-tooltip", // Плагин подсказок
-      "grapesjs-script-editor", // Плагин редактора скриптов
-      "grapesjs-rulers", // Добавляем плагин линеек
-      "grapesjs-tui-image-editor" // Добавляем плагин редактора изображений
-    ],
-    pluginsOpts: {
-      "gjs-blocks-basic": {
-        blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social', 'image', 'video'],
-        blocksBasicOpts: {
-          flexGrid: true,
-          stylePrefix: 'gjs-',
-          columns: 12,
-          rowHeight: 75,
-          addBasicStyle: true
-        }
-      },
-      "grapesjs-component-code-editor": {
-        panelId: 'views-container',
-        appendTo: '.gjs-pn-views-container',
-        openState: { pn: '35%', cv: '65%' },
-        closedState: { pn: '15%', cv: '85%' },
-        codeViewOptions: {},
-        preserveWidth: false,
-        clearData: false,
-        editJs: true,
-        cleanCssBtn: true,
-        htmlBtnText: 'Применить',
-        cssBtnText: 'Применить',
-        cleanCssBtnText: 'Удалить'
-      },
-      "grapesjs-templates": {
-        // Настройки для grapesjs-templates
+
+
+  <script type="text/javascript">
+    var editor = grapesjs.init({
+      container: '#gjs',
+      fromElement: true,
+      height: "100vh",
+      storageManager: {
+        type: 'local',
+        autosave: true,
+        autoload: true,
+        stepsBeforeSave: 1,
       },
-      "grapesjs-rte-extensions": {
-        base: {
-          bold: true,
-          italic: true,
-          underline: true,
-          strikethrough: true,
-          link: true,
+      plugins: [
+        "gjs-blocks-basic",
+        "grapesjs-component-countdown",
+        "grapesjs-component-code-editor",
+        "grapesjs-templates",
+        "grapesjs-rte-extensions",
+        "grapesjs-user-blocks",
+        "grapesjs-tabs", // Плагин вкладок
+        "grapesjs-tooltip", // Плагин подсказок
+        "grapesjs-script-editor", // Плагин редактора скриптов
+        "grapesjs-rulers", // Добавляем плагин линеек
+        "grapesjs-tui-image-editor" // Добавляем плагин редактора изображений
+      ],
+      pluginsOpts: {
+        "gjs-blocks-basic": {
+          blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social', 'image', 'video'],
+          blocksBasicOpts: {
+            flexGrid: true,
+            stylePrefix: 'gjs-',
+            columns: 12,
+            rowHeight: 75,
+            addBasicStyle: true
+          }
         },
-        fonts: {
-          fontColor: true,
-          hilite: true,
+        "grapesjs-component-code-editor": {
+          panelId: 'views-container',
+          appendTo: '.gjs-pn-views-container',
+          openState: { pn: '35%', cv: '65%' },
+          closedState: { pn: '15%', cv: '85%' },
+          codeViewOptions: {},
+          preserveWidth: false,
+          clearData: false,
+          editJs: true,
+          cleanCssBtn: true,
+          htmlBtnText: 'Применить',
+          cssBtnText: 'Применить',
+          cleanCssBtnText: 'Удалить'
         },
-        format: {
-          heading1: true,
-          heading2: true,
-          heading3: true,
-          paragraph: true,
-          clearFormatting: true,
+        "grapesjs-templates": {
+          // Настройки для grapesjs-templates
         },
-        align: true,
-        darkColorPicker: true,
-        maxWidth: '600px'
-      },
-      "grapesjs-user-blocks": {
-        // Настройки для grapesjs-user-blocks
-      },
-      "grapesjs-tabs": {
-        // Настройки для grapesjs-tabs
-      },
-      "grapesjs-tooltip": {
-        // Настройки для grapesjs-tooltip
-      },
-      "grapesjs-script-editor": {
-        // Настройки для grapesjs-script-editor
-        starter: 'let el = this',
-        toolbarIcon: '<i class="fa fa-puzzle-piece"></i>',
-        scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'],
-        toolbarBtnCustomScript: {},
-        onRun: () => console.log('valid syntax'),
-        onError: err => console.log('error:', err),
-        modalTitle: 'Script',
-        codeViewOptions: {},
-        buttonLabel: 'save',
-        commandAttachScript: {}
-      },
-      "grapesjs-rulers": {
-        // Настройки для grapesjs-rulers
-        dragMode: 'translate',
-        rulerHeight: 15,
-        canvasZoom: 94,
-        rulerOpts: {}
-      },
-      "grapesjs-tui-image-editor": {
-        config: {
-          includeUI: {
-            initMenu: 'filter',
+        "grapesjs-rte-extensions": {
+          base: {
+            bold: true,
+            italic: true,
+            underline: true,
+            strikethrough: true,
+            link: true,
           },
+          fonts: {
+            fontColor: true,
+            hilite: true,
+          },
+          format: {
+            heading1: true,
+            heading2: true,
+            heading3: true,
+            paragraph: true,
+            clearFormatting: true,
+          },
+          align: true,
+          darkColorPicker: true,
+          maxWidth: '600px'
+        },
+        "grapesjs-user-blocks": {
+          // Настройки для grapesjs-user-blocks
+        },
+        "grapesjs-tabs": {
+          // Настройки для grapesjs-tabs
         },
-        labelImageEditor: 'Image Editor',
-        labelApply: 'Apply',
-        height: '650px',
-        width: '100%',
-        hideHeader: true,
-        addToAssets: true,
-        upload: false
+        "grapesjs-tooltip": {
+          // Настройки для grapesjs-tooltip
+        },
+        "grapesjs-script-editor": {
+          // Настройки для grapesjs-script-editor
+          starter: 'let el = this',
+          toolbarIcon: '<i class="fa fa-puzzle-piece"></i>',
+          scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'],
+          toolbarBtnCustomScript: {},
+          onRun: () => console.log('valid syntax'),
+          onError: err => console.log('error:', err),
+          modalTitle: 'Script',
+          codeViewOptions: {},
+          buttonLabel: 'save',
+          commandAttachScript: {}
+        },
+        "grapesjs-rulers": {
+          // Настройки для grapesjs-rulers
+          dragMode: 'translate',
+          rulerHeight: 15,
+          canvasZoom: 94,
+          rulerOpts: {}
+        },
+        "grapesjs-tui-image-editor": {
+          config: {
+            includeUI: {
+              initMenu: 'filter',
+            },
+          },
+          labelImageEditor: 'Image Editor',
+          labelApply: 'Apply',
+          height: '650px',
+          width: '100%',
+          hideHeader: true,
+          addToAssets: true,
+          upload: false
+        }
       }
-    }
-  });
-
-  // Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки
-  editor.Panels.addButton('options', {
-    id: 'toggle-rulers',
-    label: `<svg width="16" height="16" viewBox="0 0 16 16">
-              <path d="M0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8z"/>
-              <path d="M4 3h8a1 1 0 0 1 1 1v2.5h1V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2.5h1V4a1 1 0 0 1 1-1zM3 9.5H2V12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9.5h-1V12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z"/>
-            </svg>`,
-    command: 'ruler-visibility', // Команда для переключения видимости линеек
-    attributes: { title: 'Toggle Rulers' }
-  });
+    });
 
-  // Функция для обновления информации о положении элемента
-  function updatePositionInfo(component) {
-    const positionInfo = document.getElementById('position-info');
-    if (component) {
-      const { x, y, width, height } = component.getBoundingRect();
-      const { width: canvasWidth, height: canvasHeight } = editor.Canvas.getCanvasElement().getBoundingClientRect();
-      const xPercent = (x / canvasWidth * 100).toFixed(2);
-      const yPercent = (y / canvasHeight * 100).toFixed(2);
-      positionInfo.textContent = `Position: X: ${x}px (${xPercent}%), Y: ${y}px (${yPercent}%), Width: ${width}px, Height: ${height}px`;
-    } else {
-      positionInfo.textContent = 'Position: ';
+    // Функция для обновления информации о положении элемента
+    function updatePositionInfo(component) {
+      const positionInfo = document.getElementById('position-info');
+      if (component) {
+        const { x, y, width, height } = component.getBoundingRect();
+        const { width: canvasWidth, height: canvasHeight } = editor.Canvas.getCanvasElement().getBoundingClientRect();
+        const xPercent = (x / canvasWidth * 100).toFixed(2);
+        const yPercent = (y / canvasHeight * 100).toFixed(2);
+        positionInfo.textContent = `Position: X: ${x}px (${xPercent}%), Y: ${y}px (${yPercent}%), Width: ${width}px, Height: ${height}px`;
+      } else {
+        positionInfo.textContent = 'Position: ';
+      }
     }
-  }
 
-  // Подписываемся на события перетаскивания и выбора элемента
-  editor.on('component:drag:start', (component) => {
-    updatePositionInfo(component);
-  });
-
-  editor.on('component:drag', (component) => {
-    updatePositionInfo(component);
-  });
+    // Подписываемся на события перетаскивания и выбора элемента
+    editor.on('component:drag:start', (component) => {
+      updatePositionInfo(component);
+    });
 
-  editor.on('component:drag:stop', (component) => {
-    updatePositionInfo(component);
-  });
+    editor.on('component:drag', (component) => {
+      updatePositionInfo(component);
+    });
 
-  editor.on('component:selected', (component) => {
-    updatePositionInfo(component);
-  });
+    editor.on('component:drag:stop', (component) => {
+      updatePositionInfo(component);
+    });
 
-  // Добавляем обработчики событий для перемещения элементов
-  let isDragging = false;
-  let offsetX = 0;
-  let offsetY = 0;
-  let selectedComponent: Component | null = null;
-
-  function startDrag(e: MouseEvent, component: Component) {
-    isDragging = true;
-    selectedComponent = component;
-    const rect = component.getEl().getBoundingClientRect();
-    offsetX = e.clientX - rect.left;
-    offsetY = e.clientY - rect.top;
-    document.addEventListener('mousemove', drag);
-    document.addEventListener('mouseup', stopDrag);
-  }
+    editor.on('component:selected', (component) => {
+      updatePositionInfo(component);
+    });
 
-  function drag(e: MouseEvent) {
-    if (!isDragging || !selectedComponent) return;
-    const newX = e.clientX - offsetX;
-    const newY = e.clientY - offsetY;
-    selectedComponent.set('position', { x: newX, y: newY });
-  }
+    // Добавляем обработчики событий для перемещения элементов
+    let isDragging = false;
+    let offsetX = 0;
+    let offsetY = 0;
+    let selectedComponent = null;
+
+    function startDrag(e, component) {
+      isDragging = true;
+      selectedComponent = component;
+      const rect = component.getEl().getBoundingClientRect();
+      offsetX = e.clientX - rect.left;
+      offsetY = e.clientY - rect.top;
+      document.addEventListener('mousemove', drag);
+      document.addEventListener('mouseup', stopDrag);
+    }
 
-  function stopDrag() {
-    isDragging = false;
-    selectedComponent = null;
-    document.removeEventListener('mousemove', drag);
-    document.removeEventListener('mouseup', stopDrag);
-  }
+    function drag(e) {
+      if (!isDragging || !selectedComponent) return;
+      const newX = e.clientX - offsetX;
+      const newY = e.clientY - offsetY;
+      selectedComponent.set('position', { x: newX, y: newY });
+    }
 
-  editor.on('component:selected', (component: Component) => {
-    component.getEl().addEventListener('mousedown', (e: MouseEvent) => startDrag(e, component));
-  });
-</script>
+    function stopDrag() {
+      isDragging = false;
+      selectedComponent = null;
+      document.removeEventListener('mousemove', drag);
+      document.removeEventListener('mouseup', stopDrag);
+    }
 
+    editor.on('component:selected', (component) => {
+      component.getEl().addEventListener('mousedown', (e) => startDrag(e, component));
+    });
+  </script>
 
 
 
+<script>
 
+  // Добавляем кнопку линейки в верхнюю панель инструментов с использованием SVG-иконки
+  editor.Panels.addButton('options', {
+    id: 'toggle-rulers',
+    label: `<svg width="16" height="16" viewBox="0 0 16 16">
+              <path d="M0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8z"/>
+              <path d="M4 3h8a1 1 0 0 1 1 1v2.5h1V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2.5h1V4a1 1 0 0 1 1-1zM3 9.5H2V12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9.5h-1V12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z"/>
+            </svg>`,
+    command: 'ruler-visibility', // Команда для переключения видимости линеек
+    attributes: { title: 'Toggle Rulers' }
+  });
+</script>
 
 <script type="text/javascript" src="https://huggingface.co/spaces/DMTuit/psy_vk/resolve/main/js/rus/rus.js"></script>