dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Design for the pages Features, FAQ and Privacy

This commit is contained in:
Catalin Scripcariu 2018-05-02 17:41:04 +03:00
parent f324d33723
commit 3f071d87ea
10 changed files with 1566 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
customize.dist/CryptPadlogo_op5.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 393.94 476.2"><defs><style>.cls-1{opacity:0.04;}.cls-2{fill:#999;}.cls-3{fill:#4591c4;}</style></defs><title>CryptPadlogo</title><g id="Layer_2" data-name="Layer 2"><g id="svg2"><g id="g4764" class="cls-1"><path class="cls-2" d="M139.36,288.16l32.07-64.43a13.59,13.59,0,0,0-4.23-16.62,48.65,48.65,0,0,1-21.28-48.25l-23.47-15.31a75.74,75.74,0,0,0-3.36,21.87c0,22,9.52,41.45,24.35,55.54l-27.24,54.8c-.11,0-.2,0-.31,0a23.27,23.27,0,1,0,0,46.53,23,23,0,0,0,17.31-7.86h40.27V288.16Z"/><path class="cls-2" d="M278.28,275.73c-.57,0-1.11.13-1.68.17l-27.33-55.09c14.75-14.07,24.2-33.47,24.2-55.39a77.13,77.13,0,0,0-3.06-21.72l-23.62,15.45a51.69,51.69,0,0,1,.44,6.27A50.21,50.21,0,0,1,225.65,207a13.58,13.58,0,0,0-4.22,16.62l31.77,64.58h-34V314.4h41.63a23.23,23.23,0,1,0,17.41-38.67Z"/><polygon class="cls-2" points="270.41 143.7 270.41 143.7 270.41 143.7 270.41 143.7"/><circle class="cls-3" cx="196.06" cy="167.4" r="21.21"/><path class="cls-3" d="M362.25,21.36a31.14,31.14,0,0,0-18.1,5.8L197,0,50,27.16a31.62,31.62,0,1,0-33.68,53.4v212c0,19.95,8.93,41.51,26.62,64.08,15.66,20,37.82,40.46,65.89,60.83a603,603,0,0,0,57,36.21,31.54,31.54,0,0,0,60,1.25,606,606,0,0,0,59.26-37.46c28.09-20.37,50.23-40.86,65.9-60.83,17.7-22.6,26.61-44.13,26.61-64.08V80.38a31.46,31.46,0,0,0-15.39-59ZM62.82,55.94,196.61,31.32l134.33,24.8a29.58,29.58,0,0,0,.9,5.61L253.09,113a76.78,76.78,0,0,0-113.69.36L61.55,62.82A31.8,31.8,0,0,0,62.82,55.94ZM350.49,288.21a51.41,51.41,0,0,1-.73,8.51c-3.16,12.6-10.11,25.8-20.82,39.47-13.41,17.09-32.43,34.52-56.48,51.95a532.75,532.75,0,0,1-54.19,34.09,31.5,31.5,0,0,0-43.73-.62,534,534,0,0,1-53.06-33.47c-24-17.43-42.9-34.86-56.31-51.95-12.77-16.31-20.25-31.94-22.26-46.71,0-.41,0-.86,0-1.27V82.37a31.51,31.51,0,0,0,8.69-5.25l88.88,57.75.37-.36,10.5,6.88a51,51,0,0,1,45.07-27,50.37,50.37,0,0,1,45.08,27.15l22.09-14.3L341.44,76.4A32.55,32.55,0,0,0,350.49,82Z"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
customize.dist/cover-privacy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
customize.dist/cover_features.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
customize.dist/coverfaq.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

222
customize.dist/pages.js
View File

@ -239,113 +239,83 @@ define([
Pages['/features.html'] = function () {
return h('div#cp-main', [
infopageTopbar(),
h('div.container.cp-container', [
h('center', h('h1', Msg.features_title)),
h('table#cp-features-table', [
h('thead', h('tr', [
h('th', Msg.features_feature),
h('th', Msg.features_anon),
h('th', Msg.features_registered),
h('th', Msg.features_notes)
])),
h('tbody', [
h('tr', [
h('td', Msg.features_f_pad),
h('td.yes', '✔'),// u2714, u2715
h('td.yes', '✔'),
h('td', Msg.features_f_pad_notes)
]),
h('tr', [
h('td', Msg.features_f_history),
h('td.yes', '✔'),
h('td.yes', '✔'),
h('td', Msg.features_f_history_notes)
]),
h('tr', [
h('td', Msg.features_f_export),
h('td.yes', '✔'),
h('td.yes', '✔'),
h('td', Msg.features_f_export_notes)
]),
h('tr', [
h('td', Msg.features_f_todo),
h('td.yes', '✔'),
h('td.yes', '✔'),
h('td')
]),
h('tr', [
h('td', Msg.features_f_viewFiles),
h('td.yes', '✔'),
h('td.yes', '✔'),
h('td')
]),
h('tr', [
h('td', Msg.features_f_drive),
h('td.part', '~'),
h('td.yes', '✔'),
h('td', Msg.features_f_drive_notes)
]),
h('tr', [
h('td', Msg.features_f_uploadFiles),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td')
]),
h('tr', [
h('td', Msg.features_f_embedFiles),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td')
]),
h('tr', [
h('td', Msg.features_f_multiple),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td', Msg.features_f_multiple_notes)
]),
h('tr', [
h('td', Msg.features_f_logoutEverywhere),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td', Msg.features_f_logoutEverywhere_notes || '')
]),
h('tr', [
h('td', Msg.features_f_templates),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td', Msg.features_f_templates_notes)
]),
h('tr', [
h('td', Msg.features_f_profile),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td', Msg.features_f_profile_notes)
]),
h('tr', [
h('td', Msg.features_f_tags),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td', Msg.features_f_tags_notes)
]),
h('tr', [
h('td', Msg.features_f_contacts),
h('td.no', '✕'),
h('td.yes', '✔'),
h('td', Msg.features_f_contacts_notes)
]),
h('tr', [
h('td', Msg.features_f_storage),
h('td.no', Msg.features_f_storage_anon),
setHTML(h('td.yes.left'), Msg.features_f_storage_registered),
h('td')
]),
])
h('div.container-fluid.cp_cont_features',[
h('div.container',[
h('center', h('h1', Msg.features_title)),
]),
]),
h('div.container',[
h('div.row.cp-container.cp-features-web.justify-content-sm-center',[
h('div.col-12.col-sm-6.cp-anon-user',[
h('div.card',[
h('div.card-body',[
h('h3.text-center',Msg.features_anon)
]),
h('ul.list-group.list-group-flush', [
h('li.list-group-item.text-center', Msg.features_f_pad , [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_pad_notes}, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_history, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_history_notes }, h('i.fa.fa-question') )
]),
h('li.list-group-item.text-center', Msg.features_f_export, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_export_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_todo),
h('li.list-group-item.text-center', Msg.features_f_viewFiles),
h('li.list-group-item.text-center', Msg.features_f_drive),
h('li.list-group-item.text-center', Msg.features_f_storage_anon),
]),
]),
]),
h('div.col-12.col-sm-6.cp-regis-user',[
h('div.card',[
h('div.card-body',[
h('h3.text-center',Msg.features_registered)
]),
h('ul.list-group.list-group-flush', [
h('li.list-group-item.text-center', Msg.features_f_pad, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_pad_notes}, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_history, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_history_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_export, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_export_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_todo),
h('li.list-group-item.text-center', Msg.features_f_viewFiles),
h('li.list-group-item.text-center', Msg.features_f_drive_full),
h('li.list-group-item.text-center', Msg.features_f_uploadFiles),
h('li.list-group-item.text-center', Msg.features_f_embedFiles),
h('li.list-group-item.text-center', Msg.features_f_multiple, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_multiple_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_logoutEverywhere),
h('li.list-group-item.text-center', Msg.features_f_templates, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_templates_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_profile, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_profile_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_tags, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_tags_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', Msg.features_f_contacts, [
h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_contacts_notes }, h('i.fa.fa-question'))
]),
h('li.list-group-item.text-center', setHTML(h('div'), Msg.features_f_storage_registered)),
]),
h('div.card-body',[
h('div#cp-features-register', [
h('a', {
href: '/register/'
}, h('button.cp-features-register-button', 'Register for free'))
]),
]),
]),
]),
]),
h('div#cp-features-register', [
h('a', {
href: '/register/'
}, h('button.cp-features-register-button', 'Register for free'))
])
]),
infopageFooter()
]);
@ -354,25 +324,35 @@ define([
Pages['/privacy.html'] = function () {
return h('div#cp-main', [
infopageTopbar(),
h('div.container.cp-container', [
h('center', h('h1', Msg.policy_title)),
h('h2', Msg.policy_whatweknow),
h('.container-fluid.cp-privacy-top', [
h('div.container',[
h('center', h('h1', Msg.policy_title)),
]),
]),
h('div.container.cp-container.cp-privacy',[
h('h3', Msg.policy_whatweknow),
h('hr'),
setHTML(h('p'), Msg.policy_whatweknow_p1),
h('h2', Msg.policy_howweuse),
h('h3', Msg.policy_howweuse),
h('hr'),
h('p', Msg.policy_howweuse_p1),
h('p', Msg.policy_howweuse_p2),
h('h2', Msg.policy_whatwetell),
h('h3', Msg.policy_whatwetell),
h('hr'),
h('p', Msg.policy_whatwetell_p1),
h('h2', Msg.policy_links),
h('h3', Msg.policy_links),
h('hr'),
h('p', Msg.policy_links_p1),
h('h2', Msg.policy_ads),
h('h3', Msg.policy_ads),
h('hr'),
h('p', Msg.policy_ads_p1),
h('h2', Msg.policy_choices),
h('h3', Msg.policy_choices),
h('hr'),
h('p', Msg.policy_choices_open),
setHTML(h('p'), Msg.policy_choices_vpn),
]),
@ -393,8 +373,10 @@ define([
var question = h('p.cp-faq-questions-q#' + hash);
$(question).click(function () {
if ($(answer).is(':visible')) {
$(question).toggleClass('active-faq');
return void $(answer).slideUp();
}
$(question).toggleClass('active-faq');
$(answer).slideDown();
});
questions.push(h('div.cp-faq-questions-items', [
@ -413,11 +395,15 @@ define([
}
return h('div#cp-main', [
infopageTopbar(),
h('div.container.cp-container', [
h('center', h('h1', Msg.faq_title)),
h('p.cp-faq-header', h('a.nav-item.nav-link', {
h('div.container-fluid.cp-faq', [
h('div.container',[
h('center', h('h1', Msg.faq_title)),
]),
]),
h('div.container.cp-faq-ques-det',[
h('div.cp-faq-header.text-center', h('a.nav-item.nav-link', {
href: '/what-is-cryptpad.html'
}, Msg.faq_whatis)),
}, setHTML(h('h4'),Msg.faq_whatis))),
h('div.cp-faq-container', categories)
]),
infopageFooter()

72
customize.dist/src/less2/pages/page-faq.less
View File

@ -3,20 +3,48 @@
.infopages_main();
.infopages_topbar();
.cp-faq-header {
padding: 0;
font-size: 1.2em;
a {
padding: 0;
#cp-main {
background: #fff;
}
.cp-faq {
padding-top: 3em;
padding-bottom: 3em;
background-image: url(/customize/coverfaq.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
.container {
color: #fff;
font-family: "Open Sans";
}
h1 {
font-weight: 700;
}
}
.cp-faq-ques-det {
.cp-faq-header {
a {
padding: 0;
h4 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
span {
font-family: "Neuropolitical";
}
}
}
}
}
.cp-faq-container {
.cp-faq-questions-items {
background: #3a84b6;
color: #fff;
padding: 1rem 1rem 0.5rem 1rem;
margin-bottom: 1rem;
}
.cp-faq-questions-q {
color: #3a84b6;
padding: 0;
margin-bottom: 0;
margin-top: 5px;
margin-bottom: 0.5rem;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -24,14 +52,32 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&:hover {
text-decoration: none;
}
&:after {
content: '\f067';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
float: right;
text-decoration: none;
font-size: 13px;
line-height: 1.5;
}
}
.cp-faq-questions-q:hover {
color: #2e688f;
text-decoration: underline;
.cp-faq-questions-q.active-faq {
&:after {
content: '\f068';
}
}
.cp-faq-questions-a {
display: none;
padding: 0;
padding: 0.5rem;
margin-bottom: 0.5rem;
background-color: #fff;
color: #212529;
}
margin-bottom: 1.5rem;
}

111
customize.dist/src/less2/pages/page-features.less
View File

@ -3,53 +3,21 @@
.infopages_main();
.infopages_topbar();
@features_th-bg: #555;
@features_th-fg: #fff;
@features_tr-bg-alt: #ddd;
@features_notes: #333;
@features_yes: #c4ffca;
@features_no: #ffc4bc;
@features_part: #faffd3;
table#cp-features-table {
width: 100%;
th {
background-color: @features_th-bg;
color: @features_th-fg;
padding: 10px;
border: 1px solid @features_th-bg;
}
tbody {
td {
height: 32px;
line-height: 32px;
padding: 5px;
border: 1px solid @features_th-bg;
}
tr:nth-child(odd) {
background-color: @features_tr-bg-alt;
}
}
td:nth-child(4) {
color: @features_notes;
font-size: 14px;
font-style: italic;
}
td:first-child {
font-weight: bold;
}
.yes, .no, .part {
text-align: center;
}
.yes { background-color: @features_yes; }
.no { background-color: @features_no; }
.part { background-color: @features_part; }
.left {
text-align: left;
#cp-main {
background-color: #fff;
}
.cp_cont_features {
padding-top: 3em;
padding-bottom: 3em;
background-image: url('/customize/cover_features.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
h1 {
font-weight: 700;
color: #fff;
}
}
#cp-features-register {
text-align: center;
padding: 20px;
@ -62,6 +30,57 @@ table#cp-features-table {
border-radius: 0;
&:hover {
transform: scale(1.05);
cursor: pointer;
}
padding: 0.5em 1em;
}
.cp-features-web {
.card {
box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3);
border: none;
}
h3 {
color: #fff;
}
.list-group {
li {
&:before {
content: "\f00c";
font-family: "FontAwesome";
font-size: 14px;
color: @cryptpad_color_blue;
padding-right: 10px;
}
}
div {
display: inline;
}
}
a.voted {
opacity: 0.6;
margin-left: 15px;
&:hover {
opacity: 1;
}
}
.list-group-item {
border-color: rgba(69, 145, 196, 0.125);
}
}
.cp-anon-user {
.card-body {
background-color: @cryptpad_color_blue;
}
}
.cp-regis-user {
@media (max-width:767px) {
margin-top: 3em;
}
.card-body {
&:first-of-type{
background: #4591C4;
background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
}
}
}

43
customize.dist/src/less2/pages/page-privacy.less
View File

@ -3,3 +3,46 @@
.infopages_main();
.infopages_topbar();
#cp-main {
background: #fff;
}
.cp-privacy-top {
padding-top: 3em;
padding-bottom: 3em;
background-image: url(/customize/cover-privacy.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
.container {
color: #fff;
font-family: "Open Sans";
h1 {
font-weight: 700;
}
a {
color: #fff;
text-decoration: underline;
}
p {
padding-top: 1em;
}
}
}
.cp-privacy {
background-image: url(/customize/CryptPadlogo_op5.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
hr {
margin-left: 0;
width: 15rem;
border-top: 2px solid #4591C4;
}
h3 {
color: #1E1F1F;
font-weight: 700;
}
p {
color: #3F4141;
}
}

7
customize.dist/translations/messages.js
View File

@ -744,7 +744,8 @@ define(function () {
out.features_f_history = "History";
out.features_f_history_notes = "View and restore any version of your pads";
out.features_f_todo = "Create a TODO-list";
out.features_f_drive = "CryptDrive";
out.features_f_drive = "Basic set of features CryptDrive";
out.features_f_drive_full = "Full set of features CryptDrive"
out.features_f_drive_notes = "Basic features for anonymous users";
out.features_f_export = "Export/Import";
out.features_f_export_notes = "For pads and CryptDrive";
@ -765,14 +766,14 @@ define(function () {
out.features_f_contacts = "Contacts application";
out.features_f_contacts_notes = "Add contacts and chat with them in an encrypted session";
out.features_f_storage = "Storage";
out.features_f_storage_anon = "Pads deleted after 3 months";
out.features_f_storage_anon = "Pads are deleted after 3 months";
out.features_f_storage_registered = "Free: 50MB<br>Premium: 5GB/20GB/50GB";
// faq.html
out.faq_link = "FAQ";
out.faq_title = "Frequently Asked Questions";
out.faq_whatis = "What is CryptPad?";
out.faq_whatis = "What is <span>CryptPad</span>?";
out.faq = {};
out.faq.keywords = {
title: 'Keywords',

1290
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff