diff --git a/customize.dist/404.html b/customize.dist/404.html
new file mode 100644
index 000000000..9298a5377
--- /dev/null
+++ b/customize.dist/404.html
@@ -0,0 +1,16 @@
+
+
+
+
+ CryptPad: Zero Knowledge, Collaborative Real Time Editing
+
+
+
+
+
+
+
diff --git a/customize.dist/four-oh-four.js b/customize.dist/four-oh-four.js
new file mode 100644
index 000000000..2f7b6212a
--- /dev/null
+++ b/customize.dist/four-oh-four.js
@@ -0,0 +1,58 @@
+define([
+ '/common/hyperscript.js',
+
+ 'less!/customize/src/less2/pages/page-404.less',
+], function (h) {
+ var scramble = h('h2#cp-scramble', "We couldn't find the page you were looking for");
+ var title = h('h1#title', "404");
+ var content = h('div#cp-main', [
+ title,
+ scramble
+ ]);
+ document.body.appendChild(content);
+
+ var die = function (n) { return Math.floor(Math.random() * n); };
+ var randomChar = function () {
+ return String.fromCharCode(die(94) + 34);
+ };
+ var mutate = function (S, i, c) {
+ var A = S.split("");
+ A[i] = c;
+ return A.join("");
+ };
+
+ var take = function (A) {
+ var n = die(A.length);
+ var choice = A[n];
+ A.splice(n, 1);
+ return choice;
+ };
+
+ var makeDecryptor = function (el, t, difficulty, cb) {
+ var Orig = el.innerText;
+ var options = [];
+ el.innerText = el.innerText.split("").map(function (c, i) {
+ Orig[i] = c;
+ options.push(i);
+ return randomChar();
+ }).join("");
+
+ return function f () {
+ if (die(difficulty) === 0) {
+ var choice = take(options);
+ el.innerText = mutate(el.innerText, choice, Orig.charAt(choice));
+ } else { // make a superficial change
+ el.innerText = mutate(el.innerText,
+ options[die(options.length)],
+ randomChar());
+ }
+ setTimeout(options.length > 0? f: cb, t);
+ };
+ };
+
+ makeDecryptor(title, 70, 17, function () { })();
+ makeDecryptor(scramble, 10, 8, function () {
+ console.log('done');
+ })();
+});
+
diff --git a/customize.dist/src/less2/404.less b/customize.dist/src/less2/404.less
new file mode 100644
index 000000000..ca1c3503e
--- /dev/null
+++ b/customize.dist/src/less2/404.less
@@ -0,0 +1,40 @@
+@import (once) './include/font.less';
+.font_neuropolitical();
+.font_open-sans();
+
+body.cp-page-index { @import "./pages/page-index.less"; }
+body.cp-page-contact { @import "./pages/page-contact.less"; }
+body.cp-page-login { @import "./pages/page-login.less"; }
+body.cp-page-register { @import "./pages/page-register.less"; }
+body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
+body.cp-page-about { @import "./pages/page-about.less"; }
+body.cp-page-privacy { @import "./pages/page-privacy.less"; }
+body.cp-page-terms { @import "./pages/page-terms.less"; }
+
+// Set the HTML style for the apps which shouldn't have a body scrollbar
+html.cp-app-noscroll {
+ @import "./include/app-noscroll.less";
+ .app-noscroll_main();
+}
+// Set the HTML style for printing slides
+html.cp-app-print {
+ @import "./include/app-print.less";
+ .app-print_main();
+}
+
+body.cp-readonly .cp-hidden-if-readonly { display:none !important; }
+
+body.cp-app-drive { @import "../../../drive/app-drive.less"; }
+body.cp-app-pad { @import "../../../pad/app-pad.less"; }
+body.cp-app-code { @import "../../../code/app-code.less"; }
+body.cp-app-slide { @import "../../../slide/app-slide.less"; }
+body.cp-app-file { @import "../../../file/app-file.less"; }
+body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
+body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
+body.cp-app-poll { @import "../../../poll/app-poll.less"; }
+body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
+body.cp-app-todo { @import "../../../todo/app-todo.less"; }
+body.cp-app-profile { @import "../../../profile/app-profile.less"; }
+body.cp-app-settings { @import "../../../settings/app-settings.less"; }
+body.cp-app-debug { @import "../../../debug/app-debug.less"; }
+
diff --git a/customize.dist/src/less2/pages/page-404.less b/customize.dist/src/less2/pages/page-404.less
new file mode 100644
index 000000000..7bac6d4bd
--- /dev/null
+++ b/customize.dist/src/less2/pages/page-404.less
@@ -0,0 +1,17 @@
+//@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+html, body {
+ margin: 0;
+ padding: 0;
+ #cp-main {
+ height: 100vh;
+ width: 100%;
+ padding-top: 20%;
+ text-align: center;
+ #cp-scramble {
+ font-family: monospace !important;
+ }
+ }
+}
+