Merge branch 'soon'

.jshintignore

@@ -9,3 +9,5 @@ www/scratch
 www/common/toolbar.js
 www/common/hyperscript.js
 www/common/tippy.min.js
+
+www/pad/wysiwygarea-plugin.js

bower.json

@@ -39,6 +39,7 @@
     "require-css": "0.1.10",
     "less": "^2.7.2",
     "bootstrap": "#v4.0.0-alpha.6",
-    "diff-dom": "2.1.1"
+    "diff-dom": "2.1.1",
+    "open-sans-fontface": "^1.4.2"
   }
 }

config.example.js

@@ -82,23 +82,6 @@ module.exports = {
      */
     websocketPath: '/cryptpad_websocket',
 
-    /*  it is assumed that your websocket will bind to the same port as http
-     *  you can override this behaviour by supplying a number via websocketPort
-     */
-    //websocketPort: 3000,
-
-    /*  if you want to run a different version of CryptPad but using the same websocket
-     *  server, you should use the other server port as websocketPort and disable
-     *  the websockets on that server
-     */
-    //useExternalWebsocket: false,
-
-    /*  If CryptPad is proxied without using https, the server needs to know.
-     *  Specify 'useSecureWebsockets: true' so that it can send
-     *  Content Security Policy Headers that prevent http and https from mixing
-     */
-     useSecureWebsockets: false,
-
     /*  CryptPad can log activity to stdout
      *  This may be useful for debugging
      */
@@ -119,6 +102,7 @@ module.exports = {
         'terms',
         'about',
         'contact',
+        'what-is-cryptpad'
     ],
 
     /*  Limits, Donations, Subscriptions and Contact
@@ -237,14 +221,6 @@ module.exports = {
      */
     suppressRPCErrors: false,
 
-
-    /* WARNING: EXPERIMENTAL
-     *
-     *  CryptPad features experimental support for encrypted file upload.
-     *  Our encryption format is still liable to change. As such, we do not
-     *  guarantee that files uploaded now will be supported in the future
-     */
-
     /*  Setting this value to anything other than true will cause file upload
      *  attempts to be rejected outright.
      */

customize.dist/CryptPad_logo_color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.4 94.7"><defs><style>.cls-1{fill:#4591c4}.cls-2{fill:#999}</style></defs><title>CryptPad_logo_color</title><g id="Layer_2" data-name="Layer 2"><g id="svg2"><g id="g4845"><path id="path4811" class="cls-1" d="M99.5 63.6a24.8 24.8 0 0 1-5.9-.6 8.5 8.5 0 0 1-3.8-1.9 7.1 7.1 0 0 1-2-3.4 19.4 19.4 0 0 1-.6-5.2v-10a19.4 19.4 0 0 1 .6-5.1 7.1 7.1 0 0 1 2-3.4 8.5 8.5 0 0 1 3.8-2 24.8 24.8 0 0 1 5.9-.6h22.3v6.2h-22a11.8 11.8 0 0 0-2.7.3 3.5 3.5 0 0 0-1.7.9 3.3 3.3 0 0 0-.9 1.6 11.1 11.1 0 0 0-.2 2.5v9.4a11.1 11.1 0 0 0 .2 2.5 3.3 3.3 0 0 0 .9 1.6 3.3 3.3 0 0 0 1.7.8l2.7.2h22v6.1z"/><path id="path4813" class="cls-1" d="M126.5 63.6V48.8a16 16 0 0 1 .7-4.9 7.5 7.5 0 0 1 2.1-3.3 8.9 8.9 0 0 1 3.7-1.9 21.4 21.4 0 0 1 5.5-.6h4.6v5.7h-4.4l-2.5.2a3.3 3.3 0 0 0-1.6.8 3.2 3.2 0 0 0-.8 1.6 10.1 10.1 0 0 0-.3 2.5v14.7z"/><path id="path4815" class="cls-1" d="M154.1 51.4a3.8 3.8 0 0 0 .9 3 4.6 4.6 0 0 0 3.1.8h15.7V38h6.8v25.2q0 4.3-2.1 6.2t-6.9 1.9h-10.2v-5.8h9.6a3.3 3.3 0 0 0 2.1-.6 2.7 2.7 0 0 0 .7-2.2v-2h-16.1a19 19 0 0 1-4.9-.5 7.8 7.8 0 0 1-3.3-1.7 6.5 6.5 0 0 1-1.8-2.8 12.7 12.7 0 0 1-.6-4V38h6.9z"/><path id="path4817" class="cls-1" d="M207.5 38a25.1 25.1 0 0 1 5.9.6 8.5 8.5 0 0 1 3.8 1.9 7.1 7.1 0 0 1 2 3.4 19.7 19.7 0 0 1 .6 5.2v3.4a19.4 19.4 0 0 1-.6 5.2 7.1 7.1 0 0 1-2 3.4 8.5 8.5 0 0 1-3.8 1.9 25.1 25.1 0 0 1-5.9.6h-14.3v7.6h-7V49.1a19.7 19.7 0 0 1 .6-5.2 7.1 7.1 0 0 1 2-3.4 8.6 8.6 0 0 1 3.8-1.9 25.1 25.1 0 0 1 5.9-.6zm5.3 11.3a11.7 11.7 0 0 0-.3-2.7 2.9 2.9 0 0 0-1-1.6 4 4 0 0 0-1.9-.8l-3-.2h-7.8l-2.7.2a3.5 3.5 0 0 0-1.7.8 3.2 3.2 0 0 0-.8 1.6 11.7 11.7 0 0 0-.2 2.6v8.4h13.4l3-.2a3.8 3.8 0 0 0 1.9-.7 2.9 2.9 0 0 0 1-1.6 11.9 11.9 0 0 0 .3-2.8z"/><path id="path4819" class="cls-1" d="M226.5 63.6V43.8H223V38h3.6v-7.2h7.2V38h8.1v5.7h-8.1v19.9z"/><path id="path4821" class="cls-2" d="M252.4 54.4v9.2h-7.2V31.4H271a25.7 25.7 0 0 1 5.8.5 8.4 8.4 0 0 1 3.7 1.8 6.8 6.8 0 0 1 2 3.2 17.1 17.1 0 0 1 .6 4.8v2.8a16.9 16.9 0 0 1-.6 4.8 6 6 0 0 1-2 3 8.3 8.3 0 0 1-3.7 1.6 31.6 31.6 0 0 1-5.9.4zm23.5-12.3q0-2.6-1.1-3.5t-4-.9h-18.4v11h18.5a6.5 6.5 0 0 0 3.9-.9q1.1-.9 1.1-3.4z"/><path id="path4823" class="cls-2" d="M296.2 63.6a18.4 18.4 0 0 1-4.6-.5 7.4 7.4 0 0 1-2.9-1.3 4.6 4.6 0 0 1-1.5-2.1 8.7 8.7 0 0 1-.4-2.8v-2.4a9.3 9.3 0 0 1 .4-2.9 4.7 4.7 0 0 1 1.4-2.1 6.5 6.5 0 0 1 2.7-1.3 17.7 17.7 0 0 1 4.4-.4h18.9v-.6q0-2.5-1-3.3a5.3 5.3 0 0 0-3.4-.8h-7V38h7a20.7 20.7 0 0 1 5.2.6 8.9 8.9 0 0 1 3.5 1.7 6.7 6.7 0 0 1 2 2.9 12.5 12.5 0 0 1 .6 4.2v6.2a17.2 17.2 0 0 1-.5 4.7 6.3 6.3 0 0 1-1.9 3.1 7.9 7.9 0 0 1-3.6 1.7 26.8 26.8 0 0 1-5.6.5zM314.7 52h-18.2a3.1 3.1 0 0 0-1.9.5 2.5 2.5 0 0 0-.7 2.1v1.7a2.1 2.1 0 0 0 .8 1.9 3.7 3.7 0 0 0 2.1.5H310l2.1-.2a3.2 3.2 0 0 0 1.5-.7 3 3 0 0 0 .9-1.4 7.8 7.8 0 0 0 .3-2.3z"/><path id="path4825" class="cls-2" d="M339.1 63.6a25.4 25.4 0 0 1-6-.6 8.6 8.6 0 0 1-3.8-1.9 7.1 7.1 0 0 1-2-3.4 19.4 19.4 0 0 1-.6-5.2v-3.4a19.7 19.7 0 0 1 .6-5.2 7.1 7.1 0 0 1 2-3.4 8.6 8.6 0 0 1 3.8-1.9 25.4 25.4 0 0 1 6-.6h14.2v-8.2h7v22.8a19.4 19.4 0 0 1-.6 5.2 7.1 7.1 0 0 1-2 3.4A8.5 8.5 0 0 1 354 63a25.1 25.1 0 0 1-5.9.6zm-5.3-11.2a11.7 11.7 0 0 0 .3 2.7 2.9 2.9 0 0 0 1 1.6 4 4 0 0 0 1.9.8l3.1.2h7.8l2.7-.2a3.3 3.3 0 0 0 1.7-.8 3.2 3.2 0 0 0 .9-1.6 11.9 11.9 0 0 0 .2-2.6v-8.4H340l-3 .2a4 4 0 0 0-1.9.8 2.9 2.9 0 0 0-1 1.6 11.7 11.7 0 0 0-.3 2.7z"/><path id="path4827" class="cls-1" d="M39.2 0L9.9 5.4A6.3 6.3 0 1 0 3.2 16v42.2c0 4 1.8 8.3 5.3 12.7A65.5 65.5 0 0 0 21.6 83a128.2 128.2 0 0 0 17.6 10.5A128.1 128.1 0 0 0 56.7 83a65.4 65.4 0 0 0 13.1-12.1c3.5-4.5 5.3-8.8 5.3-12.7V16A6.3 6.3 0 0 0 72 4.2a6.2 6.2 0 0 0-3.6 1.2zm-.1 6.2l26.7 4.9a5.9 5.9 0 0 0 .2 1.1L50.3 22.5a15.3 15.3 0 0 0-22.6.1l-15.5-10a6.3 6.3 0 0 0 .3-1.4zm28.8 9a6.5 6.5 0 0 0 1.8 1.1v41a10.4 10.4 0 0 1-.1 1.7 21.5 21.5 0 0 1-4.1 7.8 56.1 56.1 0 0 1-11.3 10.4 110.6 110.6 0 0 1-15 9 110.8 110.8 0 0 1-15-9A55.8 55.8 0 0 1 13 66.8a19.8 19.8 0 0 1-4.4-9.3V16.4a6.3 6.3 0 0 0 1.7-1l19.8 12.7a10.1 10.1 0 0 1 9-5.4 10 10 0 0 1 9 5.4z"/><g id="g4829"><path id="path4831" class="cls-2" d="M23 54.8a4.6 4.6 0 1 0 0 9.3 4.6 4.6 0 0 0 0-9.3z"/><path id="path4833" class="cls-2" d="M24.3 28.5a14.9 14.9 0 0 0 4.2 15.4l-7.3 14.8a2.8 2.8 0 0 0 2.3 3.8h11v-5.2h-6.8l6.4-12.8a2.7 2.7 0 0 0-.8-3.3 9.7 9.7 0 0 1-4.3-9.6z"/></g><g id="g4835"><path id="path4837" class="cls-2" d="M55.3 54.8a4.6 4.6 0 1 0 0 9.3 4.6 4.6 0 0 0 0-9.3z"/><path id="path4839" class="cls-2" d="M53.8 28.6l-4.7 3.1a10.2 10.2 0 0 1 .1 1.2 10 10 0 0 1-4.3 8.3 2.7 2.7 0 0 0-.8 3.3l6.3 12.8h-6.8v5.2h11a2.8 2.8 0 0 0 2.3-3.8l-7.3-14.8a15.2 15.2 0 0 0 4.8-11 15.3 15.3 0 0 0-.6-4.3z"/></g><path id="path4841" class="cls-1" d="M43.2 33.3a4.2 4.2 0 1 1-4.2-4.2 4.2 4.2 0 0 1 4.2 4.2z"/><path id="path4843" class="cls-1" d="M45.3 88.4a6.3 6.3 0 1 1-6.3-6.3 6.3 6.3 0 0 1 6.3 6.3z"/></g></g></g></svg>

customize.dist/code.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.6" y1="12" x2="22.4" y2="12">
+	<stop  offset="0" style="stop-color:#4592C4"/>
+	<stop  offset="1" style="stop-color:#545ACD"/>
+</linearGradient>
+<path class="st0" d="M12.9,3l2,0.4L11.1,21l-2-0.4L12.9,3 M19.6,12L16,8.4V5.6l6.4,6.4L16,18.4v-2.8L19.6,12 M1.6,12L8,5.6v2.8
+	L4.4,12L8,15.6v2.8L1.6,12z"/>
+</svg>

customize.dist/fonts/open-sans.less

@@ -0,0 +1,133 @@
+/* Open Sans @font-face kit */
+
+@OpenSansPath: "/bower_components/open-sans-fontface/fonts";
+
+/* BEGIN Light */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Light/OpenSans-Light.eot');
+  src: url('@{OpenSansPath}/Light/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Light/OpenSans-Light.woff') format('woff'),
+       url('@{OpenSansPath}/Light/OpenSans-Light.ttf') format('truetype'),
+       url('@{OpenSansPath}/Light/OpenSans-Light.svg#OpenSansLight') format('svg');
+  font-weight: 300;
+  font-style: normal;
+}
+/* END Light */
+
+/* BEGIN Light Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot');
+  src: url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.woff') format('woff'),
+       url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/LightItalic/OpenSans-LightItalic.svg#OpenSansLightItalic') format('svg');
+  font-weight: 300;
+  font-style: italic;
+}
+/* END Light Italic */
+
+/* BEGIN Regular */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot');
+  src: url('@{OpenSansPath}/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Regular/OpenSans-Regular.woff') format('woff'),
+       url('@{OpenSansPath}/Regular/OpenSans-Regular.ttf') format('truetype'),
+       url('@{OpenSansPath}/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* END Regular */
+
+/* BEGIN Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot');
+  src: url('@{OpenSansPath}/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Italic/OpenSans-Italic.woff') format('woff'),
+       url('@{OpenSansPath}/Italic/OpenSans-Italic.ttf') format('truetype'),
+       url('@{OpenSansPath}/Italic/OpenSans-Italic.svg#OpenSansItalic') format('svg');
+  font-weight: normal;
+  font-style: italic;
+}
+/* END Italic */
+
+/* BEGIN Semibold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot');
+  src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Semibold/OpenSans-Semibold.woff') format('woff'),
+       url('@{OpenSansPath}/Semibold/OpenSans-Semibold.ttf') format('truetype'),
+       url('@{OpenSansPath}/Semibold/OpenSans-Semibold.svg#OpenSansSemibold') format('svg');
+  font-weight: 600;
+  font-style: normal;
+}
+/* END Semibold */
+
+/* BEGIN Semibold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot');
+  src: url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.woff') format('woff'),
+       url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/SemiboldItalic/OpenSans-SemiboldItalic.svg#OpenSansSemiboldItalic') format('svg');
+  font-weight: 600;
+  font-style: italic;
+}
+/* END Semibold Italic */
+
+/* BEGIN Bold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot');
+  src: url('@{OpenSansPath}/Bold/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/Bold/OpenSans-Bold.woff') format('woff'),
+       url('@{OpenSansPath}/Bold/OpenSans-Bold.ttf') format('truetype'),
+       url('@{OpenSansPath}/Bold/OpenSans-Bold.svg#OpenSansBold') format('svg');
+  font-weight: bold;
+  font-style: normal;
+}
+/* END Bold */
+
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot');
+  src: url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.woff') format('woff'),
+       url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/BoldItalic/OpenSans-BoldItalic.svg#OpenSansBoldItalic') format('svg');
+  font-weight: bold;
+  font-style: italic;
+}
+/* END Bold Italic */
+
+/* BEGIN Extrabold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot');
+  src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.woff') format('woff'),
+       url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.ttf') format('truetype'),
+       url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.svg#OpenSansExtrabold') format('svg');
+  font-weight: 800;
+  font-style: normal;
+}
+/* END Extrabold */
+
+/* BEGIN Extrabold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot');
+  src: url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff') format('woff'),
+       url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
+       url('@{OpenSansPath}/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg#OpenSansExtraboldItalic') format('svg');
+  font-weight: 800;
+  font-style: italic;
+}
+/* END Extrabold Italic */

customize.dist/main.js

@@ -25,6 +25,14 @@ define([
         $main.find('#data').removeClass('hidden');
 
         if (Cryptpad.isLoggedIn()) {
+            if (window.location.pathname === '/') {
+                window.location = '/drive/';
+                return;
+            }
+
+            $main.find('a[href="/drive/"] div.pad-button-text h4')
+                .text(Messages.main_yourCryptDrive);
+
             var name = localStorage[Cryptpad.userNameKey] || sessionStorage[Cryptpad.userNameKey];
             var $loggedInBlock = $main.find('#loggedIn');
             var $hello = $loggedInBlock.find('#loggedInHello');

customize.dist/pages.js

@@ -2,7 +2,8 @@ define([
     '/api/config',
     '/common/hyperscript.js',
     '/common/cryptpad-common.js',
-], function (Config, h, Cryptpad) {
+    'jquery'
+], function (Config, h, Cryptpad, $) {
     var Pages = {};
     var Msg = Cryptpad.Messages;
     var urlArgs = Config.requireConf.urlArgs;
@@ -12,85 +13,230 @@ define([
         return e;
     };
 
-    var indexContent = function () {
+    var footerCol = function (title, L, literal) {
-        return [
+        return h('div.col-6.col-sm-3', [
-            h('div.page.category.first#knowmore', [
+            h('ul.list-unstyled', [
-                h('center', [
+                h('li.footer-title', {
-                    h('h1', Msg.main_howitworks)
+                    'data-localization': title,
-                ])
+                }, title? Msg[title]: literal )
+                ].concat(L.map(function (l) {
+                    return h('li', [ l ]);
+                }))
+            )
+        ]);
+    };
+
+    var footLink = function (ref, loc, text) {
+        var attrs =  {
+            href: ref,
+        };
+        if (!/^\//.test(ref)) {
+            attrs.target = '_blank';
+            attrs.rel = 'noopener noreferrer';
+        }
+        if (loc) {
+            attrs['data-localization'] =  loc;
+            text = Msg[loc];
+        }
+        return h('a', attrs, text);
+    };
+
+    var infopageFooter = function () {
+        return h('footer', [
+            h('div.container', [
+                h('div.row', [
+                    footerCol(null, [
+                        h('div.cp-bio-foot', [
+                            h('p', Msg.main_footerText)
+                        ])
+                    ], ''),
+                   /* footerCol(null, [
+                        footLink('/about.html', 'about'),
+                        footLink('/terms.html', 'terms'),
+                        footLink('/privacy.html', 'privacy'),
+                    ], 'CryptPad'),*/
+                    footerCol('footer_applications', [
+                        footLink('/drive/', 'main_drive'),
+                        footLink('/pad/', 'main_richText'),
+                        footLink('/code/', 'main_code'),
+                        footLink('/slide/', 'main_slide'),
+                        footLink('/poll/', 'main_poll'),
+                        footLink('/whiteboard/', null, Msg.type.whiteboard)
                     ]),
-            h('div.page', [
+                    footerCol('footer_aboutUs', [
-                h('div.info-container', [
+                        footLink('https://blog.cryptpad.fr', 'blog'),
-                    h('div.left.image', [
+                        footLink('https://labs.xwiki.com', null, 'XWiki Labs'),
-                        h('img', {
+                        footLink('http://www.xwiki.com', null, 'XWiki SAS'),
-                            src: '/customize/images/zeroknowledge_small.png?' + urlArgs ,
+                        footLink('https://www.open-paas.org', null, 'OpenPaaS')
-                            alt: 'Zero Knowledge'
-                        })
                     ]),
-                    h('div.right', [
+                    footerCol('footer_contact', [
-                        h('h2', Msg.main_zeroKnowledge),
+                        footLink('https://riot.im/app/#/room/#cryptpad:matrix.org', null, 'Chat'),
-                        setHTML(h('p'), Msg.main_zeroKnowledge_p)
+                        footLink('https://twitter.com/cryptpad', null, 'Twitter'),
+                        footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub'),
+                        footLink('/contact.html', null, 'Email')
                     ])
                 ])
             ]),
-            h('div.page.even', [
+            h('div.cp-version-footer', "CryptPad v1.13.0 (Naiad)")
-                h('div.info-container', [
+        ]);
-                    h('div.left', [
+    };
-                        h('h2', Msg.main_writeItDown),
+
-                        h('p', Msg.main_writeItDown_p)
+    var infopageTopbar = function () {
+        var rightLinks;
+        var username = window.localStorage.getItem('User_name');
+        if (username === null) {
+            rightLinks = [
+                h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, Msg.login_login),
+                h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, Msg.login_register)
+            ];
+        } else {
+            rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive/' }, [
+                h('i.fa.fa-user-circle'),
+                " ",
+                username
+            ]);
+        }
+
+        return h('nav.navbar.navbar-toggleable-md',
+                     h('button.navbar-toggler.navbar-toggler-right', {'type':'button'}, {'data-toggle':'collapse'}, {'data-target':'#menuCollapse'}, {'aria-controls': 'menuCollapse'}, {'aria-expanded':'false'}, {'aria-label':'Toggle navigation'},
+                    [h('i.fa.fa-bars ')
                     ]),
-                    h('div.right.image', [
+                    h('a.navbar-brand', { href: '/index.html'}),
-                        h('img', {
+                h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [  
-                            alt: "User account",
+                    h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad),
-                            src: '/customize/images/realtime_small.png?' + urlArgs,
+                    h('a.nav-item.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
-                        })
+                    h('a.nav-item.nav-link', { href: '/contact.html'}, Msg.contact),
-                    ])
+                    h('a.nav-item.nav-link', { href: '/about.html'}, Msg.about),
+                ].concat(rightLinks))
+        );
+    };
+
+    Pages['/about.html'] = function () {
+        return h('div#cp-main', [
+            infopageTopbar(),
+            h('div.container-fluid.cp-about-intro', [
+                h('div.container', [
+                    h('center', [
+                    h('h1', Msg.about),
+                    setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),
+                    ]),
+                ]),
+            ]),
+            h('div.container.cp-container', [
+                h('div.row', [
+                    h('div.cp-develop-about.col-12',[
+                            h('div.cp-icon-cent'),
+                            h('h2.text-center', 'Core Developers')
+                        ]),
+                    ]),
+                h('div.row.align-items-center', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [
+                        h('img.img-fluid', {'src': '/customize/images/CalebJames.jpg'})
+                            ]),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [
+                        h('h3', "Caleb James Delisle"),
+                        h('hr'),
+                        setHTML(h('div#bioCaleb'), '<p>Caleb is a cryptography developer, Machine Technology graduate of the Franklin County Technical School and lifelong tinkerer.<br/>In 2011, he started the cjdns Open Source project to show that secure networking could be invisible and easily deployed.<br/>After joining XWiki SAS in 2014, he started the CryptPad project with the intent of bringing the same transparent security to collaborative editing.<br/>He\'s always trying to learn from more experienced colleagues and when someone passes through the Research Team office, his favorite words are "Pull up a chair!".</p>'),
+                        h('a.cp-soc-media', { href : 'https://twitter.com/cjdelisle'}, [
+                                h('i.fa.fa-twitter')
+                            ]),
+                        h('a.cp-soc-media', { href : 'https://github.com/cjdelisle'}, [
+                                h('i.fa.fa-github')
                             ])
                     ]),
-            h('div.page', [
-                h('div.info-container', [
-                    h('div.left.image', [
-                        h('img', {
-                            src: '/customize/images/key_small.png?' + urlArgs,
-                            alt: 'User account'
-                        })
                 ]),
-                    h('div.right', [
+                h('div.row.align-items-center',[
-                        h('h2', Msg.main_share),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [
-                        h('p', Msg.main_share_p)
+                            h('img.img-fluid', {'src': '/customize/images/AaronMacSween.jpg'})
+                    ]),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[
+                        h('h3', "Aaron MacSween"),
+                        h('hr'),
+                        setHTML(h('div#bioAaron'), '<p>Aaron transitioned into distributed systems development from a background in jazz and live stage performance. <br/> He appreciates the elegance of biological systems and functional programming, and focused on both as a student at the University of Toronto, where he studied cognitive and computer sciences.<br/>He moved to Paris in 2015 to work as a research engineer at XWiki SAS, after having dedicated significant time to various cryptography-related software projects.<br/>He spends his spare time experimenting with guitars, photography, science fiction, and spicy food.</p>'),
+                        h('a.cp-soc-media', { href : 'https://twitter.com/fc00ansuz'}, [
+                                h('i.fa.fa-twitter')
+                            ]),
+                        h('a.cp-soc-media', { href : 'https://github.com/ansuz/'}, [
+                                h('i.fa.fa-github')
                             ])
+                    ]),
+                ]),
+                h('div.row.align-items-center', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [
+                        h('img.img-fluid', {'src': '/customize/images/YannFlory.jpg'})
+                            ]),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [
+                        h('h3', "Yann Flory"),
+                        h('hr'),
+                        setHTML(h('div#bioYann'), '<p>In 2015, Yann graduated with an engineering degree from Ecole Centrale de Lille majoring in Data Science. In his studies he worked on a project to detect defects in optical fiber using image processing technology.<br/>Upon joining XWiki SAS, Yann developed a Wiki page recommendation system, a common API for accessing data server-side and client-side, and an integrated development environment for development of XWiki applications.<br/>Yann is soft spoken but brutally efficient, he is known to say "It will take 5 minutes".</p>'),
+                        h('a.cp-soc-media', { href : 'https://github.com/yflory/'}, [
+                                h('i.fa.fa-github')
                             ])
                     ]),
-            h('div.page.even', [
-                h('div.info-container', [
-                    h('div.left', [
-                        h('h2', Msg.main_organize),
-                        h('p', Msg.main_organize_p)
                 ]),
-                    h('div.right.image', [
+                h('div.row', [
-                        h('img', {
+                    h('div.cp-develop-about.col-12.cp-contrib',[
-                            src: '/customize/images/organize.png?' + urlArgs,
+                            h('div.cp-icon-cent'),
-                            alt: 'User account'
+                            h('h2.text-center', 'Key Contributors')
-                        })
+                        ]),
+                    ]),
+                h('div.row.align-items-center', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [
+                        h('img.img-fluid', {'src': '/customize/images/Pierre-new.jpg'})
+                            ]),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [
+                        h('h3', "Pierre Bondoerffer"),
+                        h('hr'),
+                        setHTML(h('div#bioPierre'), '<p>Resident CSS wizard and emoji extraordinaire, Pierre is passionate about anything related to technology. He loves to hack around computers and put parts together.<br/>He is currently studying at 42, where he learns about algorithms, networking, kernel programming and graphics.<br/>As a part of an internship, he joined XWiki SAS and worked on CryptPad to improve user experience. He also maintains the Spanish translation.</p>'),
+                        h('a.cp-soc-media', { href : 'https://twitter.com/cjdelisle'}, [
+                                h('i.fa.fa-twitter')
+                            ]),
+                        h('a.cp-soc-media', { href : 'https://github.com/cjdelisle'}, [
+                                h('i.fa.fa-github')
                             ])
+                    ]),
+                ]),
+                h('div.row.align-items-center',[
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.push-lg-6.cp-bio-avatar.cp-bio-avatar-right', [
+                            h('img.img-fluid', {'src': '/customize/images/Catalin.jpg'})
+                    ]),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.pull-lg-6.cp-profile-det',[
+                        h('h3', "Catalin Scripcariu"),
+                        h('hr'),
+                        setHTML(h('div#bioCatalin'), '<p> Catalin is a Maths majour and has worked in B2B sales for 12 years. Design was always his passion and 3 years ago he started to dedicate himself to web design and front-end.<br/>At the beginning of 2017 he joined the XWiki, where he worked both on the business and the community side of XWiki, including the research team and CryptPad. </p>'),
+                        h('a.cp-soc-media', { href : 'https://twitter.com/catalinscr'}, [
+                                h('i.fa.fa-twitter')
+                            ]),
+                        h('a.cp-soc-media', { href : 'https://www.linkedin.com/in/catalinscripcariu/'}, [
+                                h('i.fa.fa-linkedin')
                             ])
+                    ]),
+                ]),
+                h('div.row.align-items-center.cp-margin-bot', [
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-bio-avatar', [
+                        h('img.img-fluid', {'src': '/customize/images/LudovicDuboist.jpg'})
+                            ]),
+                    h('div.col-12.col-sm-12.col-md-12.col-lg-6.cp-profile-det', [
+                        h('h3', "Ludovic Dubost"),
+                        h('hr'),
+                        setHTML(h('div#bioLudovic'), '<p>A graduate of PolyTech (X90) and Telecom School in Paris, Ludovic Dubost started his career as a software architect for Netscape Communications Europe. He then became CTO of NetValue, one of the first French start-ups that went public. He left NetValue after the company was purchased by Nielsen/NetRatings and in 2004 launched XWiki, the next generation wiki.<br/>Since the very beginning, Ludovic has been immensely helpful to the CryptPad project. He believed in the idea when there was nothing more than the collaborative pad and his help with sales strategy for the project.</p>'),
+                        h('a.cp-soc-media', { href : 'https://twitter.com/ldubost'}, [
+                                h('i.fa.fa-twitter')
+                            ]),
+                        h('a.cp-soc-media', { href : 'https://github.com/ldubost'}, [
+                                h('i.fa.fa-github')
                             ])
-        ];
-    };
-
-    Pages['/about.html'] = function () {
-        return h('div#main_other', [
-            h('center', [
-                h('h1', Msg.about)
                     ]),
-            setHTML(h('p'), Msg.main_p2),
+                ]),
-            h('h2', Msg.main_howitworks),
+            ]),
-            setHTML(h('p'), Msg.main_howitworks_p1)
+            infopageFooter()
-        ].concat(indexContent()));
+        ]);
     };
 
     Pages['/privacy.html'] = function () {
-        return h('div#main_other', [
+        return h('div#cp-main', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
                 h('center', h('h1', Msg.policy_title)),
                 h('h2', Msg.policy_whatweknow),
                 h('p', Msg.policywhatweknow_p1),
@@ -111,187 +257,164 @@ define([
                 h('h2', Msg.policy_choices),
                 h('p', Msg.policy_choices_open),
                 setHTML(h('p'), Msg.policy_choices_vpn),
-
+            ]),
-            h('br')
+            infopageFooter()
         ]);
     };
 
     Pages['/terms.html'] = function () {
-        return h('div#main_other', [
+        return h('div#cp-main', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
                 h('center', h('h1', Msg.tos_title)),
                 h('p', Msg.tos_legal),
                 h('p', Msg.tos_availability),
                 h('p', Msg.tos_e2ee),
                 h('p', Msg.tos_logs),
                 h('p', Msg.tos_3rdparties),
+            ]),
+            infopageFooter()
         ]);
     };
 
     Pages['/contact.html'] = function () {
-        return h('div#main_other', [
+        return h('div#cp-main', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
                 h('center', h('h1', Msg.contact)),
                 setHTML(h('p'), Msg.main_about_p2)
-        ]);
-    };
-
-    var userForm = function () {
-        return h('div#userForm.form-group.hidden', [
-            h('input#name.form-control', {
-                name: 'name',
-                type: 'text',
-                placeholder: Msg.login_username
-            }),
-            h('input#password.form-control', {
-                name: 'password',
-                type: 'password',
-                placeholder: Msg.login_password
-            }),
-            h('div', {
-                style: { display: 'none' }
-            }, [
-                h('span.remember.form-check', [
-                    h('label.form-check-label', {
-                        'for': 'rememberme',
-                        placeholder: Msg.login_remember,
-                    }, [
-                        h('input#rememberme.form-check-input', {
-                            type: 'checkbox',
-                            checked: true
-                        })
-                    ])
-                ])
             ]),
-            h('button.btn.btn-secondary.login.half.first', Msg.login_login),
+            infopageFooter(),
-            h('button.btn.btn-success.register.half', Msg.login_register),
-            h('p.separator', Msg.login_orNoLogin),
-            h('p#buttons.buttons'),
-            h('p.driveLink', [
-                h('a.gotodrive', {
-                    href: '/drive/'
-                }, Msg.login_nologin)
-            ])
         ]);
     };
 
-
+    Pages['/what-is-cryptpad.html'] = function () {
-    var appButton = function (alt, h2, img, p, url, btn, id) {
+        return h('div#cp-main', [
-        return h('div.app', [
+            infopageTopbar(),
-            h('center', [
+            h('div.container.cp-container', [
-                h('h2', h2),
+                h('center', h('h1', Msg.whatis_title)),
-                h('img', {
+                setHTML(h('h2'), Msg.whatis_collaboration),
-                    alt: 'Rich Text application',
+                setHTML(h('p'), Msg.whatis_collaboration_p1),
-                    src: img,
+                h('img', { src: '/customize/images/pad_screenshot.png?' + urlArgs }),
-                })
+                setHTML(h('p'), Msg.whatis_collaboration_p2),
+                setHTML(h('p'), Msg.whatis_collaboration_p3),
+                setHTML(h('h2'), Msg.whatis_zeroknowledge),
+                h('div.row', [
+                    h('div.col-md-4.align-self-center', [
+                        h('img#zeroknowledge', { src: '/customize/images/zeroknowledge_small.png?' + urlArgs }),
                     ]),
-            setHTML(h('p'), p),
+                    h('div.col-md-8', [
-            h('p.buttons', [
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p1),
-                h('a#' + id, {
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p2),
-                    href: url,
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p3),
-                }, [
+                    ]),
-                    h('button.btn.btn-secondary', btn),
+                ]),
-                ])
+                setHTML(h('h2'), Msg.whatis_drive),
-            ])
+                setHTML(h('p'), Msg.whatis_drive_p1),
+                h('img', { src: '/customize/images/drive_screenshot.png?' + urlArgs }),
+                setHTML(h('p'), Msg.whatis_drive_p2),
+                setHTML(h('p'), Msg.whatis_drive_p3),
+                setHTML(h('h2'), Msg.whatis_business),
+                setHTML(h('p'), Msg.whatis_business_p1),
+                setHTML(h('p'), Msg.whatis_business_p2),
+            ]),
+            infopageFooter(),
         ]);
     };
 
-    var tryIt = function () {
+    Pages['/'] = Pages['/index.html'] = function () {
+        var showingMore = false;
         return [
-            h('div.class.category#tryit', [
+            h('div#cp-main', [
-                h('center', [
+                infopageTopbar(),
-                    h('h1', Msg.tryIt)
+                h('div.container.cp-container', [
-                ])
+                    h('div.row', [
+                        h('div.cp-title.col-12.col-sm-6', [
+                            h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs }),
+                            h('h1', 'CryptPad'),
+                            h('p', Msg.main_catch_phrase)
                         ]),
-            h('div.page', [
+                        h('div.col-12.col-sm-6', [
-                h('div.app-container', [
+                            [
-                    h('div.app-row', [
+                                [ 'pad', '/pad/', Msg.main_richTextPad, 'fa-file-word-o' ],
-                        appButton("Rich Text application",
+                                [ 'code', '/code/', Msg.main_codePad, 'fa-file-code-o' ],
-                            Msg.main_richText,
+                                [ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
-                            '/customize/images/pad.png?' + urlArgs,
+                                [ 'poll.cp-more.cp-hidden', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
-                            Msg.main_richText_p,
+                                [ 'whiteboard.cp-more.cp-hidden', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
-                            '/pad/',
+                                [ 'recent.cp-more.cp-hidden', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
-                            Msg.button_newpad,
+                            ].map(function (x) {
-                            'create-pad'),
+                                return h('a', [
-                        appButton('Code application',
+                                    { href: x[1] },
-                            Msg.main_code,
+                                    h('div.bs-callout.cp-callout-' + x[0], [
-                            '/customize/images/code.png?' + urlArgs,
+                                        h('i.fa.' + x[3]),
-                            Msg.main_code_p,
+                                        h('div.pad-button-text', [ h('h4', x[2]) ])
-                            '/code/',
-                            Msg.button_newcode,
-                            'create-code'),
-                        appButton('Slide application',
-                            Msg.main_slide,
-                            '/customize/images/slide.png?' + urlArgs,
-                            Msg.main_slide_p,
-                            '/slide/',
-                            Msg.button_newslide,
-                            'create-slide'),
-                        appButton('Poll application',
-                            Msg.main_poll,
-                            '/customize/images/poll.png?' + urlArgs,
-                            Msg.main_poll_p,
-                            '/poll/',
-                            Msg.button_newpoll,
-                            'create-poll')
-                    ])
                                     ])
-            ])
+                                ]);
-        ];
+                            }),
-    };
+                            h('div.bs-callout.cp-callout-more', [
-
+                                h('div.cp-callout-more-lessmsg.cp-hidden', [
-    Pages['/'] = Pages['/index.html'] = function () {
+                                    "see less ",
-        return [
+                                    h('i.fa.fa-caret-up')
-            h('div#main', [
+                                ]), 
-                h('div.mainOverlay'),
+                                h('div.cp-callout-more-moremsg', [
-                h('div#align-container', [
+                                    "see more ",
-                    h('div#main-container', [
+                                    h('i.fa.fa-caret-down')
-                        h('div#data.hidden', [
+                                ]),
-                            setHTML(h('p.left'), Msg.main_info),
+                                {
-                        ]),
+                                    onclick: function () {
-                        userForm(),
+                                        if (showingMore) {
-                        h('div#loggedIn.hidden', [
+                                            $('.cp-more, .cp-callout-more-lessmsg').addClass('cp-hidden');
-                            h('p#loggedInHello'),
+                                            $('.cp-callout-more-moremsg').removeClass('cp-hidden');
-                            h('p', [
+                                        } else {
-                                h('button.btn.btn-primary.gotodrive', Msg.login_accessDrive),
+                                            $('.cp-more, .cp-callout-more-lessmsg').removeClass('cp-hidden');
-                            ]),
+                                            $('.cp-callout-more-moremsg').addClass('cp-hidden');
-                            h('p', [
+                                        }
-                                h('button#loggedInLogout.btn.btn-secondary', Msg.logoutButton)
+                                        showingMore = !showingMore;
+                                    }
+                                }
                             ])
                         ])
                     ])
                 ]),
-            ])
+            ]),
-        ]
+        ];
-        .concat(tryIt());
     };
 
     var loadingScreen = function () {
         return h('div#loading', 
             h('div.loadingContainer', [
                 h('img.cryptofist', {
-                    src: '/customize/cryptofist_small.png?' + urlArgs
+                    src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
                 }),
                 h('div.spinnerContainer',
-                    h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw')),
+                    h('span.fa.fa-circle-o-notch.fa-spin.fa-4x.fa-fw')),
                 h('p', Msg.loading)
             ])
         );
     };
-    loadingScreen = loadingScreen; // TODO use this
 
     Pages['/user/'] = Pages['/user/index.html'] = function () {
         return h('div#container');
     };
 
     Pages['/register/'] = Pages['/register/index.html'] = function () {
-        return [h('div#main', [
+        return [h('div#cp-main', [
-            h('div.mainOverlay'),
+            infopageTopbar(),
-            h('div#align-container', [
+            h('div.container-fluid.cp-register-wel',[
-                h('div#data.hidden', [
+                h('div.container',[
-                    h('h1', Msg.register_header),
+                    h('div.row',[
-                    h('br'),
+                        h('div.col-12',[
-                    setHTML(h('p.left.register-explanation'), Msg.register_explanation)
+                            h('h1.text-center', Msg.register_header)
+                        ])
+                    ])
+                ])
+            ]),
+            h('div.container.cp-container', [
+                h('div.row.cp-register-det', [
+                h('div#data.hidden.col-md-6', [
+                    setHTML(h('p.register-explanation'), Msg.register_explanation)
                 ]),
-                h('div#userForm.form-group.hidden', [
+                h('div#userForm.form-group.hidden.col-md-6', [
                     h('input.form-control#username', {
                         type: 'text',
                         autocomplete: 'off',
@@ -309,34 +432,52 @@ define([
                         type: 'password',
                         placeholder: Msg.login_confirm,
                     }),
+                    h('div.checkbox-container', [
                         h('input#import-recent', {
+                            name: 'import-recent',
                             type: 'checkbox',
                             checked: true
                         }),
-                    h('label', {
+                        // hscript doesn't generate for on label for some
+                        // reason... use jquery as a temporary fallback
+                        setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
+                        /*h('label', {
                             'for': 'import-recent',
-                    }, Msg.register_importRecent),
+                        }, Msg.register_importRecent),*/
-                    h('br'),
+                    ]),
+                    h('div.checkbox-container', [
                         h('input#accept-terms', {
+                            name: 'accept-terms',
                             type: 'checkbox'
                         }),
-                    setHTML(h('label', {
+                        setHTML($('<label for="accept-terms"></label>')[0], Msg.register_acceptTerms)
+                        /*setHTML(h('label', {
                             'for': 'accept-terms',
-                    }), Msg.register_acceptTerms),
+                        }), Msg.register_acceptTerms),*/
-                    h('br'),
+                    ]),
-                    h('button#register.btn.btn-primary', Msg.login_register)
+                    h('button#register.btn.cp-login-register', Msg.login_register)
+                ])
+                ]),
+                h('div.row.cp-register-test',[
+                    h('hr'),
+                    h('div.col-12', [
+                        setHTML(h('p.test-details'), Msg.register_testimonial),
+                        h('a.cp-test-source.pull-right', { href : 'http://boingboing.net/2016/09/26/cryptpad-a-freeopen-end-to.html'}, Msg.register_testimonial_name)
                     ])
                 ])
+            ]),
+
+            infopageFooter(),
         ])];
     };
 
     Pages['/login/'] = Pages['/login/index.html'] = function () {
-        return [h('div#main', [
+        return [h('div#cp-main', [
-            h('div.mainOverlay'),
+            infopageTopbar(),
-            h('div#align-container',
+            h('div.container.cp-container', [
-                h('div#main-container', [
+                h('div.row.align-items-center', [
-                    h('div#data.hidden', setHTML(h('p.left'), Msg.main_info)),
+                    h('div#data.hidden.col-md-6', setHTML(h('p.left'), Msg.main_info)),
-                    h('div#userForm.form-group.hidden', [
+                    h('div#userForm.form-group.hidden.col-md-6', [
                         h('input.form-control#name', {
                             name: 'name',
                             type: 'text',
@@ -352,14 +493,14 @@ define([
                             'name': 'password',
                             placeholder: Msg.login_password,
                         }),
-                        h('button.btn.btn-primary.login.first', Msg.login_login),
                         h('div.extra', [
-                            h('p', Msg.login_notRegistered),
+                            h('button.login.first.btn', Msg.login_login),
-                            h('button#register.btn.btn-success.register', Msg.login_register)
+                            h('button#register.btn.register.cp-login-register', Msg.login_register)
                         ])
                     ])
-                ])
+                ]),
-            )
+            ]),
+            infopageFooter(),
         ])];
     };
 
@@ -379,22 +520,29 @@ define([
                     display: 'block',
                 }
             }, [
-                h('button#clear', Msg.canvas_clear), ' ',
+                h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
-                h('button#toggleDraw', Msg.canvas_disable),
+                h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
-                h('button#delete', {
+                h('button#delete.btn.btn-secondary', {
                     style: {
                         display: 'none',
                     }
-                }),
+                }, Msg.canvas_delete),
+                h('div.range-group', [
+                    h('label', {
+                        'for': 'width'
+                    }, Msg.canvas_width),
                     h('input#width', {
                         type: 'range',
                         value: "5",
                         min: "1",
                         max: "100"
                     }),
+                    h('span#width-val', '5px')
+                ]),
+                h('div.range-group', [
                     h('label', {
-                    'for': 'width'
+                        'for': 'opacity',
-                }, Msg.canvas_width),
+                    }, Msg.canvas_opacity),
                     h('input#opacity', {
                         type: 'range',
                         value: "1",
@@ -402,10 +550,13 @@ define([
                         max: "1",
                         step: "0.1"
                     }),
-                h('label', {
+                    h('span#opacity-val', '100%')
-                    'for': 'width',
+                ]),
-                }),
+                h('span.selected', [
-                h('span.selected')
+                    h('img', {
+                        title: Msg.canvas_currentBrush
+                    })
+                ])
             ]),
             setHTML(h('div#colors'), '&nbsp;'),
             loadingScreen(),
@@ -432,16 +583,15 @@ define([
                         h('p', Msg.poll_p_encryption)
                     ]),
                     h('div.upper', [
-                        h('button#publish', {
+                        h('button#publish.btn.btn-success', {
                             style: { display: 'none' }
                         }, Msg.poll_publish_button),
-                        h('button#admin', {
+                        h('button#admin.btn.btn-primary', {
                             style: { display: 'none' },
                             title: Msg.poll_admin_button
                         }, Msg.poll_admin_button),
-                        h('button#help', {
+                        h('button#help.btn.btn-secondary', {
-                            title: Msg.poll_show_help_button,
+                            title: Msg.poll_show_help_button
-                            style: { display: 'none' }
                         }, Msg.poll_show_help_button)
                     ]),
                     h('div.realtime', [
@@ -456,13 +606,13 @@ define([
                         ]),
                         h('div#tableContainer', [
                             h('div#tableScroll'),
-                            h('button#create-user', {
+                            h('button#create-user.btn.btn-secondary', {
                                 title: Msg.poll_create_user
                             }, h('span.fa.fa-plus')),
-                            h('button#create-option', {
+                            h('button#create-option.btn.btn-secondary', {
                                 title: Msg.poll_create_option
                             }, h('span.fa.fa-plus')),
-                            h('button#commit', {
+                            h('button#commit.btn.btn-secondary', {
                                 title: Msg.poll_commit
                             }, h('span.fa.fa-check'))
                         ])

customize.dist/source-branch.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="4" y1="12" x2="20" y2="12">
+	<stop  offset="0" style="stop-color:#4592C4"/>
+	<stop  offset="1" style="stop-color:#545ACD"/>
+</linearGradient>
+<path class="st0" d="M13,14c-3.4,0-4.5,1.4-4.8,2.2C9.3,16.7,10,17.8,10,19c0,1.7-1.3,3-3,3s-3-1.3-3-3c0-1.3,0.8-2.4,2-2.8V7.8
+	C4.8,7.4,4,6.3,4,5c0-1.7,1.3-3,3-3s3,1.3,3,3c0,1.3-0.8,2.4-2,2.8v5.3c0.9-0.6,2.2-1.1,4-1.1c2.7,0,3.6-1.3,3.9-2.2
+	C14.8,9.3,14,8.3,14,7c0-1.7,1.3-3,3-3s3,1.3,3,3c0,1.3-0.9,2.5-2.1,2.9C17.6,11.3,16.7,14,13,14 M7,18c-0.6,0-1,0.4-1,1s0.4,1,1,1
+	s1-0.4,1-1S7.6,18,7,18 M7,4C6.4,4,6,4.4,6,5s0.4,1,1,1s1-0.4,1-1S7.6,4,7,4 M17,6c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1
+	S17.6,6,17,6z"/>
+</svg>

customize.dist/src/less/alertify.less

@@ -1,282 +0,0 @@
-@import "./variables.less";
-
-/*  Logs are shown to inform the user that something has happened
-    They are only displayed briefly
-*/
-.alertify-logs {
-    @media print {
-        visibility: hidden;
-    }
-    > * {
-        padding: @padding-base @padding-base * 4;
-        color: @alertify-fore;
-
-        font-weight: bold;
-        font-size: large;
-
-        box-shadow: @box-shadow;
-        border-radius: @border-radius;
-        &, &.default {
-            // FIXME
-            background: rgba(0, 0, 0, .8);
-        }
-        &.error {
-            background: @danger-color;
-        }
-        &.success {
-            background: @success-color;
-            color: @success-fore;
-        }
-    }
-}
-
-.alertify {
-    position: fixed;
-    background-color: @alertify-bg;
-    color: @alertify-fg;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 99999;
-
-    &.hide {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &, &.show {
-        box-sizing: border-box;
-        transition: all .33s cubic-bezier(.25, .8, .25, 1);
-    }
-
-    &, * {
-        box-sizing: border-box;
-    }
-
-    .dialog {
-       padding: 12px;
-    }
-
-    .dialog, .alert {
-        .bright {
-            color: @light-base;
-        }
-
-        & > div {
-            background-color: @alertify-dialog-bg;
-            border-radius: 5px;
-            &.half {
-                width: 50%;
-                @media (max-width: @media-medium-screen) {
-                    width: 100%;
-                }
-            }
-        }
-
-        width: 100%;
-        margin: 0 auto;
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-
-        > * {
-            width: 30%;
-            width: 500px;
-            max-width: 95%;
-            margin: 0 auto;
-            text-align: center;
-            padding: @padding-base;
-            background: #fff;
-            // FIXME
-            box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
-        }
-
-        .msg {
-          padding: @padding-base;
-          margin-bottom: @padding-base;
-          margin: 0;
-          text-align: left;
-        }
-
-        input:not(.form-control){
-            background-color: @alertify-input-bg;
-            color: @alertify-input-fg;
-
-            border: 0px;
-            border-radius: 5px;
-
-            margin-bottom: 15px;
-            width: 100%;
-            font-size: 100%;
-            padding: @padding-base;
-            &:focus {
-                //outline-offset: -2px;
-            }
-        }
-        nav {
-
-            text-align: right;
-
-            button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
-
-                background-color: @alertify-btn-bg;
-                box-sizing: border-box;
-                position: relative;
-                outline: 0;
-                border: 0;
-                display: inline-block;
-                align-items: center;
-                padding: 0 6px;
-                margin: 6px 8px;
-                line-height: 36px;
-                min-height: 36px;
-                white-space: nowrap;
-                min-width: 88px;
-                text-align: center;
-                text-transform: uppercase;
-                font-size: 14px;
-                text-decoration: none;
-                cursor: pointer;
-
-                color: @alertify-btn-fg;
-                border: 1px solid @alertify-base;
-                border-radius: 5px;
-
-                &.safe, &.danger {
-                    color: @old-base;
-                    white-space: normal;
-                    font-weight: bold;
-                }
-                &.danger {
-                    background-color: @cp-red;
-                    &:hover, &:active {
-                        background-color: lighten(@cp-red, 5%);
-                    }
-                }
-
-                &.safe {
-                    background-color: @cp-green;
-                    &:hover, &:active {
-                        background-color: lighten(@cp-green, 10%);
-                    }
-                }
-
-                &:hover, &:active {
-                    background-color: @alertify-btn-bg-hover;
-                }
-
-                &:focus {
-                    border: 1px dotted @alertify-base;
-                }
-                &::-moz-focus-inner {
-                    border:0;
-                }
-            }
-
-            button.btn {
-                margin: 6px 4px;
-            }
-        }
-    }
-}
-
-.alertify-logs {
-
-    position: fixed;
-    z-index: 99999;
-
-    &.bottom, &:not(.top) {
-        bottom: 16px;
-        // Bottom left placement. Default. Use for transitions.
-        &.left, &:not(.right) {
-            > * {
-
-            }
-        }
-        // Top right placement
-        &.right {
-            > * {
-
-            }
-        }
-    }
-
-    // All left positions.
-    &.left, &:not(.right) {
-        left: 16px;
-        > * {
-            float: left;
-            transform: translate3d(0, 0, 0);
-            height: auto;
-
-            &.show {
-                left: 0;
-            }
-            &, &.hide {
-                left: -110%;
-            }
-        }
-    }
-
-    &.right {
-        right: 16px;
-        > * {
-            float: right;
-            transform: translate3d(0, 0, 0);
-            &.show {
-                right: 0;
-                opacity: 1;
-            }
-            &, &.hide {
-                right: -110%;
-                opacity: 0;
-            }
-        }
-    }
-
-    &.top {
-        top: 0;
-        // Top left placement, use for transitions.
-        &.left, &:not(.right) {
-            > * {
-
-            }
-        }
-        // Top right placement, use for transitions
-        &.right {
-            > * {
-
-            }
-        }
-    }
-
-    > * {
-        box-sizing: border-box;
-        transition: all .4s cubic-bezier(.25, .8, .25, 1);
-        position: relative;
-        clear: both;
-        backface-visibility: hidden;
-        perspective: 1000;
-
-        & {
-            max-height: 0;
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        &.show {
-            margin-top: @padding-base;
-            opacity: 1;
-            max-height: 1000px;
-            padding: @padding-base;
-            pointer-events: auto;
-        }
-    }
-
-}

customize.dist/src/less/bar.less

@@ -1,4 +1,5 @@
 /* Bottom Bar */
+@import (once) "../less2/include/colortheme.less";
 
 .top-bar, .bottom-bar {
     position:fixed;
@@ -16,7 +17,7 @@
     }
     p {
         margin: -1px;
-        font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+        font-family: @colortheme_font;
 
         font-size: 20px;
         display:block;

customize.dist/src/less/cryptpad.less

@@ -1,7 +1,10 @@
 @import "./variables.less";
 @import "./mixins.less";
 
-@import "./alertify.less";
+@import "../less2/include/alertify.less";
+@import "../less2/include/colortheme.less";
+@import "../less2/include/modal.less";
+@import "../less2/include/font.less";
 @import "./bar.less";
 @import "./loading.less";
 @import "./dropdown.less";
@@ -10,6 +13,10 @@
 
 @toolbar-green: #5cb85c;
 
+.font_open-sans();
+
+.alertify_main();
+
 html.cp, .cp body {
     font-size: .875em;
     background-color: @page-white; //@base;
@@ -25,7 +32,7 @@ html.cp, .cp body {
 
 // add font for tooltips
 .tippy-popper {
-    font: normal normal normal 16px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+    font: 16px @colortheme_font;
 }
 
 // override bootstrap colors
@@ -67,7 +74,7 @@ a.github-corner > svg {
 h1,h2,h3,h4,h5,h6 {
     color: @fore;
 
-    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: @colortheme_font;
     -webkit-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
     -moz-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
     font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
@@ -425,7 +432,7 @@ noscript {
         max-width: 40%;
         padding: 10px;
         box-sizing: border-box;
-        font-family: lato, Helvetica, sans-serif;
+        font-family: @colortheme_font;
         color: @main-color;
 
         label {
@@ -630,29 +637,29 @@ noscript {
 
 /* Upload status table */
 #uploadStatusContainer {
+    .modal_base();
     position: absolute;
     left: 10vw; right: 10vw;
-    bottom: 100px;
+    bottom: 10vh;
-    background-color: rgba(0,0,0,0.5);
+    opacity: 0.9;
-    color: white;
-    opacity: 0.7;
     box-sizing: border-box;
-    z-index:10000;
+    z-index: 10000;
     display: none;
-    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     #uploadStatus {
         width: 80vw;
-        border: 1px solid black;
-        border-collapse: collapse;
         tr:nth-child(1) {
-            background-color: #888;
+            background-color: darken(@colortheme_modal-bg, 20%);
-            border: 1px solid #999;
+            td {
-            td { text-align: center; }
+                text-align: center;
+                font-weight: bold;
+                padding: 0.25em;
             }
+        }
+        @upload_pad_h: 0.25em;
+        @upload_pad_v: 0.5em;
+
         td {
-            border-left: 1px solid #BBB;
+            padding: @upload_pad_h @upload_pad_v;
-            border-right: 1px solid #BBB;
-            padding: 0 10px;
         }
         .upProgress {
             width: 200px;
@@ -663,9 +670,10 @@ noscript {
         .progressContainer {
             position: absolute;
             width: 0px;
-            left: 5px;
+            left: @upload_pad_v;
-            top: 1px; bottom: 1px;
+            top: @upload_pad_h; bottom: @upload_pad_h;
             background-color: rgba(0,0,255,0.3);
+            z-index: -1;
         }
         .upCancel { text-align: center; }
         .fa.cancel {

customize.dist/src/less/dropdown.less

@@ -1,3 +1,4 @@
+@import (once) "../less2/include/colortheme.less";
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown-bar {
@@ -36,7 +37,7 @@
         z-index: 1000;
         max-height: 300px;
         overflow-y: auto;
-        font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+        font-family: @colortheme_font;
         font-size: 16px;
         line-height: 1em;
 

customize.dist/src/less/footer.less

@@ -1,8 +1,9 @@
 @import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
 
-.cp footer {
+footer {
     background: @category-bg;
-    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    font-family: @colortheme_font;
     padding-top: 1em;
     font-size: 1.2em;
     a {

customize.dist/src/less/loading.less

@@ -1,4 +1,5 @@
 @import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
 
 .cp #loading {
     position: fixed;
@@ -19,6 +20,7 @@
         margin-left: auto;
         margin-right: auto;
         height: 300px;
+        margin-bottom: 2em;
         @media screen and (max-height: @media-short-screen) {
             display: none;
         }
@@ -50,7 +52,7 @@
         text-align: center;
         font-size: 1.5em;
         opacity: 0.7;
-        font-family: lato, Helvetica, sans-serif;
+        font-family: @colortheme_font;
         padding: 15px;
         max-width: 60%;
         display: inline-block;

customize.dist/src/less/toolbar.less

@@ -2,6 +2,7 @@
 @import "./mixins.less";
 
 @import "./dropdown.less";
+@import (once) "../less2/include/colortheme.less";
 
 .unselectable {
     -webkit-touch-callout: none;
@@ -61,7 +62,7 @@
 }
 
 body .userlist-drawer {
-    font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+    font: @main-font-size @colortheme_font;
     min-width: 175px;
     width: 175px;
     display: block;
@@ -100,7 +101,7 @@ body .userlist-drawer {
     }
 
     & > p {
-        font: normal normal normal @main-font-size Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
+        font: @main-font-size @colortheme_font;
         margin: 0;
         padding: 0;
         display: block;
@@ -821,13 +822,16 @@ body .cryptpad-toolbar {
         }
         a.cryptpad-logo {
             cursor: pointer;
-            font-size: 1em;
+            display: inline-flex;
-            height: auto;
-            padding: 0px 5px;
             text-decoration: none;
+            height: auto;
+            padding: 10px;
 
-            // hack because of whiteboard and poll
+            img {
-            color: white !important;
+                cursor: pointer;
+                height: 100%;
+                width: 100%;
+            }
         }
     }
     .cryptpad-user {

customize.dist/src/less/topbar.less

@@ -1,4 +1,5 @@
 @import "./variables.less";
+@import (once) "../less2/include/colortheme.less";
 
 #cryptpadTopBar {
     background: @topbar-back;
@@ -8,7 +9,7 @@
     right: 0;
     height: @topbar-height;
     color: @topbar-color;
-    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: @colortheme_font;
     padding: 5px;
     box-sizing: border-box;
     font-size: 30px;

customize.dist/src/less/variables.less

@@ -1,19 +1,21 @@
-@base: #fff; //#f5f5f5;
+@import (once) '../less2/include/colortheme.less';
+@import (once) '../less2/include/browser.less';
+
+@base: @colortheme_base;
 @dark-base: darken(@base, 20%);
 @less-dark-base: darken(@base, 10%);
-@light-base: lighten(@base, 20%);
+@light-base: @colortheme_light-base;
 @less-light-base: lighten(@base, 10%);
 @fore: #555;
-@old-base: #302B28;
+@old-base: @colortheme_old-base;
-@old-fore: #fafafa;
+@old-fore: @colortheme_old-fore;
 
 @main-font-size: 16px;
 
-@cp-green: #46E981;
+@cp-green: @colortheme_cp-green;
 @cp-accent: lighten(@cp-green, 20%);
 
-//@cp-red: #FF0073; // remove red
+@cp-red: @colortheme_cp-red;
-@cp-red: #FA5858; // remove red
 @cp-outline: #444;
 
 @cp-orange: #FE9A2E;
@@ -31,51 +33,23 @@
 @cp-link-visited: @cp-light-blue;
 @cp-link-hover: darken(@cp-light-blue, 10%);
 
-// alertify things
-
-@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
-@padding-base: 12px;
-
-@success-color: @cp-green;
-@success-fore: @base;
-@danger-color: @cp-red;
-
-@text-color: rgba(0, 0, 0, .8);
-@border-radius: 1px;
-
-@alertify-fore: @old-fore;
-@alertify-base: @old-base;
-
-@alertify-dialog-bg: #444;
-@alertify-dialog-fg: @old-fore;
-
-@alertify-btn-fg: @old-fore;
-
-@alertify-btn-bg: rgba(200, 200, 200, 0.05);
-@alertify-btn-bg-hover: rgba(200, 200, 200, .15);
-
-@alertify-bg: rgba(0, 0, 0, .3);
-@alertify-fg: @old-fore;
-
-@alertify-input-bg: @old-base;
-@alertify-input-fg: @old-fore;
 
 @slide-default-bg: #000;
 
-@bg-loading: @old-base;
+@bg-loading: #222;
 @color-loading: @old-fore;
 
-@media-not-big: 800px;
+@media-not-big: @browser_media-not-big;
-@media-not-small: 801px;
+@media-not-small: @browser_media-not-small;
 
-@media-short-screen: 450px;
+@media-short-screen: @browser_media-short-screen;
-@media-narrow-screen: 400px;
+@media-narrow-screen: @browser_media-narrow-screen;
-@media-medium-screen: 600px;
+@media-medium-screen: @browser_media-medium-screen;
 
 
 // Dropdown
 
-@dropdown-font: @main-font-size -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+@dropdown-font: @main-font-size @colortheme_font;
 @dropdown-bg: #f9f9f9;
 @dropdown-color: black;
 @dropdown-bg-hover: #f1f1f1;
@@ -85,28 +59,28 @@
 
 @toolbar-button-font: @dropdown-font;
 
-@toolbar-pad-bg: #1c4fa0;
+@toolbar-pad-bg: @colortheme_pad-bg;
-@toolbar-pad-color: #fff;
+@toolbar-pad-color: @colortheme_pad-color;
-@toolbar-slide-bg: #e57614;
+@toolbar-slide-bg: @colortheme_slide-bg;
-@toolbar-slide-color: #fff;
+@toolbar-slide-color: @colortheme_slide-color;
-@toolbar-code-bg: #ffae00;
+@toolbar-code-bg: @colortheme_code-bg;
-@toolbar-code-color: #000;
+@toolbar-code-color: @colortheme_code-color;
-@toolbar-poll-bg: #006304;
+@toolbar-poll-bg: @colortheme_poll-bg;
-@toolbar-poll-color: #fff;
+@toolbar-poll-color: @colortheme_poll-color;
-@toolbar-whiteboard-bg: #800080;
+@toolbar-whiteboard-bg: @colortheme_whiteboard-bg;
-@toolbar-whiteboard-color: #fff;
+@toolbar-whiteboard-color: @colortheme_whiteboard-color;
-@toolbar-drive-bg: #0087ff;
+@toolbar-drive-bg: @colortheme_drive-bg;
-@toolbar-drive-color: #fff;
+@toolbar-drive-color: @colortheme_drive-color;
-@toolbar-file-bg: #cd2532;
+@toolbar-file-bg: @colortheme_file-bg;
-@toolbar-file-color: #fff;
+@toolbar-file-color: @colortheme_file-color;
-@toolbar-friends-bg: #607B8D;
+@toolbar-friends-bg: @colortheme_friends-bg;
-@toolbar-friends-color: #fff;
+@toolbar-friends-color: @colortheme_friends-color;
-@toolbar-default-bg: #ddd;
+@toolbar-default-bg: @colortheme_default-bg;
-@toolbar-default-color: #000;
+@toolbar-default-color: @colortheme_default-color;
-@toolbar-settings-bg: #0087ff;
+@toolbar-settings-bg: @colortheme_settings-bg;
-@toolbar-settings-color: #fff;
+@toolbar-settings-color: @colortheme_settings-color;
-@toolbar-profile-bg: #0087ff;
+@toolbar-profile-bg: @colortheme_profile-bg;
-@toolbar-profile-color: #fff;
+@toolbar-profile-color: @colortheme_profile-color;
 @toolbar-todo-bg: #7bccd1;
 @toolbar-todo-color: #000;
 
@@ -124,7 +98,7 @@
 
 @main-block-bg: rgba(200, 200, 200, 0.3);
 @main-color: #fff;
-@main-bg: url('/customize/bg3.jpg') no-repeat center center;
+@main-bg: url('/customize/bg4.jpg') no-repeat center center;
 
 @category-bg: #f4f4f4;
 

customize.dist/src/less2/include/alertify.less

@@ -0,0 +1,311 @@
+@import (once) "./colortheme.less";
+@import (once) "./browser.less";
+
+.alertify_main () {
+    @alertify-fore: @colortheme_modal-fg;
+    @alertify-base: @colortheme_modal-bg;
+
+    @alertify-dialog-bg: @alertify-base;
+    @alertify-dialog-fg: @alertify-fore;
+
+    @alertify-btn-fg: @alertify-fore;
+
+    @alertify-btn-bg: rgba(200, 200, 200, 0.1);
+    @alertify-btn-bg-hover: rgba(200, 200, 200, .3);
+
+    @alertify-bg: @colortheme_modal-dim;
+    @alertify-fg: @alertify-fore;
+
+    @alertify-input-bg: @colortheme_modal-input;
+    @alertify-input-fg: @colortheme_modal-fg;
+
+    @alertify_padding-base: @colortheme_modal-padding;
+    @alertify_box-shadow: @colortheme_modal-shadow;
+
+    // Logs to show that something has happened
+    // These show only once
+
+    .alertify-logs {
+        @media print {
+            visibility: hidden;
+        }
+        > * {
+            padding: @alertify_padding-base @alertify_padding-base * 4;
+            color: @alertify-fore;
+
+            font-family: @colortheme_font;
+            font-size: large;
+
+            box-shadow: @alertify_box-shadow;
+            &, &.default {
+                // FIXME
+                background: @colortheme_notification-log;
+            }
+            &.error {
+                font-weight: bold;
+                background: @colortheme_notification-warn;
+            }
+            &.success {
+                background: @colortheme_notification-log;
+            }
+        }
+    }
+
+    .alertify {
+        position: fixed;
+        background-color: @alertify-bg;
+        color: @alertify-fg;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 99999;
+
+        h1, h2, h3 {
+            margin-top: 0;
+        }
+
+        &.hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &, &.show {
+            box-sizing: border-box;
+            transition: all .33s cubic-bezier(.25, .8, .25, 1);
+        }
+
+        &, * {
+            box-sizing: border-box;
+        }
+
+        .dialog {
+            padding: 12px;
+        }
+
+        .dialog, .alert {
+            .bright {
+                color: @colortheme_light-base;
+            }
+
+            & > div {
+                background-color: @alertify-dialog-bg;
+                &.half {
+                    width: 50%;
+                    max-width: 50%;
+                    @media (max-width: @browser_media-medium-screen) {
+                        width: 100%;
+                    }
+                }
+            }
+
+            width: 100%;
+            margin: 0 auto;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+
+            > * {
+                width: 100%;
+                min-width: 300px;
+                max-width: 500px;
+                margin: 0 auto;
+                text-align: left;
+                padding: @alertify_padding-base;
+                background: #fff;
+                box-shadow: @alertify_box-shadow;
+            }
+
+            .msg {
+                padding: @alertify_padding-base;
+                margin-bottom: @alertify_padding-base;
+                margin: 0;
+            }
+
+            input:not(.form-control), textarea {
+                background-color: @alertify-input-bg;
+                color: @alertify-input-fg; 
+                border: 0px;
+
+                margin-bottom: 15px;
+                width: 100%;
+                font-size: 100%;
+                padding: @alertify_padding-base;
+                &:focus {
+                    //outline-offset: -2px;
+                }
+            }
+
+            input[type="checkbox"] {
+                padding: 0;
+                margin: 0;
+                margin-right: 0.5em;
+            }
+
+            nav {
+
+                text-align: right;
+
+                button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
+
+                    background-color: @alertify-btn-bg;
+                    box-sizing: border-box;
+                    position: relative;
+                    outline: 0;
+                    border: 0;
+                    display: inline-block;
+                    align-items: center;
+                    padding: 0 6px;
+                    margin: 6px 8px;
+                    line-height: 36px;
+                    min-height: 36px;
+                    white-space: nowrap;
+                    min-width: 88px;
+                    text-align: center;
+                    text-transform: uppercase;
+                    font-size: 14px;
+                    text-decoration: none;
+                    cursor: pointer;
+                    border-radius: 0;
+
+                    color: @alertify-btn-fg;
+                    border: 1px solid transparent;
+
+                    &.safe, &.danger {
+                        color: @colortheme_old-base;
+                        white-space: normal;
+                        font-weight: bold;
+                    }
+                    &.danger {
+                        background-color: @colortheme_alertify-red;
+                        &:hover, &:active {
+                            background-color: lighten(@colortheme_alertify-red, 5%);
+                        }
+                    }
+
+                    &.safe {
+                        background-color: @colortheme_alertify-green;
+                        &:hover, &:active {
+                            background-color: lighten(@colortheme_alertify-green, 10%);
+                        }
+                    }
+
+                    &:hover, &:active {
+                        background-color: @alertify-btn-bg-hover;
+                    }
+
+                    &:focus {
+                        border: 1px dotted @alertify-base;
+                    }
+                    &::-moz-focus-inner {
+                        border:0;
+                    }
+                }
+
+                button.btn {
+                    margin: 6px 4px;
+                }
+            }
+        }
+    }
+
+    .alertify-logs {
+
+        position: fixed;
+        z-index: 99999;
+
+        &.bottom, &:not(.top) {
+            bottom: 16px;
+            // Bottom left placement. Default. Use for transitions.
+            &.left, &:not(.right) {
+                > * {
+
+                }
+            }
+            // Top right placement
+            &.right {
+                > * {
+
+                }
+            }
+        }
+
+        // All left positions.
+        &.left, &:not(.right) {
+            left: 16px;
+            > * {
+                float: left;
+                transform: translate3d(0, 0, 0);
+                height: auto;
+
+                &.show {
+                    left: 0;
+                }
+                &, &.hide {
+                    left: -110%;
+                }
+            }
+        }
+
+        &.right {
+            right: 16px;
+            > * {
+                float: right;
+                transform: translate3d(0, 0, 0);
+                &.show {
+                    right: 0;
+                    opacity: 1;
+                }
+                &, &.hide {
+                    right: -110%;
+                    opacity: 0;
+                }
+            }
+        }
+
+        &.top {
+            top: 0;
+            // Top left placement, use for transitions.
+            &.left, &:not(.right) {
+                > * {
+
+                }
+            }
+            // Top right placement, use for transitions
+            &.right {
+                > * {
+
+                }
+            }
+        }
+
+        > * {
+            box-sizing: border-box;
+            transition: all .4s cubic-bezier(.25, .8, .25, 1);
+            position: relative;
+            clear: both;
+            backface-visibility: hidden;
+            perspective: 1000;
+
+            & {
+                max-height: 0;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            &.show {
+                margin-top: @alertify_padding-base;
+                opacity: 1;
+                max-height: 1000px;
+                padding: @alertify_padding-base;
+                pointer-events: auto;
+            }
+        }
+
+    }
+}

customize.dist/src/less2/include/browser.less

@@ -0,0 +1,9 @@
+// These things are not for design but rather for working in different browser
+// types and window sizes
+
+@browser_media-not-big: 800px;
+@browser_media-not-small: 801px;
+
+@browser_media-short-screen: 450px;
+@browser_media-narrow-screen: 400px;
+@browser_media-medium-screen: 600px;

customize.dist/src/less2/include/colortheme.less

@@ -0,0 +1,70 @@
+@colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif;
+
+@colortheme_link-color: #0275D8;
+@colortheme_link-color-visited: #005999;
+@colortheme_info-background: #fafafa;
+
+@colortheme_old-base: #302B28;
+@colortheme_old-fore: #fafafa;
+
+@colortheme_base: #fff;
+@colortheme_light-base: lighten(@colortheme_base, 20%);
+
+@colortheme_cp-red: #FA5858; // remove red
+@colortheme_cp-green: #46E981;
+
+@colortheme_modal-bg: #222;
+@colortheme_modal-fg: #fff;
+@colortheme_modal-link: #eee;
+@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
+@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
+@colortheme_modal-padding: 12px;
+@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
+
+@colortheme_modal-input: #111;
+
+@colortheme_alertify-red: #E55236;
+@colortheme_alertify-green: #77C825;
+
+@colortheme_notification-log: rgba(0, 0, 0, 0.8);
+@colortheme_notification-warn: rgba(205, 37, 50, 0.8);
+
+// Apps
+
+@colortheme_pad-bg: #1c4fa0;
+@colortheme_pad-color: #fff;
+
+@colortheme_slide-bg: #e57614;
+@colortheme_slide-color: #fff;
+
+@colortheme_code-bg: #ffae00;
+@colortheme_code-color: #000;
+
+@colortheme_poll-bg: #006304;
+@colortheme_poll-color: #fff;
+
+@colortheme_whiteboard-bg: #800080;
+@colortheme_whiteboard-color: #fff;
+
+@colortheme_drive-bg: #0087ff;
+@colortheme_drive-color: #fff;
+
+@colortheme_file-bg: #cd2532;
+@colortheme_file-color: #fff;
+
+@colortheme_friends-bg: #607B8D;
+@colortheme_friends-color: #fff;
+
+@colortheme_default-bg: #ddd;
+@colortheme_default-color: #000;
+
+@colortheme_settings-bg: #0087ff;
+@colortheme_settings-color: #fff;
+
+@colortheme_profile-bg: #0087ff;
+@colortheme_profile-color: #fff;
+
+@cryptpad_color_blue: #4591C4; 
+@cryptpad_color_grey: #999999;
+@cryptpad_header_col: #1E1F1F;
+@cryptpad_text_col: #3F4141;

customize.dist/src/less2/include/font.less

@@ -0,0 +1,9 @@
+.font_neuropolitical () {
+    @font-face {
+        font-family: Neuropolitical;
+        src: url(./customize/fonts/neuropolitical.ttf)
+    }
+}
+.font_open-sans () {
+    @import (once) '/customize/fonts/open-sans.less';
+}

customize.dist/src/less2/include/infopages.less

@@ -0,0 +1,217 @@
+@import (once) "./colortheme.less";
+
+@infopages_infobar-height: 64px;
+@infopages_padding: 32px;
+
+// Basic setup for info pages, this should be used at the global level
+.infopages_main () {
+    background-color: @colortheme_info-background;
+    a {
+        color: @cryptpad_color_blue;
+        &:visited { color: darken(@cryptpad_color_blue, 5%); }
+    }
+    a:hover {
+        opacity: 1;
+    }
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    font-family: @colortheme_font;
+    .cp-container {
+        font-size: 16px;
+        padding-top: @infopages_padding;
+        padding-bottom: @infopages_padding;
+        min-height: 75vh;
+        h1 {
+            font-size: 3em;
+            margin-bottom: 0.5em;
+        }
+        h2 {
+            font-size: 2em;
+            margin-top: 1em;
+            margin-bottom: 0.5em;
+        }
+        h3 {
+            font-size: 1.5em;
+            margin-top: 1em;
+            margin-bottom: 0.5em;
+        }
+        img {
+            &.left {
+                float: left;
+            }
+            max-width: 100%;
+        }
+        .form-group {
+            & > * {
+                margin-top: 0.5em;
+            }
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .checkbox-container {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                label {
+                    margin: 0;
+                }
+                input {
+                    margin-right: 0.5em;
+                }
+            }
+        }
+    }
+    footer {
+        background-color: @cryptpad_color_blue;
+        .container {
+            .col {
+                margin-top: 1em;
+            }
+        a {
+            color: #fff;
+            &:visited {
+                color: darken(#fff, 5%);
+            };
+        }
+        margin-bottom: 1em;
+        ul.list-unstyled {
+                margin-top: 1em;
+                text-align: center;
+            }
+        }
+        .cp-bio-foot {
+            background-image: url(/customize/CryptPad-white-logo.svg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+            p {
+                color: #fff;
+                padding-top: 30%;
+                margin-bottom: 0;
+                
+            }
+
+        }
+        .cp-version-footer {
+            background-color: @cryptpad_color_blue;
+            color: #fff;
+            text-align: center;
+            padding: 0.5em;
+            border-top: 2px solid #fff;
+        }
+    }
+};
+
+.infopages_link () {
+    text-decoration: none;
+    color: #0275D8;
+    cursor: pointer;
+    display: inline-flex;
+    &:hover {
+        transform: scale(1.05);
+    }
+}
+
+// Apply this to the top bar div
+.infopages_topbar () {
+    .cp-topbar {
+        background: #fff;
+        z-index: 9001;
+        position: fixed;
+        top: 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        width: 100%;
+        height: @infopages_infobar-height;
+        padding-left: 0.5em;
+        padding-right: 0.5em;
+        vertical-align: middle;
+        font-size: 1.25em;
+        line-height: 1.25em;
+        cursor: default;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        .navbar-nav {
+            display: flex;
+            align-items: center;
+        }
+        a {
+            font-weight: 500;
+            padding: 0.6em;
+            .infopages_link()
+        }
+        .cp-logo {
+            margin-right: 0.5em;
+        }
+    }
+}
+
+// navigation top bar 
+.navbar  {
+    background: #fff;
+    .navbar-brand {
+        display: block;
+        background-image: url(/customize/CryptPad_logo_color.svg);
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 50px;
+        width: 250px;
+    }
+    a {
+        border: 2px solid transparent;
+    }
+    .nav-link {
+        padding: 0.5em 0.7em;
+        &:hover {
+            transform: scale(1.05);
+        };
+    }
+    .cp-register-btn {
+            border: 2px solid #4591C4;
+    }
+    button:focus {
+        outline: none;
+    }
+    .navbar-toggler {
+        margin-top: 10px;
+        color: #4591C4;
+    }
+}
+@media (max-width: 991px) {
+    #menuCollapse {
+        text-align: right;
+    }
+    .navbar-nav a {
+        text-align: right !important;
+    }
+    .cp-register-btn {
+        margin-right: 13px;
+        margin-left: 83vw;
+        text-align: center;
+     }
+}
+@media (max-width: 687px) {
+    .cp-register-btn {
+         margin-left: 75vw;
+    }
+}
+@media (max-width: 467px) {
+    .cp-register-btn {
+         margin-left: 63vw;
+    }
+}
+
+
+//footer general styles
+
+.footer-title {
+    font-weight: bold;
+    font-size: 1.2em;
+    color: #1E1F1F;
+}

customize.dist/src/less2/include/mediatag.less

@@ -0,0 +1,18 @@
+.mediatag_base() {
+    media-tag {
+        min-height: 0;
+        flex: 1;
+        display: flex;
+        flex-flow: column;
+        text-align: center;
+    }
+
+    media-tag img {
+        flex: 1;
+        max-height: 100% !important;
+    }
+
+    media-tag iframe {
+        min-height: 100%;
+    }
+}

customize.dist/src/less2/include/modal.less

@@ -0,0 +1,17 @@
+@import (once) "./colortheme.less";
+
+.modal_base() {
+    font-family: @colortheme_font;
+
+    background-color: @colortheme_modal-bg;
+    color: @colortheme_modal-fg;
+    box-shadow: @colortheme_modal-shadow;
+
+    a {
+        color: @colortheme_modal-link;
+
+        &:visited {
+            color: @colortheme_modal-link-visited;
+        }
+    }
+}

customize.dist/src/less2/main.less

@@ -0,0 +1,12 @@
+@import (once) './include/font.less';
+.font_neuropolitical();
+.font_open-sans();
+
+body.cp-page-index { @import "./pages/page-index.less"; }
+body.cp-page-contact { @import "./pages/page-contact.less"; }
+body.cp-page-login { @import "./pages/page-login.less"; }
+body.cp-page-register { @import "./pages/page-register.less"; }
+body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
+body.cp-page-about { @import "./pages/page-about.less"; }
+body.cp-page-privacy { @import "./pages/page-privacy.less"; }
+body.cp-page-terms { @import "./pages/page-terms.less"; }

customize.dist/src/less2/pages/page-about.less

@@ -0,0 +1,115 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();
+#cp-main {
+    background: #fff;
+}
+.cp-about-intro {
+	padding-top: 3em;
+	padding-bottom: 3em;
+	background-image: url(/customize/bkabout.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    .container {
+    	color: #fff;
+    	font-family: "Open Sans";
+    	h1 {
+    		font-weight: 700;
+    	}
+    	a {
+    		color: #fff;
+    		text-decoration: underline;
+    	}
+    	p {
+    		padding-top: 1em;
+    	}
+    }
+}
+.cp-container {
+    .row {
+        background: #fff;
+    }
+    .cp-bio-avatar {
+        padding-right: 0;
+        @media (max-width: 991px) {
+            padding-right: 15px;
+        }
+        img {
+            @media (max-width: 991px) {
+                margin: 0 auto;
+                display: block;
+            }
+        }
+    }
+    .cp-bio-avatar-right    {
+        padding-right: 15px;
+        padding-left: 0;
+        @media (max-width: 991px) {
+            padding-left: 15px;
+        }
+    }
+}
+.cp-develop-about {
+    .cp-icon-cent {
+        width: 6rem;
+        background: #fff;
+        border-radius: 50%;
+        height: 6rem;
+        box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
+        margin: 0 auto;
+        background-image: url(/customize/code.svg);
+        background-repeat: no-repeat;
+        margin-top: 1em;
+        margin-bottom: 1.5em;
+        background-position: 50%;
+        background-size: 4rem;
+    }
+    h2 {
+        margin-top: 0;
+        font-weight: 600;
+        color: #1E1F1F;
+        margin-bottom: 1.5em;
+    }
+}
+.cp-profile-det {
+    padding-left: 30px;
+    h3 {
+        color: #1E1F1F;
+        font-weight: 700;
+    }
+    p {
+        color: #3F4141;
+        margin-bottom: 1em;
+    }
+    hr {
+        margin-left: 0;
+        width: 15rem;
+        border-top: 2px solid @cryptpad_color_blue;
+    }
+    margin-bottom: 1em;
+}
+.cp-soc-media {
+        font-size: 1.5em;
+        color: @cryptpad_color_blue;
+        padding-right: 1em;
+        display: inline-block;
+        &:hover {
+            transform: scale(1.1);
+        }
+        &:visited {
+            color: @cryptpad_color_blue;
+        }
+}
+.cp-contrib {
+    margin-top: 3em;
+    .cp-icon-cent {
+        background-image: url(/customize/source-branch.svg);
+        background-position: 60%;
+    }
+}
+.cp-margin-bot {
+    margin-bottom: 1.5em;
+}		

customize.dist/src/less2/pages/page-contact.less

@@ -0,0 +1,9 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();
+
+.fa {
+    padding-right: 0.25em;
+}

customize.dist/src/less2/pages/page-index.less

@@ -0,0 +1,197 @@
+//@import (once) "./variables.less";
+
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+
+.infopages_main();
+.infopages_topbar();
+
+@background_lighter: rgba(0,0,0,0.1);
+@background_darker: rgba(0,0,0,0.4);
+#cp-main {
+    color: #FFF;
+    background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
+    background-size: cover;
+    background-position: center;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    .container {
+        @media only screen and (max-device-width : 576px) {
+            margin-top: 6em;
+        }
+    }
+}
+body {
+    font-family: "Open Sans", Helvetica;
+}
+.cp-right {
+	.cp-register-btn {
+		padding: 0.5em 1em 0.7em 1em;
+		border: 2px solid #fff;
+		&:hover {
+			transform: scale(1.05);
+		}
+	}
+	.cp-login-btn {
+		color: #fff;
+		padding: 0.5em 1em 0.7em 1em;
+		&:hover {
+			transform: scale(1.05);
+		}
+	}
+}
+.cp-title {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 1.5em;
+    img {
+        height: 20vh;
+        margin-bottom: 1.5em;
+    }
+    margin-left: 0;
+    h1 {
+        font-family: "Neuropolitical";
+        //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
+        //font-family: "Raleway";
+        font-size: 45px;
+    }
+    p {
+        //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+        font-size: 20px;
+        //font-style: italic;
+    }
+}
+.navbar {
+    background: transparent;
+    width: 100%;
+    @media only screen and (max-device-width: 991px) {
+        margin-top: 0;
+    }
+    .navbar-brand {
+        background-image: url(/customize/CryptPad-white-logo.svg);
+    }
+    a {
+        color: #fff;
+        &:visited {
+            color: rgba(255,255,255,.9);
+        };
+    }
+    .nav-link {
+        &:hover {
+            transform: scale(1.05);
+        };
+    }
+    .cp-register-btn {
+            border: 2px solid #fff;
+    }
+    .navbar-toggler {
+        margin-top: 10px;
+        color: #fff;
+    }
+}
+@callout-padding: 15px;
+a:hover {
+    text-decoration: none
+}
+.bs-callout {
+    display: flex;
+    align-items: stretch;
+    margin: 25px 0;
+    background:rgba(255,255,255,0.6);
+    color: black;
+    transition: all .1s ease-in-out;
+    box-sizing: border-box;
+    height: 5em;
+    position: relative;
+    a {
+        color: black;
+        &:hover { text-decoration-line: none; }
+    }
+    div h4 {
+        @media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
+            font-size: 1.3em;
+        }
+    }
+}
+h4 {
+    margin: 0;
+}
+.cp-callout-more-moremsg,.cp-callout-more-lessmsg {
+    transform: none !important;
+}
+.bs-callout div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: absolute;
+    left: 5em;
+}
+.bs-callout+.bs-callout {
+    margin-top: -5px;
+}
+
+.bs-callout:hover {
+    //color: white;
+    transform: scale(1.05);
+    cursor: pointer; 
+}
+.bs-callout:hover .fa {
+    //width: 100%;
+}
+.bs-callout:hover.cp-callout-more {
+        transform: none !important;
+}
+.bs-callout .fa {
+    display: flex;
+    align-items: center;
+    font-size: 2em;
+    padding-left: 0.57em;
+    width: 2em;
+    transition: width 0.1s;
+    color: #fff;
+}
+.cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
+.cp-callout-code .fa { background-color: @colortheme_code-bg; }
+.cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
+.cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
+.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
+.cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
+.cp-hidden { display: none !important; }
+.cp-callout-more {
+    width: auto;
+    display: inline-block;
+    align-content: center;
+    height: 2em;
+    border-radius: 1em;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    background: none;
+    width: 100%;
+    div {
+        .infopages_link();
+        color: #fff;
+        .fa {
+            font-size: inherit;
+            padding: 0;
+            width: 1em;
+            padding-left: 5px;
+        }
+    }
+}
+@media (min-width: 576px) and (max-width: 767px) {
+    .container {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left {
+        left: 5px;
+    }
+}
+

customize.dist/src/less2/pages/page-login.less

@@ -0,0 +1,78 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+@import (once) "../include/alertify.less";
+
+.infopages_main();
+.infopages_topbar();
+.alertify_main();
+
+.form-group {
+    .extra {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        width: 100%;
+        .login {
+        }
+    }
+}
+.cp-container {
+	#data {
+        background: #4591C4; 
+        padding-top: 3em;
+        padding-bottom: 7em;
+        padding-left: 30px;
+        padding-right: 30px;
+        p {
+            color: #fff;
+        }
+        h2 {
+            font-weight: 700;
+            color: @cryptpad_header_col;
+        }
+    }
+	#userForm {
+        padding-top: 3em;
+        padding-bottom: 2em;
+        .form-control {
+            border-radius: 0;
+            color: @cryptpad_text_col;
+            margin-top: 1em;
+            &:focus {
+                border-color: @cryptpad_color_blue;
+            }
+        }
+        .checkbox-container {
+            color: @cryptpad_text_col;
+        }
+    }
+    .align-items-center {
+    	box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
+    	background: #fff;
+    }
+    .extra {
+    	margin-top: 1em;
+    	.cp-login-register {
+    		color: @cryptpad_color_blue;
+	        background: #fff;
+	        border: 2px solid @cryptpad_color_blue;
+	        border-radius: 0;
+	        &:hover {
+	            transform: scale(1.05);
+	        }
+    	}
+    	.login {
+    		background: transparent;
+    		color: @cryptpad_color_blue;
+    		padding: 0;
+    		&:hover {
+	            transform: scale(1.05);
+	        } 
+    	}
+    }
+}
+.cp-container {
+	padding-top: 0;
+	min-height: 66vh;
+}

customize.dist/src/less2/pages/page-privacy.less

@@ -0,0 +1,5 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();

customize.dist/src/less2/pages/page-register.less

@@ -0,0 +1,130 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+@import (once) "../include/alertify.less";
+
+.infopages_main();
+.infopages_topbar();
+.alertify_main();
+
+.cp-container {
+    .form-group {
+        .checkbox-container {
+            &:nth-of-type(1) {
+                margin-top: 2em;
+            }
+            &:last-of-type {
+                margin-bottom: 1em;
+            }
+        }
+        #register {
+            margin-top: 16px;
+            font-size: 1.25em;
+            min-width: 30%; // conflict?
+            width: 30%;
+            @media (max-width: 500px) {
+                width: 45%;
+            }
+        }
+    }
+    padding-bottom: 3em;
+    min-height: 5vh;
+}
+.alertify {
+    // workaround for alertify making empty p
+    p:empty {
+        display: none;
+    }
+}
+.cp-register-wel {
+    padding-top: 6em;
+    padding-bottom: 20em;
+    background-image: url(/customize/bkregister.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    h1 {
+        font-weight: 700;
+        color: #fff;
+        text-shadow: 0 1px 5px rgba(0,0,0,.2);
+    }
+}
+.cp-register-det {
+    margin-top: -7em;
+    background: #fff;
+    box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
+    #data {
+        background: #4591C4;  /* fallback for old browsers */
+        background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4);  /* Chrome 10-25, Safari 5.1-6 */
+        background: linear-gradient(to right, #FF7C4F, #4592C4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+        padding-top: 3em;
+        padding-bottom: 7em;
+        padding-left: 30px;
+        padding-right: 30px;
+        p {
+            color: #fff;
+            li {
+                margin-bottom: 1em;
+            }
+            .fa {
+                font-size: 1.5em;
+                padding-right: 10px;
+                color: #000;
+            }
+        }
+        h3 {
+            font-weight: 700;
+            margin-bottom: 1em;
+        }
+    }
+    #userForm {
+        padding-top: 3em;
+        padding-bottom: 2em;
+        .form-control {
+            border-radius: 0;
+            color: @cryptpad_text_col;
+            margin-top: 1em;
+            &:focus {
+                border-color: @cryptpad_color_blue;
+            }
+        }
+        .checkbox-container {
+            color: @cryptpad_text_col;
+        }
+    }
+    .cp-login-register {
+        color: @cryptpad_color_blue;
+        background: #fff;
+        border: 2px solid @cryptpad_color_blue;
+        border-radius: 0;
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+}
+.cp-register-test {
+    margin-top: 3em;
+    hr {
+        width: 15rem;
+        border-top: 2px solid @cryptpad_color_blue;
+        margin-top: 0;
+        margin-bottom: 2em;
+    }
+    p {
+        margin-bottom: 0;
+    }
+    .cp-test-source {
+        font-style: italic;
+    }
+    .test-details {
+        padding-left: 4em;
+        background-image: url(/customize/testimonial.svg);
+        background-repeat: no-repeat;
+        background-position: left top;
+        background-size: 3em;
+        color: @cryptpad_text_col;
+    }
+
+}
+#cp-main {
+    background: #fff;
+}

customize.dist/src/less2/pages/page-terms.less

@@ -0,0 +1,5 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();

customize.dist/src/less2/pages/page-what-is-cryptpad.less

@@ -0,0 +1,9 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();
+
+img#zeroknowledge {
+	width: 100%;
+}

customize.dist/src/less2/readme.md

@@ -0,0 +1,20 @@
+# CryptPad Styling
+
+How it works:
+* In this example, we use the index page, for each page we will have a corresponding class name and a corresponding less file.
+* The index page has a main div containing everything `<div id="cp-main" class="cp-page-index">`
+* There is a corresponding less file called `less2/pages/page-index.less`
+* Finally there is a corresponding line in main.less which imports that less file: `div#main.cp-page-index { @import "./pages/page-index.less"; }`
+  * cp-page-index class means:
+    * cp -> cryptpad
+    * page -> this is a style for accessing a page's less file
+    * index -> the name of the page and of the less file (page-index.less)
+* And everything which is standardized across pages is included from `page-index.less` as variables and mixins.
+
+Rules:
+* All of our new classes and ids should start with `cp-`.
+* You may make as many files as you need, for different purposes, but they can only contain mixins and variables.
+* All mixins and variables must be prefixed with the name of the file where they're defined and and underscore.
+  * e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less`
+* All mixin / variable files go in an `/include/` directory.
+* Document the meaning of your variable or mixin in a comment, consider that your mixin will be used by people other than you and if they do not have a definition of what it means, an update to it's style which seems logical to you might break their usage of it.

customize.dist/template.js

@@ -3,50 +3,15 @@ define([
     '/common/hyperscript.js',
     '/common/cryptpad-common.js',
     '/customize/pages.js',
-    '/api/config',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-], function ($, h, Cryptpad, Pages, Config) {
+], function ($, h, Cryptpad, Pages) {
 $(function () {
-    var urlArgs = Config.requireConf.urlArgs;
-    var Messages = Cryptpad.Messages;
     var $body = $('body');
     var isMainApp = function () {
         return /^\/(pad|code|slide|poll|whiteboard|file|media|contacts|drive|settings|profile|todo)\/$/.test(location.pathname);
     };
 
-    var rightLink = function (ref, loc, txt) {
-        return h('span.link.right', [
-            h('a', { href: ref, 'data-localization': loc}, txt)
-        ]);
-    };
-
-    var $topbar = $(h('div#cryptpadTopBar', [
-        h('span', [
-            h('a.gotoMain', {href: '/'}, [
-                h('img.cryptpad-logo', {
-                    src: '/customize/cryptofist_mini.png?' + urlArgs,
-                    alt: '',
-                }),
-                'CryptPad'
-            ])
-        ]),
-        h('span#user-menu.right.dropdown-bar'),
-        h('span#language-selector.right.dropdown-bar'),
-
-        rightLink('/about.html', 'about', 'About'),
-        rightLink('/privacy.html', 'privacy', 'Privacy'),
-        rightLink('/terms.html', 'terms', 'ToS'),
-        rightLink('/contact.html', 'contact', 'Contact'),
-        rightLink('https://blog.cryptpad.fr/', 'blog', 'Blog'),
-        h('span.link.right', [
-            h('button#upgrade.upgrade.btn.buttonSuccess', {
-                style: { display: 'none' }
-            })
-        ])
-        ]
-    ));
-
     var infoPage = function () {
         return h('div#mainBlock.hidden', typeof(Pages[location.pathname]) === 'function'?
             Pages[location.pathname](): [h('div#container')]);
@@ -54,67 +19,6 @@ $(function () {
 
     var $main = $(infoPage());
 
-    var footerCol = function (title, L, literal) {
-        return h('div.col', [
-            h('ul.list-unstyled', [
-                h('li.title', {
-                    'data-localization': title,
-                }, title? Messages[title]: literal )
-                ].concat(L.map(function (l) {
-                    return h('li', [ l ]);
-                }))
-            )
-        ]);
-    };
-
-    var footLink = function (ref, loc, text) {
-        var attrs =  {
-            href: ref,
-        };
-        if (!/^\//.test(ref)) {
-            attrs.target = '_blank';
-            attrs.rel = 'noopener noreferrer';
-        }
-        if (loc) {
-            attrs['data-localization'] =  loc;
-            text = Messages[loc];
-        }
-        return h('a', attrs, text);
-    };
-
-    var $footer = $(h('footer', [
-        h('div.container', [
-            h('div.row', [
-                footerCol(null, [
-                    footLink('/about.html', 'about'),
-                    footLink('/terms.html', 'terms'),
-                    footLink('/privacy.html', 'privacy'),
-                ], 'CryptPad'),
-                footerCol('footer_applications', [
-                    footLink('/drive/', 'main_drive'),
-                    footLink('/pad/', 'main_richText'),
-                    footLink('/code/', 'main_code'),
-                    footLink('/slide/', 'main_slide'),
-                    footLink('/poll/', 'main_poll'),
-                    footLink('/whiteboard/', null, Messages.type.whiteboard)
-                ]),
-                footerCol('footer_aboutUs', [
-                    footLink('https://blog.cryptpad.fr', 'blog'),
-                    footLink('https://labs.xwiki.com', null, 'XWiki Labs'),
-                    footLink('http://www.xwiki.com', null, 'XWiki SAS'),
-                    footLink('https://www.open-paas.org', null, 'OpenPaaS')
-                ]),
-                footerCol('footer_contact', [
-                    footLink('https://riot.im/app/#/room/#cryptpad:matrix.org', null, 'Chat'),
-                    footLink('https://twitter.com/cryptpad', null, 'Twitter'),
-                    footLink('https://github.com/xwiki-labs/cryptpad', null, 'GitHub'),
-                    footLink('/contact.html', null, 'Email')
-                ])
-            ])
-        ]),
-        h('div.version-footer', "CryptPad v1.12.0 (Minotaur)")
-    ]));
-
     var pathname = location.pathname;
 
     if (isMainApp()) {
@@ -174,13 +78,24 @@ $(function () {
 
             return;
         }
+    } else {
+        // add class on info-pages
+        var css = location.pathname.replace(/(index)?\.html$/gi, "") // .html
+            .replace(/[^a-zA-Z]+/gi, '-') // any non-alpha character
+            .replace(/^-|-$/g, ''); // starting/trailing dashes
+        if (css === '')
+        {
+            css = 'index';
+        }
+        $('body').addClass('cp-page-' + css);
     }
 
     require([
-        'less!/customize/src/less/cryptpad.less',
+        'less!/customize/src/less2/main.less',
         'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+        '/bower_components/bootstrap/dist/js/bootstrap.min.js'
     ], function () {
-        $body.append($topbar).append($main).append($footer);
+        $body.append($main);
 
         if (/^\/user\//.test(pathname)) {
             require([ '/user/main.js'], function () {});

customize.dist/testimonial.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 26 25" style="enable-background:new 0 0 26 25;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#4591C4;}
+</style>
+<title>testimonial</title>
+<g id="Layer_2">
+	<g id="_25_Quote_Quotation_Text_Sample">
+		<path class="st0" d="M8.5,12l-4.1,0c0.5-3.5,2.9-6.5,6.2-7.7l0.2,0c1-0.4,1.6-1.5,1.2-2.6c-0.4-1-1.5-1.6-2.6-1.2l-0.2,0
+			c-5.3,2-8.8,7.1-8.8,12.7l0,7.4l0,0c-0.1,2,1.4,3.8,3.5,3.9c0.1,0,0.3,0,0.4,0l4,0c2,0.1,3.7-1.5,3.8-3.6c0,0,0-0.1,0-0.1l0-5l0,0
+			C12.1,13.8,10.5,12.1,8.5,12z M8.2,20.6l-3.9,0l0-4.7l3.9,0L8.2,20.6z"/>
+		<path class="st0" d="M25.5,15.8c0-2.1-1.7-3.8-3.8-3.8c0,0-0.1,0-0.1,0l-3.8,0c0.5-3.5,2.9-6.5,6.2-7.7h0.2c1-0.4,1.6-1.5,1.2-2.6
+			S24,0.2,22.9,0.5l-0.2,0c-5.3,2-8.8,7.1-8.8,12.7l0,7.6c0.1,2,1.7,3.6,3.7,3.7l4.1,0c2,0.1,3.8-1.4,3.9-3.5c0-0.1,0-0.3,0-0.4
+			L25.5,15.8L25.5,15.8z M21.7,20.7l-3.9,0l0-4.8l3.9,0l0,4.6V20.7z"/>
+	</g>
+</g>
+</svg>

customize.dist/translations/messages.es.js

@@ -104,7 +104,7 @@ define(function () {
     out.main_p2 = 'Este proyecto utiliza el editor de texto visual <a href="http://ckeditor.com/">CKEditor</a>, <a href="https://codemirror.net/">CodeMirror</a>, y el motor en tiempo real <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
     out.main_howitworks = '¿Cómo funciona?';
     out.main_howitworks_p1 = "CryptPad utiliza una variante del algoritmo de <a href='https://en.wikipedia.org/wiki/Operational_transformation'>transformación operacional</a> (página en inglés) que es capaz de encontrar un consenso distribuido usando un <a href='https://bitcoin.org/bitcoin.pdf'>Blockchain Nakamoto</a> (página en inglés), popularizado por <a href='https://es.wikipedia.org/wiki/Bitcoin'>Bitcoin</a>. De esta manera el algoritmo puede evitar la necesidad de un servidor central para resolver conflictos de edición de la transformación operacional y sin necesidad de resolver conflictos, el servidor puede mantenerse inconsciente del contenido que se está editando en el pad.";
-    out.main_about_p2 = 'Si tienes preguntas o comentarios, puedes <a href="https://twitter.com/cryptpad">enviarnos un tweet</a>, abrir un issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="nuestro issue tracker">en GitHub</a>, saludarnos en nuestro canal IRC (<a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" title="freenode webchat">irc.freenode.net</a>), o <a href="mailto:research@xwiki.com">envíanos un email</a>.';
+    out.main_about_p2 = 'Si tienes preguntas o comentarios, puedes <a href="https://twitter.com/cryptpad"><i class="fa fa-twitter"></i>enviarnos un tweet</a>, abrir un issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="nuestro issue tracker">en <i class="fa fa-github"></i>GitHub</a>. saludarnos en <a href="https://riot.im/app/#/room/#cryptpad:matrix.org" title="Matrix">nuestro <i class="fa fa-comment"></i>canal Matrix</a> o en IRC (#cryptpad on irc.freenode.net), o <a href="mailto:research@xwiki.com"><i class="fa fa-envelope"></i>envianos un email</a>.';
 
     out.button_newpad = 'Crear nuevo pad de texto enriquecido';
     out.button_newcode = 'Crear nuevo pad de código';
@@ -291,7 +291,7 @@ define(function () {
     out.blog = "Blog";
 
     out.initialState = [
-        '<span style="font-size:18px;"><p>',
+        '<p>',
         'Esto es&nbsp;<strong>CryptPad</strong>, el editor colaborativo en tiempo real Zero Knowledge. Todo está guardado cuando escribes.',
         '<br>',
         'Comparte el enlace a este pad para editar con amigos o utiliza el botón <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Compartir&nbsp;</span> para obtener un <em>enlace sólo lectura</em>&nbsp;que permite leer pero no escribir.',
@@ -299,13 +299,13 @@ define(function () {
 
         '<p><em>',
         'Vamos, empieza a escribir...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 
     out.codeInitialState = "/*\n   Esto es CryptPad, el editor colaborativo en tiempo real zero knowledge.\n   Lo que escribes aquí está cifrado de manera que sólo las personas con el enlace pueden acceder a ello.\n   Incluso el servidor no puede ver lo que escribes.\n   Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n*/";
     out.slideInitialState = "# CryptSlide\n* Esto es CryptPad, el editor colaborativo en tiempo real zero knowledge.\n* Lo que escribes aquí está cifrado de manera que sólo las personas con el enlace pueden acceder a ello.\n* Incluso el servidor no puede ver lo que escribes.\n* Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n\n---\n# Cómo utilizarlo\n1. Escribe tu contenido en Markdown\n  - Puedes aprender más sobre Markdown [aquí](http://www.markdowntutorial.com/)\n2. Separa tus diapositivas con ---\n3. Haz clic en \"Presentar\" para ver el resultado  - Tus diapositivas se actualizan en tiempo real";
-    out.driveReadmeTitle = "¿Qué es CryptDrive?";
+    out.driveReadmeTitle = "¿Qué es CryptPad?";
     out.readme_welcome = "¡Bienvenido a CryptPad!";
     out.readme_p1 = "Bienvenido a CryptPad, aquí podrás anotar cosas solo o con otra gente.";
     out.readme_p2 = "Este pad es una guía rápida para aprender a usar a CryptPad para tomar notas, organizarlas y trabajar con más personas.";
@@ -554,5 +554,30 @@ define(function () {
     out.todo_markAsCompleteTitle = "Marcar esta tarea como completa";
     out.todo_markAsIncompleteTitle = "Marcar esta tarea como incompleta";
     out.todo_removeTaskTitle = "Borrar esta tarea de la lista";
+
+    // 1.13.0 - Naiad
+    out.topbar_whatIsCryptpad = "Qué es CryptPad";
+    out.header_homeTitle = "Volver a la página de inicio";
+    out.userListButton = "Lista de usuarios";
+    out.userAccountButton = "Tu cuenta";
+    out.canvas_saveToDrive = "Guardar esta imagen como archivo en tu CryptDrive";
+    out.canvas_currentBrush = "Pincel actual";
+    out.canvas_chooseColor = "Eligir un color";
+    out.fm_viewListButton = "Lista";
+    out.fm_viewGridButton = "Cuadrícula";
+    out.settings_cat_code = "Código";
+    out.settings_codeIndentation = "Indentación del editor de código (espacios)";
+    out.settings_codeUseTabs = "Utilizar tabulaciones en vez de espacios";
+    out.pad_showToolbar = "Mostrar la barra de herramientas";
+    out.pad_hideToolbar = "Esconder la barra de herramientas";
+    out.main_catch_phrase = "El Cloud Zero Knowledge";
+    out.main_richTextPad = "Pad de Texto Enriquecido";
+    out.main_codePad = "Pad de Código";
+    out.main_slidePad = "Presentación Markdown";
+    out.main_pollPad = "Encuesta";
+    out.main_whiteboardPad = "Pizarra";
+    out.main_localPads = "Pad Locales";
+    out.main_yourCryptDrive =  "Tu CryptDrive";
+
     return out;
 });

customize.dist/translations/messages.fr.js

@@ -116,6 +116,10 @@ define(function () {
     out.shareButton = 'Partager';
     out.shareSuccess = 'Lien copié dans le presse-papiers';
 
+    out.userListButton = "Liste d'utilisateurs";
+
+    out.userAccountButton = "Votre compte";
+
     out.newButton = 'Nouveau';
     out.newButtonTitle = 'Créer un nouveau pad';
     out.uploadButton = 'Importer des fichiers';
@@ -240,10 +244,13 @@ define(function () {
     out.canvas_delete = "Supprimer la sélection";
     out.canvas_disable = "Désactiver le dessin";
     out.canvas_enable = "Activer le dessin";
-    out.canvas_width = "Épaisseur";
+    out.canvas_width = "Taille";
     out.canvas_opacity = "Opacité";
-    out.canvas_opacityLabel = "opacité: {0}";
+    out.canvas_opacityLabel = "Opacité: {0}";
-    out.canvas_widthLabel = "taille: {0}";
+    out.canvas_widthLabel = "Taille: {0}";
+    out.canvas_saveToDrive = "Sauvegarder cette image en tant que fichier dans CryptDrive";
+    out.canvas_currentBrush = "Pinceau actuel";
+    out.canvas_chooseColor = "Choisir une couleur";
 
     // Profile
     out.profileButton = "Profil"; // dropdown menu
@@ -257,6 +264,9 @@ define(function () {
     out.profile_description = "Description";
     out.profile_fieldSaved = 'Nouvelle valeur enregistrée: {0}';
 
+    out.profile_inviteButton = "Inviter";
+    out.profile_inviteButtonTitle = 'Créer un lien pour inviter cet utilisateur à se connecter avec vous.';
+    out.profile_inviteExplanation = "Cliquer sur <strong>OK</strong> créera un lien vers une session de messagerie sécurisée <em>uniquement accessible par {0}.</em><br><br>Le lien peut être copié et partagé de manière publique.";
     out.profile_viewMyProfile = "Voir mon profil";
 
     // contacts/userlist
@@ -338,6 +348,8 @@ define(function () {
     out.fm_backup_title = 'Lien de secours';
     out.fm_nameFile = 'Comment souhaitez-vous nommer ce fichier ?';
     out.fm_error_cantPin = "Erreur interne du serveur. Veuillez recharger la page et essayer de nouveau.";
+    out.fm_viewListButton = "Liste";
+    out.fm_viewGridButton = "Grille";
     // File - Context menu
     out.fc_newfolder = "Nouveau dossier";
     out.fc_rename = "Renommer";
@@ -383,8 +395,6 @@ define(function () {
     out.login_invalPass = 'Mot de passe requis';
     out.login_unhandledError = "Une erreur inattendue s'est produite :(";
 
-    out.login_notRegistered = 'Pas encore inscrit ?';
-
     out.register_importRecent = "Importer l'historique (Recommendé)";
     out.register_acceptTerms = "J'accepte <a href='/terms.html' tabindex='-1'>les conditions d'utilisation</a>";
     out.register_passwordsDontMatch = "Les mots de passe doivent être identiques!";
@@ -403,11 +413,12 @@ define(function () {
             "<li>Vous pouvez importer les pads récents de ce navigateur pour les avoir dans votre compte utilisateur.</li>",
             "<li>Si vous utilisez un ordinateur partagé, vous devez vous déconnecter avant de partir, fermer l'onglet n'est pas suffisant.</li>",
         "</ul>"
-    ];
+    ].join('');
 
     // Settings
     out.settings_cat_account = "Compte";
     out.settings_cat_drive = "CryptDrive";
+    out.settings_cat_code = "Code";
     out.settings_title = "Préférences";
     out.settings_save = "Sauver";
 
@@ -454,6 +465,9 @@ define(function () {
     out.settings_logoutEverywhere = "Se déconnecter de force de toutes les autres sessions.";
     out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils.";
 
+    out.settings_codeIndentation = "Indentation dans l'éditeur de code (nombre d'espaces)";
+    out.settings_codeUseTabs = "Utiliser des tabulations au lieu d'espaces";
+
     out.upload_title = "Hébergement de fichiers";
     out.upload_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant.";
     out.upload_uploadPending = "Vous avez déjà un fichier en cours d'importation. Souhaitez-vous l'annuler et importer ce nouveau fichier ?";
@@ -473,10 +487,14 @@ define(function () {
     out.todo_title = "CryptTodo";
     out.todo_newTodoNamePlaceholder = "Décrivez votre tâche...";
     out.todo_newTodoNameTitle = "Ajouter cette tâche à votre liste";
-    out.todo_markAsCompleteTitle = "Marquer tâche comme terminée";
+    out.todo_markAsCompleteTitle = "Marquer cette tâche comme terminée";
-    out.todo_markAsIncompleteTitle = "Marquer tâche comme non incomplète";
+    out.todo_markAsIncompleteTitle = "Marquer cette tâche comme incomplète";
     out.todo_removeTaskTitle = "Enlever cette tâche de votre liste";
 
+    // pad
+    out.pad_showToolbar = "Afficher la barre d'outils";
+    out.pad_hideToolbar = "Cacher la barre d'outils";
+
     // general warnings
     out.warn_notPinned = "Ce pad n'est stocké dans aucun CryptDrive. Il va expirer après 3 mois d'inactivité. <a href='/about.html#pinning'>En savoir plus...</a>";
 
@@ -486,9 +504,10 @@ define(function () {
     out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) <a href="http://ckeditor.com/">CKEditor</a>, l\'éditeur de code source <a href="https://codemirror.net/">CodeMirror</a>, et le moteur temps-réel <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
     out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'<a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> qui est capable de trouver un consensus distribué en utilisant <a href="https://bitcoin.org/bitcoin.pdf">une chaîne de bloc Nakamoto</a>, un outil popularisé par le <a href="https://fr.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. De cette manière, l\'algorithme évite la nécessité d\'utiliser un serveur central pour résoudre les conflits d\'édition de l\'Operational Transformation, et sans ce besoin de résolution des conflits le serveur peut rester ignorant du contenu qui est édité dans le pad.';
     //contact.html
-    out.main_about_p2 = 'Si vous avez des questions ou commentaires, vous pouvez <a href="https://twitter.com/cryptpad">nous tweeter</a>, ouvrir une issue sur <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">Github</a>, venir dire bonjour sur IRC (<a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" title="freenode webchat">irc.freenode.net</a>), ou <a href="mailto:research@xwiki.com">nous envoyer un email</a>.';
+    out.main_about_p2 = 'Si vous avez des questions ou commentaires, vous pouvez <a href="https://twitter.com/cryptpad"><i class="fa fa-twitter"></i>nous tweeter</a>, ouvrir une issue sur <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker"><i class="fa fa-github"></i>GitHub</a>, venir dire bonjour sur <a href="https://riot.im/app/#/room/#cryptpad:matrix.org" title="Matrix">notre <i class="fa fa-comment"></i>salle Matrix</a> ou IRC (#cryptpad sur irc.freenode.net), ou bien encore <a href="mailto:research@xwiki.com"><i class="fa fa-envelope"></i>nous envoyer un email</a>.';
 
-    out.main_info = "<h2>Collaborez avec confiance</h2><br>Développez vos idées en groupe avec des document partagés; la technologie <strong>Zero Knowledge</strong> sécurise vos données.";
+    out.main_info = "<h2>Collaborez avec confiance</h2><br>Développez vos idées en groupe avec des documents partagés; la technologie <strong>Zero Knowledge</strong> sécurise vos données.";
+    out.main_catch_phrase = "Le Cloud Zero Knowledge";
 
     out.main_howitworks = 'Comment ça fonctionne';
     out.main_zeroKnowledge = 'Zero Knowledge';
@@ -510,6 +529,15 @@ define(function () {
     out.main_poll_p = 'Plannifiez vos réunions ou évènements, ou votez pour la meilleure solution concernant votre problème.';
     out.main_drive = 'CryptDrive';
 
+    out.main_richTextPad = 'Pad de Texte Riche';
+    out.main_codePad = 'Pad de Code';
+    out.main_slidePad = 'Présentation Markdown';
+    out.main_pollPad = 'Sondage ou Planning';
+    out.main_whiteboardPad = 'Tableau blanc';
+    out.main_localPads = 'Pads Locaux';
+    out.main_yourCryptDrive = 'Votre CryptDrive';
+    out.main_footerText = "Avec CryptPad, vous pouvez créer des documents collaboratifs rapidement pour prendre des notes à plusieurs.";
+
     out.footer_applications = "Applications";
     out.footer_contact = "Contact";
     out.footer_aboutUs = "À propos";
@@ -520,6 +548,8 @@ define(function () {
     out.terms = "Conditions";
     out.blog = "Blog";
 
+    out.topbar_whatIsCryptpad = "Qu'est-ce que CryptPad";
+
     // privacy.html
 
     out.policy_title = 'Politique de confidentialité de CryptPad';
@@ -560,11 +590,12 @@ define(function () {
     out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
     out.updated_0_header_logoTitle = 'Retourner vers votre CryptDrive';
     out.header_logoTitle = out.updated_0_header_logoTitle;
+    out.header_homeTitle = "Aller sur la page d'accueil";
 
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         'Voici <strong>CryptPad</strong>, l\'éditeur collaboratif en temps-réel Zero Knowledge. Tout est sauvegardé dés que vous le tapez.',
         '<br>',
         'Partagez le lien vers ce pad avec des amis ou utilisez le bouton <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Partager&nbsp;</span> pour obtenir le <em>lien de lecture-seule</em>, qui permet la lecture mais non la modification.',
@@ -572,7 +603,7 @@ define(function () {
         '<p>',
         '<em>',
         'Lancez-vous, commencez à taper...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 
@@ -600,7 +631,7 @@ define(function () {
         '  - La présentation est mise à jour en temps-réel'
     ].join('');
 
-    out.driveReadmeTitle = "Qu'est-ce que CryptDrive ?";
+    out.driveReadmeTitle = "Qu'est-ce que CryptPad ?";
     out.readme_welcome = "Bienvenue dans CryptPad !";
     out.readme_p1 = "Bienvenue dans CryptPad, le lieu où vous pouvez prendre des notes seul ou avec des amis.";
     out.readme_p2 = "Ce pad va vous donner un aperçu de la manière dont vous pouvez utiliser CryptPad pour prendre des notes, les organiser et travailler en groupe sur celles-ci.";

customize.dist/translations/messages.js

@@ -118,6 +118,10 @@ define(function () {
     out.shareButton = 'Share';
     out.shareSuccess = 'Copied link to clipboard';
 
+    out.userListButton = "User list";
+
+    out.userAccountButton = "Your account";
+
     out.newButton = 'New';
     out.newButtonTitle = 'Create a new pad';
     out.uploadButton = 'Upload files';
@@ -244,8 +248,11 @@ define(function () {
     out.canvas_enable = "Enable draw";
     out.canvas_width = "Width";
     out.canvas_opacity = "Opacity";
-    out.canvas_opacityLabel = "opacity: {0}";
+    out.canvas_opacityLabel = "Opacity: {0}";
     out.canvas_widthLabel = "Width: {0}";
+    out.canvas_saveToDrive = "Save this image as a file in your CryptDrive";
+    out.canvas_currentBrush = "Current brush";
+    out.canvas_chooseColor = "Choose a color";
 
     // Profile
     out.profileButton = "Profile"; // dropdown menu
@@ -329,10 +336,10 @@ define(function () {
     out.updated_0_fm_info_trash = 'Empty your trash to free space in your CryptDrive.';
     out.fm_info_trash = out.updated_0_fm_info_trash;
     out.fm_info_allFiles = 'Contains all the files from "Documents", "Unsorted" and "Trash". You can\'t move or remove files from here.'; // Same here
-    out.fm_info_anonymous = 'You are not logged in so these pads may be deleted (<a href="https://blog.cryptpad.fr/2017/05/17/You-gotta-log-in/" target="_blank">find out why</a>). ' +
+    out.fm_info_anonymous = 'You are not logged in so your pads will expire after 3 months (<a href="https://blog.cryptpad.fr/2017/05/17/You-gotta-log-in/" target="_blank">find out more</a>). ' +
                             '<a href="/register/">Sign up</a> or <a href="/login/">Log in</a> to keep them alive.';
     out.fm_alert_backupUrl = "Backup link for this drive.<br>" +
-                             "It is <strong>highly recommended</strong> that you keep ip for yourself only.<br>" +
+                             "It is <strong>highly recommended</strong> that you keep it secret.<br>" +
                              "You can use it to retrieve all your files in case your browser memory got erased.<br>" +
                              "Anybody with that link can edit or remove all the files in your file manager.<br>";
     out.fm_alert_anonymous = "Hello there, you are currently using CryptPad anonymously, that's ok but your pads may be deleted after a period of " +
@@ -342,6 +349,8 @@ define(function () {
     out.fm_backup_title = 'Backup link';
     out.fm_nameFile = 'How would you like to name that file?';
     out.fm_error_cantPin = "Internal server error. Please reload the page and try again.";
+    out.fm_viewListButton = "List view";
+    out.fm_viewGridButton = "Grid view";
     // File - Context menu
     out.fc_newfolder = "New folder";
     out.fc_rename = "Rename";
@@ -387,8 +396,6 @@ define(function () {
     out.login_invalPass = 'Password required';
     out.login_unhandledError = 'An unexpected error occurred :(';
 
-    out.login_notRegistered = 'Not registered?';
-
     out.register_importRecent = "Import pad history (Recommended)";
     out.register_acceptTerms = "I accept <a href='/terms.html' tabindex='-1'>the terms of service</a>";
     out.register_passwordsDontMatch = "Passwords do not match!";
@@ -397,13 +404,15 @@ define(function () {
 
     out.register_header = "Welcome to CryptPad";
     out.register_explanation = [
-        "<p>Lets go over a couple things first</p>",
+        "<h3>Lets go over a couple things first:</h3>",
-        "<ul>",
+        "<ul class='list-unstyled'>",
-            "<li>Your password is your secret key which encrypts all of your pads. If you lose it there is no way we can recover your data.</li>",
+            "<li><i class='fa fa-info-circle'> </i> Your password is your secret key which encrypts all of your pads. If you lose it there is no way we can recover your data.</li>",
-            "<li>You can import pads which were recently viewed in your browser so you have them in your account.</li>",
+            "<li><i class='fa fa-info-circle'> </i> You can import pads which were recently viewed in your browser so you have them in your account.</li>",
-            "<li>If you are using a shared computer, you need to log out when you are done, closing the tab is not enough.</li>",
+            "<li><i class='fa fa-info-circle'> </i> If you are using a shared computer, you need to log out when you are done, closing the tab is not enough.</li>",
         "</ul>"
     ].join('');
+    out.register_testimonial =" \"Tools like Etherpad and Google Docs [...] all share a weakness, which is that whomever owns the document server can see everything you're typing. Cryptpad is a free/open project that uses some of the ideas behind blockchain to implement a \"zero-knowledge\" version of a collaborative document editor, ensuring that only the people working on a document can see it.\"  ";
+    out.register_testimonial_name = "Cory Doctorow";
 
     out.register_writtenPassword = "I have written down my username and password, proceed";
     out.register_cancel = "Go back";
@@ -415,6 +424,7 @@ define(function () {
     // Settings
     out.settings_cat_account = "Account";
     out.settings_cat_drive = "CryptDrive";
+    out.settings_cat_code = "Code";
     out.settings_title = "Settings";
     out.settings_save = "Save";
 
@@ -461,6 +471,9 @@ define(function () {
     out.settings_logoutEverywhere = "Force log out of all other web sessions";
     out.settings_logoutEverywhereConfirm = "Are you sure? You will need to log in with all your devices.";
 
+    out.settings_codeIndentation = 'Code editor indentation (spaces)';
+    out.settings_codeUseTabs = "Indent using tabs (instead of spaces)";
+
     out.upload_title = "File upload";
     out.upload_serverError = "Server Error: unable to upload your file at this time.";
     out.upload_uploadPending = "You already have an upload in progress. Cancel it and upload your new file?";
@@ -484,6 +497,10 @@ define(function () {
     out.todo_markAsIncompleteTitle = "Mark this task as incomplete";
     out.todo_removeTaskTitle = "Remove this task from your todo list";
 
+    // pad
+    out.pad_showToolbar = "Show toolbar";
+    out.pad_hideToolbar = "Hide toolbar";
+
     // general warnings
     out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";
 
@@ -495,9 +512,10 @@ define(function () {
     out.main_howitworks_p1 = 'CryptPad uses a variant of the <a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> algorithm which is able to find distributed consensus using a <a href="https://bitcoin.org/bitcoin.pdf">Nakamoto Blockchain</a>, a construct popularized by <a href="https://en.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. This way the algorithm can avoid the need for a central server to resolve Operational Transform Edit Conflicts and without the need for resolving conflicts, the server can be kept unaware of the content which is being edited on the pad.';
 
     // contact.html
-    out.main_about_p2 = 'If you have any questions or comments, you can <a href="https://twitter.com/cryptpad">tweet us</a>, open an issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">on github</a>, come say hi on irc (<a href="http://webchat.freenode.net?channels=%23cryptpad&uio=MT1mYWxzZSY5PXRydWUmMTE9Mjg3JjE1PXRydWUe7" title="freenode webchat">irc.freenode.net</a>), or <a href="mailto:research@xwiki.com">send us an email</a>.';
+    out.main_about_p2 = 'If you have any questions or comments, feel free to reach out! You can <a href="https://twitter.com/cryptpad"><i class="fa fa-twitter"></i>tweet us</a>, open an issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">on <i class="fa fa-github"></i>GitHub</a>. Come say hi on <a href="https://riot.im/app/#/room/#cryptpad:matrix.org" title="Matrix">our <i class="fa fa-comment"></i>Matrix channel</a> or IRC (#cryptpad on irc.freenode.net), or <a href="mailto:research@xwiki.com"><i class="fa fa-envelope"></i>send us an email</a>.';
 
-    out.main_info = "<h1>Collaborate in Confidence</h1><br> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; even from us.";
+    out.main_info = "<h2>Collaborate in Confidence</h2> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; <strong>even from us</strong>.";
+    out.main_catch_phrase = "The Zero Knowledge Cloud";
 
     out.main_howitworks = 'How It Works';
     out.main_zeroKnowledge = 'Zero Knowledge';
@@ -520,6 +538,15 @@ define(function () {
     out.main_poll_p = 'Plan your meeting or your event, or vote for the best solution regarding your problem.';
     out.main_drive = 'CryptDrive';
 
+    out.main_richTextPad = 'Rich Text Pad';
+    out.main_codePad = 'Markdown/Code Pad';
+    out.main_slidePad = 'Markdown Presentation';
+    out.main_pollPad = 'Poll or Schedule';
+    out.main_whiteboardPad = 'Whiteboard';
+    out.main_localPads = 'Local Pads';
+    out.main_yourCryptDrive = 'Your CryptDrive';
+    out.main_footerText = "With CryptPad, you can make quick collaborative documents for taking notes and writing down ideas together.";
+
     out.footer_applications = "Applications";
     out.footer_contact = "Contact";
     out.footer_aboutUs = "About us";
@@ -530,6 +557,27 @@ define(function () {
     out.terms = "ToS";
     out.blog = "Blog";
 
+    out.topbar_whatIsCryptpad = "What is CryptPad";
+
+    // what-is-cryptpad.html
+
+    out.whatis_title = 'What is CryptPad';
+    out.whatis_collaboration = 'Fast, Easy Collaboration';
+    out.whatis_collaboration_p1 = 'With CryptPad, you can make quick collaborative documents for taking notes and writing down ideas together. When you sign up and log in, you get file upload capability and a CryptDrive where you can organize all of your pads. As a registered user you get 50MB of space for free.';
+    out.whatis_collaboration_p2 = 'You can share access to a CryptPad document simply by sharing the link. You can also share a link which provides <em>read only</em> access to a pad, allowing you to publicise your collaborative work while still being able to edit it.';
+    out.whatis_collaboration_p3 = 'You can make simple rich text documents with <a href="http://ckeditor.com/">CKEditor</a> as well as Markdown documents which are rendered in realtime while you type. You can also use the poll app for scheduling events with multiple participants.';
+    out.whatis_zeroknowledge = 'Zero Knowledge';
+    out.whatis_zeroknowledge_p1 = "We don't want to know what you're typing and with modern cryptography, you can be sure that we can't know. CryptPad uses <strong>100% client side encryption</strong> to protect the content that you type from us, the people who host the server.";
+    out.whatis_zeroknowledge_p2 = 'When you sign up and log in, your username and password are computed into a secret key using <a href="https://en.wikipedia.org/wiki/Scrypt">scrypt key derivation function</a>. Neither this key, nor the username and password are ever sent to the server. Instead they are used on the client side to decrypt the content of your CryptDrive, which contains the keys to all pads that you are able to access.';
+    out.whatis_zeroknowledge_p3 = 'When you share the link to a document, you\'re sharing the cryptographic key for accessing that document but since the key is in the <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a>, it is never directly sent to the server. Check out our <a href="https://blog.cryptpad.fr/2017/07/07/cryptpad-analytics-what-we-cant-know-what-we-must-know-what-we-want-to-know/">privacy blog post</a> to learn more about what types of metadata we do and do not have access to.';
+    out.whatis_drive = 'Organization with CryptDrive';
+    out.whatis_drive_p1 = 'Whenever you access a pad in CryptPad, the pad is automatically added to your CryptDrive in the main folder. Later on, you can organize these pads into folders or you can put them in the trash bin. CryptDrive allows you to search through your pads and to organize them whenever you want, however you want.';
+    out.whatis_drive_p2 = 'With intuitive drag-and-drop, you can move pads around in your drive and the link to these pads will stay the same so your collaborators will never lose access.';
+    out.whatis_drive_p3 = 'You can also upload files in your CryptDrive and share them with colleagues. Uploaded files can be organized just like collaborative pads.';
+    out.whatis_business = 'CryptPad for Business';
+    out.whatis_business_p1 = 'CryptPad\'s Zero Knowledge encryption is excellent for multiplying the effectiveness of existing security protocols by mirroring organizational access controls in cryptography. Because sensitive assets can only be decrypted using employee access credentials, CryptPad removes the hacker jackpot which exists in traditional IT servers. Read the <a href="https://blog.cryptpad.fr/images/CryptPad-Whitepaper-v1.0.pdf">CryptPad Whitepaper</a> to learn more about how it can help your business.';
+    out.whatis_business_p2 = 'CryptPad is deployable on premises and the <a href="https://cryptpad.fr/about.html">CryptPad developers</a> at XWiki SAS are able to offer commercial support, customization and development. Reach out to <a href="mailto:sales@cryptpad.fr">sales@cryptpad.fr</a> for more information.';
+
     // privacy.html
 
     out.policy_title = 'CryptPad Privacy Policy';
@@ -571,11 +619,12 @@ define(function () {
     out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
     out.updated_0_header_logoTitle = 'Go to your CryptDrive';
     out.header_logoTitle = out.updated_0_header_logoTitle;
+    out.header_homeTitle = 'Go to CryptPad homepage';
 
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
         '<br>',
         'Share the link to this pad to edit with friends or use the <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
@@ -583,7 +632,7 @@ define(function () {
 
         '<p><em>',
         'Go ahead, just start typing...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 
@@ -613,7 +662,7 @@ define(function () {
 
     // Readme
 
-    out.driveReadmeTitle = "What is CryptDrive?";
+    out.driveReadmeTitle = "What is CryptPad?";
     out.readme_welcome = "Welcome to CryptPad !";
     out.readme_p1 = "Welcome to CryptPad, this is where you can take note of things alone and with friends.";
     out.readme_p2 = "This pad will give you a quick walk through of how you can use CryptPad to take notes, keep them organized and work together on them.";

customize.dist/translations/messages.pt-br.js

@@ -484,7 +484,7 @@ define(function () {
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         'This is&nbsp;<strong>CryptPad</strong>, the Zero Knowledge realtime collaborative editor. Everything is saved as you type.',
         '<br>',
         'Share the link to this pad to edit with friends or use the <span style="background-color:#5cb85c;color:#ffffff;">&nbsp;Share&nbsp;</span> button to share a <em>read-only link</em>&nbsp;which allows viewing but not editing.',
@@ -492,7 +492,7 @@ define(function () {
 
         '<p><span style="color:#808080;"><em>',
         'Go ahead, just start typing...',
-        '</em></span></p></span>',
+        '</em></span></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 
@@ -522,7 +522,7 @@ define(function () {
 
     // Readme
 
-    out.driveReadmeTitle = "What is CryptDrive?";
+    out.driveReadmeTitle = "What is CryptPad?";
     out.readme_welcome = "Welcome to CryptPad !";
     out.readme_p1 = "Welcome to CryptPad, this is where you can take note of things alone and with friends.";
     out.readme_p2 = "This pad will give you a quick walk through of how you can use CryptPad to take notes, keep them organized and work together on them.";

customize.dist/translations/messages.ro.js

@@ -331,10 +331,10 @@ define(function () {
     out.header_france = "<a href=\"http://www.xwiki.com/\" target=\"_blank\" rel=\"noopener noreferrer\">With <img class=\"bottom-bar-heart\" src=\"/customize/heart.png\" alt=\"love\" /> from <img class=\"bottom-bar-fr\" src=\"/customize/fr.png\" title=\"Franța\" alt=\"Franța\"/> by <img src=\"/customize/logo-xwiki.png\" alt=\"XWiki SAS\" class=\"bottom-bar-xwiki\"/></a>";
     out.header_support = "<a href=\"http://ng.open-paas.org/\" title=\"OpenPaaS::ng\" target=\"_blank\" rel=\"noopener noreferrer\"> <img src=\"/customize/openpaasng.png\" alt=\"OpenPaaS-ng\" class=\"bottom-bar-openpaas\" /></a>";
     out.header_logoTitle = "Mergi la pagina principală";
-    out.initialState = "<span style=\"font-size:16px;\"><p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p></span><p>&nbsp;<br></p>";
+    out.initialState = "<p>Acesta este&nbsp;<strong>CryptPad</strong>, editorul colaborativ bazat pe tehnologia Zero Knowledge în timp real. Totul este salvat pe măsură ce scrii.<br>Partajează link-ul către acest pad pentru a edita cu prieteni sau folosește <span class=\"fa fa-share-alt\" style=\"border:1px solid black;color:#000;\">&nbsp;Share&nbsp;</span> butonul pentru a partaja <em>read-only link</em>&nbsp;permițând vizualizarea dar nu și editarea.</p><p><em>Îndrăznește, începe să scrii...</em></p><p>&nbsp;<br></p>";
     out.codeInitialState = "/*\n   Acesta este editorul colaborativ de cod bazat pe tehnologia Zero Knowledge CryptPad.\n   Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n   Poți să alegi ce limbaj de programare pus n evidență și schema de culori UI n dreapta sus.\n*/";
     out.slideInitialState = "# CryptSlide\n* Acesta este un editor colaborativ bazat pe tehnologia Zero Knowledge.\n* Ce scrii aici este criptat, așa că doar oamenii care au link-ul pot să-l acceseze.\n* Nici măcar serverele nu au acces la ce scrii tu.\n* Ce vezi aici, ce auzi aici, atunci când pleci, lași aici.\n\n-\n# Cum se folosește\n1. Scrie-ți conținutul slide-urilor folosind sintaxa markdown\n  - Află mai multe despre sintaxa markdown [aici](http://www.markdowntutorial.com/)\n2. Separă-ți slide-urile cu -\n3. Click pe butonul \"Play\" pentru a vedea rezultatele  - Slide-urile tale sunt actualizate în timp real.";
-    out.driveReadmeTitle = "Ce este CryptDrive?";
+    out.driveReadmeTitle = "Ce este CryptPad?";
     out.readme_welcome = "Bine ai venit n CryptPad !";
     out.readme_p1 = "Bine ai venit în CryptPad, acesta este locul unde îți poți lua notițe, singur sau cu prietenii.";
     out.readme_p2 = "Acest pad o să îți ofere un scurt ghid în cum poți să folosești CryptPad pentru a lua notițe, a le ține organizate și a colabora pe ele.";

customize.dist/translations/messages.zh.js

@@ -467,7 +467,7 @@ define(function () {
     // Initial states
 
     out.initialState = [
-        '<span style="font-size:16px;"><p>',
+        '<p>',
         '這是&nbsp;<strong>CryptPad</strong>, 零知識即時協作編輯平台，當你輸入時一切已即存好。',
         '<br>',
         '分享這個工作檔案的網址連結給友人或是使用、 <span class="fa fa-share-alt" style="border: 1px solid black;color:#000;">&nbsp;分享&nbsp;</span> 按鈕分享<em>唯讀的連結</em>&nbsp;其只能看不能編寫。',
@@ -475,7 +475,7 @@ define(function () {
 
         '<p><em>',
         '來吧, 開始打字輸入吧...',
-        '</em></p></span>',
+        '</em></p>',
         '<p>&nbsp;<br></p>'
     ].join('');
 
@@ -505,7 +505,7 @@ define(function () {
 
     // Readme
 
-    out.driveReadmeTitle = "什麼是 CryptDrive?";
+    out.driveReadmeTitle = "什麼是 CryptPad?";
     out.readme_welcome = "歡迎來到 CryptPad !";
     out.readme_p1 = "歡迎來到 CryptPad, 這裏你可以獨自作個人筆記或是和別人共享協作。";
     out.readme_p2 = "這個工作檔案可以讓你快速地了解如何使用 CryptPad 作筆記，有效地整理管理文件工作檔案。";

customize.dist/what-is-cryptpad.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="cp">
+<!-- If this file is not called customize.dist/src/template.html, it is generated -->
+<head>
+    <title data-localization="main_title">CryptPad: Zero Knowledge, Collaborative Real Time Editing</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
+    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
+</head>
+<body class="html">
+    <noscript>
+        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
+        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
+    </noscript>
+</html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cryptpad",
   "description": "realtime collaborative visual editor with zero knowlege server",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "dependencies": {
     "chainpad-server": "^1.0.1",
     "express": "~4.10.1",
@@ -18,6 +18,6 @@
   "scripts": {
     "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
     "test": "node TestSelenium.js",
-    "template": "cd customize.dist/src && for page in ../index.html ../privacy.html ../terms.html ../about.html ../contact.html ../../www/login/index.html ../../www/register/index.html ../../www/settings/index.html ../../www/user/index.html;do echo $page; cp template.html $page; done;"
+    "template": "cd customize.dist/src && for page in ../index.html ../privacy.html ../terms.html ../about.html ../contact.html ../what-is-cryptpad.html ../../www/login/index.html ../../www/register/index.html ../../www/settings/index.html ../../www/user/index.html;do echo $page; cp template.html $page; done;"
   }
 }

www/code/code.less

@@ -1,5 +1,7 @@
 @import "/customize/src/less/variables.less";
 @import "/customize/src/less/mixins.less";
+@import "/common/markdown.less";
+@import "/common/file-dialog.less";
 
 html, body{
     height: 100%;
@@ -28,6 +30,7 @@ body {
     min-width: 20%;
     max-width: 80%;
     resize: horizontal;
+    font-size: initial;
 }
 .CodeMirror.fullPage {
     //min-width: 100%;
@@ -57,24 +60,33 @@ body {
     box-sizing: border-box;
     font-family: Calibri,Ubuntu,sans-serif;
     word-wrap: break-word;
-    media-tag * {
+    position: relative;
+    media-tag {
+        * {
             max-width:100%;
         }
+        iframe[type="application/pdf"] {
+            max-height:50vh;
+        }
+    }
 }
 
 #preview {
     max-width: 40vw;
-    margin: auto;
+    margin: 1em auto;
 
-    table {
+    .markdown_preformatted-code;
-        border-collapse: collapse;
+    .markdown_gfm-table(black);
-        tr {
+}
-            th {
+
-                border: 3px solid black;
+.cp-splitter {
-                padding: 15px;
+    position: absolute;
-            }
+    height: 100%;
-        }
+    width: 8px;
-    }
+    top: 0;
+    left: 0;
+
+    cursor: col-resize;
 }
 
 @media (max-width: @media-medium-screen) {

www/code/inner.js

@@ -4,6 +4,7 @@ define([
     'cm/lib/codemirror',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/code/code.less',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',

www/code/main.js

@@ -61,6 +61,29 @@ define([
             $iframe.find('.CodeMirror').addClass('fullPage');
             editor = CodeMirror.editor;
 
+            var setIndentation = APP.setIndentation = function (units, useTabs) {
+                if (typeof(units) !== 'number') { return; }
+                editor.setOption('indentUnit', units);
+                editor.setOption('tabSize', units);
+                editor.setOption('indentWithTabs', useTabs);
+            };
+
+            var indentKey = 'cryptpad.indentUnit';
+            var useTabsKey = 'cryptpad.indentWithTabs';
+
+            var proxy = Cryptpad.getProxy();
+
+            var updateIndentSettings = function () {
+                var indentUnit = proxy[indentKey];
+                var useTabs = proxy[useTabsKey];
+                setIndentation(
+                    typeof(indentUnit) === 'number'? indentUnit: 2,
+                    typeof(useTabs) === 'boolean'? useTabs: false);
+            };
+
+            proxy.on('change', [indentKey], updateIndentSettings);
+            proxy.on('change', [useTabsKey], updateIndentSettings);
+
             var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
 
             var isHistoryMode = false;
@@ -147,6 +170,17 @@ define([
                 }
             };
 
+            var mediaTagModes = [
+                'markdown',
+                'html',
+                'htmlembedded',
+                'htmlmixed',
+                'index.html',
+                'php',
+                'velocity',
+                'xml',
+            ];
+
             var onModeChanged = function (mode) {
                 var $codeMirror = $iframe.find('.CodeMirror');
                 window.clearTimeout(APP.previewTo);
@@ -154,6 +188,10 @@ define([
                 APP.previewTo = window.setTimeout(function () {
                     $codeMirror.removeClass('transition');
                 }, 500);
+                if (mediaTagModes.indexOf(mode) !== -1) {
+                    APP.$mediaTagButton.show();
+                } else { APP.$mediaTagButton.hide(); }
+
                 if (mode === "markdown") {
                     APP.$previewButton.show();
                     Cryptpad.getPadAttribute('previewMode', function (e, data) {
@@ -253,6 +291,25 @@ define([
                 var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
                 $rightside.append($forgetPad);
 
+                var fileDialogCfg = {
+                    $body: $iframe.find('body'),
+                    onSelect: function (href) {
+                        var parsed = Cryptpad.parsePadUrl(href);
+                        var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
+                        var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
+                        var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
+                        editor.replaceSelection(mt);
+                    },
+                    data: APP
+                };
+                APP.$mediaTagButton = $('<button>', {
+                    title: Messages.filePickerButton,
+                    'class': 'rightside-button fa fa-picture-o',
+                    style: 'font-size: 17px'
+                }).click(function () {
+                    Cryptpad.createFileDialog(fileDialogCfg);
+                }).appendTo($rightside);
+
                 var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);
                 $previewButton.removeClass('fa-question').addClass('fa-eye');
                 $previewButton.attr('title', Messages.previewButtonTitle);
@@ -353,6 +410,36 @@ define([
                     }
                 });
 
+/*
+                // add the splitter
+                if (!$iframe.has('.cp-splitter').length) {
+                    var $preview = $iframe.find('#previewContainer');
+                    var splitter = $('<div>', {
+                        'class': 'cp-splitter'
+                    }).appendTo($preview);
+
+                    $preview.on('scroll', function() {
+                        splitter.css('top', $preview.scrollTop() + 'px');
+                    });
+
+                    var $target = $iframe.find('.CodeMirror');
+
+                    splitter.on('mousedown', function (e) {
+                        e.preventDefault();
+                        var x = e.pageX;
+                        var w = $target.width();
+
+                        $iframe.on('mouseup mousemove', function handler(evt) {
+                            if (evt.type === 'mouseup') {
+                                $iframe.off('mouseup mousemove', handler);
+                                return;
+                            }
+                            $target.css('width', (w - x + evt.pageX) + 'px');
+                        });
+                    });
+                }
+*/
+
                 Cryptpad.removeLoadingScreen();
                 setEditable(true);
                 initializing = false;

www/common/common-file.js

@@ -56,12 +56,13 @@ define([
             $row.find('.upCancel').html('-');
             var $pv = $row.find('.progressValue');
             var $pb = $row.find('.progressContainer');
+            var $pc = $row.find('.upProgress');
             var $link = $row.find('.upLink');
 
             var updateProgress = function (progressValue) {
                 $pv.text(Math.round(progressValue*100)/100 + '%');
                 $pb.css({
-                    width: (progressValue/100)*188+'px'
+                    width: (progressValue/100)*$pc.width()+'px'
                 });
             };
 
@@ -254,6 +255,7 @@ define([
         var createAreaHandlers = File.createDropArea = function ($area, $hoverArea) {
             var counter = 0;
             if (!$hoverArea) { $hoverArea = $area; }
+            if (!$area) { return; }
             $hoverArea
             .on('dragenter', function (e) {
                 e.preventDefault();

www/common/common-interface.js

@@ -56,7 +56,9 @@ define([
             findOKButton().click();
         };
         var keyHandler = listenForKeys(close, close);
-        Alertify.alert(msg, function (ev) {
+        Alertify
+            .okBtn(Messages.okButton || 'OK')
+            .alert(msg, function (ev) {
                 cb(ev);
                 stopListening(keyHandler);
             });
@@ -299,7 +301,16 @@ define([
     // Tooltips
 
     UI.clearTooltips = function () {
-        $('.tippy-popper').remove();
+        // If an element is removed from the UI while a tooltip is applied on that element, the tooltip will get hung
+        // forever, this is a solution which just searches for tooltips which have no corrisponding element and removes
+        // them.
+        var win;
+        $('.tippy-popper').each(function (i, el) {
+            win = win || $('#pad-iframe')[0].contentWindow;
+            if (win.$('[aria-describedby=' + el.getAttribute('id') + ']').length === 0) {
+                el.remove();
+            }
+        });
     };
 
     UI.addTooltips = function () {
@@ -311,6 +322,7 @@ define([
                 position: 'bottom',
                 distance: 0,
                 performance: true,
+                dynamicTitle: true,
                 delay: [delay, 0]
             });
         };

www/common/common-realtime.js

@@ -0,0 +1,42 @@
+define([
+    '/customize/application_config.js',
+    '/customize/messages.js',
+], function (AppConfig, Messages) {
+    var common = {};
+
+    common.infiniteSpinnerDetected = false;
+    var BAD_STATE_TIMEOUT = typeof(AppConfig.badStateTimeout) === 'number'?
+        AppConfig.badStateTimeout: 30000;
+
+    /*
+        TODO make this not blow up when disconnected or lagging...
+    */
+    common.whenRealtimeSyncs = function (realtime, cb) {
+        realtime.sync();
+
+        window.setTimeout(function () {
+            if (realtime.getAuthDoc() === realtime.getUserDoc()) {
+                return void cb();
+            }
+
+            var to = setTimeout(function () {
+                realtime.abort();
+                // don't launch more than one popup
+                if (common.infiniteSpinnerDetected) { return; }
+
+                // inform the user their session is in a bad state
+                common.confirm(Messages.realtime_unrecoverableError, function (yes) {
+                    if (!yes) { return; }
+                    window.location.reload();
+                });
+                common.infiniteSpinnerDetected = true;
+            }, BAD_STATE_TIMEOUT);
+            realtime.onSettle(function () {
+                clearTimeout(to);
+                cb();
+            });
+        }, 0);
+    };
+
+    return common;
+});

www/common/cryptpad-common.js

@@ -14,13 +14,15 @@ define([
     '/common/common-codemirror.js',
     '/common/common-file.js',
     '/file/file-crypto.js',
+    '/common/common-realtime.js',
 
     '/common/clipboard.js',
     '/common/pinpad.js',
     '/customize/application_config.js',
     '/common/media-tag.js',
 ], function ($, Config, Messages, Store, Util, Hash, UI, History, UserList, Title, Metadata,
-            Messaging, CodeMirror, Files, FileCrypto, Clipboard, Pinpad, AppConfig, MediaTag) {
+            Messaging, CodeMirror, Files, FileCrypto, Realtime, Clipboard,
+            Pinpad, AppConfig, MediaTag) {
 
     // Configure MediaTags to use our local viewer
     if (MediaTag && MediaTag.PdfPlugin) {
@@ -122,12 +124,15 @@ define([
     common.initMessaging = Messaging.init;
     common.addDirectMessageHandler = Messaging.addDirectMessageHandler;
     common.inviteFromUserlist = Messaging.inviteFromUserlist;
-    common.createOwnedChannel = Messaging.createOwnedChannel;
     common.getFriendList = Messaging.getFriendList;
     common.getFriendChannelsList = Messaging.getFriendChannelsList;
-    common.getFriendListUI = Messaging.getFriendListUI;
     common.createData = Messaging.createData;
     common.getPendingInvites = Messaging.getPending;
+    common.getLatestMessages = Messaging.getLatestMessages;
+    common.initMessagingUI = Messaging.UI.init;
+
+    // Realtime
+    var whenRealtimeSyncs = common.whenRealtimeSyncs = Realtime.whenRealtimeSyncs;
 
     // Userlist
     common.createUserList = UserList.create;
@@ -244,36 +249,6 @@ define([
         return;
     };
 
-    common.infiniteSpinnerDetected = false;
-    var BAD_STATE_TIMEOUT = typeof(AppConfig.badStateTimeout) === 'number'?
-        AppConfig.badStateTimeout: 30000;
-    var whenRealtimeSyncs = common.whenRealtimeSyncs = function (realtime, cb) {
-        realtime.sync();
-
-        window.setTimeout(function () {
-            if (realtime.getAuthDoc() === realtime.getUserDoc()) {
-                return void cb();
-            }
-
-            var to = setTimeout(function () {
-                realtime.abort();
-                // don't launch more than one popup
-                if (common.infiniteSpinnerDetected) { return; }
-
-                // inform the user their session is in a bad state
-                common.confirm(Messages.realtime_unrecoverableError, function (yes) {
-                    if (!yes) { return; }
-                    window.location.reload();
-                });
-                common.infiniteSpinnerDetected = true;
-            }, BAD_STATE_TIMEOUT);
-            realtime.onSettle(function () {
-                clearTimeout(to);
-                cb();
-            });
-        }, 0);
-    };
-
     common.getWebsocketURL = function () {
         if (!Config.websocketPath) { return Config.websocketURL; }
         var path = Config.websocketPath;
@@ -1243,6 +1218,13 @@ define([
                     style: 'font:'+size+' FontAwesome'
                 });
                 break;
+            case 'savetodrive':
+                button = $('<button>', {
+                    'class': 'fa fa-cloud-upload',
+                    title: Messages.canvas_saveToDrive,
+                })
+                .click(prepareFeedback(type));
+                break;
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",
@@ -1389,23 +1371,42 @@ define([
         }
     };
 
+    // This is duplicated in drive/main.js, it should be unified
+    var getFileIcon = function (data) {
+        var $icon = common.getIcon();
+
+        if (!data) { return $icon; }
+
+        var href = data.href;
+        if (!href) { return $icon; }
+
+        if (href.indexOf('/pad/') !== -1) { $icon = common.getIcon('pad'); }
+        else if (href.indexOf('/code/') !== -1) { $icon = common.getIcon('code'); }
+        else if (href.indexOf('/slide/') !== -1) { $icon = common.getIcon('slide'); }
+        else if (href.indexOf('/poll/') !== -1) { $icon = common.getIcon('poll'); }
+        else if (href.indexOf('/whiteboard/') !== -1) { $icon = common.getIcon('whiteboard'); }
+        else if (href.indexOf('/file/') !== -1) { $icon = common.getIcon('file'); }
+
+        return $icon;
+    };
 
     common.createFileDialog = function (cfg) {
         var $body = cfg.$body || $('body');
-        var $block = $body.find('#fileDialog');
+        var $blockContainer = $body.find('#fileDialog');
-        if (!$block.length) {
+        if (!$blockContainer.length) {
-            $block = $('<div>', {id: "fileDialog"}).appendTo($body);
+            $blockContainer = $('<div>', {id: "fileDialog"}).appendTo($body);
         }
-        $block.html('');
+        $blockContainer.html('');
+        var $block = $('<div>', {'class': 'cp-modal'}).appendTo($blockContainer);
         $('<span>', {
             'class': 'close fa fa-times',
             'title': Messages.filePicker_close
         }).click(function () {
-            $block.hide();
+            $blockContainer.hide();
         }).appendTo($block);
         var $description = $('<p>').text(Messages.filePicker_description);
         $block.append($description);
-        var $filter = $('<p>').appendTo($block);
+        var $filter = $('<p>', {'class': 'cp-form'}).appendTo($block);
         var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
         var updateContainer = function () {
             $container.html('');
@@ -1418,11 +1419,15 @@ define([
                 if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
                     return;
                 }
-                var $span = $('<span>', {'class': 'element'}).appendTo($container);
+                var $span = $('<span>', {
-                var $inner = $('<span>').text(name);
+                    'class': 'element',
-                $span.append($inner).click(function () {
+                    'title': name,
+                }).appendTo($container);
+                $span.append(getFileIcon(data));
+                $span.append(name);
+                $span.click(function () {
                     if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }
-                    $block.hide();
+                    $blockContainer.hide();
                 });
             });
         };
@@ -1438,13 +1443,13 @@ define([
         //$filter.append(' '+Messages.or+' ');
         var data = {FM: cfg.data.FM};
         $filter.append(common.createButton('upload', false, data, function () {
-            $block.hide();
+            $blockContainer.hide();
         }));
         updateContainer();
         $body.keydown(function (e) {
-            if (e.which === 27) { $block.hide(); }
+            if (e.which === 27) { $blockContainer.hide(); }
         });
-        $block.show();
+        $blockContainer.show();
     };
 
 
@@ -1804,7 +1809,7 @@ define([
                            (parseInt(verArr[0]) === parseInt(storedArr[0]) &&
                             parseInt(verArr[1]) > parseInt(storedArr[1]));
         if (!shouldUpdate) { return; }
-        common.alert(Messages._getKey('newVersion', [verArr.join('.')]), null, true);
+        //common.alert(Messages._getKey('newVersion', [verArr.join('.')]), null, true);
         localStorage[CRYPTPAD_VERSION] = ver;
     };
 

www/common/curve.js

@@ -35,6 +35,7 @@ define([
         var nonce = decodeBase64(unpacked[0]);
         var box = decodeBase64(unpacked[1]);
         var message = Nacl.box.open.after(box, nonce, secret);
+        if (message === false) { return null; }
         return encodeUTF8(message);
     };
 

www/common/diffMarked.js

@@ -60,14 +60,18 @@ define([
         return out;
     };
 
+    renderer.paragraph = function (p) {
+        return /<media\-tag[\s\S]*>/i.test(p)? p + '\n': '<p>' + p + '</p>\n';
+    };
+
     var MutationObserver = window.MutationObserver;
     var forbiddenTags = [
         'SCRIPT',
         'IFRAME',
         'OBJECT',
         'APPLET',
-        //'VIDEO',
+        //'VIDEO', // privacy implications of videos are the same as images
-        'AUDIO',
+        //'AUDIO', // same with audio
     ];
     var unsafeTag = function (info) {
         /*if (info.node && $(info.node).parents('media-tag').length) {
@@ -75,7 +79,7 @@ define([
             return true;
         }*/
         if (['addAttribute', 'modifyAttribute'].indexOf(info.diff.action) !== -1) {
-            if (/^on/.test(info.diff.name)) {
+            if (/^on/i.test(info.diff.name)) {
                 console.log("Rejecting forbidden element attribute with name", info.diff.name);
                 return true;
             }
@@ -97,10 +101,25 @@ define([
         return Array.prototype.slice.call(coll);
     };
 
+    var removeNode = function (node) {
+        if (!(node && node.parentElement)) { return; }
+        var parent = node.parentElement;
+        if (!parent) { return; }
+        console.log('removing %s tag', node.nodeName);
+        parent.removeChild(node);
+    };
+
+    var removeForbiddenTags = function (root) {
+        if (!root) { return; }
+        if (forbiddenTags.indexOf(root.nodeName) !== -1) { removeNode(root); }
+        slice(root.children).forEach(removeForbiddenTags);
+    };
+
     /*  remove listeners from the DOM */
     var removeListeners = function (root) {
         slice(root.attributes).map(function (attr) {
-            if (/^on/.test(attr.name)) {
+            if (/^on/i.test(attr.name)) {
+                console.log('removing attribute', attr.name, root.attributes[attr.name]);
                 root.attributes.removeNamedItem(attr.name);
             }
         });
@@ -110,6 +129,7 @@ define([
 
     var domFromHTML = function (html) {
         var Dom = new DOMParser().parseFromString(html, "text/html");
+        removeForbiddenTags(Dom.body);
         removeListeners(Dom.body);
         return Dom;
     };
@@ -144,7 +164,8 @@ define([
         var id = $content.attr('id');
         if (!id) { throw new Error("The element must have a valid id"); }
         var pattern = /(<media-tag src="([^"]*)" data-crypto-key="([^"]*)">)<\/media-tag>/g;
-        var newHtmlFixed = newHtml.replace(pattern, function (all, tag, src) {
+
+        var unsafe_newHtmlFixed = newHtml.replace(pattern, function (all, tag, src) {
             var mt = tag;
             if (mediaMap[src]) {
                 mediaMap[src].forEach(function (n) {
@@ -153,7 +174,10 @@ define([
             }
             return mt + '</media-tag>';
         });
-        var $div = $('<div>', {id: id}).append(newHtmlFixed);
+
+        var safe_newHtmlFixed = domFromHTML(unsafe_newHtmlFixed).body.outerHTML;
+        var $div = $('<div>', {id: id}).append(safe_newHtmlFixed);
+
         var Dom = domFromHTML($('<div>').append($div).html());
         var oldDom = domFromHTML($content[0].outerHTML);
         var patch = makeDiff(oldDom, Dom, id);

www/common/file-dialog.less

@@ -0,0 +1,103 @@
+@import (once) '../customize/src/less2/include/colortheme.less';
+
+#fileDialog {
+    display: none;
+
+    z-index: 100000;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: @colortheme_modal-dim;
+
+    .cp-modal {
+        background-color: @colortheme_modal-bg;
+        color: @colortheme_modal-fg;
+        box-shadow: @colortheme_modal-shadow;
+
+        padding: @colortheme_modal-padding;
+
+        position: absolute;
+        top: 15vh; bottom: 15vh;
+        left: 10vw; right: 10vw;
+
+        overflow: auto;
+
+        font-family: @colortheme_font;
+        text-align: center;
+
+        & > p {
+            margin-bottom: 1em;
+        }
+
+        .cp-form {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+        }
+
+        input {
+            background-color: @colortheme_modal-input;
+            color: @colortheme_modal-fg;
+            border: 0;
+            padding: 8px 12px;
+            margin: 1em;
+            width: 300px;
+        }
+
+        .close {
+            text-shadow: none;
+            color: inherit;
+
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin: @colortheme_modal-padding;
+            cursor: pointer;
+        }
+
+        .fileContainer {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            overflow-y: auto;
+        }
+
+        .element {
+            @darker: darken(@colortheme_modal-fg, 30%);
+
+            width: 200px;
+            min-width: 200px;
+            height: 1em;
+            padding: 0.5em;
+            margin: 5px;
+            box-sizing: content-box;
+
+            text-align: left;
+            line-height: 1em;
+            cursor: pointer;
+
+            background-color: #111;
+            color: @darker;
+
+            transition: all 0.1s;
+
+            &:hover {
+                color: @colortheme_modal-fg;
+            }
+
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            align-items: center;
+
+            .fa {
+                cursor: pointer;
+                margin-right: 0.5em;
+            }
+        }
+    }
+}

www/common/markdown.less

@@ -0,0 +1,27 @@
+.markdown_preformatted-code (@color: #333) {
+    pre > code {
+        display: block;
+        position: relative;
+        border: 1px solid @color;
+        width: 90%;
+        margin: auto;
+        padding-left: .25vw;
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+}
+
+.markdown_gfm-table (@color: black) {
+    table {
+        border-collapse: collapse;
+        tr {
+            th {
+                border: 3px solid @color;
+                padding: 15px;
+            }
+        }
+    }
+}
+
+// todo ul, ol
+

www/common/rpc.js

@@ -63,7 +63,7 @@ types of messages:
             // RPC responses are arrays. this message isn't meant for us.
             return;
         }
-        if (/FULL_HISTORY/.test(parsed[0])) { return; }
+        if (/(FULL_HISTORY|HISTORY_RANGE)/.test(parsed[0])) { return; }
 
         var response = parsed.slice(2);
 

www/common/toolbar2.js

@@ -308,7 +308,7 @@ define([
 
         toolbar.userlistContent = $content;
 
-        var $container = $('<span>', {id: 'userButtons'});
+        var $container = $('<span>', {id: 'userButtons', title: Messages.userListButton});
 
         var $button = $('<button>').appendTo($container);
         $('<span>',{'class': 'buttonTitle'}).appendTo($button);
@@ -446,6 +446,7 @@ define([
             //$shareBlock.find('button').attr('id', 'shareButton');
             $shareBlock.find('.dropdown-bar-content').addClass(SHARE_CLS).addClass(EDITSHARE_CLS).addClass(VIEWSHARE_CLS);
             $shareBlock.addClass('shareButton');
+            $shareBlock.find('button').attr('title', Messages.shareButton);
 
             if (hashes.editHash) {
                 $shareBlock.find('a.editShare').click(function () {
@@ -623,18 +624,25 @@ define([
         }).appendTo(toolbar.$top);
 
         // We need to override the "a" tag action here because it is inside the iframe!
+        var inDrive = /^\/drive/.test(window.location.pathname);
+
+        var href = inDrive ? '/index.html' : '/drive/';
+        var buttonTitle = inDrive ? Messages.header_homeTitle : Messages.header_logoTitle;
+
         var $aTag = $('<a>', {
-            href: "/drive/",
+            href: href,
-            title: Messages.header_logoTitle,
+            title: buttonTitle,
-            'class': "cryptpad-logo fa fa-hdd-o"
+            'class': "cryptpad-logo"
-        });
+        }).append($('<img>', {
+            src: '/customize/images/logo_white.png'
+        }));
         var onClick = function (e) {
             e.preventDefault();
             if (e.ctrlKey) {
-                window.open('/drive/');
+                window.open(href);
                 return;
             }
-            window.location = "/drive/";
+            window.location = href;
         };
 
         var onContext = function (e) { e.stopPropagation(); };
@@ -772,6 +780,7 @@ define([
             userMenuCfg.displayChangeName = 1;
         }
         Cryptpad.createUserAdminMenu(userMenuCfg);
+        $userAdmin.find('button').attr('title', Messages.userAccountButton);
 
         var $userButton = toolbar.$userNameButton = $userAdmin.find('a.' + USERBUTTON_CLS);
         $userButton.click(function (e) {

www/contacts/main.js

@@ -39,15 +39,20 @@ define([
         toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
 
         Cryptpad.getProxy().on('disconnect', function () {
-            // TODO readonly
             Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+            Cryptpad.enableMessaging(false);
         });
-        Cryptpad.getProxy().on('reconnect', function () {
+        Cryptpad.getProxy().on('reconnect', function (uid) {
-            // TODO cancel readonly
+            console.error('reconnecting: ', uid);
             Cryptpad.findOKButton().click();
+
+            APP.messenger.cleanFriendChannels();
+            APP.messenger.openFriendChannels();
+            APP.messenger.setEditable(true);
         });
 
-        Cryptpad.initMessaging(Cryptpad, $list, $messages);
+        var ui = APP.ui = Cryptpad.initMessagingUI(Cryptpad, $list, $messages);
+        APP.messenger = Cryptpad.initMessaging(Cryptpad, ui);
 
         var $infoBlock = $('<div>', {'class': 'info'}).appendTo($messages);
         $('<h2>').text(Messages.contacts_info1).appendTo($infoBlock);

www/contacts/main.less

@@ -112,11 +112,32 @@ body {
     }
 }
 
+.placeholder (@color: #bbb) {
+    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+        color: @color;
+    }
+    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: @color;
+        opacity:  1;
+    }
+    &::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: @color;
+        opacity:  1;
+    }
+    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: @color;
+    }
+    &::-ms-input-placeholder { /* Microsoft Edge */
+        color: @color;
+    }
+}
+
 #messaging {
     flex: 1;
     height: 100%;
     background-color: lighten(@bg-color, 20%);
     min-width: 0;
+
     .info {
         padding: 20px;
     }
@@ -128,11 +149,7 @@ body {
         align-items: center;
         height: 50px;
 
-        .avatar,
+        .hover () {
-        .right-col {
-             flex:1 1 auto;
-        }
-        .remove-history {
             height: 100%;
             line-height: 30px;
             padding: 10px;
@@ -140,9 +157,21 @@ body {
                 background-color: rgba(50,50,50,0.3);
             }
         }
+
+        .avatar,
+        .right-col {
+             flex:1 1 auto;
+        }
+        .remove-history {
+            .hover;
+        }
         .avatar {
             margin: 10px;
         }
+        .more-history {
+            display: none;
+            //.hover;
+        }
     }
     .chat {
         height: 100%;
@@ -193,6 +222,12 @@ body {
             background-color: darken(@bg-color, 10%);
             color: @color;
             resize: none;
+            line-height: 50px;
+            overflow-y: auto;
+            .placeholder(#bbb);
+            &[disabled=true] {
+                .placeholder(#999);
+            }
             &:placeholder-shown { line-height: 50px; }
         }
         button {

www/drive/file.less

@@ -11,7 +11,7 @@
 @content-bg: #fff;
 @content-bg-ro: darken(@content-bg, 10%);
 @content-fg: @tree-fg;
-@info-box-bg: #ddddff;
+@info-box-bg: #d2e1f2;
 @info-box-border: #bbb;
 @table-header-fg: #555;
 @table-header-bg: #e8e8e8;
@@ -380,19 +380,16 @@ span {
         margin-top: 10px;
     }
     .info-box {
-        line-height: 40px;
+        line-height: 2em;
-        padding-left: 10px;
+        padding: 0.25em 0.75em;
-        margin: 10px auto;
+        margin: 1em;
         background: @info-box-bg;
-        border: 1px solid @info-box-border;
-        border-radius: 5px;
         span {
             cursor: pointer;
-            margin-left: 10px;
             float: right;
+            margin-top: 0.5em;
         }
         &.noclose {
-            padding-right: 10px;
         }
     }
     li {

www/drive/main.js

@@ -1146,6 +1146,7 @@ define([
             $span.append($name).append($subfolders).append($files);
         };
 
+        // This is duplicated in cryptpad-common, it should be unified
         var getFileIcon = function (id) {
             var $icon = Cryptpad.getIcon();
 
@@ -1373,6 +1374,8 @@ define([
             } else {
                 $gridButton.addClass('active');
             }
+            $listButton.attr('title', Messages.fm_viewListButton);
+            $gridButton.attr('title', Messages.fm_viewGridButton);
             $container.append($listButton).append($gridButton);
         };
 

www/file/file.less

@@ -128,9 +128,3 @@ media-tag {
     z-index: 10000;
     display: block;
 }
-
-body #uploadStatusContainer {
-    background-color: rgba(255, 255, 255, 0.9);
-    color: black;
-    opacity: 0.9;
-}

www/file/main.js

@@ -126,9 +126,14 @@ define([
                         }));
 
                         // make pdfs big
+                        var toolbarHeight = $iframe.find('#toolbar').height();
                         $iframe.find('media-tag iframe').css({
-                            'height': 'calc(100vh - 64px)',
+                            'height': 'calc(100vh - ' + toolbarHeight + 'px)',
-                            width: 'calc(100vw - 15px)',
+                            'width': '100vw',
+                            'position': 'absolute',
+                            'bottom': 0,
+                            'left': 0,
+                            'border': 0
                         });
                     })
                     .on('decryptionError', function (e) {

www/pad/ckeditor-inner.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en"><head><title>Rich Text Editor, editor1</title><style data-cke-temp="1">html{cursor:text;*cursor:auto}
+img,input,textarea{cursor:default}</style><link type="text/css" rel="stylesheet" href="/customize/ckeditor-contents.css"><link type="text/css" rel="stylesheet" href="/bower_components/ckeditor/plugins/tableselection/styles/tableselection.css"></head><body><p><br></p></body></html>

www/pad/inner.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
     <script async data-bootload="/pad/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
     <script src="/bower_components/ckeditor/ckeditor.js"></script>
+    <script src="/pad/wysiwygarea-plugin.js"></script>
     <style>
     html, body {
         margin: 0px;

www/pad/main.js

@@ -43,7 +43,7 @@ define([
 
     var removeListeners = function (root) {
         slice(root.attributes).map(function (attr) {
-            if (/^on/.test(attr.name)) {
+            if (/^on/i.test(attr.name)) {
                 root.attributes.removeNamedItem(attr.name);
             }
         });
@@ -299,6 +299,13 @@ define([
 
             var DD = new DiffDom(diffOptions);
 
+            var openLink = function (e) {
+                var el = e.currentTarget;
+                if (!el || el.nodeName !== 'A') { return; }
+                var href = el.getAttribute('href');
+                if (href) { window.open(href, '_blank'); }
+            };
+
             // apply patches, and try not to lose the cursor in the process!
             var applyHjson = function (shjson) {
                 var userDocStateDom = hjsonToDom(JSON.parse(shjson));
@@ -306,8 +313,17 @@ define([
                 if (!readOnly && !initializing) {
                     userDocStateDom.setAttribute("contenteditable", "true"); // lol wtf
                 }
+                $(userDocStateDom).find('script, applet, object, iframe').remove();
+                $(userDocStateDom).find('a').filter(function (i, x) {
+                    return ! /^(https|http|ftp):\/\/[^\s\n]*$/.test(x.getAttribute('href'));
+                }).remove();
                 var patch = (DD).diff(inner, userDocStateDom);
                 (DD).apply(inner, patch);
+                if (readOnly) {
+                    var $links = $(inner).find('a');
+                    // off so that we don't end up with multiple identical handlers
+                    $links.off('click', openLink).on('click', openLink);
+                }
             };
 
             var stringifyDOM = module.stringifyDOM = function (dom) {
@@ -508,14 +524,17 @@ define([
                     $collapse.removeClass('fa-question');
                     var updateIcon = function () {
                         $collapse.removeClass('fa-caret-down').removeClass('fa-caret-up');
+                        $collapse.attr('title', '');
                         var isCollapsed = !$bar.find('.cke_toolbox_main').is(':visible');
                         if (isCollapsed) {
                             if (!initializing) { Cryptpad.feedback('HIDETOOLBAR_PAD'); }
                             $collapse.addClass('fa-caret-down');
+                            $collapse.attr('title', Messages.pad_showToolbar);
                         }
                         else {
                             if (!initializing) { Cryptpad.feedback('SHOWTOOLBAR_PAD'); }
                             $collapse.addClass('fa-caret-up');
+                            $collapse.attr('title', Messages.pad_hideToolbar);
                         }
                     };
                     updateIcon();
@@ -610,8 +629,10 @@ define([
                         if (stringify(hjson2) !== stringify(hjson)) {
                             console.log('err');
                             console.error("shjson2 !== shjson");
-                            Cryptpad.errorLoadingScreen(Messages.wrongApp);
+                            // TODO(cjd): This is removed because the XSS filter in applyHjson()
-                            throw new Error();
+                            //            is applied on incoming content so it causes this to fail.
+                            //Cryptpad.errorLoadingScreen(Messages.wrongApp);
+                            //throw new Error();
                         }
                     }
                 } else {

www/pad/wysiwygarea-plugin.js

@@ -0,0 +1,728 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/**
+ * @fileOverview The WYSIWYG Area plugin. It registers the "wysiwyg" editing
+ *		mode, which handles the main editing area space.
+ */
+
+( function() {
+    var framedWysiwyg;
+    var iframe;
+
+	CKEDITOR.plugins.registered.wysiwygarea.init = function( editor ) {
+        if ( editor.config.fullPage ) {
+            editor.addFeature( {
+                allowedContent: 'html head title; style [media,type]; body (*)[id]; meta link [*]',
+                requiredContent: 'body'
+            } );
+        }
+
+        editor.addMode( 'wysiwyg', function( callback ) {
+            var src = 'document.open();' +
+                // In IE, the document domain must be set any time we call document.open().
+                ( CKEDITOR.env.ie ? '(' + CKEDITOR.tools.fixDomain + ')();' : '' ) +
+                'document.close();';
+
+            // With IE, the custom domain has to be taken care at first,
+            // for other browers, the 'src' attribute should be left empty to
+            // trigger iframe's 'load' event.
+            // Microsoft Edge throws "Permission Denied" if treated like an IE (http://dev.ckeditor.com/ticket/13441).
+            if ( CKEDITOR.env.air ) {
+                src = 'javascript:void(0)'; // jshint ignore:line
+            } else if ( CKEDITOR.env.ie && !CKEDITOR.env.edge ) {
+                src = 'javascript:void(function(){' + encodeURIComponent( src ) + '}())'; // jshint ignore:line
+            } else {
+                src = '';
+            }
+            
+            // CryptPad
+            src = '/pad/ckeditor-inner.html';
+
+            iframe = CKEDITOR.dom.element.createFromHtml( '<iframe src="' + src + '" frameBorder="0"></iframe>' );
+            iframe.setStyles( { width: '100%', height: '100%' } );
+            iframe.addClass( 'cke_wysiwyg_frame' ).addClass( 'cke_reset' );
+            
+            // CryptPad
+            // this is impossible because ckeditor uses some (non-inline) script inside of the iframe...
+            //iframe.setAttribute('sandbox', 'allow-same-origin');
+
+            var contentSpace = editor.ui.space( 'contents' );
+            contentSpace.append( iframe );
+
+
+            // Asynchronous iframe loading is only required in IE>8 and Gecko (other reasons probably).
+            // Do not use it on WebKit as it'll break the browser-back navigation.
+            var useOnloadEvent = ( CKEDITOR.env.ie && !CKEDITOR.env.edge ) || CKEDITOR.env.gecko;
+            if ( useOnloadEvent )
+                iframe.on( 'load', onLoad );
+
+            var frameLabel = editor.title,
+                helpLabel = editor.fire( 'ariaEditorHelpLabel', {} ).label;
+
+            if ( frameLabel ) {
+                if ( CKEDITOR.env.ie && helpLabel )
+                    frameLabel += ', ' + helpLabel;
+
+                iframe.setAttribute( 'title', frameLabel );
+            }
+
+            if ( helpLabel ) {
+                var labelId = CKEDITOR.tools.getNextId(),
+                    desc = CKEDITOR.dom.element.createFromHtml( '<span id="' + labelId + '" class="cke_voice_label">' + helpLabel + '</span>' );
+
+                contentSpace.append( desc, 1 );
+                iframe.setAttribute( 'aria-describedby', labelId );
+            }
+
+            // Remove the ARIA description.
+            editor.on( 'beforeModeUnload', function( evt ) {
+                evt.removeListener();
+                if ( desc )
+                    desc.remove();
+            } );
+
+            iframe.setAttributes( {
+                tabIndex: editor.tabIndex,
+                allowTransparency: 'true'
+            } );
+
+            // Execute onLoad manually for all non IE||Gecko browsers.
+            !useOnloadEvent && onLoad();
+
+            editor.fire( 'ariaWidget', iframe );
+
+            function onLoad( evt ) {
+                evt && evt.removeListener();
+                var fw = new framedWysiwyg( editor, iframe.$.contentWindow.document.body );
+                editor.editable( fw );
+                editor.setData( editor.getData( 1 ), callback );
+            }
+        } );
+    };
+
+	/**
+	 * Adds the path to a stylesheet file to the exisiting {@link CKEDITOR.config#contentsCss} value.
+	 *
+	 * **Note:** This method is available only with the `wysiwygarea` plugin and only affects
+	 * classic editors based on it (so it does not affect inline editors).
+	 *
+	 *		editor.addContentsCss( 'assets/contents.css' );
+	 *
+	 * @since 4.4
+	 * @param {String} cssPath The path to the stylesheet file which should be added.
+	 * @member CKEDITOR.editor
+	 */
+	CKEDITOR.editor.prototype.addContentsCss = function( cssPath ) {
+		var cfg = this.config,
+			curContentsCss = cfg.contentsCss;
+
+		// Convert current value into array.
+		if ( !CKEDITOR.tools.isArray( curContentsCss ) )
+			cfg.contentsCss = curContentsCss ? [ curContentsCss ] : [];
+
+		cfg.contentsCss.push( cssPath );
+	};
+
+	function onDomReady( win ) {
+		var editor = this.editor,
+			doc = win.document,
+			body = doc.body;
+
+		// Remove helper scripts from the DOM.
+		var script = doc.getElementById( 'cke_actscrpt' );
+		script && script.parentNode.removeChild( script );
+		script = doc.getElementById( 'cke_shimscrpt' );
+		script && script.parentNode.removeChild( script );
+		script = doc.getElementById( 'cke_basetagscrpt' );
+		script && script.parentNode.removeChild( script );
+
+		body.contentEditable = true;
+
+		if ( CKEDITOR.env.ie ) {
+			// Don't display the focus border.
+			body.hideFocus = true;
+
+			// Disable and re-enable the body to avoid IE from
+			// taking the editing focus at startup. (http://dev.ckeditor.com/ticket/141 / http://dev.ckeditor.com/ticket/523)
+			body.disabled = true;
+			body.removeAttribute( 'disabled' );
+		}
+
+		delete this._.isLoadingData;
+
+		// Play the magic to alter element reference to the reloaded one.
+		this.$ = body;
+
+		doc = new CKEDITOR.dom.document( doc );
+
+		this.setup();
+		this.fixInitialSelection();
+
+		var editable = this;
+
+		// Without it IE8 has problem with removing selection in nested editable. (http://dev.ckeditor.com/ticket/13785)
+		if ( CKEDITOR.env.ie && !CKEDITOR.env.edge ) {
+			doc.getDocumentElement().addClass( doc.$.compatMode );
+		}
+
+		// Prevent IE/Edge from leaving a new paragraph/div after deleting all contents in body. (http://dev.ckeditor.com/ticket/6966, http://dev.ckeditor.com/ticket/13142)
+		if ( CKEDITOR.env.ie && !CKEDITOR.env.edge && editor.enterMode != CKEDITOR.ENTER_P ) {
+			removeSuperfluousElement( 'p' );
+		} else if ( CKEDITOR.env.edge && editor.enterMode != CKEDITOR.ENTER_DIV ) {
+			removeSuperfluousElement( 'div' );
+		}
+
+		// Fix problem with cursor not appearing in Webkit and IE11+ when clicking below the body (http://dev.ckeditor.com/ticket/10945, http://dev.ckeditor.com/ticket/10906).
+		// Fix for older IEs (8-10 and QM) is placed inside selection.js.
+		if ( CKEDITOR.env.webkit || ( CKEDITOR.env.ie && CKEDITOR.env.version > 10 ) ) {
+			doc.getDocumentElement().on( 'mousedown', function( evt ) {
+				if ( evt.data.getTarget().is( 'html' ) ) {
+					// IE needs this timeout. Webkit does not, but it does not cause problems too.
+					setTimeout( function() {
+						editor.editable().focus();
+					} );
+				}
+			} );
+		}
+
+		// Config props: disableObjectResizing and disableNativeTableHandles handler.
+		objectResizeDisabler( editor );
+
+		// Enable dragging of position:absolute elements in IE.
+		try {
+			editor.document.$.execCommand( '2D-position', false, true );
+		} catch ( e ) {}
+
+		if ( CKEDITOR.env.gecko || CKEDITOR.env.ie && editor.document.$.compatMode == 'CSS1Compat' ) {
+			this.attachListener( this, 'keydown', function( evt ) {
+				var keyCode = evt.data.getKeystroke();
+
+				// PageUp OR PageDown
+				if ( keyCode == 33 || keyCode == 34 ) {
+					// PageUp/PageDown scrolling is broken in document
+					// with standard doctype, manually fix it. (http://dev.ckeditor.com/ticket/4736)
+					if ( CKEDITOR.env.ie ) {
+						setTimeout( function() {
+							editor.getSelection().scrollIntoView();
+						}, 0 );
+					}
+					// Page up/down cause editor selection to leak
+					// outside of editable thus we try to intercept
+					// the behavior, while it affects only happen
+					// when editor contents are not overflowed. (http://dev.ckeditor.com/ticket/7955)
+					else if ( editor.window.$.innerHeight > this.$.offsetHeight ) {
+						var range = editor.createRange();
+						range[ keyCode == 33 ? 'moveToElementEditStart' : 'moveToElementEditEnd' ]( this );
+						range.select();
+						evt.data.preventDefault();
+					}
+				}
+			} );
+		}
+
+		if ( CKEDITOR.env.ie ) {
+			// [IE] Iframe will still keep the selection when blurred, if
+			// focus is moved onto a non-editing host, e.g. link or button, but
+			// it becomes a problem for the object type selection, since the resizer
+			// handler attached on it will mark other part of the UI, especially
+			// for the dialog. (http://dev.ckeditor.com/ticket/8157)
+			// [IE<8 & Opera] Even worse For old IEs, the cursor will not vanish even if
+			// the selection has been moved to another text input in some cases. (http://dev.ckeditor.com/ticket/4716)
+			//
+			// Now the range restore is disabled, so we simply force IE to clean
+			// up the selection before blur.
+			this.attachListener( doc, 'blur', function() {
+				// Error proof when the editor is not visible. (http://dev.ckeditor.com/ticket/6375)
+				try {
+					doc.$.selection.empty();
+				} catch ( er ) {}
+			} );
+		}
+
+		if ( CKEDITOR.env.iOS ) {
+			// [iOS] If touch is bound to any parent of the iframe blur happens on any touch
+			// event and body becomes the focused element (http://dev.ckeditor.com/ticket/10714).
+			this.attachListener( doc, 'touchend', function() {
+				win.focus();
+			} );
+		}
+
+		var title = editor.document.getElementsByTag( 'title' ).getItem( 0 );
+		// document.title is malfunctioning on Chrome, so get value from the element (http://dev.ckeditor.com/ticket/12402).
+		title.data( 'cke-title', title.getText() );
+
+		// [IE] JAWS will not recognize the aria label we used on the iframe
+		// unless the frame window title string is used as the voice label,
+		// backup the original one and restore it on output.
+		if ( CKEDITOR.env.ie )
+			editor.document.$.title = this._.docTitle;
+
+		CKEDITOR.tools.setTimeout( function() {
+			// Editable is ready after first setData.
+			if ( this.status == 'unloaded' )
+				this.status = 'ready';
+
+			editor.fire( 'contentDom' );
+
+			if ( this._.isPendingFocus ) {
+				editor.focus();
+				this._.isPendingFocus = false;
+			}
+
+			setTimeout( function() {
+				editor.fire( 'dataReady' );
+			}, 0 );
+		}, 0, this );
+
+		function removeSuperfluousElement( tagName ) {
+			var lockRetain = false;
+
+			// Superfluous elements appear after keydown
+			// and before keyup, so the procedure is as follows:
+			// 1. On first keydown mark all elements with
+			// a specified tag name as non-superfluous.
+			editable.attachListener( editable, 'keydown', function() {
+				var body = doc.getBody(),
+					retained = body.getElementsByTag( tagName );
+
+				if ( !lockRetain ) {
+					for ( var i = 0; i < retained.count(); i++ ) {
+						retained.getItem( i ).setCustomData( 'retain', true );
+					}
+					lockRetain = true;
+				}
+			}, null, null, 1 );
+
+			// 2. On keyup remove all elements that were not marked
+			// as non-superfluous (which means they must have had appeared in the meantime).
+			// Also we should preserve all temporary elements inserted by editor – otherwise we'd likely
+			// leak fake selection's content into editable due to removing hidden selection container (http://dev.ckeditor.com/ticket/14831).
+			editable.attachListener( editable, 'keyup', function() {
+				var elements = doc.getElementsByTag( tagName );
+				if ( lockRetain ) {
+					if ( elements.count() == 1 && !elements.getItem( 0 ).getCustomData( 'retain' ) &&
+						!elements.getItem( 0 ).hasAttribute( 'data-cke-temp' ) ) {
+						elements.getItem( 0 ).remove( 1 );
+					}
+					lockRetain = false;
+				}
+			} );
+		}
+	}
+
+	framedWysiwyg = CKEDITOR.tools.createClass( {
+		$: function() {
+			this.base.apply( this, arguments );
+
+			this._.frameLoadedHandler = CKEDITOR.tools.addFunction( function( win ) {
+				// Avoid opening design mode in a frame window thread,
+				// which will cause host page scrolling.(http://dev.ckeditor.com/ticket/4397)
+				CKEDITOR.tools.setTimeout( onDomReady, 0, this, win );
+			}, this );
+
+			this._.docTitle = this.getWindow().getFrame().getAttribute( 'title' );
+		},
+
+		base: CKEDITOR.editable,
+
+		proto: {
+			setData: function( data, isSnapshot ) {
+                var editor = this.editor;
+
+				if ( isSnapshot ) {
+					this.setHtml( data );
+					this.fixInitialSelection();
+
+					// Fire dataReady for the consistency with inline editors
+					// and because it makes sense. (http://dev.ckeditor.com/ticket/10370)
+					editor.fire( 'dataReady' );
+				}
+				else {
+					this._.isLoadingData = true;
+					editor._.dataStore = { id: 1 };
+
+					var config = editor.config,
+						fullPage = config.fullPage,
+						docType = config.docType;
+
+					// Build the additional stuff to be included into <head>.
+                    var headExtra = CKEDITOR.tools.buildStyleHtml( iframeCssFixes() ).replace( /<style>/, '<style data-cke-temp="1">' );
+
+					if ( !fullPage )
+						headExtra += CKEDITOR.tools.buildStyleHtml( editor.config.contentsCss );
+
+					var baseTag = config.baseHref ? '<base href="' + config.baseHref + '" data-cke-temp="1" />' : '';
+
+					if ( fullPage ) {
+						// Search and sweep out the doctype declaration.
+						data = data.replace( /<!DOCTYPE[^>]*>/i, function( match ) {
+							editor.docType = docType = match;
+							return '';
+						} ).replace( /<\?xml\s[^\?]*\?>/i, function( match ) {
+							editor.xmlDeclaration = match;
+							return '';
+						} );
+					}
+
+					// Get the HTML version of the data.
+					data = editor.dataProcessor.toHtml( data );
+
+					if ( fullPage ) {
+						// Check if the <body> tag is available.
+						if ( !( /<body[\s|>]/ ).test( data ) )
+							data = '<body>' + data;
+
+						// Check if the <html> tag is available.
+						if ( !( /<html[\s|>]/ ).test( data ) )
+							data = '<html>' + data + '</html>';
+
+						// Check if the <head> tag is available.
+						if ( !( /<head[\s|>]/ ).test( data ) )
+							data = data.replace( /<html[^>]*>/, '$&<head><title></title></head>' );
+						else if ( !( /<title[\s|>]/ ).test( data ) )
+							data = data.replace( /<head[^>]*>/, '$&<title></title>' );
+
+						// The base must be the first tag in the HEAD, e.g. to get relative
+						// links on styles.
+						baseTag && ( data = data.replace( /<head[^>]*?>/, '$&' + baseTag ) );
+
+						// Inject the extra stuff into <head>.
+						// Attention: do not change it before testing it well. (V2)
+						// This is tricky... if the head ends with <meta ... content type>,
+						// Firefox will break. But, it works if we place our extra stuff as
+						// the last elements in the HEAD.
+						data = data.replace( /<\/head\s*>/, headExtra + '$&' );
+
+						// Add the DOCTYPE back to it.
+						data = docType + data;
+					} else {
+						data = config.docType +
+							'<html dir="' + config.contentsLangDirection + '"' +
+								' lang="' + ( config.contentsLanguage || editor.langCode ) + '">' +
+							'<head>' +
+								'<title>' + this._.docTitle + '</title>' +
+								baseTag +
+								headExtra +
+							'</head>' +
+							'<body' + ( config.bodyId ? ' id="' + config.bodyId + '"' : '' ) +
+								( config.bodyClass ? ' class="' + config.bodyClass + '"' : '' ) +
+							'>' +
+								data +
+							'</body>' +
+							'</html>';
+					}
+
+					if ( CKEDITOR.env.gecko ) {
+						// Hack to make Fx put cursor at the start of doc on fresh focus.
+						data = data.replace( /<body/, '<body contenteditable="true" ' );
+
+						// Another hack which is used by onDomReady to remove a leading
+						// <br> which is inserted by Firefox 3.6 when document.write is called.
+						// This additional <br> is present because of contenteditable="true"
+						if ( CKEDITOR.env.version < 20000 )
+							data = data.replace( /<body[^>]*>/, '$&<!-- cke-content-start -->'  );
+					}
+
+					// The script that launches the bootstrap logic on 'domReady', so the document
+					// is fully editable even before the editing iframe is fully loaded (http://dev.ckeditor.com/ticket/4455).
+					var bootstrapCode =
+						'<script id="cke_actscrpt" type="text/javascript"' + ( CKEDITOR.env.ie ? ' defer="defer" ' : '' ) + '>' +
+							'var wasLoaded=0;' +	// It must be always set to 0 as it remains as a window property.
+							'function onload(){' +
+								'if(!wasLoaded)' +	// FF3.6 calls onload twice when editor.setData. Stop that.
+									'window.parent.CKEDITOR.tools.callFunction(' + this._.frameLoadedHandler + ',window);' +
+								'wasLoaded=1;' +
+							'}' +
+							( CKEDITOR.env.ie ? 'onload();' : 'document.addEventListener("DOMContentLoaded", onload, false );' ) +
+                        '</script>';
+
+					// For IE<9 add support for HTML5's elements.
+					// Note: this code must not be deferred.
+					if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
+						bootstrapCode +=
+							'<script id="cke_shimscrpt">' +
+								'window.parent.CKEDITOR.tools.enableHtml5Elements(document)' +
+							'</script>';
+					}
+
+					// IE<10 needs this hack to properly enable <base href="...">.
+					// See: http://stackoverflow.com/a/13373180/1485219 (http://dev.ckeditor.com/ticket/11910).
+					if ( baseTag && CKEDITOR.env.ie && CKEDITOR.env.version < 10 ) {
+						bootstrapCode +=
+							'<script id="cke_basetagscrpt">' +
+								'var baseTag = document.querySelector( "base" );' +
+								'baseTag.href = baseTag.href;' +
+							'</script>';
+                    }
+
+					data = data.replace( /(?=\s*<\/(:?head)>)/, bootstrapCode );
+
+					// Current DOM will be deconstructed by document.write, cleanup required.
+					this.clearCustomData();
+					this.clearListeners();
+
+					editor.fire( 'contentDomUnload' );
+
+                    var doc = this.getDocument();
+                    
+                    // CryptPad
+                    var _iframe = window._iframe = iframe.$;
+					var fw = this;
+					_iframe.contentWindow.onload = function () {
+						CKEDITOR.tools.callFunction(fw._.frameLoadedHandler, _iframe.contentWindow);
+					};
+                    return;
+
+					// Work around Firefox bug - error prune when called from XUL (http://dev.ckeditor.com/ticket/320),
+					// defer it thanks to the async nature of this method.
+					try {
+						doc.write( data );
+					} catch ( e ) {
+						setTimeout( function() {
+							doc.write( data );
+						}, 0 );
+					}
+				}
+			},
+
+			getData: function( isSnapshot ) {
+				if ( isSnapshot )
+					return this.getHtml();
+				else {
+					var editor = this.editor,
+						config = editor.config,
+						fullPage = config.fullPage,
+						docType = fullPage && editor.docType,
+						xmlDeclaration = fullPage && editor.xmlDeclaration,
+						doc = this.getDocument();
+
+					var data = fullPage ? doc.getDocumentElement().getOuterHtml() : doc.getBody().getHtml();
+
+					// BR at the end of document is bogus node for Mozilla. (http://dev.ckeditor.com/ticket/5293).
+					// Prevent BRs from disappearing from the end of the content
+					// while enterMode is ENTER_BR (http://dev.ckeditor.com/ticket/10146).
+					if ( CKEDITOR.env.gecko && config.enterMode != CKEDITOR.ENTER_BR )
+						data = data.replace( /<br>(?=\s*(:?$|<\/body>))/, '' );
+
+					data = editor.dataProcessor.toDataFormat( data );
+
+					if ( xmlDeclaration )
+						data = xmlDeclaration + '\n' + data;
+					if ( docType )
+						data = docType + '\n' + data;
+
+					return data;
+				}
+			},
+
+			focus: function() {
+				if ( this._.isLoadingData )
+					this._.isPendingFocus = true;
+				else
+					framedWysiwyg.baseProto.focus.call( this );
+			},
+
+			detach: function() {
+				var editor = this.editor,
+					doc = editor.document,
+					iframe,
+					onResize;
+
+				// Trying to access window's frameElement property on Edge throws an exception
+				// when frame was already removed from DOM. (http://dev.ckeditor.com/ticket/13850, http://dev.ckeditor.com/ticket/13790)
+				try {
+					iframe =  editor.window.getFrame();
+				} catch ( e ) {}
+
+				framedWysiwyg.baseProto.detach.call( this );
+
+				// Memory leak proof.
+				this.clearCustomData();
+				doc.getDocumentElement().clearCustomData();
+				CKEDITOR.tools.removeFunction( this._.frameLoadedHandler );
+
+				// On IE, iframe is returned even after remove() method is called on it.
+				// Checking if parent is present fixes this issue. (http://dev.ckeditor.com/ticket/13850)
+				if ( iframe && iframe.getParent() ) {
+					iframe.clearCustomData();
+					onResize = iframe.removeCustomData( 'onResize' );
+					onResize && onResize.removeListener();
+
+					// IE BUG: When destroying editor DOM with the selection remains inside
+					// editing area would break IE7/8's selection system, we have to put the editing
+					// iframe offline first. (http://dev.ckeditor.com/ticket/3812 and http://dev.ckeditor.com/ticket/5441)
+					iframe.remove();
+				} else {
+					CKEDITOR.warn( 'editor-destroy-iframe' );
+				}
+			}
+		}
+	} );
+
+	function objectResizeDisabler( editor ) {
+		if ( CKEDITOR.env.gecko ) {
+			// FF allows to change resizing preferences by calling execCommand.
+			try {
+				var doc = editor.document.$;
+				doc.execCommand( 'enableObjectResizing', false, !editor.config.disableObjectResizing );
+				doc.execCommand( 'enableInlineTableEditing', false, !editor.config.disableNativeTableHandles );
+			} catch ( e ) {}
+		} else if ( CKEDITOR.env.ie && CKEDITOR.env.version < 11 && editor.config.disableObjectResizing ) {
+			// It's possible to prevent resizing up to IE10.
+			blockResizeStart( editor );
+		}
+
+		// Disables resizing by preventing default action on resizestart event.
+		function blockResizeStart() {
+			var lastListeningElement;
+
+			// We'll attach only one listener at a time, instead of adding it to every img, input, hr etc.
+			// Listener will be attached upon selectionChange, we'll also check if there was any element that
+			// got listener before (lastListeningElement) - if so we need to remove previous listener.
+			editor.editable().attachListener( editor, 'selectionChange', function() {
+				var selectedElement = editor.getSelection().getSelectedElement();
+
+				if ( selectedElement ) {
+					if ( lastListeningElement ) {
+						lastListeningElement.detachEvent( 'onresizestart', resizeStartListener );
+						lastListeningElement = null;
+					}
+
+					// IE requires using attachEvent, because it does not work using W3C compilant addEventListener,
+					// tested with IE10.
+					selectedElement.$.attachEvent( 'onresizestart', resizeStartListener );
+					lastListeningElement = selectedElement.$;
+				}
+			} );
+		}
+
+		function resizeStartListener( evt ) {
+			evt.returnValue = false;
+		}
+	}
+
+	function iframeCssFixes() {
+		var css = [];
+
+		// IE>=8 stricts mode doesn't have 'contentEditable' in effect
+		// on element unless it has layout. (http://dev.ckeditor.com/ticket/5562)
+		if ( CKEDITOR.document.$.documentMode >= 8 ) {
+			css.push( 'html.CSS1Compat [contenteditable=false]{min-height:0 !important}' );
+
+			var selectors = [];
+
+			for ( var tag in CKEDITOR.dtd.$removeEmpty )
+				selectors.push( 'html.CSS1Compat ' + tag + '[contenteditable=false]' );
+
+			css.push( selectors.join( ',' ) + '{display:inline-block}' );
+		}
+		// Set the HTML style to 100% to have the text cursor in affect (http://dev.ckeditor.com/ticket/6341)
+		else if ( CKEDITOR.env.gecko ) {
+			css.push( 'html{height:100% !important}' );
+			css.push( 'img:-moz-broken{-moz-force-broken-image-icon:1;min-width:24px;min-height:24px}' );
+		}
+
+		// http://dev.ckeditor.com/ticket/6341: The text cursor must be set on the editor area.
+		// http://dev.ckeditor.com/ticket/6632: Avoid having "text" shape of cursor in IE7 scrollbars.
+		css.push( 'html{cursor:text;*cursor:auto}' );
+
+		// Use correct cursor for these elements
+		css.push( 'img,input,textarea{cursor:default}' );
+
+		return css.join( '\n' );
+	}
+} )();
+
+/**
+ * Disables the ability to resize objects (images and tables) in the editing area.
+ *
+ *		config.disableObjectResizing = true;
+ *
+ * **Note:** Because of incomplete implementation of editing features in browsers
+ * this option does not work for inline editors (see ticket [#10197](http://dev.ckeditor.com/ticket/10197)),
+ * does not work in Internet Explorer 11+ (see [#9317](http://dev.ckeditor.com/ticket/9317#comment:16) and
+ * [IE11+ issue](https://connect.microsoft.com/IE/feedback/details/742593/please-respect-execcommand-enableobjectresizing-in-contenteditable-elements)).
+ * In Internet Explorer 8-10 this option only blocks resizing, but it is unable to hide the resize handles.
+ *
+ * @cfg
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.disableObjectResizing = false;
+
+/**
+ * Disables the "table tools" offered natively by the browser (currently
+ * Firefox only) to perform quick table editing operations, like adding or
+ * deleting rows and columns.
+ *
+ *		config.disableNativeTableHandles = false;
+ *
+ * @cfg
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.disableNativeTableHandles = true;
+
+/**
+ * Disables the built-in spell checker if the browser provides one.
+ *
+ * **Note:** Although word suggestions provided natively by the browsers will
+ * not appear in CKEditor's default context menu,
+ * users can always reach the native context menu by holding the
+ * *Ctrl* key when right-clicking if {@link #browserContextMenuOnCtrl}
+ * is enabled or you are simply not using the
+ * [context menu](http://ckeditor.com/addon/contextmenu) plugin.
+ *
+ *		config.disableNativeSpellChecker = false;
+ *
+ * @cfg
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.disableNativeSpellChecker = true;
+
+/**
+ * Language code of  the writing language which is used to author the editor
+ * content. This option accepts one single entry value in the format defined in the
+ * [Tags for Identifying Languages (BCP47)](http://www.ietf.org/rfc/bcp/bcp47.txt)
+ * IETF document and is used in the `lang` attribute.
+ *
+ *		config.contentsLanguage = 'fr';
+ *
+ * @cfg {String} [contentsLanguage=same value with editor's UI language]
+ * @member CKEDITOR.config
+ */
+
+/**
+ * The base href URL used to resolve relative and absolute URLs in the
+ * editor content.
+ *
+ *		config.baseHref = 'http://www.example.com/path/';
+ *
+ * @cfg {String} [baseHref='']
+ * @member CKEDITOR.config
+ */
+
+/**
+ * Whether to automatically create wrapping blocks around inline content inside the document body.
+ * This helps to ensure the integrity of the block *Enter* mode.
+ *
+ * **Note:** This option is deprecated. Changing the default value might introduce unpredictable usability issues and is
+ * highly unrecommended.
+ *
+ *		config.autoParagraph = false;
+ *
+ * @deprecated
+ * @since 3.6
+ * @cfg {Boolean} [autoParagraph=true]
+ * @member CKEDITOR.config
+ */
+
+/**
+ * Fired when some elements are added to the document.
+ *
+ * @event ariaWidget
+ * @member CKEDITOR.editor
+ * @param {CKEDITOR.editor} editor This editor instance.
+ * @param {CKEDITOR.dom.element} data The element being added.
+ */

www/poll/main.js

@@ -11,6 +11,7 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',
     'less!/poll/poll.less',
@@ -135,7 +136,7 @@ define([
         var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
         $createOption.append(APP.$createRow);
         $commitCell.append(APP.$commit);
-        $('#create-user, #create-option').css('display', 'inline-block');
+        $('#create-user, #create-option').css('display', 'inline-flex');
         if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
         var width = $('#table').outerWidth();
         if (width) {
@@ -458,7 +459,7 @@ define([
         var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
 
         $('#howItWorks').toggle(help);
-        $('#help').text(msg).attr('title', msg);
+        $('#help').text(msg);
     };
 
     var Title;
@@ -621,6 +622,12 @@ var ready = function (info, userid, readOnly) {
         .on('change', ['table'], change)
         .on('remove', [], change);
 
+    var userInput = $('.uncommitted > input');
+    if (userInput.val() === '')
+    {
+        userInput.val(Cryptpad.getProxy()[Cryptpad.displayNameKey]);
+    }
+
     UserList.addToUserData(APP.proxy.info.userData);
 
     APP.ready = true;

www/poll/poll.less

@@ -29,6 +29,7 @@ body {
     flex: 1;
     #poll {
         flex: 1;
+        overflow-y: auto;
     }
 }
 
@@ -54,9 +55,14 @@ body {
     width: 400px;
 }
 
+input[type="text"], textarea {
+    background-color: white;
+    color: black;
+    border: 0;
+}
+
 input[type="text"][disabled], textarea[disabled] {
     background-color: transparent;
-    font: white;
     border: 0px;
 }
 
@@ -110,9 +116,10 @@ table#table {
 
     min-width: 80%;
     width: 80%;
-    min-height: 5em;
+    min-height: 7em;
     font-size: 20px;
     font-weight: bold;
+    border: 1px solid black;
 
 }
 #description[disabled] {
@@ -131,6 +138,10 @@ table#table {
 div.upper {
     width: 80%;
     margin: auto;
+
+    & > * {
+        margin-right: 1em;
+    }
 }
 
 // from cryptpad.less
@@ -328,7 +339,6 @@ form.realtime, div.realtime {
         input {
             &[type="text"] {
                 height: auto;
-                border: 1px solid @base;
                 width: 80%;
             }
         }
@@ -374,6 +384,7 @@ form.realtime, div.realtime {
                 //border-radius: 20px 0 0 20px;
                 input[type="text"] {
                     width: ~"calc(100% - 50px)";
+                    padding: 0 0.5em;
                 }
                 .edit {
                     float:right;
@@ -459,3 +470,10 @@ form.realtime, div.realtime {
     #adduser { .top-left; }
     #addoption { .bottom-left; }
 }
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+