updated the register page

customize.dist/pages.js

@@ -406,10 +406,18 @@ define([
     Pages['/register/'] = Pages['/register/index.html'] = function () {
         return [h('div#cp-main', [
             infopageTopbar(),
+            h('div.container-fluid.cp-register-wel',[
+                h('div.container',[
+                    h('div.row',[
+                        h('div.col-12',[
+                            h('h1.text-center', Msg.register_header)
+                        ])
+                    ])
+                ])
+            ]),
             h('div.container.cp-container', [
-                h('div.row.align-items-center', [
+                h('div.row.align-items-center.cp-register-det', [
                 h('div#data.hidden.col-md-6', [
-                    h('h1', Msg.register_header),
                     setHTML(h('p.register-explanation'), Msg.register_explanation)
                 ]),
                 h('div#userForm.form-group.hidden.col-md-6', [
@@ -453,10 +461,18 @@ define([
                             'for': 'accept-terms',
                         }), Msg.register_acceptTerms),*/
                     ]),
-                    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(),
         ])];
     };

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

@@ -66,3 +66,5 @@
 
 @cryptpad_color_blue: #4591C4; 
 @cryptpad_color_grey: #999999;
+@cryptpad_header_col: #1E1F1F;
+@cryptpad_text_col: #3F4141;

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

@@ -42,7 +42,7 @@ body {
 		&:hover {
 			transform: scale(1.05);
 		}
-	} 
+	}
 }
 .cp-title {
     display: flex;

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

@@ -20,13 +20,110 @@
             margin-top: 16px;
             font-size: 1.25em;
             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: 5em;
+        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/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.js

@@ -404,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";