Improve homepage CSS and responsiveness

pull/1/head
yflory 8 years ago
parent 26bea774cb
commit fd78e4fa92

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

@ -77,16 +77,16 @@
</div> </div>
<div id="userForm"> <div id="userForm" class="form-group">
<!--<center> <!--<center>
<h1 data-localization="form_title"></h1> <h1 data-localization="form_title"></h1>
</center>--> </center>-->
<!--<label for="name" data-localization="form_username"></label>--> <!--<label for="name" data-localization="form_username"></label>-->
<input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br> <input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus><br>
<!--<label for="password" data-localization="form_password"></label>--><br> <!--<label for="password" data-localization="form_password"></label>-->
<input type="password" id="password" name="password" data-localization-placeholder="login_password"><br> <input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><br>
<span class="remember"><input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label></span><br> <span class="remember form-check"><label for="rememberme" class="form-check-label" data-localization-append="login_remember"><input type="checkbox" id="rememberme" class="form-check-input" checked="checked"></label></span><br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br> <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
</div> </div>
</div> </div>
@ -97,55 +97,55 @@
</center> </center>
</div> </div>
<div class="page"> <div class="page">
<div class="left image"> <div class="info-container">
<img src="customize/images/zk.png" alt="Zero Knowledge" /> <div class="left image">
</div> <img src="customize/images/zk.png" alt="Zero Knowledge" />
<div class="right"> </div>
<center> <div class="right">
<h2>Zero Knowledge</h2> <h2>Zero Knowledge</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> </div>
</div> </div>
<div class="page even"> <div class="page even">
<div class="left"> <div class="info-container">
<center> <div class="left">
<h2>Realtime</h2> <h2>Realtime</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> <div class="right image">
<div class="right image"> <img src="customize/images/realtime.png" alt="User account" />
<img src="customize/images/realtime.png" alt="User account" /> </div>
</div> </div>
</div> </div>
<div class="page"> <div class="page">
<div class="left image"> <div class="info-container">
<img src="customize/images/hash.png" alt="User account" /> <div class="left image">
</div> <img src="customize/images/hash.png" alt="User account" />
<div class="right"> </div>
<center> <div class="right">
<h2>Share documents</h2> <h2>Share documents</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> </div>
</div> </div>
<div class="page even"> <div class="page even">
<div class="left"> <div class="info-container">
<center> <div class="left">
<h2>User Account</h2> <h2>User Account</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> <div class="right image">
<div class="right image"> <img src="customize/images/useraccount.png" alt="User account" />
<img src="customize/images/useraccount.png" alt="User account" /> </div>
</div> </div>
</div> </div>
<div class="page category" id="tryit"> <div class="page category" id="tryit">
@ -154,68 +154,57 @@
</center> </center>
</div> </div>
<div class="page"> <div class="page">
<div class="left image"> <div class="app-container">
<img src="customize/images/pad.png" alt="Rich Text application" /> <div class="app-row">
</div> <div class="app">
<div class="right"> <center>
<center> <h2>Rich Text editor</h2>
<h2>Rich Text editor</h2> <img src="customize/images/pad.png" alt="Rich Text application" />
</center> </center>
<p> <p>
Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application. Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.
</p> </p>
<p class="buttons"> <p class="buttons">
<a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a> <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
</p> </p>
</div> </div><div class="app">
</div> <center>
<div class="page even"> <h2>Code editor</h2>
<div class="left"> <img src="customize/images/code.png" alt="Code application" />
<center> </center>
<h2>Code editor</h2> <p>
</center> Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.
<p> </p>
Create or debug code from your software (using any programming language) collaboratively with your colleagues with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application. <p class="buttons">
</p> <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
<p class="buttons"> </p>
<a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a> </div><!--
</p> --></div><!--
</div> --><div class="app-row"><!--
<div class="right image"> --><div class="app">
<img src="customize/images/code.png" alt="Code application" /> <center>
</div> <h2>Slide editor</h2>
</div> <img src="customize/images/slide.png" alt="Slide applcation" />
</center>
<div class="page"> <p>
<div class="left image"> Create your presentations using the Markdown syntax with our CryptSlide application, and display them in your browser.
<img src="customize/images/slide.png" alt="Slide applcation" /> </p>
</div> <p class="buttons">
<div class="right"> <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
<center> </p>
<h2>Slide editor</h2> </div><div class="app">
</center> <center>
<p> <h2>Polls</h2>
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. <img src="customize/images/poll.png" alt="Poll application" />
</p> </center>
<p class="buttons"> <p>
<a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a> Plan your meeting or your event, or vote for the best solution regarding your problem using our poll application.
</p> </p>
</div> <p class="buttons">
</div> <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
<div class="page even"> </p>
<div class="left"> </div>
<center> </div>
<h2>Polls</h2>
</center>
<p>
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.
</p>
<p class="buttons">
<a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
</p>
</div>
<div class="right image">
<img src="customize/images/poll.png" alt="Poll application" />
</div> </div>
</div> </div>

@ -18,7 +18,7 @@
} }
.alertify-logs > *.success { .alertify-logs > *.success {
background: #46E981; background: #46E981;
color: #f5f5f5; color: #fff;
} }
.alertify { .alertify {
position: fixed; position: fixed;
@ -80,8 +80,8 @@
} }
.alertify .dialog input:not(.form-control), .alertify .dialog input:not(.form-control),
.alertify .alert input:not(.form-control) { .alertify .alert input:not(.form-control) {
background-color: #f5f5f5; background-color: #fff;
color: #111; color: #555;
border: 0px; border: 0px;
border-radius: 5px; border-radius: 5px;
margin-bottom: 15px; margin-bottom: 15px;
@ -211,7 +211,7 @@
height: 2.5em; height: 2.5em;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
background: #f5f5f5; background: #fff;
border-top: 1px solid #444; border-top: 1px solid #444;
} }
.top-bar a, .top-bar a,
@ -227,7 +227,7 @@
display: block; display: block;
margin-left: 10px; margin-left: 10px;
padding-top: 3px; padding-top: 3px;
color: #111; color: #555;
} }
.top-bar img, .top-bar img,
.bottom-bar img { .bottom-bar img {
@ -465,8 +465,8 @@
html.cp, html.cp,
.cp body { .cp body {
font-size: .875em; font-size: .875em;
background-color: #f5f5f5; background-color: #fff;
color: #111; color: #555;
font-family: Georgia,Cambria,serif; font-family: Georgia,Cambria,serif;
height: 100%; height: 100%;
} }
@ -505,7 +505,7 @@ html.cp,
.cp h4, .cp h4,
.cp h5, .cp h5,
.cp h6 { .cp h6 {
color: #111; color: #555;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
@ -582,54 +582,93 @@ html.cp,
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: #f5f5f5; background: #fff;
padding: 10px 15vw; padding: 10px 0;
position: relative; position: relative;
} }
.cp .page.first { .cp .page .info-container {
margin-top: calc(100vh - 50px); width: 900px;
max-width: 100%;
margin: 0 auto;
}
.cp .page .info-container > div {
padding: 10px;
width: 400px;
max-width: 100%;
position: relative;
display: inline-block;
vertical-align: middle;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.cp .page.first { .cp .page .info-container > div:not(.image) {
margin-top: 0; width: 100%;
left: 0;
} }
} }
.cp .page.even { .cp .page .info-container > div.image {
background: #dcdcdc; text-align: center;
} }
.cp .page.category { @media screen and (max-width: 800px) {
background: #c2c2c2; .cp .page .info-container > div.image {
display: none;
}
} }
.cp .page .left { @media screen and (max-width: 800px) {
left: 0;
} }
.cp .page .right { .cp .page.category {
left: 10%; background: #f7f7f7;
} }
@media screen and (max-width: 800px) { .cp .page .app {
.cp .page { display: inline-block;
padding: 10px 5vh; width: 300px;
vertical-align: middle;
margin: 0px 25px;
white-space: normal;
max-width: calc(50% - 50px);
}
@media screen and (max-width: 500px) {
.cp .page .app {
display: block;
max-width: 100%;
margin: 0 auto;
} }
} }
.cp .page > div { .cp .page .app-container {
padding: 10px; width: 1400px;
width: 45%; max-width: 100%;
position: relative; margin: 0 auto;
}
.cp .page .app-row {
display: inline-block; display: inline-block;
vertical-align: middle; white-space: nowrap;
width: 700px;
max-width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 1399px) {
.cp .page .app-row {
display: block;
}
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.cp .page > div:not(.image) { .cp .page .app-row img {
width: 100%; display: none;
left: 0;
} }
} }
.cp .page .image { .cp .page .right {
text-align: center; left: 100px;
}
.cp .page h1,
.cp .page h2,
.cp .page h3,
.cp .page h4,
.cp .page h5,
.cp .page h6 {
padding: 0;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.cp .page .image { .cp .page {
display: none; padding: 10px 5vh;
} }
} }
.cp .page p { .cp .page p {
@ -649,10 +688,11 @@ html.cp,
} }
.cp #main, .cp #main,
.cp #main_other { .cp #main_other {
position: absolute; position: relative;
left: 0; left: 0;
right: 0; right: 0;
height: calc(100vh - 50px); height: calc(100vh - 150px);
min-height: 450px;
margin: auto; margin: auto;
font-size: medium; font-size: medium;
} }
@ -729,6 +769,22 @@ html.cp,
box-sizing: border-box; box-sizing: border-box;
font-family: lato, Helvetica, sans-serif; font-family: lato, Helvetica, sans-serif;
color: #fff; color: #fff;
/*.remember {
vertical-align: middle;
line-height: 28px;
height: 28px;
display: inline-block;
margin: 10px 0 20px 0;
}
[type="checkbox"] {
vertical-align: text-top;
margin: 0;
//margin-top: 10px;
margin-right: 5px;
}
*/
} }
.cp #main #userForm h1, .cp #main #userForm h1,
.cp #main_other #userForm h1 { .cp #main_other #userForm h1 {
@ -741,24 +797,14 @@ html.cp,
.cp #main_other #userForm [type="password"] { .cp #main_other #userForm [type="password"] {
width: 100%; width: 100%;
} }
.cp #main #userForm .remember, .cp #main #userForm label,
.cp #main_other #userForm .remember { .cp #main_other #userForm label {
vertical-align: middle; margin-bottom: 0;
line-height: 28px;
height: 28px;
display: inline-block;
margin: 10px 0 20px 0;
} }
.cp #main #userForm [type="checkbox"], .cp #main #userForm [type="checkbox"],
.cp #main_other #userForm [type="checkbox"] { .cp #main_other #userForm [type="checkbox"] {
vertical-align: text-top;
margin: 0;
margin-right: 5px; margin-right: 5px;
} }
.cp #main #userForm label,
.cp #main_other #userForm label {
margin-bottom: 0;
}
.cp #main #userForm button, .cp #main #userForm button,
.cp #main_other #userForm button { .cp #main_other #userForm button {
font-weight: bold; font-weight: bold;
@ -809,7 +855,6 @@ html.cp,
.cp #main_other { .cp #main_other {
position: relative; position: relative;
height: auto; height: auto;
background: #aaa;
top: -10px; top: -10px;
} }
} }
@ -854,7 +899,7 @@ html.cp,
line-height: 1.5em; line-height: 1.5em;
} }
.cp .panel { .cp .panel {
background-color: #c2c2c2; background-color: #cccccc;
} }
.cp table { .cp table {
border-collapse: collapse; border-collapse: collapse;
@ -891,7 +936,7 @@ html.cp,
} }
.cp tbody tr th, .cp tbody tr th,
.cp tbody tr td { .cp tbody tr td {
color: #111; color: #555;
} }
.cp tbody tr th.remove, .cp tbody tr th.remove,
.cp tbody tr td.remove { .cp tbody tr td.remove {
@ -1027,7 +1072,7 @@ html.cp,
.cp form.realtime table input[type="text"], .cp form.realtime table input[type="text"],
.cp div.realtime table input[type="text"] { .cp div.realtime table input[type="text"] {
height: auto; height: auto;
border: 1px solid #f5f5f5; border: 1px solid #fff;
width: 80%; width: 80%;
} }
.cp form.realtime table thead td, .cp form.realtime table thead td,
@ -1087,7 +1132,7 @@ html.cp,
.cp form.realtime table thead tr th input[type="text"][disabled], .cp form.realtime table thead tr th input[type="text"][disabled],
.cp div.realtime table thead tr th input[type="text"][disabled] { .cp div.realtime table thead tr th input[type="text"][disabled] {
background-color: transparent; background-color: transparent;
color: #111; color: #555;
font-weight: bold; font-weight: bold;
} }
.cp form.realtime table thead tr th .remove, .cp form.realtime table thead tr th .remove,
@ -1294,7 +1339,7 @@ html.cp,
.cp div#modal table input { .cp div#modal table input {
height: 100%; height: 100%;
width: 90%; width: 90%;
border: 3px solid #f5f5f5; border: 3px solid #fff;
} }
.cp div.modal table tfoot tr td, .cp div.modal table tfoot tr td,
.cp div#modal table tfoot tr td { .cp div#modal table tfoot tr td {

@ -81,6 +81,11 @@ define(['/customize/languageSelector.js',
var key = $el.data('localization'); var key = $el.data('localization');
$el.html(messages[key]); $el.html(messages[key]);
}; };
var translateAppend = function (i, e) {
var $el = $(e);
var key = $el.data('localization-append');
$el.append(messages[key]);
};
var translateTitle = function (i, e) { var translateTitle = function (i, e) {
var $el = $(this); var $el = $(this);
var key = $el.data('localization-title'); var key = $el.data('localization-title');
@ -93,6 +98,7 @@ define(['/customize/languageSelector.js',
}; };
messages._applyTranslation = function () { messages._applyTranslation = function () {
$('[data-localization]').each(translateText); $('[data-localization]').each(translateText);
$('[data-localization-append]').each(translateAppend);
$('#pad-iframe').contents().find('[data-localization]').each(translateText); $('#pad-iframe').contents().find('[data-localization]').each(translateText);
$('[data-localization-title]').each(translateTitle); $('[data-localization-title]').each(translateTitle);
$('[data-localization-placeholder]').each(translatePlaceholder); $('[data-localization-placeholder]').each(translatePlaceholder);

@ -15,16 +15,16 @@
</div> </div>
<div id="userForm"> <div id="userForm" class="form-group">
<!--<center> <!--<center>
<h1 data-localization="form_title"></h1> <h1 data-localization="form_title"></h1>
</center>--> </center>-->
<!--<label for="name" data-localization="form_username"></label>--> <!--<label for="name" data-localization="form_username"></label>-->
<input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br> <input type="text" id="name" name="name" class="form-control" data-localization-placeholder="login_username" autofocus><br>
<!--<label for="password" data-localization="form_password"></label>--><br> <!--<label for="password" data-localization="form_password"></label>-->
<input type="password" id="password" name="password" data-localization-placeholder="login_password"><br> <input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><br>
<span class="remember"><input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label></span><br> <span class="remember form-check"><label for="rememberme" class="form-check-label" data-localization-append="login_remember"><input type="checkbox" id="rememberme" class="form-check-input" checked="checked"></label></span><br>
<button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br> <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
</div> </div>
</div> </div>
@ -35,55 +35,55 @@
</center> </center>
</div> </div>
<div class="page"> <div class="page">
<div class="left image"> <div class="info-container">
<img src="customize/images/zk.png" alt="Zero Knowledge" /> <div class="left image">
</div> <img src="customize/images/zk.png" alt="Zero Knowledge" />
<div class="right"> </div>
<center> <div class="right">
<h2>Zero Knowledge</h2> <h2>Zero Knowledge</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> </div>
</div> </div>
<div class="page even"> <div class="page even">
<div class="left"> <div class="info-container">
<center> <div class="left">
<h2>Realtime</h2> <h2>Realtime</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> <div class="right image">
<div class="right image"> <img src="customize/images/realtime.png" alt="User account" />
<img src="customize/images/realtime.png" alt="User account" /> </div>
</div> </div>
</div> </div>
<div class="page"> <div class="page">
<div class="left image"> <div class="info-container">
<img src="customize/images/hash.png" alt="User account" /> <div class="left image">
</div> <img src="customize/images/hash.png" alt="User account" />
<div class="right"> </div>
<center> <div class="right">
<h2>Share documents</h2> <h2>Share documents</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> </div>
</div> </div>
<div class="page even"> <div class="page even">
<div class="left"> <div class="info-container">
<center> <div class="left">
<h2>User Account</h2> <h2>User Account</h2>
</center> <p>
<p> 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.-->
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. </p>
</p> </div>
</div> <div class="right image">
<div class="right image"> <img src="customize/images/useraccount.png" alt="User account" />
<img src="customize/images/useraccount.png" alt="User account" /> </div>
</div> </div>
</div> </div>
<div class="page category" id="tryit"> <div class="page category" id="tryit">
@ -92,68 +92,57 @@
</center> </center>
</div> </div>
<div class="page"> <div class="page">
<div class="left image"> <div class="app-container">
<img src="customize/images/pad.png" alt="Rich Text application" /> <div class="app-row">
</div> <div class="app">
<div class="right"> <center>
<center> <h2>Rich Text editor</h2>
<h2>Rich Text editor</h2> <img src="customize/images/pad.png" alt="Rich Text application" />
</center> </center>
<p> <p>
Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application. Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.
</p> </p>
<p class="buttons"> <p class="buttons">
<a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a> <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
</p> </p>
</div> </div><div class="app">
</div> <center>
<div class="page even"> <h2>Code editor</h2>
<div class="left"> <img src="customize/images/code.png" alt="Code application" />
<center> </center>
<h2>Code editor</h2> <p>
</center> Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.
<p> </p>
Create or debug code from your software (using any programming language) collaboratively with your colleagues with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application. <p class="buttons">
</p> <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
<p class="buttons"> </p>
<a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a> </div><!--
</p> --></div><!--
</div> --><div class="app-row"><!--
<div class="right image"> --><div class="app">
<img src="customize/images/code.png" alt="Code application" /> <center>
</div> <h2>Slide editor</h2>
</div> <img src="customize/images/slide.png" alt="Slide applcation" />
</center>
<div class="page"> <p>
<div class="left image"> Create your presentations using the Markdown syntax with our CryptSlide application, and display them in your browser.
<img src="customize/images/slide.png" alt="Slide applcation" /> </p>
</div> <p class="buttons">
<div class="right"> <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
<center> </p>
<h2>Slide editor</h2> </div><div class="app">
</center> <center>
<p> <h2>Polls</h2>
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. <img src="customize/images/poll.png" alt="Poll application" />
</p> </center>
<p class="buttons"> <p>
<a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a> Plan your meeting or your event, or vote for the best solution regarding your problem using our poll application.
</p> </p>
</div> <p class="buttons">
</div> <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
<div class="page even"> </p>
<div class="left"> </div>
<center> </div>
<h2>Polls</h2>
</center>
<p>
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.
</p>
<p class="buttons">
<a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
</p>
</div>
<div class="right image">
<img src="customize/images/poll.png" alt="Poll application" />
</div> </div>
</div> </div>

@ -134,54 +134,96 @@ body.html {
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background: @base; background: #fff; //@base;
padding: 10px @main-border-width; padding: 10px 0;//@main-border-width;
position: relative; position: relative;
.info-container {
width: 900px;
max-width: 100%;
margin: 0 auto;
&>div{
padding: 10px;
width: 400px;
max-width: 100%;
position: relative;
display: inline-block;
vertical-align: middle;
&:not(.image) {
@media screen and (max-width: @media-not-big) {
width: 100%;
left: 0;
}
}
&.image {
text-align: center;
@media screen and (max-width: @media-not-big) {
display: none;
}
}
}
}
&.first { &.first {
margin-top: ~"calc(100vh - 50px)"; //margin-top: ~"min(calc(100vh - 150px), 650px)";
@media screen and (max-width: @media-not-big) { @media screen and (max-width: @media-not-big) {
margin-top: 0;; //margin-top: 0;
} }
} }
&.even { &.even {
background: darken(@base, 10%); //background: darken(@base, 1%);
} }
&.category { &.category {
background: darken(@base, 20%); background: darken(@base, 3%);
} }
.left { .app {
left: 0; //@main-border-width; display: inline-block;
} width: 300px;
.right { vertical-align: middle;
left: 10%; //@main-border-width; margin: 0px 25px;
white-space: normal;
max-width: ~"calc(50% - 50px)";
@media screen and (max-width: 500px) {
display: block;
max-width: 100%;
margin: 0 auto;
}
} }
.app-container {
@media screen and (max-width: @media-not-big) { width: 1400px;
padding: 10px 5vh; max-width: 100%;
margin: 0 auto;
} }
.app-row {
&>div{
padding: 10px;
width: 45%;
position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; white-space: nowrap;
&:not(.image) { width: 700px;
max-width: 100%;
margin: 0 auto;
@media screen and (max-width: 1399px) {
display: block;
}
img {
@media screen and (max-width: @media-not-big) { @media screen and (max-width: @media-not-big) {
width: 100%; display: none;
left: 0;
} }
} }
} }
.image { .left {
text-align: center; //left: 10%; //@main-border-width;
@media screen and (max-width: @media-not-big) { }
display: none; .right {
} left: 100px; //@main-border-width;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
}
@media screen and (max-width: @media-not-big) {
padding: 10px 5vh;
} }
p { p {
@ -213,11 +255,12 @@ body.html {
background-color: #000; background-color: #000;
opacity: 0.3; opacity: 0.3;
} }
position: absolute; position: relative;
left: 0; left: 0;
right: 0; right: 0;
//padding: 0; //padding: 0;
height: ~"calc(100vh - 50px)"; height: ~"calc(100vh - 150px)";
min-height: 450px;
margin: auto; margin: auto;
//margin-top: 100px; //margin-top: 100px;
@ -295,7 +338,11 @@ body.html {
width: 100%; width: 100%;
} }
.remember { label {
margin-bottom: 0;
//margin-top: 0.5em;
}
/*.remember {
vertical-align: middle; vertical-align: middle;
line-height: 28px; line-height: 28px;
height: 28px; height: 28px;
@ -310,10 +357,9 @@ body.html {
//margin-top: 10px; //margin-top: 10px;
margin-right: 5px; margin-right: 5px;
} }
*/
label { [type="checkbox"] {
margin-bottom: 0; margin-right: 5px;
//margin-top: 0.5em;
} }
button { button {
@ -357,7 +403,7 @@ body.html {
@media screen and (max-width: @media-not-big) { @media screen and (max-width: @media-not-big) {
position: relative; position: relative;
height: auto; height: auto;
background: #aaa; //background: #aaa;
top: -10px; top: -10px;
} }

@ -1,9 +1,9 @@
@base: #f5f5f5; @base: #fff; //#f5f5f5;
@dark-base: darken(@base, 20%); @dark-base: darken(@base, 20%);
@less-dark-base: darken(@base, 10%); @less-dark-base: darken(@base, 10%);
@light-base: lighten(@base, 20%); @light-base: lighten(@base, 20%);
@less-light-base: lighten(@base, 10%); @less-light-base: lighten(@base, 10%);
@fore: #111; @fore: #555;
@old-base: #302B28; @old-base: #302B28;
@old-fore: #fafafa; @old-fore: #fafafa;

@ -296,7 +296,7 @@ define(function () {
out.button_newpad = 'Nouveau document texte'; out.button_newpad = 'Nouveau document texte';
out.button_newcode = 'Nouvelle page de code'; out.button_newcode = 'Nouvelle page de code';
out.button_newpoll = 'Nouveay sondage'; out.button_newpoll = 'Nouveau sondage';
out.button_newslide = 'Nouvelle présentation'; out.button_newslide = 'Nouvelle présentation';
out.form_title = "Tous vos pads, partout où vous allez !"; out.form_title = "Tous vos pads, partout où vous allez !";

Loading…
Cancel
Save