<!DOCTYPE html>
< html >
< head >
<!-- <title>Sample - CKEditor</title> -->
< meta content = "text/html; charset=utf-8" http-equiv = "content-type" / >
< link rel = "stylesheet" type = "text/css" href = "customize/index.css" / >
< style >
#whatis {
padding-left: 15%;
padding-right: 15%;
font-size: medium;
padding-bottom: 1em;
}
.create {
background-color: rgb(77, 146, 68);
background-image: linear-gradient(rgb(39, 100, 0) 0%, rgb(77, 146, 68) 100%);
border-bottom-color: rgb(77, 146, 68);
color: rgb(243, 243, 243);
font-weight:bold;
font-size:large;
margin-right: 5px;
margin-left: 5px;
}
.buttons {
margin-bottom: 50px;
margin-top: 20px;
}
.button {
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
margin-top: 20px;
margin-bottom: 20px;
}
table.scroll tbody,
table.scroll thead { display: block; }
table.scroll tbody { }
tbody { border-top: 2px solid black; }
tbody td {
/* width: 20%; */ /* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
padding-top: 0px;
padding-bottom: 0px;
padding-right: 20px;
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
tbody tr:nth-child(odd) {
background-color: #ddd;
}
tbody tr th {
box-sizing: border-box;
border: 1px solid black;
}
tbody tr th:last-child {
border-right: 0px;
}
tbody tr th:first-of-type {
border-left: 0px;
}
.remove {
cursor: pointer;
color: #ab0000;
}
< / style >
< script src = "/bower_components/requirejs/require.js" > < / script >
<!-- Piwik -->
< script type = "text/javascript" >
if (window.location.href.indexOf('cryptpad.fr') !== -1) {
// This piwik is only relevant to cryptpad.fr
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//piwik.xwiki.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 12]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
}
< / script >
<!-- End Piwik Code -->
< / head >
< body >
< a href = "https://github.com/xwiki-labs/cryptpad" > < img style = "position: absolute; top: 0; left: 0; border: 0;" src = "https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt = "Fork me on GitHub" data-canonical-src = "https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" > < / a >
< div id = "whatis" >
< center >
< img class = "imgcenter" src = "/customize/cryptofist_small.png" / >
< h1 > Unity is Strength - Collaboration is Key< / h1 >
< h2 > With the support of< / h2 >
< img class = "imgcenter" src = "/customize/openpaas.png" / >
< / center >
< p > 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.< / p >
< p > This project uses the < a href = "http://ckeditor.com/" > CKEditor< / a > Visual Editor
the < a href = "https://github.com/xwiki-contrib/chainpad" > ChainPad< / a > realtime engine.< / p >
< / code > < / pre > < h2 id = "howitworks" > How It Works< / h2 >
< p > 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 Nakamoto Blockchain, 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.< / p >
< p > < strong > NOTE< / strong > Collaborative documents will be removed after 30 days of inactivity< / p >
< center >
< noscript >
< p >
< strong > OOPS< / strong > In order to do encryption in your browser, Javascript is really
< strong > really< / strong > required.
< / p >
< / noscript >
< script >
require([
'/customize/DecorateToolbar.js',
'/common/cryptpad-common.js',
'/bower_components/lil-uri/uri.min.js',
'/bower_components/jquery/dist/jquery.min.js'
], function (DecorateToolbar, Cryptpad, LilUri) {
var $ = window.$;
DecorateToolbar.main($('#bottom-bar'));
var $table = $('table.scroll');
var $tbody = $table.find('tbody');
var $tryit = $('#tryit');
var now = new Date();
var hasRecent = false;
var memorySpan = Cryptpad.timeframe; // thirty days
var forgetPad = Cryptpad.forgetPad;
var padTypes = {
'/pad/': 'Pad',
'/code/': 'Code'
};
var truncateTitle = function (title, len) {
if (typeof(title) === 'string' & & title.length > len) {
return title.slice(0, len) + '…';
}
return title;
};
var recentPads = Cryptpad.getRecentPads();
recentPads.sort(Cryptpad.mostRecent);
var makeRecentPadsTable = function () {
recentPads.length & & recentPads.some(function (pad, index) {
if (!pad) return;
console.log(pad);
// don't link to old pads
if (now.getTime() - new Date(pad.atime).getTime() > memorySpan) return true;
hasRecent = true;
// split up the uri
var uri = LilUri(pad.href);
// derive the name
var name = padTypes[uri.path()];
var title = pad.title || uri.parts.hash.slice(0,8);
var date = new Date(pad.atime).toLocaleDateString();
var created = new Date(pad.ctime).toLocaleDateString();
if (date === now.toLocaleDateString()) {
date = new Date(pad.atime).toLocaleTimeString().replace(/ /g, '');
}
var id = 'pad-'+index;
$tbody.append('< tr id = "'+id+'" > ' +
'< td > ' + name + '< / td > ' +
//'< td > ' + title + '< / td > ' +
'< td > < a href = "' + pad.href + '" title = "'+ pad.title + '" > ' + truncateTitle(pad.title, 20) + '< / a > < / td > ' +
'< td > ' + created + '< / td > ' + // created
'< td > ' + date + '< / td > ' +
'< td class = "remove" > ✖< / td > '+
'< / tr > ');
var $row = $('#'+id);
$row.find('.remove').click(function () {
forgetPad(pad.href);
$row.fadeOut(750, function () {
$row.remove();
if (!$table.find('tr').find('td').length) {
$table.remove();
$tryit.text("Try it out!");
}
});
});
});
};
if (recentPads.length) {
recentPads.sort(Cryptpad.mostRecent);
makeRecentPadsTable();
}
if (hasRecent) {
$('table').attr('style', '');
$tryit.text('Your Recent pads (stored only in browser)');
}
});
< / script >
< h5 id = "tryit" > Try it out!< / h5 >
< table class = "recent scroll" style = "display:none" >
< tbody >
< tr >
< th > Type< / th >
<!-- <th>Title</th> -->
< th > Link< / th >
< th > Created< / th >
< th > Last Accessed< / th >
< th > < / th > <!-- remove column -->
< / tr >
< / tbody >
< / table >
< div id = "buttons" class = "buttons" >
< a id = "create-pad" class = "button create" href = "/pad/" > CREATE NEW WYSIWYG PAD< / a >
< a id = "create-code" class = "button create" href = "/code/" > CREATE NEW CODE PAD< / a >
< / div >
< / center >
< / div >
< div id = "bottom-bar" > < / div >
< / body >
< / html >
