diff --git a/customize.dist/images/code.png b/customize.dist/images/code.png new file mode 100644 index 000000000..e5b966143 Binary files /dev/null and b/customize.dist/images/code.png differ diff --git a/customize.dist/images/hash.png b/customize.dist/images/hash.png new file mode 100644 index 000000000..b1b662912 Binary files /dev/null and b/customize.dist/images/hash.png differ diff --git a/customize.dist/images/pad.png b/customize.dist/images/pad.png new file mode 100644 index 000000000..deb962bd7 Binary files /dev/null and b/customize.dist/images/pad.png differ diff --git a/customize.dist/images/poll.png b/customize.dist/images/poll.png new file mode 100644 index 000000000..776864526 Binary files /dev/null and b/customize.dist/images/poll.png differ diff --git a/customize.dist/images/realtime.png b/customize.dist/images/realtime.png new file mode 100644 index 000000000..8f4d65168 Binary files /dev/null and b/customize.dist/images/realtime.png differ diff --git a/customize.dist/images/slide.png b/customize.dist/images/slide.png new file mode 100644 index 000000000..9affdc923 Binary files /dev/null and b/customize.dist/images/slide.png differ diff --git a/customize.dist/images/useraccount.png b/customize.dist/images/useraccount.png new file mode 100644 index 000000000..8bcec5b39 Binary files /dev/null and b/customize.dist/images/useraccount.png differ diff --git a/customize.dist/images/zk.png b/customize.dist/images/zk.png new file mode 100644 index 000000000..4433b257b Binary files /dev/null and b/customize.dist/images/zk.png differ diff --git a/customize.dist/index.html b/customize.dist/index.html index 794c1aea9..3301dc76e 100644 --- a/customize.dist/index.html +++ b/customize.dist/index.html @@ -64,39 +64,159 @@
-
-

+
+

+
+ + +
+ +
+ +
+ +
+ + +
+ +
+
+
+
+
+
+
+
+
+

Know more

+
+
+
+
+ Zero Knowledge +
+
-
+

Zero Knowledge

- -
+

+ Every tool provided by Cryptpad are based on a Zero Knowledge technology. It means that our server stored only encrypted data, and we have no way to decrypt it. Even data about your account, including your username, are encrypted. Only people with whom you have shared the URL are allowed to decrypt the data and join the collaborative session. The encryption is carried out by your browser, which means that our server has no knowledge of the encryption key. +

+
+
+
+
+
+

Realtime

+
+

+ Our tools also use a Realtime technology, which means that you can edit the documents, slides or polls collaboratively with other people. Our unique technology has the advantage of combining both realtime and zero-knowledge at the same time. Other realtime solutions work with a main server containing the document and managing conflicts (when two users want to realize contradictory operations). Our Zero Knowledge principle exclude that solution since the server doesn't know the content of the document, so the conflicts are managed by your browser in a way that all users in the session resolve the conflict with the same result. +

+
+
+ User account +
+
+
+
+ User account +
+
+
+

Share documents

+
+

+ When you want to edit a document with other users or invite them to answer to a poll, you just have to share the URL of that document with them. All the information needed to access and edit it are contained in the "hash" of the URL. A first part of that hash represents the location of the data in our server, the second part allows your browser to decrypt the content of that document and encrypt new modifications you may want to make. +

+
+
+
+
+
+

User Account

+
+

+ In order to have Zero Knowledge user accounts, we needed a way to store your settings without knowing your username and password. To do so, our tools generate a unique key from your username and password, directly in your browser. The entire key is never sent to our server and there is no way to determine either your username or your password from it. A small part of that key is used to locate your account data in our server, and the other part is used to encrypt and decrypt it (in your browser). That way, the server never has access to your decrypted data or to your decryption key. +

+
+
+ User account +
+
+
+
+

Try it out!

+
+
+
+
+ Rich Text application +
+
+
+

Rich Text editor

+
+

+ Edit rich text documents collaboratively with our realtime Zero Knowledge CkEditor application. +

+

+

+
+
+
+
+
+

Code editor

+
+

+ Create or debug code from your software (using any programming language) collaboratively with your colleagues with our realtime Zero Knowledge CodeMirror application. +

+

- - -
- -

- +

+
+ Code application +
+
-
- - -
- -
-
-
-
+
+
+ Slide applcation
+
+
+

Slide editor

+
+

+ Create your presentation collaboratively with our CryptSlide application. Slides are written use Markdown syntax and you can choose the background and text colors when presenting it. +

+

+ +

+
+
+
+
+
+

Polls

+
+

+ Plan your meeting or your event, or determine what is the best solution for your problem using our poll application. Don't worry about sensible data, everything here is also Zero Knowledge and only people with the poll link can access the data. +

+

+ +

+
+
+ Poll application
- diff --git a/customize.dist/main.css b/customize.dist/main.css index 3784e3318..39ebe2a32 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -3,7 +3,7 @@ */ .alertify-logs > * { padding: 12px 48px; - color: #111; + color: #fafafa; font-weight: bold; font-size: large; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); @@ -14,7 +14,7 @@ background: rgba(0, 0, 0, 0.8); } .alertify-logs > *.error { - background: #FF0073; + background: #FA5858; } .alertify-logs > *.success { background: #46E981; @@ -23,6 +23,7 @@ .alertify { position: fixed; background-color: rgba(0, 0, 0, 0.3); + color: #fafafa; left: 0; right: 0; top: 0; @@ -112,8 +113,8 @@ font-size: 14px; text-decoration: none; cursor: pointer; - color: #111; - border: 1px solid #f5f5f5; + color: #fafafa; + border: 1px solid #302B28; border-radius: 5px; } .alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover, @@ -124,7 +125,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 #f5f5f5; + border: 1px dotted #302B28; } .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 { @@ -305,7 +306,8 @@ bottom: 0px; left: 0px; right: 0px; - background: #f5f5f5; + background: #302B28; + color: #fafafa; text-align: center; font-size: 1.5em; } @@ -575,18 +577,43 @@ html.cp, font-size: 1.02em; } .cp .page { - width: 70vw; - height: 90vh; - margin-left: 15vw; - background: blue; + width: 100%; + margin-left: auto; + margin-right: auto; + background: #f5f5f5; + padding: 10px 15vw; + position: relative; } .cp .page.first { - margin-top: calc(100vh - 80px); + margin-top: calc(100vh - 50px); } -.cp .page2 { - width: 70vw; - height: 100vh; - background: red; +.cp .page.even { + background: #dcdcdc; +} +.cp .page.category { + background: #c2c2c2; +} +.cp .page .left { + padding: 10px; + width: 45%; + position: relative; + left: 0; + display: inline-block; + vertical-align: middle; +} +.cp .page .right { + padding: 10px; + width: 45%; + position: relative; + left: 10%; + display: inline-block; + vertical-align: middle; +} +.cp .page .image { + text-align: center; +} +.cp .page p { + text-align: justify; } .cp .btn-default:hover { background-color: #d8d8d8; @@ -728,10 +755,14 @@ html.cp, } .cp #main .buttons, .cp #main_other .buttons { + margin-top: 15px; +} +.cp p.buttons, +.cp div.buttons { text-align: center; } -.cp #main .buttons button, -.cp #main_other .buttons button { +.cp p.buttons button, +.cp div.buttons button { font-weight: bold; cursor: pointer; margin-top: 10px; @@ -763,7 +794,7 @@ html.cp, line-height: 1.5em; } .cp .panel { - background-color: #333; + background-color: #c2c2c2; } .cp table { border-collapse: collapse; @@ -771,7 +802,7 @@ html.cp, margin: 20px; } .cp tbody { - border: 2px solid black; + border: 1px solid #555; } .cp tbody tr { text-align: center; @@ -796,7 +827,7 @@ html.cp, } .cp tbody tr th { box-sizing: border-box; - border: 1px solid black; + border: 1px solid #555; } .cp tbody tr th, .cp tbody tr td { @@ -810,7 +841,7 @@ html.cp, border-right: 0px; } .cp tbody td { - border-right: 1px solid black; + border-right: 1px solid #555; padding: 12px; padding-top: 0px; padding-bottom: 0px; @@ -825,7 +856,7 @@ html.cp, border-top-left-radius: 5px; } .cp .remove { - color: #FF0073; + color: #FA5858; cursor: pointer !important; } .cp form.realtime, @@ -871,7 +902,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: #111; + color: #000; font-weight: bold; } .cp form.realtime table tr td.checkbox-cell, @@ -905,8 +936,8 @@ html.cp, .cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, .cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { font-weight: bold; - background-color: #FF0073; - color: #f5f5f5; + background-color: #FA5858; + color: #000; display: block; } .cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, @@ -942,7 +973,7 @@ html.cp, .cp form.realtime table thead td, .cp div.realtime table thead td { padding: 0px 5px; - background: #ffffff; + background: #aaa; border-radius: 20px 20px 0 0; text-align: center; } @@ -953,13 +984,13 @@ html.cp, } .cp form.realtime table thead td input[type="text"][disabled], .cp div.realtime table thead td input[type="text"][disabled] { - color: white; + color: #000; padding: 1px 5px; border: none; } .cp form.realtime table tbody .text-cell, .cp div.realtime table tbody .text-cell { - background: #ffffff; + background: #aaa; } .cp form.realtime table tbody .text-cell input[type="text"], .cp div.realtime table tbody .text-cell input[type="text"] { @@ -975,6 +1006,10 @@ html.cp, float: left; margin: 0 0 0 10px; } +.cp form.realtime table tbody td label, +.cp div.realtime table tbody td label { + border: 0.5px solid #555; +} .cp form.realtime table .edit, .cp div.realtime table .edit { color: #46E981; @@ -1055,7 +1090,7 @@ html.cp, width: 100%; height: 100vh; display: none; - background-color: #f5f5f5; + background-color: #000; } .cp div.modal #content, .cp div#modal #content { @@ -1122,6 +1157,20 @@ html.cp, font-size: 1.6vw; line-height: 1.76vw; } +.cp div.modal #content h1, +.cp div#modal #content h1, +.cp div.modal #content h2, +.cp div#modal #content h2, +.cp div.modal #content h3, +.cp div#modal #content h3, +.cp div.modal #content h4, +.cp div#modal #content h4, +.cp div.modal #content h5, +.cp div#modal #content h5, +.cp div.modal #content h6, +.cp div#modal #content h6 { + color: inherit; +} .cp div.modal #content pre > code, .cp div#modal #content pre > code { display: block; diff --git a/customize.dist/main.js b/customize.dist/main.js index 6851535f8..186f7f4b6 100644 --- a/customize.dist/main.js +++ b/customize.dist/main.js @@ -181,6 +181,20 @@ define([ $('button.nologin').click(function (e) { document.location.href = '/drive'; }); + $('button.knowmore').click(function (e) { + e.preventDefault(); + + $('html, body').animate({ + scrollTop: $('#knowmore').offset().top + }, 500); + }); + $('button.tryit').click(function (e) { + e.preventDefault(); + + $('html, body').animate({ + scrollTop: $('#tryit').offset().top + }, 500); + }); }; displayCreateButtons(); diff --git a/customize.dist/src/fragments/index.html b/customize.dist/src/fragments/index.html index 849a8d5ac..87a87a684 100644 --- a/customize.dist/src/fragments/index.html +++ b/customize.dist/src/fragments/index.html @@ -6,15 +6,9 @@

-
-
-
-
- - - - + +
@@ -35,5 +29,131 @@
+
+
+

Know more

+
+
+
+
+ Zero Knowledge +
+
+
+

Zero Knowledge

+
+

+ Every tool provided by Cryptpad are based on a Zero Knowledge technology. It means that our server stored only encrypted data, and we have no way to decrypt it. Even data about your account, including your username, are encrypted. Only people with whom you have shared the URL are allowed to decrypt the data and join the collaborative session. The encryption is carried out by your browser, which means that our server has no knowledge of the encryption key. +

+
+
+
+
+
+

Realtime

+
+

+ Our tools also use a Realtime technology, which means that you can edit the documents, slides or polls collaboratively with other people. Our unique technology has the advantage of combining both realtime and zero-knowledge at the same time. Other realtime solutions work with a main server containing the document and managing conflicts (when two users want to realize contradictory operations). Our Zero Knowledge principle exclude that solution since the server doesn't know the content of the document, so the conflicts are managed by your browser in a way that all users in the session resolve the conflict with the same result. +

+
+
+ User account +
+
+
+
+ User account +
+
+
+

Share documents

+
+

+ When you want to edit a document with other users or invite them to answer to a poll, you just have to share the URL of that document with them. All the information needed to access and edit it are contained in the "hash" of the URL. A first part of that hash represents the location of the data in our server, the second part allows your browser to decrypt the content of that document and encrypt new modifications you may want to make. +

+
+
+
+
+
+

User Account

+
+

+ In order to have Zero Knowledge user accounts, we needed a way to store your settings without knowing your username and password. To do so, our tools generate a unique key from your username and password, directly in your browser. The entire key is never sent to our server and there is no way to determine either your username or your password from it. A small part of that key is used to locate your account data in our server, and the other part is used to encrypt and decrypt it (in your browser). That way, the server never has access to your decrypted data or to your decryption key. +

+
+
+ User account +
+
+
+
+

Try it out!

+
+
+
+
+ Rich Text application +
+
+
+

Rich Text editor

+
+

+ Edit rich text documents collaboratively with our realtime Zero Knowledge CkEditor application. +

+

+ +

+
+
+
+
+
+

Code editor

+
+

+ Create or debug code from your software (using any programming language) collaboratively with your colleagues with our realtime Zero Knowledge CodeMirror application. +

+

+ +

+
+
+ Code application +
+
+
+
+ Slide applcation +
+
+
+

Slide editor

+
+

+ Create your presentation collaboratively with our CryptSlide application. Slides are written use Markdown syntax and you can choose the background and text colors when presenting it. +

+

+ +

+
+
+
+
+
+

Polls

+
+

+ Plan your meeting or your event, or determine what is the best solution for your problem using our poll application. Don't worry about sensible data, everything here is also Zero Knowledge and only people with the poll link can access the data. +

+

+ +

+
+
+ Poll application +
+
diff --git a/customize.dist/src/less/alertify.less b/customize.dist/src/less/alertify.less index 957bacfca..8add4bc13 100644 --- a/customize.dist/src/less/alertify.less +++ b/customize.dist/src/less/alertify.less @@ -6,7 +6,7 @@ .alertify-logs { > * { padding: @padding-base @padding-base * 4; - color: @fore; + color: @alertify-fore; font-weight: bold; font-size: large; @@ -30,6 +30,7 @@ .alertify { position: fixed; background-color: @alertify-bg; + color: @alertify-fg; left: 0; right: 0; top: 0; @@ -128,7 +129,7 @@ cursor: pointer; color: @alertify-btn-fg; - border: 1px solid @base; + border: 1px solid @alertify-base; border-radius: 5px; &:hover, &:active { @@ -136,7 +137,7 @@ } &:focus { - border: 1px dotted @base; + border: 1px dotted @alertify-base; } &::-moz-focus-inner { border:0; diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index 559fb74b3..aab998b20 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -129,19 +129,46 @@ p, pre, td, a, table, tr { body.html { } .page { - width: 70vw; - height: 90vh; - margin-left: 15vw; - background: blue; + width: 100%; + margin-left: auto; + margin-right: auto; + background: @base; + padding: 10px @main-border-width; + position: relative; + &.first { - margin-top: ~"calc(100vh - 80px)"; + margin-top: ~"calc(100vh - 50px)"; + } + &.even { + background: darken(@base, 10%); + } + &.category { + background: darken(@base, 20%); + } + + .left { + padding: 10px; + width: 45%; + position: relative; + left: 0; //@main-border-width; + display: inline-block; + vertical-align: middle; + } + .right { + padding: 10px; + width: 45%; + position: relative; + left: 10%; //@main-border-width; + display: inline-block; + vertical-align: middle; + } + .image { + text-align: center; } - } - .page2 { - width: 70vw; - height: 100vh; - background: red; + p { + text-align: justify; + } } .btn-default { @@ -283,14 +310,16 @@ body.html { } } } - .buttons { - text-align: center; - button { - font-weight: bold; - cursor: pointer; - margin-top: 10px; - } + margin-top: 15px; + } +} +p.buttons, div.buttons { + text-align: center; + button { + font-weight: bold; + cursor: pointer; + margin-top: 10px; } } @@ -335,7 +364,7 @@ body.html { // currently only used in /user/ .panel { - background-color: #333; + background-color: @dark-base; } /* Tables @@ -347,7 +376,7 @@ table { margin: 20px; } tbody { - border: 2px solid black; + border: 1px solid @poll-border-color; tr { text-align: center; &:first-of-type th{ @@ -371,7 +400,7 @@ tbody { } th { box-sizing: border-box; - border: 1px solid black; + border: 1px solid @poll-border-color; } th, td { color: @fore; @@ -386,7 +415,7 @@ tbody { } td { - border-right: 1px solid black; + border-right: 1px solid @poll-border-color; padding: 12px; padding-top: 0px; padding-bottom: 0px; @@ -451,7 +480,7 @@ form.realtime, div.realtime { border: 0px; &[disabled] { background-color: transparent; - color: @fore; + color: @poll-fg; font-weight: bold; } } @@ -489,7 +518,7 @@ form.realtime, div.realtime { font-weight: bold; background-color: @cp-red; - color: @base; + color: @poll-cover-color; &:after { height: 100%; @@ -530,7 +559,7 @@ form.realtime, div.realtime { thead { td { padding: 0px 5px; - background: @less-light-base; + background: @poll-th-bg; border-radius: 20px 20px 0 0; text-align: center; input { @@ -538,7 +567,7 @@ form.realtime, div.realtime { width: 100%; box-sizing: border-box; &[disabled] { - color: white; + color: @poll-fg; padding: 1px 5px; border: none; } @@ -549,7 +578,7 @@ form.realtime, div.realtime { tbody { .text-cell { - background: @less-light-base; + background: @poll-td-bg; //border-radius: 20px 0 0 20px; input[type="text"] { width: ~"calc(100% - 50px)"; @@ -563,6 +592,11 @@ form.realtime, div.realtime { margin: 0 0 0 10px; } } + td { + label { + border: .5px solid @poll-border-color; + } + } } .edit { color: @cp-green; @@ -691,6 +725,10 @@ div.modal, div#modal { h5 { .size(2.2); } h6 { .size(1.6); } + h1, h2, h3, h4, h5, h6 { + color: inherit; + } + pre > code { display: block; position: relative; @@ -719,7 +757,7 @@ div.modal, div#modal { height: 100vh; display: none; - background-color: @base; + background-color: @slide-default-bg; .center { position: relative; diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less index bf719e587..fefc533fe 100644 --- a/customize.dist/src/less/loading.less +++ b/customize.dist/src/less/loading.less @@ -6,6 +6,7 @@ left: 0px; right: 0px; background: @bg-loading; + color: @color-loading; text-align: center; font-size: 1.5em; .loadingContainer { diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 4409c1f50..346042ed7 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -1,13 +1,17 @@ @base: #f5f5f5; +@dark-base: darken(@base, 20%); +@less-dark-base: darken(@base, 10%); @light-base: lighten(@base, 20%); @less-light-base: lighten(@base, 10%); @fore: #111; @old-base: #302B28; +@old-fore: #fafafa; @cp-green: #46E981; @cp-accent: lighten(@cp-green, 20%); -@cp-red: #FF0073; // remove red +//@cp-red: #FF0073; // remove red +@cp-red: #FA5858; // remove red @cp-outline: #444; @cp-orange: #FE9A2E; @@ -28,20 +32,33 @@ @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: @fore; +@alertify-dialog-fg: @old-fore; -@alertify-btn-fg: @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: @base; @alertify-input-fg: @fore; -@bg-loading: @base; +@slide-default-bg: #000; + +@poll-th-bg: #aaa; +@poll-td-bg: #aaa; +@poll-border-color: #555; +@poll-cover-color: #000; +@poll-fg: #000; + +@bg-loading: @old-base; +@color-loading: @old-fore; @media-not-big: 800px; @media-not-small: 801px; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 572055def..c33ea3d44 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -389,7 +389,7 @@ background-color: #46E981; } .lag-red { - background-color: #FF0073; + background-color: #FA5858; } .lag-orange { background-color: #FE9A2E; diff --git a/www/poll/index.html b/www/poll/index.html index 79e4c22b4..a55996dce 100644 --- a/www/poll/index.html +++ b/www/poll/index.html @@ -46,11 +46,6 @@ font: white; border: 0px; } - - td label { - border: .5px solid black; - } - table#table { margin: 0px; } @@ -98,7 +93,7 @@ } #description[disabled] { resize: none; - color: #bbb; + color: #000; border: 1px solid #444; } diff --git a/www/poll/main.js b/www/poll/main.js index ab696ecb5..ef79b703d 100644 --- a/www/poll/main.js +++ b/www/poll/main.js @@ -751,8 +751,9 @@ define([ .on('disconnect', disconnect); Cryptpad.getAttribute(HIDE_INTRODUCTION_TEXT, function (e, value) { + console.log(value); if (e) { console.error(e); } - if (value === null) { + if (!value) { Cryptpad.setAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) { if (e) { console.error(e); } });