Design for the pages Features, FAQ and Privacy

customize.dist/CryptPadlogo_op5.svg

@@ -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>

customize.dist/pages.js

@@ -239,113 +239,83 @@ define([
     Pages['/features.html'] = function () {
         return h('div#cp-main', [
             infopageTopbar(),
-            h('div.container.cp-container', [
+            h('div.container-fluid.cp_cont_features',[
+                h('div.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',[
+                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'))
-                ])
+                                ]),
+                            ]),
+                        ]), 
+                    ]),
+                ]),
             ]),
             infopageFooter()
         ]);
@@ -354,25 +324,35 @@ define([
     Pages['/privacy.html'] = function () {
         return h('div#cp-main', [
             infopageTopbar(),
-            h('div.container.cp-container', [
+            h('.container-fluid.cp-privacy-top', [
+                h('div.container',[
                     h('center', h('h1', Msg.policy_title)),
-                h('h2', Msg.policy_whatweknow),
+                ]),
+            ]),
+            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('div.container-fluid.cp-faq', [
+                h('div.container',[
                     h('center', h('h1', Msg.faq_title)),
-                h('p.cp-faq-header', h('a.nav-item.nav-link', {
+                ]),
+            ]),
+            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()

customize.dist/src/less2/pages/page-faq.less

@@ -3,20 +3,48 @@
 
 .infopages_main();
 .infopages_topbar();
-
+#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 {
-    padding: 0;
-    font-size: 1.2em;
         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-bottom: 0.5rem;
-        margin-top: 5px;
         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.active-faq {
+        &:after {
+            content: '\f068';
         }
-    .cp-faq-questions-q:hover {
-        color: #2e688f;
-        text-decoration: underline;
     }
     .cp-faq-questions-a {
         display: none;
-        padding: 0;
+        padding: 0.5rem;
+        margin-bottom: 0.5rem;
+        background-color: #fff;
+        color: #212529;
     }
+    margin-bottom: 1.5rem;
 }
 

customize.dist/src/less2/pages/page-features.less

@@ -3,53 +3,21 @@
 
 .infopages_main();
 .infopages_topbar();
-
+#cp-main {
-@features_th-bg: #555;
+    background-color: #fff;
-@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 {
+.cp_cont_features {
-        text-align: center;
+    padding-top: 3em;
-    }
+    padding-bottom: 3em;
-    .yes { background-color: @features_yes; }
+    background-image: url('/customize/cover_features.jpg');
-    .no { background-color: @features_no; }
+    background-size: cover;
-    .part { background-color: @features_part; }
+    background-repeat: no-repeat;
-    .left {
+    background-position: center;
-        text-align: left;
+    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
+        }
     }
 }
-

customize.dist/src/less2/pages/page-privacy.less

@@ -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;
+	}
+}

customize.dist/translations/messages.js

@@ -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',