Cleaned up the front page and added a little piece of code to show recent pads

pull/1/head
Caleb James DeLisle 10 years ago
parent 51544db9a2
commit 88fb6772e8

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

@ -1489,15 +1489,10 @@ h6 {
a { a {
cursor: pointer; cursor: pointer;
color: #35D7BB; color: rgb(39, 176, 0);
text-decoration: none text-decoration: none
} }
a:hover,a:focus {
border-bottom-color: #35D7BB;
color: #dff9f4
}
img { img {
height: auto; height: auto;
max-width: 100% max-width: 100%

@ -20,8 +20,9 @@
margin-right: 5px; margin-right: 5px;
margin-left: 5px; margin-left: 5px;
} }
.buttons h5 { .buttons {
margin-bottom: 10px; margin-bottom: 50px;
margin-top: 20px;
} }
.button { .button {
padding: 2px 6px 2px 6px; padding: 2px 6px 2px 6px;
@ -30,48 +31,140 @@
border-bottom: 1px solid #333333; border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC; 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 {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
/* 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;
}
</style> </style>
<script src="/bower_components/requirejs/require.js"></script> <script src="/bower_components/requirejs/require.js"></script>
</head> </head>
<body> <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> <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"> <div id="whatis">
<h1>CryptPad: Unity is Strength - Collaboration is Key</h1> <center>
<img class="imgcenter" src="/customize/cryptofist_small.png" />
<h1>Unity is Strength - Collaboration is Key</h1>
</center>
<p>CryptPad is the <strong>zero knowledge</strong> realtime collaborative editor. <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 Encryption carried out in your web browser protects the data from the server, the cloud
and the NSA. This project uses the <a href="http://ckeditor.com/">CKEditor</a> Visual Editor and the <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a> realtime and the NSA. This project uses the <a href="http://ckeditor.com/">CKEditor</a> Visual Editor
engine. The secret key is stored in the URL <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> which is never sent to the <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a> realtime engine and now
the server but is available to javascript so by sharing the URL, you give authorization <a href="http://visop-dev.com/Project+jQuery.sheet">jQuery.sheet</a> for realtime spreadsheet
to others who want to participate.</p> editing! The secret encryption key is stored in the URL
</code></pre><h2 id="security">Security</h2> <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> which is
<p>CryptPad is <em>private</em> not <em>anonymous</em>. Privacy protects your data, anonymity protects you. never sent to the server but is available to javascript so by sharing the URL, you give
As such, it is possible for a collaborator on the pad to include some silly/ugly/nasty things authorization to others who want to participate.</p>
in a CryptPad such as an image which reveals your IP address when your browser automatically
loads it or a script which plays Rick Asleys&#39;s greatest hits. It is acceptable for anyone </code></pre><h2 id="howitworks">How It Works</h2>
who does not have the key to be able to change anything in the pad or add anything, even the <p>CryptPad uses a varient of the
server.</p> <a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a>
<p>The server does have a certain power, it can send you evil javascript which does the wrong algorithm which is able to find distributed consensus using a Nakamoto Blockchain, a construct
thing (leaks the key or the data back to the server or to someone else). This is however an popularized by <a href="https://en.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. This way the
<a href="https://en.wikipedia.org/wiki/Attack_(computing)#Types_of_attacks">active attack</a> which makes it detectable. The NSA really hates doing these because they might algorithm can avoid the need for a central server to resolve Operational Transform Edit
get caught and laughed at and humiliated in front of the whole world (again). If you&#39;re making Conflicts and without the need for resolving conflicts, the server can be kept unaware of the
the NSA mad enough for them to use an active attack against you, Great Success Highfive, now take content which is being edited on the pad.</p>
the battery out of your computer before it spawns Agent Smith.</p>
<p><strong>NOTE</strong> Pads and spreadsheets will be removed after 30 days of inactivity</p>
<center> <center>
<noscript><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</noscript> <noscript>
<p>
<strong>OOPS</strong> In order to do encryption in your browser, Javascript is really
<strong>really</strong> required.
</p>
</noscript>
<script> <script>
require(['/common/crypto.js'], function (Crypto) { require(['/common/crypto.js'], function (Crypto) {
document.getElementById('buttons').setAttribute('style', ''); document.getElementById('buttons').setAttribute('style', '');
document.getElementById('create-pad').setAttribute('href', '/pad/#' + Crypto.genKey()); document.getElementById('create-pad').setAttribute('href', '/pad/#' + Crypto.genKey());
document.getElementById('create-sheet').setAttribute('href', '/sheet/#' + Crypto.genKey()); document.getElementById('create-sheet').setAttribute('href', '/sheet/#' + Crypto.genKey());
}); });
require([
'/customize/DecorateToolbar.js',
'/bower_components/jquery/dist/jquery.min.js'
], function (Dt) {
var $ = window.$;
Dt.main($('#bottom-bar'));
var recentPadsStr = localStorage['CryptPad_RECENTPADS'];
var recentPads;
if (recentPadsStr) { recentPads = JSON.parse(recentPadsStr); }
if (!recentPads) { return; }
recentPads.sort(function (a,b) { return b[1] - a[1]; });
var $table = $('table.scroll');
var $tbody = $table.find('tbody');
var now = new Date();
var hasRecent = false;
for (var i = 0; i < recentPads.length; i++) {
if (!recentPads[i]) { continue; }
if (now.getTime() - recentPads[i][1] > (1000*60*60*24*30)) { continue; }
hasRecent = true
var name = (recentPads[i][0].indexOf('/sheet/') !== -1) ? 'Sheet' : 'Pad';
var date = new Date(recentPads[i][1]).toLocaleDateString();
if (date === now.toLocaleDateString()) {
date = new Date(recentPads[i][1]).toLocaleTimeString().replace(/ /g, '');
}
$tbody.append('<tr>' +
'<td>' + name + '</td>' +
'<td><a href="' + recentPads[i][0] + '"' + '">' + recentPads[i][0] + '</a></td>' +
'<td>' + date + '</td>' +
'</tr>');
}
if (recentPads.length < 5) {
$tbody.attr('style', 'height: ' + (28 * recentPads.length + 2) + 'px');
} else {
$tbody.attr('style', 'height: ' + (28 * 5) + 'px');
}
if (hasRecent) {
$('table').attr('style', '');
$('#tryit').text('Your Recent pads (stored only in browser)');
}
});
</script> </script>
<h5 id="tryit">Try it out!</h5>
<table class="recent scroll" style="display:none">
<tbody>
</tbody>
</table>
<div id="buttons" class="buttons" style="display:none;"> <div id="buttons" class="buttons" style="display:none;">
<h5>Try it out!</h5> <a id="create-pad" class="button create" href="pad">CREATE NEW PAD</a>
<a id="create-pad" class="button create" href="pad">CREATE PAD</a> <a id="create-sheet" class="button create" href="sheet">CREATE NEW SPREADSHEET</a>
<a id="create-sheet" class="button create" href="sheet">CREATE SPREADSHEET</a>
</div> </div>
</center> </center>
</div> </div>
<div id="bottom-bar"></div>
</body> </body>
</html> </html>

@ -157,6 +157,26 @@ define([
lagElement.textContent = lagMsg; lagElement.textContent = lagMsg;
}; };
// this is a little hack, it should go in it's own file.
var rememberPad = function () {
var recentPadsStr = localStorage['CryptPad_RECENTPADS'];
var recentPads = [];
if (recentPadsStr) { recentPads = JSON.parse(recentPadsStr); }
if (window.location.href.indexOf('#') === -1) { return; }
var now = new Date();
var out = [];
for (var i = recentPads.length; i >= 0; i--) {
if (recentPads[i] &&
now.getTime() - recentPads[i][1] < (1000*60*60*24*30) &&
recentPads[i][0] !== window.location.href)
{
out.push(recentPads[i]);
}
}
out.push([window.location.href, now.getTime()]);
localStorage['CryptPad_RECENTPADS'] = JSON.stringify(out);
}
var create = function ($container, myUserName, realtime) { var create = function ($container, myUserName, realtime) {
var toolbar = createRealtimeToolbar($container); var toolbar = createRealtimeToolbar($container);
createEscape(toolbar.find('.rtwysiwyg-toolbar-leftside')); createEscape(toolbar.find('.rtwysiwyg-toolbar-leftside'));
@ -164,6 +184,8 @@ define([
var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside')); var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside'));
var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside')); var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside'));
rememberPad();
var connected = false; var connected = false;
realtime.onUserListChange(function (userList) { realtime.onUserListChange(function (userList) {

Loading…
Cancel
Save