From 3a5cda2c52d918064a6196ea84d0281f054ab0a2 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 21 Nov 2017 21:39:59 +0100
Subject: [PATCH] Update mjml demo

---
 demo-mjml.html              | 96 +++++++++++++++++--------------------
 demo-newsletter-editor.html |  3 +-
 demo.html                   |  3 +-
 3 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/demo-mjml.html b/demo-mjml.html
index 9afc54fb4..7d5e4e8df 100644
--- a/demo-mjml.html
+++ b/demo-mjml.html
@@ -2,13 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>GrapesJS MJML Newsletter Builder</title>
-    <meta name="description" content="GrapesJS MJML Newsletter Builder - Next generation tool for building newsletters without coding">
+    <title>GrapesJS Demo - Free Open Source MJML Newsletter Builder</title>
+    <meta name="description" content="GrapesJS MJML Newsletter Builder - Best Free Open Source Responsive MJML Newsletter Editor">
     <meta name="keywords" content="newsletter builder, web template editor, html builder, html editor">
     <link rel="stylesheet" href="./stylesheets/grapes.min.css">
     <link rel="stylesheet" href="./stylesheets/tooltip.css">
     <link rel="stylesheet" href="./stylesheets/toastr.min.css">
     <link rel="stylesheet" href="./stylesheets/grapesjs-mjml.css">
+    <link rel="stylesheet" href="stylesheets/demos.css">
 
     <script src="js/grapes.min.js"></script>
     <script src="./js/toastr.min.js"></script>
@@ -24,54 +25,16 @@
 
   </head>
   <style>
-    body, html{
-      height: 100%;
-      margin: 0;
-      overflow: hidden;
-    }
-
-    #gjs-pn-commands,
     .gjs-clm-tags {
        display: none;
     }
 
-    .info-link {
-      text-decoration: none;
-    }
-
-    #info-cont {
-      line-height: 17px;
-    }
-
-    .grapesjs-logo {
-      display: block;
-      height: 90px;
-      margin: 0 auto;
-      width: 90px;
-    }
-
-    .grapesjs-logo path{
-      stroke: #eee !important;
-      stroke-width: 8 !important;
-    }
-
-    /* Toast style */
-    #toast-container {
-      font-size: 13px;
-      font-weight: lighter;
-    }
-    #toast-container > div,
-    #toast-container > div:hover {
-      box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
-      font-family: Helvetica, sans-serif;
-    }
-    #toast-container > div{
-      opacity: 0.95;
+    .gjs-four-color {
+      color: #f45e43;
     }
 
-    #gjs-pn-devices-c {
-      width: 85%;
-      z-index: 1;
+    .gjs-logo-version {
+      background-color: #4b4e54;
     }
   </style>
   <body>
@@ -152,23 +115,37 @@
 
     </div>
 
-    <div id="info-cont" style="display:none">
+    <div id="info-panel" style="display:none">
       <br/>
-      <svg class="grapesjs-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><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" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#fff"/></g></svg>
+      <svg class="info-panel-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><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" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#fff"/></g></svg>
       <br/>
-      <div class="gjs-import-label">
+      <div class="info-panel-label">
         <b>GrapesJS MJML Newsletter Builder</b> was made not only to show what is possible to achive with the
-        <a class="info-link gjs-color-active" target="_blank" href="http://artf.github.io/grapesjs/">GrapesJS</a>
+        <a class="info-panel-link gjs-four-color" target="_blank" href="http://artf.github.io/grapesjs/">GrapesJS</a>
         core library, but also to help non-tech people build responsive cross-platform newsletters using the amazing
-        <a class="info-link gjs-color-active" target="_blank" href="https://mjml.io">MJML</a> markup language
+        <a class="info-panel-link gjs-four-color" target="_blank" href="https://mjml.io">MJML</a> markup language
         <br/><br/>
         For any problem with the builder, open an issue on the main
-        <a class="info-link gjs-color-active" target="_blank" href="https://github.com/artf/grapesjs">GrapesJS repository</a>.
+        <a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/artf/grapesjs">GrapesJS repository</a>.
         <br/><br/>
         Being a free and open source project contributors and supporters are extremely welcome.
+        If you like the project support it with a donation of your choice or become a backer/sponsor via
+        <a class="info-panel-link gjs-four-color" target="_blank" href="https://opencollective.com/grapesjs">Open Collective</a>
       </div>
     </div>
 
+    <div style="display: none">
+      <div class="gjs-logo-cont">
+        <a href="//grapesjs.com"><img class="gjs-logo" src="img/grapesjs-logo-cl.png"></a>
+        <div class="gjs-logo-version"></div>
+      </div>
+    </div>
+
+
+    <div class="ad-cont">
+      <div id="code-sponsor-widget"></div>
+    </div>
+
 
     <script type="text/javascript">
       CKEDITOR.dtd.$editable.a = 1;
@@ -223,7 +200,7 @@
       var md = editor.Modal;
 
       // Add info command
-      var infoContainer = document.getElementById("info-cont");
+      var infoContainer = document.getElementById("info-panel");
       cmdm.add('open-info', {
         run(editor, sender) {
           sender.set('active', 0);
@@ -273,8 +250,22 @@
         el.setAttribute('data-tooltip', title);
         el.setAttribute('title', '');
       }
-    </script>
 
+
+      // Do stuff on load
+      editor.on('load', function() {
+        var $ = grapesjs.$;
+
+        // Show logo with the version
+        var logoCont = document.querySelector('.gjs-logo-cont');
+        document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
+        var logoPanel = document.querySelector('#gjs-pn-commands');
+        logoPanel.appendChild(logoCont);
+
+        // Move Ad
+        $('#gjs').append($('.ad-cont'));
+      });
+    </script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -284,5 +275,6 @@
       ga('create', 'UA-74284223-1', 'auto');
       ga('send', 'pageview');
     </script>
+    <script type="text/javascript" src="https://app.codesponsor.io/scripts/OoCl1gjRd-YmpYfszYJ1Dg?theme=dark&width=100%25"></script>
   </body>
 </html>
diff --git a/demo-newsletter-editor.html b/demo-newsletter-editor.html
index 51006aeda..33ea8d9c6 100644
--- a/demo-newsletter-editor.html
+++ b/demo-newsletter-editor.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>GrapesJS Newsletter Editor</title>
+    <title>GrapesJS Demo - Free Open Source Newsletter Editor</title>
+    <meta content="Best Free Open Source Responsive Newsletter Builder" name="description">
     <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.12.5">
     <link rel="stylesheet" href="stylesheets/material.css">
     <link rel="stylesheet" href="stylesheets/tooltip.css">
diff --git a/demo.html b/demo.html
index ead7cbf8e..4f8aed867 100644
--- a/demo.html
+++ b/demo.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>GrapesJS Demo - Open Source Website Page Builder</title>
+    <title>GrapesJS Demo - Free Open Source Website Page Builder</title>
+    <meta content="Best Free Open Source Responsive Websites Builder" name="description">
     <link rel="stylesheet" href="stylesheets/toastr.min.css">
     <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.12.41">
     <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css">