use strict;return sub{my $this = shift;my $C = $this->{C};$this->out("<!doctype html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>GrapesJS Preset Webpage</title>\n    <link href=\"https://unpkg.com/grapesjs/dist/css/grapes.min.css\" rel=\"stylesheet\">\n    <link href=\"$C->{SYS}{URI}/themes/headfoot/delavo/gjs/dist/grapesjs-preset-webpage.min.css\" rel=\"stylesheet\">\n    <script src=\"//feather.aviary.com/imaging/v3/editor.js\"></script>\n    <script src=\"https://static.filestackapi.com/v3/filestack-0.1.10.js\"></script>\n    <script src=\"https://unpkg.com/grapesjs\"></script>\n    <script src=\"$C->{SYS}{URI}/themes/headfoot/delavo/gjs/dist/grapesjs-preset-webpage.min.js\"></script>\n    <script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\"></script>\n    <style>\n      body,\n      html {\n        height: 100\%;\n        margin: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <center>\n        <input id=\"getHTML\" type=\"button\" style=\"font-size: x-large;\" value=\"Save and close\" />\n    </center>\n    <div id=\"gjs\" style=\"height:0px; overflow:hidden\">\n      <div class=\"panel\">\n        <h1 class=\"welcome\">Welcome to</h1>\n        <div class=\"big-title\">\n          <svg class=\"logo\" viewBox=\"0 0 100 100\">\n            <path d=\"M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2\"/>\n          </svg>\n          <span>GrapesJS</span>\n        </div>\n        <div class=\"description\">\n          This is a demo content from index.html. For the development, you shouldn\'t edit this file, instead you can\n          copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.\n        </div>\n      </div>\n      <style>\n        .panel {\n          width: 90\%;\n          max-width: 700px;\n          border-radius: 3px;\n          padding: 30px 20px;\n          margin: 150px auto 0px;\n          background-color: #d983a6;\n          box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);\n          color:rgba(255,255,255,0.75);\n          font: caption;\n          font-weight: 100;\n        }\n\n        .welcome {\n          text-align: center;\n          font-weight: 100;\n          margin: 0px;\n        }\n\n        .logo {\n          width: 70px;\n          height: 70px;\n          vertical-align: middle;\n        }\n\n        .logo path {\n          pointer-events: none;\n          fill: none;\n          stroke-linecap: round;\n          stroke-width: 7;\n          stroke: #fff\n        }\n\n        .big-title {\n          text-align: center;\n          font-size: 3.5rem;\n          margin: 15px 0;\n        }\n\n        .description {\n          text-align: justify;\n          font-size: 1rem;\n          line-height: 1.5rem;\n        }\n      </style>\n    </div>\n\n    <script type=\"text/javascript\">\n      var editor = grapesjs.init({\n        height: \'100\%\',\n        showOffsets: 1,\n        noticeOnUnload: 0,\n        storageManager: { autoload: 0 },\n        container: \'#gjs\',\n        fromElement: true,\n\n        plugins: [\'gjs-preset-webpage\'],\n        pluginsOpts: {\n          \'gjs-preset-webpage\': {}\n        }\n      });\n      // editor.on(\'component:update\', () => {\n      //   var css = editor.getCss();\n      //   var html = editor.getHtml();\n      // })\n\n      window.onload = function () {\n          if (typeof (jQuery) == \"undefined\") {\n              var iframeBody = document.getElementsByTagName(\"body\")[0];\n              var jQuery = function (selector) { return window.opener.\$(selector, iframeBody); };\n              var \$ = jQuery;\n\n              editor.setComponents(window.opener.\$(\'.summernote\').val());\n\n              var btn1 = \$(\'#getHTML\');\n\n              btn1.on(\'click\', function () {\n                window.opener.\$(\'.summernote\').summernote(\'reset\');\n                window.opener.\$(\'.summernote\').summernote(\'pasteHTML\', \"<style>\" + editor.getCss() + \"</style>\" + editor.getHtml());\n                // window.opener.\$(\"#html\").val();\n                window.close();\n              });\n          }\n      }\n    </script>\n  </body>\n</html>");}