From f4cfbda48fdb2cd876bd9d30ae5b86dc903390f2 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 9 Apr 2019 18:00:23 +0200
Subject: [PATCH 1/9] landing page design

---
 src/app/ui/landing-page/landing-page.js | 266 ++++++++++--------------
 1 file changed, 106 insertions(+), 160 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 6569a7bcee..29328217e2 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -15,7 +15,6 @@ let css = csjs`
     max-width       : 300px;
     min-height      : 200px;
     background-color: var(--light);
-    font-family     : "Lucida Console", Monaco, monospace;
   }
   .landingPage {
     height          : 100%;
@@ -55,16 +54,29 @@ let css = csjs`
 }
 `
 
-import { defaultWorkspaces } from './workspace'
 import { ApiFactory } from 'remix-plugin'
-import Section from './section'
 
 export class LandingPage extends ApiFactory {
 
   constructor (appManager, appStore) {
     super()
     this.appStore = appStore
-    this.sections = []
+    this.appManager = appManager
+  }
+
+  get profile () {
+    return {
+      displayName: 'Home',
+      name: 'home',
+      methods: [],
+      events: [],
+      description: ' - ',
+      icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+',
+      location: 'mainPanel'
+    }
+  }
+
+  render () {
     let load = function (item) {
       let compilerImport = new CompilerImport()
       let fileProviders = globalRegistry.get('fileproviders').api
@@ -86,174 +98,108 @@ export class LandingPage extends ApiFactory {
         }
       })
     }
-    let fileExplorer = globalRegistry.get('fileexplorer/browser').api
-    var actionsStart = [
-      { label: 'New file',
-        type: 'callback',
-        payload: () => {
-          fileExplorer.createNewFile()
-        }
-      },
-      {
-        // Open a file
-        label: yo`
-          <label class="${css.text} m-0 h6 text-dark">
-            Open file
-            <input title="open file" type="file" onchange="${
-              (event) => {
-                event.stopPropagation()
-                fileExplorer.uploadFile(event)
-              }
-            }" multiple />
-          </label>
-        `,
-        type: `callback`,
-        description: ``,
-        payload: () => {}
-      },
-      { label: 'Import from Gist',
-        type: `callback`,
-        description: ``,
-        payload: () => {
-          let app = globalRegistry.get('app').api
-          app.loadFromGist({gist: ''})
-        }
-      },
-      { label: 'Import from GitHub',
-        type: `callback`,
-        description: ``,
-        payload: () => {
-          load('URL')
-        }
-      },
-      { label: 'Import from Swarm',
-        type: `callback`,
-        description: ``,
-        payload: () => { load('bzz-raw URL') }
-      },
-      { label: 'Import from IPFS',
-        type: `callback`,
-        description: ``,
-        payload: () => { load('IPFS URL') }
-      },
-      { label: 'Connect to localhost',
-        type: `callback`,
-        description: ``,
-        payload: () => {
-          appManager.ensureActivated('remixd')
-        }
-      }
-    ]
-
-    var actionsResources = [
-      { label: 'Remix documentation', type: `link`, description: ``, payload: `https://remix.readthedocs.io/en/latest/#` },
-      { label: 'Medium posts', type: `link`, description: ``, payload: `https://medium.com/remix-ide` },
-      { label: 'Gitter channel', type: `link`, description: ``, payload: `https://gitter.im/ethereum/remix` }
-    ]
-
-    var sectionStart = new Section('Start', actionsStart)
-    let sectionResources = new Section('Resources', actionsResources)
-
-    this.sectionWorkspaceMain = []
-    // this.sectionWorkspaceOthers = []
-    defaultWorkspaces(appManager).forEach((workspace) => {
-      if (workspace.isMain) {
-        this.sectionWorkspaceMain.push({
-          label: workspace.title,
-          type: 'callback',
-          description: workspace.description,
-          payload: () => { workspace.activate() }
-        })
-      } else {
-        /* this.sectionWorkspaceOthers.push({
-          label: workspace.title,
-          type: 'callback',
-          description: workspace.description,
-          payload: () => { workspace.activate() }
-        }) */
-      }
-    })
+    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEzLjM2NXB4IiBoZWlnaHQ9IjIwOS44NzNweCIgdmlld0JveD0iMjI3LjM4NyA5OS4wNTEgNjEzLjM2NSAyMDkuODczIg0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDIyNy4zODcgOTkuMDUxIDYxMy4zNjUgMjA5Ljg3MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDM0LjU4MiwxNzYuMjA2YzAuODExLDAsMS42MjIsMC4yODUsMi40MzgsMC44NTNjMC44MTEsMC41NzEsMS4yMTcsMS4zNCwxLjIxNywyLjMxNA0KCQljMCwyLjI3Ni0xLjA1OSwzLjQ5Ni0zLjE2OCwzLjY1NWMtNS4wMzcsMC44MTQtOS4zODEsMi4zNTYtMTMuMDM2LDQuNjMxYy0zLjY1NSwyLjI3NS02LjY2Myw1LjExNi05LjAxNyw4LjUyNw0KCQljLTIuMzU2LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM4LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDcsOC44MTQtMS43MDcsMTMuNTI0djMyLjY1MmMwLDIuMjczLTEuMTM5LDMuNDExLTMuNDExLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIyYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzIsMCwzLjQxMSwxLjEzOCwzLjQxMSwzLjQxMXYxNS4xMDcNCgkJYzEuNDYzLTIuNDM3LDMuMjA3LTQuNzUyLDUuMjQtNi45NDVjMi4wMjgtMi4xOTIsNC4yNjQtNC4xNDMsNi43LTUuODQ4YzIuNDM4LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM0MjguNzcxLDE3Ni43MzQsNDMxLjY1OCwxNzYuMjA2LDQzNC41ODIsMTc2LjIwNnoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNTAxLjc3MywxNzQuNWM1LjY4NSwwLDEwLjk2NiwxLjE4MSwxNS44MzgsMy41MzRjNC44NzUsMi4zNTUsOS4wNTYsNS40ODEsMTIuNTUxLDkuMzgxDQoJCWMzLjQ5MiwzLjg5OCw2LjIxNCw4LjQwNiw4LjE2NCwxMy41MjNjMS45NDksNS4xMTcsMi45MjQsMTAuNDQsMi45MjQsMTUuOTYxYzAsMC45NzctMC4zNjYsMS43OS0xLjA5OCwyLjQzOA0KCQljLTAuNzMsMC42NDktMS41ODIsMC45NzUtMi41NTksMC45NzVoLTY3Ljk4NmMwLjQ4Niw0LjIyNywxLjU4NCw4LjI4NSwzLjI4OSwxMi4xODVjMS43MDcsMy44OTgsMy45MzgsNy4zMTIsNi43MDEsMTAuMjMzDQoJCWMyLjc2MiwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ni0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTQsMy40MTIsMy40MTJjMCwwLjE2My0wLjE2NCwwLjczLTAuNDg2LDEuNzA1DQoJCWMtMy40MTIsNi4wMTMtOC4yMDUsMTAuNDc5LTE0LjM3NywxMy40MDJjLTYuMTc3LDIuOTI0LTEyLjY3Miw0LjM4Ny0xOS40OTYsNC4zODdjLTUuNjg4LDAtMTAuOTI4LTEuMTgxLTE1LjcxNy0zLjUzMw0KCQljLTQuNzkzLTIuMzU0LTguOTM3LTUuNDgyLTEyLjQyOS05LjM4MmMtMy40OTUtMy44OTktNi4yMTQtOC40MDctOC4xNjMtMTMuNTI0cy0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFzNC42NjgtOS42MjUsOC4xNjMtMTMuNTIzYzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOS05LjM4MQ0KCQlDNDkwLjg0NiwxNzUuNjgxLDQ5Ni4wODQsMTc0LjUsNTAxLjc3MywxNzQuNXogTTUzMy45MzksMjEzLjQ4OWMtMC4zMjgtNC4yMjMtMS4zNC04LjI4NC0zLjA0NS0xMi4xODQNCgkJYy0xLjcwNy0zLjg5OC0zLjk4Mi03LjMxMi02LjgyNC0xMC4yMzVjLTIuODQ0LTIuOTI0LTYuMTc0LTUuMjc2LTkuOTktNy4wNjZjLTMuODE5LTEuNzg1LTcuOTItMi42OC0xMi4zMDctMi42OA0KCQljLTQuNTQ5LDAtOC42OTEsMC44OTUtMTIuNDI4LDIuNjhjLTMuNzM4LDEuNzktNi45ODYsNC4xNDQtOS43NDgsNy4wNjZjLTIuNzY0LDIuOTI1LTQuOTk0LDYuMzM3LTYuNzAxLDEwLjIzNQ0KCQljLTEuNzA1LDMuODk4LTIuODAxLDcuOTYxLTMuMjg5LDEyLjE4NEg1MzMuOTM5eiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik02NjguNjg5LDE3NC43NDNjNS4wMzUsMCw5LjUwNCwxLjAxOCwxMy40MDIsMy4wNDdjMy44OTksMi4wMzMsNy4xODksNC42NzIsOS44Nyw3LjkyDQoJCWMyLjY4MSwzLjI1MSw0LjcwOSw3LjA2NSw2LjA5MywxMS40NTJjMS4zNzksNC4zODcsMi4wNjksOC44NTUsMi4wNjksMTMuNDAxdjQzLjYyYzAsMC45NzYtMC4zNjUsMS43ODktMS4wOTcsMi40MzgNCgkJYy0wLjczLDAuNjQ2LTEuNTA0LDAuOTc1LTIuMzEzLDAuOTc1Yy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTQzLjYyYzAtMy41Ny0wLjUyOS03LjEwNC0xLjU4NS0xMC42DQoJCWMtMS4wNTktMy40OTEtMi42MDItNi42MTgtNC42My05LjM4MmMtMi4wMzMtMi43NjEtNC41OTItNC45NTMtNy42NzctNi41OGMtMy4wODgtMS42MjEtNi42NjItMi40MzctMTAuNzIyLTIuNDM3DQoJCWMtNS4yLDAtOS41ODgsMS4yMTktMTMuMTU5LDMuNjU0Yy0zLjU3NCwyLjQzOC02LjQ1Nyw1LjU2Ni04LjY1LDkuMzgyYy0yLjE5MiwzLjgxOS0zLjgxNyw4LjA0Mi00Ljg3NCwxMi42NzINCgkJYy0xLjA1OSw0LjYzMS0xLjU4NCw5LjA1OS0xLjU4NCwxMy4yOHYzMy42MjljMCwwLjk3Ni0wLjM2NSwxLjc4OS0xLjA5NiwyLjQzOGMtMC43MywwLjY0Ni0xLjUwNSwwLjk3NS0yLjMxNSwwLjk3NQ0KCQljLTIuMjc2LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMnYtNDMuNjJjMC0zLjU3LTAuNTI5LTcuMTA0LTEuNTg0LTEwLjZjLTEuMDU5LTMuNDkxLTIuNjAyLTYuNjE4LTQuNjMtOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNy0xMC43MjMtMi40MzdjLTUuMDM2LDAtOS4zNDQsMC44OTYtMTIuOTE0LDIuNjgxDQoJCWMtMy41NzUsMS43OS02LjU0Miw0LjI2Ni04Ljg5Niw3LjQzM2MtMi4zNTYsMy4xNjctNC4wNjIsNi45NDQtNS4xMTYsMTEuMzMxYy0xLjA2LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5NmMwLDIuMjcyLTEuMTM5LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDEyLTEuMTQtMy40MTItMy40MTJ2LTc0LjU2NmMwLTIuMjczLDEuMTM2LTMuNDExLDMuNDEyLTMuNDExDQoJCWMyLjI3MiwwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2LTkuMzgyLDExLjgxOC0xMi41NWM0Ljk1NC0zLjE2NywxMC41MTgtNC43NTIsMTYuNjkxLTQuNzUyDQoJCWM2Ljk4NCwwLDEyLjk5NiwxLjk5LDE4LjAzMyw1Ljk3YzUuMDMyLDMuOTgzLDguNjg4LDkuMjIzLDEwLjk2NSwxNS43MTljMi43NjEtNi4zMzYsNi43NC0xMS41MzMsMTEuOTQtMTUuNTk2DQoJCUM2NTUuMTI1LDE3Ni43NzYsNjYxLjM4LDE3NC43NDMsNjY4LjY4OSwxNzQuNzQzeiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03NDIuNzUzLDE3Ni42OTNjMC44MTIsMCwxLjU4NCwwLjM2NSwyLjMxMywxLjA5OGMwLjczMSwwLjcyOSwxLjA5OCwxLjUwNCwxLjA5OCwyLjMxM3Y3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5OCwyLjMxNWMtMC43MjksMC43MjktMS41MDQsMS4wOTctMi4zMTMsMS4wOTdjLTAuOTc2LDAtMS43OS0wLjM2Ni0yLjQzOC0xLjA5Nw0KCQljLTAuNjQ5LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzEzQzc0MC45NjMsMTc3LjA1OSw3NDEuNzc3LDE3Ni42OTMsNzQyLjc1MywxNzYuNjkzeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNODM3LjM0LDE3NS45NjJjMi4yNzMsMCwzLjQxMiwxLjEzOSwzLjQxMiwzLjQxMWwtMC40ODcsMS45NWwtMjQuMzY4LDM1LjMzNGwyNC4zNjgsMzUuNTc2DQoJCWMwLjMyMywwLjk3NywwLjQ4NywxLjYyNiwwLjQ4NywxLjk1YzAsMi4yNzItMS4xMzksMy40MTItMy40MTIsMy40MTJjLTEuMzAyLDAtMi4xOTMtMC40ODgtMi42OC0xLjQ2M2wtMjIuOTA2LTMzLjM4NA0KCQlsLTIyLjY2MywzMy4zODRjLTAuODEzLDAuOTc1LTEuNzksMS40NjMtMi45MjQsMS40NjNjLTIuMjc3LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMmMwLTAuMzI0LDAuMTU5LTAuOTc1LDAuNDg2LTEuOTUNCgkJbDI0LjM2OS0zNS41NzZsLTI0LjM2OS0zNS4zMzRsLTAuNDg2LTEuOTVjMC0yLjI3MiwxLjEzNC0zLjQxMSwzLjQxMS0zLjQxMWMxLjEzNCwwLDIuMTA5LDAuNDg3LDIuOTI0LDEuNDYybDIyLjY2MywzMy4xNDENCgkJbDIyLjkwNi0zMy4xNDFDODM1LjE0NiwxNzYuNDQ5LDgzNi4wMzgsMTc1Ljk2Miw4MzcuMzQsMTc1Ljk2MnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjI3LjM4NywyMTguNTgzIDI5My4yODgsMzA4LjkyNCAyOTMuMjg4LDI1Ni40NTkgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI5My4yODgsMjU2LjQ1OSAyOTMuMjg4LDMwOC45MjQgMzU5LjIyOSwyMTguNTgzIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyOTMuMjg4LDE3Ni4yODUgMjI3LjM4NywyMDUuNDIzIDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyMjcuMzg3LDIwNS40MjQgMjkzLjI4OCwyNDMuMzE5IDI5My4yODgsMTc2LjI4NiAyOTMuMjg4LDk5LjA1MiAJCQkJIi8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPGcgb3BhY2l0eT0iMC44Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjkzLjI4OCw5OS4wNTEgMjkzLjI4OCwxNzYuMjg1IDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
 
-    this.sections.push(sectionStart)
-    this.sections.push(sectionResources)
-  }
+    let learnMore = () => { tooltip('not implemented') }
 
-  get profile () {
-    return {
-      displayName: 'Home',
-      name: 'home',
-      methods: [],
-      events: [],
-      description: ' - ',
-      icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+',
-      location: 'mainPanel'
+    let closeAll = () => {
+      this.appStore.getActives()
+      .filter(({profile}) => !profile.required)
+      .forEach((profile) => { this.appManager.deactivateOne(profile.name) })
     }
-  }
-
-  render () {
-    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
-    let totalLook = yo`
-      <div class="border-left ${css.landingPage}">
-      </div>
-    `
-
-    let main = yo`<div class="container"></div>`
-    for (let i = 0; i < this.sectionWorkspaceMain.length; i++) {
-      main.appendChild(yo`
-        <span class="btn btn-secondary btn-lg m-2" style=" font-size: x-large;" onclick="${this.sectionWorkspaceMain[i].payload}">
-          ${this.sectionWorkspaceMain[i].label}
-        </span>
-      `)
+    let startSolidity = () => {
+      closeAll()
+      this.appManager.ensureActivated('solidity')
+      this.appManager.ensureActivated('run')
+      this.appManager.ensureActivated('solidityStaticAnalysis')
+      this.appManager.ensureActivated('solidityUnitTesting')
+      globalRegistry.get('filemanager').api.switchFile()
+      globalRegistry.get('verticalicon').api.select('solidity')
+    }
+    let startVyper = () => {
+      closeAll()
+      this.appManager.ensureActivated('vyper')
+      this.appManager.ensureActivated('run')
+      globalRegistry.get('filemanager').api.switchFile()
+      globalRegistry.get('verticalicon').api.select('vyper')
     }
-    let icon = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzU1IDQ1M3EzNyAzOCAzNyA5MC41dC0zNyA5MC41bC00MDEgNDAwIDE1MCAxNTAtMTYwIDE2MHEtMTYzIDE2My0zODkuNSAxODYuNXQtNDExLjUtMTAwLjVsLTM2MiAzNjJoLTE4MXYtMTgxbDM2Mi0zNjJxLTEyNC0xODUtMTAwLjUtNDExLjV0MTg2LjUtMzg5LjVsMTYwLTE2MCAxNTAgMTUwIDQwMC00MDFxMzgtMzcgOTEtMzd0OTAgMzcgMzcgOTAuNS0zNyA5MC41bC00MDAgNDAxIDIzNCAyMzQgNDAxLTQwMHEzOC0zNyA5MS0zN3Q5MCAzN3oiLz48L3N2Zz4='
-
-    main.appendChild(yo`
-      <span style="padding-left: 60px; "onclick="${() => { globalRegistry.get('verticalicon').api.select('pluginManager') }}">
-        Check out all plugins here 
-        <img class="btn btn-secondary btn-lg m-2" style="max-width: 53px; max-height: 53px" src="${icon}" />
-      </span>
-    `)
-
-     /* let others = yo`<div class="container m-4"></div>`
-    for (let i = 0; i < this.sectionWorkspaceOthers.length; i++) {
-      others.appendChild(yo`
-        <span class="btn btn-secondary btn-sm m-2" onclick="${this.sectionWorkspaceOthers[i].payload}">
-          ${this.sectionWorkspaceOthers[i].label}
-        </span>
-      `)
-    } */
 
-    let docs = yo`<div class="container m-5"></div>`
-    for (let i = 0; i < this.sections.length; i++) {
-      docs.appendChild(yo`
-        <div class="${css.sectionContainer} p-2">
-          ${this.sections[i].render()}
-        </div>
-      `)
+    let startPipeline = () => {
+      this.appManager.ensureActivated('solidity')
+      this.appManager.ensureActivated('pipeline')
+      this.appManager.ensureActivated('run')
+    }
+    let startDebugger = () => { 
+      this.appManager.ensureActivated('debugger') 
+      globalRegistry.get('verticalicon').api.select('debugger')
+    }
+    let startPluginManager = () => { 
+      this.appManager.ensureActivated('pluginManager')
+      globalRegistry.get('verticalicon').api.select('pluginManager')
     }
 
-    totalLook.appendChild(yo`
-      <div class="container-fluid">
-        <div class="row" style="flex-wrap: nowrap;">
-          <div class="column m-5" style="min-width: 50%;">
-            <div class="card p-4">
-              <img class="card-img-top ${css.im}" src="${logo}" />
-              <div class="card-body-fluid">
-                <h5 class="card-header m-4">Workspaces</h5>
-                <p>${main}</p>
-              </div>
-            </div>
+    let createNewFile = () => {
+      let fileExplorer = globalRegistry.get('fileexplorer/browser').api
+      fileExplorer.createNewFile()
+    }
+    let connectToLocalhost = () => {
+      this.appManager.ensureActivated('remixd')
+    }
+    let importFromExternal = () => { load('URL') }
+
+    let container = yo`<div>
+      <div><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
+      <div>
+          <div class="jumbotron">
+            <h1 class="display-4">The New Layout has arrived</h1>
+            <button class="btn btn-primary btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+          </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="environment">
+            <h3>Environments</h3>
             <div>
-              <span class="btn btn-secondary ${css.getStarted}" onclick=${() => { tooltip('  not implemented yet :P   ') }}>Get Started</span>
-             </div>
+              <button class="btn btn-lg btn-primary" onclick=${() => { startSolidity() }}>Solidity</button>
+              <button class="btn btn-lg btn-primary" onclick=${() => { startVyper() }}>Vyper</button>
+            </div>
+          </div>
+          <div class="file">
+            <h3>File</h3>
+            <p onclick=${() => { createNewFile() }}><a>New File</a></p>
+            <label class="${css.text} m-0 h6 text-dark">
+            Open files
+            <input title="open file" type="file" onchange="${
+              (event) => {
+                event.stopPropagation()
+                let fileExplorer = globalRegistry.get('fileexplorer/browser').api
+                fileExplorer.uploadFile(event)
+              }
+            }" multiple />
+          </label>
+            <p onclick=${() => { connectToLocalhost() }}><a>Connect to Localhost</a></p>
+            <p onclick=${() => { importFromExternal() }}><a>Import From external source</a></p>
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="plugins">
+            <h3>Featured Plugins</h3>
+            <p onclick=${() => { startPipeline() }}>Pipeline</p>
+            <p onclick=${() => { startDebugger() }}>Debugger</p>
+            <button onclick=${() => { startPluginManager() }} class="btn btn-lg btn-primary">see all<i class="fa fa-plug" ></i></button>
           </div>
-          <div>
-            ${docs}
+          <div class="resources">
+            <h3>Resources</h3>
+            <p><a target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
+            <p><a target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
+            <p><a target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
+            <p><a target="__blank" href="">Tutorials</a></p>
+            <p><a target="__blank" href="">Workshops Slides</a></p>
           </div>
         </div>
       </div>
-    `)
+      </div>`
 
-    return totalLook
+    return container
   }
 }

From 8f340fd2960f75c743c0a91a65458ac8708e3d04 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Wed, 10 Apr 2019 17:31:48 +0200
Subject: [PATCH 2/9] update to css

---
 src/app/ui/landing-page/landing-page.js | 133 +++++++++++++++---------
 1 file changed, 86 insertions(+), 47 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 29328217e2..ba9e003fa4 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -40,17 +40,50 @@ let css = csjs`
     width           : 100%;
     font-size       : xx-large;
     align-self      : center;
-
   }
   .text {
     cursor: pointer;
     font-weight: normal;
     max-width: 300px;
     user-select: none;
+    color: var(--primary);
   }
   .text:hover {
-    font-weight: bold;
+    text-decoration: underline;
+  }
+  .jumbotronContainer {
+    margin: 0 60px;
+    width: 80%;
+  }
+  .thisJumboton {
+    padding: 2.5rem 5rem;
+  }
+  .hpLogoContainer {
+    margin:30px;
+    padding-right: 90px;
+  }
+  .jumboBtnContainer {
+    float: left;
+    vertical-align: bottom;
+    padding-top: 0px;
+  }
+  .headlineContainer {
+    float: left;
+    padding-right: 90px;
+  }
+  .hpSections {
+    margin: 0 60px;
   }
+  .solidityBtn {
+    margin-right: 40px;
+  }
+  .labelIt {
+    margin-bottom: 0;
+  }
+  .seeAll {
+    margin-top: 7px;
+  }
+
 }
 `
 
@@ -129,11 +162,11 @@ export class LandingPage extends ApiFactory {
       this.appManager.ensureActivated('pipeline')
       this.appManager.ensureActivated('run')
     }
-    let startDebugger = () => { 
-      this.appManager.ensureActivated('debugger') 
+    let startDebugger = () => {
+      this.appManager.ensureActivated('debugger')
       globalRegistry.get('verticalicon').api.select('debugger')
     }
-    let startPluginManager = () => { 
+    let startPluginManager = () => {
       this.appManager.ensureActivated('pluginManager')
       globalRegistry.get('verticalicon').api.select('pluginManager')
     }
@@ -148,56 +181,62 @@ export class LandingPage extends ApiFactory {
     let importFromExternal = () => { load('URL') }
 
     let container = yo`<div>
-      <div><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
-      <div>
-          <div class="jumbotron">
-            <h1 class="display-4">The New Layout has arrived</h1>
-            <button class="btn btn-primary btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+      <div class="${css.hpLogoContainer}"><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
+      <div class="${css.jumbotronContainer}">
+        <div class="jumbotron clearfix ${css.thisJumboton}">
+          <div class="${css.headlineContainer}">
+            <h3 class="">The new layout has arrived</h3>
           </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="environment">
-            <h3>Environments</h3>
+          <div class="${css.jumboBtnContainer}">
+            <button class="btn btn-info btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+          </div>
+        </div><!-- end of jumbotron -->
+      </div><!-- end of jumbotron container -->
+      <div class="row ${css.hpSections}">
+        <div id="col1" class="col-sm-6">
+          <div class="environment mb-5">
+            <h4>Environments</h4>
             <div>
-              <button class="btn btn-lg btn-primary" onclick=${() => { startSolidity() }}>Solidity</button>
-              <button class="btn btn-lg btn-primary" onclick=${() => { startVyper() }}>Vyper</button>
+              <button class="btn btn-lg btn-secondary ${css.solidityBtn}" onclick=${() => { startSolidity() }}>Solidity</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { startVyper() }}>Vyper</button>
             </div>
           </div>
           <div class="file">
-            <h3>File</h3>
-            <p onclick=${() => { createNewFile() }}><a>New File</a></p>
-            <label class="${css.text} m-0 h6 text-dark">
-            Open files
-            <input title="open file" type="file" onchange="${
-              (event) => {
-                event.stopPropagation()
-                let fileExplorer = globalRegistry.get('fileexplorer/browser').api
-                fileExplorer.uploadFile(event)
-              }
-            }" multiple />
-          </label>
-            <p onclick=${() => { connectToLocalhost() }}><a>Connect to Localhost</a></p>
-            <p onclick=${() => { importFromExternal() }}><a>Import From external source</a></p>
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="plugins">
-            <h3>Featured Plugins</h3>
-            <p onclick=${() => { startPipeline() }}>Pipeline</p>
-            <p onclick=${() => { startDebugger() }}>Debugger</p>
-            <button onclick=${() => { startPluginManager() }} class="btn btn-lg btn-primary">see all<i class="fa fa-plug" ></i></button>
+            <h4>File</h4>
+            <p class="mb-1 ${css.text}" onclick=${() => { createNewFile() }}>New File</p>
+            <p class="mb-1">
+              <label class="${css.labelIt} ${css.text}">
+                Open Files
+                <input title="open file" type="file" onchange="${
+                  (event) => {
+                    event.stopPropagation()
+                    let fileExplorer = globalRegistry.get('fileexplorer/browser').api
+                    fileExplorer.uploadFile(event)
+                  }
+                }" multiple />
+              </label>
+            </p>
+            <p class="mb-1 ${css.text}" onclick=${() => { connectToLocalhost() }}>Connect to Localhost</p>
+            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From external source</p>
+          </div><!-- end of div.file -->
+        </div><!-- end of #col1 -->
+        <div id="col2" class="col-sm-6">
+          <div class="plugins mb-5">
+            <h4>Featured Plugins</h4>
+            <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
+            <p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
+            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-info ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
           </div>
           <div class="resources">
-            <h3>Resources</h3>
-            <p><a target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
-            <p><a target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
-            <p><a target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
-            <p><a target="__blank" href="">Tutorials</a></p>
-            <p><a target="__blank" href="">Workshops Slides</a></p>
+            <h4>Resources</h4>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="">Tutorials</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="">Workshops Slides</a></p>
           </div>
-        </div>
-      </div>
+        </div><!-- end of #col2 -->
+      </div><!-- end of hpSections -->
       </div>`
 
     return container

From 0fb2d299a2097c5c97f6fede39eda777cd444b1b Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Fri, 12 Apr 2019 12:43:11 +0200
Subject: [PATCH 3/9] add import from gist, github, swarm, ipfs

---
 src/app/ui/landing-page/landing-page.js | 12 ++++++++++--
 src/app/ui/modal-dialog-custom.js       |  2 +-
 src/lib/gist-handler.js                 |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index ba9e003fa4..2b8f13e347 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -179,6 +179,10 @@ export class LandingPage extends ApiFactory {
       this.appManager.ensureActivated('remixd')
     }
     let importFromExternal = () => { load('URL') }
+    let importFromGist = () => {
+      let app = globalRegistry.get('app').api
+      app.loadFromGist({gist: ''})
+    }
 
     let container = yo`<div>
       <div class="${css.hpLogoContainer}"><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
@@ -217,8 +221,12 @@ export class LandingPage extends ApiFactory {
               </label>
             </p>
             <p class="mb-1 ${css.text}" onclick=${() => { connectToLocalhost() }}>Connect to Localhost</p>
-            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From external source</p>
-          </div><!-- end of div.file -->
+            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From:</p>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { load('Github URL') }}>Github</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { load('bzz-raw URL') }}>Swarm</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { load('ipfs URL') }}>Ipfs</button>
+            </div><!-- end of div.file -->
         </div><!-- end of #col1 -->
         <div id="col2" class="col-sm-6">
           <div class="plugins mb-5">
diff --git a/src/app/ui/modal-dialog-custom.js b/src/app/ui/modal-dialog-custom.js
index f793a892f6..16803b32ab 100644
--- a/src/app/ui/modal-dialog-custom.js
+++ b/src/app/ui/modal-dialog-custom.js
@@ -66,7 +66,7 @@ module.exports = {
 function prompt (title, text, hidden, inputValue, ok, cancel, focus) {
   if (!inputValue) inputValue = ''
   var type = hidden ? 'password' : 'text'
-  var input = yo`<input type=${type} name='prompt_text' id='prompt_text' class="${css['prompt_text']}" value='${inputValue}' >`
+  var input = yo`<input type=${type} name='prompt_text' id='prompt_text' class="${css['prompt_text']} form-control" value='${inputValue}' >`
   modal(title, yo`<div>${text}<div>${input}</div></div>`,
     {
       fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) }
diff --git a/src/lib/gist-handler.js b/src/lib/gist-handler.js
index b66db8ef22..f99001b1ff 100644
--- a/src/lib/gist-handler.js
+++ b/src/lib/gist-handler.js
@@ -12,7 +12,7 @@ function GistHandler (_window) {
     var gistId
     if (params['gist'] === '') {
       loadingFromGist = true
-      modalDialogCustom.prompt(null, 'Enter the URL or ID of the Gist you would like to load.', null, (target) => {
+      modalDialogCustom.prompt(null, 'Enter the ID of the Gist you would like to load.', null, (target) => {
         if (target !== '') {
           gistId = getGistId(target)
           if (gistId) {

From 56f103f694e1dc1977c78bb29f92824acc213bb2 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Fri, 12 Apr 2019 16:08:10 +0200
Subject: [PATCH 4/9] update with vert logo in jumbotron plus other corrections

---
 src/app/ui/landing-page/landing-page.js | 54 ++++++++++++++++---------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 2b8f13e347..28ee170df3 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -52,11 +52,14 @@ let css = csjs`
     text-decoration: underline;
   }
   .jumbotronContainer {
-    margin: 0 60px;
-    width: 80%;
+    /* margin: 50px 60px 0; */
+    /* width: 80%; */
   }
   .thisJumboton {
     padding: 2.5rem 5rem;
+    /* display: flex;*/
+    /* justify-content: space-between;*/
+    margin-bottom: 4rem;
   }
   .hpLogoContainer {
     margin:30px;
@@ -64,12 +67,12 @@ let css = csjs`
   }
   .jumboBtnContainer {
     float: left;
-    vertical-align: bottom;
-    padding-top: 0px;
+    padding-top: 15px;
   }
   .headlineContainer {
     float: left;
-    padding-right: 90px;
+    padding-top: 17px;
+    margin: 0 100px 0 70px;
   }
   .hpSections {
     margin: 0 60px;
@@ -83,6 +86,16 @@ let css = csjs`
   .seeAll {
     margin-top: 7px;
   }
+  .importFrom p {
+    margin-right: 10px;
+  }
+  .logoContainer {
+    margin-top: 7px;
+    float: left;
+  }
+  .logoContainer img{
+    height: 65px;
+  }
 
 }
 `
@@ -131,7 +144,7 @@ export class LandingPage extends ApiFactory {
         }
       })
     }
-    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEzLjM2NXB4IiBoZWlnaHQ9IjIwOS44NzNweCIgdmlld0JveD0iMjI3LjM4NyA5OS4wNTEgNjEzLjM2NSAyMDkuODczIg0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDIyNy4zODcgOTkuMDUxIDYxMy4zNjUgMjA5Ljg3MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDM0LjU4MiwxNzYuMjA2YzAuODExLDAsMS42MjIsMC4yODUsMi40MzgsMC44NTNjMC44MTEsMC41NzEsMS4yMTcsMS4zNCwxLjIxNywyLjMxNA0KCQljMCwyLjI3Ni0xLjA1OSwzLjQ5Ni0zLjE2OCwzLjY1NWMtNS4wMzcsMC44MTQtOS4zODEsMi4zNTYtMTMuMDM2LDQuNjMxYy0zLjY1NSwyLjI3NS02LjY2Myw1LjExNi05LjAxNyw4LjUyNw0KCQljLTIuMzU2LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM4LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDcsOC44MTQtMS43MDcsMTMuNTI0djMyLjY1MmMwLDIuMjczLTEuMTM5LDMuNDExLTMuNDExLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIyYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzIsMCwzLjQxMSwxLjEzOCwzLjQxMSwzLjQxMXYxNS4xMDcNCgkJYzEuNDYzLTIuNDM3LDMuMjA3LTQuNzUyLDUuMjQtNi45NDVjMi4wMjgtMi4xOTIsNC4yNjQtNC4xNDMsNi43LTUuODQ4YzIuNDM4LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM0MjguNzcxLDE3Ni43MzQsNDMxLjY1OCwxNzYuMjA2LDQzNC41ODIsMTc2LjIwNnoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNTAxLjc3MywxNzQuNWM1LjY4NSwwLDEwLjk2NiwxLjE4MSwxNS44MzgsMy41MzRjNC44NzUsMi4zNTUsOS4wNTYsNS40ODEsMTIuNTUxLDkuMzgxDQoJCWMzLjQ5MiwzLjg5OCw2LjIxNCw4LjQwNiw4LjE2NCwxMy41MjNjMS45NDksNS4xMTcsMi45MjQsMTAuNDQsMi45MjQsMTUuOTYxYzAsMC45NzctMC4zNjYsMS43OS0xLjA5OCwyLjQzOA0KCQljLTAuNzMsMC42NDktMS41ODIsMC45NzUtMi41NTksMC45NzVoLTY3Ljk4NmMwLjQ4Niw0LjIyNywxLjU4NCw4LjI4NSwzLjI4OSwxMi4xODVjMS43MDcsMy44OTgsMy45MzgsNy4zMTIsNi43MDEsMTAuMjMzDQoJCWMyLjc2MiwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ni0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTQsMy40MTIsMy40MTJjMCwwLjE2My0wLjE2NCwwLjczLTAuNDg2LDEuNzA1DQoJCWMtMy40MTIsNi4wMTMtOC4yMDUsMTAuNDc5LTE0LjM3NywxMy40MDJjLTYuMTc3LDIuOTI0LTEyLjY3Miw0LjM4Ny0xOS40OTYsNC4zODdjLTUuNjg4LDAtMTAuOTI4LTEuMTgxLTE1LjcxNy0zLjUzMw0KCQljLTQuNzkzLTIuMzU0LTguOTM3LTUuNDgyLTEyLjQyOS05LjM4MmMtMy40OTUtMy44OTktNi4yMTQtOC40MDctOC4xNjMtMTMuNTI0cy0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFzNC42NjgtOS42MjUsOC4xNjMtMTMuNTIzYzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOS05LjM4MQ0KCQlDNDkwLjg0NiwxNzUuNjgxLDQ5Ni4wODQsMTc0LjUsNTAxLjc3MywxNzQuNXogTTUzMy45MzksMjEzLjQ4OWMtMC4zMjgtNC4yMjMtMS4zNC04LjI4NC0zLjA0NS0xMi4xODQNCgkJYy0xLjcwNy0zLjg5OC0zLjk4Mi03LjMxMi02LjgyNC0xMC4yMzVjLTIuODQ0LTIuOTI0LTYuMTc0LTUuMjc2LTkuOTktNy4wNjZjLTMuODE5LTEuNzg1LTcuOTItMi42OC0xMi4zMDctMi42OA0KCQljLTQuNTQ5LDAtOC42OTEsMC44OTUtMTIuNDI4LDIuNjhjLTMuNzM4LDEuNzktNi45ODYsNC4xNDQtOS43NDgsNy4wNjZjLTIuNzY0LDIuOTI1LTQuOTk0LDYuMzM3LTYuNzAxLDEwLjIzNQ0KCQljLTEuNzA1LDMuODk4LTIuODAxLDcuOTYxLTMuMjg5LDEyLjE4NEg1MzMuOTM5eiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik02NjguNjg5LDE3NC43NDNjNS4wMzUsMCw5LjUwNCwxLjAxOCwxMy40MDIsMy4wNDdjMy44OTksMi4wMzMsNy4xODksNC42NzIsOS44Nyw3LjkyDQoJCWMyLjY4MSwzLjI1MSw0LjcwOSw3LjA2NSw2LjA5MywxMS40NTJjMS4zNzksNC4zODcsMi4wNjksOC44NTUsMi4wNjksMTMuNDAxdjQzLjYyYzAsMC45NzYtMC4zNjUsMS43ODktMS4wOTcsMi40MzgNCgkJYy0wLjczLDAuNjQ2LTEuNTA0LDAuOTc1LTIuMzEzLDAuOTc1Yy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTQzLjYyYzAtMy41Ny0wLjUyOS03LjEwNC0xLjU4NS0xMC42DQoJCWMtMS4wNTktMy40OTEtMi42MDItNi42MTgtNC42My05LjM4MmMtMi4wMzMtMi43NjEtNC41OTItNC45NTMtNy42NzctNi41OGMtMy4wODgtMS42MjEtNi42NjItMi40MzctMTAuNzIyLTIuNDM3DQoJCWMtNS4yLDAtOS41ODgsMS4yMTktMTMuMTU5LDMuNjU0Yy0zLjU3NCwyLjQzOC02LjQ1Nyw1LjU2Ni04LjY1LDkuMzgyYy0yLjE5MiwzLjgxOS0zLjgxNyw4LjA0Mi00Ljg3NCwxMi42NzINCgkJYy0xLjA1OSw0LjYzMS0xLjU4NCw5LjA1OS0xLjU4NCwxMy4yOHYzMy42MjljMCwwLjk3Ni0wLjM2NSwxLjc4OS0xLjA5NiwyLjQzOGMtMC43MywwLjY0Ni0xLjUwNSwwLjk3NS0yLjMxNSwwLjk3NQ0KCQljLTIuMjc2LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMnYtNDMuNjJjMC0zLjU3LTAuNTI5LTcuMTA0LTEuNTg0LTEwLjZjLTEuMDU5LTMuNDkxLTIuNjAyLTYuNjE4LTQuNjMtOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNy0xMC43MjMtMi40MzdjLTUuMDM2LDAtOS4zNDQsMC44OTYtMTIuOTE0LDIuNjgxDQoJCWMtMy41NzUsMS43OS02LjU0Miw0LjI2Ni04Ljg5Niw3LjQzM2MtMi4zNTYsMy4xNjctNC4wNjIsNi45NDQtNS4xMTYsMTEuMzMxYy0xLjA2LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5NmMwLDIuMjcyLTEuMTM5LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDEyLTEuMTQtMy40MTItMy40MTJ2LTc0LjU2NmMwLTIuMjczLDEuMTM2LTMuNDExLDMuNDEyLTMuNDExDQoJCWMyLjI3MiwwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2LTkuMzgyLDExLjgxOC0xMi41NWM0Ljk1NC0zLjE2NywxMC41MTgtNC43NTIsMTYuNjkxLTQuNzUyDQoJCWM2Ljk4NCwwLDEyLjk5NiwxLjk5LDE4LjAzMyw1Ljk3YzUuMDMyLDMuOTgzLDguNjg4LDkuMjIzLDEwLjk2NSwxNS43MTljMi43NjEtNi4zMzYsNi43NC0xMS41MzMsMTEuOTQtMTUuNTk2DQoJCUM2NTUuMTI1LDE3Ni43NzYsNjYxLjM4LDE3NC43NDMsNjY4LjY4OSwxNzQuNzQzeiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03NDIuNzUzLDE3Ni42OTNjMC44MTIsMCwxLjU4NCwwLjM2NSwyLjMxMywxLjA5OGMwLjczMSwwLjcyOSwxLjA5OCwxLjUwNCwxLjA5OCwyLjMxM3Y3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5OCwyLjMxNWMtMC43MjksMC43MjktMS41MDQsMS4wOTctMi4zMTMsMS4wOTdjLTAuOTc2LDAtMS43OS0wLjM2Ni0yLjQzOC0xLjA5Nw0KCQljLTAuNjQ5LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzEzQzc0MC45NjMsMTc3LjA1OSw3NDEuNzc3LDE3Ni42OTMsNzQyLjc1MywxNzYuNjkzeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNODM3LjM0LDE3NS45NjJjMi4yNzMsMCwzLjQxMiwxLjEzOSwzLjQxMiwzLjQxMWwtMC40ODcsMS45NWwtMjQuMzY4LDM1LjMzNGwyNC4zNjgsMzUuNTc2DQoJCWMwLjMyMywwLjk3NywwLjQ4NywxLjYyNiwwLjQ4NywxLjk1YzAsMi4yNzItMS4xMzksMy40MTItMy40MTIsMy40MTJjLTEuMzAyLDAtMi4xOTMtMC40ODgtMi42OC0xLjQ2M2wtMjIuOTA2LTMzLjM4NA0KCQlsLTIyLjY2MywzMy4zODRjLTAuODEzLDAuOTc1LTEuNzksMS40NjMtMi45MjQsMS40NjNjLTIuMjc3LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMmMwLTAuMzI0LDAuMTU5LTAuOTc1LDAuNDg2LTEuOTUNCgkJbDI0LjM2OS0zNS41NzZsLTI0LjM2OS0zNS4zMzRsLTAuNDg2LTEuOTVjMC0yLjI3MiwxLjEzNC0zLjQxMSwzLjQxMS0zLjQxMWMxLjEzNCwwLDIuMTA5LDAuNDg3LDIuOTI0LDEuNDYybDIyLjY2MywzMy4xNDENCgkJbDIyLjkwNi0zMy4xNDFDODM1LjE0NiwxNzYuNDQ5LDgzNi4wMzgsMTc1Ljk2Miw4MzcuMzQsMTc1Ljk2MnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjI3LjM4NywyMTguNTgzIDI5My4yODgsMzA4LjkyNCAyOTMuMjg4LDI1Ni40NTkgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI5My4yODgsMjU2LjQ1OSAyOTMuMjg4LDMwOC45MjQgMzU5LjIyOSwyMTguNTgzIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyOTMuMjg4LDE3Ni4yODUgMjI3LjM4NywyMDUuNDIzIDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyMjcuMzg3LDIwNS40MjQgMjkzLjI4OCwyNDMuMzE5IDI5My4yODgsMTc2LjI4NiAyOTMuMjg4LDk5LjA1MiAJCQkJIi8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPGcgb3BhY2l0eT0iMC44Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjkzLjI4OCw5OS4wNTEgMjkzLjI4OCwxNzYuMjg1IDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
+    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
 
     let learnMore = () => { tooltip('not implemented') }
 
@@ -178,21 +191,22 @@ export class LandingPage extends ApiFactory {
     let connectToLocalhost = () => {
       this.appManager.ensureActivated('remixd')
     }
-    let importFromExternal = () => { load('URL') }
     let importFromGist = () => {
       let app = globalRegistry.get('app').api
       app.loadFromGist({gist: ''})
     }
 
-    let container = yo`<div>
-      <div class="${css.hpLogoContainer}"><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
+    let container = yo`<div class="bg-light">
       <div class="${css.jumbotronContainer}">
-        <div class="jumbotron clearfix ${css.thisJumboton}">
+        <div class="alert alert-info clearfix ${css.thisJumboton}">
+          <div class="${css.logoContainer}">
+            <img src="${logo}" alt="remix logo">
+          </div>
           <div class="${css.headlineContainer}">
-            <h3 class="">The new layout has arrived</h3>
+            <h2 class="">The new layout has arrived</h2>
           </div>
           <div class="${css.jumboBtnContainer}">
-            <button class="btn btn-info btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+            <button class="btn btn-primary btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
           </div>
         </div><!-- end of jumbotron -->
       </div><!-- end of jumbotron container -->
@@ -221,19 +235,21 @@ export class LandingPage extends ApiFactory {
               </label>
             </p>
             <p class="mb-1 ${css.text}" onclick=${() => { connectToLocalhost() }}>Connect to Localhost</p>
-            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From:</p>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { load('Github URL') }}>Github</button>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { load('bzz-raw URL') }}>Swarm</button>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { load('ipfs URL') }}>Ipfs</button>
-            </div><!-- end of div.file -->
+            <p class="mb-1">Import From:</p>
+            <div class="btn-group">
+              <button class="btn btn-sm btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Github URL') }}>Github</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('bzz-raw URL') }}>Swarm</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('ipfs URL') }}>Ipfs</button>
+            </div><!-- end of btn-group -->
+          </div><!-- end of div.file -->
         </div><!-- end of #col1 -->
         <div id="col2" class="col-sm-6">
           <div class="plugins mb-5">
             <h4>Featured Plugins</h4>
             <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
             <p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
-            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-info ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
+            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
           </div>
           <div class="resources">
             <h4>Resources</h4>

From 24687e2ae83a0adde7f9320d11d6819ec8ce6f93 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 9 Apr 2019 18:00:23 +0200
Subject: [PATCH 5/9] landing page design

---
 src/app/ui/landing-page/landing-page.js | 254 ++++++++++--------------
 1 file changed, 106 insertions(+), 148 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 9c918d9099..394c8eb1d3 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -15,7 +15,6 @@ let css = csjs`
     max-width       : 300px;
     min-height      : 200px;
     background-color: var(--light);
-    font-family     : "Lucida Console", Monaco, monospace;
   }
   .landingPage {
     height          : 100%;
@@ -55,9 +54,7 @@ let css = csjs`
 }
 `
 
-import { defaultWorkspaces } from './workspace'
 import { BaseApi } from 'remix-plugin'
-import Section from './section'
 
 const profile = {
   displayName: 'Home',
@@ -74,7 +71,22 @@ export class LandingPage extends BaseApi {
   constructor (appManager, appStore) {
     super(profile)
     this.appStore = appStore
-    this.sections = []
+    this.appManager = appManager
+  }
+
+  get profile () {
+    return {
+      displayName: 'Home',
+      name: 'home',
+      methods: [],
+      events: [],
+      description: ' - ',
+      icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+',
+      location: 'mainPanel'
+    }
+  }
+
+  render () {
     let load = function (item) {
       let compilerImport = new CompilerImport()
       let fileProviders = globalRegistry.get('fileproviders').api
@@ -96,162 +108,108 @@ export class LandingPage extends BaseApi {
         }
       })
     }
-    let fileExplorer = globalRegistry.get('fileexplorer/browser').api
-    var actionsStart = [
-      { label: 'New file',
-        type: 'callback',
-        payload: () => {
-          fileExplorer.createNewFile()
-        }
-      },
-      {
-        // Open a file
-        label: yo`
-          <label class="${css.text} m-0 h6 text-dark">
-            Open file
+    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEzLjM2NXB4IiBoZWlnaHQ9IjIwOS44NzNweCIgdmlld0JveD0iMjI3LjM4NyA5OS4wNTEgNjEzLjM2NSAyMDkuODczIg0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDIyNy4zODcgOTkuMDUxIDYxMy4zNjUgMjA5Ljg3MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDM0LjU4MiwxNzYuMjA2YzAuODExLDAsMS42MjIsMC4yODUsMi40MzgsMC44NTNjMC44MTEsMC41NzEsMS4yMTcsMS4zNCwxLjIxNywyLjMxNA0KCQljMCwyLjI3Ni0xLjA1OSwzLjQ5Ni0zLjE2OCwzLjY1NWMtNS4wMzcsMC44MTQtOS4zODEsMi4zNTYtMTMuMDM2LDQuNjMxYy0zLjY1NSwyLjI3NS02LjY2Myw1LjExNi05LjAxNyw4LjUyNw0KCQljLTIuMzU2LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM4LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDcsOC44MTQtMS43MDcsMTMuNTI0djMyLjY1MmMwLDIuMjczLTEuMTM5LDMuNDExLTMuNDExLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIyYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzIsMCwzLjQxMSwxLjEzOCwzLjQxMSwzLjQxMXYxNS4xMDcNCgkJYzEuNDYzLTIuNDM3LDMuMjA3LTQuNzUyLDUuMjQtNi45NDVjMi4wMjgtMi4xOTIsNC4yNjQtNC4xNDMsNi43LTUuODQ4YzIuNDM4LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM0MjguNzcxLDE3Ni43MzQsNDMxLjY1OCwxNzYuMjA2LDQzNC41ODIsMTc2LjIwNnoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNTAxLjc3MywxNzQuNWM1LjY4NSwwLDEwLjk2NiwxLjE4MSwxNS44MzgsMy41MzRjNC44NzUsMi4zNTUsOS4wNTYsNS40ODEsMTIuNTUxLDkuMzgxDQoJCWMzLjQ5MiwzLjg5OCw2LjIxNCw4LjQwNiw4LjE2NCwxMy41MjNjMS45NDksNS4xMTcsMi45MjQsMTAuNDQsMi45MjQsMTUuOTYxYzAsMC45NzctMC4zNjYsMS43OS0xLjA5OCwyLjQzOA0KCQljLTAuNzMsMC42NDktMS41ODIsMC45NzUtMi41NTksMC45NzVoLTY3Ljk4NmMwLjQ4Niw0LjIyNywxLjU4NCw4LjI4NSwzLjI4OSwxMi4xODVjMS43MDcsMy44OTgsMy45MzgsNy4zMTIsNi43MDEsMTAuMjMzDQoJCWMyLjc2MiwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ni0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTQsMy40MTIsMy40MTJjMCwwLjE2My0wLjE2NCwwLjczLTAuNDg2LDEuNzA1DQoJCWMtMy40MTIsNi4wMTMtOC4yMDUsMTAuNDc5LTE0LjM3NywxMy40MDJjLTYuMTc3LDIuOTI0LTEyLjY3Miw0LjM4Ny0xOS40OTYsNC4zODdjLTUuNjg4LDAtMTAuOTI4LTEuMTgxLTE1LjcxNy0zLjUzMw0KCQljLTQuNzkzLTIuMzU0LTguOTM3LTUuNDgyLTEyLjQyOS05LjM4MmMtMy40OTUtMy44OTktNi4yMTQtOC40MDctOC4xNjMtMTMuNTI0cy0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFzNC42NjgtOS42MjUsOC4xNjMtMTMuNTIzYzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOS05LjM4MQ0KCQlDNDkwLjg0NiwxNzUuNjgxLDQ5Ni4wODQsMTc0LjUsNTAxLjc3MywxNzQuNXogTTUzMy45MzksMjEzLjQ4OWMtMC4zMjgtNC4yMjMtMS4zNC04LjI4NC0zLjA0NS0xMi4xODQNCgkJYy0xLjcwNy0zLjg5OC0zLjk4Mi03LjMxMi02LjgyNC0xMC4yMzVjLTIuODQ0LTIuOTI0LTYuMTc0LTUuMjc2LTkuOTktNy4wNjZjLTMuODE5LTEuNzg1LTcuOTItMi42OC0xMi4zMDctMi42OA0KCQljLTQuNTQ5LDAtOC42OTEsMC44OTUtMTIuNDI4LDIuNjhjLTMuNzM4LDEuNzktNi45ODYsNC4xNDQtOS43NDgsNy4wNjZjLTIuNzY0LDIuOTI1LTQuOTk0LDYuMzM3LTYuNzAxLDEwLjIzNQ0KCQljLTEuNzA1LDMuODk4LTIuODAxLDcuOTYxLTMuMjg5LDEyLjE4NEg1MzMuOTM5eiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik02NjguNjg5LDE3NC43NDNjNS4wMzUsMCw5LjUwNCwxLjAxOCwxMy40MDIsMy4wNDdjMy44OTksMi4wMzMsNy4xODksNC42NzIsOS44Nyw3LjkyDQoJCWMyLjY4MSwzLjI1MSw0LjcwOSw3LjA2NSw2LjA5MywxMS40NTJjMS4zNzksNC4zODcsMi4wNjksOC44NTUsMi4wNjksMTMuNDAxdjQzLjYyYzAsMC45NzYtMC4zNjUsMS43ODktMS4wOTcsMi40MzgNCgkJYy0wLjczLDAuNjQ2LTEuNTA0LDAuOTc1LTIuMzEzLDAuOTc1Yy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTQzLjYyYzAtMy41Ny0wLjUyOS03LjEwNC0xLjU4NS0xMC42DQoJCWMtMS4wNTktMy40OTEtMi42MDItNi42MTgtNC42My05LjM4MmMtMi4wMzMtMi43NjEtNC41OTItNC45NTMtNy42NzctNi41OGMtMy4wODgtMS42MjEtNi42NjItMi40MzctMTAuNzIyLTIuNDM3DQoJCWMtNS4yLDAtOS41ODgsMS4yMTktMTMuMTU5LDMuNjU0Yy0zLjU3NCwyLjQzOC02LjQ1Nyw1LjU2Ni04LjY1LDkuMzgyYy0yLjE5MiwzLjgxOS0zLjgxNyw4LjA0Mi00Ljg3NCwxMi42NzINCgkJYy0xLjA1OSw0LjYzMS0xLjU4NCw5LjA1OS0xLjU4NCwxMy4yOHYzMy42MjljMCwwLjk3Ni0wLjM2NSwxLjc4OS0xLjA5NiwyLjQzOGMtMC43MywwLjY0Ni0xLjUwNSwwLjk3NS0yLjMxNSwwLjk3NQ0KCQljLTIuMjc2LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMnYtNDMuNjJjMC0zLjU3LTAuNTI5LTcuMTA0LTEuNTg0LTEwLjZjLTEuMDU5LTMuNDkxLTIuNjAyLTYuNjE4LTQuNjMtOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNy0xMC43MjMtMi40MzdjLTUuMDM2LDAtOS4zNDQsMC44OTYtMTIuOTE0LDIuNjgxDQoJCWMtMy41NzUsMS43OS02LjU0Miw0LjI2Ni04Ljg5Niw3LjQzM2MtMi4zNTYsMy4xNjctNC4wNjIsNi45NDQtNS4xMTYsMTEuMzMxYy0xLjA2LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5NmMwLDIuMjcyLTEuMTM5LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDEyLTEuMTQtMy40MTItMy40MTJ2LTc0LjU2NmMwLTIuMjczLDEuMTM2LTMuNDExLDMuNDEyLTMuNDExDQoJCWMyLjI3MiwwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2LTkuMzgyLDExLjgxOC0xMi41NWM0Ljk1NC0zLjE2NywxMC41MTgtNC43NTIsMTYuNjkxLTQuNzUyDQoJCWM2Ljk4NCwwLDEyLjk5NiwxLjk5LDE4LjAzMyw1Ljk3YzUuMDMyLDMuOTgzLDguNjg4LDkuMjIzLDEwLjk2NSwxNS43MTljMi43NjEtNi4zMzYsNi43NC0xMS41MzMsMTEuOTQtMTUuNTk2DQoJCUM2NTUuMTI1LDE3Ni43NzYsNjYxLjM4LDE3NC43NDMsNjY4LjY4OSwxNzQuNzQzeiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03NDIuNzUzLDE3Ni42OTNjMC44MTIsMCwxLjU4NCwwLjM2NSwyLjMxMywxLjA5OGMwLjczMSwwLjcyOSwxLjA5OCwxLjUwNCwxLjA5OCwyLjMxM3Y3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5OCwyLjMxNWMtMC43MjksMC43MjktMS41MDQsMS4wOTctMi4zMTMsMS4wOTdjLTAuOTc2LDAtMS43OS0wLjM2Ni0yLjQzOC0xLjA5Nw0KCQljLTAuNjQ5LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzEzQzc0MC45NjMsMTc3LjA1OSw3NDEuNzc3LDE3Ni42OTMsNzQyLjc1MywxNzYuNjkzeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNODM3LjM0LDE3NS45NjJjMi4yNzMsMCwzLjQxMiwxLjEzOSwzLjQxMiwzLjQxMWwtMC40ODcsMS45NWwtMjQuMzY4LDM1LjMzNGwyNC4zNjgsMzUuNTc2DQoJCWMwLjMyMywwLjk3NywwLjQ4NywxLjYyNiwwLjQ4NywxLjk1YzAsMi4yNzItMS4xMzksMy40MTItMy40MTIsMy40MTJjLTEuMzAyLDAtMi4xOTMtMC40ODgtMi42OC0xLjQ2M2wtMjIuOTA2LTMzLjM4NA0KCQlsLTIyLjY2MywzMy4zODRjLTAuODEzLDAuOTc1LTEuNzksMS40NjMtMi45MjQsMS40NjNjLTIuMjc3LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMmMwLTAuMzI0LDAuMTU5LTAuOTc1LDAuNDg2LTEuOTUNCgkJbDI0LjM2OS0zNS41NzZsLTI0LjM2OS0zNS4zMzRsLTAuNDg2LTEuOTVjMC0yLjI3MiwxLjEzNC0zLjQxMSwzLjQxMS0zLjQxMWMxLjEzNCwwLDIuMTA5LDAuNDg3LDIuOTI0LDEuNDYybDIyLjY2MywzMy4xNDENCgkJbDIyLjkwNi0zMy4xNDFDODM1LjE0NiwxNzYuNDQ5LDgzNi4wMzgsMTc1Ljk2Miw4MzcuMzQsMTc1Ljk2MnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjI3LjM4NywyMTguNTgzIDI5My4yODgsMzA4LjkyNCAyOTMuMjg4LDI1Ni40NTkgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI5My4yODgsMjU2LjQ1OSAyOTMuMjg4LDMwOC45MjQgMzU5LjIyOSwyMTguNTgzIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyOTMuMjg4LDE3Ni4yODUgMjI3LjM4NywyMDUuNDIzIDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyMjcuMzg3LDIwNS40MjQgMjkzLjI4OCwyNDMuMzE5IDI5My4yODgsMTc2LjI4NiAyOTMuMjg4LDk5LjA1MiAJCQkJIi8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPGcgb3BhY2l0eT0iMC44Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjkzLjI4OCw5OS4wNTEgMjkzLjI4OCwxNzYuMjg1IDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
+
+    let learnMore = () => { tooltip('not implemented') }
+
+    let closeAll = () => {
+      this.appStore.getActives()
+      .filter(({profile}) => !profile.required)
+      .forEach((profile) => { this.appManager.deactivateOne(profile.name) })
+    }
+    let startSolidity = () => {
+      closeAll()
+      this.appManager.ensureActivated('solidity')
+      this.appManager.ensureActivated('run')
+      this.appManager.ensureActivated('solidityStaticAnalysis')
+      this.appManager.ensureActivated('solidityUnitTesting')
+      globalRegistry.get('filemanager').api.switchFile()
+      globalRegistry.get('verticalicon').api.select('solidity')
+    }
+    let startVyper = () => {
+      closeAll()
+      this.appManager.ensureActivated('vyper')
+      this.appManager.ensureActivated('run')
+      globalRegistry.get('filemanager').api.switchFile()
+      globalRegistry.get('verticalicon').api.select('vyper')
+    }
+
+    let startPipeline = () => {
+      this.appManager.ensureActivated('solidity')
+      this.appManager.ensureActivated('pipeline')
+      this.appManager.ensureActivated('run')
+    }
+    let startDebugger = () => {
+      this.appManager.ensureActivated('debugger')
+      globalRegistry.get('verticalicon').api.select('debugger')
+    }
+    let startPluginManager = () => {
+      this.appManager.ensureActivated('pluginManager')
+      globalRegistry.get('verticalicon').api.select('pluginManager')
+    }
+
+    let createNewFile = () => {
+      let fileExplorer = globalRegistry.get('fileexplorer/browser').api
+      fileExplorer.createNewFile()
+    }
+    let connectToLocalhost = () => {
+      this.appManager.ensureActivated('remixd')
+    }
+    let importFromExternal = () => { load('URL') }
+
+    let container = yo`<div>
+      <div><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
+      <div>
+          <div class="jumbotron">
+            <h1 class="display-4">The New Layout has arrived</h1>
+            <button class="btn btn-primary btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+          </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="environment">
+            <h3>Environments</h3>
+            <div>
+              <button class="btn btn-lg btn-primary" onclick=${() => { startSolidity() }}>Solidity</button>
+              <button class="btn btn-lg btn-primary" onclick=${() => { startVyper() }}>Vyper</button>
+            </div>
+          </div>
+          <div class="file">
+            <h3>File</h3>
+            <p onclick=${() => { createNewFile() }}><a>New File</a></p>
+            <label class="${css.text} m-0 h6 text-dark">
+            Open files
             <input title="open file" type="file" onchange="${
               (event) => {
                 event.stopPropagation()
+                let fileExplorer = globalRegistry.get('fileexplorer/browser').api
                 fileExplorer.uploadFile(event)
               }
             }" multiple />
           </label>
-        `,
-        type: `callback`,
-        description: ``,
-        payload: () => {}
-      },
-      { label: 'Import from Gist',
-        type: `callback`,
-        description: ``,
-        payload: () => {
-          let app = globalRegistry.get('app').api
-          app.loadFromGist({gist: ''})
-        }
-      },
-      { label: 'Import from GitHub',
-        type: `callback`,
-        description: ``,
-        payload: () => {
-          load('URL')
-        }
-      },
-      { label: 'Import from Swarm',
-        type: `callback`,
-        description: ``,
-        payload: () => { load('bzz-raw URL') }
-      },
-      { label: 'Import from IPFS',
-        type: `callback`,
-        description: ``,
-        payload: () => { load('IPFS URL') }
-      },
-      { label: 'Connect to localhost',
-        type: `callback`,
-        description: ``,
-        payload: () => {
-          appManager.ensureActivated('remixd')
-        }
-      }
-    ]
-
-    var actionsResources = [
-      { label: 'Remix documentation', type: `link`, description: ``, payload: `https://remix.readthedocs.io/en/latest/#` },
-      { label: 'Medium posts', type: `link`, description: ``, payload: `https://medium.com/remix-ide` },
-      { label: 'Gitter channel', type: `link`, description: ``, payload: `https://gitter.im/ethereum/remix` }
-    ]
-
-    var sectionStart = new Section('Start', actionsStart)
-    let sectionResources = new Section('Resources', actionsResources)
-
-    this.sectionWorkspaceMain = []
-    // this.sectionWorkspaceOthers = []
-    defaultWorkspaces(appManager).forEach((workspace) => {
-      if (workspace.isMain) {
-        this.sectionWorkspaceMain.push({
-          label: workspace.title,
-          type: 'callback',
-          description: workspace.description,
-          payload: () => { workspace.activate() }
-        })
-      } else {
-        /* this.sectionWorkspaceOthers.push({
-          label: workspace.title,
-          type: 'callback',
-          description: workspace.description,
-          payload: () => { workspace.activate() }
-        }) */
-      }
-    })
-
-    this.sections.push(sectionStart)
-    this.sections.push(sectionResources)
-  }
-
-  render () {
-    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
-    let totalLook = yo`
-      <div class="border-left ${css.landingPage}">
-      </div>
-    `
-
-    let main = yo`<div class="container"></div>`
-    for (let i = 0; i < this.sectionWorkspaceMain.length; i++) {
-      main.appendChild(yo`
-        <span class="btn btn-secondary btn-lg m-2" style=" font-size: x-large;" onclick="${this.sectionWorkspaceMain[i].payload}">
-          ${this.sectionWorkspaceMain[i].label}
-        </span>
-      `)
-    }
-    let icon = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzU1IDQ1M3EzNyAzOCAzNyA5MC41dC0zNyA5MC41bC00MDEgNDAwIDE1MCAxNTAtMTYwIDE2MHEtMTYzIDE2My0zODkuNSAxODYuNXQtNDExLjUtMTAwLjVsLTM2MiAzNjJoLTE4MXYtMTgxbDM2Mi0zNjJxLTEyNC0xODUtMTAwLjUtNDExLjV0MTg2LjUtMzg5LjVsMTYwLTE2MCAxNTAgMTUwIDQwMC00MDFxMzgtMzcgOTEtMzd0OTAgMzcgMzcgOTAuNS0zNyA5MC41bC00MDAgNDAxIDIzNCAyMzQgNDAxLTQwMHEzOC0zNyA5MS0zN3Q5MCAzN3oiLz48L3N2Zz4='
-
-    main.appendChild(yo`
-      <span style="padding-left: 60px; "onclick="${() => { globalRegistry.get('verticalicon').api.select('pluginManager') }}">
-        Check out all plugins here 
-        <img class="btn btn-secondary btn-lg m-2" style="max-width: 53px; max-height: 53px" src="${icon}" />
-      </span>
-    `)
-
-     /* let others = yo`<div class="container m-4"></div>`
-    for (let i = 0; i < this.sectionWorkspaceOthers.length; i++) {
-      others.appendChild(yo`
-        <span class="btn btn-secondary btn-sm m-2" onclick="${this.sectionWorkspaceOthers[i].payload}">
-          ${this.sectionWorkspaceOthers[i].label}
-        </span>
-      `)
-    } */
-
-    let docs = yo`<div class="container m-5"></div>`
-    for (let i = 0; i < this.sections.length; i++) {
-      docs.appendChild(yo`
-        <div class="${css.sectionContainer} p-2">
-          ${this.sections[i].render()}
+            <p onclick=${() => { connectToLocalhost() }}><a>Connect to Localhost</a></p>
+            <p onclick=${() => { importFromExternal() }}><a>Import From external source</a></p>
+          </div>
         </div>
-      `)
-    }
-
-    totalLook.appendChild(yo`
-      <div class="container-fluid">
-        <div class="row" style="flex-wrap: nowrap;">
-          <div class="column m-5" style="min-width: 50%;">
-            <div class="card p-4">
-              <img class="card-img-top ${css.im}" src="${logo}" />
-              <div class="card-body-fluid">
-                <h5 class="card-header m-4">Workspaces</h5>
-                <p>${main}</p>
-              </div>
-            </div>
-            <div>
-              <span class="btn btn-secondary ${css.getStarted}" onclick=${() => { tooltip('  not implemented yet :P   ') }}>Get Started</span>
-             </div>
+        <div class="col-sm-6">
+          <div class="plugins">
+            <h3>Featured Plugins</h3>
+            <p onclick=${() => { startPipeline() }}>Pipeline</p>
+            <p onclick=${() => { startDebugger() }}>Debugger</p>
+            <button onclick=${() => { startPluginManager() }} class="btn btn-lg btn-primary">see all<i class="fa fa-plug" ></i></button>
           </div>
-          <div>
-            ${docs}
+          <div class="resources">
+            <h3>Resources</h3>
+            <p><a target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
+            <p><a target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
+            <p><a target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
+            <p><a target="__blank" href="">Tutorials</a></p>
+            <p><a target="__blank" href="">Workshops Slides</a></p>
           </div>
         </div>
       </div>
-    `)
+      </div>`
 
-    return totalLook
+    return container
   }
 }

From 0ed8cfd3eae38fc8da3defc93a8fa59cdfa244d2 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Wed, 10 Apr 2019 17:31:48 +0200
Subject: [PATCH 6/9] update to css

---
 src/app/ui/landing-page/landing-page.js | 127 ++++++++++++++++--------
 1 file changed, 83 insertions(+), 44 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 394c8eb1d3..57822cfda1 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -40,17 +40,50 @@ let css = csjs`
     width           : 100%;
     font-size       : xx-large;
     align-self      : center;
-
   }
   .text {
     cursor: pointer;
     font-weight: normal;
     max-width: 300px;
     user-select: none;
+    color: var(--primary);
   }
   .text:hover {
-    font-weight: bold;
+    text-decoration: underline;
+  }
+  .jumbotronContainer {
+    margin: 0 60px;
+    width: 80%;
+  }
+  .thisJumboton {
+    padding: 2.5rem 5rem;
+  }
+  .hpLogoContainer {
+    margin:30px;
+    padding-right: 90px;
+  }
+  .jumboBtnContainer {
+    float: left;
+    vertical-align: bottom;
+    padding-top: 0px;
+  }
+  .headlineContainer {
+    float: left;
+    padding-right: 90px;
+  }
+  .hpSections {
+    margin: 0 60px;
   }
+  .solidityBtn {
+    margin-right: 40px;
+  }
+  .labelIt {
+    margin-bottom: 0;
+  }
+  .seeAll {
+    margin-top: 7px;
+  }
+
 }
 `
 
@@ -158,56 +191,62 @@ export class LandingPage extends BaseApi {
     let importFromExternal = () => { load('URL') }
 
     let container = yo`<div>
-      <div><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
-      <div>
-          <div class="jumbotron">
-            <h1 class="display-4">The New Layout has arrived</h1>
-            <button class="btn btn-primary btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+      <div class="${css.hpLogoContainer}"><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
+      <div class="${css.jumbotronContainer}">
+        <div class="jumbotron clearfix ${css.thisJumboton}">
+          <div class="${css.headlineContainer}">
+            <h3 class="">The new layout has arrived</h3>
           </div>
-      </div>
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="environment">
-            <h3>Environments</h3>
+          <div class="${css.jumboBtnContainer}">
+            <button class="btn btn-info btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+          </div>
+        </div><!-- end of jumbotron -->
+      </div><!-- end of jumbotron container -->
+      <div class="row ${css.hpSections}">
+        <div id="col1" class="col-sm-6">
+          <div class="environment mb-5">
+            <h4>Environments</h4>
             <div>
-              <button class="btn btn-lg btn-primary" onclick=${() => { startSolidity() }}>Solidity</button>
-              <button class="btn btn-lg btn-primary" onclick=${() => { startVyper() }}>Vyper</button>
+              <button class="btn btn-lg btn-secondary ${css.solidityBtn}" onclick=${() => { startSolidity() }}>Solidity</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { startVyper() }}>Vyper</button>
             </div>
           </div>
           <div class="file">
-            <h3>File</h3>
-            <p onclick=${() => { createNewFile() }}><a>New File</a></p>
-            <label class="${css.text} m-0 h6 text-dark">
-            Open files
-            <input title="open file" type="file" onchange="${
-              (event) => {
-                event.stopPropagation()
-                let fileExplorer = globalRegistry.get('fileexplorer/browser').api
-                fileExplorer.uploadFile(event)
-              }
-            }" multiple />
-          </label>
-            <p onclick=${() => { connectToLocalhost() }}><a>Connect to Localhost</a></p>
-            <p onclick=${() => { importFromExternal() }}><a>Import From external source</a></p>
-          </div>
-        </div>
-        <div class="col-sm-6">
-          <div class="plugins">
-            <h3>Featured Plugins</h3>
-            <p onclick=${() => { startPipeline() }}>Pipeline</p>
-            <p onclick=${() => { startDebugger() }}>Debugger</p>
-            <button onclick=${() => { startPluginManager() }} class="btn btn-lg btn-primary">see all<i class="fa fa-plug" ></i></button>
+            <h4>File</h4>
+            <p class="mb-1 ${css.text}" onclick=${() => { createNewFile() }}>New File</p>
+            <p class="mb-1">
+              <label class="${css.labelIt} ${css.text}">
+                Open Files
+                <input title="open file" type="file" onchange="${
+                  (event) => {
+                    event.stopPropagation()
+                    let fileExplorer = globalRegistry.get('fileexplorer/browser').api
+                    fileExplorer.uploadFile(event)
+                  }
+                }" multiple />
+              </label>
+            </p>
+            <p class="mb-1 ${css.text}" onclick=${() => { connectToLocalhost() }}>Connect to Localhost</p>
+            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From external source</p>
+          </div><!-- end of div.file -->
+        </div><!-- end of #col1 -->
+        <div id="col2" class="col-sm-6">
+          <div class="plugins mb-5">
+            <h4>Featured Plugins</h4>
+            <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
+            <p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
+            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-info ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
           </div>
           <div class="resources">
-            <h3>Resources</h3>
-            <p><a target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
-            <p><a target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
-            <p><a target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
-            <p><a target="__blank" href="">Tutorials</a></p>
-            <p><a target="__blank" href="">Workshops Slides</a></p>
+            <h4>Resources</h4>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="">Tutorials</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="">Workshops Slides</a></p>
           </div>
-        </div>
-      </div>
+        </div><!-- end of #col2 -->
+      </div><!-- end of hpSections -->
       </div>`
 
     return container

From c6f614f61be6ccc28ee5e1add075d2e4159b0baf Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Fri, 12 Apr 2019 12:43:11 +0200
Subject: [PATCH 7/9] add import from gist, github, swarm, ipfs

---
 src/app/ui/landing-page/landing-page.js | 12 ++++++++++--
 src/app/ui/modal-dialog-custom.js       |  2 +-
 src/lib/gist-handler.js                 |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 57822cfda1..2d5c6fc95a 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -189,6 +189,10 @@ export class LandingPage extends BaseApi {
       this.appManager.ensureActivated('remixd')
     }
     let importFromExternal = () => { load('URL') }
+    let importFromGist = () => {
+      let app = globalRegistry.get('app').api
+      app.loadFromGist({gist: ''})
+    }
 
     let container = yo`<div>
       <div class="${css.hpLogoContainer}"><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
@@ -227,8 +231,12 @@ export class LandingPage extends BaseApi {
               </label>
             </p>
             <p class="mb-1 ${css.text}" onclick=${() => { connectToLocalhost() }}>Connect to Localhost</p>
-            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From external source</p>
-          </div><!-- end of div.file -->
+            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From:</p>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { load('Github URL') }}>Github</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { load('bzz-raw URL') }}>Swarm</button>
+              <button class="btn btn-lg btn-secondary" onclick=${() => { load('ipfs URL') }}>Ipfs</button>
+            </div><!-- end of div.file -->
         </div><!-- end of #col1 -->
         <div id="col2" class="col-sm-6">
           <div class="plugins mb-5">
diff --git a/src/app/ui/modal-dialog-custom.js b/src/app/ui/modal-dialog-custom.js
index f793a892f6..16803b32ab 100644
--- a/src/app/ui/modal-dialog-custom.js
+++ b/src/app/ui/modal-dialog-custom.js
@@ -66,7 +66,7 @@ module.exports = {
 function prompt (title, text, hidden, inputValue, ok, cancel, focus) {
   if (!inputValue) inputValue = ''
   var type = hidden ? 'password' : 'text'
-  var input = yo`<input type=${type} name='prompt_text' id='prompt_text' class="${css['prompt_text']}" value='${inputValue}' >`
+  var input = yo`<input type=${type} name='prompt_text' id='prompt_text' class="${css['prompt_text']} form-control" value='${inputValue}' >`
   modal(title, yo`<div>${text}<div>${input}</div></div>`,
     {
       fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) }
diff --git a/src/lib/gist-handler.js b/src/lib/gist-handler.js
index b66db8ef22..f99001b1ff 100644
--- a/src/lib/gist-handler.js
+++ b/src/lib/gist-handler.js
@@ -12,7 +12,7 @@ function GistHandler (_window) {
     var gistId
     if (params['gist'] === '') {
       loadingFromGist = true
-      modalDialogCustom.prompt(null, 'Enter the URL or ID of the Gist you would like to load.', null, (target) => {
+      modalDialogCustom.prompt(null, 'Enter the ID of the Gist you would like to load.', null, (target) => {
         if (target !== '') {
           gistId = getGistId(target)
           if (gistId) {

From b27c66bdd53fb79ae4f4fc5138f7e1cdd627a813 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Fri, 12 Apr 2019 16:08:10 +0200
Subject: [PATCH 8/9] update with vert logo in jumbotron plus other corrections

---
 src/app/ui/landing-page/landing-page.js | 66 +++++++++++++------------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 2d5c6fc95a..85e7b58ead 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -52,11 +52,14 @@ let css = csjs`
     text-decoration: underline;
   }
   .jumbotronContainer {
-    margin: 0 60px;
-    width: 80%;
+    /* margin: 50px 60px 0; */
+    /* width: 80%; */
   }
   .thisJumboton {
     padding: 2.5rem 5rem;
+    /* display: flex;*/
+    /* justify-content: space-between;*/
+    margin-bottom: 4rem;
   }
   .hpLogoContainer {
     margin:30px;
@@ -64,12 +67,12 @@ let css = csjs`
   }
   .jumboBtnContainer {
     float: left;
-    vertical-align: bottom;
-    padding-top: 0px;
+    padding-top: 15px;
   }
   .headlineContainer {
     float: left;
-    padding-right: 90px;
+    padding-top: 17px;
+    margin: 0 100px 0 70px;
   }
   .hpSections {
     margin: 0 60px;
@@ -83,6 +86,16 @@ let css = csjs`
   .seeAll {
     margin-top: 7px;
   }
+  .importFrom p {
+    margin-right: 10px;
+  }
+  .logoContainer {
+    margin-top: 7px;
+    float: left;
+  }
+  .logoContainer img{
+    height: 65px;
+  }
 
 }
 `
@@ -107,18 +120,6 @@ export class LandingPage extends BaseApi {
     this.appManager = appManager
   }
 
-  get profile () {
-    return {
-      displayName: 'Home',
-      name: 'home',
-      methods: [],
-      events: [],
-      description: ' - ',
-      icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxnPjxwYXRoIGQ9IiAgIE0yNSwxQzExLjc0NSwxLDEsMTEuNzQ1LDEsMjVzMTAuNzQ1LDI0LDI0LDI0czI0LTEwLjc0NSwyNC0yNFMzOC4yNTUsMSwyNSwxTDI1LDF6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PHBhdGggZD0iICBNNDAuNjk2LDYuODMyYzAsMC0xMy4xNjksOC4yMTItMTEuNTMyLDIyLjMzMmMxLjE0Miw5Ljg1OCwxMS45MzUsMTMuMzc3LDExLjkzNSwxMy4zNzciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNNy4zODUsOC45MTNjMCwwLDMuMDQxLDYuNDc2LDMuMDQxLDE4LjE2OWMwLDkuMjQ2LTMuNTgzLDEyLjkxMS0zLjU4MywxMi45MTEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PHBhdGggZD0iICBNMS44NTIsMjIuOTMyYzAsMCw2LjQ5Myw2LjIzMiwyMy4xNDgsNi4yMzJzMjMuNDM4LTYuMjQ2LDIzLjQzOC02LjI0NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjA1ODMiLz48cGF0aCBkPSIgIE0yNS42NDgsMS41NDhjMCwwLTYuODk1LDcuOTM1LTYuODk1LDIzLjQ1MkMxOC43NTQsNDAuNTE4LDI1LDQ4LjYyNSwyNSw0OC42MjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMi4wNTgzIi8+PC9zdmc+',
-      location: 'mainPanel'
-    }
-  }
-
   render () {
     let load = function (item) {
       let compilerImport = new CompilerImport()
@@ -141,7 +142,7 @@ export class LandingPage extends BaseApi {
         }
       })
     }
-    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEzLjM2NXB4IiBoZWlnaHQ9IjIwOS44NzNweCIgdmlld0JveD0iMjI3LjM4NyA5OS4wNTEgNjEzLjM2NSAyMDkuODczIg0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDIyNy4zODcgOTkuMDUxIDYxMy4zNjUgMjA5Ljg3MyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDM0LjU4MiwxNzYuMjA2YzAuODExLDAsMS42MjIsMC4yODUsMi40MzgsMC44NTNjMC44MTEsMC41NzEsMS4yMTcsMS4zNCwxLjIxNywyLjMxNA0KCQljMCwyLjI3Ni0xLjA1OSwzLjQ5Ni0zLjE2OCwzLjY1NWMtNS4wMzcsMC44MTQtOS4zODEsMi4zNTYtMTMuMDM2LDQuNjMxYy0zLjY1NSwyLjI3NS02LjY2Myw1LjExNi05LjAxNyw4LjUyNw0KCQljLTIuMzU2LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM4LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDcsOC44MTQtMS43MDcsMTMuNTI0djMyLjY1MmMwLDIuMjczLTEuMTM5LDMuNDExLTMuNDExLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIyYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzIsMCwzLjQxMSwxLjEzOCwzLjQxMSwzLjQxMXYxNS4xMDcNCgkJYzEuNDYzLTIuNDM3LDMuMjA3LTQuNzUyLDUuMjQtNi45NDVjMi4wMjgtMi4xOTIsNC4yNjQtNC4xNDMsNi43LTUuODQ4YzIuNDM4LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM0MjguNzcxLDE3Ni43MzQsNDMxLjY1OCwxNzYuMjA2LDQzNC41ODIsMTc2LjIwNnoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNTAxLjc3MywxNzQuNWM1LjY4NSwwLDEwLjk2NiwxLjE4MSwxNS44MzgsMy41MzRjNC44NzUsMi4zNTUsOS4wNTYsNS40ODEsMTIuNTUxLDkuMzgxDQoJCWMzLjQ5MiwzLjg5OCw2LjIxNCw4LjQwNiw4LjE2NCwxMy41MjNjMS45NDksNS4xMTcsMi45MjQsMTAuNDQsMi45MjQsMTUuOTYxYzAsMC45NzctMC4zNjYsMS43OS0xLjA5OCwyLjQzOA0KCQljLTAuNzMsMC42NDktMS41ODIsMC45NzUtMi41NTksMC45NzVoLTY3Ljk4NmMwLjQ4Niw0LjIyNywxLjU4NCw4LjI4NSwzLjI4OSwxMi4xODVjMS43MDcsMy44OTgsMy45MzgsNy4zMTIsNi43MDEsMTAuMjMzDQoJCWMyLjc2MiwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ni0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTQsMy40MTIsMy40MTJjMCwwLjE2My0wLjE2NCwwLjczLTAuNDg2LDEuNzA1DQoJCWMtMy40MTIsNi4wMTMtOC4yMDUsMTAuNDc5LTE0LjM3NywxMy40MDJjLTYuMTc3LDIuOTI0LTEyLjY3Miw0LjM4Ny0xOS40OTYsNC4zODdjLTUuNjg4LDAtMTAuOTI4LTEuMTgxLTE1LjcxNy0zLjUzMw0KCQljLTQuNzkzLTIuMzU0LTguOTM3LTUuNDgyLTEyLjQyOS05LjM4MmMtMy40OTUtMy44OTktNi4yMTQtOC40MDctOC4xNjMtMTMuNTI0cy0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFzNC42NjgtOS42MjUsOC4xNjMtMTMuNTIzYzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOS05LjM4MQ0KCQlDNDkwLjg0NiwxNzUuNjgxLDQ5Ni4wODQsMTc0LjUsNTAxLjc3MywxNzQuNXogTTUzMy45MzksMjEzLjQ4OWMtMC4zMjgtNC4yMjMtMS4zNC04LjI4NC0zLjA0NS0xMi4xODQNCgkJYy0xLjcwNy0zLjg5OC0zLjk4Mi03LjMxMi02LjgyNC0xMC4yMzVjLTIuODQ0LTIuOTI0LTYuMTc0LTUuMjc2LTkuOTktNy4wNjZjLTMuODE5LTEuNzg1LTcuOTItMi42OC0xMi4zMDctMi42OA0KCQljLTQuNTQ5LDAtOC42OTEsMC44OTUtMTIuNDI4LDIuNjhjLTMuNzM4LDEuNzktNi45ODYsNC4xNDQtOS43NDgsNy4wNjZjLTIuNzY0LDIuOTI1LTQuOTk0LDYuMzM3LTYuNzAxLDEwLjIzNQ0KCQljLTEuNzA1LDMuODk4LTIuODAxLDcuOTYxLTMuMjg5LDEyLjE4NEg1MzMuOTM5eiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik02NjguNjg5LDE3NC43NDNjNS4wMzUsMCw5LjUwNCwxLjAxOCwxMy40MDIsMy4wNDdjMy44OTksMi4wMzMsNy4xODksNC42NzIsOS44Nyw3LjkyDQoJCWMyLjY4MSwzLjI1MSw0LjcwOSw3LjA2NSw2LjA5MywxMS40NTJjMS4zNzksNC4zODcsMi4wNjksOC44NTUsMi4wNjksMTMuNDAxdjQzLjYyYzAsMC45NzYtMC4zNjUsMS43ODktMS4wOTcsMi40MzgNCgkJYy0wLjczLDAuNjQ2LTEuNTA0LDAuOTc1LTIuMzEzLDAuOTc1Yy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTQzLjYyYzAtMy41Ny0wLjUyOS03LjEwNC0xLjU4NS0xMC42DQoJCWMtMS4wNTktMy40OTEtMi42MDItNi42MTgtNC42My05LjM4MmMtMi4wMzMtMi43NjEtNC41OTItNC45NTMtNy42NzctNi41OGMtMy4wODgtMS42MjEtNi42NjItMi40MzctMTAuNzIyLTIuNDM3DQoJCWMtNS4yLDAtOS41ODgsMS4yMTktMTMuMTU5LDMuNjU0Yy0zLjU3NCwyLjQzOC02LjQ1Nyw1LjU2Ni04LjY1LDkuMzgyYy0yLjE5MiwzLjgxOS0zLjgxNyw4LjA0Mi00Ljg3NCwxMi42NzINCgkJYy0xLjA1OSw0LjYzMS0xLjU4NCw5LjA1OS0xLjU4NCwxMy4yOHYzMy42MjljMCwwLjk3Ni0wLjM2NSwxLjc4OS0xLjA5NiwyLjQzOGMtMC43MywwLjY0Ni0xLjUwNSwwLjk3NS0yLjMxNSwwLjk3NQ0KCQljLTIuMjc2LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMnYtNDMuNjJjMC0zLjU3LTAuNTI5LTcuMTA0LTEuNTg0LTEwLjZjLTEuMDU5LTMuNDkxLTIuNjAyLTYuNjE4LTQuNjMtOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNy0xMC43MjMtMi40MzdjLTUuMDM2LDAtOS4zNDQsMC44OTYtMTIuOTE0LDIuNjgxDQoJCWMtMy41NzUsMS43OS02LjU0Miw0LjI2Ni04Ljg5Niw3LjQzM2MtMi4zNTYsMy4xNjctNC4wNjIsNi45NDQtNS4xMTYsMTEuMzMxYy0xLjA2LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5NmMwLDIuMjcyLTEuMTM5LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDEyLTEuMTQtMy40MTItMy40MTJ2LTc0LjU2NmMwLTIuMjczLDEuMTM2LTMuNDExLDMuNDEyLTMuNDExDQoJCWMyLjI3MiwwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2LTkuMzgyLDExLjgxOC0xMi41NWM0Ljk1NC0zLjE2NywxMC41MTgtNC43NTIsMTYuNjkxLTQuNzUyDQoJCWM2Ljk4NCwwLDEyLjk5NiwxLjk5LDE4LjAzMyw1Ljk3YzUuMDMyLDMuOTgzLDguNjg4LDkuMjIzLDEwLjk2NSwxNS43MTljMi43NjEtNi4zMzYsNi43NC0xMS41MzMsMTEuOTQtMTUuNTk2DQoJCUM2NTUuMTI1LDE3Ni43NzYsNjYxLjM4LDE3NC43NDMsNjY4LjY4OSwxNzQuNzQzeiIvPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03NDIuNzUzLDE3Ni42OTNjMC44MTIsMCwxLjU4NCwwLjM2NSwyLjMxMywxLjA5OGMwLjczMSwwLjcyOSwxLjA5OCwxLjUwNCwxLjA5OCwyLjMxM3Y3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5OCwyLjMxNWMtMC43MjksMC43MjktMS41MDQsMS4wOTctMi4zMTMsMS4wOTdjLTAuOTc2LDAtMS43OS0wLjM2Ni0yLjQzOC0xLjA5Nw0KCQljLTAuNjQ5LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzEzQzc0MC45NjMsMTc3LjA1OSw3NDEuNzc3LDE3Ni42OTMsNzQyLjc1MywxNzYuNjkzeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNODM3LjM0LDE3NS45NjJjMi4yNzMsMCwzLjQxMiwxLjEzOSwzLjQxMiwzLjQxMWwtMC40ODcsMS45NWwtMjQuMzY4LDM1LjMzNGwyNC4zNjgsMzUuNTc2DQoJCWMwLjMyMywwLjk3NywwLjQ4NywxLjYyNiwwLjQ4NywxLjk1YzAsMi4yNzItMS4xMzksMy40MTItMy40MTIsMy40MTJjLTEuMzAyLDAtMi4xOTMtMC40ODgtMi42OC0xLjQ2M2wtMjIuOTA2LTMzLjM4NA0KCQlsLTIyLjY2MywzMy4zODRjLTAuODEzLDAuOTc1LTEuNzksMS40NjMtMi45MjQsMS40NjNjLTIuMjc3LDAtMy40MTEtMS4xNC0zLjQxMS0zLjQxMmMwLTAuMzI0LDAuMTU5LTAuOTc1LDAuNDg2LTEuOTUNCgkJbDI0LjM2OS0zNS41NzZsLTI0LjM2OS0zNS4zMzRsLTAuNDg2LTEuOTVjMC0yLjI3MiwxLjEzNC0zLjQxMSwzLjQxMS0zLjQxMWMxLjEzNCwwLDIuMTA5LDAuNDg3LDIuOTI0LDEuNDYybDIyLjY2MywzMy4xNDENCgkJbDIyLjkwNi0zMy4xNDFDODM1LjE0NiwxNzYuNDQ5LDgzNi4wMzgsMTc1Ljk2Miw4MzcuMzQsMTc1Ljk2MnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjI3LjM4NywyMTguNTgzIDI5My4yODgsMzA4LjkyNCAyOTMuMjg4LDI1Ni40NTkgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI5My4yODgsMjU2LjQ1OSAyOTMuMjg4LDMwOC45MjQgMzU5LjIyOSwyMTguNTgzIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyOTMuMjg4LDE3Ni4yODUgMjI3LjM4NywyMDUuNDIzIDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyMjcuMzg3LDIwNS40MjQgMjkzLjI4OCwyNDMuMzE5IDI5My4yODgsMTc2LjI4NiAyOTMuMjg4LDk5LjA1MiAJCQkJIi8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPGcgb3BhY2l0eT0iMC44Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMjkzLjI4OCw5OS4wNTEgMjkzLjI4OCwxNzYuMjg1IDI5My4yODgsMjQzLjMxOSAzNTkuMTg4LDIwNS40MjMgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
+    let logo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM0MTQwNDIiIGQ9Ik03MC41ODIsNDI4LjkwNGMwLjgxMSwwLDEuNjIyLDAuMjg1LDIuNDM3LDAuODUzYzAuODExLDAuNTcxLDEuMjE4LDEuMzQsMS4yMTgsMi4zMTQNCgkJYzAsMi4yNzctMS4wNTksMy40OTYtMy4xNjgsMy42NTZjLTUuMDM4LDAuODE0LTkuMzgxLDIuMzU2LTEzLjAzNyw0LjYzYy0zLjY1NSwyLjI3Ni02LjY2Myw1LjExNy05LjAxNiw4LjUyOA0KCQljLTIuMzU3LDMuNDExLTQuMTA0LDcuMjcyLTUuMjM5LDExLjU3NWMtMS4xMzksNC4zMDctMS43MDYsOC44MTQtMS43MDYsMTMuNTI0djMyLjY1M2MwLDIuMjczLTEuMTM5LDMuNDExLTMuNDEyLDMuNDExDQoJCWMtMi4yNzcsMC0zLjQxMi0xLjEzOC0zLjQxMi0zLjQxMXYtNzQuMzIzYzAtMi4yNzMsMS4xMzUtMy40MTEsMy40MTItMy40MTFjMi4yNzMsMCwzLjQxMiwxLjEzOCwzLjQxMiwzLjQxMXYxNS4xMDgNCgkJYzEuNDYyLTIuNDM3LDMuMjA2LTQuNzUyLDUuMjM5LTYuOTQ1YzIuMDI5LTIuMTkzLDQuMjY0LTQuMTQzLDYuNzAxLTUuODQ4YzIuNDM3LTEuNzA2LDUuMDc2LTMuMDg1LDcuOTE5LTQuMTQzDQoJCUM2NC43NzEsNDI5LjQzMyw2Ny42NTgsNDI4LjkwNCw3MC41ODIsNDI4LjkwNHoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMTM3Ljc3Myw0MjcuMTk4YzUuNjg1LDAsMTAuOTY2LDEuMTgxLDE1LjgzOSwzLjUzNGM0Ljg3NCwyLjM1Niw5LjA1NSw1LjQ4MiwxMi41NSw5LjM4MQ0KCQljMy40OTIsMy44OTksNi4yMTQsOC40MDcsOC4xNjQsMTMuNTI0YzEuOTQ5LDUuMTE3LDIuOTI0LDEwLjQ0LDIuOTI0LDE1Ljk2MWMwLDAuOTc2LTAuMzY2LDEuNzktMS4wOTcsMi40MzgNCgkJYy0wLjczMSwwLjY1LTEuNTgzLDAuOTc1LTIuNTU5LDAuOTc1aC02Ny45ODdjMC40ODcsNC4yMjYsMS41ODQsOC4yODUsMy4yOSwxMi4xODRjMS43MDYsMy44OTksMy45MzcsNy4zMTIsNi43MDEsMTAuMjM0DQoJCWMyLjc2MSwyLjkyNSw2LjAwOCw1LjI4MSw5Ljc0OCw3LjA2N2MzLjczNSwxLjc4OSw3Ljg3NywyLjY4MSwxMi40MjgsMi42ODFjMTIuMDIxLDAsMjEuMzYtNC43OSwyOC4wMjMtMTQuMzc3DQoJCWMwLjY0Ny0xLjEzNiwxLjYyMi0xLjcwNiwyLjkyNC0xLjcwNmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDEyYzAsMC4xNjMtMC4xNjQsMC43My0wLjQ4NywxLjcwNQ0KCQljLTMuNDEyLDYuMDEzLTguMjA1LDEwLjQ3OS0xNC4zNzcsMTMuNDAyYy02LjE3NiwyLjkyNC0xMi42NzEsNC4zODctMTkuNDk1LDQuMzg3Yy01LjY4OSwwLTEwLjkyOC0xLjE4MS0xNS43MTgtMy41MzMNCgkJYy00Ljc5My0yLjM1NC04LjkzNi01LjQ4My0xMi40MjgtOS4zODJjLTMuNDk1LTMuODk5LTYuMjE0LTguNDA3LTguMTYzLTEzLjUyNGMtMS45NS01LjExOC0yLjkyNC0xMC40MzctMi45MjQtMTUuOTYyDQoJCWMwLTUuNTIxLDAuOTc1LTEwLjg0NCwyLjkyNC0xNS45NjFjMS45NDktNS4xMTcsNC42NjgtOS42MjUsOC4xNjMtMTMuNTI0YzMuNDkyLTMuODk4LDcuNjM0LTcuMDI0LDEyLjQyOC05LjM4MQ0KCQlDMTI2Ljg0Niw0MjguMzc5LDEzMi4wODQsNDI3LjE5OCwxMzcuNzczLDQyNy4xOTh6IE0xNjkuOTQsNDY2LjE4OGMtMC4zMjgtNC4yMjMtMS4zNDEtOC4yODUtMy4wNDYtMTIuMTg0DQoJCWMtMS43MDYtMy44OTktMy45ODItNy4zMTItNi44MjMtMTAuMjM1Yy0yLjg0NC0yLjkyNC02LjE3NS01LjI3Ny05Ljk5MS03LjA2N2MtMy44MTktMS43ODUtNy45Mi0yLjY4LTEyLjMwNi0yLjY4DQoJCWMtNC41NSwwLTguNjkyLDAuODk1LTEyLjQyOCwyLjY4Yy0zLjczOSwxLjc5LTYuOTg3LDQuMTQ0LTkuNzQ4LDcuMDY3Yy0yLjc2NCwyLjkyNC00Ljk5NSw2LjMzNi02LjcwMSwxMC4yMzUNCgkJYy0xLjcwNiwzLjg5OC0yLjgwMiw3Ljk2MS0zLjI5LDEyLjE4NEgxNjkuOTR6Ii8+DQoJPHBhdGggZmlsbD0iIzQxNDA0MiIgZD0iTTMwNC42OSw0MjcuNDQxYzUuMDM0LDAsOS41MDQsMS4wMTgsMTMuNDAyLDMuMDQ3YzMuODk5LDIuMDMzLDcuMTg5LDQuNjcyLDkuODcsNy45Mg0KCQljMi42OCwzLjI1MSw0LjcwOSw3LjA2Niw2LjA5MiwxMS40NTJjMS4zNzksNC4zODcsMi4wNyw4Ljg1NiwyLjA3LDEzLjQwMnY0My42MmMwLDAuOTc1LTAuMzY1LDEuNzg5LTEuMDk3LDIuNDM4DQoJCWMtMC43MywwLjY0Ni0xLjUwMywwLjk3NS0yLjMxMywwLjk3NWMtMi4yNzYsMC0zLjQxMi0xLjE0LTMuNDEyLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTI5LTcuMTA0LTEuNTg0LTEwLjYNCgkJYy0xLjA1OS0zLjQ5MS0yLjYwMi02LjYxOC00LjYzLTkuMzgyYy0yLjAzMy0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4OC0xLjYyMS02LjY2Mi0yLjQzNi0xMC43MjItMi40MzYNCgkJYy01LjIsMC05LjU4NywxLjIxOC0xMy4xNTksMy42NTRjLTMuNTc0LDIuNDM4LTYuNDU3LDUuNTY2LTguNjUsOS4zODJjLTIuMTkzLDMuODE5LTMuODE4LDguMDQyLTQuODc0LDEyLjY3Mg0KCQljLTEuMDU5LDQuNjMtMS41ODQsOS4wNTgtMS41ODQsMTMuMjh2MzMuNjI5YzAsMC45NzUtMC4zNjUsMS43ODktMS4wOTYsMi40MzhjLTAuNzMxLDAuNjQ2LTEuNTA1LDAuOTc1LTIuMzE1LDAuOTc1DQoJCWMtMi4yNzYsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEydi00My42MmMwLTMuNTcxLTAuNTMtNy4xMDQtMS41ODUtMTAuNmMtMS4wNTgtMy40OTEtMi42MDEtNi42MTgtNC42MjktOS4zODINCgkJYy0yLjAzNC0yLjc2MS00LjU5Mi00Ljk1My03LjY3Ny02LjU4Yy0zLjA4Ny0xLjYyMS02LjY2My0yLjQzNi0xMC43MjItMi40MzZjLTUuMDM3LDAtOS4zNDQsMC44OTUtMTIuOTE1LDIuNjgNCgkJYy0zLjU3NSwxLjc5LTYuNTQyLDQuMjY2LTguODk1LDcuNDMzYy0yLjM1NywzLjE2Ny00LjA2Myw2Ljk0NC01LjExNywxMS4zMzFjLTEuMDU5LDQuMzg2LTEuNTg0LDkuMS0xLjU4NCwxNC4xMzR2My44OTl2MC4yNDMNCgkJdjMyLjg5N2MwLDIuMjcyLTEuMTM4LDMuNDEyLTMuNDEyLDMuNDEyYy0yLjI3NiwwLTMuNDExLTEuMTQtMy40MTEtMy40MTJ2LTc0LjU2N2MwLTIuMjczLDEuMTM1LTMuNDExLDMuNDExLTMuNDExDQoJCWMyLjI3MywwLDMuNDEyLDEuMTM4LDMuNDEyLDMuNDExdjEyLjQyOGMyLjkyNC01LjE5Nyw2Ljg2MS05LjM4MiwxMS44MTktMTIuNTVjNC45NTQtMy4xNjcsMTAuNTE3LTQuNzUyLDE2LjY5Mi00Ljc1Mg0KCQljNi45ODMsMCwxMi45OTUsMS45OTEsMTguMDMyLDUuOTdjNS4wMzMsMy45ODMsOC42ODgsOS4yMjMsMTAuOTY2LDE1LjcxOWMyLjc2LTYuMzM2LDYuNzM5LTExLjUzMywxMS45NC0xNS41OTYNCgkJQzI5MS4xMjUsNDI5LjQ3NSwyOTcuMzgsNDI3LjQ0MSwzMDQuNjksNDI3LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNMzc4Ljc1Myw0MjkuMzkyYzAuODExLDAsMS41ODQsMC4zNjUsMi4zMTQsMS4wOTdjMC43MzEsMC43MywxLjA5NywxLjUwNCwxLjA5NywyLjMxNHY3NC4wOA0KCQljMCwwLjgxNC0wLjM2NSwxLjU4NC0xLjA5NywyLjMxNWMtMC43MywwLjczLTEuNTA0LDEuMDk3LTIuMzE0LDEuMDk3Yy0wLjk3NSwwLTEuNzktMC4zNjYtMi40MzgtMS4wOTcNCgkJYy0wLjY1LTAuNzMxLTAuOTc1LTEuNTAxLTAuOTc1LTIuMzE1di03NC4wOGMwLTAuODExLDAuMzI0LTEuNTg0LDAuOTc1LTIuMzE0QzM3Ni45NjMsNDI5Ljc1NywzNzcuNzc4LDQyOS4zOTIsMzc4Ljc1Myw0MjkuMzkyeiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjNDE0MDQyIiBkPSJNNDczLjM0LDQyOC42NmMyLjI3MywwLDMuNDEyLDEuMTM5LDMuNDEyLDMuNDExbC0wLjQ4NywxLjk1bC0yNC4zNjgsMzUuMzM0bDI0LjM2OCwzNS41NzcNCgkJYzAuMzIzLDAuOTc2LDAuNDg3LDEuNjI2LDAuNDg3LDEuOTVjMCwyLjI3Mi0xLjEzOSwzLjQxMi0zLjQxMiwzLjQxMmMtMS4zMDIsMC0yLjE5My0wLjQ4OC0yLjY4LTEuNDYzbC0yMi45MDYtMzMuMzg0DQoJCWwtMjIuNjYzLDMzLjM4NGMtMC44MTQsMC45NzUtMS43OSwxLjQ2My0yLjkyNCwxLjQ2M2MtMi4yNzcsMC0zLjQxMS0xLjE0LTMuNDExLTMuNDEyYzAtMC4zMjQsMC4xNTktMC45NzUsMC40ODYtMS45NQ0KCQlsMjQuMzY5LTM1LjU3N2wtMjQuMzY5LTM1LjMzNGwtMC40ODYtMS45NWMwLTIuMjcyLDEuMTM0LTMuNDExLDMuNDExLTMuNDExYzEuMTM0LDAsMi4xMDksMC40ODcsMi45MjQsMS40NjJsMjIuNjYzLDMzLjE0MQ0KCQlsMjIuOTA2LTMzLjE0MUM0NzEuMTQ2LDQyOS4xNDcsNDcyLjAzOCw0MjguNjYsNDczLjM0LDQyOC42NnoiLz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8ZyBvcGFjaXR5PSIwLjQ1Ij4NCgkJCTxnPg0KCQkJCTxwb2x5Z29uIGZpbGw9IiMwMTAxMDEiIHBvaW50cz0iMTUwLjczNCwxOTYuMjEyIDI1NS45NjksMzQ0LjUwOCAyNTUuOTY5LDI1OC4zODcgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuOCI+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBmaWxsPSIjMDEwMTAxIiBwb2ludHM9IjI1NS45NjksMjU4LjM4NyAyNTUuOTY5LDM0NC41MDggMzYxLjI2NywxOTYuMjEyIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjYiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDEyNi43ODEgMTUwLjczMywxNzQuNjExIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJCTxnIG9wYWNpdHk9IjAuNDUiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIxNTAuNzM0LDE3NC42MTIgMjU1Ljk2OSwyMzYuODE4IDI1NS45NjksMTI2Ljc4MiAyNTUuOTY5LDAuMDAxIAkJCQkiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjgiPg0KCQkJPGc+DQoJCQkJPHBvbHlnb24gZmlsbD0iIzAxMDEwMSIgcG9pbnRzPSIyNTUuOTY5LDAgMjU1Ljk2OSwxMjYuNzgxIDI1NS45NjksMjM2LjgxOCAzNjEuMjA0LDE3NC42MTEgCQkJCSIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo='
 
     let learnMore = () => { tooltip('not implemented') }
 
@@ -188,21 +189,22 @@ export class LandingPage extends BaseApi {
     let connectToLocalhost = () => {
       this.appManager.ensureActivated('remixd')
     }
-    let importFromExternal = () => { load('URL') }
     let importFromGist = () => {
       let app = globalRegistry.get('app').api
       app.loadFromGist({gist: ''})
     }
 
-    let container = yo`<div>
-      <div class="${css.hpLogoContainer}"><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
+    let container = yo`<div class="bg-light">
       <div class="${css.jumbotronContainer}">
-        <div class="jumbotron clearfix ${css.thisJumboton}">
+        <div class="alert alert-info clearfix ${css.thisJumboton}">
+          <div class="${css.logoContainer}">
+            <img src="${logo}" alt="remix logo">
+          </div>
           <div class="${css.headlineContainer}">
-            <h3 class="">The new layout has arrived</h3>
+            <h2 class="">The new layout has arrived</h2>
           </div>
           <div class="${css.jumboBtnContainer}">
-            <button class="btn btn-info btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
+            <button class="btn btn-primary btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
           </div>
         </div><!-- end of jumbotron -->
       </div><!-- end of jumbotron container -->
@@ -231,19 +233,21 @@ export class LandingPage extends BaseApi {
               </label>
             </p>
             <p class="mb-1 ${css.text}" onclick=${() => { connectToLocalhost() }}>Connect to Localhost</p>
-            <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From:</p>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { load('Github URL') }}>Github</button>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { load('bzz-raw URL') }}>Swarm</button>
-              <button class="btn btn-lg btn-secondary" onclick=${() => { load('ipfs URL') }}>Ipfs</button>
-            </div><!-- end of div.file -->
+            <p class="mb-1">Import From:</p>
+            <div class="btn-group">
+              <button class="btn btn-sm btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Github URL') }}>Github</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('bzz-raw URL') }}>Swarm</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('ipfs URL') }}>Ipfs</button>
+            </div><!-- end of btn-group -->
+          </div><!-- end of div.file -->
         </div><!-- end of #col1 -->
         <div id="col2" class="col-sm-6">
           <div class="plugins mb-5">
             <h4>Featured Plugins</h4>
             <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
             <p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
-            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-info ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
+            <p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
           </div>
           <div class="resources">
             <h4>Resources</h4>

From 78ac7794d545da30530daaec2baf1c74cbb0d149 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Mon, 15 Apr 2019 12:38:27 +0200
Subject: [PATCH 9/9] user-select:none

---
 src/app/ui/landing-page/landing-page.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 85e7b58ead..891f9efac7 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -51,6 +51,9 @@ let css = csjs`
   .text:hover {
     text-decoration: underline;
   }
+  .homeContainer {
+    user-select:none;
+  }
   .jumbotronContainer {
     /* margin: 50px 60px 0; */
     /* width: 80%; */
@@ -194,7 +197,7 @@ export class LandingPage extends BaseApi {
       app.loadFromGist({gist: ''})
     }
 
-    let container = yo`<div class="bg-light">
+    let container = yo`<div class="${css.homeContainer} bg-light">
       <div class="${css.jumbotronContainer}">
         <div class="alert alert-info clearfix ${css.thisJumboton}">
           <div class="${css.logoContainer}">
@@ -254,8 +257,7 @@ export class LandingPage extends BaseApi {
             <p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
             <p class="mb-1"><a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
             <p class="mb-1"><a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
-            <p class="mb-1"><a class="${css.text}" target="__blank" href="">Tutorials</a></p>
-            <p class="mb-1"><a class="${css.text}" target="__blank" href="">Workshops Slides</a></p>
+            <p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix.readthedocs.io/en/latest/">Tutorials</a></p>
           </div>
         </div><!-- end of #col2 -->
       </div><!-- end of hpSections -->