diff --git a/customize.dist/about.html b/customize.dist/about.html index 7c54eb7a7..eab8b7b32 100644 --- a/customize.dist/about.html +++ b/customize.dist/about.html @@ -14,20 +14,37 @@ }); - - - + +
+ + + CryptPad + + + + + About + + + Privacy + + + ToS + + + Contact + +
- -
-
- -
+ + + +
diff --git a/customize.dist/bg.jpg b/customize.dist/bg.jpg new file mode 100644 index 000000000..fa5214591 Binary files /dev/null and b/customize.dist/bg.jpg differ diff --git a/customize.dist/contact.html b/customize.dist/contact.html new file mode 100644 index 000000000..bd9df834b --- /dev/null +++ b/customize.dist/contact.html @@ -0,0 +1,73 @@ + + + + Cryptpad: Zero Knowledge, Collaborative Real Time Editing + + + + + + + + + +
+ + + CryptPad + + + + + + + About + + + Privacy + + + ToS + + + Contact + +
+ + + + + + + + +
+ +
+ + + +
+
+

Contact

+
+ +

+
+ + + + + diff --git a/customize.dist/index.html b/customize.dist/index.html index 1b7d66184..2947a56cc 100644 --- a/customize.dist/index.html +++ b/customize.dist/index.html @@ -14,20 +14,37 @@ }); - - + +
+ + + CryptPad + + + + + + + About + + + Privacy + + + ToS + + + Contact + +
+ + + - -
-
- -
- -
- -

-

- diff --git a/customize.dist/main.css b/customize.dist/main.css index 157346865..bb34f4e28 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -3,7 +3,7 @@ */ .alertify-logs > * { padding: 12px 48px; - color: #fafafa; + color: #111; font-weight: bold; font-size: large; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); @@ -18,7 +18,7 @@ } .alertify-logs > *.success { background: #46E981; - color: #302B28; + color: #ddd; } .alertify { position: fixed; @@ -79,8 +79,8 @@ } .alertify .dialog input:not(.form-control), .alertify .alert input:not(.form-control) { - background-color: #302B28; - color: #fafafa; + background-color: #ddd; + color: #111; border: 0px; border-radius: 5px; margin-bottom: 15px; @@ -112,8 +112,8 @@ font-size: 14px; text-decoration: none; cursor: pointer; - color: #fafafa; - border: 1px solid #302B28; + color: #111; + border: 1px solid #ddd; border-radius: 5px; } .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover, @@ -124,7 +124,7 @@ } .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus, .alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus { - border: 1px dotted #302B28; + border: 1px dotted #ddd; } .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner, .alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner { @@ -210,7 +210,7 @@ height: 2.5em; display: inline-block; width: 100%; - background: #302B28; + background: #ddd; border-top: 1px solid #444; } .top-bar a, @@ -226,7 +226,7 @@ display: block; margin-left: 10px; padding-top: 3px; - color: #fafafa; + color: #111; } .top-bar img, .bottom-bar img { @@ -305,7 +305,7 @@ bottom: 0px; left: 0px; right: 0px; - background: #302B28; + background: #ddd; text-align: center; font-size: 1.5em; } @@ -399,17 +399,65 @@ font-size: 16px; white-space: normal; } +#cryptpadTopBar { + background: #fff; + position: relative; + top: 0; + left: 0; + right: 0; + height: 80px; + color: #000; + font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 5px; + box-sizing: border-box; + font-size: 40px; +} +#cryptpadTopBar > span { + vertical-align: middle; + display: inline-block; + height: 100%; +} +#cryptpadTopBar .cryptpad-logo { + height: 70px; + vertical-align: middle; +} +#cryptpadTopBar .slogan { + font-size: 20px; + color: #000; + line-height: 70px; +} +#cryptpadTopBar .gotoMain { + color: #000; + height: 70px; + line-height: 70px; +} +#cryptpadTopBar .right { + float: right; + font-size: 20px; + margin: 0px 5px; + background: #2E9AFE; +} +#cryptpadTopBar .right a { + text-align: center; + min-width: 100px; + font-weight: bold; + height: 70px; + padding: 0 10px; + line-height: 70px; + display: inline-block; + color: #fff; +} html.cp, .cp body { font-size: .875em; - background-color: #302B28; - color: #fafafa; + background-color: #ddd; + color: #111; 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; } @@ -423,10 +471,11 @@ html.cp, font-size: 1rem; font-weight: 400; line-height: 2rem; + margin: 0; } .cp a.github-corner > svg { fill: #00ADEE; - color: #302B28; + color: #ddd; } .cp .lato { font-family: lato, Helvetica, sans-serif; @@ -438,7 +487,7 @@ html.cp, .cp h4, .cp h5, .cp h6 { - color: #fafafa; + color: #111; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; @@ -484,11 +533,11 @@ html.cp, } .cp a { cursor: pointer; - color: #46E981; + color: #3333ff; text-decoration: none; } .cp a:hover { - color: #a1f4bf; + color: #0000cc; } .cp img { height: auto; @@ -511,28 +560,115 @@ html.cp, font-family: lato, Helvetica, sans-serif; font-size: 1.02em; } -.cp #main { +.cp .page { + width: 70vw; + height: 90vh; + margin-left: 15vw; + background: blue; +} +.cp .page.first { + margin-top: calc(100vh - 80px); +} +.cp .page2 { width: 70vw; + height: 100vh; + background: red; +} +.cp #main { + background-image: url('/customize/bg.jpg'); + background-size: cover; +} +.cp #main, +.cp #main_other { + position: absolute; + left: 0; + right: 0; + padding: 0 15vw; + height: calc(100vh - 80px); margin: auto; font-size: medium; - padding-bottom: 1em; +} +.cp #main #data, +.cp #main_other #data { + color: #000; + 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); +} +.cp #main #data p, +.cp #main_other #data p { + margin: 0; + padding: 0; +} +.cp #main #data h5, +.cp #main_other #data h5 { + color: #000; +} +.cp #main #userForm, +.cp #main_other #userForm { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 15vw; + 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: #000; +} +.cp #main #userForm h1, +.cp #main_other #userForm h1 { + color: black; +} +.cp #main #userForm [type="text"], +.cp #main_other #userForm [type="text"], +.cp #main #userForm [type="password"], +.cp #main_other #userForm [type="password"] { + width: calc(100% - 10px); + height: 1.5em; + border-radius: 0; +} +.cp #main #userForm [type="checkbox"], +.cp #main_other #userForm [type="checkbox"] { + vertical-align: sub; + margin: 0; + margin-top: 10px; + margin-right: 5px; +} +.cp #main #userForm button, +.cp #main_other #userForm button { + width: 100%; + margin: 2px 0px; + text-transform: uppercase; + cursor: pointer; +} +.cp #main #userForm button.half, +.cp #main_other #userForm button.half { + width: calc(50% - 2px); +} +.cp #main .buttons, +.cp #main_other .buttons { + margin-top: 20px; } .cp #fileManagerIframe { width: 100%; height: 500px; margin-top: 15px; } -.cp .buttons { - margin-bottom: 50px; - margin-top: 20px; - line-height: 2.5em; -} .cp .create, .cp .action { display: inline-block; - border: 2px solid #46E981; - background-color: #302B28; - color: #46E981; + border: 0; + background-color: #3333ff; + color: #fff; font-weight: bold; font-size: large; margin-right: 5px; @@ -540,13 +676,11 @@ html.cp, } .cp .create:hover, .cp .action:hover { - border: 2px solid #a1f4bf; - color: #46E981; + color: #cccccc; } .cp .button { padding: 4px 12px 4px 12px; - margin-top: 12px; - margin-bottom: 12px; + margin: 2px 0; display: inline-block; line-height: 1.5em; } @@ -577,7 +711,7 @@ html.cp, cursor: pointer; } .cp tbody tr:nth-child(odd) { - background-color: #685d56; + background-color: #ffffff; } .cp tbody tr th:first-of-type { border-left: 0px; @@ -588,7 +722,7 @@ html.cp, } .cp tbody tr th, .cp tbody tr td { - color: #fafafa; + color: #111; } .cp tbody tr th.remove, .cp tbody tr td.remove { @@ -659,7 +793,7 @@ html.cp, .cp form.realtime table tr td div.text-cell input[disabled], .cp div.realtime table tr td div.text-cell input[disabled] { background-color: transparent; - color: #fafafa; + color: #111; font-weight: bold; } .cp form.realtime table tr td.checkbox-cell, @@ -694,7 +828,7 @@ html.cp, .cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { font-weight: bold; background-color: #FF0073; - color: #302B28; + color: #ddd; display: block; } .cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, @@ -724,13 +858,13 @@ html.cp, .cp form.realtime table input[type="text"], .cp div.realtime table input[type="text"] { height: auto; - border: 1px solid #302B28; + border: 1px solid #ddd; width: 80%; } .cp form.realtime table thead td, .cp div.realtime table thead td { padding: 0px 5px; - background: #4c443f; + background: #f7f7f7; border-radius: 20px 20px 0 0; text-align: center; } @@ -747,7 +881,7 @@ html.cp, } .cp form.realtime table tbody .text-cell, .cp div.realtime table tbody .text-cell { - background: #4c443f; + background: #f7f7f7; } .cp form.realtime table tbody .text-cell input[type="text"], .cp div.realtime table tbody .text-cell input[type="text"] { @@ -780,7 +914,7 @@ html.cp, .cp form.realtime table thead tr th input[type="text"][disabled], .cp div.realtime table thead tr th input[type="text"][disabled] { background-color: transparent; - color: #fafafa; + color: #111; font-weight: bold; } .cp form.realtime table thead tr th .remove, @@ -843,7 +977,7 @@ html.cp, width: 100%; height: 100vh; display: none; - background-color: #302B28; + background-color: #ddd; } .cp div.modal #content, .cp div#modal #content { @@ -934,7 +1068,7 @@ html.cp, width: 80%; height: 80%; margin: auto; - border: 1px solid #685d56; + border: 1px solid #ffffff; text-align: center; } .cp div.modal.shown, @@ -950,7 +1084,7 @@ html.cp, .cp div#modal table input { height: 100%; width: 90%; - border: 3px solid #302B28; + border: 3px solid #ddd; } .cp div.modal table tfoot tr td, .cp div#modal table tfoot tr td { diff --git a/customize.dist/main.js b/customize.dist/main.js index a03e0922a..a14f56d7c 100644 --- a/customize.dist/main.js +++ b/customize.dist/main.js @@ -33,7 +33,8 @@ define([ var displayCreateButtons = function () { var $parent = $('#buttons'); Config.availablePadTypes.forEach(function (el) { - $('#create-' + el).detach().appendTo($parent).attr('target', '_blank').show(); + $('#create-' + el)//.detach().appendTo($parent) + .attr('target', '_blank').show(); }); }; @@ -165,7 +166,7 @@ define([ Cryptpad.styleAlerts(); - refreshTable(); + //refreshTable(); if (Cryptpad.store && Cryptpad.store.change) { Cryptpad.store.change(function (data) { if (data.key === 'CryptPad_RECENTPADS') { diff --git a/customize.dist/privacy.html b/customize.dist/privacy.html index f985948b2..96ed6325f 100644 --- a/customize.dist/privacy.html +++ b/customize.dist/privacy.html @@ -14,20 +14,37 @@ }); - - + +
+ + + CryptPad + + + + + + + About + + + Privacy + + + ToS + + + Contact + +
+ + + - -
-
- -
- -
diff --git a/customize.dist/src/build.js b/customize.dist/src/build.js index b07b88775..294dccbaf 100644 --- a/customize.dist/src/build.js +++ b/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, diff --git a/customize.dist/src/fragments/about.html b/customize.dist/src/fragments/about.html index f1af5d263..878c50009 100644 --- a/customize.dist/src/fragments/about.html +++ b/customize.dist/src/fragments/about.html @@ -1,3 +1,4 @@ +

About

@@ -6,5 +7,5 @@

- +
diff --git a/customize.dist/src/fragments/contact.html b/customize.dist/src/fragments/contact.html new file mode 100644 index 000000000..30415ef0e --- /dev/null +++ b/customize.dist/src/fragments/contact.html @@ -0,0 +1,8 @@ +
+
+

Contact

+
+ +

+
+ diff --git a/customize.dist/src/fragments/fork.html b/customize.dist/src/fragments/fork.html index 5b0e26a67..b4f459923 100644 --- a/customize.dist/src/fragments/fork.html +++ b/customize.dist/src/fragments/fork.html @@ -1,3 +1,3 @@ - + diff --git a/customize.dist/src/fragments/index.html b/customize.dist/src/fragments/index.html index c43ee7444..de381bfa3 100644 --- a/customize.dist/src/fragments/index.html +++ b/customize.dist/src/fragments/index.html @@ -1,42 +1,34 @@ -
-

-
+
+
+

-

- -
+
+
+
+
+ +
+
- - - +
+
+

Join Us!

+
+
+
-
- - - - - - +
+
- - +
+
+
+ -
- - - - -
+
+ - -

-

diff --git a/customize.dist/src/fragments/privacy.html b/customize.dist/src/fragments/privacy.html index f312e01c7..e489d7025 100644 --- a/customize.dist/src/fragments/privacy.html +++ b/customize.dist/src/fragments/privacy.html @@ -1,3 +1,4 @@ +

@@ -24,6 +25,6 @@


- +
diff --git a/customize.dist/src/fragments/terms.html b/customize.dist/src/fragments/terms.html index ed187fe05..11ae1c512 100644 --- a/customize.dist/src/fragments/terms.html +++ b/customize.dist/src/fragments/terms.html @@ -1,3 +1,4 @@ +

@@ -7,4 +8,5 @@

+
diff --git a/customize.dist/src/fragments/topbar.html b/customize.dist/src/fragments/topbar.html new file mode 100644 index 000000000..1516073e0 --- /dev/null +++ b/customize.dist/src/fragments/topbar.html @@ -0,0 +1,22 @@ +
+ + + CryptPad + + + + + + + About + + + Privacy + + + ToS + + + Contact + +
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index 804dc6f98..44b248438 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/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; } diff --git a/customize.dist/src/less/topbar.less b/customize.dist/src/less/topbar.less new file mode 100644 index 000000000..fb5cc42a2 --- /dev/null +++ b/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; + } + } +} diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index eb5df4636..1d2230326 100644 --- a/customize.dist/src/less/variables.less +++ b/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%); diff --git a/customize.dist/src/template.html b/customize.dist/src/template.html index 48ad32103..d52a044b3 100644 --- a/customize.dist/src/template.html +++ b/customize.dist/src/template.html @@ -14,18 +14,15 @@ }); - + + {{topbar}} + {{fork}} - -
-{{logo}} - {{noscript}} {{main}} -
diff --git a/customize.dist/terms.html b/customize.dist/terms.html index e4e4e1e2a..6722e3586 100644 --- a/customize.dist/terms.html +++ b/customize.dist/terms.html @@ -14,20 +14,37 @@ }); - - - + +
+ + + CryptPad + + + + + About + + + Privacy + + + ToS + + + Contact + +
- -
-
- -
+ + + +
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index f91a81d09..0bf478e03 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -298,6 +298,9 @@ define(function () { out.button_newpoll = 'NEW POLL'; out.button_newslide = 'NEW PRESENTATION'; + out.form_username = "Username"; + out.form_password = "Password"; + // privacy.html out.policy_title = 'Cryptpad Privacy Policy'; diff --git a/server.js b/server.js index e23f9bcb4..a0fe6661b 100644 --- a/server.js +++ b/server.js @@ -47,7 +47,7 @@ Fs.exists(__dirname + "/customize", function (e) { // FIXME I think this is a regression caused by a recent PR // correct this hack without breaking the contributor's intended behaviour. -var mainPages = config.mainPages || ['index', 'privacy', 'terms', 'about']; +var mainPages = config.mainPages || ['index', 'privacy', 'terms', 'about', 'contact']; var mainPagePattern = new RegExp('^\/(' + mainPages.join('|') + ').html$'); app.get(mainPagePattern, Express.static(__dirname + '/customize.dist'));