You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
cryptpad/customize.dist/index.html

220 lines
12 KiB
HTML

10 years ago
<!DOCTYPE html>
<html class="cp">
10 years ago
<head>
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
10 years ago
<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>
10 years ago
</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>
<div id="noscriptContainer">
<div class="mainOverlay"></div>
<div id="noscript">
<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>
</div>
</div>
<div id="mainBlock" class="hidden">
<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/ -->
<div id="main">
<div class="mainOverlay"></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>
<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>
</div>
<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>
<div style="display: none;"><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></div>
<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>
</div>
10 years ago
</body>
</html>