Merge branch 'hpbs' into newtoolbar

This commit is contained in:
yflory 2017-01-30 14:45:02 +01:00
commit 29578a7400
45 changed files with 1465 additions and 258 deletions

View file

@ -42,6 +42,6 @@
"alertifyjs": "^1.0.11",
"spin.js": "^2.3.2",
"scrypt-async": "^1.2.0",
"bootstrap": "^3.3.7"
"bootstrap": "#v4.0.0-alpha.6"
}
}

View file

@ -81,6 +81,7 @@ module.exports = {
'privacy',
'terms',
'about',
'contact',
],
/*

View file

@ -3,9 +3,12 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
<script src="/bower_components/requirejs/require.js"></script>
<script>
@ -14,18 +17,30 @@
});
</script>
</head>
<body>
<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>
<!-- Thanks! http://tholman.com/github-corners/ -->
<body class="html">
<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 id="language-selector" class="dropdown-bar"></span>
<div id="main">
<center>
<a href="/"><img class="imgcenter cryptofist" src="/customize/cryptofist_small.png" /></a>
</center>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
<a href="/about.html" data-localization="about">About</a>
</span>
<span class="right">
<a href="/privacy.html" data-localization="privacy">Privacy</a>
</span>
<span class="right">
<a href="/terms.html" data-localization="terms">ToS</a>
</span>
<span class="right">
<a href="/contact.html" data-localization="contact">Contact</a>
</span>
</div>
<center>
@ -42,18 +57,18 @@
<div id="main_other">
<center>
<h1>About</h1>
<h1 data-localization="about">About</h1>
</center>
<p data-localization="main_p2"><!-- CkEditor, CodeMirror, Chainpad --></p>
<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>
</div>
</body>
</html>

BIN
customize.dist/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
customize.dist/bg2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

BIN
customize.dist/bg3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 KiB

View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html class="cp">
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
<script src="/bower_components/requirejs/require.js"></script>
<script>
require.config({
waitSeconds: 60,
});
</script>
</head>
<body class="html">
<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 id="language-selector" class="right dropdown-bar"></span>
<span class="right">
<a href="/about.html" data-localization="about">About</a>
</span>
<span class="right">
<a href="/privacy.html" data-localization="privacy">Privacy</a>
</span>
<span class="right">
<a href="/terms.html" data-localization="terms">ToS</a>
</span>
<span class="right">
<a href="/contact.html" data-localization="contact">Contact</a>
</span>
</div>
<center>
<noscript>
<p>
<strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
</p>
<hr>
<p>
<strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
</p>
</noscript>
</center>
<div id="main_other">
<center>
<h1 data-localization="contact">Contact</h1>
</center>
<p data-localization="main_about_p2"><!-- Contact us--></p>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

View file

@ -3,9 +3,12 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
<script src="/bower_components/requirejs/require.js"></script>
<script>
@ -14,18 +17,30 @@
});
</script>
</head>
<body>
<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>
<!-- Thanks! http://tholman.com/github-corners/ -->
<body class="html">
<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 id="language-selector" class="dropdown-bar"></span>
<div id="main">
<center>
<a href="/"><img class="imgcenter cryptofist" src="/customize/cryptofist_small.png" /></a>
</center>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
<a href="/about.html" data-localization="about">About</a>
</span>
<span class="right">
<a href="/privacy.html" data-localization="privacy">Privacy</a>
</span>
<span class="right">
<a href="/terms.html" data-localization="terms">ToS</a>
</span>
<span class="right">
<a href="/contact.html" data-localization="contact">Contact</a>
</span>
</div>
<center>
@ -42,50 +57,158 @@
<center>
<h1 data-localization="main_slogan"></h1>
</center>
<p data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<center>
<h5 id="tryit" data-localization="tryIt"></h5>
<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: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" 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/ -->
<!--
(<a href="/file" target="_blank" data-localization="main_openFileManager">Open in a new tab</a>)
<div id="main">
<div id="overlay"></div>
<div id="main-container">
<div id="data">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<iframe src="/file/#iframe" id="fileManagerIframe"></iframe>
<br />
-->
<table class="recent scroll" style="display:none">
<tbody>
<div id="buttons" class="buttons">
<button class="btn btn-secondary knowmore">Know more</button>
<button class="btn btn-secondary tryit">Discover our tools</button>
<br>
<button class="btn btn-success nologin" data-localization="login_nologin"></button>
</div>
<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-slide" class="button create" href="/slide/" data-localization="button_newslide"></a>
</div>
</center>
<p data-localization="main_about_p1"><!-- Privacy policy, terms of service --></p>
<p data-localization="main_about_p2"><!-- Contact us--></p>
<div id="userForm" class="form-group">
<!--<center>
<h1 data-localization="form_title"></h1>
</center>-->
<!--<label for="name" data-localization="form_username"></label>-->
<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>-->
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><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>
</div>
</div>
</div>
<div class="page category first" id="knowmore">
<center>
<h1>Know more</h1>
</center>
</div>
<div class="page">
<div class="info-container">
<div class="left image">
<img src="customize/images/zk.png" alt="Zero Knowledge" />
</div>
<div class="right">
<h2>Zero Knowledge</h2>
<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.-->
</p>
</div>
</div>
</div>
<div class="page even">
<div class="info-container">
<div class="left">
<h2>Realtime</h2>
<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.-->
</p>
</div>
<div class="right image">
<img src="customize/images/realtime.png" alt="User account" />
</div>
</div>
</div>
<div class="page">
<div class="info-container">
<div class="left image">
<img src="customize/images/hash.png" alt="User account" />
</div>
<div class="right">
<h2>Share documents</h2>
<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.-->
</p>
</div>
</div>
</div>
<div class="page even">
<div class="info-container">
<div class="left">
<h2>User Account</h2>
<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.-->
</p>
</div>
<div class="right image">
<img src="customize/images/useraccount.png" alt="User account" />
</div>
</div>
</div>
<div class="page category" id="tryit">
<center>
<h1 data-localization="tryIt">Try it out!</h1>
</center>
</div>
<div class="page">
<div class="app-container">
<div class="app-row">
<div class="app">
<center>
<h2>Rich Text editor</h2>
<img src="customize/images/pad.png" alt="Rich Text application" />
</center>
<p>
Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.
</p>
<p class="buttons">
<a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
</p>
</div><div class="app">
<center>
<h2>Code editor</h2>
<img src="customize/images/code.png" alt="Code application" />
</center>
<p>
Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.
</p>
<p class="buttons">
<a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
</p>
</div><!--
--></div><!--
--><div class="app-row"><!--
--><div class="app">
<center>
<h2>Slide editor</h2>
<img src="customize/images/slide.png" alt="Slide applcation" />
</center>
<p>
Create your presentations using the Markdown syntax with our CryptSlide application, and display them in your browser.
</p>
<p class="buttons">
<a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
</p>
</div><div class="app">
<center>
<h2>Polls</h2>
<img src="customize/images/poll.png" alt="Poll application" />
</center>
<p>
Plan your meeting or your event, or vote for the best solution regarding your problem using our poll application.
</p>
<p class="buttons">
<a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>

View file

@ -14,15 +14,16 @@
background: rgba(0, 0, 0, 0.8);
}
.alertify-logs > *.error {
background: #FF0073;
background: #FA5858;
}
.alertify-logs > *.success {
background: #46E981;
color: #302B28;
color: #fff;
}
.alertify {
position: fixed;
background-color: rgba(0, 0, 0, 0.3);
color: #fafafa;
left: 0;
right: 0;
top: 0;
@ -79,8 +80,8 @@
}
.alertify .dialog input:not(.form-control),
.alertify .alert input:not(.form-control) {
background-color: #302B28;
color: #fafafa;
background-color: #fff;
color: #555;
border: 0px;
border-radius: 5px;
margin-bottom: 15px;
@ -210,7 +211,7 @@
height: 2.5em;
display: inline-block;
width: 100%;
background: #302B28;
background: #fff;
border-top: 1px solid #444;
}
.top-bar a,
@ -226,7 +227,7 @@
display: block;
margin-left: 10px;
padding-top: 3px;
color: #fafafa;
color: #555;
}
.top-bar img,
.bottom-bar img {
@ -306,6 +307,7 @@
left: 0px;
right: 0px;
background: #302B28;
color: #fafafa;
text-align: center;
font-size: 1.5em;
}
@ -344,7 +346,7 @@
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
min-width: 200px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
max-height: 300px;
@ -401,19 +403,81 @@
font-size: 16px;
white-space: normal;
}
#cryptpadTopBar {
background: #fff;
position: relative;
top: 0;
left: 0;
right: 0;
height: 50px;
color: #000;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 5px;
box-sizing: border-box;
font-size: 30px;
}
#cryptpadTopBar > span {
vertical-align: middle;
display: inline-block;
height: 100%;
}
#cryptpadTopBar .cryptpad-logo {
height: 40px;
vertical-align: middle;
}
#cryptpadTopBar .slogan {
font-size: 20px;
color: #000;
line-height: 40px;
}
#cryptpadTopBar .gotoMain {
color: #000;
height: 40px;
line-height: 40px;
}
#cryptpadTopBar .gotoMain:hover {
text-decoration: none;
color: #558;
}
#cryptpadTopBar .right {
float: right;
font-size: 20px;
margin: 0px 10px;
line-height: 40px;
}
#cryptpadTopBar .right a {
font-weight: 500;
font-size: 0.75em;
color: #558;
/* text-align: center;
min-width: 100px;
font-weight: bold;
height: 70px;
padding: 0 10px;
line-height: 70px;
display: inline-block;
color: @topbar-button-color;*/
}
#cryptpadTopBar .right a:hover {
text-decoration: none;
color: #000;
}
html.cp,
.cp body {
font-size: .875em;
background-color: #302B28;
color: #fafafa;
background-color: #fff;
color: #555;
font-family: Georgia,Cambria,serif;
height: 100;
height: 100%;
}
.cp:not(.poll) #language-selector {
position: absolute;
top: 0px;
right: 0px;
display: inline-block;
.cp:not(.poll) {
/*#language-selector {
position: absolute;
top: @topbar-height;
right: 0px;
display: inline-block;
z-index: 2;
}*/
}
.cp {
/* buttons */
@ -425,6 +489,7 @@ html.cp,
font-size: 1rem;
font-weight: 400;
line-height: 2rem;
margin: 0;
}
.cp a.github-corner > svg {
fill: #00ADEE;
@ -440,7 +505,7 @@ html.cp,
.cp h4,
.cp h5,
.cp h6 {
color: #fafafa;
color: #555;
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;
@ -486,11 +551,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;
@ -513,28 +578,311 @@ html.cp,
font-family: lato, Helvetica, sans-serif;
font-size: 1.02em;
}
.cp .page {
width: 100%;
margin-left: auto;
margin-right: auto;
background: #fff;
padding: 10px 0;
position: relative;
}
.cp .page .info-container {
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) {
.cp .page .info-container > div:not(.image) {
width: 100%;
left: 0;
}
}
.cp .page .info-container > div.image {
text-align: center;
}
@media screen and (max-width: 800px) {
.cp .page .info-container > div.image {
display: none;
}
}
@media screen and (max-width: 800px) {
}
.cp .page.category {
background: #f7f7f7;
}
.cp .page .app {
display: inline-block;
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 .app-container {
width: 1400px;
max-width: 100%;
margin: 0 auto;
}
.cp .page .app-row {
display: inline-block;
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) {
.cp .page .app-row img {
display: none;
}
}
.cp .page .right {
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) {
.cp .page {
padding: 10px 5vh;
}
}
.cp .page p {
font-size: 18px;
text-align: justify;
}
.cp .btn-default:hover {
background-color: #d8d8d8;
}
.cp #main {
width: 70vw;
background-image: url('/customize/bg3.jpg');
background-size: cover;
background-position: center center;
}
.cp #main_other {
padding: 0 15vw;
}
.cp #main,
.cp #main_other {
position: relative;
left: 0;
right: 0;
height: calc(100vh - 150px);
min-height: 450px;
margin: auto;
font-size: medium;
padding-bottom: 1em;
}
.cp #main #overlay,
.cp #main_other #overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.3;
}
.cp #main #main-container,
.cp #main_other #main-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 1000px;
max-width: 90%;
}
.cp #main #data,
.cp #main_other #data {
width: 600px;
max-width: 60%;
color: #fff;
padding: 15px;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.cp #main #data p,
.cp #main_other #data p {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.5em;
}
.cp #main #data h2,
.cp #main_other #data h2 {
font-weight: normal;
font-size: 48px;
line-height: 1.2em;
color: #fff;
}
.cp #main #data h5,
.cp #main_other #data h5 {
font-size: 1em;
color: #fff;
}
.cp #main #data #tryit,
.cp #main_other #data #tryit {
margin-top: 20px;
margin-bottom: 5px;
}
.cp #main #userForm,
.cp #main_other #userForm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 50px;
display: inline-block;
width: 350px;
max-width: 35%;
padding: 10px;
box-sizing: border-box;
font-family: lato, Helvetica, sans-serif;
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_other #userForm h1 {
color: #fff;
padding: 0;
}
.cp #main #userForm [type="text"],
.cp #main_other #userForm [type="text"],
.cp #main #userForm [type="password"],
.cp #main_other #userForm [type="password"] {
width: 100%;
}
.cp #main #userForm label,
.cp #main_other #userForm label {
margin-bottom: 0;
}
.cp #main #userForm [type="checkbox"],
.cp #main_other #userForm [type="checkbox"] {
margin-right: 5px;
}
.cp #main #userForm button,
.cp #main_other #userForm button {
font-weight: bold;
width: 100%;
margin: 2px 0px;
cursor: pointer;
}
.cp #main #userForm button.half,
.cp #main_other #userForm button.half {
width: calc(50% - 4px);
}
.cp #main #userForm button.half:not(.first),
.cp #main_other #userForm button.half:not(.first) {
float: right;
}
@media screen and (max-width: 800px) {
.cp #main #main-container,
.cp #main_other #main-container {
transform: initial;
position: relative;
display: block;
width: 90%;
left: 0;
}
}
@media screen and (max-width: 800px) {
.cp #main #userForm,
.cp #main_other #userForm,
.cp #main #data,
.cp #main_other #data {
transform: initial;
position: relative;
display: block;
width: 100%;
max-width: 100%;
margin: 10px 0;
box-sizing: border-box;
}
}
@media screen and (max-width: 800px) {
.cp #main #userForm,
.cp #main_other #userForm {
border: 1px solid #888;
}
}
@media screen and (max-width: 800px) {
.cp #main,
.cp #main_other {
position: relative;
height: auto;
top: -10px;
}
}
.cp #main .buttons,
.cp #main_other .buttons {
margin-top: 15px;
}
.cp p.buttons,
.cp div.buttons {
text-align: center;
}
.cp p.buttons button,
.cp div.buttons button {
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
.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;
@ -542,18 +890,16 @@ 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;
}
.cp .panel {
background-color: #333;
background-color: #cccccc;
}
.cp table {
border-collapse: collapse;
@ -561,7 +907,7 @@ html.cp,
margin: 20px;
}
.cp tbody {
border: 2px solid black;
border: 1px solid #555;
}
.cp tbody tr {
text-align: center;
@ -579,18 +925,18 @@ 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;
}
.cp tbody tr th {
box-sizing: border-box;
border: 1px solid black;
border: 1px solid #555;
}
.cp tbody tr th,
.cp tbody tr td {
color: #fafafa;
color: #555;
}
.cp tbody tr th.remove,
.cp tbody tr td.remove {
@ -600,7 +946,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;
@ -615,7 +961,7 @@ html.cp,
border-top-left-radius: 5px;
}
.cp .remove {
color: #FF0073;
color: #FA5858;
cursor: pointer !important;
}
.cp form.realtime,
@ -661,7 +1007,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: #000;
font-weight: bold;
}
.cp form.realtime table tr td.checkbox-cell,
@ -695,8 +1041,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: #302B28;
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,
@ -726,13 +1072,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 #fff;
width: 80%;
}
.cp form.realtime table thead td,
.cp div.realtime table thead td {
padding: 0px 5px;
background: #4c443f;
background: #aaa;
border-radius: 20px 20px 0 0;
text-align: center;
}
@ -743,13 +1089,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: #4c443f;
background: #aaa;
}
.cp form.realtime table tbody .text-cell input[type="text"],
.cp div.realtime table tbody .text-cell input[type="text"] {
@ -765,6 +1111,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;
@ -782,7 +1132,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: #555;
font-weight: bold;
}
.cp form.realtime table thead tr th .remove,
@ -868,7 +1218,7 @@ html.cp,
width: 100%;
height: 100vh;
display: none;
background-color: #302B28;
background-color: #000;
}
.cp div.modal #content,
.cp div#modal #content {
@ -935,6 +1285,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;
@ -959,7 +1323,7 @@ html.cp,
width: 80%;
height: 80%;
margin: auto;
border: 1px solid #685d56;
border: 1px solid #ffffff;
text-align: center;
}
.cp div.modal.shown,
@ -975,7 +1339,7 @@ html.cp,
.cp div#modal table input {
height: 100%;
width: 90%;
border: 3px solid #302B28;
border: 3px solid #fff;
}
.cp div.modal table tfoot tr td,
.cp div#modal table tfoot tr td {

View file

@ -33,13 +33,15 @@ 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();
});
};
// Language selector
var $sel = $('#language-selector');
Cryptpad.createLanguageSelector(undefined, $sel);
$sel.find('button').addClass('btn').addClass('btn-secondary');
$sel.show();
$(window).click(function () {
@ -155,17 +157,64 @@ define([
});
};
var addButtonHandlers = function () {
$('button.login').click(function (e) {
var username = $('#name').val();
var passwd = $('#password').val();
var remember = $('#rememberme').is(':checked');
sessionStorage.login_user = username;
sessionStorage.login_pass = passwd;
sessionStorage.login_rmb = remember;
sessionStorage.login = 1;
document.location.href = '/user';
});
$('button.register').click(function (e) {
var username = $('#name').val();
var passwd = $('#password').val();
var remember = $('#rememberme').is(':checked');
sessionStorage.login_user = username;
sessionStorage.login_pass = passwd;
sessionStorage.login_rmb = remember;
sessionStorage.register = 1;
document.location.href = '/user';
});
$('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();
Cryptpad.ready(function () {
//Cryptpad.ready(function () {
console.log("ready");
if (Cryptpad.isLoggedIn()) {
document.location.href = '/drive';
}
addButtonHandlers();
$table = $('table.scroll');
$tbody = $table.find('tbody');
$tryit = $('#tryit');
Cryptpad.styleAlerts();
refreshTable();
//refreshTable();
/*
if (Cryptpad.store && Cryptpad.store.change) {
Cryptpad.store.change(function (data) {
if (data.key === 'CryptPad_RECENTPADS') {
@ -173,6 +222,7 @@ define([
}
});
}
});
*/
//});
});

View file

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

View file

@ -3,9 +3,12 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
<script src="/bower_components/requirejs/require.js"></script>
<script>
@ -14,18 +17,30 @@
});
</script>
</head>
<body>
<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>
<!-- Thanks! http://tholman.com/github-corners/ -->
<body class="html">
<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 id="language-selector" class="dropdown-bar"></span>
<div id="main">
<center>
<a href="/"><img class="imgcenter cryptofist" src="/customize/cryptofist_small.png" /></a>
</center>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
<a href="/about.html" data-localization="about">About</a>
</span>
<span class="right">
<a href="/privacy.html" data-localization="privacy">Privacy</a>
</span>
<span class="right">
<a href="/terms.html" data-localization="terms">ToS</a>
</span>
<span class="right">
<a href="/contact.html" data-localization="contact">Contact</a>
</span>
</div>
<center>
@ -42,6 +57,7 @@
<div id="main_other">
<center>
<h1 data-localization="policy_title"></h1>
</center>
@ -68,11 +84,10 @@
<p data-localization="policy_choices_ads"></p>
<br />
</div>
</div>
</body>
</html>

View file

@ -24,9 +24,11 @@ var template = read('./template.html');
var fragments = {};
[ 'index',
'fork',
'topbar',
'terms',
'privacy',
'about',
'contact',
'logo',
'noscript',
].forEach(function (name) {
@ -34,10 +36,16 @@ 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],
main: swap(fragments[page], {
topbar: fragments.topbar,
fork: fragments.fork,
logo: fragments.logo,
noscript: fragments.noscript,
}),
logo: fragments.logo,
noscript: fragments.noscript,
});

View file

@ -1,10 +1,11 @@
<div id="main_other">
<center>
<h1>About</h1>
<h1 data-localization="about">About</h1>
</center>
<p data-localization="main_p2"><!-- CkEditor, CodeMirror, Chainpad --></p>
<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>

View file

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

View file

@ -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: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" 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/ -->

View file

@ -1,42 +1,148 @@
<center>
<h1 data-localization="main_slogan"></h1>
</center>
{{fork}}
<p data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<div id="main">
<div id="overlay"></div>
<div id="main-container">
<div id="data">
<p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
<center>
<h5 id="tryit" data-localization="tryIt"></h5>
<div id="buttons" class="buttons">
<button class="btn btn-secondary knowmore">Know more</button>
<button class="btn btn-secondary tryit">Discover our tools</button>
<br>
<button class="btn btn-success nologin" data-localization="login_nologin"></button>
</div>
<!--
(<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-slide" class="button create" href="/slide/" data-localization="button_newslide"></a>
</div>
</center>
<div id="userForm" class="form-group">
<!--<center>
<h1 data-localization="form_title"></h1>
</center>-->
<!--<label for="name" data-localization="form_username"></label>-->
<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>-->
<input type="password" id="password" name="password" class="form-control" data-localization-placeholder="login_password"><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>
</div>
</div>
</div>
<div class="page category first" id="knowmore">
<center>
<h1>Know more</h1>
</center>
</div>
<div class="page">
<div class="info-container">
<div class="left image">
<img src="customize/images/zk.png" alt="Zero Knowledge" />
</div>
<div class="right">
<h2>Zero Knowledge</h2>
<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.-->
</p>
</div>
</div>
</div>
<div class="page even">
<div class="info-container">
<div class="left">
<h2>Realtime</h2>
<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.-->
</p>
</div>
<div class="right image">
<img src="customize/images/realtime.png" alt="User account" />
</div>
</div>
</div>
<div class="page">
<div class="info-container">
<div class="left image">
<img src="customize/images/hash.png" alt="User account" />
</div>
<div class="right">
<h2>Share documents</h2>
<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.-->
</p>
</div>
</div>
</div>
<div class="page even">
<div class="info-container">
<div class="left">
<h2>User Account</h2>
<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.-->
</p>
</div>
<div class="right image">
<img src="customize/images/useraccount.png" alt="User account" />
</div>
</div>
</div>
<div class="page category" id="tryit">
<center>
<h1 data-localization="tryIt">Try it out!</h1>
</center>
</div>
<div class="page">
<div class="app-container">
<div class="app-row">
<div class="app">
<center>
<h2>Rich Text editor</h2>
<img src="customize/images/pad.png" alt="Rich Text application" />
</center>
<p>
Edit rich text documents collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.
</p>
<p class="buttons">
<a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
</p>
</div><div class="app">
<center>
<h2>Code editor</h2>
<img src="customize/images/code.png" alt="Code application" />
</center>
<p>
Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.
</p>
<p class="buttons">
<a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
</p>
</div><!--
--></div><!--
--><div class="app-row"><!--
--><div class="app">
<center>
<h2>Slide editor</h2>
<img src="customize/images/slide.png" alt="Slide applcation" />
</center>
<p>
Create your presentations using the Markdown syntax with our CryptSlide application, and display them in your browser.
</p>
<p class="buttons">
<a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
</p>
</div><div class="app">
<center>
<h2>Polls</h2>
<img src="customize/images/poll.png" alt="Poll application" />
</center>
<p>
Plan your meeting or your event, or vote for the best solution regarding your problem using our poll application.
</p>
<p class="buttons">
<a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
</p>
</div>
</div>
</div>
</div>
<p data-localization="main_about_p1"><!-- Privacy policy, terms of service --></p>
<p data-localization="main_about_p2"><!-- Contact us--></p>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,23 @@
<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 id="language-selector" class="right dropdown-bar"></span>
<span class="right">
<a href="/about.html" data-localization="about">About</a>
</span>
<span class="right">
<a href="/privacy.html" data-localization="privacy">Privacy</a>
</span>
<span class="right">
<a href="/terms.html" data-localization="terms">ToS</a>
</span>
<span class="right">
<a href="/contact.html" data-localization="contact">Contact</a>
</span>
</div>

View file

@ -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;

View file

@ -5,6 +5,7 @@
@import "./bar.less";
@import "./loading.less";
@import "./dropdown.less";
@import "./topbar.less";
html.cp, .cp body {
font-size: .875em;
@ -12,16 +13,17 @@ html.cp, .cp body {
color: @fore;
font-family: Georgia,Cambria,serif;
height: 100;
height: 100%;
}
.cp:not(.poll) {
#language-selector {
/*#language-selector {
position: absolute;
top: 0px;
top: @topbar-height;
right: 0px;
display: inline-block;
}
z-index: 2;
}*/
}
.cp {
@ -30,11 +32,12 @@ body {
font-size: 1rem;
font-weight: 400;
line-height: 2rem;
margin: 0;
}
a.github-corner > svg {
fill: @cp-blue;
color: @base;
color: @old-base;
}
.lato {
@ -97,11 +100,11 @@ h6 {
a {
cursor: pointer;
color: @cp-green;
color: @cp-darkblue;
text-decoration: none;
&:hover {
color: @cp-accent;
color: @cp-accent2;
}
}
@ -123,12 +126,298 @@ p, pre, td, a, table, tr {
.lato;
}
body.html {
}
// Main page
.page {
width: 100%;
margin-left: auto;
margin-right: auto;
background: #fff; //@base;
padding: 10px 0;//@main-border-width;
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 {
//margin-top: ~"min(calc(100vh - 150px), 650px)";
@media screen and (max-width: @media-not-big) {
//margin-top: 0;
}
}
&.even {
//background: darken(@base, 1%);
}
&.category {
background: darken(@base, 3%);
}
.app {
display: inline-block;
width: 300px;
vertical-align: middle;
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 {
width: 1400px;
max-width: 100%;
margin: 0 auto;
}
.app-row {
display: inline-block;
white-space: nowrap;
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) {
display: none;
}
}
}
.left {
//left: 10%; //@main-border-width;
}
.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 {
font-size: 18px;
text-align: justify;
}
}
.btn-default {
&:hover {
background-color: #d8d8d8;
}
}
#main {
width: 70vw;
background-image: url('/customize/bg3.jpg');
background-size: cover;
background-position: center center;
}
#main_other {
padding: 0 @main-border-width;
}
#main, #main_other {
#overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.3;
}
position: relative;
left: 0;
right: 0;
//padding: 0;
height: ~"calc(100vh - 150px)";
min-height: 450px;
margin: auto;
//margin-top: 100px;
font-size: medium;
padding-bottom: 1em;
#main-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 1000px;
max-width: 90%;
}
#data {
p {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.5em;
}
h2 {
font-weight: normal;
font-size: 48px;
line-height: 1.2em;
color: @main-color;
}
h5 {
font-size: 1em;
color: @main-color;
}
width: 600px;
max-width: 60%;
color: @main-color;
padding: 15px;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 50%;
left: 0;
transform: translateY(-50%);
//width: ~"calc(100% - 450px - 30vw)";
//background-color: @main-block-bg;
#tryit {
margin-top: 20px;
margin-bottom: 5px;
}
}
#userForm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 50px;
display: inline-block;
width: 350px;
max-width: 35%;
//background-color: @main-block-bg;
padding: 10px;
box-sizing: border-box;
font-family: lato, Helvetica, sans-serif;
color: @main-color;
h1 {
color: @main-color;
padding: 0;
}
[type="text"], [type="password"] {
width: 100%;
}
label {
margin-bottom: 0;
//margin-top: 0.5em;
}
/*.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;
}
*/
[type="checkbox"] {
margin-right: 5px;
}
button {
font-weight: bold;
width: 100%;
margin: 2px 0px;
cursor: pointer;
&.half {
width: ~"calc(50% - 4px)";
&:not(.first) {
float: right;
}
}
}
}
#main-container {
@media screen and (max-width: @media-not-big) {
transform: initial;
position: relative;
display: block;
width: 90%;
left: 0;
}
}
#userForm, #data {
@media screen and (max-width: @media-not-big) {
transform: initial;
position: relative;
display: block;
width: 100%;
max-width: 100%;
margin: 10px 0;
box-sizing: border-box;
}
}
#userForm {
@media screen and (max-width: @media-not-big) {
border: 1px solid #888;
}
}
@media screen and (max-width: @media-not-big) {
position: relative;
height: auto;
//background: #aaa;
top: -10px;
}
.buttons {
margin-top: 15px;
}
}
p.buttons, div.buttons {
text-align: center;
button {
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
}
#fileManagerIframe {
@ -139,27 +428,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,15 +452,16 @@ 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;
}
// currently only used in /user/
.panel {
background-color: #333;
background-color: @dark-base;
}
/* Tables
@ -188,7 +473,7 @@ table {
margin: 20px;
}
tbody {
border: 2px solid black;
border: 1px solid @poll-border-color;
tr {
text-align: center;
&:first-of-type th{
@ -212,7 +497,7 @@ tbody {
}
th {
box-sizing: border-box;
border: 1px solid black;
border: 1px solid @poll-border-color;
}
th, td {
color: @fore;
@ -227,7 +512,7 @@ tbody {
}
td {
border-right: 1px solid black;
border-right: 1px solid @poll-border-color;
padding: 12px;
padding-top: 0px;
padding-bottom: 0px;
@ -292,7 +577,7 @@ form.realtime, div.realtime {
border: 0px;
&[disabled] {
background-color: transparent;
color: @fore;
color: @poll-fg;
font-weight: bold;
}
}
@ -330,7 +615,7 @@ form.realtime, div.realtime {
font-weight: bold;
background-color: @cp-red;
color: @base;
color: @poll-cover-color;
&:after {
height: 100%;
@ -371,7 +656,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 {
@ -379,7 +664,7 @@ form.realtime, div.realtime {
width: 100%;
box-sizing: border-box;
&[disabled] {
color: white;
color: @poll-fg;
padding: 1px 5px;
border: none;
}
@ -390,7 +675,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)";
@ -404,6 +689,11 @@ form.realtime, div.realtime {
margin: 0 0 0 10px;
}
}
td {
label {
border: .5px solid @poll-border-color;
}
}
}
.edit {
color: @cp-green;
@ -557,6 +847,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;
@ -585,7 +879,7 @@ div.modal, div#modal {
height: 100vh;
display: none;
background-color: @base;
background-color: @slide-default-bg;
.center {
position: relative;

View file

@ -26,7 +26,7 @@
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
min-width: 200px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
max-height: 300px;

View file

@ -6,6 +6,7 @@
left: 0px;
right: 0px;
background: @bg-loading;
color: @color-loading;
text-align: center;
font-size: 1.5em;
.loadingContainer {

View file

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

View file

@ -1,12 +1,17 @@
@base: #302B28;
@base: #fff; //#f5f5f5;
@dark-base: darken(@base, 20%);
@less-dark-base: darken(@base, 10%);
@light-base: lighten(@base, 20%);
@less-light-base: lighten(@base, 10%);
@fore: #fafafa;
@fore: #555;
@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;
@ -27,20 +32,33 @@
@text-color: rgba(0, 0, 0, .8);
@border-radius: 1px;
@alertify-dialog-bg: #444;
@alertify-dialog-fg: @fore;
@alertify-fore: @old-fore;
@alertify-base: @old-base;
@alertify-btn-fg: @fore;
@alertify-dialog-bg: #444;
@alertify-dialog-fg: @old-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;
@ -51,3 +69,15 @@
@toolbar-gradient-start: #f5f5f5;
@toolbar-gradient-end: #DDDDDD;
@topbar-back: #fff;
@topbar-color: #000;
@topbar-button-bg: #2E9AFE;
@topbar-button-color: #fff;
@topbar-height: 50px;
@main-border-width: 15vw;
@cp-darkblue: #3333ff;
@cp-accent2: darken(@cp-darkblue, 20%);
@main-block-bg: rgba(200, 200, 200, 0.3);
@main-color: #fff;

View file

@ -3,9 +3,12 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
<script src="/bower_components/requirejs/require.js"></script>
<script>
@ -14,18 +17,12 @@
});
</script>
</head>
<body>
{{fork}}
<span id="language-selector" class="dropdown-bar"></span>
<div id="main">
{{logo}}
<body class="html">
{{topbar}}
{{noscript}}
{{main}}
</div>
</body>
</html>

View file

@ -3,9 +3,12 @@
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
<script src="/bower_components/requirejs/require.js"></script>
<script>
@ -14,18 +17,30 @@
});
</script>
</head>
<body>
<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>
<!-- Thanks! http://tholman.com/github-corners/ -->
<body class="html">
<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 id="language-selector" class="dropdown-bar"></span>
<div id="main">
<center>
<a href="/"><img class="imgcenter cryptofist" src="/customize/cryptofist_small.png" /></a>
</center>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="right">
<a href="/about.html" data-localization="about">About</a>
</span>
<span class="right">
<a href="/privacy.html" data-localization="privacy">Privacy</a>
</span>
<span class="right">
<a href="/terms.html" data-localization="terms">ToS</a>
</span>
<span class="right">
<a href="/contact.html" data-localization="contact">Contact</a>
</span>
</div>
<center>
@ -42,6 +57,7 @@
<div id="main_other">
<center>
<h1 data-localization="tos_title"></h1>
</center>
@ -51,9 +67,9 @@
<p data-localization="tos_e2ee"></p>
<p data-localization="tos_logs"></p>
<p data-localization="tos_3rdparties"></p>
</div>
</div>
</body>
</html>

View file

@ -13,7 +13,7 @@
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
min-width: 200px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
max-height: 300px;
@ -391,7 +391,7 @@
background-color: #46E981;
}
.lag-red {
background-color: #FF0073;
background-color: #FA5858;
}
.lag-orange {
background-color: #FE9A2E;

View file

@ -279,7 +279,8 @@ define(function () {
// index.html
out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
//out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
out.main_p1 = "<h2>Collaborez en tout confiance</h2><br>Développez vos idées collaborativement grâce à des documents partagés en temps-réel, tout en gardant vos données personnelles invisibles, même pour nous, avec la technologie <strong>Zero Knowledge</strong>.";
out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) <a href="http://ckeditor.com/">CKEditor</a>, l\'éditeur de code source <a href="https://codemirror.net/">CodeMirror</a>, et le moteur temps-réel <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
out.main_howitworks = 'Comment ça fonctionne';
out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'<a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> qui est capable de trouver un consensus distribué en utilisant <a href="https://bitcoin.org/bitcoin.pdf">une chaîne de bloc Nakamoto</a>, un outil popularisé par le <a href="https://fr.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. De cette manière, l\'algorithme évite la nécessité d\'utiliser un serveur central pour résoudre les conflits d\'édition de l\'Operational Transformation, et sans ce besoin de résolution des conflits le serveur peut rester ignorant du contenu qui est édité dans le pad.';

View file

@ -276,7 +276,10 @@ define(function () {
// index.html
out.main_p1 = 'CryptPad is the <strong>zero knowledge</strong> realtime collaborative editor. Encryption carried out in your web browser protects the data from the server, the cloud, and the NSA. The secret encryption key is stored in the URL <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> which is never sent to the server but is available to javascript so by sharing the URL, you give authorization to others who want to participate.';
//out.main_p1 = 'CryptPad is the <strong>zero knowledge</strong> realtime collaborative editor. Encryption carried out in your web browser protects the data from the server, the cloud, and the NSA. The secret encryption key is stored in the URL <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> which is never sent to the server but is available to javascript so by sharing the URL, you give authorization to others who want to participate.';
//out.main_p1 = "Type quick documents with friends and colleagues.<br>With <strong>Zero Knowledge</strong> technology, the server doesn't know what you're doing.";
out.main_p1 = "<h2>Collaborate in Confidence</h2><br> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; even from us.";
out.main_p2 = 'This project uses the <a href="http://ckeditor.com/">CKEditor</a> Visual Editor, <a href="https://codemirror.net/">CodeMirror</a>, and the <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a> realtime engine.';
out.main_howitworks = 'How It Works';
out.main_howitworks_p1 = 'CryptPad uses a variant of the <a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> algorithm which is able to find distributed consensus using a <a href="https://bitcoin.org/bitcoin.pdf">Nakamoto Blockchain</a>, a construct popularized by <a href="https://en.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. This way the algorithm can avoid the need for a central server to resolve Operational Transform Edit Conflicts and without the need for resolving conflicts, the server can be kept unaware of the content which is being edited on the pad.';

View file

@ -46,7 +46,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'));

View file

@ -54,6 +54,10 @@ li {
display: none;
position: absolute;
}
.contextMenu li {
padding: 0;
font-size: 16px;
}
.droppable {
background-color: #FE9A2E;
color: #222;

View file

@ -79,6 +79,10 @@ li {
.contextMenu {
display: none;
position: absolute;
li {
padding: 0;
font-size: 16px;
}
}
.droppable {

View file

@ -19,38 +19,38 @@
</div>
<div id="treeContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" href="#" class="open" data-localization="fc_open">Open</a></li>
<li><a tabindex="-1" href="#" class="open_ro" data-localization="fc_open_ro">Open (read-only)</a></li>
<li><a tabindex="-1" href="#" class="rename editable" data-localization="fc_rename">Rename</a></li>
<li><a tabindex="-1" href="#" class="delete editable" data-localization="fc_delete">Delete</a></li>
<li><a tabindex="-1" href="#" class="newfolder editable" data-localization="fc_newfolder">New folder</a></li>
<li><a tabindex="-1" href="#" class="open dropdown-item" data-localization="fc_open">Open</a></li>
<li><a tabindex="-1" href="#" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
<li><a tabindex="-1" href="#" class="rename editable dropdown-item" data-localization="fc_rename">Rename</a></li>
<li><a tabindex="-1" href="#" class="delete editable dropdown-item" data-localization="fc_delete">Delete</a></li>
<li><a tabindex="-1" href="#" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
</ul>
</div>
<div id="contentContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" href="#" class="newfolder editable" data-localization="fc_newfolder">New folder</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable" data-type="pad" data-localization="fc_newpad" target="_blank">New pad</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable" data-type="code" data-localization="fc_newcode" target="_blank">New code</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable" data-type="slide" data-localization="fc_newslide" target="_blank">New slide</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable" data-type="poll" data-localization="fc_newpoll" target="_blank">New poll</a></li>
<li><a tabindex="-1" href="#" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="pad" data-localization="fc_newpad" target="_blank">New pad</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="code" data-localization="fc_newcode" target="_blank">New code</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="slide" data-localization="fc_newslide" target="_blank">New slide</a></li>
<li><a tabindex="-1" href="#" class="newdoc own editable dropdown-item" data-type="poll" data-localization="fc_newpoll" target="_blank">New poll</a></li>
</ul>
</div>
<div id="defaultContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" href="#" class="open" data-localization="fc_open">Open</a></li>
<li><a tabindex="-1" href="#" class="open_ro" data-localization="fc_open_ro">Open (read-only)</a></li>
<li><a tabindex="-1" href="#" class="open dropdown-item" data-localization="fc_open">Open</a></li>
<li><a tabindex="-1" href="#" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
</ul>
</div>
<div id="trashTreeContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" href="#" class="empty editable" data-localization="fc_empty">Empty the trash</a></li>
<li><a tabindex="-1" href="#" class="empty editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
</ul>
</div>
<div id="trashContextMenu" class="contextMenu dropdown clearfix" oncontextmenu="return false;">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" href="#" class="remove editable" data-localization="fc_remove">Delete permanently</a></li>
<li><a tabindex="-1" href="#" class="restore editable" data-localization="fc_restore">Restore</a></li>
<li><a tabindex="-1" href="#" class="properties" data-localization="fc_prop">Properties</a></li>
<li><a tabindex="-1" href="#" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
<li><a tabindex="-1" href="#" class="restore editable dropdown-item" data-localization="fc_restore">Restore</a></li>
<li><a tabindex="-1" href="#" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
</ul>
</div>
</div>

View file

@ -49,11 +49,6 @@
font: white;
border: 0px;
}
td label {
border: .5px solid black;
}
table#table {
margin: 0px;
}
@ -101,7 +96,7 @@
}
#description[disabled] {
resize: none;
color: #bbb;
color: #000;
border: 1px solid #444;
}

View file

@ -788,7 +788,7 @@ define([
Cryptpad.getAttribute(HIDE_INTRODUCTION_TEXT, function (e, value) {
if (e) { console.error(e); }
if (value === null) {
if (!value) {
Cryptpad.setAttribute(HIDE_INTRODUCTION_TEXT, "1", function (e) {
if (e) { console.error(e); }
});