Test new home page

customize.dist/src/build.js

@@ -24,9 +24,11 @@ var template = read('./template.html');
 var fragments = {};
 [   'index',
     'fork',
+    'topbar',
     'terms',
     'privacy',
     'about',
+    'contact',
     'logo',
     'noscript',
 ].forEach(function (name) {
@@ -34,8 +36,9 @@ var fragments = {};
 });
 
 // build static pages
-['index', 'privacy', 'terms', 'about',].forEach(function (page) {
+['index', 'privacy', 'terms', 'about', 'contact',].forEach(function (page) {
     var source = swap(template, {
+       topbar: fragments.topbar,
        fork: fragments.fork,
        main: fragments[page],
        logo: fragments.logo,

customize.dist/src/fragments/about.html

@@ -1,3 +1,4 @@
+<div id="main_other">
       <center>
           <h1>About</h1>
       </center>
@@ -6,5 +7,5 @@
 
       <h2 id="howitworks" data-localization="main_howitworks"></h2>
       <p data-localization="main_howitworks_p1"><!-- Operational transform, Nakamoto blockchain, server kept unaware of the content--></p>
-
+</div>
 

customize.dist/src/fragments/contact.html

@@ -0,0 +1,8 @@
+<div id="main_other">
+    <center>
+        <h1 data-localization="contact_title">Contact</h1>
+    </center>
+
+    <p data-localization="main_about_p2"><!-- Contact us--></p>
+</div>
+

customize.dist/src/fragments/fork.html

@@ -1,3 +1,3 @@
-    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 80px; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 <!-- Thanks! http://tholman.com/github-corners/ -->
 

customize.dist/src/fragments/index.html

@@ -1,42 +1,34 @@
-    <center>
-        <h1 data-localization="main_slogan"></h1>
-    </center>
+<div id="main">
+    <div id="data">
+      <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
 
-      <p data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
-
-      <center>
         <h5 id="tryit" data-localization="tryIt"></h5>
 
-
-
-        <!--
-        (<a href="/file" target="_blank" data-localization="main_openFileManager">Open in a new tab</a>)
-
-        <iframe src="/file/#iframe" id="fileManagerIframe"></iframe>
-        <br />
-        -->
-        <table class="recent scroll" style="display:none">
-            <tbody>
-
-            <tr>
-                <th data-localization="table_type"></th>
-                <th data-localization="table_link"></th>
-                <th data-localization="table_created"></th>
-                <th data-localization="table_last"></th>
-                <th></th>
-            </tr>
-
-            </tbody>
-        </table>
-
         <div id="buttons" class="buttons">
-          <a id="create-pad" class="button create" href="/pad/" data-localization="button_newpad"></a>
-          <a id="create-code" class="button create" href="/code/" data-localization="button_newcode"></a>
-          <a id="create-poll" class="button create" href="/poll/" data-localization="button_newpoll"></a>
+          <a id="create-pad" class="button create" href="/pad/" data-localization="button_newpad"></a><br/>
+          <a id="create-code" class="button create" href="/code/" data-localization="button_newcode"></a><br/>
+          <a id="create-poll" class="button create" href="/poll/" data-localization="button_newpoll"></a><br/>
           <a id="create-slide" class="button create" href="/slide/" data-localization="button_newslide"></a>
         </div>
 
-      </center>
+    </div>
+
+    <div id="userForm">
+        <center>
+            <h1>Join Us!</h1>
+        </center>
+        <label for="name" data-localization="form_username"></label><br>
+        <input type="text" id="name" data-localization-placeholder="login_username" autofocus><br>
+
+        <label for="password" data-localization="form_password"></label><br>
+        <input type="password" id="password" data-localization-placeholder="login_password"><br>
+
+        <input type="checkbox" checked="checked"><label for="rememberme" data-localization="login_remember"></label><br>
+        <br>
+        <button class="create button half first">Log in</button> <button class="create button half">Register</button><br>
+        <button class="create button">Continue without logging in</button>
+
+    </div>
+</div>
+
 
-      <p data-localization="main_about_p1"><!-- Privacy policy, terms of service --></p>
-      <p data-localization="main_about_p2"><!-- Contact us--></p>

customize.dist/src/fragments/privacy.html

@@ -1,3 +1,4 @@
+<div id="main_other">
     <center>
         <h1 data-localization="policy_title"></h1>
     </center>
@@ -24,6 +25,6 @@
     <p data-localization="policy_choices_ads"></p>
 
     <br />
-
+</div>
 
 

customize.dist/src/fragments/terms.html

@@ -1,3 +1,4 @@
+<div id="main_other">
     <center>
         <h1 data-localization="tos_title"></h1>
     </center>
@@ -7,4 +8,5 @@
     <p data-localization="tos_e2ee"></p>
     <p data-localization="tos_logs"></p>
     <p data-localization="tos_3rdparties"></p>
+</div>
 

customize.dist/src/fragments/topbar.html

@@ -0,0 +1,22 @@
+<div id="cryptpadTopBar">
+    <span>
+        <a class="gotoMain" href="/">
+            <img src="customize/cryptofist_mini.png" class="cryptpad-logo" alt="" /> CryptPad
+        </a>
+    </span>
+
+    <span class="slogan" data-localization="main_slogan"></span>
+
+    <span class="right">
+        <a href="/about.html">About</a>
+    </span>
+    <span class="right">
+        <a href="/privacy.html">Privacy</a>
+    </span>
+    <span class="right">
+        <a href="/terms.html">ToS</a>
+    </span>
+    <span class="right">
+        <a href="/contact.html">Contact</a>
+    </span>
+</div>

customize.dist/src/less/cryptpad.less

@@ -5,6 +5,7 @@
 @import "./bar.less";
 @import "./loading.less";
 @import "./dropdown.less";
+@import "./topbar.less";
 
 html.cp, .cp body {
     font-size: .875em;
@@ -12,13 +13,13 @@ html.cp, .cp body {
     color: @fore;
 
     font-family: Georgia,Cambria,serif;
-    height: 100;
+    height: 100%;
 }
 
 .cp:not(.poll) {
     #language-selector {
         position: absolute;
-        top: 0px;
+        top: 80px;
         right: 0px;
         display: inline-block;
     }
@@ -30,6 +31,7 @@ body {
     font-size: 1rem;
     font-weight: 400;
     line-height: 2rem;
+    margin: 0;
 }
 
 a.github-corner > svg {
@@ -97,11 +99,11 @@ h6 {
 
 a {
     cursor: pointer;
-    color: @cp-green;
+    color: @cp-darkblue;
     text-decoration: none;
 
     &:hover {
-        color: @cp-accent;
+        color: @cp-accent2;
     }
 }
 
@@ -123,12 +125,111 @@ p, pre, td, a, table, tr {
     .lato;
 }
 
+body.html {
+}
+    .page {
+        width: 70vw;
+        height: 90vh;
+        margin-left: 15vw;
+        background: blue;
+        &.first {
+            margin-top: ~"calc(100vh - 80px)";
+        }
+    }
+
+    .page2 {
+        width: 70vw;
+        height: 100vh;
+        background: red;
+    }
+
 #main {
-    width: 70vw;
+    background-image: url('/customize/bg.jpg');
+    background-size: cover;
+}
+#main, #main_other {
+    position: absolute;
+    left: 0;
+    right: 0;
+    padding: 0 @main-border-width;
+    height: ~"calc(100vh - 80px)";
     margin: auto;
+    //margin-top: 100px;
 
     font-size: medium;
-    padding-bottom: 1em;
+    //padding-bottom: 1em;
+
+    // Vertical positioning (middle)
+    //margin-top: 50vh;
+    //transform: translateY( ~"calc(40px - 50%)" ); //"
+
+
+    #data {
+        p {
+            margin: 0;
+            padding: 0;
+        }
+        h5 {
+            color: @topbar-color;
+        }
+        color: @topbar-color;
+        padding: 15px;
+        box-sizing: border-box;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: ~"calc(100% - 450px - 30vw)";
+        background-color: rgba(34, 177, 221, 0.8);
+    }
+
+    #userForm {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: @main-border-width;
+        margin-left: 50px;
+        display: inline-block;
+        width: 400px;
+        height: 350px;
+        background-color: rgba(34, 177, 221, 0.8);
+        padding: 10px;
+        box-sizing: border-box;
+        font-family: lato, Helvetica, sans-serif;
+        color: @topbar-color;
+
+        h1 {
+            color: black;
+        }
+
+        [type="text"], [type="password"] {
+            width: ~"calc(100% - 10px)";
+            height: 1.5em;
+            border-radius: 0;
+        }
+
+        [type="checkbox"] {
+            vertical-align: sub;
+            margin: 0;
+            margin-top: 10px;
+            margin-right: 5px;
+        }
+
+        button {
+            width: 100%;
+            margin: 2px 0px;
+            text-transform: uppercase;
+            cursor: pointer;
+            &.half {
+                width: ~"calc(50% - 2px)";
+                &.first {
+                }
+            }
+        }
+    }
+
+    .buttons {
+        margin-top: 20px;
+    }
 }
 
 #fileManagerIframe {
@@ -139,27 +240,22 @@ p, pre, td, a, table, tr {
 
 /* buttons */
 
-// home page button container
-.buttons {
-    margin-bottom: 50px;
-    margin-top: 20px;
-    line-height: 2.5em;
-}
-
 .create, .action {
     display: inline-block;
     @thick: 2px;
-    border: @thick solid @cp-green;
-    background-color: @base;
-    color: @cp-green;
+    //border: @thick solid @cp-darkblue;
+    border: 0;
+    background-color: @cp-darkblue;
+    color: @topbar-button-color;
 
     font-weight: bold;
     font-size: large;
     margin-right: 5px;
     margin-left: 5px;
     &:hover {
-        border: @thick solid @cp-accent;
-        color: @cp-green;
+        color: darken(@topbar-button-color, 20%);
+        //border: @thick solid @cp-accent2;
+        //color: @cp-darkblue;
     }
 }
 
@@ -168,8 +264,9 @@ p, pre, td, a, table, tr {
     @vpad: 2 * 2px;
     padding: @vpad @hpad @vpad @hpad;
 
-    margin-top: 2 * 6px;
-    margin-bottom: 2 * 6px;
+    //margin-top: 2 * 6px;
+    //margin-bottom: 2 * 6px;
+    margin: 2px 0;
     display: inline-block;
     line-height: 1.5em;
 }

customize.dist/src/less/topbar.less

@@ -0,0 +1,55 @@
+@import "./variables.less";
+
+#cryptpadTopBar {
+    background: @topbar-back;
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    color: @topbar-color;
+    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    padding: 5px;
+    box-sizing: border-box;
+    font-size: 40px;
+
+    &> span {
+        vertical-align: middle;
+        display: inline-block;
+        height: 100%;
+    }
+    .cryptpad-logo {
+        height: 70px;
+        vertical-align: middle;
+    }
+
+    .slogan {
+        font-size: 20px;
+        color: @topbar-color;
+        line-height: 70px;
+    }
+
+    .gotoMain {
+        color: @topbar-color;
+        height: 70px;
+        line-height: 70px;
+    }
+
+    .right {
+        float: right;
+        font-size: 20px;
+        margin: 0px 5px;
+        background: @topbar-button-bg;
+
+        a {
+            text-align: center;
+            min-width: 100px;
+            font-weight: bold;
+            height: 70px;
+            padding: 0 10px;
+            line-height: 70px;
+            display: inline-block;
+            color: @topbar-button-color;
+        }
+    }
+}

customize.dist/src/less/variables.less

@@ -1,7 +1,7 @@
-@base: #302B28;
+@base: #ddd;
 @light-base: lighten(@base, 20%);
 @less-light-base: lighten(@base, 10%);
-@fore: #fafafa;
+@fore: #111;
 
 @cp-green: #46E981;
 @cp-accent: lighten(@cp-green, 20%);
@@ -51,3 +51,11 @@
 @toolbar-gradient-start: #f5f5f5;
 @toolbar-gradient-end: #DDDDDD;
 
+@topbar-back: #fff;
+@topbar-color: #000;
+@topbar-button-bg: #2E9AFE;
+@topbar-button-color: #fff;
+
+@main-border-width: 15vw;
+@cp-darkblue: #3333ff;
+@cp-accent2: darken(@cp-darkblue, 20%);

customize.dist/src/template.html

@@ -14,18 +14,15 @@
         });
     </script>
 </head>
-<body>
+<body class="html">
+    {{topbar}}
+
     {{fork}}
 
     <span id="language-selector" class="dropdown-bar"></span>
-
-    <div id="main">
-{{logo}}
-
 {{noscript}}
 
 {{main}}
-    </div>
 </body>
 </html>