work in progress

config.example.js

@@ -119,6 +119,7 @@ module.exports = {
         'terms',
         'about',
         'contact',
+        'what-is-cryptpad'
     ],
 
     /*  Limits, Donations, Subscriptions and Contact

customize.dist/pages.js

@@ -13,6 +13,7 @@ define([
         return e;
     };
 
+<<<<<<< HEAD
     var indexContent = function () {
         return [
             h('div.page.category.first#knowmore', [
@@ -77,54 +78,161 @@ define([
                 ])
             ])
         ];
+=======
+    var footerCol = function (title, L, literal) {
+        return h('div.col', [
+            h('ul.list-unstyled', [
+                h('li.title', {
+                    '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, [
+                        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)
+                    ]),
+                    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.cp-version-footer', "CryptPad v1.13.0 (Naiad)")
+        ]);
+>>>>>>> ae176b0465121f57e2147ed0c80c9e62ce65c3a5
     };
 
     Pages['/about.html'] = function () {
-        return h('div#main_other', [
-            h('center', [
-                h('h1', Msg.about)
+        return h('div#cp-main.cp-page-about', [
+            infopageTopbar(),
+            h('div.container.cp-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('h2', 'Core Developers'),
+                h('div.row', [
+                    h('div.col-md-4', [
+                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('h3', "Aaron MacSween"),
+                        setHTML(h('div#bio'), '<p>Aaron transitioned into distributed systems development from a background in jazz and live stage performance.</p><p>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.</p><p>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.</p><p>He spends his spare time experimenting with guitars, photography, science fiction, and spicy food.</p>')
+                    ]),
+                    h('div.col-md-4', [
+                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('h3', "Caleb James Delisle"),
+                        setHTML(h('div#bio'), '<p>Caleb is a cryptography developer, Machine Technology graduate of the Franklin County Technical School and lifelong tinkerer.</p><p>In 2011, he started the cjdns Open Source project to show that secure networking could be invisible and easily deployed.</p><p>After joining XWiki SAS in 2014, he started the CryptPad project with the intent of bringing the same transparent security to collaborative editing.</p><p>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('div.col-md-4', [
+                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('h3', "Yann Flory"),
+                        setHTML(h('div#bio'), '<p>Yann is a mysterious person.</p>')
+                    ]),
+                ]),
+                h('h2', 'Key Contributors'),
+                h('div.row', [
+                    h('div.col-md-4', [
+                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('h3', "Pierre Bondoerffer"),
+                        setHTML(h('div#bio'), '<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.</p><p>He is currently studying at 42, where he learns about algorithms, networking, kernel programming and graphics.</p><p>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('div.col-md-4', [
+                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('h3', "Catalin Scripcariu"),
+                        setHTML(h('div#bio'), '')
+                    ]),
+                    h('div.col-md-4', [
+                        h('img.bio-avatar', {'src': '/customize/images/avatar.png'}),
+                        h('h3', "Ludovic Dubost"),
+                        setHTML(h('div#bio'), '')
+                    ])
+                ]),
             ]),
-            setHTML(h('p'), Msg.main_p2),
-            h('h2', Msg.main_howitworks),
-            setHTML(h('p'), Msg.main_howitworks_p1)
-        ].concat(indexContent()));
+            infopageFooter()
+        ]);
     };
 
     Pages['/privacy.html'] = function () {
-        return h('div#main_other', [
-            h('center', h('h1', Msg.policy_title)),
-            h('h2', Msg.policy_whatweknow),
-            h('p', Msg.policywhatweknow_p1),
-
-            h('h2', Msg.policy_howweuse),
-            h('p', Msg.policy_howweuse_p1),
-            h('p', Msg.policy_howweuse_p2),
+        return h('div#cp-main.cp-page-privacy', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
+                h('center', h('h1', Msg.policy_title)),
+                h('h2', Msg.policy_whatweknow),
+                h('p', Msg.policywhatweknow_p1),
 
-            h('h2', Msg.policy_whatwetell),
-            h('p', Msg.policy_whatwetell_p1),
+                h('h2', Msg.policy_howweuse),
+                h('p', Msg.policy_howweuse_p1),
+                h('p', Msg.policy_howweuse_p2),
 
-            h('h2', Msg.policy_links),
-            h('p', Msg.policy_links_p1),
+                h('h2', Msg.policy_whatwetell),
+                h('p', Msg.policy_whatwetell_p1),
 
-            h('h2', Msg.policy_ads),
-            h('p', Msg.policy_ads_p1),
+                h('h2', Msg.policy_links),
+                h('p', Msg.policy_links_p1),
 
-            h('h2', Msg.policy_choices),
-            h('p', Msg.policy_choices_open),
-            setHTML(h('p'), Msg.policy_choices_vpn),
+                h('h2', Msg.policy_ads),
+                h('p', Msg.policy_ads_p1),
 
-            h('br')
+                h('h2', Msg.policy_choices),
+                h('p', Msg.policy_choices_open),
+                setHTML(h('p'), Msg.policy_choices_vpn),
+            ]),
+            infopageFooter()
         ]);
     };
 
     Pages['/terms.html'] = function () {
-        return h('div#main_other', [
-            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),
+        return h('div#cp-main.cp-page-terms', [
+            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()
         ]);
     };
 
@@ -135,46 +243,40 @@ define([
         ]);
     };
 
-    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
-                        })
-                    ])
-                ])
+    Pages['/what-is-cryptpad.html'] = function () {
+        return h('div#cp-main.cp-page-what-is-cryptpad', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
+                h('center', h('h1', Msg.whatis_title)),
+                setHTML(h('h2'), Msg.whatis_collaboration),
+                setHTML(h('p'), Msg.whatis_collaboration_p1),
+                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 }),
+                    ]),
+                    h('div.col-md-8', [
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p1),
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p2),
+                        setHTML(h('p'), Msg.whatis_zeroknowledge_p3),
+                    ]),
+                ]),
+                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),
             ]),
-            h('button.btn.btn-secondary.login.half.first', Msg.login_login),
-            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)
-            ])
+            infopageFooter(),
         ]);
     };
 
-
     var appButton = function (alt, h2, img, p, url, btn, id) {
         return h('div.app', [
             h('center', [
@@ -195,52 +297,9 @@ define([
         ]);
     };
 
-    var tryIt = function () {
-        return [
-            h('div.class.category#tryit', [
-                h('center', [
-                    h('h1', Msg.tryIt)
-                ])
-            ]),
-            h('div.page', [
-                h('div.app-container', [
-                    h('div.app-row', [
-                        appButton("Rich Text application",
-                            Msg.main_richText,
-                            '/customize/images/pad.png?' + urlArgs,
-                            Msg.main_richText_p,
-                            '/pad/',
-                            Msg.button_newpad,
-                            'create-pad'),
-                        appButton('Code application',
-                            Msg.main_code,
-                            '/customize/images/code.png?' + urlArgs,
-                            Msg.main_code_p,
-                            '/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')
-                    ])
-                ])
-            ])
-        ];
-    };
-
     var infopageTopbar = function () {
         return h('div.cp-topbar',
+<<<<<<< HEAD
             h('div.cp-left',
                 h('a.navbar-brand', { href: 'index.html'}, [
                     h( 'img', { src: '/customize/CryptPad-white-logo.svg' })
@@ -258,6 +317,35 @@ define([
                     h('a.cp-login-btn', { href: '/login'}, 'Log in'),
                     h('a.cp-register-btn', { href: '/register'}, 'Register')
                 ]),
+=======
+            h('div.navbar.navbar-toggleable-sm.navbar-light.navbar-inverse',
+            	h('button.navbar-toggler.navbar-toggler-left', {'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.collapse.navbar-collapse#menuCollapse', [
+                    h('ul.navbar-nav', [
+                            h('a.cp-logo', { href: '/' }, [
+                                h('img', { src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs })
+                            ]),
+                            h('li.nav-item', [
+                                    h('a.nav-link', { href: '/what-is-cryptpad.html'}, Msg.topbar_whatIsCryptpad),
+                                ]),
+                            h('li.nav-item', [
+                                    h('a.nav-link', { href: 'https://blog.cryptpad.fr/'}, Msg.blog),
+                                ]),
+                            h('li.nav-item', [
+                                    h('a.nav-link', { href: '/contact.html'}, Msg.contact),
+                                ]),
+                            h('li.nav-item', [
+                                    h('a.nav-link', { href: '/about.html'}, Msg.about),
+                                ]),
+                        ]),
+            		]),
+            ),
+            h('div.cp-right',
+                h('a.cp-register-btn', { href: '/register'}, Msg.login_register),
+                h('a.cp-login-btn', { href: '/login'}, Msg.login_login)
+>>>>>>> ae176b0465121f57e2147ed0c80c9e62ce65c3a5
             )
         );
     }
@@ -274,7 +362,6 @@ define([
                             h('h1', 'CryptPad'),
                             h('p', Msg.main_catch_phrase)
                         ]),
-                        /*userForm(),*/
                         h('div.col-12.col-sm-6', [
                             [
                                 [ 'pad', '/pad/', Msg.main_richTextPad, 'fa-file-word-o' ],
@@ -317,20 +404,18 @@ define([
                         ])
                     ])
                 ]),
-                //h('footer.cp-more', "More")
             ])
         ];
-        //.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)
             ])
         );
@@ -342,15 +427,15 @@ define([
     };
 
     Pages['/register/'] = Pages['/register/index.html'] = function () {
-        return [h('div#main', [
-            h('div.mainOverlay'),
-            h('div#align-container', [
-                h('div#data.hidden', [
+        return [h('div#cp-main.cp-page-register', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
+                h('div.row.align-items-center', [
+                h('div#data.hidden.col-md-6', [
                     h('h1', Msg.register_header),
-                    h('br'),
-                    setHTML(h('p.left.register-explanation'), Msg.register_explanation)
+                    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',
@@ -368,34 +453,38 @@ define([
                         type: 'password',
                         placeholder: Msg.login_confirm,
                     }),
-                    h('input#import-recent', {
-                        type: 'checkbox',
-                        checked: true
-                    }),
-                    h('label', {
-                        'for': 'import-recent',
-                    }, Msg.register_importRecent),
-                    h('br'),
-                    h('input#accept-terms', {
-                        type: 'checkbox'
-                    }),
-                    setHTML(h('label', {
-                        'for': 'accept-terms',
-                    }), Msg.register_acceptTerms),
-                    h('br'),
+                    h('div.checkbox-container', [
+                        h('input#import-recent', {
+                            type: 'checkbox',
+                            checked: true
+                        }),
+                        h('label', {
+                            'for': 'import-recent',
+                        }, Msg.register_importRecent),
+                    ]),
+                    h('div.checkbox-container', [
+                        h('input#accept-terms', {
+                            type: 'checkbox'
+                        }),
+                        setHTML(h('label', {
+                            'for': 'accept-terms',
+                        }), Msg.register_acceptTerms),
+                    ]),
                     h('button#register.btn.btn-primary', Msg.login_register)
                 ])
-            ])
+                ]),
+            ]),
+            infopageFooter(),
         ])];
     };
 
     Pages['/login/'] = Pages['/login/index.html'] = function () {
-        return [h('div#main', [
-            h('div.mainOverlay'),
-            h('div#align-container',
-                h('div#main-container', [
-                    h('div#data.hidden', setHTML(h('p.left'), Msg.main_info)),
-                    h('div#userForm.form-group.hidden', [
+        return [h('div#cp-main.cp-page-login', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
+                h('div.row.align-items-center', [
+                    h('div#data.hidden.col-md-6', setHTML(h('p.left'), Msg.main_info)),
+                    h('div#userForm.form-group.hidden.col-md-6', [
                         h('input.form-control#name', {
                             name: 'name',
                             type: 'text',
@@ -411,14 +500,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.btn.btn-primary.login.first', Msg.login_login),
                             h('button#register.btn.btn-success.register', Msg.login_register)
                         ])
                     ])
-                ])
-            )
+                ]),
+            ]),
+            infopageFooter(),
         ])];
     };
 

customize.dist/src/less/loading.less

@@ -19,6 +19,7 @@
         margin-left: auto;
         margin-right: auto;
         height: 300px;
+        margin-bottom: 2em;
         @media screen and (max-height: @media-short-screen) {
             display: none;
         }

customize.dist/src/less/variables.less

@@ -64,7 +64,7 @@
 
 @slide-default-bg: #000;
 
-@bg-loading: @old-base;
+@bg-loading: #222;
 @color-loading: @old-fore;
 
 @media-not-big: 800px;

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

@@ -1,17 +1,15 @@
 @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 () {
-    min-height: 100vh;
     background-color: @colortheme_info-background;
 
     a {
         color: @colortheme_link-color;
-        &:visited {
-            color: @colortheme_link-color-visited;
-        }
+        &:visited { color: @colortheme_link-color-visited; }
         //opacity: 0.8;
         //transition: opacity 0.2s;
     }
@@ -20,14 +18,86 @@
     }
 
     border: 0;
-	padding: 0;
-	margin: 0;
+    padding: 0;
+    margin: 0;
 
-	font-size: 14px;
+    font-size: 14px;
     font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
 
     .cp-container {
-        padding-top: @infopages_infobar-height;
+        margin-top: @infopages_infobar-height;
+        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: white;
+
+        .container {
+            .col {
+                margin-top: 1em;
+            }
+
+            width: 100%;
+            text-align: center;
+            margin-bottom: 1em;
+
+            ul.list-unstyled {
+                margin: 0;
+            }
+        }
+
+        .cp-version-footer {
+            background-color: @colortheme_info-background;
+            color: black;
+            text-align: center;
+            padding: 0.5em;
+        }
     }
 };
 
@@ -69,10 +139,22 @@
         -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 {
+            img {
+                height: @infopages_infobar-height / 2;
+            }
+            margin-right: 0.5em;
+        }
     }
 }

customize.dist/src/less2/main.less

@@ -6,3 +6,7 @@ div#cp-main.cp-page-index { @import "./pages/page-index.less"; }
 div#cp-main.cp-page-contact { @import "./pages/page-contact.less"; }
 div#cp-main.cp-page-login { @import "./pages/page-login.less"; }
 div#cp-main.cp-page-register { @import "./pages/page-register.less"; }
+div#cp-main.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
+div#cp-main.cp-page-about { @import "./pages/page-about.less"; }
+div#cp-main.cp-page-privacy { @import "./pages/page-privacy.less"; }
+div#cp-main.cp-page-terms { @import "./pages/page-terms.less"; }

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

@@ -0,0 +1,12 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();
+
+.bio-avatar {
+    border-radius: 50%;
+    margin: 1em 0;
+    max-width: 300px;
+    max-height: 300px;
+}

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

@@ -1,4 +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

@@ -13,6 +13,7 @@
     color: #FFF;
     background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
     background-size: cover;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -84,6 +85,7 @@
             font-size: 1.6rem;
         }
     }
+<<<<<<< HEAD
     img {
         height: 5vh;
         margin-top: -4px;
@@ -93,6 +95,11 @@
             transform: none;
         }
     };
+=======
+    a.cp-logo {
+        display: none;
+    }
+>>>>>>> ae176b0465121f57e2147ed0c80c9e62ce65c3a5
 }
 @callout-padding: 15px;
 a:hover {
@@ -213,6 +220,7 @@ h4 {
     .navbar-nav a {
         text-align: right !important;
     }
+<<<<<<< HEAD
     .cp-right .cp-login-btn {
         padding: 0.5em;
     }
@@ -220,3 +228,6 @@ h4 {
 .collapsing a {
     text-align: right !important;
 }
+=======
+}
+>>>>>>> ae176b0465121f57e2147ed0c80c9e62ce65c3a5

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

@@ -0,0 +1,17 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();
+
+.form-group {
+    .extra {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        width: 100%;
+        .login {
+        }
+    }
+}

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,23 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+.infopages_main();
+.infopages_topbar();
+
+.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;
+            width: 30%;
+        }
+    }
+}

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/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">envianos 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 enriquezido';
     out.button_newcode = 'Crear nuevo pad de código';
@@ -542,5 +542,8 @@ define(function () {
     out.settings_logoutEverywhereButton = "Cerar sesión";
     out.upload_title = "Subir archivo";
 
+    // 1.13.0 - Naiad
+    out.topbar_whatIsCryptpad = "Qué es CryptPad";
+
     return out;
 });

customize.dist/translations/messages.fr.js

@@ -474,7 +474,7 @@ 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.";
 
@@ -508,6 +508,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';

customize.dist/translations/messages.js

@@ -382,8 +382,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!";
@@ -483,7 +481,7 @@ 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_catch_phrase = "The Zero Knowledge Cloud";
@@ -526,6 +524,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, we make sure that we can't. CryptPad uses client side encryption 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 never sent to the server, instead they are computed into a secret key using <a href="https://en.wikipedia.org/wiki/Scrypt">scrypt key derivation function</a>. This secret key is able 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/whitepaper.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';

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

@@ -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;"
   }
 }